From 9f11d5230dc88bb3f23bf4eea0e32e2a86ca6a61 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 20 Jun 2026 10:14:44 +0200 Subject: [PATCH] fix(editor): fit the view after a restored model is measured MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Restoring on reload fit the view synchronously in onRestore, framing against unmeasured 0×0 nodes, so the model landed jammed top-left. Arm the same post-measure onNodesInitialized fit the sample/import loads use. --- src/components/Editor.vue | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/components/Editor.vue b/src/components/Editor.vue index 2d6ef3f..b27dfcb 100644 --- a/src/components/Editor.vue +++ b/src/components/Editor.vue @@ -65,13 +65,9 @@ const { fitView, } = useVueFlow("meadows") -// Restore the last document on mount and persist every change (F7). Fit the -// view once a restored model has re-projected so it lands framed. -useAutosave({ onRestore: () => fitView({ padding: 0.2 }) }) - -// Fit the view after a *load* (sample/import), once the freshly projected nodes -// have been measured. Vue Flow measures node dimensions a frame after they mount, -// so calling fitView straight after setModel fits to 0×0 boxes and the model +// Fit the view after a *load* (sample/import/restore), once the freshly projected +// nodes have been measured. Vue Flow measures node dimensions a frame after they +// mount, so calling fitView straight after setModel fits to 0×0 boxes and the model // lands jammed in the top-left; onNodesInitialized fires post-measure, so framing // is correct. A one-shot flag keeps it scoped to loads (not every re-init). let fitAfterInit = false @@ -81,6 +77,15 @@ onNodesInitialized(() => { fitView({ padding: 0.2 }) }) +// Restore the last document on mount and persist every change (F7). Arm the same +// post-measure fit a load uses; fitting synchronously in onRestore would frame +// against unmeasured 0×0 nodes, landing the restored model jammed top-left. +useAutosave({ + onRestore: () => { + fitAfterInit = true + }, +}) + onNodeDragStart(() => store.beginInteraction()) onNodeDragStop(({ nodes: dragged }) => { for (const node of dragged) store.moveNode(node.id, node.position)