js-draw 1.22.0 → 1.24.1

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

@@ -5,23 +5,22 @@ import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { MutableReactiveValue } from '../util/ReactiveValue';
+/** A tool that allows users to enter and edit text. */
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
     private textStyleValue;
     private textStyle;
+    private anchorControl;
+    private contentTransform;
     private textEditOverlay;
     private textInputElem;
-    private textTargetPosition;
     private textMeasuringCtx;
-    private textRotation;
-    private textScale;
     private removeExistingCommand;
     constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
     private initTextMeasuringCanvas;
     private getTextAscent;
     private flushInput;
-    private getTextScaleMatrix;
     private updateTextInput;
     private startTextInput;
     setEnabled(enabled: boolean): void;
@@ -33,4 +32,5 @@ export default class TextTool extends BaseTool {
     getTextStyle(): TextRenderingStyle;
     getStyleValue(): MutableReactiveValue<TextRenderingStyle>;
     private setTextStyle;
+    onDestroy(): void;
 }

package/dist/cjs/tools/TextTool.js

@@ -13,15 +13,14 @@ const Erase_1 = __importDefault(require("../commands/Erase"));
 const uniteCommands_1 = __importDefault(require("../commands/uniteCommands"));
 const ReactiveValue_1 = require("../util/ReactiveValue");
 const overlayCSSClass = 'textEditorOverlay';
+/** A tool that allows users to enter and edit text. */
 class TextTool extends BaseTool_1.default {
     constructor(editor, description, localizationTable) {
         super(editor.notifier, description);
         this.editor = editor;
         this.localizationTable = localizationTable;
         this.textInputElem = null;
-        this.textTargetPosition = null;
         this.textMeasuringCtx = null;
-        this.textScale = math_1.Vec2.of(1, 1);
         this.removeExistingCommand = null;
         const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
         this.textStyleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
@@ -39,18 +38,10 @@ class TextTool extends BaseTool_1.default {
                 tool: this,
             });
         });
+        this.contentTransform = ReactiveValue_1.ReactiveValue.fromInitialValue(math_1.Mat33.identity);
         this.textEditOverlay = document.createElement('div');
         this.textEditOverlay.classList.add(overlayCSSClass);
         this.editor.addStyleSheet(`
-			.${overlayCSSClass} {
-				height: 0;
-				overflow: visible;
-
-				/* Allows absolutely-positioned textareas to scroll with
-				   the containing overlay. */
-				position: relative;
-			}
-
 			.${overlayCSSClass} textarea {
 				background-color: rgba(0, 0, 0, 0);
 
@@ -66,8 +57,7 @@ class TextTool extends BaseTool_1.default {
 				min-height: 1.1em;
 			}
 		`);
