js-draw 0.3.1 → 0.4.0

package/dist/src/Editor.d.ts

@@ -28,6 +28,8 @@ import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
+declare type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
+declare type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
     /** Defaults to `RenderingMode.CanvasRenderer` */
     renderingMode: RenderingMode;
@@ -94,6 +96,7 @@ export declare class Editor {
     private loadingWarning;
     private accessibilityAnnounceArea;
     private accessibilityControlArea;
+    private eventListenerTargets;
     private settings;
     /**
      * @example
@@ -139,6 +142,16 @@ export declare class Editor {
      */
     addToolbar(defaultLayout?: boolean): HTMLToolbar;
     private registerListeners;
+    private pointers;
+    private getPointerList;
+    /**
+     * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
+     * as the content of the editor.
+     */
+    handleHTMLPointerEvent(eventType: 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel', evt: PointerEvent): boolean;
+    private isEventSink;
+    private handlePaste;
+    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): void;
     /** 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. */
@@ -180,6 +193,7 @@ export declare class Editor {
         remove: () => void;
     };
     addStyleSheet(content: string): HTMLStyleElement;
+    sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;
@@ -191,6 +205,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,7 +68,9 @@ export class Editor {
      */
     constructor(parent, settings = {}) {
         var _a, _b, _c, _d;
+        this.eventListenerTargets = [];
         this.previousAccessibilityAnnouncement = '';
+        this.pointers = {};
         this.announceUndoCallback = (command) => {
             this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
         };
@@ -181,81 +183,7 @@ export class Editor {
         return toolbar;
     }
     registerListeners() {
-        const pointers = {};
-        const getPointerList = () => {
-            const nowTime = (new Date()).getTime();
-            const res = [];
-            for (const id in pointers) {
-                const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
-                if (pointers[id] && (nowTime - pointers[id].timeStamp) < maxUnupdatedTime) {
-                    res.push(pointers[id]);
-                }
-            }
-            return res;
-        };
-        // May be required to prevent text selection on iOS/Safari:
-        // See https://stackoverflow.com/a/70992717/17055750
-        this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
-        this.renderingRegion.addEventListener('contextmenu', evt => {
-            // Don't show a context menu
-            evt.preventDefault();
-        });
-        this.renderingRegion.addEventListener('pointerdown', evt => {
-            const pointer = Pointer.ofEvent(evt, true, this.viewport);
-            pointers[pointer.id] = pointer;
-            this.renderingRegion.setPointerCapture(pointer.id);
-            const event = {
-                kind: InputEvtType.PointerDownEvt,
-                current: pointer,
-                allPointers: getPointerList(),
-            };
-            this.toolController.dispatchInputEvent(event);
-            return true;
-        });
-        this.renderingRegion.addEventListener('pointermove', evt => {
-            var _a, _b;
-            const pointer = Pointer.ofEvent(evt, (_b = (_a = pointers[evt.pointerId]) === null || _a === void 0 ? void 0 : _a.down) !== null && _b !== void 0 ? _b : false, this.viewport);
-            if (pointer.down) {
-                const prevData = pointers[pointer.id];
-                if (prevData) {
-                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
-                    // If the pointer moved less than two pixels, don't send a new event.
-                    if (distanceMoved < 2) {
-                        return;
-                    }
-                }
-                pointers[pointer.id] = pointer;
-                if (this.toolController.dispatchInputEvent({
-                    kind: InputEvtType.PointerMoveEvt,
-                    current: pointer,
-                    allPointers: getPointerList(),
-                })) {
-                    evt.preventDefault();
-                }
-            }
-        });
-        const pointerEnd = (evt) => {
-            const pointer = Pointer.ofEvent(evt, false, this.viewport);
-            if (!pointers[pointer.id]) {
-                return;
-            }
-            pointers[pointer.id] = pointer;
-            this.renderingRegion.releasePointerCapture(pointer.id);
-            if (this.toolController.dispatchInputEvent({
-                kind: InputEvtType.PointerUpEvt,
-                current: pointer,
-                allPointers: getPointerList(),
-            })) {
-                evt.preventDefault();
-            }
-            delete pointers[pointer.id];
-        };
-        this.renderingRegion.addEventListener('pointerup', evt => {
-            pointerEnd(evt);
-        });
-        this.renderingRegion.addEventListener('pointercancel', evt => {
-            pointerEnd(evt);
-        });
+        this.handlePointerEventsFrom(this.renderingRegion);
         this.handleKeyEventsFrom(this.renderingRegion);
         this.container.addEventListener('wheel', evt => {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
@@ -281,7 +209,9 @@ export class Editor {
             if (evt.ctrlKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
-            const pos = Vec2.of(evt.offsetX, evt.offsetY);
+            // Ensure that `pos` is relative to `this.container`
+            const bbox = this.container.getBoundingClientRect();
+            const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.WheelEvt,
                 delta,
@@ -305,6 +235,200 @@ 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);
+        });
+    }
+    getPointerList() {
+        const nowTime = (new Date()).getTime();
+        const res = [];
+        for (const id in this.pointers) {
+            const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
+            if (this.pointers[id] && (nowTime - this.pointers[id].timeStamp) < maxUnupdatedTime) {
+                res.push(this.pointers[id]);
+            }
+        }
+        return res;
+    }
+    /**
+     * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
+     * as the content of the editor.
+     */
+    handleHTMLPointerEvent(eventType, evt) {
+        var _a, _b, _c;
+        const eventsRelativeTo = this.renderingRegion;
+        const eventTarget = (_a = evt.target) !== null && _a !== void 0 ? _a : this.renderingRegion;
+        if (eventType === 'pointerdown') {
+            const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+            this.pointers[pointer.id] = pointer;
+            eventTarget.setPointerCapture(pointer.id);
+            const event = {
+                kind: InputEvtType.PointerDownEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            };
+            this.toolController.dispatchInputEvent(event);
+            return true;
+        }
+        else if (eventType === 'pointermove') {
+            const pointer = Pointer.ofEvent(evt, (_c = (_b = this.pointers[evt.pointerId]) === null || _b === void 0 ? void 0 : _b.down) !== null && _c !== void 0 ? _c : false, this.viewport, eventsRelativeTo);
+            if (pointer.down) {
+                const prevData = this.pointers[pointer.id];
+                if (prevData) {
+                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+                    // If the pointer moved less than two pixels, don't send a new event.
+                    if (distanceMoved < 2) {
+                        return false;
+                    }
+                }
+                this.pointers[pointer.id] = pointer;
+                if (this.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PointerMoveEvt,
+                    current: pointer,
+                    allPointers: this.getPointerList(),
+                })) {
+                    evt.preventDefault();
+                }
+            }
+            return true;
+        }
+        else if (eventType === 'pointercancel' || eventType === 'pointerup') {
+            const pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+            if (!this.pointers[pointer.id]) {
+                return false;
+            }
+            this.pointers[pointer.id] = pointer;
+            eventTarget.releasePointerCapture(pointer.id);
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.PointerUpEvt,
+                current: pointer,
+                allPointers: this.getPointerList(),
+            })) {
+                evt.preventDefault();
+            }
+            delete this.pointers[pointer.id];
+            return true;
+        }
+        return eventType;
+    }
+    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;
+                }
+            }
+        });
+    }
+    handlePointerEventsFrom(elem, filter) {
+        // May be required to prevent text selection on iOS/Safari:
+        // See https://stackoverflow.com/a/70992717/17055750
+        elem.addEventListener('touchstart', evt => evt.preventDefault());
+        elem.addEventListener('contextmenu', evt => {
+            // Don't show a context menu
+            evt.preventDefault();
+        });
+        const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+        for (const eventName of eventNames) {
+            elem.addEventListener(eventName, evt => {
+                if (filter && !filter(eventName, evt)) {
+                    return true;
+                }
+                return this.handleHTMLPointerEvent(eventName, evt);
+            });
+        }
     }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {
@@ -333,6 +457,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 +509,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);
@@ -462,6 +596,15 @@ export class Editor {
         this.container.appendChild(styleSheet);
         return styleSheet;
     }
