js-draw 1.19.1 → 1.20.0

package/dist/cjs/toolbar/widgets/components/makeSnappedList.js

@@ -11,8 +11,72 @@ const ReactiveValue_1 = require("../../../util/ReactiveValue");
 const makeSnappedList = (itemsValue) => {
     const container = document.createElement('div');
     container.classList.add('toolbar-snapped-scroll-list');
+    const scroller = document.createElement('div');
+    scroller.classList.add('scroller');
     const visibleIndex = ReactiveValue_1.MutableReactiveValue.fromInitialValue(0);
     let observer = null;
+    const makePageMarkers = () => {
+        const markerContainer = document.createElement('div');
+        markerContainer.classList.add('page-markers');
+        // Keyboard focus should go to the main scrolling list.
+        // TODO: Does it make sense for the page marker list to be focusable?
+        markerContainer.setAttribute('tabindex', '-1');
+        const markers = [];
+        const pairedItems = ReactiveValue_1.ReactiveValue.union([visibleIndex, itemsValue]);
+        pairedItems.onUpdateAndNow(([currentVisibleIndex, items]) => {
+            let addedOrRemovedMarkers = false;
+            // Items may have been removed from the list of pages. Make the markers reflect that.
+            while (items.length < markers.length) {
+                markers.pop();
+                addedOrRemovedMarkers = true;
+            }
+            let activeMarker;
+            for (let i = 0; i < items.length; i++) {
+                let marker;
+                if (i >= markers.length) {
+                    marker = document.createElement('div');
+                    // Use a separate content element to increase the clickable size of
+                    // the marker.
+                    const content = document.createElement('div');
+                    content.classList.add('content');
+                    marker.replaceChildren(content);
+                    markers.push(marker);
+                    addedOrRemovedMarkers = true;
+                }
+                else {
+                    marker = markers[i];
+                }
+                marker.classList.add('marker');
+                if (i === currentVisibleIndex) {
+                    marker.classList.add('-active');
+                    activeMarker = marker;
+                }
+                else {
+                    marker.classList.remove('-active');
+                }
+                const markerIndex = i;
+                marker.onclick = () => {
+                    wrappedItems.get()[markerIndex]?.element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                };
+            }
+            // Only call .replaceChildren when necessary -- doing so on every change would
+            // break transitions.
+            if (addedOrRemovedMarkers) {
+                markerContainer.replaceChildren(...markers);
+            }
+            // Handles the case where there are many markers and the current is offscreen
+            if (activeMarker && markerContainer.scrollHeight > container.clientHeight) {
+                activeMarker.scrollIntoView({ block: 'nearest' });
+            }
+            if (markers.length === 1) {
+                markerContainer.classList.add('-one-element');
+            }
+            else {
+                markerContainer.classList.remove('-one-element');
+            }
+        });
+        return markerContainer;
+    };
     const createObserver = () => {
         observer = new IntersectionObserver((entries) => {
             for (const entry of entries) {
@@ -28,7 +92,7 @@ const makeSnappedList = (itemsValue) => {
         }, {
             // Element to use as the boudning box with which to intersect.
             // See https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-            root: container,
+            root: scroller,
             // Fraction of an element that must be visible to trigger the callback:
             threshold: 0.9,
         });
@@ -60,7 +124,7 @@ const makeSnappedList = (itemsValue) => {
         for (const item of lastItems) {
             observer?.unobserve(item.element);
         }
-        container.replaceChildren();
+        scroller.replaceChildren();
         // An observer is only necessary if there are multiple items to scroll through.
         if (items.length > 1) {
             createObserver();
@@ -76,7 +140,7 @@ const makeSnappedList = (itemsValue) => {
             container.classList.remove('-empty');
         }
         for (const item of items) {
-            container.appendChild(item.element);
+            scroller.appendChild(item.element);
         }
         visibleIndex.set(0);
         if (observer) {
@@ -94,7 +158,8 @@ const makeSnappedList = (itemsValue) => {
     });
     // makeSnappedList is generally shown within the toolbar. This allows users to
     // scroll it with a touchpad.
-    (0, stopPropagationOfScrollingWheelEvents_1.default)(container);
+    (0, stopPropagationOfScrollingWheelEvents_1.default)(scroller);
+    container.replaceChildren(makePageMarkers(), scroller);
     return {
         container,
         visibleItem,

package/dist/cjs/tools/Eraser.js

@@ -71,6 +71,7 @@ class Eraser extends BaseTool_1.default {
         this.editor = editor;
         this.lastPoint = null;
         this.isFirstEraseEvt = true;
+        this.toAdd = new Set();
         // Commands that each remove one element
         this.eraseCommands = [];
         this.addCommands = [];
@@ -180,15 +181,17 @@ class Eraser extends BaseTool_1.default {
             newAddCommands.forEach(command => command.apply(this.editor));
             const finalToErase = [];
             for (const item of toErase) {
-                if (this.toAdd.includes(item)) {
-                    this.toAdd = this.toAdd.filter(i => i !== item);
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
                 }
                 else {
                     finalToErase.push(item);
                 }
             }
             this.toRemove.push(...finalToErase);
-            this.toAdd.push(...toAdd);
+            for (const item of toAdd) {
+                this.toAdd.add(item);
+            }
             this.eraseCommands.push(new Erase_1.default(finalToErase));
             this.addCommands.push(...newAddCommands);
         }
@@ -199,7 +202,7 @@ class Eraser extends BaseTool_1.default {
         if (event.allPointers.length === 1 || event.current.device === Pointer_1.PointerDevice.Eraser) {
             this.lastPoint = event.current.canvasPos;
             this.toRemove = [];
-            this.toAdd = [];
+            this.toAdd.clear();
             this.isFirstEraseEvt = true;
             this.drawPreviewAt(event.current.canvasPos);
             return true;
@@ -215,7 +218,21 @@ class Eraser extends BaseTool_1.default {
         const commands = [];
         if (this.addCommands.length > 0) {
             this.addCommands.forEach(cmd => cmd.unapply(this.editor));
-            commands.push(...this.toAdd.map(a => EditorImage_1.default.addElement(a)));
+            // Remove items from toAdd that are also present in toRemove -- adding, then
+            // removing these does nothing, and can break undo/redo.
+            for (const item of this.toAdd) {
+                if (this.toRemove.includes(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter(other => other !== item);
+                }
+            }
+            for (const item of this.toRemove) {
+                if (this.toAdd.has(item)) {
+                    this.toAdd.delete(item);
+                    this.toRemove = this.toRemove.filter(other => other !== item);
+                }
+            }
+            commands.push(...[...this.toAdd].map(a => EditorImage_1.default.addElement(a)));
             this.addCommands = [];
         }
         if (this.eraseCommands.length > 0) {

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

@@ -10,13 +10,27 @@ interface PinchData {
     dist: number;
 }
 export declare enum PanZoomMode {
+    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
     OneFingerTouchGestures = 1,
+    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
     TwoFingerTouchGestures = 2,
     RightClickDrags = 4,
+    /** Single-pointer gestures of *any* type (including touch). */
     SinglePointerGestures = 8,
+    /** Keyboard navigation (e.g. LeftArrow to move left). */
     Keyboard = 16,
+    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
     RotationLocked = 32
 }
+/**
+ * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
+ *
+ * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
+ * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
+ * respond to right-click drag events and two-finger touch gestures.
+ *
+ * @see {@link setModeEnabled}
+ */
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
@@ -58,8 +72,48 @@ export default class PanZoom extends BaseTool {
     onWheel({ delta, screenPos }: WheelEvt): boolean;
     onKeyPress(event: KeyPressEvent): boolean;
     private isRotationLocked;
+    /**
+     * Changes the types of gestures used by this pan/zoom tool.
+     *
+     * @see {@link PanZoomMode} {@link setMode}
+     *
+     * @example
+     * ```ts,runnable
+     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     *
+     * // By default, there are multiple PanZoom tools that handle different events.
+     * // This gets all PanZoomTools.
+     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
+     *
+     * // The first PanZoomTool is the highest priority -- by default,
+     * // this tool is responsible for handling multi-finger touch gestures.
+     * //
+     * // Lower-priority PanZoomTools handle one-finger touch gestures and
+     * // key-presses.
+     * const panZoomTool = panZoomToolList[0];
+     *
+     * // Lock rotation for multi-finger touch gestures.
+     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
+     * ```
+     */
     setModeEnabled(mode: PanZoomMode, enabled: boolean): void;
+    /**
+     * Sets all modes for this tool using a bitmask.
+     *
+     * @see {@link setModeEnabled}
+     *
+     * @example
+     * ```ts
+     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
+     * ```
+     */
     setMode(mode: PanZoomMode): void;
+    /**
+     * Returns a bitmask indicating the currently-enabled modes.
+     * @see {@link setModeEnabled}
+     */
     getMode(): PanZoomMode;
 }
 export {};

package/dist/cjs/tools/PanZoom.js

@@ -13,11 +13,16 @@ const BaseTool_1 = __importDefault(require("./BaseTool"));
 const keybindings_1 = require("./keybindings");
 var PanZoomMode;
 (function (PanZoomMode) {
+    /** Touch gestures with a single pointer. Ignores non-touch gestures. */
     PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
+    /** Touch gestures with exactly two pointers. Ignores non-touch gestures. */
     PanZoomMode[PanZoomMode["TwoFingerTouchGestures"] = 2] = "TwoFingerTouchGestures";
     PanZoomMode[PanZoomMode["RightClickDrags"] = 4] = "RightClickDrags";
+    /** Single-pointer gestures of *any* type (including touch). */
     PanZoomMode[PanZoomMode["SinglePointerGestures"] = 8] = "SinglePointerGestures";
+    /** Keyboard navigation (e.g. LeftArrow to move left). */
     PanZoomMode[PanZoomMode["Keyboard"] = 16] = "Keyboard";
+    /** If provided, prevents **this** tool from rotating the viewport (other tools may still do so). */
     PanZoomMode[PanZoomMode["RotationLocked"] = 32] = "RotationLocked";
 })(PanZoomMode || (exports.PanZoomMode = PanZoomMode = {}));
 class InertialScroller {
@@ -65,6 +70,15 @@ class InertialScroller {
         }
     }
 }
+/**
+ * This tool moves the viewport in response to touchpad, touchscreen, mouse, and keyboard events.
+ *
+ * Which events are handled, and which are skipped, are determined by the tool's `mode`. For example,
+ * a `PanZoom` tool with `mode = PanZoomMode.TwoFingerTouchGestures|PanZoomMode.RightClickDrags` would
+ * respond to right-click drag events and two-finger touch gestures.
+ *
+ * @see {@link setModeEnabled}
+ */
 class PanZoom extends BaseTool_1.default {
     constructor(editor, mode, description) {
         super(editor.notifier, description);
@@ -428,8 +442,32 @@ class PanZoom extends BaseTool_1.default {
     isRotationLocked() {
         return !!(this.mode & PanZoomMode.RotationLocked);
     }
-    // Sets whether the given `mode` is enabled. `mode` should be a single
-    // mode from the `PanZoomMode` enum.
+    /**
+     * Changes the types of gestures used by this pan/zoom tool.
+     *
+     * @see {@link PanZoomMode} {@link setMode}
+     *
+     * @example
+     * ```ts,runnable
+     * import { Editor, PanZoomTool, PanZoomMode } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     *
+     * // By default, there are multiple PanZoom tools that handle different events.
+     * // This gets all PanZoomTools.
+     * const panZoomToolList = editor.toolController.getMatchingTools(PanZoomTool);
+     *
+     * // The first PanZoomTool is the highest priority -- by default,
+     * // this tool is responsible for handling multi-finger touch gestures.
+     * //
+     * // Lower-priority PanZoomTools handle one-finger touch gestures and
+     * // key-presses.
+     * const panZoomTool = panZoomToolList[0];
+     *
+     * // Lock rotation for multi-finger touch gestures.
+     * panZoomTool.setModeEnabled(PanZoomMode.RotationLocked, true);
+     * ```
+     */
     setModeEnabled(mode, enabled) {
         let newMode = this.mode;
         if (enabled) {
@@ -440,6 +478,16 @@ class PanZoom extends BaseTool_1.default {
         }
         this.setMode(newMode);
     }
+    /**
+     * Sets all modes for this tool using a bitmask.
+     *
+     * @see {@link setModeEnabled}
+     *
+     * @example
+     * ```ts
+     * tool.setMode(PanZoomMode.RotationLocked|PanZoomMode.TwoFingerTouchGestures);
+     * ```
+     */
     setMode(mode) {
         if (mode !== this.mode) {
             this.mode = mode;
@@ -449,6 +497,10 @@ class PanZoom extends BaseTool_1.default {
             });
         }
     }
+    /**
+     * Returns a bitmask indicating the currently-enabled modes.
+     * @see {@link setModeEnabled}
+     */
     getMode() {
         return this.mode;
     }

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

@@ -2,6 +2,9 @@ type ListenerResult = {
     remove(): void;
 };
 type UpdateCallback<T> = (value: T) => void;
+type ReactiveValuesOf<T extends unknown[]> = {
+    [key in keyof T]: ReactiveValue<T[key]>;
+};
 /**
  * A `ReactiveValue` is a value that
  * - updates periodically,
@@ -56,6 +59,7 @@ export declare abstract class ReactiveValue<T> {
      * Returns a reactive value derived from a single `source`.
      */
     static map<A, B>(source: ReactiveValue<A>, map: (a: A) => B, inverseMap: (b: B) => A): MutableReactiveValue<B>;
+    static union<Values extends [...unknown[]]>(values: ReactiveValuesOf<Values>): ReactiveValue<Values>;
 }
 export declare abstract class MutableReactiveValue<T> extends ReactiveValue<T> {
     /**

package/dist/cjs/util/ReactiveValue.js

@@ -106,6 +106,11 @@ class ReactiveValue {
         }
         return result;
     }
+    static union(values) {
+        return ReactiveValue.fromCallback(() => {
+            return values.map(value => value.get());
+        }, values);
+    }
 }
 exports.ReactiveValue = ReactiveValue;
 class MutableReactiveValue extends ReactiveValue {

package/dist/cjs/version.js

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

package/dist/mjs/SVGLoader/index.mjs

@@ -47,7 +47,9 @@ export default class SVGLoader {
         let fill = Color4.transparent;
         let stroke;
         // If possible, use computedStyles (allows property inheritance).
-        const fillAttribute = node.getAttribute('fill') ?? computedStyles?.fill ?? node.style?.fill;
+        // Chromium, however, sets .fill to a falsy, but not undefined value in some cases where
+        // styles are available. As such, use || instead of ??.
+        const fillAttribute = node.getAttribute('fill') ?? (computedStyles?.fill || node.style?.fill);
         if (fillAttribute) {
             try {
                 fill = Color4.fromString(fillAttribute);

package/dist/mjs/image/EditorImage.d.ts

@@ -166,7 +166,7 @@ export default class EditorImage {
      *
      * @internal
      */
-    setDebugMode(newDebugMode: boolean): void;
+    static setDebugMode(newDebugMode: boolean): void;
     private static SetImportExportRectCommand;
 }
 /**
@@ -214,6 +214,7 @@ export declare class ImageNode {
     renderAllAsync(renderer: AbstractRenderer, preRenderComponent: PreRenderComponentCallback): Promise<boolean>;
     render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
     renderDebugBoundingBoxes(renderer: AbstractRenderer, visibleRect: Rect2, depth?: number): void;
+    private checkRep;
 }
 /** An `ImageNode` that can properly handle fullscreen/data components. @internal */
 export declare class RootImageNode extends ImageNode {

package/dist/mjs/image/EditorImage.mjs

@@ -314,7 +314,7 @@ class EditorImage {
      *
      * @internal
      */
-    setDebugMode(newDebugMode) {
+    static setDebugMode(newDebugMode) {
         debugMode = newDebugMode;
     }
 }
@@ -586,8 +586,8 @@ export class ImageNode {
                 const nodeForChildren = new ImageNode(this);
                 nodeForChildren.children = this.children;
                 this.children = [nodeForNewLeaf, nodeForChildren];
-                nodeForChildren.recomputeBBox(true);
                 nodeForChildren.updateParents();
+                nodeForChildren.recomputeBBox(true);
             }
             return nodeForNewLeaf.addLeaf(leaf);
         }
@@ -604,6 +604,9 @@ export class ImageNode {
         const newNode = ImageNode.createLeafNode(this, leaf);
         this.children.push(newNode);
         newNode.recomputeBBox(true);
+        if (this.children.length >= this.targetChildCount) {
+            this.rebalance();
+        }
         return newNode;
     }
     // Creates a new leaf node with the given content.
@@ -636,6 +639,7 @@ export class ImageNode {
                 this.parent?.recomputeBBox(true);
             }
         }
+        this.checkRep();
     }
     // Grows this' bounding box to also include `other`.
     // Always bubbles up.
@@ -659,10 +663,12 @@ export class ImageNode {
             // Remove this' parent, if this' parent isn't the root.
             const oldParent = this.parent;
             if (oldParent.parent !== null) {
-                oldParent.children = [];
-                this.parent = oldParent.parent;
-                this.parent.children.push(this);
+                const newParent = oldParent.parent;
+                newParent.children = newParent.children.filter(c => c !== oldParent);
                 oldParent.parent = null;
+                oldParent.children = [];
+                this.parent = newParent;
+                newParent.children.push(this);
                 this.parent.recomputeBBox(false);
             }
             else if (this.content === null) {
@@ -672,10 +678,63 @@ export class ImageNode {
                 this.parent = null;
             }
         }
+        // Create virtual containers for children. Handles the case where there
+        // are many small, often non-overlapping children that we still want to be grouped.
+        if (this.children.length > this.targetChildCount * 10) {
+            const grid = this.getBBox().divideIntoGrid(4, 4);
+            const indexToCount = [];
+            while (indexToCount.length < grid.length) {
+                indexToCount.push(0);
+            }
+            for (const child of this.children) {
+                for (let i = 0; i < grid.length; i++) {
+                    if (grid[i].containsRect(child.getBBox())) {
+                        indexToCount[i]++;
+                    }
+                }
+            }
+            let indexWithGreatest = 0;
+            let greatestCount = indexToCount[0];
+            for (let i = 1; i < indexToCount.length; i++) {
+                if (indexToCount[i] > greatestCount) {
+                    indexWithGreatest = i;
+                    greatestCount = indexToCount[i];
+                }
+            }
+            const targetGridSquare = grid[indexWithGreatest];
+            // Avoid clustering if just a few children would be grouped.
+            // Unnecessary clustering can lead to unnecessarily nested nodes.
+            if (greatestCount > 4) {
+                const newChildren = [];
+                const childNodeChildren = [];
+                for (const child of this.children) {
+                    if (targetGridSquare.containsRect(child.getBBox())) {
+                        childNodeChildren.push(child);
+                    }
+                    else {
+                        newChildren.push(child);
+                    }
+                }
+                if (childNodeChildren.length < this.children.length) {
+                    this.children = newChildren;
+                    const child = new ImageNode(this);
+                    this.children.push(child);
+                    child.children = childNodeChildren;
+                    child.updateParents(false);
+                    child.recomputeBBox(false);
+                    child.rebalance();
+                }
+            }
+        }
+        // Empty?
+        if (this.parent && this.children.length === 0 && this.content === null) {
+            this.remove();
+        }
     }
     // Removes the parent-to-child link.
     // Called internally by `.remove`
     removeChild(child) {
+        this.checkRep();
         const oldChildCount = this.children.length;
         this.children = this.children.filter(node => {
             return node !== child;
@@ -685,6 +744,8 @@ export class ImageNode {
             child.rebalance();
         });
         this.recomputeBBox(true);
+        this.rebalance();
+        this.checkRep();
     }
     // Remove this node and all of its children
     remove() {
@@ -699,6 +760,7 @@ export class ImageNode {
         this.parent = null;
         this.content = null;
         this.children = [];
+        this.checkRep();
     }
     // Creates a (potentially incomplete) async rendering of this image.
     // Returns false if stopped early
@@ -765,11 +827,45 @@ export class ImageNode {
         const lineWidth = isLeaf ? 1 * pixelSize : 2 * pixelSize;
         renderer.drawRect(bbox.intersection(visibleRect), lineWidth, { fill });
         renderer.endObject();
+        if (bbox.maxDimension > visibleRect.maxDimension / 3) {
+            const textStyle = {
+                fontFamily: 'monospace',
+                size: bbox.minDimension / 20,
+                renderingStyle: { fill: Color4.red },
+            };
+            renderer.drawText(`Depth: ${depth}`, Mat33.translation(bbox.bottomLeft), textStyle);
+        }
         // Render debug information for children
         for (const child of this.children) {
             child.renderDebugBoundingBoxes(renderer, visibleRect, depth + 1);
         }
     }
+    checkRep(depth = 0) {
+        // Slow -- disabld by default
+        if (debugMode) {
+            if (this.parent && !this.parent.children.includes(this)) {
+                throw new Error(`Parent does not have this node as a child. (depth: ${depth})`);
+            }
+            let expectedBBox = null;
+            const seenChildren = new Set();
+            for (const child of this.children) {
+                expectedBBox ??= child.getBBox();
+                expectedBBox = expectedBBox.union(child.getBBox());
+                if (child.parent !== this) {
+                    throw new Error(`Child with bbox ${child.getBBox()} and ${child.children.length} has wrong parent (was ${child.parent}).`);
+                }
+                // Children should only be present once
+                if (seenChildren.has(child)) {
+                    throw new Error(`Child ${child} is present twice or more in its parent's child list`);
+                }
+                seenChildren.add(child);
+            }
+            const tolerance = this.bbox.minDimension / 100;
+            if (expectedBBox && !this.bbox.eq(expectedBBox, tolerance)) {
+                throw new Error(`Wrong bounding box ${expectedBBox} \\neq ${this.bbox} (depth: ${depth})`);
+            }
+        }
+    }
 }
 ImageNode.idCounter = 0;
 /** An `ImageNode` that can properly handle fullscreen/data components. @internal */

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -64,12 +64,12 @@ export default class CanvasRenderer extends AbstractRenderer {
     setDraftMode(draftMode) {
         if (draftMode) {
             this.minSquareCurveApproxDist = 9;
-            this.minRenderSizeBothDimens = 2;
-            this.minRenderSizeAnyDimen = 0.5;
+            this.minRenderSizeBothDimens = 1;
+            this.minRenderSizeAnyDimen = 0.1;
         }
         else {
             this.minSquareCurveApproxDist = 0.5;
-            this.minRenderSizeBothDimens = 0.2;
+            this.minRenderSizeBothDimens = 0.1;
             this.minRenderSizeAnyDimen = 1e-6;
         }
     }
@@ -238,7 +238,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     // @internal
     isTooSmallToRender(rect) {
         // Should we ignore all objects within this object's bbox?
-        const diagonal = rect.size.times(this.getCanvasToScreenTransform().getScaleFactor());
+        const diagonal = rect.size.times(this.getSizeOfCanvasPixelOnScreen());
         const bothDimenMinSize = this.minRenderSizeBothDimens;
         const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
         const anyDimenMinSize = this.minRenderSizeAnyDimen;

package/dist/mjs/toolbar/localization.d.ts

@@ -58,6 +58,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     errorImageHasZeroSize: string;
     describeTheImage: string;
     fileInput__loading: string;
+    fileInput__andNMoreFiles: (count: number) => string;
     penDropdown__baseHelpText: string;
     penDropdown__colorHelpText: string;
     penDropdown__thicknessHelpText: string;

package/dist/mjs/toolbar/localization.mjs

@@ -59,6 +59,7 @@ export const defaultToolbarLocalization = {
     errorImageHasZeroSize: 'Error: Image has zero size',
     describeTheImage: 'Image description',
     fileInput__loading: 'Loading...',
+    fileInput__andNMoreFiles: (n) => `(...${n} more)`,
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     penDropdown__colorHelpText: 'Changes the pen\'s color',

package/dist/mjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts

@@ -11,6 +11,7 @@ export declare class ImageWrapper {
     decreaseSize(resizeFactor?: number): void;
     reset(): void;
     isChanged(): boolean;
+    isLarge(): boolean;
     getBase64Url(): string;
     getAltText(): string;
     setAltText(text: string): void;

package/dist/mjs/toolbar/widgets/InsertImageWidget/ImageWrapper.mjs

@@ -29,6 +29,12 @@ export class ImageWrapper {
     isChanged() {
         return this.imageBase64Url !== this.originalSrc;
     }
+    // Returns true if the current image is large enough to display a "decrease size"
+    // option.
+    isLarge() {
+        const largeImageThreshold = 0.12 * 1024 * 1024; // 0.12 MiB
+        return this.getBase64Url().length > largeImageThreshold;
+    }
     getBase64Url() {
         return this.imageBase64Url;
     }
@@ -37,6 +43,7 @@ export class ImageWrapper {
     }
     setAltText(text) {
         this.altText = text;
+        this.preview.alt = text;
     }
     static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
         return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);