js-draw 0.2.2 → 0.3.0

package/dist/src/EditorImage.js

@@ -302,7 +302,6 @@ export class ImageNode {
         this.children = [];
     }
     render(renderer, visibleRect) {
-        // Don't render components that are < 0.1% of the viewport.
         const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
         sortLeavesByZIndex(leaves);
         for (const leaf of leaves) {

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -8,9 +8,8 @@ import Viewport from '../../Viewport';
 export const makeFreehandLineBuilder = (initialPoint, viewport) => {
     // Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
     // less than ± 2 px from the curve.
-    const canvasTransform = viewport.screenToCanvasTransform;
-    const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
-    const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
+    const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
+    const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
     return new FreehandLineBuilder(initialPoint, minSmoothingDist, maxSmoothingDist);
 };
 // Handles stroke smoothing and creates Strokes from user/stylus input.
@@ -27,6 +26,7 @@ export default class FreehandLineBuilder {
         this.isFirstSegment = true;
         this.pathStartConnector = null;
         this.mostRecentConnector = null;
+        this.lastExitingVec = null;
         this.currentCurve = null;
         this.lastPoint = this.startPoint;
         this.upperSegments = [];
@@ -34,6 +34,7 @@ export default class FreehandLineBuilder {
         this.buffer = [this.startPoint.pos];
         this.momentum = Vec2.zero;
         this.currentCurve = null;
+        this.curveStartWidth = startPoint.width;
         this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
     }
     getBBox() {
@@ -122,7 +123,11 @@ export default class FreehandLineBuilder {
         return this.previewStroke();
     }
     roundPoint(point) {
-        return Viewport.roundPoint(point, this.minFitAllowed);
+        let minFit = Math.min(this.minFitAllowed, this.curveStartWidth / 2);
+        if (minFit < 1e-10) {
+            minFit = this.minFitAllowed;
+        }
+        return Viewport.roundPoint(point, minFit);
     }
     finalizeCurrentCurve() {
         // Case where no points have been added
@@ -227,10 +232,13 @@ export default class FreehandLineBuilder {
         const computeBoundaryCurve = (direction, halfVec) => {
             return new Bezier(startPt.plus(startVec.times(direction)), controlPoint.plus(halfVec.times(direction)), endPt.plus(endVec.times(direction)));
         };
-        const upperBoundary = computeBoundaryCurve(1, halfVec);
-        const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+        const boundariesIntersect = () => {
+            const upperBoundary = computeBoundaryCurve(1, halfVec);
+            const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+            return upperBoundary.intersects(lowerBoundary).length > 0;
+        };
         // If the boundaries have two intersections, increasing the half vector's length could fix this.
-        if (upperBoundary.intersects(lowerBoundary).length > 0) {
+        if (boundariesIntersect()) {
             halfVec = halfVec.times(2);
         }
         // Each starts at startPt ± startVec
@@ -274,7 +282,7 @@ export default class FreehandLineBuilder {
                 console.warn('Discarding NaN point.', newPoint);
                 return;
             }
-            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 4;
+            const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
             const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
                 && this.isFirstSegment;
             // Snap to the starting point if the stroke is contained within a small ball centered
@@ -361,7 +369,8 @@ export default class FreehandLineBuilder {
             }
             return true;
         };
-        if (this.buffer.length > 3) {
+        const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
+        if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
             if (!curveMatchesPoints(this.currentCurve)) {
                 // Use a curve that better fits the points
                 this.currentCurve = prevCurve;

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

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

package/dist/src/components/lib.js

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

package/dist/src/lib.d.ts

@@ -13,13 +13,17 @@
  * @packageDocumentation
  */
 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';
 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 };
 export default Editor;

package/dist/src/lib.js

@@ -13,13 +13,17 @@
  * @packageDocumentation
  */
 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';
 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 };
 export default Editor;

package/dist/src/rendering/Display.js

@@ -71,8 +71,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/dist/src/rendering/caching/RenderingCacheNode.js

@@ -177,9 +177,10 @@ export default class RenderingCacheNode {
         }
         else {
             // Determine whether we already have rendered the items
+            const tooSmallToRender = (rect) => 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));
+                leaves.push(...item.getLeavesIntersectingRegion(this.region, tooSmallToRender));
             }
             sortLeavesByZIndex(leaves);
             const leavesByIds = this.computeSortedByLeafIds(leaves);

package/dist/src/rendering/renderers/CanvasRenderer.js

@@ -37,14 +37,14 @@ export default class CanvasRenderer extends AbstractRenderer {
     // Set parameters for lower/higher quality rendering
     setDraftMode(draftMode) {
         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;
         }
     }
     displaySize() {

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

@@ -1,16 +1,19 @@
 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;
     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,23 @@
-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 {
     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 +30,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 +60,7 @@ export default class HTMLToolbar {
             });
         };
         initColoris();
+        this.updateColoris = initColoris;
         const addColorToSwatch = (newColor) => {
             let alreadyPresent = false;
             for (const color of swatches) {
@@ -86,6 +91,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 +144,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/{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;

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