js-draw 1.9.0 → 1.10.0

package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.mjs

@@ -0,0 +1,166 @@
+import { Rect2, LineSegment2 } from '@js-draw/math';
+const makeShapeFitAutocorrect = (sourceFactory) => {
+    return (startPoint, viewport) => {
+        return new ShapeFitBuilder(sourceFactory, startPoint, viewport);
+    };
+};
+export default makeShapeFitAutocorrect;
+const makeLineTemplate = (startPoint, points, _bbox) => {
+    const templatePoints = [
+        startPoint,
+        points[points.length - 1],
+    ];
+    return { points: templatePoints, };
+};
+const makeRectangleTemplate = (_startPoint, _points, bbox) => {
+    return { points: [...bbox.corners, bbox.corners[0]], };
+};
+class ShapeFitBuilder {
+    constructor(sourceFactory, startPoint, viewport) {
+        this.sourceFactory = sourceFactory;
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.builder = sourceFactory(startPoint, viewport);
+        this.points = [startPoint];
+    }
+    getBBox() {
+        return this.builder.getBBox();
+    }
+    build() {
+        return this.builder.build();
+    }
+    preview(renderer) {
+        this.builder.preview(renderer);
+    }
+    addPoint(point) {
+        this.points.push(point);
+        this.builder.addPoint(point);
+    }
+    async autocorrectShape() {
+        // Use screen points so that autocorrected shapes rotate with the screen.
+        const startPoint = this.viewport.canvasToScreen(this.startPoint.pos);
+        const points = this.points.map(point => this.viewport.canvasToScreen(point.pos));
+        const bbox = Rect2.bboxOf(points);
+        const snappedStartPoint = this.viewport.canvasToScreen(this.viewport.snapToGrid(this.startPoint.pos));
+        const snappedPoints = this.points.map(point => this.viewport.canvasToScreen(this.viewport.snapToGrid(point.pos)));
+        const snappedBBox = Rect2.bboxOf(snappedPoints);
+        // Only fit larger shapes
+        if (bbox.maxDimension < 32) {
+            return null;
+        }
+        const maxError = Math.min(30, bbox.maxDimension / 4);
+        // Create templates
+        const templates = [
+            {
+                ...makeLineTemplate(snappedStartPoint, snappedPoints, snappedBBox),
+                toleranceMultiplier: 0.5,
+            },
+            makeLineTemplate(startPoint, points, bbox),
+            {
+                ...makeRectangleTemplate(snappedStartPoint, snappedPoints, snappedBBox),
+                toleranceMultiplier: 0.6,
+            },
+            makeRectangleTemplate(startPoint, points, bbox),
+        ];
+        // Find a good fit fit
+        const selectTemplate = (maximumAllowedError) => {
+            for (const template of templates) {
+                const templatePoints = template.points;
+                // Maximum square error to accept the template
+                const acceptMaximumSquareError = maximumAllowedError * maximumAllowedError * (template.toleranceMultiplier ?? 1);
+                // Gets the point at index, wrapping the the start of the template if
+                // outside the array of points.
+                const templateAt = (index) => {
+                    while (index < 0) {
+                        index += templatePoints.length;
+                    }
+                    index %= templatePoints.length;
+                    return templatePoints[index];
+                };
+                let closestToFirst = null;
+                let closestToFirstSqrDist = Infinity;
+                let templateStartIndex = 0;
+                // Find the closest point to the startPoint
+                for (let i = 0; i < templatePoints.length; i++) {
+                    const current = templatePoints[i];
+                    const currentSqrDist = current.minus(startPoint).magnitudeSquared();
+                    if (!closestToFirst || currentSqrDist < closestToFirstSqrDist) {
+                        closestToFirstSqrDist = currentSqrDist;
+                        closestToFirst = current;
+                        templateStartIndex = i;
+                    }
+                }
+                // Walk through the points and find the maximum error
+                let maximumSqrError = 0;
+                let templateIndex = templateStartIndex;
+                for (const point of points) {
+                    let minimumCurrentSqrError = Infinity;
+                    let minimumErrorAtIndex = templateIndex;
+                    const windowRadius = 6;
+                    for (let i = -windowRadius; i <= windowRadius; i++) {
+                        const index = templateIndex + i;
+                        const prevTemplatePoint = templateAt(index - 1);
+                        const currentTemplatePoint = templateAt(index);
+                        const nextTemplatePoint = templateAt(index + 1);
+                        const prevToCurrent = new LineSegment2(prevTemplatePoint, currentTemplatePoint);
+                        const currentToNext = new LineSegment2(currentTemplatePoint, nextTemplatePoint);
+                        const prevToCurrentDist = prevToCurrent.distance(point);
+                        const nextToCurrentDist = currentToNext.distance(point);
+                        const error = Math.min(prevToCurrentDist, nextToCurrentDist);
+                        const squareError = error * error;
+                        if (squareError < minimumCurrentSqrError) {
+                            minimumCurrentSqrError = squareError;
+                            minimumErrorAtIndex = index;
+                        }
+                    }
+                    templateIndex = minimumErrorAtIndex;
+                    maximumSqrError = Math.max(minimumCurrentSqrError, maximumSqrError);
+                    if (maximumSqrError > acceptMaximumSquareError) {
+                        break;
+                    }
+                }
+                if (maximumSqrError < acceptMaximumSquareError) {
+                    return templatePoints;
+                }
+            }
+            return null;
+        };
+        const template = selectTemplate(maxError);
+        if (!template) {
+            return null;
+        }
+        const lastDataPoint = this.points[this.points.length - 1];
+        const startWidth = this.startPoint.width;
+        const endWidth = lastDataPoint.width;
+        const startColor = this.startPoint.color;
+        const endColor = lastDataPoint.color;
+        const startTime = this.startPoint.time;
+        const endTime = lastDataPoint.time;
+        const templateIndexToStrokeDataPoint = (index) => {
+            const prevPoint = template[Math.max(0, Math.floor(index))];
+            const nextPoint = template[Math.min(Math.ceil(index), template.length - 1)];
+            const point = prevPoint.lerp(nextPoint, index - Math.floor(index));
+            const fractionToEnd = index / template.length;
+            return {
+                pos: this.viewport.screenToCanvas(point),
+                width: startWidth * (1 - fractionToEnd) + endWidth * fractionToEnd,
+                color: startColor.mix(endColor, fractionToEnd),
+                time: startTime * (1 - fractionToEnd) + endTime * fractionToEnd,
+            };
+        };
+        const builder = this.sourceFactory(templateIndexToStrokeDataPoint(0), this.viewport);
+        // Prevent the original builder from doing stroke smoothing if the template is short
+        // enough to likely have sharp corners.
+        const preventSmoothing = template.length < 10;
+        for (let i = 0; i < template.length; i++) {
+            if (preventSmoothing) {
+                builder.addPoint(templateIndexToStrokeDataPoint(i - 0.001));
+            }
+            builder.addPoint(templateIndexToStrokeDataPoint(i));
+            if (preventSmoothing) {
+                builder.addPoint(templateIndexToStrokeDataPoint(i + 0.001));
+            }
+        }
+        return builder.build();
+    }
+}

