js-draw 0.14.0 → 0.15.0

package/src/components/TextComponent.ts

@@ -1,24 +1,22 @@
+import SerializableCommand from '../commands/SerializableCommand';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
 import { Vec2 } from '../math/Vec2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
+import { TextStyle, textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-
-export interface TextStyle {
-	size: number;
-	fontFamily: string;
-	fontWeight?: string;
-	fontVariant?: string;
-	renderingStyle: RenderingStyle;
-}
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
 
 const componentTypeId = 'text';
-export default class TextComponent extends AbstractComponent {
+export default class TextComponent extends AbstractComponent implements RestyleableComponent {
 	protected contentBBox: Rect2;
 
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
 	public constructor(
 		protected readonly textObjects: Array<string|TextComponent>,
 		private transform: Mat33,
@@ -152,14 +150,57 @@ export default class TextComponent extends AbstractComponent {
 		return false;
 	}
 
-	public getBaselinePos() {
-		return this.transform.transformVec2(Vec2.zero);
+	public getStyle(): ComponentStyle {
+		return {
+			color: this.style.renderingStyle.fill,
+
+			// Make a copy
+			textStyle: {
+				...this.style,
+				renderingStyle: {
+					...this.style.renderingStyle,
+				},
+			},
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	public forceStyle(style: ComponentStyle, editor: Editor|null): void {
+		if (style.textStyle) {
+			this.style = style.textStyle;
+		} else if (style.color) {
+			this.style.renderingStyle = {
+				...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
 	public getTextStyle() {
 		return this.style;
 	}
 
+	public getBaselinePos() {
+		return this.transform.transformVec2(Vec2.zero);
+	}
+
 	public getTransform(): Mat33 {
 		return this.transform;
 	}
@@ -191,13 +232,11 @@ export default class TextComponent extends AbstractComponent {
 		return localizationTable.text(this.getText());
 	}
 
+	// Do not rely on the output of `serializeToJSON` taking any particular format.
 	protected serializeToJSON(): Record<string, any> {
-		const serializableStyle = {
-			...this.style,
-			renderingStyle: styleToJSON(this.style.renderingStyle),
-		};
+		const serializableStyle = textStyleToJSON(this.style);
 
-		const textObjects = this.textObjects.map(text => {
+		const serializedTextObjects = this.textObjects.map(text => {
 			if (typeof text === 'string') {
 				return {
 					text,
@@ -210,20 +249,19 @@ export default class TextComponent extends AbstractComponent {
 		});
 
 		return {
-			textObjects,
+			textObjects: serializedTextObjects,
 			transform: this.transform.toArray(),
 			style: serializableStyle,
 		};
 	}
 
+	// @internal
 	public static deserializeFromString(json: any): TextComponent {
-		const style: TextStyle = {
-			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: Array<string|TextComponent> = json.textObjects.map((data: any) => {
 			if ((data.text ?? null) !== null) {

package/src/components/lib.ts

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

package/src/components/localization.ts

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

package/src/math/Rect2.test.ts

@@ -77,13 +77,23 @@ describe('Rect2', () => {
 		expect(new Rect2(-2, -2, 4, 4).containsRect(new Rect2(-1, 0, 10, 1))).toBe(false);
 	});
 
-	it('a rectangle should contain itself', () => {
-		const rect = new Rect2(1 / 3, 1 / 4, 1 / 5, 1 / 6);
-		expect(rect.containsRect(rect)).toBe(true);
-	});
+	describe('containsRect', () => {
+		it('a rectangle should contain itself', () => {
+			const rect = new Rect2(1 / 3, 1 / 4, 1 / 5, 1 / 6);
+			expect(rect.containsRect(rect)).toBe(true);
+		});
 
-	it('empty rect should not contain a larger rect', () => {
-		expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
+		it('empty rect should not contain a larger rect', () => {
+			expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
+		});
+
+		it('should correctly contain rectangles', () => {
+			const testRect = new Rect2(4, -10, 50, 100);
+			expect(testRect.containsRect(new Rect2(4.1, 0, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, 0, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, -9, 1, 1))).toBe(true);
+			expect(testRect.containsRect(new Rect2(48, -9, 1, 91))).toBe(true);
+		});
 	});
 
 	it('intersecting rectangles should be identified as intersecting', () => {
@@ -92,6 +102,8 @@ describe('Rect2', () => {
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 10, 10))).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(3, 3, 10, 10))).toBe(false);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0.2, 0.1, 0, 0))).toBe(true);
+		expect(new Rect2(-100, -1, 200, 2).intersects(new Rect2(-5, -5, 10, 30))).toBe(true);
+		expect(new Rect2(-100, -1, 200, 2).intersects(new Rect2(-5, 50, 10, 30))).toBe(false);
 	});
 
 	it('intersecting rectangles should have their intersections correctly computed', () => {

package/src/rendering/TextRenderingStyle.ts

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

package/src/rendering/renderers/AbstractRenderer.ts

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

package/src/rendering/renderers/CanvasRenderer.ts

@@ -1,11 +1,12 @@
 import Color4 from '../../Color4';
-import TextComponent, { TextStyle } from '../../components/TextComponent';
+import TextComponent 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 {

package/src/rendering/renderers/DummyRenderer.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';
 
 // Renderer that outputs almost nothing. Useful for automated tests.

package/src/rendering/renderers/SVGRenderer.ts

@@ -1,6 +1,5 @@
 
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path from '../../math/Path';
 import Rect2 from '../../math/Rect2';
@@ -9,6 +8,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, SVGLoaderUnknownAttribute, SVGLoaderUnknownStyleAttribute, svgStyleAttributesDataKey } from '../../SVGLoader';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
 export const renderedStylesheetId = 'js-draw-style-sheet';

package/src/rendering/renderers/TextOnlyRenderer.ts

@@ -1,4 +1,3 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Vec2 } from '../../math/Vec2';
@@ -6,6 +5,7 @@ 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';
 
 // Outputs a description of what was rendered.

package/src/toolbar/IconProvider.ts

@@ -1,9 +1,9 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/TextComponent';
 import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import TextStyle from '../rendering/TextRenderingStyle';
 import Pen from '../tools/Pen';
 import { StrokeDataPoint } from '../types';
 import Viewport from '../Viewport';
@@ -609,6 +609,17 @@ export default class IconProvider {
 		icon.setAttribute('viewBox', '0 0 100 100');
 		return icon;
 	}
+
+	public makeFormatSelectionIcon(): IconType {
+		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 
+		`);
+	}
 	
 	public makeResizeViewportIcon(): IconType {
 		return this.makeIconFromPath(`

package/src/toolbar/localization.ts

@@ -28,6 +28,7 @@ export interface ToolbarLocalization {
 	duplicateSelection: string;
 	pickColorFromScreen: string;
 	clickToPickColorAnnouncement: string;
+	reformatSelection: string;
 	undo: string;
 	redo: string;
 	zoom: string;
@@ -52,6 +53,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	handTool: 'Pan',
 	zoom: 'Zoom',
 	image: 'Image',
+	reformatSelection: 'Format selection',
 	inputAltText: 'Alt text: ',
 	chooseFile: 'Choose file: ',
 	submit: 'Submit',

package/src/toolbar/widgets/BaseWidget.ts

@@ -110,13 +110,17 @@ export default abstract 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 => {
@@ -124,12 +128,16 @@ export default abstract class BaseWidget {
 				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 = () => {

package/src/toolbar/widgets/InsertImageWidget.ts

@@ -2,7 +2,8 @@ import ImageComponent from '../../components/ImageComponent';
 import Editor from '../../Editor';
 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 { ToolbarLocalization } from '../localization';

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,9 +1,96 @@
+import Color4 from '../../Color4';
+import { isRestylableComponent } from '../../components/RestylableComponent';
 import Editor from '../../Editor';
+import uniteCommands from '../../commands/uniteCommands';
 import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { EditorEventType, KeyPressEvent } from '../../types';
 import { ToolbarLocalization } from '../localization';
+import makeColorInput from '../makeColorInput';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+
+class RestyleSelectionWidget extends BaseWidget {
+	private updateFormatData: ()=>void = () => {};
+
+	public constructor(editor: Editor, private selectionTool: SelectionTool, localizationTable?: ToolbarLocalization) {
+		super(editor, 'restyle-selection', localizationTable);
+
+		// 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();
+			}
+		});
+	}
+
+	protected getTitle(): string {
+		return this.localizationTable.reformatSelection;
+	}
+
+	protected createIcon(){
+		return this.editor.icons.makeFormatSelectionIcon();
+	}
+
+	protected handleClick(): void {
+		this.setDropdownVisible(!this.isDropdownVisible());
+	}
+
+	protected fillDropdown(dropdown: HTMLElement): boolean {
+		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 {
 	public constructor(
@@ -41,15 +128,22 @@ export default class SelectionToolWidget extends BaseToolWidget {
 			},
 			localization,
 		);
+		const restyleButton = new RestyleSelectionWidget(
+			editor,
+			this.tool,
+			localization,
+		);
 
 		this.addSubWidget(resizeButton);
 		this.addSubWidget(deleteButton);
 		this.addSubWidget(duplicateButton);
+		this.addSubWidget(restyleButton);
 
 		const updateDisabled = (disabled: boolean) => {
 			resizeButton.setDisabled(disabled);
 			deleteButton.setDisabled(disabled);
 			duplicateButton.setDisabled(disabled);
+			restyleButton.setDisabled(disabled);
 		};
 		updateDisabled(true);
 
@@ -61,7 +155,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/src/tools/PanZoom.test.ts

@@ -53,7 +53,8 @@ describe('PanZoom', () => {
 		sendTouchEvent(editor, InputEvtType.PointerUpEvt, Vec2.of(100, 0));
 
 		const updatedTranslation = editor.viewport.canvasToScreen(Vec2.zero);
-		expect(updatedTranslation.minus(origTranslation).magnitude()).toBe(100);
+		expect(updatedTranslation.minus(origTranslation).magnitude()).toBeGreaterThanOrEqual(100);
+		expect(updatedTranslation.minus(origTranslation).magnitude()).toBeLessThan(110);
 
 		await waitForTimeout(600); // ms
 		jest.useFakeTimers();

package/src/tools/PasteHandler.ts

@@ -6,8 +6,8 @@ import { Mat33 } from '../math/lib';
 import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
-import { TextStyle } from '../components/TextComponent';
 import ImageComponent from '../components/ImageComponent';
+import TextStyle from '../rendering/TextRenderingStyle';
 
 /**
  * A tool that handles paste events (e.g. as triggered by ctrl+V).

package/src/tools/Pen.ts

@@ -200,7 +200,7 @@ export default class Pen extends BaseTool {
 			return true;
 		}
 
-		if (key === 'control') {
+		if (key === 'control' || key === 'meta') {
 			this.ctrlKeyPressed = true;
 			return true;
 		}
@@ -216,7 +216,7 @@ export default class Pen extends BaseTool {
 	public onKeyUp({ key }: KeyUpEvent): boolean {
 		key = key.toLowerCase();
 
-		if (key === 'control') {
+		if (key === 'control' || key === 'meta') {
 			this.ctrlKeyPressed = false;
 			return true;
 		}

package/src/tools/SelectionTool/SelectAllShortcutHandler.ts

@@ -0,0 +1,28 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import BaseTool from '../BaseTool';
+import SelectionTool from './SelectionTool';
+
+// Handles ctrl+a: Select all
+export default class SelectAllShortcutHandler extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.selectAllTool);
+	}
+    
+	// @internal
+	public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
+		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/src/tools/SelectionTool/Selection.ts

@@ -265,7 +265,7 @@ export default class Selection {
 			this.selection?.setTransform(this.fullTransform.inverse(), false);
 			this.selection?.updateUI();
 
-			await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
+			await editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
 			this.selection?.setTransform(Mat33.identity);
 			this.selection?.recomputeRegion();
 			this.selection?.updateUI();

package/src/tools/SelectionTool/SelectionTool.ts

@@ -212,10 +212,10 @@ export default class SelectionTool extends BaseTool {
 		'e', 'j', 'ArrowDown',
 		'r', 'R',
 		'i', 'I', 'o', 'O',
-		'Control',
+		'Control', 'Meta',
 	];
 	public onKeyPress(event: KeyPressEvent): boolean {
-		if (event.key === 'Control') {
+		if (event.key === 'Control' || event.key === 'Meta') {
 			this.ctrlKeyPressed = true;
 			return true;
 		}
@@ -226,8 +226,7 @@ export default class SelectionTool extends BaseTool {
 			return true;
 		}
 		else if (event.key === 'a' && event.ctrlKey) {
-			// Handle ctrl+A on key up.
-			// Return early to prevent 'a' from moving the selection/view.
+			this.setSelection(this.editor.image.getAllElements());
 			return true;
 		}
 		else if (event.ctrlKey) {
@@ -335,7 +334,7 @@ export default class SelectionTool extends BaseTool {
 	}
 
 	public onKeyUp(evt: KeyUpEvent) {
-		if (evt.key === 'Control') {
+		if (evt.key === 'Control' || evt.key === 'Meta') {
 			this.ctrlKeyPressed = false;
 			return true;
 		}
@@ -351,10 +350,6 @@ export default class SelectionTool extends BaseTool {
 				});
 				return true;
 			}
-			else if (evt.key === 'a') {
-				this.setSelection(this.editor.image.getAllElements());
-				return true;
-			}
 		}
 
 		if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {