canvu-react 0.3.34 → 0.3.36

package/dist/react.cjs

@@ -1825,6 +1825,67 @@ function useCanvuChromeContext() {
   return react.useContext(CanvuChromeContext);
 }
 
+// src/math/item-transform.ts
+init_rect();
+function getItemRotationRad(item) {
+  return item.rotation ?? 0;
+}
+function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const dlx = lx - c.x;
+  const dly = ly - c.y;
+  const cos = Math.cos(rotationRad);
+  const sin = Math.sin(rotationRad);
+  return {
+    x: itemX + c.x + cos * dlx - sin * dly,
+    y: itemY + c.y + sin * dlx + cos * dly
+  };
+}
+function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
+  const c = { x: w / 2, y: h / 2 };
+  const vx = wx - itemX;
+  const vy = wy - itemY;
+  const dx = vx - c.x;
+  const dy = vy - c.y;
+  const cos = Math.cos(-rotationRad);
+  const sin = Math.sin(-rotationRad);
+  const lx = cos * dx - sin * dy;
+  const ly = sin * dx + cos * dy;
+  return { x: c.x + lx, y: c.y + ly };
+}
+function itemPivotWorld(item) {
+  const r = normalizeRect(item.bounds);
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+}
+function boundsAabbForRotatedItem(item) {
+  const rot = getItemRotationRad(item);
+  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
+    return item.bounds;
+  }
+  const r = normalizeRect(item.bounds);
+  if (Math.abs(rot) < 1e-12) {
+    return r;
+  }
+  const corners = [
+    [0, 0],
+    [r.width, 0],
+    [r.width, r.height],
+    [0, r.height]
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [lx, ly] of corners) {
+    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
+    minX = Math.min(minX, p.x);
+    minY = Math.min(minY, p.y);
+    maxX = Math.max(maxX, p.x);
+    maxY = Math.max(maxY, p.y);
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
 // src/scene/clone-item.ts
 init_shape_builders();
 function cloneVectorSceneItemWithNewId(item) {
@@ -1864,20 +1925,25 @@ function markImageAsManaged(item) {
   };
 }
 function restackManagedImages(items) {
-  let anchor;
+  let anchorAabbY = Infinity;
+  let anchorCenterX = 0;
   for (const item of items) {
     if (!isManagedImage(item)) continue;
-    if (!anchor || item.bounds.y < anchor.bounds.y) anchor = item;
+    const aabb = boundsAabbForRotatedItem(item);
+    if (aabb.y < anchorAabbY) {
+      anchorAabbY = aabb.y;
+      anchorCenterX = aabb.x + aabb.width / 2;
+    }
   }
-  if (!anchor) return [...items];
-  const anchorCenterX = anchor.bounds.x + anchor.bounds.width / 2;
-  const anchorTopY = anchor.bounds.y;
-  let cursorY = anchorTopY;
+  if (!Number.isFinite(anchorAabbY)) return [...items];
+  let cursorY = anchorAabbY;
   return items.map((item) => {
     if (!isManagedImage(item)) return item;
+    const aabb = boundsAabbForRotatedItem(item);
+    const centerY = cursorY + aabb.height / 2;
     const newX = anchorCenterX - item.bounds.width / 2;
-    const newY = cursorY;
-    cursorY = newY + item.bounds.height + STACK_GAP_WORLD;
+    const newY = centerY - item.bounds.height / 2;
+    cursorY += aabb.height + STACK_GAP_WORLD;
     if (item.bounds.x === newX && item.bounds.y === newY) return item;
     return {
       ...item,
@@ -1897,8 +1963,10 @@ function copyManagedImage(items, id) {
   return restackManagedImages(inserted);
 }
 function rotateManagedImage(items, id) {
-  return items.map(
-    (i) => i.id === id ? { ...i, rotation: ((i.rotation ?? 0) + Math.PI / 2) % (Math.PI * 2) } : i
+  return restackManagedImages(
+    items.map(
+      (i) => i.id === id ? { ...i, rotation: ((i.rotation ?? 0) + Math.PI / 2) % (Math.PI * 2) } : i
+    )
   );
 }
 function deleteManagedImage(items, id) {
@@ -2345,69 +2413,6 @@ function getBoardPositionStyle(position, inset = 12, zIndex = 40) {
       return base2;
   }
 }
-
-// src/math/item-transform.ts
-init_rect();
-function getItemRotationRad(item) {
-  return item.rotation ?? 0;
-}
-function itemLocalToWorld(lx, ly, itemX, itemY, w, h, rotationRad) {
-  const c = { x: w / 2, y: h / 2 };
-  const dlx = lx - c.x;
-  const dly = ly - c.y;
-  const cos = Math.cos(rotationRad);
-  const sin = Math.sin(rotationRad);
-  return {
-    x: itemX + c.x + cos * dlx - sin * dly,
-    y: itemY + c.y + sin * dlx + cos * dly
-  };
-}
-function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
-  const c = { x: w / 2, y: h / 2 };
-  const vx = wx - itemX;
-  const vy = wy - itemY;
-  const dx = vx - c.x;
-  const dy = vy - c.y;
-  const cos = Math.cos(-rotationRad);
-  const sin = Math.sin(-rotationRad);
-  const lx = cos * dx - sin * dy;
-  const ly = sin * dx + cos * dy;
-  return { x: c.x + lx, y: c.y + ly };
-}
-function itemPivotWorld(item) {
-  const r = normalizeRect(item.bounds);
-  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
-}
-function boundsAabbForRotatedItem(item) {
-  const rot = getItemRotationRad(item);
-  if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
-    return item.bounds;
-  }
-  const r = normalizeRect(item.bounds);
-  if (Math.abs(rot) < 1e-12) {
-    return r;
-  }
-  const corners = [
-    [0, 0],
-    [r.width, 0],
-    [r.width, r.height],
-    [0, r.height]
-  ];
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-  for (const [lx, ly] of corners) {
-    const p = itemLocalToWorld(lx, ly, item.x, item.y, r.width, r.height, rot);
-    minX = Math.min(minX, p.x);
-    minY = Math.min(minY, p.y);
-    maxX = Math.max(maxX, p.x);
-    maxY = Math.max(maxY, p.y);
-  }
-  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
-}
-
-// src/react/navmenu/minimap.tsx
 init_rect();
 var NavMenuMinimapSlotContext = react.createContext(null);
 function noop() {
@@ -7282,6 +7287,8 @@ body[data-canvu-pen-active="true"] [data-slot="shape-context-menu"] * {
 	-webkit-touch-callout: none !important;
 }
 `;
+var STRAIGHT_STROKE_HOLD_DURATION_MS = 1e3;
+var STRAIGHT_STROKE_JITTER_TOLERANCE_SQUARED = 5 * 5;
 function debugApplePencilPointer(phase, detail) {
   return;
 }
@@ -7429,6 +7436,28 @@ function appendTouchToStrokePoints(points, touch, zoom, screenToWorldFn) {
   );
   return appendInterpolatedPoints(points, nextPoint);
 }
+function createStraightStrokeState(anchorPoint, clientX, clientY) {
+  return {
+    active: false,
+    anchorPoint,
+    holdScreen: { x: clientX, y: clientY },
+    holdTimer: null
+  };
+}
+function clearStraightStrokeHoldTimer(strokeState) {
+  const straightLine = strokeState.straightLine;
+  if (!straightLine?.holdTimer) return;
+  clearTimeout(straightLine.holdTimer);
+  straightLine.holdTimer = null;
+}
+function lastStrokePoint(points) {
+  return points[points.length - 1] ?? null;
+}
+function hasMovedPastStraightStrokeJitter(straightLine, clientX, clientY) {
+  const deltaX = clientX - straightLine.holdScreen.x;
+  const deltaY = clientY - straightLine.holdScreen.y;
+  return deltaX * deltaX + deltaY * deltaY > STRAIGHT_STROKE_JITTER_TOLERANCE_SQUARED;
+}
 var VectorViewport = react.forwardRef(
   function VectorViewport2({
     items,
@@ -7963,6 +7992,76 @@ var VectorViewport = react.forwardRef(
       },
       []
     );
+    const updateStrokePreviewPoints = react.useCallback(
+      (strokeState, points) => {
+        strokeState.points = points;
+        if (strokeState.itemId && strokeState.tool !== "laser") {
+          const item = createFreehandStrokeItem(
+            strokeState.itemId,
+            points,
+            strokeState.tool,
+            strokeStyleRef.current
+          );
+          if (item) {
+            renderSceneWithLivePenStroke(item);
+          }
+          setPlacementPreview(null);
+          emitRemoteStrokePreview(strokeState.tool, points);
+          return;
+        }
+        if (strokeState.tool === "laser") return;
+        setPlacementPreview({
+          kind: "stroke",
+          tool: strokeState.tool,
+          points,
+          style: { ...strokeStyleRef.current }
+        });
+      },
+      [emitRemoteStrokePreview, renderSceneWithLivePenStroke]
+    );
+    const setStraightStrokeEndpoint = react.useCallback(
+      (strokeState, endpoint) => {
+        const straightLine = strokeState.straightLine;
+        if (!straightLine) return;
+        straightLine.active = true;
+        updateStrokePreviewPoints(strokeState, [straightLine.anchorPoint, endpoint]);
+      },
+      [updateStrokePreviewPoints]
+    );
+    const startOrRestartStraightStrokeHoldTimer = react.useCallback(
+      (strokeState) => {
+        const straightLine = strokeState.straightLine;
+        if (!straightLine || strokeState.tool !== "draw") return;
+        clearStraightStrokeHoldTimer(strokeState);
+        straightLine.holdTimer = window.setTimeout(() => {
+          straightLine.holdTimer = null;
+          const currentStrokeState = dragStateRef.current;
+          if (currentStrokeState.kind !== "stroke" || currentStrokeState !== strokeState) {
+            return;
+          }
+          const endpoint = lastStrokePoint(currentStrokeState.points);
+          if (!endpoint) return;
+          setStraightStrokeEndpoint(currentStrokeState, endpoint);
+        }, STRAIGHT_STROKE_HOLD_DURATION_MS);
+      },
+      [setStraightStrokeEndpoint]
+    );
+    const updateStraightStrokeForMove = react.useCallback(
+      (strokeState, clientX, clientY, endpoint) => {
+        const straightLine = strokeState.straightLine;
+        if (!straightLine || strokeState.tool !== "draw") return false;
+        if (straightLine.active) {
+          setStraightStrokeEndpoint(strokeState, endpoint);
+          return true;
+        }
+        if (straightLine.holdTimer && hasMovedPastStraightStrokeJitter(straightLine, clientX, clientY)) {
+          straightLine.holdScreen = { x: clientX, y: clientY };
+          startOrRestartStraightStrokeHoldTimer(strokeState);
+        }
+        return false;
+      },
+      [setStraightStrokeEndpoint, startOrRestartStraightStrokeHoldTimer]
+    );
     const finalizeStrokeDragState = react.useCallback(
       (strokeState) => {
         const tool = strokeState.tool;
@@ -7973,6 +8072,7 @@ var VectorViewport = react.forwardRef(
         debugApplePencilPointer("finalize-stroke", {
           points: pts.length
         });
+        clearStraightStrokeHoldTimer(strokeState);
         dragStateRef.current = { kind: "idle" };
         releaseInteractionPointer();
         if (itemId) {
@@ -9084,6 +9184,7 @@ var VectorViewport = react.forwardRef(
             e.clientY,
             e.pointerType === "pen" ? e.pressure : void 0
           );
+          const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, e.clientX, e.clientY) : void 0;
           const directPenStroke = e.pointerType === "pen" && (tool === "draw" || tool === "marker");
           let itemId;
           if (directPenStroke) {
@@ -9098,13 +9199,16 @@ var VectorViewport = react.forwardRef(
               renderSceneWithLivePenStroke(item);
             }
           }
-          dragStateRef.current = {
+          const nextDragState = {
             kind: "stroke",
             tool,
             points: [startPoint],
             pointerType: e.pointerType,
-            ...itemId ? { itemId } : {}
+            ...itemId ? { itemId } : {},
+            ...straightLine ? { straightLine } : {}
           };
+          dragStateRef.current = nextDragState;
+          startOrRestartStraightStrokeHoldTimer(nextDragState);
           if (tool === "laser") {
             setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
             setPlacementPreview(null);
@@ -9156,7 +9260,8 @@ var VectorViewport = react.forwardRef(
         emitRemoteStrokePreview,
         finalizeStrokeDragState,
         renderSceneWithLivePenStroke,
-        screenToWorld
+        screenToWorld,
+        startOrRestartStraightStrokeHoldTimer
       ]
     );
     react.useEffect(() => {
@@ -9192,6 +9297,7 @@ var VectorViewport = react.forwardRef(
           e.clientY,
           e.pressure
         );
+        const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, e.clientX, e.clientY) : void 0;
         const itemId = createShapeId();
         const item = createFreehandStrokeItem(
           itemId,
@@ -9202,13 +9308,16 @@ var VectorViewport = react.forwardRef(
         if (item) {
           renderSceneWithLivePenStroke(item);
         }
-        dragStateRef.current = {
+        const nextDragState = {
           kind: "stroke",
           tool,
           points: [startPoint],
           pointerType: e.pointerType,
-          itemId
+          itemId,
+          ...straightLine ? { straightLine } : {}
         };
+        dragStateRef.current = nextDragState;
+        startOrRestartStraightStrokeHoldTimer(nextDragState);
         activeInteractionPointerIdRef.current = e.pointerId;
         activeInteractionPointerTargetRef.current = null;
         setPlacementPreview(null);
@@ -9234,7 +9343,8 @@ var VectorViewport = react.forwardRef(
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
-      screenToWorld
+      screenToWorld,
+      startOrRestartStraightStrokeHoldTimer
     ]);
     react.useEffect(() => {
       if (!interactive) return;
@@ -9293,6 +9403,7 @@ var VectorViewport = react.forwardRef(
           touch.clientY,
           touchPressure(touch)
         );
+        const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, touch.clientX, touch.clientY) : void 0;
         const itemId = createShapeId();
         const item = createFreehandStrokeItem(
           itemId,
@@ -9303,13 +9414,16 @@ var VectorViewport = react.forwardRef(
         if (item) {
           renderSceneWithLivePenStroke(item);
         }
-        dragStateRef.current = {
+        const nextDragState = {
           kind: "stroke",
           tool,
           points: [startPoint],
           pointerType: "pen",
-          itemId
+          itemId,
+          ...straightLine ? { straightLine } : {}
         };
+        dragStateRef.current = nextDragState;
+        startOrRestartStraightStrokeHoldTimer(nextDragState);
         activeInteractionPointerIdRef.current = null;
         activeInteractionPointerTargetRef.current = null;
         activeInteractionTouchIdRef.current = touch.identifier;
@@ -9328,6 +9442,21 @@ var VectorViewport = react.forwardRef(
         if (!touch) return;
         const cam = cameraRef.current;
         if (!cam) return;
+        const endpoint = pointerSampleToWorldPoint(
+          screenToWorld,
+          touch.clientX,
+          touch.clientY,
+          touchPressure(touch)
+        );
+        if (updateStraightStrokeForMove(st, touch.clientX, touch.clientY, endpoint)) {
+          debugApplePencilPointer("touchmove-stroke", {
+            touchId: touch.identifier,
+            points: st.points.length,
+            force: touchPressure(touch)
+          });
+          stopTouchEvent(ev);
+          return;
+        }
         const interpolated = appendTouchToStrokePoints(
           st.points,
           touch,
@@ -9362,13 +9491,23 @@ var VectorViewport = react.forwardRef(
         if (!touch) return;
         const cam = cameraRef.current;
         if (cam) {
-          const completedPoints = appendTouchToStrokePoints(
-            st.points,
-            touch,
-            cam.zoom,
-            screenToWorld
-          );
-          st.points = completedPoints;
+          if (st.straightLine?.active) {
+            const endpoint = pointerSampleToWorldPoint(
+              screenToWorld,
+              touch.clientX,
+              touch.clientY,
+              touchPressure(touch)
+            );
+            setStraightStrokeEndpoint(st, endpoint);
+          } else {
+            const completedPoints = appendTouchToStrokePoints(
+              st.points,
+              touch,
+              cam.zoom,
+              screenToWorld
+            );
+            st.points = completedPoints;
+          }
         }
         debugApplePencilPointer("touchend-stroke", {
           touchId: touch.identifier,
@@ -9413,7 +9552,10 @@ var VectorViewport = react.forwardRef(
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
-      screenToWorld
+      screenToWorld,
+      setStraightStrokeEndpoint,
+      startOrRestartStraightStrokeHoldTimer,
+      updateStraightStrokeForMove
     ]);
     react.useEffect(() => {
       if (!interactive) return;
@@ -9446,6 +9588,15 @@ var VectorViewport = react.forwardRef(
               pressure: ev.pointerType === "pen" ? ev.pressure : void 0
             });
           }
+          const endpoint = pointerSampleToWorldPoint(
+            screenToWorld,
+            ev.clientX,
+            ev.clientY,
+            ev.pointerType === "pen" ? ev.pressure : void 0
+          );
+          if (updateStraightStrokeForMove(st, ev.clientX, ev.clientY, endpoint)) {
+            return;
+          }
           const interpolated = appendPointerEventSamplesToStrokePoints(
             st.points,
             ev,
@@ -9613,6 +9764,7 @@ var VectorViewport = react.forwardRef(
         const cam = cameraRef.current;
         if (!cam) {
           if (st.kind === "stroke") {
+            clearStraightStrokeHoldTimer(st);
             emitRemoteStrokePreviewClear();
           }
           if (st.kind === "erase") {
@@ -9668,13 +9820,26 @@ var VectorViewport = react.forwardRef(
           return;
         }
         if (st.kind === "stroke") {
-          const completedPoints = appendPointerEventSamplesToStrokePoints(
-            st.points,
-            ev,
-            cam.zoom,
-            screenToWorld
-          );
-          st.points = completedPoints;
+          const completedPoints = (() => {
+            if (st.straightLine?.active) {
+              const endpoint = pointerSampleToWorldPoint(
+                screenToWorld,
+                ev.clientX,
+                ev.clientY,
+                ev.pointerType === "pen" ? ev.pressure : void 0
+              );
+              setStraightStrokeEndpoint(st, endpoint);
+              return st.points;
+            }
+            const points = appendPointerEventSamplesToStrokePoints(
+              st.points,
+              ev,
+              cam.zoom,
+              screenToWorld
+            );
+            st.points = points;
+            return points;
+          })();
           debugApplePencilPointer("pointerup-stroke-points", {
             pointerType: ev.pointerType,
             pointerId: ev.pointerId,
@@ -9861,7 +10026,9 @@ var VectorViewport = react.forwardRef(
       renderSceneWithLivePenStroke,
       releaseInteractionPointer,
       requestAutoResetTool,
-      screenToWorld
+      screenToWorld,
+      setStraightStrokeEndpoint,
+      updateStraightStrokeForMove
     ]);
     const selectedItemsForOverlay = react.useMemo(() => {
       return effectiveSelectedIds.map((id) => resolvedItems.find((i) => i.id === id)).filter((i) => i != null);