js-draw 0.23.1 → 0.24.1

package/dist/mjs/src/Pointer.mjs

@@ -1,105 +0,0 @@
-import  { Vec2 }  from './math/Vec2.mjs';
-export var PointerDevice;
-(function (PointerDevice) {
-    PointerDevice[PointerDevice["Pen"] = 0] = "Pen";
-    PointerDevice[PointerDevice["Eraser"] = 1] = "Eraser";
-    PointerDevice[PointerDevice["Touch"] = 2] = "Touch";
-    PointerDevice[PointerDevice["PrimaryButtonMouse"] = 3] = "PrimaryButtonMouse";
-    PointerDevice[PointerDevice["RightButtonMouse"] = 4] = "RightButtonMouse";
-    PointerDevice[PointerDevice["Other"] = 5] = "Other";
-})(PointerDevice || (PointerDevice = {}));
-// Provides a snapshot containing information about a pointer. A Pointer
-// object is immutable — it will not be updated when the pointer's information changes.
-export default class Pointer {
-    constructor(
-    // The (x, y) position of the pointer relative to the top-left corner
-    // of the visible canvas.
-    screenPos, 
-    // Position of the pointer relative to the top left corner of the drawing
-    // surface.
-    canvasPos, pressure, isPrimary, down, device, 
-    // Unique ID for the pointer
-    id, 
-    // Numeric timestamp (milliseconds, as from `(new Date).getTime()`)
-    timeStamp) {
-        this.screenPos = screenPos;
-        this.canvasPos = canvasPos;
-        this.pressure = pressure;
-        this.isPrimary = isPrimary;
-        this.down = down;
-        this.device = device;
-        this.id = id;
-        this.timeStamp = timeStamp;
-    }
-    // Snaps this pointer to the nearest grid point (rounds the coordinates of this
-    // pointer based on the current zoom). Returns a new Pointer and does not modify
-    // this.
-    snappedToGrid(viewport) {
-        const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
-        return this.withCanvasPosition(snappedCanvasPos, viewport);
-    }
-    // Snap this pointer to the X or Y axis (whichever is closer), where (0,0)
-    // is considered to be at `originPoint`.
-    // @internal
-    lockedToXYAxes(originPoint, viewport) {
-        const current = this.canvasPos;
-        const currentFromStart = current.minus(originPoint);
-        // Determine whether the last point was closer to being on the
-        // x- or y- axis.
-        const projOntoXAxis = Vec2.unitX.times(currentFromStart.x);
-        const projOntoYAxis = Vec2.unitY.times(currentFromStart.y);
-        let pos;
-        if (currentFromStart.dot(projOntoXAxis) > currentFromStart.dot(projOntoYAxis)) {
-            pos = projOntoXAxis;
-        }
-        else {
-            pos = projOntoYAxis;
-        }
-        pos = pos.plus(originPoint);
-        return this.withCanvasPosition(pos, viewport);
-    }
-    // Returns a copy of this pointer with a new position. The screen position is determined
-    // by the given `canvasPos`.
-    withCanvasPosition(canvasPos, viewport) {
-        const screenPos = viewport.canvasToScreen(canvasPos);
-        return new Pointer(screenPos, canvasPos, this.pressure, this.isPrimary, this.down, this.device, this.id, this.timeStamp);
-    }
-    // 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;
-        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,
-            'touch': PointerDevice.Touch,
-        };
-        let device = (_a = pointerTypeToDevice[evt.pointerType]) !== null && _a !== void 0 ? _a : PointerDevice.Other;
-        const eraserButtonMask = 0x20;
-        if (device === PointerDevice.Pen && (evt.buttons & eraserButtonMask) !== 0) {
-            device = PointerDevice.Eraser;
-        }
-        const timeStamp = (new Date()).getTime();
-        const canvasPos = viewport.roundPoint(viewport.screenToCanvas(screenPos));
-        if (device === PointerDevice.PrimaryButtonMouse) {
-            if (evt.buttons & 0x2) {
-                device = PointerDevice.RightButtonMouse;
-            }
-            else if (!(evt.buttons & 0x1)) {
-                device = PointerDevice.Other;
-            }
-        }
-        return new Pointer(screenPos, canvasPos, (_b = evt.pressure) !== null && _b !== void 0 ? _b : null, evt.isPrimary, isDown, device, evt.pointerId, timeStamp);
-    }
-    // Create a new Pointer from a point on the canvas.
-    // Intended for unit tests.
-    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null) {
-        const screenPos = viewport.canvasToScreen(canvasPos);
-        const timeStamp = (new Date()).getTime();
-        return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
-    }
-}

