js-draw 0.1.4 → 0.1.7

package/dist/src/Color4.js

@@ -8,9 +8,13 @@ export default class Color4 {
     }
     // Each component should be in the range [0, 1]
     static ofRGB(red, green, blue) {
-        return new Color4(red, green, blue, 1.0);
+        return Color4.ofRGBA(red, green, blue, 1.0);
     }
     static ofRGBA(red, green, blue, alpha) {
+        red = Math.max(0, Math.min(red, 1));
+        green = Math.max(0, Math.min(green, 1));
+        blue = Math.max(0, Math.min(blue, 1));
+        alpha = Math.max(0, Math.min(alpha, 1));
         return new Color4(red, green, blue, alpha);
     }
     static fromHex(hexString) {
@@ -40,7 +44,7 @@ export default class Color4 {
         if (components.length !== 4) {
             throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
         }
-        return new Color4(components[0], components[1], components[2], components[3]);
+        return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
     }
     // Like fromHex, but can handle additional colors if an HTML5Canvas is available.
     static fromString(text) {

package/dist/src/Editor.d.ts

@@ -38,6 +38,7 @@ export declare class Editor {
     addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
     dispatch(command: Command, addToHistory?: boolean): void;
+    dispatchNoAnnounce(command: Command, addToHistory?: boolean): void;
     private asyncApplyOrUnapplyCommands;
     asyncApplyCommands(commands: Command[], chunkSize: number): Promise<void>;
     asyncUnapplyCommands(commands: Command[], chunkSize: number): Promise<void>;

package/dist/src/Editor.js

@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
 import { InputEvtType, EditorEventType } from './types';
+import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import EventDispatcher from './EventDispatcher';
@@ -69,7 +70,7 @@ export class Editor {
         this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
         this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
         this.registerListeners();
-        this.rerender();
+        this.queueRerender();
         this.hideLoadingWarning();
     }
     // Returns a reference to this' container.
@@ -211,7 +212,7 @@ export class Editor {
             if (evt.ctrlKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
-            const pos = Vec2.of(evt.clientX, evt.clientY);
+            const pos = Vec2.of(evt.offsetX, evt.offsetY);
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
                 delta,
@@ -233,6 +234,7 @@ export class Editor {
             this.queueRerender();
         });
     }
+    // Adds to history by default
     dispatch(command, addToHistory = true) {
         if (addToHistory) {
             // .push applies [command] to this
@@ -243,6 +245,15 @@ export class Editor {
         }
         this.announceForAccessibility(command.description(this.localization));
     }
+    // Dispatches a command without announcing it. By default, does not add to history.
+    dispatchNoAnnounce(command, addToHistory = false) {
+        if (addToHistory) {
+            this.history.push(command);
+        }
+        else {
+            command.apply(this);
+        }
+    }
     // Apply a large transformation in chunks.
     // If [apply] is false, the commands are unapplied.
     // Triggers a re-render after each [updateChunkSize]-sized group of commands
@@ -365,7 +376,7 @@ export class Editor {
             this.showLoadingWarning(0);
             this.display.setDraftMode(true);
             yield loader.start((component) => {
-                (new EditorImage.AddElementCommand(component)).apply(this);
+                this.dispatchNoAnnounce(EditorImage.addElement(component));
             }, (countProcessed, totalToProcess) => {
                 if (countProcessed % 500 === 0) {
                     this.showLoadingWarning(countProcessed / totalToProcess);
@@ -376,8 +387,8 @@ export class Editor {
                 }
                 return null;
             }, (importExportRect) => {
-                this.setImportExportRect(importExportRect).apply(this);
-                this.viewport.zoomTo(importExportRect).apply(this);
+                this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
+                this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
             });
             this.hideLoadingWarning();
             this.display.setDraftMode(false);
@@ -392,22 +403,22 @@ export class Editor {
     setImportExportRect(imageRect) {
         const origSize = this.importExportViewport.visibleRect.size;
         const origTransform = this.importExportViewport.canvasToScreenTransform;
-        return {
+        return new class extends Command {
             apply(editor) {
                 const viewport = editor.importExportViewport;
                 viewport.updateScreenSize(imageRect.size);
                 viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
                 editor.queueRerender();
-            },
+            }
             unapply(editor) {
                 const viewport = editor.importExportViewport;
                 viewport.updateScreenSize(origSize);
                 viewport.resetTransform(origTransform);
                 editor.queueRerender();
-            },
+            }
             description(localizationTable) {
                 return localizationTable.resizeOutputCommand(imageRect);
-            },
+            }
         };
     }
     // Alias for loadFrom(SVGLoader.fromString).

package/dist/src/EditorImage.d.ts

@@ -1,31 +1,25 @@
-import Editor from './Editor';
 import AbstractRenderer from './rendering/renderers/AbstractRenderer';
+import Command from './commands/Command';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
-import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export default class EditorImage {
     private root;
+    private componentsById;
     constructor();
-    private addElement;
     findParent(elem: AbstractComponent): ImageNode | null;
     renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
     render(renderer: AbstractRenderer, viewport: Viewport): void;
     renderAll(renderer: AbstractRenderer): void;
     getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
-    static AddElementCommand: {
-        new (element: AbstractComponent, applyByFlattening?: boolean): {
-            readonly "__#679@#element": AbstractComponent;
-            "__#679@#applyByFlattening": boolean;
-            apply(editor: Editor): void;
-            unapply(editor: Editor): void;
-            description(localization: EditorLocalization): string;
-        };
-    };
+    onDestroyElement(elem: AbstractComponent): void;
+    lookupElement(id: string): AbstractComponent | null;
+    private addElementDirectly;
+    static addElement(elem: AbstractComponent, applyByFlattening?: boolean): Command;
+    private static AddElementCommand;
 }
-export declare type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
 declare type TooSmallToRenderCheck = (rect: Rect2) => boolean;
 export declare class ImageNode {
     private parent;
@@ -47,6 +41,7 @@ export declare class ImageNode {
     addLeaf(leaf: AbstractComponent): ImageNode;
     getBBox(): Rect2;
     recomputeBBox(bubbleUp: boolean): void;
+    private updateParents;
     private rebalance;
     remove(): void;
     render(renderer: AbstractRenderer, visibleRect: Rect2): void;

package/dist/src/EditorImage.js

@@ -1,16 +1,7 @@
-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 _element, _applyByFlattening, _a;
+var _a;
+import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
+import SerializableCommand from './commands/SerializableCommand';
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
 };
@@ -18,9 +9,7 @@ export const sortLeavesByZIndex = (leaves) => {
 export default class EditorImage {
     constructor() {
         this.root = new ImageNode();
-    }
-    addElement(elem) {
-        return this.root.addLeaf(elem);
+        this.componentsById = {};
     }
     // Returns the parent of the given element, if it exists.
     findParent(elem) {
@@ -51,42 +40,65 @@ export default class EditorImage {
         sortLeavesByZIndex(leaves);
         return leaves.map(leaf => leaf.getContent());
     }
+    onDestroyElement(elem) {
+        delete this.componentsById[elem.getId()];
+    }
+    lookupElement(id) {
+        var _a;
+        return (_a = this.componentsById[id]) !== null && _a !== void 0 ? _a : null;
+    }
+    addElementDirectly(elem) {
+        this.componentsById[elem.getId()] = elem;
+        return this.root.addLeaf(elem);
+    }
+    static addElement(elem, applyByFlattening = false) {
+        return new EditorImage.AddElementCommand(elem, applyByFlattening);
+    }
 }
 // A Command that can access private [EditorImage] functionality
-EditorImage.AddElementCommand = (_a = class {
+EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
         // If [applyByFlattening], then the rendered content of this element
         // is present on the display's wet ink canvas. As such, no re-render is necessary
         // the first time this command is applied (the surfaces are joined instead).
         constructor(element, applyByFlattening = false) {
-            _element.set(this, void 0);
-            _applyByFlattening.set(this, false);
-            __classPrivateFieldSet(this, _element, element, "f");
-            __classPrivateFieldSet(this, _applyByFlattening, applyByFlattening, "f");
-            if (isNaN(__classPrivateFieldGet(this, _element, "f").getBBox().area)) {
+            super('add-element');
+            this.element = element;
+            this.applyByFlattening = applyByFlattening;
+            if (isNaN(element.getBBox().area)) {
                 throw new Error('Elements in the image cannot have NaN bounding boxes');
             }
         }
         apply(editor) {
-            editor.image.addElement(__classPrivateFieldGet(this, _element, "f"));
-            if (!__classPrivateFieldGet(this, _applyByFlattening, "f")) {
+            editor.image.addElementDirectly(this.element);
+            if (!this.applyByFlattening) {
                 editor.queueRerender();
             }
             else {
-                __classPrivateFieldSet(this, _applyByFlattening, false, "f");
+                this.applyByFlattening = false;
                 editor.display.flatten();
             }
         }
         unapply(editor) {
-            const container = editor.image.findParent(__classPrivateFieldGet(this, _element, "f"));
+            const container = editor.image.findParent(this.element);
             container === null || container === void 0 ? void 0 : container.remove();
             editor.queueRerender();
         }
         description(localization) {
-            return localization.addElementAction(__classPrivateFieldGet(this, _element, "f").description(localization));
+            return localization.addElementAction(this.element.description(localization));
+        }
+        serializeToString() {
+            return JSON.stringify({
+                elemData: this.element.serialize(),
+            });
         }
     },
-    _element = new WeakMap(),
-    _applyByFlattening = new WeakMap(),
+    (() => {
+        SerializableCommand.register('add-element', (data, _editor) => {
+            const json = JSON.parse(data);
+            const elem = AbstractComponent.deserialize(json.elemData);
+            return new EditorImage.AddElementCommand(elem);
+        });
+    })(),
     _a);
 // TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
 export class ImageNode {
@@ -174,6 +186,7 @@ export class ImageNode {
             nodeForChildren.children = this.children;
             this.children = [nodeForNewLeaf, nodeForChildren];
             nodeForChildren.recomputeBBox(true);
+            nodeForChildren.updateParents();
             return nodeForNewLeaf.addLeaf(leaf);
         }
         const containingNodes = this.children.filter(child => child.getBBox().containsRect(leafBBox));
@@ -221,6 +234,14 @@ export class ImageNode {
             (_a = this.parent) === null || _a === void 0 ? void 0 : _a.recomputeBBox(true);
         }
     }
+    updateParents(recursive = false) {
+        for (const child of this.children) {
+            child.parent = this;
+            if (recursive) {
+                child.updateParents(recursive);
+            }
+        }
+    }
     rebalance() {
         // If the current node is its parent's only child,
         if (this.parent && this.parent.children.length === 1) {
@@ -238,6 +259,7 @@ export class ImageNode {
             else if (this.content === null) {
                 // Remove this and transfer this' children to the parent.
                 this.parent.children = this.children;
+                this.parent.updateParents();
                 this.parent = null;
             }
         }
@@ -253,7 +275,7 @@ export class ImageNode {
         this.parent.children = this.parent.children.filter(node => {
             return node !== this;
         });
-        console.assert(this.parent.children.length === oldChildCount - 1);
+        console.assert(this.parent.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`);
         this.parent.children.forEach(child => {
             child.rebalance();
         });

package/dist/src/SVGLoader.js

@@ -162,13 +162,17 @@ export default class SVGLoader {
         }
         const style = {
             size: fontSize,
-            fontFamily: computedStyles.fontFamily || 'sans-serif',
+            fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
             renderingStyle: {
                 fill: Color4.fromString(computedStyles.fill)
             },
         };
+        let transformProperty = computedStyles.transform;
+        if (transformProperty === '' || transformProperty === 'none') {
+            transformProperty = elem.style.transform || 'none';
+        }
         // Compute transform matrix
-        let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+        let transform = Mat33.fromCSSMatrix(transformProperty);
         const supportedAttrs = [];
         const elemX = elem.getAttribute('x');
         const elemY = elem.getAttribute('y');

package/dist/src/Viewport.d.ts

@@ -11,11 +11,19 @@ export declare class Viewport {
     private notifier;
     static ViewportTransform: {
         new (transform: Mat33): {
-            readonly "__#678@#inverseTransform": Mat33;
+            readonly "__#679@#inverseTransform": Mat33;
             readonly transform: Mat33;
             apply(editor: Editor): void;
             unapply(editor: Editor): void;
             description(localizationTable: CommandLocalization): string;
+            onDrop(_editor: Editor): void;
+        };
+        union(a: Command, b: Command): Command;
+        readonly empty: {
+            description(_localizationTable: import("./localization").EditorLocalization): string;
+            apply(_editor: Editor): void;
+            unapply(_editor: Editor): void;
+            onDrop(_editor: Editor): void;
         };
     };
     private transform;
@@ -26,7 +34,7 @@ export declare class Viewport {
     get visibleRect(): Rect2;
     screenToCanvas(screenPoint: Point2): Point2;
     canvasToScreen(canvasPoint: Point2): Point2;
-    resetTransform(newTransform: Mat33): void;
+    resetTransform(newTransform?: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
     getResolution(): Vec2;

package/dist/src/Viewport.js

@@ -10,6 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _inverseTransform, _a;
+import Command from './commands/Command';
 import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
 import { Vec2 } from './geometry/Vec2';
@@ -36,7 +37,7 @@ export class Viewport {
     }
     // Updates the transformation directly. Using ViewportTransform is preferred.
     // [newTransform] should map from canvas coordinates to screen coordinates.
-    resetTransform(newTransform) {
+    resetTransform(newTransform = Mat33.identity) {
         this.transform = newTransform;
         this.inverseTransform = newTransform.inverse();
         this.notifier.dispatch(EditorEventType.ViewportChanged, {
@@ -93,17 +94,17 @@ export class Viewport {
         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 2/3rds of the viewport.
+        // 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.scaling2D(2 / 3, visibleRect.center));
+            return visibleRect.transformedBoundingBox(Mat33.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/8th of the visible region.
-        const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+        // 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)) {
             // If larger than the target, ensure that the longest axis is visible.
             // If smaller, shrink the visible rectangle as much as possible
@@ -129,8 +130,9 @@ export class Viewport {
     }
 }
 // Command that translates/scales the viewport.
-Viewport.ViewportTransform = (_a = class {
+Viewport.ViewportTransform = (_a = class extends Command {
         constructor(transform) {
+            super();
             this.transform = transform;
             _inverseTransform.set(this, void 0);
             __classPrivateFieldSet(this, _inverseTransform, transform.inverse(), "f");

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

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

package/dist/src/commands/Command.js

@@ -1,20 +1,16 @@
-// eslint-disable-next-line no-redeclare
-var Command;
-(function (Command) {
-    Command.empty = {
-        apply(_editor) { },
-        unapply(_editor) { },
-    };
-    Command.union = (a, b) => {
-        return {
+export 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(localizationTable) {
                 const aDescription = a.description(localizationTable);
                 const bDescription = b.description(localizationTable);
@@ -22,8 +18,13 @@ var Command;
                     return aDescription;
                 }
                 return `${aDescription}, ${bDescription}`;
-            },
+            }
         };
-    };
-})(Command || (Command = {}));
+    }
+}
+Command.empty = new class extends Command {
+    description(_localizationTable) { return ''; }
+    apply(_editor) { }
+    unapply(_editor) { }
+};
 export default Command;

package/dist/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(localizationTable: EditorLocalization): string;
+    protected serializeToString(): string;
+}

package/dist/src/commands/Duplicate.js

@@ -0,0 +1,34 @@
+import describeComponentList from '../components/util/describeComponentList';
+import Erase from './Erase';
+import SerializableCommand from './SerializableCommand';
+export default class Duplicate extends SerializableCommand {
+    constructor(toDuplicate) {
+        super('duplicate');
+        this.toDuplicate = toDuplicate;
+        this.duplicates = toDuplicate.map(elem => elem.clone());
+        this.reverse = new Erase(this.duplicates);
+    }
+    apply(editor) {
+        this.reverse.unapply(editor);
+    }
+    unapply(editor) {
+        this.reverse.apply(editor);
+    }
+    description(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);
+    }
+    serializeToString() {
+        return JSON.stringify(this.toDuplicate.map(elem => elem.getId()));
+    }
+}
+(() => {
+    SerializableCommand.register('duplicate', (data, editor) => {
+        const json = JSON.parse(data);
+        const elems = json.map((id) => editor.image.lookupElement(id));
+        return new Duplicate(elems);
+    });
+})();

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

@@ -1,11 +1,14 @@
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
-import Command from './Command';
-export default class Erase implements Command {
+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(localizationTable: EditorLocalization): string;
+    protected serializeToString(): string;
 }

package/dist/src/commands/Erase.js

@@ -1,8 +1,12 @@
+import describeComponentList from '../components/util/describeComponentList';
 import EditorImage from '../EditorImage';
-export default class Erase {
+import SerializableCommand from './SerializableCommand';
+export default class Erase extends SerializableCommand {
     constructor(toRemove) {
+        super('erase');
         // Clone the list
         this.toRemove = toRemove.map(elem => elem);
+        this.applied = false;
     }
     apply(editor) {
         for (const part of this.toRemove) {
@@ -11,27 +15,42 @@ export default class Erase {
                 parent.remove();
             }
         }
+        this.applied = true;
         editor.queueRerender();
     }
     unapply(editor) {
         for (const part of this.toRemove) {
             if (!editor.image.findParent(part)) {
-                new EditorImage.AddElementCommand(part).apply(editor);
+                EditorImage.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(localizationTable) {
+        var _a;
         if (this.toRemove.length === 0) {
             return localizationTable.erasedNoElements;
         }
-        let description = this.toRemove[0].description(localizationTable);
-        for (const elem of this.toRemove) {
-            if (elem.description(localizationTable) !== description) {
-                description = localizationTable.elements;
-                break;
-            }
-        }
+        const description = (_a = describeComponentList(localizationTable, this.toRemove)) !== null && _a !== void 0 ? _a : localizationTable.elements;
         return localizationTable.eraseAction(description, this.toRemove.length);
     }
+    serializeToString() {
+        const elemIds = this.toRemove.map(elem => elem.getId());
+        return JSON.stringify(elemIds);
+    }
 }
+(() => {
+    SerializableCommand.register('erase', (data, editor) => {
+        const json = JSON.parse(data);
+        const elems = json.map((elemId) => editor.image.lookupElement(elemId));
+        return new Erase(elems);
+    });
+})();

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

@@ -0,0 +1,13 @@
+import Editor from '../Editor';
+import Command from './Command';
+declare type DeserializationCallback = (data: string, editor: Editor) => SerializableCommand;
+export default abstract class SerializableCommand extends Command {
+    private commandTypeId;
+    constructor(commandTypeId: string);
+    protected abstract serializeToString(): string;
+    private static deserializationCallbacks;
+    serialize(): string;
+    static deserialize(data: string, editor: Editor): SerializableCommand;
+    static register(commandTypeId: string, deserialize: DeserializationCallback): void;
+}
+export {};