Use upstreamed viewport serialisation (#3864)

src/components/graph/GraphCanvas.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import type { LGraphNode, Point } from '@comfyorg/litegraph'
+import type { LGraphNode } from '@comfyorg/litegraph'
 import { useEventListener } from '@vueuse/core'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
@@ -225,32 +225,6 @@ watch(
   }
 )
 
-// Save the drag & scale info in the serialized workflow if the setting is enabled
-watch(
-  [
-    () => canvasStore.canvas,
-    () => settingStore.get('Comfy.EnableWorkflowViewRestore')
-  ],
-  ([canvas, enableWorkflowViewRestore]) => {
-    const extra = canvas?.graph?.extra
-    if (!extra) return
-
-    if (enableWorkflowViewRestore) {
-      extra.ds = {
-        get scale() {
-          return canvas.ds.scale
-        },
-        get offset() {
-          const [x, y] = canvas.ds.offset
-          return [x, y] satisfies Point
-        }
-      }
-    } else {
-      delete extra.ds
-    }
-  }
-)
-
 useEventListener(
   canvasRef,
   'litegraph:no-items-selected',

src/composables/useLitegraphSettings.ts

@@ -128,4 +128,10 @@ export const useLitegraphSettings = () => {
       'LiteGraph.Pointer.TrackpadGestures'
     )
   })
+
+  watchEffect(() => {
+    LiteGraph.saveViewportWithGraph = settingStore.get(
+      'Comfy.EnableWorkflowViewRestore'
+    )
+  })
 }