canvu-react 0.3.35 → 0.3.37

package/dist/react.cjs

@@ -6605,7 +6605,7 @@ function InteractionOverlay({
           raw,
           previewStyle,
           tool === "laser" ? "draw" : tool,
-          false
+          raw.length === 2
         );
         if (payload) {
           if (payload.kind === "circle") {
@@ -6898,7 +6898,7 @@ function PresenceRemoteLayer({
               markup.points.map((p) => ({ x: p.x, y: p.y })),
               style,
               markup.tool,
-              false
+              markup.points.length === 2
             );
             if (payload?.kind === "circle") {
               strokeNode = /* @__PURE__ */ jsxRuntime.jsx(
@@ -7287,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;
 }
@@ -7434,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,
@@ -7968,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;
@@ -7978,6 +8072,7 @@ var VectorViewport = react.forwardRef(
         debugApplePencilPointer("finalize-stroke", {
           points: pts.length
         });
+        clearStraightStrokeHoldTimer(strokeState);
         dragStateRef.current = { kind: "idle" };
         releaseInteractionPointer();
         if (itemId) {
@@ -9089,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) {
@@ -9103,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);
@@ -9161,7 +9260,8 @@ var VectorViewport = react.forwardRef(
         emitRemoteStrokePreview,
         finalizeStrokeDragState,
         renderSceneWithLivePenStroke,
-        screenToWorld
+        screenToWorld,
+        startOrRestartStraightStrokeHoldTimer
       ]
     );
     react.useEffect(() => {
@@ -9197,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,
@@ -9207,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);
@@ -9239,7 +9343,8 @@ var VectorViewport = react.forwardRef(
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
-      screenToWorld
+      screenToWorld,
+      startOrRestartStraightStrokeHoldTimer
     ]);
     react.useEffect(() => {
       if (!interactive) return;
@@ -9298,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,
@@ -9308,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;
@@ -9333,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,
@@ -9367,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,
@@ -9418,7 +9552,10 @@ var VectorViewport = react.forwardRef(
       finalizeStrokeDragState,
       interactive,
       renderSceneWithLivePenStroke,
-      screenToWorld
+      screenToWorld,
+      setStraightStrokeEndpoint,
+      startOrRestartStraightStrokeHoldTimer,
+      updateStraightStrokeForMove
     ]);
     react.useEffect(() => {
       if (!interactive) return;
@@ -9451,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,
@@ -9618,6 +9764,7 @@ var VectorViewport = react.forwardRef(
         const cam = cameraRef.current;
         if (!cam) {
           if (st.kind === "stroke") {
+            clearStraightStrokeHoldTimer(st);
             emitRemoteStrokePreviewClear();
           }
           if (st.kind === "erase") {
@@ -9673,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,
@@ -9866,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);