js-draw 0.25.1 → 1.0.0

package/dist/cjs/SVGLoader.js

@@ -1,72 +1,53 @@
 "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 __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 __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));
+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;
-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");
+exports.svgLoaderAttributeContainerID = exports.svgStyleAttributesDataKey = exports.svgAttributesDataKey = exports.defaultSVGViewRect = void 0;
+const math_1 = require("@js-draw/math");
+const BackgroundComponent_1 = __importStar(require("./components/BackgroundComponent"));
+const ImageComponent_1 = __importDefault(require("./components/ImageComponent"));
+const Stroke_1 = __importDefault(require("./components/Stroke"));
+const SVGGlobalAttributesObject_1 = __importDefault(require("./components/SVGGlobalAttributesObject"));
+const TextComponent_1 = __importStar(require("./components/TextComponent"));
+const UnknownSVGObject_1 = __importDefault(require("./components/UnknownSVGObject"));
+const RenderablePathSpec_1 = require("./rendering/RenderablePathSpec");
 // Size of a loaded image if no size is specified.
-exports.defaultSVGViewRect = new Rect2_1.default(0, 0, 500, 500);
+exports.defaultSVGViewRect = new math_1.Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
 exports.svgAttributesDataKey = 'svgAttrs';
+// Like {@link svgAttributesDataKey}, but for styles
 exports.svgStyleAttributesDataKey = 'svgStyleAttrs';
