canvu-react 0.4.15 → 0.4.17

package/dist/native.d.cts

@@ -12,6 +12,16 @@ type TimedTrailPoint = {
     readonly t: number;
 };
 
+type NativeVectorToolCursorKind = "crosshair" | "draw" | "marker" | "eraser" | "text";
+type NativeVectorToolCursor = {
+    readonly kind: NativeVectorToolCursorKind;
+    readonly size: number;
+    readonly hotspot: {
+        readonly x: number;
+        readonly y: number;
+    };
+};
+
 type PlacementPreview = {
     readonly kind: "rect" | "ellipse" | "architectural-cloud";
     readonly rect: {
@@ -58,8 +68,15 @@ type NativeInteractionOverlayProps = {
     readonly laserTrail?: readonly TimedTrailPoint[];
     readonly eraserPreviewItems?: readonly VectorSceneItem[];
     readonly previewStrokeStyle?: StrokeStyle;
+    readonly toolCursor?: {
+        readonly cursor: NativeVectorToolCursor;
+        readonly point: {
+            readonly x: number;
+            readonly y: number;
+        };
+    } | null;
 };
-declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, toolCursor, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 type NativeSceneRendererProps = {
     readonly items: readonly VectorSceneItem[];

package/dist/native.d.ts

@@ -12,6 +12,16 @@ type TimedTrailPoint = {
     readonly t: number;
 };
 
+type NativeVectorToolCursorKind = "crosshair" | "draw" | "marker" | "eraser" | "text";
+type NativeVectorToolCursor = {
+    readonly kind: NativeVectorToolCursorKind;
+    readonly size: number;
+    readonly hotspot: {
+        readonly x: number;
+        readonly y: number;
+    };
+};
+
 type PlacementPreview = {
     readonly kind: "rect" | "ellipse" | "architectural-cloud";
     readonly rect: {
@@ -58,8 +68,15 @@ type NativeInteractionOverlayProps = {
     readonly laserTrail?: readonly TimedTrailPoint[];
     readonly eraserPreviewItems?: readonly VectorSceneItem[];
     readonly previewStrokeStyle?: StrokeStyle;
+    readonly toolCursor?: {
+        readonly cursor: NativeVectorToolCursor;
+        readonly point: {
+            readonly x: number;
+            readonly y: number;
+        };
+    } | null;
 };
-declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, toolCursor, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 type NativeSceneRendererProps = {
     readonly items: readonly VectorSceneItem[];

package/dist/native.js

@@ -1816,6 +1816,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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: "M13 21h8",
+        color: CURSOR_STROKE,
+        style: "stroke",
+        strokeWidth: CURSOR_STROKE_WIDTH,
+        strokeCap: "round",
+        strokeJoin: "round",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Path,
+      {
+        path: "m9 11-6 6v3h9l3-3",
+        color: CURSOR_STROKE,
+        style: "stroke",
+        strokeWidth: CURSOR_STROKE_WIDTH,
+        strokeCap: "round",
+        strokeJoin: "round",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      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__ */ jsx(
+      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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        p1: vec(12, 3),
+        p2: vec(12, 21),
+        color: CURSOR_STROKE,
+        style: "stroke",
+        strokeWidth: CROSSHAIR_STROKE_WIDTH,
+        strokeCap: "round",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        p1: vec(3, 12),
+        p2: vec(21, 12),
+        color: CURSOR_STROKE,
+        style: "stroke",
+        strokeWidth: CROSSHAIR_STROKE_WIDTH,
+        strokeCap: "round",
+        antiAlias: true
+      }
+    )
+  ] });
+}
+function NativeTextCursor() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        p1: vec(12, 4),
+        p2: vec(12, 20),
+        color: CURSOR_STROKE,
+        style: "stroke",
+        strokeWidth: CURSOR_STROKE_WIDTH,
+        strokeCap: "round",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        p1: vec(8, 4),
+        p2: vec(16, 4),
+        color: CURSOR_STROKE,
+        style: "stroke",
+        strokeWidth: CURSOR_STROKE_WIDTH,
+        strokeCap: "round",
+        antiAlias: true
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Line,
+      {
+        p1: vec(8, 20),
+        p2: 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__ */ jsx(NativeDrawCursor, {});
+  if (cursor.kind === "marker") return /* @__PURE__ */ jsx(NativeMarkerCursor, {});
+  if (cursor.kind === "eraser") return /* @__PURE__ */ jsx(NativeEraserCursor, {});
+  if (cursor.kind === "text") return /* @__PURE__ */ jsx(NativeTextCursor, {});
+  return /* @__PURE__ */ jsx(NativeCrosshairCursor, {});
+}
+function NativeToolCursorRenderer({
+  cursor,
+  point
+}) {
+  const x = point.x - cursor.hotspot.x;
+  const y = point.y - cursor.hotspot.y;
+  return /* @__PURE__ */ jsx(Group, { transform: [{ translateX: x }, { translateY: y }], children: /* @__PURE__ */ jsx(NativeToolCursorGlyph, { cursor }) });
+}
 
 // src/native/native-overlay-style.ts
 var ERASER_TINT = "#cbd5e1";
@@ -1872,7 +2044,8 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle
+  previewStrokeStyle,
+  toolCursor
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2249,7 +2422,7 @@ function NativeInteractionOverlay({
     ] });
   }, [laserTrail, z]);
   if (width <= 0 || height <= 0) return null;
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Canvas,
     {
       style: {
@@ -2260,13 +2433,22 @@ function NativeInteractionOverlay({
         height
       },
       pointerEvents: "none",
-      children: /* @__PURE__ */ jsxs(Group, { transform: camTransform, children: [
-        previewElements,
-        laserTrailElements,
-        eraserTrailElements,
-        eraserPreviewElements,
-        selectionElements
-      ] })
+      children: [
+        /* @__PURE__ */ jsxs(Group, { transform: camTransform, children: [
+          previewElements,
+          laserTrailElements,
+          eraserTrailElements,
+          eraserPreviewElements,
+          selectionElements
+        ] }),
+        toolCursor ? /* @__PURE__ */ jsx(
+          NativeToolCursorRenderer,
+          {
+            cursor: toolCursor.cursor,
+            point: toolCursor.point
+          }
+        ) : null
+      ]
     }
   );
 }