package/dist/mjs/src/SVGLoader.d.ts

@@ -1,48 +0,0 @@
-import Rect2 from './math/Rect2';
-import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
-export declare const defaultSVGViewRect: Rect2;
-export declare const svgAttributesDataKey = "svgAttrs";
-export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
-export type SVGLoaderUnknownAttribute = [string, string];
-export type SVGLoaderUnknownStyleAttribute = {
-    key: string;
-    value: string;
-    priority?: string;
-};
-export default class SVGLoader implements ImageLoader {
-    private source;
-    private onFinish?;
-    private readonly storeUnknown;
-    private onAddComponent;
-    private onProgress;
-    private onDetermineExportRect;
-    private processedCount;
-    private totalToProcess;
-    private rootViewBox;
-    private constructor();
-    private getStyle;
-    private strokeDataFromElem;
-    private attachUnrecognisedAttrs;
-    private addPath;
-    private addBackground;
-    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>;
-    /**
-     * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
-     * iframe with `sandbox="allow-same-origin"`
-     * [thereby disabling JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
-     *
-     * @see {@link Editor.loadFrom}
-     * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
-     * @param sanitize - if `true`, don't store unknown attributes.
-     */
-    static fromString(text: string, sanitize?: boolean): SVGLoader;
-}

package/dist/mjs/src/SVGLoader.mjs

