js-draw 0.13.1 → 0.15.0

package/dist/src/components/TextComponent.js

@@ -2,8 +2,9 @@ import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { Vec2 } from '../math/Vec2';
-import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
+import { textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
+import { createRestyleComponentCommand } from './RestylableComponent';
 const componentTypeId = 'text';
 export default class TextComponent extends AbstractComponent {
     constructor(textObjects, transform, style) {
@@ -11,6 +12,8 @@ export default class TextComponent extends AbstractComponent {
         this.textObjects = textObjects;
         this.transform = transform;
         this.style = style;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
         this.recomputeBBox();
         // If this has no direct children, choose a style representative of this' content
         // (useful for estimating the style of the TextComponent).
@@ -117,12 +120,43 @@ export default class TextComponent extends AbstractComponent {
         }
         return false;
     }
-    getBaselinePos() {
-        return this.transform.transformVec2(Vec2.zero);
+    getStyle() {
+        return {
+            color: this.style.renderingStyle.fill,
+            // Make a copy
+            textStyle: Object.assign(Object.assign({}, this.style), { renderingStyle: Object.assign({}, this.style.renderingStyle) }),
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    forceStyle(style, editor) {
+        if (style.textStyle) {
+            this.style = style.textStyle;
+        }
+        else if (style.color) {
+            this.style.renderingStyle = Object.assign(Object.assign({}, this.style.renderingStyle), { fill: style.color });
+        }
+        else {
+            return;
+        }
+        for (const child of this.textObjects) {
+            if (child instanceof TextComponent) {
+                child.forceStyle(style, editor);
+            }
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
     }
+    // See this.getStyle
     getTextStyle() {
         return this.style;
     }
+    getBaselinePos() {
+        return this.transform.transformVec2(Vec2.zero);
+    }
     getTransform() {
         return this.transform;
     }
@@ -148,9 +182,10 @@ export default class TextComponent extends AbstractComponent {
     description(localizationTable) {
         return localizationTable.text(this.getText());
     }
+    // Do not rely on the output of `serializeToJSON` taking any particular format.
     serializeToJSON() {
-        const serializableStyle = Object.assign(Object.assign({}, this.style), { renderingStyle: styleToJSON(this.style.renderingStyle) });
-        const textObjects = this.textObjects.map(text => {
+        const serializableStyle = textStyleToJSON(this.style);
+        const serializedTextObjects = this.textObjects.map(text => {
             if (typeof text === 'string') {
                 return {
                     text,
@@ -163,19 +198,17 @@ export default class TextComponent extends AbstractComponent {
             }
         });
         return {
-            textObjects,
+            textObjects: serializedTextObjects,
             transform: this.transform.toArray(),
             style: serializableStyle,
         };
     }
+    // @internal
     static deserializeFromString(json) {
-        const style = {
-            renderingStyle: styleFromJSON(json.style.renderingStyle),
-            size: json.style.size,
-            fontWeight: json.style.fontWeight,
-            fontVariant: json.style.fontVariant,
-            fontFamily: json.style.fontFamily,
-        };
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        const style = textStyleFromJSON(json.style);
         const textObjects = json.textObjects.map((data) => {
             var _a;
             if (((_a = data.text) !== null && _a !== void 0 ? _a : null) !== null) {

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

@@ -7,4 +7,5 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -7,4 +7,5 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import { createRestyleComponentCommand } from './RestylableComponent';
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/localization.d.ts

@@ -4,5 +4,6 @@ export interface ImageComponentLocalization {
     imageNode: (description: string) => string;
     stroke: string;
     svgObject: string;
+    restyledElements: string;
 }
 export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/src/components/localization.js

@@ -2,6 +2,7 @@ export const defaultComponentLocalization = {
     unlabeledImageNode: 'Unlabeled image node',
     stroke: 'Stroke',
     svgObject: 'SVG Object',
+    restyledElements: 'Restyled elements',
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,
 };

package/dist/src/math/Path.js

@@ -347,6 +347,7 @@ export default class Path {
     // @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
     //   conversions can lead to smaller output strings, but also take time.
     static toString(startPoint, parts, onlyAbsCommands) {
+        var _a;
         const result = [];
         let prevPoint;
         const addCommand = (command, ...points) => {
@@ -382,7 +383,7 @@ export default class Path {
                 commandString = `${command.toLowerCase()}${relativeCommandParts.join(' ')}`;
             }
             // Don't add no-ops.
-            if (commandString === 'l0,0') {
+            if (commandString === 'l0,0' || commandString === 'm0,0') {
                 return;
             }
             result.push(commandString);
@@ -390,9 +391,15 @@ export default class Path {
                 prevPoint = points[points.length - 1];
             }
         };
-        addCommand('M', startPoint);
+        // Don't add two moveTos in a row (this can happen if
+        // the start point corresponds to a moveTo _and_ the first command is
+        // also a moveTo)
+        if (((_a = parts[0]) === null || _a === void 0 ? void 0 : _a.kind) !== PathCommandType.MoveTo) {
+            addCommand('M', startPoint);
+        }
         let exhaustivenessCheck;
-        for (const part of parts) {
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
             switch (part.kind) {
                 case PathCommandType.MoveTo:
                     addCommand('M', part.point);

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

@@ -0,0 +1,23 @@
+import RenderingStyle from './RenderingStyle';
+export interface TextStyle {
+    size: number;
+    fontFamily: string;
+    fontWeight?: string;
+    fontVariant?: string;
+    renderingStyle: RenderingStyle;
+}
+export default TextStyle;
+export declare const textStyleFromJSON: (json: any) => TextStyle;
+export declare const textStyleToJSON: (style: TextStyle) => {
+    renderingStyle: {
+        fill: string;
+        stroke: {
+            color: string;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};

package/dist/src/rendering/TextRenderingStyle.js

@@ -0,0 +1,20 @@
+import { styleFromJSON, styleToJSON } from './RenderingStyle';
+export const textStyleFromJSON = (json) => {
+    if (typeof json === 'string') {
+        json = JSON.parse(json);
+    }
+    if (typeof (json.fontFamily) !== 'string') {
+        throw new Error('Serialized textStyle missing string fontFamily attribute!');
+    }
+    const style = {
+        renderingStyle: styleFromJSON(json.renderingStyle),
+        size: json.size,
+        fontWeight: json.fontWeight,
+        fontVariant: json.fontVariant,
+        fontFamily: json.fontFamily,
+    };
+    return style;
+};
+export const textStyleToJSON = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: styleToJSON(style.renderingStyle) });
+};

package/dist/src/rendering/renderers/AbstractRenderer.d.ts

@@ -1,11 +1,11 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];

package/dist/src/rendering/renderers/CanvasRenderer.d.ts

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;

package/dist/src/rendering/renderers/DummyRenderer.d.ts

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,10 +1,10 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
 export default class SVGRenderer extends AbstractRenderer {

package/dist/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;

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

@@ -1,8 +1,35 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/TextComponent';
+import TextStyle from '../rendering/TextRenderingStyle';
 import Pen from '../tools/Pen';
-type IconType = SVGSVGElement | HTMLImageElement;
+export type IconType = HTMLImageElement | SVGElement;
+/**
+ * Provides icons that can be used in the toolbar, etc.
+ * Extend this class and override methods to customize icons.
+ *
+ * @example
+ * ```ts
+ * class CustomIconProvider extends jsdraw.IconProvider {
+ *     // Use '☺' instead of the default dropdown symbol.
+ *     public makeDropdownIcon() {
+ *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ *         icon.innerHTML = `
+ *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
+ *         `;
+ *         icon.setAttribute('viewBox', '0 0 100 100');
+ *         return icon;
+ *     }
+ * }
+ *
+ * const icons = new CustomIconProvider();
+ * const editor = new jsdraw.Editor(document.body, {
+ *     iconProvider: icons,
+ * });
+ *
+ * // Add a toolbar that uses these icons
+ * editor.addToolbar();
+ * ```
+ */
 export default class IconProvider {
     makeUndoIcon(): IconType;
     makeRedoIcon(mirror?: boolean): IconType;
@@ -24,10 +51,10 @@ export default class IconProvider {
     makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
+    makeFormatSelectionIcon(): IconType;
     makeResizeViewportIcon(): IconType;
     makeDuplicateSelectionIcon(): IconType;
     makePasteIcon(): IconType;
     makeDeleteSelectionIcon(): IconType;
     makeSaveIcon(): IconType;
 }
-export {};

package/dist/src/toolbar/IconProvider.js

@@ -24,8 +24,33 @@ const checkerboardPatternDef = `
 	</pattern>
 `;
 const checkerboardPatternRef = 'url(#checkerboard)';
-// Provides icons that can be used in the toolbar, etc.
-// Extend this class and override methods to customize icons.
+/**
+ * Provides icons that can be used in the toolbar, etc.
+ * Extend this class and override methods to customize icons.
+ *
+ * @example
+ * ```ts
+ * class CustomIconProvider extends jsdraw.IconProvider {
+ *     // Use '☺' instead of the default dropdown symbol.
+ *     public makeDropdownIcon() {
+ *         const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ *         icon.innerHTML = `
+ *             <text x='5' y='55' style='fill: var(--icon-color); font-size: 50pt;'>☺</text>
+ *         `;
+ *         icon.setAttribute('viewBox', '0 0 100 100');
+ *         return icon;
+ *     }
+ * }
+ *
+ * const icons = new CustomIconProvider();
+ * const editor = new jsdraw.Editor(document.body, {
+ *     iconProvider: icons,
+ * });
+ *
+ * // Add a toolbar that uses these icons
+ * editor.addToolbar();
+ * ```
+ */
 export default class IconProvider {
     makeUndoIcon() {
         return this.makeRedoIcon(true);
@@ -512,6 +537,16 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
+    makeFormatSelectionIcon() {
+        return this.makeIconFromPath(`
+			M 5 10
+			L 5 20 L 10 20 L 10 15 L 20 15 L 20 40 L 15 40 L 15 45 L 35 45 L 35 40 L 30 40 L 30 15 L 40 15 L 40 20 L 45 20 L 45 15 L 45 10 L 5 10 z
+			M 90 10 C 90 10 86.5 13.8 86 14 C 86 14 76.2 24.8 76 25 L 60 25 L 60 65 C 75 70 85 70 90 65 L 90 25 L 80 25 L 76.7 25 L 90 10 z
+			M 60 25 L 55 25 L 50 30 L 60 25 z
+			M 10 55 L 10 90 L 41 90 L 41 86 L 45 86 L 45 55 L 10 55 z
+			M 42 87 L 42 93 L 48 93 L 48 87 L 42 87 z 
+		`);
+    }
     makeResizeViewportIcon() {
         return this.makeIconFromPath(`
 			M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z

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

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     duplicateSelection: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
+    reformatSelection: string;
     undo: string;
     redo: string;
     zoom: string;

package/dist/src/toolbar/localization.js

@@ -5,6 +5,7 @@ export const defaultToolbarLocalization = {
     handTool: 'Pan',
     zoom: 'Zoom',
     image: 'Image',
+    reformatSelection: 'Format selection',
     inputAltText: 'Alt text: ',
     chooseFile: 'Choose file: ',
     submit: 'Submit',

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -88,24 +88,30 @@ export default class BaseWidget {
             }
             // If we didn't do anything with the event, send it to the editor.
             if (!handled) {
-                this.editor.toolController.dispatchInputEvent({
+                handled = this.editor.toolController.dispatchInputEvent({
                     kind: InputEvtType.KeyPressEvent,
                     key: evt.key,
-                    ctrlKey: evt.ctrlKey,
+                    ctrlKey: evt.ctrlKey || evt.metaKey,
                     altKey: evt.altKey,
                 });
             }
+            if (handled) {
+                evt.preventDefault();
+            }
         };
         button.onkeyup = evt => {
             if (evt.key in clickTriggers) {
                 return;
             }
-            this.editor.toolController.dispatchInputEvent({
+            const handled = this.editor.toolController.dispatchInputEvent({
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
-                ctrlKey: evt.ctrlKey,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
                 altKey: evt.altKey,
             });
+            if (handled) {
+                evt.preventDefault();
+            }
         };
         button.onclick = () => {
             if (!this.disabled) {

package/dist/src/toolbar/widgets/InsertImageWidget.js

@@ -10,7 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import ImageComponent from '../../components/ImageComponent';
 import Erase from '../../commands/Erase';
 import EditorImage from '../../EditorImage';
-import { SelectionTool, uniteCommands } from '../../lib';
+import uniteCommands from '../../commands/uniteCommands';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import Mat33 from '../../math/Mat33';
 import fileToBase64 from '../../util/fileToBase64';
 import ActionButtonWidget from './ActionButtonWidget';

package/dist/src/toolbar/widgets/SelectionToolWidget.js

@@ -7,9 +7,82 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import Color4 from '../../Color4';
+import { isRestylableComponent } from '../../components/RestylableComponent';
+import uniteCommands from '../../commands/uniteCommands';
 import { EditorEventType } from '../../types';
+import makeColorInput from '../makeColorInput';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+class RestyleSelectionWidget extends BaseWidget {
+    constructor(editor, selectionTool, localizationTable) {
+        super(editor, 'restyle-selection', localizationTable);
+        this.selectionTool = selectionTool;
+        this.updateFormatData = () => { };
+        // Allow showing the dropdown even if this widget isn't selected yet
+        this.container.classList.add('dropdownShowable');
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            if (toolEvt.tool === this.selectionTool) {
+                this.updateFormatData();
+            }
+        });
+    }
+    getTitle() {
+        return this.localizationTable.reformatSelection;
+    }
+    createIcon() {
+        return this.editor.icons.makeFormatSelectionIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const colorLabel = document.createElement('label');
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                const updateStyleCommands = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if (isRestylableComponent(elem)) {
+                        updateStyleCommands.push(elem.updateStyle({ color }));
+                    }
+                }
+                const unitedCommand = uniteCommands(updateStyleCommands);
+                this.editor.dispatch(unitedCommand);
+            }
+        });
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        this.updateFormatData = () => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                colorInput.disabled = false;
+                const colors = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if (isRestylableComponent(elem)) {
+                        const color = elem.getStyle().color;
+                        if (color) {
+                            colors.push(color);
+                        }
+                    }
+                }
+                setColorInputValue(Color4.average(colors));
+            }
+            else {
+                colorInput.disabled = true;
+            }
+        };
+        colorRow.replaceChildren(colorLabel, colorInputContainer);
+        container.replaceChildren(colorRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
 export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'selection-tool-widget', localization);
@@ -26,13 +99,16 @@ export default class SelectionToolWidget extends BaseToolWidget {
             const selection = this.tool.getSelection();
             this.editor.dispatch(yield selection.duplicateSelectedObjects());
         }), localization);
+        const restyleButton = new RestyleSelectionWidget(editor, this.tool, localization);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);
+        this.addSubWidget(restyleButton);
         const updateDisabled = (disabled) => {
             resizeButton.setDisabled(disabled);
             deleteButton.setDisabled(disabled);
             duplicateButton.setDisabled(disabled);
+            restyleButton.setDisabled(disabled);
         };
         updateDisabled(true);
         // Enable/disable actions based on whether items are selected
@@ -42,7 +118,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
             }
             if (toolEvt.tool === this.tool) {
                 const selection = this.tool.getSelection();
-                const hasSelection = selection && selection.region.area > 0;
+                const hasSelection = selection && selection.getSelectedItemCount() > 0;
                 updateDisabled(!hasSelection);
             }
         });

package/dist/src/tools/Pen.js

@@ -152,7 +152,7 @@ export default class Pen extends BaseTool {
             this.setThickness(newThickness);
             return true;
         }
-        if (key === 'control') {
+        if (key === 'control' || key === 'meta') {
             this.ctrlKeyPressed = true;
             return true;
         }
@@ -164,7 +164,7 @@ export default class Pen extends BaseTool {
     }
     onKeyUp({ key }) {
         key = key.toLowerCase();
-        if (key === 'control') {
+        if (key === 'control' || key === 'meta') {
             this.ctrlKeyPressed = false;
             return true;
         }

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

@@ -0,0 +1,8 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import BaseTool from '../BaseTool';
+export default class SelectAllShortcutHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+}

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

@@ -0,0 +1,22 @@
+import BaseTool from '../BaseTool';
+import SelectionTool from './SelectionTool';
+// Handles ctrl+a: Select all
+export default class SelectAllShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.selectAllTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key, ctrlKey }) {
+        if (ctrlKey && key === 'a') {
+            const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+            if (selectionTools.length > 0) {
+                const selectionTool = selectionTools[0];
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
+        return false;
+    }
+}

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

@@ -23,6 +23,12 @@ export default class Selection {
     getTransform(): Mat33;
     get preTransformRegion(): Rect2;
     get region(): Rect2;
+    /**
+     * Computes and returns the bounding box of the selection without
+     * any additional padding. Computes directly from the elements that are selected.
+     * @internal
+     */
+    computeTightBoundingBox(): Rect2;
     get regionRotation(): number;
     get preTransformedScreenRegion(): Rect2;
     get preTransformedScreenRegionRotation(): number;