js-draw 0.3.1 → 0.4.0

package/src/types.ts

@@ -10,7 +10,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
-import { BaseWidget } from './lib';
+import BaseWidget from './toolbar/widgets/BaseWidget';
 
 
 export interface PointerEvtListener {
@@ -35,7 +35,10 @@ export enum InputEvtType {
 
 	WheelEvt,
 	KeyPressEvent,
-	KeyUpEvent
+	KeyUpEvent,
+
+	CopyEvent,
+	PasteEvent,
 }
 
 // [delta.x] is horizontal scroll,
@@ -59,6 +62,17 @@ export interface KeyUpEvent {
 	readonly ctrlKey: boolean;
 }
 
+export interface CopyEvent {
+	readonly kind: InputEvtType.CopyEvent;
+	setData(mime: string, data: string): void;
+}
+
+export interface PasteEvent {
+	readonly kind: InputEvtType.PasteEvent;
+	readonly data: string;
+	readonly mime: string;
+}
+
 // Event triggered when pointer capture is taken by a different [PointerEvtListener].
 export interface GestureCancelEvt {
 	readonly kind: InputEvtType.GestureCancelEvt;
@@ -82,7 +96,7 @@ export interface PointerUpEvt extends PointerEvtBase {
 }
 
 export type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt;
+export type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
 
 export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 

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

@@ -1,59 +0,0 @@
-import Command from '../commands/Command';
-import Editor from '../Editor';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
-import { Point2, Vec2 } from '../math/Vec2';
-import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
-import BaseTool from './BaseTool';
-declare class Selection {
-    startPoint: Point2;
-    private editor;
-    region: Rect2;
-    private boxRotation;
-    private backgroundBox;
-    private rotateCircle;
-    private selectedElems;
-    private transform;
-    private transformationCommands;
-    constructor(startPoint: Point2, editor: Editor);
-    handleBackgroundDrag(deltaPosition: Vec2): void;
-    handleResizeCornerDrag(deltaPosition: Vec2): void;
-    handleRotateCircleDrag(offset: Vec2): void;
-    private computeTransformCommands;
-    transformPreview(transform: Mat33): void;
-    finalizeTransform(): void;
-    private static ApplyTransformationCommand;
-    private previewTransformCmds;
-    appendBackgroundBoxTo(elem: HTMLElement): void;
-    setToPoint(point: Point2): void;
-    cancelSelection(): void;
-    resolveToObjects(): boolean;
-    recomputeRegion(): boolean;
-    getMinCanvasSize(): number;
-    private recomputeBoxRotation;
-    getSelectedItemCount(): number;
-    updateUI(): void;
-    scrollTo(): void;
-    deleteSelectedObjects(): Command;
-    duplicateSelectedObjects(): Command;
-}
-export default class SelectionTool extends BaseTool {
-    private editor;
-    private handleOverlay;
-    private prevSelectionBox;
-    private selectionBox;
-    constructor(editor: Editor, description: string);
-    onPointerDown(event: PointerEvt): boolean;
-    onPointerMove(event: PointerEvt): void;
-    private onGestureEnd;
-    private zoomToSelection;
-    onPointerUp(event: PointerEvt): void;
-    onGestureCancel(): void;
-    private static handleableKeys;
-    onKeyPress(event: KeyPressEvent): boolean;
-    onKeyUp(evt: KeyUpEvent): boolean;
-    setEnabled(enabled: boolean): void;
-    getSelection(): Selection | null;
-    clearSelection(): void;
-}
-export {};

package/dist/src/tools/SelectionTool.js

@@ -1,589 +0,0 @@
-// Allows users to select/transform portions of the `EditorImage`.
-// With respect to `extend`ing, `SelectionTool` is not stable.
-// @packageDocumentation
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var _a;
-import Duplicate from '../commands/Duplicate';
-import Erase from '../commands/Erase';
-import Mat33 from '../math/Mat33';
-import Rect2 from '../math/Rect2';
-import { Vec2 } from '../math/Vec2';
-import { EditorEventType } from '../types';
-import Viewport from '../Viewport';
-import BaseTool from './BaseTool';
-import SerializableCommand from '../commands/SerializableCommand';
-const handleScreenSize = 30;
-const styles = `
-	.handleOverlay {
-	}
-
-	.handleOverlay > .selectionBox {
-		position: absolute;
-		z-index: 0;
-		transform-origin: center;
-	}
-
-	.handleOverlay > .selectionBox .draggableBackground {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-
-		background-color: var(--secondary-background-color);
-		opacity: 0.8;
-		border: 1px solid var(--primary-background-color);
-	}
-
-	.handleOverlay .resizeCorner {
-		width: ${handleScreenSize}px;
-		height: ${handleScreenSize}px;
-		margin-right: -${handleScreenSize / 2}px;
-		margin-bottom: -${handleScreenSize / 2}px;
-
-		position: absolute;
-		bottom: 0;
-		right: 0;
-
-		opacity: 0.8;
-		background-color: var(--primary-background-color);
-		border: 1px solid var(--primary-foreground-color);
-	}
-
-	.handleOverlay > .selectionBox .rotateCircleContainer {
-		position: absolute;
-		top: 50%;
-		bottom: 50%;
-		left: 50%;
-		right: 50%;
-	}
-
-	.handleOverlay .rotateCircle {
-		width: ${handleScreenSize}px;
-		height: ${handleScreenSize}px;
-		margin-left: -${handleScreenSize / 2}px;
-		margin-top: -${handleScreenSize / 2}px;
-		opacity: 0.8;
-
-		border: 1px solid var(--primary-foreground-color);
-		background-color: var(--primary-background-color);
-		border-radius: 100%;
-	}
-`;
-const makeDraggable = (element, onDrag, onDragEnd) => {
-    element.style.touchAction = 'none';
-    let down = false;
-    // Work around a Safari bug
-    element.addEventListener('touchstart', evt => evt.preventDefault());
-    let lastX;
-    let lastY;
-    element.addEventListener('pointerdown', event => {
-        if (event.isPrimary) {
-            down = true;
-            element.setPointerCapture(event.pointerId);
-            lastX = event.pageX;
-            lastY = event.pageY;
-            return true;
-        }
-        return false;
-    });
-    element.addEventListener('pointermove', event => {
-        if (event.isPrimary && down) {
-            // Safari/iOS doesn't seem to support movementX/movementY on pointer events.
-            // Calculate manually:
-            const delta = Vec2.of(event.pageX - lastX, event.pageY - lastY);
-            onDrag(delta, Vec2.of(event.offsetX, event.offsetY));
-            lastX = event.pageX;
-            lastY = event.pageY;
-            return true;
-        }
-        return false;
-    });
-    const onPointerEnd = (event) => {
-        if (event.isPrimary) {
-            down = false;
-            onDragEnd();
-            return true;
-        }
-        return false;
-    };
-    element.addEventListener('pointerup', onPointerEnd);
-    element.addEventListener('pointercancel', onPointerEnd);
-};
-// Maximum number of strokes to transform without a re-render.
-const updateChunkSize = 100;
-// @internal
-class Selection {
-    constructor(startPoint, editor) {
-        this.startPoint = startPoint;
-        this.editor = editor;
-        this.boxRotation = this.editor.viewport.getRotationAngle();
-        this.selectedElems = [];
-        this.region = Rect2.bboxOf([startPoint]);
-        // Create draggable rectangles
-        this.backgroundBox = document.createElement('div');
-        const draggableBackground = document.createElement('div');
-        const resizeCorner = document.createElement('div');
-        this.rotateCircle = document.createElement('div');
-        const rotateCircleContainer = document.createElement('div');
-        this.backgroundBox.classList.add('selectionBox');
-        draggableBackground.classList.add('draggableBackground');
-        resizeCorner.classList.add('resizeCorner');
-        this.rotateCircle.classList.add('rotateCircle');
-        rotateCircleContainer.classList.add('rotateCircleContainer');
-        rotateCircleContainer.appendChild(this.rotateCircle);
-        this.backgroundBox.appendChild(draggableBackground);
-        this.backgroundBox.appendChild(rotateCircleContainer);
-        this.backgroundBox.appendChild(resizeCorner);
-        this.transformationCommands = [];
-        this.transform = Mat33.identity;
-        makeDraggable(draggableBackground, (deltaPosition) => {
-            this.handleBackgroundDrag(deltaPosition);
-        }, () => this.finalizeTransform());
-        makeDraggable(resizeCorner, (deltaPosition) => {
-            this.handleResizeCornerDrag(deltaPosition);
-        }, () => this.finalizeTransform());
-        makeDraggable(this.rotateCircle, (_deltaPosition, offset) => {
-            this.handleRotateCircleDrag(offset);
-        }, () => this.finalizeTransform());
-    }
-    // Note a small change in the position of this' background while dragging
-    // At the end of a drag, changes should be applied by calling this.finishDragging()
-    handleBackgroundDrag(deltaPosition) {
-        // Re-scale the change in position
-        // (use a Vec3 transform to avoid translating deltaPosition)
-        deltaPosition = this.editor.viewport.screenToCanvasTransform.transformVec3(deltaPosition);
-        // Snap position to a multiple of 10 (additional decimal points lead to larger files).
-        deltaPosition = this.editor.viewport.roundPoint(deltaPosition);
-        this.transformPreview(Mat33.translation(deltaPosition));
-    }
-    handleResizeCornerDrag(deltaPosition) {
-        deltaPosition = this.editor.viewport.screenToCanvasTransform.transformVec3(deltaPosition);
-        deltaPosition = this.editor.viewport.roundPoint(deltaPosition);
-        const oldWidth = this.region.w;
-        const oldHeight = this.region.h;
-        const newSize = this.region.size.plus(deltaPosition);
-        if (newSize.y > 0 && newSize.x > 0) {
-            const scaleFactor = Vec2.of(newSize.x / oldWidth, newSize.y / oldHeight);
-            this.transformPreview(Mat33.scaling2D(scaleFactor, this.region.topLeft));
-        }
-    }
-    handleRotateCircleDrag(offset) {
-        let targetRotation = offset.angle();
-        targetRotation = targetRotation % (2 * Math.PI);
-        if (targetRotation < 0) {
-            targetRotation += 2 * Math.PI;
-        }
-        let deltaRotation = (targetRotation - this.boxRotation);
-        const rotationStep = Math.PI / 12;
-        if (Math.abs(deltaRotation) < rotationStep || !isFinite(deltaRotation)) {
-            return;
-        }
-        else {
-            const rotationDirection = Math.sign(deltaRotation);
-            // Step exactly one rotationStep
-            deltaRotation = Math.floor(Math.abs(deltaRotation) / rotationStep) * rotationStep;
-            deltaRotation *= rotationDirection;
-        }
-        this.transformPreview(Mat33.zRotation(deltaRotation, this.region.center));
-    }
-    computeTransformCommands() {
-        return this.selectedElems.map(elem => {
-            return elem.transformBy(this.transform);
-        });
-    }
-    // Applies, previews, but doesn't finalize the given transformation.
-    transformPreview(transform) {
-        this.transform = this.transform.rightMul(transform);
-        const deltaRotation = transform.transformVec3(Vec2.unitX).angle();
-        transform = transform.rightMul(Mat33.zRotation(-deltaRotation, this.region.center));
-        this.boxRotation += deltaRotation;
-        this.boxRotation = this.boxRotation % (2 * Math.PI);
-        if (this.boxRotation < 0) {
-            this.boxRotation += 2 * Math.PI;
-        }
-        const newSize = transform.transformVec3(this.region.size);
-        const translation = transform.transformVec2(this.region.topLeft).minus(this.region.topLeft);
-        this.region = this.region.resizedTo(newSize);
-        this.region = this.region.translatedBy(translation);
-        this.previewTransformCmds();
-        this.scrollTo();
-    }
-    // Applies the current transformation to the selection
-    finalizeTransform() {
-        this.transformationCommands.forEach(cmd => {
-            cmd.unapply(this.editor);
-        });
-        const fullTransform = this.transform;
-        const inverseTransform = this.transform.inverse();
-        const deltaBoxRotation = this.boxRotation;
-        const currentTransfmCommands = this.computeTransformCommands();
-        // Reset for the next drag
-        this.transformationCommands = [];
-        this.transform = Mat33.identity;
-        this.region = this.region.transformedBoundingBox(inverseTransform);
-        // Make the commands undo-able
-        this.editor.dispatch(new Selection.ApplyTransformationCommand(this, currentTransfmCommands, fullTransform, deltaBoxRotation));
-    }
-    // Preview the effects of the current transformation on the selection
-    previewTransformCmds() {
-        // Don't render what we're moving if it's likely to be slow.
-        if (this.selectedElems.length > updateChunkSize) {
-            this.updateUI();
-            return;
-        }
-        this.transformationCommands.forEach(cmd => cmd.unapply(this.editor));
-        this.transformationCommands = this.computeTransformCommands();
-        this.transformationCommands.forEach(cmd => cmd.apply(this.editor));
-        this.updateUI();
-    }
-    appendBackgroundBoxTo(elem) {
-        if (this.backgroundBox.parentElement) {
-            this.backgroundBox.remove();
-        }
-        elem.appendChild(this.backgroundBox);
-    }
-    setToPoint(point) {
-        this.region = this.region.grownToPoint(point);
-        this.recomputeBoxRotation();
-        this.updateUI();
-    }
-    cancelSelection() {
-        if (this.backgroundBox.parentElement) {
-            this.backgroundBox.remove();
-        }
-        this.region = Rect2.empty;
-    }
-    // Find the objects corresponding to this in the document,
-    // select them.
-    // Returns false iff nothing was selected.
-    resolveToObjects() {
-        // Grow the rectangle, if necessary
-        if (this.region.w === 0 || this.region.h === 0) {
-            const padding = this.editor.viewport.visibleRect.maxDimension / 100;
-            this.region = Rect2.bboxOf(this.region.corners, padding);
-        }
-        this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-            if (this.region.containsRect(elem.getBBox())) {
-                return true;
-            }
-            // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-            // As such, test with more lines than just this' edges.
-            const testLines = [];
-            for (const subregion of this.region.divideIntoGrid(2, 2)) {
-                testLines.push(...subregion.getEdges());
-            }
-            return testLines.some(edge => elem.intersects(edge));
-        });
-        // Find the bounding box of all selected elements.
-        if (!this.recomputeRegion()) {
-            return false;
-        }
-        this.updateUI();
-        return true;
-    }
-    // Recompute this' region from the selected elements. Resets rotation to zero.
-    // Returns false if the selection is empty.
-    recomputeRegion() {
-        const newRegion = this.selectedElems.reduce((accumulator, elem) => {
-            return (accumulator !== null && accumulator !== void 0 ? accumulator : elem.getBBox()).union(elem.getBBox());
-        }, null);
-        if (!newRegion) {
-            this.cancelSelection();
-            return false;
-        }
-        this.region = newRegion;
-        const minSize = this.getMinCanvasSize();
-        if (this.region.w < minSize || this.region.h < minSize) {
-            // Add padding
-            const padding = minSize / 2;
-            this.region = Rect2.bboxOf(this.region.corners, padding);
-        }
-        this.recomputeBoxRotation();
-        return true;
-    }
-    getMinCanvasSize() {
-        const canvasHandleSize = handleScreenSize / this.editor.viewport.getScaleFactor();
-        return canvasHandleSize * 2;
-    }
-    recomputeBoxRotation() {
-        this.boxRotation = this.editor.viewport.getRotationAngle();
-    }
-    getSelectedItemCount() {
-        return this.selectedElems.length;
-    }
-    updateUI() {
-        if (!this.backgroundBox) {
-            return;
-        }
-        const rightSideDirection = this.region.topRight.minus(this.region.bottomRight);
-        const topSideDirection = this.region.topLeft.minus(this.region.topRight);
-        const toScreen = this.editor.viewport.canvasToScreenTransform;
-        const centerOnScreen = toScreen.transformVec2(this.region.center);
-        const heightOnScreen = toScreen.transformVec3(rightSideDirection).magnitude();
-        const widthOnScreen = toScreen.transformVec3(topSideDirection).magnitude();
-        this.backgroundBox.style.marginLeft = `${centerOnScreen.x - widthOnScreen / 2}px`;
-        this.backgroundBox.style.marginTop = `${centerOnScreen.y - heightOnScreen / 2}px`;
-        this.backgroundBox.style.width = `${widthOnScreen}px`;
-        this.backgroundBox.style.height = `${heightOnScreen}px`;
-        const rotationDeg = this.boxRotation * 180 / Math.PI;
-        this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
-        this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
-    }
-    // Scroll the viewport to this. Does not zoom
-    scrollTo() {
-        const viewport = this.editor.viewport;
-        const visibleRect = viewport.visibleRect;
-        if (!visibleRect.containsPoint(this.region.center)) {
-            const closestPoint = visibleRect.getClosestPointOnBoundaryTo(this.region.center);
-            const delta = this.region.center.minus(closestPoint);
-            this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
-        }
-    }
-    deleteSelectedObjects() {
-        return new Erase(this.selectedElems);
-    }
-    duplicateSelectedObjects() {
-        return new Duplicate(this.selectedElems);
-    }
-}
-_a = Selection;
-(() => {
-    SerializableCommand.register('selection-tool-transform', (json, editor) => {
-        // The selection box is lost when serializing/deserializing. No need to store box rotation
-        const guiBoxRotation = 0;
-        const fullTransform = new Mat33(...json.transform);
-        const commands = json.commands.map(data => SerializableCommand.deserialize(data, editor));
-        return new _a.ApplyTransformationCommand(null, commands, fullTransform, guiBoxRotation);
-    });
-})();
-Selection.ApplyTransformationCommand = class extends SerializableCommand {
-    constructor(selection, currentTransfmCommands, fullTransform, deltaBoxRotation) {
-        super('selection-tool-transform');
-        this.selection = selection;
-        this.currentTransfmCommands = currentTransfmCommands;
-        this.fullTransform = fullTransform;
-        this.deltaBoxRotation = deltaBoxRotation;
-    }
-    apply(editor) {
-        var _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            // Approximate the new selection
-            if (this.selection) {
-                this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform);
-                this.selection.boxRotation += this.deltaBoxRotation;
-                this.selection.updateUI();
-            }
-            yield editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
-            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.recomputeRegion();
-            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-        });
-    }
-    unapply(editor) {
-        var _b, _c;
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.selection) {
-                this.selection.region = this.selection.region.transformedBoundingBox(this.fullTransform.inverse());
-                this.selection.boxRotation -= this.deltaBoxRotation;
-                this.selection.updateUI();
-            }
-            yield editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
-            (_b = this.selection) === null || _b === void 0 ? void 0 : _b.recomputeRegion();
-            (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-        });
-    }
-    serializeToJSON() {
-        return {
-            commands: this.currentTransfmCommands.map(command => command.serialize()),
-            transform: this.fullTransform.toArray(),
-        };
-    }
-    description(_editor, localizationTable) {
-        return localizationTable.transformedElements(this.currentTransfmCommands.length);
-    }
-};
-// {@inheritDoc SelectionTool!}
-export default class SelectionTool extends BaseTool {
-    constructor(editor, description) {
-        super(editor.notifier, description);
-        this.editor = editor;
-        this.handleOverlay = document.createElement('div');
-        editor.createHTMLOverlay(this.handleOverlay);
-        editor.addStyleSheet(styles);
-        this.handleOverlay.style.display = 'none';
-        this.handleOverlay.classList.add('handleOverlay');
-        editor.notifier.on(EditorEventType.ViewportChanged, _data => {
-            var _b, _c;
-            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.recomputeRegion();
-            (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.updateUI();
-        });
-        this.editor.handleKeyEventsFrom(this.handleOverlay);
-    }
-    onPointerDown(event) {
-        if (event.allPointers.length === 1 && event.current.isPrimary) {
-            this.prevSelectionBox = this.selectionBox;
-            this.selectionBox = new Selection(event.current.canvasPos, this.editor);
-            // Remove any previous selection rects
-            this.handleOverlay.replaceChildren();
-            this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
-            return true;
-        }
-        return false;
-    }
-    onPointerMove(event) {
-        if (!this.selectionBox)
-            return;
-        this.selectionBox.setToPoint(event.current.canvasPos);
-    }
-    onGestureEnd() {
-        if (!this.selectionBox)
-            return;
-        // Expand/shrink the selection rectangle, if applicable
-        const hasSelection = this.selectionBox.resolveToObjects();
-        // Note that the selection has changed
-        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-            kind: EditorEventType.ToolUpdated,
-            tool: this,
-        });
-        if (hasSelection) {
-            this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
-            this.zoomToSelection();
-        }
-    }
-    zoomToSelection() {
-        if (this.selectionBox) {
-            const selectionRect = this.selectionBox.region;
-            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
-        }
-    }
-    onPointerUp(event) {
-        if (!this.selectionBox)
-            return;
-        this.selectionBox.setToPoint(event.current.canvasPos);
-        this.onGestureEnd();
-    }
-    onGestureCancel() {
-        var _b, _c;
-        // Revert to the previous selection, if any.
-        (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
-        this.selectionBox = this.prevSelectionBox;
-        (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.appendBackgroundBoxTo(this.handleOverlay);
-    }
-    onKeyPress(event) {
-        let rotationSteps = 0;
-        let xTranslateSteps = 0;
-        let yTranslateSteps = 0;
-        let xScaleSteps = 0;
-        let yScaleSteps = 0;
-        switch (event.key) {
-            case 'a':
-            case 'h':
-            case 'ArrowLeft':
-                xTranslateSteps -= 1;
-                break;
-            case 'd':
-            case 'l':
-            case 'ArrowRight':
-                xTranslateSteps += 1;
-                break;
-            case 'q':
-            case 'k':
-            case 'ArrowUp':
-                yTranslateSteps -= 1;
-                break;
-            case 'e':
-            case 'j':
-            case 'ArrowDown':
-                yTranslateSteps += 1;
-                break;
-            case 'r':
-                rotationSteps += 1;
-                break;
-            case 'R':
-                rotationSteps -= 1;
-                break;
-            case 'i':
-                xScaleSteps -= 1;
-                break;
-            case 'I':
-                xScaleSteps += 1;
-                break;
-            case 'o':
-                yScaleSteps -= 1;
-                break;
-            case 'O':
-                yScaleSteps += 1;
-                break;
-        }
-        let handled = xTranslateSteps !== 0
-            || yTranslateSteps !== 0
-            || rotationSteps !== 0
-            || xScaleSteps !== 0
-            || yScaleSteps !== 0;
-        if (!this.selectionBox) {
-            handled = false;
-        }
-        else if (handled) {
-            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
-            const rotateStepSize = Math.PI / 8;
-            const scaleStepSize = translateStepSize / 2;
-            const region = this.selectionBox.region;
-            const scaledSize = this.selectionBox.region.size.plus(Vec2.of(xScaleSteps, yScaleSteps).times(scaleStepSize));
-            const transform = Mat33.scaling2D(Vec2.of(
-            // Don't more-than-half the size of the selection
-            Math.max(0.5, scaledSize.x / region.size.x), Math.max(0.5, scaledSize.y / region.size.y)), region.topLeft).rightMul(Mat33.zRotation(rotationSteps * rotateStepSize, region.center)).rightMul(Mat33.translation(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize)));
-            this.selectionBox.transformPreview(transform);
-        }
-        return handled;
-    }
-    onKeyUp(evt) {
-        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
-            this.selectionBox.finalizeTransform();
-            return true;
-        }
-        return false;
-    }
-    setEnabled(enabled) {
-        super.setEnabled(enabled);
-        // Clear the selection
-        this.handleOverlay.replaceChildren();
-        this.selectionBox = null;
-        this.handleOverlay.style.display = enabled ? 'block' : 'none';
-        if (enabled) {
-            this.handleOverlay.tabIndex = 0;
-            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
-        }
-        else {
-            this.handleOverlay.tabIndex = -1;
-        }
-    }
-    // Get the object responsible for displaying this' selection.
-    getSelection() {
-        return this.selectionBox;
-    }
-    clearSelection() {
-        this.handleOverlay.replaceChildren();
-        this.prevSelectionBox = this.selectionBox;
-        this.selectionBox = null;
-        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
-            kind: EditorEventType.ToolUpdated,
-            tool: this,
-        });
-    }
-}
-SelectionTool.handleableKeys = [
-    'a', 'h', 'ArrowLeft',
-    'd', 'l', 'ArrowRight',
-    'q', 'k', 'ArrowUp',
-    'e', 'j', 'ArrowDown',
-    'r', 'R',
-    'i', 'I', 'o', 'O',
-];