js-draw 1.6.0 → 1.7.0

package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const untilNextAnimationFrame_1 = __importDefault(require("../../util/untilNextAnimationFrame"));
+/**
+ * Automatically scrolls the viewport such that the user's pointer is visible.
+ */
+class ToPointerAutoscroller {
+    constructor(viewport, scrollByCanvasDelta) {
+        this.viewport = viewport;
+        this.scrollByCanvasDelta = scrollByCanvasDelta;
+        this.started = false;
+        this.updateLoopId = 0;
+        this.updateLoopRunning = false;
+        this.targetPoint = null;
+        this.scrollRate = 1000; // px/s
+    }
+    getScrollForPoint(screenPoint) {
+        const screenSize = this.viewport.getScreenRectSize();
+        const screenRect = new math_1.Rect2(0, 0, screenSize.x, screenSize.y);
+        // Starts autoscrolling when the cursor is **outside of** this region
+        const marginSize = 44;
+        const autoscrollBoundary = screenRect.grownBy(-marginSize);
+        if (autoscrollBoundary.containsPoint(screenPoint)) {
+            return math_1.Vec2.zero;
+        }
+        const closestEdgePoint = autoscrollBoundary.getClosestPointOnBoundaryTo(screenPoint);
+        const distToEdge = closestEdgePoint.minus(screenPoint).magnitude();
+        const toEdge = closestEdgePoint.minus(screenPoint);
+        // Go faster for points further away from the boundary.
+        const maximumScaleFactor = 1.25;
+        const scaleFactor = Math.min(distToEdge / marginSize, maximumScaleFactor);
+        return toEdge.normalizedOrZero().times(scaleFactor);
+    }
+    start() {
+        this.started = true;
+    }
+    onPointerMove(pointerScreenPosition) {
+        if (!this.started) {
+            return;
+        }
+        if (this.getScrollForPoint(pointerScreenPosition) === math_1.Vec2.zero) {
+            this.stopUpdateLoop();
+        }
+        else {
+            this.targetPoint = pointerScreenPosition;
+            this.startUpdateLoop();
+        }
+    }
+    stop() {
+        this.targetPoint = null;
+        this.started = false;
+        this.stopUpdateLoop();
+    }
+    startUpdateLoop() {
+        if (this.updateLoopRunning) {
+            return;
+        }
+        (async () => {
+            this.updateLoopId++;
+            const currentUpdateLoopId = this.updateLoopId;
+            let lastUpdateTime = performance.now();
+            while (this.updateLoopId === currentUpdateLoopId && this.targetPoint) {
+                this.updateLoopRunning = true;
+                const currentTime = performance.now();
+                const deltaTimeMs = currentTime - lastUpdateTime;
+                const scrollDirection = this.getScrollForPoint(this.targetPoint);
+                const screenScrollAmount = scrollDirection.times(this.scrollRate * deltaTimeMs / 1000);
+                this.scrollByCanvasDelta(this.viewport.screenToCanvasTransform.transformVec3(screenScrollAmount));
+                lastUpdateTime = currentTime;
+                await (0, untilNextAnimationFrame_1.default)();
+            }
+            this.updateLoopRunning = false;
+        })();
+    }
+    stopUpdateLoop() {
+        this.updateLoopId++;
+    }
+}
+exports.default = ToPointerAutoscroller;

package/dist/cjs/tools/SelectionTool/TransformMode.d.ts

@@ -9,26 +9,33 @@ export declare class DragTransformer {
     constructor(editor: Editor, selection: Selection);
     onDragStart(startPoint: Vec3): void;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }
 export declare class ResizeTransformer {
     private readonly editor;
     private selection;
     private mode;
     private dragStartPoint;
+    private transformOrigin;
+    private scaleRate;
     constructor(editor: Editor, selection: Selection);
     onDragStart(startPoint: Vec3, mode: ResizeMode): void;
+    private computeOriginAndScaleRate;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }
 export declare class RotateTransformer {
     private readonly editor;
     private selection;
     private startAngle;
+    private targetRotation;
+    private maximumDistFromStart;
+    private startPoint;
     constructor(editor: Editor, selection: Selection);
     private getAngle;
     private roundAngle;
     onDragStart(startPoint: Vec3): void;
+    private setRotationTo;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }

