@myoc/excalidraw 0.18.1

package/dist/types/math/range.d.ts

@@ -0,0 +1,44 @@
+import type { InclusiveRange } from "./types";
+/**
+ * Create an inclusive range from the two numbers provided.
+ *
+ * @param start Start of the range
+ * @param end End of the range
+ * @returns
+ */
+export declare function rangeInclusive(start: number, end: number): InclusiveRange;
+/**
+ * Turn a number pair into an inclusive range.
+ *
+ * @param pair The number pair to convert to an inclusive range
+ * @returns The new inclusive range
+ */
+export declare function rangeInclusiveFromPair(pair: [start: number, end: number]): [number, number] & {
+    _brand: "excalimath_degree";
+};
+/**
+ * Given two ranges, return if the two ranges overlap with each other e.g.
+ * [1, 3] overlaps with [2, 4] while [1, 3] does not overlap with [4, 5].
+ *
+ * @param param0 One of the ranges to compare
+ * @param param1 The other range to compare against
+ * @returns TRUE if the ranges overlap
+ */
+export declare const rangesOverlap: ([a0, a1]: InclusiveRange, [b0, b1]: InclusiveRange) => boolean;
+/**
+ * Given two ranges,return ther intersection of the two ranges if any e.g. the
+ * intersection of [1, 3] and [2, 4] is [2, 3].
+ *
+ * @param param0 The first range to compare
+ * @param param1 The second range to compare
+ * @returns The inclusive range intersection or NULL if no intersection
+ */
+export declare const rangeIntersection: ([a0, a1]: InclusiveRange, [b0, b1]: InclusiveRange) => InclusiveRange | null;
+/**
+ * Determine if a value is inside a range.
+ *
+ * @param value The value to check
+ * @param range The range
+ * @returns
+ */
+export declare const rangeIncludesValue: (value: number, [min, max]: InclusiveRange) => boolean;

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

@@ -0,0 +1,3 @@
+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 rectangleIntersectLineSegment<Point extends LocalPoint | GlobalPoint>(r: Rectangle<Point>, l: LineSegment<Point>): Point[];

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

@@ -0,0 +1,39 @@
+import type { GlobalPoint, LineSegment, LocalPoint, Radians } from "./types";
+/**
+ * Create a line segment from two points.
+ *
+ * @param points The two points delimiting the line segment on each end
+ * @returns The line segment delineated by the points
+ */
+export declare function lineSegment<P extends GlobalPoint | LocalPoint>(a: P, b: P): LineSegment<P>;
+/**
+ *
+ * @param segment
+ * @returns
+ */
+export declare const isLineSegment: <Point extends GlobalPoint | LocalPoint>(segment: unknown) => segment is LineSegment<Point>;
+/**
+ * Return the coordinates resulting from rotating the given line about an origin by an angle in radians
+ * note that when the origin is not given, the midpoint of the given line is used as the origin.
+ *
+ * @param l
+ * @param angle
+ * @param origin
+ * @returns
+ */
+export declare const lineSegmentRotate: <Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, angle: Radians, origin?: Point | undefined) => LineSegment<Point>;
+/**
+ * Calculates the point two line segments with a definite start and end point
+ * intersect at.
+ */
+export declare const segmentsIntersectAt: <Point extends GlobalPoint | LocalPoint>(a: Readonly<LineSegment<Point>>, b: Readonly<LineSegment<Point>>) => Point | null;
+export declare const pointOnLineSegment: <Point extends GlobalPoint | LocalPoint>(point: Point, line: LineSegment<Point>, threshold?: number) => boolean;
+export declare const distanceToLineSegment: <Point extends GlobalPoint | LocalPoint>(point: Point, line: LineSegment<Point>) => number;
+/**
+ * Returns the intersection point of a segment and a line
+ *
+ * @param l
+ * @param s
+ * @returns
+ */
+export declare function lineSegmentIntersectionPoints<Point extends GlobalPoint | LocalPoint>(l: LineSegment<Point>, s: LineSegment<Point>): Point | null;

package/dist/types/math/triangle.d.ts

@@ -0,0 +1,11 @@
+import type { GlobalPoint, LocalPoint, Triangle } from "./types";
+/**
+ * Tests if a point lies inside a triangle. This function
+ * will return FALSE if the point lies exactly on the sides
+ * of the triangle.
+ *
+ * @param triangle The triangle to test the point for
+ * @param p The point to test whether is in the triangle
+ * @returns TRUE if the point is inside of the triangle
+ */
+export declare function triangleIncludesPoint<P extends GlobalPoint | LocalPoint>([a, b, c]: Triangle<P>, p: P): boolean;

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

