@tsdraw/core 0.4.0 → 0.5.1

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") {
@@ -215,105 +255,26 @@ function zoomViewport(viewport, factor, centerX, centerY) {
 }
 
 // src/utils/colors.ts
+var DARK_COLORS = {
+  black: "#f0f0f0",
+  grey: "#aeb8c2",
+  "light-violet": "#cf6ef5",
+  violet: "#a83ce0",
+  blue: "#5b7dff",
+  "light-blue": "#4fb3ff",
+  yellow: "#f4b13a",
+  orange: "#ef7a24",
+  green: "#1fb27a",
+  "light-green": "#4ecb66",
+  "light-red": "#ff6f78",
+  red: "#f24343",
+  white: "#ffffff"
+};
 function resolveThemeColor(colorStyle, theme) {
-  const paletteColor = DEFAULT_COLORS[colorStyle];
-  if (!paletteColor) return colorStyle;
-  if (theme === "light") return paletteColor;
-  return invertAndHueRotate180(paletteColor);
-}
-function invertAndHueRotate180(color) {
-  const rgb = parseHexColor(color);
-  if (!rgb) return color;
-  const inverted = {
-    r: 255 - rgb.r,
-    g: 255 - rgb.g,
-    b: 255 - rgb.b
-  };
-  const hsl = rgbToHsl(inverted.r, inverted.g, inverted.b);
-  const rotated = hslToRgb((hsl.h + 180) % 360, hsl.s, hsl.l);
-  return rgbToHex(rotated.r, rotated.g, rotated.b);
-}
-function parseHexColor(color) {
-  const normalized = color.trim().toLowerCase();
-  if (!normalized.startsWith("#")) return null;
-  if (normalized.length === 4) {
-    return {
-      r: parseInt(normalized[1] + normalized[1], 16),
-      g: parseInt(normalized[2] + normalized[2], 16),
-      b: parseInt(normalized[3] + normalized[3], 16)
-    };
-  }
-  if (normalized.length !== 7) return null;
-  return {
-    r: parseInt(normalized.slice(1, 3), 16),
-    g: parseInt(normalized.slice(3, 5), 16),
-    b: parseInt(normalized.slice(5, 7), 16)
-  };
-}
-function rgbToHex(r, g, b) {
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function toHex(value) {
-  return Math.round(Math.max(0, Math.min(255, value))).toString(16).padStart(2, "0");
-}
-function rgbToHsl(r, g, b) {
-  const red = r / 255;
-  const green = g / 255;
-  const blue = b / 255;
-  const maxChannel = Math.max(red, green, blue);
-  const minChannel = Math.min(red, green, blue);
-  const delta = maxChannel - minChannel;
-  const lightness = (maxChannel + minChannel) / 2;
-  if (delta === 0) {
-    return { h: 0, s: 0, l: lightness };
-  }
-  const saturation = lightness > 0.5 ? delta / (2 - maxChannel - minChannel) : delta / (maxChannel + minChannel);
-  let hue = 0;
-  if (maxChannel === red) {
-    hue = ((green - blue) / delta + (green < blue ? 6 : 0)) * 60;
-  } else if (maxChannel === green) {
-    hue = ((blue - red) / delta + 2) * 60;
-  } else {
-    hue = ((red - green) / delta + 4) * 60;
-  }
-  return { h: hue, s: saturation, l: lightness };
-}
-function hslToRgb(h, s, l) {
-  if (s === 0) {
-    const channel = l * 255;
-    return { r: channel, g: channel, b: channel };
-  }
-  const chroma = (1 - Math.abs(2 * l - 1)) * s;
-  const hueSegment = h / 60;
-  const x = chroma * (1 - Math.abs(hueSegment % 2 - 1));
-  let red = 0;
-  let green = 0;
-  let blue = 0;
-  if (hueSegment >= 0 && hueSegment < 1) {
-    red = chroma;
-    green = x;
-  } else if (hueSegment < 2) {
-    red = x;
-    green = chroma;
-  } else if (hueSegment < 3) {
-    green = chroma;
-    blue = x;
-  } else if (hueSegment < 4) {
-    green = x;
-    blue = chroma;
-  } else if (hueSegment < 5) {
-    red = x;
-    blue = chroma;
-  } else {
-    red = chroma;
-    blue = x;
-  }
-  const match = l - chroma / 2;
-  return {
-    r: (red + match) * 255,
-    g: (green + match) * 255,
-    b: (blue + match) * 255
-  };
+  const lightThemeColor = DEFAULT_COLORS[colorStyle];
+  if (!lightThemeColor) return colorStyle;
+  if (theme === "light") return lightThemeColor;
+  return DARK_COLORS[colorStyle] ?? lightThemeColor;
 }
 var CanvasRenderer = class {
   theme = "light";
@@ -1290,10 +1251,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 +1328,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 +1342,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 +1403,7 @@ var Editor = class {
   }
   setCurrentTool(id) {
     this.tools.setCurrentTool(id);
+    this.emitChange();
   }
   getCurrentToolId() {
     return this.tools.getCurrentToolId();
@@ -1391,10 +1413,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 +1492,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 +1774,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 +1787,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;