@tsdraw/react 0.9.3 → 0.9.5

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
-export { TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
+import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, AutoShapeOptions, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
+export { AutoShapeKind, AutoShapeOptions, AutoShapeThresholds, TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
 
 interface TsdrawCameraOptions {
     panSpeed?: number;
@@ -60,6 +60,7 @@ interface TsdrawCursorContext {
     isMovingSelection: boolean;
     isResizingSelection: boolean;
     isRotatingSelection: boolean;
+    isDraggingVertex: boolean;
 }
 interface TsdrawToolOverlayState {
     visible: boolean;
@@ -156,6 +157,7 @@ interface TsdrawProps {
     touchOptions?: TsdrawTouchOptions;
     keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
     penOptions?: TsdrawPenOptions;
+    autoShape?: boolean | AutoShapeOptions;
     background?: TsdrawBackgroundOptions;
     readOnly?: boolean;
     autoFocus?: boolean;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties } from 'react';
-import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
-export { TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
+import { ZoomRange, ToolId, ColorStyle, DashStyle, FillStyle, SizeStyle, Editor, ToolDefinition, AutoShapeOptions, TsdrawBackgroundOptions, TsdrawEditorSnapshot, TsdrawDocumentSnapshot, Viewport } from '@tsdraw/core';
+export { AutoShapeKind, AutoShapeOptions, AutoShapeThresholds, TsdrawBackgroundCustom, TsdrawBackgroundOptions, TsdrawBackgroundPreset, TsdrawBackgroundType } from '@tsdraw/core';
 
 interface TsdrawCameraOptions {
     panSpeed?: number;
@@ -60,6 +60,7 @@ interface TsdrawCursorContext {
     isMovingSelection: boolean;
     isResizingSelection: boolean;
     isRotatingSelection: boolean;
+    isDraggingVertex: boolean;
 }
 interface TsdrawToolOverlayState {
     visible: boolean;
@@ -156,6 +157,7 @@ interface TsdrawProps {
     touchOptions?: TsdrawTouchOptions;
     keyboardShortcuts?: TsdrawKeyboardShortcutOptions;
     penOptions?: TsdrawPenOptions;
+    autoShape?: boolean | AutoShapeOptions;
     background?: TsdrawBackgroundOptions;
     readOnly?: boolean;
     autoFocus?: boolean;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { useState, useMemo, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { DEFAULT_COLORS, renderCanvasBackground, 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 { DEFAULT_COLORS, renderCanvasBackground, getSelectionBoundsPage, buildTransformSnapshots, Editor, getVertexHandlePagePositions, pageToScreen, STROKE_WIDTHS, ERASER_MARGIN, resolveThemeColor, findVertexHit, getTopShapeAtPoint, buildStartPositions, applyRotation, applyResize, applyMove, applyVertexDrag, 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
@@ -8,6 +8,7 @@ function SelectionOverlay({
   selectionBrush,
   selectionBounds,
   selectionRotationDeg,
+  vertexHandleScreenPositions,
   currentTool,
   selectedCount,
   onRotatePointerDown,
@@ -35,7 +36,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__ */ jsx("div", { className: "tsdraw-selection-bounds" }),
@@ -93,7 +95,15 @@ function SelectionOverlay({
           ] })
         ]
       }
-    )
+    ),
+    currentTool === "select" && vertexHandleScreenPositions.map((pos, index) => /* @__PURE__ */ 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) {
@@ -452,6 +462,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";
   }
@@ -894,6 +905,16 @@ function toScreenRect(editor, bounds) {
     height: Math.max(0, maxY - minY)
   };
 }
+function selectionCenteredOnRotation(editor, startBoundsPage, centerPage) {
+  const startScreen = toScreenRect(editor, startBoundsPage);
+  const centerScreen = 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 resolveThemeColor(colorStyle, theme);
 }
@@ -909,6 +930,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 = {}) {
@@ -920,6 +946,7 @@ function useTsdrawCanvasController(options = {}) {
   const touchOptionsRef = useRef(options.touchOptions);
   const keyboardShortcutsRef = useRef(options.keyboardShortcuts);
   const penOptionsRef = useRef(options.penOptions);
+  const autoShapeRef = useRef(options.autoShape);
   const backgroundRef = useRef(options.background);
   const readOnlyRef = useRef(options.readOnly ?? false);
   const containerRef = useRef(null);
@@ -948,7 +975,8 @@ function useTsdrawCanvasController(options = {}) {
     center: null,
     startAngle: 0,
     startSelectionRotationDeg: 0,
-    startShapes: /* @__PURE__ */ new Map()
+    startShapes: /* @__PURE__ */ new Map(),
+    startBoundsPage: null
   });
   const selectDragRef = useRef({
     mode: "none",
@@ -970,6 +998,8 @@ function useTsdrawCanvasController(options = {}) {
   const [isMovingSelection, setIsMovingSelection] = useState(false);
   const [isResizingSelection, setIsResizingSelection] = useState(false);
   const [isRotatingSelection, setIsRotatingSelection] = useState(false);
+  const [isDraggingVertex, setIsDraggingVertex] = useState(false);
+  const [vertexHandleScreenPositions, setVertexHandleScreenPositions] = useState([]);
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const [isPersistenceReady, setIsPersistenceReady] = useState(!options.persistenceKey);
@@ -1002,6 +1032,11 @@ function useTsdrawCanvasController(options = {}) {
   useEffect(() => {
     penOptionsRef.current = options.penOptions;
   }, [options.penOptions]);
+  useEffect(() => {
+    autoShapeRef.current = options.autoShape;
+    const editor = editorRef.current;
+    if (editor) editor.setAutoShape(resolveAutoShapeOption(options.autoShape));
+  }, [options.autoShape]);
   useEffect(() => {
     backgroundRef.current = options.background;
   }, [options.background]);
@@ -1058,9 +1093,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 = useCallback(
     (e, handle) => {
@@ -1114,8 +1152,10 @@ function useTsdrawCanvasController(options = {}) {
         center,
         startAngle: Math.atan2(p.y - center.y, p.x - center.x),
         startSelectionRotationDeg: selectionRotationRef.current,
-        startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current)
+        startShapes: buildTransformSnapshots(editor, selectedShapeIdsRef.current),
+        startBoundsPage: bounds
       };
+      setSelectionBounds(selectionCenteredOnRotation(editor, bounds, center));
       isPointerActiveRef.current = true;
       activePointerIdsRef.current.add(e.pointerId);
       canvas.setPointerCapture(e.pointerId);
@@ -1140,7 +1180,8 @@ function useTsdrawCanvasController(options = {}) {
     const editor = new 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)) {
@@ -1380,6 +1421,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 = 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 = getTopShapeAtPoint(editor, { x, y });
         const isHitSelected = !!(hit && selectedShapeIdsRef.current.includes(hit.id));
         const isInsideSelectionBounds = (() => {
@@ -1395,7 +1460,8 @@ function useTsdrawCanvasController(options = {}) {
             currentPage: { x, y },
             startPositions: buildStartPositions(editor, selectedShapeIdsRef.current),
             additive: false,
-            initialSelection: [...selectedShapeIdsRef.current]
+            initialSelection: [...selectedShapeIdsRef.current],
+            moveFromEmptyInsideBounds: isInsideSelectionBounds && !hit
           };
           setIsMovingSelection(true);
           return;
@@ -1451,13 +1517,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);
           applyRotation(editor, startShapes, center, delta);
           render();
+          setSelectionBounds(selectionCenteredOnRotation(editor, startBoundsPage, center));
           return;
         }
         if (mode === "resize") {
@@ -1475,6 +1542,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) {
+            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 = normalizeSelectionBounds(selectDragRef.current.startPage, selectDragRef.current.currentPage);
@@ -1512,7 +1593,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();
@@ -1530,6 +1611,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();
@@ -1608,9 +1707,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";
@@ -1947,10 +2058,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");
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor || currentTool !== "select" || selectedShapeIds.length === 0) {
+      setVertexHandleScreenPositions([]);
+      return;
+    }
+    const pagePts = getVertexHandlePagePositions(editor, selectedShapeIds);
+    setVertexHandleScreenPositions(
+      pagePts.map((pg) => {
+        const s = 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
   });
@@ -1960,7 +2086,8 @@ function useTsdrawCanvasController(options = {}) {
     showToolOverlay,
     isMovingSelection,
     isResizingSelection,
-    isRotatingSelection
+    isRotatingSelection,
+    isDraggingVertex
   };
   const toolOverlay = {
     visible: showToolOverlay,
@@ -1983,6 +2110,7 @@ function useTsdrawCanvasController(options = {}) {
     selectionBrush,
     selectionBounds,
     selectionRotationDeg,
+    vertexHandleScreenPositions,
     canvasCursor,
     cursorContext,
     toolOverlay,
@@ -2093,6 +2221,7 @@ function Tsdraw(props) {
     selectionBrush,
     selectionBounds,
     selectionRotationDeg,
+    vertexHandleScreenPositions,
     canvasCursor: defaultCanvasCursor,
     cursorContext,
     toolOverlay,
@@ -2115,6 +2244,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,
@@ -2273,6 +2403,7 @@ function Tsdraw(props) {
             selectionBrush,
             selectionBounds,
             selectionRotationDeg,
+            vertexHandleScreenPositions,
             currentTool,
             selectedCount: selectedShapeIds.length,
             onRotatePointerDown: handleRotatePointerDown,