Fit view on workflow load without extra.ds (#3822)

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/assets/collapsed_multiline.json

@@ -33,5 +33,11 @@
   "links": [],
   "groups": [],
   "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/default.json

@@ -130,6 +130,11 @@
   ],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/every_node_color.json

@@ -499,6 +499,11 @@
   ],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/group_node_identical_nodes_hidden_inputs.json

@@ -160,4 +160,4 @@
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/group_node_v1.3.3.json

@@ -43,6 +43,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "groupNodes": {
       "group_node": {
         "nodes": [
@@ -401,4 +405,4 @@
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/legacy_group_node.json

@@ -110,6 +110,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "groupNodes": {
       "hello": {
         "nodes": [
@@ -249,4 +253,4 @@
     }
   },
   "version": 0.4
-}
+}

browser_tests/assets/missing_models_from_node_properties.json

@@ -44,6 +44,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/missing_nodes_converted_widget.json

@@ -61,6 +61,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/note_nodes.json

@@ -50,6 +50,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/only_optional_inputs.json

@@ -38,7 +38,11 @@
   "groups": [],
   "config": {},
   "extra": {
-    "groupNodes": {}
+    "groupNodes": {},
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
   },
   "version": 0.4
-}
+}

browser_tests/assets/primitive/primitive_node_unconnected_dom_widget.json

@@ -54,6 +54,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/renamed_converted_widget.json

@@ -92,10 +92,14 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "VHS_latentpreview": true,
     "VHS_latentpreviewrate": 0,
     "VHS_MetadataImage": false,
     "VHS_KeepIntermediate": false
   },
   "version": 0.4
-}
+}

browser_tests/assets/reroute/native_reroute.json

@@ -84,6 +84,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "reroutes": [
       {
         "id": 1,

browser_tests/assets/single_connected_reroute_node.json

@@ -106,10 +106,7 @@
   "extra": {
     "ds": {
       "scale": 1,
-      "offset": {
-        "0": 0,
-        "1": 0
-      }
+      "offset": [0, 0]
     }
   },
   "version": 0.4

browser_tests/assets/widgets/boolean_widget.json

@@ -31,5 +31,11 @@
   "links": [],
   "groups": [],
   "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/widgets/load_animated_webp.json

@@ -8,4 +8,4 @@
       "title": "Load Animated Image"
     }
   }
-}
+}

browser_tests/assets/widgets/load_audio_widget.json

@@ -27,6 +27,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }

browser_tests/assets/widgets/load_image_widget.json

@@ -41,6 +41,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}

browser_tests/assets/widgets/save_animated_webp.json

@@ -54,7 +54,11 @@
   "groups": [],
   "config": {},
   "extra": {
-    "frontendVersion": "1.17.0"
+    "frontendVersion": "1.17.0",
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
   },
   "version": 0.4
 }

browser_tests/tests/interaction.spec.ts

@@ -666,6 +666,12 @@ test.describe('Load workflow', () => {
       expect(activeWorkflowName).toEqual(workflowPathB)
     })
   })
+
+  test('Auto fit view after loading workflow', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.EnableWorkflowViewRestore', false)
+    await comfyPage.loadWorkflow('single_ksampler')
+    await expect(comfyPage.canvas).toHaveScreenshot('single_ksampler_fit.png')
+  })
 })
 
 test.describe('Load duplicate workflow', () => {

package-lock.json

@@ -12,7 +12,7 @@
         "@alloc/quick-lru": "^5.2.0",
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
         "@comfyorg/comfyui-electron-types": "^0.4.43",
-        "@comfyorg/litegraph": "^0.15.6",
+        "@comfyorg/litegraph": "^0.15.7",
         "@primevue/forms": "^4.2.5",
         "@primevue/themes": "^4.2.5",
         "@sentry/vue": "^8.48.0",
@@ -482,9 +482,9 @@
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.15.6",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.15.6.tgz",
-      "integrity": "sha512-ZOHBctjY4pu7FUQibO1z8HD+1JKhNy/tKCMKds9CJK3XVbEcA1+GiRfvp5lAhpkxJStmvD1WLcDgkb/uMAWKWQ==",
+      "version": "0.15.7",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.15.7.tgz",
+      "integrity": "sha512-Z1NKx5OgGGcoKx6lB/r81Yhl+DhPFg5QYIgGqAjVEzy5/G5fQtX9k9WZL3oZoP89xEhT7BT931To7pDb3cuAYQ==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -72,7 +72,7 @@
     "@alloc/quick-lru": "^5.2.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
     "@comfyorg/comfyui-electron-types": "^0.4.43",
-    "@comfyorg/litegraph": "^0.15.6",
+    "@comfyorg/litegraph": "^0.15.7",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/scripts/app.ts

@@ -1069,6 +1069,13 @@ export class ComfyApp {
       ) {
         this.canvas.ds.offset = graphData.extra.ds.offset
         this.canvas.ds.scale = graphData.extra.ds.scale
+      } else {
+        // @note: Set view after the graph has been rendered once. fitView uses
+        // boundingRect on nodes to calculate the view bounds, which only become
+        // available after the first render.
+        requestAnimationFrame(() => {
+          useLitegraphService().fitView()
+        })
       }
     } catch (error) {
       useDialogService().showErrorDialog(error, {

src/scripts/defaultGraph.ts

@@ -132,7 +132,12 @@ export const defaultGraph: ComfyWorkflowJSON = {
   ],
   groups: [],
   config: {},
-  extra: {},
+  extra: {
+    ds: {
+      offset: [0, 0],
+      scale: 1
+    }
+  },
   version: 0.4
 }
 

src/services/litegraphService.ts

@@ -5,7 +5,8 @@ import {
   LGraphNode,
   LiteGraph,
   RenderShape,
-  type Vector2
+  type Vector2,
+  createBounds
 } from '@comfyorg/litegraph'
 import type {
   ISerialisableNodeInput,
@@ -651,11 +652,23 @@ export const useLitegraphService = () => {
     canvas.setDirty(true, true)
   }
 
+  function fitView() {
+    const canvas = canvasStore.canvas
+    if (!canvas) return
+
+    const bounds = createBounds(app.graph.nodes)
+    if (!bounds) return
+
+    canvas.ds.fitToBounds(bounds)
+    canvas.setDirty(true, true)
+  }
+
   return {
     registerNodeDef,
     addNodeOnGraph,
     getCanvasCenter,
     goToNode,
-    resetView
+    resetView,
+    fitView
   }
 }

tests-ui/workflows/default_workflow.json

@@ -373,4 +373,4 @@
     }
   },
   "version": 0.4
-}
+}