@dfosco/storyboard-react 3.10.0-beta.1 → 3.10.0

package/package.json

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

package/src/canvas/CanvasPage.jsx

@@ -1,4 +1,5 @@
 import { createElement, useCallback, useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
 import { Canvas } from '@dfosco/tiny-canvas'
 import '@dfosco/tiny-canvas/style.css'
 import { useCanvas } from './useCanvas.js'
@@ -56,12 +57,41 @@ function debounce(fn, ms) {
 }
 
 /**
- * Get viewport-center coordinates for placing a new widget.
+ * Get viewport-center coordinates in canvas space for placing a new widget.
+ * Converts the visible center of the scroll container to unscaled canvas coordinates.
  */
-function getViewportCenter() {
+function getViewportCenter(scrollEl, scale) {
+  if (!scrollEl) {
+    return { x: 0, y: 0 }
+  }
+  const cx = scrollEl.scrollLeft + scrollEl.clientWidth / 2
+  const cy = scrollEl.scrollTop + scrollEl.clientHeight / 2
+  return {
+    x: Math.round(cx / scale),
+    y: Math.round(cy / scale),
+  }
+}
+
+/** Fallback sizes for widget types without explicit width/height defaults. */
+const WIDGET_FALLBACK_SIZES = {
+  'sticky-note':  { width: 180, height: 60 },
+  'markdown':     { width: 360, height: 200 },
+  'prototype':    { width: 800, height: 600 },
+  'link-preview': { width: 320, height: 120 },
+  'component':    { width: 200, height: 150 },
+}
+
+/**
+ * Offset a position so the widget's center (not its top-left corner)
+ * lands on the given point.
+ */
+function centerPositionForWidget(pos, type, props) {
+  const fallback = WIDGET_FALLBACK_SIZES[type] || { width: 200, height: 150 }
+  const w = props?.width ?? fallback.width
+  const h = props?.height ?? fallback.height
   return {
-    x: Math.round(window.innerWidth / 2 - 120),
-    y: Math.round(window.innerHeight / 2 - 80),
+    x: Math.round(pos.x - w / 2),
+    y: Math.round(pos.y - h / 2),
   }
 }
 
@@ -257,6 +287,43 @@ export default function CanvasPage({ name }) {
     zoomRef.current = zoom
   }, [zoom])
 
+  /**
+   * Zoom to a new level, anchoring on an optional client-space point.
+   * When a cursor position is provided (e.g. from a wheel event), the
+   * canvas point under the cursor stays fixed. Otherwise falls back to
+   * the viewport center.
+   */
+  function applyZoom(newZoom, clientX, clientY) {
+    const el = scrollRef.current
+    const clampedZoom = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom))
+
+    if (!el) {
+      setZoom(clampedZoom)
+      return
+    }
+
+    const oldScale = zoomRef.current / 100
+    const newScale = clampedZoom / 100
+
+    // Anchor point in scroll-container space
+    const rect = el.getBoundingClientRect()
+    const useViewportCenter = clientX == null || clientY == null
+    const anchorX = useViewportCenter ? el.clientWidth / 2 : clientX - rect.left
+    const anchorY = useViewportCenter ? el.clientHeight / 2 : clientY - rect.top
+
+    // Anchor → canvas coordinate
+    const canvasX = (el.scrollLeft + anchorX) / oldScale
+    const canvasY = (el.scrollTop + anchorY) / oldScale
+
+    // Synchronous render so the DOM has the new transform before we adjust scroll
+    zoomRef.current = clampedZoom
+    flushSync(() => setZoom(clampedZoom))
+
+    // Scroll so the same canvas point stays under the anchor
+    el.scrollLeft = canvasX * newScale - anchorX
+    el.scrollTop = canvasY * newScale - anchorY
+  }
+
   // Signal canvas mount/unmount to CoreUIBar
   useEffect(() => {
     window[CANVAS_BRIDGE_STATE_KEY] = { active: true, name, zoom: zoomRef.current }
@@ -281,7 +348,8 @@ export default function CanvasPage({ name }) {
   // Add a widget by type — used by CanvasControls and CoreUIBar event
   const addWidget = useCallback(async (type) => {
     const defaultProps = schemas[type] ? getDefaults(schemas[type]) : {}
-    const pos = getViewportCenter()
+    const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+    const pos = centerPositionForWidget(center, type, defaultProps)
     try {
       const result = await addWidgetApi(name, {
         type,
@@ -310,7 +378,7 @@ export default function CanvasPage({ name }) {
     function handleZoom(e) {
       const { zoom: newZoom } = e.detail
       if (typeof newZoom === 'number') {
-        setZoom(Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, newZoom)))
+        applyZoom(newZoom)
       }
     }
     document.addEventListener('storyboard:canvas:set-zoom', handleZoom)
@@ -419,7 +487,8 @@ export default function CanvasPage({ name }) {
         props = { content: text }
       }
 
-      const pos = getViewportCenter()
+      const center = getViewportCenter(scrollRef.current, zoomRef.current / 100)
+      const pos = centerPositionForWidget(center, type, props)
       try {
         const result = await addWidgetApi(name, {
           type,
@@ -449,7 +518,7 @@ export default function CanvasPage({ name }) {
       const step = Math.trunc(zoomAccum.current)
       if (step === 0) return
       zoomAccum.current -= step
-      setZoom((z) => Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z + step)))
+      applyZoom(zoomRef.current + step, e.clientX, e.clientY)
     }
     document.addEventListener('wheel', handleWheel, { passive: false })
     return () => document.removeEventListener('wheel', handleWheel)