@dfosco/storyboard-react 3.11.1 → 3.11.3

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.11.1",
+  "version": "3.11.3",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.11.1",
-    "@dfosco/tiny-canvas": "3.11.1",
+    "@dfosco/storyboard-core": "3.11.3",
+    "@dfosco/tiny-canvas": "3.11.3",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
     "jsonc-parser": "^3.3.1"

package/src/canvas/CanvasPage.jsx

@@ -287,6 +287,7 @@ export default function CanvasPage({ name }) {
   const zoomRef = useRef(initialViewport?.zoom ?? 100)
   const scrollRef = useRef(null)
   const pendingScrollRestore = useRef(initialViewport)
+  const initialWidgetParam = useRef(new URLSearchParams(window.location.search).has('widget'))
   const [canvasTitle, setCanvasTitle] = useState(canvas?.title || name)
   const titleInputRef = useRef(null)
   const [localSources, setLocalSources] = useState(canvas?.sources ?? [])
@@ -395,6 +396,8 @@ export default function CanvasPage({ name }) {
     setLocalWidgets(canvas?.widgets ?? null)
     setLocalSources(canvas?.sources ?? [])
     setCanvasTitle(canvas?.title || name)
+    setSnapEnabled(canvas?.snapToGrid ?? false)
+    setSnapGridSize(canvas?.gridSize || 40)
     undoRedo.reset()
   }
 
@@ -860,7 +863,7 @@ export default function CanvasPage({ name }) {
     function handleSnapToggle() {
       setSnapEnabled((prev) => {
         const next = !prev
-        updateCanvas(name, { snapToGrid: next }).catch((err) =>
+        updateCanvas(name, { settings: { snapToGrid: next } }).catch((err) =>
           console.error('[canvas] Failed to persist snap setting:', err)
         )
         return next
@@ -919,6 +922,16 @@ export default function CanvasPage({ name }) {
     return () => document.removeEventListener('storyboard:canvas:zoom-to-fit', handleZoomToFit)
   }, [localWidgets, localSources, jsxExports])
 
+  // On initial load without a ?widget= deep link, zoom to fit all objects.
+  // Wait for jsxExports when the canvas has a JSX module so components are
+  // included in the bounding-box calculation.
+  useEffect(() => {
+    if (loading || initialWidgetParam.current) return
+    if (canvas?._jsxModule && !jsxExports) return
+    initialWidgetParam.current = true // only once
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:zoom-to-fit'))
+  }, [loading, jsxExports, canvas])
+
   // Canvas background should follow toolbar theme target.
   useEffect(() => {
     function readMode() {