js-draw 1.6.0 → 1.7.0

package/dist/mjs/tools/SelectionTool/SelectionTool.mjs

@@ -6,6 +6,7 @@ import  SVGRenderer  from '../../rendering/renderers/SVGRenderer.mjs';
 import  Selection  from './Selection.mjs';
 import  TextComponent  from '../../components/TextComponent.mjs';
 import  { duplicateSelectionShortcut, selectAllKeyboardShortcut, snapToGridKeyboardShortcutId }  from '../keybindings.mjs';
+import  ToPointerAutoscroller  from './ToPointerAutoscroller.mjs';
 export const cssPrefix = 'selection-tool-';
 // Allows users to select/transform portions of the `EditorImage`.
 // With respect to `extend`ing, `SelectionTool` is not stable.
@@ -17,8 +18,19 @@ class SelectionTool extends BaseTool {
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
         this.snapToGrid = false;
+        this.lastPointer = null;
         this.selectionBoxHandlingEvt = false;
         this.lastSelectedObjects = [];
+        this.autoscroller = new ToPointerAutoscroller(editor.viewport, (scrollBy) => {
+            editor.dispatch(Viewport.transformBy(Mat33.translation(scrollBy)), false);
+            // Update the selection box/content to match the new viewport.
+            if (this.lastPointer) {
+                // The viewport has changed -- ensure that the screen and canvas positions
+                // of the pointer are both correct
+                const updatedPointer = this.lastPointer.withScreenPosition(this.lastPointer.screenPos, editor.viewport);
+                this.onMainPointerUpdated(updatedPointer);
+            }
+        });
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
         this.handleOverlay.style.display = 'none';
@@ -81,14 +93,22 @@ class SelectionTool extends BaseTool {
                 this.expandingSelectionBox = this.shiftKeyPressed;
                 this.makeSelectionBox(current.canvasPos);
             }
+            else {
+                // Only autoscroll if we're transforming an existing selection
+                this.autoscroller.start();
+            }
             return true;
         }
         return false;
     }
     onPointerMove(event) {
+        this.onMainPointerUpdated(event.current);
+    }
+    onMainPointerUpdated(currentPointer) {
+        this.lastPointer = currentPointer;
         if (!this.selectionBox)
             return;
-        let currentPointer = event.current;
+        this.autoscroller.onPointerMove(currentPointer.screenPos);
         if (!this.expandingSelectionBox && this.shiftKeyPressed && this.startPoint) {
             const screenPos = this.editor.viewport.canvasToScreen(this.startPoint);
             currentPointer = currentPointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
@@ -103,21 +123,8 @@ class SelectionTool extends BaseTool {
             this.selectionBox.setToPoint(currentPointer.canvasPos);
         }
     }
-    // Called after a gestureCancel and a pointerUp
-    onGestureEnd() {
-        if (!this.selectionBox)
-            return;
-        if (!this.selectionBoxHandlingEvt) {
-            // Expand/shrink the selection rectangle, if applicable
-            this.selectionBox.resolveToObjects();
-            this.onSelectionUpdated();
-        }
-        else {
-            this.selectionBox.onDragEnd();
-        }
-        this.selectionBoxHandlingEvt = false;
-    }
     onPointerUp(event) {
+        this.autoscroller.stop();
         if (!this.selectionBox)
             return;
         let currentPointer = event.current;
@@ -136,10 +143,20 @@ class SelectionTool extends BaseTool {
             ]);
         }
         else {
-            this.onGestureEnd();
+            if (!this.selectionBoxHandlingEvt) {
+                // Expand/shrink the selection rectangle, if applicable
+                this.selectionBox.resolveToObjects();
+                this.onSelectionUpdated();
+            }
+            else {
+                this.selectionBox.onDragEnd();
+            }
+            this.selectionBoxHandlingEvt = false;
+            this.lastPointer = null;
         }
     }
     onGestureCancel() {
+        this.autoscroller.stop();
         if (this.selectionBoxHandlingEvt) {
             this.selectionBox?.onDragCancel();
         }
@@ -152,6 +169,8 @@ class SelectionTool extends BaseTool {
             this.prevSelectionBox = null;
         }
         this.expandingSelectionBox = false;
+        this.lastPointer = null;
+        this.selectionBoxHandlingEvt = false;
     }
     onSelectionUpdated() {
         const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
@@ -277,6 +296,7 @@ class SelectionTool extends BaseTool {
             const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33.translation(regionCenter.times(-1)))).rightMul(Mat33.translation(this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
             const oldTransform = this.selectionBox.getTransform();
             this.selectionBox.setTransform(oldTransform.rightMul(transform));
+            this.selectionBox.scrollTo();
         }
         if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
             this.editor.dispatch(this.selectionBox.deleteSelectedObjects());

package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.d.ts

@@ -0,0 +1,23 @@
+import { Point2, Vec2 } from '@js-draw/math';
+import Viewport from '../../Viewport';
+type ScrollByCallback = (delta: Vec2) => void;
+/**
+ * Automatically scrolls the viewport such that the user's pointer is visible.
+ */
+export default class ToPointerAutoscroller {
+    private viewport;
+    private scrollByCanvasDelta;
+    private started;
+    private updateLoopId;
+    private updateLoopRunning;
+    private targetPoint;
+    private scrollRate;
+    constructor(viewport: Viewport, scrollByCanvasDelta: ScrollByCallback);
+    private getScrollForPoint;
+    start(): void;
+    onPointerMove(pointerScreenPosition: Point2): void;
+    stop(): void;
+    private startUpdateLoop;
+    private stopUpdateLoop;
+}
+export {};

package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs

@@ -0,0 +1,77 @@
+import { Rect2, Vec2 } from '@js-draw/math';
+import  untilNextAnimationFrame  from '../../util/untilNextAnimationFrame.mjs';
+/**
+ * Automatically scrolls the viewport such that the user's pointer is visible.
+ */
+export default class ToPointerAutoscroller {
+    constructor(viewport, scrollByCanvasDelta) {
+        this.viewport = viewport;
+        this.scrollByCanvasDelta = scrollByCanvasDelta;
+        this.started = false;
+        this.updateLoopId = 0;
+        this.updateLoopRunning = false;
+        this.targetPoint = null;
+        this.scrollRate = 1000; // px/s
+    }
+    getScrollForPoint(screenPoint) {
+        const screenSize = this.viewport.getScreenRectSize();
+        const screenRect = new Rect2(0, 0, screenSize.x, screenSize.y);
+        // Starts autoscrolling when the cursor is **outside of** this region
+        const marginSize = 44;
+        const autoscrollBoundary = screenRect.grownBy(-marginSize);
+        if (autoscrollBoundary.containsPoint(screenPoint)) {
+            return Vec2.zero;
+        }
+        const closestEdgePoint = autoscrollBoundary.getClosestPointOnBoundaryTo(screenPoint);
+        const distToEdge = closestEdgePoint.minus(screenPoint).magnitude();
+        const toEdge = closestEdgePoint.minus(screenPoint);
+        // Go faster for points further away from the boundary.
+        const maximumScaleFactor = 1.25;
+        const scaleFactor = Math.min(distToEdge / marginSize, maximumScaleFactor);
+        return toEdge.normalizedOrZero().times(scaleFactor);
+    }
+    start() {
+        this.started = true;
+    }
+    onPointerMove(pointerScreenPosition) {
+        if (!this.started) {
+            return;
+        }
+        if (this.getScrollForPoint(pointerScreenPosition) === Vec2.zero) {
+            this.stopUpdateLoop();
+        }
+        else {
+            this.targetPoint = pointerScreenPosition;
+            this.startUpdateLoop();
+        }
+    }
+    stop() {
+        this.targetPoint = null;
+        this.started = false;
+        this.stopUpdateLoop();
+    }
+    startUpdateLoop() {
+        if (this.updateLoopRunning) {
+            return;
+        }
+        (async () => {
+            this.updateLoopId++;
+            const currentUpdateLoopId = this.updateLoopId;
+            let lastUpdateTime = performance.now();
+            while (this.updateLoopId === currentUpdateLoopId && this.targetPoint) {
+                this.updateLoopRunning = true;
+                const currentTime = performance.now();
+                const deltaTimeMs = currentTime - lastUpdateTime;
+                const scrollDirection = this.getScrollForPoint(this.targetPoint);
+                const screenScrollAmount = scrollDirection.times(this.scrollRate * deltaTimeMs / 1000);
+                this.scrollByCanvasDelta(this.viewport.screenToCanvasTransform.transformVec3(screenScrollAmount));
+                lastUpdateTime = currentTime;
+                await untilNextAnimationFrame();
+            }
+            this.updateLoopRunning = false;
+        })();
+    }
+    stopUpdateLoop() {
+        this.updateLoopId++;
+    }
+}

package/dist/mjs/tools/SelectionTool/TransformMode.d.ts

@@ -9,26 +9,33 @@ export declare class DragTransformer {
     constructor(editor: Editor, selection: Selection);
     onDragStart(startPoint: Vec3): void;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }
 export declare class ResizeTransformer {
     private readonly editor;
     private selection;
     private mode;
     private dragStartPoint;
+    private transformOrigin;
+    private scaleRate;
     constructor(editor: Editor, selection: Selection);
     onDragStart(startPoint: Vec3, mode: ResizeMode): void;
+    private computeOriginAndScaleRate;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }
 export declare class RotateTransformer {
     private readonly editor;
     private selection;
     private startAngle;
+    private targetRotation;
+    private maximumDistFromStart;
+    private startPoint;
     constructor(editor: Editor, selection: Selection);
     private getAngle;
     private roundAngle;
     onDragStart(startPoint: Vec3): void;
+    private setRotationTo;
     onDragUpdate(canvasPos: Vec3): void;
-    onDragEnd(): void;
+    onDragEnd(): void | Promise<void>;
 }

package/dist/mjs/tools/SelectionTool/TransformMode.mjs

@@ -15,7 +15,7 @@ export class DragTransformer {
         this.selection.setTransform(Mat33.translation(delta));
     }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        return this.selection.finalizeTransform();
     }
 }
 export class ResizeTransformer {
@@ -28,6 +28,32 @@ export class ResizeTransformer {
         this.selection.setTransform(Mat33.identity);
         this.mode = mode;
         this.dragStartPoint = startPoint;
+        this.computeOriginAndScaleRate();
+    }
+    computeOriginAndScaleRate() {
+        // Store the index of the furthest corner from startPoint. We'll use that
+        // to determine where the transform considers (0, 0) (where we scale from).
+        const selectionRect = this.selection.preTransformRegion;
+        const selectionBoxCorners = selectionRect.corners;
+        let largestDistSquared = 0;
+        for (let i = 0; i < selectionBoxCorners.length; i++) {
+            const currentCorner = selectionBoxCorners[i];
+            const distSquaredToCurrent = this.dragStartPoint.minus(currentCorner).magnitudeSquared();
+            if (distSquaredToCurrent > largestDistSquared) {
+                largestDistSquared = distSquaredToCurrent;
+                this.transformOrigin = currentCorner;
+            }
+        }
+        // Determine whether moving the mouse to the right increases or decreases the width.
+        let widthScaleRate = 1;
+        let heightScaleRate = 1;
+        if (this.transformOrigin.x > selectionRect.center.x) {
+            widthScaleRate = -1;
+        }
+        if (this.transformOrigin.y > selectionRect.center.y) {
+            heightScaleRate = -1;
+        }
+        this.scaleRate = Vec2.of(widthScaleRate, heightScaleRate);
     }
     onDragUpdate(canvasPos) {
         const canvasDelta = canvasPos.minus(this.dragStartPoint);
@@ -35,11 +61,11 @@ export class ResizeTransformer {
         const origHeight = this.selection.preTransformRegion.height;
         let scale = Vec2.of(1, 1);
         if (this.mode === ResizeMode.HorizontalOnly) {
-            const newWidth = origWidth + canvasDelta.x;
+            const newWidth = origWidth + canvasDelta.x * this.scaleRate.x;
             scale = Vec2.of(newWidth / origWidth, scale.y);
         }
         if (this.mode === ResizeMode.VerticalOnly) {
-            const newHeight = origHeight + canvasDelta.y;
+            const newHeight = origHeight + canvasDelta.y * this.scaleRate.y;
             scale = Vec2.of(scale.x, newHeight / origHeight);
         }
         if (this.mode === ResizeMode.Both) {
@@ -51,12 +77,12 @@ export class ResizeTransformer {
         //    long decimal representations => large file sizes.
         scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
         if (scale.x !== 0 && scale.y !== 0) {
-            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            const origin = this.editor.viewport.roundPoint(this.transformOrigin);
             this.selection.setTransform(Mat33.scaling2D(scale, origin));
         }
     }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        return this.selection.finalizeTransform();
     }
 }
 export class RotateTransformer {
@@ -64,6 +90,8 @@ export class RotateTransformer {
         this.editor = editor;
         this.selection = selection;
         this.startAngle = 0;
+        this.targetRotation = 0;
+        this.maximumDistFromStart = 0;
     }
     getAngle(canvasPoint) {
         const selectionCenter = this.selection.preTransformRegion.center;
@@ -76,14 +104,16 @@ export class RotateTransformer {
         return Math.round(angle * roundingFactor) / roundingFactor;
     }
     onDragStart(startPoint) {
+        this.startPoint = startPoint;
         this.selection.setTransform(Mat33.identity);
         this.startAngle = this.getAngle(startPoint);
+        this.maximumDistFromStart = 0;
+        this.targetRotation = 0;
     }
-    onDragUpdate(canvasPos) {
-        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+    setRotationTo(angle) {
         // Transform in canvas space
         const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
-        const unrounded = Mat33.zRotation(targetRotation);
+        const unrounded = Mat33.zRotation(angle);
         const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
         const fullRoundedTransform = Mat33
             .translation(canvasSelCenter)
@@ -91,7 +121,20 @@ export class RotateTransformer {
             .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
         this.selection.setTransform(fullRoundedTransform);
     }
+    onDragUpdate(canvasPos) {
+        this.targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        this.setRotationTo(this.targetRotation);
+        const distFromStart = canvasPos.minus(this.startPoint).magnitude();
+        if (distFromStart > this.maximumDistFromStart) {
+            this.maximumDistFromStart = distFromStart;
+        }
+    }
     onDragEnd() {
-        this.selection.finalizeTransform();
+        // Anything less than this is considered a click
+        const clickThreshold = 15;
+        if (this.maximumDistFromStart < clickThreshold && this.targetRotation === 0) {
+            this.setRotationTo(-Math.PI / 2);
+        }
+        return this.selection.finalizeTransform();
     }
 }

package/dist/mjs/util/listenForKeyboardEventsFrom.d.ts

@@ -0,0 +1,16 @@
+interface Callbacks {
+    filter(event: KeyboardEvent): boolean;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(event: KeyboardEvent): void;
+}
+/**
+ * Calls `callbacks` when different keys are known to be pressed.
+ *
+ * `filter` can be used to ignore events.
+ *
+ * This includes keys that didn't trigger a keydown or keyup event, but did cause
+ * shiftKey/altKey/metaKey/etc. properties to change on other events (e.g. mousemove
+ * events). Artifical events are created for these changes and sent to `callbacks`.
+ */
+declare const listenForKeyboardEventsFrom: (elem: HTMLElement, callbacks: Callbacks) => void;
+export default listenForKeyboardEventsFrom;

package/dist/mjs/util/listenForKeyboardEventsFrom.mjs

@@ -0,0 +1,140 @@
+/**
+ * Calls `callbacks` when different keys are known to be pressed.
+ *
+ * `filter` can be used to ignore events.
+ *
+ * This includes keys that didn't trigger a keydown or keyup event, but did cause
+ * shiftKey/altKey/metaKey/etc. properties to change on other events (e.g. mousemove
+ * events). Artifical events are created for these changes and sent to `callbacks`.
+ */
+const listenForKeyboardEventsFrom = (elem, callbacks) => {
+    // Track which keys are down so we can release them when the element
+    // loses focus. This is particularly important for keys like Control
+    // that can trigger shortcuts that cause the editor to lose focus before
+    // the keyup event is triggered.
+    let keysDown = [];
+    // Return whether two objects that are similar to keyboard events represent the
+    // same key.
+    const keyEventsMatch = (a, b) => {
+        return a.key === b.key && a.code === b.code;
+    };
+    const isKeyDown = (keyEvent) => {
+        return keysDown.some(other => keyEventsMatch(other, keyEvent));
+    };
+    const keyEventToRecord = (event) => {
+        return {
+            code: event.code,
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            altKey: event.altKey,
+            shiftKey: event.shiftKey,
+            metaKey: event.metaKey,
+        };
+    };
+    const handleKeyEvent = (htmlEvent) => {
+        if (htmlEvent.type === 'keydown') {
+            // Add event to the list of keys that are down (so long as it
+            // isn't a duplicate).
+            if (!isKeyDown(htmlEvent)) {
+                // Destructructring, then pushing seems to cause
+                // data loss. Copy properties individually:
+                keysDown.push(keyEventToRecord(htmlEvent));
+            }
+            if (!callbacks.filter(htmlEvent)) {
+                return;
+            }
+            callbacks.handleKeyDown(htmlEvent);
+        }
+        else { // keyup
+            console.assert(htmlEvent.type === 'keyup');
+            // Remove the key from keysDown -- it's no longer down.
+            keysDown = keysDown.filter(event => {
+                const matches = keyEventsMatch(event, htmlEvent);
+                return !matches;
+            });
+            if (!callbacks.filter(htmlEvent)) {
+                return;
+            }
+            callbacks.handleKeyUp(htmlEvent);
+        }
+    };
+    elem.addEventListener('keydown', htmlEvent => {
+        handleKeyEvent(htmlEvent);
+    });
+    elem.addEventListener('keyup', htmlEvent => {
+        handleKeyEvent(htmlEvent);
+    });
+    elem.addEventListener('focusout', (focusEvent) => {
+        const stillHasFocus = focusEvent.relatedTarget && elem.contains(focusEvent.relatedTarget);
+        if (!stillHasFocus) {
+            for (const event of keysDown) {
+                callbacks.handleKeyUp(new KeyboardEvent('keyup', {
+                    ...event,
+                }));
+            }
+            keysDown = [];
+        }
+    });
+    const fireArtificalEventsBasedOn = (htmlEvent) => {
+        let wasShiftDown = false;
+        let wasCtrlDown = false;
+        let wasAltDown = false;
+        let wasMetaDown = false;
+        for (const otherEvent of keysDown) {
+            const code = otherEvent.code;
+            wasShiftDown ||= !!code.match(/^Shift(Left|Right)$/);
+            wasCtrlDown ||= !!code.match(/^Control(Left|Right)$/);
+            wasAltDown ||= !!code.match(/^Alt(Left|Right)$/);
+            wasMetaDown ||= !!code.match(/^Meta(Left|Right)$/);
+        }
+        const eventName = (isDown) => {
+            if (isDown) {
+                return 'keydown';
+            }
+            else {
+                return 'keyup';
+            }
+        };
+        const eventInitDefaults = {
+            shiftKey: htmlEvent.shiftKey,
+            altKey: htmlEvent.altKey,
+            metaKey: htmlEvent.metaKey,
+            ctrlKey: htmlEvent.ctrlKey,
+        };
+        if (htmlEvent.shiftKey !== wasShiftDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.shiftKey), {
+                ...eventInitDefaults,
+                key: 'Shift',
+                code: 'ShiftLeft',
+            }));
+        }
+        if (htmlEvent.altKey !== wasAltDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.altKey), {
+                ...eventInitDefaults,
+                key: 'Alt',
+                code: 'AltLeft',
+            }));
+        }
+        if (htmlEvent.ctrlKey !== wasCtrlDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.ctrlKey), {
+                ...eventInitDefaults,
+                key: 'Control',
+                code: 'ControlLeft',
+            }));
+        }
+        if (htmlEvent.metaKey !== wasMetaDown) {
+            handleKeyEvent(new KeyboardEvent(eventName(htmlEvent.metaKey), {
+                ...eventInitDefaults,
+                key: 'Meta',
+                code: 'MetaLeft',
+            }));
+        }
+    };
+    elem.addEventListener('mousedown', (htmlEvent) => {
+        fireArtificalEventsBasedOn(htmlEvent);
+    });
+    elem.addEventListener('mousemove', (htmlEvent) => {
+        fireArtificalEventsBasedOn(htmlEvent);
+    });
+};
+export default listenForKeyboardEventsFrom;

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.6.0',
+    number: '1.7.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,13 +64,13 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.6.0",
+    "@js-draw/math": "^1.7.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.4.0",
-    "@types/jest": "29.5.3",
-    "@types/jsdom": "21.1.1"
+    "@js-draw/build-tool": "^1.7.0",
+    "@types/jest": "29.5.5",
+    "@types/jsdom": "21.1.3"
   },
   "bugs": {
     "url": "https://github.com/personalizedrefrigerator/js-draw/issues"
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "c2278b6819ca0e464e4e7d2c3c2045e3394b1fe8"
+  "gitHead": "e7d8a68e6a5ae3063de9c1f033ed8f08c567b393"
 }

