js-draw 0.18.1 → 0.18.2

package/dist/cjs/src/UndoRedoHistory.js

@@ -0,0 +1,93 @@
+"use strict";
+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;
+Object.defineProperty(exports, "__esModule", { value: true });
+const types_1 = require("./types");
+class UndoRedoHistory {
+    // @internal
+    constructor(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");
+    }
+    fireUpdateEvent(stackUpdateType, triggeringCommand) {
+        this.editor.notifier.dispatch(types_1.EditorEventType.UndoRedoStackUpdated, {
+            kind: types_1.EditorEventType.UndoRedoStackUpdated,
+            undoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length,
+            redoStackSize: __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length,
+            command: triggeringCommand,
+            stackUpdateType,
+        });
+    }
+    // Adds the given command to this and applies it to the editor.
+    push(command, apply = true) {
+        if (apply) {
+            command.apply(this.editor);
+        }
+        __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").push(command);
+        for (const elem of __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f")) {
+            elem.onDrop(this.editor);
+        }
+        __classPrivateFieldSet(this, _UndoRedoHistory_redoStack, [], "f");
+        if (__classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length > this.maxUndoRedoStackSize) {
+            const removeAtOnceCount = Math.ceil(this.maxUndoRedoStackSize / 100);
+            const removedElements = __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").splice(0, removeAtOnceCount);
+            removedElements.forEach(elem => elem.onDrop(this.editor));
+        }
+        this.fireUpdateEvent(types_1.UndoEventType.CommandDone, command);
+        this.editor.notifier.dispatch(types_1.EditorEventType.CommandDone, {
+            kind: types_1.EditorEventType.CommandDone,
+            command,
+        });
+    }
+    // Remove the last command from this' undo stack and apply it.
+    undo() {
+        const 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(types_1.UndoEventType.CommandUndone, command);
+            this.editor.notifier.dispatch(types_1.EditorEventType.CommandUndone, {
+                kind: types_1.EditorEventType.CommandUndone,
+                command,
+            });
+        }
+    }
+    redo() {
+        const 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(types_1.UndoEventType.CommandRedone, command);
+            this.editor.notifier.dispatch(types_1.EditorEventType.CommandDone, {
+                kind: types_1.EditorEventType.CommandDone,
+                command,
+            });
+        }
+    }
+    get undoStackSize() {
+        return __classPrivateFieldGet(this, _UndoRedoHistory_undoStack, "f").length;
+    }
+    get redoStackSize() {
+        return __classPrivateFieldGet(this, _UndoRedoHistory_redoStack, "f").length;
+    }
+}
+_UndoRedoHistory_undoStack = new WeakMap(), _UndoRedoHistory_redoStack = new WeakMap();
+exports.default = UndoRedoHistory;

package/dist/cjs/src/Viewport.d.ts

@@ -0,0 +1,71 @@
+import Command from './commands/Command';
+import Mat33 from './math/Mat33';
+import Rect2 from './math/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;
+    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/cjs/src/Viewport.js