package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.d.ts

@@ -0,0 +1,3 @@
+import { ComponentBuilderFactory } from '../types';
+declare const makeSnapToGridAutocorrect: (sourceFactory: ComponentBuilderFactory) => ComponentBuilderFactory;
+export default makeSnapToGridAutocorrect;

package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.mjs

@@ -0,0 +1,44 @@
+const makeSnapToGridAutocorrect = (sourceFactory) => {
+    return (startPoint, viewport) => {
+        return new SnapToGridAutocompleteBuilder(sourceFactory, startPoint, viewport);
+    };
+};
+export default makeSnapToGridAutocorrect;
+class SnapToGridAutocompleteBuilder {
+    constructor(sourceFactory, startPoint, viewport) {
+        this.sourceFactory = sourceFactory;
+        this.startPoint = startPoint;
+        this.viewport = viewport;
+        this.builder = sourceFactory(startPoint, viewport);
+        this.points = [startPoint];
+    }
+    getBBox() {
+        return this.builder.getBBox();
+    }
+    build() {
+        return this.builder.build();
+    }
+    preview(renderer) {
+        this.builder.preview(renderer);
+    }
+    addPoint(point) {
+        this.points.push(point);
+        this.builder.addPoint(point);
+    }
+    async autocorrectShape() {
+        const snapToGrid = (point) => {
+            return {
+                ...point,
+                pos: this.viewport.snapToGrid(point.pos),
+            };
+        };
+        // Use screen points so that snapped shapes rotate with the screen.
+        const startPoint = snapToGrid(this.startPoint);
+        const builder = this.sourceFactory(startPoint, this.viewport);
+        const points = this.points.map(point => snapToGrid(point));
+        for (const point of points) {
+            builder.addPoint(point);
+        }
+        return builder.build();
+    }
+}

package/dist/mjs/components/builders/types.d.ts

