js-draw 0.0.2 → 0.0.5

package/dist/src/toolbar/HTMLToolbar.js

@@ -5,6 +5,15 @@ 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';
+import { defaultToolbarLocalization } from './localization';
 const primaryForegroundFill = `
 	style='fill: var(--primary-foreground-color);'
 `;
@@ -12,6 +21,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 +131,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 +150,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 +178,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 +219,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 +251,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 +270,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 +310,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 +374,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,30 +395,80 @@ 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;
     }
 }
 PenWidget.idCounter = 0;
 export default class HTMLToolbar {
-    constructor(editor, parent, localizationTable = HTMLToolbar.defaultLocalization) {
+    constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;
         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 +484,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 +521,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,19 +545,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();
     }
 }
-HTMLToolbar.defaultLocalization = {
-    pen: 'Pen',
-    eraser: 'Eraser',
-    select: 'Select',
-    touchDrawing: 'Touch Drawing',
-    thicknessLabel: 'Thickness: ',
-    colorLabel: 'Color: ',
-    resizeImageToSelection: 'Resize image to selection',
-    undo: 'Undo',
-    redo: 'Redo',
-    dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
-    dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
-};

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

@@ -0,0 +1,20 @@
+export interface ToolbarLocalization {
+    outlinedRectanglePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    freehandPen: string;
+    selectObjectType: string;
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    touchDrawing: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    undo: string;
+    redo: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+}
+export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -0,0 +1,19 @@
+export const defaultToolbarLocalization = {
+    pen: 'Pen',
+    eraser: 'Eraser',
+    select: 'Select',
+    touchDrawing: 'Touch Drawing',
+    thicknessLabel: 'Thickness: ',
+    colorLabel: 'Color: ',
+    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

@@ -2,16 +2,3 @@ export declare enum ToolbarButtonType {
     ToggleButton = 0,
     ActionButton = 1
 }
-export interface ToolbarLocalization {
-    colorLabel: string;
-    pen: string;
-    eraser: string;
-    select: string;
-    touchDrawing: string;
-    thicknessLabel: string;
-    resizeImageToSelection: string;
-    undo: string;
-    redo: string;
-    dropdownShown: (toolName: string) => string;
-    dropdownHidden: (toolName: string) => 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/SelectionTool.js

@@ -21,9 +21,10 @@ const styles = `
 	}
 
 	.handleOverlay > .selectionBox {
-		position: fixed;
+		position: absolute;
 		z-index: 0;
 		transform-origin: center;
+		overflow: hidden;
 	}
 
 	.handleOverlay > .selectionBox .draggableBackground {

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/dist-test/test-dist-bundle.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+		<meta charset="utf-8"/>
+		<title>Editor from a bundle</title>
+		<style>
+			body .imageEditorContainer {
+				height: 800px;
+
+				--primary-background-color: green;
+				--primary-background-color-transparent: rgba(255, 240, 200, 0.5);
+				--secondary-background-color: yellow;
+				--primary-foreground-color: black;
+				--secondary-foreground-color: black;
+			}
+		</style>
+	</head>
+	<body>
+		<p>
+			This file tests the bundled version of <code>js-draw</code>.
+			Be sure to run <code>yarn build</code> before opening this!
+		</p>
+		<script src="../dist/bundle.js"></script>
+		<script>
+			const editor1 = new jsdraw.Editor(document.body, {
+				wheelEventsEnabled: false,
+			});
+			editor1.addToolbar();
+
+			const editor2 = new jsdraw.Editor(document.body);
+			editor2.addToolbar();
+		</script>
+	</body>
+</html>