@excalidraw/excalidraw 0.17.1-890ed9f → 0.17.1-96eeec5

package/dist/utils/bbox.d.ts

@@ -1,5 +1,5 @@
-import { Bounds } from "../excalidraw/element/bounds";
-import { Point } from "../excalidraw/types";
+import type { Bounds } from "../excalidraw/element/bounds";
+import type { Point } from "../excalidraw/types";
 export type LineSegment = [Point, Point];
 export declare function getBBox(line: LineSegment): Bounds;
 export declare function crossProduct(a: Point, b: Point): number;

package/dist/utils/collision.d.ts

@@ -1,4 +1,4 @@
-import { Point, Polygon, GeometricShape } from "./geometry/shape";
+import type { Point, Polygon, GeometricShape } from "./geometry/shape";
 export declare const isPointOnShape: (point: Point, shape: GeometricShape, tolerance?: number) => boolean;
 export declare const isPointInShape: (point: Point, shape: GeometricShape) => boolean;
 export declare const isPointInBounds: (point: Point, bounds: Polygon) => boolean;

package/dist/utils/export.d.ts

@@ -1,5 +1,5 @@
-import { AppState, BinaryFiles } from "../excalidraw/types";
-import { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted } from "../excalidraw/element/types";
+import type { AppState, BinaryFiles } from "../excalidraw/types";
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted } from "../excalidraw/element/types";
 import { MIME_TYPES } from "../excalidraw/constants";
 export { MIME_TYPES };
 type ExportOpts = {

package/dist/utils/geometry/geometry.d.ts

@@ -1,4 +1,4 @@
-import { Point, Line, Polygon, Curve, Ellipse, Polycurve, Polyline } from "./shape";
+import type { Point, Line, Polygon, Curve, Ellipse, Polycurve, Polyline } from "./shape";
 /**
  * utils
  */

package/dist/utils/geometry/shape.d.ts

@@ -11,7 +11,7 @@
  * also included in this file are methods for converting an Excalidraw element or a Drawable from roughjs
  * to pure shapes
  */
-import { ExcalidrawDiamondElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "../../excalidraw/element/types";
+import type { ElementsMap, ExcalidrawDiamondElement, ExcalidrawElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "../../excalidraw/element/types";
 import type { Drawable, Op } from "roughjs/bin/core";
 export type Point = [number, number];
 export type Vector = Point;
@@ -47,6 +47,7 @@ export type GeometricShape = {
 };
 type RectangularElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawFrameLikeElement | ExcalidrawEmbeddableElement | ExcalidrawImageElement | ExcalidrawIframeElement | ExcalidrawTextElement | ExcalidrawSelectionElement;
 export declare const getPolygonShape: (element: RectangularElement) => GeometricShape;
+export declare const getSelectionBoxShape: (element: ExcalidrawElement, elementsMap: ElementsMap, padding?: number) => GeometricShape;
 export declare const getEllipseShape: (element: ExcalidrawEllipseElement) => GeometricShape;
 export declare const getCurvePathOps: (shape: Drawable) => Op[];
 export declare const getCurveShape: (roughShape: Drawable, startingPoint: Point | undefined, angleInRadian: number, center: Point) => GeometricShape;

package/dist/utils/geometry/shape.js

@@ -11,6 +11,7 @@
  * also included in this file are methods for converting an Excalidraw element or a Drawable from roughjs
  * to pure shapes
  */
+import { getElementAbsoluteCoords } from "../../excalidraw/element";
 import { angleToDegrees, close, pointAdd, pointRotate } from "./geometry";
 import { pointsOnBezierCurves } from "points-on-curve";
 // polygon
@@ -42,6 +43,24 @@ export const getPolygonShape = (element) => {
         data,
     };
 };
+// return the selection box for an element, possibly rotated as well
+export const getSelectionBoxShape = (element, elementsMap, padding = 10) => {
+    let [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(element, elementsMap, true);
+    x1 -= padding;
+    x2 += padding;
+    y1 -= padding;
+    y2 += padding;
+    const angleInDegrees = angleToDegrees(element.angle);
+    const center = [cx, cy];
+    const topLeft = pointRotate([x1, y1], angleInDegrees, center);
+    const topRight = pointRotate([x2, y1], angleInDegrees, center);
+    const bottomLeft = pointRotate([x1, y2], angleInDegrees, center);
+    const bottomRight = pointRotate([x2, y2], angleInDegrees, center);
+    return {
+        type: "polygon",
+        data: [topLeft, topRight, bottomRight, bottomLeft],
+    };
+};
 // ellipse
 export const getEllipseShape = (element) => {
     const { width, height, angle, x, y } = element;

package/dist/utils/withinBounds.d.ts

@@ -1,5 +1,5 @@
 import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "../excalidraw/element/types";
-import { Bounds } from "../excalidraw/element/bounds";
+import type { Bounds } from "../excalidraw/element/bounds";
 type Element = NonDeletedExcalidrawElement;
 type Elements = readonly NonDeletedExcalidrawElement[];
 export declare const isElementInsideBBox: (element: Element, bbox: Bounds, eitherDirection?: boolean) => boolean;

package/history.ts

@@ -1,265 +1,210 @@
-import { AppState } from "./types";
-import { ExcalidrawElement } from "./element/types";
-import { isLinearElement } from "./element/typeChecks";
-import { deepCopyElement } from "./element/newElement";
-import { Mutable } from "./utility-types";
-
-export interface HistoryEntry {
-  appState: ReturnType<typeof clearAppStatePropertiesForHistory>;
-  elements: ExcalidrawElement[];
+import type { AppStateChange, ElementsChange } from "./change";
+import type { SceneElementsMap } from "./element/types";
+import { Emitter } from "./emitter";
+import type { Snapshot } from "./store";
+import type { AppState } from "./types";
+
+type HistoryStack = HistoryEntry[];
+
+export class HistoryChangedEvent {
+  constructor(
+    public readonly isUndoStackEmpty: boolean = true,
+    public readonly isRedoStackEmpty: boolean = true,
+  ) {}
 }
 
-interface DehydratedExcalidrawElement {
-  id: string;
-  versionNonce: number;
-}
+export class History {
+  public readonly onHistoryChangedEmitter = new Emitter<
+    [HistoryChangedEvent]
+  >();
 
-interface DehydratedHistoryEntry {
-  appState: string;
-  elements: DehydratedExcalidrawElement[];
-}
+  private readonly undoStack: HistoryStack = [];
+  private readonly redoStack: HistoryStack = [];
 
-const clearAppStatePropertiesForHistory = (appState: AppState) => {
-  return {
-    selectedElementIds: appState.selectedElementIds,
-    selectedGroupIds: appState.selectedGroupIds,
-    viewBackgroundColor: appState.viewBackgroundColor,
-    editingLinearElement: appState.editingLinearElement,
-    editingGroupId: appState.editingGroupId,
-    name: appState.name,
-  };
-};
-
-class History {
-  private elementCache = new Map<string, Map<number, ExcalidrawElement>>();
-  private recording: boolean = true;
-  private stateHistory: DehydratedHistoryEntry[] = [];
-  private redoStack: DehydratedHistoryEntry[] = [];
-  private lastEntry: HistoryEntry | null = null;
-
-  private hydrateHistoryEntry({
-    appState,
-    elements,
-  }: DehydratedHistoryEntry): HistoryEntry {
-    return {
-      appState: JSON.parse(appState),
-      elements: elements.map((dehydratedExcalidrawElement) => {
-        const element = this.elementCache
-          .get(dehydratedExcalidrawElement.id)
-          ?.get(dehydratedExcalidrawElement.versionNonce);
-        if (!element) {
-          throw new Error(
-            `Element not found: ${dehydratedExcalidrawElement.id}:${dehydratedExcalidrawElement.versionNonce}`,
-          );
-        }
-        return element;
-      }),
-    };
-  }
-
-  private dehydrateHistoryEntry({
-    appState,
-    elements,
-  }: HistoryEntry): DehydratedHistoryEntry {
-    return {
-      appState: JSON.stringify(appState),
-      elements: elements.map((element: ExcalidrawElement) => {
-        if (!this.elementCache.has(element.id)) {
-          this.elementCache.set(element.id, new Map());
-        }
-        const versions = this.elementCache.get(element.id)!;
-        if (!versions.has(element.versionNonce)) {
-          versions.set(element.versionNonce, deepCopyElement(element));
-        }
-        return {
-          id: element.id,
-          versionNonce: element.versionNonce,
-        };
-      }),
-    };
+  public get isUndoStackEmpty() {
+    return this.undoStack.length === 0;
   }
 
-  getSnapshotForTest() {
-    return {
-      recording: this.recording,
-      stateHistory: this.stateHistory.map((dehydratedHistoryEntry) =>
-        this.hydrateHistoryEntry(dehydratedHistoryEntry),
-      ),
-      redoStack: this.redoStack.map((dehydratedHistoryEntry) =>
-        this.hydrateHistoryEntry(dehydratedHistoryEntry),
-      ),
-    };
+  public get isRedoStackEmpty() {
+    return this.redoStack.length === 0;
   }
 
-  clear() {
-    this.stateHistory.length = 0;
+  public clear() {
+    this.undoStack.length = 0;
     this.redoStack.length = 0;
-    this.lastEntry = null;
-    this.elementCache.clear();
   }
 
-  private generateEntry = (
-    appState: AppState,
-    elements: readonly ExcalidrawElement[],
-  ): DehydratedHistoryEntry =>
-    this.dehydrateHistoryEntry({
-      appState: clearAppStatePropertiesForHistory(appState),
-      elements: elements.reduce((elements, element) => {
-        if (
-          isLinearElement(element) &&
-          appState.multiElement &&
-          appState.multiElement.id === element.id
-        ) {
-          // don't store multi-point arrow if still has only one point
-          if (
-            appState.multiElement &&
-            appState.multiElement.id === element.id &&
-            element.points.length < 2
-          ) {
-            return elements;
-          }
-
-          elements.push({
-            ...element,
-            // don't store last point if not committed
-            points:
-              element.lastCommittedPoint !==
-              element.points[element.points.length - 1]
-                ? element.points.slice(0, -1)
-                : element.points,
-          });
-        } else {
-          elements.push(element);
-        }
-        return elements;
-      }, [] as Mutable<typeof elements>),
-    });
-
-  shouldCreateEntry(nextEntry: HistoryEntry): boolean {
-    const { lastEntry } = this;
+  /**
+   * Record a local change which will go into the history
+   */
+  public record(
+    elementsChange: ElementsChange,
+    appStateChange: AppStateChange,
+  ) {
+    const entry = HistoryEntry.create(appStateChange, elementsChange);
+
+    if (!entry.isEmpty()) {
+      // we have the latest changes, no need to `applyLatest`, which is done within `History.push`
+      this.undoStack.push(entry.inverse());
+
+      if (!entry.elementsChange.isEmpty()) {
+        // don't reset redo stack on local appState changes,
+        // as a simple click (unselect) could lead to losing all the redo entries
+        // only reset on non empty elements changes!
+        this.redoStack.length = 0;
+      }
 
-    if (!lastEntry) {
-      return true;
+      this.onHistoryChangedEmitter.trigger(
+        new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
+      );
     }
+  }
 
-    if (nextEntry.elements.length !== lastEntry.elements.length) {
-      return true;
-    }
+  public undo(
+    elements: SceneElementsMap,
+    appState: AppState,
+    snapshot: Readonly<Snapshot>,
+  ) {
+    return this.perform(
+      elements,
+      appState,
+      snapshot,
+      () => History.pop(this.undoStack),
+      (entry: HistoryEntry) => History.push(this.redoStack, entry, elements),
+    );
+  }
 
-    // loop from right to left as changes are likelier to happen on new elements
-    for (let i = nextEntry.elements.length - 1; i > -1; i--) {
-      const prev = nextEntry.elements[i];
-      const next = lastEntry.elements[i];
-      if (
-        !prev ||
-        !next ||
-        prev.id !== next.id ||
-        prev.versionNonce !== next.versionNonce
-      ) {
-        return true;
-      }
-    }
+  public redo(
+    elements: SceneElementsMap,
+    appState: AppState,
+    snapshot: Readonly<Snapshot>,
+  ) {
+    return this.perform(
+      elements,
+      appState,
+      snapshot,
+      () => History.pop(this.redoStack),
+      (entry: HistoryEntry) => History.push(this.undoStack, entry, elements),
+    );
+  }
 
-    // note: this is safe because entry's appState is guaranteed no excess props
-    let key: keyof typeof nextEntry.appState;
-    for (key in nextEntry.appState) {
-      if (key === "editingLinearElement") {
-        if (
-          nextEntry.appState[key]?.elementId ===
-          lastEntry.appState[key]?.elementId
-        ) {
-          continue;
-        }
-      }
-      if (key === "selectedElementIds" || key === "selectedGroupIds") {
-        continue;
-      }
-      if (nextEntry.appState[key] !== lastEntry.appState[key]) {
-        return true;
+  private perform(
+    elements: SceneElementsMap,
+    appState: AppState,
+    snapshot: Readonly<Snapshot>,
+    pop: () => HistoryEntry | null,
+    push: (entry: HistoryEntry) => void,
+  ): [SceneElementsMap, AppState] | void {
+    try {
+      let historyEntry = pop();
+
+      if (historyEntry === null) {
+        return;
       }
-    }
 
-    return false;
-  }
+      let nextElements = elements;
+      let nextAppState = appState;
+      let containsVisibleChange = false;
+
+      // iterate through the history entries in case they result in no visible changes
+      while (historyEntry) {
+        try {
+          [nextElements, nextAppState, containsVisibleChange] =
+            historyEntry.applyTo(nextElements, nextAppState, snapshot);
+        } finally {
+          // make sure to always push / pop, even if the increment is corrupted
+          push(historyEntry);
+        }
 
-  pushEntry(appState: AppState, elements: readonly ExcalidrawElement[]) {
-    const newEntryDehydrated = this.generateEntry(appState, elements);
-    const newEntry: HistoryEntry = this.hydrateHistoryEntry(newEntryDehydrated);
+        if (containsVisibleChange) {
+          break;
+        }
 
-    if (newEntry) {
-      if (!this.shouldCreateEntry(newEntry)) {
-        return;
+        historyEntry = pop();
       }
 
-      this.stateHistory.push(newEntryDehydrated);
-      this.lastEntry = newEntry;
-      // As a new entry was pushed, we invalidate the redo stack
-      this.clearRedoStack();
+      return [nextElements, nextAppState];
+    } finally {
+      // trigger the history change event before returning completely
+      // also trigger it just once, no need doing so on each entry
+      this.onHistoryChangedEmitter.trigger(
+        new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
+      );
     }
   }
 
-  clearRedoStack() {
-    this.redoStack.splice(0, this.redoStack.length);
-  }
-
-  redoOnce(): HistoryEntry | null {
-    if (this.redoStack.length === 0) {
+  private static pop(stack: HistoryStack): HistoryEntry | null {
+    if (!stack.length) {
       return null;
     }
 
-    const entryToRestore = this.redoStack.pop();
+    const entry = stack.pop();
 
-    if (entryToRestore !== undefined) {
-      this.stateHistory.push(entryToRestore);
-      return this.hydrateHistoryEntry(entryToRestore);
+    if (entry !== undefined) {
+      return entry;
     }
 
     return null;
   }
 
-  undoOnce(): HistoryEntry | null {
-    if (this.stateHistory.length === 1) {
-      return null;
-    }
+  private static push(
+    stack: HistoryStack,
+    entry: HistoryEntry,
+    prevElements: SceneElementsMap,
+  ) {
+    const updatedEntry = entry.inverse().applyLatestChanges(prevElements);
+    return stack.push(updatedEntry);
+  }
+}
 
-    const currentEntry = this.stateHistory.pop();
+export class HistoryEntry {
+  private constructor(
+    public readonly appStateChange: AppStateChange,
+    public readonly elementsChange: ElementsChange,
+  ) {}
+
+  public static create(
+    appStateChange: AppStateChange,
+    elementsChange: ElementsChange,
+  ) {
+    return new HistoryEntry(appStateChange, elementsChange);
+  }
 
-    const entryToRestore = this.stateHistory[this.stateHistory.length - 1];
+  public inverse(): HistoryEntry {
+    return new HistoryEntry(
+      this.appStateChange.inverse(),
+      this.elementsChange.inverse(),
+    );
+  }
 
-    if (currentEntry !== undefined) {
-      this.redoStack.push(currentEntry);
-      return this.hydrateHistoryEntry(entryToRestore);
-    }
+  public applyTo(
+    elements: SceneElementsMap,
+    appState: AppState,
+    snapshot: Readonly<Snapshot>,
+  ): [SceneElementsMap, AppState, boolean] {
+    const [nextElements, elementsContainVisibleChange] =
+      this.elementsChange.applyTo(elements, snapshot.elements);
 
-    return null;
+    const [nextAppState, appStateContainsVisibleChange] =
+      this.appStateChange.applyTo(appState, nextElements);
+
+    const appliedVisibleChanges =
+      elementsContainVisibleChange || appStateContainsVisibleChange;
+
+    return [nextElements, nextAppState, appliedVisibleChanges];
   }
 
   /**
-   * Updates history's `lastEntry` to latest app state. This is necessary
-   *  when doing undo/redo which itself doesn't commit to history, but updates
-   *  app state in a way that would break `shouldCreateEntry` which relies on
-   *  `lastEntry` to reflect last comittable history state.
-   * We can't update `lastEntry` from within history when calling undo/redo
-   *  because the action potentially mutates appState/elements before storing
-   *  it.
+   * Apply latest (remote) changes to the history entry, creates new instance of `HistoryEntry`.
    */
-  setCurrentState(appState: AppState, elements: readonly ExcalidrawElement[]) {
-    this.lastEntry = this.hydrateHistoryEntry(
-      this.generateEntry(appState, elements),
-    );
-  }
+  public applyLatestChanges(elements: SceneElementsMap): HistoryEntry {
+    const updatedElementsChange =
+      this.elementsChange.applyLatestChanges(elements);
 
-  // Suspicious that this is called so many places. Seems error-prone.
-  resumeRecording() {
-    this.recording = true;
+    return HistoryEntry.create(this.appStateChange, updatedElementsChange);
   }
 
-  record(state: AppState, elements: readonly ExcalidrawElement[]) {
-    if (this.recording) {
-      this.pushEntry(state, elements);
-      this.recording = false;
-    }
+  public isEmpty(): boolean {
+    return this.appStateChange.isEmpty() && this.elementsChange.isEmpty();
   }
 }
-
-export default History;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.17.1-890ed9f",
+  "version": "0.17.1-96eeec5",
   "main": "./dist/prod/index.js",
   "type": "module",
   "module": "./dist/prod/index.js",
@@ -58,7 +58,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "0.3.0",
+    "@excalidraw/mermaid-to-excalidraw": "1.0.0",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",