@@ -7,6 +7,7 @@ export interface ComponentBuilder {
     getBBox(): Rect2;
     build(): AbstractComponent;
     preview(renderer: AbstractRenderer): void;
+    autocorrectShape?: () => Promise<AbstractComponent | null>;
     addPoint(point: StrokeDataPoint): void;
 }
 export type ComponentBuilderFactory = (startPoint: StrokeDataPoint, viewport: Viewport) => ComponentBuilder;

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

@@ -87,6 +87,9 @@ export default class EditorImage {
      * rendered onto the main rendering canvas instead of doing a full re-render.
      *
      * @see {@link Display.flatten}
+     *
+     * @example
+     * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
     static addElement(elem: AbstractComponent, applyByFlattening?: boolean): SerializableCommand;
     /** @see EditorImage.addElement */
@@ -105,8 +108,36 @@ export default class EditorImage {
      * autoresize (if it was previously enabled).
      */
     setImportExportRect(imageRect: Rect2): SerializableCommand;
+    /** @see {@link setAutoresizeEnabled} */
     getAutoresizeEnabled(): boolean;
-    /** Returns a `Command` that sets whether the image should autoresize. */
+    /**
+     * Returns a `Command` that sets whether the image should autoresize when
+     * {@link AbstractComponent}s are added/removed.
+     *
+     * @example
+     *
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     * const toolbar = editor.addToolbar();
+     *
+     * // Add a save button to demonstrate what the output looks like
+     * // (it should change size to fit whatever was drawn)
+     * toolbar.addSaveButton(() => {
+     *   document.body.replaceChildren(editor.toSVG({ sanitize: true }));
+     * });
+     *
+     * // Actually using setAutoresizeEnabled:
+     * //
+     * // To set autoresize without announcing for accessibility/making undoable
+     * const addToHistory = false;
+     * editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), addToHistory);
+     *
+     * // Add to undo history **and** announce for accessibility
+     * //editor.dispatch(editor.image.setAutoresizeEnabled(true), true);
+     * ```
+     */
     setAutoresizeEnabled(autoresize: boolean): Command;
     private setAutoresizeEnabledDirectly;
     /** Updates the size/position of the viewport */

package/dist/mjs/image/EditorImage.mjs

@@ -180,6 +180,9 @@ class EditorImage {
      * rendered onto the main rendering canvas instead of doing a full re-render.
      *
      * @see {@link Display.flatten}
+     *
+     * @example
+     * [[include:doc-pages/inline-examples/adding-a-stroke.md]]
      */
     static addElement(elem, applyByFlattening = false) {
         return new _a.AddElementCommand(elem, applyByFlattening);
@@ -207,10 +210,38 @@ class EditorImage {
     setImportExportRect(imageRect) {
         return _a.SetImportExportRectCommand.of(this, imageRect, false);
     }
+    /** @see {@link setAutoresizeEnabled} */
     getAutoresizeEnabled() {
         return this.shouldAutoresizeExportViewport;
     }
-    /** Returns a `Command` that sets whether the image should autoresize. */
+    /**
+     * Returns a `Command` that sets whether the image should autoresize when
+     * {@link AbstractComponent}s are added/removed.
+     *
+     * @example
+     *
+     * ```ts,runnable
+     * import { Editor } from 'js-draw';
+     *
+     * const editor = new Editor(document.body);
+     * const toolbar = editor.addToolbar();
+     *
+     * // Add a save button to demonstrate what the output looks like
+     * // (it should change size to fit whatever was drawn)
+     * toolbar.addSaveButton(() => {
+     *   document.body.replaceChildren(editor.toSVG({ sanitize: true }));
+     * });
+     *
+     * // Actually using setAutoresizeEnabled:
+     * //
+     * // To set autoresize without announcing for accessibility/making undoable
+     * const addToHistory = false;
+     * editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), addToHistory);
+     *
+     * // Add to undo history **and** announce for accessibility
+     * //editor.dispatch(editor.image.setAutoresizeEnabled(true), true);
+     * ```
+     */
     setAutoresizeEnabled(autoresize) {
         if (autoresize === this.shouldAutoresizeExportViewport) {
             return Command.empty;

package/dist/mjs/rendering/Display.mjs

@@ -132,6 +132,9 @@ export default class Display {
                 // Ensure correct drawing operations on high-resolution screens.
                 // See
                 // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#scaling_for_high_resolution_displays
+                //
+                // This scaling causes the rendering contexts to automatically convert
+                // between screen coordinates and pixel coordinates.
                 wetInkCtx.resetTransform();
                 dryInkCtx.resetTransform();
                 dryInkCtx.scale(this.devicePixelRatio, this.devicePixelRatio);
@@ -150,7 +153,11 @@ export default class Display {
             dryInkCtx.restore();
         };
         this.getColorAt = (screenPos) => {
-            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            // getImageData isn't affected by a transformation matrix -- we need to
+            // pre-transform screenPos to convert it from screen coordinates into pixel
+            // coordinates.
+            const adjustedScreenPos = screenPos.times(this.devicePixelRatio);
+            const pixel = dryInkCtx.getImageData(adjustedScreenPos.x, adjustedScreenPos.y, 1, 1);
             const data = pixel?.data;
             if (data) {
                 const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);

package/dist/mjs/rendering/RenderablePathSpec.d.ts

@@ -6,11 +6,15 @@ interface RenderablePathSpec {
     style: RenderingStyle;
     path?: Path;
 }
-interface RenderablePathSpecWithPath extends RenderablePathSpec {
+export interface RenderablePathSpecWithPath extends RenderablePathSpec {
     path: Path;
 }
 /** Converts a renderable path (a path with a `startPoint`, `commands`, and `style`). */
 export declare const pathFromRenderable: (renderable: RenderablePathSpec) => Path;
+/**
+ * Converts `path` into a format that can be rendered (by passing to a {@link Stroke} constructor
+ * or directly to an {@link AbstractRenderer.drawPath}).
+ */
 export declare const pathToRenderable: (path: Path, style: RenderingStyle) => RenderablePathSpecWithPath;
 interface RectangleSimplificationResult {
     rectangle: Rect2;

package/dist/mjs/rendering/RenderablePathSpec.mjs

@@ -6,6 +6,10 @@ export const pathFromRenderable = (renderable) => {
     }
     return new Path(renderable.startPoint, renderable.commands);
 };
+/**
+ * Converts `path` into a format that can be rendered (by passing to a {@link Stroke} constructor
+ * or directly to an {@link AbstractRenderer.drawPath}).
+ */
 export const pathToRenderable = (path, style) => {
     return {
         startPoint: path.startPoint,

package/dist/mjs/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/mjs/toolbar/IconProvider.mjs

@@ -644,6 +644,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/mjs/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/mjs/toolbar/localization.mjs

@@ -7,6 +7,8 @@ export const 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',
@@ -37,7 +39,8 @@ export const defaultToolbarLocalization = {
     enableAutoresizeOption: 'Auto-resize',
     toggleOverflow: 'More',
     about: 'About',
-    inputStabilization: 'Input stabilization',
+    inputStabilization: 'Stabilization',
+    strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
     flatTipPen: 'Flat',

package/dist/mjs/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/mjs/toolbar/widgets/InsertImageWidget.mjs

@@ -9,10 +9,48 @@ import  BaseWidget  from './BaseWidget.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  makeFileInput  from './components/makeFileInput.mjs';
+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 {
     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(EditorEventType.SelectionUpdated, event => {
@@ -46,6 +84,7 @@ class InsertImageWidget extends BaseWidget {
         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');
@@ -60,9 +99,8 @@ class InsertImageWidget extends BaseWidget {
         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';
@@ -74,18 +112,13 @@ class InsertImageWidget extends BaseWidget {
             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);
@@ -93,11 +126,27 @@ class InsertImageWidget extends BaseWidget {
         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';
@@ -106,7 +155,27 @@ class InsertImageWidget extends BaseWidget {
             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.25; // MiB
+        if (sizeInMiB > largeImageThreshold) {
+            this.statusView.appendChild(decreaseSizeButton);
+        }
+        else if (this.image?.isChanged()) {
+            this.statusView.appendChild(resetSizeButton);
+        }
     }
     updateInputs() {
         const resetInputs = () => {
@@ -126,11 +195,8 @@ class InsertImageWidget extends BaseWidget {
         if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
             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.
@@ -144,13 +210,21 @@ class InsertImageWidget extends BaseWidget {
             }
         };
         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.fromImage(image, Mat33.identity);
+            let component;
+            try {
+                component = await ImageComponent.fromImage(image, 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;
@@ -158,9 +232,15 @@ class InsertImageWidget extends BaseWidget {
             this.hideDialog();
             if (editingImage) {
                 const eraseCommand = new Erase([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 = Mat33.scaling2D(originalWidth / newWidth);
                 await this.editor.dispatch(uniteCommands([
                     EditorImage.addElement(component),
-                    component.transformBy(editingImage.getTransformation()),
+                    component.transformBy(originalTransform.rightMul(widthAdjustTransform)),
                     component.setZIndex(editingImage.getZIndex()),
                     eraseCommand,
                 ]));