js-draw 0.3.0 → 0.3.2

package/dist/src/Editor.d.ts

@@ -94,6 +94,7 @@ export declare class Editor {
     private loadingWarning;
     private accessibilityAnnounceArea;
     private accessibilityControlArea;
+    private eventListenerTargets;
     private settings;
     /**
      * @example
@@ -139,6 +140,8 @@ export declare class Editor {
      */
     addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
+    private isEventSink;
+    private handlePaste;
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */
@@ -191,6 +194,6 @@ export declare class Editor {
      * This is particularly useful when accessing a bundled version of the editor,
      * where `SVGLoader.fromString` is unavailable.
      */
-    loadFromSVG(svgData: string): Promise<void>;
+    loadFromSVG(svgData: string, sanitize?: boolean): Promise<void>;
 }
 export default Editor;

package/dist/src/Editor.js

@@ -68,6 +68,7 @@ export class Editor {
      */
     constructor(parent, settings = {}) {
         var _a, _b, _c, _d;
+        this.eventListenerTargets = [];
         this.previousAccessibilityAnnouncement = '';
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
@@ -305,6 +306,110 @@ export class Editor {
         this.accessibilityControlArea.addEventListener('input', () => {
             this.accessibilityControlArea.value = '';
         });
+        document.addEventListener('copy', evt => {
+            if (!this.isEventSink(document.querySelector(':focus'))) {
+                return;
+            }
+            const clipboardData = evt.clipboardData;
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.CopyEvent,
+                setData: (mime, data) => {
+                    clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.setData(mime, data);
+                },
+            })) {
+                evt.preventDefault();
+            }
+        });
+        document.addEventListener('paste', evt => {
+            this.handlePaste(evt);
+        });
+    }
+    isEventSink(evtTarget) {
+        let currentElem = evtTarget;
+        while (currentElem !== null) {
+            for (const elem of this.eventListenerTargets) {
+                if (elem === currentElem) {
+                    return true;
+                }
+            }
+            currentElem = currentElem.parentElement;
+        }
+        return false;
+    }
+    handlePaste(evt) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const target = (_a = document.querySelector(':focus')) !== null && _a !== void 0 ? _a : evt.target;
+            if (!this.isEventSink(target)) {
+                return;
+            }
+            const clipboardData = (_b = evt.dataTransfer) !== null && _b !== void 0 ? _b : evt.clipboardData;
+            if (!clipboardData) {
+                return;
+            }
+            // Handle SVG files (prefer to PNG/JPEG)
+            for (const file of clipboardData.files) {
+                if (file.type.toLowerCase() === 'image/svg+xml') {
+                    const text = yield file.text();
+                    if (this.toolController.dispatchInputEvent({
+                        kind: InputEvtType.PasteEvent,
+                        mime: file.type,
+                        data: text,
+                    })) {
+                        evt.preventDefault();
+                        return;
+                    }
+                }
+            }
+            // Handle image files.
+            for (const file of clipboardData.files) {
+                const fileType = file.type.toLowerCase();
+                if (fileType === 'image/png' || fileType === 'image/jpg') {
+                    const reader = new FileReader();
+                    this.showLoadingWarning(0);
+                    try {
+                        const data = yield new Promise((resolve, reject) => {
+                            reader.onload = () => resolve(reader.result);
+                            reader.onerror = reject;
+                            reader.onabort = reject;
+                            reader.onprogress = (evt) => {
+                                this.showLoadingWarning(evt.loaded / evt.total);
+                            };
+                            reader.readAsDataURL(file);
+                        });
+                        if (data && this.toolController.dispatchInputEvent({
+                            kind: InputEvtType.PasteEvent,
+                            mime: fileType,
+                            data: data,
+                        })) {
+                            evt.preventDefault();
+                            this.hideLoadingWarning();
+                            return;
+                        }
+                    }
+                    catch (e) {
+                        console.error('Error reading image:', e);
+                    }
+                    this.hideLoadingWarning();
+                }
+            }
+            // Supported MIMEs for text data, in order of preference
+            const supportedMIMEs = [
+                'image/svg+xml',
+                'text/plain',
+            ];
+            for (const mime of supportedMIMEs) {
+                const data = clipboardData.getData(mime);
+                if (data && this.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PasteEvent,
+                    mime,
+                    data,
+                })) {
+                    evt.preventDefault();
+                    return;
+                }
+            }
+        });
     }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {
@@ -333,6 +438,15 @@ export class Editor {
                 evt.preventDefault();
             }
         });
