js-draw 0.2.3 → 0.3.0

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.');
 		}
@@ -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();
 	}
 

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';
+