@dfosco/storyboard-react 3.8.2 → 3.9.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@dfosco/storyboard-react",
-  "version": "3.8.2",
+  "version": "3.9.0",
   "type": "module",
   "dependencies": {
-    "@dfosco/storyboard-core": "3.8.2",
+    "@dfosco/storyboard-core": "3.9.0",
     "@dfosco/tiny-canvas": "^1.1.0",
     "@neodrag/react": "^2.3.1",
     "glob": "^11.0.0",
@@ -12,7 +12,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dfosco/storyboard-source.git",
+    "url": "https://github.com/dfosco/storyboard.git",
     "directory": "packages/react"
   },
   "files": [

package/src/canvas/CanvasPage.bridge.test.jsx

@@ -13,6 +13,12 @@ vi.mock('@dfosco/tiny-canvas', () => ({
       >
         drag widget
       </button>
+      <button
+        data-testid="drag-widget-negative"
+        onClick={() => onDragEnd?.('widget-1', { x: -50, y: -30 })}
+      >
+        drag widget negative
+      </button>
       <button
         data-testid="drag-source"
         onClick={() => onDragEnd?.('jsx-PrimaryButtons', { x: 333.2, y: 444.8 })}
@@ -144,6 +150,25 @@ describe('CanvasPage canvas bridge', () => {
       )
     })
   })
+
+  it('clamps negative drag positions to zero', async () => {
+    render(<CanvasPage name="design-overview" />)
+
+    fireEvent.click(screen.getByTestId('drag-widget-negative'))
+    await waitFor(() => {
+      expect(updateCanvas).toHaveBeenCalledWith(
+        'design-overview',
+        expect.objectContaining({
+          widgets: expect.arrayContaining([
+            expect.objectContaining({
+              id: 'widget-1',
+              position: { x: 0, y: 0 },
+            }),
+          ]),
+        })
+      )
+    })
+  })
 })
 
 describe('getCanvasThemeVars', () => {

package/src/canvas/CanvasPage.jsx

@@ -156,7 +156,7 @@ export default function CanvasPage({ name }) {
 
   const handleItemDragEnd = useCallback((dragId, position) => {
     if (!dragId || !position) return
-    const rounded = { x: roundPosition(position.x), y: roundPosition(position.y) }
+    const rounded = { x: Math.max(0, roundPosition(position.x)), y: Math.max(0, roundPosition(position.y)) }
 
     if (dragId.startsWith('jsx-')) {
       const sourceExport = dragId.replace(/^jsx-/, '')
@@ -541,6 +541,7 @@ export default function CanvasPage({ name }) {
             transformOrigin: '0 0',
             width: `${Math.max(10000, 100 / scale)}vw`,
             height: `${Math.max(10000, 100 / scale)}vh`,
+            ...(spaceHeld ? { pointerEvents: 'none' } : {}),
           }}
         >
           <Canvas {...canvasProps} onDragEnd={handleItemDragEnd}>