Export the viewport offset and scale with the graph (#1042)

src/LGraph.ts

@@ -1,3 +1,4 @@
+import type { DragAndScaleState } from "./DragAndScale"
 import type {
   Dictionary,
   IContextMenuValue,
@@ -51,6 +52,7 @@ export interface LGraphConfig {
 export interface LGraphExtra extends Dictionary<unknown> {
   reroutes?: SerialisableReroute[]
   linkExtensions?: { id: number, parentId: number | undefined }[]
+  ds?: DragAndScaleState
 }
 
 export interface BaseLGraph {
@@ -1374,6 +1376,12 @@ export class LGraph implements LinkNetwork, BaseLGraph, Serialisable<Serialisabl
     }
   }
 
+  /** @returns The drag and scale state of the first attached canvas, otherwise `undefined`. */
+  #getDragAndScale(): DragAndScaleState | undefined {
+    const ds = this.list_of_graphcanvas?.at(0)?.ds
+    if (ds) return { scale: ds.scale, offset: ds.offset }
+  }
+
   /**
    * Prepares a shallow copy of this object for immediate serialisation or structuredCloning.
    * The return value should be discarded immediately.
@@ -1383,7 +1391,7 @@ export class LGraph implements LinkNetwork, BaseLGraph, Serialisable<Serialisabl
    * It is intended for use with {@link structuredClone} or {@link JSON.stringify}.
    */
   asSerialisable(options?: { sortNodes: boolean }): SerialisableGraph & Required<Pick<SerialisableGraph, "nodes" | "groups" | "extra">> {
-    const { id, revision, config, state, extra } = this
+    const { id, revision, config, state } = this
 
     const nodeList = !LiteGraph.use_uuids && options?.sortNodes
       // @ts-expect-error If LiteGraph.use_uuids is false, ids are numbers.
@@ -1397,6 +1405,11 @@ export class LGraph implements LinkNetwork, BaseLGraph, Serialisable<Serialisabl
     const floatingLinks = this.floatingLinks.size ? [...this.floatingLinks.values()].map(x => x.asSerialisable()) : undefined
     const reroutes = this.reroutes.size ? [...this.reroutes.values()].map(x => x.asSerialisable()) : undefined
 
+    // Save scale and offset
+    const extra = { ...this.extra }
+    if (LiteGraph.saveViewportWithGraph) extra.ds = this.#getDragAndScale()
+    if (!extra.ds) delete extra.ds
+
     const data: ReturnType<typeof this.asSerialisable> = {
       id,
       revision,

src/LiteGraphGlobal.ts

@@ -308,6 +308,12 @@ export class LiteGraphGlobal {
    */
   truncateWidgetValuesFirst: boolean = false
 
+  /**
+   * If `true`, the current viewport scale & offset of the first attached canvas will be included with the graph when exporting.
+   * @default true
+   */
+  saveViewportWithGraph: boolean = true
+
   // TODO: Remove legacy accessors
   LGraph = LGraph
   LLink = LLink

test/__snapshots__/litegraph.test.ts.snap

@@ -175,6 +175,7 @@ LiteGraphGlobal {
   "registered_slot_in_types": {},
   "registered_slot_out_types": {},
   "release_link_on_empty_shows_menu": false,
+  "saveViewportWithGraph": true,
   "search_filter_enabled": false,
   "search_hide_on_mouse_leave": true,
   "search_show_all_on_open": true,