js-draw 1.21.2 → 1.22.0

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

@@ -0,0 +1,54 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../Editor';
+import Pointer from '../Pointer';
+import { StrokeDataPoint } from '../types';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
+import { MutableReactiveValue } from '../util/ReactiveValue';
+export interface PenStyle {
+    readonly color: Color4;
+    readonly thickness: number;
+    readonly factory: ComponentBuilderFactory;
+}
+export default class Pen extends BaseTool {
+    private editor;
+    protected builder: ComponentBuilder | null;
+    private lastPoint;
+    private startPoint;
+    private currentDeviceType;
+    private currentPointerId;
+    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;
+    protected previewStroke(): void;
+    protected addPointToStroke(point: StrokeDataPoint): void;
+    onPointerDown(event: PointerEvt): boolean;
+    private eventCanCancelStroke;
+    eventCanBeDeliveredToNonActiveTool(event: PointerEvt): boolean;
+    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;
+    getStyleValue(): MutableReactiveValue<PenStyle>;
+    onKeyPress(event: KeyPressEvent): boolean;
+}

package/dist/cjs/tools/Pen.js

@@ -0,0 +1,343 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const EditorImage_1 = __importDefault(require("../image/EditorImage"));
+const Pointer_1 = require("../Pointer");
+const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+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 = __importStar(require("./util/StationaryPenDetector"));
+class Pen extends BaseTool_1.default {
+    constructor(editor, description, style) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.builder = null;
+        this.lastPoint = null;
+        this.startPoint = null;
+        this.currentDeviceType = null;
+        this.currentPointerId = 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,
+            thickness: 4,
+            ...style,
+        });
+        this.styleValue.onUpdateAndNow((newValue) => {
+            this.style = newValue;
+            this.noteUpdated();
+        });
+    }
+    getPressureMultiplier() {
+        const thickness = this.style.thickness;
+        return (1 / this.editor.viewport.getScaleFactor()) * thickness;
+    }
+    // Converts a `pointer` to a `StrokeDataPoint`.
+    toStrokePoint(pointer) {
+        const minPressure = 0.3;
+        let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
+        if (!isFinite(pressure)) {
+            console.warn('Non-finite pressure!', pointer);
+            pressure = minPressure;
+        }
+        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,
+            width: pressure * this.getPressureMultiplier(),
+            color: this.style.color,
+            time: pointer.timeStamp,
+        };
+    }
+    // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
+    previewStroke() {
+        this.editor.clearWetInk();
+        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) {
+        if (!this.builder) {
+            throw new Error('No stroke is currently being generated.');
+        }
+        this.builder.addPoint(point);
+        this.lastPoint = point;
+        this.previewStroke();
+    }
+    onPointerDown(event) {
+        // Avoid canceling an existing stroke
+        if (this.builder && !this.eventCanCancelStroke(event)) {
+            return true;
+        }
+        const { current, allPointers } = event;
+        const isEraser = current.device === Pointer_1.PointerDevice.Eraser;
+        const isPen = current.device === Pointer_1.PointerDevice.Pen;
+        // Always start strokes if the current device is a pen. This is useful in the case
+        // where an accidental touch gesture from a user's hand is ongoing. This gesture
+        // should not prevent the user from drawing.
+        if ((allPointers.length === 1 && !isEraser) || isPen) {
+            this.startPoint = this.toStrokePoint(current);
+            this.builder = this.style.factory(this.startPoint, this.editor.viewport);
+            this.currentDeviceType = current.device;
+            this.currentPointerId = current.id;
+            if (this.shapeAutocompletionEnabled) {
+                this.stationaryDetector = new StationaryPenDetector_1.default(current, StationaryPenDetector_1.defaultStationaryDetectionConfig, (pointer) => this.autocorrectShape(pointer));
+            }
+            else {
+                this.stationaryDetector = null;
+            }
+            this.lastAutocorrectedShape = null;
+            this.removedAutocorrectedShapeTime = 0;
+            return true;
+        }
+        return false;
+    }
+    eventCanCancelStroke(event) {
+        // If there has been a delay since the last input event,
+        // it's always okay to cancel
+        const lastInputTime = this.lastPoint?.time ?? 0;
+        if (event.current.timeStamp - lastInputTime > 1000) {
+            return true;
+        }
+        const isPenStroke = this.currentDeviceType === Pointer_1.PointerDevice.Pen;
+        const isTouchEvent = event.current.device === Pointer_1.PointerDevice.Touch;
+        // Don't allow pen strokes to be cancelled by touch events.
+        if (isPenStroke && isTouchEvent) {
+            return false;
+        }
+        return true;
+    }
+    eventCanBeDeliveredToNonActiveTool(event) {
+        return this.eventCanCancelStroke(event);
+    }
+    onPointerMove({ current }) {
+        if (!this.builder)
+            return;
+        if (current.device !== this.currentDeviceType)
+            return;
+        if (current.id !== this.currentPointerId)
+            return;
+        const isStationary = this.stationaryDetector?.onPointerMove(current);
+        if (!isStationary) {
+            this.addPointToStroke(this.toStrokePoint(current));
+            if (this.autocorrectedShape) {
+                this.removedAutocorrectedShapeTime = performance.now();
+                this.autocorrectedShape = null;
+                this.editor.announceForAccessibility(this.editor.localization.autocorrectionCanceled);
+            }
+        }
+    }
+    onPointerUp({ current }) {
+        if (!this.builder)
+            return false;
+        if (current.id !== this.currentPointerId) {
+            // this.builder still exists, so we're handling events from another
+            // 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 = {
+            ...currentPoint,
+            width: this.lastPoint?.width ?? currentPoint.width,
+        };
+        this.addPointToStroke(strokePoint);
+        this.finalizeStroke();
+        return false;
+    }
+    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;
+        }
+        const shapeDescription = correctedShape.description(this.editor.localization);
+        this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(shapeDescription));
+        this.autocorrectedShape = correctedShape;
+        this.lastAutocorrectedShape = correctedShape;
+        this.previewStroke();
+    }
+    finalizeStroke() {
+        if (this.builder) {
+            // 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) {
+                if (stroke === this.autocorrectedShape) {
+                    this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
+                }
+                const canFlatten = true;
+                const action = EditorImage_1.default.addElement(stroke, canFlatten);
+                this.editor.dispatch(action);
+            }
+            else {
+                console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+            }
+        }
+        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, {
+            kind: types_1.EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setColor(color) {
+        if (color.toHexString() !== this.style.color.toHexString()) {
+            this.styleValue.set({
+                ...this.style,
+                color,
+            });
+        }
+    }
+    setThickness(thickness) {
+        if (thickness !== this.style.thickness) {
+            this.styleValue.set({
+                ...this.style,
+                thickness,
+            });
+        }
+    }
+    setStrokeFactory(factory) {
+        if (factory !== this.style.factory) {
+            this.styleValue.set({
+                ...this.style,
+                factory,
+            });
+        }
+    }
+    setHasStabilization(hasStabilization) {
+        const hasInputMapper = !!this.getInputMapper();
+        // TODO: Currently, this assumes that there is no other input mapper.
+        if (hasStabilization === hasInputMapper) {
+            return;
+        }
+        if (hasInputMapper) {
+            this.setInputMapper(null);
+        }
+        else {
+            this.setInputMapper(new InputStabilizer_1.default(this.editor.viewport));
+        }
+        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;
+    }
+    getStyleValue() {
+        return this.styleValue;
+    }
+    onKeyPress(event) {
+        const shortcuts = this.editor.shortcuts;
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        const isCtrlZ = shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event);
+        if (this.builder && isCtrlZ) {
+            this.finalizeStroke();
+            // Return false: Allow other listeners to handle the event (e.g.
+            // undo/redo).
+            return false;
+        }
+        let newThickness;
+        if (shortcuts.matchesShortcut(keybindings_2.decreaseSizeKeyboardShortcutId, event)) {
+            newThickness = (this.getThickness() * 2) / 3;
+        }
+        else if (shortcuts.matchesShortcut(keybindings_2.increaseSizeKeyboardShortcutId, event)) {
+            newThickness = (this.getThickness() * 3) / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 256);
+            this.setThickness(newThickness);
+            return true;
+        }
+        return false;
+    }
+}
+exports.default = Pen;