-var supportedStrokeFillStyleAttrs = ['stroke', 'fill', 'stroke-width'];
+// Key that specifies the ID of an SVG element that contained a given node when the image
+// was first loaded.
+exports.svgLoaderAttributeContainerID = 'svgContainerID';
+const 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; }
+class SVGLoader {
+    constructor(source, onFinish, storeUnknown = true) {
         this.source = source;
         this.onFinish = onFinish;
         this.storeUnknown = storeUnknown;
@@ -75,34 +56,35 @@ var SVGLoader = /** @class */ (function () {
         this.onDetermineExportRect = null;
         this.processedCount = 0;
         this.totalToProcess = 0;
+        this.containerGroupIDs = [];
+        this.encounteredIDs = [];
     }
     // 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;
+    getStyle(node, computedStyles) {
+        let fill = math_1.Color4.transparent;
+        let 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;
+        const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style.fill;
         if (fillAttribute) {
             try {
-                fill = Color4_1.default.fromString(fillAttribute);
+                fill = math_1.Color4.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;
+        const strokeAttribute = node.getAttribute('stroke') ?? computedStyles?.stroke ?? node.style.stroke;
+        const strokeWidthAttr = node.getAttribute('stroke-width') ?? computedStyles?.strokeWidth ?? node.style.strokeWidth;
         if (strokeAttribute && strokeWidthAttr) {
             try {
-                var width = parseFloat(strokeWidthAttr !== null && strokeWidthAttr !== void 0 ? strokeWidthAttr : '1');
+                let width = parseFloat(strokeWidthAttr ?? '1');
                 if (!isFinite(width)) {
                     width = 0;
                 }
-                var strokeColor = Color4_1.default.fromString(strokeAttribute);
+                const strokeColor = math_1.Color4.fromString(strokeAttribute);
                 if (strokeColor.a > 0) {
                     stroke = {
-                        width: width,
+                        width,
                         color: strokeColor,
                     };
                 }
@@ -111,50 +93,49 @@ var SVGLoader = /** @class */ (function () {
                 console.error('Error parsing stroke data:', e);
             }
         }
-        var style = {
-            fill: fill,
-            stroke: stroke,
+        const style = {
+            fill,
+            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);
+    }
+    strokeDataFromElem(node) {
+        const result = [];
+        const pathData = node.getAttribute('d') ?? '';
+        const 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];
+        const parts = pathData.split('M');
+        let isFirst = true;
+        for (const part of parts) {
             // Skip effective no-ops -- moveTos without additional commands.
-            var isNoOpMoveTo = /^[0-9., \t\n]+$/.exec(part);
+            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.
-                var current = !isFirst ? "M".concat(part) : part;
-                var path = Path_1.default.fromString(current);
-                var spec = path.toRenderable(style);
+                const current = !isFirst ? `M${part}` : part;
+                const path = math_1.Path.fromString(current);
+                const spec = (0, RenderablePathSpec_1.pathToRenderable)(path, style);
                 result.push(spec);
             }
             isFirst = false;
         }
         return result;
-    };
-    SVGLoader.prototype.attachUnrecognisedAttrs = function (elem, node, supportedAttrs, supportedStyleAttrs) {
+    }
+    attachUnrecognisedAttrs(elem, node, supportedAttrs, supportedStyleAttrs) {
         if (!this.storeUnknown) {
             return;
         }
-        for (var _i = 0, _a = node.getAttributeNames(); _i < _a.length; _i++) {
-            var attr = _a[_i];
+        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 (var _b = 0, _c = node.style; _b < _c.length; _b++) {
-                var attr = _c[_b];
+            // Use a for loop instead of an iterator: js-dom seems to not
+            // support using node.style as an iterator.
+            for (let i = 0; i < node.style.length; i++) {
+                const attr = node.style[i];
                 if (attr === '' || !attr) {
                     continue;
                 }
@@ -169,165 +150,137 @@ var SVGLoader = /** @class */ (function () {
                 });
             }
         }
-    };
+    }
     // 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*/];
+    async addPath(node) {
+        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;
+            }
+        }
+        await this.addComponent(elem);
+    }
+    async addBackground(node) {
+        // If a grid background,
+        if (node.classList.contains(BackgroundComponent_1.backgroundTypeToClassNameMap[BackgroundComponent_1.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) {
+                    await this.addUnknownNode(node);
+                    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*/];
+                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 ??= math_1.Color4.transparent.toHexString();
+            // A grid must have a foreground color specified.
+            if (!foregroundStr) {
+                await this.addUnknownNode(node);
+                return;
+            }
+            // Extract the grid size from the class name
+            let gridSize = undefined;
+            for (const className of node.classList) {
+                if (className.startsWith(BackgroundComponent_1.imageBackgroundGridSizeCSSPrefix)) {
+                    const sizeStr = className.substring(BackgroundComponent_1.imageBackgroundGridSizeCSSPrefix.length);
+                    gridSize = parseFloat(sizeStr.replace(/p/g, '.'));
                 }
-            });
-        });
-    };
+            }
+            let gridStrokeWidth = undefined;
+            if (gridStrokeWidthStr) {
+                gridStrokeWidth = parseFloat(gridStrokeWidthStr);
+            }
+            const backgroundColor = math_1.Color4.fromString(backgroundStr);
+            let foregroundColor = math_1.Color4.fromString(foregroundStr);
+            // Should the foreground color be determined automatically?
+            if (!node.classList.contains(BackgroundComponent_1.imageBackgroundNonAutomaticSecondaryColorCSSClassName)) {
+                foregroundColor = undefined;
+            }
+            const elem = BackgroundComponent_1.default.ofGrid(backgroundColor, gridSize, foregroundColor, gridStrokeWidth);
+            await this.addComponent(elem);
+        }
+        // Otherwise, if just a <path/>, it's a solid color background.
+        else if (node.tagName.toLowerCase() === 'path') {
+            const fill = math_1.Color4.fromString(node.getAttribute('fill') ?? node.style.fill ?? 'black');
+            const elem = new BackgroundComponent_1.default(BackgroundComponent_1.BackgroundType.SolidColor, fill);
+            await this.addComponent(elem);
+        }
+        else {
+            await 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.
-    SVGLoader.prototype.getTransform = function (elem, supportedAttrs, computedStyles) {
-        computedStyles !== null && computedStyles !== void 0 ? computedStyles : (computedStyles = window.getComputedStyle(elem));
-        var transformProperty = computedStyles.transform;
+    getTransform(elem, supportedAttrs, 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.
-        var transform;
+        let transform;
         try {
-            transform = Mat33_1.default.fromCSSMatrix(elem.style.transform);
+            transform = math_1.Mat33.fromCSSMatrix(elem.style.transform);
         }
         catch (_e) {
-            transform = Mat33_1.default.fromCSSMatrix(transformProperty);
+            transform = math_1.Mat33.fromCSSMatrix(transformProperty);
         }
-        var elemX = elem.getAttribute('x');
-        var elemY = elem.getAttribute('y');
+        const elemX = elem.getAttribute('x');
+        const 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');
+            const x = parseFloat(elemX ?? '0');
+            const y = parseFloat(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)));
+                supportedAttrs?.push('x', 'y');
+                transform = transform.rightMul(math_1.Mat33.translation(math_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];
+    }
+    makeText(elem) {
+        const contentList = [];
+        for (const child of elem.childNodes) {
             if (child.nodeType === Node.TEXT_NODE) {
-                contentList.push((_a = child.nodeValue) !== null && _a !== void 0 ? _a : '');
+                contentList.push(child.nodeValue ?? '');
             }
             else if (child.nodeType === Node.ELEMENT_NODE) {
-                var subElem = child;
+                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: ".concat(subElem));
+                    throw new Error(`Unrecognized text child element: ${subElem}`);
                 }
             }
             else {
-                throw new Error("Unrecognized text child node: ".concat(child, "."));
+                throw new Error(`Unrecognized text child node: ${child}.`);
             }
         }
         // If no content, the content is an empty string.
@@ -335,11 +288,11 @@ var SVGLoader = /** @class */ (function () {
             contentList.push('');
         }
         // Compute styles.
-        var computedStyles = window.getComputedStyle(elem);
-        var fontSizeExp = /^([-0-9.e]+)px/i;
+        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.
-        var fontSizeMatch = fontSizeExp.exec(elem.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);
@@ -349,32 +302,33 @@ var SVGLoader = /** @class */ (function () {
         if (!fontSizeMatch) {
             fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
         }
-        var supportedStyleAttrs = __spreadArray([
+        const supportedStyleAttrs = [
             'fontFamily',
-            'transform'
-        ], supportedStrokeFillStyleAttrs, true);
-        var fontSize = 12;
+            'transform',
+            ...supportedStrokeFillStyleAttrs,
+        ];
+        let fontSize = 12;
         if (fontSizeMatch) {
             supportedStyleAttrs.push('fontSize');
             fontSize = parseFloat(fontSizeMatch[1]);
         }
-        var style = {
+        const 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');
+        const supportedAttrs = [];
+        let transform = this.getTransform(elem, supportedAttrs, computedStyles);
+        let transformMode = TextComponent_1.TextTransformMode.ABSOLUTE_XY;
+        const 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)));
+            transform = transform.rightMul(math_1.Mat33.translation(math_1.Vec2.of(parseFloat(elemDX), 0)));
             supportedAttrs.push('dx');
         }
-        var elemDY = elem.getAttribute('dy');
+        const elemDY = elem.getAttribute('dy');
         if (elemDY) {
             if (transformMode === TextComponent_1.TextTransformMode.RELATIVE_X_ABSOLUTE_Y) {
                 transformMode = TextComponent_1.TextTransformMode.RELATIVE_XY;
@@ -382,249 +336,180 @@ var SVGLoader = /** @class */ (function () {
             else {
                 transformMode = TextComponent_1.TextTransformMode.RELATIVE_Y_ABSOLUTE_X;
             }
-            transform = transform.rightMul(Mat33_1.default.translation(Vec2_1.Vec2.of(0, parseFloat(elemDY))));
+            transform = transform.rightMul(math_1.Mat33.translation(math_1.Vec2.of(0, parseFloat(elemDY))));
             supportedAttrs.push('dy');
         }
-        var result = new TextComponent_1.default(contentList, transform, style, transformMode);
+        const 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');
+    }
+    async addText(elem) {
+        try {
+            const textElem = this.makeText(elem);
+            await this.addComponent(textElem);
+        }
+        catch (e) {
+            console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
+            this.addUnknownNode(elem);
+        }
+    }
+    async addImage(elem) {
+        const image = new Image();
+        image.src = elem.getAttribute('xlink:href') ?? elem.href.baseVal;
+        image.setAttribute('alt', elem.getAttribute('aria-label') ?? '');
+        try {
+            const supportedAttrs = [];
+            const transform = this.getTransform(elem, supportedAttrs);
+            const imageElem = await ImageComponent_1.default.fromImage(image, transform);
+            this.attachUnrecognisedAttrs(imageElem, elem, new Set(supportedAttrs), new Set(['transform']));
+            await this.addComponent(imageElem);
+        }
+        catch (e) {
+            console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
+            await this.addUnknownNode(elem);
+        }
+    }
+    async addUnknownNode(node) {
+        if (this.storeUnknown) {
+            const component = new UnknownSVGObject_1.default(node);
+            await this.addComponent(component);
+        }
+    }
+    async startGroup(node) {
+        node = node.cloneNode(false);
+        // Select a unique ID based on the node's ID property (if it exists).
+        // Use `||` and not `??` so that empty string IDs are also replaced.
+        let id = node.id || `id-${this.encounteredIDs.length}`;
+        // Make id unique.
+        let idSuffixCounter = 0;
+        let suffix = '';
+        while (this.encounteredIDs.includes(id + suffix)) {
+            idSuffixCounter++;
+            suffix = '--' + idSuffixCounter;
+        }
+        id += suffix;
+        // Remove all children from the node -- children will be handled separately
+        // (not removing children here could cause duplicates in the result, when rendered).
+        node.replaceChildren();
+        node.id = id;
+        const component = new UnknownSVGObject_1.default(node);
+        this.addComponent(component);
+        // Add to IDs after -- we don't want the <g> element to be marked
+        // as its own container.
+        this.containerGroupIDs.push(node.id);
+        this.encounteredIDs.push(node.id);
+    }
+    // Ends the most recent group started by .startGroup
+    async endGroup() {
+        this.containerGroupIDs.pop();
+    }
+    async addComponent(component) {
+        // Attach the stack of container IDs
+        if (this.containerGroupIDs.length > 0) {
+            component.attachLoadSaveData(exports.svgLoaderAttributeContainerID, [...this.containerGroupIDs]);
+        }
+        await this.onAddComponent?.(component);
+    }
+    updateViewBox(node) {
+        const 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]);
+        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 ".concat(node, " has an unparsable viewbox. Viewbox: ").concat(viewBoxAttr, ". Match: ").concat(components, "."));
+            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);
-    };
-    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*/];
+        this.rootViewBox = new math_1.Rect2(x, y, width, height);
+        this.onDetermineExportRect?.(this.rootViewBox);
+    }
+    async updateSVGAttrs(node) {
+        if (this.storeUnknown) {
+            await this.onAddComponent?.(new SVGGlobalAttributesObject_1.default(this.getSourceAttrs(node)));
+        }
+    }
+    async visit(node) {
+        this.totalToProcess += node.childElementCount;
+        let visitChildren = true;
+        switch (node.tagName.toLowerCase()) {
+            case 'g':
+                if (node.classList.contains(BackgroundComponent_1.imageBackgroundCSSClassName)) {
+                    await this.addBackground(node);
+                    visitChildren = false;
                 }
-            });
-        });
-    };
-    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*/];
+                else {
+                    await this.startGroup(node);
                 }