@@ -0,0 +1,105 @@
+/**
+ * By definition one radian is the angle subtended at the centre
+ * of a circle by an arc that is equal in length to the radius.
+ */
+export type Radians = number & {
+    _brand: "excalimath__radian";
+};
+/**
+ * An angle measurement of a plane angle in which one full
+ * rotation is 360 degrees.
+ */
+export type Degrees = number & {
+    _brand: "excalimath_degree";
+};
+/**
+ * A number range which includes the start and end numbers in the range.
+ */
+export type InclusiveRange = [number, number] & {
+    _brand: "excalimath_degree";
+};
+/**
+ * Represents a 2D position in world or canvas space. A
+ * global coordinate.
+ */
+export type GlobalPoint = [x: number, y: number] & {
+    _brand: "excalimath__globalpoint";
+};
+/**
+ * Represents a 2D position in whatever local space it's
+ * needed. A local coordinate.
+ */
+export type LocalPoint = [x: number, y: number] & {
+    _brand: "excalimath__localpoint";
+};
+/**
+ * A line is an infinitely long object with no width, depth, or curvature.
+ */
+export type Line<P extends GlobalPoint | LocalPoint> = [p: P, q: P] & {
+    _brand: "excalimath_line";
+};
+/**
+ * In geometry, a line segment is a part of a straight
+ * line that is bounded by two distinct end points, and
+ * contains every point on the line that is between its endpoints.
+ */
+export type LineSegment<P extends GlobalPoint | LocalPoint> = [a: P, b: P] & {
+    _brand: "excalimath_linesegment";
+};
+/**
+ * Represents a 2D vector
+ */
+export type Vector = [u: number, v: number] & {
+    _brand: "excalimath__vector";
+};
+/**
+ * A triangle represented by 3 points
+ */
+export type Triangle<P extends GlobalPoint | LocalPoint> = [
+    a: P,
+    b: P,
+    c: P
+] & {
+    _brand: "excalimath__triangle";
+};
+/**
+ * A rectangular shape represented by 4 points at its corners
+ */
+export type Rectangle<P extends GlobalPoint | LocalPoint> = [a: P, b: P] & {
+    _brand: "excalimath__rectangle";
+};
+/**
+ * A polygon is a closed shape by connecting the given points
+ * rectangles and diamonds are modelled by polygons
+ */
+export type Polygon<Point extends GlobalPoint | LocalPoint> = Point[] & {
+    _brand: "excalimath_polygon";
+};
+/**
+ * Cubic bezier curve with four control points
+ */
+export type Curve<Point extends GlobalPoint | LocalPoint> = [
+    Point,
+    Point,
+    Point,
+    Point
+] & {
+    _brand: "excalimath_curve";
+};
+export type PolarCoords = [
+    radius: number,
+    /** angle in radians */
+    angle: number
+];
+/**
+  An ellipse is specified by its center, angle, and its major and minor axes
+  but for the sake of simplicity, we've used halfWidth and halfHeight instead
+  in replace of semi major and semi minor axes
+ */
+export type Ellipse<Point extends GlobalPoint | LocalPoint> = {
+    center: Point;
+    halfWidth: number;
+    halfHeight: number;
+} & {
+    _brand: "excalimath_ellipse";
+};

package/dist/types/math/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const PRECISION = 0.0001;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const round: (value: number, precision: number, func?: "round" | "floor" | "ceil") => number;
+export declare const roundToStep: (value: number, step: number, func?: "round" | "floor" | "ceil") => number;
+export declare const average: (a: number, b: number) => number;
+export declare const isFiniteNumber: (value: any) => value is number;
+export declare const isCloseTo: (a: number, b: number, precision?: number) => boolean;

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

