canvu-react 0.4.18 → 0.4.20

package/dist/native.js

@@ -4002,6 +4002,7 @@ function nativeFallbackToolCursorPoint(size) {
 }
 
 // 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") {
@@ -4023,7 +4024,7 @@ function hitTestNativeSelectionHandle({
   if (!supportsNativeResizeHandles(selectedItem)) return null;
   const bounds = normalizeRect(selectedItem.bounds);
   const rotation = selectedItem.rotation ?? 0;
-  const handleRadiusWorld = 6 / Math.max(zoom, 1e-9);
+  const handleRadiusWorld = NATIVE_SELECTION_HANDLE_HIT_RADIUS_PX / Math.max(zoom, 1e-9);
   const rotateOffsetWorld = 24 / Math.max(zoom, 1e-9);
   if (hitTestRotateHandle(
     bounds,
@@ -4330,12 +4331,6 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   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]
@@ -4348,590 +4343,615 @@ 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 panResponder = useMemo(
-    () => 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;
-        if (touches && touches.length >= 2) {
-          hideToolCursor();
-          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;
-            }
+  const beginDragAtScreenPoint = 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: "resize",
+              kind: "rotate",
               id: selectedItem.id,
-              handle: selectionHandle.handle,
               snapshot: selectedItem,
-              start: {
-                bounds: selectedItem.bounds,
-                line: selectedItem.line
-              }
+              ...rotationStart
             };
             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;
+            kind: "resize",
+            id: selectedItem.id,
+            handle: selectionHandle.handle,
+            snapshot: selectedItem,
+            start: {
+              bounds: selectedItem.bounds,
+              line: selectedItem.line
             }
-            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);
+        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;
           }
-          setEraserPreviewIds(Array.from(eraserPreviewIdSetRef.current));
-          return;
-        }
-        if (isPlacementTool(tool)) {
           dragStateRef.current = {
-            kind: "place",
-            tool,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
+            kind: "move",
+            ids,
+            snapshots,
+            startWorld: { x: worldX, y: worldY }
           };
-          setPlacementPreview(
-            placementPreviewForTool(
-              tool,
-              { x: worldX, y: worldY },
-              {
-                x: worldX,
-                y: worldY
-              }
-            )
-          );
-          return;
-        }
-        const customPlacement2 = resolveNativeCustomPlacement(
-          tool,
-          customPlacementRef.current,
-          customPlacementsRef.current
-        );
-        if (customPlacement2) {
+          if (!cur.includes(hit.id)) {
+            onSelectionChangeRef.current?.([hit.id]);
+          }
+        } else {
+          onSelectionChangeRef.current?.([]);
           dragStateRef.current = {
-            kind: "custom-place",
-            tool,
-            placement: customPlacement2,
-            startWorld: { x: worldX, y: worldY },
-            startScreen: { x: sx, y: sy }
+            kind: "marquee",
+            startWorld: { x: worldX, y: worldY }
           };
           setPlacementPreview({
-            kind: "rect",
+            kind: "marquee",
             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" };
-      },
-      onPanResponderMove: (evt) => {
-        const cam = cameraRef.current;
-        if (!cam) return;
-        const touches = evt.nativeEvent.touches;
-        const sx = evt.nativeEvent.locationX;
-        const sy = evt.nativeEvent.locationY;
-        const pageX = evt.nativeEvent.pageX;
-        const pageY = evt.nativeEvent.pageY;
-        if (touches && touches.length >= 2) {
-          hideToolCursor();
-          const t0 = touches[0];
-          const t1 = touches[1];
-          if (t0 && t1) {
-            const dx = t1.pageX - t0.pageX;
-            const dy = t1.pageY - t0.pageY;
-            const dist = Math.hypot(dx, dy);
-            if (lastPinchDist.current != null) {
-              const scale = dist / lastPinchDist.current;
-              const cx = (t0.pageX + t1.pageX) / 2;
-              const cy = (t0.pageY + t1.pageY) / 2;
-              cam.setZoom(cam.zoom * scale, { x: cx, y: cy });
-              requestRender();
-            }
-            lastPinchDist.current = dist;
-            lastPanPoint.current = null;
-          }
-          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;
+        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: st.tool,
-            points: [...pts],
+            tool,
+            points: [{ x: worldX, y: worldY }],
             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;
+        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);
         }
-        if (st.kind === "place") {
-          setPlacementPreview(
-            placementPreviewForTool(st.tool, st.startWorld, {
+        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;
+            }
+          )
+        );
+        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 = 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();
         }
-        if (st.kind === "custom-place") {
-          setPlacementPreview({
-            kind: "rect",
-            rect: rectFromCorners(st.startWorld, { x: worldX, y: worldY })
-          });
+        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;
         }
-      },
-      onPanResponderRelease: (evt) => {
-        lastPinchDist.current = null;
-        lastPanPoint.current = null;
-        updateToolCursorPoint({
-          x: evt.nativeEvent.locationX,
-          y: evt.nativeEvent.locationY
+        setPlacementPreview({
+          kind: "stroke",
+          tool: st.tool,
+          points: [...pts],
+          style: { ...strokeStyleRef.current }
         });
-        const st = dragStateRef.current;
-        if (st.kind === "draw") {
-          dragStateRef.current = { kind: "idle" };
-          setPlacementPreview(null);
-          if (st.tool === "laser") {
-            if (laserClearTimerRef.current) {
-              clearTimeout(laserClearTimerRef.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
             }
-            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]);
+          };
+        });
+        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 finishDragAtScreenPoint = 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.kind === "move") {
-          dragStateRef.current = { kind: "idle" };
-          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]);
         }
