js-draw 0.3.0 → 0.3.2

package/dist/src/tools/PasteHandler.js

@@ -0,0 +1,142 @@
+/**
+ * A tool that handles paste events.
+ * @packageDocumentation
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { TextComponent } from '../components/lib';
+import { uniteCommands } from '../commands/lib';
+import SVGLoader from '../SVGLoader';
+import { Mat33, Vec2 } from '../math/lib';
+import BaseTool from './BaseTool';
+import EditorImage from '../EditorImage';
+import SelectionTool from './SelectionTool';
+import TextTool from './TextTool';
+import Color4 from '../Color4';
+import ImageComponent from '../components/ImageComponent';
+// { @inheritDoc PasteHandler! }
+export default class PasteHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.pasteHandler);
+        this.editor = editor;
+    }
+    onPaste(event) {
+        const mime = event.mime.toLowerCase();
+        if (mime === 'image/svg+xml') {
+            void this.doSVGPaste(event.data);
+            return true;
+        }
+        else if (mime === 'text/plain') {
+            void this.doTextPaste(event.data);
+            return true;
+        }
+        else if (mime === 'image/png' || mime === 'image/jpeg') {
+            void this.doImagePaste(event.data);
+            return true;
+        }
+        return false;
+    }
+    addComponentsFromPaste(components) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let bbox = null;
+            for (const component of components) {
+                if (bbox) {
+                    bbox = bbox.union(component.getBBox());
+                }
+                else {
+                    bbox = component.getBBox();
+                }
+            }
+            if (!bbox) {
+                return;
+            }
+            // Find a transform that scales/moves bbox onto the screen.
+            const visibleRect = this.editor.viewport.visibleRect;
+            const scaleRatioX = visibleRect.width / bbox.width;
+            const scaleRatioY = visibleRect.height / bbox.height;
+            let scaleRatio = scaleRatioX;
+            if (bbox.width * scaleRatio > visibleRect.width || bbox.height * scaleRatio > visibleRect.height) {
+                scaleRatio = scaleRatioY;
+            }
+            scaleRatio *= 2 / 3;
+            const transfm = Mat33.translation(visibleRect.center.minus(bbox.center)).rightMul(Mat33.scaling2D(scaleRatio, bbox.center));
+            const commands = [];
+            for (const component of components) {
+                // To allow deserialization, we need to add first, then transform.
+                commands.push(EditorImage.addElement(component));
+                commands.push(component.transformBy(transfm));
+            }
+            const applyChunkSize = 100;
+            this.editor.dispatch(uniteCommands(commands, applyChunkSize), true);
+            for (const selectionTool of this.editor.toolController.getMatchingTools(SelectionTool)) {
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(components);
+            }
+        });
+    }
+    doSVGPaste(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const sanitize = true;
+            const loader = SVGLoader.fromString(data, sanitize);
+            const components = [];
+            yield loader.start((component) => {
+                components.push(component);
+            }, (_countProcessed, _totalToProcess) => null);
+            yield this.addComponentsFromPaste(components);
+        });
+    }
+    doTextPaste(text) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const textTools = this.editor.toolController.getMatchingTools(TextTool);
+            textTools.sort((a, b) => {
+                if (!a.isEnabled() && b.isEnabled()) {
+                    return -1;
+                }
+                if (!b.isEnabled() && a.isEnabled()) {
+                    return 1;
+                }
+                return 0;
+            });
+            const defaultTextStyle = { size: 12, fontFamily: 'sans', renderingStyle: { fill: Color4.red } };
+            const pastedTextStyle = (_b = (_a = textTools[0]) === null || _a === void 0 ? void 0 : _a.getTextStyle()) !== null && _b !== void 0 ? _b : defaultTextStyle;
+            const lines = text.split('\n');
+            let lastComponent = null;
+            const components = [];
+            for (const line of lines) {
+                let position = Vec2.zero;
+                if (lastComponent) {
+                    const lineMargin = Math.floor(pastedTextStyle.size);
+                    position = lastComponent.getBBox().bottomLeft.plus(Vec2.unitY.times(lineMargin));
+                }
+                const component = new TextComponent([line], Mat33.translation(position), pastedTextStyle);
+                components.push(component);
+                lastComponent = component;
+            }
+            if (components.length === 1) {
+                yield this.addComponentsFromPaste([components[0]]);
+            }
+            else {
+                // Wrap the existing `TextComponent`s --- dragging one component should drag all.
+                yield this.addComponentsFromPaste([
+                    new TextComponent(components, Mat33.identity, pastedTextStyle)
+                ]);
+            }
+        });
+    }
+    doImagePaste(dataURL) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const image = new Image();
+            image.src = dataURL;
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            yield this.addComponentsFromPaste([component]);
+        });
+    }
+}

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

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import Pointer from '../Pointer';
-import { PointerEvt, StrokeDataPoint } from '../types';
+import { KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 export interface PenStyle {
@@ -30,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

@@ -121,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/SelectionTool.d.ts

@@ -1,9 +1,10 @@
 import Command from '../commands/Command';
+import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { Point2, Vec2 } from '../math/Vec2';
-import { KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
+import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 declare class Selection {
     startPoint: Point2;
@@ -27,6 +28,8 @@ declare class Selection {
     appendBackgroundBoxTo(elem: HTMLElement): void;
     setToPoint(point: Point2): void;
     cancelSelection(): void;
+    setSelectedObjects(objects: AbstractComponent[], bbox: Rect2): void;
+    getSelectedObjects(): AbstractComponent[];
     resolveToObjects(): boolean;
     recomputeRegion(): boolean;
     getMinCanvasSize(): number;
@@ -43,6 +46,7 @@ export default class SelectionTool extends BaseTool {
     private prevSelectionBox;
     private selectionBox;
     constructor(editor: Editor, description: string);
+    private makeSelectionBox;
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onGestureEnd;
@@ -52,8 +56,10 @@ export default class SelectionTool extends BaseTool {
     private static handleableKeys;
     onKeyPress(event: KeyPressEvent): boolean;
     onKeyUp(evt: KeyUpEvent): boolean;
+    onCopy(event: CopyEvent): boolean;
     setEnabled(enabled: boolean): void;
     getSelection(): Selection | null;
+    setSelection(objects: AbstractComponent[]): void;
     clearSelection(): void;
 }
 export {};

package/dist/src/tools/SelectionTool.js

@@ -20,6 +20,7 @@ import { EditorEventType } from '../types';
 import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import SerializableCommand from '../commands/SerializableCommand';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 const handleScreenSize = 30;
 const styles = `
 	.handleOverlay {
@@ -262,6 +263,14 @@ class Selection {
         }
         this.region = Rect2.empty;
     }
+    setSelectedObjects(objects, bbox) {
+        this.region = bbox;
+        this.selectedElems = objects;
+        this.updateUI();
+    }
+    getSelectedObjects() {
+        return this.selectedElems;
+    }
     // Find the objects corresponding to this in the document,
     // select them.
     // Returns false iff nothing was selected.
@@ -427,13 +436,16 @@ export default class SelectionTool extends BaseTool {
         });
         this.editor.handleKeyEventsFrom(this.handleOverlay);
     }
+    makeSelectionBox(selectionStartPos) {
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = new Selection(selectionStartPos, this.editor);
+        // Remove any previous selection rects
+        this.handleOverlay.replaceChildren();
+        this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+    }
     onPointerDown(event) {
         if (event.allPointers.length === 1 && event.current.isPrimary) {
-            this.prevSelectionBox = this.selectionBox;
-            this.selectionBox = new Selection(event.current.canvasPos, this.editor);
-            // Remove any previous selection rects
-            this.handleOverlay.replaceChildren();
-            this.selectionBox.appendBackgroundBoxTo(this.handleOverlay);
+            this.makeSelectionBox(event.current.canvasPos);
             return true;
         }
         return false;
@@ -542,6 +554,11 @@ export default class SelectionTool extends BaseTool {
             Math.max(0.5, scaledSize.x / region.size.x), Math.max(0.5, scaledSize.y / region.size.y)), region.topLeft).rightMul(Mat33.zRotation(rotationSteps * rotateStepSize, region.center)).rightMul(Mat33.translation(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize)));
             this.selectionBox.transformPreview(transform);
         }
+        if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
+            this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
+            this.clearSelection();
+            handled = true;
+        }
         return handled;
     }
     onKeyUp(evt) {
@@ -551,6 +568,28 @@ export default class SelectionTool extends BaseTool {
         }
         return false;
     }
+    onCopy(event) {
+        if (!this.selectionBox) {
+            return false;
+        }
+        const selectedElems = this.selectionBox.getSelectedObjects();
+        const bbox = this.selectionBox.region;
+        if (selectedElems.length === 0) {
+            return false;
+        }
+        const exportViewport = new Viewport(this.editor.notifier);
+        exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
+        exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
+        const svgNameSpace = 'http://www.w3.org/2000/svg';
+        const exportElem = document.createElementNS(svgNameSpace, 'svg');
+        const sanitize = true;
+        const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+        for (const elem of selectedElems) {
+            elem.render(renderer);
+        }
+        event.setData('image/svg+xml', exportElem.outerHTML);
+        return true;
+    }
     setEnabled(enabled) {
         super.setEnabled(enabled);
         // Clear the selection
@@ -569,6 +608,25 @@ export default class SelectionTool extends BaseTool {
     getSelection() {
         return this.selectionBox;
     }
+    setSelection(objects) {
+        let bbox = null;
+        for (const object of objects) {
+            if (bbox) {
+                bbox = bbox.union(object.getBBox());
+            }
+            else {
+                bbox = object.getBBox();
+            }
+        }
+        if (!bbox) {
+            return;
+        }
+        this.clearSelection();
+        if (!this.selectionBox) {
+            this.makeSelectionBox(bbox.topLeft);
+        }
+        this.selectionBox.setSelectedObjects(objects, bbox);
+    }
     clearSelection() {
         this.handleOverlay.replaceChildren();
         this.prevSelectionBox = this.selectionBox;

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

@@ -11,6 +11,7 @@ export default class ToolController {
     constructor(editor: Editor, localization: ToolLocalization);
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
     addPrimaryTool(tool: BaseTool): void;
+    getPrimaryTools(): BaseTool[];
     addTool(tool: BaseTool): void;
     dispatchInputEvent(event: InputEvt): boolean;
     getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];

package/dist/src/tools/ToolController.js

@@ -8,6 +8,8 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
+import ToolSwitcherShortcut from './ToolSwitcherShortcut';
+import PasteHandler from './PasteHandler';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -18,13 +20,13 @@ export default class ToolController {
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
         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), { color: Color4.clay, thickness: 4 }),
             // Highlighter-like pen with width=64
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new Eraser(editor, localization.eraserTool),
+            new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
@@ -33,6 +35,8 @@ export default class ToolController {
             ...primaryTools,
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
+            new ToolSwitcherShortcut(editor),
+            new PasteHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
@@ -64,6 +68,11 @@ export default class ToolController {
         }
         this.addTool(tool);
     }
+    getPrimaryTools() {
+        return this.tools.filter(tool => {
+            return tool.getToolGroup() === this.primaryToolGroup;
+        });
+    }
     // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
     // This should be called before creating the app's toolbar.
     addTool(tool) {
@@ -90,42 +99,49 @@ export default class ToolController {
             this.activeTool = null;
             handled = true;
         }
-        else if (event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent || event.kind === InputEvtType.KeyUpEvent) {
-            const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
-            const isKeyReleaseEvt = event.kind === InputEvtType.KeyUpEvent;
-            const isWheelEvt = event.kind === InputEvtType.WheelEvt;
+        else if (event.kind === InputEvtType.PointerMoveEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onPointerMove(event);
+                handled = true;
+            }
+        }
+        else if (event.kind === InputEvtType.GestureCancelEvt) {
+            if (this.activeTool !== null) {
+                this.activeTool.onGestureCancel();
+                this.activeTool = null;
+            }
+        }
+        else {
+            let allCasesHandledGuard;
             for (const tool of this.tools) {
                 if (!tool.isEnabled()) {
                     continue;
                 }
-                const wheelResult = isWheelEvt && tool.onWheel(event);
-                const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
-                const keyReleaseResult = isKeyReleaseEvt && tool.onKeyUp(event);
-                handled = keyPressResult || wheelResult || keyReleaseResult;
+                switch (event.kind) {
+                    case InputEvtType.KeyPressEvent:
+                        handled = tool.onKeyPress(event);
+                        break;
+                    case InputEvtType.KeyUpEvent:
+                        handled = tool.onKeyUp(event);
+                        break;
+                    case InputEvtType.WheelEvt:
+                        handled = tool.onWheel(event);
+                        break;
+                    case InputEvtType.CopyEvent:
+                        handled = tool.onCopy(event);
+                        break;
+                    case InputEvtType.PasteEvent:
+                        handled = tool.onPaste(event);
+                        break;
+                    default:
+                        allCasesHandledGuard = event;
+                        return allCasesHandledGuard;
+                }
                 if (handled) {
                     break;
                 }
             }
         }
-        else if (this.activeTool !== null) {
-            let allCasesHandledGuard;
-            switch (event.kind) {
-                case InputEvtType.PointerMoveEvt:
-                    this.activeTool.onPointerMove(event);
-                    break;
-                case InputEvtType.GestureCancelEvt:
-                    this.activeTool.onGestureCancel();
-                    this.activeTool = null;
-                    break;
-                default:
-                    allCasesHandledGuard = event;
-                    return allCasesHandledGuard;
-            }
-            handled = true;
-        }
-        else {
-            handled = false;
-        }
         return handled;
     }
     getMatchingTools(type) {

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

@@ -0,0 +1,8 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class ToolSwitcherShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key }: KeyPressEvent): boolean;
+}

package/dist/src/tools/ToolSwitcherShortcut.js

@@ -0,0 +1,26 @@
+// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
+// @packageDocumentation
+import BaseTool from './BaseTool';
+// {@inheritDoc ToolSwitcherShortcut!}
+export default class ToolSwitcherShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+    }
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
+        // Map keys 0-9 to primary tools.
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
+        if (keyMatch) {
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
+            targetTool = primaryTools[targetIdx];
+        }
+        if (targetTool) {
+            targetTool.setEnabled(true);
+            return true;
+        }
+        return false;
+    }
+}

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

@@ -5,8 +5,10 @@ export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
 export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';

package/dist/src/tools/lib.js

@@ -5,8 +5,10 @@ export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
 export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';

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

@@ -10,6 +10,10 @@ export interface ToolLocalization {
     rightClickDragPanTool: string;
     textTool: string;
     enterTextToInsert: string;
+    changeTool: string;
+    pasteHandler: string;
+    copied: (count: number, description: string) => string;
+    pasted: (count: number, description: string) => string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -10,6 +10,10 @@ export const defaultToolLocalization = {
     keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
+    changeTool: 'Change tool',
+    pasteHandler: 'Copy paste handler',
+    copied: (count, description) => `Copied ${count} ${description}`,
+    pasted: (count, description) => `Pasted ${count} ${description}`,
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/src/types.d.ts

@@ -8,6 +8,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
+import { BaseWidget } from './lib';
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
@@ -21,7 +22,9 @@ export declare enum InputEvtType {
     GestureCancelEvt = 3,
     WheelEvt = 4,
     KeyPressEvent = 5,
-    KeyUpEvent = 6
+    KeyUpEvent = 6,
+    CopyEvent = 7,
+    PasteEvent = 8
 }
 export interface WheelEvt {
     readonly kind: InputEvtType.WheelEvt;
@@ -38,6 +41,15 @@ export interface KeyUpEvent {
     readonly key: string;
     readonly ctrlKey: boolean;
 }
+export interface CopyEvent {
+    readonly kind: InputEvtType.CopyEvent;
+    setData(mime: string, data: string): void;
+}
+export interface PasteEvent {
+    readonly kind: InputEvtType.PasteEvent;
+    readonly data: string;
+    readonly mime: string;
+}
 export interface GestureCancelEvt {
     readonly kind: InputEvtType.GestureCancelEvt;
 }
@@ -55,7 +67,7 @@ export interface PointerUpEvt extends PointerEvtBase {
     readonly kind: InputEvtType.PointerUpEvt;
 }
 export declare type PointerEvt = PointerDownEvt | PointerMoveEvt | PointerUpEvt;
-export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt;
+export declare type InputEvt = KeyPressEvent | KeyUpEvent | WheelEvt | GestureCancelEvt | PointerEvt | CopyEvent | PasteEvent;
 export declare type EditorNotifier = EventDispatcher<EditorEventType, EditorEventDataType>;
 export declare enum EditorEventType {
     ToolEnabled = 0,
@@ -68,7 +80,8 @@ export declare enum EditorEventType {
     ViewportChanged = 7,
     DisplayResized = 8,
     ColorPickerToggled = 9,
-    ColorPickerColorSelected = 10
+    ColorPickerColorSelected = 10,
+    ToolbarDropdownShown = 11
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -109,7 +122,11 @@ export interface ColorPickerColorSelected {
     readonly kind: EditorEventType.ColorPickerColorSelected;
     readonly color: Color4;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected;
+export interface ToolbarDropdownShownEvent {
+    readonly kind: EditorEventType.ToolbarDropdownShown;
+    readonly parentWidget: BaseWidget;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;

package/dist/src/types.js

@@ -8,6 +8,8 @@ export var InputEvtType;
     InputEvtType[InputEvtType["WheelEvt"] = 4] = "WheelEvt";
     InputEvtType[InputEvtType["KeyPressEvent"] = 5] = "KeyPressEvent";
     InputEvtType[InputEvtType["KeyUpEvent"] = 6] = "KeyUpEvent";
+    InputEvtType[InputEvtType["CopyEvent"] = 7] = "CopyEvent";
+    InputEvtType[InputEvtType["PasteEvent"] = 8] = "PasteEvent";
 })(InputEvtType || (InputEvtType = {}));
 export var EditorEventType;
 (function (EditorEventType) {
@@ -22,4 +24,5 @@ export var EditorEventType;
     EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
     EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
     EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
 })(EditorEventType || (EditorEventType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",
@@ -72,7 +72,7 @@
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
 		"prepare": "husky install && yarn build",
-		"prepack": "yarn build && pinst --disable",
+		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {