canvu-react 0.4.20 → 0.4.22

package/dist/native.d.cts

@@ -12,16 +12,6 @@ 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: {
@@ -68,15 +58,8 @@ 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, toolCursor, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 type NativeSceneRendererProps = {
     readonly items: readonly VectorSceneItem[];
@@ -241,7 +224,6 @@ type NativeVectorViewportProps = {
     readonly onCameraChange?: () => void;
     readonly customPlacement?: NativeCustomShapePlacementOptions;
     readonly customPlacements?: readonly NativeCustomShapePlacementOptions[];
-    readonly customCrosshairToolIds?: readonly string[];
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
     readonly styleInspectorPlacement?: "bottom" | "top-left";

package/dist/native.d.ts

@@ -12,16 +12,6 @@ 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: {
@@ -68,15 +58,8 @@ 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, toolCursor, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
+declare function NativeInteractionOverlay({ camera, width, height, selectedItems, showResizeHandles, placementPreview, eraserTrail, laserTrail, eraserPreviewItems, previewStrokeStyle, }: NativeInteractionOverlayProps): react_jsx_runtime.JSX.Element | null;
 
 type NativeSceneRendererProps = {
     readonly items: readonly VectorSceneItem[];
@@ -241,7 +224,6 @@ type NativeVectorViewportProps = {
     readonly onCameraChange?: () => void;
     readonly customPlacement?: NativeCustomShapePlacementOptions;
     readonly customPlacements?: readonly NativeCustomShapePlacementOptions[];
-    readonly customCrosshairToolIds?: readonly string[];
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
     readonly styleInspectorPlacement?: "bottom" | "top-left";

package/dist/native.js

@@ -1998,178 +1998,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__ */ 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";
@@ -2226,8 +2054,7 @@ function NativeInteractionOverlay({
   eraserTrail,
   laserTrail,
   eraserPreviewItems = [],
-  previewStrokeStyle,
-  toolCursor
+  previewStrokeStyle
 }) {
   const z = camera.zoom;
   const camTransform = skiaCameraTransform(z, camera.x, camera.y);
@@ -2604,7 +2431,7 @@ function NativeInteractionOverlay({
     ] });
   }, [laserTrail, z]);
   if (width <= 0 || height <= 0) return null;
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Canvas,
     {
       style: {
@@ -2615,22 +2442,13 @@ function NativeInteractionOverlay({
         height
       },
       pointerEvents: "none",
-      children: [
-        /* @__PURE__ */ jsxs(Group, { transform: camTransform, children: [
-          previewElements,
-          laserTrailElements,
-          eraserTrailElements,
-          eraserPreviewElements,
-          selectionElements
-        ] }),
-        toolCursor ? /* @__PURE__ */ jsx(
-          NativeToolCursorRenderer,
-          {
-            cursor: toolCursor.cursor,
-            point: toolCursor.point
-          }
-        ) : null
-      ]
+      children: /* @__PURE__ */ jsxs(Group, { transform: camTransform, children: [
+        previewElements,
+        laserTrailElements,
+        eraserTrailElements,
+        eraserPreviewElements,
+        selectionElements
+      ] })
     }
   );
 }
@@ -3968,39 +3786,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) {
@@ -4045,6 +3830,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;
@@ -4145,7 +3943,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onCameraChange,
   customPlacement,
   customPlacements = [],
-  customCrosshairToolIds = [],
   toolbar,
   showStyleInspector = false,
   styleInspectorPlacement = "bottom"
@@ -4168,8 +3965,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   customPlacementRef.current = customPlacement;
   const customPlacementsRef = useRef(customPlacements);
   customPlacementsRef.current = customPlacements;
-  const customCrosshairToolIdsRef = useRef(customCrosshairToolIds);
-  customCrosshairToolIdsRef.current = customCrosshairToolIds;
   const onSelectionChangeRef = useRef(onSelectionChange);
   onSelectionChangeRef.current = onSelectionChange;
   const itemsRef = useRef(items);
@@ -4182,7 +3977,6 @@ 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 });
@@ -4277,60 +4071,14 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     setCameraTick((n) => n + 1);
     onCameraChangeRef.current?.();
   }, []);
-  const cursorForToolId = useCallback((nextToolId) => {
-    const builtInCursor = nativeCursorForVectorToolId(nextToolId);
-    if (builtInCursor) return builtInCursor;
-    return customCrosshairToolIdsRef.current.includes(nextToolId) ? nativeCrosshairToolCursor() : null;
+  const onLayout = useCallback((e) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize({ width, height });
+  }, []);
+  const updateToolCursorPoint = useCallback((_point) => {
   }, []);
-  const onLayout = 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 = useCallback(
-    (point) => {
-      if (!interactive) return;
-      if (!cursorForToolId(toolIdRef.current)) return;
-      setToolCursorPoint(point);
-    },
-    [cursorForToolId, interactive]
-  );
   const hideToolCursor = useCallback(() => {
-    setToolCursorPoint(null);
   }, []);
-  const showFallbackToolCursor = useCallback(
-    (nextToolId) => {
-      if (!interactive) {
-        setToolCursorPoint(null);
-        return;
-      }
-      if (!cursorForToolId(nextToolId)) {
-        setToolCursorPoint(null);
-        return;
-      }
-      setToolCursorPoint(
-        (current) => current ?? nativeFallbackToolCursorPoint(size)
-      );
-    },
-    [cursorForToolId, interactive, size]
-  );
-  useEffect(() => {
-    showFallbackToolCursor(toolId);
-  }, [showFallbackToolCursor, toolId]);
   const selectedItems = useMemo(
     () => items.filter((it) => selectedIds.includes(it.id)),
     [items, selectedIds]
@@ -4419,6 +4167,25 @@ var NativeVectorViewport = 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",
@@ -4995,8 +4762,6 @@ var NativeVectorViewport = 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__ */ jsx(
     View,
     {
@@ -5032,8 +4797,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
             eraserPreviewItems: items.filter(
               (it) => eraserPreviewIds.includes(it.id)
             ),
-            previewStrokeStyle: strokeStyleState,
-            toolCursor
+            previewStrokeStyle: strokeStyleState
           }
         ),
         interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(