package/dist/cjs/tools/Pen.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,28 @@
+import { Color4 } from '@js-draw/math';
+import Editor from '../Editor';
+import { PointerEvt } from '../inputEvents';
+import BaseTool from './BaseTool';
+type ColorListener = (color: Color4 | null) => void;
+/**
+ * A tool used internally to pick colors from the canvas.
+ *
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
+ * is added to the root element. This can be used by themes.
+ *
+ * @internal
+ */
+export default class PipetteTool extends BaseTool {
+    private editor;
+    private colorPreviewListener;
+    private colorSelectListener;
+    constructor(editor: Editor, description: string);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    private updateSelectingStatus;
+    setColorListener(colorPreviewListener: ColorListener, colorSelectListener: ColorListener): void;
+    clearColorListener(): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    onPointerMove({ current }: PointerEvt): void;
+    onPointerUp({ current }: PointerEvt): void;
+    onGestureCancel(): void;
+}
+export {};

package/dist/cjs/tools/PipetteTool.js

@@ -0,0 +1,69 @@
+"use strict";
+// @internal @packageDocumentation
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+/**
+ * A tool used internally to pick colors from the canvas.
+ *
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
+ * is added to the root element. This can be used by themes.
+ *
+ * @internal
+ */
+class PipetteTool extends BaseTool_1.default {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+        this.enabledValue().onUpdateAndNow(() => {
+            this.updateSelectingStatus();
+        });
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    // Ensures that the root editor element correctly reflects whether color selection
+    // is in progress.
+    updateSelectingStatus() {
+        const className = 'pipette--color-selection-in-progress';
+        if (this.isEnabled() && this.colorSelectListener && this.colorPreviewListener) {
+            this.editor.getRootElement().classList.add(className);
+        }
+        else {
+            this.editor.getRootElement().classList.remove(className);
+        }
+    }
+    setColorListener(colorPreviewListener, 
+    // Called when the gesture ends -- when the user has selected a color.
+    colorSelectListener) {
+        this.colorPreviewListener = colorPreviewListener;
+        this.colorSelectListener = colorSelectListener;
+        this.updateSelectingStatus();
+    }
+    clearColorListener() {
+        this.colorPreviewListener = null;
+        this.colorSelectListener = null;
+        this.updateSelectingStatus();
+    }
+    onPointerDown({ current, allPointers }) {
+        if (this.colorPreviewListener && allPointers.length === 1) {
+            this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
+            return true;
+        }
+        return false;
+    }
+    onPointerMove({ current }) {
+        this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
+    }
+    onPointerUp({ current }) {
+        this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
+    }
+    onGestureCancel() {
+        this.colorSelectListener?.(null);
+    }
+}
+exports.default = PipetteTool;

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

