canvu-react 0.4.20 → 0.4.22

package/dist/native.cjs

@@ -2004,178 +2004,6 @@ function NativeShapeRenderer({ item }) {
   }
   return null;
 }
-var CURSOR_STROKE = "#18181b";
-var CURSOR_STROKE_WIDTH = 2;
-var CROSSHAIR_STROKE_WIDTH = 1.5;
-function NativeDrawCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "M13 21h8",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeMarkerCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "m9 11-6 6v3h9l3-3",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeEraserCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Path,
-      {
-        path: "m5.082 11.09 8.828 8.828",
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        strokeJoin: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeCrosshairCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(12, 3),
-        p2: reactNativeSkia.vec(12, 21),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CROSSHAIR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(3, 12),
-        p2: reactNativeSkia.vec(21, 12),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CROSSHAIR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeTextCursor() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(12, 4),
-        p2: reactNativeSkia.vec(12, 20),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(8, 4),
-        p2: reactNativeSkia.vec(16, 4),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      reactNativeSkia.Line,
-      {
-        p1: reactNativeSkia.vec(8, 20),
-        p2: reactNativeSkia.vec(16, 20),
-        color: CURSOR_STROKE,
-        style: "stroke",
-        strokeWidth: CURSOR_STROKE_WIDTH,
-        strokeCap: "round",
-        antiAlias: true
-      }
-    )
-  ] });
-}
-function NativeToolCursorGlyph({
-  cursor
-}) {
-  if (cursor.kind === "draw") return /* @__PURE__ */ jsxRuntime.jsx(NativeDrawCursor, {});
-  if (cursor.kind === "marker") return /* @__PURE__ */ jsxRuntime.jsx(NativeMarkerCursor, {});
-  if (cursor.kind === "eraser") return /* @__PURE__ */ jsxRuntime.jsx(NativeEraserCursor, {});
-  if (cursor.kind === "text") return /* @__PURE__ */ jsxRuntime.jsx(NativeTextCursor, {});
-  return /* @__PURE__ */ jsxRuntime.jsx(NativeCrosshairCursor, {});
-}
-function NativeToolCursorRenderer({
-  cursor,
-  point
-}) {
-  const x = point.x - cursor.hotspot.x;
-  const y = point.y - cursor.hotspot.y;
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeSkia.Group, { transform: [{ translateX: x }, { translateY: y }], children: /* @__PURE__ */ jsxRuntime.jsx(NativeToolCursorGlyph, { cursor }) });
-}
 
 // src/native/native-overlay-style.ts
 var ERASER_TINT = "#cbd5e1";
@@ -2232,8 +2060,7 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle,
-  toolCursor
+  previewStrokeStyle
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2610,7 +2437,7 @@ function NativeInteractionOverlay({
     ] });
   }, [laserTrail, z]);
   if (width <= 0 || height <= 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactNativeSkia.Canvas,
     {
       style: {
@@ -2621,22 +2448,13 @@ function NativeInteractionOverlay({
         height
       },
       pointerEvents: "none",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
-          previewElements,
-          laserTrailElements,
-          eraserTrailElements,
-          eraserPreviewElements,
-          selectionElements
-        ] }),
-        toolCursor ? /* @__PURE__ */ jsxRuntime.jsx(
-          NativeToolCursorRenderer,
-          {
-            cursor: toolCursor.cursor,
-            point: toolCursor.point
-          }
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
+        previewElements,
+        laserTrailElements,
+        eraserTrailElements,
+        eraserPreviewElements,
+        selectionElements
+      ] })
     }
   );
 }
@@ -3974,39 +3792,6 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
   return { ...item, x: nb.x, y: nb.y, bounds: nb };
 }
 