-        this.editor.createHTMLOverlay(this.textEditOverlay);
-        this.editor.notifier.on(types_1.EditorEventType.ViewportChanged, () => this.updateTextInput());
+        this.anchorControl = this.editor.anchorElementToCanvas(this.textEditOverlay, this.contentTransform);
     }
     initTextMeasuringCanvas() {
         this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
@@ -87,24 +77,32 @@ class TextTool extends BaseTool_1.default {
     // If [removeInput], the HTML input element is removed. Otherwise, its value
     // is cleared.
     flushInput(removeInput = true) {
-        if (this.textInputElem && this.textTargetPosition) {
-            const content = this.textInputElem.value.trimEnd();
-            this.textInputElem.value = '';
-            if (removeInput) {
-                // In some browsers, .remove() triggers a .blur event (synchronously).
-                // Clear this.textInputElem before removal
-                const input = this.textInputElem;
-                this.textInputElem = null;
-                input.remove();
-            }
-            if (content === '') {
-                return;
-            }
-            const textTransform = math_1.Mat33.translation(this.textTargetPosition)
-                .rightMul(this.getTextScaleMatrix())
-                .rightMul(math_1.Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()))
-                .rightMul(math_1.Mat33.zRotation(this.textRotation));
-            const textComponent = TextComponent_1.default.fromLines(content.split('\n'), textTransform, this.textStyle);
+        if (!this.textInputElem)
+            return;
+        // Determine the scroll first -- removing the input (and other DOM changes)
+        // also change the scroll.
+        const scrollingRegion = this.textEditOverlay.parentElement;
+        const containerScroll = math_1.Vec2.of(scrollingRegion?.scrollLeft ?? 0, scrollingRegion?.scrollTop ?? 0);
+        const content = this.textInputElem.value.trimEnd();
+        this.textInputElem.value = '';
+        if (removeInput) {
+            // In some browsers, .remove() triggers a .blur event (synchronously).
+            // Clear this.textInputElem before removal
+            const input = this.textInputElem;
+            this.textInputElem = null;
+            input.remove();
+        }
+        if (content !== '') {
+            // When the text is long, it can cause its container to scroll so that the
+            // editing caret is in view.
+            // So that the text added to the document is in the same position as the text
+            // shown in the editor, account for this scroll when computing the transform:
+            const scrollCorrectionScreen = containerScroll.times(-1);
+            // Uses .transformVec3 to avoid also translating the scroll correction (treating
+            // it as a point):
+            const scrollCorrectionCanvas = this.editor.viewport.screenToCanvasTransform.transformVec3(scrollCorrectionScreen);
+            const scrollTransform = math_1.Mat33.translation(scrollCorrectionCanvas);
+            const textComponent = TextComponent_1.default.fromLines(content.split('\n'), scrollTransform.rightMul(this.contentTransform.get()), this.textStyle);
             const action = EditorImage_1.default.addElement(textComponent);
             if (this.removeExistingCommand) {
                 // Unapply so that `removeExistingCommand` can be added to the undo stack.
@@ -117,16 +115,10 @@ class TextTool extends BaseTool_1.default {
             }
         }
     }
-    getTextScaleMatrix() {
-        return math_1.Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
-    }
     updateTextInput() {
-        if (!this.textInputElem || !this.textTargetPosition) {
-            this.textInputElem?.remove();
+        if (!this.textInputElem) {
             return;
         }
-        const viewport = this.editor.viewport;
-        const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
         this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
         this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
         this.textInputElem.style.fontStyle = this.textStyle.fontStyle ?? '';
@@ -134,9 +126,6 @@ class TextTool extends BaseTool_1.default {
         this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
         this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
-        this.textInputElem.style.position = 'absolute';
-        this.textInputElem.style.left = `${textScreenPos.x}px`;
-        this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';
         this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
         this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
@@ -145,9 +134,7 @@ class TextTool extends BaseTool_1.default {
         const tallText = 'Testing!';
         const ascent = this.getTextAscent(tallText, this.textStyle);
         const vertAdjust = ascent;
-        const rotation = this.textRotation + viewport.getRotationAngle();
-        const scale = this.getTextScaleMatrix();
-        this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${(rotation * 180) / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
+        this.textInputElem.style.transform = `translate(0, ${-vertAdjust}px)`;
         this.textInputElem.style.transformOrigin = 'top left';
         // Match the line height of default rendered text.
         const lineHeight = Math.floor(this.textStyle.size);
@@ -158,9 +145,14 @@ class TextTool extends BaseTool_1.default {
         this.textInputElem = document.createElement('textarea');
         this.textInputElem.value = initialText;
         this.textInputElem.style.display = 'inline-block';
-        this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
-        this.textRotation = -this.editor.viewport.getRotationAngle();
-        this.textScale = math_1.Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        const textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
+        const textRotation = -this.editor.viewport.getRotationAngle();
+        const textScale = math_1.Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        this.contentTransform.set(
+        // Scale, then rotate, then translate:
+        math_1.Mat33.translation(textTargetPosition)
+            .rightMul(math_1.Mat33.zRotation(textRotation))
+            .rightMul(math_1.Mat33.scaling2D(textScale)));
         this.updateTextInput();
         // Update the input size/position/etc. after the placeHolder has had time to appear.
         setTimeout(() => this.updateTextInput(), 0);
@@ -229,10 +221,7 @@ class TextTool extends BaseTool_1.default {
                 this.removeExistingCommand = new Erase_1.default([targetNode]);
                 this.removeExistingCommand.apply(this.editor);
                 this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
-                const transform = targetNode.getTransform();
-                this.textRotation = transform.transformVec3(math_1.Vec2.unitX).angle();
-                const scaleFactor = transform.transformVec3(math_1.Vec2.unitX).magnitude();
-                this.textScale = math_1.Vec2.of(1, 1).times(scaleFactor);
+                this.contentTransform.set(targetNode.getTransform());
                 this.updateTextInput();
             }
             else {
@@ -283,5 +272,10 @@ class TextTool extends BaseTool_1.default {
     setTextStyle(style) {
         this.textStyleValue.set(style);
     }
+    // @internal
+    onDestroy() {
+        super.onDestroy();
+        this.anchorControl.remove();
+    }
 }
 exports.default = TextTool;

package/dist/cjs/tools/ToolController.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : 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 __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/tools/UndoRedoShortcut.js

@@ -14,11 +14,11 @@ class UndoRedoShortcut extends BaseTool_1.default {
     // @internal
     onKeyPress(event) {
         if (this.editor.shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event)) {
-            this.editor.history.undo();
+            void this.editor.history.undo();
             return true;
         }
         else if (this.editor.shortcuts.matchesShortcut(keybindings_1.redoKeyboardShortcutId, event)) {
-            this.editor.history.redo();
+            void this.editor.history.redo();
             return true;
         }
         return false;

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/ClipboardHandler.js

@@ -1,4 +1,5 @@
 "use strict";
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents -- Used for clarity */
 var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");

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.24.1',
 };

package/dist/mjs/Editor.d.ts

@@ -5,7 +5,7 @@ import { HTMLPointerEventFilter, InputEvtType, PointerEvtType } from './inputEve
 import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
-import { Point2, Vec2, Color4, Rect2 } from '@js-draw/math';
+import { Point2, Vec2, Color4, Mat33, Rect2 } from '@js-draw/math';
 import Display, { RenderingMode } from './rendering/Display';
 import Pointer from './Pointer';
 import { EditorLocalization } from './localization';
@@ -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
      * ```
@@ -488,6 +486,12 @@ export declare class Editor {
     createHTMLOverlay(overlay: HTMLElement): {
         remove: () => void;
     };
+    /**
+     * Anchors the given `element` to the canvas with a given position/transformation in canvas space.
+     */
+    anchorElementToCanvas(element: HTMLElement, canvasTransform: Mat33 | ReactiveValue<Mat33>): {
+        remove: () => void;
+    };
     /**
      * Creates a CSS stylesheet with `content` and applies it to the document
      * (and thus, to this editor).

package/dist/mjs/Editor.mjs

@@ -25,7 +25,7 @@ import  guessKeyCodeFromKey  from './util/guessKeyCodeFromKey.mjs';
 import  makeAboutDialog  from './dialogs/makeAboutDialog.mjs';
 import  version  from './version.mjs';
 import  { editorImageToSVGSync, editorImageToSVGAsync }  from './image/export/editorImageToSVG.mjs';
-import  { MutableReactiveValue }  from './util/ReactiveValue.mjs';
+import  ReactiveValue, { MutableReactiveValue }  from './util/ReactiveValue.mjs';
 import  listenForKeyboardEventsFrom  from './util/listenForKeyboardEventsFrom.mjs';
 import  mitLicenseAttribution  from './util/mitLicenseAttribution.mjs';
 import  ClipboardHandler  from './util/ClipboardHandler.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 ?? [],
@@ -473,7 +473,7 @@ export class Editor {
     /** @internal */
     async handleDrop(evt) {
         evt.preventDefault();
-        this.handlePaste(evt);
+        await this.handlePaste(evt);
     }
     /** @internal */
     async handlePaste(evt) {
@@ -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
      * ```
@@ -886,6 +884,58 @@ export class Editor {
             remove: () => overlay.remove(),
         };
     }
+    /**
+     * Anchors the given `element` to the canvas with a given position/transformation in canvas space.
+     */
+    anchorElementToCanvas(element, canvasTransform) {
+        if (canvasTransform instanceof Mat33) {
+            canvasTransform = ReactiveValue.fromImmutable(canvasTransform);
+        }
+        // The element hierarchy looks like this:
+        //   overlay > contentWrapper > content
+        //
+        // Both contentWrapper and overlay are present to:
+        // 1. overlay: Positions the content at the top left of the viewport. The overlay
+        //    has `height: 0` to allow other overlays to also be aligned with the viewport's
+        //    top left.
+        // 2. contentWrapper: Has the same width/height as the editor's visible region and
+        //    has `overflow: hidden`. This prevents the anchored element from being visible
+        //    when not in the visible region of the canvas.
+        const overlay = document.createElement('div');
+        overlay.classList.add('anchored-element-overlay');
+        const contentWrapper = document.createElement('div');
+        contentWrapper.classList.add('content-wrapper');
+        element.classList.add('content');
+        // Updates CSS variables that specify the position/rotation/scale of the content.
+        const updateElementPositioning = () => {
+            const transform = canvasTransform.get();
+            const canvasRotation = transform.transformVec3(Vec2.unitX).angle();
+            const screenRotation = canvasRotation + this.viewport.getRotationAngle();
+            const screenTransform = this.viewport.canvasToScreenTransform.rightMul(canvasTransform.get());
+            overlay.style.setProperty('--full-transform', screenTransform.toCSSMatrix());
+            const translation = screenTransform.transformVec2(Vec2.zero);
+            overlay.style.setProperty('--position-x', `${translation.x}px`);
+            overlay.style.setProperty('--position-y', `${translation.y}px`);
+            overlay.style.setProperty('--rotation', `${(screenRotation * 180) / Math.PI}deg`);
+            overlay.style.setProperty('--scale', `${screenTransform.getScaleFactor()}`);
+        };
+        updateElementPositioning();
+        // The anchored element needs to be updated both when the user moves the canvas
+        // and when the anchored element's transform changes.
+        const updateListener = canvasTransform.onUpdate(updateElementPositioning);
+        const viewportListener = this.notifier.on(EditorEventType.ViewportChanged, updateElementPositioning);
+        contentWrapper.appendChild(element);
+        overlay.appendChild(contentWrapper);
+        overlay.classList.add('overlay', 'js-draw-editor-overlay');
+        this.renderingRegion.insertAdjacentElement('afterend', overlay);
+        return {
+            remove: () => {
+                overlay.remove();
+                updateListener.remove();
+                viewportListener.remove();
+            },
+        };
+    }
     /**
      * Creates a CSS stylesheet with `content` and applies it to the document
      * (and thus, to this editor).

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

@@ -9,7 +9,9 @@ type TransformChangeCallback = (oldTransform: Mat33, newTransform: Mat33) => voi
 export declare class Viewport {
     private onTransformChangeCallback;
     private static ViewportTransform;
+    /** Converts from canvas to screen coordinates */
     private transform;
+    /** Converts from screen to canvas coordinates */
     private inverseTransform;
     private screenRect;
     constructor(onTransformChangeCallback: TransformChangeCallback);
@@ -53,7 +55,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;

package/dist/mjs/Viewport.mjs

@@ -100,7 +100,7 @@ export class Viewport {
     /**
      * Snaps `canvasPos` to the nearest grid cell corner.
      *
-     * @see {@link getGridSize} and {@link getScaleFactorToNearestPowerOf}.
+     * @see {@link getGridSize}.
      */
     snapToGrid(canvasPos) {
         const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
@@ -127,7 +127,6 @@ export class Viewport {
     }
     // The separate function type definition seems necessary here.
     // See https://stackoverflow.com/a/58163623/17055750.
-    // eslint-disable-next-line no-dupe-class-members
     static roundPoint(point, tolerance) {
         const scaleFactor = 10 ** Math.floor(Math.log10(tolerance));
         const roundComponent = (component) => {

package/dist/mjs/components/AbstractComponent.d.ts

@@ -122,7 +122,7 @@ export default abstract class AbstractComponent {
      * updates the editor.
      *
      * The transformed component is also moved to the top (use
-     * {@link AbstractComponent.setZIndexAndTransformBy} to avoid this behavior).
+     * {@link AbstractComponent#setZIndexAndTransformBy} to avoid this behavior).
      */
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
@@ -163,5 +163,5 @@ export default abstract class AbstractComponent {
         data: string | number | any[] | Record<string, any>;
     };
     private static isNotDeserializable;
-    static deserialize(json: string | any): AbstractComponent;
+    static deserialize(json: any): AbstractComponent;
 }

package/dist/mjs/components/AbstractComponent.mjs

@@ -156,7 +156,7 @@ class AbstractComponent {
      * updates the editor.
      *
      * The transformed component is also moved to the top (use
-     * {@link AbstractComponent.setZIndexAndTransformBy} to avoid this behavior).
+     * {@link AbstractComponent#setZIndexAndTransformBy} to avoid this behavior).
      */
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);

package/dist/mjs/components/builders/ArrowBuilder.d.ts

@@ -5,7 +5,7 @@ import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 /**
- * Creates a stroke builder that generates arrows circles.
+ * Creates a stroke builder that generates arrows.
  *
  * Example:
  * [[include:doc-pages/inline-examples/changing-pen-types.md]]

package/dist/mjs/components/builders/ArrowBuilder.mjs

@@ -2,7 +2,7 @@ import { Path, PathCommandType } from '@js-draw/math';
 import  Stroke  from '../Stroke.mjs';
 import  makeSnapToGridAutocorrect  from './autocorrect/makeSnapToGridAutocorrect.mjs';
 /**
- * Creates a stroke builder that generates arrows circles.
+ * Creates a stroke builder that generates arrows.
  *
  * Example:
  * [[include:doc-pages/inline-examples/changing-pen-types.md]]