js-draw 1.2.1 → 1.3.0

package/dist/cjs/EditorImage.js

@@ -1,4 +1,27 @@
 "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 __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
     if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
@@ -8,13 +31,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 var _a, _b, _c;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImageNode = exports.EditorImageEventType = exports.sortLeavesByZIndex = void 0;
+exports.RootImageNode = exports.ImageNode = exports.EditorImageEventType = exports.sortLeavesByZIndex = void 0;
 const Viewport_1 = __importDefault(require("./Viewport"));
-const AbstractComponent_1 = __importDefault(require("./components/AbstractComponent"));
+const AbstractComponent_1 = __importStar(require("./components/AbstractComponent"));
 const math_1 = require("@js-draw/math");
 const SerializableCommand_1 = __importDefault(require("./commands/SerializableCommand"));
 const EventDispatcher_1 = __importDefault(require("./EventDispatcher"));
 const assertions_1 = require("./util/assertions");
+const Command_1 = __importDefault(require("./commands/Command"));
 // @internal Sort by z-index, low to high
 const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
@@ -23,23 +47,25 @@ exports.sortLeavesByZIndex = sortLeavesByZIndex;
 var EditorImageEventType;
 (function (EditorImageEventType) {
     EditorImageEventType[EditorImageEventType["ExportViewportChanged"] = 0] = "ExportViewportChanged";
+    EditorImageEventType[EditorImageEventType["AutoresizeModeChanged"] = 1] = "AutoresizeModeChanged";
 })(EditorImageEventType || (exports.EditorImageEventType = EditorImageEventType = {}));
+const debugMode = false;
 // Handles lookup/storage of elements in the image
 class EditorImage {
     // @internal
     constructor() {
         this.componentCount = 0;
-        this.root = new ImageNode();
-        this.background = new ImageNode();
+        this.settingExportRect = false;
+        this.root = new RootImageNode();
+        this.background = new RootImageNode();
         this.componentsById = {};
         this.notifier = new EventDispatcher_1.default();
         this.importExportViewport = new Viewport_1.default(() => {
-            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
-                image: this,
-            });
+            this.onExportViewportChanged();
         });
         // Default to a 500x500 image
         this.importExportViewport.updateScreenSize(math_1.Vec2.of(500, 500));
+        this.shouldAutoresizeExportViewport = false;
     }
     // Returns all components that make up the background of this image. These
     // components are rendered below all other components.
