@tsdraw/core 0.5.1 → 0.6.2

package/dist/index.d.cts

@@ -74,6 +74,11 @@ interface TsdrawEditorSnapshot {
     document: TsdrawDocumentSnapshot;
     state: TsdrawSessionStateSnapshot;
 }
+interface TsdrawHistorySnapshot {
+    version: 1;
+    undoStack: TsdrawDocumentSnapshot[];
+    redoStack: TsdrawDocumentSnapshot[];
+}
 interface DocumentStoreSnapshot {
     page: PageState;
     order: ShapeId[];
@@ -289,7 +294,16 @@ declare class Editor {
     private drawStyle;
     private readonly toolStateContext;
     private readonly listeners;
+    private readonly historyListeners;
+    private undoStack;
+    private redoStack;
+    private lastDocumentSnapshot;
+    private suppressHistoryCapture;
+    private historyBatchDepth;
+    private historyBatchStartSnapshot;
+    private historyBatchChanged;
     constructor(opts?: EditorOptions);
+    private captureDocumentHistory;
     registerToolDefinition(toolDefinition: ToolDefinition): void;
     private getDefaultToolDefinitions;
     createShapeId(): ShapeId;
@@ -331,13 +345,25 @@ declare class Editor {
         selectedShapeIds?: ShapeId[];
     }): TsdrawEditorSnapshot;
     loadPersistenceSnapshot(snapshot: Partial<TsdrawEditorSnapshot>): ShapeId[];
+    getHistorySnapshot(): TsdrawHistorySnapshot;
+    loadHistorySnapshot(snapshot: TsdrawHistorySnapshot | null | undefined): void;
+    clearRedoHistory(): void;
+    beginHistoryEntry(): void;
+    endHistoryEntry(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    undo(): boolean;
+    redo(): boolean;
     listen(listener: EditorListener): () => void;
+    listenHistory(listener: EditorListener): () => void;
     screenToPage(screenX: number, screenY: number): {
         x: number;
         y: number;
     };
     render(ctx: CanvasRenderingContext2D): void;
     private emitChange;
+    private emitHistoryChange;
+    private runWithoutHistoryCapture;
 }
 
 declare class PenIdleState extends StateNode {
@@ -524,4 +550,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, 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, 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, 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 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, 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, 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, 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 };

package/dist/index.d.ts

@@ -74,6 +74,11 @@ interface TsdrawEditorSnapshot {
     document: TsdrawDocumentSnapshot;
     state: TsdrawSessionStateSnapshot;
 }
+interface TsdrawHistorySnapshot {
+    version: 1;
+    undoStack: TsdrawDocumentSnapshot[];
+    redoStack: TsdrawDocumentSnapshot[];
+}
 interface DocumentStoreSnapshot {
     page: PageState;
     order: ShapeId[];
@@ -289,7 +294,16 @@ declare class Editor {
     private drawStyle;
     private readonly toolStateContext;
     private readonly listeners;
+    private readonly historyListeners;
+    private undoStack;
+    private redoStack;
+    private lastDocumentSnapshot;
+    private suppressHistoryCapture;
+    private historyBatchDepth;
+    private historyBatchStartSnapshot;
+    private historyBatchChanged;
     constructor(opts?: EditorOptions);
+    private captureDocumentHistory;
     registerToolDefinition(toolDefinition: ToolDefinition): void;
     private getDefaultToolDefinitions;
     createShapeId(): ShapeId;
@@ -331,13 +345,25 @@ declare class Editor {
         selectedShapeIds?: ShapeId[];
     }): TsdrawEditorSnapshot;
     loadPersistenceSnapshot(snapshot: Partial<TsdrawEditorSnapshot>): ShapeId[];
+    getHistorySnapshot(): TsdrawHistorySnapshot;
+    loadHistorySnapshot(snapshot: TsdrawHistorySnapshot | null | undefined): void;
+    clearRedoHistory(): void;
+    beginHistoryEntry(): void;
+    endHistoryEntry(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    undo(): boolean;
+    redo(): boolean;
     listen(listener: EditorListener): () => void;
+    listenHistory(listener: EditorListener): () => void;
     screenToPage(screenX: number, screenY: number): {
         x: number;
         y: number;
     };
     render(ctx: CanvasRenderingContext2D): void;
     private emitChange;
+    private emitHistoryChange;
+    private runWithoutHistoryCapture;
 }
 
 declare class PenIdleState extends StateNode {
@@ -524,4 +550,4 @@ declare function decodePathToPoints(segments: {
     y: number;
 }[];
 
-export { type Bounds, CanvasRenderer, 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, 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, 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 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, 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, 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, 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 };

package/dist/index.js

@@ -148,6 +148,12 @@ var DocumentStore = class {
   loadSnapshot(snapshot) {
     const pageState = cloneValue(snapshot.page);
     const normalizedOrder = [...snapshot.order].filter((shapeId) => pageState.shapes[shapeId] != null);
+    const orderedSet = new Set(normalizedOrder);
+    for (const shapeId of Object.keys(pageState.shapes)) {
+      if (!orderedSet.has(shapeId)) {
+        normalizedOrder.push(shapeId);
+      }
+    }
     this.state = {
       id: pageState.id,
       shapes: pageState.shapes,
@@ -863,13 +869,14 @@ var PenDrawingState = class extends StateNode {
           type: "straight",
           path: encodePoints([prevEnd, { ...anchorPt, z: pressure }])
         };
+        const withStraightSeg = [...segments, seg];
         this.editor.updateShapes([
           {
             id,
             type: "draw",
             props: {
-              segments: [...segments, seg],
-              isClosed: this.detectClosure(segments, size, scale)
+              segments: withStraightSeg,
+              isClosed: this.detectClosure(withStraightSeg, size, scale)
             }
           }
         ]);
@@ -945,7 +952,7 @@ var PenDrawingState = class extends StateNode {
             type: "draw",
             props: {
               segments: updated,
-              isClosed: this.detectClosure(segments, size, scale)
+              isClosed: this.detectClosure(updated, size, scale)
             }
           }
         ]);
@@ -1308,10 +1315,26 @@ function recordsToDocumentSnapshot(records) {
 // src/editor/Editor.ts
 var shapeIdCounter = 0;
 var shapeIdRuntimeSeed = Math.random().toString(36).slice(2, 8);
+var MAX_HISTORY_ENTRIES = 100;
 function createShapeId() {
   shapeIdCounter += 1;
   return `shape:${Date.now().toString(36)}-${shapeIdRuntimeSeed}-${shapeIdCounter.toString(36)}`;
 }
+function cloneDocumentSnapshot(snapshot) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(snapshot);
+  }
+  return JSON.parse(JSON.stringify(snapshot));
+}
+function areDocumentSnapshotsEqual(left, right) {
+  if (left.records.length !== right.records.length) return false;
+  for (let i = 0; i < left.records.length; i += 1) {
+    if (JSON.stringify(left.records[i]) !== JSON.stringify(right.records[i])) {
+      return false;
+    }
+  }
+  return true;
+}
 var Editor = class {
   store = new DocumentStore();
   input = new InputManager();
@@ -1327,10 +1350,22 @@ var Editor = class {
   };
   toolStateContext;
   listeners = /* @__PURE__ */ new Set();
+  historyListeners = /* @__PURE__ */ new Set();
+  undoStack = [];
+  redoStack = [];
+  lastDocumentSnapshot;
+  suppressHistoryCapture = false;
+  historyBatchDepth = 0;
+  historyBatchStartSnapshot = null;
+  historyBatchChanged = false;
   // Creates a new editor instance with the given options (with defaults if not provided)
   constructor(opts = {}) {
     this.options = { dragDistanceSquared: opts.dragDistanceSquared ?? DRAG_DISTANCE_SQUARED };
-    this.store.listen(() => this.emitChange());
+    this.lastDocumentSnapshot = this.getDocumentSnapshot();
+    this.store.listen(() => {
+      this.captureDocumentHistory();
+      this.emitChange();
+    });
     this.toolStateContext = {
       transition: (id, info) => this.tools.transition(id, info)
     };
@@ -1341,6 +1376,25 @@ var Editor = class {
       this.registerToolDefinition(customTool);
     }
     this.setCurrentTool(opts.initialToolId ?? "pen");
+    this.lastDocumentSnapshot = this.getDocumentSnapshot();
+  }
+  captureDocumentHistory() {
+    const nextSnapshot = this.getDocumentSnapshot();
+    const previousSnapshot = this.lastDocumentSnapshot;
+    this.lastDocumentSnapshot = nextSnapshot;
+    if (this.suppressHistoryCapture || areDocumentSnapshotsEqual(previousSnapshot, nextSnapshot)) {
+      return;
+    }
+    if (this.historyBatchDepth > 0) {
+      this.historyBatchChanged = true;
+      return;
+    }
+    this.undoStack.push(cloneDocumentSnapshot(previousSnapshot));
+    if (this.undoStack.length > MAX_HISTORY_ENTRIES) {
+      this.undoStack.splice(0, this.undoStack.length - MAX_HISTORY_ENTRIES);
+    }
+    this.redoStack = [];
+    this.emitHistoryChange();
   }
   registerToolDefinition(toolDefinition) {
     for (const stateConstructor of toolDefinition.stateConstructors) {
@@ -1414,10 +1468,11 @@ var Editor = class {
     this.emitChange();
   }
   setViewport(partial) {
+    const rawZoom = partial.zoom ?? this.viewport.zoom;
     this.viewport = {
       x: partial.x ?? this.viewport.x,
       y: partial.y ?? this.viewport.y,
-      zoom: partial.zoom ?? this.viewport.zoom
+      zoom: Math.max(0.1, Math.min(4, rawZoom))
     };
     this.emitChange();
   }
@@ -1435,7 +1490,9 @@ var Editor = class {
   loadDocumentSnapshot(snapshot) {
     const documentSnapshot = recordsToDocumentSnapshot(snapshot.records);
     if (!documentSnapshot) return;
-    this.store.loadSnapshot(documentSnapshot);
+    this.runWithoutHistoryCapture(() => {
+      this.store.loadSnapshot(documentSnapshot);
+    });
   }
   getSessionStateSnapshot(args) {
     return {
@@ -1473,12 +1530,92 @@ var Editor = class {
     }
     return [];
   }
+  getHistorySnapshot() {
+    return {
+      version: 1,
+      undoStack: this.undoStack.map(cloneDocumentSnapshot),
+      redoStack: this.redoStack.map(cloneDocumentSnapshot)
+    };
+  }
+  loadHistorySnapshot(snapshot) {
+    if (!snapshot || snapshot.version !== 1) return;
+    this.undoStack = snapshot.undoStack.map(cloneDocumentSnapshot).slice(-MAX_HISTORY_ENTRIES);
+    this.redoStack = snapshot.redoStack.map(cloneDocumentSnapshot).slice(-MAX_HISTORY_ENTRIES);
+    this.emitHistoryChange();
+  }
+  clearRedoHistory() {
+    if (this.redoStack.length === 0) return;
+    this.redoStack = [];
+    this.emitHistoryChange();
+  }
+  beginHistoryEntry() {
+    if (this.historyBatchDepth === 0) {
+      this.historyBatchStartSnapshot = cloneDocumentSnapshot(this.lastDocumentSnapshot);
+      this.historyBatchChanged = false;
+    }
+    this.historyBatchDepth += 1;
+  }
+  endHistoryEntry() {
+    if (this.historyBatchDepth === 0) return;
+    this.historyBatchDepth -= 1;
+    if (this.historyBatchDepth > 0) return;
+    const startSnapshot = this.historyBatchStartSnapshot;
+    this.historyBatchStartSnapshot = null;
+    if (!startSnapshot) return;
+    const endSnapshot = this.getDocumentSnapshot();
+    this.lastDocumentSnapshot = endSnapshot;
+    const didDocumentChange = this.historyBatchChanged || !areDocumentSnapshotsEqual(startSnapshot, endSnapshot);
+    this.historyBatchChanged = false;
+    if (!didDocumentChange) return;
+    this.undoStack.push(cloneDocumentSnapshot(startSnapshot));
+    if (this.undoStack.length > MAX_HISTORY_ENTRIES) {
+      this.undoStack.splice(0, this.undoStack.length - MAX_HISTORY_ENTRIES);
+    }
+    this.redoStack = [];
+    this.emitHistoryChange();
+  }
+  canUndo() {
+    return this.undoStack.length > 0;
+  }
+  canRedo() {
+    return this.redoStack.length > 0;
+  }
+  undo() {
+    const previousSnapshot = this.undoStack.pop();
+    if (!previousSnapshot) return false;
+    const currentSnapshot = this.getDocumentSnapshot();
+    this.redoStack.push(cloneDocumentSnapshot(currentSnapshot));
+    if (this.redoStack.length > MAX_HISTORY_ENTRIES) {
+      this.redoStack.splice(0, this.redoStack.length - MAX_HISTORY_ENTRIES);
+    }
+    this.loadDocumentSnapshot(previousSnapshot);
+    this.emitHistoryChange();
+    return true;
+  }
+  redo() {
+    const nextSnapshot = this.redoStack.pop();
+    if (!nextSnapshot) return false;
+    const currentSnapshot = this.getDocumentSnapshot();
+    this.undoStack.push(cloneDocumentSnapshot(currentSnapshot));
+    if (this.undoStack.length > MAX_HISTORY_ENTRIES) {
+      this.undoStack.splice(0, this.undoStack.length - MAX_HISTORY_ENTRIES);
+    }
+    this.loadDocumentSnapshot(nextSnapshot);
+    this.emitHistoryChange();
+    return true;
+  }
   listen(listener) {
     this.listeners.add(listener);
     return () => {
       this.listeners.delete(listener);
     };
   }
+  listenHistory(listener) {
+    this.historyListeners.add(listener);
+    return () => {
+      this.historyListeners.delete(listener);
+    };
+  }
   // Convert screen coords to page coords
   screenToPage(screenX, screenY) {
     return screenToPage(this.viewport, screenX, screenY);
@@ -1495,6 +1632,21 @@ var Editor = class {
       listener();
     }
   }
+  emitHistoryChange() {
+    for (const listener of this.historyListeners) {
+      listener();
+    }
+  }
+  runWithoutHistoryCapture(fn) {
+    const previousValue = this.suppressHistoryCapture;
+    this.suppressHistoryCapture = true;
+    try {
+      fn();
+    } finally {
+      this.suppressHistoryCapture = previousValue;
+      this.lastDocumentSnapshot = this.getDocumentSnapshot();
+    }
+  }
 };
 
 // src/tools/select/selectHelpers.ts