@excalidraw/excalidraw 0.18.0-a5d6939 → 0.18.0-a8acc82

package/dist/types/excalidraw/types.d.ts

@@ -1,9 +1,10 @@
 import type { IMAGE_MIME_TYPES, UserIdleState, throttleRAF, MIME_TYPES } from "@excalidraw/common";
-import type { SuggestedBinding } from "@excalidraw/element/binding";
-import type { LinearElementEditor } from "@excalidraw/element/linearElementEditor";
-import type { MaybeTransformHandleType } from "@excalidraw/element/transformHandles";
-import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement } from "@excalidraw/element/types";
+import type { SuggestedBinding } from "@excalidraw/element";
+import type { LinearElementEditor } from "@excalidraw/element";
+import type { MaybeTransformHandleType } from "@excalidraw/element";
+import type { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, Theme, StrokeRoundness, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeLikeElement, OrderedExcalidrawElement, ExcalidrawNonSelectionElement } from "@excalidraw/element/types";
 import type { Merge, MaybePromise, ValueOf, MakeBrand } from "@excalidraw/common/utility-types";
+import type { CaptureUpdateActionType, DurableIncrement, EphemeralIncrement } from "@excalidraw/element";
 import type { Action } from "./actions/types";
 import type { Spreadsheet } from "./charts";
 import type { ClipboardData } from "./clipboard";
@@ -12,7 +13,6 @@ import type Library from "./data/library";
 import type { FileSystemHandle } from "./data/filesystem";
 import type { ContextMenuItems } from "./components/ContextMenu";
 import type { SnapLine } from "./snapping";
-import type { CaptureUpdateActionType } from "./store";
 import type { ImportedDataState } from "./data/types";
 import type { Language } from "./i18n";
 import type { isOverScrollBars } from "./scene/scrollbars";
@@ -113,7 +113,6 @@ type _CommonCanvasAppState = {
     offsetLeft: AppState["offsetLeft"];
     offsetTop: AppState["offsetTop"];
     theme: AppState["theme"];
-    pendingImageElementId: AppState["pendingImageElementId"];
 };
 export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
@@ -130,7 +129,6 @@ export type StaticCanvasAppState = Readonly<_CommonCanvasAppState & {
 }>;
 export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     activeEmbeddable: AppState["activeEmbeddable"];
-    editingLinearElement: AppState["editingLinearElement"];
     selectionElement: AppState["selectionElement"];
     selectedGroupIds: AppState["selectedGroupIds"];
     selectedLinearElement: AppState["selectedLinearElement"];
@@ -146,6 +144,7 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     isCropping: AppState["isCropping"];
     croppingElementId: AppState["croppingElementId"];
     searchMatches: AppState["searchMatches"];
