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

huchenlei · github-actions · web-flow · commit 2a297e512d57 · 2025-05-08T17:39:44.000-04:00
Co-authored-by: github-actions &lt;github-actions@github.com&gt;
diff --git a/browser_tests/assets/collapsed_multiline.json b/browser_tests/assets/collapsed_multiline.json
@@ -33,5 +33,11 @@
   "links": [],
   "groups": [],
   "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }
diff --git a/browser_tests/assets/default.json b/browser_tests/assets/default.json
@@ -130,6 +130,11 @@
   ],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
 }
diff --git a/browser_tests/assets/every_node_color.json b/browser_tests/assets/every_node_color.json
@@ -499,6 +499,11 @@
   ],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}
diff --git a/browser_tests/assets/group_node_identical_nodes_hidden_inputs.json b/browser_tests/assets/group_node_identical_nodes_hidden_inputs.json
@@ -160,4 +160,4 @@
     }
   },
   "version": 0.4
-}
+}
diff --git a/browser_tests/assets/group_node_v1.3.3.json b/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
-}
+}
diff --git a/browser_tests/assets/legacy_group_node.json b/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
-}
+}
diff --git a/browser_tests/assets/missing_models_from_node_properties.json b/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
 }
diff --git a/browser_tests/assets/missing_nodes_converted_widget.json b/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
-}
+}
diff --git a/browser_tests/assets/note_nodes.json b/browser_tests/assets/note_nodes.json
@@ -50,6 +50,11 @@
   "links": [],
   "groups": [],
   "config": {},
-  "extra": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}
diff --git a/browser_tests/assets/only_optional_inputs.json b/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
-}
+}
diff --git a/browser_tests/assets/primitive/primitive_node_unconnected_dom_widget.json b/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
 }
diff --git a/browser_tests/assets/renamed_converted_widget.json b/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
-}
+}
diff --git a/browser_tests/assets/reroute/native_reroute.json b/browser_tests/assets/reroute/native_reroute.json
@@ -84,6 +84,10 @@
   "groups": [],
   "config": {},
   "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    },
     "reroutes": [
       {
         "id": 1,
diff --git a/browser_tests/assets/single_connected_reroute_node.json b/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
diff --git a/browser_tests/assets/widgets/boolean_widget.json b/browser_tests/assets/widgets/boolean_widget.json
@@ -31,5 +31,11 @@
   "links": [],
   "groups": [],
   "config": {},
+  "extra": {
+    "ds": {
+      "offset": [0, 0],
+      "scale": 1
+    }
+  },
   "version": 0.4
-}
+}
diff --git a/browser_tests/assets/widgets/load_animated_webp.json b/browser_tests/assets/widgets/load_animated_webp.json
@@ -8,4 +8,4 @@
       "title": "Load Animated Image"
     }
   }
-}
+}
diff --git a/browser_tests/assets/widgets/load_audio_widget.json b/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
 }
diff --git a/browser_tests/assets/widgets/load_image_widget.json b/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
-}
+}
diff --git a/browser_tests/assets/widgets/save_animated_webp.json b/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
 }
diff --git a/browser_tests/tests/interaction.spec.ts b/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', () => {
diff --git a/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png b/browser_tests/tests/interaction.spec.ts-snapshots/single-ksampler-fit-chromium-linux.png
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-m4v-chromium-linux.png
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mov-chromium-linux.png
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-mp4-chromium-linux.png
diff --git a/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png b/browser_tests/tests/loadWorkflowInMedia.spec.ts-snapshots/workflow-webm-chromium-linux.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",
diff --git a/src/scripts/app.ts b/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, {
diff --git a/src/scripts/defaultGraph.ts b/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
 }
 
diff --git a/src/services/litegraphService.ts b/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
   }
 }
diff --git a/tests-ui/workflows/default_workflow.json b/tests-ui/workflows/default_workflow.json
@@ -373,4 +373,4 @@
     }
   },
   "version": 0.4
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -160,4 +160,4 @@`
`160`	`160`	`}`
`161`	`161`	`},`
`162`	`162`	`"version": 0.4`
`163`		`-}`
	`163`	`+}`