canvu-react 0.4.19 → 0.4.20

package/dist/native.cjs

@@ -4349,6 +4349,196 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   const showResizeHandles = interactive && selectedItems.length === 1 && !selectedItems[0]?.locked && supportsNativeResizeHandles(selectedItems[0]);
   const lastPinchDist = react.useRef(null);
   const lastPanPoint = react.useRef(null);
+  const beginDragAtScreenPoint = react.useCallback(
+    (point) => {
+      lastPinchDist.current = null;
+      lastPanPoint.current = null;
+      const sx = point.x;
+      const sy = point.y;
+      updateToolCursorPoint(point);
+      if (!interactive) {
+        dragStateRef.current = { kind: "pan" };
+        return;
+      }
+      const tool = toolIdRef.current;
+      const cam = cameraRef.current;
+      if (!cam) return;
+      const { worldX, worldY } = screenToWorld(sx, sy);
+      if (tool === "hand") {
+        dragStateRef.current = { kind: "pan" };
+        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
+        });
+        if (hit) {
+          const cur = selectedIdsRef.current;
+          const ids = cur.includes(hit.id) ? [...cur] : [hit.id];
+          const snapshots = {};
+          for (const id of ids) {
+            const it = itemsRef.current.find((i) => i.id === id);
+            if (it) snapshots[id] = it;
+          }
+          dragStateRef.current = {
+            kind: "move",
+            ids,
+            snapshots,
+            startWorld: { x: worldX, y: worldY }
+          };
+          if (!cur.includes(hit.id)) {
+            onSelectionChangeRef.current?.([hit.id]);
+          }
+        } else {
+          onSelectionChangeRef.current?.([]);
+          dragStateRef.current = {
+            kind: "marquee",
+            startWorld: { x: worldX, y: worldY }
+          };
+          setPlacementPreview({
+            kind: "marquee",
+            rect: { x: worldX, y: worldY, width: 0, height: 0 }
+          });
+        }
+        return;
+      }
+      if (tool === "draw" || tool === "marker" || tool === "laser") {
+        dragStateRef.current = {
+          kind: "draw",
+          tool,
+          points: [{ x: worldX, y: worldY }]
+        };
+        if (tool === "laser") {
+          if (laserClearTimerRef.current) {
+            clearTimeout(laserClearTimerRef.current);
+            laserClearTimerRef.current = null;
+          }
+          setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
+        } else {
+          setPlacementPreview({
+            kind: "stroke",
+            tool,
+            points: [{ x: worldX, y: worldY }],
+            style: { ...strokeStyleRef.current }
+          });
+        }
+        return;
+      }
+      if (tool === "eraser") {
+        dragStateRef.current = { kind: "erase" };
+        eraserPreviewIdSetRef.current = /* @__PURE__ */ new Set();
+        setEraserPreviewIds([]);
+        setEraserTrail([{ 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 (isPlacementTool(tool)) {
+        dragStateRef.current = {
+          kind: "place",
+          tool,
+          startWorld: { x: worldX, y: worldY },
+          startScreen: { x: sx, y: sy }
+        };
+        setPlacementPreview(
+          placementPreviewForTool(
+            tool,
+            { x: worldX, y: worldY },
+            {
+              x: worldX,
+              y: worldY
+            }
+          )
+        );
+        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",
+          tool,
+          startWorld: { x: worldX, y: worldY },
+          startScreen: { x: sx, y: sy }
+        };
+        return;
+      }
+      const handleWorldPointerDown = onWorldPointerDownRef.current;
+      if (handleWorldPointerDown) {
+        handleWorldPointerDown({
+          toolId: tool,
+          worldX,
+          worldY,
+          screenX: sx,
+          screenY: sy
+        });
+        requestSelectToolAfterUse();
+        return;
+      }
+      dragStateRef.current = { kind: "pan" };
+    },
+    [interactive, requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+  );
   const applyDragMoveAtScreenPoint = react.useCallback(
     (point, pagePoint) => {
       const cam = cameraRef.current;
@@ -4485,6 +4675,220 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     },
     [requestRender, screenToWorld, updateToolCursorPoint]
   );
+  const finishDragAtScreenPoint = react.useCallback(
+    (point) => {
+      lastPinchDist.current = null;
+      lastPanPoint.current = null;
+      updateToolCursorPoint(point);
+      const st = dragStateRef.current;
+      if (st.kind === "draw") {
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+        if (st.tool === "laser") {
+          if (laserClearTimerRef.current) {
+            clearTimeout(laserClearTimerRef.current);
+          }
+          laserClearTimerRef.current = setTimeout(() => {
+            setLaserTrail([]);
+            laserClearTimerRef.current = null;
+          }, 650);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.points.length < 1) return;
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const id = createShapeId();
+        const item = createFreehandStrokeItem(
+          id,
+          st.points,
+          st.tool,
+          strokeStyleRef.current
+        );
+        if (item) {
+          change([...itemsRef.current, item]);
+        }
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "move") {
+        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);
+        const cam = cameraRef.current;
+        if (!cam) return;
+        const { worldX, worldY } = screenToWorld(point.x, point.y);
+        const a = st.startWorld;
+        if (typeof worldX !== "number" || typeof worldY !== "number") return;
+        const raw = {
+          x: Math.min(a.x, worldX),
+          y: Math.min(a.y, worldY),
+          width: Math.abs(worldX - a.x),
+          height: Math.abs(worldY - a.y)
+        };
+        const picked = collectIdsInRect(itemsRef.current, raw);
+        onSelectionChangeRef.current?.(picked);
+        return;
+      }
+      if (st.kind === "erase") {
+        const change = onItemsChangeRef.current;
+        if (change && eraserPreviewIdSetRef.current.size > 0) {
+          const idSet = new Set(eraserPreviewIdSetRef.current);
+          change(itemsRef.current.filter((i) => !idSet.has(i.id)));
+        }
+        eraserPreviewIdSetRef.current.clear();
+        setEraserPreviewIds([]);
+        setEraserTrail([]);
+        dragStateRef.current = { kind: "idle" };
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "place") {
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const { worldX, worldY } = screenToWorld(point.x, point.y);
+        const a = st.startWorld;
+        const b = { x: worldX, y: worldY };
+        const screenDx = point.x - st.startScreen.x;
+        const screenDy = point.y - st.startScreen.y;
+        if (st.tool === "arrow" && Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
+          return;
+        }
+        let raw = rectFromCorners(a, b);
+        let br = normalizeRect(raw);
+        let lineStart = a;
+        let lineEnd = b;
+        if (br.width < MIN_PLACE_SIZE || br.height < MIN_PLACE_SIZE) {
+          const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+          const defaults = defaultPlacementWorld(st.tool, center);
+          raw = defaults.raw;
+          br = normalizeRect(raw);
+          if (defaults.lineWorld) {
+            const [defaultStart, defaultEnd] = defaults.lineWorld;
+            lineStart = defaultStart;
+            lineEnd = defaultEnd;
+          }
+        }
+        const id = createShapeId();
+        const style = strokeStyleRef.current;
+        if (st.tool === "rect") {
+          change([...itemsRef.current, createRectangleItem(id, raw, style)]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.tool === "ellipse") {
+          change([...itemsRef.current, createEllipseItem(id, raw, style)]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.tool === "architectural-cloud") {
+          change([
+            ...itemsRef.current,
+            createArchitecturalCloudItem(id, raw, style)
+          ]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        const line = lineEndpointsToLocal(br, lineStart, lineEnd);
+        change([...itemsRef.current, createLineItem(id, br, line, st.tool, style)]);
+        onSelectionChangeRef.current?.([id]);
+        requestSelectToolAfterUse();
+        return;
+      }
+      if (st.kind === "custom-place") {
+        dragStateRef.current = { kind: "idle" };
+        setPlacementPreview(null);
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        const { worldX, worldY } = screenToWorld(point.x, point.y);
+        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 = point.x - st.startScreen.x;
+        const screenDy = point.y - st.startScreen.y;
+        if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
+        const change = onItemsChangeRef.current;
+        if (!change) return;
+        if (st.tool === "text") {
+          const id = createShapeId();
+          const item = createTextItem(
+            id,
+            {
+              x: st.startWorld.x - 4,
+              y: st.startWorld.y - 18,
+              width: 160,
+              height: 26
+            },
+            "Text",
+            strokeStyleRef.current,
+            18
+          );
+          change([...itemsRef.current, item]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+        }
+        if (st.tool === "note") {
+          const id = createShapeId();
+          const note = {
+            id,
+            x: st.startWorld.x - 70,
+            y: st.startWorld.y - 40,
+            bounds: {
+              x: st.startWorld.x - 70,
+              y: st.startWorld.y - 40,
+              width: 140,
+              height: 80
+            },
+            childrenSvg: `<rect width="140" height="80" rx="8" fill="#fef08a" stroke="#facc15" stroke-width="1" /><text x="10" y="22" fill="#1f2937" font-size="12" font-family="system-ui">Nota</text>`,
+            toolKind: "custom"
+          };
+          change([...itemsRef.current, note]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+        }
+        return;
+      }
+      dragStateRef.current = { kind: "idle" };
+    },
+    [requestSelectToolAfterUse, screenToWorld, updateToolCursorPoint]
+  );
+  const handlePointerDown = react.useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      beginDragAtScreenPoint(point);
+    },
+    [beginDragAtScreenPoint]
+  );
   const handlePointerMove = react.useCallback(
     (event) => {
       const point = screenPointFromPointerEvent(event);
@@ -4496,13 +4900,18 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     },
     [applyDragMoveAtScreenPoint, updateToolCursorPoint]
   );
+  const handlePointerUp = react.useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      finishDragAtScreenPoint(point);
+    },
+    [finishDragAtScreenPoint]
+  );
   const panResponder = react.useMemo(
     () => reactNative.PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
       onPanResponderGrant: (evt) => {
-        lastPinchDist.current = null;
-        lastPanPoint.current = null;
         const touches = evt.nativeEvent.touches;
         const sx = evt.nativeEvent.locationX;
         const sy = evt.nativeEvent.locationY;
@@ -4511,187 +4920,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           dragStateRef.current = { kind: "pan" };
           return;
         }
-        updateToolCursorPoint({ x: sx, y: sy });
-        if (!interactive) {
-          dragStateRef.current = { kind: "pan" };
-          return;
-        }
-        const tool = toolIdRef.current;
-        const cam = cameraRef.current;
-        if (!cam) return;
-        const { worldX, worldY } = screenToWorld(sx, sy);
-        if (tool === "hand") {
-          dragStateRef.current = { kind: "pan" };
-          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
-          });
-          if (hit) {
-            const cur = selectedIdsRef.current;
-            const ids = cur.includes(hit.id) ? [...cur] : [hit.id];
-            const snapshots = {};
-            for (const id of ids) {
-              const it = itemsRef.current.find((i) => i.id === id);
-              if (it) snapshots[id] = it;
-            }
-            dragStateRef.current = {
-              kind: "move",
-              ids,
-              snapshots,
-              startWorld: { x: worldX, y: worldY }
-            };
-            if (!cur.includes(hit.id)) {
-              onSelectionChangeRef.current?.([hit.id]);
-            }
-          } else {
-            onSelectionChangeRef.current?.([]);
-            dragStateRef.current = {
-              kind: "marquee",
-              startWorld: { x: worldX, y: worldY }
-            };
-            setPlacementPreview({
-              kind: "marquee",
-              rect: { x: worldX, y: worldY, width: 0, height: 0 }
-            });
-          }
-          return;
-        }
-        if (tool === "draw" || tool === "marker" || tool === "laser") {
-          dragStateRef.current = {
-            kind: "draw",
-            tool,
-            points: [{ x: worldX, y: worldY }]
-          };
-          if (tool === "laser") {
-            if (laserClearTimerRef.current) {
-              clearTimeout(laserClearTimerRef.current);
-              laserClearTimerRef.current = null;
-            }
-            setLaserTrail([{ x: worldX, y: worldY, t: Date.now() }]);
-          } else {
-            setPlacementPreview({
-              kind: "stroke",
-              tool,
-              points: [{ x: worldX, y: worldY }],
-              style: { ...strokeStyleRef.current }
-            });
-          }
-          return;
-        }
-        if (tool === "eraser") {
-          dragStateRef.current = { kind: "erase" };
-          eraserPreviewIdSetRef.current = /* @__PURE__ */ new Set();
-          setEraserPreviewIds([]);
-          setEraserTrail([{ 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 (isPlacementTool(tool)) {
-          dragStateRef.current = {
-            kind: "place",
-            tool,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
-          };
-          setPlacementPreview(
-            placementPreviewForTool(
-              tool,
-              { x: worldX, y: worldY },
-              {
-                x: worldX,
-                y: worldY
-              }
-            )
-          );
-          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",
-            tool,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
-          };
-          return;
-        }
-        const handleWorldPointerDown = onWorldPointerDownRef.current;
-        if (handleWorldPointerDown) {
-          handleWorldPointerDown({
-            toolId: tool,
-            worldX,
-            worldY,
-            screenX: sx,
-            screenY: sy
-          });
-          requestSelectToolAfterUse();
-          return;
-        }
-        dragStateRef.current = { kind: "pan" };
+        beginDragAtScreenPoint({ x: sx, y: sy });
       },
       onPanResponderMove: (evt) => {
         const cam = cameraRef.current;
@@ -4725,223 +4954,10 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
         applyDragMoveAtScreenPoint({ x: sx, y: sy }, { x: pageX, y: pageY });
       },
       onPanResponderRelease: (evt) => {
-        lastPinchDist.current = null;
-        lastPanPoint.current = null;
-        updateToolCursorPoint({
+        finishDragAtScreenPoint({
           x: evt.nativeEvent.locationX,
           y: evt.nativeEvent.locationY
         });
-        const st = dragStateRef.current;
-        if (st.kind === "draw") {
-          dragStateRef.current = { kind: "idle" };
-          setPlacementPreview(null);
-          if (st.tool === "laser") {
-            if (laserClearTimerRef.current) {
-              clearTimeout(laserClearTimerRef.current);
-            }
-            laserClearTimerRef.current = setTimeout(() => {
-              setLaserTrail([]);
-              laserClearTimerRef.current = null;
-            }, 650);
-            requestSelectToolAfterUse();
-            return;
-          }
-          if (st.points.length < 1) return;
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          const id = createShapeId();
-          const item = createFreehandStrokeItem(
-            id,
-            st.points,
-            st.tool,
-            strokeStyleRef.current
-          );
-          if (item) {
-            change([...itemsRef.current, item]);
-          }
-          requestSelectToolAfterUse();
-          return;
-        }
-        if (st.kind === "move") {
-          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);
-          const cam = cameraRef.current;
-          if (!cam) return;
-          const { worldX, worldY } = screenToWorld(
-            evt.nativeEvent.locationX,
-            evt.nativeEvent.locationY
-          );
-          const a = st.startWorld;
-          if (typeof worldX !== "number" || typeof worldY !== "number") return;
-          const raw = {
-            x: Math.min(a.x, worldX),
-            y: Math.min(a.y, worldY),
-            width: Math.abs(worldX - a.x),
-            height: Math.abs(worldY - a.y)
-          };
-          const picked = collectIdsInRect(itemsRef.current, raw);
-          onSelectionChangeRef.current?.(picked);
-          return;
-        }
-        if (st.kind === "erase") {
-          const change = onItemsChangeRef.current;
-          if (change && eraserPreviewIdSetRef.current.size > 0) {
-            const idSet = new Set(eraserPreviewIdSetRef.current);
-            change(itemsRef.current.filter((i) => !idSet.has(i.id)));
-          }
-          eraserPreviewIdSetRef.current.clear();
-          setEraserPreviewIds([]);
-          setEraserTrail([]);
-          dragStateRef.current = { kind: "idle" };
-          requestSelectToolAfterUse();
-          return;
-        }
-        if (st.kind === "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 a = st.startWorld;
-          const b = { x: worldX, y: worldY };
-          const screenDx = evt.nativeEvent.locationX - st.startScreen.x;
-          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
-          if (st.tool === "arrow" && Math.hypot(screenDx, screenDy) < MIN_ARROW_DRAG_PX) {
-            return;
-          }
-          let raw = rectFromCorners(a, b);
-          let br = normalizeRect(raw);
-          let lineStart = a;
-          let lineEnd = b;
-          if (br.width < MIN_PLACE_SIZE || br.height < MIN_PLACE_SIZE) {
-            const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-            const defaults = defaultPlacementWorld(st.tool, center);
-            raw = defaults.raw;
-            br = normalizeRect(raw);
-            if (defaults.lineWorld) {
-              const [defaultStart, defaultEnd] = defaults.lineWorld;
-              lineStart = defaultStart;
-              lineEnd = defaultEnd;
-            }
-          }
-          const id = createShapeId();
-          const style = strokeStyleRef.current;
-          if (st.tool === "rect") {
-            change([...itemsRef.current, createRectangleItem(id, raw, style)]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-            return;
-          }
-          if (st.tool === "ellipse") {
-            change([...itemsRef.current, createEllipseItem(id, raw, style)]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-            return;
-          }
-          if (st.tool === "architectural-cloud") {
-            change([
-              ...itemsRef.current,
-              createArchitecturalCloudItem(id, raw, style)
-            ]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-            return;
-          }
-          const line = lineEndpointsToLocal(br, lineStart, lineEnd);
-          change([
-            ...itemsRef.current,
-            createLineItem(id, br, line, st.tool, style)
-          ]);
-          onSelectionChangeRef.current?.([id]);
-          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;
-          const screenDy = evt.nativeEvent.locationY - st.startScreen.y;
-          if (Math.hypot(screenDx, screenDy) > TAP_PX) return;
-          const change = onItemsChangeRef.current;
-          if (!change) return;
-          if (st.tool === "text") {
-            const id = createShapeId();
-            const item = createTextItem(
-              id,
-              {
-                x: st.startWorld.x - 4,
-                y: st.startWorld.y - 18,
-                width: 160,
-                height: 26
-              },
-              "Text",
-              strokeStyleRef.current,
-              18
-            );
-            change([...itemsRef.current, item]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-          }
-          if (st.tool === "note") {
-            const id = createShapeId();
-            const note = {
-              id,
-              x: st.startWorld.x - 70,
-              y: st.startWorld.y - 40,
-              bounds: {
-                x: st.startWorld.x - 70,
-                y: st.startWorld.y - 40,
-                width: 140,
-                height: 80
-              },
-              childrenSvg: `<rect width="140" height="80" rx="8" fill="#fef08a" stroke="#facc15" stroke-width="1" /><text x="10" y="22" fill="#1f2937" font-size="12" font-family="system-ui">Nota</text>`,
-              toolKind: "custom"
-            };
-            change([...itemsRef.current, note]);
-            onSelectionChangeRef.current?.([id]);
-            requestSelectToolAfterUse();
-          }
-          return;
-        }
-        dragStateRef.current = { kind: "idle" };
       },
       onPanResponderTerminate: () => {
         lastPinchDist.current = null;
@@ -4957,11 +4973,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     }),
     [
       applyDragMoveAtScreenPoint,
-      screenToWorld,
+      beginDragAtScreenPoint,
+      finishDragAtScreenPoint,
       requestRender,
-      requestSelectToolAfterUse,
-      interactive,
-      updateToolCursorPoint,
       hideToolCursor
     ]
   );
@@ -4994,7 +5008,9 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
     {
       style: { flex: 1, overflow: "hidden" },
       onLayout,
+      onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
       onPointerEnter: handlePointerMove,
       onPointerLeave: hideToolCursor,
       ...panResponder.panHandlers,