canvu-react 0.4.17 → 0.4.18

package/dist/native.cjs

@@ -946,6 +946,10 @@ 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) {
@@ -976,6 +980,7 @@ function boundsAabbForRotatedItem(item) {
 }
 
 // src/interaction/resize-handles.ts
+var HANDLE_IDS = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 function getHandleWorldPosition(bounds, id) {
   const r = normalizeRect(bounds);
   const cx = r.x + r.width / 2;
@@ -999,6 +1004,30 @@ function getHandleWorldPosition(bounds, id) {
       return { x: r.x, y: cy };
   }
 }
+function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad = 0) {
+  const r = normalizeRect(bounds);
+  const pl = worldToItemLocal(
+    worldX,
+    worldY,
+    r.x,
+    r.y,
+    r.width,
+    r.height,
+    rotationRad
+  );
+  const localBounds2 = { x: 0, y: 0, width: r.width, height: r.height };
+  let best = null;
+  let bestD = radiusWorld;
+  for (const id of HANDLE_IDS) {
+    const p = getHandleWorldPosition(localBounds2, id);
+    const d = Math.hypot(pl.x - p.x, pl.y - p.y);
+    if (d <= bestD) {
+      bestD = d;
+      best = id;
+    }
+  }
+  return best;
+}
 function getHandleWorldPositionRotated(bounds, handle, rotationRad) {
   const r = normalizeRect(bounds);
   const p = getHandleWorldPosition(
@@ -1019,6 +1048,10 @@ function getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld)
     rotationRad
   );
 }
