js-draw 1.9.1 → 1.11.0

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/BaseWidget.mjs

@@ -47,7 +47,7 @@ class BaseWidget {
         this.layoutManager = defaultLayoutManager;
         this.icon = null;
         this.container = document.createElement('div');
-        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`, `${toolbarCSSPrefix}toolButtonContainer`);
+        this.container.classList.add(`${toolbarCSSPrefix}toolContainer`, `${toolbarCSSPrefix}toolButtonContainer`, `${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/mjs/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/mjs/toolbar/widgets/ExitActionWidget.mjs

@@ -0,0 +1,27 @@
+import  ActionButtonWidget  from './ActionButtonWidget.mjs';
+import  { ToolbarWidgetTag }  from './BaseWidget.mjs';
+import  { exitKeyboardShortcut }  from './keybindings.mjs';
+class ExitActionWidget extends ActionButtonWidget {
+    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([ToolbarWidgetTag.Exit]);
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(exitKeyboardShortcut, event)) {
+            this.clickAction();
+            return true;
+        }
+        return super.onKeyPress(event);
+    }
+    mustBeInToplevelMenu() {
+        return true;
+    }
+}
+export default ExitActionWidget;

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

@@ -96,34 +96,45 @@ class HandModeWidget extends BaseWidget {
 }
 export default class HandToolWidget extends BaseToolWidget {
     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, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
-        const rotationLockWidget = new HandModeWidget(editor, overridePanZoomTool, PanZoomMode.RotationLocked, () => this.editor.icons.makeRotationLockIcon(), localizationTable.lockRotation, localizationTable);
+        const touchPanningWidget = new HandModeWidget(editor, this.overridePanZoomTool, PanZoomMode.OneFingerTouchGestures, () => this.editor.icons.makeTouchPanningIcon(), localizationTable.touchPanning, localizationTable);
+        const rotationLockWidget = new HandModeWidget(editor, this.overridePanZoomTool, 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);
         const primaryPanZoomTool = primaryPanZoomToolList[0];
         return primaryPanZoomTool;
     }
+    static getOverrideHandTool(toolController) {
+        const panZoomToolList = toolController.getMatchingTools(PanZoom);
+        const panZoomTool = panZoomToolList[0];
+        return panZoomTool;
+    }
+    shouldAutoDisableInReadOnlyEditor() {
+        return false;
+    }
     getTitle() {
         return this.localizationTable.handTool;
     }

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.12; // 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,
                 ]));

package/dist/mjs/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;
     };

package/dist/mjs/toolbar/widgets/PenToolWidget.mjs

@@ -147,27 +147,51 @@ class PenToolWidget extends BaseToolWidget {
             },
         };
     }