@@ -1,507 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import  Color4  from './Color4.mjs';
-import  BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName }  from './components/BackgroundComponent.mjs';
-import  ImageComponent  from './components/ImageComponent.mjs';
-import  Stroke  from './components/Stroke.mjs';
-import  SVGGlobalAttributesObject  from './components/SVGGlobalAttributesObject.mjs';
-import  TextComponent  from './components/TextComponent.mjs';
-import  UnknownSVGObject  from './components/UnknownSVGObject.mjs';
-import  Mat33  from './math/Mat33.mjs';
-import  Path  from './math/Path.mjs';
-import  Rect2  from './math/Rect2.mjs';
-import  { Vec2 }  from './math/Vec2.mjs';
-// Size of a loaded image if no size is specified.
-export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
-// Key to retrieve unrecognised attributes from an AbstractComponent
-export const svgAttributesDataKey = 'svgAttrs';
-export const svgStyleAttributesDataKey = 'svgStyleAttrs';
-const supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
-// Handles loading images from SVG.
-export default class SVGLoader {
-    constructor(source, onFinish, storeUnknown = true) {
-        this.source = source;
-        this.onFinish = onFinish;
-        this.storeUnknown = storeUnknown;
-        this.onAddComponent = null;
-        this.onProgress = null;
-        this.onDetermineExportRect = null;
-        this.processedCount = 0;
-        this.totalToProcess = 0;
-    }
-    // If [computedStyles] is given, it is preferred to directly accessing node's style object.
-    getStyle(node, computedStyles) {
-        var _a, _b, _c, _d, _f, _g;
-        let fill = Color4.transparent;
-        let stroke;
-        // If possible, use computedStyles (allows property inheritance).
-        const fillAttribute = (_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.fill) !== null && _b !== void 0 ? _b : node.style.fill;
-        if (fillAttribute) {
-            try {
-                fill = Color4.fromString(fillAttribute);
-            }
-            catch (e) {
-                console.error('Unknown fill color,', fillAttribute);
-            }
-        }
-        const strokeAttribute = (_d = (_c = node.getAttribute('stroke')) !== null && _c !== void 0 ? _c : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.stroke) !== null && _d !== void 0 ? _d : node.style.stroke;
-        const strokeWidthAttr = (_g = (_f = node.getAttribute('stroke-width')) !== null && _f !== void 0 ? _f : computedStyles === null || computedStyles === void 0 ? void 0 : computedStyles.strokeWidth) !== null && _g !== void 0 ? _g : node.style.strokeWidth;
-        if (strokeAttribute && strokeWidthAttr) {
-            try {
-                let width = parseFloat(strokeWidthAttr !== null && strokeWidthAttr !== void 0 ? strokeWidthAttr : '1');
-                if (!isFinite(width)) {
-                    width = 0;
-                }
-                const strokeColor = Color4.fromString(strokeAttribute);
-                if (strokeColor.a > 0) {
-                    stroke = {
-                        width,
-                        color: strokeColor,
-                    };
-                }
-            }
-            catch (e) {
-                console.error('Error parsing stroke data:', e);
-            }
-        }
-        const style = {
-            fill,
-            stroke,
-        };
-        return style;
-    }
-    strokeDataFromElem(node) {
-        var _a;
-        const result = [];
-        const pathData = (_a = node.getAttribute('d')) !== null && _a !== void 0 ? _a : '';
-        const style = this.getStyle(node);
-        // Break the path into chunks at each moveTo ('M') command:
-        const parts = pathData.split('M');
-        let isFirst = true;
-        for (const part of parts) {
-            // Skip effective no-ops -- moveTos without additional commands.
-            const isNoOpMoveTo = /^[0-9., \t\n]+$/.exec(part);
-            if (part !== '' && !isNoOpMoveTo) {
-                // We split the path by moveTo commands, so add the 'M' back in
-                // if it was present.
-                const current = !isFirst ? `M${part}` : part;
-                const path = Path.fromString(current);
-                const spec = path.toRenderable(style);
-                result.push(spec);
-            }
-            isFirst = false;
-        }
-        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;
-            }
-            elem.attachLoadSaveData(svgAttributesDataKey, [attr, node.getAttribute(attr)]);
-        }
-        if (supportedStyleAttrs && node.style) {
-            for (const attr of node.style) {
-                if (attr === '' || !attr) {
-                    continue;
-                }
-                if (supportedStyleAttrs.has(attr)) {
-                    continue;
-                }
-                // TODO: Do we need special logic for !important properties?
-                elem.attachLoadSaveData(svgStyleAttributesDataKey, {
-                    key: attr,
-                    value: node.style.getPropertyValue(attr),
-                    priority: node.style.getPropertyPriority(attr)
-                });
-            }
-        }
-    }
-    // Adds a stroke with a single path
-    addPath(node) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            let elem;
-            try {
-                const strokeData = this.strokeDataFromElem(node);
-                elem = new Stroke(strokeData);
-                this.attachUnrecognisedAttrs(elem, node, new Set([...supportedStrokeFillStyleAttrs, 'd']), new Set(supportedStrokeFillStyleAttrs));
-            }
-            catch (e) {
-                console.error('Invalid path in node', node, '\nError:', e, '\nAdding as an unknown object.');
-                if (this.storeUnknown) {
-                    elem = new UnknownSVGObject(node);
-                }
-                else {
-                    return;
-                }
-            }
-            yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
-        });
-    }
-    addBackground(node) {
-        var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function* () {
-            // If a grid background,
-            if (node.classList.contains(backgroundTypeToClassNameMap[BackgroundType.Grid])) {
-                let foregroundStr;
-                let backgroundStr;
-                let gridStrokeWidthStr;
-                // If a group,
-                if (node.tagName.toLowerCase() === 'g') {
-                    // We expect exactly two children. One of these is the solid
-                    // background of the grid
-                    if (node.children.length !== 2) {
-                        yield this.addUnknownNode(node);
-                        return;
-                    }
-                    const background = node.children[0];
-                    const grid = node.children[1];
-                    backgroundStr = background.getAttribute('fill');
-                    foregroundStr = grid.getAttribute('stroke');
-                    gridStrokeWidthStr = grid.getAttribute('stroke-width');
-                }
-                else {
-                    backgroundStr = node.getAttribute('fill');
-                    foregroundStr = node.getAttribute('stroke');
-                    gridStrokeWidthStr = node.getAttribute('stroke-width');
-                }
-                // Default to a transparent background.
-                backgroundStr !== null && backgroundStr !== void 0 ? backgroundStr : (backgroundStr = Color4.transparent.toHexString());
-                // A grid must have a foreground color specified.
-                if (!foregroundStr) {
-                    yield this.addUnknownNode(node);
-                    return;
-                }
-                // Extract the grid size from the class name
-                let gridSize = undefined;
-                for (const className of node.classList) {
-                    if (className.startsWith(imageBackgroundGridSizeCSSPrefix)) {
-                        const sizeStr = className.substring(imageBackgroundGridSizeCSSPrefix.length);
-                        gridSize = parseFloat(sizeStr.replace(/p/g, '.'));
-                    }
-                }
-                let gridStrokeWidth = undefined;
-                if (gridStrokeWidthStr) {
-                    gridStrokeWidth = parseFloat(gridStrokeWidthStr);
-                }
-                const backgroundColor = Color4.fromString(backgroundStr);
-                let foregroundColor = Color4.fromString(foregroundStr);
-                // Should the foreground color be determined automatically?
-                if (!node.classList.contains(imageBackgroundNonAutomaticSecondaryColorCSSClassName)) {
-                    foregroundColor = undefined;
-                }
-                const elem = BackgroundComponent.ofGrid(backgroundColor, gridSize, foregroundColor, gridStrokeWidth);
-                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
-            }
-            // Otherwise, if just a <path/>, it's a solid color background.
-            else if (node.tagName.toLowerCase() === 'path') {
-                const fill = Color4.fromString((_c = (_b = node.getAttribute('fill')) !== null && _b !== void 0 ? _b : node.style.fill) !== null && _c !== void 0 ? _c : 'black');
-                const elem = new BackgroundComponent(BackgroundType.SolidColor, fill);
-                yield ((_d = this.onAddComponent) === null || _d === void 0 ? void 0 : _d.call(this, elem));
-            }
-            else {
-                yield this.addUnknownNode(node);
-            }
-        });
-    }
-    // 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 !== null && elemX !== void 0 ? elemX : '0');
-            const y = parseFloat(elemY !== null && elemY !== void 0 ? elemY : '0');
-            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 = [];
-        for (const child of elem.childNodes) {
-            if (child.nodeType === Node.TEXT_NODE) {
-                contentList.push((_a = child.nodeValue) !== null && _a !== void 0 ? _a : '');
-            }
-            else if (child.nodeType === Node.ELEMENT_NODE) {
-                const subElem = child;
-                if (subElem.tagName.toLowerCase() === 'tspan') {
-                    // FIXME: tspan's (x, y) components are absolute, not relative to the parent.
-                    contentList.push(this.makeText(subElem));
-                }
-                else {
-                    throw new Error(`Unrecognized text child element: ${subElem}`);
-                }
-            }
-            else {
-                throw new Error(`Unrecognized text child node: ${child}.`);
-            }
-        }
-        // If no content, the content is an empty string.
-        if (contentList.length === 0) {
-            contentList.push('');
-        }
-        // Compute styles.
-        const computedStyles = window.getComputedStyle(elem);
-        const fontSizeExp = /^([-0-9.e]+)px/i;
-        // In some environments, computedStyles.fontSize can be increased by the system.
-        // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
-        let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
-        if (!fontSizeMatch && elem.tagName.toLowerCase() === 'tspan' && elem.parentElement) {
-            // Try to inherit the font size of the parent text element.
-            fontSizeMatch = fontSizeExp.exec(elem.parentElement.style.fontSize);
-        }
-        // If we still couldn't find a font size, try to use computedStyles (which can be
-        // wrong).
-        if (!fontSizeMatch) {
-            fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
-        }
-        const supportedStyleAttrs = [
-            'fontFamily',
-            'transform',
-            ...supportedStrokeFillStyleAttrs,
-        ];
-        let fontSize = 12;
-        if (fontSizeMatch) {
-            supportedStyleAttrs.push('fontSize');
-            fontSize = parseFloat(fontSizeMatch[1]);
-        }
-        const style = {
-            size: fontSize,
-            fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
-            renderingStyle: this.getStyle(elem, computedStyles),
-        };
-        const supportedAttrs = [];
-        const transform = this.getTransform(elem, supportedAttrs, computedStyles);
-        const result = new TextComponent(contentList, transform, style);
-        this.attachUnrecognisedAttrs(result, elem, new Set(supportedAttrs), new Set(supportedStyleAttrs));
-        return result;
-    }
-    addText(elem) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const textElem = this.makeText(elem);
-                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, textElem));
-            }
-            catch (e) {
-                console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
-                this.addUnknownNode(elem);
-            }
-        });
-    }
-    addImage(elem) {
-        var _a, _b, _c;
-        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;
-            image.setAttribute('alt', (_b = elem.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '');
-            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']));
-                yield ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, imageElem));
-            }
-            catch (e) {
-                console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
-                yield this.addUnknownNode(elem);
-            }
-        });
-    }
-    addUnknownNode(node) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.storeUnknown) {
-                const component = new UnknownSVGObject(node);
-                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component));
-            }
-        });
-    }
-    updateViewBox(node) {
-        var _a;
-        const viewBoxAttr = node.getAttribute('viewBox');
-        if (this.rootViewBox || !viewBoxAttr) {
-            return;
-        }
-        const components = viewBoxAttr.split(/[ \t\n,]+/);
-        const x = parseFloat(components[0]);
-        const y = parseFloat(components[1]);
-        const width = parseFloat(components[2]);
-        const height = parseFloat(components[3]);
-        if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
-            console.warn(`node ${node} has an unparsable viewbox. Viewbox: ${viewBoxAttr}. Match: ${components}.`);
-            return;
-        }
-        this.rootViewBox = new Rect2(x, y, width, height);
-        (_a = this.onDetermineExportRect) === null || _a === void 0 ? void 0 : _a.call(this, this.rootViewBox);
-    }
-    updateSVGAttrs(node) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.storeUnknown) {
-                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node))));
-            }
-        });
-    }
-    visit(node) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.totalToProcess += node.childElementCount;
-            let visitChildren = true;
-            switch (node.tagName.toLowerCase()) {
-                case 'g':
-                    if (node.classList.contains(imageBackgroundCSSClassName)) {
-                        yield this.addBackground(node);
-                        visitChildren = false;
-                    }
-                    // Otherwise, continue -- visit the node's children.
-                    break;
-                case 'path':
-                    if (node.classList.contains(imageBackgroundCSSClassName)) {
-                        yield this.addBackground(node);
-                    }
-                    else {
-                        yield this.addPath(node);
-                    }
-                    break;
-                case 'text':
-                    yield 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);
-                    break;
-                case 'style':
-                    yield this.addUnknownNode(node);
-                    break;
-                default:
-                    console.warn('Unknown SVG element,', node);
-                    if (!(node instanceof SVGElement)) {
-                        console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
-                    }
-                    yield this.addUnknownNode(node);
-                    return;
-            }
-            if (visitChildren) {
-                for (const child of node.children) {
-                    yield this.visit(child);
-                }
-            }
-            this.processedCount++;
-            yield ((_a = this.onProgress) === null || _a === void 0 ? void 0 : _a.call(this, this.processedCount, this.totalToProcess));
-        });
-    }
-    // Get SVG element attributes (e.g. xlink=...)
-    getSourceAttrs(node) {
-        return node.getAttributeNames().map(attr => {
-            return [attr, node.getAttribute(attr)];
-        });
-    }
-    start(onAddComponent, onProgress, onDetermineExportRect = null) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            this.onAddComponent = onAddComponent;
-            this.onProgress = onProgress;
-            this.onDetermineExportRect = onDetermineExportRect;
-            // Estimate the number of tags to process.
-            this.totalToProcess = this.source.childElementCount;
-            this.processedCount = 0;
-            this.rootViewBox = null;
-            yield this.visit(this.source);
-            const viewBox = this.rootViewBox;
-            if (!viewBox) {
-                (_a = this.onDetermineExportRect) === null || _a === void 0 ? void 0 : _a.call(this, defaultSVGViewRect);
-            }
-            (_b = this.onFinish) === null || _b === void 0 ? void 0 : _b.call(this);
-        });
-    }
-    /**
-     * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
-     * iframe with `sandbox="allow-same-origin"`
-     * [thereby disabling JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
-     *
-     * @see {@link Editor.loadFrom}
-     * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
-     * @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';
-        sandbox.setAttribute('sandbox', 'allow-same-origin');
-        sandbox.setAttribute('csp', 'default-src \'about:blank\'');
-        sandbox.style.display = 'none';
-        // Required to access the frame's DOM. See https://stackoverflow.com/a/17777943/17055750
-        document.body.appendChild(sandbox);
-        if (!sandbox.hasAttribute('sandbox')) {
-            sandbox.remove();
-            throw new Error('SVG loading iframe is not sandboxed.');
-        }
-        const sandboxDoc = (_b = (_a = sandbox.contentWindow) === null || _a === void 0 ? void 0 : _a.document) !== null && _b !== void 0 ? _b : sandbox.contentDocument;
-        if (sandboxDoc == null)
-            throw new Error('Unable to open a sandboxed iframe!');
-        sandboxDoc.open();
-        sandboxDoc.write(`
-			<!DOCTYPE html>
-			<html>
-				<head>
-					<title>SVG Loading Sandbox</title>
-					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
-					<meta charset='utf-8'/>
-				</head>
-				<body style='font-size: 12px;'>
-					<script>
-						console.error('JavaScript should not be able to run here!');
-						throw new Error(
-							'The SVG sandbox is broken! Please double-check the sandboxing setting.'
-						);
-					</script>
-				</body>
-			</html>
-		`);
-        sandboxDoc.close();
-        const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgElem.innerHTML = text;
-        sandboxDoc.body.appendChild(svgElem);
-        return new SVGLoader(svgElem, () => {
-            svgElem.remove();
-            sandbox.remove();
-        }, !sanitize);
-    }
-}