js-draw 1.9.1 → 1.11.0

package/dist/cjs/toolbar/AbstractToolbar.js

@@ -35,6 +35,7 @@ const DocumentPropertiesWidget_1 = __importDefault(require("./widgets/DocumentPr
 const math_1 = require("@js-draw/math");
 const constants_1 = require("./constants");
 const SaveActionWidget_1 = __importDefault(require("./widgets/SaveActionWidget"));
+const ExitActionWidget_1 = __importDefault(require("./widgets/ExitActionWidget"));
 class AbstractToolbar {
     /** @internal */
     constructor(editor, localizationTable = localization_1.defaultToolbarLocalization) {
@@ -297,14 +298,13 @@ class AbstractToolbar {
      */
     addSaveButton(saveCallback, labelOverride = {}) {
         const widget = new SaveActionWidget_1.default(this.editor, this.localizationTable, saveCallback, labelOverride);
-        widget.setTags([BaseWidget_1.ToolbarWidgetTag.Save]);
         this.addWidget(widget);
         return widget;
     }
     /**
      * Adds an "Exit" button that, when clicked, calls `exitCallback`.
      *
-     * **Note**: This is roughly equivalent to
+     * **Note**: This is *roughly* equivalent to
      * ```ts
      * toolbar.addTaggedActionButton([ ToolbarWidgetTag.Exit ], {
      *   label: this.editor.localization.exit,
@@ -321,15 +321,9 @@ class AbstractToolbar {
      * @final
      */
     addExitButton(exitCallback, labelOverride = {}) {
-        return this.addTaggedActionButton([BaseWidget_1.ToolbarWidgetTag.Exit], {
-            label: this.editor.localization.exit,
-            icon: this.editor.icons.makeCloseIcon(),
-            ...labelOverride,
-        }, () => {
-            exitCallback();
-        }, {
-            autoDisableInReadOnlyEditors: false,
-        });
+        const widget = new ExitActionWidget_1.default(this.editor, this.localizationTable, exitCallback, labelOverride);
+        this.addWidget(widget);
+        return widget;
     }
     /**
      * Adds undo and redo buttons that trigger the editor's built-in undo and redo
@@ -377,27 +371,49 @@ class AbstractToolbar {
         });
     }
     /**
-     * Adds toolbar widgets based on the enabled tools.
+     * Adds widgets for pen/eraser/selection/text/pan-zoom primary tools.
+     *
+     * If `filter` returns `false` for a tool, no widget is added for that tool.
+     * See {@link addDefaultToolWidgets}
      */
-    addDefaultToolWidgets() {
-        const toolController = this.editor.toolController;
-        for (const tool of toolController.getMatchingTools(Pen_1.default)) {
-            const widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
-            this.addWidget(widget);
-        }
-        for (const tool of toolController.getMatchingTools(Eraser_1.default)) {
-            this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(SelectionTool_1.default)) {
-            this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        for (const tool of toolController.getMatchingTools(TextTool_1.default)) {
-            this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
-        }
-        const panZoomTool = toolController.getMatchingTools(PanZoom_1.default)[0];
-        if (panZoomTool) {
-            this.addWidget(new HandToolWidget_1.default(this.editor, panZoomTool, this.localizationTable));
+    addWidgetsForPrimaryTools(filter) {
+        for (const tool of this.editor.toolController.getPrimaryTools()) {
+            if (filter && !filter?.(tool)) {
+                continue;
+            }
+            if (tool instanceof Pen_1.default) {
+                const widget = new PenToolWidget_1.default(this.editor, tool, this.localizationTable);
+                this.addWidget(widget);
+            }
+            else if (tool instanceof Eraser_1.default) {
+                this.addWidget(new EraserToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof SelectionTool_1.default) {
+                this.addWidget(new SelectionToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof TextTool_1.default) {
+                this.addWidget(new TextToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
+            else if (tool instanceof PanZoom_1.default) {
+                this.addWidget(new HandToolWidget_1.default(this.editor, tool, this.localizationTable));
+            }
         }
+    }
+    /**
+     * Adds toolbar widgets based on the enabled tools, and additional tool-like
+     * buttons (e.g. {@link DocumentPropertiesWidget} and {@link InsertImageWidget}).
+     */
+    addDefaultToolWidgets() {
+        this.addWidgetsForPrimaryTools();
+        this.addDefaultEditorControlWidgets();
+    }
+    /**
+     * Adds widgets that don't correspond to tools, but do allow the user to control
+     * the editor in some way.
+     *
+     * By default, this includes {@link DocumentPropertiesWidget} and {@link InsertImageWidget}.
+     */
+    addDefaultEditorControlWidgets() {
         this.addWidget(new DocumentPropertiesWidget_1.default(this.editor, this.localizationTable));
         this.addWidget(new InsertImageWidget_1.default(this.editor, this.localizationTable));
     }

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

@@ -51,6 +51,8 @@ export default class IconProvider {
     makePenIcon(penStyle: PenStyle): IconElemType;
     makeIconFromFactory(penStyle: PenStyle): IconElemType;
     makePipetteIcon(color?: Color4): IconElemType;
+    makeShapeAutocorrectIcon(): IconElemType;
+    makeStrokeSmoothingIcon(): IconElemType;
     /** Unused. @deprecated */
     makeFormatSelectionIcon(): IconElemType;
     makeResizeImageToSelectionIcon(): IconElemType;

package/dist/cjs/toolbar/IconProvider.js

@@ -649,6 +649,23 @@ class IconProvider {
         icon.setAttribute('viewBox', '5 -40 140 140');
         return icon;
     }
+    makeShapeAutocorrectIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        return this.makeIconFromPath(`
+			m 79.129476,33.847107 9.967823,-0.03218 v 55 h -55 l 0.03218,-9.96782
+			M 71.1,40.8 a 30,30 0 0 1 -30,30 30,30 0 0 1 -30,-30 30,30 0 0 1 30,-30 30,30 0 0 1 30,30 L 71.1,40.8
+			M 34.1,58.8 v -25 h 25 v 0
+		`, fill, strokeColor, '7px');
+    }
+    makeStrokeSmoothingIcon() {
+        const fill = 'none';
+        const strokeColor = 'var(--icon-color)';
+        return this.makeIconFromPath(`
+			m 31,83.2 c -50,0 30,-65 -20,-65
+			M 75,17.3 40,59.7 38.2,77.6 55.5,72.4 90.5,30 Z
+		`, fill, strokeColor, '7px');
+    }
     /** Unused. @deprecated */
     makeFormatSelectionIcon() {
         return this.makeIconFromPath(`

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

@@ -10,6 +10,8 @@ export interface ToolbarLocalization {
     arrowPen: string;
     image: string;
     inputAltText: string;
+    decreaseImageSize: string;
+    resetImage: string;
     chooseFile: string;
     dragAndDropHereOrBrowse: string;
     cancel: string;
@@ -48,6 +50,7 @@ export interface ToolbarLocalization {
     toggleOverflow: string;
     about: string;
     inputStabilization: string;
+    strokeAutocorrect: string;
     errorImageHasZeroSize: string;
     closeSidebar: (toolName: string) => string;
     dropdownShown: (toolName: string) => string;

package/dist/cjs/toolbar/localization.js

@@ -10,6 +10,8 @@ exports.defaultToolbarLocalization = {
     image: 'Image',
     reformatSelection: 'Format selection',
     inputAltText: 'Alt text',
+    decreaseImageSize: 'Decrease size',
+    resetImage: 'Reset',
     chooseFile: 'Choose file',
     dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
@@ -40,7 +42,8 @@ exports.defaultToolbarLocalization = {
     enableAutoresizeOption: 'Auto-resize',
     toggleOverflow: 'More',
     about: 'About',
-    inputStabilization: 'Input stabilization',
+    inputStabilization: 'Stabilization',
+    strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
     flatTipPen: 'Flat',

package/dist/cjs/toolbar/widgets/BaseWidget.js

@@ -53,7 +53,7 @@ class BaseWidget {
         this.layoutManager = defaultLayoutManager;
         this.icon = null;
         this.container = document.createElement('div');
-        this.container.classList.add(`${constants_1.toolbarCSSPrefix}toolContainer`, `${constants_1.toolbarCSSPrefix}toolButtonContainer`);
+        this.container.classList.add(`${constants_1.toolbarCSSPrefix}toolContainer`, `${constants_1.toolbarCSSPrefix}toolButtonContainer`, `${constants_1.toolbarCSSPrefix}internalWidgetId--${id.replace(/[^a-zA-Z0-9_]/g, '-')}`);
         this.dropdownContent = document.createElement('div');
         __classPrivateFieldSet(this, _BaseWidget_hasDropdown, false, "f");
         this.button = document.createElement('div');

package/dist/cjs/toolbar/widgets/ExitActionWidget.d.ts

@@ -0,0 +1,12 @@
+import { KeyPressEvent } from '../../inputEvents';
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import ActionButtonWidget from './ActionButtonWidget';
+import { ActionButtonIcon } from '../types';
+declare class ExitActionWidget extends ActionButtonWidget {
+    constructor(editor: Editor, localization: ToolbarLocalization, saveCallback: () => void, labelOverride?: Partial<ActionButtonIcon>);
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
+    protected onKeyPress(event: KeyPressEvent): boolean;
+    mustBeInToplevelMenu(): boolean;
+}
+export default ExitActionWidget;

package/dist/cjs/toolbar/widgets/ExitActionWidget.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const ActionButtonWidget_1 = __importDefault(require("./ActionButtonWidget"));
+const BaseWidget_1 = require("./BaseWidget");
+const keybindings_1 = require("./keybindings");
+class ExitActionWidget extends ActionButtonWidget_1.default {
+    constructor(editor, localization, saveCallback, labelOverride = {}) {
+        super(editor, 'exit-button', 
+        // Creates an icon
+        () => {
+            return labelOverride.icon ?? editor.icons.makeCloseIcon();
+        }, labelOverride.label ?? localization.exit, saveCallback);
+        this.setTags([BaseWidget_1.ToolbarWidgetTag.Exit]);
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(keybindings_1.exitKeyboardShortcut, event)) {
+            this.clickAction();
+            return true;
+        }
+        return super.onKeyPress(event);
+    }
+    mustBeInToplevelMenu() {
+        return true;
+    }
+}
+exports.default = ExitActionWidget;

package/dist/cjs/toolbar/widgets/HandToolWidget.d.ts

@@ -4,11 +4,12 @@ import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class HandToolWidget extends BaseToolWidget {
-    protected overridePanZoomTool: PanZoom;
     private allowTogglingBaseTool;
-    constructor(editor: Editor, overridePanZoomTool: PanZoom, localizationTable: ToolbarLocalization);
-    protected shouldAutoDisableInReadOnlyEditor(): boolean;
+    protected overridePanZoomTool: PanZoom;
+    constructor(editor: Editor, tool: PanZoom, localizationTable: ToolbarLocalization);
     private static getPrimaryHandTool;
+    private static getOverrideHandTool;
+    protected shouldAutoDisableInReadOnlyEditor(): boolean;
     protected getTitle(): string;
     protected createIcon(): Element;
     protected handleClick(): void;

package/dist/cjs/toolbar/widgets/HandToolWidget.js

@@ -124,34 +124,45 @@ class HandModeWidget extends BaseWidget_1.default {
 }
 class HandToolWidget extends BaseToolWidget_1.default {
     constructor(editor, 
-    // Pan zoom tool that overrides all other tools (enabling this tool for a device
-    // causes that device to pan/zoom instead of interact with the primary tools)
-    overridePanZoomTool, localizationTable) {
-        const primaryHandTool = HandToolWidget.getPrimaryHandTool(editor.toolController);
-        const tool = primaryHandTool ?? overridePanZoomTool;
-        super(editor, tool, 'hand-tool-widget', localizationTable);
-        this.overridePanZoomTool = overridePanZoomTool;
+    // Can either be the primary pan/zoom tool (in the primary tools list) or
+    // the override pan/zoom tool.
+    // If the override pan/zoom tool, the primary will be gotten from the editor's
+    // tool controller.
+    // If the primary, the override will be gotten from the editor's tool controller.
+    tool, localizationTable) {
+        const isGivenToolPrimary = editor.toolController.getPrimaryTools().includes(tool);
+        const primaryTool = (isGivenToolPrimary ? tool : HandToolWidget.getPrimaryHandTool(editor.toolController))
+            ?? tool;
+        super(editor, primaryTool, 'hand-tool-widget', localizationTable);
+        this.overridePanZoomTool =
+            (isGivenToolPrimary ? HandToolWidget.getOverrideHandTool(editor.toolController) : tool)
+                ?? tool;
         // Only allow toggling a hand tool if we're using the primary hand tool and not the override
         // hand tool for this button.
-        this.allowTogglingBaseTool = primaryHandTool !== null;
+        this.allowTogglingBaseTool = primaryTool !== null;
         // Allow showing/hiding the dropdown, even if `overridePanZoomTool` isn't enabled.
         if (!this.allowTogglingBaseTool) {
             this.container.classList.add('dropdownShowable');
         }
         // Controls for the overriding hand tool.
-        const touchPanningWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoom_1.PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
         this.addSubWidget(touchPanningWidget);
         this.addSubWidget(rotationLockWidget);
     }
-    shouldAutoDisableInReadOnlyEditor() {
-        return false;
-    }
     static getPrimaryHandTool(toolController) {
         const primaryPanZoomToolList = toolController.getPrimaryTools().filter(tool => tool instanceof PanZoom_1.default);
         const primaryPanZoomTool = primaryPanZoomToolList[0];
         return primaryPanZoomTool;
     }
+    static getOverrideHandTool(toolController) {
+        const panZoomToolList = toolController.getMatchingTools(PanZoom_1.default);
+        const panZoomTool = panZoomToolList[0];
+        return panZoomTool;
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     getTitle() {
         return this.localizationTable.handTool;
     }

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

@@ -3,10 +3,10 @@ import { ToolbarLocalization } from '../localization';
 import BaseWidget from './BaseWidget';
 export default class InsertImageWidget extends BaseWidget {
     private imagePreview;
+    private image;
     private selectedFiles;
     private imageAltTextInput;
     private statusView;
-    private imageBase64URL;
     private submitButton;
     constructor(editor: Editor, localization?: ToolbarLocalization);
     protected getTitle(): string;
@@ -15,6 +15,7 @@ export default class InsertImageWidget extends BaseWidget {
     protected handleClick(): void;
     private static nextInputId;
     protected fillDropdown(dropdown: HTMLElement): boolean;
+    private onImageDataUpdate;
     private hideDialog;
     private updateImageSizeDisplay;
     private updateInputs;

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

@@ -14,10 +14,48 @@ const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 const types_1 = require("../../types");
 const constants_1 = require("../constants");
 const makeFileInput_1 = __importDefault(require("./components/makeFileInput"));
+class ImageWrapper {
+    constructor(imageBase64Url, preview, onUrlUpdate) {
+        this.imageBase64Url = imageBase64Url;
+        this.preview = preview;
+        this.onUrlUpdate = onUrlUpdate;
+        this.originalSrc = imageBase64Url;
+        preview.src = imageBase64Url;
+    }
+    updateImageData(base64DataUrl) {
+        this.preview.src = base64DataUrl;
+        this.imageBase64Url = base64DataUrl;
+        this.onUrlUpdate();
+    }
+    decreaseSize(resizeFactor = 3 / 4) {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.preview.naturalWidth * resizeFactor;
+        canvas.height = this.preview.naturalHeight * resizeFactor;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(this.preview, 0, 0, canvas.width, canvas.height);
+        // JPEG can be much smaller than PNG for the same image size. Prefer it if
+        // the image is already a JPEG.
+        const format = this.originalSrc?.startsWith('data:image/jpeg;') ? 'image/jpeg' : 'image/png';
+        this.updateImageData(canvas.toDataURL(format));
+    }
+    reset() {
+        this.updateImageData(this.originalSrc);
+    }
+    isChanged() {
+        return this.imageBase64Url !== this.originalSrc;
+    }
+    getBase64Url() {
+        return this.imageBase64Url;
+    }
+    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
+        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
+    }
+}
 class InsertImageWidget extends BaseWidget_1.default {
     constructor(editor, localization) {
         localization ??= editor.localization;
         super(editor, 'insert-image-widget', localization);
+        this.image = null;
         // Make the dropdown showable
         this.container.classList.add('dropdownShowable');
         editor.notifier.on(types_1.EditorEventType.SelectionUpdated, event => {
@@ -51,6 +89,7 @@ class InsertImageWidget extends BaseWidget_1.default {
         this.statusView = document.createElement('div');
         const actionButtonRow = document.createElement('div');
         actionButtonRow.classList.add('action-button-row');
+        this.statusView.classList.add('insert-image-image-status-view');
         this.submitButton = document.createElement('button');
         this.selectedFiles = selectedFiles;
         this.imageAltTextInput = document.createElement('input');
@@ -65,9 +104,8 @@ class InsertImageWidget extends BaseWidget_1.default {
         this.submitButton.innerText = this.localizationTable.submit;
         this.selectedFiles.onUpdateAndNow(async (files) => {
             if (files.length === 0) {
-                this.imagePreview.style.display = 'none';
-                this.submitButton.disabled = true;
-                this.submitButton.style.display = 'none';
+                this.image = null;
+                this.onImageDataUpdate();
                 return;
             }
             this.imagePreview.style.display = 'block';
@@ -79,18 +117,13 @@ class InsertImageWidget extends BaseWidget_1.default {
             catch (e) {
                 this.statusView.innerText = this.localizationTable.imageLoadError(e);
             }
-            this.imageBase64URL = data;
             if (data) {
-                this.imagePreview.src = data;
-                this.submitButton.disabled = false;
-                this.submitButton.style.display = '';
-                this.updateImageSizeDisplay();
+                this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
             }
             else {
-                this.submitButton.disabled = true;
-                this.submitButton.style.display = 'none';
-                this.statusView.innerText = '';
+                this.image = null;
             }
+            this.onImageDataUpdate();
         });
         altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
         actionButtonRow.replaceChildren(this.submitButton);
@@ -98,11 +131,27 @@ class InsertImageWidget extends BaseWidget_1.default {
         dropdown.replaceChildren(container);
         return true;
     }
+    onImageDataUpdate() {
+        const base64Data = this.image?.getBase64Url();
+        if (base64Data) {
+            this.submitButton.disabled = false;
+            this.submitButton.style.display = '';
+            this.imagePreview.style.display = '';
+            this.updateImageSizeDisplay();
+        }
+        else {
+            this.submitButton.disabled = true;
+            this.submitButton.style.display = 'none';
+            this.statusView.innerText = '';
+            this.imagePreview.style.display = 'none';
+            this.submitButton.disabled = true;
+        }
+    }
     hideDialog() {
         this.setDropdownVisible(false);
     }
     updateImageSizeDisplay() {
-        const imageData = this.imageBase64URL ?? '';
+        const imageData = this.image?.getBase64Url() ?? '';
         const sizeInKiB = imageData.length / 1024;
         const sizeInMiB = sizeInKiB / 1024;
         let units = 'KiB';
@@ -111,7 +160,27 @@ class InsertImageWidget extends BaseWidget_1.default {
             size = sizeInMiB;
             units = 'MiB';
         }
-        this.statusView.innerText = this.localizationTable.imageSize(Math.round(size), units);
+        const sizeText = document.createElement('span');
+        sizeText.innerText = this.localizationTable.imageSize(Math.round(size), units);
+        // Add a button to allow decreasing the size of large images.
+        const decreaseSizeButton = document.createElement('button');
+        decreaseSizeButton.innerText = this.localizationTable.decreaseImageSize;
+        decreaseSizeButton.onclick = () => {
+            this.image?.decreaseSize();
+        };
+        const resetSizeButton = document.createElement('button');
+        resetSizeButton.innerText = this.localizationTable.resetImage;
+        resetSizeButton.onclick = () => {
+            this.image?.reset();
+        };
+        this.statusView.replaceChildren(sizeText);
+        const largeImageThreshold = 0.12; // MiB
+        if (sizeInMiB > largeImageThreshold) {
+            this.statusView.appendChild(decreaseSizeButton);
+        }
+        else if (this.image?.isChanged()) {
+            this.statusView.appendChild(resetSizeButton);
+        }
     }
     updateInputs() {
         const resetInputs = () => {
@@ -131,11 +200,8 @@ class InsertImageWidget extends BaseWidget_1.default {
         if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent_1.default) {
             editingImage = selectedObjects[0];
             this.imageAltTextInput.value = editingImage.getAltText() ?? '';
-            this.imagePreview.style.display = 'block';
-            this.submitButton.disabled = false;
-            this.imageBase64URL = editingImage.getURL();
-            this.imagePreview.src = this.imageBase64URL;
-            this.updateImageSizeDisplay();
+            this.image = ImageWrapper.fromSrcAndPreview(editingImage.getURL(), this.imagePreview, () => this.onImageDataUpdate());
+            this.onImageDataUpdate();
         }
         else if (selectedObjects.length > 0) {
             // If not, clear the selection.
@@ -149,13 +215,21 @@ class InsertImageWidget extends BaseWidget_1.default {
             }
         };
         this.submitButton.onclick = async () => {
-            if (!this.imageBase64URL) {
+            if (!this.image) {
                 return;
             }
             const image = new Image();
-            image.src = this.imageBase64URL;
+            image.src = this.image.getBase64Url();
             image.setAttribute('alt', this.imageAltTextInput.value);
-            const component = await ImageComponent_1.default.fromImage(image, math_1.Mat33.identity);
+            let component;
+            try {
+                component = await ImageComponent_1.default.fromImage(image, math_1.Mat33.identity);
+            }
+            catch (error) {
+                console.error('Error loading image', error);
+                this.statusView.innerText = this.localizationTable.imageLoadError(error);
+                return;
+            }
             if (component.getBBox().area === 0) {
                 this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
                 return;
@@ -163,9 +237,15 @@ class InsertImageWidget extends BaseWidget_1.default {
             this.hideDialog();
             if (editingImage) {
                 const eraseCommand = new Erase_1.default([editingImage]);
+                // Try to preserve the original width
+                const originalTransform = editingImage.getTransformation();
+                // || 1: Prevent division by zero
+                const originalWidth = editingImage.getBBox().width || 1;
+                const newWidth = component.getBBox().transformedBoundingBox(originalTransform).width || 1;
+                const widthAdjustTransform = math_1.Mat33.scaling2D(originalWidth / newWidth);
                 await this.editor.dispatch((0, uniteCommands_1.default)([
                     EditorImage_1.default.addElement(component),
-                    component.transformBy(editingImage.getTransformation()),
+                    component.transformBy(originalTransform.rightMul(widthAdjustTransform)),
                     component.setZIndex(editingImage.getZIndex()),
                     eraseCommand,
                 ]));

package/dist/cjs/toolbar/widgets/PenToolWidget.d.ts

@@ -24,8 +24,7 @@ export default class PenToolWidget extends BaseToolWidget {
     private createIconForRecord;
     protected createIcon(): Element;
     private createPenTypeSelector;
-    private setInputStabilizationEnabled;
-    protected createStabilizationOption(): {
+    protected createStrokeCorrectionOptions(): {
         update: () => void;
         addTo: (parent: HTMLElement) => void;
     };