package/dist/cjs/tools/SelectionTool/TransformMode.js

@@ -21,7 +21,7 @@ class DragTransformer {
         this.selection.setTransform(math_1.Mat33.translation(delta));
     }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        return this.selection.finalizeTransform();
     }
 }
 exports.DragTransformer = DragTransformer;
@@ -35,6 +35,32 @@ class ResizeTransformer {
         this.selection.setTransform(math_1.Mat33.identity);
         this.mode = mode;
         this.dragStartPoint = startPoint;
+        this.computeOriginAndScaleRate();
+    }
+    computeOriginAndScaleRate() {
+        // Store the index of the furthest corner from startPoint. We'll use that
+        // to determine where the transform considers (0, 0) (where we scale from).
+        const selectionRect = this.selection.preTransformRegion;
+        const selectionBoxCorners = selectionRect.corners;
+        let largestDistSquared = 0;
+        for (let i = 0; i < selectionBoxCorners.length; i++) {
+            const currentCorner = selectionBoxCorners[i];
+            const distSquaredToCurrent = this.dragStartPoint.minus(currentCorner).magnitudeSquared();
+            if (distSquaredToCurrent > largestDistSquared) {
+                largestDistSquared = distSquaredToCurrent;
+                this.transformOrigin = currentCorner;
+            }
+        }
+        // Determine whether moving the mouse to the right increases or decreases the width.
+        let widthScaleRate = 1;
+        let heightScaleRate = 1;
+        if (this.transformOrigin.x > selectionRect.center.x) {
+            widthScaleRate = -1;
+        }
+        if (this.transformOrigin.y > selectionRect.center.y) {
+            heightScaleRate = -1;
+        }
+        this.scaleRate = math_1.Vec2.of(widthScaleRate, heightScaleRate);
     }
     onDragUpdate(canvasPos) {
         const canvasDelta = canvasPos.minus(this.dragStartPoint);
@@ -42,11 +68,11 @@ class ResizeTransformer {
         const origHeight = this.selection.preTransformRegion.height;
         let scale = math_1.Vec2.of(1, 1);
         if (this.mode === types_1.ResizeMode.HorizontalOnly) {
-            const newWidth = origWidth + canvasDelta.x;
+            const newWidth = origWidth + canvasDelta.x * this.scaleRate.x;
             scale = math_1.Vec2.of(newWidth / origWidth, scale.y);
         }
         if (this.mode === types_1.ResizeMode.VerticalOnly) {
-            const newHeight = origHeight + canvasDelta.y;
+            const newHeight = origHeight + canvasDelta.y * this.scaleRate.y;
             scale = math_1.Vec2.of(scale.x, newHeight / origHeight);
         }
         if (this.mode === types_1.ResizeMode.Both) {
@@ -58,12 +84,12 @@ class ResizeTransformer {
         //    long decimal representations => large file sizes.
         scale = scale.map(component => Viewport_1.default.roundScaleRatio(component, 2));
         if (scale.x !== 0 && scale.y !== 0) {
-            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            const origin = this.editor.viewport.roundPoint(this.transformOrigin);
             this.selection.setTransform(math_1.Mat33.scaling2D(scale, origin));
         }
     }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        return this.selection.finalizeTransform();
     }
 }
 exports.ResizeTransformer = ResizeTransformer;
@@ -72,6 +98,8 @@ class RotateTransformer {
         this.editor = editor;
         this.selection = selection;
         this.startAngle = 0;
+        this.targetRotation = 0;
+        this.maximumDistFromStart = 0;
     }
     getAngle(canvasPoint) {
         const selectionCenter = this.selection.preTransformRegion.center;
@@ -84,14 +112,16 @@ class RotateTransformer {
         return Math.round(angle * roundingFactor) / roundingFactor;
     }
     onDragStart(startPoint) {
+        this.startPoint = startPoint;
         this.selection.setTransform(math_1.Mat33.identity);
         this.startAngle = this.getAngle(startPoint);
+        this.maximumDistFromStart = 0;
+        this.targetRotation = 0;
     }
-    onDragUpdate(canvasPos) {
-        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+    setRotationTo(angle) {
         // Transform in canvas space
         const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
-        const unrounded = math_1.Mat33.zRotation(targetRotation);
+        const unrounded = math_1.Mat33.zRotation(angle);
         const roundedRotationTransform = unrounded.mapEntries(entry => Viewport_1.default.roundScaleRatio(entry));
         const fullRoundedTransform = math_1.Mat33
             .translation(canvasSelCenter)
@@ -99,8 +129,21 @@ class RotateTransformer {
             .rightMul(math_1.Mat33.translation(canvasSelCenter.times(-1)));
         this.selection.setTransform(fullRoundedTransform);
     }
+    onDragUpdate(canvasPos) {
+        this.targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        this.setRotationTo(this.targetRotation);
+        const distFromStart = canvasPos.minus(this.startPoint).magnitude();
+        if (distFromStart > this.maximumDistFromStart) {
+            this.maximumDistFromStart = distFromStart;
+        }
+    }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        // Anything less than this is considered a click
+        const clickThreshold = 15;
+        if (this.maximumDistFromStart < clickThreshold && this.targetRotation === 0) {
+            this.setRotationTo(-Math.PI / 2);
+        }
+        return this.selection.finalizeTransform();
     }
 }
 exports.RotateTransformer = RotateTransformer;

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

@@ -0,0 +1,16 @@
+interface Callbacks {
+    filter(event: KeyboardEvent): boolean;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(event: KeyboardEvent): void;
+}
+/**
+ * Calls `callbacks` when different keys are known to be pressed.
+ *
+ * `filter` can be used to ignore events.
+ *
+ * This includes keys that didn't trigger a keydown or keyup event, but did cause
+ * shiftKey/altKey/metaKey/etc. properties to change on other events (e.g. mousemove
+ * events). Artifical events are created for these changes and sent to `callbacks`.
+ */
+declare const listenForKeyboardEventsFrom: (elem: HTMLElement, callbacks: Callbacks) => void;
+export default listenForKeyboardEventsFrom;

package/dist/cjs/util/listenForKeyboardEventsFrom.js

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Calls `callbacks` when different keys are known to be pressed.
+ *
+ * `filter` can be used to ignore events.
+ *
+ * This includes keys that didn't trigger a keydown or keyup event, but did cause
+ * shiftKey/altKey/metaKey/etc. properties to change on other events (e.g. mousemove
+ * events). Artifical events are created for these changes and sent to `callbacks`.
+ */
+const listenForKeyboardEventsFrom = (elem, callbacks) => {
+    // Track which keys are down so we can release them when the element
+    // loses focus. This is particularly important for keys like Control
+    // that can trigger shortcuts that cause the editor to lose focus before
+    // the keyup event is triggered.
+    let keysDown = [];
+    // Return whether two objects that are similar to keyboard events represent the
+    // same key.
+    const keyEventsMatch = (a, b) => {
+        return a.key === b.key && a.code === b.code;
+    };
+    const isKeyDown = (keyEvent) => {
+        return keysDown.some(other => keyEventsMatch(other, keyEvent));
+    };
+    const keyEventToRecord = (event) => {
+        return {
+            code: event.code,
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+            shiftKey: event.shiftKey,
+            metaKey: event.metaKey,
+        };
+    };
+    const handleKeyEvent = (htmlEvent) => {
+        if (htmlEvent.type === 'keydown') {
+            // Add event to the list of keys that are down (so long as it
+            // isn't a duplicate).
+            if (!isKeyDown(htmlEvent)) {
+                // Destructructring, then pushing seems to cause
+                // data loss. Copy properties individually:
+                keysDown.push(keyEventToRecord(htmlEvent));
+            }
+            if (!callbacks.filter(htmlEvent)) {
+                return;
+            }
+            callbacks.handleKeyDown(htmlEvent);
+        }
+        else { // keyup
+            console.assert(htmlEvent.type === 'keyup');
+            // Remove the key from keysDown -- it's no longer down.
+            keysDown = keysDown.filter(event => {
+                const matches = keyEventsMatch(event, htmlEvent);
+                return !matches;
+            });
+            if (!callbacks.filter(htmlEvent)) {
+                return;
+            }
+            callbacks.handleKeyUp(htmlEvent);
+        }
+    };
+    elem.addEventListener('keydown', htmlEvent => {
+        handleKeyEvent(htmlEvent);
+    });
+    elem.addEventListener('keyup', htmlEvent => {
+        handleKeyEvent(htmlEvent);
+    });
+    elem.addEventListener('focusout', (focusEvent) => {
+        const stillHasFocus = focusEvent.relatedTarget && elem.contains(focusEvent.relatedTarget);
+        if (!stillHasFocus) {
+            for (const event of keysDown) {
+                callbacks.handleKeyUp(new KeyboardEvent('keyup', {
+                    ...event,
+                }));
+            }
+            keysDown = [];
+        }
+    });
+    const fireArtificalEventsBasedOn = (htmlEvent) => {
+        let wasShiftDown = false;
+        let wasCtrlDown = false;
+        let wasAltDown = false;
+        let wasMetaDown = false;
+        for (const otherEvent of keysDown) {
+            const code = otherEvent.code;
+            wasShiftDown ||= !!code.match(/^Shift(Left|Right)$/);
+            wasCtrlDown ||= !!code.match(/^Control(Left|Right)$/);
+            wasAltDown ||= !!code.match(/^Alt(Left|Right)$/);
+            wasMetaDown ||= !!code.match(/^Meta(Left|Right)$/);
+        }
+        const eventName = (isDown) => {
+            if (isDown) {
+                return 'keydown';
+            }
+            else {
+                return 'keyup';
+            }
+        };
+        const eventInitDefaults = {
+            shiftKey: htmlEvent.shiftKey,
+            altKey: htmlEvent.altKey,
+            metaKey: htmlEvent.metaKey,
+            ctrlKey: htmlEvent.ctrlKey,
+        };
+        if (htmlEvent.shiftKey !== wasShiftDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.shiftKey), {
+                ...eventInitDefaults,
+                key: 'Shift',
+                code: 'ShiftLeft',
+            }));
+        }
+        if (htmlEvent.altKey !== wasAltDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.altKey), {
+                ...eventInitDefaults,
+                key: 'Alt',
+                code: 'AltLeft',
+            }));
+        }
+        if (htmlEvent.ctrlKey !== wasCtrlDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.ctrlKey), {
+                ...eventInitDefaults,
+                key: 'Control',
+                code: 'ControlLeft',
+            }));
+        }
+        if (htmlEvent.metaKey !== wasMetaDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.metaKey), {
+                ...eventInitDefaults,
+                key: 'Meta',
+                code: 'MetaLeft',
+            }));
+        }
+    };
+    elem.addEventListener('mousedown', (htmlEvent) => {
+        fireArtificalEventsBasedOn(htmlEvent);
+    });
+    elem.addEventListener('mousemove', (htmlEvent) => {
+        fireArtificalEventsBasedOn(htmlEvent);
+    });
+};
+exports.default = listenForKeyboardEventsFrom;