@@ -0,0 +1,88 @@
+import type { GlobalPoint, LocalPoint, Vector } from "./types";
+/**
+ * Create a vector from the x and y coordiante elements.
+ *
+ * @param x The X aspect of the vector
+ * @param y T Y aspect of the vector
+ * @returns The constructed vector with X and Y as the coordinates
+ */
+export declare function vector(x: number, y: number, originX?: number, originY?: number): Vector;
+/**
+ * Turn a point into a vector with the origin point.
+ *
+ * @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
+ */
+export declare function vectorFromPoint<Point extends GlobalPoint | LocalPoint>(p: Point, origin?: Point): Vector;
+/**
+ * Cross product is a binary operation on two vectors in 2D space.
+ * It results in a vector that is perpendicular to both vectors.
+ *
+ * @param a One of the vectors to use for the directed area calculation
+ * @param b The other vector to use for the directed area calculation
+ * @returns The directed area value for the two vectos
+ */
+export declare function vectorCross(a: Vector, b: Vector): number;
+/**
+ * Dot product is defined as the sum of the products of the
+ * two vectors.
+ *
+ * @param a One of the vectors for which the sum of products is calculated
+ * @param b The other vector for which the sum of products is calculated
+ * @returns The sum of products of the two vectors
+ */
+export declare function vectorDot(a: Vector, b: Vector): number;
+/**
+ * Determines if the value has the shape of a Vector.
+ *
+ * @param v The value to test
+ * @returns TRUE if the value has the shape and components of a Vectors
+ */
+export declare function isVector(v: unknown): v is Vector;
+/**
+ * Add two vectors by adding their coordinates.
+ *
+ * @param a One of the vectors to add
+ * @param b The other vector to add
+ * @returns The sum vector of the two provided vectors
+ */
+export declare function vectorAdd(a: Readonly<Vector>, b: Readonly<Vector>): Vector;
+/**
+ * Add two vectors by adding their coordinates.
+ *
+ * @param start One of the vectors to add
+ * @param end The other vector to add
+ * @returns The sum vector of the two provided vectors
+ */
+export declare function vectorSubtract(start: Readonly<Vector>, end: Readonly<Vector>): Vector;
+/**
+ * Scale vector by a scalar.
+ *
+ * @param v The vector to scale
+ * @param scalar The scalar to multiply the vector components with
+ * @returns The new scaled vector
+ */
+export declare function vectorScale(v: Vector, scalar: number): Vector;
+/**
+ * Calculates the sqare magnitude of a vector. Use this if you compare
+ * magnitudes as it saves you an SQRT.
+ *
+ * @param v The vector to measure
+ * @returns The scalar squared magnitude of the vector
+ */
+export declare function vectorMagnitudeSq(v: Vector): number;
+/**
+ * Calculates the magnitude of a vector.
+ *
+ * @param v The vector to measure
+ * @returns The scalar magnitude of the vector
+ */
+export declare function vectorMagnitude(v: Vector): number;
+/**
+ * Normalize the vector (i.e. make the vector magnitue equal 1).
+ *
+ * @param v The vector to normalize
+ * @returns The new normalized vector
+ */
+export declare const vectorNormalize: (v: Vector) => Vector;

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

@@ -0,0 +1,9 @@
+import { type GlobalPoint, type LocalPoint } from "@excalidraw/math";
+import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
+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;
+export declare function isPointOnLine<P extends GlobalPoint | LocalPoint>(l: LineSegment<P>, p: P): boolean;
+export declare function isPointRightOfLine<P extends GlobalPoint | LocalPoint>(l: LineSegment<P>, p: P): boolean;
+export declare function isLineSegmentTouchingOrCrossingLine<P extends GlobalPoint | LocalPoint>(a: LineSegment<P>, b: LineSegment<P>): boolean;
+export declare function doLineSegmentsIntersect<P extends GlobalPoint | LocalPoint>(a: LineSegment<P>, b: LineSegment<P>): boolean;

package/dist/types/utils/collision.d.ts

@@ -0,0 +1,9 @@
+import { type GlobalPoint, type LocalPoint, type Polygon } from "@excalidraw/math";
+import type { Curve } from "@excalidraw/math";
+import { type GeometricShape } from "./geometry/shape";
+import type { Polyline } from "./geometry/shape";
+export declare const isPointOnShape: <Point extends GlobalPoint | LocalPoint>(point: Point, shape: GeometricShape<Point>, tolerance?: number) => boolean;
+export declare const isPointInShape: <Point extends GlobalPoint | LocalPoint>(point: Point, shape: GeometricShape<Point>) => boolean;
+export declare const isPointInBounds: <Point extends GlobalPoint | LocalPoint>(point: Point, bounds: Polygon<Point>) => boolean;
+export declare const pointOnCurve: <Point extends GlobalPoint | LocalPoint>(point: Point, curve: Curve<Point>, threshold: number) => boolean;
+export declare const pointOnPolyline: <Point extends GlobalPoint | LocalPoint>(point: Point, polyline: Polyline<Point>, threshold?: number) => boolean;

