js-draw 0.12.0 → 0.13.0

package/dist/src/rendering/Display.js

@@ -1,17 +1,3 @@
-/**
- * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
- *
- * @example
- * ```
- * const editor = new Editor(document.body);
- * const w = editor.display.width;
- * const h = editor.display.height;
- * const center = Vec2.of(w / 2, h / 2);
- * const colorAtCenter = editor.display.getColorAt(center);
- * ```
- *
- * @packageDocumentation
- */
 import CanvasRenderer from './renderers/CanvasRenderer';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
@@ -25,6 +11,18 @@ export var RenderingMode;
     RenderingMode[RenderingMode["CanvasRenderer"] = 1] = "CanvasRenderer";
     // SVGRenderer is not supported by the main display
 })(RenderingMode || (RenderingMode = {}));
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
 export default class Display {
     /** @internal */
     constructor(editor, mode, parent) {

package/dist/src/rendering/lib.d.ts

@@ -0,0 +1,3 @@
+export { default as AbstractRenderer } from './renderers/AbstractRenderer';
+export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as Display } from './Display';

package/dist/src/rendering/lib.js

@@ -0,0 +1,3 @@
+export { default as AbstractRenderer } from './renderers/AbstractRenderer';
+export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as Display } from './Display';

package/dist/src/rendering/renderers/DummyRenderer.js

