@tsdraw/core 0.7.0 → 0.8.1

package/dist/index.d.cts

@@ -63,6 +63,7 @@ interface TsdrawSessionStateSnapshot {
         x: number;
         y: number;
         zoom: number;
+        rotation?: number;
     };
     currentToolId: string;
     drawStyle: {
@@ -221,6 +222,7 @@ interface Viewport {
     x: number;
     y: number;
     zoom: number;
+    rotation: number;
 }
 declare function createViewport(): Viewport;
 declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
@@ -235,9 +237,11 @@ declare function setViewport(viewport: Viewport, updater: {
     x?: number;
     y?: number;
     zoom?: number;
+    rotation?: number;
 }): Viewport;
 declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
 declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
+declare function rotateViewport(viewport: Viewport, delta: number, centerX?: number, centerY?: number): Viewport;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -343,6 +347,9 @@ declare class Editor {
     }>): void;
     setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
+    zoomAt(factor: number, screenX: number, screenY: number): void;
+    rotateAt(delta: number, screenX: number, screenY: number): void;
+    deleteShapes(ids: ShapeId[]): void;
     getDocumentSnapshot(): TsdrawDocumentSnapshot;
     loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
     getSessionStateSnapshot(args?: {
@@ -628,4 +635,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };

package/dist/index.d.ts

@@ -63,6 +63,7 @@ interface TsdrawSessionStateSnapshot {
         x: number;
         y: number;
         zoom: number;
+        rotation?: number;
     };
     currentToolId: string;
     drawStyle: {
@@ -221,6 +222,7 @@ interface Viewport {
     x: number;
     y: number;
     zoom: number;
+    rotation: number;
 }
 declare function createViewport(): Viewport;
 declare function screenToPage(viewport: Viewport, screenX: number, screenY: number): {
@@ -235,9 +237,11 @@ declare function setViewport(viewport: Viewport, updater: {
     x?: number;
     y?: number;
     zoom?: number;
+    rotation?: number;
 }): Viewport;
 declare function panViewport(viewport: Viewport, dx: number, dy: number): Viewport;
 declare function zoomViewport(viewport: Viewport, factor: number, centerX?: number, centerY?: number): Viewport;
+declare function rotateViewport(viewport: Viewport, delta: number, centerX?: number, centerY?: number): Viewport;
 
 type TsdrawRenderTheme = 'light' | 'dark';
 declare function resolveThemeColor(colorStyle: string, theme: TsdrawRenderTheme): string;
@@ -343,6 +347,9 @@ declare class Editor {
     }>): void;
     setViewport(partial: Partial<Viewport>): void;
     panBy(dx: number, dy: number): void;
+    zoomAt(factor: number, screenX: number, screenY: number): void;
+    rotateAt(delta: number, screenX: number, screenY: number): void;
+    deleteShapes(ids: ShapeId[]): void;
     getDocumentSnapshot(): TsdrawDocumentSnapshot;
     loadDocumentSnapshot(snapshot: TsdrawDocumentSnapshot): void;
     getSessionStateSnapshot(args?: {
@@ -628,4 +635,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { type Bounds, CanvasRenderer, CircleDrawingState, CircleIdleState, type ColorStyle, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, type DashStyle, type DefaultToolId, DocumentStore, type DocumentStoreSnapshot, type DrawSegment, type DrawShape, ERASER_MARGIN, Editor, type EditorOptions, EraserErasingState, EraserIdleState, EraserPointingState, type FillStyle, HandDraggingState, HandIdleState, type ICanvasRenderer, type IEditor, InputManager, MAX_POINTS_PER_SHAPE, type PageState, PenDrawingState, PenIdleState, type PointerInput, type ResizeHandle, STROKE_WIDTHS, type SegmentType, SelectIdleState, type SelectionBounds, type Shape, type ShapeId, type SizeStyle, SquareDrawingState, SquareIdleState, StateNode, type StateNodeConstructor, type ToolDefinition, type ToolId, type ToolKeyInfo, ToolManager, type ToolPointerDownInfo, type ToolPointerMoveInfo, type ToolStateContext, type ToolStateTransitionInfo, type TransformSnapshot, type TsdrawDocumentSnapshot, type TsdrawEditorSnapshot, type TsdrawHistorySnapshot, type TsdrawPageRecord, type TsdrawPersistedRecord, type TsdrawRenderTheme, type TsdrawSessionStateSnapshot, type TsdrawShapeRecord, type Vec3, type Viewport, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };

package/dist/index.js

@@ -223,25 +223,34 @@ var StateNode = class {
 
 // src/canvas/viewport.ts
 function createViewport() {
-  return { x: 0, y: 0, zoom: 1 };
+  return { x: 0, y: 0, zoom: 1, rotation: 0 };
 }
 function screenToPage(viewport, screenX, screenY) {
+  const tx = screenX - viewport.x;
+  const ty = screenY - viewport.y;
+  const cos = Math.cos(viewport.rotation);
+  const sin = Math.sin(viewport.rotation);
   return {
-    x: (screenX - viewport.x) / viewport.zoom,
-    y: (screenY - viewport.y) / viewport.zoom
+    x: (tx * cos + ty * sin) / viewport.zoom,
+    y: (-tx * sin + ty * cos) / viewport.zoom
   };
 }
 function pageToScreen(viewport, pageX, pageY) {
+  const scaledX = pageX * viewport.zoom;
+  const scaledY = pageY * viewport.zoom;
+  const cos = Math.cos(viewport.rotation);
+  const sin = Math.sin(viewport.rotation);
   return {
-    x: pageX * viewport.zoom + viewport.x,
-    y: pageY * viewport.zoom + viewport.y
+    x: scaledX * cos - scaledY * sin + viewport.x,
+    y: scaledX * sin + scaledY * cos + viewport.y
   };
 }
 function setViewport(viewport, updater) {
   return {
     x: updater.x ?? viewport.x,
     y: updater.y ?? viewport.y,
-    zoom: updater.zoom ?? viewport.zoom
+    zoom: updater.zoom ?? viewport.zoom,
+    rotation: updater.rotation ?? viewport.rotation
   };
 }
 function panViewport(viewport, dx, dy) {
@@ -253,9 +262,23 @@ function zoomViewport(viewport, factor, centerX, centerY) {
     return { ...viewport, zoom };
   }
   const pageBefore = screenToPage(viewport, centerX, centerY);
-  const x = centerX - pageBefore.x * zoom;
-  const y = centerY - pageBefore.y * zoom;
-  return { x, y, zoom };
+  const cos = Math.cos(viewport.rotation);
+  const sin = Math.sin(viewport.rotation);
+  const x = centerX - (pageBefore.x * zoom * cos - pageBefore.y * zoom * sin);
+  const y = centerY - (pageBefore.x * zoom * sin + pageBefore.y * zoom * cos);
+  return { x, y, zoom, rotation: viewport.rotation };
+}
+function rotateViewport(viewport, delta, centerX, centerY) {
+  const rotation = viewport.rotation + delta;
+  if (centerX == null || centerY == null) {
+    return { ...viewport, rotation };
+  }
+  const pageBefore = screenToPage(viewport, centerX, centerY);
+  const cos = Math.cos(rotation);
+  const sin = Math.sin(rotation);
+  const x = centerX - (pageBefore.x * viewport.zoom * cos - pageBefore.y * viewport.zoom * sin);
+  const y = centerY - (pageBefore.x * viewport.zoom * sin + pageBefore.y * viewport.zoom * cos);
+  return { x, y, zoom: viewport.zoom, rotation };
 }
 
 // src/utils/colors.ts
@@ -288,6 +311,7 @@ var CanvasRenderer = class {
   render(ctx, viewport, shapes) {
     ctx.save();
     ctx.translate(viewport.x, viewport.y);
+    ctx.rotate(viewport.rotation);
     ctx.scale(viewport.zoom, viewport.zoom);
     for (const shape of shapes) {
       if (shape.type === "draw") {
@@ -448,9 +472,6 @@ function flattenSegments(shape) {
     }
     out.push(D);
   }
-  if (out.length > 0 && !shape.props.isPen) {
-    for (const p of out) p.pressure = 0.5;
-  }
   return out;
 }
 function getLineDash(dash, width) {
@@ -580,6 +601,7 @@ var ToolManager = class {
   getCurrentState() {
     return this.currentState;
   }
+  // Transition between states within the same tool (ex. pen_idle -> pen_drawing)
   transition(stateId, info) {
     const next = this.states.get(stateId);
     if (!next) return;
@@ -781,8 +803,8 @@ var PenDrawingState = class extends StateNode {
     const penActive = inputs.getIsPen();
     const z = this._startInfo?.point?.z ?? 0.5;
     this._isPenDevice = penActive;
-    this._hasPressure = penActive && z !== 0 || z > 0 && z < 0.5 || z > 0.5 && z < 1;
-    const pressure = this._hasPressure ? toFixed(z * 1.25) : 0.5;
+    this._hasPressure = penActive || z !== 0.5;
+    const pressure = this._hasPressure ? toFixed(z) : 0.5;
     this._phase = inputs.getShiftKey() ? "straight" : "free";
     this._extending = false;
     this._lastSample = { ...origin };
@@ -877,8 +899,15 @@ var PenDrawingState = class extends StateNode {
     const { id, props: { size, scale } } = target;
     const { segments } = shape.props;
     const curPt = inputs.getCurrentPagePoint();
+    if (!this._hasPressure) {
+      const liveZ = curPt.z ?? 0.5;
+      if (liveZ !== 0.5 || inputs.getIsPen()) {
+        this._hasPressure = true;
+        this.editor.updateShapes([{ id, type: "draw", props: { isPen: true } }]);
+      }
+    }
     const local = this.editor.getPointInShapeSpace(shape, curPt);
-    const pressure = this._hasPressure ? toFixed((curPt.z ?? 0.5) * 1.25) : 0.5;
+    const pressure = this._hasPressure ? toFixed(curPt.z ?? 0.5) : 0.5;
     const pt = { x: toFixed(local.x), y: toFixed(local.y), z: pressure };
     switch (this._phase) {
       case "starting_straight": {
@@ -1024,7 +1053,7 @@ var PenDrawingState = class extends StateNode {
           const firstPt = {
             x: 0,
             y: 0,
-            z: this._hasPressure ? toFixed((curPage.z ?? 0.5) * 1.25) : 0.5
+            z: this._hasPressure ? toFixed(curPage.z ?? 0.5) : 0.5
           };
           this._activePts = [firstPt];
           this.editor.createShape({
@@ -1099,6 +1128,7 @@ var GeometricDrawingState = class extends StateNode {
     });
     this.currentShapeId = nextShapeId;
   }
+  // Shift key switches between constrained and unconstrained bounds
   onPointerMove() {
     const activeShape = this.getActiveShape();
     if (!activeShape) return;
@@ -1132,6 +1162,8 @@ var GeometricDrawingState = class extends StateNode {
   onKeyUp() {
     this.onPointerMove();
   }
+  // If user dragged, use the drag extents for the final shape
+  // If they just clicked without dragging, use default-sized shape
   completeShape() {
     const activeShape = this.getActiveShape();
     const config = this.getConfig();
@@ -1452,6 +1484,8 @@ var EraserErasingState = class extends StateNode {
   onCancel() {
     this.ctx.transition("eraser_idle");
   }
+  // On every pointer move, test the line from previous pointer position to current one against nearby shapes
+  // Only select shapes whose bounding box overlaps the sweep area to avoid testing all shapes
   sweep() {
     const zoom = this.editor.getZoomLevel();
     const tolerance = ERASER_MARGIN / zoom;
@@ -1470,6 +1504,7 @@ var EraserErasingState = class extends StateNode {
     this._marked = [...hitIds];
     this.editor.setErasingShapes(this._marked);
   }
+  // Delete marked shapes and reset, then go back to idle
   finish() {
     const ids = this.editor.getErasingShapeIds();
     if (ids.length > 0) {
@@ -1734,7 +1769,8 @@ var Editor = class {
     this.viewport = {
       x: partial.x ?? this.viewport.x,
       y: partial.y ?? this.viewport.y,
-      zoom: Math.max(0.1, Math.min(4, rawZoom))
+      zoom: Math.max(0.1, Math.min(4, rawZoom)),
+      rotation: partial.rotation ?? this.viewport.rotation
     };
     this.emitChange();
   }
@@ -1744,6 +1780,18 @@ var Editor = class {
       y: this.viewport.y + dy
     });
   }
+  zoomAt(factor, screenX, screenY) {
+    this.viewport = zoomViewport(this.viewport, factor, screenX, screenY);
+    this.emitChange();
+  }
+  rotateAt(delta, screenX, screenY) {
+    this.viewport = rotateViewport(this.viewport, delta, screenX, screenY);
+    this.emitChange();
+  }
+  deleteShapes(ids) {
+    if (ids.length === 0) return;
+    this.store.deleteShapes(ids);
+  }
   getDocumentSnapshot() {
     return {
       records: documentSnapshotToRecords(this.store.getSnapshot())
@@ -1762,7 +1810,8 @@ var Editor = class {
       viewport: {
         x: this.viewport.x,
         y: this.viewport.y,
-        zoom: this.viewport.zoom
+        zoom: this.viewport.zoom,
+        rotation: this.viewport.rotation
       },
       currentToolId: this.getCurrentToolId(),
       drawStyle: this.getCurrentDrawStyle(),
@@ -1770,7 +1819,10 @@ var Editor = class {
     };
   }
   loadSessionStateSnapshot(snapshot) {
-    this.setViewport(snapshot.viewport);
+    this.setViewport({
+      ...snapshot.viewport,
+      rotation: snapshot.viewport.rotation ?? 0
+    });
     this.setCurrentDrawStyle({
       color: snapshot.drawStyle.color,
       dash: snapshot.drawStyle.dash,
@@ -2157,6 +2209,6 @@ function applyResize(editor, handle, startBounds, startShapes, pointer, lockAspe
   }
 }
 
-export { CanvasRenderer, CircleDrawingState, CircleIdleState, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, SquareDrawingState, SquareIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
+export { CanvasRenderer, CircleDrawingState, CircleIdleState, DEFAULT_COLORS, DRAG_DISTANCE_SQUARED, DocumentStore, ERASER_MARGIN, Editor, EraserErasingState, EraserIdleState, EraserPointingState, HandDraggingState, HandIdleState, InputManager, MAX_POINTS_PER_SHAPE, PenDrawingState, PenIdleState, STROKE_WIDTHS, SelectIdleState, SquareDrawingState, SquareIdleState, StateNode, ToolManager, applyMove, applyResize, applyRotation, boundsContainPoint, boundsIntersect, boundsOf, buildStartPositions, buildTransformSnapshots, closestOnSegment, createViewport, decodeFirstPoint, decodeLastPoint, decodePathToPoints, decodePoints, distance, documentSnapshotToRecords, encodePoints, getSelectionBoundsPage, getShapeBounds2 as getShapeBounds, getShapesInBounds, getTopShapeAtPoint, isSelectTool, minDistanceToPolyline, normalizeSelectionBounds, padBounds, pageToScreen, panViewport, pointHitsShape, recordsToDocumentSnapshot, resolveThemeColor, rotatePoint, rotateViewport, screenToPage, segmentHitsShape, segmentTouchesPolyline, setViewport, shapePagePoints, sqDistance, zoomViewport };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map