js-draw 0.18.1 → 0.19.0

package/dist/cjs/src/Pointer.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerDevice = void 0;
+const Vec2_1 = require("./math/Vec2");
+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 = exports.PointerDevice || (exports.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.
+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);
+        const snappedScreenPos = viewport.canvasToScreen(snappedCanvasPos);
+        return new Pointer(snappedScreenPos, snappedCanvasPos, 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_1.Vec2.of(evt.clientX, evt.clientY);
+        if (relativeTo) {
+            const bbox = relativeTo.getBoundingClientRect();
+            screenPos = screenPos.minus(Vec2_1.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);
+    }
+}
+exports.default = Pointer;

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

@@ -0,0 +1,48 @@
+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/cjs/src/SVGLoader.js

@@ -0,0 +1,475 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgStyleAttributesDataKey = exports.svgAttributesDataKey = exports.defaultSVGViewRect = void 0;
+const Color4_1 = __importDefault(require("./Color4"));
+const ImageBackground_1 = __importStar(require("./components/ImageBackground"));
+const ImageComponent_1 = __importDefault(require("./components/ImageComponent"));
+const Stroke_1 = __importDefault(require("./components/Stroke"));
+const SVGGlobalAttributesObject_1 = __importDefault(require("./components/SVGGlobalAttributesObject"));
+const TextComponent_1 = __importDefault(require("./components/TextComponent"));
+const UnknownSVGObject_1 = __importDefault(require("./components/UnknownSVGObject"));
+const Mat33_1 = __importDefault(require("./math/Mat33"));
+const Path_1 = __importDefault(require("./math/Path"));
+const Rect2_1 = __importDefault(require("./math/Rect2"));
+const Vec2_1 = require("./math/Vec2");
+// Size of a loaded image if no size is specified.
+exports.defaultSVGViewRect = new Rect2_1.default(0, 0, 500, 500);
+// Key to retrieve unrecognised attributes from an AbstractComponent
+exports.svgAttributesDataKey = 'svgAttrs';
+exports.svgStyleAttributesDataKey = 'svgStyleAttrs';
+const supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
+// Handles loading images from SVG.
+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_1.default.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_1.default.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_1.default.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_1.default.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(exports.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(exports.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_1.default(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_1.default(node);
+                }
+                else {
+                    return;
+                }
+            }
+            yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
+        });
+    }
+    addBackground(node) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            const fill = Color4_1.default.fromString((_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill) !== null && _b !== void 0 ? _b : 'black');
+            const elem = new ImageBackground_1.default(ImageBackground_1.BackgroundType.SolidColor, fill);
+            yield ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.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_1.default.fromCSSMatrix(elem.style.transform);
+        }
+        catch (_e) {
+            transform = Mat33_1.default.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_1.default.translation(Vec2_1.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_1.default(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_1.default.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_1.default(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_1.default(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_1.default(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':
+                    // Continue -- visit the node's children.
+                    break;
+                case 'path':
+                    if (node.classList.contains(ImageBackground_1.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, exports.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);
+    }
+}
+exports.default = SVGLoader;

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

@@ -0,0 +1,19 @@
+import Editor from './Editor';
+import Command from './commands/Command';
+type AnnounceRedoCallback = (command: Command) => void;
+type AnnounceUndoCallback = (command: Command) => void;
+declare class UndoRedoHistory {
+    #private;
+    private readonly editor;
+    private announceRedoCallback;
+    private announceUndoCallback;
+    private readonly maxUndoRedoStackSize;
+    constructor(editor: Editor, announceRedoCallback: AnnounceRedoCallback, announceUndoCallback: AnnounceUndoCallback);
+    private fireUpdateEvent;
+    push(command: Command, apply?: boolean): void;
+    undo(): void;
+    redo(): void;
+    get undoStackSize(): number;
+    get redoStackSize(): number;
+}
+export default UndoRedoHistory;