canvu-react 0.4.18 → 0.4.19

package/dist/native.cjs

@@ -4008,6 +4008,7 @@ function nativeFallbackToolCursorPoint(size) {
 }
 
 // src/native/native-vector-interactions.ts
+var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
 function supportsNativeResizeHandles(item) {
   const k = item?.toolKind;
   if (k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "line" || k === "arrow" || k === "image" || k === "text") {
@@ -4029,7 +4030,7 @@ function hitTestNativeSelectionHandle({
   if (!supportsNativeResizeHandles(selectedItem)) return null;
   const bounds = normalizeRect(selectedItem.bounds);
   const rotation = selectedItem.rotation ?? 0;
-  const handleRadiusWorld = 6 / Math.max(zoom, 1e-9);
+  const handleRadiusWorld = NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX / Math.max(zoom, 1e-9);
   const rotateOffsetWorld = 24 / Math.max(zoom, 1e-9);
   if (hitTestRotateHandle(
     bounds,
@@ -4336,12 +4337,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   react.useEffect(() => {
     showFallbackToolCursor(toolId);
   }, [showFallbackToolCursor, toolId]);
-  const handlePointerMove = react.useCallback(
-    (event) => {
-      updateToolCursorPoint(screenPointFromPointerEvent(event));
-    },
-    [updateToolCursorPoint]
-  );
   const selectedItems = react.useMemo(
     () => items.filter((it) => selectedIds.includes(it.id)),
     [items, selectedIds]
@@ -4354,6 +4349,153 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
   const lastPinchDist = react.useRef(null);
   const lastPanPoint = react.useRef(null);
+  const applyDragMoveAtScreenPoint = react.useCallback(
+    (point, pagePoint) => {
+      const cam = cameraRef.current;
+      if (!cam) return;
+      updateToolCursorPoint(point);
+      const { worldX, worldY } = screenToWorld(point.x, point.y);
+      const st = dragStateRef.current;
+      if (st.kind === "pan") {
+        const current = pagePoint ?? point;
+        if (lastPanPoint.current) {
+          const dx = current.x - lastPanPoint.current.x;
+          const dy = current.y - lastPanPoint.current.y;
+          cam.x += dx;
+          cam.y += dy;
+          requestRender();
+        }
+        lastPanPoint.current = current;
+        return;
+      }
+      lastPanPoint.current = null;
+      if (st.kind === "draw") {
+        const pts = st.points;
+        const last = pts[pts.length - 1];
+        const dx = worldX - (last?.x ?? worldX);
+        const dy = worldY - (last?.y ?? worldY);
+        const shouldAppendPoint = Math.hypot(dx, dy) > 0.5 / cam.zoom;
+        if (shouldAppendPoint) {
+          pts.push({ x: worldX, y: worldY });
+        }
+        if (st.tool === "laser") {
+          if (shouldAppendPoint) {
+            setLaserTrail((prev) => [
+              ...prev,
+              { x: worldX, y: worldY, t: Date.now() }
+            ]);
+          }
+          return;
+        }
+        setPlacementPreview({
+          kind: "stroke",
+          tool: st.tool,
+          points: [...pts],
+          style: { ...strokeStyleRef.current }
+        });
+        return;
+      }
+      if (st.kind === "move") {
+        const dx = worldX - st.startWorld.x;
+        const dy = worldY - st.startWorld.y;
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const nextList = itemsRef.current.map((it) => {
+          const snap = st.snapshots[it.id];
+          if (!snap) return it;
+          return {
+            ...snap,
+            x: snap.x + dx,
+            y: snap.y + dy,
+            bounds: {
+              ...snap.bounds,
+              x: snap.bounds.x + dx,
+              y: snap.bounds.y + dy
+            }
+          };
+        });
+        change(nextList);
+        return;
+      }
+      if (st.kind === "rotate") {
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const angle = Math.atan2(worldY - st.pivotWorld.y, worldX - st.pivotWorld.x);
+        const next = applyRotationFromPointer(
+          st.snapshot,
+          st.startRotation,
+          st.startPointerAngleRad,
+          angle
+        );
+        change(itemsRef.current.map((item) => item.id === st.id ? next : item));
+        return;
+      }
+      if (st.kind === "resize") {
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const next = resizeItemByHandle(st.snapshot, st.start, st.handle, {
+          x: worldX,
+          y: worldY
+        });
+        change(itemsRef.current.map((item) => item.id === st.id ? next : item));
+        return;
+      }
+      if (st.kind === "marquee") {
+        const a = st.startWorld;
+        const b = { x: worldX, y: worldY };
+        const rect = {
+          x: Math.min(a.x, b.x),
+          y: Math.min(a.y, b.y),
+          width: Math.abs(b.x - a.x),
+          height: Math.abs(b.y - a.y)
+        };
+        setPlacementPreview({ kind: "marquee", rect });
+        return;
+      }
+      if (st.kind === "erase") {
+        setEraserTrail((prev) => [...prev, { x: worldX, y: worldY, t: Date.now() }]);
+        const toErase = collectEraserTargetsAtWorldPoint(
+          itemsRef.current,
+          worldX,
+          worldY,
+          { lineHitWorld: 10 / cam.zoom, ignoreLocked: true }
+        );
+        for (const id of toErase) {
+          eraserPreviewIdSetRef.current.add(id);
+        }
+        setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
+        return;
+      }
+      if (st.kind === "place") {
+        setPlacementPreview(
+          placementPreviewForTool(st.tool, st.startWorld, {
+            x: worldX,
+            y: worldY
+          })
+        );
+        return;
+      }
+      if (st.kind === "custom-place") {
+        setPlacementPreview({
+          kind: "rect",
+          rect: rectFromCorners(st.startWorld, { x: worldX, y: worldY })
+        });
+        return;
+      }
+    },
+    [requestRender, screenToWorld, updateToolCursorPoint]
+  );
+  const handlePointerMove = react.useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      if (dragStateRef.current.kind !== "idle") {
+        applyDragMoveAtScreenPoint(point, point);
+        return;
+      }
+      updateToolCursorPoint(point);
+    },
+    [applyDragMoveAtScreenPoint, updateToolCursorPoint]
+  );
   const panResponder = react.useMemo(
     () => reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
@@ -4580,145 +4722,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           return;
         }
         lastPinchDist.current = null;
-        updateToolCursorPoint({ x: sx, y: sy });
-        const { worldX, worldY } = screenToWorld(sx, sy);
-        const st = dragStateRef.current;
-        if (st.kind === "pan") {
-          const current = { x: pageX, y: pageY };
-          if (lastPanPoint.current) {
-            const dx = current.x - lastPanPoint.current.x;
-            const dy = current.y - lastPanPoint.current.y;
-            cam.x += dx;
-            cam.y += dy;
-            requestRender();
-          }
-          lastPanPoint.current = current;
-          return;
-        }
-        lastPanPoint.current = null;
-        if (st.kind === "draw") {
-          const pts = st.points;
-          const last = pts[pts.length - 1];
-          const dx = worldX - (last?.x ?? worldX);
-          const dy = worldY - (last?.y ?? worldY);
-          const shouldAppendPoint = Math.hypot(dx, dy) > 0.5 / cam.zoom;
-          if (shouldAppendPoint) {
-            pts.push({ x: worldX, y: worldY });
-          }
-          if (st.tool === "laser") {
-            if (shouldAppendPoint) {
-              setLaserTrail((prev) => [
-                ...prev,
-                { x: worldX, y: worldY, t: Date.now() }
-              ]);
-            }
-            return;
-          }
-          setPlacementPreview({
-            kind: "stroke",
-            tool: st.tool,
-            points: [...pts],
-            style: { ...strokeStyleRef.current }
-          });
-          return;
-        }
-        if (st.kind === "move") {
-          const dx = worldX - st.startWorld.x;
-          const dy = worldY - st.startWorld.y;
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const nextList = itemsRef.current.map((it) => {
-            const snap = st.snapshots[it.id];
-            if (!snap) return it;
-            return {
-              ...snap,
-              x: snap.x + dx,
-              y: snap.y + dy,
-              bounds: {
-                ...snap.bounds,
-                x: snap.bounds.x + dx,
-                y: snap.bounds.y + dy
-              }
-            };
-          });
-          change(nextList);
-          return;
-        }
-        if (st.kind === "rotate") {
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const angle = Math.atan2(
-            worldY - st.pivotWorld.y,
-            worldX - st.pivotWorld.x
-          );
-          const next = applyRotationFromPointer(
-            st.snapshot,
-            st.startRotation,
-            st.startPointerAngleRad,
-            angle
-          );
-          change(
-            itemsRef.current.map((item) => item.id === st.id ? next : item)
-          );
-          return;
-        }
-        if (st.kind === "resize") {
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const next = resizeItemByHandle(st.snapshot, st.start, st.handle, {
-            x: worldX,
-            y: worldY
-          });
-          change(
-            itemsRef.current.map((item) => item.id === st.id ? next : item)
-          );
-          return;
-        }
-        if (st.kind === "marquee") {
-          const a = st.startWorld;
-          const b = { x: worldX, y: worldY };
-          const rect = {
-            x: Math.min(a.x, b.x),
-            y: Math.min(a.y, b.y),
-            width: Math.abs(b.x - a.x),
-            height: Math.abs(b.y - a.y)
-          };
-          setPlacementPreview({ kind: "marquee", rect });
-          return;
-        }
-        if (st.kind === "erase") {
-          setEraserTrail((prev) => [
-            ...prev,
-            { x: worldX, y: worldY, t: Date.now() }
-          ]);
-          const toErase = collectEraserTargetsAtWorldPoint(
-            itemsRef.current,
-            worldX,
-            worldY,
-            { lineHitWorld: 10 / cam.zoom, ignoreLocked: true }
-          );
-          for (const id of toErase) {
-            eraserPreviewIdSetRef.current.add(id);
-          }
-          setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
-          return;
-        }
-        if (st.kind === "place") {
-          setPlacementPreview(
-            placementPreviewForTool(st.tool, st.startWorld, {
-              x: worldX,
-              y: worldY
-            })
-          );
-          return;
-        }
-        if (st.kind === "custom-place") {
-          setPlacementPreview({
-            kind: "rect",
-            rect: rectFromCorners(st.startWorld, { x: worldX, y: worldY })
-          });
-          return;
-        }
+        applyDragMoveAtScreenPoint({ x: sx, y: sy }, { x: pageX, y: pageY });
       },
       onPanResponderRelease: (evt) => {
         lastPinchDist.current = null;
@@ -4952,6 +4956,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       }
     }),
     [
+      applyDragMoveAtScreenPoint,
       screenToWorld,
       requestRender,
       requestSelectToolAfterUse,