+    activeLockedId: AppState["activeLockedId"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
 export type ObservedStandaloneAppState = {
@@ -156,9 +155,13 @@ export type ObservedElementsAppState = {
     editingGroupId: AppState["editingGroupId"];
     selectedElementIds: AppState["selectedElementIds"];
     selectedGroupIds: AppState["selectedGroupIds"];
-    editingLinearElementId: LinearElementEditor["elementId"] | null;
-    selectedLinearElementId: LinearElementEditor["elementId"] | null;
+    selectedLinearElement: {
+        elementId: LinearElementEditor["elementId"];
+        isEditing: boolean;
+    } | null;
     croppingElementId: AppState["croppingElementId"];
+    lockedMultiSelections: AppState["lockedMultiSelections"];
+    activeLockedId: AppState["activeLockedId"];
 };
 export interface AppState {
     contextMenu: {
@@ -209,7 +212,6 @@ export interface AppState {
      * set when a new text is created or when an existing text is being edited
      */
     editingTextElement: NonDeletedExcalidrawElement | null;
-    editingLinearElement: LinearElementEditor | null;
     activeTool: {
         /**
          * indicates a previous tool we should revert back to if we deselect the
@@ -250,7 +252,7 @@ export interface AppState {
     isRotating: boolean;
     zoom: Zoom;
     openMenu: "canvas" | "shape" | null;
-    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | null;
+    openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | "fontFamily" | "compactTextProperties" | "compactStrokeStyles" | "compactOtherProperties" | "compactArrowProperties" | null;
     openSidebar: {
         name: SidebarName;
         tab?: SidebarTabName;
@@ -324,8 +326,6 @@ export interface AppState {
         shown: true;
         data: Spreadsheet;
     };
-    /** imageElement waiting to be placed on canvas */
-    pendingImageElementId: ExcalidrawImageElement["id"] | null;
     showHyperlinkPopup: false | "info" | "editor";
     selectedLinearElement: LinearElementEditor | null;
     snapLines: readonly SnapLine[];
@@ -341,9 +341,20 @@ export interface AppState {
     /** image cropping */
     isCropping: boolean;
     croppingElementId: ExcalidrawElement["id"] | null;
-    searchMatches: readonly SearchMatch[];
+    /** null if no search matches found / search closed */
+    searchMatches: Readonly<{
+        focusedId: ExcalidrawElement["id"] | null;
+        matches: readonly SearchMatch[];
+    }> | null;
+    /** the locked element/group that's active and shows unlock popup */
+    activeLockedId: string | null;
+    lockedMultiSelections: {
+        [groupId: string]: true;
+    };
+    /** properties sidebar mode - determines whether to show compact or complete sidebar */
+    stylesPanelMode: "compact" | "full";
 }
-type SearchMatch = {
+export type SearchMatch = {
     id: string;
     focus: boolean;
     matchedLines: {
@@ -351,6 +362,7 @@ type SearchMatch = {
         offsetY: number;
         width: number;
         height: number;
+        showOnCanvas: boolean;
     }[];
 };
 export type UIAppState = Omit<AppState, "suggestedBindings" | "startBoundElement" | "cursorButton" | "scrollX" | "scrollY">;
@@ -403,6 +415,7 @@ export type OnUserFollowedPayload = {
 };
 export interface ExcalidrawProps {
     onChange?: (elements: readonly OrderedExcalidrawElement[], appState: AppState, files: BinaryFiles) => void;
+    onIncrement?: (event: DurableIncrement | EphemeralIncrement) => void;
     initialData?: (() => MaybePromise<ExcalidrawInitialDataState | null>) | MaybePromise<ExcalidrawInitialDataState | null>;
     excalidrawAPI?: (api: ExcalidrawImperativeAPI) => void;
     isCollaborating?: boolean;
@@ -459,6 +472,7 @@ export interface ExcalidrawProps {
     renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
     aiEnabled?: boolean;
     showDeprecatedFonts?: boolean;
+    renderScrollbars?: boolean;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];
@@ -544,6 +558,8 @@ export type AppClassProperties = {
     visibleElements: App["visibleElements"];
     excalidrawContainerValue: App["excalidrawContainerValue"];
     onPointerUpEmitter: App["onPointerUpEmitter"];
+    updateEditorAtom: App["updateEditorAtom"];
+    defaultSelectionTool: "selection" | "lasso";
 };
 export type PointerDownState = Readonly<{
     origin: Readonly<{
@@ -591,6 +607,7 @@ export type PointerDownState = Readonly<{
             x: number;
             y: number;
         };
+        blockDragging: boolean;
     };
     eventListeners: {
         onMove: null | ReturnType<typeof throttleRAF>;
@@ -605,9 +622,12 @@ export type PointerDownState = Readonly<{
 export type UnsubscribeCallback = () => void;
 export interface ExcalidrawImperativeAPI {
     updateScene: InstanceType<typeof App>["updateScene"];
+    applyDeltas: InstanceType<typeof App>["applyDeltas"];
+    mutateElement: InstanceType<typeof App>["mutateElement"];
     updateLibrary: InstanceType<typeof Library>["updateLibrary"];
     resetScene: InstanceType<typeof App>["resetScene"];
     getSceneElementsIncludingDeleted: InstanceType<typeof App>["getSceneElementsIncludingDeleted"];
+    getSceneElementsMapIncludingDeleted: InstanceType<typeof App>["getSceneElementsMapIncludingDeleted"];
     history: {
         clear: InstanceType<typeof App>["resetHistory"];
     };
@@ -632,6 +652,7 @@ export interface ExcalidrawImperativeAPI {
      */
     updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
     onChange: (callback: (elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles) => void) => UnsubscribeCallback;
+    onIncrement: (callback: (event: DurableIncrement | EphemeralIncrement) => void) => UnsubscribeCallback;
     onPointerDown: (callback: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState, event: React.PointerEvent<HTMLElement>) => void) => UnsubscribeCallback;
     onPointerUp: (callback: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState, event: PointerEvent) => void) => UnsubscribeCallback;
     onScrollChange: (callback: (scrollX: number, scrollY: number, zoom: Zoom) => void) => UnsubscribeCallback;

package/dist/types/excalidraw/wysiwyg/textWysiwyg.d.ts

@@ -1,5 +1,6 @@
 import type { ExcalidrawElement, ExcalidrawTextElement } from "@excalidraw/element/types";
 import type App from "../components/App";
+type SubmitHandler = () => void;
 export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect, }: {
     id: ExcalidrawElement["id"];
     /**
@@ -19,4 +20,5 @@ export declare const textWysiwyg: ({ id, onChange, onSubmit, getViewportCoords,
     excalidrawContainer: HTMLDivElement | null;
     app: App;
     autoSelect?: boolean | undefined;
-}) => void;
+}) => SubmitHandler;
+export {};

package/dist/types/math/src/angle.d.ts

@@ -15,3 +15,5 @@ export declare function radiansToDegrees(degrees: Radians): Degrees;
  * @returns TRUE if the provided angle is a right angle
  */
 export declare function isRightAngleRads(rads: Radians): boolean;
+export declare function radiansBetweenAngles(a: Radians, min: Radians, max: Radians): boolean;
+export declare function radiansDifference(a: Radians, b: Radians): Radians;

package/dist/types/math/src/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const PRECISION = 0.0001;
+export declare const LegendreGaussN24TValues: number[];
+export declare const LegendreGaussN24CValues: number[];

package/dist/types/math/src/curve.d.ts

@@ -8,6 +8,7 @@ import type { Curve, GlobalPoint, LineSegment, LocalPoint } from "./types";
  * @returns
  */
 export declare function curve<Point extends GlobalPoint | LocalPoint>(a: Point, b: Point, c: Point, d: Point): Curve<Point>;
+export declare const bezierEquation: <Point extends GlobalPoint | LocalPoint>(c: Curve<Point>, t: number) => Point;
 /**
  * Computes the intersection between a cubic spline and a line segment.
  */
@@ -38,3 +39,36 @@ export declare function curvePointDistance<Point extends GlobalPoint | LocalPoin
  * Determines if the parameter is a Curve
  */
 export declare function isCurve<P extends GlobalPoint | LocalPoint>(v: unknown): v is Curve<P>;
+export declare function curveTangent<Point extends GlobalPoint | LocalPoint>([p0, p1, p2, p3]: Curve<Point>, t: number): import("./types").Vector;
+export declare function curveCatmullRomQuadraticApproxPoints(points: GlobalPoint[], tension?: number): [GlobalPoint, GlobalPoint][] | undefined;
+export declare function curveCatmullRomCubicApproxPoints<Point extends GlobalPoint | LocalPoint>(points: Point[], tension?: number): Curve<Point>[] | undefined;
+export declare function curveOffsetPoints([p0, p1, p2, p3]: Curve<GlobalPoint>, offset: number, steps?: number): GlobalPoint[];
+export declare function offsetPointsForQuadraticBezier(p0: GlobalPoint, p1: GlobalPoint, p2: GlobalPoint, offsetDist: number, steps?: number): GlobalPoint[];
+/**
+ * Implementation based on Legendre-Gauss quadrature for more accurate arc
+ * length calculation.
+ *
+ * Reference: https://pomax.github.io/bezierinfo/#arclength
+ *
+ * @param c The curve to calculate the length of
+ * @returns The approximated length of the curve
+ */
+export declare function curveLength<P extends GlobalPoint | LocalPoint>(c: Curve<P>): number;
+/**
+ * Calculates the curve length from t=0 to t=parameter using the same
+ * Legendre-Gauss quadrature method used in curveLength
+ *
+ * @param c The curve to calculate the partial length for
+ * @param t The parameter value (0 to 1) to calculate length up to
+ * @returns The length of the curve from beginning to parameter t
+ */
+export declare function curveLengthAtParameter<P extends GlobalPoint | LocalPoint>(c: Curve<P>, t: number): number;
+/**
+ * Calculates the point at a specific percentage of a curve's total length
+ * using binary search for improved efficiency and accuracy.
+ *
+ * @param c The curve to calculate point on
+ * @param percent A value between 0 and 1 representing the percentage of the curve's length
+ * @returns The point at the specified percentage of curve length
+ */
+export declare function curvePointAtLength<P extends GlobalPoint | LocalPoint>(c: Curve<P>, percent: number): P;

package/dist/types/math/src/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./angle";
 export * from "./curve";
+export * from "./ellipse";
 export * from "./line";
 export * from "./point";
 export * from "./polygon";

package/dist/types/math/src/point.d.ts

@@ -43,7 +43,7 @@ export declare function isPoint(p: unknown): p is LocalPoint | GlobalPoint;
  * @param b Point The second point to compare
  * @returns TRUE if the points are sufficiently close to each other
  */
-export declare function pointsEqual<Point extends GlobalPoint | LocalPoint>(a: Point, b: Point): boolean;
+export declare function pointsEqual<Point extends GlobalPoint | LocalPoint>(a: Point, b: Point, tolerance?: number): boolean;
 /**
  * Rotate a point by [angle] radians.
  *

package/dist/types/math/src/rectangle.d.ts

@@ -1,3 +1,5 @@
 import type { GlobalPoint, LineSegment, LocalPoint, Rectangle } from "./types";
 export declare function rectangle<P extends GlobalPoint | LocalPoint>(topLeft: P, bottomRight: P): Rectangle<P>;
+export declare function rectangleFromNumberSequence<Point extends LocalPoint | GlobalPoint>(minX: number, minY: number, maxX: number, maxY: number): Rectangle<Point>;
 export declare function rectangleIntersectLineSegment<Point extends LocalPoint | GlobalPoint>(r: Rectangle<Point>, l: LineSegment<Point>): Point[];
+export declare function rectangleIntersectRectangle<Point extends LocalPoint | GlobalPoint>(rectangle1: Rectangle<Point>, rectangle2: Rectangle<Point>): boolean;

package/dist/types/math/src/segment.d.ts

@@ -37,3 +37,4 @@ export declare const distanceToLineSegment: <Point extends GlobalPoint | LocalPo
  * @returns
  */
 export declare function lineSegmentIntersectionPoints<Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, s: LineSegment<Point>, threshold?: number): Point | null;
+export declare function lineSegmentsDistance<Point extends GlobalPoint | LocalPoint>(s1: LineSegment<Point>, s2: LineSegment<Point>): number;

package/dist/types/math/src/vector.d.ts

@@ -12,9 +12,11 @@ export declare function vector(x: number, y: number, originX?: number, originY?:
  *
  * @param p The point to turn into a vector
  * @param origin The origin point in a given coordiante system
- * @returns The created vector from the point and the origin
+ * @param threshold The threshold to consider the vector as 'undefined'
+ * @param defaultValue The default value to return if the vector is 'undefined'
+ * @returns The created vector from the point and the origin or default
  */
-export declare function vectorFromPoint<Point extends GlobalPoint | LocalPoint>(p: Point, origin?: Point): Vector;
+export declare function vectorFromPoint<Point extends GlobalPoint | LocalPoint>(p: Point, origin?: Point, threshold?: number, defaultValue?: Vector): Vector;
 /**
  * Cross product is a binary operation on two vectors in 2D space.
  * It results in a vector that is perpendicular to both vectors.
@@ -86,3 +88,7 @@ export declare function vectorMagnitude(v: Vector): number;
  * @returns The new normalized vector
  */
 export declare const vectorNormalize: (v: Vector) => Vector;
+/**
+ * Calculate the right-hand normal of the vector.
+ */
+export declare const vectorNormal: (v: Vector) => Vector;

package/dist/types/utils/src/bbox.d.ts

@@ -1,5 +1,5 @@
 import { type GlobalPoint, type LocalPoint } from "@excalidraw/math";
-import type { Bounds } from "@excalidraw/element/bounds";
+import type { Bounds } from "@excalidraw/element";
 export type LineSegment<P extends LocalPoint | GlobalPoint> = [P, P];
 export declare function getBBox<P extends LocalPoint | GlobalPoint>(line: LineSegment<P>): Bounds;
 export declare function doBBoxesIntersect(a: Bounds, b: Bounds): boolean;

package/dist/types/utils/src/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
-export { getCommonBounds } from "@excalidraw/element/bounds";
+export { getCommonBounds } from "@excalidraw/element";

package/dist/types/utils/src/withinBounds.d.ts

@@ -1,4 +1,4 @@
-import type { Bounds } from "@excalidraw/element/bounds";
+import type { Bounds } from "@excalidraw/element";
 import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/element/types";
 type Element = NonDeletedExcalidrawElement;
 type Elements = readonly NonDeletedExcalidrawElement[];

package/history.ts

@@ -1,12 +1,84 @@
-import type { SceneElementsMap } from "@excalidraw/element/types";
+import { Emitter } from "@excalidraw/common";
+
+import {
+  CaptureUpdateAction,
+  StoreChange,
+  StoreDelta,
+} from "@excalidraw/element";
+
+import type { StoreSnapshot, Store } from "@excalidraw/element";
 
-import { Emitter } from "./emitter";
+import type { SceneElementsMap } from "@excalidraw/element/types";
 
-import type { AppStateChange, ElementsChange } from "./change";
-import type { Snapshot } from "./store";
 import type { AppState } from "./types";
 
-type HistoryStack = HistoryEntry[];
+export class HistoryDelta extends StoreDelta {
+  /**
+   * Apply the delta to the passed elements and appState, does not modify the snapshot.
+   */
+  public applyTo(
+    elements: SceneElementsMap,
+    appState: AppState,
+    snapshot: StoreSnapshot,
+  ): [SceneElementsMap, AppState, boolean] {
+    const [nextElements, elementsContainVisibleChange] = this.elements.applyTo(
+      elements,
+      // used to fallback into local snapshot in case we couldn't apply the delta
+      // due to a missing (force deleted) elements in the scene
+      snapshot.elements,
+      // we don't want to apply the `version` and `versionNonce` properties for history
+      // as we always need to end up with a new version due to collaboration,
+      // approaching each undo / redo as a new user action
+      {
+        excludedProperties: new Set(["version", "versionNonce"]),
+      },
+    );
+
+    const [nextAppState, appStateContainsVisibleChange] = this.appState.applyTo(
+      appState,
+      nextElements,
+    );
+
+    const appliedVisibleChanges =
+      elementsContainVisibleChange || appStateContainsVisibleChange;
+
+    return [nextElements, nextAppState, appliedVisibleChanges];
+  }
+
+  /**
+   * Overriding once to avoid type casting everywhere.
+   */
+  public static override calculate(
+    prevSnapshot: StoreSnapshot,
+    nextSnapshot: StoreSnapshot,
+  ) {
+    return super.calculate(prevSnapshot, nextSnapshot) as HistoryDelta;
+  }
+
+  /**
+   * Overriding once to avoid type casting everywhere.
+   */
+  public static override inverse(delta: StoreDelta): HistoryDelta {
+    return super.inverse(delta) as HistoryDelta;
+  }
+
+  /**
+   * Overriding once to avoid type casting everywhere.
+   */
+  public static override applyLatestChanges(
+    delta: StoreDelta,
+    prevElements: SceneElementsMap,
+    nextElements: SceneElementsMap,
+    modifierOptions?: "deleted" | "inserted",
+  ) {
+    return super.applyLatestChanges(
+      delta,
+      prevElements,
+      nextElements,
+      modifierOptions,
+    ) as HistoryDelta;
+  }
+}
 
 export class HistoryChangedEvent {
   constructor(
@@ -20,8 +92,8 @@ export class History {
     [HistoryChangedEvent]
   >();
 
-  private readonly undoStack: HistoryStack = [];
-  private readonly redoStack: HistoryStack = [];
+  public readonly undoStack: HistoryDelta[] = [];
+  public readonly redoStack: HistoryDelta[] = [];
 
   public get isUndoStackEmpty() {
     return this.undoStack.length === 0;
@@ -31,98 +103,119 @@ export class History {
     return this.redoStack.length === 0;
   }
 
+  constructor(private readonly store: Store) {}
+
   public clear() {
     this.undoStack.length = 0;
     this.redoStack.length = 0;
   }
 
   /**
-   * Record a local change which will go into the history
+   * Record a non-empty local durable increment, which will go into the undo stack..
+   * Do not re-record history entries, which were already pushed to undo / redo stack, as part of history action.
    */
-  public record(
-    elementsChange: ElementsChange,
-    appStateChange: AppStateChange,
-  ) {
-    const entry = HistoryEntry.create(appStateChange, elementsChange);
+  public record(delta: StoreDelta) {
+    if (delta.isEmpty() || delta instanceof HistoryDelta) {
+      return;
+    }
 
-    if (!entry.isEmpty()) {
-      // we have the latest changes, no need to `applyLatest`, which is done within `History.push`
-      this.undoStack.push(entry.inverse());
+    // construct history entry, so once it's emitted, it's not recorded again
+    const historyDelta = HistoryDelta.inverse(delta);
 
-      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;
-      }
+    this.undoStack.push(historyDelta);
 
-      this.onHistoryChangedEmitter.trigger(
-        new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
-      );
+    if (!historyDelta.elements.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;
     }
+
+    this.onHistoryChangedEmitter.trigger(
+      new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
+    );
   }
 
-  public undo(
-    elements: SceneElementsMap,
-    appState: AppState,
-    snapshot: Readonly<Snapshot>,
-  ) {
+  public undo(elements: SceneElementsMap, appState: AppState) {
     return this.perform(
       elements,
       appState,
-      snapshot,
       () => History.pop(this.undoStack),
-      (entry: HistoryEntry) => History.push(this.redoStack, entry, elements),
+      (entry: HistoryDelta) => History.push(this.redoStack, entry),
     );
   }
 
-  public redo(
-    elements: SceneElementsMap,
-    appState: AppState,
-    snapshot: Readonly<Snapshot>,
-  ) {
+  public redo(elements: SceneElementsMap, appState: AppState) {
     return this.perform(
       elements,
       appState,
-      snapshot,
       () => History.pop(this.redoStack),
-      (entry: HistoryEntry) => History.push(this.undoStack, entry, elements),
+      (entry: HistoryDelta) => History.push(this.undoStack, entry),
     );
   }
 
   private perform(
     elements: SceneElementsMap,
     appState: AppState,
-    snapshot: Readonly<Snapshot>,
-    pop: () => HistoryEntry | null,
-    push: (entry: HistoryEntry) => void,
+    pop: () => HistoryDelta | null,
+    push: (entry: HistoryDelta) => void,
   ): [SceneElementsMap, AppState] | void {
     try {
-      let historyEntry = pop();
+      let historyDelta = pop();
 
-      if (historyEntry === null) {
+      if (historyDelta === null) {
         return;
       }
 
+      const action = CaptureUpdateAction.IMMEDIATELY;
+
+      let prevSnapshot = this.store.snapshot;
+
       let nextElements = elements;
       let nextAppState = appState;
       let containsVisibleChange = false;
 
       // iterate through the history entries in case they result in no visible changes
-      while (historyEntry) {
+      while (historyDelta) {
         try {
           [nextElements, nextAppState, containsVisibleChange] =
-            historyEntry.applyTo(nextElements, nextAppState, snapshot);
+            historyDelta.applyTo(nextElements, nextAppState, prevSnapshot);
+
+          const prevElements = prevSnapshot.elements;
+          const nextSnapshot = prevSnapshot.maybeClone(
+            action,
+            nextElements,
+            nextAppState,
+          );
+
+          const change = StoreChange.create(prevSnapshot, nextSnapshot);
+          const delta = HistoryDelta.applyLatestChanges(
+            historyDelta,
+            prevElements,
+            nextElements,
+          );
+
+          if (!delta.isEmpty()) {
+            // schedule immediate capture, so that it's emitted for the sync purposes
+            this.store.scheduleMicroAction({
+              action,
+              change,
+              delta,
+            });
+
+            historyDelta = delta;
+          }
+
+          prevSnapshot = nextSnapshot;
         } finally {
-          // make sure to always push / pop, even if the increment is corrupted
-          push(historyEntry);
+          push(historyDelta);
         }
 
         if (containsVisibleChange) {
           break;
         }
 
-        historyEntry = pop();
+        historyDelta = pop();
       }
 
       return [nextElements, nextAppState];
@@ -135,7 +228,7 @@ export class History {
     }
   }
 
-  private static pop(stack: HistoryStack): HistoryEntry | null {
+  private static pop(stack: HistoryDelta[]): HistoryDelta | null {
     if (!stack.length) {
       return null;
     }
@@ -149,64 +242,8 @@ export class History {
     return null;
   }
 
-  private static push(
-    stack: HistoryStack,
-    entry: HistoryEntry,
-    prevElements: SceneElementsMap,
-  ) {
-    const updatedEntry = entry.inverse().applyLatestChanges(prevElements);
-    return stack.push(updatedEntry);
-  }
-}
-
-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);
-  }
-
-  public inverse(): HistoryEntry {
-    return new HistoryEntry(
-      this.appStateChange.inverse(),
-      this.elementsChange.inverse(),
-    );
-  }
-
-  public applyTo(
-    elements: SceneElementsMap,
-    appState: AppState,
-    snapshot: Readonly<Snapshot>,
-  ): [SceneElementsMap, AppState, boolean] {
-    const [nextElements, elementsContainVisibleChange] =
-      this.elementsChange.applyTo(elements, snapshot.elements);
-
-    const [nextAppState, appStateContainsVisibleChange] =
-      this.appStateChange.applyTo(appState, nextElements);
-
-    const appliedVisibleChanges =
-      elementsContainVisibleChange || appStateContainsVisibleChange;
-
-    return [nextElements, nextAppState, appliedVisibleChanges];
-  }
-
-  /**
-   * Apply latest (remote) changes to the history entry, creates new instance of `HistoryEntry`.
-   */
-  public applyLatestChanges(elements: SceneElementsMap): HistoryEntry {
-    const updatedElementsChange =
-      this.elementsChange.applyLatestChanges(elements);
-
-    return HistoryEntry.create(this.appStateChange, updatedElementsChange);
-  }
-
-  public isEmpty(): boolean {
-    return this.appStateChange.isEmpty() && this.elementsChange.isEmpty();
+  private static push(stack: HistoryDelta[], entry: HistoryDelta) {
+    const inversedEntry = HistoryDelta.inverse(entry);
+    return stack.push(inversedEntry);
   }
 }