-// src/native/native-tool-cursors.ts
-var ICON_SIZE = 24;
-var CENTER_HOTSPOT = { x: 12, y: 12 };
-function nativeCursorForVectorToolId(toolId) {
-  switch (toolId) {
-    case "rect":
-    case "ellipse":
-    case "architectural-cloud":
-    case "line":
-    case "arrow":
-    case "laser":
-    case "image":
-      return { kind: "crosshair", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
-    case "draw":
-      return { kind: "draw", size: ICON_SIZE, hotspot: { x: 4, y: 18 } };
-    case "marker":
-      return { kind: "marker", size: ICON_SIZE, hotspot: { x: 11, y: 14 } };
-    case "eraser":
-      return { kind: "eraser", size: ICON_SIZE, hotspot: { x: 12, y: 14 } };
-    case "text":
-      return { kind: "text", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
-    default:
-      return null;
-  }
-}
-function nativeCrosshairToolCursor() {
-  return { kind: "crosshair", size: ICON_SIZE, hotspot: CENTER_HOTSPOT };
-}
-function nativeFallbackToolCursorPoint(size) {
-  if (size.width <= 0 || size.height <= 0) return null;
-  return { x: size.width / 2, y: size.height / 2 };
-}
-
 // src/native/native-vector-interactions.ts
 var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
 function supportsNativeResizeHandles(item) {
@@ -4051,6 +3836,19 @@ function hitTestNativeSelectionHandle({
   );
   return handle ? { kind: "resize", handle } : null;
 }
+function pointInNativeSelectedItemBounds(item, worldPoint) {
+  const bounds = normalizeRect(item.bounds);
+  const local = worldToItemLocal(
+    worldPoint.x,
+    worldPoint.y,
+    item.x,
+    item.y,
+    bounds.width,
+    bounds.height,
+    item.rotation ?? 0
+  );
+  return local.x >= 0 && local.x <= bounds.width && local.y >= 0 && local.y <= bounds.height;
+}
 function resolveNativeCustomPlacement(toolId, customPlacement, customPlacements) {
   if (customPlacement?.toolId === toolId) return customPlacement;
   return customPlacements?.find((placement) => placement.toolId === toolId) ?? null;
@@ -4151,7 +3949,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onCameraChange,
   customPlacement,
   customPlacements = [],
-  customCrosshairToolIds = [],
   toolbar,
   showStyleInspector = false,
   styleInspectorPlacement = "bottom"
@@ -4174,8 +3971,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   customPlacementRef.current = customPlacement;
   const customPlacementsRef = react.useRef(customPlacements);
   customPlacementsRef.current = customPlacements;
-  const customCrosshairToolIdsRef = react.useRef(customCrosshairToolIds);
-  customCrosshairToolIdsRef.current = customCrosshairToolIds;
   const onSelectionChangeRef = react.useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const itemsRef = react.useRef(items);
@@ -4188,7 +3983,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   );
   const [eraserTrail, setEraserTrail] = react.useState([]);
   const [laserTrail, setLaserTrail] = react.useState([]);
-  const [toolCursorPoint, setToolCursorPoint] = react.useState(null);
   const laserClearTimerRef = react.useRef(null);
   const strokeStyleRef = react.useRef({ ...DEFAULT_STROKE_STYLE });
   const markerStrokeStyleRef = react.useRef({ ...MARKER_TOOL_STYLE });
@@ -4283,60 +4077,14 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
   }, []);
-  const cursorForToolId = react.useCallback((nextToolId) => {
-    const builtInCursor = nativeCursorForVectorToolId(nextToolId);
-    if (builtInCursor) return builtInCursor;
-    return customCrosshairToolIdsRef.current.includes(nextToolId) ? nativeCrosshairToolCursor() : null;
+  const onLayout = react.useCallback((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize({ width, height });
+  }, []);
+  const updateToolCursorPoint = react.useCallback((_point) => {
   }, []);
-  const onLayout = react.useCallback(
-    (e) => {
-      const { width, height } = e.nativeEvent.layout;
-      const nextSize = { width, height };
-      setSize(nextSize);
-      if (!interactive) {
-        setToolCursorPoint(null);
-        return;
-      }
-      if (!cursorForToolId(toolIdRef.current)) {
-        setToolCursorPoint(null);
-        return;
-      }
-      setToolCursorPoint(
-        (current) => current ?? nativeFallbackToolCursorPoint(nextSize)
-      );
-    },
-    [cursorForToolId, interactive]
-  );
-  const updateToolCursorPoint = react.useCallback(
-    (point) => {
-      if (!interactive) return;
-      if (!cursorForToolId(toolIdRef.current)) return;
-      setToolCursorPoint(point);
-    },
-    [cursorForToolId, interactive]
-  );
   const hideToolCursor = react.useCallback(() => {
-    setToolCursorPoint(null);
   }, []);
-  const showFallbackToolCursor = react.useCallback(
-    (nextToolId) => {
-      if (!interactive) {
-        setToolCursorPoint(null);
-        return;
-      }
-      if (!cursorForToolId(nextToolId)) {
-        setToolCursorPoint(null);
-        return;
-      }
-      setToolCursorPoint(
-        (current) => current ?? nativeFallbackToolCursorPoint(size)
-      );
-    },
-    [cursorForToolId, interactive, size]
-  );
-  react.useEffect(() => {
-    showFallbackToolCursor(toolId);
-  }, [showFallbackToolCursor, toolId]);
   const selectedItems = react.useMemo(
     () => items.filter((it) => selectedIds.includes(it.id)),
     [items, selectedIds]
@@ -4425,6 +4173,25 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             onSelectionChangeRef.current?.([hit.id]);
           }
         } else {
+          const selectedUnlockedItems = currentSelectedIds.map((id) => itemsRef.current.find((item) => item.id === id)).filter((item) => !!item && !item.locked);
+          if (selectedUnlockedItems.some(
+            (item) => pointInNativeSelectedItemBounds(item, { x: worldX, y: worldY })
+          )) {
+            const snapshots = {};
+            for (const item of selectedUnlockedItems) {
+              snapshots[item.id] = item;
+            }
+            const ids = Object.keys(snapshots);
+            if (ids.length > 0) {
+              dragStateRef.current = {
+                kind: "move",
+                ids,
+                snapshots,
+                startWorld: { x: worldX, y: worldY }
+              };
+              return;
+            }
+          }
           onSelectionChangeRef.current?.([]);
           dragStateRef.current = {
             kind: "marquee",
@@ -5001,8 +4768,6 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
-  const activeToolCursor = cursorForToolId(toolId);
-  const toolCursor = activeToolCursor && toolCursorPoint ? { cursor: activeToolCursor, point: toolCursorPoint } : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
@@ -5038,8 +4803,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState,
-            toolCursor
+            previewStrokeStyle: strokeStyleState
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsxRuntime.jsx(