@tsdraw/core 0.5.1 → 0.6.2

package/dist/index.cjs

@@ -150,6 +150,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,
@@ -865,13 +871,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)
             }
           }
         ]);
@@ -947,7 +954,7 @@ var PenDrawingState = class extends StateNode {
             type: "draw",
             props: {
               segments: updated,
-              isClosed: this.detectClosure(segments, size, scale)
+              isClosed: this.detectClosure(updated, size, scale)
             }
           }
         ]);
@@ -1310,10 +1317,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();
@@ -1329,10 +1352,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)
     };
@@ -1343,6 +1378,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) {
@@ -1416,10 +1470,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();
   }
@@ -1437,7 +1492,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 {
@@ -1475,12 +1532,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);
@@ -1497,6 +1634,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