@@ -0,0 +1,264 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _inverseTransform, _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Viewport = exports.ViewportTransform = void 0;
+const Command_1 = __importDefault(require("./commands/Command"));
+const Mat33_1 = __importDefault(require("./math/Mat33"));
+const Rect2_1 = __importDefault(require("./math/Rect2"));
+const Vec2_1 = require("./math/Vec2");
+const Vec3_1 = __importDefault(require("./math/Vec3"));
+class ViewportTransform extends Command_1.default {
+}
+exports.ViewportTransform = ViewportTransform;
+class Viewport {
+    // @internal
+    constructor(onTransformChangeCallback) {
+        this.onTransformChangeCallback = onTransformChangeCallback;
+        this.resetTransform(Mat33_1.default.identity);
+        this.screenRect = Rect2_1.default.empty;
+    }
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone() {
+        const result = new Viewport(() => { });
+        result.transform = this.transform;
+        result.inverseTransform = this.inverseTransform;
+        result.screenRect = this.screenRect;
+        return result;
+    }
+    // @internal
+    updateScreenSize(screenSize) {
+        this.screenRect = this.screenRect.resizedTo(screenSize);
+    }
+    /** Get the screen's visible region transformed into canvas space. */
+    get visibleRect() {
+        return this.screenRect.transformedBoundingBox(this.inverseTransform);
+    }
+    /** @returns the given point, but in canvas coordinates */
+    screenToCanvas(screenPoint) {
+        return this.inverseTransform.transformVec2(screenPoint);
+    }
+    /** @returns the given point transformed into screen coordinates. */
+    canvasToScreen(canvasPoint) {
+        return this.transform.transformVec2(canvasPoint);
+    }
+    /** @returns a command that transforms the canvas by `transform`. */
+    static transformBy(transform) {
+        return new Viewport.ViewportTransform(transform);
+    }
+    /**
+     * Updates the transformation directly. Using `transformBy` is preferred.
+     * @param newTransform - should map from canvas coordinates to screen coordinates.
+     */
+    resetTransform(newTransform = Mat33_1.default.identity) {
+        var _a;
+        const oldTransform = this.transform;
+        this.transform = newTransform;
+        this.inverseTransform = newTransform.inverse();
+        (_a = this.onTransformChangeCallback) === null || _a === void 0 ? void 0 : _a.call(this, oldTransform, newTransform);
+    }
+    get screenToCanvasTransform() {
+        return this.inverseTransform;
+    }
+    get canvasToScreenTransform() {
+        return this.transform;
+    }
+    /** @returns the size of the visible region in pixels. */
+    getScreenRectSize() {
+        return this.screenRect.size;
+    }
+    /** Alias for `getScreenRectSize`. @deprecated */
+    getResolution() {
+        return this.getScreenRectSize();
+    }
+    /** @returns the amount a vector on the canvas is scaled to become a vector on the screen. */
+    getScaleFactor() {
+        // Use transformVec3 to avoid translating the vector
+        return this.transform.transformVec3(Vec3_1.default.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.
+     */
+    getScaleFactorToNearestPowerOfTen() {
+        return this.getScaleFactorToNearestPowerOf(10);
+    }
+    getScaleFactorToNearestPowerOf(powerOf) {
+        const scaleFactor = this.getScaleFactor();
+        return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
+    }
+    snapToGrid(canvasPos) {
+        const snapCoordinate = (coordinate) => {
+            const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
+            const roundFactor = scaleFactor / 50;
+            const snapped = Math.round(coordinate * roundFactor) / roundFactor;
+            return snapped;
+        };
+        const snappedCanvasPos = Vec2_1.Vec2.of(snapCoordinate(canvasPos.x), snapCoordinate(canvasPos.y));
+        return snappedCanvasPos;
+    }
+    /** Returns the size of one screen pixel in canvas units. */
+    getSizeOfPixelOnCanvas() {
+        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.
+     */
+    getRotationAngle() {
+        return this.transform.transformVec3(Vec3_1.default.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
+    static roundPoint(point, tolerance) {
+        const scaleFactor = Math.pow(10, Math.floor(Math.log10(tolerance)));
+        const roundComponent = (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.
+    roundPoint(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).
+    static roundScaleRatio(scaleRatio, roundAmount = 1) {
+        if (Math.abs(scaleRatio) <= 1e-12) {
+            return 0;
+        }
+        // Represent as k 10ⁿ for some n, k ∈ ℤ.
+        const decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
+        const 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.
+    computeZoomToTransform(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
+        let transform = Mat33_1.default.identity;
+        if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
+            throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
+        }
+        if (isNaN(toMakeVisible.size.magnitude())) {
+            throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
+        }
+        // Try to move the selection within the center 4/5ths of the viewport.
+        const recomputeTargetRect = () => {
+            // transform transforms objects on the canvas. As such, we need to invert it
+            // to transform the viewport.
+            const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+            return visibleRect.transformedBoundingBox(Mat33_1.default.scaling2D(4 / 5, visibleRect.center));
+        };
+        let targetRect = recomputeTargetRect();
+        const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+        // Ensure that toMakeVisible is at least 1/3rd of the visible region.
+        const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1 / 3;
+        if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
+            const multiplier = Math.max(toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h);
+            const visibleRectTransform = Mat33_1.default.scaling2D(multiplier, targetRect.topLeft);
+            const 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
+            const translation = toMakeVisible.center.minus(targetRect.center);
+            const visibleRectTransform = Mat33_1.default.translation(translation);
+            const viewportContentTransform = visibleRectTransform.inverse();
+            transform = transform.rightMul(viewportContentTransform);
+        }
+        if (!transform.invertable()) {
+            console.warn('Unable to zoom to ', toMakeVisible, '! Computed transform', transform, 'is singular.');
+            transform = Mat33_1.default.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}
+    zoomTo(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
+        const transform = this.computeZoomToTransform(toMakeVisible, allowZoomIn, allowZoomOut);
+        return new Viewport.ViewportTransform(transform);
+    }
+}
+exports.Viewport = Viewport;
+// Command that translates/scales the viewport.
+Viewport.ViewportTransform = (_a = class extends ViewportTransform {
+        constructor(transform) {
+            super();
+            this.transform = transform;
+            _inverseTransform.set(this, void 0);
+            __classPrivateFieldSet(this, _inverseTransform, transform.inverse(), "f");
+        }
+        apply(editor) {
+            const viewport = editor.viewport;
+            viewport.resetTransform(viewport.transform.rightMul(this.transform));
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            const viewport = editor.viewport;
+            viewport.resetTransform(viewport.transform.rightMul(__classPrivateFieldGet(this, _inverseTransform, "f")));
+            editor.queueRerender();
+        }
+        description(editor, localizationTable) {
+            const 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.
+            const origVec = editor.viewport.visibleRect.center;
+            const linearTransformedVec = this.transform.transformVec3(Vec2_1.Vec2.unitX);
+            const affineTransformedVec = this.transform.transformVec2(origVec);
+            const scale = linearTransformedVec.magnitude();
+            const rotation = 180 / Math.PI * linearTransformedVec.angle();
+            const 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)));
+            }
+            const 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('; ');
+        }
+    },
+    _inverseTransform = new WeakMap(),
+    _a);
+exports.default = Viewport;

package/dist/cjs/src/bundle/bundled.d.ts

@@ -0,0 +1,4 @@
+import '../styles';
+import Editor from '../Editor';
+export * from '../lib';
+export default Editor;

package/dist/cjs/src/bundle/bundled.js

@@ -0,0 +1,24 @@
+"use strict";
+// Main entrypoint for Webpack when building a bundle for release.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../styles");
+const Editor_1 = __importDefault(require("../Editor"));
+__exportStar(require("../lib"), exports);
+exports.default = Editor_1.default;

package/dist/cjs/src/commands/Command.d.ts

@@ -0,0 +1,16 @@
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+export declare abstract class Command {
+    abstract apply(editor: Editor): Promise<void> | void;
+    abstract unapply(editor: Editor): Promise<void> | void;
+    onDrop(_editor: Editor): void;
+    abstract description(editor: Editor, localizationTable: EditorLocalization): string;
+    static union(a: Command, b: Command): Command;
+    static readonly empty: {
+        description(_editor: Editor, _localizationTable: EditorLocalization): string;
+        apply(_editor: Editor): void;
+        unapply(_editor: Editor): void;
+        onDrop(_editor: Editor): void;
+    };
+}
+export default Command;

package/dist/cjs/src/commands/Command.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Command = void 0;
+class Command {
+    // Called when the command is being deleted
+    onDrop(_editor) { }
+    static union(a, b) {
+        return new class extends Command {
+            apply(editor) {
+                a.apply(editor);
+                b.apply(editor);
+            }
+            unapply(editor) {
+                b.unapply(editor);
+                a.unapply(editor);
+            }
+            description(editor, localizationTable) {
+                const aDescription = a.description(editor, localizationTable);
+                const bDescription = b.description(editor, localizationTable);
+                if (aDescription === bDescription) {
+                    return aDescription;
+                }
+                return `${aDescription}, ${bDescription}`;
+            }
+        };
+    }
+}
+exports.Command = Command;
+Command.empty = new class extends Command {
+    description(_editor, _localizationTable) { return ''; }
+    apply(_editor) { }
+    unapply(_editor) { }
+};
+exports.default = Command;

package/dist/cjs/src/commands/Duplicate.d.ts

@@ -0,0 +1,14 @@
+import AbstractComponent from '../components/AbstractComponent';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import SerializableCommand from './SerializableCommand';
+export default class Duplicate extends SerializableCommand {
+    private toDuplicate;
+    private duplicates;
+    private reverse;
+    constructor(toDuplicate: AbstractComponent[]);
+    apply(editor: Editor): void;
+    unapply(editor: Editor): void;
+    description(_editor: Editor, localizationTable: EditorLocalization): string;
+    protected serializeToJSON(): string[];
+}

package/dist/cjs/src/commands/Duplicate.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const describeComponentList_1 = __importDefault(require("../components/util/describeComponentList"));
+const Erase_1 = __importDefault(require("./Erase"));
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+class Duplicate extends SerializableCommand_1.default {
+    constructor(toDuplicate) {
+        super('duplicate');
+        this.toDuplicate = toDuplicate;
+        this.duplicates = toDuplicate.map(elem => elem.clone());
+        this.reverse = new Erase_1.default(this.duplicates);
+    }
+    apply(editor) {
+        this.reverse.unapply(editor);
+    }
+    unapply(editor) {
+        this.reverse.apply(editor);
+    }
+    description(_editor, localizationTable) {
+        var _a;
+        if (this.duplicates.length === 0) {
+            return localizationTable.duplicatedNoElements;
+        }
+        return localizationTable.duplicateAction((_a = (0, describeComponentList_1.default)(localizationTable, this.duplicates)) !== null && _a !== void 0 ? _a : localizationTable.elements, this.duplicates.length);
+    }
+    serializeToJSON() {
+        return this.toDuplicate.map(elem => elem.getId());
+    }
+}
+exports.default = Duplicate;
+(() => {
+    SerializableCommand_1.default.register('duplicate', (json, editor) => {
+        const elems = json.map((id) => editor.image.lookupElement(id));
+        return new Duplicate(elems);
+    });
+})();

package/dist/cjs/src/commands/Erase.d.ts

@@ -0,0 +1,14 @@
+import AbstractComponent from '../components/AbstractComponent';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import SerializableCommand from './SerializableCommand';
+export default class Erase extends SerializableCommand {
+    private toRemove;
+    private applied;
+    constructor(toRemove: AbstractComponent[]);
+    apply(editor: Editor): void;
+    unapply(editor: Editor): void;
+    onDrop(editor: Editor): void;
+    description(_editor: Editor, localizationTable: EditorLocalization): string;
+    protected serializeToJSON(): string[];
+}

package/dist/cjs/src/commands/Erase.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const describeComponentList_1 = __importDefault(require("../components/util/describeComponentList"));
+const EditorImage_1 = __importDefault(require("../EditorImage"));
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+class Erase extends SerializableCommand_1.default {
+    constructor(toRemove) {
+        super('erase');
+        // Clone the list
+        this.toRemove = toRemove.map(elem => elem);
+        this.applied = false;
+    }
+    apply(editor) {
+        for (const part of this.toRemove) {
+            const parent = editor.image.findParent(part);
+            if (parent) {
+                parent.remove();
+            }
+        }
+        this.applied = true;
+        editor.queueRerender();
+    }
+    unapply(editor) {
+        for (const part of this.toRemove) {
+            if (!editor.image.findParent(part)) {
+                EditorImage_1.default.addElement(part).apply(editor);
+            }
+        }
+        this.applied = false;
+        editor.queueRerender();
+    }
+    onDrop(editor) {
+        if (this.applied) {
+            for (const part of this.toRemove) {
+                editor.image.onDestroyElement(part);
+            }
+        }
+    }
+    description(_editor, localizationTable) {
+        var _a;
+        if (this.toRemove.length === 0) {
+            return localizationTable.erasedNoElements;
+        }
+        const description = (_a = (0, describeComponentList_1.default)(localizationTable, this.toRemove)) !== null && _a !== void 0 ? _a : localizationTable.elements;
+        return localizationTable.eraseAction(description, this.toRemove.length);
+    }
+    serializeToJSON() {
+        const elemIds = this.toRemove.map(elem => elem.getId());
+        return elemIds;
+    }
+}
+exports.default = Erase;
+(() => {
+    SerializableCommand_1.default.register('erase', (json, editor) => {
+        const elems = json
+            .map((elemId) => editor.image.lookupElement(elemId))
+            .filter((elem) => elem !== null);
+        return new Erase(elems);
+    });
+})();

package/dist/cjs/src/commands/SerializableCommand.d.ts

@@ -0,0 +1,12 @@
+import Editor from '../Editor';
+import Command from './Command';
+export type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
+export default abstract class SerializableCommand extends Command {
+    private commandTypeId;
+    constructor(commandTypeId: string);
+    protected abstract serializeToJSON(): string | Record<string, any> | any[];
+    private static deserializationCallbacks;
+    serialize(): Record<string | symbol, any>;
+    static deserialize(data: string | Record<string, any>, editor: Editor): SerializableCommand;
+    static register(commandTypeId: string, deserialize: DeserializationCallback): void;
+}