js-draw 0.23.1 → 0.24.1

package/dist/mjs/UndoRedoHistory.mjs

@@ -0,0 +1,103 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _UndoRedoHistory_undoStack, _UndoRedoHistory_redoStack;
+import  { EditorEventType, UndoEventType }  from './types.mjs';
+var UndoRedoHistory = /** @class */ (function () {
+    // @internal
+    function UndoRedoHistory(editor, announceRedoCallback, announceUndoCallback) {
+        this.editor = editor;
+        this.announceRedoCallback = announceRedoCallback;
+        this.announceUndoCallback = announceUndoCallback;
+        _UndoRedoHistory_undoStack.set(this, void 0);
+        _UndoRedoHistory_redoStack.set(this, void 0);
+        this.maxUndoRedoStackSize = 700;
+        __classPrivateFieldSet(this, _UndoRedoHistory_undoStack, [], "f");
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
+    }
+    UndoRedoHistory.prototype.fireUpdateEvent = function (stackUpdateType, triggeringCommand) {
+        this.editor.notifier.dispatch(EditorEventType.UndoRedoStackUpdated, {
+            kind: EditorEventType.UndoRedoStackUpdated,
+            undoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length,
+            redoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length,
+            command: triggeringCommand,
+            stackUpdateType: stackUpdateType,
+        });
+    };
+    // Adds the given command to this and applies it to the editor.
+    UndoRedoHistory.prototype.push = function (command, apply) {
+        var _this = this;
+        if (apply === void 0) { apply = true; }
+        if (apply) {
+            command.apply(this.editor);
+        }
+        __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
+        for (var _i = 0, _a = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f"); _i < _a.length; _i++) {
+            var elem = _a[_i];
+            elem.onDrop(this.editor);
+        }
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
+        if (__classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length > this.maxUndoRedoStackSize) {
+            var removeAtOnceCount = Math.ceil(this.maxUndoRedoStackSize / 100);
+            var removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
+            removedElements.forEach(function (elem) { return elem.onDrop(_this.editor); });
+        }
+        this.fireUpdateEvent(UndoEventType.CommandDone, command);
+        this.editor.notifier.dispatch(EditorEventType.CommandDone, {
+            kind: EditorEventType.CommandDone,
+            command: command,
+        });
+    };
+    // Remove the last command from this' undo stack and apply it.
+    UndoRedoHistory.prototype.undo = function () {
+        var command = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").pop();
+        if (command) {
+            __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").push(command);
+            command.unapply(this.editor);
+            this.announceUndoCallback(command);
+            this.fireUpdateEvent(UndoEventType.CommandUndone, command);
+            this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
+                kind: EditorEventType.CommandUndone,
+                command: command,
+            });
+        }
+    };
+    UndoRedoHistory.prototype.redo = function () {
+        var command = __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").pop();
+        if (command) {
+            __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
+            command.apply(this.editor);
+            this.announceRedoCallback(command);
+            this.fireUpdateEvent(UndoEventType.CommandRedone, command);
+            this.editor.notifier.dispatch(EditorEventType.CommandDone, {
+                kind: EditorEventType.CommandDone,
+                command: command,
+            });
+        }
+    };
+    Object.defineProperty(UndoRedoHistory.prototype, "undoStackSize", {
+        get: function () {
+            return __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(UndoRedoHistory.prototype, "redoStackSize", {
+        get: function () {
+            return __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return UndoRedoHistory;
+}());
+_UndoRedoHistory_undoStack = new WeakMap(), _UndoRedoHistory_redoStack = new WeakMap();
+export default UndoRedoHistory;

package/dist/mjs/UndoRedoHistory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Viewport.d.ts

@@ -0,0 +1,73 @@
+import Command from './commands/Command';
+import Mat33 from './math/Mat33';
+import Rect2 from './math/shapes/Rect2';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
+import { StrokeDataPoint } from './types';
+type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+export declare abstract class ViewportTransform extends Command {
+    abstract readonly transform: Mat33;
+}
+type TransformChangeCallback = (oldTransform: Mat33, newTransform: Mat33) => void;
+export declare class Viewport {
+    private onTransformChangeCallback;
+    private static ViewportTransform;
+    private transform;
+    private inverseTransform;
+    private screenRect;
+    constructor(onTransformChangeCallback: TransformChangeCallback);
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone(): Viewport;
+    updateScreenSize(screenSize: Vec2): void;
+    /** Get the screen's visible region transformed into canvas space. */
+    get visibleRect(): Rect2;
+    /** @returns the given point, but in canvas coordinates */
+    screenToCanvas(screenPoint: Point2): Point2;
+    /** @returns the given point transformed into screen coordinates. */
+    canvasToScreen(canvasPoint: Point2): Point2;
+    /** @returns a command that transforms the canvas by `transform`. */
+    static transformBy(transform: Mat33): ViewportTransform;
+    /**
+     * Updates the transformation directly. Using `transformBy` is preferred.
+     * @param newTransform - should map from canvas coordinates to screen coordinates.
+     */
+    resetTransform(newTransform?: Mat33): void;
+    get screenToCanvasTransform(): Mat33;
+    get canvasToScreenTransform(): Mat33;
+    /** @returns the size of the visible region in pixels. */
+    getScreenRectSize(): Vec2;
+    /** Alias for `getScreenRectSize`. @deprecated */
+    getResolution(): Vec3;
+    /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
+    getScaleFactor(): number;
+    /**
+     * @returns `getScaleFactor()` rounded to the nearest power of 10.
+     * For example, if `getScaleFactor()` returns 101, `getScaleFactorToNearestPowerOfTen()`
+     * should return `100` because `100` is the nearest power of 10 to 101.
+     */
+    getScaleFactorToNearestPowerOfTen(): number;
+    private getScaleFactorToNearestPowerOf;
+    /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
+    static getGridSize(scaleFactor: number): number;
+    snapToGrid(canvasPos: Point2): Vec3;
+    /** Returns the size of one screen pixel in canvas units. */
+    getSizeOfPixelOnCanvas(): number;
+    /**
+     * @returns the angle of the canvas in radians.
+     * This is the angle by which the canvas is rotated relative to the screen.
+     */
+    getRotationAngle(): number;
+    /**
+     * Rounds the given `point` to a multiple of 10 such that it is within `tolerance` of
+     * its original location. This is useful for preparing data for base-10 conversion.
+     */
+    static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
+    roundPoint(point: Point2): Point2;
+    static roundScaleRatio(scaleRatio: number, roundAmount?: number): number;
+    computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;
+    zoomTo(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Command;
+}
+export default Viewport;

package/dist/mjs/Viewport.mjs

@@ -0,0 +1,304 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+import  Command  from './commands/Command.mjs';
+import  Mat33  from './math/Mat33.mjs';
+import  Rect2  from './math/shapes/Rect2.mjs';
+import  { Vec2 }  from './math/Vec2.mjs';
+import  Vec3  from './math/Vec3.mjs';
+var ViewportTransform = /** @class */ (function (_super) {
+    __extends(ViewportTransform, _super);
+    function ViewportTransform() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return ViewportTransform;
+}(Command));
+export { ViewportTransform };
+export var Viewport = /** @class */ (function () {
+    // @internal
+    function Viewport(onTransformChangeCallback) {
+        this.onTransformChangeCallback = onTransformChangeCallback;
+        this.resetTransform(Mat33.identity);
+        this.screenRect = Rect2.empty;
+    }
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    Viewport.prototype.getTemporaryClone = function () {
+        var result = new Viewport(function () { });
+        result.transform = this.transform;
+        result.inverseTransform = this.inverseTransform;
+        result.screenRect = this.screenRect;
+        return result;
+    };
+    // @internal
+    Viewport.prototype.updateScreenSize = function (screenSize) {
+        this.screenRect = this.screenRect.resizedTo(screenSize);
+    };
+    Object.defineProperty(Viewport.prototype, "visibleRect", {
+        /** Get the screen's visible region transformed into canvas space. */
+        get: function () {
+            return this.screenRect.transformedBoundingBox(this.inverseTransform);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** @returns the given point, but in canvas coordinates */
+    Viewport.prototype.screenToCanvas = function (screenPoint) {
+        return this.inverseTransform.transformVec2(screenPoint);
+    };
+    /** @returns the given point transformed into screen coordinates. */
+    Viewport.prototype.canvasToScreen = function (canvasPoint) {
+        return this.transform.transformVec2(canvasPoint);
+    };
+    /** @returns a command that transforms the canvas by `transform`. */
+    Viewport.transformBy = function (transform) {
+        return new Viewport.ViewportTransform(transform);
+    };
+    /**
+     * Updates the transformation directly. Using `transformBy` is preferred.
+     * @param newTransform - should map from canvas coordinates to screen coordinates.
+     */
+    Viewport.prototype.resetTransform = function (newTransform) {
+        var _a;
+        if (newTransform === void 0) { newTransform = Mat33.identity; }
+        var oldTransform = this.transform;
+        this.transform = newTransform;
+        this.inverseTransform = newTransform.inverse();
+        (_a = this.onTransformChangeCallback) === null || _a === void 0 ? void 0 : _a.call(this, oldTransform, newTransform);
+    };
+    Object.defineProperty(Viewport.prototype, "screenToCanvasTransform", {
+        get: function () {
+            return this.inverseTransform;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Viewport.prototype, "canvasToScreenTransform", {
+        get: function () {
+            return this.transform;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** @returns the size of the visible region in pixels. */
+    Viewport.prototype.getScreenRectSize = function () {
+        return this.screenRect.size;
+    };
+    /** Alias for `getScreenRectSize`. @deprecated */
+    Viewport.prototype.getResolution = function () {
+        return this.getScreenRectSize();
+    };
+    /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
+    Viewport.prototype.getScaleFactor = function () {
+        // Use transformVec3 to avoid translating the vector
+        return this.transform.transformVec3(Vec3.unitX).magnitude();
+    };
+    /**
+     * @returns `getScaleFactor()` rounded to the nearest power of 10.
+     * For example, if `getScaleFactor()` returns 101, `getScaleFactorToNearestPowerOfTen()`
+     * should return `100` because `100` is the nearest power of 10 to 101.
+     */
+    Viewport.prototype.getScaleFactorToNearestPowerOfTen = function () {
+        return this.getScaleFactorToNearestPowerOf(10);
+    };
+    Viewport.prototype.getScaleFactorToNearestPowerOf = function (powerOf) {
+        var scaleFactor = this.getScaleFactor();
+        return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
+    };
+    /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
+    Viewport.getGridSize = function (scaleFactor) {
+        return 50 / scaleFactor;
+    };
+    Viewport.prototype.snapToGrid = function (canvasPos) {
+        var scaleFactor = this.getScaleFactorToNearestPowerOf(2);
+        var snapCoordinate = function (coordinate) {
+            var roundFactor = 1 / Viewport.getGridSize(scaleFactor);
+            var snapped = Math.round(coordinate * roundFactor) / roundFactor;
+            return snapped;
+        };
+        var snappedCanvasPos = Vec2.of(snapCoordinate(canvasPos.x), snapCoordinate(canvasPos.y));
+        return snappedCanvasPos;
+    };
+    /** Returns the size of one screen pixel in canvas units. */
+    Viewport.prototype.getSizeOfPixelOnCanvas = function () {
+        return 1 / this.getScaleFactor();
+    };
+    /**
+     * @returns the angle of the canvas in radians.
+     * This is the angle by which the canvas is rotated relative to the screen.
+     */
+    Viewport.prototype.getRotationAngle = function () {
+        return this.transform.transformVec3(Vec3.unitX).angle();
+    };
+    // The separate function type definition seems necessary here.
+    // See https://stackoverflow.com/a/58163623/17055750.
+    // eslint-disable-next-line no-dupe-class-members
+    Viewport.roundPoint = function (point, tolerance) {
+        var scaleFactor = Math.pow(10, Math.floor(Math.log10(tolerance)));
+        var roundComponent = function (component) {
+            return Math.round(component / scaleFactor) * scaleFactor;
+        };
+        if (typeof point === 'number') {
+            return roundComponent(point);
+        }
+        return point.map(roundComponent);
+    };
+    // Round a point with a tolerance of ±1 screen unit.
+    Viewport.prototype.roundPoint = function (point) {
+        return Viewport.roundPoint(point, 1 / this.getScaleFactor());
+    };
+    // `roundAmount`: An integer >= 0, larger numbers cause less rounding. Smaller numbers cause more
+    // (as such `roundAmount = 0` does the most rounding).
+    Viewport.roundScaleRatio = function (scaleRatio, roundAmount) {
+        if (roundAmount === void 0) { roundAmount = 1; }
+        if (Math.abs(scaleRatio) <= 1e-12) {
+            return 0;
+        }
+        // Represent as k 10ⁿ for some n, k ∈ ℤ.
+        var decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
+        var roundAmountFactor = Math.pow(2, roundAmount);
+        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
+        return scaleRatio;
+    };
+    // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
+    Viewport.prototype.computeZoomToTransform = function (toMakeVisible, allowZoomIn, allowZoomOut) {
+        var _this = this;
+        if (allowZoomIn === void 0) { allowZoomIn = true; }
+        if (allowZoomOut === void 0) { allowZoomOut = true; }
+        var transform = Mat33.identity;
+        if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
+            throw new Error("".concat(toMakeVisible.toString(), " rectangle is empty! Cannot zoom to!"));
+        }
+        if (isNaN(toMakeVisible.size.magnitude())) {
+            throw new Error("".concat(toMakeVisible.toString(), " rectangle has NaN size! Cannot zoom to!"));
+        }
+        // Try to move the selection within the center 4/5ths of the viewport.
+        var recomputeTargetRect = function () {
+            // transform transforms objects on the canvas. As such, we need to invert it
+            // to transform the viewport.
+            var visibleRect = _this.visibleRect.transformedBoundingBox(transform.inverse());
+            return visibleRect.transformedBoundingBox(Mat33.scaling2D(4 / 5, visibleRect.center));
+        };
+        var targetRect = recomputeTargetRect();
+        var largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+        // Ensure that toMakeVisible is at least 1/3rd of the visible region.
+        var muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1 / 3;
+        if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
+            var multiplier = Math.max(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
+            var visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+            var viewportContentTransform = visibleRectTransform.inverse();
+            transform = transform.rightMul(viewportContentTransform);
+        }
+        targetRect = recomputeTargetRect();
+        // Ensure that the center of the region is visible
+        if (!targetRect.containsRect(toMakeVisible)) {
+            // target position - current position
+            var translation = toMakeVisible.center.minus(targetRect.center);
+            var visibleRectTransform = Mat33.translation(translation);
+            var viewportContentTransform = visibleRectTransform.inverse();
+            transform = transform.rightMul(viewportContentTransform);
+        }
+        if (!transform.invertable()) {
+            console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
+            transform = Mat33.identity;
+        }
+        return transform;
+    };
+    // Returns a Command that transforms the view such that [rect] is visible, and perhaps
+    // centered in the viewport.
+    // Returns null if no transformation is necessary
+    //
+    // @see {@link computeZoomToTransform}
+    Viewport.prototype.zoomTo = function (toMakeVisible, allowZoomIn, allowZoomOut) {
+        if (allowZoomIn === void 0) { allowZoomIn = true; }
+        if (allowZoomOut === void 0) { allowZoomOut = true; }
+        var transform = this.computeZoomToTransform(toMakeVisible, allowZoomIn, allowZoomOut);
+        return new Viewport.ViewportTransform(transform);
+    };
+    var _inverseTransform, _a;
+    // Command that translates/scales the viewport.
+    Viewport.ViewportTransform = (_a = /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1(transform) {
+                var _this = _super.call(this) || this;
+                _this.transform = transform;
+                _inverseTransform.set(_this, void 0);
+                __classPrivateFieldSet(_this, _inverseTransform, transform.inverse(), "f");
+                return _this;
+            }
+            class_1.prototype.apply = function (editor) {
+                var viewport = editor.viewport;
+                viewport.resetTransform(viewport.transform.rightMul(this.transform));
+                editor.queueRerender();
+            };
+            class_1.prototype.unapply = function (editor) {
+                var viewport = editor.viewport;
+                viewport.resetTransform(viewport.transform.rightMul(__classPrivateFieldGet(this, _inverseTransform, "f")));
+                editor.queueRerender();
+            };
+            class_1.prototype.description = function (editor, localizationTable) {
+                var result = [];
+                // Describe the transformation's affect on the viewport (note that transformation transforms
+                // the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
+                var origVec = editor.viewport.visibleRect.center;
+                var linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
+                var affineTransformedVec = this.transform.transformVec2(origVec);
+                var scale = linearTransformedVec.magnitude();
+                var rotation = 180 / Math.PI * linearTransformedVec.angle();
+                var translation = affineTransformedVec.minus(origVec);
+                if (scale > 1.2) {
+                    result.push(localizationTable.zoomedIn);
+                }
+                else if (scale < 0.8) {
+                    result.push(localizationTable.zoomedOut);
+                }
+                if (Math.floor(Math.abs(rotation)) > 0) {
+                    result.push(localizationTable.rotatedBy(Math.round(rotation)));
+                }
+                var minTranslation = 1e-4;
+                if (translation.x > minTranslation) {
+                    result.push(localizationTable.movedLeft);
+                }
+                else if (translation.x < -minTranslation) {
+                    result.push(localizationTable.movedRight);
+                }
+                if (translation.y < -minTranslation) {
+                    result.push(localizationTable.movedDown);
+                }
+                else if (translation.y > minTranslation) {
+                    result.push(localizationTable.movedUp);
+                }
+                return result.join('; ');
+            };
+            return class_1;
+        }(ViewportTransform)),
+        _inverseTransform = new WeakMap(),
+        _a);
+    return Viewport;
+}());
+export default Viewport;

package/dist/mjs/commands/Command.mjs

@@ -0,0 +1,58 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+export var Command = /** @class */ (function () {
+    function Command() {
+    }
+    // Called when the command is being deleted
+    Command.prototype.onDrop = function (_editor) { };
+    Command.union = function (a, b) {
+        return new /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            class_1.prototype.apply = function (editor) {
+                a.apply(editor);
+                b.apply(editor);
+            };
+            class_1.prototype.unapply = function (editor) {
+                b.unapply(editor);
+                a.unapply(editor);
+            };
+            class_1.prototype.description = function (editor, localizationTable) {
+                var aDescription = a.description(editor, localizationTable);
+                var bDescription = b.description(editor, localizationTable);
+                if (aDescription === bDescription) {
+                    return aDescription;
+                }
+                return "".concat(aDescription, ", ").concat(bDescription);
+            };
+            return class_1;
+        }(Command));
+    };
+    Command.empty = new /** @class */ (function (_super) {
+        __extends(class_2, _super);
+        function class_2() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        class_2.prototype.description = function (_editor, _localizationTable) { return ''; };
+        class_2.prototype.apply = function (_editor) { };
+        class_2.prototype.unapply = function (_editor) { };
+        return class_2;
+    }(Command));
+    return Command;
+}());
+export default Command;

package/dist/mjs/commands/Duplicate.mjs

@@ -0,0 +1,78 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import  describeComponentList  from '../components/util/describeComponentList.mjs';
+import  Erase  from './Erase.mjs';
+import  SerializableCommand  from './SerializableCommand.mjs';
+/**
+ * A command that duplicates the {@link AbstractComponent}s it's given. This command
+ * is the reverse of an {@link Erase} command.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (0,0) and
+ * // (width,height)=(100,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(0, 0, 100, 100)
+ * );
+ *
+ * // Create a command that, when applied, will duplicate the elements.
+ * const duplicateElems = new Duplicate(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(duplicateElems);
+ * ```
+ *
+ * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ */
+var Duplicate = /** @class */ (function (_super) {
+    __extends(Duplicate, _super);
+    function Duplicate(toDuplicate) {
+        var _this = _super.call(this, 'duplicate') || this;
+        _this.toDuplicate = toDuplicate;
+        _this.duplicates = toDuplicate.map(function (elem) { return elem.clone(); });
+        _this.reverse = new Erase(_this.duplicates);
+        return _this;
+    }
+    Duplicate.prototype.apply = function (editor) {
+        this.reverse.unapply(editor);
+    };
+    Duplicate.prototype.unapply = function (editor) {
+        this.reverse.apply(editor);
+    };
+    Duplicate.prototype.onDrop = function (editor) {
+        this.reverse.onDrop(editor);
+    };
+    Duplicate.prototype.description = function (_editor, localizationTable) {
+        var _a;
+        if (this.duplicates.length === 0) {
+            return localizationTable.duplicatedNoElements;
+        }
+        return localizationTable.duplicateAction((_a = describeComponentList(localizationTable, this.duplicates)) !== null && _a !== void 0 ? _a : localizationTable.elements, this.duplicates.length);
+    };
+    Duplicate.prototype.serializeToJSON = function () {
+        return this.toDuplicate.map(function (elem) { return elem.getId(); });
+    };
+    return Duplicate;
+}(SerializableCommand));
+(function () {
+    SerializableCommand.register('duplicate', function (json, editor) {
+        var elems = json.map(function (id) { return editor.image.lookupElement(id); });
+        return new Duplicate(elems);
+    });
+})();
+export default Duplicate;