+function hitTestRotateHandle(bounds, rotationRad, worldX, worldY, radiusWorld, handleOffsetWorld) {
+  const p = getRotationHandleWorldPosition(bounds, rotationRad, handleOffsetWorld);
+  return Math.hypot(worldX - p.x, worldY - p.y) <= radiusWorld;
+}
 function rectFromCorners(a, b) {
   const minX = Math.min(a.x, b.x);
   const maxX = Math.max(a.x, b.x);
@@ -1026,6 +1059,155 @@ function rectFromCorners(a, b) {
   const maxY = Math.max(a.y, b.y);
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
+function clampMinSize(r, min) {
+  const n = normalizeRect(r);
+  return {
+    x: n.x,
+    y: n.y,
+    width: Math.max(min, n.width),
+    height: Math.max(min, n.height)
+  };
+}
+function computeResizeBounds(bounds, handle, currentWorld) {
+  const r = normalizeRect(bounds);
+  const x0 = r.x;
+  const y0 = r.y;
+  const x1 = r.x + r.width;
+  const y1 = r.y + r.height;
+  const minSize = 8;
+  switch (handle) {
+    case "nw":
+      return clampMinSize(rectFromCorners(currentWorld, { x: x1, y: y1 }), minSize);
+    case "ne":
+      return clampMinSize(rectFromCorners(currentWorld, { x: x0, y: y1 }), minSize);
+    case "se":
+      return clampMinSize(rectFromCorners(currentWorld, { x: x0, y: y0 }), minSize);
+    case "sw":
+      return clampMinSize(rectFromCorners(currentWorld, { x: x1, y: y0 }), minSize);
+    case "n":
+      return clampMinSize(
+        rectFromCorners({ x: x0, y: currentWorld.y }, { x: x1, y: y1 }),
+        minSize
+      );
+    case "s":
+      return clampMinSize(
+        rectFromCorners({ x: x0, y: y0 }, { x: x1, y: currentWorld.y }),
+        minSize
+      );
+    case "e":
+      return clampMinSize(
+        rectFromCorners({ x: x0, y: y0 }, { x: currentWorld.x, y: y1 }),
+        minSize
+      );
+    case "w":
+      return clampMinSize(
+        rectFromCorners({ x: currentWorld.x, y: y0 }, { x: x1, y: y1 }),
+        minSize
+      );
+    default:
+      return r;
+  }
+}
+function computeResizeBoundsFixedAspect(bounds, handle, currentWorld, aspect) {
+  const r = normalizeRect(bounds);
+  const x0 = r.x;
+  const y0 = r.y;
+  const x1 = r.x + r.width;
+  const y1 = r.y + r.height;
+  const w = r.width;
+  const h = r.height;
+  const minSize = 8;
+  const a = Math.max(1e-9, aspect);
+  function cornerAspectRect(anchor, cursor) {
+    const dx = cursor.x - anchor.x;
+    const dy = cursor.y - anchor.y;
+    const aw = Math.abs(dx);
+    const ah = Math.abs(dy);
+    let W;
+    let H;
+    if (aw < 1e-12 && ah < 1e-12) {
+      W = minSize;
+      H = minSize / a;
+    } else if (ah < 1e-12) {
+      W = Math.max(minSize, aw);
+      H = W / a;
+    } else if (aw < 1e-12) {
+      H = Math.max(minSize, ah);
+      W = H * a;
+    } else if (aw / ah > a) {
+      W = aw;
+      H = aw / a;
+    } else {
+      H = ah;
+      W = ah * a;
+    }
+    if (W < minSize || H < minSize) {
+      const scale = Math.max(minSize / W, minSize / H);
+      W *= scale;
+      H *= scale;
+    }
+    const sx = Math.sign(dx) || 1;
+    const sy = Math.sign(dy) || 1;
+    return rectFromCorners(anchor, {
+      x: anchor.x + sx * W,
+      y: anchor.y + sy * H
+    });
+  }
+  switch (handle) {
+    case "se":
+      return cornerAspectRect({ x: x0, y: y0 }, currentWorld);
+    case "nw":
+      return cornerAspectRect({ x: x1, y: y1 }, currentWorld);
+    case "ne":
+      return cornerAspectRect({ x: x0, y: y1 }, currentWorld);
+    case "sw":
+      return cornerAspectRect({ x: x1, y: y0 }, currentWorld);
+    case "e": {
+      const rawW = currentWorld.x - x0;
+      const aw = Math.max(minSize, Math.abs(rawW));
+      const H = aw / a;
+      const newY = y0 + h / 2 - H / 2;
+      const sign = Math.sign(rawW) || 1;
+      return normalizeRect({ x: x0, y: newY, width: sign * aw, height: H });
+    }
+    case "w": {
+      const rawW = x1 - currentWorld.x;
+      const aw = Math.max(minSize, Math.abs(rawW));
+      const H = aw / a;
+      const newY = y0 + h / 2 - H / 2;
+      const sign = Math.sign(rawW) || 1;
+      return normalizeRect({
+        x: x1 - sign * aw,
+        y: newY,
+        width: sign * aw,
+        height: H
+      });
+    }
+    case "n": {
+      const rawH = y1 - currentWorld.y;
+      const ah = Math.max(minSize, Math.abs(rawH));
+      const W = ah * a;
+      const newX = x0 + w / 2 - W / 2;
+      const sign = Math.sign(rawH) || 1;
+      return normalizeRect({
+        x: newX,
+        y: y1 - sign * ah,
+        width: W,
+        height: sign * ah
+      });
+    }
+    case "s": {
+      const rawH = currentWorld.y - y0;
+      const ah = Math.max(minSize, Math.abs(rawH));
+      const W = ah * a;
+      const newX = x0 + w / 2 - W / 2;
+      const sign = Math.sign(rawH) || 1;
+      return normalizeRect({ x: newX, y: y0, width: W, height: sign * ah });
+    }
+    default:
+      return r;
+  }
+}
 
 // src/scene/freehand-path.ts
 function smoothFreehandPointsToPathD(points) {
@@ -3587,6 +3769,211 @@ function collectEraserTargetsAtWorldPoint(items, worldX, worldY, options) {
   return ids;
 }
 
+// src/interaction/mutations.ts
+function computeNewBoundsForResize(item, sb, handle, currentWorld) {
+  const rot = getItemRotationRad(item);
+  if (Math.abs(rot) < 1e-12) {
+    if (item.toolKind === "image") {
+      let aspect;
+      if (item.imageIntrinsicSize) {
+        const iw = Math.max(1e-9, item.imageIntrinsicSize.width);
+        const ih = Math.max(1e-9, item.imageIntrinsicSize.height);
+        aspect = iw / ih;
+      } else if (item.imageVectorLocalSize) {
+        const lw = Math.max(1e-9, item.imageVectorLocalSize.width);
+        const lh = Math.max(1e-9, item.imageVectorLocalSize.height);
+        aspect = lw / lh;
+      }
+      return aspect !== void 0 ? computeResizeBoundsFixedAspect(sb, handle, currentWorld, aspect) : computeResizeBounds(sb, handle, currentWorld);
+    }
+    return computeResizeBounds(sb, handle, currentWorld);
+  }
+  const local = worldToItemLocal(
+    currentWorld.x,
+    currentWorld.y,
+    sb.x,
+    sb.y,
+    sb.width,
+    sb.height,
+    rot
+  );
+  const localBounds2 = { x: 0, y: 0, width: sb.width, height: sb.height };
+  let nbLocal;
+  if (item.toolKind === "image") {
+    let aspect;
+    if (item.imageIntrinsicSize) {
+      const iw = Math.max(1e-9, item.imageIntrinsicSize.width);
+      const ih = Math.max(1e-9, item.imageIntrinsicSize.height);
+      aspect = iw / ih;
+    } else if (item.imageVectorLocalSize) {
+      const lw = Math.max(1e-9, item.imageVectorLocalSize.width);
+      const lh = Math.max(1e-9, item.imageVectorLocalSize.height);
+      aspect = lw / lh;
+    }
+    nbLocal = aspect !== void 0 ? computeResizeBoundsFixedAspect(localBounds2, handle, local, aspect) : computeResizeBounds(localBounds2, handle, local);
+  } else {
+    nbLocal = computeResizeBounds(localBounds2, handle, local);
+  }
+  return {
+    x: sb.x + nbLocal.x,
+    y: sb.y + nbLocal.y,
+    width: nbLocal.width,
+    height: nbLocal.height
+  };
+}
+function applyRotationFromPointer(item, startRotation, startPointerAngleRad, pointerAngleRad) {
+  let delta = pointerAngleRad - startPointerAngleRad;
+  while (delta > Math.PI) {
+    delta -= 2 * Math.PI;
+  }
+  while (delta < -Math.PI) {
+    delta += 2 * Math.PI;
+  }
+  return { ...item, rotation: startRotation + delta };
+}
+function resizeItemByHandle(item, start, handle, currentWorld) {
+  const sb = normalizeRect(start.bounds);
+  const newBoundsRaw = computeNewBoundsForResize(item, sb, handle, currentWorld);
+  const nb = normalizeRect(newBoundsRaw);
+  const k = item.toolKind;
+  if (k === "rect") {
+    const style = resolveStrokeStyle(item);
+    return {
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      childrenSvg: buildRectSvg(nb.width, nb.height, style)
+    };
+  }
+  if (k === "ellipse") {
+    const style = resolveStrokeStyle(item);
+    return {
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      childrenSvg: buildEllipseSvg(nb.width, nb.height, style)
+    };
+  }
+  if (k === "architectural-cloud") {
+    const style = resolveStrokeStyle(item);
+    return {
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      childrenSvg: buildArchitecturalCloudSvg(nb.width, nb.height, style)
+    };
+  }
+  if (k === "text" && item.text !== void 0) {
+    const sfw = Math.max(sb.width, 1e-6);
+    const sfh = Math.max(sb.height, 1e-6);
+    const baseFs = item.textFontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    const areaRatio = nb.width * nb.height / (sfw * sfh);
+    const scale = Math.sqrt(Math.max(areaRatio, 1e-12));
+    const nextFs = Math.min(256, Math.max(6, baseFs * scale));
+    return rebuildItemSvg({
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      textFixedBounds: true,
+      textFontSize: nextFs
+    });
+  }
+  if (k === "image") {
+    if (item.imageRasterHref && item.imageIntrinsicSize) {
+      return {
+        ...item,
+        x: nb.x,
+        y: nb.y,
+        bounds: nb,
+        childrenSvg: buildRasterImageChildrenSvg(
+          item.imageRasterHref,
+          item.imageIntrinsicSize,
+          nb
+        )
+      };
+    }
+    if (item.imageVectorInnerSvg && item.imageVectorLocalSize) {
+      const lw = Math.max(1e-6, item.imageVectorLocalSize.width);
+      const lh = Math.max(1e-6, item.imageVectorLocalSize.height);
+      const arB = nb.width / Math.max(1e-9, nb.height);
+      const arI = lw / lh;
+      let childrenSvg;
+      if (Math.abs(arB - arI) < 1e-3) {
+        const s = nb.width / lw;
+        childrenSvg = `<g transform="scale(${s})">${item.imageVectorInnerSvg}</g>`;
+      } else {
+        const s = Math.min(nb.width / lw, nb.height / lh);
+        const tx = (nb.width - lw * s) / 2;
+        const ty = (nb.height - lh * s) / 2;
+        childrenSvg = `<g transform="translate(${tx}, ${ty}) scale(${s})">${item.imageVectorInnerSvg}</g>`;
+      }
+      return {
+        ...item,
+        x: nb.x,
+        y: nb.y,
+        bounds: nb,
+        childrenSvg
+      };
+    }
+  }
+  if ((k === "line" || k === "arrow") && start.line) {
+    const sfw = Math.max(sb.width, 1e-6);
+    const sfh = Math.max(sb.height, 1e-6);
+    const f = start.line;
+    const u1 = f.x1 / sfw;
+    const v1 = f.y1 / sfh;
+    const u2 = f.x2 / sfw;
+    const v2 = f.y2 / sfh;
+    const newLine = {
+      x1: u1 * nb.width,
+      y1: v1 * nb.height,
+      x2: u2 * nb.width,
+      y2: v2 * nb.height
+    };
+    const style = resolveStrokeStyle(item);
+    const childrenSvg = k === "arrow" ? buildArrowSvg(item.id, newLine, style) : buildLineSvg(newLine, style);
+    return {
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      line: newLine,
+      childrenSvg
+    };
+  }
+  if ((k === "draw" || k === "pencil" || k === "brush" || k === "marker") && item.pathPointsLocal && item.pathPointsLocal.length > 0) {
+    const sfw = Math.max(sb.width, 1e-6);
+    const sfh = Math.max(sb.height, 1e-6);
+    const sx = nb.width / sfw;
+    const sy = nb.height / sfh;
+    const scaledPoints = item.pathPointsLocal.map((p) => ({
+      x: p.x * sx,
+      y: p.y * sy,
+      ...p.pressure != null ? { pressure: p.pressure } : {}
+    }));
+    return rebuildItemSvg({
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb,
+      pathPointsLocal: scaledPoints
+    });
+  }
+  if (k === "custom" && item.customIntrinsicSize && item.customInnerSvg) {
+    return rebuildItemSvg({
+      ...item,
+      x: nb.x,
+      y: nb.y,
+      bounds: nb
+    });
+  }
+  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 };
@@ -3612,10 +3999,72 @@ function nativeCursorForVectorToolId(toolId) {
       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
+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 = 6 / 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 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;
@@ -3630,16 +4079,6 @@ function isPlacementTool(toolId) {
 function isDefaultMarkerToolStyle(style) {
   return style.stroke === MARKER_TOOL_STYLE.stroke && style.strokeWidth === MARKER_TOOL_STYLE.strokeWidth && style.strokeOpacity === MARKER_TOOL_STYLE.strokeOpacity;
 }
-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 placementPreviewForTool(toolId, start, end) {
   if (toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud") {
     return { kind: toolId, rect: rectFromCorners(start, end) };
@@ -3707,7 +4146,11 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onSelectionChange,
   onItemsChange,
   onToolChangeRequest,
+  onWorldPointerDown,
   onCameraChange,
+  customPlacement,
+  customPlacements = [],
+  customCrosshairToolIds = [],
   toolbar,
   showStyleInspector = false,
   styleInspectorPlacement = "bottom"
@@ -3720,10 +4163,18 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   toolLockedRef.current = toolLocked;
   const onToolChangeRequestRef = react.useRef(onToolChangeRequest);
   onToolChangeRequestRef.current = onToolChangeRequest;
+  const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
+  onWorldPointerDownRef.current = onWorldPointerDown;
   const onCameraChangeRef = react.useRef(onCameraChange);
   onCameraChangeRef.current = onCameraChange;
   const onItemsChangeRef = react.useRef(onItemsChange);
   onItemsChangeRef.current = onItemsChange;
+  const customPlacementRef = react.useRef(customPlacement);
+  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);
@@ -3831,6 +4282,11 @@ 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;
@@ -3840,7 +4296,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         setToolCursorPoint(null);
         return;
       }
-      if (!nativeCursorForVectorToolId(toolIdRef.current)) {
+      if (!cursorForToolId(toolIdRef.current)) {
         setToolCursorPoint(null);
         return;
       }
@@ -3848,15 +4304,15 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         (current) => current ?? nativeFallbackToolCursorPoint(nextSize)
       );
     },
-    [interactive]
+    [cursorForToolId, interactive]
   );
   const updateToolCursorPoint = react.useCallback(
     (point) => {
       if (!interactive) return;
-      if (!nativeCursorForVectorToolId(toolIdRef.current)) return;
+      if (!cursorForToolId(toolIdRef.current)) return;
       setToolCursorPoint(point);
     },
-    [interactive]
+    [cursorForToolId, interactive]
   );
   const hideToolCursor = react.useCallback(() => {
     setToolCursorPoint(null);
@@ -3867,7 +4323,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         setToolCursorPoint(null);
         return;
       }
-      if (!nativeCursorForVectorToolId(nextToolId)) {
+      if (!cursorForToolId(nextToolId)) {
         setToolCursorPoint(null);
         return;
       }
@@ -3875,7 +4331,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         (current) => current ?? nativeFallbackToolCursorPoint(size)
       );
     },
-    [interactive, size]
+    [cursorForToolId, interactive, size]
   );
   react.useEffect(() => {
     showFallbackToolCursor(toolId);
@@ -3927,6 +4383,40 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           return;
         }
         if (tool === "select") {
+          const currentSelectedIds = selectedIdsRef.current;
+          const selectedItem = currentSelectedIds.length === 1 ? itemsRef.current.find((item) => item.id === currentSelectedIds[0]) : void 0;
+          const selectionHandle = hitTestNativeSelectionHandle({
+            selectedItem,
+            selectedCount: currentSelectedIds.length,
+            worldPoint: { x: worldX, y: worldY },
+            zoom: cam.zoom
+          });
+          if (selectionHandle && selectedItem) {
+            if (selectionHandle.kind === "rotate") {
+              const rotationStart = nativeRotationDragStart({
+                item: selectedItem,
+                worldPoint: { x: worldX, y: worldY }
+              });
+              dragStateRef.current = {
+                kind: "rotate",
+                id: selectedItem.id,
+                snapshot: selectedItem,
+                ...rotationStart
+              };
+              return;
+            }
+            dragStateRef.current = {
+              kind: "resize",
+              id: selectedItem.id,
+              handle: selectionHandle.handle,
+              snapshot: selectedItem,
+              start: {
+                bounds: selectedItem.bounds,
+                line: selectedItem.line
+              }
+            };
+            return;
+          }
           const hit = hitTestWorldPoint(itemsRef.current, worldX, worldY, {
             lineHitWorld: 10 / cam.zoom,
             ignoreLocked: true
@@ -4019,6 +4509,25 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           );
           return;
         }
+        const customPlacement2 = resolveNativeCustomPlacement(
+          tool,
+          customPlacementRef.current,
+          customPlacementsRef.current
+        );
+        if (customPlacement2) {
+          dragStateRef.current = {
+            kind: "custom-place",
+            tool,
+            placement: customPlacement2,
+            startWorld: { x: worldX, y: worldY },
+            startScreen: { x: sx, y: sy }
+          };
+          setPlacementPreview({
+            kind: "rect",
+            rect: { x: worldX, y: worldY, width: 0, height: 0 }
+          });
+          return;
+        }
         if (tool === "note" || tool === "text") {
           dragStateRef.current = {
             kind: "tap",
@@ -4028,6 +4537,18 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           };
           return;
         }
+        const handleWorldPointerDown = onWorldPointerDownRef.current;
+        if (handleWorldPointerDown) {
+          handleWorldPointerDown({
+            toolId: tool,
+            worldX,
+            worldY,
+            screenX: sx,
+            screenY: sy
+          });
+          requestSelectToolAfterUse();
+          return;
+        }
         dragStateRef.current = { kind: "pan" };
       },
       onPanResponderMove: (evt) => {
@@ -4123,6 +4644,36 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           change(nextList);
           return;
         }
+        if (st.kind === "rotate") {
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const angle = Math.atan2(
+            worldY - st.pivotWorld.y,
+            worldX - st.pivotWorld.x
+          );
+          const next = applyRotationFromPointer(
+            st.snapshot,
+            st.startRotation,
+            st.startPointerAngleRad,
+            angle
+          );
+          change(
+            itemsRef.current.map((item) => item.id === st.id ? next : item)
+          );
+          return;
+        }
+        if (st.kind === "resize") {
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const next = resizeItemByHandle(st.snapshot, st.start, st.handle, {
+            x: worldX,
+            y: worldY
+          });
+          change(
+            itemsRef.current.map((item) => item.id === st.id ? next : item)
+          );
+          return;
+        }
         if (st.kind === "marquee") {
           const a = st.startWorld;
           const b = { x: worldX, y: worldY };
@@ -4161,6 +4712,13 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           );
           return;
         }
+        if (st.kind === "custom-place") {
+          setPlacementPreview({
+            kind: "rect",
+            rect: rectFromCorners(st.startWorld, { x: worldX, y: worldY })
+          });
+          return;
+        }
       },
       onPanResponderRelease: (evt) => {
         lastPinchDist.current = null;
@@ -4204,6 +4762,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           dragStateRef.current = { kind: "idle" };
           return;
         }
+        if (st.kind === "resize" || st.kind === "rotate") {
+          dragStateRef.current = { kind: "idle" };
+          return;
+        }
         if (st.kind === "marquee") {
           dragStateRef.current = { kind: "idle" };
           setPlacementPreview(null);
@@ -4301,6 +4863,34 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           requestSelectToolAfterUse();
           return;
         }
+        if (st.kind === "custom-place") {
+          dragStateRef.current = { kind: "idle" };
+          setPlacementPreview(null);
+          const change = onItemsChangeRef.current;
+          if (!change) return;
+          const { worldX, worldY } = screenToWorld(
+            evt.nativeEvent.locationX,
+            evt.nativeEvent.locationY
+          );
+          const center = {
+            x: (st.startWorld.x + worldX) / 2,
+            y: (st.startWorld.y + worldY) / 2
+          };
+          const raw = rectFromCorners(st.startWorld, { x: worldX, y: worldY });
+          const normalized = normalizeRect(raw);
+          const bounds = normalized.width < MIN_PLACE_SIZE || normalized.height < MIN_PLACE_SIZE ? {
+            x: center.x - 60,
+            y: center.y - 40,
+            width: 120,
+            height: 80
+          } : normalized;
+          const id = createShapeId();
+          const item = st.placement.createItem({ id, bounds });
+          change([...itemsRef.current, item]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
         if (st.kind === "tap") {
           dragStateRef.current = { kind: "idle" };
           const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
@@ -4392,7 +4982,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     [requestRender, size]
   );
   const activeStyleToolId = toolId === "draw" || toolId === "marker" ? toolId : null;
-  const activeToolCursor = nativeCursorForVectorToolId(toolId);
+  const activeToolCursor = cursorForToolId(toolId);
   const toolCursor = activeToolCursor && toolCursorPoint ? { cursor: activeToolCursor, point: toolCursorPoint } : null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,