-        if (st.kind === "resize" || st.kind === "rotate") {
-          dragStateRef.current = { kind: "idle" };
-          return;
+        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)));
         }
-        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);
+        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;
         }
-        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)));
+        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;
           }
-          eraserPreviewIdSetRef.current.clear();
-          setEraserPreviewIds([]);
-          setEraserTrail([]);
-          dragStateRef.current = { kind: "idle" };
+        }
+        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.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);
+        if (st.tool === "ellipse") {
+          change([...itemsRef.current, createEllipseItem(id, raw, style)]);
+          onSelectionChangeRef.current?.([id]);
+          requestSelectToolAfterUse();
+          return;
+        }
+        if (st.tool === "architectural-cloud") {
           change([
             ...itemsRef.current,
-            createLineItem(id, br, line, st.tool, style)
+            createArchitecturalCloudItem(id, raw, 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 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 = st.placement.createItem({ id, bounds });
+          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();
-          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,
+        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,
-              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();
+              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 = useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      beginDragAtScreenPoint(point);
+    },
+    [beginDragAtScreenPoint]
+  );
+  const handlePointerMove = useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      if (dragStateRef.current.kind !== "idle") {
+        applyDragMoveAtScreenPoint(point, point);
+        return;
+      }
+      updateToolCursorPoint(point);
+    },
+    [applyDragMoveAtScreenPoint, updateToolCursorPoint]
+  );
+  const handlePointerUp = useCallback(
+    (event) => {
+      const point = screenPointFromPointerEvent(event);
+      finishDragAtScreenPoint(point);
+    },
+    [finishDragAtScreenPoint]
+  );
+  const panResponder = useMemo(
+    () => PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: (evt) => {
+        const touches = evt.nativeEvent.touches;
+        const sx = evt.nativeEvent.locationX;
+        const sy = evt.nativeEvent.locationY;
+        if (touches && touches.length >= 2) {
+          hideToolCursor();
+          dragStateRef.current = { kind: "pan" };
+          return;
+        }
+        beginDragAtScreenPoint({ x: sx, y: sy });
+      },
+      onPanResponderMove: (evt) => {
+        const cam = cameraRef.current;
+        if (!cam) return;
+        const touches = evt.nativeEvent.touches;
+        const sx = evt.nativeEvent.locationX;
+        const sy = evt.nativeEvent.locationY;
+        const pageX = evt.nativeEvent.pageX;
+        const pageY = evt.nativeEvent.pageY;
+        if (touches && touches.length >= 2) {
+          hideToolCursor();
+          const t0 = touches[0];
+          const t1 = touches[1];
+          if (t0 && t1) {
+            const dx = t1.pageX - t0.pageX;
+            const dy = t1.pageY - t0.pageY;
+            const dist = Math.hypot(dx, dy);
+            if (lastPinchDist.current != null) {
+              const scale = dist / lastPinchDist.current;
+              const cx = (t0.pageX + t1.pageX) / 2;
+              const cy = (t0.pageY + t1.pageY) / 2;
+              cam.setZoom(cam.zoom * scale, { x: cx, y: cy });
+              requestRender();
+            }
+            lastPinchDist.current = dist;
+            lastPanPoint.current = null;
           }
           return;
         }
-        dragStateRef.current = { kind: "idle" };
+        lastPinchDist.current = null;
+        applyDragMoveAtScreenPoint({ x: sx, y: sy }, { x: pageX, y: pageY });
+      },
+      onPanResponderRelease: (evt) => {
+        finishDragAtScreenPoint({
+          x: evt.nativeEvent.locationX,
+          y: evt.nativeEvent.locationY
+        });
       },
       onPanResponderTerminate: () => {
         lastPinchDist.current = null;
@@ -4946,11 +4966,10 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       }
     }),
     [
-      screenToWorld,
+      applyDragMoveAtScreenPoint,
+      beginDragAtScreenPoint,
+      finishDragAtScreenPoint,
       requestRender,
-      requestSelectToolAfterUse,
-      interactive,
-      updateToolCursorPoint,
       hideToolCursor
     ]
   );
@@ -4983,7 +5002,9 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
     {
       style: { flex: 1, overflow: "hidden" },
       onLayout,
+      onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
       onPointerEnter: handlePointerMove,
       onPointerLeave: hideToolCursor,
       ...panResponder.panHandlers,