@tsdraw/react 0.8.3 → 0.8.4

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { DEFAULT_COLORS, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, pageToScreen, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, isSelectTool } from '@tsdraw/core';
+import { DEFAULT_COLORS, getSelectionBoundsPage, buildTransformSnapshots, Editor, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, pageToScreen, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, normalizeSelectionBounds, getShapesInBounds, HandDraggingState, startCameraSlide, isSelectTool, beginCameraPan, moveCameraPan } from '@tsdraw/core';
 import { IconPointer, IconPencil, IconSquare, IconCircle, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
 
 // src/components/TsdrawCanvas.tsx
@@ -295,8 +295,6 @@ function getCanvasCursor(currentTool, state) {
   }
   return state.showToolOverlay ? "none" : "crosshair";
 }
-
-// src/canvas/touchInteractions.ts
 var TAP_MAX_DURATION_MS = 100;
 var DOUBLE_TAP_INTERVAL_MS = 100;
 var TAP_MOVE_TOLERANCE = 14;
@@ -318,15 +316,28 @@ function createTouchInteractionController(editor, canvas, handlers) {
     mode: "not-sure",
     previousCenter: { x: 0, y: 0 },
     initialCenter: { x: 0, y: 0 },
-    previousDistance: 1,
-    initialDistance: 1
+    initialDistance: 1,
+    initialZoom: 1
   };
+  let fingerPanPointerId = null;
+  let fingerPanSession = null;
+  let fingerPanSlide = null;
   const isTouchPointer = (event) => event.pointerType === "touch";
