js-draw 0.11.3 → 0.13.0

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -1,6 +1,3 @@
-// Allows users to select/transform portions of the `EditorImage`.
-// With respect to `extend`ing, `SelectionTool` is not stable.
-// @packageDocumentation
 import Mat33 from '../../math/Mat33';
 import { Vec2 } from '../../math/Vec2';
 import { EditorEventType } from '../../types';
@@ -10,7 +7,8 @@ import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
 import TextComponent from '../../components/TextComponent';
 export const cssPrefix = 'selection-tool-';
-// {@inheritDoc SelectionTool!}
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
@@ -18,6 +16,7 @@ export default class SelectionTool extends BaseTool {
         this.lastEvtTarget = null;
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
+        this.ctrlKeyPressed = false;
         this.selectionBoxHandlingEvt = false;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
@@ -45,17 +44,37 @@ export default class SelectionTool extends BaseTool {
         }
         this.selectionBox.addTo(this.handleOverlay);
     }
-    onPointerDown(event) {
-        var _a;
-        if (event.allPointers.length === 1 && event.current.isPrimary) {
-            if (this.lastEvtTarget && ((_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragStart(event.current, this.lastEvtTarget))) {
-                this.selectionBoxHandlingEvt = true;
-                this.expandingSelectionBox = false;
+    snapSelectionToGrid() {
+        if (!this.selectionBox)
+            throw new Error('No selection to snap!');
+        const topLeftOfBBox = this.selectionBox.region.topLeft;
+        const snapDistance = this.editor.viewport.snapToGrid(topLeftOfBBox).minus(topLeftOfBBox);
+        const oldTransform = this.selectionBox.getTransform();
+        this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDistance)));
+        this.selectionBox.finalizeTransform();
+    }
+    onPointerDown({ allPointers, current }) {
+        const snapToGrid = this.ctrlKeyPressed;
+        if (snapToGrid) {
+            current = current.snappedToGrid(this.editor.viewport);
+        }
+        if (allPointers.length === 1 && current.isPrimary) {
+            let transforming = false;
+            if (this.lastEvtTarget && this.selectionBox) {
+                if (snapToGrid) {
+                    this.snapSelectionToGrid();
+                }
+                const dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
+                if (dragStartResult) {
+                    transforming = true;
+                    this.selectionBoxHandlingEvt = true;
+                    this.expandingSelectionBox = false;
+                }
             }
-            else {
+            if (!transforming) {
                 // Shift key: Combine the new and old selection boxes at the end of the gesture.
                 this.expandingSelectionBox = this.shiftKeyPressed;
-                this.makeSelectionBox(event.current.canvasPos);
+                this.makeSelectionBox(current.canvasPos);
             }
             return true;
         }
@@ -64,11 +83,15 @@ export default class SelectionTool extends BaseTool {
     onPointerMove(event) {
         if (!this.selectionBox)
             return;
+        let currentPointer = event.current;
+        if (this.ctrlKeyPressed) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
         if (this.selectionBoxHandlingEvt) {
-            this.selectionBox.onDragUpdate(event.current);
+            this.selectionBox.onDragUpdate(currentPointer);
         }
         else {
-            this.selectionBox.setToPoint(event.current.canvasPos);
+            this.selectionBox.setToPoint(currentPointer.canvasPos);
         }
     }
     onSelectionUpdated() {
@@ -113,7 +136,11 @@ export default class SelectionTool extends BaseTool {
     onPointerUp(event) {
         if (!this.selectionBox)
             return;
-        this.selectionBox.setToPoint(event.current.canvasPos);
+        let currentPointer = event.current;
+        if (this.ctrlKeyPressed) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
+        this.selectionBox.setToPoint(currentPointer.canvasPos);
         // Were we expanding the previous selection?
         if (this.expandingSelectionBox && this.prevSelectionBox) {
             // If so, finish expanding.
@@ -142,6 +169,10 @@ export default class SelectionTool extends BaseTool {
         this.expandingSelectionBox = false;
     }
     onKeyPress(event) {
+        if (event.key === 'Control') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
         if (this.selectionBox && event.ctrlKey && event.key === 'd') {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
@@ -235,13 +266,19 @@ export default class SelectionTool extends BaseTool {
         return handled;
     }
     onKeyUp(evt) {
+        if (evt.key === 'Control') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
         if (evt.key === 'Shift') {
             this.shiftKeyPressed = false;
             return true;
         }
         else if (evt.ctrlKey) {
             if (this.selectionBox && evt.key === 'd') {
-                this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+                this.selectionBox.duplicateSelectedObjects().then(command => {
+                    this.editor.dispatch(command);
+                });
                 return true;
             }
             else if (evt.key === 'a') {
@@ -289,6 +326,8 @@ export default class SelectionTool extends BaseTool {
         // Clear the selection
         this.handleOverlay.replaceChildren();
         this.selectionBox = null;
+        this.shiftKeyPressed = false;
+        this.ctrlKeyPressed = false;
         this.handleOverlay.style.display = enabled ? 'block' : 'none';
         if (enabled) {
             this.handleOverlay.tabIndex = 0;
@@ -353,4 +392,5 @@ SelectionTool.handleableKeys = [
     'e', 'j', 'ArrowDown',
     'r', 'R',
     'i', 'I', 'o', 'O',
+    'Control',
 ];

package/dist/src/tools/TextTool.js

@@ -69,12 +69,13 @@ export default class TextTool extends BaseTool {
     flushInput(removeInput = true) {
         if (this.textInputElem && this.textTargetPosition) {
             const content = this.textInputElem.value.trimEnd();
+            this.textInputElem.value = '';
             if (removeInput) {
-                this.textInputElem.remove();
+                // In some browsers, .remove() triggers a .blur event (synchronously).
+                // Clear this.textInputElem before removal
+                const input = this.textInputElem;
                 this.textInputElem = null;
-            }
-            else {
-                this.textInputElem.value = '';
+                input.remove();
             }
             if (content === '') {
                 return;
@@ -145,9 +146,12 @@ export default class TextTool extends BaseTool {
             // Delay removing the input -- flushInput may be called within a blur()
             // event handler
             const removeInput = false;
-            this.flushInput(removeInput);
             const input = this.textInputElem;
-            setTimeout(() => input === null || input === void 0 ? void 0 : input.remove(), 0);
+            this.flushInput(removeInput);
+            this.textInputElem = null;
+            setTimeout(() => {
+                input === null || input === void 0 ? void 0 : input.remove();
+            }, 0);
         };
         this.textInputElem.onkeyup = (evt) => {
             var _a, _b;

package/dist/src/tools/ToolSwitcherShortcut.d.ts

@@ -1,6 +1,14 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ * @deprecated This may be replaced in the future.
+ */
 export default class ToolSwitcherShortcut extends BaseTool {
     private editor;
     constructor(editor: Editor);

package/dist/src/tools/ToolSwitcherShortcut.js

@@ -1,12 +1,18 @@
-// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
-// @packageDocumentation
 import BaseTool from './BaseTool';
-// {@inheritDoc ToolSwitcherShortcut!}
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ * @deprecated This may be replaced in the future.
+ */
 export default class ToolSwitcherShortcut extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.changeTool);
         this.editor = editor;
     }
+    // @internal
     onKeyPress({ key }) {
         const toolController = this.editor.toolController;
         const primaryTools = toolController.getPrimaryTools();

package/dist/src/tools/UndoRedoShortcut.js

@@ -1,13 +1,11 @@
-// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
-// @packageDocumentation
 import BaseTool from './BaseTool';
-// {@inheritDoc UndoRedoShortcut!}
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
 export default class UndoRedoShortcut extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.undoRedoTool);
         this.editor = editor;
     }
-    // Activate undo/redo
+    // @internal
     onKeyPress({ key, ctrlKey }) {
         if (ctrlKey) {
             if (key === 'z') {

package/dist/src/types.d.ts

@@ -129,8 +129,8 @@ export interface ToolbarDropdownShownEvent {
     readonly parentWidget: BaseWidget;
 }
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
-export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
-export type ComponentAddedListener = (component: AbstractComponent) => void;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
+export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
 export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.11.3",
+	"version": "0.13.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -101,7 +101,7 @@
 		"ts-jest": "^29.0.3",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.23",
+		"typedoc": "^0.23.24",
 		"typescript": "^4.9.4",
 		"webpack": "^5.75.0"
 	},

package/src/Color4.test.ts

@@ -16,4 +16,15 @@ describe('Color4', () => {
 		expect(Color4.fromString('rgba ( 255, 0,\t 0, 0.5)')).objEq(Color4.ofRGBA(1, 0, 0, 0.5));
 		expect(Color4.fromString('rgba( 0, 0, 128, 0)')).objEq(Color4.ofRGBA(0, 0, 128/255, 0));
 	});
+
+	it('should mix blue and red to get dark purple', () => {
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 0, 1), 0.5)).objEq(Color4.ofRGB(0.5, 0, 0.5));
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 0, 1), 0.1)).objEq(Color4.ofRGB(0.9, 0, 0.1));
+	});
+
+	it('should mix red and green to get yellow', () => {
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.3)).objEq(
+			Color4.ofRGB(0.7, 0.3, 0)
+		);
+	});
 });

package/src/Color4.ts

@@ -129,6 +129,28 @@ export default class Color4 {
 		return this.toHexString() === other.toHexString();
 	}
 
+	/**
+	 * If `fractionTo` is not in the range [0, 1], it will be clamped to the nearest number
+	 * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
+	 * 
+	 * @returns a color `fractionTo` of the way from this color to `other`.
+	 * 
+	 * @example
+	 * ```ts
+	 * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
+	 * ```
+	 */
+	public mix(other: Color4, fractionTo: number): Color4 {
+		fractionTo = Math.min(Math.max(fractionTo, 0), 1);
+		const fractionOfThis = 1 - fractionTo;
+		return new Color4(
+			this.r * fractionOfThis + other.r * fractionTo,
+			this.g * fractionOfThis + other.g * fractionTo,
+			this.b * fractionOfThis + other.b * fractionTo,
+			this.a * fractionOfThis + other.a * fractionTo,
+		);
+	}
+
 	private hexString: string|null = null;
 
 	/**
@@ -176,5 +198,6 @@ export default class Color4 {
 	public static yellow = Color4.ofRGB(1, 1, 0.1);
 	public static clay = Color4.ofRGB(0.8, 0.4, 0.2);
 	public static black = Color4.ofRGB(0, 0, 0);
+	public static gray = Color4.ofRGB(0.5, 0.5, 0.5);
 	public static white = Color4.ofRGB(1, 1, 1);
 }

package/src/Editor.ts

@@ -1,22 +1,3 @@
-/**
- * The main entrypoint for the full editor.
- *
- * @example
- * To create an editor with a toolbar,
- * ```
- * const editor = new Editor(document.body);
- *
- * const toolbar = editor.addToolbar();
- * toolbar.addActionButton('Save', () => {
- *   const saveData = editor.toSVG().outerHTML;
- *   // Do something with saveData...
- * });
- * ```
- *
- * @packageDocumentation
- */
-
-
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
 import { InputEvtType, PointerEvt, EditorNotifier, EditorEventType, ImageLoader } from './types';
@@ -70,12 +51,27 @@ export interface EditorSettings {
 	iconProvider: IconProvider,
 }
 
-// { @inheritDoc Editor! }
+/**
+ * The main entrypoint for the full editor.
+ *
+ * @example
+ * To create an editor with a toolbar,
+ * ```
+ * const editor = new Editor(document.body);
+ *
+ * const toolbar = editor.addToolbar();
+ * toolbar.addActionButton('Save', () => {
+ *   const saveData = editor.toSVG().outerHTML;
+ *   // Do something with saveData...
+ * });
+ * ```
+ */
 export class Editor {
 	// Wrapper around the viewport and toolbar
 	private container: HTMLElement;
 	private renderingRegion: HTMLElement;
 
+	/** Manages drawing surfaces/{@link lib!AbstractRenderer}s. */
 	public display: Display;
 
 	/**
@@ -116,11 +112,23 @@ export class Editor {
 	/** Viewport for the exported/imported image. */
 	private importExportViewport: Viewport;
 
+	/**
+	 * Allows transforming the view and querying information about
+	 * what is currently visible.
+	 */
+	public readonly viewport: Viewport;
+
 	/** @internal */
 	public readonly localization: EditorLocalization;
 
+	/** {@link lib!EditorSettings.iconProvider} */
 	public readonly icons: IconProvider;
-	public readonly viewport: Viewport;
+
+	/**
+	 * Controls the list of tools. See
+	 * [the custom tool example](https://github.com/personalizedrefrigerator/js-draw/tree/main/docs/example-custom-tools)
+	 * for more.
+	 */
 	public readonly toolController: ToolController;
 
 	/**
@@ -292,8 +300,7 @@ export class Editor {
 		const toolbar = new HTMLToolbar(this, this.container, this.localization);
 
 		if (defaultLayout) {
-			toolbar.addDefaultToolWidgets();
-			toolbar.addDefaultActionButtons();
+			toolbar.addDefaults();
 		}
 
 		return toolbar;
@@ -766,12 +773,18 @@ export class Editor {
 		this.nextRerenderListeners = [];
 	}
 
+	/**
+	 * @see {@link Display.getWetInkRenderer} {@link Display.flatten}
+	 */
 	public drawWetInk(...path: RenderablePathSpec[]) {
 		for (const part of path) {
 			this.display.getWetInkRenderer().drawPath(part);
 		}
 	}
 
+	/**
+	 * @see {@link Display.getWetInkRenderer}
+	 */
 	public clearWetInk() {
 		this.display.getWetInkRenderer().clear();
 	}
@@ -896,7 +909,7 @@ export class Editor {
 	public toDataURL(format: 'image/png'|'image/jpeg'|'image/webp' = 'image/png'): string {
 		const canvas = document.createElement('canvas');
 
-		const resolution = this.importExportViewport.getResolution();
+		const resolution = this.importExportViewport.getScreenRectSize();
 
 		canvas.width = resolution.x;
 		canvas.height = resolution.y;
@@ -946,8 +959,8 @@ export class Editor {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);
 
-		await loader.start((component) => {
-			this.dispatchNoAnnounce(EditorImage.addElement(component));
+		await loader.start(async (component) => {
+			await this.dispatchNoAnnounce(EditorImage.addElement(component));
 		}, (countProcessed: number, totalToProcess: number) => {
 			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);

package/src/EditorImage.ts

@@ -75,6 +75,11 @@ export default class EditorImage {
 		delete this.componentsById[elem.getId()];
 	}
 
+	/**
+	 * @returns the AbstractComponent with `id`, if it exists.
+	 * 
+	 * @see {@link AbstractComponent.getId}
+	 */
 	public lookupElement(id: string): AbstractComponent|null {
 		return this.componentsById[id] ?? null;
 	}
@@ -84,6 +89,13 @@ export default class EditorImage {
 		return this.root.addLeaf(elem);
 	}
 
+	/**
+	 * Returns a command that adds the given element to the `EditorImage`.
+	 * If `applyByFlattening` is true, the content of the wet ink renderer is
+	 * rendered onto the main rendering canvas instead of doing a full re-render.
+	 * 
+	 * @see {@link Display.flatten}
+	 */
 	public static addElement(elem: AbstractComponent, applyByFlattening: boolean = false): SerializableCommand {
 		return new EditorImage.AddElementCommand(elem, applyByFlattening);
 	}

package/src/Pointer.ts

@@ -36,6 +36,25 @@ export default class Pointer {
 	) {
 	}
 
+	// Snaps this pointer to the nearest grid point (rounds the coordinates of this
+	// pointer based on the current zoom). Returns a new Pointer and does not modify
+	// this.
+	public snappedToGrid(viewport: Viewport): Pointer {
+		const snappedCanvasPos = viewport.snapToGrid(this.canvasPos);
+		const snappedScreenPos = viewport.canvasToScreen(snappedCanvasPos);
+
+		return new Pointer(
+			snappedScreenPos,
+			snappedCanvasPos,
+			this.pressure,
+			this.isPrimary,
+			this.down,
+			this.device,
+			this.id,
+			this.timeStamp,
+		);
+	}
+
 	// Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
 	// considered the top left of `relativeTo`.
 	public static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer {

package/src/SVGLoader.ts

@@ -31,6 +31,7 @@ export type SVGLoaderUnknownStyleAttribute = { key: string, value: string, prior
 
 const supportedStrokeFillStyleAttrs = [ 'stroke', 'fill', 'stroke-width' ];
 
+// Handles loading images from SVG.
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
@@ -156,7 +157,7 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	// Adds a stroke with a single path
-	private addPath(node: SVGPathElement) {
+	private async addPath(node: SVGPathElement) {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
@@ -181,7 +182,7 @@ export default class SVGLoader implements ImageLoader {
 				return;
 			}
 		}
-		this.onAddComponent?.(elem);
+		await this.onAddComponent?.(elem);
 	}
 
 	// If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
@@ -274,10 +275,10 @@ export default class SVGLoader implements ImageLoader {
 		return result;
 	}
 
-	private addText(elem: SVGTextElement|SVGTSpanElement) {
+	private async addText(elem: SVGTextElement|SVGTSpanElement) {
 		try {
 			const textElem = this.makeText(elem);
-			this.onAddComponent?.(textElem);
+			await this.onAddComponent?.(textElem);
 		} catch (e) {
 			console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
 			this.addUnknownNode(elem);
@@ -300,17 +301,17 @@ export default class SVGLoader implements ImageLoader {
 				new Set([ 'transform' ])
 			);
 
-			this.onAddComponent?.(imageElem);
+			await this.onAddComponent?.(imageElem);
 		} catch (e) {
 			console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
-			this.addUnknownNode(elem);
+			await this.addUnknownNode(elem);
 		}
 	}
 
-	private addUnknownNode(node: SVGElement) {
+	private async addUnknownNode(node: SVGElement) {
 		if (this.storeUnknown) {
 			const component = new UnknownSVGObject(node);
-			this.onAddComponent?.(component);
+			await this.onAddComponent?.(component);
 		}
 	}
 
@@ -335,9 +336,9 @@ export default class SVGLoader implements ImageLoader {
 		this.onDetermineExportRect?.(this.rootViewBox);
 	}
 
-	private updateSVGAttrs(node: SVGSVGElement) {
+	private async updateSVGAttrs(node: SVGSVGElement) {
 		if (this.storeUnknown) {
-			this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+			await this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
 		}
 	}
 
@@ -350,10 +351,10 @@ export default class SVGLoader implements ImageLoader {
 			// Continue -- visit the node's children.
 			break;
 		case 'path':
-			this.addPath(node as SVGPathElement);
+			await this.addPath(node as SVGPathElement);
 			break;
 		case 'text':
-			this.addText(node as SVGTextElement);
+			await this.addText(node as SVGTextElement);
 			visitChildren = false;
 			break;
 		case 'image':
@@ -367,7 +368,7 @@ export default class SVGLoader implements ImageLoader {
 			this.updateSVGAttrs(node as SVGSVGElement);
 			break;
 		case 'style':
-			this.addUnknownNode(node as SVGStyleElement);
+			await this.addUnknownNode(node as SVGStyleElement);
 			break;
 		default:
 			console.warn('Unknown SVG element,', node);
@@ -377,7 +378,7 @@ export default class SVGLoader implements ImageLoader {
 				);
 			}
 
-			this.addUnknownNode(node as SVGElement);
+			await this.addUnknownNode(node as SVGElement);
 			return;
 		}
 
@@ -422,7 +423,11 @@ export default class SVGLoader implements ImageLoader {
 		this.onFinish?.();
 	}
 
-	// @param sanitize - if `true`, don't store unknown attributes.
+	/**
+	 * @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.
+	 */
 	public static fromString(text: string, sanitize: boolean = false): SVGLoader {
 		const sandbox = document.createElement('iframe');
 		sandbox.src = 'about:blank';