js-draw 1.9.1 → 1.11.0

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

@@ -152,27 +152,51 @@ class PenToolWidget extends BaseToolWidget_1.default {
             },
         };
     }
-    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 = `${constants_1.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', `${constants_1.toolbarCSSPrefix}-pen-tool-toggle-buttons`);
+        const addToggleButton = (labelText, icon) => {
+            const button = document.createElement('button');
+            button.classList.add(`${constants_1.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);
             }
         };
     }
@@ -194,20 +218,22 @@ class PenToolWidget extends BaseToolWidget_1.default {
         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) {
@@ -237,6 +263,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
             thickness: this.tool.getThickness(),
             strokeFactoryId: this.getCurrentPenType()?.id,
             inputStabilization: !!this.tool.getInputMapper(),
+            strokeAutocorrect: this.tool.getStrokeAutocorrectionEnabled(),
         };
     }
     deserializeFrom(state) {
@@ -267,7 +294,10 @@ class PenToolWidget extends BaseToolWidget_1.default {
             }
         }
         if (state.inputStabilization !== undefined) {
-            this.setInputStabilizationEnabled(!!state.inputStabilization);
+            this.tool.setHasStabilization(!!state.inputStabilization);
+        }
+        if (state.strokeAutocorrect !== undefined) {
+            this.tool.setStrokeAutocorrectEnabled(!!state.strokeAutocorrect);
         }
     }
 }

package/dist/cjs/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/cjs/toolbar/widgets/keybindings.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveKeyboardShortcut = exports.selectStrokeTypeKeyboardShortcutIds = exports.resizeImageToSelectionKeyboardShortcut = void 0;
+exports.exitKeyboardShortcut = exports.saveKeyboardShortcut = exports.selectStrokeTypeKeyboardShortcutIds = exports.resizeImageToSelectionKeyboardShortcut = void 0;
 const KeyboardShortcutManager_1 = __importDefault(require("../../shortcuts/KeyboardShortcutManager"));
 // Selection
 exports.resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
@@ -17,3 +17,6 @@ for (let i = 0; i < exports.selectStrokeTypeKeyboardShortcutIds.length; i++) {
 // Save
 exports.saveKeyboardShortcut = 'jsdraw.toolbar.SaveActionWidget.save';
 KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.saveKeyboardShortcut, ['ctrlOrMeta+KeyS'], 'Save');
+// Exit
+exports.exitKeyboardShortcut = 'jsdraw.toolbar.ExitActionWidget.exit';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.exitKeyboardShortcut, ['Alt+KeyQ'], 'Exit');

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

package/dist/cjs/tools/Pen.js

@@ -13,6 +13,7 @@ const keybindings_1 = require("./keybindings");
 const keybindings_2 = require("./keybindings");
 const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
 const ReactiveValue_1 = require("../util/ReactiveValue");
