canvu-react 0.4.17 → 0.4.19

package/dist/native.js

@@ -940,6 +940,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) {
@@ -970,6 +974,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;
@@ -993,6 +998,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(
@@ -1013,6 +1042,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);
@@ -1020,6 +1053,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) {
@@ -3581,6 +3763,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 };
@@ -3606,10 +3993,73 @@ 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
+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 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;
@@ -3624,16 +4074,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) };
@@ -3701,7 +4141,11 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onSelectionChange,
   onItemsChange,
   onToolChangeRequest,
+  onWorldPointerDown,
   onCameraChange,
+  customPlacement,
+  customPlacements = [],
+  customCrosshairToolIds = [],
   toolbar,
   showStyleInspector = false,
   styleInspectorPlacement = "bottom"
@@ -3714,10 +4158,18 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   toolLockedRef.current = toolLocked;
   const onToolChangeRequestRef = useRef(onToolChangeRequest);
   onToolChangeRequestRef.current = onToolChangeRequest;
+  const onWorldPointerDownRef = useRef(onWorldPointerDown);
+  onWorldPointerDownRef.current = onWorldPointerDown;
   const onCameraChangeRef = useRef(onCameraChange);
   onCameraChangeRef.current = onCameraChange;
   const onItemsChangeRef = useRef(onItemsChange);
   onItemsChangeRef.current = onItemsChange;
+  const customPlacementRef = useRef(customPlacement);
+  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);
@@ -3825,6 +4277,11 @@ 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;
@@ -3834,7 +4291,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         setToolCursorPoint(null);
         return;
       }
-      if (!nativeCursorForVectorToolId(toolIdRef.current)) {
+      if (!cursorForToolId(toolIdRef.current)) {
         setToolCursorPoint(null);
         return;
       }
@@ -3842,15 +4299,15 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         (current) => current ?? nativeFallbackToolCursorPoint(nextSize)
       );
     },
-    [interactive]
+    [cursorForToolId, interactive]
   );
   const updateToolCursorPoint = useCallback(
     (point) => {
       if (!interactive) return;
-      if (!nativeCursorForVectorToolId(toolIdRef.current)) return;
+      if (!cursorForToolId(toolIdRef.current)) return;
       setToolCursorPoint(point);
     },
-    [interactive]
+    [cursorForToolId, interactive]
   );
   const hideToolCursor = useCallback(() => {
     setToolCursorPoint(null);
@@ -3861,7 +4318,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         setToolCursorPoint(null);
         return;
       }
-      if (!nativeCursorForVectorToolId(nextToolId)) {
+      if (!cursorForToolId(nextToolId)) {
         setToolCursorPoint(null);
         return;
       }
@@ -3869,17 +4326,11 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         (current) => current ?? nativeFallbackToolCursorPoint(size)
       );
     },
-    [interactive, size]
+    [cursorForToolId, 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]
@@ -3892,6 +4343,153 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
   const lastPinchDist = useRef(null);
   const lastPanPoint = useRef(null);
