@tsdraw/core 0.7.0 → 0.8.0

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) {
@@ -781,8 +802,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 +898,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 +1052,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({
@@ -1734,7 +1762,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 +1773,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 +1803,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 +1812,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 +2202,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