canvu-react 0.4.22 → 0.4.24

package/dist/native.cjs

@@ -946,10 +946,6 @@ function worldToItemLocal(wx, wy, itemX, itemY, w, h, rotationRad) {
   const ly = sin * dx + cos * dy;
   return { x: c.x + lx, y: c.y + ly };
 }
-function itemPivotWorld(item) {
-  const r = normalizeRect(item.bounds);
-  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
-}
 function boundsAabbForRotatedItem(item) {
   const rot = getItemRotationRad(item);
   if (Math.abs(rot) < 1e-12 && item.bounds.width >= 0 && item.bounds.height >= 0) {
@@ -1310,14 +1306,13 @@ function skiaCameraTransform(zoom, panX, panY) {
   return [{ translateX: panX }, { translateY: panY }, { scale: zoom }];
 }
 function skiaItemPlacementTransform(x, y, cx, cy, rotationRad) {
-  const result = [];
+  const result = [{ translateX: x }, { translateY: y }];
   if (Math.abs(rotationRad) > 1e-12) {
     result.push({
       rotate: rotationRad,
       origin: { x: cx, y: cy }
     });
   }
-  result.push({ translateX: x }, { translateY: y });
   return result;
 }
 function rgbaFromHexAndOpacity(hex, opacity) {
@@ -2036,6 +2031,92 @@ function resolveNativeStrokePreviewStyle(tool, previewStrokeStyle) {
     ...previewStrokeStyle?.strokeDash != null && !isLaser ? { strokeDash: previewStrokeStyle.strokeDash } : {}
   };
 }
+
+// src/native/native-vector-interactions.ts
+var NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX = 24;
+function nativeItemPlacementBounds(item) {
+  const bounds = normalizeRect(item.bounds);
+  return {
+    x: item.x,
+    y: item.y,
+    width: bounds.width,
+    height: bounds.height
+  };
+}
+function supportsNativeResizeHandles(item) {
+  const k = item?.toolKind;
+  if (k === "rect" || k === "ellipse" || k === "architectural-cloud" || k === "line" || k === "arrow" || k === "image" || k === "text") {
+    return true;
+  }
+  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item?.pathPointsLocal && item.pathPointsLocal.length > 0) {
+    return true;
+  }
+  return k === "custom" && !!item?.customIntrinsicSize && !!item?.customInnerSvg;
+}
+function hitTestNativeSelectionHandle({
+  selectedItem,
+  selectedCount,
+  worldPoint,
+  zoom
+}) {
+  if (selectedCount !== 1) return null;
+  if (!selectedItem || selectedItem.locked) return null;
+  if (!supportsNativeResizeHandles(selectedItem)) return null;
+  const bounds = nativeItemPlacementBounds(selectedItem);
+  const rotation = selectedItem.rotation ?? 0;
+  const handleRadiusWorld = NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX / Math.max(zoom, 1e-9);
+  const rotateOffsetWorld = 24 / Math.max(zoom, 1e-9);
+  if (hitTestRotateHandle(
+    bounds,
+    rotation,
+    worldPoint.x,
+    worldPoint.y,
+    handleRadiusWorld,
+    rotateOffsetWorld
+  )) {
+    return { kind: "rotate" };
+  }
+  const handle = hitTestResizeHandle(
+    bounds,
+    worldPoint.x,
+    worldPoint.y,
+    handleRadiusWorld,
+    rotation
+  );
+  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;
+}
+function nativeRotationDragStart(input) {
+  const bounds = nativeItemPlacementBounds(input.item);
+  const pivotWorld = {
+    x: bounds.x + bounds.width / 2,
+    y: bounds.y + bounds.height / 2
+  };
+  return {
+    pivotWorld,
+    startPointerAngleRad: Math.atan2(
+      input.worldPoint.y - pivotWorld.y,
+      input.worldPoint.x - pivotWorld.x
+    ),
+    startRotation: input.item.rotation ?? 0
+  };
+}
 var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 var ERASER_PREVIEW_OPACITY = 0.3;
 var OVERLAY_STROKE_PX = 1.25;
@@ -2074,7 +2155,7 @@ function NativeInteractionOverlay({
   const selectionElements = react.useMemo(() => {
     if (selectedItems.length === 0) return null;
     const single = selectedItems.length === 1 ? selectedItems[0] : void 0;
-    const bSingle = single ? normalizeRect(single.bounds) : null;
+    const bSingle = single ? nativeItemPlacementBounds(single) : null;
     const rotSingle = single?.rotation ?? 0;
     const rotHandlePos = showResizeHandles && bSingle && single ? getRotationHandleWorldPosition(bSingle, rotSingle, rotateOffsetWorld) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3791,79 +3872,6 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
   }
   return { ...item, x: nb.x, y: nb.y, bounds: nb };
 }
-
-// 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") {
-    return true;
-  }
-  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item?.pathPointsLocal && item.pathPointsLocal.length > 0) {
-    return true;
-  }
-  return k === "custom" && !!item?.customIntrinsicSize && !!item?.customInnerSvg;
-}
-function hitTestNativeSelectionHandle({
-  selectedItem,
-  selectedCount,
-  worldPoint,
-  zoom
-}) {
-  if (selectedCount !== 1) return null;
-  if (!selectedItem || selectedItem.locked) return null;
-  if (!supportsNativeResizeHandles(selectedItem)) return null;
-  const bounds = normalizeRect(selectedItem.bounds);
-  const rotation = selectedItem.rotation ?? 0;
-  const handleRadiusWorld = NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX / Math.max(zoom, 1e-9);
-  const rotateOffsetWorld = 24 / Math.max(zoom, 1e-9);
-  if (hitTestRotateHandle(
-    bounds,
-    rotation,
-    worldPoint.x,
-    worldPoint.y,
-    handleRadiusWorld,
-    rotateOffsetWorld
-  )) {
-    return { kind: "rotate" };
-  }
-  const handle = hitTestResizeHandle(
-    bounds,
-    worldPoint.x,
-    worldPoint.y,
-    handleRadiusWorld,
-    rotation
-  );
-  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;
-}
-function nativeRotationDragStart(input) {
-  const pivotWorld = itemPivotWorld(input.item);
-  return {
-    pivotWorld,
-    startPointerAngleRad: Math.atan2(
-      input.worldPoint.y - pivotWorld.y,
-      input.worldPoint.x - pivotWorld.x
-    ),
-    startRotation: input.item.rotation ?? 0
-  };
-}
 var MIN_PLACE_SIZE = 8;
 var MIN_ARROW_DRAG_PX = 8;
 var TAP_PX = 20;
@@ -4145,7 +4153,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
             handle: selectionHandle.handle,
             snapshot: selectedItem,
             start: {
-              bounds: selectedItem.bounds,
+              bounds: nativeItemPlacementBounds(selectedItem),
               line: selectedItem.line
             }
           };