@dwelle/excalidraw 0.5.0-da1c822 → 0.5.0-e56eec7

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

@@ -0,0 +1,56 @@
+/**
+ * this file defines pure geometric shapes
+ *
+ * for instance, a cubic bezier curve is specified by its four control points and
+ * an ellipse is defined by its center, angle, semi major axis and semi minor axis
+ * (but in semi-width and semi-height so it's more relevant to Excalidraw)
+ *
+ * the idea with pure shapes is so that we can provide collision and other geoemtric methods not depending on
+ * the specifics of roughjs or elements in Excalidraw; instead, we can focus on the pure shapes themselves
+ *
+ * also included in this file are methods for converting an Excalidraw element or a Drawable from roughjs
+ * to pure shapes
+ */
+import { 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;
+export type Line = [Point, Point];
+export type Polyline = Line[];
+export type Curve = [Point, Point, Point, Point];
+export type Polycurve = Curve[];
+export type Polygon = Point[];
+export type Ellipse = {
+    center: Point;
+    angle: number;
+    halfWidth: number;
+    halfHeight: number;
+};
+export type GeometricShape = {
+    type: "line";
+    data: Line;
+} | {
+    type: "polygon";
+    data: Polygon;
+} | {
+    type: "curve";
+    data: Curve;
+} | {
+    type: "ellipse";
+    data: Ellipse;
+} | {
+    type: "polyline";
+    data: Polyline;
+} | {
+    type: "polycurve";
+    data: Polycurve;
+};
+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;
+export declare const getFreedrawShape: (element: ExcalidrawFreeDrawElement, center: Point, isClosed?: boolean) => GeometricShape;
+export declare const getClosedCurveShape: (element: ExcalidrawLinearElement, roughShape: Drawable, startingPoint: Point | undefined, angleInRadian: number, center: Point) => GeometricShape;
+export {};

package/dist/utils/geometry/shape.js

@@ -0,0 +1,168 @@
+/**
+ * this file defines pure geometric shapes
+ *
+ * for instance, a cubic bezier curve is specified by its four control points and
+ * an ellipse is defined by its center, angle, semi major axis and semi minor axis
+ * (but in semi-width and semi-height so it's more relevant to Excalidraw)
+ *
+ * the idea with pure shapes is so that we can provide collision and other geoemtric methods not depending on
+ * the specifics of roughjs or elements in Excalidraw; instead, we can focus on the pure shapes themselves
+ *
+ * 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
+export const getPolygonShape = (element) => {
+    const { angle, width, height, x, y } = element;
+    const angleInDegrees = angleToDegrees(angle);
+    const cx = x + width / 2;
+    const cy = y + height / 2;
+    const center = [cx, cy];
+    let data = [];
+    if (element.type === "diamond") {
+        data = [
+            pointRotate([cx, y], angleInDegrees, center),
+            pointRotate([x + width, cy], angleInDegrees, center),
+            pointRotate([cx, y + height], angleInDegrees, center),
+            pointRotate([x, cy], angleInDegrees, center),
+        ];
+    }
+    else {
+        data = [
+            pointRotate([x, y], angleInDegrees, center),
+            pointRotate([x + width, y], angleInDegrees, center),
+            pointRotate([x + width, y + height], angleInDegrees, center),
+            pointRotate([x, y + height], angleInDegrees, center),
+        ];
+    }
+    return {
+        type: "polygon",
+        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;
+    return {
+        type: "ellipse",
+        data: {
+            center: [x + width / 2, y + height / 2],
+            angle,
+            halfWidth: width / 2,
+            halfHeight: height / 2,
+        },
+    };
+};
+export const getCurvePathOps = (shape) => {
+    for (const set of shape.sets) {
+        if (set.type === "path") {
+            return set.ops;
+        }
+    }
+    return shape.sets[0].ops;
+};
+// linear
+export const getCurveShape = (roughShape, startingPoint = [0, 0], angleInRadian, center) => {
+    const transform = (p) => pointRotate([p[0] + startingPoint[0], p[1] + startingPoint[1]], angleToDegrees(angleInRadian), center);
+    const ops = getCurvePathOps(roughShape);
+    const polycurve = [];
+    let p0 = [0, 0];
+    for (const op of ops) {
+        if (op.op === "move") {
+            p0 = transform(op.data);
+        }
+        if (op.op === "bcurveTo") {
+            const p1 = transform([op.data[0], op.data[1]]);
+            const p2 = transform([op.data[2], op.data[3]]);
+            const p3 = transform([op.data[4], op.data[5]]);
+            polycurve.push([p0, p1, p2, p3]);
+            p0 = p3;
+        }
+    }
+    return {
+        type: "polycurve",
+        data: polycurve,
+    };
+};
+const polylineFromPoints = (points) => {
+    let previousPoint = points[0];
+    const polyline = [];
+    for (let i = 1; i < points.length; i++) {
+        const nextPoint = points[i];
+        polyline.push([previousPoint, nextPoint]);
+        previousPoint = nextPoint;
+    }
+    return polyline;
+};
+export const getFreedrawShape = (element, center, isClosed = false) => {
+    const angle = angleToDegrees(element.angle);
+    const transform = (p) => pointRotate(pointAdd(p, [element.x, element.y]), angle, center);
+    const polyline = polylineFromPoints(element.points.map((p) => transform(p)));
+    return isClosed
+        ? {
+            type: "polygon",
+            data: close(polyline.flat()),
+        }
+        : {
+            type: "polyline",
+            data: polyline,
+        };
+};
+export const getClosedCurveShape = (element, roughShape, startingPoint = [0, 0], angleInRadian, center) => {
+    const transform = (p) => pointRotate([p[0] + startingPoint[0], p[1] + startingPoint[1]], angleToDegrees(angleInRadian), center);
+    if (element.roundness === null) {
+        return {
+            type: "polygon",
+            data: close(element.points.map((p) => transform(p))),
+        };
+    }
+    const ops = getCurvePathOps(roughShape);
+    const points = [];
+    let odd = false;
+    for (const operation of ops) {
+        if (operation.op === "move") {
+            odd = !odd;
+            if (odd) {
+                points.push([operation.data[0], operation.data[1]]);
+            }
+        }
+        else if (operation.op === "bcurveTo") {
+            if (odd) {
+                points.push([operation.data[0], operation.data[1]]);
+                points.push([operation.data[2], operation.data[3]]);
+                points.push([operation.data[4], operation.data[5]]);
+            }
+        }
+        else if (operation.op === "lineTo") {
+            if (odd) {
+                points.push([operation.data[0], operation.data[1]]);
+            }
+        }
+    }
+    const polygonPoints = pointsOnBezierCurves(points, 10, 5).map((p) => transform(p));
+    return {
+        type: "polygon",
+        data: polygonPoints,
+    };
+};

package/history.ts

@@ -1,265 +1,210 @@
+import { AppStateChange, ElementsChange } from "./change";
+import { SceneElementsMap } from "./element/types";
+import { Emitter } from "./emitter";
+import { Snapshot } from "./store";
 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[];
-}
 
-interface DehydratedExcalidrawElement {
-  id: string;
-  versionNonce: number;
-}
+type HistoryStack = HistoryEntry[];
 
-interface DehydratedHistoryEntry {
-  appState: string;
-  elements: DehydratedExcalidrawElement[];
+export class HistoryChangedEvent {
+  constructor(
+    public readonly isUndoStackEmpty: boolean = true,
+    public readonly isRedoStackEmpty: boolean = true,
+  ) {}
 }
 
-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;
-      }),
-    };
-  }
+export class History {
+  public readonly onHistoryChangedEmitter = new Emitter<
+    [HistoryChangedEvent]
+  >();
 
-  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,
-        };
-      }),
-    };
+  private readonly undoStack: HistoryStack = [];
+  private readonly redoStack: HistoryStack = [];
+
+  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": "@dwelle/excalidraw",
-  "version": "0.5.0-da1c822",
+  "version": "0.5.0-e56eec7",
   "type": "module",
   "main": "./dist/prod/index.js",
   "module": "./dist/prod/index.js",
@@ -49,6 +49,7 @@
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
+    "fractional-indexing": "3.2.0",
     "fuzzy": "0.1.3",
     "image-blob-reduce": "3.0.1",
     "jotai": "1.13.1",