js-draw 1.23.1 → 1.24.1

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';
@@ -473,7 +473,7 @@ export class Editor {
     /** @internal */
     async handleDrop(evt) {
         evt.preventDefault();
-        this.handlePaste(evt);
+        await this.handlePaste(evt);
     }
     /** @internal */
     async handlePaste(evt) {
@@ -884,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/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);

package/dist/mjs/Viewport.mjs

@@ -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

@@ -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/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/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs

@@ -10,7 +10,7 @@ export default class SelectionMenuShortcut {
         this.element = document.createElement('div');
         this.element.classList.add(`${cssPrefix}handle`, `${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/mjs/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/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs

@@ -16,7 +16,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/mjs/tools/SoundUITool.mjs

@@ -73,7 +73,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/mjs/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/mjs/tools/TextTool.mjs

@@ -8,15 +8,14 @@ import  Erase  from '../commands/Erase.mjs';
 import  uniteCommands  from '../commands/uniteCommands.mjs';
 import  { ReactiveValue }  from '../util/ReactiveValue.mjs';
 const overlayCSSClass = 'textEditorOverlay';
+/** A tool that allows users to enter and edit text. */
 export default class TextTool extends BaseTool {
     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 = Vec2.of(1, 1);
         this.removeExistingCommand = null;
         const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
         this.textStyleValue = ReactiveValue.fromInitialValue({
@@ -34,18 +33,10 @@ export default class TextTool extends BaseTool {
                 tool: this,
             });
         });
+        this.contentTransform = ReactiveValue.fromInitialValue(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);
 
@@ -61,8 +52,7 @@ export default class TextTool extends BaseTool {
 				min-height: 1.1em;
 			}
 		`);
-        this.editor.createHTMLOverlay(this.textEditOverlay);
-        this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+        this.anchorControl = this.editor.anchorElementToCanvas(this.textEditOverlay, this.contentTransform);
     }
     initTextMeasuringCanvas() {
         this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
@@ -82,24 +72,32 @@ export default class TextTool extends BaseTool {
     // 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 = Mat33.translation(this.textTargetPosition)
-                .rightMul(this.getTextScaleMatrix())
-                .rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas()))
-                .rightMul(Mat33.zRotation(this.textRotation));
-            const textComponent = TextComponent.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 = 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 = Mat33.translation(scrollCorrectionCanvas);
+            const textComponent = TextComponent.fromLines(content.split('\n'), scrollTransform.rightMul(this.contentTransform.get()), this.textStyle);
             const action = EditorImage.addElement(textComponent);
             if (this.removeExistingCommand) {
                 // Unapply so that `removeExistingCommand` can be added to the undo stack.
@@ -112,16 +110,10 @@ export default class TextTool extends BaseTool {
             }
         }
     }
-    getTextScaleMatrix() {
-        return 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 ?? '';
@@ -129,9 +121,6 @@ export default class TextTool extends BaseTool {
         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`;
@@ -140,9 +129,7 @@ export default class TextTool extends BaseTool {
         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);
@@ -153,9 +140,14 @@ export default class TextTool extends BaseTool {
         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 = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        const textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
+        const textRotation = -this.editor.viewport.getRotationAngle();
+        const textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
+        this.contentTransform.set(
+        // Scale, then rotate, then translate:
+        Mat33.translation(textTargetPosition)
+            .rightMul(Mat33.zRotation(textRotation))
+            .rightMul(Mat33.scaling2D(textScale)));
         this.updateTextInput();
         // Update the input size/position/etc. after the placeHolder has had time to appear.
         setTimeout(() => this.updateTextInput(), 0);
@@ -224,10 +216,7 @@ export default class TextTool extends BaseTool {
                 this.removeExistingCommand = new Erase([targetNode]);
                 this.removeExistingCommand.apply(this.editor);
                 this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
-                const transform = targetNode.getTransform();
-                this.textRotation = transform.transformVec3(Vec2.unitX).angle();
-                const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
-                this.textScale = Vec2.of(1, 1).times(scaleFactor);
+                this.contentTransform.set(targetNode.getTransform());
                 this.updateTextInput();
             }
             else {
@@ -278,4 +267,9 @@ export default class TextTool extends BaseTool {
     setTextStyle(style) {
         this.textStyleValue.set(style);
     }
+    // @internal
+    onDestroy() {
+        super.onDestroy();
+        this.anchorControl.remove();
+    }
 }

package/dist/mjs/tools/UndoRedoShortcut.mjs

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

package/dist/mjs/util/ClipboardHandler.mjs

@@ -1,3 +1,4 @@
+/* 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/mjs/version.mjs

@@ -4,5 +4,5 @@
  * @internal
  */
 export default {
-    number: '1.23.1',
+    number: '1.24.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "1.23.1",
+	"version": "1.24.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
 		"postpack": "ts-node tools/copyREADME.ts revert"
 	},
 	"dependencies": {
-		"@js-draw/math": "^1.23.1",
+		"@js-draw/math": "^1.24.1",
 		"@melloware/coloris": "0.22.0"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.23.1",
+		"@js-draw/build-tool": "^1.24.1",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
 	},
@@ -86,5 +86,5 @@
 		"freehand",
 		"svg"
 	],
-	"gitHead": "e0bb3336d5f3a94533c823906778d39a4880f4cf"
+	"gitHead": "ef847374748e32d6d96d993a2236a99d9109a32c"
 }

package/src/Editor.scss

@@ -165,6 +165,37 @@
 	z-index: 5;
 }
 
+// See Editor.anchorElementToCanvas
+.imageEditorContainer .anchored-element-overlay {
+	overflow: visible;
+	height: 0;
+
+	> .content-wrapper {
+		width: var(--editor-current-display-width-px);
+		height: var(--editor-current-display-height-px);
+		overflow: hidden;
+		// Display 'position: absolute' children relative to this.
+		position: relative;
+
+		// Disable pointer events: If the parent (or the container) has
+		// captured pointers and the container is removed, this prevents
+		// us from receiving the following events (e.g. in Firefox).
+		pointer-events: none;
+
+		> .content {
+			position: absolute;
+			left: var(--position-x);
+			top: var(--position-y);
+			transform: scale(var(--scale)) rotate(var(--rotation));
+			transform-origin: left top;
+			margin: 0;
+
+			// We *do* want pointer events for the positioned content.
+			pointer-events: all;
+		}
+	}
+}
+
 // TODO: Apply this change during a future major release.
 // So as not to change the position of other overlays, all overlays should have
 // 0 height.