js-draw 0.10.3 → 0.11.0

package/dist/src/Editor.d.ts

@@ -29,6 +29,7 @@ import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
+import AbstractComponent from './components/AbstractComponent';
 type HTMLPointerEventType = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent) => boolean;
 export interface EditorSettings {
@@ -157,7 +158,7 @@ export declare class Editor {
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */
-    dispatch(command: Command, addToHistory?: boolean): void;
+    dispatch(command: Command, addToHistory?: boolean): void | Promise<void>;
     /**
      * Dispatches a command without announcing it. By default, does not add to history.
      * Use this to show finalized commands that don't need to have `announceForAccessibility`
@@ -197,6 +198,7 @@ export declare class Editor {
     addStyleSheet(content: string): HTMLStyleElement;
     sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
+    addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
     loadFrom(loader: ImageLoader): Promise<void>;

package/dist/src/Editor.js

@@ -45,6 +45,9 @@ import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
 import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 import untilNextAnimationFrame from './util/untilNextAnimationFrame';
+import fileToBase64 from './util/fileToBase64';
+import uniteCommands from './commands/uniteCommands';
+import SelectionTool from './tools/SelectionTool/SelectionTool';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -372,18 +375,12 @@ export class Editor {
             for (const file of clipboardData.files) {
                 const fileType = file.type.toLowerCase();
                 if (fileType === 'image/png' || fileType === 'image/jpg') {
-                    const reader = new FileReader();
                     this.showLoadingWarning(0);
+                    const onprogress = (evt) => {
+                        this.showLoadingWarning(evt.loaded / evt.total);
+                    };
                     try {
-                        const data = yield new Promise((resolve, reject) => {
-                            reader.onload = () => resolve(reader.result);
-                            reader.onerror = reject;
-                            reader.onabort = reject;
-                            reader.onprogress = (evt) => {
-                                this.showLoadingWarning(evt.loaded / evt.total);
-                            };
-                            reader.readAsDataURL(file);
-                        });
+                        const data = yield fileToBase64(file, onprogress);
                         if (data && this.toolController.dispatchInputEvent({
                             kind: InputEvtType.PasteEvent,
                             mime: fileType,
@@ -478,13 +475,12 @@ export class Editor {
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
         if (addToHistory) {
-            // .push applies [command] to this
-            this.history.push(command);
-        }
-        else {
-            command.apply(this);
+            const apply = false; // Don't double-apply
+            this.history.push(command, apply);
         }
+        const applyResult = command.apply(this);
         this.announceForAccessibility(command.description(this, this.localization));
+        return applyResult;
     }
     /**
      * Dispatches a command without announcing it. By default, does not add to history.
@@ -628,6 +624,47 @@ export class Editor {
             current: mainPointer,
         });
     }
+    addAndCenterComponents(components, selectComponents = true) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let bbox = null;
+            for (const component of components) {
+                if (bbox) {
+                    bbox = bbox.union(component.getBBox());
+                }
+                else {
+                    bbox = component.getBBox();
+                }
+            }
+            if (!bbox) {
+                return;
+            }
+            // Find a transform that scales/moves bbox onto the screen.
+            const visibleRect = this.viewport.visibleRect;
+            const scaleRatioX = visibleRect.width / bbox.width;
+            const scaleRatioY = visibleRect.height / bbox.height;
+            let scaleRatio = scaleRatioX;
+            if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+                scaleRatio = scaleRatioY;
+            }
+            scaleRatio *= 2 / 3;
+            scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+            const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
+            const commands = [];
+            for (const component of components) {
+                // To allow deserialization, we need to add first, then transform.
+                commands.push(EditorImage.addElement(component));
+                commands.push(component.transformBy(transfm));
+            }
+            const applyChunkSize = 100;
+            yield this.dispatch(uniteCommands(commands, applyChunkSize), true);
+            if (selectComponents) {
+                for (const selectionTool of this.toolController.getMatchingTools(SelectionTool)) {
+                    selectionTool.setEnabled(true);
+                    selectionTool.setSelection(components);
+                }
+            }
+        });
+    }
     // Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
     // If `format` is not `image/png`, a PNG image URL may still be returned (as in the
     // case of `HTMLCanvasElement::toDataURL`).

package/dist/src/SVGLoader.js

@@ -233,16 +233,17 @@ export default class SVGLoader {
         }
     }
     addImage(elem) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             const image = new Image();
             image.src = (_a = elem.getAttribute('xlink:href')) !== null && _a !== void 0 ? _a : elem.href.baseVal;
+            image.setAttribute('alt', (_b = elem.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '');
             try {
                 const supportedAttrs = [];
                 const transform = this.getTransform(elem, supportedAttrs);
                 const imageElem = yield ImageComponent.fromImage(image, transform);
                 this.attachUnrecognisedAttrs(imageElem, elem, new Set(supportedAttrs), new Set(['transform']));
-                (_b = this.onAddComponent) === null || _b === void 0 ? void 0 : _b.call(this, imageElem);
+                (_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, imageElem);
             }
             catch (e) {
                 console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');

package/dist/src/components/AbstractComponent.d.ts

@@ -28,6 +28,7 @@ export default abstract class AbstractComponent {
     protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
+    setZIndex(newZIndex: number): SerializableCommand;
     isSelectable(): boolean;
     getProportionalRenderingTime(): number;
     private static transformElementCommandId;

package/dist/src/components/AbstractComponent.js

@@ -48,6 +48,10 @@ export default class AbstractComponent {
     transformBy(affineTransfm) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this);
     }
+    // Returns a command that updates this component's z-index.
+    setZIndex(newZIndex) {
+        return new AbstractComponent.TransformElementCommand(Mat33.identity, this, newZIndex);
+    }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
         return true;
@@ -126,10 +130,11 @@ AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
 AbstractComponent.transformElementCommandId = 'transform-element';
 AbstractComponent.UnresolvedTransformElementCommand = class extends SerializableCommand {
-    constructor(affineTransfm, componentID) {
+    constructor(affineTransfm, componentID, targetZIndex) {
         super(AbstractComponent.transformElementCommandId);
         this.affineTransfm = affineTransfm;
         this.componentID = componentID;
+        this.targetZIndex = targetZIndex;
         this.command = null;
     }
     resolveCommand(editor) {
@@ -140,7 +145,7 @@ AbstractComponent.UnresolvedTransformElementCommand = class extends Serializable
         if (!component) {
             throw new Error(`Unable to resolve component with ID ${this.componentID}`);
         }
-        this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component);
+        this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component, this.targetZIndex);
     }
     apply(editor) {
         this.resolveCommand(editor);
@@ -157,15 +162,17 @@ AbstractComponent.UnresolvedTransformElementCommand = class extends Serializable
         return {
             id: this.componentID,
             transfm: this.affineTransfm.toArray(),
+            targetZIndex: this.targetZIndex,
         };
     }
 };
 AbstractComponent.TransformElementCommand = (_a = class extends SerializableCommand {
-        constructor(affineTransfm, component) {
+        constructor(affineTransfm, component, targetZIndex) {
             super(AbstractComponent.transformElementCommandId);
             this.affineTransfm = affineTransfm;
             this.component = component;
             this.origZIndex = component.zIndex;
+            this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
         }
         updateTransform(editor, newTransfm) {
             // Any parent should have only one direct child.
@@ -182,7 +189,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
             }
         }
         apply(editor) {
-            this.component.zIndex = AbstractComponent.zIndexCounter++;
+            this.component.zIndex = this.targetZIndex;
             this.updateTransform(editor, this.affineTransfm);
             editor.queueRerender();
         }
@@ -198,6 +205,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
             return {
                 id: this.component.getId(),
                 transfm: this.affineTransfm.toArray(),
+                targetZIndex: this.targetZIndex,
             };
         }
     },
@@ -205,10 +213,11 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
         SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
             const elem = editor.image.lookupElement(json.id);
             const transform = new Mat33(...json.transfm);
+            const targetZIndex = json.targetZIndex;
             if (!elem) {
-                return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);
+                return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id, targetZIndex);
             }
-            return new AbstractComponent.TransformElementCommand(transform, elem);
+            return new AbstractComponent.TransformElementCommand(transform, elem, targetZIndex);
         });
     })(),
     _a);

package/dist/src/components/ImageComponent.d.ts

@@ -23,6 +23,9 @@ export default class ImageComponent extends AbstractComponent {
     };
     protected applyTransformation(affineTransfm: Mat33): void;
     description(localizationTable: ImageComponentLocalization): string;
+    getAltText(): string | undefined;
+    getURL(): string;
+    getTransformation(): Mat33;
     protected createClone(): AbstractComponent;
     static deserializeFromJSON(data: any): ImageComponent;
 }

package/dist/src/components/ImageComponent.js

@@ -33,7 +33,7 @@ export default class ImageComponent extends AbstractComponent {
     }
     // Load from an image. Waits for the image to load if incomplete.
     static fromImage(elem, transform) {
-        var _a;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             if (!elem.complete) {
                 yield new Promise((resolve, reject) => {
@@ -70,6 +70,8 @@ export default class ImageComponent extends AbstractComponent {
                 image.width = width;
                 image.height = height;
             }
+            image.setAttribute('alt', (_b = elem.getAttribute('alt')) !== null && _b !== void 0 ? _b : '');
+            image.setAttribute('aria-label', (_c = elem.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : '');
             return new ImageComponent({
                 image,
                 base64Url: url,
@@ -111,6 +113,15 @@ export default class ImageComponent extends AbstractComponent {
     description(localizationTable) {
         return this.image.label ? localizationTable.imageNode(this.image.label) : localizationTable.unlabeledImageNode;
     }
+    getAltText() {
+        return this.image.label;
+    }
+    getURL() {
+        return this.image.base64Url;
+    }
+    getTransformation() {
+        return this.image.transform;
+    }
     createClone() {
         return new ImageComponent(Object.assign({}, this.image));
     }

package/dist/src/localizations/es.js

@@ -14,5 +14,5 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
         return `Color fue cambiado a ${color}`;
     }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
         return `Lapiz ${penId}`;
-    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto' });
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto', image: 'Imagen', imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`, imageLoadError: (message) => `Error cargando imagen: ${message}` });
 export default localization;

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -188,15 +188,19 @@ export default class SVGRenderer extends AbstractRenderer {
         }
     }
     drawImage(image) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
+        let label = (_b = (_a = image.label) !== null && _a !== void 0 ? _a : image.image.getAttribute('aria-label')) !== null && _b !== void 0 ? _b : '';
+        if (label === '') {
+            label = (_c = image.image.getAttribute('alt')) !== null && _c !== void 0 ? _c : '';
+        }
         const svgImgElem = document.createElementNS(svgNameSpace, 'image');
         svgImgElem.setAttribute('href', image.base64Url);
-        svgImgElem.setAttribute('width', (_a = image.image.getAttribute('width')) !== null && _a !== void 0 ? _a : '');
-        svgImgElem.setAttribute('height', (_b = image.image.getAttribute('height')) !== null && _b !== void 0 ? _b : '');
-        svgImgElem.setAttribute('aria-label', (_d = (_c = image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : image.image.getAttribute('alt')) !== null && _d !== void 0 ? _d : '');
+        svgImgElem.setAttribute('width', (_d = image.image.getAttribute('width')) !== null && _d !== void 0 ? _d : '');
+        svgImgElem.setAttribute('height', (_e = image.image.getAttribute('height')) !== null && _e !== void 0 ? _e : '');
+        svgImgElem.setAttribute('aria-label', label);
         this.transformFrom(image.transform, svgImgElem);
         this.elem.appendChild(svgImgElem);
-        (_e = this.objectElems) === null || _e === void 0 ? void 0 : _e.push(svgImgElem);
+        (_f = this.objectElems) === null || _f === void 0 ? void 0 : _f.push(svgImgElem);
     }
     startObject(boundingBox) {
         super.startObject(boundingBox);

package/dist/src/toolbar/HTMLToolbar.js

@@ -12,7 +12,7 @@ import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-import { ActionButtonWidget } from './lib';
+import { ActionButtonWidget, InsertImageWidget } from './lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -179,6 +179,7 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
         }
+        this.addWidget(new InsertImageWidget(this.editor, this.localizationTable));
         const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
         if (panZoomTool) {
             this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));

package/dist/src/toolbar/IconProvider.d.ts

@@ -19,6 +19,7 @@ export default class IconProvider {
     makeAllDevicePanningIcon(): IconType;
     makeZoomIcon(): IconType;
     makeRotationLockIcon(): IconType;
+    makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
     makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -284,6 +284,13 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '10 10 70 70');
         return icon;
     }
+    makeInsertImageIcon() {
+        return this.makeIconFromPath(`
+			M 5 10 L 5 90 L 95 90 L 95 10 L 5 10 z
+			M 10 15 L 90 15 L 90 50 L 70 75 L 40 50 L 10 75 L 10 15 z
+			M 22.5 25 A 7.5 7.5 0 0 0 15 32.5 A 7.5 7.5 0 0 0 22.5 40 A 7.5 7.5 0 0 0 30 32.5 A 7.5 7.5 0 0 0 22.5 25 z 
+		`);
+    }
     makeTextIcon(textStyle) {
         var _a, _b;
         const icon = document.createElementNS(svgNamespace, 'svg');

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

@@ -7,6 +7,11 @@ export interface ToolbarLocalization {
     filledRectanglePen: string;
     linePen: string;
     arrowPen: string;
+    image: string;
+    inputAltText: string;
+    chooseFile: string;
+    cancel: string;
+    submit: string;
     freehandPen: string;
     pressureSensitiveFreehandPen: string;
     selectObjectType: string;
@@ -27,9 +32,12 @@ export interface ToolbarLocalization {
     resetView: string;
     selectionToolKeyboardShortcuts: string;
     paste: string;
+    errorImageHasZeroSize: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;
     colorChangedAnnouncement: (color: string) => string;
+    imageSize: (size: number, units: string) => string;
+    imageLoadError: (message: string) => string;
 }
 export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -4,6 +4,11 @@ export const defaultToolbarLocalization = {
     select: 'Select',
     handTool: 'Pan',
     zoom: 'Zoom',
+    image: 'Image',
+    inputAltText: 'Alt text: ',
+    chooseFile: 'Choose file: ',
+    submit: 'Submit',
+    cancel: 'Cancel',
     resetView: 'Reset view',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
@@ -31,4 +36,7 @@ export const defaultToolbarLocalization = {
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,
     colorChangedAnnouncement: (color) => `Color changed to ${color}`,
+    imageSize: (size, units) => `Image size: ${size} ${units}`,
+    errorImageHasZeroSize: 'Error: Image has zero size',
+    imageLoadError: (message) => `Error loading image: ${message}`,
 };

package/dist/src/toolbar/widgets/InsertImageWidget.d.ts

@@ -0,0 +1,19 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+export default class InsertImageWidget extends ActionButtonWidget {
+    private imageSelectionOverlay;
+    private imagePreview;
+    private imageFileInput;
+    private imageAltTextInput;
+    private statusView;
+    private imageBase64URL;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    private static nextInputId;
+    private fillOverlay;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private clearInputs;
+    private onClicked;
+}

package/dist/src/toolbar/widgets/InsertImageWidget.js

@@ -0,0 +1,169 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import ImageComponent from '../../components/ImageComponent';
+import Erase from '../../commands/Erase';
+import EditorImage from '../../EditorImage';
+import { SelectionTool, uniteCommands } from '../../lib';
+import Mat33 from '../../math/Mat33';
+import fileToBase64 from '../../util/fileToBase64';
+import ActionButtonWidget from './ActionButtonWidget';
+export default class InsertImageWidget extends ActionButtonWidget {
+    constructor(editor, localization) {
+        localization !== null && localization !== void 0 ? localization : (localization = editor.localization);
+        super(editor, 'insert-image-widget', () => editor.icons.makeInsertImageIcon(), localization.image, () => this.onClicked());
+        this.imageSelectionOverlay = document.createElement('div');
+        this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
+        this.fillOverlay();
+        this.editor.createHTMLOverlay(this.imageSelectionOverlay);
+        this.imageSelectionOverlay.style.display = 'none';
+    }
+    fillOverlay() {
+        const container = document.createElement('div');
+        const chooseImageRow = document.createElement('div');
+        const altTextRow = document.createElement('div');
+        this.imagePreview = document.createElement('img');
+        this.statusView = document.createElement('div');
+        const actionButtonRow = document.createElement('div');
+        actionButtonRow.classList.add('action-button-row');
+        this.submitButton = document.createElement('button');
+        const cancelButton = document.createElement('button');
+        this.imageFileInput = document.createElement('input');
+        this.imageAltTextInput = document.createElement('input');
+        const imageFileInputLabel = document.createElement('label');
+        const imageAltTextLabel = document.createElement('label');
+        const fileInputId = `insert-image-file-input-${InsertImageWidget.nextInputId++}`;
+        const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+        this.imageFileInput.setAttribute('id', fileInputId);
+        this.imageAltTextInput.setAttribute('id', altTextInputId);
+        imageAltTextLabel.htmlFor = altTextInputId;
+        imageFileInputLabel.htmlFor = fileInputId;
+        this.imageFileInput.accept = 'image/*';
+        imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+        imageFileInputLabel.innerText = this.localizationTable.chooseFile;
+        this.imageFileInput.type = 'file';
+        this.imageAltTextInput.type = 'text';
+        this.statusView.setAttribute('aria-live', 'polite');
+        cancelButton.innerText = this.localizationTable.cancel;
+        this.submitButton.innerText = this.localizationTable.submit;
+        this.imageFileInput.onchange = () => __awaiter(this, void 0, void 0, function* () {
+            if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+                this.imagePreview.style.display = 'none';
+                this.submitButton.disabled = true;
+                return;
+            }
+            this.imagePreview.style.display = 'block';
+            const image = this.imageFileInput.files[0];
+            let data = null;
+            try {
+                data = yield fileToBase64(image);
+            }
+            catch (e) {
+                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            }
+            this.imageBase64URL = data;
+            if (data) {
+                this.imagePreview.src = data;
+                this.submitButton.disabled = false;
+                this.updateImageSizeDisplay();
+            }
+            else {
+                this.submitButton.disabled = true;
+                this.statusView.innerText = '';
+            }
+        });
+        cancelButton.onclick = () => {
+            this.hideDialog();
+        };
+        this.imageSelectionOverlay.onclick = (evt) => {
+            // If clicking on the backdrop
+            if (evt.target === this.imageSelectionOverlay) {
+                this.hideDialog();
+            }
+        };
+        chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+        actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+        container.replaceChildren(chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow);
+        this.imageSelectionOverlay.replaceChildren(container);
+    }
+    hideDialog() {
+        this.imageSelectionOverlay.style.display = 'none';
+    }
+    updateImageSizeDisplay() {
+        var _a;
+        const imageData = (_a = this.imageBase64URL) !== null && _a !== void 0 ? _a : '';
+        const sizeInKiB = imageData.length / 1024;
+        const sizeInMiB = sizeInKiB / 1024;
+        let units = 'KiB';
+        let size = sizeInKiB;
+        if (sizeInMiB >= 1) {
+            size = sizeInMiB;
+            units = 'MiB';
+        }
+        this.statusView.innerText = this.localizationTable.imageSize(Math.round(size), units);
+    }
+    clearInputs() {
+        this.imageFileInput.value = '';
+        this.imageAltTextInput.value = '';
+        this.imagePreview.style.display = 'none';
+        this.submitButton.disabled = true;
+        this.statusView.innerText = '';
+    }
+    onClicked() {
+        var _a;
+        this.imageSelectionOverlay.style.display = '';
+        this.clearInputs();
+        this.imageFileInput.focus();
+        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+        let editingImage = null;
+        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
+            editingImage = selectedObjects[0];
+            this.imageAltTextInput.value = (_a = editingImage.getAltText()) !== null && _a !== void 0 ? _a : '';
+            this.imagePreview.style.display = 'block';
+            this.submitButton.disabled = false;
+            this.imageBase64URL = editingImage.getURL();
+            this.imagePreview.src = this.imageBase64URL;
+            this.updateImageSizeDisplay();
+        }
+        else {
+            selectionTools.forEach(tool => tool.clearSelection());
+        }
+        this.submitButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+            var _b;
+            if (!this.imageBase64URL) {
+                return;
+            }
+            const image = new Image();
+            image.src = this.imageBase64URL;
+            image.setAttribute('alt', this.imageAltTextInput.value);
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            if (component.getBBox().area === 0) {
+                this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                return;
+            }
+            this.imageSelectionOverlay.style.display = 'none';
+            if (editingImage) {
+                const eraseCommand = new Erase([editingImage]);
+                yield this.editor.dispatch(uniteCommands([
+                    EditorImage.addElement(component),
+                    component.transformBy(editingImage.getTransformation()),
+                    component.setZIndex(editingImage.getZIndex()),
+                    eraseCommand,
+                ]));
+                (_b = selectionTools[0]) === null || _b === void 0 ? void 0 : _b.setSelection([component]);
+            }
+            else {
+                yield this.editor.addAndCenterComponents([component]);
+            }
+        });
+    }
+}
+InsertImageWidget.nextInputId = 0;

package/dist/src/toolbar/widgets/lib.d.ts

@@ -6,3 +6,4 @@ export { default as TextToolWidget } from './TextToolWidget';
 export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
+export { default as InsertImageWidget } from './InsertImageWidget';

package/dist/src/toolbar/widgets/lib.js

@@ -6,3 +6,4 @@ export { default as TextToolWidget } from './TextToolWidget';
 export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
+export { default as InsertImageWidget } from './InsertImageWidget';

package/dist/src/tools/PanZoom.js

@@ -202,10 +202,20 @@ export default class PanZoom extends BaseTool {
             && this.velocity !== null
             && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
+            const oldVelocity = this.velocity;
             // If the user drags the screen, then stops, then lifts the pointer,
             // we want the final velocity to reflect the stop at the end (so the velocity
             // should be near zero). Handle this:
             this.updateVelocity(event.current.screenPos);
+            // Work around an input issue. Some devices that disable the touchscreen when a stylus
+            // comes near the screen fire a touch-end event at the position of the stylus when a
+            // touch gesture is canceled. Because the stylus is often far away from the last touch,
+            // this causes a great displacement between the second-to-last (from the touchscreen) and
+            // last (from the pen that is now near the screen) events. Only allow velocity to decrease
+            // to work around this:
+            if (oldVelocity.magnitude() < this.velocity.magnitude()) {
+                this.velocity = oldVelocity;
+            }
             // Cancel any ongoing inertial scrolling.
             (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
             this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {