canvu-react 0.4.15 → 0.4.17

package/dist/native.cjs

@@ -1822,6 +1822,178 @@ 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";
@@ -1878,7 +2050,8 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle
+  previewStrokeStyle,
+  toolCursor
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2255,7 +2428,7 @@ function NativeInteractionOverlay({
     ] });
   }, [laserTrail, z]);
   if (width <= 0 || height <= 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNativeSkia.Canvas,
     {
       style: {
@@ -2266,13 +2439,22 @@ function NativeInteractionOverlay({
         height
       },
       pointerEvents: "none",
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNativeSkia.Group, { transform: camTransform, children: [
-        previewElements,
-        laserTrailElements,
-        eraserTrailElements,
-        eraserPreviewElements,
-        selectionElements
-      ] })
+      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
+      ]
     }
   );
 }
@@ -3404,6 +3586,36 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
   }
   return ids;
 }
+
+// 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 nativeFallbackToolCursorPoint(size) {
+  if (size.width <= 0 || size.height <= 0) return null;
+  return { x: size.width / 2, y: size.height / 2 };
+}
 var MIN_PLACE_SIZE = 8;
 var MIN_ARROW_DRAG_PX = 8;
 var TAP_PX = 20;
@@ -3464,6 +3676,12 @@ function collectIdsInRect(items, marquee) {
   }
   return out;
 }
+function screenPointFromPointerEvent(event) {
+  const nativeEvent = event.nativeEvent;
+  const x = Number.isFinite(nativeEvent.offsetX) ? nativeEvent.offsetX : nativeEvent.x;
+  const y = Number.isFinite(nativeEvent.offsetY) ? nativeEvent.offsetY : nativeEvent.y;
+  return { x, y };
+}
 function fitCameraToWorldRect(camera, viewportW, viewportH, worldRect, padding) {
   const r = normalizeRect(worldRect);
   if (r.width <= 0 || r.height <= 0 || viewportW <= 0 || viewportH <= 0) return;
@@ -3518,6 +3736,7 @@ 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 });
@@ -3612,10 +3831,61 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
   }, []);
-  const onLayout = react.useCallback((e) => {
-    const { width, height } = e.nativeEvent.layout;
-    setSize({ width, height });
+  const onLayout = react.useCallback(
+    (e) => {
+      const { width, height } = e.nativeEvent.layout;
+      const nextSize = { width, height };
+      setSize(nextSize);
+      if (!interactive) {
+        setToolCursorPoint(null);
+        return;
+      }
+      if (!nativeCursorForVectorToolId(toolIdRef.current)) {
+        setToolCursorPoint(null);
+        return;
+      }
+      setToolCursorPoint(
+        (current) => current ?? nativeFallbackToolCursorPoint(nextSize)
+      );
+    },
+    [interactive]
+  );
+  const updateToolCursorPoint = react.useCallback(
+    (point) => {
+      if (!interactive) return;
+      if (!nativeCursorForVectorToolId(toolIdRef.current)) return;
+      setToolCursorPoint(point);
+    },
+    [interactive]
+  );
+  const hideToolCursor = react.useCallback(() => {
+    setToolCursorPoint(null);
   }, []);
+  const showFallbackToolCursor = react.useCallback(
+    (nextToolId) => {
+      if (!interactive) {
+        setToolCursorPoint(null);
+        return;
+      }
+      if (!nativeCursorForVectorToolId(nextToolId)) {
+        setToolCursorPoint(null);
+        return;
+      }
+      setToolCursorPoint(
+        (current) => current ?? nativeFallbackToolCursorPoint(size)
+      );
+    },
+    [interactive, size]
+  );
+  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]
@@ -3639,9 +3909,11 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         const sx = evt.nativeEvent.locationX;
         const sy = evt.nativeEvent.locationY;
         if (touches && touches.length >= 2) {
+          hideToolCursor();
           dragStateRef.current = { kind: "pan" };
           return;
         }
+        updateToolCursorPoint({ x: sx, y: sy });
         if (!interactive) {
           dragStateRef.current = { kind: "pan" };
           return;
@@ -3767,6 +4039,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         const pageX = evt.nativeEvent.pageX;
         const pageY = evt.nativeEvent.pageY;
         if (touches && touches.length >= 2) {
+          hideToolCursor();
           const t0 = touches[0];
           const t1 = touches[1];
           if (t0 && t1) {
@@ -3786,6 +4059,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") {
@@ -3891,6 +4165,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       onPanResponderRelease: (evt) => {
         lastPinchDist.current = null;
         lastPanPoint.current = null;
+        updateToolCursorPoint({
+          x: evt.nativeEvent.locationX,
+          y: evt.nativeEvent.locationY
+        });
         const st = dragStateRef.current;
         if (st.kind === "draw") {
           dragStateRef.current = { kind: "idle" };
@@ -4074,6 +4352,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
       onPanResponderTerminate: () => {
         lastPinchDist.current = null;
         lastPanPoint.current = null;
+        hideToolCursor();
         dragStateRef.current = { kind: "idle" };
         setPlacementPreview(null);
         setLaserTrail([]);
@@ -4082,7 +4361,14 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         eraserPreviewIdSetRef.current.clear();
       }
     }),
-    [screenToWorld, requestRender, requestSelectToolAfterUse, interactive]
+    [
+      screenToWorld,
+      requestRender,
+      requestSelectToolAfterUse,
+      interactive,
+      updateToolCursorPoint,
+      hideToolCursor
+    ]
   );
   react.useImperativeHandle(
     ref,
@@ -4106,11 +4392,16 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
+  const activeToolCursor = nativeCursorForVectorToolId(toolId);
+  const toolCursor = activeToolCursor && toolCursorPoint ? { cursor: activeToolCursor, point: toolCursorPoint } : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
       style: { flex: 1, overflow: "hidden" },
       onLayout,
+      onPointerMove: handlePointerMove,
+      onPointerEnter: handlePointerMove,
+      onPointerLeave: hideToolCursor,
       ...panResponder.panHandlers,
       children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -4136,7 +4427,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState
+            previewStrokeStyle: strokeStyleState,
+            toolCursor
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsxRuntime.jsx(