js-draw 0.2.3 → 0.3.0

package/dist/src/tools/PipetteTool.js

@@ -1,11 +1,9 @@
 // @internal @packageDocumentation
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export default class PipetteTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.kind = ToolType.Pipette;
         this.colorPreviewListener = null;
         this.colorSelectListener = null;
     }

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

@@ -5,7 +5,6 @@ import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
 import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 declare class Selection {
     startPoint: Point2;
     private editor;
@@ -43,7 +42,6 @@ export default class SelectionTool extends BaseTool {
     private handleOverlay;
     private prevSelectionBox;
     private selectionBox;
-    readonly kind: ToolType;
     constructor(editor: Editor, description: string);
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/dist/src/tools/SelectionTool.js

@@ -1,3 +1,6 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -11,13 +14,11 @@ var _a;
 import Duplicate from '../commands/Duplicate';
 import Erase from '../commands/Erase';
 import Mat33 from '../math/Mat33';
-// import Mat33 from "../geometry/Mat33";
 import Rect2 from '../math/Rect2';
 import { Vec2 } from '../math/Vec2';
 import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 import SerializableCommand from '../commands/SerializableCommand';
 const handleScreenSize = 30;
 const styles = `
@@ -409,11 +410,11 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
         return localizationTable.transformedElements(this.currentTransfmCommands.length);
     }
 };
+// {@inheritDoc SelectionTool!}
 export default class SelectionTool extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.kind = ToolType.Selection;
         this.handleOverlay = document.createElement('div');
         editor.createHTMLOverlay(this.handleOverlay);
         editor.addStyleSheet(styles);

package/dist/src/tools/TextTool.d.ts

@@ -4,11 +4,9 @@ import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
-import { ToolType } from './ToolController';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;
-    kind: ToolType;
     private textStyle;
     private textEditOverlay;
     private textInputElem;

package/dist/src/tools/TextTool.js

@@ -5,14 +5,12 @@ import Mat33 from '../math/Mat33';
 import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 const overlayCssClass = 'textEditorOverlay';
 export default class TextTool extends BaseTool {
     constructor(editor, description, localizationTable) {
         super(editor.notifier, description);
         this.editor = editor;
         this.localizationTable = localizationTable;
-        this.kind = ToolType.Text;
         this.textInputElem = null;
         this.textTargetPosition = null;
         this.textMeasuringCtx = null;

package/dist/src/tools/ToolController.d.ts

@@ -1,21 +1,17 @@
 import { InputEvt } from '../types';
 import Editor from '../Editor';
 import BaseTool from './BaseTool';
+import ToolEnabledGroup from './ToolEnabledGroup';
 import { ToolLocalization } from './localization';
-export declare enum ToolType {
-    Pen = 0,
-    Selection = 1,
-    Eraser = 2,
-    PanZoom = 3,
-    Text = 4,
-    UndoRedoShortcut = 5,
-    Pipette = 6,
-    Other = 7
-}
 export default class ToolController {
     private tools;
     private activeTool;
+    private primaryToolGroup;
+    /** @internal */
     constructor(editor: Editor, localization: ToolLocalization);
+    setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
+    addPrimaryTool(tool: BaseTool): void;
+    addTool(tool: BaseTool): void;
     dispatchInputEvent(event: InputEvt): boolean;
-    getMatchingTools(kind: ToolType): BaseTool[];
+    getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
 }

package/dist/src/tools/ToolController.js

@@ -8,20 +8,12 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
-export var ToolType;
-(function (ToolType) {
-    ToolType[ToolType["Pen"] = 0] = "Pen";
-    ToolType[ToolType["Selection"] = 1] = "Selection";
-    ToolType[ToolType["Eraser"] = 2] = "Eraser";
-    ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
-    ToolType[ToolType["Text"] = 4] = "Text";
-    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
-    ToolType[ToolType["Pipette"] = 6] = "Pipette";
-    ToolType[ToolType["Other"] = 7] = "Other";
-})(ToolType || (ToolType = {}));
 export default class ToolController {
+    /** @internal */
     constructor(editor, localization) {
-        const primaryToolEnabledGroup = new ToolEnabledGroup();
+        this.activeTool = null;
+        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 });
@@ -30,7 +22,7 @@ export default class ToolController {
             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 TextTool(editor, localization.textTool, localization),
@@ -42,7 +34,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);
         editor.notifier.on(EditorEventType.ToolEnabled, event => {
@@ -57,6 +49,26 @@ 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`).
+    setTools(tools, primaryToolGroup) {
+        this.tools = tools;
+        this.primaryToolGroup = primaryToolGroup !== null && primaryToolGroup !== void 0 ? 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.
+    addPrimaryTool(tool) {
+        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.
+    addTool(tool) {
+        this.tools.push(tool);
+    }
     // Returns true if the event was handled
     dispatchInputEvent(event) {
         var _a, _b;
@@ -116,7 +128,7 @@ export default class ToolController {
         }
         return handled;
     }
-    getMatchingTools(kind) {
-        return this.tools.filter(tool => tool.kind === kind);
+    getMatchingTools(type) {
+        return this.tools.filter(tool => tool instanceof type);
     }
 }

package/dist/src/tools/ToolEnabledGroup.js

@@ -1,4 +1,4 @@
-// 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 {
     constructor() { }
     notifyEnabled(tool) {

package/dist/src/tools/UndoRedoShortcut.d.ts

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

package/dist/src/tools/UndoRedoShortcut.js

@@ -1,10 +1,11 @@
+// Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
+// @packageDocumentation
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
+// {@inheritDoc UndoRedoShortcut!}
 export default class UndoRedoShortcut extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.undoRedoTool);
         this.editor = editor;
-        this.kind = ToolType.UndoRedoShortcut;
     }
     // Activate undo/redo
     onKeyPress({ key, ctrlKey }) {

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

@@ -0,0 +1,12 @@
+/**
+ * @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';

package/dist/src/tools/lib.js

@@ -0,0 +1,12 @@
+/**
+ * @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 } from './Pen';
+export { default as TextTool } from './TextTool';
+export { default as SelectionTool } from './SelectionTool';
+export { default as EraserTool } from './Eraser';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.2.3",
+	"version": "0.3.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/EditorImage.ts

@@ -388,7 +388,6 @@ export class ImageNode {
 	}
 
 	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
-		// Don't render components that are < 0.1% of the viewport.
 		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
 		sortLeavesByZIndex(leaves);
 

package/src/components/builders/FreehandLineBuilder.ts

@@ -180,7 +180,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 	}
 
 	private roundPoint(point: Point2): Point2 {
-		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth);
+		let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
 
 		if (minFit < 1e-10) {
 			minFit = this.minFitAllowed;

package/src/components/lib.ts

@@ -1,3 +1,6 @@
+export * from './builders/types';
+export { makeFreehandLineBuilder } from './builders/FreehandLineBuilder';
+
 import AbstractComponent from './AbstractComponent';
 import Stroke from './Stroke';
 import Text from './Text';

package/src/lib.ts

@@ -14,7 +14,8 @@
  */
 
 import Editor from './Editor';
-export { EditorEventType } from './types';
+export { default as EditorImage } from './EditorImage';
+export * from './types';
 export { default as getLocalizationTable } from './localizations/getLocalizationTable';
 export * from './localization';
 
@@ -22,6 +23,9 @@ export { default as Color4 } from './Color4';
 export * from './math/lib';
 export * from './components/lib';
 export * from './commands/lib';
+export * from './tools/lib';
+export * from './toolbar/lib';
+export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 
 export { Editor };

package/src/rendering/Display.ts

@@ -76,8 +76,8 @@ export default class Display {
 				return this.dryInkRenderer.canRenderFromWithoutDataLoss(renderer);
 			},
 			blockResolution: cacheBlockResolution,
-			cacheSize: 500 * 500 * 4 * 150,
-			maxScale: 1.5,
+			cacheSize: 600 * 600 * 4 * 120,
+			maxScale: 1.4,
 			minComponentsPerCache: 45,
 			minComponentsToUseCache: 105,
 		});

package/src/rendering/caching/RenderingCacheNode.ts

@@ -221,11 +221,13 @@ export default class RenderingCacheNode {
 			}
 		} else {
 			// Determine whether we already have rendered the items
+			const tooSmallToRender = (rect: Rect2) => rect.w / this.region.w < 1 / this.cacheState.props.blockResolution.x;
+
 			const leaves = [];
 			for (const item of items) {
 				leaves.push(
 					...item.getLeavesIntersectingRegion(
-						this.region, rect => rect.w / this.region.w < 2 / this.cacheState.props.blockResolution.x,
+						this.region, tooSmallToRender,
 					)
 				);
 			}

package/src/rendering/renderers/CanvasRenderer.ts

@@ -59,13 +59,13 @@ export default class CanvasRenderer extends AbstractRenderer {
 	// Set parameters for lower/higher quality rendering
 	public setDraftMode(draftMode: boolean) {
 		if (draftMode) {
-			this.minSquareCurveApproxDist = 64;
-			this.minRenderSizeBothDimens = 8;
-			this.minRenderSizeAnyDimen = 2;
+			this.minSquareCurveApproxDist = 9;
+			this.minRenderSizeBothDimens = 2;
+			this.minRenderSizeAnyDimen = 0.5;
 		} else {
-			this.minSquareCurveApproxDist = 1;
-			this.minRenderSizeBothDimens = 0.5;
-			this.minRenderSizeAnyDimen = 0;
+			this.minSquareCurveApproxDist = 0.5;
+			this.minRenderSizeBothDimens = 0.3;
+			this.minRenderSizeAnyDimen = 1e-5;
 		}
 	}
 

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