-            });
-        });
-    };
+                // Otherwise, continue -- visit the node's children.
+                break;
+            case 'path':
+                if (node.classList.contains(BackgroundComponent_1.imageBackgroundCSSClassName)) {
+                    await this.addBackground(node);
+                }
+                else {
+                    await this.addPath(node);
+                }
+                break;
+            case 'text':
+                await this.addText(node);
+                visitChildren = false;
+                break;
+            case 'image':
+                await this.addImage(node);
+                // Images should not have children.
+                visitChildren = false;
+                break;
+            case 'svg':
+                this.updateViewBox(node);
+                this.updateSVGAttrs(node);
+                break;
+            case 'style':
+                await this.addUnknownNode(node);
+                break;
+            default:
+                console.warn('Unknown SVG element,', node, node.tagName);
+                if (!(node instanceof SVGElement)) {
+                    console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
+                }
+                await this.addUnknownNode(node);
+                return;
+        }
+        if (visitChildren) {
+            for (const child of node.children) {
+                await this.visit(child);
+            }
+            if (node.tagName.toLowerCase() === 'g') {
+                await this.endGroup();
+            }
+        }
+        this.processedCount++;
+        await this.onProgress?.(this.processedCount, this.totalToProcess);
+    }
     // Get SVG element attributes (e.g. xlink=...)
