@tsdraw/core 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -255,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";
@@ -1389,10 +1310,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();
@@ -1408,10 +1345,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)
     };
@@ -1422,6 +1371,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) {
@@ -1516,7 +1484,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 {
@@ -1554,12 +1524,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);
@@ -1576,6 +1626,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