+  const stopFingerPanSlide = () => {
+    if (fingerPanSlide) {
+      fingerPanSlide.stop();
+      fingerPanSlide = null;
+    }
+  };
+  const endFingerPan = () => {
+    fingerPanPointerId = null;
+    fingerPanSession = null;
+  };
   const endTouchCameraGesture = () => {
     touchCameraState.active = false;
     touchCameraState.mode = "not-sure";
-    touchCameraState.previousDistance = 1;
     touchCameraState.initialDistance = 1;
+    touchCameraState.initialZoom = 1;
   };
   const maybeHandleTouchTapGesture = () => {
     if (activeTouchPoints.size > 0) return;
@@ -361,8 +372,8 @@ function createTouchInteractionController(editor, canvas, handlers) {
     touchCameraState.mode = "not-sure";
     touchCameraState.previousCenter = center;
     touchCameraState.initialCenter = center;
-    touchCameraState.previousDistance = Math.max(1, distance);
     touchCameraState.initialDistance = Math.max(1, distance);
+    touchCameraState.initialZoom = editor.getZoomLevel();
   };
   const updateTouchCameraGesture = () => {
     if (!touchCameraState.active) return false;
@@ -386,18 +397,27 @@ function createTouchInteractionController(editor, canvas, handlers) {
     const canvasRect = canvas.getBoundingClientRect();
     const centerOnCanvasX = center.x - canvasRect.left;
     const centerOnCanvasY = center.y - canvasRect.top;
-    editor.panBy(centerDx, centerDy);
     if (touchCameraState.mode === "zooming") {
-      const zoomFactor = distance / touchCameraState.previousDistance;
-      editor.zoomAt(zoomFactor, centerOnCanvasX, centerOnCanvasY);
+      const targetZoom = Math.max(0.1, Math.min(4, touchCameraState.initialZoom * (distance / touchCameraState.initialDistance)));
+      const pannedX = editor.viewport.x + centerDx;
+      const pannedY = editor.viewport.y + centerDy;
+      const pageAtCenterX = (centerOnCanvasX - pannedX) / editor.viewport.zoom;
+      const pageAtCenterY = (centerOnCanvasY - pannedY) / editor.viewport.zoom;
+      editor.setViewport({
+        x: centerOnCanvasX - pageAtCenterX * targetZoom,
+        y: centerOnCanvasY - pageAtCenterY * targetZoom,
+        zoom: targetZoom
+      });
+    } else {
+      editor.panBy(centerDx, centerDy);
     }
     touchCameraState.previousCenter = center;
-    touchCameraState.previousDistance = distance;
     handlers.refreshView();
     return true;
   };
   const handlePointerDown = (event) => {
     if (!isTouchPointer(event)) return false;
+    stopFingerPanSlide();
     activeTouchPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
     if (!touchTapState.active) {
       touchTapState.active = true;
@@ -410,9 +430,16 @@ function createTouchInteractionController(editor, canvas, handlers) {
     }
     touchTapState.startPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
     if (activeTouchPoints.size === 2) {
+      endFingerPan();
       beginTouchCameraGesture();
       return true;
     }
+    if (handlers.isPenModeActive() && activeTouchPoints.size === 1) {
+      handlers.cancelActivePointerInteraction();
+      fingerPanPointerId = event.pointerId;
+      fingerPanSession = beginCameraPan(editor.viewport, event.clientX, event.clientY);
+      return true;
+    }
     return false;
   };
   const handlePointerMove = (event) => {
@@ -423,16 +450,34 @@ function createTouchInteractionController(editor, canvas, handlers) {
       const moved = Math.hypot(event.clientX - tapStart.x, event.clientY - tapStart.y);
       if (moved > TAP_MOVE_TOLERANCE) touchTapState.moved = true;
     }
+    if (fingerPanPointerId === event.pointerId && fingerPanSession) {
+      const target = moveCameraPan(fingerPanSession, event.clientX, event.clientY);
+      editor.setViewport({ x: target.x, y: target.y });
+      handlers.refreshView();
+      return true;
+    }
     return updateTouchCameraGesture();
   };
   const handlePointerUpOrCancel = (event) => {
     if (!isTouchPointer(event)) return false;
     const wasCameraGestureActive = touchCameraState.active;
+    const wasFingerPan = fingerPanPointerId === event.pointerId;
+    const releasedPanSession = wasFingerPan ? fingerPanSession : null;
     activeTouchPoints.delete(event.pointerId);
     touchTapState.startPoints.delete(event.pointerId);
     if (activeTouchPoints.size < 2) endTouchCameraGesture();
+    if (wasFingerPan) {
+      endFingerPan();
+      if (releasedPanSession) {
+        fingerPanSlide = startCameraSlide(
+          releasedPanSession,
+          (dx, dy) => editor.panBy(dx, dy),
+          () => handlers.refreshView()
+        );
+      }
+    }
     maybeHandleTouchTapGesture();
-    return wasCameraGestureActive;
+    return wasCameraGestureActive || wasFingerPan;
   };
   let gestureLastScale = 1;
   let gestureActive = false;
@@ -466,6 +511,8 @@ function createTouchInteractionController(editor, canvas, handlers) {
     touchTapState.active = false;
     touchTapState.startPoints.clear();
     endTouchCameraGesture();
+    endFingerPan();
+    stopFingerPanSlide();
   };
   return {
     handlePointerDown,
@@ -474,6 +521,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
     handleGestureEvent,
     reset,
     isCameraGestureActive: () => touchCameraState.active,
+    isFingerPanActive: () => fingerPanPointerId !== null,
     isTrackpadZoomActive: () => gestureActive
   };
 }
@@ -702,6 +750,7 @@ function useTsdrawCanvasController(options = {}) {
   const schedulePersistRef = useRef(null);
   const isPointerActiveRef = useRef(false);
   const pendingRemoteDocumentRef = useRef(null);
+  const activeCameraSlideRef = useRef(null);
   const selectionRotationRef = useRef(0);
   const resizeRef = useRef({
     handle: null,
@@ -1050,12 +1099,19 @@ function useTsdrawCanvasController(options = {}) {
         refreshSelectionBounds(editor);
       },
       runUndo: () => applyDocumentChangeResult(editor.undo()),
-      runRedo: () => applyDocumentChangeResult(editor.redo())
+      runRedo: () => applyDocumentChangeResult(editor.redo()),
+      isPenModeActive: () => penModeRef.current
     });
-    const isDrawingTool = (tool) => tool !== "select" && tool !== "hand";
     const hasRealPressure = (pressure) => pressure != null && pressure > 0 && pressure !== 0.5;
+    const stopActiveSlide = () => {
+      if (activeCameraSlideRef.current) {
+        activeCameraSlideRef.current.stop();
+        activeCameraSlideRef.current = null;
+      }
+    };
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
+      stopActiveSlide();
       if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
         penDetectedRef.current = true;
         penModeRef.current = true;
@@ -1063,15 +1119,15 @@ function useTsdrawCanvasController(options = {}) {
       lastPointerDownWithRef.current = e.pointerType;
       activePointerIdsRef.current.add(e.pointerId);
       const startedCameraGesture = touchInteractions.handlePointerDown(e);
-      if (startedCameraGesture || touchInteractions.isCameraGestureActive()) {
+      if (startedCameraGesture || touchInteractions.isCameraGestureActive() || touchInteractions.isFingerPanActive()) {
         e.preventDefault();
         if (!canvas.hasPointerCapture(e.pointerId)) {
           canvas.setPointerCapture(e.pointerId);
         }
         return;
       }
-      const allowPointerDown = !penModeRef.current || e.pointerType !== "touch" || !isDrawingTool(currentToolRef.current);
-      if (!allowPointerDown) {
+      const isTouchBlockedByPenMode = penModeRef.current && e.pointerType === "touch";
+      if (isTouchBlockedByPenMode) {
         return;
       }
       if (activePointerIdsRef.current.size > 1) {
@@ -1126,7 +1182,7 @@ function useTsdrawCanvasController(options = {}) {
       }
       editor.input.pointerDown(x, y, pressure, isPen);
       editor.input.setModifiers(first.shiftKey, first.ctrlKey, first.metaKey);
-      editor.tools.pointerDown({ point: { x, y, z: pressure } });
+      editor.tools.pointerDown({ point: { x, y, z: pressure }, screenX: e.clientX, screenY: e.clientY });
       render();
       refreshSelectionBounds(editor);
     };
@@ -1139,7 +1195,7 @@ function useTsdrawCanvasController(options = {}) {
         e.preventDefault();
         return;
       }
-      if (penModeRef.current && e.pointerType === "touch" && isDrawingTool(currentToolRef.current) && !isPointerActiveRef.current) return;
+      if (penModeRef.current && e.pointerType === "touch" && !isPointerActiveRef.current) return;
       if (activePointerIdsRef.current.size > 1) return;
       updatePointerPreview(e.clientX, e.clientY);
       const prevClient = lastPointerClientRef.current;
@@ -1193,7 +1249,7 @@ function useTsdrawCanvasController(options = {}) {
         }
       }
       editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
-      editor.tools.pointerMove({ screenDeltaX: dx, screenDeltaY: dy });
+      editor.tools.pointerMove({ screenDeltaX: dx, screenDeltaY: dy, screenX: e.clientX, screenY: e.clientY });
       render();
       refreshSelectionBounds(editor);
     };
@@ -1272,9 +1328,26 @@ function useTsdrawCanvasController(options = {}) {
           return;
         }
       }
+      let handPanSession = null;
+      if (currentToolRef.current === "hand") {
+        const currentState = editor.tools.getCurrentState();
+        if (currentState instanceof HandDraggingState) {
+          handPanSession = currentState.getPanSession();
+        }
+      }
       editor.tools.pointerUp();
       render();
       refreshSelectionBounds(editor);
+      if (handPanSession) {
+        activeCameraSlideRef.current = startCameraSlide(
+          handPanSession,
+          (slideDx, slideDy) => editor.panBy(slideDx, slideDy),
+          () => {
+            render();
+            refreshSelectionBounds(editor);
+          }
+        );
+      }
       if (pendingRemoteDocumentRef.current) {
         const pendingRemoteDocument = pendingRemoteDocumentRef.current;
         pendingRemoteDocumentRef.current = null;
@@ -1519,6 +1592,7 @@ function useTsdrawCanvasController(options = {}) {
       isPointerActiveRef.current = false;
       activePointerIdsRef.current.clear();
       pendingRemoteDocumentRef.current = null;
+      stopActiveSlide();
       touchInteractions.reset();
       persistenceChannel?.close();
       void persistenceDb?.close();