@@ -3398,6 +3580,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;
@@ -3458,6 +3670,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;
@@ -3512,6 +3730,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   );
   const [eraserTrail, setEraserTrail] = useState([]);
   const [laserTrail, setLaserTrail] = useState([]);
+  const [toolCursorPoint, setToolCursorPoint] = useState(null);
   const laserClearTimerRef = useRef(null);
   const strokeStyleRef = useRef({ ...DEFAULT_STROKE_STYLE });
   const markerStrokeStyleRef = useRef({ ...MARKER_TOOL_STYLE });
@@ -3606,10 +3825,61 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
   }, []);
-  const onLayout = useCallback((e) => {
-    const { width, height } = e.nativeEvent.layout;
-    setSize({ width, height });
+  const onLayout = 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 = useCallback(
+    (point) => {
+      if (!interactive) return;
+      if (!nativeCursorForVectorToolId(toolIdRef.current)) return;
+      setToolCursorPoint(point);
+    },
+    [interactive]
+  );
+  const hideToolCursor = useCallback(() => {
+    setToolCursorPoint(null);
   }, []);
+  const showFallbackToolCursor = useCallback(
+    (nextToolId) => {
+      if (!interactive) {
+        setToolCursorPoint(null);
+        return;
+      }
+      if (!nativeCursorForVectorToolId(nextToolId)) {
+        setToolCursorPoint(null);
+        return;
+      }
+      setToolCursorPoint(
+        (current) => current ?? nativeFallbackToolCursorPoint(size)
+      );
+    },
+    [interactive, size]
+  );
+  useEffect(() => {
+    showFallbackToolCursor(toolId);
+  }, [showFallbackToolCursor, toolId]);
+  const handlePointerMove = useCallback(
+    (event) => {
+      updateToolCursorPoint(screenPointFromPointerEvent(event));
+    },
+    [updateToolCursorPoint]
+  );
   const selectedItems = useMemo(
     () => items.filter((it) => selectedIds.includes(it.id)),
     [items, selectedIds]
@@ -3633,9 +3903,11 @@ var NativeVectorViewport = 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;
@@ -3761,6 +4033,7 @@ var NativeVectorViewport = 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) {
@@ -3780,6 +4053,7 @@ var NativeVectorViewport = 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") {
@@ -3885,6 +4159,10 @@ var NativeVectorViewport = 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" };
@@ -4068,6 +4346,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       onPanResponderTerminate: () => {
         lastPinchDist.current = null;
         lastPanPoint.current = null;
+        hideToolCursor();
         dragStateRef.current = { kind: "idle" };
         setPlacementPreview(null);
         setLaserTrail([]);
@@ -4076,7 +4355,14 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         eraserPreviewIdSetRef.current.clear();
       }
     }),
-    [screenToWorld, requestRender, requestSelectToolAfterUse, interactive]
+    [
+      screenToWorld,
+      requestRender,
+      requestSelectToolAfterUse,
+      interactive,
+      updateToolCursorPoint,
+      hideToolCursor
+    ]
   );
   useImperativeHandle(
     ref,
@@ -4100,11 +4386,16 @@ var NativeVectorViewport = 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__ */ jsx(
     View,
     {
       style: { flex: 1, overflow: "hidden" },
       onLayout,
+      onPointerMove: handlePointerMove,
+      onPointerEnter: handlePointerMove,
+      onPointerLeave: hideToolCursor,
       ...panResponder.panHandlers,
       children: size.width > 0 && size.height > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
@@ -4130,7 +4421,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState
+            previewStrokeStyle: strokeStyleState,
+            toolCursor
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(