@tsdraw/react 0.8.2 → 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
@@ -290,12 +290,11 @@ function getCanvasCursor(currentTool, state) {
     if (state.isRotatingSelection) return "grabbing";
     if (state.isResizingSelection) return "nwse-resize";
     if (state.isMovingSelection) return "grabbing";
+    if (state.isHoveringSelectionBounds) return "move";
     return "default";
   }
   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;
@@ -317,17 +316,28 @@ function createTouchInteractionController(editor, canvas, handlers) {
     mode: "not-sure",
     previousCenter: { x: 0, y: 0 },
     initialCenter: { x: 0, y: 0 },
-    previousDistance: 1,
     initialDistance: 1,
-    previousAngle: 0
+    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.previousAngle = 0;
+    touchCameraState.initialZoom = 1;
   };
   const maybeHandleTouchTapGesture = () => {
     if (activeTouchPoints.size > 0) return;
@@ -358,14 +368,12 @@ function createTouchInteractionController(editor, canvas, handlers) {
     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;
+    touchCameraState.initialZoom = editor.getZoomLevel();
   };
   const updateTouchCameraGesture = () => {
     if (!touchCameraState.active) return false;
@@ -378,7 +386,6 @@ function createTouchInteractionController(editor, canvas, handlers) {
     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);
@@ -390,20 +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);
-      editor.rotateAt(angle - touchCameraState.previousAngle, 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;
-    touchCameraState.previousAngle = angle;
     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;
@@ -416,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) => {
@@ -429,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;
@@ -472,6 +511,8 @@ function createTouchInteractionController(editor, canvas, handlers) {
     touchTapState.active = false;
     touchTapState.startPoints.clear();
     endTouchCameraGesture();
+    endFingerPan();
+    stopFingerPanSlide();
   };
   return {
     handlePointerDown,
@@ -480,6 +521,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
     handleGestureEvent,
     reset,
     isCameraGestureActive: () => touchCameraState.active,
+    isFingerPanActive: () => fingerPanPointerId !== null,
     isTrackpadZoomActive: () => gestureActive
   };
 }
@@ -679,6 +721,18 @@ function toScreenRect(editor, bounds) {
 function resolveDrawColor(colorStyle, theme) {
   return resolveThemeColor(colorStyle, theme);
 }
+function getHandlePagePoint(bounds, handle) {
+  switch (handle) {
+    case "nw":
+      return { x: bounds.minX, y: bounds.minY };
+    case "ne":
+      return { x: bounds.maxX, y: bounds.minY };
+    case "sw":
+      return { x: bounds.minX, y: bounds.maxY };
+    case "se":
+      return { x: bounds.maxX, y: bounds.maxY };
+  }
+}
 var ZOOM_WHEEL_CAP = 10;
 function useTsdrawCanvasController(options = {}) {
   const onMountRef = useRef(options.onMount);
@@ -696,11 +750,13 @@ 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,
     startBounds: null,
-    startShapes: /* @__PURE__ */ new Map()
+    startShapes: /* @__PURE__ */ new Map(),
+    cursorHandleOffset: { x: 0, y: 0 }
   });
   const rotateRef = useRef({
     center: null,
@@ -787,33 +843,38 @@ function useTsdrawCanvasController(options = {}) {
     setIsResizingSelection(false);
     setIsRotatingSelection(false);
     selectDragRef.current.mode = "none";
-    resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map() };
-    rotateRef.current = {
-      center: null,
-      startAngle: 0,
-      startSelectionRotationDeg: selectionRotationRef.current,
-      startShapes: /* @__PURE__ */ new Map()
-    };
+    resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map(), cursorHandleOffset: { x: 0, y: 0 } };
+    rotateRef.current = { center: null, startAngle: 0, startSelectionRotationDeg: 0, startShapes: /* @__PURE__ */ new Map() };
   }, []);
   const handleResizePointerDown = useCallback(
     (e, handle) => {
       e.preventDefault();
       e.stopPropagation();
       const editor = editorRef.current;
-      if (!editor || selectedShapeIdsRef.current.length === 0) return;
+      const canvas = canvasRef.current;
+      if (!editor || !canvas || selectedShapeIdsRef.current.length === 0) return;
       const bounds = getSelectionBoundsPage(editor, selectedShapeIdsRef.current);
       if (!bounds) return;
+      const handlePagePoint = getHandlePagePoint(bounds, handle);
+      const pointerPage = getPagePointFromClient(editor, e.clientX, e.clientY);
+      const cursorOffset = {
+        x: pointerPage.x - handlePagePoint.x,
+        y: pointerPage.y - handlePagePoint.y
+      };
       resizeRef.current = {
         handle,
         startBounds: bounds,
-        startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current)
+        startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current),
+        cursorHandleOffset: cursorOffset
       };
+      isPointerActiveRef.current = true;
+      activePointerIdsRef.current.add(e.pointerId);
+      canvas.setPointerCapture(e.pointerId);
       editor.beginHistoryEntry();
       selectDragRef.current.mode = "resize";
