js-draw 0.2.3 → 0.3.1

package/src/toolbar/widgets/BaseWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import { InputEvtType } from '../../types';
+import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';
@@ -14,6 +14,7 @@ export default abstract class BaseWidget {
 	#hasDropdown: boolean;
 	private disabled: boolean = false;
 	private subWidgets: BaseWidget[] = [];
+	private toplevel: boolean = true;
 
 	public constructor(
 		protected editor: Editor,
@@ -46,6 +47,7 @@ export default abstract class BaseWidget {
 
 		for (const widget of this.subWidgets) {
 			widget.addTo(dropdown);
+			widget.setIsToplevel(false);
 		}
 		return true;
 	}
@@ -103,6 +105,7 @@ export default abstract class BaseWidget {
 	}
 
 	// Adds this to [parent]. This can only be called once for each ToolbarWidget.
+	// @internal
 	public addTo(parent: HTMLElement) {
 		this.label.innerText = this.getTitle();
 
@@ -119,6 +122,19 @@ export default abstract class BaseWidget {
 			this.dropdownIcon = this.createDropdownIcon();
 			this.button.appendChild(this.dropdownIcon);
 			this.container.appendChild(this.dropdownContainer);
+
+			this.editor.notifier.on(EditorEventType.ToolbarDropdownShown, (evt) => {
+				if (
+					evt.kind === EditorEventType.ToolbarDropdownShown
+					&& evt.parentWidget !== this
+
+					// Don't hide if a submenu wash shown (it might be a submenu of
+					// the current menu).
+					&& evt.parentWidget.toplevel
+				) {
+					this.setDropdownVisible(false);
+				}
+			});
 		}
 
 		this.setDropdownVisible(false);
@@ -171,6 +187,11 @@ export default abstract class BaseWidget {
 			this.editor.announceForAccessibility(
 				this.localizationTable.dropdownShown(this.getTitle())
 			);
+
+			this.editor.notifier.dispatch(EditorEventType.ToolbarDropdownShown, {
+				kind: EditorEventType.ToolbarDropdownShown,
+				parentWidget: this,
+			});
 		} else {
 			this.dropdownContainer.classList.add('hidden');
 			this.container.classList.remove('dropdownVisible');
@@ -195,6 +216,11 @@ export default abstract class BaseWidget {
 		}
 	}
 
+	/** Set whether the widget is contained within another. @internal */
+	protected setIsToplevel(toplevel: boolean) {
+		this.toplevel = toplevel;
+	}
+
 	protected isDropdownVisible(): boolean {
 		return !this.dropdownContainer.classList.contains('hidden');
 	}

package/src/toolbar/widgets/{EraserWidget.ts → EraserToolWidget.ts}

@@ -1,7 +1,7 @@
 import { makeEraserIcon } from '../icons';
 import BaseToolWidget from './BaseToolWidget';
 
-export default class EraserWidget extends BaseToolWidget {
+export default class EraserToolWidget extends BaseToolWidget {
 	protected getTitle(): string {
 		return this.localizationTable.eraser;
 	}

package/src/toolbar/widgets/{PenWidget.ts → PenToolWidget.ts}

@@ -1,5 +1,3 @@
-// @internal @packageDocumentation
-
 import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
 import { makeLineBuilder } from '../../components/builders/LineBuilder';
@@ -15,12 +13,15 @@ import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
 
 
-interface PenTypeRecord {
+export interface PenTypeRecord {
+	// Description of the factory (e.g. 'Freehand line')
 	name: string;
+
+	// Creates an `AbstractComponent` from pen input.
 	factory: ComponentBuilderFactory;
 }
 
-export default class PenWidget extends BaseToolWidget {
+export default class PenToolWidget extends BaseToolWidget {
 	private updateInputs: ()=> void = () => {};
 	protected penTypes: PenTypeRecord[];
 
@@ -97,8 +98,8 @@ export default class PenWidget extends BaseToolWidget {
 		const objectTypeSelect = document.createElement('select');
 
 		// Give inputs IDs so we can label them with a <label for=...>Label text</label>
-		thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenWidget.idCounter++}`;
-		objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenWidget.idCounter++}`;
+		thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${PenToolWidget.idCounter++}`;
+		objectTypeSelect.id = `${toolbarCSSPrefix}builderSelect${PenToolWidget.idCounter++}`;
 
 		thicknessLabel.innerText = this.localizationTable.thicknessLabel;
 		thicknessLabel.setAttribute('for', thicknessInput.id);
@@ -106,7 +107,7 @@ export default class PenWidget extends BaseToolWidget {
 		objectSelectLabel.setAttribute('for', objectTypeSelect.id);
 
 		thicknessInput.type = 'range';
-		thicknessInput.min = '1';
+		thicknessInput.min = '2';
 		thicknessInput.max = '20';
 		thicknessInput.step = '1';
 		thicknessInput.oninput = () => {
@@ -133,7 +134,7 @@ export default class PenWidget extends BaseToolWidget {
 			this.tool.setColor(color);
 		});
 
-		colorInput.id = `${toolbarCSSPrefix}colorInput${PenWidget.idCounter++}`;
+		colorInput.id = `${toolbarCSSPrefix}colorInput${PenToolWidget.idCounter++}`;
 		colorLabel.innerText = this.localizationTable.colorLabel;
 		colorLabel.setAttribute('for', colorInput.id);
 
@@ -164,4 +165,4 @@ export default class PenWidget extends BaseToolWidget {
 		dropdown.replaceChildren(container);
 		return true;
 	}
-}
+}

package/src/toolbar/widgets/{SelectionWidget.ts → SelectionToolWidget.ts}

@@ -6,7 +6,7 @@ import { ToolbarLocalization } from '../localization';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
 
-export class SelectionWidget extends BaseToolWidget {
+export default class SelectionToolWidget extends BaseToolWidget {
 	public constructor(
 		editor: Editor, private tool: SelectionTool, localization: ToolbarLocalization
 	) {

package/src/toolbar/widgets/lib.ts

@@ -0,0 +1,10 @@
+
+export { default as ActionButtonWidget } from './ActionButtonWidget';
+export { default as BaseToolWidget } from './BaseToolWidget';
+export { default as BaseWidget } from './BaseWidget';
+
+export { default as PenToolWidget } from './PenToolWidget';
+export { default as TextToolWidget } from './TextToolWidget';
+export { default as HandToolWidget } from './HandToolWidget';
+export { default as SelectionToolWidget } from './SelectionToolWidget';
+export { default as EraserToolWidget } from './EraserToolWidget';

package/src/tools/BaseTool.ts

@@ -1,5 +1,4 @@
 import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, EditorEventType, KeyPressEvent, KeyUpEvent } from '../types';
-import { ToolType } from './ToolController';
 import ToolEnabledGroup from './ToolEnabledGroup';
 
 export default abstract class BaseTool implements PointerEvtListener {
@@ -11,8 +10,6 @@ export default abstract class BaseTool implements PointerEvtListener {
 	public onPointerUp(_event: PointerEvt) { }
 	public onGestureCancel() { }
 
-	public abstract readonly kind: ToolType;
-
 	protected constructor(private notifier: EditorNotifier, public readonly description: string) {
 	}
 
@@ -59,5 +56,13 @@ export default abstract class BaseTool implements PointerEvtListener {
 
 		this.group = group;
 	}
+
+	public getToolGroup(): ToolEnabledGroup|null {
+		if (this.group) {
+			return this.group;
+		}
+
+		return null;
+	}
 }
 

package/src/tools/Eraser.ts

@@ -4,14 +4,12 @@ import Editor from '../Editor';
 import { Point2 } from '../math/Vec2';
 import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
-import { ToolType } from './ToolController';
 import AbstractComponent from '../components/AbstractComponent';
 import { PointerDevice } from '../Pointer';
 
 export default class Eraser extends BaseTool {
 	private lastPoint: Point2;
 	private command: Erase|null = null;
-	public kind: ToolType = ToolType.Eraser;
 	private toRemove: AbstractComponent[];
 
 	public constructor(private editor: Editor, description: string) {

package/src/tools/PanZoom.ts

@@ -7,7 +7,6 @@ import Pointer, { PointerDevice } from '../Pointer';
 import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
 import { Viewport, ViewportTransform } from '../Viewport';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 
 interface PinchData {
 	canvasCenter: Point2;
@@ -25,7 +24,6 @@ export enum PanZoomMode {
 }
 
 export default class PanZoom extends BaseTool {
-	public readonly kind: ToolType.PanZoom = ToolType.PanZoom;
 	private transform: ViewportTransform|null = null;
 
 	private lastAngle: number;

package/src/tools/Pen.ts

@@ -3,9 +3,8 @@ import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Pointer, { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { EditorEventType, PointerEvt, StrokeDataPoint } from '../types';
+import { EditorEventType, KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 
 export interface PenStyle {
@@ -14,12 +13,10 @@ export interface PenStyle {
 }
 
 export default class Pen extends BaseTool {
-	private builder: ComponentBuilder|null = null;
-	private builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder;
+	protected builder: ComponentBuilder|null = null;
+	protected builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder;
 	private lastPoint: StrokeDataPoint|null = null;
 
-	public readonly kind: ToolType = ToolType.Pen;
-
 	public constructor(
 		private editor: Editor,
 		description: string,
@@ -32,7 +29,8 @@ export default class Pen extends BaseTool {
 		return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
 	}
 
-	private getStrokePoint(pointer: Pointer): StrokeDataPoint {
+	// Converts a `pointer` to a `StrokeDataPoint`.
+	protected toStrokePoint(pointer: Pointer): StrokeDataPoint {
 		const minPressure = 0.3;
 		let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
 
@@ -52,12 +50,14 @@ export default class Pen extends BaseTool {
 		};
 	}
 
-	private previewStroke() {
+	// Displays the stroke that is currently being built with the display's `wetInkRenderer`.
+	protected previewStroke() {
 		this.editor.clearWetInk();
 		this.builder?.preview(this.editor.display.getWetInkRenderer());
 	}
 
-	private addPointToStroke(point: StrokeDataPoint) {
+	// Throws if no stroke builder exists.
+	protected addPointToStroke(point: StrokeDataPoint) {
 		if (!this.builder) {
 			throw new Error('No stroke is currently being generated.');
 		}
@@ -78,7 +78,7 @@ export default class Pen extends BaseTool {
 		}
 
 		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
-			this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
+			this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
 			return true;
 		}
 
@@ -86,7 +86,7 @@ export default class Pen extends BaseTool {
 	}
 
 	public onPointerMove({ current }: PointerEvt): void {
-		this.addPointToStroke(this.getStrokePoint(current));
+		this.addPointToStroke(this.toStrokePoint(current));
 	}
 
 	public onPointerUp({ current }: PointerEvt): void {
@@ -95,7 +95,7 @@ export default class Pen extends BaseTool {
 		}
 
 		// onPointerUp events can have zero pressure. Use the last pressure instead.
-		const currentPoint = this.getStrokePoint(current);
+		const currentPoint = this.toStrokePoint(current);
 		const strokePoint = {
 			...currentPoint,
 			width: this.lastPoint?.width ?? currentPoint.width,
@@ -118,7 +118,7 @@ export default class Pen extends BaseTool {
 		this.editor.clearWetInk();
 	}
 
-	public onGestureCancel(): void {
+	public onGestureCancel() {
 		this.editor.clearWetInk();
 	}
 
@@ -159,4 +159,23 @@ export default class Pen extends BaseTool {
 	public getThickness() { return this.style.thickness; }
 	public getColor() { return this.style.color; }
 	public getStrokeFactory() { return this.builderFactory; }
+
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		key = key.toLowerCase();
+
+		let newThickness: number|undefined;
+		if (key === '-' || key === '_') {
+			newThickness = this.getThickness() * 2/3;
+		} else if (key === '+' || key === '=') {
+			newThickness = this.getThickness() * 3/2;
+		}
+
+		if (newThickness !== undefined) {
+			newThickness = Math.min(Math.max(1, newThickness), 128);
+			this.setThickness(newThickness);
+			return true;
+		}
+
+		return false;
+	}
 }

package/src/tools/PipetteTool.ts

@@ -4,13 +4,10 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 
 type ColorListener = (color: Color4|null)=>void;
 
 export default class PipetteTool extends BaseTool {
-	public kind: ToolType = ToolType.Pipette;
-
 	private colorPreviewListener: ColorListener|null = null;
 	private colorSelectListener: ColorListener|null = null;
 

package/src/tools/SelectionTool.test.ts

@@ -6,11 +6,10 @@ import Path from '../math/Path';
 import { Vec2 } from '../math/Vec2';
 import { InputEvtType } from '../types';
 import SelectionTool from './SelectionTool';
-import { ToolType } from './ToolController';
 import createEditor from '../testing/createEditor';
 
 const getSelectionTool = (editor: Editor): SelectionTool => {
-	return editor.toolController.getMatchingTools(ToolType.Selection)[0] as SelectionTool;
+	return editor.toolController.getMatchingTools(SelectionTool)[0];
 };
 
 const createSquareStroke = () => {

package/src/tools/SelectionTool.ts

@@ -1,17 +1,19 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
+
 import Command from '../commands/Command';
 import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import Mat33 from '../math/Mat33';
-// import Mat33 from "../geometry/Mat33";
 import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
 import { EditorLocalization } from '../localization';
 import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 import SerializableCommand from '../commands/SerializableCommand';
 
 const handleScreenSize = 30;
@@ -502,11 +504,11 @@ class Selection {
 	}
 }
 
+// {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {
 	private handleOverlay: HTMLElement;
 	private prevSelectionBox: Selection|null;
 	private selectionBox: Selection|null;
-	public readonly kind: ToolType = ToolType.Selection;
 
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);

package/src/tools/TextTool.ts

@@ -8,11 +8,9 @@ import { PointerDevice } from '../Pointer';
 import { EditorEventType, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
-import { ToolType } from './ToolController';
 
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
-	public kind: ToolType = ToolType.Text;
 	private textStyle: TextStyle;
 
 	private textEditOverlay: HTMLElement;

package/src/tools/ToolController.ts

@@ -11,38 +11,31 @@ import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
-
-export enum ToolType {
-    Pen,
-    Selection,
-    Eraser,
-    PanZoom,
-    Text,
-    UndoRedoShortcut,
-    Pipette,
-    Other,
-}
+import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 
 export default class ToolController {
 	private tools: BaseTool[];
-	private activeTool: BaseTool|null;
+	private activeTool: BaseTool|null = null;
+	private primaryToolGroup: ToolEnabledGroup;
 
+	/** @internal */
 	public constructor(editor: Editor, localization: ToolLocalization) {
-		const primaryToolEnabledGroup = new ToolEnabledGroup();
+		const primaryToolGroup = new ToolEnabledGroup();
+		this.primaryToolGroup = primaryToolGroup;
+
 		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
 		const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
 		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
 		const primaryTools = [
-			new SelectionTool(editor, localization.selectionTool),
-			new Eraser(editor, localization.eraserTool),
-
 			// Three pens
 			primaryPenTool,
-			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
+			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
 
 			// Highlighter-like pen with width=64
 			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
 
+			new Eraser(editor, localization.eraserTool),
+			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
 		];
 		this.tools = [
@@ -51,8 +44,9 @@ export default class ToolController {
 			...primaryTools,
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
+			new ToolSwitcherShortcut(editor),
 		];
-		primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
+		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
 		panZoomTool.setEnabled(true);
 		primaryPenTool.setEnabled(true);
 
@@ -70,6 +64,36 @@ export default class ToolController {
 		this.activeTool = null;
 	}
 
+	// Replaces the current set of tools with `tools`. This should only be done before
+	// the creation of the app's toolbar (if using `HTMLToolbar`).
+	public setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup) {
+		this.tools = tools;
+		this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
+	}
+
+	// Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
+	// This should be called before creating the app's toolbar.
+	public addPrimaryTool(tool: BaseTool) {
+		tool.setToolGroup(this.primaryToolGroup);
+		if (tool.isEnabled()) {
+			this.primaryToolGroup.notifyEnabled(tool);
+		}
+
+		this.addTool(tool);
+	}
+
+	public getPrimaryTools(): BaseTool[] {
+		return this.tools.filter(tool => {
+			return tool.getToolGroup() === this.primaryToolGroup;
+		});
+	}
+
+	// Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
+	// This should be called before creating the app's toolbar.
+	public addTool(tool: BaseTool) {
+		this.tools.push(tool);
+	}
+
 	// Returns true if the event was handled
 	public dispatchInputEvent(event: InputEvt): boolean {
 		let handled = false;
@@ -132,8 +156,8 @@ export default class ToolController {
 		return handled;
 	}
 
-	public getMatchingTools(kind: ToolType): BaseTool[] {
-		return this.tools.filter(tool => tool.kind === kind);
+	public getMatchingTools<Type extends BaseTool>(type: new (...args: any[])=>Type): Type[] {
+		return this.tools.filter(tool => tool instanceof type) as Type[];
 	}
 }
 

package/src/tools/ToolEnabledGroup.ts

@@ -1,6 +1,6 @@
 import BaseTool from './BaseTool';
 
-// Connects a group of tools -- at most one tool in the group must be enabled.
+// Connects a group of tools -- at most one tool in the group can be enabled.
 export default class ToolEnabledGroup {
 	private activeTool: BaseTool|null;
 	public constructor() { }

package/src/tools/ToolSwitcherShortcut.ts

@@ -0,0 +1,34 @@
+// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
+// @packageDocumentation
+
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+
+// {@inheritDoc ToolSwitcherShortcut!}
+export default class ToolSwitcherShortcut extends BaseTool {
+	public constructor(private editor: Editor) {
+		super(editor.notifier, editor.localization.changeTool);
+	}
+	
+	public onKeyPress({ key }: KeyPressEvent): boolean {
+		const toolController = this.editor.toolController;
+		const primaryTools = toolController.getPrimaryTools();
+
+		// Map keys 0-9 to primary tools.
+		const keyMatch = /^[0-9]$/.exec(key);
+
+		let targetTool: BaseTool|undefined;
+		if (keyMatch) {
+			const targetIdx = parseInt(keyMatch[0], 10) - 1;
+			targetTool = primaryTools[targetIdx];
+		}
+
+		if (targetTool) {
+			targetTool.setEnabled(true);
+			return true;
+		}
+
+		return false;
+	}
+}

package/src/tools/UndoRedoShortcut.ts

@@ -1,12 +1,12 @@
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+// @packageDocumentation
+
 import Editor from '../Editor';
 import { KeyPressEvent } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
-
 
+// {@inheritDoc UndoRedoShortcut!}
 export default class UndoRedoShortcut extends BaseTool {
-	public kind: ToolType.UndoRedoShortcut = ToolType.UndoRedoShortcut;
-
 	public constructor(private editor: Editor) {
 		super(editor.notifier, editor.localization.undoRedoTool);
 	}

package/src/tools/lib.ts

@@ -0,0 +1,18 @@
+
+/**
+ * @packageDocumentation
+ */
+
+export { default as BaseTool } from './BaseTool';
+export { default as ToolController } from './ToolController';
+export { default as ToolEnabledGroup } from './ToolEnabledGroup';
+
+export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
+export { default as PanZoomTool, PanZoomMode } from './PanZoom';
+
+export { default as PenTool, PenStyle } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool';
+export { default as EraserTool } from './Eraser';
+

package/src/tools/localization.ts

@@ -12,6 +12,7 @@ export interface ToolLocalization {
 
 	textTool: string;
 	enterTextToInsert: string;
+	changeTool: string;
 
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
@@ -30,6 +31,7 @@ export const defaultToolLocalization: ToolLocalization = {
 
 	textTool: 'Text',
 	enterTextToInsert: 'Text to insert',
+	changeTool: 'Change tool',
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,

package/src/types.ts

@@ -10,6 +10,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
+import { BaseWidget } from './lib';
 
 
 export interface PointerEvtListener {
@@ -88,6 +89,10 @@ export type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataTyp
 
 
 
+
+
+
+
 export enum EditorEventType {
 	ToolEnabled,
 	ToolDisabled,
@@ -103,6 +108,7 @@ export enum EditorEventType {
 
 	ColorPickerToggled,
 	ColorPickerColorSelected,
+	ToolbarDropdownShown,
 }
 
 type EditorToolEventType = EditorEventType.ToolEnabled
@@ -157,10 +163,16 @@ export interface ColorPickerColorSelected {
 	readonly color: Color4;
 }
 
+export interface ToolbarDropdownShownEvent {
+	readonly kind: EditorEventType.ToolbarDropdownShown;
+	readonly parentWidget: BaseWidget;
+}
+
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent
 	| EditorViewportChangedEvent | DisplayResizedEvent
 	| EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent
-	| ColorPickerToggled | ColorPickerColorSelected;
+	| ColorPickerToggled | ColorPickerColorSelected
+	| ToolbarDropdownShownEvent;
 
 
 // Returns a Promise to indicate that the event source should pause until the Promise resolves.