package/dist/types/utils/export.d.ts

@@ -0,0 +1,35 @@
+import { MIME_TYPES } from "@excalidraw/excalidraw/constants";
+import type { ExcalidrawElement, ExcalidrawFrameLikeElement, NonDeleted } from "@excalidraw/excalidraw/element/types";
+import type { AppState, BinaryFiles } from "@excalidraw/excalidraw/types";
+export { MIME_TYPES };
+type ExportOpts = {
+    elements: readonly NonDeleted<ExcalidrawElement>[];
+    appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
+    files: BinaryFiles | null;
+    maxWidthOrHeight?: number;
+    exportingFrame?: ExcalidrawFrameLikeElement | null;
+    getDimensions?: (width: number, height: number) => {
+        width: number;
+        height: number;
+        scale?: number;
+    };
+};
+export declare const exportToCanvas: ({ elements, appState, files, maxWidthOrHeight, getDimensions, exportPadding, exportingFrame, }: ExportOpts & {
+    exportPadding?: number | undefined;
+}) => Promise<HTMLCanvasElement>;
+export declare const exportToBlob: (opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    exportPadding?: number;
+}) => Promise<Blob>;
+export declare const exportToSvg: ({ elements, appState, files, exportPadding, renderEmbeddables, exportingFrame, skipInliningFonts, reuseImages, }: Omit<ExportOpts, "getDimensions"> & {
+    exportPadding?: number | undefined;
+    renderEmbeddables?: boolean | undefined;
+    skipInliningFonts?: true | undefined;
+    reuseImages?: boolean | undefined;
+}) => Promise<SVGSVGElement>;
+export declare const exportToClipboard: (opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    type: "png" | "svg" | "json";
+}) => Promise<void>;

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

@@ -0,0 +1,71 @@
+/**
+ * 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 { type GlobalPoint, type LocalPoint } from "@excalidraw/math";
+import type { ElementsMap, ExcalidrawBindableElement, ExcalidrawDiamondElement, ExcalidrawElement, ExcalidrawEllipseElement, ExcalidrawEmbeddableElement, ExcalidrawFrameLikeElement, ExcalidrawFreeDrawElement, ExcalidrawIframeElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawRectangleElement, ExcalidrawSelectionElement, ExcalidrawTextElement } from "@excalidraw/excalidraw/element/types";
+import type { Curve, LineSegment, Polygon, Radians } from "@excalidraw/math";
+import type { Drawable, Op } from "roughjs/bin/core";
+export type Polyline<Point extends GlobalPoint | LocalPoint> = LineSegment<Point>[];
+export type Polycurve<Point extends GlobalPoint | LocalPoint> = Curve<Point>[];
+export type Ellipse<Point extends GlobalPoint | LocalPoint> = {
+    center: Point;
+    angle: Radians;
+    halfWidth: number;
+    halfHeight: number;
+};
+export type GeometricShape<Point extends GlobalPoint | LocalPoint> = {
+    type: "line";
+    data: LineSegment<Point>;
+} | {
+    type: "polygon";
+    data: Polygon<Point>;
+} | {
+    type: "curve";
+    data: Curve<Point>;
+} | {
+    type: "ellipse";
+    data: Ellipse<Point>;
+} | {
+    type: "polyline";
+    data: Polyline<Point>;
+} | {
+    type: "polycurve";
+    data: Polycurve<Point>;
+};
+type RectangularElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawFrameLikeElement | ExcalidrawEmbeddableElement | ExcalidrawImageElement | ExcalidrawIframeElement | ExcalidrawTextElement | ExcalidrawSelectionElement;
+export declare const getPolygonShape: <Point extends GlobalPoint | LocalPoint>(element: RectangularElement) => GeometricShape<Point>;
+export declare const getSelectionBoxShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawElement, elementsMap: ElementsMap, padding?: number) => GeometricShape<Point>;
+export declare const getEllipseShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawEllipseElement) => GeometricShape<Point>;
+export declare const getCurvePathOps: (shape: Drawable) => Op[];
+export declare const getCurveShape: <Point extends GlobalPoint | LocalPoint>(roughShape: Drawable, startingPoint: Point | undefined, angleInRadian: Radians, center: Point) => GeometricShape<Point>;
+export declare const getFreedrawShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawFreeDrawElement, center: Point, isClosed?: boolean) => GeometricShape<Point>;
+export declare const getClosedCurveShape: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawLinearElement, roughShape: Drawable, startingPoint: Point | undefined, angleInRadian: Radians, center: Point) => GeometricShape<Point>;
+/**
+ * Determine intersection of a rectangular shaped element and a
+ * line segment.
+ *
+ * @param element The rectangular element to test against
+ * @param segment The segment intersecting the element
+ * @param gap Optional value to inflate the shape before testing
+ * @returns An array of intersections
+ */
+export declare const segmentIntersectRectangleElement: <Point extends GlobalPoint | LocalPoint>(element: ExcalidrawBindableElement, segment: LineSegment<Point>, gap?: number) => Point[];
+export declare const pointOnEllipse: <Point extends GlobalPoint | LocalPoint>(point: Point, ellipse: Ellipse<Point>, threshold?: number) => boolean;
+export declare const pointInEllipse: <Point extends GlobalPoint | LocalPoint>(p: Point, ellipse: Ellipse<Point>) => boolean;
+export declare const ellipseAxes: <Point extends GlobalPoint | LocalPoint>(ellipse: Ellipse<Point>) => {
+    majorAxis: number;
+    minorAxis: number;
+};
+export declare const ellipseFocusToCenter: <Point extends GlobalPoint | LocalPoint>(ellipse: Ellipse<Point>) => number;
+export declare const ellipseExtremes: <Point extends GlobalPoint | LocalPoint>(ellipse: Ellipse<Point>) => import("@excalidraw/math").Vector[];
+export {};

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

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

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