-      const p = getPagePointFromClient(editor, e.clientX, e.clientY);
-      editor.input.pointerDown(p.x, p.y, 0.5, false);
-      selectDragRef.current.startPage = p;
-      selectDragRef.current.currentPage = p;
+      editor.input.pointerDown(handlePagePoint.x, handlePagePoint.y, 0.5, false);
+      selectDragRef.current.startPage = handlePagePoint;
+      selectDragRef.current.currentPage = handlePagePoint;
       lastPointerClientRef.current = { x: e.clientX, y: e.clientY };
       setIsResizingSelection(true);
     },
@@ -824,7 +885,8 @@ function useTsdrawCanvasController(options = {}) {
       e.preventDefault();
       e.stopPropagation();
       const editor = editorRef.current;
-      if (!editor || selectedShapeIdsRef.current.length === 0) return;
+      const canvas = canvasRef.current;
+      if (!editor || !canvas || selectedShapeIdsRef.current.length === 0) return;
       const bounds = getSelectionBoundsPage(editor, selectedShapeIdsRef.current);
       if (!bounds) return;
       const center = {
@@ -838,6 +900,9 @@ function useTsdrawCanvasController(options = {}) {
         startSelectionRotationDeg: selectionRotationRef.current,
         startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current)
       };
+      isPointerActiveRef.current = true;
+      activePointerIdsRef.current.add(e.pointerId);
+      canvas.setPointerCapture(e.pointerId);
       editor.beginHistoryEntry();
       selectDragRef.current.mode = "rotate";
       editor.input.pointerDown(p.x, p.y, 0.5, false);
@@ -967,7 +1032,6 @@ function useTsdrawCanvasController(options = {}) {
       setDrawDash(nextDrawStyle.dash);
       setDrawFill(nextDrawStyle.fill);
       setDrawSize(nextDrawStyle.size);
-      setSelectionRotationDeg(0);
       render();
       refreshSelectionBounds(editor, nextSelectionIds);
       ignorePersistenceChanges = false;
@@ -983,7 +1047,6 @@ function useTsdrawCanvasController(options = {}) {
     const applyDocumentChangeResult = (changed) => {
       if (!changed) return false;
       reconcileSelectionAfterDocumentLoad();
-      setSelectionRotationDeg(0);
       render();
       syncHistoryState();
       return true;
@@ -1010,8 +1073,7 @@ function useTsdrawCanvasController(options = {}) {
       setSelectedShapeIds([]);
       selectedShapeIdsRef.current = [];
       setSelectionBounds(null);
-      setSelectionBrush(null);
-      setSelectionRotationDeg(0);
+      resetSelectUi();
       render();
       syncHistoryState();
       return true;
@@ -1022,12 +1084,7 @@ function useTsdrawCanvasController(options = {}) {
       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";
+        resetSelectUi();
       } else {
         editor.tools.pointerUp();
       }
@@ -1042,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;
@@ -1055,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) {
@@ -1081,7 +1145,13 @@ function useTsdrawCanvasController(options = {}) {
       if (currentToolRef.current === "select") {
         const hit = getTopShapeAtPoint(editor, { x, y });
         const isHitSelected = !!(hit && selectedShapeIdsRef.current.includes(hit.id));
-        if (isHitSelected) {
+        const isInsideSelectionBounds = (() => {
+          if (selectedShapeIdsRef.current.length === 0) return false;
+          const pageBounds = getSelectionBoundsPage(editor, selectedShapeIdsRef.current);
+          if (!pageBounds) return false;
+          return x >= pageBounds.minX && x <= pageBounds.maxX && y >= pageBounds.minY && y <= pageBounds.maxY;
+        })();
+        if (isHitSelected || isInsideSelectionBounds) {
           selectDragRef.current = {
             mode: "move",
             startPage: { x, y },
@@ -1112,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);
     };
@@ -1125,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;
@@ -1152,9 +1222,9 @@ function useTsdrawCanvasController(options = {}) {
           return;
         }
         if (mode === "resize") {
-          const { handle, startBounds, startShapes } = resizeRef.current;
+          const { handle, startBounds, startShapes, cursorHandleOffset } = resizeRef.current;
           if (!handle || !startBounds) return;
-          applyResize(editor, handle, startBounds, startShapes, { x: px, y: py }, e.shiftKey);
+          applyResize(editor, handle, startBounds, startShapes, { x: px - cursorHandleOffset.x, y: py - cursorHandleOffset.y }, e.shiftKey);
           render();
           refreshSelectionBounds(editor);
           return;
@@ -1174,13 +1244,12 @@ function useTsdrawCanvasController(options = {}) {
           const nextIds = selectDragRef.current.additive ? Array.from(/* @__PURE__ */ new Set([...selectDragRef.current.initialSelection, ...ids])) : ids;
           setSelectedShapeIds(nextIds);
           selectedShapeIdsRef.current = nextIds;
-          setSelectionRotationDeg(0);
           refreshSelectionBounds(editor, nextIds);
           return;
         }
       }
       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);
     };
@@ -1204,12 +1273,7 @@ function useTsdrawCanvasController(options = {}) {
           setIsRotatingSelection(false);
           selectDragRef.current.mode = "none";
           setSelectionRotationDeg(0);
-          rotateRef.current = {
-            center: null,
-            startAngle: 0,
-            startSelectionRotationDeg: selectionRotationRef.current,
-            startShapes: /* @__PURE__ */ new Map()
-          };
+          rotateRef.current = { center: null, startAngle: 0, startSelectionRotationDeg: 0, startShapes: /* @__PURE__ */ new Map() };
           render();
           refreshSelectionBounds(editor);
           editor.endHistoryEntry();
@@ -1218,7 +1282,7 @@ function useTsdrawCanvasController(options = {}) {
         if (drag.mode === "resize") {
           setIsResizingSelection(false);
           selectDragRef.current.mode = "none";
-          resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map() };
+          resizeRef.current = { handle: null, startBounds: null, startShapes: /* @__PURE__ */ new Map(), cursorHandleOffset: { x: 0, y: 0 } };
           render();
           refreshSelectionBounds(editor);
           editor.endHistoryEntry();
@@ -1251,7 +1315,6 @@ function useTsdrawCanvasController(options = {}) {
           }
           setSelectedShapeIds(ids);
           selectedShapeIdsRef.current = ids;
-          setSelectionRotationDeg(0);
           setSelectionBrush(null);
           selectDragRef.current.mode = "none";
           render();
@@ -1265,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;
@@ -1434,11 +1514,17 @@ function useTsdrawCanvasController(options = {}) {
     resize();
     const ro = new ResizeObserver(resize);
     ro.observe(container);
+    const handlePointerLeaveViewport = (e) => {
+      if (e.relatedTarget === null) {
+        setIsPointerInsideCanvas(false);
+      }
+    };
     canvas.addEventListener("pointerdown", handlePointerDown);
     container.addEventListener("wheel", handleWheel, { passive: false });
     document.addEventListener("gesturestart", handleGestureEvent);
     document.addEventListener("gesturechange", handleGestureEvent);
     document.addEventListener("gestureend", handleGestureEvent);
+    document.documentElement.addEventListener("pointerleave", handlePointerLeaveViewport);
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("pointercancel", handlePointerCancel);
@@ -1462,7 +1548,6 @@ function useTsdrawCanvasController(options = {}) {
         const changed = editor.undo();
         if (!changed) return false;
         reconcileSelectionAfterDocumentLoad();
-        setSelectionRotationDeg(0);
         render();
         syncHistoryState();
         return true;
@@ -1471,7 +1556,6 @@ function useTsdrawCanvasController(options = {}) {
         const changed = editor.redo();
         if (!changed) return false;
         reconcileSelectionAfterDocumentLoad();
-        setSelectionRotationDeg(0);
         render();
         syncHistoryState();
         return true;
@@ -1499,6 +1583,7 @@ function useTsdrawCanvasController(options = {}) {
       document.removeEventListener("gesturestart", handleGestureEvent);
       document.removeEventListener("gesturechange", handleGestureEvent);
       document.removeEventListener("gestureend", handleGestureEvent);
+      document.documentElement.removeEventListener("pointerleave", handlePointerLeaveViewport);
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("pointercancel", handlePointerCancel);
@@ -1507,6 +1592,7 @@ function useTsdrawCanvasController(options = {}) {
       isPointerActiveRef.current = false;
       activePointerIdsRef.current.clear();
       pendingRemoteDocumentRef.current = null;
+      stopActiveSlide();
       touchInteractions.reset();
       persistenceChannel?.close();
       void persistenceDb?.close();
@@ -1563,7 +1649,6 @@ function useTsdrawCanvasController(options = {}) {
       selectedShapeIdsRef.current = nextSelectedShapeIds;
       setSelectedShapeIds(nextSelectedShapeIds);
     }
-    setSelectionRotationDeg(0);
     render();
     setCanUndo(editor.canUndo());
     setCanRedo(editor.canRedo());
@@ -1579,17 +1664,18 @@ function useTsdrawCanvasController(options = {}) {
       selectedShapeIdsRef.current = nextSelectedShapeIds;
       setSelectedShapeIds(nextSelectedShapeIds);
     }
-    setSelectionRotationDeg(0);
     render();
     setCanUndo(editor.canUndo());
     setCanRedo(editor.canRedo());
     return true;
   }, [render]);
+  const isHoveringSelectionBounds = isPointerInsideCanvas && currentTool === "select" && selectedShapeIds.length > 0 && selectionBounds != null && pointerScreenPoint.x >= selectionBounds.left && pointerScreenPoint.x <= selectionBounds.left + selectionBounds.width && pointerScreenPoint.y >= selectionBounds.top && pointerScreenPoint.y <= selectionBounds.top + selectionBounds.height;
   const showToolOverlay = isPointerInsideCanvas && (currentTool === "pen" || currentTool === "eraser");
   const canvasCursor = getCanvasCursor(currentTool, {
     isMovingSelection,
     isResizingSelection,
     isRotatingSelection,
+    isHoveringSelectionBounds,
     showToolOverlay
   });
   const cursorContext = {