js-draw 0.0.3 → 0.0.4

package/dist/src/rendering/AbstractRenderer.js

@@ -1,6 +1,4 @@
-import { PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Vec2 } from '../geometry/Vec2';
+import Path, { PathCommandType } from '../geometry/Path';
 const stylesEqual = (a, b) => {
     var _a, _b, _c, _d, _e;
     return a === b || (a.fill.eq(b.fill)
@@ -65,28 +63,8 @@ export default class AbstractRenderer {
     }
     // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
     drawRect(rect, lineWidth, lineFill) {
-        const commands = [];
-        // Vector from the top left corner or bottom right corner to the edge of the
-        // stroked region.
-        const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
-        const innerRect = Rect2.fromCorners(rect.topLeft.plus(cornerToEdge), rect.bottomRight.minus(cornerToEdge));
-        const outerRect = Rect2.fromCorners(rect.topLeft.minus(cornerToEdge), rect.bottomRight.plus(cornerToEdge));
-        const corners = [
-            innerRect.corners[3],
-            ...innerRect.corners,
-            ...outerRect.corners.reverse(),
-        ];
-        for (const corner of corners) {
-            commands.push({
-                kind: PathCommandType.LineTo,
-                point: corner,
-            });
-        }
-        this.drawPath({
-            startPoint: outerRect.corners[3],
-            commands,
-            style: lineFill,
-        });
+        const path = Path.fromRect(rect, lineWidth);
+        this.drawPath(path.toRenderable(lineFill));
     }
     // Note the start/end of an object with the given bounding box.
     startObject(_boundingBox) {

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

@@ -4,9 +4,12 @@ export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
+    private penTypes;
     static defaultLocalization: ToolbarLocalization;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
+    setupColorPickers(): void;
     addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;
     private addUndoRedoButtons;
-    private addElements;
+    addDefaultToolWidgets(): void;
+    addDefaultActionButtons(): void;
 }

package/dist/src/toolbar/HTMLToolbar.js

@@ -5,6 +5,14 @@ import Color4 from '../Color4';
 import Pen from '../tools/Pen';
 import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
+import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/SVGRenderer';
+import Viewport from '../Viewport';
+import EventDispatcher from '../EventDispatcher';
+import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
+import { makeLineBuilder } from '../components/builders/LineBuilder';
+import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 const primaryForegroundFill = `
 	style='fill: var(--primary-foreground-color);'
 `;
@@ -12,6 +20,7 @@ const primaryForegroundStrokeFill = `
 	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
 `;
 const toolbarCSSPrefix = 'toolbar-';
+const svgNamespace = 'http://www.w3.org/2000/svg';
 class ToolbarWidget {
     constructor(editor, targetTool, localizationTable) {
         this.editor = editor;
@@ -121,7 +130,7 @@ class ToolbarWidget {
         return !this.dropdownContainer.classList.contains('hidden');
     }
     createDropdownIcon() {
-        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const icon = document.createElementNS(svgNamespace, 'svg');
         icon.innerHTML = `
 		<g>
 			<path
@@ -140,7 +149,7 @@ class EraserWidget extends ToolbarWidget {
         return this.localizationTable.eraser;
     }
     createIcon() {
-        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const icon = document.createElementNS(svgNamespace, 'svg');
         // Draw an eraser-like shape
         icon.innerHTML = `
 		<g>
@@ -168,7 +177,7 @@ class SelectionWidget extends ToolbarWidget {
         return this.localizationTable.select;
     }
     createIcon() {
-        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const icon = document.createElementNS(svgNamespace, 'svg');
         // Draw a cursor-like shape
         icon.innerHTML = `
 		<g>
@@ -209,7 +218,7 @@ class TouchDrawingWidget extends ToolbarWidget {
         return this.localizationTable.touchDrawing;
     }
     createIcon() {
-        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const icon = document.createElementNS(svgNamespace, 'svg');
         // Draw a cursor-like shape
         icon.innerHTML = `
 		<g>
@@ -241,9 +250,10 @@ class TouchDrawingWidget extends ToolbarWidget {
     }
 }
 class PenWidget extends ToolbarWidget {
-    constructor(editor, tool, localization) {
+    constructor(editor, tool, localization, penTypes) {
         super(editor, tool, localization);
         this.tool = tool;
+        this.penTypes = penTypes;
         this.updateInputs = () => { };
         this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolUpdated) {
@@ -259,17 +269,14 @@ class PenWidget extends ToolbarWidget {
     getTitle() {
         return this.targetTool.description;
     }
-    createIcon() {
-        // We need to use createElementNS to embed an SVG element in HTML.
-        // See http://zhangwenli.com/blog/2017/07/26/createelementns/
-        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    makePenIcon(elem) {
         // Use a square-root scale to prevent the pen's tip from overflowing.
         const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
         const color = this.tool.getColor();
         // Draw a pen-like shape
         const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
         const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
-        icon.innerHTML = `
+        elem.innerHTML = `
 		<defs>
 			<pattern
 				id='checkerboard'
@@ -302,18 +309,61 @@ class PenWidget extends ToolbarWidget {
 			/>
 		</g>
 		`;
+    }
+    // Draws an icon with the pen.
+    makeDrawnIcon(icon) {
+        const strokeFactory = this.tool.getStrokeFactory();
+        const toolThickness = this.tool.getThickness();
+        const nowTime = (new Date()).getTime();
+        const startPoint = {
+            pos: Vec2.of(10, 10),
+            width: toolThickness / 5,
+            color: this.tool.getColor(),
+            time: nowTime - 100,
+        };
+        const endPoint = {
+            pos: Vec2.of(90, 90),
+            width: toolThickness / 5,
+            color: this.tool.getColor(),
+            time: nowTime,
+        };
+        const builder = strokeFactory(startPoint, this.editor.viewport);
+        builder.addPoint(endPoint);
+        const viewport = new Viewport(new EventDispatcher());
+        viewport.updateScreenSize(Vec2.of(100, 100));
+        const renderer = new SVGRenderer(icon, viewport);
+        builder.preview(renderer);
+    }
+    createIcon() {
+        // We need to use createElementNS to embed an SVG element in HTML.
+        // See http://zhangwenli.com/blog/2017/07/26/createelementns/
+        const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
+        const strokeFactory = this.tool.getStrokeFactory();
+        if (strokeFactory === makeFreehandLineBuilder) {
+            this.makePenIcon(icon);
+        }
+        else {
+            this.makeDrawnIcon(icon);
+        }
         return icon;
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
-        // Thickness: Value of the input is squared to allow for finer control/larger values.
         const thicknessRow = document.createElement('div');
+        const objectTypeRow = document.createElement('div');
+        // Thickness: Value of the input is squared to allow for finer control/larger values.
         const thicknessLabel = document.createElement('label');
         const thicknessInput = document.createElement('input');
+        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++}`;
         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.max = '20';
@@ -323,6 +373,16 @@ class PenWidget extends ToolbarWidget {
         };
         thicknessRow.appendChild(thicknessLabel);
         thicknessRow.appendChild(thicknessInput);
+        objectTypeSelect.oninput = () => {
+            const penTypeIdx = parseInt(objectTypeSelect.value);
+            if (penTypeIdx < 0 || penTypeIdx >= this.penTypes.length) {
+                console.error('Invalid pen type index', penTypeIdx);
+                return;
+            }
+            this.tool.setStrokeFactory(this.penTypes[penTypeIdx].factory);
+        };
+        objectTypeRow.appendChild(objectSelectLabel);
+        objectTypeRow.appendChild(objectTypeSelect);
         const colorRow = document.createElement('div');
         const colorLabel = document.createElement('label');
         const colorInput = document.createElement('input');
@@ -334,14 +394,37 @@ class PenWidget extends ToolbarWidget {
         colorInput.oninput = () => {
             this.tool.setColor(Color4.fromHex(colorInput.value));
         };
+        colorInput.addEventListener('open', () => {
+            this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+                kind: EditorEventType.ColorPickerToggled,
+                open: true,
+            });
+        });
+        colorInput.addEventListener('close', () => {
+            this.editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
+                kind: EditorEventType.ColorPickerToggled,
+                open: false,
+            });
+        });
         colorRow.appendChild(colorLabel);
         colorRow.appendChild(colorInput);
         this.updateInputs = () => {
             colorInput.value = this.tool.getColor().toHexString();
             thicknessInput.value = Math.sqrt(this.tool.getThickness()).toString();
+            objectTypeSelect.replaceChildren();
+            for (let i = 0; i < this.penTypes.length; i++) {
+                const penType = this.penTypes[i];
+                const option = document.createElement('option');
+                option.value = i.toString();
+                option.innerText = penType.name;
+                objectTypeSelect.appendChild(option);
+                if (penType.factory === this.tool.getStrokeFactory()) {
+                    objectTypeSelect.value = i.toString();
+                }
+            }
         };
         this.updateInputs();
-        container.replaceChildren(colorRow, thicknessRow);
+        container.replaceChildren(colorRow, thicknessRow, objectTypeRow);
         dropdown.replaceChildren(container);
         return true;
     }
@@ -354,10 +437,37 @@ export default class HTMLToolbar {
         this.container = document.createElement('div');
         this.container.classList.add(`${toolbarCSSPrefix}root`);
         this.container.setAttribute('role', 'toolbar');
-        this.addElements();
         parent.appendChild(this.container);
-        // Initialize color choosers
         colorisInit();
+        this.setupColorPickers();
+        // Default pen types
+        this.penTypes = [
+            {
+                name: localizationTable.freehandPen,
+                factory: makeFreehandLineBuilder,
+            },
+            {
+                name: localizationTable.arrowPen,
+                factory: makeArrowBuilder,
+            },
+            {
+                name: localizationTable.linePen,
+                factory: makeLineBuilder,
+            },
+            {
+                name: localizationTable.filledRectanglePen,
+                factory: makeFilledRectangleBuilder,
+            },
+            {
+                name: localizationTable.outlinedRectanglePen,
+                factory: makeOutlinedRectangleBuilder,
+            },
+        ];
+    }
+    setupColorPickers() {
+        const closePickerOverlay = document.createElement('div');
+        closePickerOverlay.className = `${toolbarCSSPrefix}closeColorPickerOverlay`;
+        this.editor.createHTMLOverlay(closePickerOverlay);
         coloris({
             el: '.coloris_input',
             format: 'hex',
@@ -373,6 +483,14 @@ export default class HTMLToolbar {
                 Color4.white.toHexString(),
             ],
         });
+        this.editor.notifier.on(EditorEventType.ColorPickerToggled, event => {
+            if (event.kind !== EditorEventType.ColorPickerToggled) {
+                return;
+            }
+            // Show/hide the overlay. Making the overlay visible gives users a surface to click
+            // on that shows/hides the color picker.
+            closePickerOverlay.style.display = event.open ? 'block' : 'none';
+        });
     }
     addActionButton(text, command, parent) {
         const button = document.createElement('button');
@@ -402,13 +520,13 @@ export default class HTMLToolbar {
             redoButton.disabled = event.redoStackSize === 0;
         });
     }
-    addElements() {
+    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);
+            const widget = new PenWidget(this.editor, tool, this.localizationTable, this.penTypes);
             widget.addTo(this.container);
         }
         for (const tool of toolController.getMatchingTools(ToolType.Eraser)) {
@@ -426,6 +544,9 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(ToolType.TouchPanZoom)) {
             (new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
+        this.setupColorPickers();
+    }
+    addDefaultActionButtons() {
         this.addUndoRedoButtons();
     }
 }
@@ -439,6 +560,12 @@ HTMLToolbar.defaultLocalization = {
     resizeImageToSelection: 'Resize image to selection',
     undo: 'Undo',
     redo: 'Redo',
+    selectObjectType: 'Object type: ',
+    freehandPen: 'Freehand',
+    arrowPen: 'Arrow',
+    linePen: 'Line',
+    outlinedRectanglePen: 'Outlined rectangle',
+    filledRectanglePen: 'Filled rectangle',
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
 };

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

@@ -3,6 +3,12 @@ export declare enum ToolbarButtonType {
     ActionButton = 1
 }
 export interface ToolbarLocalization {
+    outlinedRectanglePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    freehandPen: string;
+    selectObjectType: string;
     colorLabel: string;
     pen: string;
     eraser: string;

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

@@ -3,15 +3,22 @@ import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
+import { ComponentBuilderFactory } from '../components/builders/types';
+interface PenStyle {
+    color: Color4;
+    thickness: number;
+}
 export default class Pen extends BaseTool {
     private editor;
-    private color;
-    private thickness;
+    private style;
     private builder;
+    private builderFactory;
+    private lastPoint;
     readonly kind: ToolType;
-    constructor(editor: Editor, description: string, color?: Color4, thickness?: number);
+    constructor(editor: Editor, description: string, style: PenStyle);
     private getPressureMultiplier;
     private getStrokePoint;
+    private previewStroke;
     private addPointToStroke;
     onPointerDown({ current, allPointers }: PointerEvt): boolean;
     onPointerMove({ current }: PointerEvt): void;
@@ -20,6 +27,9 @@ export default class Pen extends BaseTool {
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
+    setStrokeFactory(factory: ComponentBuilderFactory): void;
     getThickness(): number;
     getColor(): Color4;
+    getStrokeFactory(): ComponentBuilderFactory;
 }
+export {};

package/dist/src/tools/Pen.js

@@ -1,22 +1,21 @@
-import Color4 from '../Color4';
 import EditorImage from '../EditorImage';
-import { Vec2 } from '../geometry/Vec2';
 import { PointerDevice } from '../Pointer';
-import StrokeBuilder from '../StrokeBuilder';
+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, color = Color4.purple, thickness = 16.0) {
+    constructor(editor, description, style) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.color = color;
-        this.thickness = thickness;
+        this.style = style;
         this.builder = null;
+        this.builderFactory = makeFreehandLineBuilder;
+        this.lastPoint = null;
         this.kind = ToolType.Pen;
     }
     getPressureMultiplier() {
-        return 1 / this.editor.viewport.getScaleFactor() * this.thickness;
+        return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
     }
     getStrokePoint(pointer) {
         var _a;
@@ -25,45 +24,48 @@ export default class Pen extends BaseTool {
         return {
             pos: pointer.canvasPos,
             width: pressure * this.getPressureMultiplier(),
-            color: this.color,
+            color: this.style.color,
             time: pointer.timeStamp,
         };
     }
-    addPointToStroke(pointer) {
+    previewStroke() {
+        var _a;
+        this.editor.clearWetInk();
+        (_a = this.builder) === null || _a === void 0 ? void 0 : _a.preview(this.editor.display.getWetInkRenderer());
+    }
+    addPointToStroke(point) {
         if (!this.builder) {
             throw new Error('No stroke is currently being generated.');
         }
-        this.builder.addPoint(this.getStrokePoint(pointer));
-        this.editor.clearWetInk();
-        this.editor.drawWetInk(...this.builder.preview());
+        this.builder.addPoint(point);
+        this.lastPoint = point;
+        this.previewStroke();
     }
     onPointerDown({ current, allPointers }) {
         if (current.device === PointerDevice.Eraser) {
             return false;
         }
         if (allPointers.length === 1 || current.device === PointerDevice.Pen) {
-            // 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 = this.editor.viewport.screenToCanvasTransform;
-            const maxSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 7;
-            const minSmoothingDist = canvasTransform.transformVec3(Vec2.unitX).magnitude() * 2;
-            this.builder = new StrokeBuilder(this.getStrokePoint(current), minSmoothingDist, maxSmoothingDist);
+            this.builder = this.builderFactory(this.getStrokePoint(current), this.editor.viewport);
             return true;
         }
         return false;
     }
     onPointerMove({ current }) {
-        this.addPointToStroke(current);
+        this.addPointToStroke(this.getStrokePoint(current));
     }
     onPointerUp({ current }) {
+        var _a, _b;
         if (!this.builder) {
             return;
         }
-        this.addPointToStroke(current);
+        // onPointerUp events can have zero pressure. Use the last pressure instead.
+        const currentPoint = this.getStrokePoint(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) {
             const stroke = this.builder.build();
-            this.editor.clearWetInk();
-            this.editor.drawWetInk(...this.builder.preview());
+            this.previewStroke();
             const canFlatten = true;
             const action = new EditorImage.AddElementCommand(stroke, canFlatten);
             this.editor.dispatch(action);
@@ -81,17 +83,24 @@ export default class Pen extends BaseTool {
         });
     }
     setColor(color) {
-        if (color.toHexString() !== this.color.toHexString()) {
-            this.color = color;
+        if (color.toHexString() !== this.style.color.toHexString()) {
+            this.style = Object.assign(Object.assign({}, this.style), { color });
             this.noteUpdated();
         }
     }
     setThickness(thickness) {
-        if (thickness !== this.thickness) {
-            this.thickness = thickness;
+        if (thickness !== this.style.thickness) {
+            this.style = Object.assign(Object.assign({}, this.style), { thickness });
+            this.noteUpdated();
+        }
+    }
+    setStrokeFactory(factory) {
+        if (factory !== this.builderFactory) {
+            this.builderFactory = factory;
             this.noteUpdated();
         }
     }
-    getThickness() { return this.thickness; }
-    getColor() { return this.color; }
+    getThickness() { return this.style.thickness; }
+    getColor() { return this.style.color; }
+    getStrokeFactory() { return this.builderFactory; }
 }

package/dist/src/tools/ToolController.js

@@ -17,15 +17,15 @@ export default class ToolController {
     constructor(editor, localization) {
         const primaryToolEnabledGroup = new ToolEnabledGroup();
         const touchPanZoom = new PanZoom(editor, PanZoomMode.OneFingerGestures, localization.touchPanTool);
-        const primaryPenTool = new Pen(editor, localization.penTool(1));
+        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
         const primaryTools = [
             new SelectionTool(editor, localization.selectionTool),
             new Eraser(editor, localization.eraserTool),
             // Three pens
             primaryPenTool,
-            new Pen(editor, localization.penTool(2), Color4.clay, 8),
+            new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
             // Highlighter-like pen with width=64
-            new Pen(editor, localization.penTool(3), Color4.ofRGBA(1, 1, 0, 0.5), 64),
+            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
         ];
         this.tools = [
             touchPanZoom,

package/dist/src/types.d.ts

@@ -6,6 +6,7 @@ import BaseTool from './tools/BaseTool';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import Pointer from './Pointer';
+import Color4 from './Color4';
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
@@ -55,7 +56,8 @@ export declare enum EditorEventType {
     UndoRedoStackUpdated = 3,
     ObjectAdded = 4,
     ViewportChanged = 5,
-    DisplayResized = 6
+    DisplayResized = 6,
+    ColorPickerToggled = 7
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -79,10 +81,20 @@ export interface EditorUndoStackUpdated {
     readonly undoStackSize: number;
     readonly redoStackSize: number;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated;
+export interface ColorPickerToggled {
+    readonly kind: EditorEventType.ColorPickerToggled;
+    readonly open: boolean;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener): Promise<Rect2>;
 }
+export interface StrokeDataPoint {
+    pos: Point2;
+    width: number;
+    time: number;
+    color: Color4;
+}
 export {};

package/dist/src/types.js

@@ -17,4 +17,5 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ObjectAdded"] = 4] = "ObjectAdded";
     EditorEventType[EditorEventType["ViewportChanged"] = 5] = "ViewportChanged";
     EditorEventType[EditorEventType["DisplayResized"] = 6] = "DisplayResized";
+    EditorEventType[EditorEventType["ColorPickerToggled"] = 7] = "ColorPickerToggled";
 })(EditorEventType || (EditorEventType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",
@@ -10,7 +10,7 @@
       "default": "./dist/src/Editor.js"
     },
     "./styles": {
-      "default": "./src/editorStyles.js"
+      "default": "./src/styles.js"
     },
     "./Editor": {
       "types": "./dist/src/Editor.d.ts",
@@ -74,12 +74,13 @@
   },
   "homepage": "https://github.com/personalizedrefrigerator/js-draw#readme",
   "directories": {
-    "doc": "doc"
+    "doc": "docs"
   },
   "keywords": [
     "ink",
     "drawing",
     "pen",
+    "freehand",
     "svg"
   ]
 }

package/src/Editor.ts

@@ -110,8 +110,15 @@ export class Editor {
 		this.accessibilityAnnounceArea.innerText = message;
 	}
 
-	public addToolbar(): HTMLToolbar {
-		return new HTMLToolbar(this, this.container, this.localization);
+	public addToolbar(defaultLayout: boolean = true): HTMLToolbar {
+		const toolbar = new HTMLToolbar(this, this.container, this.localization);
+
+		if (defaultLayout) {
+			toolbar.addDefaultToolWidgets();
+			toolbar.addDefaultActionButtons();
+		}
+
+		return toolbar;
 	}
 
 	private registerListeners() {