@@ -0,0 +1,19 @@
+import type { Bounds } from "@excalidraw/excalidraw/element/bounds";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+type Element = NonDeletedExcalidrawElement;
+type Elements = readonly NonDeletedExcalidrawElement[];
+export declare const isElementInsideBBox: (element: Element, bbox: Bounds, eitherDirection?: boolean) => boolean;
+export declare const elementPartiallyOverlapsWithOrContainsBBox: (element: Element, bbox: Bounds) => boolean;
+export declare const elementsOverlappingBBox: ({ elements, bounds, type, errorMargin, }: {
+    elements: Elements;
+    bounds: Bounds | ExcalidrawElement;
+    /** safety offset. Defaults to 0. */
+    errorMargin?: number | undefined;
+    /**
+     * - overlap: elements overlapping or inside bounds
+     * - contain: elements inside bounds or bounds inside elements
+     * - inside: elements inside bounds
+     **/
+    type: "overlap" | "contain" | "inside";
+}) => NonDeletedExcalidrawElement[];
+export {};

package/history.ts

@@ -0,0 +1,211 @@
+import { Emitter } from "./emitter";
+
+import type { AppStateChange, ElementsChange } from "./change";
+import type { SceneElementsMap } from "./element/types";
+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,
+  ) {}
+}
+
+export class History {
+  public readonly onHistoryChangedEmitter = new Emitter<
+    [HistoryChangedEvent]
+  >();
+
+  private readonly undoStack: HistoryStack = [];
+  private readonly redoStack: HistoryStack = [];
+
+  public get isUndoStackEmpty() {
+    return this.undoStack.length === 0;
+  }
+
+  public get isRedoStackEmpty() {
+    return this.redoStack.length === 0;
+  }
+
+  public clear() {
+    this.undoStack.length = 0;
+    this.redoStack.length = 0;
+  }
+
+  /**
+   * 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;
+      }
+
+      this.onHistoryChangedEmitter.trigger(
+        new HistoryChangedEvent(this.isUndoStackEmpty, this.isRedoStackEmpty),
+      );
+    }
+  }
+
+  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),
+    );
+  }
+
+  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),
+    );
+  }
+
+  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;
+      }
+
+      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);
+        }
+
+        if (containsVisibleChange) {
+          break;
+        }
+
+        historyEntry = pop();
+      }
+
+      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),
+      );
+    }
+  }
+
+  private static pop(stack: HistoryStack): HistoryEntry | null {
+    if (!stack.length) {
+      return null;
+    }
+
+    const entry = stack.pop();
+
+    if (entry !== undefined) {
+      return entry;
+    }
+
+    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();
+  }
+}