js-draw 0.2.3 → 0.3.1

package/dist/src/toolbar/HTMLToolbar.d.ts

@@ -1,16 +1,20 @@
 import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
+import BaseWidget from './widgets/BaseWidget';
 export declare const toolbarCSSPrefix = "toolbar-";
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
     private static colorisStarted;
+    private updateColoris;
+    /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
+    addWidget(widget: BaseWidget): void;
     addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;
-    private addUndoRedoButtons;
+    addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;
 }

package/dist/src/toolbar/HTMLToolbar.js

@@ -1,24 +1,24 @@
-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 } from './localization';
 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 { EraserTool, PenTool } from '../tools/lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
+    /** @internal */
     constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;
+        this.updateColoris = null;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
         this.container.setAttribute('role', 'toolbar');
@@ -31,6 +31,11 @@ export default class HTMLToolbar {
     }
     // @internal
     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);
@@ -56,6 +61,7 @@ export default class HTMLToolbar {
             });
         };
         initColoris();
+        this.updateColoris = initColoris;
         const addColorToSwatch = (newColor) => {
             let alreadyPresent = false;
             for (const color of swatches) {
@@ -86,6 +92,12 @@ 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).
+    addWidget(widget) {
+        widget.addTo(this.container);
+        this.setupColorPickers();
+    }
     addActionButton(title, command, parent) {
         const button = document.createElement('button');
         button.classList.add(`${toolbarCSSPrefix}button`);
@@ -133,36 +145,23 @@ export default class HTMLToolbar {
     }
     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(this.editor, tool, this.localizationTable);
-            widget.addTo(this.container);
+        for (const tool of toolController.getMatchingTools(PenTool)) {
+            const widget = new PenToolWidget(this.editor, tool, this.localizationTable);
+            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();
     }
     addDefaultActionButtons() {
         this.addUndoRedoButtons();

package/dist/src/toolbar/icons.d.ts

@@ -12,7 +12,7 @@ export declare const makeTouchPanningIcon: () => SVGSVGElement;
 export declare const makeAllDevicePanningIcon: () => SVGSVGElement;
 export declare const makeZoomIcon: () => SVGSVGElement;
 export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
-export declare const makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
+export declare const makePenIcon: (tipThickness: number, color: string | Color4) => SVGSVGElement;
 export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;
 export declare const makePipetteIcon: (color?: Color4) => SVGSVGElement;
 export declare const makeResizeViewportIcon: () => SVGSVGElement;

package/dist/src/toolbar/icons.js

@@ -1,3 +1,4 @@
+import Color4 from '../Color4';
 import EventDispatcher from '../EventDispatcher';
 import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
@@ -251,6 +252,9 @@ export const makeTextIcon = (textStyle) => {
     return icon;
 };
 export const makePenIcon = (tipThickness, color) => {
+    if (color instanceof Color4) {
+        color = color.toHexString();
+    }
     const icon = document.createElementNS(svgNamespace, 'svg');
     icon.setAttribute('viewBox', '0 0 100 100');
     const halfThickness = tipThickness / 2;

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

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

package/dist/src/toolbar/lib.js

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

package/dist/src/toolbar/makeColorInput.js

@@ -1,5 +1,5 @@
 import Color4 from '../Color4';
-import { ToolType } from '../tools/ToolController';
+import PipetteTool from '../tools/PipetteTool';
 import { EditorEventType } from '../types';
 import { makePipetteIcon } from './icons';
 // Returns [ color input, input container ].
@@ -59,7 +59,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
         pipetteButton.replaceChildren(makePipetteIcon(color));
     };
     updatePipetteIcon();
-    const pipetteTool = editor.toolController.getMatchingTools(ToolType.Pipette)[0];
+    const pipetteTool = editor.toolController.getMatchingTools(PipetteTool)[0];
     const endColorSelectMode = () => {
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.clearColorListener();
         updatePipetteIcon();

package/dist/src/toolbar/types.d.ts

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

package/dist/src/toolbar/types.js

@@ -1,5 +1 @@
-export var ToolbarButtonType;
-(function (ToolbarButtonType) {
-    ToolbarButtonType[ToolbarButtonType["ToggleButton"] = 0] = "ToggleButton";
-    ToolbarButtonType[ToolbarButtonType["ActionButton"] = 1] = "ActionButton";
-})(ToolbarButtonType || (ToolbarButtonType = {}));
+export {};

package/dist/src/toolbar/widgets/BaseWidget.d.ts

@@ -12,6 +12,7 @@ export default abstract class BaseWidget {
     private label;
     private disabled;
     private subWidgets;
+    private toplevel;
     constructor(editor: Editor, localizationTable: ToolbarLocalization);
     protected abstract getTitle(): string;
     protected abstract createIcon(): Element;
@@ -26,6 +27,8 @@ export default abstract class BaseWidget {
     setSelected(selected: boolean): void;
     protected setDropdownVisible(visible: boolean): void;
     protected repositionDropdown(): void;
+    /** Set whether the widget is contained within another. @internal */
+    protected setIsToplevel(toplevel: boolean): void;
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -10,7 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
-import { InputEvtType } from '../../types';
+import { EditorEventType, InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 export default class BaseWidget {
@@ -20,6 +20,7 @@ export default class BaseWidget {
         _BaseWidget_hasDropdown.set(this, void 0);
         this.disabled = false;
         this.subWidgets = [];
+        this.toplevel = true;
         this.icon = null;
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}toolContainer`);
@@ -41,6 +42,7 @@ export default class BaseWidget {
         }
         for (const widget of this.subWidgets) {
             widget.addTo(dropdown);
+            widget.setIsToplevel(false);
         }
         return true;
     }
@@ -87,6 +89,7 @@ export default class BaseWidget {
         this.subWidgets.push(widget);
     }
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
+    // @internal
     addTo(parent) {
         this.label.innerText = this.getTitle();
         this.setupActionBtnClickListener(this.button);
@@ -99,6 +102,15 @@ export default 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);
         parent.appendChild(this.container);
@@ -144,6 +156,10 @@ export default class BaseWidget {
             this.dropdownContainer.classList.remove('hidden');
             this.container.classList.add('dropdownVisible');
             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');
@@ -164,6 +180,10 @@ export default class BaseWidget {
             this.dropdownContainer.style.transform = '';
         }
     }
+    /** Set whether the widget is contained within another. @internal */
+    setIsToplevel(toplevel) {
+        this.toplevel = toplevel;
+    }
     isDropdownVisible() {
         return !this.dropdownContainer.classList.contains('hidden');
     }

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

@@ -1,5 +1,5 @@
 import BaseToolWidget from './BaseToolWidget';
-export default class EraserWidget extends BaseToolWidget {
+export default class EraserToolWidget extends BaseToolWidget {
     protected getTitle(): string;
     protected createIcon(): Element;
     protected fillDropdown(_dropdown: HTMLElement): boolean;

package/dist/src/toolbar/widgets/{EraserWidget.js → EraserToolWidget.js}

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

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

@@ -3,11 +3,11 @@ import Editor from '../../Editor';
 import Pen from '../../tools/Pen';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
-interface PenTypeRecord {
+export interface PenTypeRecord {
     name: string;
     factory: ComponentBuilderFactory;
 }
-export default class PenWidget extends BaseToolWidget {
+export default class PenToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     protected penTypes: PenTypeRecord[];
@@ -17,4 +17,3 @@ export default class PenWidget extends BaseToolWidget {
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;
 }
-export {};

package/dist/src/toolbar/widgets/{PenWidget.js → PenToolWidget.js}

@@ -1,4 +1,3 @@
-// @internal @packageDocumentation
 import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
 import { makeLineBuilder } from '../../components/builders/LineBuilder';
@@ -8,7 +7,7 @@ import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeIconFromFactory, makePenIcon } from '../icons';
 import makeColorInput from '../makeColorInput';
 import BaseToolWidget from './BaseToolWidget';
-export default class PenWidget extends BaseToolWidget {
+export default class PenToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, localization);
         this.tool = tool;
@@ -73,14 +72,14 @@ export default class PenWidget extends BaseToolWidget {
         const objectSelectLabel = document.createElement('label');
         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);
         objectSelectLabel.innerText = this.localizationTable.selectObjectType;
         objectSelectLabel.setAttribute('for', objectTypeSelect.id);
         thicknessInput.type = 'range';
-        thicknessInput.min = '1';
+        thicknessInput.min = '2';
         thicknessInput.max = '20';
         thicknessInput.step = '1';
         thicknessInput.oninput = () => {
@@ -103,7 +102,7 @@ export default class PenWidget extends BaseToolWidget {
         const [colorInput, colorInputContainer] = makeColorInput(this.editor, color => {
             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);
         colorRow.appendChild(colorLabel);
@@ -129,4 +128,4 @@ export default class PenWidget extends BaseToolWidget {
         return true;
     }
 }
-PenWidget.idCounter = 0;
+PenToolWidget.idCounter = 0;

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

@@ -2,7 +2,7 @@ import Editor from '../../Editor';
 import SelectionTool from '../../tools/SelectionTool';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
-export declare class SelectionWidget extends BaseToolWidget {
+export default class SelectionToolWidget extends BaseToolWidget {
     private tool;
     constructor(editor: Editor, tool: SelectionTool, localization: ToolbarLocalization);
     protected getTitle(): string;

package/dist/src/toolbar/widgets/{SelectionWidget.js → SelectionToolWidget.js}

@@ -2,7 +2,7 @@ import { EditorEventType } from '../../types';
 import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
-export class SelectionWidget extends BaseToolWidget {
+export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, localization);
         this.tool = tool;

package/dist/src/toolbar/widgets/lib.d.ts

@@ -0,0 +1,8 @@
+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/dist/src/toolbar/widgets/lib.js

@@ -0,0 +1,8 @@
+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/dist/src/tools/BaseTool.d.ts

@@ -1,5 +1,4 @@
 import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent } from '../types';
-import { ToolType } from './ToolController';
 import ToolEnabledGroup from './ToolEnabledGroup';
 export default abstract class BaseTool implements PointerEvtListener {
     private notifier;
@@ -10,7 +9,6 @@ export default abstract class BaseTool implements PointerEvtListener {
     onPointerMove(_event: PointerEvt): void;
     onPointerUp(_event: PointerEvt): void;
     onGestureCancel(): void;
-    abstract readonly kind: ToolType;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
@@ -18,4 +16,5 @@ export default abstract class BaseTool implements PointerEvtListener {
     setEnabled(enabled: boolean): void;
     isEnabled(): boolean;
     setToolGroup(group: ToolEnabledGroup): void;
+    getToolGroup(): ToolEnabledGroup | null;
 }

package/dist/src/tools/BaseTool.js

@@ -48,4 +48,10 @@ export default class BaseTool {
         }
         this.group = group;
     }
+    getToolGroup() {
+        if (this.group) {
+            return this.group;
+        }
+        return null;
+    }
 }

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

@@ -1,12 +1,10 @@
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import Editor from '../Editor';
-import { ToolType } from './ToolController';
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
     private command;
-    kind: ToolType;
     private toRemove;
     constructor(editor: Editor, description: string);
     onPointerDown(event: PointerEvt): boolean;

package/dist/src/tools/Eraser.js

@@ -1,14 +1,12 @@
 import BaseTool from './BaseTool';
 import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
-import { ToolType } from './ToolController';
 import { PointerDevice } from '../Pointer';
 export default class Eraser extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
         this.command = null;
-        this.kind = ToolType.Eraser;
     }
     onPointerDown(event) {
         if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {

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

@@ -3,7 +3,6 @@ import { Point2 } from '../math/Vec2';
 import Pointer from '../Pointer';
 import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 interface PinchData {
     canvasCenter: Point2;
     screenCenter: Point2;
@@ -20,7 +19,6 @@ export declare enum PanZoomMode {
 export default class PanZoom extends BaseTool {
     private editor;
     private mode;
-    readonly kind: ToolType.PanZoom;
     private transform;
     private lastAngle;
     private lastDist;

package/dist/src/tools/PanZoom.js

@@ -5,7 +5,6 @@ import { PointerDevice } from '../Pointer';
 import { EditorEventType } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export var PanZoomMode;
 (function (PanZoomMode) {
     PanZoomMode[PanZoomMode["OneFingerTouchGestures"] = 1] = "OneFingerTouchGestures";
@@ -19,7 +18,6 @@ export default class PanZoom extends BaseTool {
         super(editor.notifier, description);
         this.editor = editor;
         this.mode = mode;
-        this.kind = ToolType.PanZoom;
         this.transform = null;
     }
     // Returns information about the pointers in a gesture

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

@@ -1,9 +1,9 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
-import { PointerEvt } from '../types';
+import Pointer from '../Pointer';
+import { KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
-import { ComponentBuilderFactory } from '../components/builders/types';
+import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 export interface PenStyle {
     color: Color4;
     thickness: number;
@@ -11,15 +11,14 @@ export interface PenStyle {
 export default class Pen extends BaseTool {
     private editor;
     private style;
-    private builder;
-    private builderFactory;
+    protected builder: ComponentBuilder | null;
+    protected builderFactory: ComponentBuilderFactory;
     private lastPoint;
-    readonly kind: ToolType;
     constructor(editor: Editor, description: string, style: PenStyle);
     private getPressureMultiplier;
-    private getStrokePoint;
-    private previewStroke;
-    private addPointToStroke;
+    protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
+    protected previewStroke(): void;
+    protected addPointToStroke(point: StrokeDataPoint): void;
     onPointerDown({ current, allPointers }: PointerEvt): boolean;
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): void;
@@ -31,4 +30,5 @@ export default class Pen extends BaseTool {
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
+    onKeyPress({ key }: KeyPressEvent): boolean;
 }

package/dist/src/tools/Pen.js

@@ -3,7 +3,6 @@ import { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 export default class Pen extends BaseTool {
     constructor(editor, description, style) {
         super(editor.notifier, description);
@@ -12,12 +11,12 @@ export default class Pen extends BaseTool {
         this.builder = null;
         this.builderFactory = makeFreehandLineBuilder;
         this.lastPoint = null;
-        this.kind = ToolType.Pen;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
     }
-    getStrokePoint(pointer) {
+    // Converts a `pointer` to a `StrokeDataPoint`.
+    toStrokePoint(pointer) {
         var _a;
         const minPressure = 0.3;
         let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
@@ -35,11 +34,13 @@ export default class Pen extends BaseTool {
             time: pointer.timeStamp,
         };
     }
+    // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
     previewStroke() {
         var _a;
         this.editor.clearWetInk();
         (_a = this.builder) === null || _a === void 0 ? void 0 : _a.preview(this.editor.display.getWetInkRenderer());
     }
+    // Throws if no stroke builder exists.
     addPointToStroke(point) {
         if (!this.builder) {
             throw new Error('No stroke is currently being generated.');
@@ -58,13 +59,13 @@ 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;
         }
         return false;
     }
     onPointerMove({ current }) {
-        this.addPointToStroke(this.getStrokePoint(current));
+        this.addPointToStroke(this.toStrokePoint(current));
     }
     onPointerUp({ current }) {
         var _a, _b;
@@ -72,7 +73,7 @@ export default class Pen extends BaseTool {
             return;
         }
         // onPointerUp events can have zero pressure. Use the last pressure instead.
-        const currentPoint = this.getStrokePoint(current);
+        const currentPoint = this.toStrokePoint(current);
         const strokePoint = Object.assign(Object.assign({}, currentPoint), { width: (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : currentPoint.width });
         this.addPointToStroke(strokePoint);
         if (this.builder && current.isPrimary) {
@@ -120,4 +121,20 @@ export default class Pen extends BaseTool {
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.builderFactory; }
+    onKeyPress({ key }) {
+        key = key.toLowerCase();
+        let newThickness;
+        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/dist/src/tools/PipetteTool.d.ts

@@ -2,11 +2,9 @@ import Color4 from '../Color4';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
-import { ToolType } from './ToolController';
 declare type ColorListener = (color: Color4 | null) => void;
 export default class PipetteTool extends BaseTool {
     private editor;
-    kind: ToolType;
     private colorPreviewListener;
     private colorSelectListener;
     constructor(editor: Editor, description: string);