+        // Allow drop.
+        elem.ondragover = evt => {
+            evt.preventDefault();
+        };
+        elem.ondrop = evt => {
+            evt.preventDefault();
+            this.handlePaste(evt);
+        };
+        this.eventListenerTargets.push(elem);
     }
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
@@ -376,6 +490,7 @@ export class Editor {
      */
     asyncApplyOrUnapplyCommands(commands, apply, updateChunkSize) {
         return __awaiter(this, void 0, void 0, function* () {
+            console.assert(updateChunkSize > 0);
             this.display.setDraftMode(true);
             for (let i = 0; i < commands.length; i += updateChunkSize) {
                 this.showLoadingWarning(i / commands.length);
@@ -553,9 +668,9 @@ export class Editor {
      * This is particularly useful when accessing a bundled version of the editor,
      * where `SVGLoader.fromString` is unavailable.
      */
-    loadFromSVG(svgData) {
+    loadFromSVG(svgData, sanitize = false) {
         return __awaiter(this, void 0, void 0, function* () {
-            const loader = SVGLoader.fromString(svgData);
+            const loader = SVGLoader.fromString(svgData, sanitize);
             yield this.loadFrom(loader);
         });
     }

package/dist/src/EditorImage.js

@@ -69,6 +69,9 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             super('add-element');
             this.element = element;
             this.applyByFlattening = applyByFlattening;
+            // Store the element's serialization --- .serializeToJSON may be called on this
+            // even when this is not at the top of the undo/redo stack.
+            this.serializedElem = element.serialize();
             if (isNaN(element.getBBox().area)) {
                 throw new Error('Elements in the image cannot have NaN bounding boxes');
             }
@@ -93,7 +96,7 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
         }
         serializeToJSON() {
             return {
-                elemData: this.element.serialize(),
+                elemData: this.serializedElem,
             };
         }
     },

package/dist/src/SVGLoader.d.ts

@@ -12,6 +12,7 @@ export declare type SVGLoaderUnknownStyleAttribute = {
 export default class SVGLoader implements ImageLoader {
     private source;
     private onFinish?;
+    private readonly storeUnknown;
     private onAddComponent;
     private onProgress;
     private onDetermineExportRect;
@@ -23,13 +24,15 @@ export default class SVGLoader implements ImageLoader {
     private strokeDataFromElem;
     private attachUnrecognisedAttrs;
     private addPath;
+    private getTransform;
     private makeText;
     private addText;
+    private addImage;
     private addUnknownNode;
     private updateViewBox;
     private updateSVGAttrs;
     private visit;
     private getSourceAttrs;
     start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener | null): Promise<void>;
-    static fromString(text: string): SVGLoader;
+    static fromString(text: string, sanitize?: boolean): SVGLoader;
 }

package/dist/src/SVGLoader.js

@@ -8,6 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import Color4 from './Color4';
+import ImageComponent from './components/ImageComponent';
 import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import Text from './components/Text';
@@ -22,9 +23,10 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 export const svgAttributesDataKey = 'svgAttrs';
 export const svgStyleAttributesDataKey = 'svgStyleAttrs';
 export default class SVGLoader {
-    constructor(source, onFinish) {
+    constructor(source, onFinish, storeUnknown = true) {
         this.source = source;
         this.onFinish = onFinish;
+        this.storeUnknown = storeUnknown;
         this.onAddComponent = null;
         this.onProgress = null;
         this.onDetermineExportRect = null;
@@ -88,6 +90,9 @@ export default class SVGLoader {
         return result;
     }
     attachUnrecognisedAttrs(elem, node, supportedAttrs, supportedStyleAttrs) {
+        if (!this.storeUnknown) {
+            return;
+        }
         for (const attr of node.getAttributeNames()) {
             if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
                 continue;
@@ -123,10 +128,45 @@ export default class SVGLoader {
         }
         catch (e) {
             console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
-            elem = new UnknownSVGObject(node);
+            if (this.storeUnknown) {
+                elem = new UnknownSVGObject(node);
+            }
+            else {
+                return;
+            }
         }
         (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem);
     }
+    // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
+    // to prevent storing duplicate transform information when saving the component.
+    getTransform(elem, supportedAttrs, computedStyles) {
+        computedStyles !== null && computedStyles !== void 0 ? computedStyles : (computedStyles = window.getComputedStyle(elem));
+        let transformProperty = computedStyles.transform;
+        if (transformProperty === '' || transformProperty === 'none') {
+            transformProperty = elem.style.transform || 'none';
+        }
+        // Prefer the actual .style.transform
+        // to the computed stylesheet -- in some browsers, the computedStyles version
+        // can have lower precision.
+        let transform;
+        try {
+            transform = Mat33.fromCSSMatrix(elem.style.transform);
+        }
+        catch (_e) {
+            transform = Mat33.fromCSSMatrix(transformProperty);
+        }
+        const elemX = elem.getAttribute('x');
+        const elemY = elem.getAttribute('y');
+        if (elemX && elemY) {
+            const x = parseFloat(elemX);
+            const y = parseFloat(elemY);
+            if (!isNaN(x) && !isNaN(y)) {
+                supportedAttrs === null || supportedAttrs === void 0 ? void 0 : supportedAttrs.push('x', 'y');
+                transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
+            }
+        }
+        return transform;
+    }
     makeText(elem) {
         var _a;
         const contentList = [];
@@ -167,31 +207,8 @@ export default class SVGLoader {
                 fill: Color4.fromString(computedStyles.fill)
             },
         };
-        let transformProperty = computedStyles.transform;
-        if (transformProperty === '' || transformProperty === 'none') {
-            transformProperty = elem.style.transform || 'none';
-        }
-        // Compute transform matrix. Prefer the actual .style.transform
-        // to the computed stylesheet -- in some browsers, the computedStyles version
-        // can have lower precision.
-        let transform;
-        try {
-            transform = Mat33.fromCSSMatrix(elem.style.transform);
-        }
-        catch (_e) {
-            transform = Mat33.fromCSSMatrix(transformProperty);
-        }
         const supportedAttrs = [];
-        const elemX = elem.getAttribute('x');
-        const elemY = elem.getAttribute('y');
-        if (elemX && elemY) {
-            const x = parseFloat(elemX);
-            const y = parseFloat(elemY);
-            if (!isNaN(x) && !isNaN(y)) {
-                supportedAttrs.push('x', 'y');
-                transform = transform.rightMul(Mat33.translation(Vec2.of(x, y)));
-            }
-        }
+        const transform = this.getTransform(elem, supportedAttrs, computedStyles);
         const result = new Text(contentList, transform, style);
         this.attachUnrecognisedAttrs(result, elem, new Set(supportedAttrs), new Set(supportedStyleAttrs));
         return result;
@@ -203,14 +220,34 @@ export default class SVGLoader {
             (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, textElem);
         }
         catch (e) {
-            console.error('Invalid text object in node', elem, '. Adding as an unknown object. Error:', e);
+            console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
             this.addUnknownNode(elem);
         }
     }
+    addImage(elem) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = new Image();
+            image.src = (_a = elem.getAttribute('xlink:href')) !== null && _a !== void 0 ? _a : elem.href.baseVal;
+            try {
+                const supportedAttrs = [];
+                const transform = this.getTransform(elem, supportedAttrs);
+                const imageElem = yield ImageComponent.fromImage(image, transform);
+                this.attachUnrecognisedAttrs(imageElem, elem, new Set(supportedAttrs), new Set(['transform']));
+                (_b = this.onAddComponent) === null || _b === void 0 ? void 0 : _b.call(this, imageElem);
+            }
+            catch (e) {
+                console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
+                this.addUnknownNode(elem);
+            }
+        });
+    }
     addUnknownNode(node) {
         var _a;
-        const component = new UnknownSVGObject(node);
-        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component);
+        if (this.storeUnknown) {
+            const component = new UnknownSVGObject(node);
+            (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component);
+        }
     }
     updateViewBox(node) {
         var _a;
@@ -232,7 +269,9 @@ export default class SVGLoader {
     }
     updateSVGAttrs(node) {
         var _a;
-        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+        if (this.storeUnknown) {
+            (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+        }
     }
     visit(node) {
         var _a;
@@ -250,6 +289,11 @@ export default class SVGLoader {
                     this.addText(node);
                     visitChildren = false;
                     break;
+                case 'image':
+                    yield this.addImage(node);
+                    // Images should not have children.
+                    visitChildren = false;
+                    break;
                 case 'svg':
                     this.updateViewBox(node);
                     this.updateSVGAttrs(node);
@@ -257,7 +301,7 @@ export default class SVGLoader {
                 default:
                     console.warn('Unknown SVG element,', node);
                     if (!(node instanceof SVGElement)) {
-                        console.warn('Element', node, 'is not an SVGElement! Continuing anyway.');
+                        console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
                     }
                     this.addUnknownNode(node);
                     return;
@@ -296,7 +340,8 @@ export default class SVGLoader {
         });
     }
     // TODO: Handling unsafe data! Tripple-check that this is secure!
-    static fromString(text) {
+    // @param sanitize - if `true`, don't store unknown attributes.
+    static fromString(text, sanitize = false) {
         var _a, _b;
         const sandbox = document.createElement('iframe');
         sandbox.src = 'about:blank';
@@ -336,6 +381,6 @@ export default class SVGLoader {
         return new SVGLoader(svgElem, () => {
             svgElem.remove();
             sandbox.remove();
-        });
+        }, !sanitize);
     }
 }

package/dist/src/UndoRedoHistory.d.ts

@@ -8,6 +8,7 @@ declare class UndoRedoHistory {
     private announceUndoCallback;
     private undoStack;
     private redoStack;
+    private maxUndoRedoStackSize;
     constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
     private fireUpdateEvent;
     push(command: Command, apply?: boolean): void;

package/dist/src/UndoRedoHistory.js

@@ -5,6 +5,7 @@ class UndoRedoHistory {
         this.editor = editor;
         this.announceRedoCallback = announceRedoCallback;
         this.announceUndoCallback = announceUndoCallback;
+        this.maxUndoRedoStackSize = 700;
         this.undoStack = [];
         this.redoStack = [];
     }
@@ -25,6 +26,11 @@ class UndoRedoHistory {
             elem.onDrop(this.editor);
         }
         this.redoStack = [];
+        if (this.undoStack.length > this.maxUndoRedoStackSize) {
+            const removeAtOnceCount = 10;
+            const removedElements = this.undoStack.splice(0, removeAtOnceCount);
+            removedElements.forEach(elem => elem.onDrop(this.editor));
+        }
         this.fireUpdateEvent();
         this.editor.notifier.dispatch(EditorEventType.CommandDone, {
             kind: EditorEventType.CommandDone,

package/dist/src/Viewport.d.ts

@@ -29,6 +29,7 @@ export declare class Viewport {
     getRotationAngle(): number;
     static roundPoint<T extends Point2 | number>(point: T, tolerance: number): PointDataType<T>;
     roundPoint(point: Point2): Point2;
+    computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Mat33;
     zoomTo(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Command;
 }
 export default Viewport;

package/dist/src/Viewport.js

@@ -29,6 +29,7 @@ export class Viewport {
     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);
     }
@@ -93,10 +94,8 @@ export class Viewport {
     roundPoint(point) {
         return Viewport.roundPoint(point, 1 / this.getScaleFactor());
     }
-    // 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
-    zoomTo(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
+    // 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.identity;
         if (toMakeVisible.w === 0 || toMakeVisible.h === 0) {
             throw new Error(`${toMakeVisible.toString()} rectangle is empty! Cannot zoom to!`);
@@ -136,6 +135,15 @@ export class Viewport {
             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}
+    zoomTo(toMakeVisible, allowZoomIn = true, allowZoomOut = true) {
+        const transform = this.computeZoomToTransform(toMakeVisible, allowZoomIn, allowZoomOut);
         return new Viewport.ViewportTransform(transform);
     }
 }

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

@@ -3,4 +3,5 @@ import Duplicate from './Duplicate';
 import Erase from './Erase';
 import invertCommand from './invertCommand';
 import SerializableCommand from './SerializableCommand';
-export { Command, Duplicate, Erase, SerializableCommand, invertCommand, };
+import uniteCommands from './uniteCommands';
+export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands, };

package/dist/src/commands/lib.js

@@ -3,4 +3,5 @@ import Duplicate from './Duplicate';
 import Erase from './Erase';
 import invertCommand from './invertCommand';
 import SerializableCommand from './SerializableCommand';
-export { Command, Duplicate, Erase, SerializableCommand, invertCommand, };
+import uniteCommands from './uniteCommands';
+export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands, };

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

@@ -17,6 +17,7 @@ export interface CommandLocalization {
     eraseAction: (elemDescription: string, numElems: number) => string;
     duplicateAction: (elemDescription: string, count: number) => string;
     inverseOf: (actionDescription: string) => string;
+    unionOf: (actionDescription: string, actionCount: number) => string;
     selectedElements: (count: number) => string;
 }
 export declare const defaultCommandLocalization: CommandLocalization;

package/dist/src/commands/localization.js

@@ -5,6 +5,7 @@ export const defaultCommandLocalization = {
     addElementAction: (componentDescription) => `Added ${componentDescription}`,
     eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
     duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
+    unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,
     inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
     elements: 'Elements',
     erasedNoElements: 'Erased nothing',

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

@@ -0,0 +1,4 @@
+import Command from './Command';
+import SerializableCommand from './SerializableCommand';
+declare const uniteCommands: <T extends Command>(commands: T[], applyChunkSize?: number) => T extends SerializableCommand ? SerializableCommand : Command;
+export default uniteCommands;

package/dist/src/commands/uniteCommands.js

@@ -0,0 +1,105 @@
+import Command from './Command';
+import SerializableCommand from './SerializableCommand';
+class NonSerializableUnion extends Command {
+    constructor(commands, applyChunkSize) {
+        super();
+        this.commands = commands;
+        this.applyChunkSize = applyChunkSize;
+    }
+    apply(editor) {
+        if (this.applyChunkSize === undefined) {
+            for (const command of this.commands) {
+                command.apply(editor);
+            }
+        }
+        else {
+            editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+        }
+    }
+    unapply(editor) {
+        if (this.applyChunkSize === undefined) {
+            for (const command of this.commands) {
+                command.unapply(editor);
+            }
+        }
+        else {
+            editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+        }
+    }
+    description(editor, localizationTable) {
+        const descriptions = [];
+        let lastDescription = null;
+        let duplicateDescriptionCount = 0;
+        for (const part of this.commands) {
+            const description = part.description(editor, localizationTable);
+            if (description !== lastDescription && lastDescription !== null) {
+                descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
+                lastDescription = null;
+                duplicateDescriptionCount = 0;
+            }
+            duplicateDescriptionCount++;
+            lastDescription !== null && lastDescription !== void 0 ? lastDescription : (lastDescription = description);
+        }
+        if (duplicateDescriptionCount > 1) {
+            descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
+        }
+        else if (duplicateDescriptionCount === 1) {
+            descriptions.push(lastDescription);
+        }
+        return descriptions.join(', ');
+    }
+}
+class SerializableUnion extends SerializableCommand {
+    constructor(commands, applyChunkSize) {
+        super('union');
+        this.commands = commands;
+        this.applyChunkSize = applyChunkSize;
+        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+    }
+    serializeToJSON() {
+        return {
+            applyChunkSize: this.applyChunkSize,
+            data: this.commands.map(command => command.serialize()),
+        };
+    }
+    apply(editor) {
+        this.nonserializableCommand.apply(editor);
+    }
+    unapply(editor) {
+        this.nonserializableCommand.unapply(editor);
+    }
+    description(editor, localizationTable) {
+        return this.nonserializableCommand.description(editor, localizationTable);
+    }
+}
+const uniteCommands = (commands, applyChunkSize) => {
+    let allSerializable = true;
+    for (const command of commands) {
+        if (!(command instanceof SerializableCommand)) {
+            allSerializable = false;
+            break;
+        }
+    }
+    if (!allSerializable) {
+        return new NonSerializableUnion(commands, applyChunkSize);
+    }
+    else {
+        const castedCommands = commands;
+        return new SerializableUnion(castedCommands, applyChunkSize);
+    }
+};
+SerializableCommand.register('union', (data, editor) => {
+    if (typeof data.data.length !== 'number') {
+        throw new Error('Unions of commands must serialize to lists of serialization data.');
+    }
+    const applyChunkSize = data.applyChunkSize;
+    if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
+        throw new Error('serialized applyChunkSize is neither undefined nor a number.');
+    }
+    const commands = [];
+    for (const part of data.data) {
+        commands.push(SerializableCommand.deserialize(part, editor));
+    }
+    return uniteCommands(commands, applyChunkSize);
+});
+export default uniteCommands;

package/dist/src/components/AbstractComponent.d.ts

@@ -28,6 +28,8 @@ export default abstract class AbstractComponent {
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
+    private static transformElementCommandId;
+    private static UnresolvedTransformElementCommand;
     private static TransformElementCommand;
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;