-    setInputStabilizationEnabled(enabled) {
-        this.tool.setHasStabilization(enabled);
-    }
-    createStabilizationOption() {
-        const stabilizationOption = document.createElement('div');
-        const stabilizationCheckbox = document.createElement('input');
-        const stabilizationLabel = document.createElement('label');
-        stabilizationLabel.innerText = this.localizationTable.inputStabilization;
-        stabilizationCheckbox.type = 'checkbox';
-        stabilizationCheckbox.id = `${toolbarCSSPrefix}-penInputStabilizationCheckbox-${PenToolWidget.idCounter++}`;
-        stabilizationLabel.htmlFor = stabilizationCheckbox.id;
-        stabilizationOption.replaceChildren(stabilizationLabel, stabilizationCheckbox);
-        stabilizationCheckbox.oninput = () => {
-            this.setInputStabilizationEnabled(stabilizationCheckbox.checked);
+    createStrokeCorrectionOptions() {
+        const container = document.createElement('div');
+        container.classList.add('action-button-row', `${toolbarCSSPrefix}-pen-tool-toggle-buttons`);
+        const addToggleButton = (labelText, icon) => {
+            const button = document.createElement('button');
+            button.classList.add(`${toolbarCSSPrefix}-toggle-button`);
+            const iconElement = icon.cloneNode(true);
+            iconElement.classList.add('icon');
+            const label = document.createElement('span');
+            label.innerText = labelText;
+            button.replaceChildren(iconElement, label);
+            button.setAttribute('role', 'switch');
+            container.appendChild(button);
+            let checked = false;
+            let onChangeListener = (_checked) => { };
+            const result = {
+                setChecked(newChecked) {
+                    checked = newChecked;
+                    button.setAttribute('aria-checked', `${checked}`);
+                    onChangeListener(checked);
+                },
+                setOnInputListener(listener) {
+                    onChangeListener = listener;
+                },
+            };
+            button.onclick = () => {
+                result.setChecked(!checked);
+            };
+            return result;
         };
+        const stabilizationOption = addToggleButton(this.localizationTable.inputStabilization, this.editor.icons.makeStrokeSmoothingIcon());
+        stabilizationOption.setOnInputListener(enabled => {
+            this.tool.setHasStabilization(enabled);
+        });
+        const autocorrectOption = addToggleButton(this.localizationTable.strokeAutocorrect, this.editor.icons.makeShapeAutocorrectIcon());
+        autocorrectOption.setOnInputListener(enabled => {
+            this.tool.setStrokeAutocorrectEnabled(enabled);
+        });
         return {
             update: () => {
-                stabilizationCheckbox.checked = !!this.tool.getInputMapper();
+                stabilizationOption.setChecked(!!this.tool.getInputMapper());
+                autocorrectOption.setChecked(this.tool.getStrokeAutocorrectionEnabled());
             },
             addTo: (parent) => {
-                parent.appendChild(stabilizationOption);
+                parent.appendChild(container);
             }
         };
     }
@@ -189,20 +213,22 @@ class PenToolWidget extends BaseToolWidget {
         colorLabel.setAttribute('for', colorInput.id);
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInputContainer);
-        const stabilizationOption = this.createStabilizationOption();
+        const toggleButtonRow = this.createStrokeCorrectionOptions();
         this.updateInputs = () => {
             setColorInputValue(this.tool.getColor());
             setThickness(this.tool.getThickness());
             penTypeSelect.updateIcons();
             // Update the selected stroke factory.
             penTypeSelect.setValue(this.getCurrentPenTypeIdx());
-            stabilizationOption.update();
+            toggleButtonRow.update();
         };
         this.updateInputs();
         container.replaceChildren(colorRow, thicknessRow);
         penTypeSelect.addTo(container);
-        stabilizationOption.addTo(container);
         dropdown.replaceChildren(container);
+        // Add the toggle button row *outside* of the main content (use different
+        // spacing with respect to the sides of the container).
+        toggleButtonRow.addTo(dropdown);
         return true;
     }
     onKeyPress(event) {
@@ -232,6 +258,7 @@ class PenToolWidget extends BaseToolWidget {
             thickness: this.tool.getThickness(),
             strokeFactoryId: this.getCurrentPenType()?.id,
             inputStabilization: !!this.tool.getInputMapper(),
+            strokeAutocorrect: this.tool.getStrokeAutocorrectionEnabled(),
         };
     }
     deserializeFrom(state) {
@@ -262,7 +289,10 @@ class PenToolWidget extends BaseToolWidget {
             }
         }
         if (state.inputStabilization !== undefined) {
-            this.setInputStabilizationEnabled(!!state.inputStabilization);
+            this.tool.setHasStabilization(!!state.inputStabilization);
+        }
+        if (state.strokeAutocorrect !== undefined) {
+            this.tool.setStrokeAutocorrectEnabled(!!state.strokeAutocorrect);
         }
     }
 }

package/dist/mjs/toolbar/widgets/keybindings.d.ts

@@ -1,3 +1,4 @@
 export declare const resizeImageToSelectionKeyboardShortcut = "jsdraw.toolbar.SelectionTool.resizeImageToSelection";
 export declare const selectStrokeTypeKeyboardShortcutIds: string[];
 export declare const saveKeyboardShortcut = "jsdraw.toolbar.SaveActionWidget.save";
+export declare const exitKeyboardShortcut = "jsdraw.toolbar.ExitActionWidget.exit";

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -11,3 +11,6 @@ for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
 // Save
 export const saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(saveKeyboardShortcut, ['ctrlOrMeta+KeyS'], 'Save');
+// Exit
+export const exitKeyboardShortcut = 'jsdraw.toolbar.ExitActionWidget.exit';
+KeyboardShortcutManager.registerDefaultKeyboardShortcut(exitKeyboardShortcut, ['Alt+KeyQ'], 'Exit');

package/dist/mjs/toolbar/widgets/layout/types.d.ts

@@ -1,4 +1,4 @@
-import ReactiveValue from 'js-draw/src/util/ReactiveValue';
+import ReactiveValue from '../../../util/ReactiveValue';
 /**
  * A class that manages whether/what content is shown for a widget.
  *

package/dist/mjs/tools/Pen.d.ts

@@ -19,6 +19,11 @@ export default class Pen extends BaseTool {
     private currentDeviceType;
     private styleValue;
     private style;
+    private shapeAutocompletionEnabled;
+    private autocorrectedShape;
+    private lastAutocorrectedShape;
+    private removedAutocorrectedShapeTime;
+    private stationaryDetector;
     constructor(editor: Editor, description: string, style: Partial<PenStyle>);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
@@ -30,12 +35,16 @@ export default class Pen extends BaseTool {
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): boolean;
     onGestureCancel(): void;
+    private removedAutocorrectedShapeRecently;
+    private autocorrectShape;
     private finalizeStroke;
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
     setStrokeFactory(factory: ComponentBuilderFactory): void;
     setHasStabilization(hasStabilization: boolean): void;
+    setStrokeAutocorrectEnabled(enabled: boolean): void;
+    getStrokeAutocorrectionEnabled(): boolean;
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;