js-draw 0.2.2 → 0.3.0

package/src/toolbar/HTMLToolbar.ts

@@ -1,31 +1,32 @@
 import Editor from '../Editor';
-import { ToolType } from '../tools/ToolController';
 import { EditorEventType } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import Pen from '../tools/Pen';
-import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import { makeRedoIcon, makeUndoIcon } from './icons';
 import PanZoom from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
-import PenWidget from './widgets/PenWidget';
-import EraserWidget from './widgets/EraserWidget';
-import { SelectionWidget } from './widgets/SelectionWidget';
+import PenToolWidget from './widgets/PenToolWidget';
+import EraserWidget from './widgets/EraserToolWidget';
+import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
+import BaseWidget from './widgets/BaseWidget';
+import { EraserTool, PenTool } from '../tools/lib';
 
 
 export const toolbarCSSPrefix = 'toolbar-';
 
+type UpdateColorisCallback = ()=>void;
 
 export default class HTMLToolbar {
 	private container: HTMLElement;
 
 	private static colorisStarted: boolean = false;
+	private updateColoris: UpdateColorisCallback|null = null;
 
 	public constructor(
 		private editor: Editor, parent: HTMLElement,
@@ -45,6 +46,12 @@ export default class HTMLToolbar {
 
 	// @internal
 	public setupColorPickers() {
+		// Much of the setup only needs to be done once.
+		if (this.updateColoris) {
+			this.updateColoris();
+			return;
+		}
+
 		const closePickerOverlay = document.createElement('div');
 		closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
 		this.editor.createHTMLOverlay(closePickerOverlay);
@@ -73,6 +80,7 @@ export default class HTMLToolbar {
 			});
 		};
 		initColoris();
+		this.updateColoris = initColoris;
 
 		const addColorToSwatch = (newColor: string) => {
 			let alreadyPresent = false;
@@ -110,6 +118,13 @@ export default class HTMLToolbar {
 		});
 	}
 
+	// Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
+	// (i.e. its `addTo` method should not have been called).
+	public addWidget(widget: BaseWidget) {
+		widget.addTo(this.container);
+		this.setupColorPickers();
+	}
+
 	public addActionButton(title: string|ActionButtonIcon, command: ()=> void, parent?: Element) {
 		const button = document.createElement('button');
 		button.classList.add(`${toolbarCSSPrefix}button`);
@@ -134,7 +149,7 @@ export default class HTMLToolbar {
 		return button;
 	}
 
-	private addUndoRedoButtons() {
+	public addUndoRedoButtons() {
 		const undoRedoGroup = document.createElement('div');
 		undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
 
@@ -166,47 +181,29 @@ export default class HTMLToolbar {
 
 	public addDefaultToolWidgets() {
 		const toolController = this.editor.toolController;
-		for (const tool of toolController.getMatchingTools(ToolType.Pen)) {
-			if (!(tool instanceof Pen)) {
-				throw new Error('All `Pen` tools must have kind === ToolType.Pen');
-			}
-
-			const widget = new PenWidget(
+		for (const tool of toolController.getMatchingTools(PenTool)) {
+			const widget = new PenToolWidget(
 				this.editor, tool, this.localizationTable,
 			);
-			widget.addTo(this.container);
+			this.addWidget(widget);
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.Eraser)) {
-			if (!(tool instanceof Eraser)) {
-				throw new Error('All Erasers must have kind === ToolType.Eraser!');
-			}
-
-			(new EraserWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(EraserTool)) {
+			this.addWidget(new EraserWidget(this.editor, tool, this.localizationTable));
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.Selection)) {
-			if (!(tool instanceof SelectionTool)) {
-				throw new Error('All SelectionTools must have kind === ToolType.Selection');
-			}
-
-			(new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(SelectionTool)) {
+			this.addWidget(new SelectionToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		for (const tool of toolController.getMatchingTools(ToolType.Text)) {
-			if (!(tool instanceof TextTool)) {
-				throw new Error('All text tools must have kind === ToolType.Text');
-			}
-	
-			(new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+		for (const tool of toolController.getMatchingTools(TextTool)) {
+			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
-		if (panZoomTool && panZoomTool instanceof PanZoom) {
-			(new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
+		const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+		if (panZoomTool) {
+			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}
-
-		this.setupColorPickers();
 	}
 
 	public addDefaultActionButtons() {

package/src/toolbar/icons.ts

@@ -287,7 +287,11 @@ export const makeTextIcon = (textStyle: TextStyle) => {
 	return icon;
 };
 
-export const makePenIcon = (tipThickness: number, color: string) => {
+export const makePenIcon = (tipThickness: number, color: string|Color4) => {
+	if (color instanceof Color4) {
+		color = color.toHexString();
+	}
+
 	const icon = document.createElementNS(svgNamespace, 'svg');
 	icon.setAttribute('viewBox', '0 0 100 100');
 

package/src/toolbar/lib.ts

@@ -0,0 +1,4 @@
+
+export * from './widgets/lib';
+export * as icons from './icons';
+export * from './makeColorInput';

package/src/toolbar/makeColorInput.ts

@@ -1,7 +1,6 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import PipetteTool from '../tools/PipetteTool';
-import { ToolType } from '../tools/ToolController';
 import { EditorEventType } from '../types';
 import { makePipetteIcon } from './icons';
 
@@ -77,7 +76,7 @@ const addPipetteTool = (editor: Editor, container: HTMLElement, onColorChange: O
 	};
 	updatePipetteIcon();
 
-	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(ToolType.Pipette)[0] as PipetteTool|undefined;
+	const pipetteTool: PipetteTool|undefined = editor.toolController.getMatchingTools(PipetteTool)[0];
 	const endColorSelectMode = () => {
 		pipetteTool?.clearColorListener();
 		updatePipetteIcon();

package/src/toolbar/types.ts

@@ -1,7 +1,3 @@
-export enum ToolbarButtonType {
-	ToggleButton,
-	ActionButton,
-}
 
 export interface ActionButtonIcon {
 	icon: Element;

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) {
 	}
 

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

@@ -5,7 +5,6 @@ import Pointer, { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import { EditorEventType, 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.');
 		}
@@ -67,12 +67,18 @@ export default class Pen extends BaseTool {
 	}
 
 	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
-		if (current.device === PointerDevice.Eraser) {
-			return false;
+		const isEraser = current.device === PointerDevice.Eraser;
+
+		let anyDeviceIsStylus = false;
+		for (const pointer of allPointers) {
+			if (pointer.device === PointerDevice.Pen) {
+				anyDeviceIsStylus = true;
+				break;
+			}
 		}
 
-		if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
-			this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
+		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
+			this.builder = this.builderFactory(this.toStrokePoint(current), this.editor.viewport);
 			return true;
 		}
 
@@ -80,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 {
@@ -89,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,
@@ -112,7 +118,7 @@ export default class Pen extends BaseTool {
 		this.editor.clearWetInk();
 	}
 
-	public onGestureCancel(): void {
+	public onGestureCancel() {
 		this.editor.clearWetInk();
 	}
 

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

@@ -12,23 +12,16 @@ import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 
-export enum ToolType {
-    Pen,
-    Selection,
-    Eraser,
-    PanZoom,
-    Text,
-    UndoRedoShortcut,
-    Pipette,
-    Other,
-}
-
 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 });
@@ -38,7 +31,7 @@ export default class ToolController {
 
 			// 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 }),
@@ -52,7 +45,7 @@ export default class ToolController {
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
 		];
-		primaryTools.forEach(tool => tool.setToolGroup(primaryToolEnabledGroup));
+		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
 		panZoomTool.setEnabled(true);
 		primaryPenTool.setEnabled(true);
 
@@ -70,6 +63,30 @@ 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);
+	}
+
+	// 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 +149,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/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,17 @@
+
+/**
+ * @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 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';
+