From bd1890a4227d4836b4b467f1d04800b95bfd57b7 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Tue, 29 Apr 2025 06:49:41 +1000
Subject: [PATCH] [Refactor] Convert save viewport in workflow to watcher
 (#3673)

---
 src/components/graph/GraphCanvas.vue | 26 ++++++++++++++++++++++++++
 src/scripts/app.ts                   | 25 -------------------------
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index efa141d29..6327a8a41 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/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()
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 9c67b181e..4fa1c29b3 100644
--- a/src/scripts/app.ts
+++ b/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()