@tsdraw/core 0.4.0 → 0.5.0

package/dist/index.cjs

@@ -71,6 +71,12 @@ function decodePathToPoints(segments, ox, oy) {
 }
 
 // src/store/documentStore.ts
+function cloneValue(value) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(value);
+  }
+  return JSON.parse(JSON.stringify(value));
+}
 var DocumentStore = class {
   state = {
     id: "page-1",
@@ -78,6 +84,7 @@ var DocumentStore = class {
     erasingShapeIds: []
   };
   order = [];
+  listeners = /* @__PURE__ */ new Set();
   getPage() {
     return this.state;
   }
@@ -98,15 +105,18 @@ var DocumentStore = class {
   }
   setErasingShapes(ids) {
     this.state.erasingShapeIds = ids;
+    this.emitChange();
   }
   createShape(shape) {
     this.state.shapes[shape.id] = shape;
     this.order.push(shape.id);
+    this.emitChange();
   }
   updateShape(id, partial) {
     const existing = this.state.shapes[id];
     if (!existing) return;
     this.state.shapes[id] = { ...existing, ...partial, id };
+    this.emitChange();
   }
   deleteShapes(ids) {
     for (const id of ids) {
@@ -114,6 +124,7 @@ var DocumentStore = class {
       this.order = this.order.filter((i) => i !== id);
     }
     this.state.erasingShapeIds = this.state.erasingShapeIds.filter((i) => !ids.includes(i));
+    this.emitChange();
   }
   getCurrentPageShapes() {
     return Object.values(this.state.shapes);
@@ -129,6 +140,35 @@ var DocumentStore = class {
     }
     return ids;
   }
+  getSnapshot() {
+    return {
+      page: cloneValue(this.state),
+      order: [...this.order]
+    };
+  }
+  // Load snapshot into the document when loading a persistence snapshot (so on page reload)
+  loadSnapshot(snapshot) {
+    const pageState = cloneValue(snapshot.page);
+    const normalizedOrder = [...snapshot.order].filter((shapeId) => pageState.shapes[shapeId] != null);
+    this.state = {
+      id: pageState.id,
+      shapes: pageState.shapes,
+      erasingShapeIds: pageState.erasingShapeIds.filter((shapeId) => pageState.shapes[shapeId] != null)
+    };
+    this.order = normalizedOrder;
+    this.emitChange();
+  }
+  listen(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
 };
 function getShapeBounds(shape) {
   if (shape.type !== "draw") {
@@ -1290,10 +1330,68 @@ var HandDraggingState = class extends StateNode {
   }
 };
 
+// src/persistence/snapshots.ts
+var PAGE_RECORD_ID = "page:current";
+function cloneValue2(value) {
+  if (typeof structuredClone === "function") {
+    return structuredClone(value);
+  }
+  return JSON.parse(JSON.stringify(value));
+}
+function asDrawShape(value) {
+  return cloneValue2(value);
+}
+function documentSnapshotToRecords(snapshot) {
+  const shapeIds = [...snapshot.order].filter((id) => snapshot.page.shapes[id] != null);
+  const pageRecord = {
+    id: PAGE_RECORD_ID,
+    typeName: "page",
+    pageId: snapshot.page.id,
+    shapeIds,
+    erasingShapeIds: [...snapshot.page.erasingShapeIds]
+  };
+  const shapeRecords = shapeIds.map((shapeId) => snapshot.page.shapes[shapeId]).filter((shape) => shape != null).map((shape) => ({
+    id: shape.id,
+    typeName: "shape",
+    shape: asDrawShape(shape)
+  }));
+  return [pageRecord, ...shapeRecords];
+}
+function recordsToDocumentSnapshot(records) {
+  const pageRecord = records.find((record) => record.typeName === "page");
+  if (!pageRecord) {
+    return null;
+  }
+  const shapeRecordMap = /* @__PURE__ */ new Map();
+  for (const record of records) {
+    if (record.typeName === "shape") {
+      shapeRecordMap.set(record.id, record);
+    }
+  }
+  const shapes = {};
+  const order = [];
+  for (const shapeId of pageRecord.shapeIds) {
+    const shapeRecord = shapeRecordMap.get(shapeId);
+    if (!shapeRecord) continue;
+    shapes[shapeId] = asDrawShape(shapeRecord.shape);
+    order.push(shapeId);
+  }
+  return {
+    page: {
+      id: pageRecord.pageId,
+      shapes,
+      erasingShapeIds: [...pageRecord.erasingShapeIds].filter((shapeId) => shapes[shapeId] != null)
+    },
+    order
+  };
+}
+
 // src/editor/Editor.ts
 var shapeIdCounter = 0;
+var shapeIdRuntimeSeed = Math.random().toString(36).slice(2, 8);
 function createShapeId() {
-  return `shape:${String(++shapeIdCounter).padStart(6, "0")}`;
+  shapeIdCounter += 1;
+  return `shape:${Date.now().toString(36)}-${shapeIdRuntimeSeed}-${shapeIdCounter.toString(36)}`;
 }
 var Editor = class {
   store = new DocumentStore();
@@ -1309,9 +1407,11 @@ var Editor = class {
     size: "m"
   };
   toolStateContext;
+  listeners = /* @__PURE__ */ new Set();
   // 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.toolStateContext = {
       transition: (id, info) => this.tools.transition(id, info)
     };
@@ -1321,7 +1421,7 @@ var Editor = class {
     for (const customTool of opts.toolDefinitions ?? []) {
       this.registerToolDefinition(customTool);
     }
-    this.tools.setCurrentTool(opts.initialToolId ?? "pen");
+    this.setCurrentTool(opts.initialToolId ?? "pen");
   }
   registerToolDefinition(toolDefinition) {
     for (const stateConstructor of toolDefinition.stateConstructors) {
@@ -1382,6 +1482,7 @@ var Editor = class {
   }
   setCurrentTool(id) {
     this.tools.setCurrentTool(id);
+    this.emitChange();
   }
   getCurrentToolId() {
     return this.tools.getCurrentToolId();
@@ -1391,10 +1492,73 @@ var Editor = class {
   }
   setCurrentDrawStyle(partial) {
     this.drawStyle = { ...this.drawStyle, ...partial };
+    this.emitChange();
+  }
+  setViewport(partial) {
+    this.viewport = {
+      x: partial.x ?? this.viewport.x,
+      y: partial.y ?? this.viewport.y,
+      zoom: partial.zoom ?? this.viewport.zoom
+    };
+    this.emitChange();
   }
   panBy(dx, dy) {
-    this.viewport.x += dx;
-    this.viewport.y += dy;
+    this.setViewport({
+      x: this.viewport.x + dx,
+      y: this.viewport.y + dy
+    });
+  }
+  getDocumentSnapshot() {
+    return {
+      records: documentSnapshotToRecords(this.store.getSnapshot())
+    };
+  }
+  loadDocumentSnapshot(snapshot) {
+    const documentSnapshot = recordsToDocumentSnapshot(snapshot.records);
+    if (!documentSnapshot) return;
+    this.store.loadSnapshot(documentSnapshot);
+  }
+  getSessionStateSnapshot(args) {
+    return {
+      version: 1,
+      viewport: {
+        x: this.viewport.x,
+        y: this.viewport.y,
+        zoom: this.viewport.zoom
+      },
+      currentToolId: this.getCurrentToolId(),
+      drawStyle: this.getCurrentDrawStyle(),
+      selectedShapeIds: [...args?.selectedShapeIds ?? []]
+    };
+  }
+  loadSessionStateSnapshot(snapshot) {
+    this.setViewport(snapshot.viewport);
+    this.setCurrentDrawStyle(snapshot.drawStyle);
+    if (this.tools.hasTool(snapshot.currentToolId)) {
+      this.setCurrentTool(snapshot.currentToolId);
+    }
+    return [...snapshot.selectedShapeIds];
+  }
+  getPersistenceSnapshot(args) {
+    return {
+      document: this.getDocumentSnapshot(),
+      state: this.getSessionStateSnapshot(args)
+    };
+  }
+  loadPersistenceSnapshot(snapshot) {
+    if (snapshot.document) {
+      this.loadDocumentSnapshot(snapshot.document);
+    }
+    if (snapshot.state) {
+      return this.loadSessionStateSnapshot(snapshot.state);
+    }
+    return [];
+  }
+  listen(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
   }
   // Convert screen coords to page coords
   screenToPage(screenX, screenY) {
@@ -1407,6 +1571,11 @@ var Editor = class {
     const visible = shapes.filter((s) => !erasingIds.has(s.id));
     this.renderer.render(ctx, this.viewport, visible);
   }
+  emitChange() {
+    for (const listener of this.listeners) {
+      listener();
+    }
+  }
 };
 
 // src/tools/select/selectHelpers.ts
@@ -1684,6 +1853,7 @@ exports.decodeLastPoint = decodeLastPoint;
 exports.decodePathToPoints = decodePathToPoints;
 exports.decodePoints = decodePoints;
 exports.distance = distance;
+exports.documentSnapshotToRecords = documentSnapshotToRecords;
 exports.encodePoints = encodePoints;
 exports.getSelectionBoundsPage = getSelectionBoundsPage;
 exports.getShapeBounds = getShapeBounds2;
@@ -1696,6 +1866,7 @@ exports.padBounds = padBounds;
 exports.pageToScreen = pageToScreen;
 exports.panViewport = panViewport;
 exports.pointHitsShape = pointHitsShape;
+exports.recordsToDocumentSnapshot = recordsToDocumentSnapshot;
 exports.resolveThemeColor = resolveThemeColor;
 exports.rotatePoint = rotatePoint;
 exports.screenToPage = screenToPage;