package/src/tools/SelectionTool/SelectionTool.scss

@@ -3,27 +3,51 @@
 	background-color: var(--selection-background-color);
 	opacity: 0.5;
 	overflow: visible;
-	position: absolute;
 }
 
 .selection-tool-handle {
-	border: 1px solid var(--foreground-color-1);
-	background: var(--background-color-1);
 	position: absolute;
-
 	box-sizing: border-box;
-	padding: 3px;
 
-	& .icon {
+	// Center content
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	// Maximum size of the visible region (make the handle slightly larger
+	// so that the resize cursor is visible everywhere in the actual selection
+	// box).
+	--max-size: 17px;
+
+	.selection-tool-content {
+		border: 1px solid var(--foreground-color-1);
+		background: var(--background-color-1);
+		box-sizing: border-box;
+
+		max-width: var(--max-size);
+		max-height: var(--max-size);
 		width: 100%;
 		height: 100%;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		padding: 3px;
+		.icon {
+			width: 100%;
+			height: 100%;
+		}
 	}
 
-	&.selection-tool-circle {
+	&.selection-tool-circle .selection-tool-content {
 		border-radius: 100%;
 	}
 
 	&.selection-tool-rotate {
+		// Shrink less if a rotation handle
+		--max-size: 28px;
+
 		cursor: grab;
 	}
 }
@@ -57,8 +81,37 @@
 }
 
 .overlay.handleOverlay {
-	height: 0;
-	overflow: visible;
+	touch-action: none;
+
+	// When expanding a selection with shift+click&drag, multiple selection boxes
+	// can be present in the same handleOverlay. As such, so that other overlayed
+	// selection boxes are in the correct place, the outer container needs to have
+	// zero height.
+	//
+	// This is in addition to the overlay container, which needs zero height to prevent
+	// other overlay containers from being affected by its size.
+	&, .selection-tool-selection-outer-container {
+		height: 0;
+		overflow: visible;
+	}
+
+	.selection-tool-selection-inner-container {
+		width: var(--editor-current-display-width-px);
+		height: var(--editor-current-display-height-px);
+		overflow: hidden;
+
+		// Disable pointer events: If the parent (or the container) has
+		// captured pointers and the container is removed, this prevents
+		// us from receiving the following events (e.g. in Firefox).
+		pointer-events: none;
+
+		& > * {
+			// We *do* want pointer events for handles and the background. This
+			// allows the mouse cursor to change shape when hovering over resize
+			// handles.
+			pointer-events: all;
+		}
+	}
 }
 
 @keyframes selection-duplicated-animation {