@tsdraw/react 0.9.3 → 0.9.5

package/dist/index.cjs

@@ -10,6 +10,7 @@ function SelectionOverlay({
   selectionBrush,
   selectionBounds,
   selectionRotationDeg,
+  vertexHandleScreenPositions,
   currentTool,
   selectedCount,
   onRotatePointerDown,
@@ -37,7 +38,8 @@ function SelectionOverlay({
           top: selectionBounds.top,
           width: selectionBounds.width,
           height: selectionBounds.height,
-          transform: `rotate(${selectionRotationDeg}deg)`
+          transform: `rotate(${selectionRotationDeg}deg)`,
+          transformOrigin: "center center"
         },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tsdraw-selection-bounds" }),
@@ -95,7 +97,15 @@ function SelectionOverlay({
           ] })
         ]
       }
-    )
+    ),
+    currentTool === "select" && vertexHandleScreenPositions.map((pos, index) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "tsdraw-vertex-handle",
+        style: { position: "absolute", left: pos.left, top: pos.top, transform: "translate(-50%, -50%)", pointerEvents: "none", zIndex: 95 }
+      },
+      `vertex-${index.toString()}`
+    ))
   ] });
 }
 function parseAnchor(anchor) {
@@ -454,6 +464,7 @@ function getCanvasCursor(currentTool, state) {
     if (state.isRotatingSelection) return "grabbing";
     if (state.isResizingSelection) return "nwse-resize";
     if (state.isMovingSelection) return "grabbing";
+    if (state.isDraggingVertex) return "grabbing";
     if (state.isHoveringSelectionBounds) return "move";
     return "default";
   }
@@ -896,6 +907,16 @@ function toScreenRect(editor, bounds) {
     height: Math.max(0, maxY - minY)
   };
 }
+function selectionCenteredOnRotation(editor, startBoundsPage, centerPage) {
+  const startScreen = toScreenRect(editor, startBoundsPage);
+  const centerScreen = core.pageToScreen(editor.viewport, centerPage.x, centerPage.y);
+  return {
+    left: centerScreen.x - startScreen.width / 2,
+    top: centerScreen.y - startScreen.height / 2,
+    width: startScreen.width,
+    height: startScreen.height
+  };
+}
 function resolveDrawColor(colorStyle, theme) {
   return core.resolveThemeColor(colorStyle, theme);
 }
@@ -911,6 +932,11 @@ function getHandlePagePoint(bounds, handle) {
       return { x: bounds.maxX, y: bounds.maxY };
   }
 }