+const StationaryPenDetector_1 = __importDefault(require("./util/StationaryPenDetector"));
 class Pen extends BaseTool_1.default {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -21,6 +22,11 @@ class Pen extends BaseTool_1.default {
         this.lastPoint = null;
         this.startPoint = null;
         this.currentDeviceType = null;
+        this.shapeAutocompletionEnabled = false;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
+        this.removedAutocorrectedShapeTime = 0;
+        this.stationaryDetector = null;
         this.styleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
             factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
             color: math_1.Color4.blue,
@@ -58,7 +64,14 @@ class Pen extends BaseTool_1.default {
     // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
     previewStroke() {
         this.editor.clearWetInk();
-        this.builder?.preview(this.editor.display.getWetInkRenderer());
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        if (this.autocorrectedShape) {
+            const visibleRect = this.editor.viewport.visibleRect;
+            this.autocorrectedShape.render(wetInkRenderer, visibleRect);
+        }
+        else {
+            this.builder?.preview(wetInkRenderer);
+        }
     }
     // Throws if no stroke builder exists.
     addPointToStroke(point) {
@@ -87,6 +100,19 @@ class Pen extends BaseTool_1.default {
             this.startPoint = this.toStrokePoint(current);
             this.builder = this.style.factory(this.startPoint, this.editor.viewport);
             this.currentDeviceType = current.device;
+            if (this.shapeAutocompletionEnabled) {
+                const stationaryDetectionConfig = {
+                    maxSpeed: 5,
+                    maxRadius: 10,
+                    minTimeSeconds: 0.5, // s
+                };
+                this.stationaryDetector = new StationaryPenDetector_1.default(current, stationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
+            }
+            else {
+                this.stationaryDetector = null;
+            }
+            this.lastAutocorrectedShape = null;
+            this.removedAutocorrectedShapeTime = 0;
             return true;
         }
         return false;
@@ -114,7 +140,14 @@ class Pen extends BaseTool_1.default {
             return;
         if (current.device !== this.currentDeviceType)
             return;
-        this.addPointToStroke(this.toStrokePoint(current));
+        const isStationary = this.stationaryDetector?.onPointerMove(current);
+        if (!isStationary) {
+            this.addPointToStroke(this.toStrokePoint(current));
+            if (this.autocorrectedShape) {
+                this.removedAutocorrectedShapeTime = performance.now();
+                this.autocorrectedShape = null;
+            }
+        }
     }
     onPointerUp({ current }) {
         if (!this.builder)
@@ -124,6 +157,7 @@ class Pen extends BaseTool_1.default {
             // device type.
             return true;
         }
+        this.stationaryDetector?.onPointerUp(current);
         // onPointerUp events can have zero pressure. Use the last pressure instead.
         const currentPoint = this.toStrokePoint(current);
         const strokePoint = {
@@ -139,10 +173,42 @@ class Pen extends BaseTool_1.default {
     onGestureCancel() {
         this.builder = null;
         this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
+    }
+    removedAutocorrectedShapeRecently() {
+        return this.removedAutocorrectedShapeTime > performance.now() - 320;
+    }
+    async autocorrectShape(_lastPointer) {
+        if (!this.builder || !this.builder.autocorrectShape)
+            return;
+        if (!this.shapeAutocompletionEnabled)
+            return;
+        // If already corrected, do nothing
+        if (this.autocorrectedShape)
+            return;
+        // Activate stroke fitting
+        const correctedShape = await this.builder.autocorrectShape();
+        if (!this.builder || !correctedShape) {
+            return;
+        }
+        // Don't complete to empty shapes.
+        const bboxArea = correctedShape.getBBox().area;
+        if (bboxArea === 0 || !isFinite(bboxArea)) {
+            return;
+        }
+        this.autocorrectedShape = correctedShape;
+        this.lastAutocorrectedShape = correctedShape;
+        this.previewStroke();
     }
     finalizeStroke() {
         if (this.builder) {
-            const stroke = this.builder.build();
+            // If autocorrectedShape was cleared recently enough, it was
+            // probably by mistake. Reset it.
+            if (this.lastAutocorrectedShape && this.removedAutocorrectedShapeRecently()) {
+                this.autocorrectedShape = this.lastAutocorrectedShape;
+            }
+            const stroke = this.autocorrectedShape ?? this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
                 const canFlatten = true;
@@ -155,7 +221,11 @@ class Pen extends BaseTool_1.default {
         }
         this.builder = null;
         this.lastPoint = null;
+        this.autocorrectedShape = null;
+        this.lastAutocorrectedShape = null;
         this.editor.clearWetInk();
+        this.stationaryDetector?.destroy();
+        this.stationaryDetector = null;
     }
     noteUpdated() {
         this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
@@ -201,6 +271,15 @@ class Pen extends BaseTool_1.default {
         }
         this.noteUpdated();
     }
+    setStrokeAutocorrectEnabled(enabled) {
+        if (enabled !== this.shapeAutocompletionEnabled) {
+            this.shapeAutocompletionEnabled = enabled;
+            this.noteUpdated();
+        }
+    }
+    getStrokeAutocorrectionEnabled() {
+        return this.shapeAutocompletionEnabled;
+    }
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.style.factory; }

package/dist/cjs/tools/SelectionTool/Selection.d.ts

@@ -2,6 +2,7 @@
  * @internal
  * @packageDocumentation
  */
+import SerializableCommand from '../../commands/SerializableCommand';
 import Editor from '../../Editor';
 import { Mat33, Rect2, Point2 } from '@js-draw/math';
 import Pointer from '../../Pointer';
@@ -36,7 +37,10 @@ export default class Selection {
     getScreenRegion(): Rect2;
     get screenRegionRotation(): number;
     setTransform(transform: Mat33, preview?: boolean): void;
+    private getDeltaZIndexToMoveSelectionToTop;
     finalizeTransform(): void | Promise<void>;
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack(): SerializableCommand | null;
     private static ApplyTransformationCommand;
     private previewTransformCmds;
     resolveToObjects(): boolean;

package/dist/cjs/tools/SelectionTool/Selection.js

@@ -41,6 +41,7 @@ const Duplicate_1 = __importDefault(require("../../commands/Duplicate"));
 const TransformMode_1 = require("./TransformMode");
 const types_1 = require("./types");
 const EditorImage_1 = __importDefault(require("../../image/EditorImage"));
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
 const updateChunkSize = 100;
 const maxPreviewElemCount = 500;
 // @internal
@@ -51,6 +52,7 @@ class Selection {
         // @see getTightBoundingBox
         this.selectionTightBoundingBox = null;
         this.transform = math_1.Mat33.identity;
+        // invariant: sorted by increasing z-index
         this.selectedElems = [];
         this.hasParent = true;
         // Maps IDs to whether we removed the component from the image
@@ -161,6 +163,16 @@ class Selection {
             this.previewTransformCmds();
         }
     }
+    getDeltaZIndexToMoveSelectionToTop() {
+        if (this.selectedElems.length === 0) {
+            return 0;
+        }
+        const selectedBottommostZIndex = this.selectedElems[0].getZIndex();
+        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.region);
+        const topMostVisibleZIndex = visibleObjects[visibleObjects.length - 1]?.getZIndex() ?? selectedBottommostZIndex;
+        const deltaZIndex = (topMostVisibleZIndex + 1) - selectedBottommostZIndex;
+        return deltaZIndex;
+    }
     // Applies the current transformation to the selection
     finalizeTransform() {
         const fullTransform = this.transform;
@@ -169,17 +181,35 @@ class Selection {
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = math_1.Mat33.identity;
         this.scrollTo();
+        let transformPromise = undefined;
         // Make the commands undo-able.
         // Don't check for non-empty transforms because this breaks changing the
         // z-index of the just-transformed commands.
-        //
-        // TODO: Check whether the selectedElems are already all toplevel.
-        const transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform));
+        if (this.selectedElems.length > 0) {
+            const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
+            transformPromise = this.editor.dispatch(new _a.ApplyTransformationCommand(this, selectedElems, fullTransform, deltaZIndex));
+        }
         // Clear renderings of any in-progress transformations
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         return transformPromise;
     }
+    /** Sends all selected elements to the bottom of the visible image. */
+    sendToBack() {
+        const visibleObjects = this.editor.image.getElementsIntersectingRegion(this.editor.viewport.visibleRect);
+        // VisibleObjects and selectedElems should both be sorted by z-index
+        const lowestVisibleZIndex = visibleObjects[0]?.getZIndex() ?? 0;
+        const highestSelectedZIndex = this.selectedElems[this.selectedElems.length - 1]?.getZIndex() ?? 0;
+        const targetHighestZIndex = lowestVisibleZIndex - 1;
+        const deltaZIndex = targetHighestZIndex - highestSelectedZIndex;
+        if (deltaZIndex !== 0) {
+            const commands = this.selectedElems.map(elem => {
+                return elem.setZIndex(elem.getZIndex() + deltaZIndex);
+            });
+            return (0, uniteCommands_1.default)(commands, updateChunkSize);
+        }
+        return null;
+    }
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
         if (this.selectedElems.length === 0) {
@@ -193,7 +223,7 @@ class Selection {
         const wetInkRenderer = this.editor.display.getWetInkRenderer();
         wetInkRenderer.clear();
         wetInkRenderer.pushTransform(this.transform);
-        const viewportVisibleRect = this.editor.viewport.visibleRect;
+        const viewportVisibleRect = this.editor.viewport.visibleRect.union(this.region);
         const visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
         for (const elem of this.selectedElems) {
             elem.render(wetInkRenderer, visibleRect);
@@ -439,7 +469,8 @@ class Selection {
         if (wasTransforming) {
             // Don't update the selection's focus when redoing/undoing
             const selectionToUpdate = null;
-            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+            const deltaZIndex = this.getDeltaZIndexToMoveSelectionToTop();
+            tmpApplyCommand = new _a.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform, deltaZIndex);
             // Transform to ensure that the duplicates are in the correct location
             await tmpApplyCommand.apply(this.editor);
             // Show items again
@@ -480,6 +511,8 @@ class Selection {
         this.originalRegion = bbox;
         this.selectionTightBoundingBox = bbox;
         this.selectedElems = objects.filter(object => object.isSelectable());
+        // Enforce increasing z-index invariant
+        this.selectedElems.sort((a, b) => a.getZIndex() - b.getZIndex());
         this.padRegion();
         this.updateUI();
     }
@@ -493,7 +526,8 @@ _a = Selection;
         // The selection box is lost when serializing/deserializing. No need to store box rotation
         const fullTransform = new math_1.Mat33(...json.transform);
         const elemIds = (json.elems ?? []);
-        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform);
+        const deltaZIndex = parseInt(json.deltaZIndex ?? 0);
+        return new _a.ApplyTransformationCommand(null, elemIds, fullTransform, deltaZIndex);
     });
 })();
 Selection.ApplyTransformationCommand = class extends SerializableCommand_1.default {
@@ -501,10 +535,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
     // If a `string[]`, selectedElems is a list of element IDs.
     selectedElems, 
     // Full transformation used to transform elements.
-    fullTransform) {
+    fullTransform, deltaZIndex) {
         super('selection-tool-transform');
         this.selection = selection;
         this.fullTransform = fullTransform;
+        this.deltaZIndex = deltaZIndex;
         const isIDList = (arr) => {
             return typeof arr[0] === 'string';
         };
@@ -515,11 +550,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         else {
             this.selectedElemIds = selectedElems.map(elem => elem.getId());
             this.transformCommands = selectedElems.map(elem => {
-                return elem.transformBy(this.fullTransform);
+                return elem.setZIndexAndTransformBy(this.fullTransform, elem.getZIndex() + deltaZIndex);
             });
         }
     }
-    resolveToElems(editor) {
+    resolveToElems(editor, isUndoing) {
         if (this.transformCommands) {
             return;
         }
@@ -528,11 +563,19 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
             if (!elem) {
                 throw new Error(`Unable to find element with ID, ${id}.`);
             }
-            return elem.transformBy(this.fullTransform);
+            let originalZIndex = elem.getZIndex();
+            let targetZIndex = elem.getZIndex() + this.deltaZIndex;
+            // If the command has already been applied, the element should currently
+            // have the target z-index.
+            if (isUndoing) {
+                targetZIndex = elem.getZIndex();
+                originalZIndex = elem.getZIndex() - this.deltaZIndex;
+            }
+            return elem.setZIndexAndTransformBy(this.fullTransform, targetZIndex, originalZIndex);
         });
     }
     async apply(editor) {
-        this.resolveToElems(editor);
+        this.resolveToElems(editor, false);
         this.selection?.setTransform(this.fullTransform, false);
         this.selection?.updateUI();
         await editor.asyncApplyCommands(this.transformCommands, updateChunkSize);
@@ -541,7 +584,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         this.selection?.updateUI();
     }
     async unapply(editor) {
-        this.resolveToElems(editor);
+        this.resolveToElems(editor, true);
         this.selection?.setTransform(this.fullTransform.inverse(), false);
         this.selection?.updateUI();
         await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
@@ -553,6 +596,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand_1.defau
         return {
             elems: this.selectedElemIds,
             transform: this.fullTransform.toArray(),
+            deltaZIndex: this.deltaZIndex,
         };
     }
     description(_editor, localizationTable) {

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

@@ -28,6 +28,7 @@ export default class SelectionTool extends BaseTool {
     private onSelectionUpdated;
     private zoomToSelection;
     private static handleableKeys;
+    private hasUnfinalizedTransformFromKeyPress;
     onKeyPress(event: KeyPressEvent): boolean;
     onKeyUp(evt: KeyUpEvent): boolean;
     onCopy(event: CopyEvent): boolean;

package/dist/cjs/tools/SelectionTool/SelectionTool.js

@@ -27,6 +27,9 @@ class SelectionTool extends BaseTool_1.default {
         this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
         this.lastSelectedObjects = [];
+        // Whether the last keypress corresponded to an action that didn't transform the
+        // selection (and thus does not need to be finalized on onKeyUp).
+        this.hasUnfinalizedTransformFromKeyPress = false;
         this.autoscroller = new ToPointerAutoscroller_1.default(editor.viewport, (scrollBy) => {
             editor.dispatch(Viewport_1.default.transformBy(math_1.Mat33.translation(scrollBy)), false);
             // Update the selection box/content to match the new viewport.
@@ -219,7 +222,8 @@ class SelectionTool extends BaseTool_1.default {
             this.snapToGrid = true;
             return true;
         }
-        if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event)) {
+        if (this.selectionBox && (shortcucts.matchesShortcut(keybindings_1.duplicateSelectionShortcut, event)
+            || shortcucts.matchesShortcut(keybindings_1.sendToBackSelectionShortcut, event))) {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
             return true;
@@ -303,6 +307,8 @@ class SelectionTool extends BaseTool_1.default {
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
             this.selectionBox.scrollTo();
+            // The transformation needs to be finalized at some point (on key up)
+            this.hasUnfinalizedTransformFromKeyPress = true;
         }
         if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
             this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
@@ -328,12 +334,24 @@ class SelectionTool extends BaseTool_1.default {
             });
             return true;
         }
+        if (this.selectionBox && shortcucts.matchesShortcut(keybindings_1.sendToBackSelectionShortcut, evt)) {
+            const sendToBackCommand = this.selectionBox.sendToBack();
+            if (sendToBackCommand) {
+                this.editor.dispatch(sendToBackCommand);
+            }
+            return true;
+        }
         if (evt.key === 'Shift') {
             this.shiftKeyPressed = false;
             return true;
         }
+        // If we don't need to finalize the transform
+        if (!this.hasUnfinalizedTransformFromKeyPress) {
+            return true;
+        }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
+            this.hasUnfinalizedTransformFromKeyPress = false;
             return true;
         }
         return false;

package/dist/cjs/tools/TextTool.js

@@ -44,6 +44,10 @@ class TextTool extends BaseTool_1.default {
 			.${overlayCSSClass} {
 				height: 0;
 				overflow: visible;
+
+				/* Allows absolutely-positioned textareas to scroll with
+				   the containing overlay. */
+				position: relative;
 			}
 
 			.${overlayCSSClass} textarea {
@@ -126,7 +130,7 @@ class TextTool extends BaseTool_1.default {
         this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
         this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
         this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
-        this.textInputElem.style.position = 'relative';
+        this.textInputElem.style.position = 'absolute';
         this.textInputElem.style.left = `${textScreenPos.x}px`;
         this.textInputElem.style.top = `${textScreenPos.y}px`;
         this.textInputElem.style.margin = '0';

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

@@ -7,7 +7,6 @@ import BaseTool from './BaseTool';
  *
  * This is in the default set of {@link ToolController} tools.
  *
- * @deprecated This may be replaced in the future.
  */
 export default class ToolSwitcherShortcut extends BaseTool {
     private editor;

package/dist/cjs/tools/ToolSwitcherShortcut.js

@@ -10,7 +10,6 @@ const BaseTool_1 = __importDefault(require("./BaseTool"));
  *
  * This is in the default set of {@link ToolController} tools.
  *
- * @deprecated This may be replaced in the future.
  */
 class ToolSwitcherShortcut extends BaseTool_1.default {
     constructor(editor) {

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

@@ -15,3 +15,4 @@ export declare const zoomInKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomIn";
 export declare const zoomOutKeyboardShortcutId = "jsdraw.tools.PanZoom.zoomOut";
 export declare const selectAllKeyboardShortcut = "jsdraw.tools.SelectionTool.selectAll";
 export declare const duplicateSelectionShortcut = "jsdraw.tools.SelectionTool.duplicateSelection";
+export declare const sendToBackSelectionShortcut = "jsdraw.tools.SelectionTool.sendToBack";

package/dist/cjs/tools/keybindings.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.duplicateSelectionShortcut = exports.selectAllKeyboardShortcut = exports.zoomOutKeyboardShortcutId = exports.zoomInKeyboardShortcutId = exports.rotateCounterClockwiseKeyboardShortcutId = exports.rotateClockwiseKeyboardShortcutId = exports.moveDownKeyboardShortcutId = exports.moveUpKeyboardShortcutId = exports.moveRightKeyboardShortcutId = exports.moveLeftKeyboardShortcutId = exports.toggleFindVisibleShortcutId = exports.lineLockKeyboardShortcutId = exports.snapToGridKeyboardShortcutId = exports.decreaseSizeKeyboardShortcutId = exports.increaseSizeKeyboardShortcutId = exports.redoKeyboardShortcutId = exports.undoKeyboardShortcutId = void 0;
+exports.sendToBackSelectionShortcut = exports.duplicateSelectionShortcut = exports.selectAllKeyboardShortcut = exports.zoomOutKeyboardShortcutId = exports.zoomInKeyboardShortcutId = exports.rotateCounterClockwiseKeyboardShortcutId = exports.rotateClockwiseKeyboardShortcutId = exports.moveDownKeyboardShortcutId = exports.moveUpKeyboardShortcutId = exports.moveRightKeyboardShortcutId = exports.moveLeftKeyboardShortcutId = exports.toggleFindVisibleShortcutId = exports.lineLockKeyboardShortcutId = exports.snapToGridKeyboardShortcutId = exports.decreaseSizeKeyboardShortcutId = exports.increaseSizeKeyboardShortcutId = exports.redoKeyboardShortcutId = exports.undoKeyboardShortcutId = void 0;
 const KeyboardShortcutManager_1 = __importDefault(require("../shortcuts/KeyboardShortcutManager"));
 // This file contains user-overridable tool-realted keybindings.
 // Undo/redo
@@ -45,3 +45,5 @@ exports.selectAllKeyboardShortcut = 'jsdraw.tools.SelectionTool.selectAll';
 KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.selectAllKeyboardShortcut, ['CtrlOrMeta+KeyA'], 'Select all');
 exports.duplicateSelectionShortcut = 'jsdraw.tools.SelectionTool.duplicateSelection';
 KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.duplicateSelectionShortcut, ['CtrlOrMeta+KeyD'], 'Duplicate selection');
+exports.sendToBackSelectionShortcut = 'jsdraw.tools.SelectionTool.sendToBack';
+KeyboardShortcutManager_1.default.registerDefaultKeyboardShortcut(exports.sendToBackSelectionShortcut, ['End'], 'Send to back');