js-draw 0.23.0 → 0.24.0

package/dist/cjs/SVGLoader.js

@@ -0,0 +1,667 @@
+"use strict";
+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 __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgStyleAttributesDataKey = exports.svgAttributesDataKey = exports.defaultSVGViewRect = void 0;
+var Color4_1 = require("./Color4");
+var BackgroundComponent_1 = require("./components/BackgroundComponent");
+var ImageComponent_1 = require("./components/ImageComponent");
+var Stroke_1 = require("./components/Stroke");
+var SVGGlobalAttributesObject_1 = require("./components/SVGGlobalAttributesObject");
+var TextComponent_1 = require("./components/TextComponent");
+var UnknownSVGObject_1 = require("./components/UnknownSVGObject");
+var Mat33_1 = require("./math/Mat33");
+var Path_1 = require("./math/shapes/Path");
+var Rect2_1 = require("./math/shapes/Rect2");
+var 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';
+var supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
+// Handles loading images from SVG.
+var SVGLoader = /** @class */ (function () {
+    function SVGLoader(source, onFinish, storeUnknown) {
+        if (storeUnknown === void 0) { 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.
+    SVGLoader.prototype.getStyle = function (node, computedStyles) {
+        var _a, _b, _c, _d, _f, _g;
+        var fill = Color4_1.default.transparent;
+        var stroke;
+        // If possible, use computedStyles (allows property inheritance).
+        var 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);
+            }
+        }
+        var 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;
+        var 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 {
+                var width = parseFloat(strokeWidthAttr !== null && strokeWidthAttr !== void 0 ? strokeWidthAttr : '1');
+                if (!isFinite(width)) {
+                    width = 0;
+                }
+                var strokeColor = Color4_1.default.fromString(strokeAttribute);
+                if (strokeColor.a > 0) {
+                    stroke = {
+                        width: width,
+                        color: strokeColor,
+                    };
+                }
+            }
+            catch (e) {
+                console.error('Error parsing stroke data:', e);
+            }
+        }
+        var style = {
+            fill: fill,
+            stroke: stroke,
+        };
+        return style;
+    };
+    SVGLoader.prototype.strokeDataFromElem = function (node) {
+        var _a;
+        var result = [];
+        var pathData = (_a = node.getAttribute('d')) !== null && _a !== void 0 ? _a : '';
+        var style = this.getStyle(node);
+        // Break the path into chunks at each moveTo ('M') command:
+        var parts = pathData.split('M');
+        var isFirst = true;
+        for (var _i = 0, parts_1 = parts; _i < parts_1.length; _i++) {
+            var part = parts_1[_i];
+            // Skip effective no-ops -- moveTos without additional commands.
+            var 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.
+                var current = !isFirst ? "M".concat(part) : part;
+                var path = Path_1.default.fromString(current);
+                var spec = path.toRenderable(style);
+                result.push(spec);
+            }
+            isFirst = false;
+        }
+        return result;
+    };
+    SVGLoader.prototype.attachUnrecognisedAttrs = function (elem, node, supportedAttrs, supportedStyleAttrs) {
+        if (!this.storeUnknown) {
+            return;
+        }
+        for (var _i = 0, _a = node.getAttributeNames(); _i < _a.length; _i++) {
+            var attr = _a[_i];
+            if (supportedAttrs.has(attr) || (attr === 'style' && supportedStyleAttrs)) {
+                continue;
+            }
+            elem.attachLoadSaveData(exports.svgAttributesDataKey, [attr, node.getAttribute(attr)]);
+        }
+        if (supportedStyleAttrs && node.style) {
+            for (var _b = 0, _c = node.style; _b < _c.length; _b++) {
+                var attr = _c[_b];
+                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
+    SVGLoader.prototype.addPath = function (node) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var elem, strokeData;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        try {
+                            strokeData = this.strokeDataFromElem(node);
+                            elem = new Stroke_1.default(strokeData);
+                            this.attachUnrecognisedAttrs(elem, node, new Set(__spreadArray(__spreadArray([], supportedStrokeFillStyleAttrs, true), ['d'], false)), 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 [2 /*return*/];
+                            }
+                        }
+                        return [4 /*yield*/, ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem))];
+                    case 1:
+                        _b.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SVGLoader.prototype.addBackground = function (node) {
+        var _a, _b, _c, _d;
+        return __awaiter(this, void 0, void 0, function () {
+            var foregroundStr, backgroundStr, gridStrokeWidthStr, background, grid, gridSize, _i, _f, className, sizeStr, gridStrokeWidth, backgroundColor, foregroundColor, elem, fill, elem;
+            return __generator(this, function (_g) {
+                switch (_g.label) {
+                    case 0:
+                        if (!node.classList.contains(BackgroundComponent_1.backgroundTypeToClassNameMap[BackgroundComponent_1.BackgroundType.Grid])) return [3 /*break*/, 8];
+                        foregroundStr = void 0;
+                        backgroundStr = void 0;
+                        gridStrokeWidthStr = void 0;
+                        if (!(node.tagName.toLowerCase() === 'g')) return [3 /*break*/, 3];
+                        if (!(node.children.length !== 2)) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.addUnknownNode(node)];
+                    case 1:
+                        _g.sent();
+                        return [2 /*return*/];
+                    case 2:
+                        background = node.children[0];
+                        grid = node.children[1];
+                        backgroundStr = background.getAttribute('fill');
+                        foregroundStr = grid.getAttribute('stroke');
+                        gridStrokeWidthStr = grid.getAttribute('stroke-width');
+                        return [3 /*break*/, 4];
+                    case 3:
+                        backgroundStr = node.getAttribute('fill');
+                        foregroundStr = node.getAttribute('stroke');
+                        gridStrokeWidthStr = node.getAttribute('stroke-width');
+                        _g.label = 4;
+                    case 4:
+                        // Default to a transparent background.
+                        backgroundStr !== null && backgroundStr !== void 0 ? backgroundStr : (backgroundStr = Color4_1.default.transparent.toHexString());
+                        if (!!foregroundStr) return [3 /*break*/, 6];
+                        return [4 /*yield*/, this.addUnknownNode(node)];
+                    case 5:
+                        _g.sent();
+                        return [2 /*return*/];
+                    case 6:
+                        gridSize = undefined;
+                        for (_i = 0, _f = node.classList; _i < _f.length; _i++) {
+                            className = _f[_i];
+                            if (className.startsWith(BackgroundComponent_1.imageBackgroundGridSizeCSSPrefix)) {
+                                sizeStr = className.substring(BackgroundComponent_1.imageBackgroundGridSizeCSSPrefix.length);
+                                gridSize = parseFloat(sizeStr.replace(/p/g, '.'));
+                            }
+                        }
+                        gridStrokeWidth = undefined;
+                        if (gridStrokeWidthStr) {
+                            gridStrokeWidth = parseFloat(gridStrokeWidthStr);
+                        }
+                        backgroundColor = Color4_1.default.fromString(backgroundStr);
+                        foregroundColor = Color4_1.default.fromString(foregroundStr);
+                        // Should the foreground color be determined automatically?
+                        if (!node.classList.contains(BackgroundComponent_1.imageBackgroundNonAutomaticSecondaryColorCSSClassName)) {
+                            foregroundColor = undefined;
+                        }
+                        elem = BackgroundComponent_1.default.ofGrid(backgroundColor, gridSize, foregroundColor, gridStrokeWidth);
+                        return [4 /*yield*/, ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem))];
+                    case 7:
+                        _g.sent();
+                        return [3 /*break*/, 12];
+                    case 8:
+                        if (!(node.tagName.toLowerCase() === 'path')) return [3 /*break*/, 10];
+                        fill = Color4_1.default.fromString((_c = (_b = node.getAttribute('fill')) !== null && _b !== void 0 ? _b : node.style.fill) !== null && _c !== void 0 ? _c : 'black');
+                        elem = new BackgroundComponent_1.default(BackgroundComponent_1.BackgroundType.SolidColor, fill);
+                        return [4 /*yield*/, ((_d = this.onAddComponent) === null || _d === void 0 ? void 0 : _d.call(this, elem))];
+                    case 9:
+                        _g.sent();
+                        return [3 /*break*/, 12];
+                    case 10: return [4 /*yield*/, this.addUnknownNode(node)];
+                    case 11:
+                        _g.sent();
+                        _g.label = 12;
+                    case 12: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // 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.
+    SVGLoader.prototype.getTransform = function (elem, supportedAttrs, computedStyles) {
+        computedStyles !== null && computedStyles !== void 0 ? computedStyles : (computedStyles = window.getComputedStyle(elem));
+        var 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.
+        var transform;
+        try {
+            transform = Mat33_1.default.fromCSSMatrix(elem.style.transform);
+        }
+        catch (_e) {
+            transform = Mat33_1.default.fromCSSMatrix(transformProperty);
+        }
+        var elemX = elem.getAttribute('x');
+        var elemY = elem.getAttribute('y');
+        if (elemX || elemY) {
+            var x = parseFloat(elemX !== null && elemX !== void 0 ? elemX : '0');
+            var 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;
+    };
+    SVGLoader.prototype.makeText = function (elem) {
+        var _a;
+        var contentList = [];
+        for (var _i = 0, _b = elem.childNodes; _i < _b.length; _i++) {
+            var child = _b[_i];
+            if (child.nodeType === Node.TEXT_NODE) {
+                contentList.push((_a = child.nodeValue) !== null && _a !== void 0 ? _a : '');
+            }
+            else if (child.nodeType === Node.ELEMENT_NODE) {
+                var 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: ".concat(subElem));
+                }
+            }
+            else {
+                throw new Error("Unrecognized text child node: ".concat(child, "."));
+            }
+        }
+        // If no content, the content is an empty string.
+        if (contentList.length === 0) {
+            contentList.push('');
+        }
+        // Compute styles.
+        var computedStyles = window.getComputedStyle(elem);
+        var 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.
+        var 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);
+        }
+        var supportedStyleAttrs = __spreadArray([
+            'fontFamily',
+            'transform'
+        ], supportedStrokeFillStyleAttrs, true);
+        var fontSize = 12;
+        if (fontSizeMatch) {
+            supportedStyleAttrs.push('fontSize');
+            fontSize = parseFloat(fontSizeMatch[1]);
+        }
+        var style = {
+            size: fontSize,
+            fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
+            fontWeight: computedStyles.fontWeight || elem.style.fontWeight || undefined,
+            fontStyle: computedStyles.fontStyle || elem.style.fontStyle || undefined,
+            renderingStyle: this.getStyle(elem, computedStyles),
+        };
+        var supportedAttrs = [];
+        var transform = this.getTransform(elem, supportedAttrs, computedStyles);
+        var transformMode = TextComponent_1.TextTransformMode.ABSOLUTE_XY;
+        var elemDX = elem.getAttribute('dx');
+        if (elemDX) {
+            transformMode = TextComponent_1.TextTransformMode.RELATIVE_X_ABSOLUTE_Y;
+            transform = transform.rightMul(Mat33_1.default.translation(Vec2_1.Vec2.of(parseFloat(elemDX), 0)));
+            supportedAttrs.push('dx');
+        }
+        var elemDY = elem.getAttribute('dy');
+        if (elemDY) {
+            if (transformMode === TextComponent_1.TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {
+                transformMode = TextComponent_1.TextTransformMode.RELATIVE_XY;
+            }
+            else {
+                transformMode = TextComponent_1.TextTransformMode.RELATIVE_Y_ABSOLUTE_X;
+            }
+            transform = transform.rightMul(Mat33_1.default.translation(Vec2_1.Vec2.of(0, parseFloat(elemDY))));
+            supportedAttrs.push('dy');
+        }
+        var result = new TextComponent_1.default(contentList, transform, style, transformMode);
+        this.attachUnrecognisedAttrs(result, elem, new Set(supportedAttrs), new Set(supportedStyleAttrs));
+        return result;
+    };
+    SVGLoader.prototype.addText = function (elem) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var textElem, e_1;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        textElem = this.makeText(elem);
+                        return [4 /*yield*/, ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, textElem))];
+                    case 1:
+                        _b.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        e_1 = _b.sent();
+                        console.error('Invalid text object in node', elem, '. Continuing.... Error:', e_1);
+                        this.addUnknownNode(elem);
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SVGLoader.prototype.addImage = function (elem) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function () {
+            var image, supportedAttrs, transform, imageElem, e_2;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        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 : '');
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 4, , 6]);
+                        supportedAttrs = [];
+                        transform = this.getTransform(elem, supportedAttrs);
+                        return [4 /*yield*/, ImageComponent_1.default.fromImage(image, transform)];
+                    case 2:
+                        imageElem = _d.sent();
+                        this.attachUnrecognisedAttrs(imageElem, elem, new Set(supportedAttrs), new Set(['transform']));
+                        return [4 /*yield*/, ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, imageElem))];
+                    case 3:
+                        _d.sent();
+                        return [3 /*break*/, 6];
+                    case 4:
+                        e_2 = _d.sent();
+                        console.error('Error loading image:', e_2, '. Element: ', elem, '. Continuing...');
+                        return [4 /*yield*/, this.addUnknownNode(elem)];
+                    case 5:
+                        _d.sent();
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SVGLoader.prototype.addUnknownNode = function (node) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var component;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.storeUnknown) return [3 /*break*/, 2];
+                        component = new UnknownSVGObject_1.default(node);
+                        return [4 /*yield*/, ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, component))];
+                    case 1:
+                        _b.sent();
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SVGLoader.prototype.updateViewBox = function (node) {
+        var _a;
+        var viewBoxAttr = node.getAttribute('viewBox');
+        if (this.rootViewBox || !viewBoxAttr) {
+            return;
+        }
+        var components = viewBoxAttr.split(/[ \t\n,]+/);
+        var x = parseFloat(components[0]);
+        var y = parseFloat(components[1]);
+        var width = parseFloat(components[2]);
+        var height = parseFloat(components[3]);
+        if (isNaN(x) || isNaN(y) || isNaN(width) || isNaN(height)) {
+            console.warn("node ".concat(node, " has an unparsable viewbox. Viewbox: ").concat(viewBoxAttr, ". Match: ").concat(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);
+    };
+    SVGLoader.prototype.updateSVGAttrs = function (node) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.storeUnknown) return [3 /*break*/, 2];
+                        return [4 /*yield*/, ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject_1.default(this.getSourceAttrs(node))))];
+                    case 1:
+                        _b.sent();
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    SVGLoader.prototype.visit = function (node) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var visitChildren, _b, _i, _c, child;
+            return __generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        this.totalToProcess += node.childElementCount;
+                        visitChildren = true;
+                        _b = node.tagName.toLowerCase();
+                        switch (_b) {
+                            case 'g': return [3 /*break*/, 1];
+                            case 'path': return [3 /*break*/, 4];
+                            case 'text': return [3 /*break*/, 9];
+                            case 'image': return [3 /*break*/, 11];
+                            case 'svg': return [3 /*break*/, 13];
+                            case 'style': return [3 /*break*/, 14];
+                        }
+                        return [3 /*break*/, 16];
+                    case 1:
+                        if (!node.classList.contains(BackgroundComponent_1.imageBackgroundCSSClassName)) return [3 /*break*/, 3];
+                        return [4 /*yield*/, this.addBackground(node)];
+                    case 2:
+                        _d.sent();
+                        visitChildren = false;
+                        _d.label = 3;
+                    case 3: 
+                    // Otherwise, continue -- visit the node's children.
+                    return [3 /*break*/, 18];
+                    case 4:
+                        if (!node.classList.contains(BackgroundComponent_1.imageBackgroundCSSClassName)) return [3 /*break*/, 6];
+                        return [4 /*yield*/, this.addBackground(node)];
+                    case 5:
+                        _d.sent();
+                        return [3 /*break*/, 8];
+                    case 6: return [4 /*yield*/, this.addPath(node)];
+                    case 7:
+                        _d.sent();
+                        _d.label = 8;
+                    case 8: return [3 /*break*/, 18];
+                    case 9: return [4 /*yield*/, this.addText(node)];
+                    case 10:
+                        _d.sent();
+                        visitChildren = false;
+                        return [3 /*break*/, 18];
+                    case 11: return [4 /*yield*/, this.addImage(node)];
+                    case 12:
+                        _d.sent();
+                        // Images should not have children.
+                        visitChildren = false;
+                        return [3 /*break*/, 18];
+                    case 13:
+                        this.updateViewBox(node);
+                        this.updateSVGAttrs(node);
+                        return [3 /*break*/, 18];
+                    case 14: return [4 /*yield*/, this.addUnknownNode(node)];
+                    case 15:
+                        _d.sent();
+                        return [3 /*break*/, 18];
+                    case 16:
+                        console.warn('Unknown SVG element,', node);
+                        if (!(node instanceof SVGElement)) {
+                            console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
+                        }
+                        return [4 /*yield*/, this.addUnknownNode(node)];
+                    case 17:
+                        _d.sent();
+                        return [2 /*return*/];
+                    case 18:
+                        if (!visitChildren) return [3 /*break*/, 22];
+                        _i = 0, _c = node.children;
+                        _d.label = 19;
+                    case 19:
+                        if (!(_i < _c.length)) return [3 /*break*/, 22];
+                        child = _c[_i];
+                        return [4 /*yield*/, this.visit(child)];
+                    case 20:
+                        _d.sent();
+                        _d.label = 21;
+                    case 21:
+                        _i++;
+                        return [3 /*break*/, 19];
+                    case 22:
+                        this.processedCount++;
+                        return [4 /*yield*/, ((_a = this.onProgress) === null || _a === void 0 ? void 0 : _a.call(this, this.processedCount, this.totalToProcess))];
+                    case 23:
+                        _d.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    // Get SVG element attributes (e.g. xlink=...)
+    SVGLoader.prototype.getSourceAttrs = function (node) {
+        return node.getAttributeNames().map(function (attr) {
+            return [attr, node.getAttribute(attr)];
+        });
+    };
+    SVGLoader.prototype.start = function (onAddComponent, onProgress, onDetermineExportRect) {
+        var _a, _b;
+        if (onDetermineExportRect === void 0) { onDetermineExportRect = null; }
+        return __awaiter(this, void 0, void 0, function () {
+            var viewBox;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        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;
+                        return [4 /*yield*/, this.visit(this.source)];
+                    case 1:
+                        _c.sent();
+                        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);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 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.
+     */
+    SVGLoader.fromString = function (text, sanitize) {
+        var _a, _b;
+        if (sanitize === void 0) { sanitize = false; }
+        var 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.');
+        }
+        var 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("\n\t\t\t<!DOCTYPE html>\n\t\t\t<html>\n\t\t\t\t<head>\n\t\t\t\t\t<title>SVG Loading Sandbox</title>\n\t\t\t\t\t<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>\n\t\t\t\t\t<meta charset='utf-8'/>\n\t\t\t\t</head>\n\t\t\t\t<body style='font-size: 12px;'>\n\t\t\t\t\t<script>\n\t\t\t\t\t\tconsole.error('JavaScript should not be able to run here!');\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t'The SVG sandbox is broken! Please double-check the sandboxing setting.'\n\t\t\t\t\t\t);\n\t\t\t\t\t</script>\n\t\t\t\t</body>\n\t\t\t</html>\n\t\t");
+        sandboxDoc.close();
+        var svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgElem.innerHTML = text;
+        sandboxDoc.body.appendChild(svgElem);
+        return new SVGLoader(svgElem, function () {
+            svgElem.remove();
+            sandbox.remove();
+        }, !sanitize);
+    };
+    return SVGLoader;
+}());
+exports.default = SVGLoader;

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

@@ -0,0 +1 @@
+export {};