+  const applyDragMoveAtScreenPoint = useCallback(
+    (point, pagePoint) => {
+      const cam = cameraRef.current;
+      if (!cam) return;
+      updateToolCursorPoint(point);
+      const { worldX, worldY } = screenToWorld(point.x, point.y);
+      const st = dragStateRef.current;
+      if (st.kind === "pan") {
+        const current = pagePoint ?? point;
+        if (lastPanPoint.current) {
+          const dx = current.x - lastPanPoint.current.x;
+          const dy = current.y - lastPanPoint.current.y;
+          cam.x += dx;
+          cam.y += dy;
+          requestRender();
+        }
+        lastPanPoint.current = current;
+        return;
+      }
+      lastPanPoint.current = null;
+      if (st.kind === "draw") {
+        const pts = st.points;
+        const last = pts[pts.length - 1];
+        const dx = worldX - (last?.x ?? worldX);
+        const dy = worldY - (last?.y ?? worldY);
+        const shouldAppendPoint = Math.hypot(dx, dy) > 0.5 / cam.zoom;
+        if (shouldAppendPoint) {
+          pts.push({ x: worldX, y: worldY });
+        }
+        if (st.tool === "laser") {
+          if (shouldAppendPoint) {
+            setLaserTrail((prev) => [
+              ...prev,
+              { x: worldX, y: worldY, t: Date.now() }
+            ]);
+          }
+          return;
+        }
+        setPlacementPreview({
+          kind: "stroke",
+          tool: st.tool,
+          points: [...pts],
+          style: { ...strokeStyleRef.current }
+        });
+        return;
+      }
+      if (st.kind === "move") {
+        const dx = worldX - st.startWorld.x;
+        const dy = worldY - st.startWorld.y;
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const nextList = itemsRef.current.map((it) => {
+          const snap = st.snapshots[it.id];
+          if (!snap) return it;
+          return {
+            ...snap,
+            x: snap.x + dx,
+            y: snap.y + dy,
+            bounds: {
+              ...snap.bounds,
+              x: snap.bounds.x + dx,
+              y: snap.bounds.y + dy
+            }
+          };
+        });
+        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 };
+        const rect = {
+          x: Math.min(a.x, b.x),
+          y: Math.min(a.y, b.y),
+          width: Math.abs(b.x - a.x),
+          height: Math.abs(b.y - a.y)
+        };
+        setPlacementPreview({ kind: "marquee", rect });
+        return;
+      }
+      if (st.kind === "erase") {
+        setEraserTrail((prev) => [...prev, { x: worldX, y: worldY, t: Date.now() }]);
+        const toErase = collectEraserTargetsAtWorldPoint(
+          itemsRef.current,
+          worldX,
+          worldY,
+          { lineHitWorld: 10 / cam.zoom, ignoreLocked: true }
+        );
+        for (const id of toErase) {
+          eraserPreviewIdSetRef.current.add(id);
+        }
+        setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
+        return;
+      }
+      if (st.kind === "place") {
+        setPlacementPreview(
+          placementPreviewForTool(st.tool, st.startWorld, {
+            x: worldX,
+            y: worldY
+          })
+        );
+        return;
+      }
+      if (st.kind === "custom-place") {
+        setPlacementPreview({
+          kind: "rect",
+          rect: rectFromCorners(st.startWorld, { x: worldX, y: worldY })
+        });
+        return;
+      }
+    },
+    [requestRender, screenToWorld, updateToolCursorPoint]
+  );
+  const handlePointerMove = useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      if (dragStateRef.current.kind !== "idle") {
+        applyDragMoveAtScreenPoint(point, point);
+        return;
+      }
+      updateToolCursorPoint(point);
+    },
+    [applyDragMoveAtScreenPoint, updateToolCursorPoint]
+  );
   const panResponder = useMemo(
     () => PanResponder.create({
       onStartShouldSetPanResponder: () => true,
@@ -3921,6 +4519,40 @@ var NativeVectorViewport = 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
@@ -4013,6 +4645,25 @@ var NativeVectorViewport = 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",
@@ -4022,6 +4673,18 @@ var NativeVectorViewport = 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) => {
@@ -4053,108 +4716,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") {
-          const current = { x: pageX, y: pageY };
-          if (lastPanPoint.current) {
-            const dx = current.x - lastPanPoint.current.x;
-            const dy = current.y - lastPanPoint.current.y;
-            cam.x += dx;
-            cam.y += dy;
-            requestRender();
-          }
-          lastPanPoint.current = current;
-          return;
-        }
-        lastPanPoint.current = null;
-        if (st.kind === "draw") {
-          const pts = st.points;
-          const last = pts[pts.length - 1];
-          const dx = worldX - (last?.x ?? worldX);
-          const dy = worldY - (last?.y ?? worldY);
-          const shouldAppendPoint = Math.hypot(dx, dy) > 0.5 / cam.zoom;
-          if (shouldAppendPoint) {
-            pts.push({ x: worldX, y: worldY });
-          }
-          if (st.tool === "laser") {
-            if (shouldAppendPoint) {
-              setLaserTrail((prev) => [
-                ...prev,
-                { x: worldX, y: worldY, t: Date.now() }
-              ]);
-            }
-            return;
-          }
-          setPlacementPreview({
-            kind: "stroke",
-            tool: st.tool,
-            points: [...pts],
-            style: { ...strokeStyleRef.current }
-          });
-          return;
-        }
-        if (st.kind === "move") {
-          const dx = worldX - st.startWorld.x;
-          const dy = worldY - st.startWorld.y;
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const nextList = itemsRef.current.map((it) => {
-            const snap = st.snapshots[it.id];
-            if (!snap) return it;
-            return {
-              ...snap,
-              x: snap.x + dx,
-              y: snap.y + dy,
-              bounds: {
-                ...snap.bounds,
-                x: snap.bounds.x + dx,
-                y: snap.bounds.y + dy
-              }
-            };
-          });
-          change(nextList);
-          return;
-        }
-        if (st.kind === "marquee") {
-          const a = st.startWorld;
-          const b = { x: worldX, y: worldY };
-          const rect = {
-            x: Math.min(a.x, b.x),
-            y: Math.min(a.y, b.y),
-            width: Math.abs(b.x - a.x),
-            height: Math.abs(b.y - a.y)
-          };
-          setPlacementPreview({ kind: "marquee", rect });
-          return;
-        }
-        if (st.kind === "erase") {
-          setEraserTrail((prev) => [
-            ...prev,
-            { x: worldX, y: worldY, t: Date.now() }
-          ]);
-          const toErase = collectEraserTargetsAtWorldPoint(
-            itemsRef.current,
-            worldX,
-            worldY,
-            { lineHitWorld: 10 / cam.zoom, ignoreLocked: true }
-          );
-          for (const id of toErase) {
-            eraserPreviewIdSetRef.current.add(id);
-          }
-          setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
-          return;
-        }
-        if (st.kind === "place") {
-          setPlacementPreview(
-            placementPreviewForTool(st.tool, st.startWorld, {
-              x: worldX,
-              y: worldY
-            })
-          );
-          return;
-        }
+        applyDragMoveAtScreenPoint({ x: sx, y: sy }, { x: pageX, y: pageY });
       },
       onPanResponderRelease: (evt) => {
         lastPinchDist.current = null;
@@ -4198,6 +4760,10 @@ var NativeVectorViewport = 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);
@@ -4295,6 +4861,34 @@ var NativeVectorViewport = 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;
@@ -4356,6 +4950,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
     }),
     [
+      applyDragMoveAtScreenPoint,
       screenToWorld,
       requestRender,
       requestSelectToolAfterUse,
@@ -4386,7 +4981,7 @@ var NativeVectorViewport = 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__ */ jsx(
     View,