@@ -73,7 +99,13 @@ class EditorImage {
     /** @internal */
     renderWithCache(screenRenderer, cache, viewport) {
         this.background.render(screenRenderer, viewport.visibleRect);
-        cache.render(screenRenderer, this.root, viewport);
+        // If in debug mode, avoid rendering with cache to show additional debug information
+        if (!debugMode) {
+            cache.render(screenRenderer, this.root, viewport);
+        }
+        else {
+            this.root.render(screenRenderer, viewport.visibleRect);
+        }
     }
     /**
      * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
@@ -89,7 +121,11 @@ class EditorImage {
     renderAll(renderer) {
         this.render(renderer, null);
     }
-    /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
+    /**
+     * @returns all elements in the image, sorted by z-index. This can be slow for large images.
+     *
+     * Does not include background elements. See {@link getBackgroundComponents}.
+     */
     getAllElements() {
         const leaves = this.root.getLeaves();
         (0, exports.sortLeavesByZIndex)(leaves);
@@ -100,15 +136,25 @@ class EditorImage {
         return this.componentCount;
     }
     /** @returns a list of `AbstractComponent`s intersecting `region`, sorted by z-index. */
-    getElementsIntersectingRegion(region) {
-        const leaves = this.root.getLeavesIntersectingRegion(region);
+    getElementsIntersectingRegion(region, includeBackground = false) {
+        let leaves = this.root.getLeavesIntersectingRegion(region);
+        if (includeBackground) {
+            leaves = leaves.concat(this.background.getLeavesIntersectingRegion(region));
+        }
         (0, exports.sortLeavesByZIndex)(leaves);
         return leaves.map(leaf => leaf.getContent());
     }
-    /** Called whenever an element is completely removed. @internal */
+    /** Called whenever (just after) an element is completely removed. @internal */
     onDestroyElement(elem) {
         this.componentCount--;
         delete this.componentsById[elem.getId()];
+        this.autoresizeExportViewport();
+    }
+    /** Called just after an element is added. @internal */
+    onElementAdded(elem) {
+        this.componentCount++;
+        this.componentsById[elem.getId()] = elem;
+        this.autoresizeExportViewport();
     }
     /**
      * @returns the AbstractComponent with `id`, if it exists.
@@ -119,13 +165,15 @@ class EditorImage {
         return this.componentsById[id] ?? null;
     }
     addElementDirectly(elem) {
+        // Because onAddToImage can affect the element's bounding box,
+        // this needs to be called before parentTree.addLeaf.
         elem.onAddToImage(this);
-        this.componentCount++;
-        this.componentsById[elem.getId()] = elem;
         // If a background component, add to the background. Else,
         // add to the normal component tree.
         const parentTree = elem.isBackground() ? this.background : this.root;
-        return parentTree.addLeaf(elem);
+        const result = parentTree.addLeaf(elem);
+        this.onElementAdded(elem);
+        return result;
     }
     removeElementDirectly(element) {
         const container = this.findParent(element);
@@ -156,11 +204,82 @@ class EditorImage {
     getImportExportViewport() {
         return this.importExportViewport;
     }
+    /**
+     * @see {@link setImportExportRect}
+     */
+    getImportExportRect() {
+        return this.getImportExportViewport().visibleRect;
+    }
+    /**
+     * Sets the import/export rectangle to the given `imageRect`. Disables
+     * autoresize (if it was previously enabled).
+     */
     setImportExportRect(imageRect) {
-        const importExportViewport = this.getImportExportViewport();
-        const origSize = importExportViewport.visibleRect.size;
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        return new EditorImage.SetImportExportRectCommand(origSize, origTransform, imageRect);
+        return EditorImage.SetImportExportRectCommand.of(this, imageRect, false);
+    }
+    getAutoresizeEnabled() {
+        return this.shouldAutoresizeExportViewport;
+    }
+    /** Returns a `Command` that sets whether the image should autoresize. */
+    setAutoresizeEnabled(autoresize) {
+        if (autoresize === this.shouldAutoresizeExportViewport) {
+            return Command_1.default.empty;
+        }
+        const newBBox = this.root.getBBox();
+        return EditorImage.SetImportExportRectCommand.of(this, newBBox, autoresize);
+    }
+    setAutoresizeEnabledDirectly(shouldAutoresize) {
+        if (shouldAutoresize !== this.shouldAutoresizeExportViewport) {
+            this.shouldAutoresizeExportViewport = shouldAutoresize;
+            this.notifier.dispatch(EditorImageEventType.AutoresizeModeChanged, {
+                image: this,
+            });
+        }
+    }
+    /** Updates the size/position of the viewport */
+    autoresizeExportViewport() {
+        // Only autoresize if in autoresize mode -- otherwise resizing the image
+        // should be done with undoable commands.
+        if (this.shouldAutoresizeExportViewport) {
+            this.setExportRectDirectly(this.root.getBBox());
+        }
+    }
+    /**
+     * Sets the import/export viewport directly, without returning a `Command`.
+     * As such, this is not undoable.
+     *
+     * See setImportExportRect
+     *
+     * Returns true if changes to the viewport were made (and thus
+     * ExportViewportChanged was fired.)
+     */
+    setExportRectDirectly(newRect) {
+        const viewport = this.getImportExportViewport();
+        const lastSize = viewport.getScreenRectSize();
+        const lastTransform = viewport.canvasToScreenTransform;
+        const newTransform = math_1.Mat33.translation(newRect.topLeft.times(-1));
+        if (!lastSize.eq(newRect.size) || !lastTransform.eq(newTransform)) {
+            // Prevent the ExportViewportChanged event from being fired
+            // multiple times for the same viewport change: Set settingExportRect
+            // to true.
+            this.settingExportRect = true;
+            viewport.updateScreenSize(newRect.size);
+            viewport.resetTransform(newTransform);
+            this.settingExportRect = false;
+            this.onExportViewportChanged();
+            return true;
+        }
+        return false;
+    }
+    onExportViewportChanged() {
+        // Prevent firing duplicate events -- changes
+        // made by exportViewport.resetTransform may cause this method to be
+        // called.
+        if (!this.settingExportRect) {
+            this.notifier.dispatch(EditorImageEventType.ExportViewportChanged, {
+                image: this,
+            });
+        }
     }
 }
 _a = EditorImage;
@@ -221,37 +340,57 @@ EditorImage.AddElementCommand = (_b = class extends SerializableCommand_1.defaul
     _b);
 // Handles resizing the background import/export region of the image.
 EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand_1.default {
-        constructor(originalSize, originalTransform, finalRect) {
+        constructor(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize) {
             super(EditorImage.SetImportExportRectCommand.commandId);
             this.originalSize = originalSize;
             this.originalTransform = originalTransform;
-            this.finalRect = finalRect;
+            this.originalAutoresize = originalAutoresize;
+            this.newExportRect = newExportRect;
+            this.newAutoresize = newAutoresize;
+        }
+        // Uses `image` to store the original size/transform
+        static of(image, newExportRect, newAutoresize) {
+            const importExportViewport = image.getImportExportViewport();
+            const originalSize = importExportViewport.visibleRect.size;
+            const originalTransform = importExportViewport.canvasToScreenTransform;
+            const originalAutoresize = image.getAutoresizeEnabled();
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, newExportRect, newAutoresize);
         }
         apply(editor) {
-            const viewport = editor.image.getImportExportViewport();
-            viewport.updateScreenSize(this.finalRect.size);
-            viewport.resetTransform(math_1.Mat33.translation(this.finalRect.topLeft.times(-1)));
+            editor.image.setAutoresizeEnabledDirectly(this.newAutoresize);
+            editor.image.setExportRectDirectly(this.newExportRect);
             editor.queueRerender();
         }
         unapply(editor) {
             const viewport = editor.image.getImportExportViewport();
+            editor.image.setAutoresizeEnabledDirectly(this.originalAutoresize);
             viewport.updateScreenSize(this.originalSize);
             viewport.resetTransform(this.originalTransform);
             editor.queueRerender();
         }
         description(_editor, localization) {
-            return localization.resizeOutputCommand(this.finalRect);
+            if (this.newAutoresize !== this.originalAutoresize) {
+                if (this.newAutoresize) {
+                    return localization.enabledAutoresizeOutputCommand;
+                }
+                else {
+                    return localization.disabledAutoresizeOutputCommand;
+                }
+            }
+            return localization.resizeOutputCommand(this.newExportRect);
         }
         serializeToJSON() {
             return {
                 originalSize: this.originalSize.xy,
                 originalTransform: this.originalTransform.toArray(),
                 newRegion: {
-                    x: this.finalRect.x,
-                    y: this.finalRect.y,
-                    w: this.finalRect.w,
-                    h: this.finalRect.h,
+                    x: this.newExportRect.x,
+                    y: this.newExportRect.y,
+                    w: this.newExportRect.w,
+                    h: this.newExportRect.h,
                 },
+                autoresize: this.newAutoresize,
+                originalAutoresize: this.originalAutoresize,
             };
         }
     },
@@ -269,15 +408,22 @@ EditorImage.SetImportExportRectCommand = (_c = class extends SerializableCommand
                 json.newRegion.w,
                 json.newRegion.h,
             ]);
+            (0, assertions_1.assertIsBoolean)(json.autoresize ?? false);
+            (0, assertions_1.assertIsBoolean)(json.originalAutoresize ?? false);
             const originalSize = math_1.Vec2.ofXY(json.originalSize);
             const originalTransform = new math_1.Mat33(...json.originalTransform);
             const finalRect = new math_1.Rect2(json.newRegion.x, json.newRegion.y, json.newRegion.w, json.newRegion.h);
-            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, finalRect);
+            const autoresize = json.autoresize ?? false;
+            const originalAutoresize = json.originalAutoresize ?? false;
+            return new EditorImage.SetImportExportRectCommand(originalSize, originalTransform, originalAutoresize, finalRect, autoresize);
         });
     })(),
     _c);
 exports.default = EditorImage;