+    // Dispatch a keyboard event to the currently selected tool.
+    // Intended for unit testing
+    sendKeyboardEvent(eventType, key, ctrlKey = false) {
+        this.toolController.dispatchInputEvent({
+            kind: eventType,
+            key,
+            ctrlKey
+        });
+    }
     // Dispatch a pen event to the currently selected tool.
     // Intended primarially for unit tests.
     sendPenEvent(eventType, point, allPointers) {
@@ -553,9 +696,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/Pointer.d.ts

@@ -18,6 +18,6 @@ export default class Pointer {
     readonly id: number;
     readonly timeStamp: number;
     private constructor();
-    static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport): Pointer;
+    static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
     static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
 }

package/dist/src/Pointer.js

@@ -31,10 +31,15 @@ export default class Pointer {
         this.id = id;
         this.timeStamp = timeStamp;
     }
-    // Creates a Pointer from a DOM event.
-    static ofEvent(evt, isDown, viewport) {
+    // Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
+    // considered the top left of `relativeTo`.
+    static ofEvent(evt, isDown, viewport, relativeTo) {
         var _a, _b;
-        const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
+        let screenPos = Vec2.of(evt.clientX, evt.clientY);
+        if (relativeTo) {
+            const bbox = relativeTo.getBoundingClientRect();
+            screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
+        }
         const pointerTypeToDevice = {
             'mouse': PointerDevice.PrimaryButtonMouse,
             'pen': PointerDevice.Pen,

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;