@@ -1,6 +1,6 @@
-// Renderer that outputs nothing. Useful for automated tests.
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
+// Renderer that outputs almost nothing. Useful for automated tests.
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {
         super(viewport);
@@ -17,7 +17,7 @@ export default class DummyRenderer extends AbstractRenderer {
     }
     displaySize() {
         // Do we have a stored viewport size?
-        const viewportSize = this.getViewport().getResolution();
+        const viewportSize = this.getViewport().getScreenRectSize();
         // Don't use a 0x0 viewport — DummyRenderer is often used
         // for tests that run without a display, so pretend we have a
         // reasonable-sized display.

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -31,6 +31,10 @@ export default class SVGRenderer extends AbstractRenderer {
 					stroke-linecap: round;
 					stroke-linejoin: round;
 				}
+
+				text {
+					white-space: pre;
+				}
 			`.replace(/\s+/g, '');
             styleSheet.setAttribute('id', renderedStylesheetId);
             this.elem.appendChild(styleSheet);

package/dist/src/toolbar/IconProvider.d.ts

@@ -21,7 +21,7 @@ export default class IconProvider {
     makeRotationLockIcon(): IconType;
     makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
-    makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
+    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -30,7 +30,7 @@ export default class IconProvider {
     makeUndoIcon() {
         return this.makeRedoIcon(true);
     }
-    // @param mirror - reflect across the x-axis @internal
+    // @param mirror - reflect across the x-axis. This parameter is internal.
     // @returns a redo icon.
     makeRedoIcon(mirror = false) {
         const icon = document.createElementNS(svgNamespace, 'svg');
@@ -336,45 +336,106 @@ export default class IconProvider {
         icon.appendChild(textNode);
         return icon;
     }
-    makePenIcon(tipThickness, color, roundedTip) {
+    makePenIcon(strokeSize, color, rounded) {
         if (color instanceof Color4) {
             color = color.toHexString();
         }
         const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
-        const halfThickness = tipThickness / 2;
-        // Draw a pen-like shape
-        const penTipLeft = 50 - halfThickness;
-        const penTipRight = 50 + halfThickness;
-        let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
-        let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
-        if (roundedTip) {
-            tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
-            tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+        const tipThickness = strokeSize / 2;
+        const inkTipPath = `
+			M ${15 - tipThickness},${80 - tipThickness}
+			  ${15 - tipThickness},${80 + tipThickness}
+			  30,83
+			  15,65
+			Z
+		`;
+        const trailStartEndY = 80 + tipThickness;
+        const inkTrailPath = `
+			m ${15 - tipThickness * 1.1},${trailStartEndY}
+			c 35,10 55,15 60,30
+			l ${35 + tipThickness * 1.2},${-10 - tipThickness}
+			C 80.47,98.32 50.5,${90 + tipThickness} 20,${trailStartEndY} Z
+		`;
+        const colorBubblePath = `
+			M 72.45,35.67
+			A 10,15 41.8 0 1 55,40.2 10,15 41.8 0 1 57.55,22.3 10,15 41.8 0 1 75,17.8 10,15 41.8 0 1 72.5,35.67
+			Z
+		`;
+        let gripMainPath = 'M 85,-25 25,35 h 10 v 10 h 10 v 10 h 10 v 10 h 10 l -5,10 60,-60 z';
+        let gripShadow1Path = 'M 25,35 H 35 L 90,-15 85,-25 Z';
+        let gripShadow2Path = 'M 60,75 65,65 H 55 l 55,-55 10,5 z';
+        if (rounded) {
+            gripMainPath = 'M 85,-25 25,35 c 15,0 40,30 35,40 l 60,-60 z';
+            gripShadow1Path = 'm 25,35 c 3.92361,0.384473 7.644275,0.980572 10,3 l 55,-53 -5,-10 z';
+            gripShadow2Path = 'M 60,75 C 61,66 59,65 56,59 l 54,-54 10,10 z';
         }
-        const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
-        const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
-        icon.innerHTML = `
-		<defs>
-			${checkerboardPatternDef}
-		</defs>
-		<g>
-			<!-- Pen grip -->
+        const penTipPath = `M 25,35 ${10 - tipThickness / 4},${70 - tipThickness / 2} 20,75 25,85 60,75 70,55 45,25 Z`;
+        const pencilTipColor = Color4.fromHex('#f4d7d7');
+        const tipColor = pencilTipColor.mix(Color4.fromString(color), tipThickness / 40 - 0.1).toHexString();
+        const ink = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTrailPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTrailPath}"
+			/>
+		`;
+        const penTip = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${penTipPath}"
+			/>
+			<path
+				fill="${tipColor}"
+				stroke="${color}"
+				d="${penTipPath}"
+			/>
+		`;
+        const grip = `
 			<path
-				d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
 				${iconColorStrokeFill}
+				d="${gripMainPath}"
 			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
-	
-			<!-- Actual pen tip -->
+
+			<!-- shadows -->
+			<path
+				fill="rgba(150, 150, 150, 0.3)"
+				d="${gripShadow1Path}"
+			/>
+			<path
+				fill="rgba(100, 100, 100, 0.2)"
+				d="${gripShadow2Path}"
+			/>
+
+			<!-- color bubble -->
 			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color}'
-				stroke='${color}'
+				fill="${checkerboardPatternRef}"
+				d="${colorBubblePath}"
 			/>
+			<path
+				fill="${color}"
+				d="${colorBubblePath}"
+			/>
+		`;
+        icon.innerHTML = `
+		<defs>
+			${checkerboardPatternDef}
+		</defs>
+		<g>
+			${ink}
+			${penTip}
+			${grip}
 		</g>
 		`;
         return icon;

package/dist/src/tools/PanZoom.js

@@ -266,7 +266,7 @@ export default class PanZoom extends BaseTool {
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
-        const pinchZoomScaleFactor = 1.04;
+        const pinchZoomScaleFactor = 1.03;
         const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;

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

@@ -1,10 +1,17 @@
-/**
- * A tool that handles paste events.
- * @packageDocumentation
- */
 import Editor from '../Editor';
 import { PasteEvent } from '../types';
 import BaseTool from './BaseTool';
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);

package/dist/src/tools/PasteHandler.js

@@ -1,7 +1,3 @@
-/**
- * A tool that handles paste events.
- * @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) {
@@ -18,12 +14,23 @@ import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import ImageComponent from '../components/ImageComponent';
-// { @inheritDoc PasteHandler! }
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.pasteHandler);
         this.editor = editor;
     }
+    // @internal
     onPaste(event) {
         const mime = event.mime.toLowerCase();
         if (mime === 'image/svg+xml') {

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

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import Pointer from '../Pointer';
-import { KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
+import { KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 export interface PenStyle {
@@ -14,6 +14,7 @@ export default class Pen extends BaseTool {
     private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
+    private ctrlKeyPressed;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
@@ -23,6 +24,7 @@ export default class Pen extends BaseTool {
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): void;
     onGestureCancel(): void;
+    private finalizeStroke;
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
@@ -30,5 +32,8 @@ export default class Pen extends BaseTool {
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
-    onKeyPress({ key }: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+    private isSnappingToGrid;
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+    onKeyUp({ key }: KeyUpEvent): boolean;
 }

package/dist/src/tools/Pen.js

@@ -11,6 +11,7 @@ export default class Pen extends BaseTool {
         this.builderFactory = builderFactory;
         this.builder = null;
         this.lastPoint = null;
+        this.ctrlKeyPressed = false;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
@@ -18,6 +19,9 @@ export default class Pen extends BaseTool {
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         var _a;
+        if (this.isSnappingToGrid()) {
+            pointer = pointer.snappedToGrid(this.editor.viewport);
+        }
         const minPressure = 0.3;
         let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
         if (!isFinite(pressure)) {
@@ -27,8 +31,9 @@ export default class Pen extends BaseTool {
         console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
         console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
         console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+        const pos = pointer.canvasPos;
         return {
-            pos: pointer.canvasPos,
+            pos,
             width: pressure * this.getPressureMultiplier(),
             color: this.style.color,
             time: pointer.timeStamp,
@@ -65,6 +70,8 @@ export default class Pen extends BaseTool {
         return false;
     }
     onPointerMove({ current }) {
+        if (!this.builder)
+            return;
         this.addPointToStroke(this.toStrokePoint(current));
     }
     onPointerUp({ current }) {
@@ -76,7 +83,15 @@ export default class Pen extends BaseTool {
         const currentPoint = this.toStrokePoint(current);
         const strokePoint = Object.assign(Object.assign({}, currentPoint), { width: (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : currentPoint.width });
         this.addPointToStroke(strokePoint);
-        if (this.builder && current.isPrimary) {
+        if (current.isPrimary) {
+            this.finalizeStroke();
+        }
+    }
+    onGestureCancel() {
+        this.editor.clearWetInk();
+    }
+    finalizeStroke() {
+        if (this.builder) {
             const stroke = this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
@@ -91,9 +106,6 @@ export default class Pen extends BaseTool {
         this.builder = null;
         this.editor.clearWetInk();
     }
-    onGestureCancel() {
-        this.editor.clearWetInk();
-    }
     noteUpdated() {
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
             kind: EditorEventType.ToolUpdated,
@@ -121,7 +133,12 @@ export default class Pen extends BaseTool {
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.builderFactory; }
-    onKeyPress({ key }) {
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        this.ctrlKeyPressed = false;
+    }
+    isSnappingToGrid() { return this.ctrlKeyPressed; }
+    onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
         if (key === '-' || key === '_') {
@@ -135,6 +152,22 @@ export default class Pen extends BaseTool {
             this.setThickness(newThickness);
             return true;
         }
+        if (key === 'control') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        if (key === 'z' && ctrlKey && this.builder) {
+            this.finalizeStroke();
+        }
+        return false;
+    }
+    onKeyUp({ key }) {
+        key = key.toLowerCase();
+        if (key === 'control') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

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

@@ -17,6 +17,7 @@ export default class SelectionHandle {
     private readonly onDragUpdate;
     private readonly onDragEnd;
     private element;
+    private snapToGrid;
     constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
     /**
      * Adds this to `container`, where `conatiner` should be the background/selection
@@ -32,4 +33,6 @@ export default class SelectionHandle {
     handleDragStart(pointer: Pointer): void;
     handleDragUpdate(pointer: Pointer): void;
     handleDragEnd(): void;
+    setSnapToGrid(snap: boolean): void;
+    isSnappingToGrid(): boolean;
 }

package/dist/src/tools/SelectionTool/SelectionHandle.js

@@ -72,4 +72,10 @@ export default class SelectionHandle {
         }
         this.onDragEnd();
     }
+    setSnapToGrid(snap) {
+        this.snapToGrid = snap;
+    }
+    isSnappingToGrid() {
+        return this.snapToGrid;
+    }
 }

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

@@ -12,10 +12,12 @@ export default class SelectionTool extends BaseTool {
     private lastEvtTarget;
     private expandingSelectionBox;
     private shiftKeyPressed;
+    private ctrlKeyPressed;
     constructor(editor: Editor, description: string);
     private makeSelectionBox;
+    private snapSelectionToGrid;
     private selectionBoxHandlingEvt;
-    onPointerDown(event: PointerEvt): boolean;
+    onPointerDown({ allPointers, current }: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onSelectionUpdated;
     private onGestureEnd;

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -1,6 +1,3 @@
-// Allows users to select/transform portions of the `EditorImage`.
-// With respect to `extend`ing, `SelectionTool` is not stable.
-// @packageDocumentation
 import Mat33 from '../../math/Mat33';
 import { Vec2 } from '../../math/Vec2';
 import { EditorEventType } from '../../types';
@@ -10,7 +7,8 @@ import SVGRenderer from '../../rendering/renderers/SVGRenderer';
 import Selection from './Selection';
 import TextComponent from '../../components/TextComponent';
 export const cssPrefix = 'selection-tool-';
-// {@inheritDoc SelectionTool!}
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
@@ -18,6 +16,7 @@ export default class SelectionTool extends BaseTool {
         this.lastEvtTarget = null;
         this.expandingSelectionBox = false;
         this.shiftKeyPressed = false;
+        this.ctrlKeyPressed = false;
         this.selectionBoxHandlingEvt = false;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
@@ -45,17 +44,37 @@ export default class SelectionTool extends BaseTool {
         }
         this.selectionBox.addTo(this.handleOverlay);
     }
-    onPointerDown(event) {
-        var _a;
-        if (event.allPointers.length === 1 && event.current.isPrimary) {
-            if (this.lastEvtTarget && ((_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragStart(event.current, this.lastEvtTarget))) {
-                this.selectionBoxHandlingEvt = true;
-                this.expandingSelectionBox = false;
+    snapSelectionToGrid() {
+        if (!this.selectionBox)
+            throw new Error('No selection to snap!');
+        const topLeftOfBBox = this.selectionBox.region.topLeft;
+        const snapDistance = this.editor.viewport.snapToGrid(topLeftOfBBox).minus(topLeftOfBBox);
+        const oldTransform = this.selectionBox.getTransform();
+        this.selectionBox.setTransform(oldTransform.rightMul(Mat33.translation(snapDistance)));
+        this.selectionBox.finalizeTransform();
+    }
+    onPointerDown({ allPointers, current }) {
+        const snapToGrid = this.ctrlKeyPressed;
+        if (snapToGrid) {
+            current = current.snappedToGrid(this.editor.viewport);
+        }
+        if (allPointers.length === 1 && current.isPrimary) {
+            let transforming = false;
+            if (this.lastEvtTarget && this.selectionBox) {
+                if (snapToGrid) {
+                    this.snapSelectionToGrid();
+                }
+                const dragStartResult = this.selectionBox.onDragStart(current, this.lastEvtTarget);
+                if (dragStartResult) {
+                    transforming = true;
+                    this.selectionBoxHandlingEvt = true;
+                    this.expandingSelectionBox = false;
+                }
             }
-            else {
+            if (!transforming) {
                 // Shift key: Combine the new and old selection boxes at the end of the gesture.
                 this.expandingSelectionBox = this.shiftKeyPressed;
-                this.makeSelectionBox(event.current.canvasPos);
+                this.makeSelectionBox(current.canvasPos);
             }
             return true;
         }
@@ -64,11 +83,15 @@ export default class SelectionTool extends BaseTool {
     onPointerMove(event) {
         if (!this.selectionBox)
             return;
+        let currentPointer = event.current;
+        if (this.ctrlKeyPressed) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
         if (this.selectionBoxHandlingEvt) {
-            this.selectionBox.onDragUpdate(event.current);
+            this.selectionBox.onDragUpdate(currentPointer);
         }
         else {
-            this.selectionBox.setToPoint(event.current.canvasPos);
+            this.selectionBox.setToPoint(currentPointer.canvasPos);
         }
     }
     onSelectionUpdated() {
@@ -113,7 +136,11 @@ export default class SelectionTool extends BaseTool {
     onPointerUp(event) {
         if (!this.selectionBox)
             return;
-        this.selectionBox.setToPoint(event.current.canvasPos);
+        let currentPointer = event.current;
+        if (this.ctrlKeyPressed) {
+            currentPointer = currentPointer.snappedToGrid(this.editor.viewport);
+        }
+        this.selectionBox.setToPoint(currentPointer.canvasPos);
         // Were we expanding the previous selection?
         if (this.expandingSelectionBox && this.prevSelectionBox) {
             // If so, finish expanding.
@@ -142,6 +169,10 @@ export default class SelectionTool extends BaseTool {
         this.expandingSelectionBox = false;
     }
     onKeyPress(event) {
+        if (event.key === 'Control') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
         if (this.selectionBox && event.ctrlKey && event.key === 'd') {
             // Handle duplication on key up — we don't want to accidentally duplicate
             // many times.
@@ -235,6 +266,10 @@ export default class SelectionTool extends BaseTool {
         return handled;
     }
     onKeyUp(evt) {
+        if (evt.key === 'Control') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
         if (evt.key === 'Shift') {
             this.shiftKeyPressed = false;
             return true;
@@ -291,6 +326,8 @@ export default class SelectionTool extends BaseTool {
         // Clear the selection
         this.handleOverlay.replaceChildren();
         this.selectionBox = null;
+        this.shiftKeyPressed = false;
+        this.ctrlKeyPressed = false;
         this.handleOverlay.style.display = enabled ? 'block' : 'none';
         if (enabled) {
             this.handleOverlay.tabIndex = 0;
@@ -355,4 +392,5 @@ SelectionTool.handleableKeys = [
     'e', 'j', 'ArrowDown',
     'r', 'R',
     'i', 'I', 'o', 'O',
+    'Control',
 ];

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

@@ -1,6 +1,14 @@
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * 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;
     constructor(editor: Editor);

package/dist/src/tools/ToolSwitcherShortcut.js

@@ -1,12 +1,18 @@
-// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
-// @packageDocumentation
 import BaseTool from './BaseTool';
-// {@inheritDoc ToolSwitcherShortcut!}
+/**
+ * Handles keyboard events used, by default, to select tools. By default,
+ * 1 maps to the first primary tool, 2 to the second primary tool, ... .
+ *
+ * This is in the default set of {@link ToolController} tools.
+ *
+ * @deprecated This may be replaced in the future.
+ */
 export default class ToolSwitcherShortcut extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.changeTool);
         this.editor = editor;
     }
+    // @internal
     onKeyPress({ key }) {
         const toolController = this.editor.toolController;
         const primaryTools = toolController.getPrimaryTools();

package/dist/src/tools/UndoRedoShortcut.js

@@ -1,13 +1,11 @@
-// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
-// @packageDocumentation
 import BaseTool from './BaseTool';
-// {@inheritDoc UndoRedoShortcut!}
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
 export default class UndoRedoShortcut extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.undoRedoTool);
         this.editor = editor;
     }
-    // Activate undo/redo
+    // @internal
     onKeyPress({ key, ctrlKey }) {
         if (ctrlKey) {
             if (key === 'z') {