+function resolveAutoShapeOption(input) {
+  if (input === false) return { enabled: false };
+  if (input === true || input == null) return { enabled: true };
+  return { enabled: input.enabled ?? true, ...input };
+}
 var ZOOM_WHEEL_CAP = 10;
 var VIEW_ONLY_TOOLS = /* @__PURE__ */ new Set(["select", "hand"]);
 function useTsdrawCanvasController(options = {}) {
@@ -922,6 +948,7 @@ function useTsdrawCanvasController(options = {}) {
   const touchOptionsRef = react.useRef(options.touchOptions);
   const keyboardShortcutsRef = react.useRef(options.keyboardShortcuts);
   const penOptionsRef = react.useRef(options.penOptions);
+  const autoShapeRef = react.useRef(options.autoShape);
   const backgroundRef = react.useRef(options.background);
   const readOnlyRef = react.useRef(options.readOnly ?? false);
   const containerRef = react.useRef(null);
@@ -950,7 +977,8 @@ function useTsdrawCanvasController(options = {}) {
     center: null,
     startAngle: 0,
     startSelectionRotationDeg: 0,
-    startShapes: /* @__PURE__ */ new Map()
+    startShapes: /* @__PURE__ */ new Map(),
+    startBoundsPage: null
   });
   const selectDragRef = react.useRef({
     mode: "none",
@@ -972,6 +1000,8 @@ function useTsdrawCanvasController(options = {}) {
   const [isMovingSelection, setIsMovingSelection] = react.useState(false);
   const [isResizingSelection, setIsResizingSelection] = react.useState(false);
   const [isRotatingSelection, setIsRotatingSelection] = react.useState(false);
+  const [isDraggingVertex, setIsDraggingVertex] = react.useState(false);
+  const [vertexHandleScreenPositions, setVertexHandleScreenPositions] = react.useState([]);
   const [canUndo, setCanUndo] = react.useState(false);
   const [canRedo, setCanRedo] = react.useState(false);
   const [isPersistenceReady, setIsPersistenceReady] = react.useState(!options.persistenceKey);
@@ -1004,6 +1034,11 @@ function useTsdrawCanvasController(options = {}) {
   react.useEffect(() => {
     penOptionsRef.current = options.penOptions;
   }, [options.penOptions]);
+  react.useEffect(() => {
+    autoShapeRef.current = options.autoShape;
+    const editor = editorRef.current;
+    if (editor) editor.setAutoShape(resolveAutoShapeOption(options.autoShape));
+  }, [options.autoShape]);
   react.useEffect(() => {
     backgroundRef.current = options.background;
   }, [options.background]);
@@ -1060,9 +1095,12 @@ function useTsdrawCanvasController(options = {}) {
     setIsMovingSelection(false);
     setIsResizingSelection(false);
     setIsRotatingSelection(false);
+    setIsDraggingVertex(false);
     selectDragRef.current.mode = "none";
+    selectDragRef.current.vertexRefs = void 0;
+    selectDragRef.current.vertexSnapshots = void 0;
     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() };
+    rotateRef.current = { center: null, startAngle: 0, startSelectionRotationDeg: 0, startShapes: /* @__PURE__ */ new Map(), startBoundsPage: null };
   }, []);
   const handleResizePointerDown = react.useCallback(
     (e, handle) => {
@@ -1116,8 +1154,10 @@ function useTsdrawCanvasController(options = {}) {
         center,
         startAngle: Math.atan2(p.y - center.y, p.x - center.x),
         startSelectionRotationDeg: selectionRotationRef.current,
-        startShapes: core.buildTransformSnapshots(editor, selectedShapeIdsRef.current)
+        startShapes: core.buildTransformSnapshots(editor, selectedShapeIdsRef.current),
+        startBoundsPage: bounds
       };
+      setSelectionBounds(selectionCenteredOnRotation(editor, bounds, center));
       isPointerActiveRef.current = true;
       activePointerIdsRef.current.add(e.pointerId);
       canvas.setPointerCapture(e.pointerId);
@@ -1142,7 +1182,8 @@ function useTsdrawCanvasController(options = {}) {
     const editor = new core.Editor({
       toolDefinitions: options.toolDefinitions,
       initialToolId: initialTool,
-      zoomRange: cameraOpts?.zoomRange
+      zoomRange: cameraOpts?.zoomRange,
+      autoShape: resolveAutoShapeOption(autoShapeRef.current)
     });
     editor.renderer.setTheme(options.theme ?? "light");
     if (!editor.tools.hasTool(initialTool)) {
@@ -1382,6 +1423,30 @@ function useTsdrawCanvasController(options = {}) {
       const pressure = (first.pressure ?? 0.5) * pressureSensitivity;
       const isPen = first.pointerType === "pen" || hasRealPressure(first.pressure);
       if (currentToolRef.current === "select") {
+        if (!readOnlyRef.current) {
+          const zoom = editor.viewport.zoom;
+          const marginPage = 12 / zoom;
+          const clusterTolerance = 20 / zoom;
+          const vertexHit = core.findVertexHit(editor, { x, y }, marginPage, clusterTolerance);
+          if (vertexHit) {
+            const involvedIds = [...new Set(vertexHit.refs.map((r) => r.shapeId))];
+            selectDragRef.current = {
+              mode: "vertex",
+              startPage: { x, y },
+              currentPage: { x, y },
+              startPositions: /* @__PURE__ */ new Map(),
+              additive: false,
+              initialSelection: [...selectedShapeIdsRef.current],
+              vertexRefs: vertexHit.refs,
+              vertexSnapshots: vertexHit.snapshots
+            };
+            setIsDraggingVertex(true);
+            setSelectedShapeIds(involvedIds);
+            selectedShapeIdsRef.current = involvedIds;
+            refreshSelectionBounds(editor, involvedIds);
+            return;
+          }
+        }
         const hit = core.getTopShapeAtPoint(editor, { x, y });
         const isHitSelected = !!(hit && selectedShapeIdsRef.current.includes(hit.id));
         const isInsideSelectionBounds = (() => {
@@ -1397,7 +1462,8 @@ function useTsdrawCanvasController(options = {}) {
             currentPage: { x, y },
             startPositions: core.buildStartPositions(editor, selectedShapeIdsRef.current),
             additive: false,
-            initialSelection: [...selectedShapeIdsRef.current]
+            initialSelection: [...selectedShapeIdsRef.current],
+            moveFromEmptyInsideBounds: isInsideSelectionBounds && !hit
           };
           setIsMovingSelection(true);
           return;
@@ -1453,13 +1519,14 @@ function useTsdrawCanvasController(options = {}) {
         const mode = selectDragRef.current.mode;
         const { x: px, y: py } = editor.input.getCurrentPagePoint();
         if (mode === "rotate") {
-          const { center, startAngle, startSelectionRotationDeg, startShapes } = rotateRef.current;
-          if (!center) return;
+          const { center, startAngle, startSelectionRotationDeg, startShapes, startBoundsPage } = rotateRef.current;
+          if (!center || !startBoundsPage) return;
           const angle = Math.atan2(py - center.y, px - center.x);
           const delta = angle - startAngle;
           setSelectionRotationDeg(startSelectionRotationDeg + delta * 180 / Math.PI);
           core.applyRotation(editor, startShapes, center, delta);
           render();
+          setSelectionBounds(selectionCenteredOnRotation(editor, startBoundsPage, center));
           return;
         }
         if (mode === "resize") {
@@ -1477,6 +1544,20 @@ function useTsdrawCanvasController(options = {}) {
           refreshSelectionBounds(editor);
           return;
         }
+        if (mode === "vertex") {
+          const drag = selectDragRef.current;
+          const refs = drag.vertexRefs;
+          const snapshots = drag.vertexSnapshots;
+          if (refs && snapshots) {
+            core.applyVertexDrag(editor, snapshots, refs, {
+              x: px - drag.startPage.x,
+              y: py - drag.startPage.y
+            });
+            render();
+            refreshSelectionBounds(editor);
+          }
+          return;
+        }
         if (mode === "marquee") {
           selectDragRef.current.currentPage = { x: px, y: py };
           const pageRect = core.normalizeSelectionBounds(selectDragRef.current.startPage, selectDragRef.current.currentPage);
@@ -1514,7 +1595,7 @@ function useTsdrawCanvasController(options = {}) {
           setIsRotatingSelection(false);
           selectDragRef.current.mode = "none";
           setSelectionRotationDeg(0);
-          rotateRef.current = { center: null, startAngle: 0, startSelectionRotationDeg: 0, startShapes: /* @__PURE__ */ new Map() };
+          rotateRef.current = { center: null, startAngle: 0, startSelectionRotationDeg: 0, startShapes: /* @__PURE__ */ new Map(), startBoundsPage: null };
           render();
           refreshSelectionBounds(editor);
           editor.endHistoryEntry();
@@ -1532,6 +1613,24 @@ function useTsdrawCanvasController(options = {}) {
         if (drag.mode === "move") {
           setIsMovingSelection(false);
           selectDragRef.current.mode = "none";
+          const distSq = (x - drag.startPage.x) ** 2 + (y - drag.startPage.y) ** 2;
+          if (drag.moveFromEmptyInsideBounds && distSq < 4) {
+            setSelectedShapeIds([]);
+            selectedShapeIdsRef.current = [];
+            setSelectionBounds(null);
+          } else {
+            refreshSelectionBounds(editor);
+          }
+          selectDragRef.current.moveFromEmptyInsideBounds = void 0;
+          render();
+          editor.endHistoryEntry();
+          return;
+        }
+        if (drag.mode === "vertex") {
+          setIsDraggingVertex(false);
+          selectDragRef.current.mode = "none";
+          selectDragRef.current.vertexRefs = void 0;
+          selectDragRef.current.vertexSnapshots = void 0;
           render();
           refreshSelectionBounds(editor);
           editor.endHistoryEntry();
@@ -1610,9 +1709,21 @@ function useTsdrawCanvasController(options = {}) {
       editor.input.pointerUp();
       if (currentToolRef.current === "select") {
         const drag = selectDragRef.current;
-        if (drag.mode === "rotate") setIsRotatingSelection(false);
+        if (drag.mode === "rotate") {
+          setIsRotatingSelection(false);
+          setSelectionRotationDeg(0);
+          rotateRef.current = { center: null, startAngle: 0, startSelectionRotationDeg: 0, startShapes: /* @__PURE__ */ new Map(), startBoundsPage: null };
+        }
         if (drag.mode === "resize") setIsResizingSelection(false);
-        if (drag.mode === "move") setIsMovingSelection(false);
+        if (drag.mode === "move") {
+          setIsMovingSelection(false);
+          selectDragRef.current.moveFromEmptyInsideBounds = void 0;
+        }
+        if (drag.mode === "vertex") {
+          setIsDraggingVertex(false);
+          selectDragRef.current.vertexRefs = void 0;
+          selectDragRef.current.vertexSnapshots = void 0;
+        }
         if (drag.mode === "marquee") setSelectionBrush(null);
         if (drag.mode !== "none") {
           selectDragRef.current.mode = "none";
@@ -1949,10 +2060,25 @@ function useTsdrawCanvasController(options = {}) {
   }, [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");
+  react.useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || currentTool !== "select" || selectedShapeIds.length === 0) {
+      setVertexHandleScreenPositions([]);
+      return;
+    }
+    const pagePts = core.getVertexHandlePagePositions(editor, selectedShapeIds);
+    setVertexHandleScreenPositions(
+      pagePts.map((pg) => {
+        const s = core.pageToScreen(editor.viewport, pg.x, pg.y);
+        return { left: s.x, top: s.y };
+      })
+    );
+  }, [currentTool, selectedShapeIds, selectionBounds, selectionRotationDeg, isPersistenceReady]);
   const canvasCursor = getCanvasCursor(currentTool, {
     isMovingSelection,
     isResizingSelection,
     isRotatingSelection,
+    isDraggingVertex,
     isHoveringSelectionBounds,
     showToolOverlay
   });
@@ -1962,7 +2088,8 @@ function useTsdrawCanvasController(options = {}) {
     showToolOverlay,
     isMovingSelection,
     isResizingSelection,
-    isRotatingSelection
+    isRotatingSelection,
+    isDraggingVertex
   };
   const toolOverlay = {
     visible: showToolOverlay,
@@ -1985,6 +2112,7 @@ function useTsdrawCanvasController(options = {}) {
     selectionBrush,
     selectionBounds,
     selectionRotationDeg,
+    vertexHandleScreenPositions,
     canvasCursor,
     cursorContext,
     toolOverlay,
@@ -2095,6 +2223,7 @@ function Tsdraw(props) {
     selectionBrush,
     selectionBounds,
     selectionRotationDeg,
+    vertexHandleScreenPositions,
     canvasCursor: defaultCanvasCursor,
     cursorContext,
     toolOverlay,
@@ -2117,6 +2246,7 @@ function Tsdraw(props) {
     touchOptions: props.touchOptions,
     keyboardShortcuts: props.keyboardShortcuts,
     penOptions: props.penOptions,
+    autoShape: props.autoShape,
     background: props.background,
     readOnly: props.readOnly,
     autoFocus: props.autoFocus,
@@ -2275,6 +2405,7 @@ function Tsdraw(props) {
             selectionBrush,
             selectionBounds,
             selectionRotationDeg,
+            vertexHandleScreenPositions,
             currentTool,
             selectedCount: selectedShapeIds.length,
             onRotatePointerDown: handleRotatePointerDown,