package/dist/cjs/version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    number: '1.6.0',
+    number: '1.7.0',
 };

package/dist/mjs/Editor.d.ts

@@ -70,6 +70,7 @@ export interface EditorSettings {
      */
     appInfo: {
         name: string;
+        description?: string;
         version?: string;
     } | null;
 }
@@ -271,6 +272,10 @@ export declare class Editor {
         /** Remove all event listeners registered by this function. */
         remove: () => void;
     };
+    /** @internal */
+    protected handleHTMLKeyDownEvent(htmlEvent: KeyboardEvent): void;
+    /** @internal */
+    protected handleHTMLKeyUpEvent(htmlEvent: KeyboardEvent): void;
     /**
      * Adds event listners for keypresses (and drop events) on `elem` and forwards those
      * events to the editor.

package/dist/mjs/Editor.mjs

@@ -27,6 +27,7 @@ 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  listenForKeyboardEventsFrom  from './util/listenForKeyboardEventsFrom.mjs';
 /**
  * The main entrypoint for the full editor.
  *
@@ -592,6 +593,29 @@ export class Editor {
             return sendToEditor;
         }, otherEventsFilter);
     }
+    /** @internal */
+    handleHTMLKeyDownEvent(htmlEvent) {
+        console.assert(htmlEvent.type === 'keydown', `handling a keydown event with type ${htmlEvent.type}`);
+        const event = keyPressEventFromHTMLEvent(htmlEvent);
+        if (this.toolController.dispatchInputEvent(event)) {
+            htmlEvent.preventDefault();
+        }
+        else if (event.key === 't' || event.key === 'T') {
+            htmlEvent.preventDefault();
+            this.display.rerenderAsText();
+        }
+        else if (event.key === 'Escape') {
+            this.renderingRegion.blur();
+        }
+    }
+    /** @internal */
+    handleHTMLKeyUpEvent(htmlEvent) {
+        console.assert(htmlEvent.type === 'keyup', `Handling a keyup event with type ${htmlEvent.type}`);
+        const event = keyUpEventFromHTMLEvent(htmlEvent);
+        if (this.toolController.dispatchInputEvent(event)) {
+            htmlEvent.preventDefault();
+        }
+    }
     /**
      * Adds event listners for keypresses (and drop events) on `elem` and forwards those
      * events to the editor.
@@ -600,62 +624,14 @@ export class Editor {
      * passed to the editor.
      */
     handleKeyEventsFrom(elem, filter = () => true) {
-        // Track which keys are down so we can release them when the element
-        // loses focus. This is particularly important for keys like Control
-        // that can trigger shortcuts that cause the editor to lose focus before
-        // the keyup event is triggered.
-        let keysDown = [];
-        // Return whether two objects that are similar to keyboard events represent the
-        // same key.
-        const keyEventsMatch = (a, b) => {
-            return a.key === b.key && a.code === b.code;
-        };
-        elem.addEventListener('keydown', htmlEvent => {
-            if (!filter(htmlEvent)) {
-                return;
-            }
-            const event = keyPressEventFromHTMLEvent(htmlEvent);
-            // Add event to the list of keys that are down (so long as it
-            // isn't a duplicate).
-            if (!keysDown.some(other => keyEventsMatch(other, event))) {
-                keysDown.push(event);
-            }
-            if (event.key === 't' || event.key === 'T') {
-                htmlEvent.preventDefault();
-                this.display.rerenderAsText();
-            }
-            else if (this.toolController.dispatchInputEvent(event)) {
-                htmlEvent.preventDefault();
-            }
-            else if (event.key === 'Escape') {
-                this.renderingRegion.blur();
-            }
-        });
-        elem.addEventListener('keyup', htmlEvent => {
-            // Remove the key from keysDown -- it's no longer down.
-            keysDown = keysDown.filter(event => {
-                const matches = keyEventsMatch(event, htmlEvent);
-                return !matches;
-            });
-            if (!filter(htmlEvent)) {
-                return;
-            }
-            const event = keyUpEventFromHTMLEvent(htmlEvent);
-            if (this.toolController.dispatchInputEvent(event)) {
-                htmlEvent.preventDefault();
-            }
-        });
-        elem.addEventListener('focusout', (event) => {
-            const stillHasFocus = event.relatedTarget && elem.contains(event.relatedTarget);
-            if (!stillHasFocus) {
-                for (const event of keysDown) {
-                    this.toolController.dispatchInputEvent({
-                        ...event,
-                        kind: InputEvtType.KeyUpEvent,
-                    });
-                }
-                keysDown = [];
-            }
+        listenForKeyboardEventsFrom(elem, {
+            filter,
+            handleKeyDown: (htmlEvent) => {
+                this.handleHTMLKeyDownEvent(htmlEvent);
+            },
+            handleKeyUp: (htmlEvent) => {
+                this.handleHTMLKeyUpEvent(htmlEvent);
+            },
         });
         // Allow drop.
         elem.ondragover = evt => {
@@ -1012,7 +988,6 @@ export class Editor {
         this.display.setDraftMode(true);
         const originalBackgrounds = this.image.getBackgroundComponents();
         const eraseBackgroundCommand = new Erase(originalBackgrounds);
-        let autoresizeEnabled = false;
         await loader.start(async (component) => {
             await this.dispatchNoAnnounce(EditorImage.addElement(component));
         }, (countProcessed, totalToProcess) => {
@@ -1026,13 +1001,9 @@ export class Editor {
             this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
             this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
             if (options) {
-                autoresizeEnabled = options.autoresize;
+                this.dispatchNoAnnounce(this.image.setAutoresizeEnabled(options.autoresize), false);
             }
         });
-        // TODO: Move this call into the callback above. Currently, this would cause
-        //       decrease in performance as the main background would be repeatedly added
-        //       and removed from the editor every time another component is added.
-        this.dispatchNoAnnounce(this.image.setAutoresizeEnabled(autoresizeEnabled), false);
         // Ensure that we don't have multiple overlapping BackgroundComponents. Remove
         // old BackgroundComponents.
         // Overlapping BackgroundComponents may cause changing the background color to
@@ -1122,15 +1093,18 @@ export class Editor {
         const iconLicenseText = this.icons.licenseInfo();
         const notices = [];
         if (this.settings.appInfo) {
-            const versionLines = [];
+            const descriptionLines = [];
             if (this.settings.appInfo.version) {
-                versionLines.push(`v${this.settings.appInfo.version}`, '');
+                descriptionLines.push(`v${this.settings.appInfo.version}`, '');
+            }
+            if (this.settings.appInfo.description) {
+                descriptionLines.push(this.settings.appInfo.description + '\n');
             }
             notices.push({
                 heading: `${this.settings.appInfo.name}`,
                 text: [
-                    ...versionLines,
-                    `Image editor library: js-draw v${version.number}.`,
+                    ...descriptionLines,
+                    `(js-draw v${version.number})`,
                 ].join('\n'),
             });
         }
@@ -1140,19 +1114,28 @@ export class Editor {
                 text: `v${version.number}`,
             });
         }
+        const screenSize = this.viewport.getScreenRectSize();
         notices.push({
-            heading: 'Developer information',
+            heading: this.localization.developerInformation,
             text: [
                 'Image debug information (from when this dialog was opened):',
-                `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()} rotation`,
+                `    ${this.viewport.getScaleFactor()}x zoom, ${180 / Math.PI * this.viewport.getRotationAngle()}° rotation`,
                 `    ${this.image.estimateNumElements()} components`,
-                `    ${this.getImportExportRect().w}x${this.getImportExportRect().h} size`,
+                `    auto-resize: ${this.image.getAutoresizeEnabled() ? 'enabled' : 'disabled'}`,
+                `    ${this.getImportExportRect().w}x${this.getImportExportRect().h} image size`,
+                `    ${screenSize.x}x${screenSize.y} screen size`,
+                '    cache:',
+                `        ${this.display.getCache().getDebugInfo()
+                    // Indent
+                    .replace(/([\n])/g, '\n        ')}`,
             ].join('\n'),
             minimized: true,
         });
         notices.push({
-            heading: 'Libraries',
+            heading: this.localization.softwareLibraries,
             text: [
+                `This image editor is powered by js-draw v${version.number}.`,
+                '',
                 'js-draw uses several libraries at runtime. Particularly noteworthy are:',
                 ' - The Coloris color picker: https://github.com/mdbassit/Coloris',
                 ' - The bezier.js Bézier curve library: https://github.com/Pomax/bezierjs'

package/dist/mjs/components/BackgroundComponent.mjs

@@ -122,7 +122,12 @@ export default class BackgroundComponent extends AbstractComponent {
         let needsRerender = false;
         if (!this.contentBBox.eq(importExportRect)) {
             this.contentBBox = importExportRect;
-            needsRerender = true;
+            // If the box already fills the screen, rerendering it will have
+            // no visual effect.
+            //
+            // TODO: This decision should be made by queueRerenderOf and not here.
+            //
+            needsRerender ||= !this.fillsScreen;
         }
         const imageAutoresizes = image.getAutoresizeEnabled();
         if (imageAutoresizes !== this.fillsScreen) {

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

@@ -42,7 +42,7 @@ export default class TextComponent extends AbstractComponent implements Restylea
     private computeUntransformedBBoxOfPart;
     private recomputeBBox;
     private renderInternal;
-    render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
     getStyle(): ComponentStyle;