-    SVGLoader.prototype.getSourceAttrs = function (node) {
-        return node.getAttributeNames().map(function (attr) {
+    getSourceAttrs(node) {
+        return node.getAttributeNames().map(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*/];
-                }
-            });
-        });
-    };
+    }
+    async start(onAddComponent, onProgress, onDetermineExportRect = null) {
+        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;
+        await this.visit(this.source);
+        const viewBox = this.rootViewBox;
+        if (!viewBox) {
+            this.onDetermineExportRect?.(exports.defaultSVGViewRect);
+        }
+        this.onFinish?.();
+    }
     /**
      * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
      * iframe with `sandbox="allow-same-origin"`
@@ -634,10 +519,8 @@ var SVGLoader = /** @class */ (function () {
      * @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');
+    static fromString(text, sanitize = false) {
+        const sandbox = document.createElement('iframe');
         sandbox.src = 'about:blank';
         sandbox.setAttribute('sandbox', 'allow-same-origin');
         sandbox.setAttribute('csp', 'default-src \'about:blank\'');
@@ -648,20 +531,36 @@ var SVGLoader = /** @class */ (function () {
             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;
+        const sandboxDoc = sandbox.contentWindow?.document ?? 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.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();
-        var svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
         svgElem.innerHTML = text;
         sandboxDoc.body.appendChild(svgElem);
-        return new SVGLoader(svgElem, function () {
+        return new SVGLoader(svgElem, () => {
             svgElem.remove();
             sandbox.remove();
         }, !sanitize);
-    };
-    return SVGLoader;
-}());
+    }
+}
 exports.default = SVGLoader;