-/** Part of the Editor's image. @internal */
+/**
+ * Part of the Editor's image. Does not handle fullscreen/invisible components.
+ * @internal
+ */
 class ImageNode {
     constructor(parent = null) {
         this.parent = parent;
@@ -299,9 +445,11 @@ class ImageNode {
     getParent() {
         return this.parent;
     }
-    getChildrenIntersectingRegion(region) {
+    // Override this to change how children are considered within a given region.
+    getChildrenIntersectingRegion(region, isTooSmallFilter) {
         return this.children.filter(child => {
-            return child.getBBox().intersects(region);
+            const bbox = child.getBBox();
+            return !isTooSmallFilter?.(bbox) && bbox.intersects(region);
         });
     }
     getChildrenOrSelfIntersectingRegion(region) {
@@ -311,29 +459,25 @@ class ImageNode {
         return this.getChildrenIntersectingRegion(region);
     }
     // Returns a list of `ImageNode`s with content (and thus no children).
+    // Override getChildrenIntersectingRegion to customize how this method
+    // determines whether/which children are in `region`.
     getLeavesIntersectingRegion(region, isTooSmall) {
         const result = [];
-        let current;
         const workList = [];
         workList.push(this);
-        const toNext = () => {
-            current = undefined;
-            const next = workList.pop();
-            if (next && !isTooSmall?.(next.bbox)) {
-                current = next;
-                if (current.content !== null && current.getBBox().intersection(region)) {
-                    result.push(current);
-                }
-                workList.push(...current.getChildrenIntersectingRegion(region));
-            }
-        };
         while (workList.length > 0) {
-            toNext();
+            const current = workList.pop();
+            if (current.content !== null) {
+                result.push(current);
+            }
+            workList.push(...current.getChildrenIntersectingRegion(region, isTooSmall));
         }
         return result;
     }
     // Returns the child of this with the target content or `null` if no
     // such child exists.
+    //
+    // Note: Relies on all children to have valid bounding boxes.
     getChildWithContent(target) {
         const candidates = this.getLeavesIntersectingRegion(target.getBBox());
         for (const candidate of candidates) {
@@ -397,12 +541,19 @@ class ImageNode {
             result.rebalance();
             return result;
         }
-        const newNode = new ImageNode(this);
+        const newNode = ImageNode.createLeafNode(this, leaf);
         this.children.push(newNode);
-        newNode.content = leaf;
         newNode.recomputeBBox(true);
         return newNode;
     }
+    // Creates a new leaf node with the given content.
+    // This only establishes the parent-child linking in one direction. Callers
+    // must add the resultant node to the list of children manually.
+    static createLeafNode(parent, content) {
+        const newNode = new ImageNode(parent);
+        newNode.content = content;
+        return newNode;
+    }
     getBBox() {
         return this.bbox;
     }
@@ -418,9 +569,20 @@ class ImageNode {
             this.bbox = math_1.Rect2.union(...this.children.map(child => child.getBBox()));
         }
         if (bubbleUp && !oldBBox.eq(this.bbox)) {
-            this.parent?.recomputeBBox(true);
+            if (!this.bbox.containsRect(oldBBox)) {
+                this.parent?.unionBBoxWith(this.bbox);
+            }
+            else {
+                this.parent?.recomputeBBox(true);
+            }
         }
     }
+    // Grows this' bounding box to also include `other`.
+    // Always bubbles up.
+    unionBBoxWith(other) {
+        this.bbox = this.bbox.union(other);
+        this.parent?.unionBBoxWith(other);
+    }
     updateParents(recursive = false) {
         for (const child of this.children) {
             child.parent = this;
@@ -451,6 +613,19 @@ class ImageNode {
             }
         }
     }
+    // Removes the parent-to-child link.
+    // Called internally by `.remove`
+    removeChild(child) {
+        const oldChildCount = this.children.length;
+        this.children = this.children.filter(node => {
+            return node !== child;
+        });
+        console.assert(this.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.children.length} after removing all nodes equal to ${child}. Nodes should only be removed once.`);
+        this.children.forEach(child => {
+            child.rebalance();
+        });
+        this.recomputeBBox(true);
+    }
     // Remove this node and all of its children
     remove() {
         this.content?.onRemoveFromImage();
@@ -459,18 +634,10 @@ class ImageNode {
             this.children = [];
             return;
         }
-        const oldChildCount = this.parent.children.length;
-        this.parent.children = this.parent.children.filter(node => {
-            return node !== this;
-        });
-        console.assert(this.parent.children.length === oldChildCount - 1, `${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`);
-        this.parent.children.forEach(child => {
-            child.rebalance();
-        });
-        this.parent.recomputeBBox(true);
-        // Invalidate/disconnect this.
-        this.content = null;
+        this.parent.removeChild(this);
+        // Remove the child-to-parent link and invalid this
         this.parent = null;
+        this.content = null;
         this.children = [];
     }
     render(renderer, visibleRect) {
@@ -486,7 +653,116 @@ class ImageNode {
             // Leaves by definition have content
             leaf.getContent().render(renderer, visibleRect);
         }
+        // Show debug information
+        if (debugMode && visibleRect) {
+            this.renderDebugBoundingBoxes(renderer, visibleRect);
+        }
+    }
+    // Debug only: Shows bounding boxes of this and all children.
+    renderDebugBoundingBoxes(renderer, visibleRect, depth = 0) {
+        const bbox = this.getBBox();
+        const pixelSize = 1 / (renderer.getSizeOfCanvasPixelOnScreen() || 1);
+        if (bbox.maxDimension < 3 * pixelSize || !bbox.intersects(visibleRect)) {
+            return;
+        }
+        // Render debug information for this
+        renderer.startObject(bbox);
+        // Different styling for leaf nodes
+        const isLeaf = !!this.content;
+        const fill = isLeaf ? math_1.Color4.ofRGBA(1, 0, 1, 0.4) : math_1.Color4.ofRGBA(0, 1, Math.sin(depth), 0.6);
+        const lineWidth = isLeaf ? 1 * pixelSize : 2 * pixelSize;
+        renderer.drawRect(bbox.intersection(visibleRect), lineWidth, { fill });
+        renderer.endObject();
+        // Render debug information for children
+        for (const child of this.children) {
+            child.renderDebugBoundingBoxes(renderer, visibleRect, depth + 1);
+        }
     }
 }
 exports.ImageNode = ImageNode;
 ImageNode.idCounter = 0;
+/** An `ImageNode` that can properly handle fullscreen/data components. @internal */
+class RootImageNode extends ImageNode {
+    constructor() {
+        super(...arguments);
+        // Nodes that will always take up the entire screen
+        this.fullscreenChildren = [];
+        // Nodes that will never be visible unless a full render is done.
+        this.dataComponents = [];
+    }
+    getChildrenIntersectingRegion(region, _isTooSmall) {
+        const result = super.getChildrenIntersectingRegion(region);
+        for (const node of this.fullscreenChildren) {
+            result.push(node);
+        }
+        return result;
+    }
+    getLeaves() {
+        const leaves = super.getLeaves();
+        // Add fullscreen/data components — this method should
+        // return *all* leaves.
+        return this.dataComponents.concat(this.fullscreenChildren, leaves);
+    }
+    removeChild(child) {
+        let removed = false;
+        const checkTargetChild = (component) => {
+            const isTarget = component === child;
+            removed ||= isTarget;
+            return !isTarget;
+        };
+        // Check whether the child is stored in the data/fullscreen
+        // component arrays first.
+        this.dataComponents = this.dataComponents
+            .filter(checkTargetChild);
+        this.fullscreenChildren = this.fullscreenChildren
+            .filter(checkTargetChild);
+        if (!removed) {
+            super.removeChild(child);
+        }
+    }
+    getChildWithContent(target) {
+        const searchExtendedChildren = () => {
+            // Search through all extended children
+            const candidates = this.fullscreenChildren.concat(this.dataComponents);
+            for (const candidate of candidates) {
+                if (candidate.getContent() === target) {
+                    return candidate;
+                }
+            }
+            return null;
+        };
+        // If positioned as if a standard child, search using the superclass first.
+        // Because it could be mislabeled, also search the extended children if the superclass
+        // search fails.
+        if (target.getSizingMode() === AbstractComponent_1.ComponentSizingMode.BoundingBox) {
+            return super.getChildWithContent(target) ?? searchExtendedChildren();
+        }
+        // Fall back to the superclass -- it's possible that the component has
+        // changed labels.
+        return super.getChildWithContent(target) ?? searchExtendedChildren();
+    }
+    addLeaf(leafContent) {
+        const sizingMode = leafContent.getSizingMode();
+        if (sizingMode === AbstractComponent_1.ComponentSizingMode.BoundingBox) {
+            return super.addLeaf(leafContent);
+        }
+        else if (sizingMode === AbstractComponent_1.ComponentSizingMode.FillScreen) {
+            this.onContentChange();
+            const newNode = ImageNode.createLeafNode(this, leafContent);
+            this.fullscreenChildren.push(newNode);
+            return newNode;
+        }
+        else if (sizingMode === AbstractComponent_1.ComponentSizingMode.Anywhere) {
+            this.onContentChange();
+            const newNode = ImageNode.createLeafNode(this, leafContent);
+            this.dataComponents.push(newNode);
+            return newNode;
+        }
+        else {
+            const exhaustivenessCheck = sizingMode;
+            throw new Error(`Invalid sizing mode, ${sizingMode}`);
+            return exhaustivenessCheck;
+        }
+    }
+}
+exports.RootImageNode = RootImageNode;

package/dist/cjs/SVGLoader.d.ts

@@ -4,22 +4,28 @@ export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";
 export declare const svgStyleAttributesDataKey = "svgStyleAttrs";
 export declare const svgLoaderAttributeContainerID = "svgContainerID";
+export declare const svgLoaderAutoresizeClassName = "js-draw--autoresize";
 export type SVGLoaderUnknownAttribute = [string, string];
 export type SVGLoaderUnknownStyleAttribute = {
     key: string;
     value: string;
     priority?: string;
 };
+export interface SVGLoaderOptions {
+    sanitize?: boolean;
+    disableUnknownObjectWarnings?: boolean;
+}
 export default class SVGLoader implements ImageLoader {
     private source;
-    private onFinish?;
-    private readonly storeUnknown;
+    private onFinish;
     private onAddComponent;
     private onProgress;
     private onDetermineExportRect;
     private processedCount;
     private totalToProcess;
     private rootViewBox;
+    private readonly storeUnknown;
+    private readonly disableUnknownObjectWarnings;
     private constructor();
     private getStyle;
     private strokeDataFromElem;
@@ -48,7 +54,7 @@ export default class SVGLoader implements ImageLoader {
      *
      * @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.
+     * @param options - if `true` or `false`, treated as the `sanitize` option -- don't store unknown attributes.
      */
-    static fromString(text: string, sanitize?: boolean): SVGLoader;
+    static fromString(text: string, options?: Partial<SVGLoaderOptions> | boolean): SVGLoader;
 }