[Refactor] Upstream drag zoom feature to litegraph (#2459)

package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.16",
-        "@comfyorg/litegraph": "^0.8.68",
+        "@comfyorg/litegraph": "^0.8.69",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -1944,9 +1944,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.68",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.68.tgz",
-      "integrity": "sha512-/c4PH2/vNE2DezdZYdXapCq4jGvSHJqrCT1S9WL3uJ5XYjRcanztLYUGkXgYXNEHfvUV/1oerF3p9o3Kvglwhg==",
+      "version": "0.8.69",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.69.tgz",
+      "integrity": "sha512-nc2A4V+nnP7rFgn2ZCwtNPiO2rsvVWgl+Djk/xQRv7G8Xhxyl04Md/w2JLyXvDABc4y3fRBTQ1f7bh0v7xa0SQ==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -84,7 +84,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.16",
-    "@comfyorg/litegraph": "^0.8.68",
+    "@comfyorg/litegraph": "^0.8.69",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/components/graph/GraphCanvas.vue

@@ -180,6 +180,12 @@ watchEffect(() => {
   if (canvas) canvas.maximumFps = maximumFps
 })
 
+watchEffect(() => {
+  const dragZoomEnabled = settingStore.get('Comfy.Graph.CtrlShiftZoom')
+  const { canvas } = canvasStore
+  if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
+})
+
 watchEffect(() => {
   CanvasPointer.doubleClickTime = settingStore.get(
     'Comfy.Pointer.DoubleClickTime'

src/scripts/app.ts

@@ -115,8 +115,6 @@ export class ComfyApp {
   canvas: LGraphCanvas
   dragOverNode: LGraphNode | null
   canvasEl: HTMLCanvasElement
-  // x, y, scale
-  zoom_drag_start: [number, number, number] | null
   lastNodeErrors: any[] | null
   /** @type {ExecutionErrorWsMessage} */
   lastExecutionError: { node_id?: NodeId } | null
@@ -485,55 +483,6 @@ export class ComfyApp {
     )
   }
 
-  /**
-   * Handle mouse
-   *
-   * Move group by header
-   */
-  #addProcessMouseHandler() {
-    const self = this
-
-    const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown
-    LGraphCanvas.prototype.processMouseDown = function (e) {
-      // prepare for ctrl+shift drag: zoom start
-      const useFastZoom = useSettingStore().get('Comfy.Graph.CtrlShiftZoom')
-      if (useFastZoom && e.ctrlKey && e.shiftKey && !e.altKey && e.buttons) {
-        self.zoom_drag_start = [e.x, e.y, this.ds.scale]
-        return
-      }
-
-      const res = origProcessMouseDown.apply(this, arguments)
-      return res
-    }
-    const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove
-    LGraphCanvas.prototype.processMouseMove = function (e) {
-      // handle ctrl+shift drag
-      if (e.ctrlKey && e.shiftKey && self.zoom_drag_start) {
-        // stop canvas zoom action
-        if (!e.buttons) {
-          self.zoom_drag_start = null
-          return
-        }
-
-        // calculate delta
-        let deltaY = e.y - self.zoom_drag_start[1]
-        let startScale = self.zoom_drag_start[2]
-
-        let scale = startScale - deltaY / 100
-
-        this.ds.changeScale(scale, [
-          self.zoom_drag_start[0],
-          self.zoom_drag_start[1]
-        ])
-        this.graph.change()
-
-        return
-      }
-
-      return origProcessMouseMove.apply(this, arguments)
-    }
-  }
-
   /**
    * Handle keypress
    */
@@ -831,7 +780,6 @@ export class ComfyApp {
     await useWorkspaceStore().workflow.syncWorkflows()
     await useExtensionService().loadExtensions()
 
-    this.#addProcessMouseHandler()
     this.#addProcessKeyHandler()
     this.#addConfigureHandler()
     this.#addApiUpdateHandlers()