@tsdraw/react 0.7.0 → 0.8.0

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, 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, isSelectTool } from '@tsdraw/core';
 import { IconPointer, IconPencil, IconSquare, IconCircle, IconEraser, IconHandStop, IconArrowBackUp, IconArrowForwardUp } from '@tabler/icons-react';
 
 // src/components/TsdrawCanvas.tsx
@@ -295,6 +295,249 @@ 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;
+var PINCH_MODE_ZOOM_DISTANCE = 24;
+var PINCH_MODE_PAN_DISTANCE = 16;
+var PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE = 64;
+function createTouchInteractionController(editor, canvas, handlers) {
+  const activeTouchPoints = /* @__PURE__ */ new Map();
+  const touchTapState = {
+    active: false,
+    startTime: 0,
+    maxTouchCount: 0,
+    moved: false,
+    startPoints: /* @__PURE__ */ new Map(),
+    lastTapAtByCount: {}
+  };
+  const touchCameraState = {
+    active: false,
+    mode: "not-sure",
+    previousCenter: { x: 0, y: 0 },
+    initialCenter: { x: 0, y: 0 },
+    previousDistance: 1,
+    initialDistance: 1,
+    previousAngle: 0
+  };
+  const isTouchPointer = (event) => event.pointerType === "touch";
+  const endTouchCameraGesture = () => {
+    touchCameraState.active = false;
+    touchCameraState.mode = "not-sure";
+    touchCameraState.previousDistance = 1;
+    touchCameraState.initialDistance = 1;
+    touchCameraState.previousAngle = 0;
+  };
+  const maybeHandleTouchTapGesture = () => {
+    if (activeTouchPoints.size > 0) return;
+    if (!touchTapState.active) return;
+    const elapsed = performance.now() - touchTapState.startTime;
+    if (!touchTapState.moved && elapsed <= TAP_MAX_DURATION_MS && (touchTapState.maxTouchCount === 2 || touchTapState.maxTouchCount === 3)) {
+      const fingerCount = touchTapState.maxTouchCount;
+      const now = performance.now();
+      const previousTapTime = touchTapState.lastTapAtByCount[fingerCount] ?? 0;
+      const isDoubleTap = previousTapTime > 0 && now - previousTapTime <= DOUBLE_TAP_INTERVAL_MS;
+      if (isDoubleTap) {
+        touchTapState.lastTapAtByCount[fingerCount] = 0;
+        if (fingerCount === 2) {
+          if (handlers.runUndo()) handlers.refreshView();
+        } else if (handlers.runRedo()) handlers.refreshView();
+      } else touchTapState.lastTapAtByCount[fingerCount] = now;
+    }
+    touchTapState.active = false;
+    touchTapState.startPoints.clear();
+    touchTapState.maxTouchCount = 0;
+    touchTapState.moved = false;
+  };
+  const beginTouchCameraGesture = () => {
+    const points = [...activeTouchPoints.values()];
+    if (points.length !== 2) return;
+    handlers.cancelActivePointerInteraction();
+    const first = points[0];
+    const second = points[1];
+    const center = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
+    const distance = Math.hypot(second.x - first.x, second.y - first.y);
+    const angle = Math.atan2(second.y - first.y, second.x - first.x);
+    touchCameraState.active = true;
+    touchCameraState.mode = "not-sure";
+    touchCameraState.previousCenter = center;
+    touchCameraState.initialCenter = center;
+    touchCameraState.previousDistance = Math.max(1, distance);
+    touchCameraState.initialDistance = Math.max(1, distance);
+    touchCameraState.previousAngle = angle;
+  };
+  const updateTouchCameraGesture = () => {
+    if (!touchCameraState.active) return false;
+    const points = [...activeTouchPoints.values()];
+    if (points.length !== 2) {
+      endTouchCameraGesture();
+      return false;
+    }
+    const first = points[0];
+    const second = points[1];
+    const center = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
+    const distance = Math.max(1, Math.hypot(second.x - first.x, second.y - first.y));
+    const angle = Math.atan2(second.y - first.y, second.x - first.x);
+    const centerDx = center.x - touchCameraState.previousCenter.x;
+    const centerDy = center.y - touchCameraState.previousCenter.y;
+    const touchDistance = Math.abs(distance - touchCameraState.initialDistance);
+    const originDistance = Math.hypot(center.x - touchCameraState.initialCenter.x, center.y - touchCameraState.initialCenter.y);
+    if (touchCameraState.mode === "not-sure") {
+      if (touchDistance > PINCH_MODE_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
+      else if (originDistance > PINCH_MODE_PAN_DISTANCE) touchCameraState.mode = "panning";
+    } else if (touchCameraState.mode === "panning" && touchDistance > PINCH_MODE_SWITCH_TO_ZOOM_DISTANCE) touchCameraState.mode = "zooming";
+    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);
+      editor.rotateAt(angle - touchCameraState.previousAngle, centerOnCanvasX, centerOnCanvasY);
+    }
+    touchCameraState.previousCenter = center;
+    touchCameraState.previousDistance = distance;
+    touchCameraState.previousAngle = angle;
+    handlers.refreshView();
+    return true;
+  };
+  const handlePointerDown = (event) => {
+    if (!isTouchPointer(event)) return false;
+    activeTouchPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (!touchTapState.active) {
+      touchTapState.active = true;
+      touchTapState.startTime = performance.now();
+      touchTapState.maxTouchCount = activeTouchPoints.size;
+      touchTapState.moved = false;
+      touchTapState.startPoints.clear();
+    } else {
+      touchTapState.maxTouchCount = Math.max(touchTapState.maxTouchCount, activeTouchPoints.size);
+    }
+    touchTapState.startPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    if (activeTouchPoints.size === 2) {
+      beginTouchCameraGesture();
+      return true;
+    }
+    return false;
+  };
+  const handlePointerMove = (event) => {
+    if (!isTouchPointer(event)) return false;
+    if (activeTouchPoints.has(event.pointerId)) activeTouchPoints.set(event.pointerId, { x: event.clientX, y: event.clientY });
+    const tapStart = touchTapState.startPoints.get(event.pointerId);
+    if (tapStart) {
+      const moved = Math.hypot(event.clientX - tapStart.x, event.clientY - tapStart.y);
+      if (moved > TAP_MOVE_TOLERANCE) touchTapState.moved = true;
+    }
+    return updateTouchCameraGesture();
+  };
+  const handlePointerUpOrCancel = (event) => {
+    if (!isTouchPointer(event)) return false;
+    const wasCameraGestureActive = touchCameraState.active;
+    activeTouchPoints.delete(event.pointerId);
+    touchTapState.startPoints.delete(event.pointerId);
+    if (activeTouchPoints.size < 2) endTouchCameraGesture();
+    maybeHandleTouchTapGesture();
+    return wasCameraGestureActive;
+  };
+  let gestureLastScale = 1;
+  let gestureActive = false;
+  const handleGestureEvent = (event, container) => {
+    if (!container.contains(event.target)) return;
+    event.preventDefault();
+    const gestureEvent = event;
+    if (gestureEvent.scale == null) return;
+    if (event.type === "gesturestart") {
+      gestureLastScale = gestureEvent.scale;
+      gestureActive = true;
+      return;
+    }
+    if (event.type === "gestureend") {
+      gestureActive = false;
+      gestureLastScale = 1;
+      return;
+    }
+    if (event.type === "gesturechange" && gestureActive) {
+      const zoomFactor = gestureEvent.scale / gestureLastScale;
+      gestureLastScale = gestureEvent.scale;
+      const canvasRect = canvas.getBoundingClientRect();
+      const cx = (gestureEvent.clientX ?? canvasRect.left + canvasRect.width / 2) - canvasRect.left;
+      const cy = (gestureEvent.clientY ?? canvasRect.top + canvasRect.height / 2) - canvasRect.top;
+      editor.zoomAt(zoomFactor, cx, cy);
+      handlers.refreshView();
+    }
+  };
+  const reset = () => {
+    activeTouchPoints.clear();
+    touchTapState.active = false;
+    touchTapState.startPoints.clear();
+    endTouchCameraGesture();
+  };
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUpOrCancel,
+    handleGestureEvent,
+    reset,
+    isCameraGestureActive: () => touchCameraState.active,
+    isTrackpadZoomActive: () => gestureActive
+  };
+}
+
+// src/canvas/keyboardShortcuts.ts
+var TOOL_SHORTCUTS = {
+  v: "select",
+  h: "hand",
+  e: "eraser",
+  p: "pen",
+  b: "pen",
+  d: "pen",
+  x: "pen",
+  r: "square",
+  o: "circle",
+  c: "circle"
+};
+function isEditableTarget(eventTarget) {
+  const element = eventTarget;
+  if (!element) return false;
+  if (element.isContentEditable) return true;
+  const tagName = element.tagName;
+  return tagName === "INPUT" || tagName === "TEXTAREA" || tagName === "SELECT";
+}
+function handleKeyboardShortcutKeyDown(event, handlers) {
+  if (isEditableTarget(event.target)) return;
+  const loweredKey = event.key.toLowerCase();
+  const isMetaPressed = event.metaKey || event.ctrlKey;
+  if (isMetaPressed && (loweredKey === "z" || loweredKey === "y")) {
+    const shouldRedo = loweredKey === "y" || loweredKey === "z" && event.shiftKey;
+    if (handlers.runHistoryShortcut(shouldRedo)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  }
+  if (!isMetaPressed && !event.altKey) {
+    const nextToolId = TOOL_SHORTCUTS[loweredKey];
+    if (nextToolId && handlers.isToolAvailable(nextToolId)) {
+      handlers.setToolFromShortcut(nextToolId);
+      event.preventDefault();
+      return;
+    }
+  }
+  if (event.key === "Delete" || event.key === "Backspace") {
+    if (handlers.deleteSelection()) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+  }
+  handlers.dispatchKeyDown(event);
+}
+function handleKeyboardShortcutKeyUp(event, handlers) {
+  if (isEditableTarget(event.target)) return;
+  handlers.dispatchKeyUp(event);
+}
+
 // src/persistence/localIndexedDb.ts
 var DATABASE_PREFIX = "tsdraw_v1_";
 var DATABASE_VERSION = 2;
@@ -418,23 +661,35 @@ function getOrCreateSessionId() {
 
 // src/canvas/useTsdrawCanvasController.ts
 function toScreenRect(editor, bounds) {
-  const { x, y, zoom } = editor.viewport;
+  const topLeft = pageToScreen(editor.viewport, bounds.minX, bounds.minY);
+  const topRight = pageToScreen(editor.viewport, bounds.maxX, bounds.minY);
+  const bottomLeft = pageToScreen(editor.viewport, bounds.minX, bounds.maxY);
+  const bottomRight = pageToScreen(editor.viewport, bounds.maxX, bounds.maxY);
+  const minX = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
+  const minY = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
+  const maxX = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
+  const maxY = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
   return {
-    left: bounds.minX * zoom + x,
-    top: bounds.minY * zoom + y,
-    width: (bounds.maxX - bounds.minX) * zoom,
-    height: (bounds.maxY - bounds.minY) * zoom
+    left: minX,
+    top: minY,
+    width: Math.max(0, maxX - minX),
+    height: Math.max(0, maxY - minY)
   };
 }
 function resolveDrawColor(colorStyle, theme) {
   return resolveThemeColor(colorStyle, theme);
 }
+var ZOOM_WHEEL_CAP = 10;
 function useTsdrawCanvasController(options = {}) {
   const onMountRef = useRef(options.onMount);
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
   const editorRef = useRef(null);
   const dprRef = useRef(1);
+  const penDetectedRef = useRef(false);
+  const penModeRef = useRef(false);
+  const lastPointerDownWithRef = useRef("mouse");
+  const activePointerIdsRef = useRef(/* @__PURE__ */ new Set());
   const lastPointerClientRef = useRef(null);
   const currentToolRef = useRef(options.initialTool ?? "pen");
   const selectedShapeIdsRef = useRef([]);
@@ -691,9 +946,9 @@ function useTsdrawCanvasController(options = {}) {
       }
       refreshSelectionBounds(editor, nextSelectedShapeIds);
     };
-    const applyRemoteDocumentSnapshot = (document) => {
+    const applyRemoteDocumentSnapshot = (document2) => {
       ignorePersistenceChanges = true;
-      editor.loadDocumentSnapshot(document);
+      editor.loadDocumentSnapshot(document2);
       editor.clearRedoHistory();
       reconcileSelectionAfterDocumentLoad();
       render();
@@ -725,8 +980,95 @@ function useTsdrawCanvasController(options = {}) {
       const coalesced = e.getCoalescedEvents?.();
       return coalesced && coalesced.length > 0 ? coalesced : [e];
     };
+    const applyDocumentChangeResult = (changed) => {
+      if (!changed) return false;
+      reconcileSelectionAfterDocumentLoad();
+      setSelectionRotationDeg(0);
+      render();
+      syncHistoryState();
+      return true;
+    };
+    const normalizeWheelDelta = (event) => {
+      let deltaX = event.deltaX;
+      let deltaY = event.deltaY;
+      let deltaZoom = 0;
+      if (event.ctrlKey || event.metaKey || event.altKey) {
+        const clamped = Math.abs(deltaY) > ZOOM_WHEEL_CAP ? ZOOM_WHEEL_CAP * Math.sign(deltaY) : deltaY;
+        deltaZoom = -clamped / 100;
+      } else if (event.shiftKey && !navigator.userAgent.includes("Mac") && !navigator.userAgent.includes("iPhone") && !navigator.userAgent.includes("iPad")) {
+        deltaX = deltaY;
+        deltaY = 0;
+      }
+      return { x: -deltaX, y: -deltaY, z: deltaZoom };
+    };
+    const deleteCurrentSelection = () => {
+      const selectedIds = selectedShapeIdsRef.current;
+      if (selectedIds.length === 0) return false;
+      editor.beginHistoryEntry();
+      editor.deleteShapes(selectedIds);
+      editor.endHistoryEntry();
+      setSelectedShapeIds([]);
+      selectedShapeIdsRef.current = [];
+      setSelectionBounds(null);
+      setSelectionBrush(null);
+      setSelectionRotationDeg(0);
+      render();
+      syncHistoryState();
+      return true;
+    };
+    const cancelActivePointerInteraction = () => {
+      if (!isPointerActiveRef.current) return;
+      isPointerActiveRef.current = false;
+      lastPointerClientRef.current = null;
+      editor.input.pointerUp();
+      if (currentToolRef.current === "select") {
+        const dragMode = selectDragRef.current.mode;
+        if (dragMode === "rotate") setIsRotatingSelection(false);
+        if (dragMode === "resize") setIsResizingSelection(false);
+        if (dragMode === "move") setIsMovingSelection(false);
+        if (dragMode === "marquee") setSelectionBrush(null);
+        selectDragRef.current.mode = "none";
+      } else {
+        editor.tools.pointerUp();
+      }
+      editor.endHistoryEntry();
+      render();
+      refreshSelectionBounds(editor);
+    };
+    const touchInteractions = createTouchInteractionController(editor, canvas, {
+      cancelActivePointerInteraction,
+      refreshView: () => {
+        render();
+        refreshSelectionBounds(editor);
+      },
+      runUndo: () => applyDocumentChangeResult(editor.undo()),
+      runRedo: () => applyDocumentChangeResult(editor.redo())
+    });
+    const isDrawingTool = (tool) => tool !== "select" && tool !== "hand";
+    const hasRealPressure = (pressure) => pressure != null && pressure > 0 && pressure !== 0.5;
     const handlePointerDown = (e) => {
       if (!canvas.contains(e.target)) return;
+      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+        penDetectedRef.current = true;
+        penModeRef.current = true;
+      }
+      lastPointerDownWithRef.current = e.pointerType;
+      activePointerIdsRef.current.add(e.pointerId);
+      const startedCameraGesture = touchInteractions.handlePointerDown(e);
+      if (startedCameraGesture || touchInteractions.isCameraGestureActive()) {
+        e.preventDefault();
+        if (!canvas.hasPointerCapture(e.pointerId)) {
+          canvas.setPointerCapture(e.pointerId);
+        }
+        return;
+      }
+      const allowPointerDown = !penModeRef.current || e.pointerType !== "touch" || !isDrawingTool(currentToolRef.current);
+      if (!allowPointerDown) {
+        return;
+      }
+      if (activePointerIdsRef.current.size > 1) {
+        return;
+      }
       isPointerActiveRef.current = true;
       editor.beginHistoryEntry();
       canvas.setPointerCapture(e.pointerId);
@@ -735,7 +1077,7 @@ function useTsdrawCanvasController(options = {}) {
       const first = sampleEvents(e)[0];
       const { x, y } = getPagePoint(first);
       const pressure = first.pressure ?? 0.5;
-      const isPen = first.pointerType === "pen" || first.pointerType === "touch";
+      const isPen = first.pointerType === "pen" || hasRealPressure(first.pressure);
       if (currentToolRef.current === "select") {
         const hit = getTopShapeAtPoint(editor, { x, y });
         const isHitSelected = !!(hit && selectedShapeIdsRef.current.includes(hit.id));
@@ -775,6 +1117,16 @@ function useTsdrawCanvasController(options = {}) {
       refreshSelectionBounds(editor);
     };
     const handlePointerMove = (e) => {
+      if (!penDetectedRef.current && (e.pointerType === "pen" || hasRealPressure(e.pressure))) {
+        penDetectedRef.current = true;
+        penModeRef.current = true;
+      }
+      if (touchInteractions.handlePointerMove(e)) {
+        e.preventDefault();
+        return;
+      }
+      if (penModeRef.current && e.pointerType === "touch" && isDrawingTool(currentToolRef.current) && !isPointerActiveRef.current) return;
+      if (activePointerIdsRef.current.size > 1) return;
       updatePointerPreview(e.clientX, e.clientY);
       const prevClient = lastPointerClientRef.current;
       const dx = prevClient ? e.clientX - prevClient.x : 0;
@@ -783,7 +1135,7 @@ function useTsdrawCanvasController(options = {}) {
       for (const sample of sampleEvents(e)) {
         const { x, y } = getPagePoint(sample);
         const pressure = sample.pressure ?? 0.5;
-        const isPen = sample.pointerType === "pen" || sample.pointerType === "touch";
+        const isPen = sample.pointerType === "pen" || hasRealPressure(sample.pressure);
         editor.input.pointerMove(x, y, pressure, isPen);
       }
       if (currentToolRef.current === "select") {
@@ -833,6 +1185,13 @@ function useTsdrawCanvasController(options = {}) {
       refreshSelectionBounds(editor);
     };
     const handlePointerUp = (e) => {
+      activePointerIdsRef.current.delete(e.pointerId);
+      const hadTouchCameraGesture = touchInteractions.handlePointerUpOrCancel(e);
+      if (hadTouchCameraGesture || touchInteractions.isCameraGestureActive()) {
+        e.preventDefault();
+        return;
+      }
+      if (!isPointerActiveRef.current) return;
       isPointerActiveRef.current = false;
       lastPointerClientRef.current = null;
       updatePointerPreview(e.clientX, e.clientY);
@@ -916,7 +1275,10 @@ function useTsdrawCanvasController(options = {}) {
       }
       editor.endHistoryEntry();
     };
-    const handlePointerCancel = () => {
+    const handlePointerCancel = (e) => {
+      activePointerIdsRef.current.delete(e.pointerId);
+      const hadTouchCameraGesture = touchInteractions.handlePointerUpOrCancel(e);
+      if (hadTouchCameraGesture || touchInteractions.isCameraGestureActive()) return;
       if (!isPointerActiveRef.current) return;
       isPointerActiveRef.current = false;
       lastPointerClientRef.current = null;
@@ -945,31 +1307,58 @@ function useTsdrawCanvasController(options = {}) {
         applyRemoteDocumentSnapshot(pending);
       }
     };
-    const handleKeyDown = (e) => {
-      const isMetaPressed = e.metaKey || e.ctrlKey;
-      const loweredKey = e.key.toLowerCase();
-      const isUndoOrRedoKey = loweredKey === "z" || loweredKey === "y";
-      if (isMetaPressed && isUndoOrRedoKey) {
-        const shouldRedo = loweredKey === "y" || loweredKey === "z" && e.shiftKey;
-        const changed = shouldRedo ? editor.redo() : editor.undo();
-        if (changed) {
-          e.preventDefault();
-          e.stopPropagation();
-          reconcileSelectionAfterDocumentLoad();
-          setSelectionRotationDeg(0);
-          render();
-          syncHistoryState();
-          return;
-        }
+    const handleWheel = (e) => {
+      if (!container.contains(e.target)) return;
+      e.preventDefault();
+      if (touchInteractions.isTrackpadZoomActive()) return;
+      const delta = normalizeWheelDelta(e);
+      if (delta.z !== 0) {
+        const rect = canvas.getBoundingClientRect();
+        const pointX = e.clientX - rect.left;
+        const pointY = e.clientY - rect.top;
+        editor.zoomAt(Math.exp(delta.z), pointX, pointY);
+      } else {
+        editor.panBy(delta.x, delta.y);
       }
-      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
-      editor.tools.keyDown({ key: e.key });
       render();
+      refreshSelectionBounds(editor);
+    };
+    const handleGestureEvent = (e) => {
+      touchInteractions.handleGestureEvent(e, container);
+    };
+    const handleKeyDown = (e) => {
+      handleKeyboardShortcutKeyDown(e, {
+        isToolAvailable: (tool) => editor.tools.hasTool(tool),
+        setToolFromShortcut: (tool) => {
+          editor.setCurrentTool(tool);
+          setCurrentToolState(tool);
+          currentToolRef.current = tool;
+          if (tool !== "select") resetSelectUi();
+          render();
+        },
+        runHistoryShortcut: (shouldRedo) => applyDocumentChangeResult(shouldRedo ? editor.redo() : editor.undo()),
+        deleteSelection: () => currentToolRef.current === "select" ? deleteCurrentSelection() : false,
+        dispatchKeyDown: (event) => {
+          editor.input.setModifiers(event.shiftKey, event.ctrlKey, event.metaKey);
+          editor.tools.keyDown({ key: event.key });
+          render();
+        },
+        dispatchKeyUp: () => void 0
+      });
     };
     const handleKeyUp = (e) => {
-      editor.input.setModifiers(e.shiftKey, e.ctrlKey, e.metaKey);
-      editor.tools.keyUp({ key: e.key });
-      render();
+      handleKeyboardShortcutKeyUp(e, {
+        isToolAvailable: () => false,
+        setToolFromShortcut: () => void 0,
+        runHistoryShortcut: () => false,
+        deleteSelection: () => false,
+        dispatchKeyDown: () => void 0,
+        dispatchKeyUp: (event) => {
+          editor.input.setModifiers(event.shiftKey, event.ctrlKey, event.metaKey);
+          editor.tools.keyUp({ key: event.key });
+          render();
+        }
+      });
     };
     const initializePersistence = async () => {
       if (!persistenceKey) {
@@ -1046,6 +1435,10 @@ function useTsdrawCanvasController(options = {}) {
     const ro = new ResizeObserver(resize);
     ro.observe(container);
     canvas.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    document.addEventListener("gesturestart", handleGestureEvent);
+    document.addEventListener("gesturechange", handleGestureEvent);
+    document.addEventListener("gestureend", handleGestureEvent);
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("pointercancel", handlePointerCancel);
@@ -1102,13 +1495,19 @@ function useTsdrawCanvasController(options = {}) {
       disposeMount?.();
       ro.disconnect();
       canvas.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("wheel", handleWheel);
+      document.removeEventListener("gesturestart", handleGestureEvent);
+      document.removeEventListener("gesturechange", handleGestureEvent);
+      document.removeEventListener("gestureend", handleGestureEvent);
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("pointercancel", handlePointerCancel);
       window.removeEventListener("keydown", handleKeyDown);
       window.removeEventListener("keyup", handleKeyUp);
       isPointerActiveRef.current = false;
+      activePointerIdsRef.current.clear();
       pendingRemoteDocumentRef.current = null;
+      touchInteractions.reset();
       persistenceChannel?.close();
       void persistenceDb?.close();
       editorRef.current = null;
@@ -1119,6 +1518,7 @@ function useTsdrawCanvasController(options = {}) {
     options.persistenceKey,
     options.toolDefinitions,
     refreshSelectionBounds,
+    resetSelectUi,
     render,
     updatePointerPreview
   ]);