@tsdraw/react 0.8.1 → 0.8.3

package/dist/index.cjs

@@ -292,6 +292,7 @@ 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";
@@ -320,8 +321,7 @@ function createTouchInteractionController(editor, canvas, handlers) {
     previousCenter: { x: 0, y: 0 },
     initialCenter: { x: 0, y: 0 },
     previousDistance: 1,
-    initialDistance: 1,
-    previousAngle: 0
+    initialDistance: 1
   };
   const isTouchPointer = (event) => event.pointerType === "touch";
   const endTouchCameraGesture = () => {
@@ -329,7 +329,6 @@ function createTouchInteractionController(editor, canvas, handlers) {
     touchCameraState.mode = "not-sure";
     touchCameraState.previousDistance = 1;
     touchCameraState.initialDistance = 1;
-    touchCameraState.previousAngle = 0;
   };
   const maybeHandleTouchTapGesture = () => {
     if (activeTouchPoints.size > 0) return;
@@ -360,14 +359,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;
   };
   const updateTouchCameraGesture = () => {
     if (!touchCameraState.active) return false;
@@ -380,7 +377,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);
@@ -396,11 +392,9 @@ function createTouchInteractionController(editor, canvas, handlers) {
     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;
   };
@@ -681,6 +675,18 @@ function toScreenRect(editor, bounds) {
 function resolveDrawColor(colorStyle, theme) {
   return core.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 = react.useRef(options.onMount);
@@ -702,7 +708,8 @@ function useTsdrawCanvasController(options = {}) {
   const resizeRef = react.useRef({
     handle: null,
     startBounds: null,
-    startShapes: /* @__PURE__ */ new Map()
+    startShapes: /* @__PURE__ */ new Map(),
+    cursorHandleOffset: { x: 0, y: 0 }
   });
   const rotateRef = react.useRef({
     center: null,
@@ -789,33 +796,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 = react.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 = core.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: core.buildTransformSnapshots(editor, selectedShapeIdsRef.current)
+        startShapes: core.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);
     },
@@ -826,7 +838,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 = core.getSelectionBoundsPage(editor, selectedShapeIdsRef.current);
       if (!bounds) return;
       const center = {
@@ -840,6 +853,9 @@ function useTsdrawCanvasController(options = {}) {
         startSelectionRotationDeg: selectionRotationRef.current,
         startShapes: core.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);
@@ -969,7 +985,6 @@ function useTsdrawCanvasController(options = {}) {
       setDrawDash(nextDrawStyle.dash);
       setDrawFill(nextDrawStyle.fill);
       setDrawSize(nextDrawStyle.size);
-      setSelectionRotationDeg(0);
       render();
       refreshSelectionBounds(editor, nextSelectionIds);
       ignorePersistenceChanges = false;
@@ -985,7 +1000,6 @@ function useTsdrawCanvasController(options = {}) {
     const applyDocumentChangeResult = (changed) => {
       if (!changed) return false;
       reconcileSelectionAfterDocumentLoad();
-      setSelectionRotationDeg(0);
       render();
       syncHistoryState();
       return true;
@@ -1012,8 +1026,7 @@ function useTsdrawCanvasController(options = {}) {
       setSelectedShapeIds([]);
       selectedShapeIdsRef.current = [];
       setSelectionBounds(null);
-      setSelectionBrush(null);
-      setSelectionRotationDeg(0);
+      resetSelectUi();
       render();
       syncHistoryState();
       return true;
@@ -1024,12 +1037,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();
       }
@@ -1083,7 +1091,13 @@ function useTsdrawCanvasController(options = {}) {
       if (currentToolRef.current === "select") {
         const hit = core.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 = core.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 },
@@ -1154,9 +1168,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;
-          core.applyResize(editor, handle, startBounds, startShapes, { x: px, y: py }, e.shiftKey);
+          core.applyResize(editor, handle, startBounds, startShapes, { x: px - cursorHandleOffset.x, y: py - cursorHandleOffset.y }, e.shiftKey);
           render();
           refreshSelectionBounds(editor);
           return;
@@ -1176,7 +1190,6 @@ 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;
         }
@@ -1206,12 +1219,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();
@@ -1220,7 +1228,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();
@@ -1253,7 +1261,6 @@ function useTsdrawCanvasController(options = {}) {
           }
           setSelectedShapeIds(ids);
           selectedShapeIdsRef.current = ids;
-          setSelectionRotationDeg(0);
           setSelectionBrush(null);
           selectDragRef.current.mode = "none";
           render();
@@ -1436,11 +1443,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);
@@ -1464,7 +1477,6 @@ function useTsdrawCanvasController(options = {}) {
         const changed = editor.undo();
         if (!changed) return false;
         reconcileSelectionAfterDocumentLoad();
-        setSelectionRotationDeg(0);
         render();
         syncHistoryState();
         return true;
@@ -1473,7 +1485,6 @@ function useTsdrawCanvasController(options = {}) {
         const changed = editor.redo();
         if (!changed) return false;
         reconcileSelectionAfterDocumentLoad();
-        setSelectionRotationDeg(0);
         render();
         syncHistoryState();
         return true;
@@ -1501,6 +1512,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);
@@ -1565,7 +1577,6 @@ function useTsdrawCanvasController(options = {}) {
       selectedShapeIdsRef.current = nextSelectedShapeIds;
       setSelectedShapeIds(nextSelectedShapeIds);
     }
-    setSelectionRotationDeg(0);
     render();
     setCanUndo(editor.canUndo());
     setCanRedo(editor.canRedo());
@@ -1581,17 +1592,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 = {