[Refactor] Convert save viewport in workflow to watcher (#3673)

src/components/graph/GraphCanvas.vue

@@ -220,6 +220,32 @@ 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]
+        }
+      }
+    } else {
+      delete extra.ds
+    }
+  }
+)
+
 const loadCustomNodesI18n = async () => {
   try {
     const i18nData = await api.getCustomNodesI18n()

src/scripts/app.ts

@@ -425,30 +425,6 @@ export class ComfyApp {
     }
   }
 
-  #addRestoreWorkflowView() {
-    const serialize = LGraph.prototype.serialize
-    const self = this
-    LGraph.prototype.serialize = function (...args) {
-      const workflow = serialize.apply(this, args)
-
-      // Store the drag & scale info in the serialized workflow if the setting is enabled
-      if (useSettingStore().get('Comfy.EnableWorkflowViewRestore')) {
-        if (!workflow.extra) {
-          workflow.extra = {}
-        }
-        workflow.extra.ds = {
-          scale: self.canvas.ds.scale,
-          offset: [...self.canvas.ds.offset]
-        }
-      } else if (workflow.extra?.ds) {
-        // Clear any old view data
-        delete workflow.extra.ds
-      }
-
-      return workflow
-    }
-  }
-
   /**
    * Adds a handler allowing drag+drop of files onto the window to load workflows
    */
@@ -768,7 +744,6 @@ export class ComfyApp {
     this.#addProcessKeyHandler()
     this.#addConfigureHandler()
     this.#addApiUpdateHandlers()
-    this.#addRestoreWorkflowView()
 
     this.graph = new LGraph()