js-draw 1.22.0 → 1.23.1

package/dist/cjs/toolbar/IconProvider.js

@@ -15,31 +15,32 @@ const Viewport_1 = __importDefault(require("../Viewport"));
 const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
 const PolylineBuilder_1 = require("../components/builders/PolylineBuilder");
 const Eraser_1 = require("../tools/Eraser");
+const createElement_1 = require("../util/createElement");
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const iconColorFill = `
-	style='fill: var(--icon-color);'
-`;
-const iconColorStrokeFill = `
-	style='fill: var(--icon-color); stroke: var(--icon-color);'
-`;
 let checkerboardIdCounter = 0;
 const makeCheckerboardPattern = () => {
     const id = `checkerboard-${checkerboardIdCounter++}`;
-    const patternDef = `
-		<pattern
-			id='${id}'
-			viewBox='0,0,10,10'
-			width='20%'
-			height='20%'
-			patternUnits='userSpaceOnUse'
-		>
-			<rect x='0' y='0' width='10' height='10' fill='white'/>
-			<rect x='0' y='0' width='5' height='5' fill='gray'/>
-			<rect x='5' y='5' width='5' height='5' fill='gray'/>
-		</pattern>
-	`;
+    const patternElement = (0, createElement_1.createSvgElement)('pattern', {
+        id: id,
+        viewBox: '0,0,10,10',
+        width: '20%',
+        height: '20%',
+        patternUnits: 'userSpaceOnUse',
+        children: (0, createElement_1.createSvgElements)('rect', [
+            { x: 0, y: 0, width: 10, height: 10, fill: 'white' },
+            { x: 0, y: 0, width: 5, height: 5, fill: 'gray' },
+            { x: 5, y: 5, width: 5, height: 5, fill: 'gray' },
+        ]),
+    });
     const patternRef = `url(#${id})`;
-    return { patternDef, patternRef };
+    return {
+        patternDefElement: patternElement,
+        // @deprecated use patternDefElement
+        get patternDef() {
+            return patternElement.innerHTML;
+        },
+        patternRef,
+    };
 };
 const makeRedoIcon = (mirror) => {
     const icon = document.createElementNS(svgNamespace, 'svg');
@@ -55,11 +56,14 @@ const makeRedoIcon = (mirror) => {
 				transform-origin: center;
 			}
 		</style>
-		<path
-			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
-			class='toolbar-svg-undo-redo-icon'
-			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
 	`;
+    const path = document.createElementNS(svgNamespace, 'path');
+    path.setAttribute('d', 'M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80');
+    path.classList.add('toolbar-svg-undo-redo-icon');
+    if (mirror) {
+        path.style.transform = 'scale(-1, 1)';
+    }
+    icon.appendChild(path);
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
@@ -107,65 +111,62 @@ class IconProvider {
         return makeRedoIcon(false);
     }
     makeDropdownIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.innerHTML = `
-		<g>
-			<path
-				d='M5,10 L50,90 L95,10 Z'
-				${iconColorFill}
-			/>
-		</g>
-		`;
+        const icon = this.makeIconFromPath('M5,10 L50,90 L95,10 Z');
         icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
     }
     makeEraserIcon(eraserSize, mode) {
-        const icon = document.createElementNS(svgNamespace, 'svg');
         eraserSize ??= 10;
         const scaledSize = eraserSize / 4;
         const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
-        icon.innerHTML = `
-		<defs>
-			<linearGradient id="dash-pattern">
-				<stop offset="80%" stop-color="${eraserColor}"/>
-				<stop offset="85%" stop-color="white"/>
-				<stop offset="90%" stop-color="${eraserColor}"/>
-			</linearGradient>
-		</defs>
-		<g>
-			<path
-				style="fill:${mode === Eraser_1.EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
-				stroke="black"
-				transform="rotate(41.35)"
-				d="M 52.5 27
-					C 50 28.9 48.9 31.7 48.9 34.8
-					L 48.9 39.8
-					C 48.9 45.3 53.4 49.8 58.9 49.8
-					L 103.9 49.8
-					C 105.8 49.8 107.6 49.2 109.1 48.3
-					L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
-					L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
-					C 113.4 43.5 113.9 41.7 113.9 39.8
-					L 113.9 34.8
-					C 113.9 29.3 109.4 24.8 103.9 24.8
-					L 58.9 24.8
-					C 56.5 24.8 54.3 25.7 52.5 27
-					z "
-				id="path438" />
-
-			<rect
-				stroke="#cc8077"
-				${iconColorFill}
-				id="rect218"
-				width="65"
-				height="75"
-				x="48.9"
-				y="-38.7"
-				transform="rotate(41.35)" />
-		</g>
-		`;
-        icon.setAttribute('viewBox', '0 0 120 120');
+        const icon = (0, createElement_1.createSvgElement)('svg', {
+            viewBox: '0 0 120 120',
+            children: [
+                (0, createElement_1.createSvgElement)('defs', {
+                    children: [
+                        (0, createElement_1.createSvgElement)('linearGradient', {
+                            id: 'dash-pattern',
+                            children: (0, createElement_1.createSvgElements)('stop', [
+                                { offset: '80%', 'stop-color': eraserColor },
+                                { offset: '85%', 'stop-color': 'white' },
+                                { offset: '90%', 'stop-color': eraserColor },
+                            ]),
+                        }),
+                    ],
+                }),
+                (0, createElement_1.createSvgElement)('path', {
+                    fill: mode === Eraser_1.EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor,
+                    stroke: 'black',
+                    transform: 'rotate(41.35)',
+                    d: `
+						M 52.5 27
+						C 50 28.9 48.9 31.7 48.9 34.8
+						L 48.9 39.8
+						C 48.9 45.3 53.4 49.8 58.9 49.8
+						L 103.9 49.8
+						C 105.8 49.8 107.6 49.2 109.1 48.3
+						L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
+						L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
+						C 113.4 43.5 113.9 41.7 113.9 39.8
+						L 113.9 34.8
+						C 113.9 29.3 109.4 24.8 103.9 24.8
+						L 58.9 24.8
+						C 56.5 24.8 54.3 25.7 52.5 27
+						z
+					`,
+                }),
+                (0, createElement_1.createSvgElement)('rect', {
+                    stroke: '#cc8077',
+                    fill: 'var(--icon-color)',
+                    width: 65,
+                    height: 75,
+                    x: 48.9,
+                    y: -38.7,
+                    transform: 'rotate(41.35)',
+                }),
+            ],
+        });
         return icon;
     }
     makeSelectionIcon() {
@@ -173,8 +174,8 @@ class IconProvider {
         // Draw a cursor-like shape
         icon.innerHTML = `
 		<g>
-			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
-			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+			<rect x="10" y="10" width="70" height="70" fill="pink" stroke="black"/>
+			<rect x="75" y="75" width="10" height="10" fill="white" stroke="black"/>
 		</g>
 		`;
         icon.setAttribute('viewBox', '0 0 100 100');
@@ -437,8 +438,6 @@ class IconProvider {
         const strokeSize = Math.round(Math.sqrt(penStyle.thickness) * 4);
         const color = penStyle.color;
         const rounded = this.isRoundedTipPen(penStyle);
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.setAttribute('viewBox', '0 0 100 100');
         const tipThickness = strokeSize / 2;
         const inkTipPath = `
 			M ${15 - tipThickness},${80 - tipThickness}
@@ -471,71 +470,35 @@ class IconProvider {
         const pencilTipColor = math_1.Color4.fromHex('#f4d7d7');
         const tipColor = pencilTipColor.mix(color, tipThickness / 40 - 0.1).toHexString();
         const checkerboardPattern = makeCheckerboardPattern();
-        const ink = `
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${inkTipPath}"
-			/>
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${inkTrailPath}"
-			/>
-			<path
-				fill="${color}"
-				d="${inkTipPath}"
-			/>
-			<path
-				fill="${color}"
-				d="${inkTrailPath}"
-			/>
-		`;
-        const penTip = `
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${penTipPath}"
-			/>
-			<path
-				fill="${tipColor}"
-				stroke="${color}"
-				d="${penTipPath}"
-			/>
-		`;
-        const grip = `
-			<path
-				${iconColorStrokeFill}
-				d="${gripMainPath}"
-			/>
-
-			<!-- shadows -->
-			<path
-				fill="rgba(150, 150, 150, 0.3)"
-				d="${gripShadow1Path}"
-			/>
-			<path
-				fill="rgba(100, 100, 100, 0.2)"
-				d="${gripShadow2Path}"
-			/>
-
-			<!-- color bubble -->
-			<path
-				fill="${checkerboardPattern.patternRef}"
-				d="${colorBubblePath}"
-			/>
-			<path
-				fill="${color}"
-				d="${colorBubblePath}"
-			/>
-		`;
-        icon.innerHTML = `
-		<defs>
-			${checkerboardPattern.patternDef}
-		</defs>
-		<g>
-			${ink}
-			${penTip}
-			${grip}
-		</g>
-		`;
+        const colorString = color.toHexString();
+        const ink = (0, createElement_1.createSvgPaths)({
+            fill: checkerboardPattern.patternRef,
+            d: inkTipPath,
+        }, {
+            fill: checkerboardPattern.patternRef,
+            d: inkTrailPath,
+        }, {
+            fill: colorString,
+            d: inkTipPath,
+        }, {
+            fill: colorString,
+            d: inkTrailPath,
+        });
+        const penTip = (0, createElement_1.createSvgPaths)({ fill: checkerboardPattern.patternRef, d: penTipPath }, { fill: tipColor, stroke: colorString, d: penTipPath });
+        const grip = (0, createElement_1.createSvgPaths)({ fill: 'var(--icon-color)', stroke: 'var(--icon-color)', d: gripMainPath }, 
+        // Shadows
+        { fill: 'rgba(150, 150, 150, 0.3)', d: gripShadow1Path }, { fill: 'rgba(100, 100, 100, 0.2)', d: gripShadow2Path }, 
+        // Color bubble
+        { fill: checkerboardPattern.patternRef, d: colorBubblePath }, { fill: colorString, d: colorBubblePath });
+        const icon = document.createElementNS(svgNamespace, 'svg');
+        icon.setAttribute('viewBox', '0 0 100 100');
+        const iconMainContent = (0, createElement_1.createSvgElement)('g', {
+            children: [ink, penTip, grip].flat(),
+        });
+        const defs = (0, createElement_1.createSvgElement)('defs', {
+            children: [checkerboardPattern.patternDefElement],
+        });
+        icon.replaceChildren(defs, iconMainContent);
         return icon;
     }
     makeIconFromFactory(penStyle) {
@@ -567,7 +530,7 @@ class IconProvider {
         if (includeTransparencyGrid) {
             const checkerboardPattern = makeCheckerboardPattern();
             const defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPattern.patternDef;
+            defs.appendChild(checkerboardPattern.patternDefElement);
             icon.appendChild(defs);
             const background = document.createElementNS(svgNamespace, 'g');
             icon.appendChild(background);
@@ -641,7 +604,7 @@ class IconProvider {
         if (color) {
             const checkerboardPattern = makeCheckerboardPattern();
             const defs = document.createElementNS(svgNamespace, 'defs');
-            defs.innerHTML = checkerboardPattern.patternDef;
+            defs.appendChild(checkerboardPattern.patternDefElement);
             icon.appendChild(defs);
             const fluidBackground = document.createElementNS(svgNamespace, 'path');
             const fluid = document.createElementNS(svgNamespace, 'path');
@@ -846,6 +809,9 @@ class IconProvider {
      * @returns An object with both the definition of a checkerboard pattern and the syntax to
      * reference that pattern. The defs provided by this function should be wrapped within a
      * `<defs></defs>` element.
+     *
+     * **Note**: This function's return value includes both `patternDefElement` (which returns
+     * an Element) and a (deprecated) `patternDef` string. Avoid using the `patternDef` result.
      */
     makeCheckerboardPattern() {
         return makeCheckerboardPattern();

package/dist/cjs/toolbar/localization.js

@@ -48,7 +48,7 @@ exports.defaultToolbarLocalization = {
     about: 'About',
     inputStabilization: 'Stabilization',
     strokeAutocorrect: 'Autocorrect',
-    touchPanning: 'Touchscreen panning',
+    touchPanning: 'Scroll with touch',
     roundedTipPen: 'Round',
     roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
@@ -75,7 +75,7 @@ exports.defaultToolbarLocalization = {
     handDropdown__zoomOutHelpText: 'Zooms out.',
     handDropdown__resetViewHelpText: 'Resets the zoom level to 100% and resets scroll.',
     handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
-    handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
+    handDropdown__touchPanningHelpText: 'When enabled, touchscreen gestures move the image rather than select or draw.',
     handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
     eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
     eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',

package/dist/cjs/toolbar/widgets/BaseWidget.d.ts

@@ -98,7 +98,7 @@ export default abstract class BaseWidget {
     addTo(parent: HTMLElement): HTMLElement;
     /**
      * Remove this. This allows the widget to be added to a toolbar again
-     * in the future using {@link addTo}.
+     * in the future using `addTo`.
      */
     remove(): void;
     focus(): void;

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -306,7 +306,7 @@ class BaseWidget {
     }
     /**
      * Remove this. This allows the widget to be added to a toolbar again
-     * in the future using {@link addTo}.
+     * in the future using `addTo`.
      */
     remove() {
         this.container.remove();

package/dist/cjs/tools/PanZoom.js

@@ -433,7 +433,7 @@ class PanZoom extends BaseTool_1.default {
         translation = translation.times(-1);
         rotation = rotation * -1;
         scale = 1 / scale;
-        // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
+        // Work around an issue that seems to be related to rotation matrices losing precision on inversion.
         // TODO: Figure out why and implement a better solution.
         if (rotation !== 0) {
             rotation += 0.0001;

package/dist/cjs/tools/Pen.d.ts

@@ -11,6 +11,12 @@ export interface PenStyle {
     readonly thickness: number;
     readonly factory: ComponentBuilderFactory;
 }
+/**
+ * A tool that allows drawing shapes and freehand lines.
+ *
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
+ * pen type), see {@link setStrokeFactory}.
+ */
 export default class Pen extends BaseTool {
     private editor;
     protected builder: ComponentBuilder | null;
@@ -42,6 +48,13 @@ export default class Pen extends BaseTool {
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
+    /**
+     * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
+     * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
+     *
+     * Example:
+     * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+     */
     setStrokeFactory(factory: ComponentBuilderFactory): void;
     setHasStabilization(hasStabilization: boolean): void;
     setStrokeAutocorrectEnabled(enabled: boolean): void;

package/dist/cjs/tools/Pen.js

@@ -37,6 +37,12 @@ const keybindings_2 = require("./keybindings");
 const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
 const ReactiveValue_1 = require("../util/ReactiveValue");
 const StationaryPenDetector_1 = __importStar(require("./util/StationaryPenDetector"));
+/**
+ * A tool that allows drawing shapes and freehand lines.
+ *
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
+ * pen type), see {@link setStrokeFactory}.
+ */
 class Pen extends BaseTool_1.default {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -272,6 +278,13 @@ class Pen extends BaseTool_1.default {
             });
         }
     }
+    /**
+     * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
+     * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
+     *
+     * Example:
+     * [[include:doc-pages/inline-examples/changing-pen-types.md]]
+     */
     setStrokeFactory(factory) {
         if (factory !== this.style.factory) {
             this.styleValue.set({

package/dist/cjs/tools/lib.d.ts

@@ -1,3 +1,4 @@
+export { default as InputMapper } from './InputFilter/InputMapper';
 export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';

package/dist/cjs/tools/lib.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserMode = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = void 0;
+exports.ToolbarShortcutHandler = exports.SoundUITool = exports.PasteHandler = exports.EraserMode = exports.EraserTool = exports.SelectAllShortcutHandler = exports.SelectionTool = exports.TextTool = exports.PenTool = exports.PanZoomMode = exports.PanZoomTool = exports.ToolSwitcherShortcut = exports.UndoRedoShortcut = exports.ToolEnabledGroup = exports.ToolController = exports.BaseTool = exports.InputMapper = void 0;
+var InputMapper_1 = require("./InputFilter/InputMapper");
+Object.defineProperty(exports, "InputMapper", { enumerable: true, get: function () { return __importDefault(InputMapper_1).default; } });
 var BaseTool_1 = require("./BaseTool");
 Object.defineProperty(exports, "BaseTool", { enumerable: true, get: function () { return __importDefault(BaseTool_1).default; } });
 var ToolController_1 = require("./ToolController");

package/dist/cjs/util/cloneElementWithStyles.js

@@ -12,7 +12,7 @@ const cloneElementWithStyles = (element) => {
         for (let index = 0; index < originalComputedStyle.length; index++) {
             const propertyName = originalComputedStyle.item(index);
             const propertyValue = originalComputedStyle.getPropertyValue(propertyName);
-            clonedElement.style.setProperty(propertyName, propertyValue);
+            clonedElement.style?.setProperty(propertyName, propertyValue);
         }
         for (let i = 0; i < originalElement.children.length; i++) {
             const originalChild = originalElement.children.item(i);

package/dist/cjs/util/createElement.d.ts

@@ -0,0 +1,62 @@
+type ElementTagNames = keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap;
+/**
+ * Maps from known elment tag names to options that can be set with .setAttribute.
+ * New elements/properties should be added as necessary.
+ */
+interface ElementToPropertiesMap {
+    path: {
+        d: string;
+        fill: string;
+        stroke: string;
+        transform: string;
+    };
+    rect: {
+        stroke: string;
+        fill: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        transform: string;
+    };
+    pattern: {
+        viewBox: string;
+        width: string;
+        height: string;
+        patternUnits: 'userSpaceOnUse';
+    };
+    stop: {
+        offset: string;
+        'stop-color': string;
+    };
+    svg: {
+        viewBox: `${number} ${number} ${number} ${number}`;
+    };
+}
+type EmptyObject = Record<never, never>;
+type ElementProperties<Tag extends ElementTagNames> = Tag extends keyof ElementToPropertiesMap ? Partial<ElementToPropertiesMap[Tag]> : EmptyObject;
+/** Contains options for creating an element with tag = `Tag`. */
+type ElementConfig<Tag extends ElementTagNames> = ElementProperties<Tag> & {
+    id?: string;
+    children?: (HTMLElement | SVGElement)[];
+};
+/**
+ * Maps from element tag names (e.g. `Tag='button'`) to the corresponding element type
+ * (e.g. `HTMLButtonElement`).
+ */
+type ElementTagToType<Tag extends ElementTagNames> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : never;
+export declare enum ElementNamespace {
+    Html = "html",
+    Svg = "svg"
+}
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+declare const createElement: <Tag extends ElementTagNames>(tag: Tag, props: ElementConfig<Tag>, elementType?: ElementNamespace) => ElementTagToType<Tag>;
+export declare const createSvgElement: <Tag extends keyof SVGElementTagNameMap>(tag: Tag, props: ElementConfig<Tag>) => ElementTagToType<Tag>;
+export declare const createSvgElements: <Tag extends keyof SVGElementTagNameMap>(tag: Tag, elements: ElementConfig<Tag>[]) => ElementTagToType<Tag>[];
+export declare const createSvgPaths: (...paths: ElementConfig<"path">[]) => SVGPathElement[];
+export default createElement;

package/dist/cjs/util/createElement.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSvgPaths = exports.createSvgElements = exports.createSvgElement = exports.ElementNamespace = void 0;
+var ElementNamespace;
+(function (ElementNamespace) {
+    ElementNamespace["Html"] = "html";
+    ElementNamespace["Svg"] = "svg";
+})(ElementNamespace || (exports.ElementNamespace = ElementNamespace = {}));
+/**
+ * Shorthand for creating an element with `document.createElement`, then assigning properties.
+ *
+ * Non-HTML elements (e.g. `svg` elements) should use the `elementType` parameter to select
+ * the element namespace.
+ */
+const createElement = (tag, props, elementType = ElementNamespace.Html) => {
+    let elem;
+    if (elementType === ElementNamespace.Html) {
+        elem = document.createElement(tag);
+    }
+    else if (elementType === ElementNamespace.Svg) {
+        elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    }
+    else {
+        throw new Error(`Unknown element type ${elementType}`);
+    }
+    for (const [key, value] of Object.entries(props)) {
+        if (key === 'children')
+            continue;
+        if (typeof value !== 'string' && typeof value !== 'number') {
+            throw new Error(`Unsupported value type ${typeof value}`);
+        }
+        elem.setAttribute(key, value.toString());
+    }
+    if (props.children) {
+        for (const item of props.children) {
+            elem.appendChild(item);
+        }
+    }
+    return elem;
+};
+const createSvgElement = (tag, props) => {
+    return createElement(tag, props, ElementNamespace.Svg);
+};
+exports.createSvgElement = createSvgElement;
+const createSvgElements = (tag, elements) => {
+    return elements.map((props) => (0, exports.createSvgElement)(tag, props));
+};
+exports.createSvgElements = createSvgElements;
+const createSvgPaths = (...paths) => {
+    return (0, exports.createSvgElements)('path', paths);
+};
+exports.createSvgPaths = createSvgPaths;
+exports.default = createElement;

package/dist/cjs/version.js

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * @internal
  */
 exports.default = {
-    number: '1.22.0',
+    number: '1.23.1',
 };

package/dist/mjs/Editor.d.ts

@@ -411,9 +411,7 @@ export declare class Editor {
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
      * called.
      *
-     * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
-     * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
-     * be sent across the network), while `apply` does not.
+     * If `addToHistory` is `false`, this is equivalent to `command.apply(editor)`.
      *
      * @example
      * ```

package/dist/mjs/Editor.mjs

@@ -108,7 +108,7 @@ export class Editor {
             maxZoom: settings.maxZoom ?? 1e12,
             keyboardShortcutOverrides: settings.keyboardShortcutOverrides ?? {},
             iconProvider: settings.iconProvider ?? new IconProvider(),
-            notices: [],
+            notices: settings.notices ?? [],
             appInfo: settings.appInfo ? { ...settings.appInfo } : null,
             pens: {
                 additionalPenTypes: settings.pens?.additionalPenTypes ?? [],
@@ -726,9 +726,7 @@ export class Editor {
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
      * called.
      *
-     * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
-     * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
-     * be sent across the network), while `apply` does not.
+     * If `addToHistory` is `false`, this is equivalent to `command.apply(editor)`.
      *
      * @example
      * ```

package/dist/mjs/SVGLoader/SVGLoader.mjs

@@ -532,6 +532,7 @@ export default class SVGLoader {
         const { svgElem, cleanUp } = (() => {
             // If the user requested an iframe load (the default) try to load with an iframe.
             // There are some cases (e.g. in a sandboxed iframe) where this doesn't work.
+            // TODO(v2): Use domParserLoad by default.
             if (!domParserLoad) {
                 try {
                     const sandbox = document.createElement('iframe');
@@ -571,6 +572,7 @@ export default class SVGLoader {
 					`);
                     sandboxDoc.close();
                     const svgElem = sandboxDoc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    // eslint-disable-next-line no-unsanitized/property -- setting innerHTML in a sandboxed document.
                     svgElem.innerHTML = text;
                     sandboxDoc.body.appendChild(svgElem);
                     const cleanUp = () => {

package/dist/mjs/Viewport.d.ts

@@ -53,7 +53,7 @@ export declare class Viewport {
     /**
      * Snaps `canvasPos` to the nearest grid cell corner.
      *
-     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     * @see {@link getGridSize}.
      */
     snapToGrid(canvasPos: Point2): {
         readonly x: number;