@@ -0,0 +1,18 @@
+import Editor from '../Editor';
+import BaseTool from './BaseTool';
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+export default class ScrollbarTool extends BaseTool {
+    private editor;
+    private scrollbarOverlay;
+    private verticalScrollbar;
+    private horizontalScrollbar;
+    constructor(editor: Editor);
+    private fadeOutTimeout;
+    private updateScrollbars;
+}

package/dist/cjs/tools/ScrollbarTool.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const math_1 = require("@js-draw/math");
+const types_1 = require("../types");
+const BaseTool_1 = __importDefault(require("./BaseTool"));
+/**
+ * This tool, when enabled, renders scrollbars reflecting the current position
+ * of the view relative to the import/export area of the image.
+ *
+ * **Note**: These scrollbars are currently not draggable. This may change in
+ * a future release.
+ */
+class ScrollbarTool extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, 'scrollbar');
+        this.editor = editor;
+        this.fadeOutTimeout = null;
+        this.scrollbarOverlay = document.createElement('div');
+        this.scrollbarOverlay.classList.add('ScrollbarTool-overlay');
+        this.verticalScrollbar = document.createElement('div');
+        this.verticalScrollbar.classList.add('vertical-scrollbar');
+        this.horizontalScrollbar = document.createElement('div');
+        this.horizontalScrollbar.classList.add('horizontal-scrollbar');
+        this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
+        let overlay = null;
+        let viewportListener = null;
+        this.enabledValue().onUpdateAndNow((enabled) => {
+            overlay?.remove();
+            viewportListener?.remove();
+            viewportListener = null;
+            overlay = null;
+            if (enabled) {
+                viewportListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, (_event) => {
+                    this.updateScrollbars();
+                });
+                this.updateScrollbars();
+                overlay = editor.createHTMLOverlay(this.scrollbarOverlay);
+            }
+        });
+    }
+    updateScrollbars() {
+        const viewport = this.editor.viewport;
+        const screenSize = viewport.getScreenRectSize();
+        const screenRect = new math_1.Rect2(0, 0, screenSize.x, screenSize.y);
+        const imageRect = this.editor
+            .getImportExportRect()
+            // The scrollbars are positioned in screen coordinates, so the exportRect also needs
+            // to be in screen coordinates
+            .transformedBoundingBox(viewport.canvasToScreenTransform)
+            // If the screenRect is outside of the exportRect, expand the image rectangle
+            .union(screenRect);
+        const scrollbarWidth = (screenRect.width / imageRect.width) * screenSize.x;
+        const scrollbarHeight = (screenRect.height / imageRect.height) * screenSize.y;
+        const scrollbarX = ((screenRect.x - imageRect.x) / imageRect.width) * screenSize.x;
+        const scrollbarY = ((screenRect.y - imageRect.y) / imageRect.height) * screenSize.y;
+        this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
+        this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
+        this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;
+        this.verticalScrollbar.style.marginTop = `${scrollbarY}px`;
+        // Style the scrollbars differently when there's no scroll (all content visible)
+        const handleNoScrollStyling = (scrollbar, size, fillSize) => {
+            const fillsWindowClass = 'represents-no-scroll';
+            if (Math.abs(size - fillSize) < 1e-8) {
+                scrollbar.classList.add(fillsWindowClass);
+            }
+            else {
+                scrollbar.classList.remove(fillsWindowClass);
+            }
+        };
+        handleNoScrollStyling(this.horizontalScrollbar, scrollbarWidth, screenSize.x);
+        handleNoScrollStyling(this.verticalScrollbar, scrollbarHeight, screenSize.y);
+        // Fade out after a delay.
+        if (this.fadeOutTimeout !== null) {
+            clearTimeout(this.fadeOutTimeout);
+        }
+        const fadeOutDelay = 3000;
+        this.fadeOutTimeout = setTimeout(() => {
+            this.scrollbarOverlay.classList.remove('just-updated');
+        }, fadeOutDelay);
+        this.scrollbarOverlay.classList.add('just-updated');
+    }
+}
+exports.default = ScrollbarTool;

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

@@ -0,0 +1,9 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../inputEvents';
+import BaseTool from '../BaseTool';
+export default class SelectAllShortcutHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    canReceiveInputInReadOnlyEditor(): boolean;
+    onKeyPress(event: KeyPressEvent): boolean;
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const BaseTool_1 = __importDefault(require("../BaseTool"));
+const keybindings_1 = require("../keybindings");
+const SelectionTool_1 = __importDefault(require("./SelectionTool"));
+// Handles ctrl+a: Select all
+class SelectAllShortcutHandler extends BaseTool_1.default {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.selectAllTool);
+        this.editor = editor;
+    }
+    canReceiveInputInReadOnlyEditor() {
+        return true;
+    }
+    // @internal
+    onKeyPress(event) {
+        if (this.editor.shortcuts.matchesShortcut(keybindings_1.selectAllKeyboardShortcut, event)) {
+            const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
+            if (selectionTools.length > 0) {
+                const selectionTool = selectionTools[0];
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
+        return false;
+    }
+}
+exports.default = SelectAllShortcutHandler;