js-draw 1.6.1 → 1.7.0

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.1',
+    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;

package/dist/mjs/components/TextComponent.mjs

@@ -99,30 +99,33 @@ class TextComponent extends AbstractComponent {
         let bbox = null;
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const textObject of this.textObjects) {
-            const transform = cursor.update(textObject);
+            const transform = cursor.update(textObject).transform;
             const currentBBox = this.computeUntransformedBBoxOfPart(textObject).transformedBoundingBox(transform);
             bbox ??= currentBBox;
             bbox = bbox.union(currentBBox);
         }
         this.contentBBox = bbox ?? Rect2.empty;
     }
-    renderInternal(canvas) {
+    renderInternal(canvas, visibleRect) {
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const textObject of this.textObjects) {
-            const transform = cursor.update(textObject);
+            const { transform, bbox } = cursor.update(textObject);
+            if (visibleRect && !visibleRect.intersects(bbox)) {
+                continue;
+            }
             if (typeof textObject === 'string') {
                 canvas.drawText(textObject, transform, this.style);
             }
             else {
                 canvas.pushTransform(transform);
-                textObject.renderInternal(canvas);
+                textObject.renderInternal(canvas, visibleRect?.transformedBoundingBox(transform.inverse()));
                 canvas.popTransform();
             }
         }
     }
-    render(canvas, _visibleRect) {
+    render(canvas, visibleRect) {
         canvas.startObject(this.contentBBox);
-        this.renderInternal(canvas);
+        this.renderInternal(canvas, visibleRect);
         canvas.endObject(this.getLoadSaveData());
     }
     getProportionalRenderingTime() {
@@ -132,7 +135,7 @@ class TextComponent extends AbstractComponent {
         const cursor = new TextComponent.TextCursor(this.transform, this.style);
         for (const subObject of this.textObjects) {
             // Convert canvas space to internal space relative to the current object.
-            const invTransform = cursor.update(subObject).inverse();
+            const invTransform = cursor.update(subObject).transform.inverse();
             const transformedLine = lineSegment.transformedBy(invTransform);
             if (typeof subObject === 'string') {
                 const textBBox = TextComponent.getTextDimens(subObject, this.style);
@@ -310,11 +313,11 @@ TextComponent.TextCursor = class {
         this.transform = Mat33.identity;
     }
     /**
-     * Based on previous calls to `update`, returns the transformation of
-     * the given `element` (including the parentTransform given to this cursor's
-     * constructor).
+     * Based on previous calls to `update`, returns the transformation and bounding box (relative
+     * to the parent element, or if none, the canvas) of the given `element`. Note that
+     * this is computed in part using the `parentTransform` provivded to this cursor's constructor.
      *
-     * The result does not take into account
+     * Warning: There may be edge cases here that are not taken into account.
      */
     update(elem) {
         let elementTransform = Mat33.identity;
@@ -353,7 +356,11 @@ TextComponent.TextCursor = class {
         // Update this.transform so that future calls to update return correct values.
         const endShiftTransform = Mat33.translation(Vec2.of(textSize.width, 0));
         this.transform = elementTransform.rightMul(elemInternalTransform).rightMul(endShiftTransform);
-        return this.parentTransform.rightMul(elementTransform);
+        const transform = this.parentTransform.rightMul(elementTransform);
+        return {
+            transform,
+            bbox: textSize.transformedBoundingBox(transform),
+        };
     }
 };
 export default TextComponent;

package/dist/mjs/localization.d.ts

@@ -10,5 +10,7 @@ export interface EditorLocalization extends ToolbarLocalization, ToolLocalizatio
     doneLoading: string;
     loading: (percentage: number) => string;
     imageEditor: string;
+    softwareLibraries: string;
+    developerInformation: string;
 }
 export declare const defaultEditorLocalization: EditorLocalization;

package/dist/mjs/localization.mjs

@@ -19,4 +19,6 @@ export const defaultEditorLocalization = {
     doneLoading: 'Done loading',
     undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`,
     redoAnnouncement: (commandDescription) => `Redid ${commandDescription}`,
+    softwareLibraries: 'Libraries',
+    developerInformation: 'Developer information',
 };

package/dist/mjs/localizations/comments.mjs

@@ -2,6 +2,7 @@
  * Comments to help translators create translations.
  */
 const comments = {
+    pen: 'Likely unused',
     dragAndDropHereOrBrowse: 'Uses {{curly braces}} to denote bold text',
     closeSidebar: 'Currently used as an accessibilty label',
 };

package/dist/mjs/rendering/RenderablePathSpec.mjs

@@ -21,11 +21,26 @@ export const visualEquivalent = (renderablePath, visibleRect) => {
     const path = pathFromRenderable(renderablePath);
     const strokeWidth = renderablePath.style.stroke?.width ?? 0;
     const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+    const styledPathBBox = path.bbox.grownBy(strokeWidth);
+    // Are we close enough to the path that it fills the entire screen?
+    if (onlyStroked
+        && renderablePath.style.stroke
+        && strokeWidth > visibleRect.maxDimension
+        && styledPathBBox.containsRect(visibleRect)) {
+        const strokeRadius = strokeWidth / 2;
+        // Do a fast, but with many false negatives, check.
+        for (const point of path.startEndPoints()) {
+            // If within the strokeRadius of any point
+            if (visibleRect.isWithinRadiusOf(strokeRadius, point)) {
+                return pathToRenderable(Path.fromRect(visibleRect), { fill: renderablePath.style.stroke.color });
+            }
+        }
+    }
     // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
     const expandedRect = visibleRect.grownBy(strokeWidth)
         .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
     // TODO: Handle simplifying very small paths.
-    if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+    if (expandedRect.containsRect(styledPathBBox)) {
         return renderablePath;
     }
     const parts = [];

package/dist/mjs/rendering/caching/CacheRecordManager.d.ts

@@ -9,4 +9,5 @@ export declare class CacheRecordManager {
     setSharedState(state: CacheState): void;
     allocCanvas(drawTo: Rect2, onDealloc: BeforeDeallocCallback): CacheRecord;
     private getLeastRecentlyUsedRecord;
+    getDebugInfo(): string;
 }