js-draw 1.23.1 → 1.24.2

package/dist/cjs/components/lib.js

@@ -18,13 +18,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-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/image/EditorImage.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 __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 });

package/dist/cjs/testing/sendPenEvent.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/testing/sendTouchEvent.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/toolbar/EdgeToolbar.d.ts

@@ -49,7 +49,7 @@ export default class EdgeToolbar extends AbstractToolbar {
     constructor(editor: Editor, parent: HTMLElement, localizationTable: ToolbarLocalization);
     private listenForVisibilityChanges;
     private onToolbarRowResize;
-    addSpacer(_options?: Partial<SpacerOptions> | undefined): void;
+    addSpacer(_options?: Partial<SpacerOptions>): void;
     addUndoRedoButtons(): void;
     addDefaults(): void;
     private updateWidgetCSSClasses;

package/dist/cjs/toolbar/widgets/DocumentPropertiesWidget.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/toolbar/widgets/HandToolWidget.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/InputFilter/ContextMenuRecognizer.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/Pen.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/SelectionTool/Selection.js

@@ -19,13 +19,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/SelectionTool/SelectionMenuShortcut.js

@@ -12,7 +12,7 @@ class SelectionMenuShortcut {
         this.element = document.createElement('div');
         this.element.classList.add(`${SelectionTool_1.cssPrefix}handle`, `${SelectionTool_1.cssPrefix}selection-menu`);
         this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
-        this.onClick = async () => {
+        this.onClick = () => {
             const anchor = this.getBBoxCanvasCoords().center;
             showContextMenu(anchor);
         };

package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../../../Editor';
 declare const makeClipboardErrorHandlers: (editor: Editor) => {
-    onCopyError(error: Error | unknown): Promise<void>;
-    onPasteError(error: Error | unknown): void;
+    onCopyError(error: unknown): void;
+    onPasteError(error: unknown): void;
 };
 export default makeClipboardErrorHandlers;

package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js

@@ -21,7 +21,7 @@ const makeClipboardErrorHandlers = (editor) => {
         return dialog;
     };
     return {
-        async onCopyError(error) {
+        onCopyError(error) {
             const dialog = makeErrorDialog(error);
             const textboxLabel = document.createElement('label');
             textboxLabel.textContent = editor.localization.copyPasteError__copyRetry;

package/dist/cjs/tools/SoundUITool.js

@@ -78,7 +78,7 @@ class SoundFeedback {
         this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
     }
     close() {
-        this.ctx.close();
+        void this.ctx.close();
         this.closed = true;
     }
 }

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

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

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';
@@ -486,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).