js-draw 0.3.1 → 0.4.0

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

@@ -0,0 +1,31 @@
+import AbstractComponent from '../../components/AbstractComponent';
+import Editor from '../../Editor';
+import { CopyEvent, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../types';
+import BaseTool from '../BaseTool';
+import Selection from './Selection';
+export declare const cssPrefix = "selection-tool-";
+export default class SelectionTool extends BaseTool {
+    private editor;
+    private handleOverlay;
+    private prevSelectionBox;
+    private selectionBox;
+    private lastEvtTarget;
+    constructor(editor: Editor, description: string);
+    private makeSelectionBox;
+    private selectionBoxHandlingEvt;
+    onPointerDown(event: PointerEvt): boolean;
+    onPointerMove(event: PointerEvt): void;
+    private onSelectionUpdated;
+    private onGestureEnd;
+    private zoomToSelection;
+    onPointerUp(event: PointerEvt): void;
+    onGestureCancel(): void;
+    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;
+}

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -0,0 +1,276 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
+import { EditorEventType } from '../../types';
+import Viewport from '../../Viewport';
+import BaseTool from '../BaseTool';
+import SVGRenderer from '../../rendering/renderers/SVGRenderer';
+import Selection from './Selection';
+export const cssPrefix = 'selection-tool-';
+// {@inheritDoc SelectionTool!}
+export default class SelectionTool extends BaseTool {
+    constructor(editor, description) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.lastEvtTarget = null;
+        this.selectionBoxHandlingEvt = false;
+        this.handleOverlay = document.createElement('div');
+        editor.createHTMLOverlay(this.handleOverlay);
+        this.handleOverlay.style.display = 'none';
+        this.handleOverlay.classList.add('handleOverlay');
+        editor.notifier.on(EditorEventType.ViewportChanged, _data => {
+            var _a;
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.updateUI();
+        });
+        this.editor.handleKeyEventsFrom(this.handleOverlay);
+        this.editor.handlePointerEventsFrom(this.handleOverlay, (eventName, htmlEvent) => {
+            if (eventName === 'pointerdown') {
+                this.lastEvtTarget = htmlEvent.target;
+            }
+            return true;
+        });
+    }
+    makeSelectionBox(selectionStartPos) {
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = new Selection(selectionStartPos, this.editor);
+        // Remove any previous selection rects
+        this.handleOverlay.replaceChildren();
+        this.selectionBox.addTo(this.handleOverlay);
+    }
+    onPointerDown(event) {
+        var _a;
+        if (event.allPointers.length === 1 && event.current.isPrimary) {
+            if (this.lastEvtTarget && ((_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragStart(event.current, this.lastEvtTarget))) {
+                this.selectionBoxHandlingEvt = true;
+            }
+            else {
+                this.makeSelectionBox(event.current.canvasPos);
+            }
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        if (!this.selectionBox)
+            return;
+        if (this.selectionBoxHandlingEvt) {
+            this.selectionBox.onDragUpdate(event.current);
+        }
+        else {
+            this.selectionBox.setToPoint(event.current.canvasPos);
+        }
+    }
+    onSelectionUpdated() {
+        var _a, _b;
+        // Note that the selection has changed
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+        const selectedItemCount = (_b = (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.getSelectedItemCount()) !== null && _b !== void 0 ? _b : 0;
+        if (selectedItemCount > 0) {
+            this.editor.announceForAccessibility(this.editor.localization.selectedElements(selectedItemCount));
+            this.zoomToSelection();
+        }
+        else if (this.selectionBox) {
+            this.selectionBox.cancelSelection();
+            this.prevSelectionBox = this.selectionBox;
+            this.selectionBox = null;
+        }
+    }
+    onGestureEnd() {
+        this.lastEvtTarget = null;
+        if (!this.selectionBox)
+            return;
+        if (!this.selectionBoxHandlingEvt) {
+            // Expand/shrink the selection rectangle, if applicable
+            this.selectionBox.resolveToObjects();
+            this.onSelectionUpdated();
+        }
+        else {
+            this.selectionBox.onDragEnd();
+        }
+        this.selectionBoxHandlingEvt = false;
+    }
+    zoomToSelection() {
+        if (this.selectionBox) {
+            const selectionRect = this.selectionBox.region;
+            this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+        }
+    }
+    onPointerUp(event) {
+        if (!this.selectionBox)
+            return;
+        this.selectionBox.setToPoint(event.current.canvasPos);
+        this.onGestureEnd();
+    }
+    onGestureCancel() {
+        var _a, _b, _c;
+        if (this.selectionBoxHandlingEvt) {
+            (_a = this.selectionBox) === null || _a === void 0 ? void 0 : _a.onDragCancel();
+        }
+        else {
+            // Revert to the previous selection, if any.
+            (_b = this.selectionBox) === null || _b === void 0 ? void 0 : _b.cancelSelection();
+            this.selectionBox = this.prevSelectionBox;
+            (_c = this.selectionBox) === null || _c === void 0 ? void 0 : _c.addTo(this.handleOverlay);
+        }
+    }
+    onKeyPress(event) {
+        let rotationSteps = 0;
+        let xTranslateSteps = 0;
+        let yTranslateSteps = 0;
+        let xScaleSteps = 0;
+        let yScaleSteps = 0;
+        switch (event.key) {
+            case 'a':
+            case 'h':
+            case 'ArrowLeft':
+                xTranslateSteps -= 1;
+                break;
+            case 'd':
+            case 'l':
+            case 'ArrowRight':
+                xTranslateSteps += 1;
+                break;
+            case 'q':
+            case 'k':
+            case 'ArrowUp':
+                yTranslateSteps -= 1;
+                break;
+            case 'e':
+            case 'j':
+            case 'ArrowDown':
+                yTranslateSteps += 1;
+                break;
+            case 'r':
+                rotationSteps += 1;
+                break;
+            case 'R':
+                rotationSteps -= 1;
+                break;
+            case 'i':
+                xScaleSteps -= 1;
+                break;
+            case 'I':
+                xScaleSteps += 1;
+                break;
+            case 'o':
+                yScaleSteps -= 1;
+                break;
+            case 'O':
+                yScaleSteps += 1;
+                break;
+        }
+        let handled = xTranslateSteps !== 0
+            || yTranslateSteps !== 0
+            || rotationSteps !== 0
+            || xScaleSteps !== 0
+            || yScaleSteps !== 0;
+        if (!this.selectionBox) {
+            handled = false;
+        }
+        else if (handled) {
+            const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+            const rotateStepSize = Math.PI / 8;
+            const scaleStepSize = 5 / 4;
+            const region = this.selectionBox.region;
+            const scaleFactor = Vec2.of(Math.pow(scaleStepSize, xScaleSteps), Math.pow(scaleStepSize, yScaleSteps));
+            const rotationMat = Mat33.zRotation(rotationSteps * rotateStepSize);
+            const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport.roundScaleRatio(component));
+            const regionCenter = this.editor.viewport.roundPoint(region.center);
+            const transform = Mat33.scaling2D(scaleFactor, this.editor.viewport.roundPoint(region.topLeft)).rightMul(Mat33.translation(regionCenter).rightMul(roundedRotationMatrix).rightMul(Mat33.translation(regionCenter.times(-1)))).rightMul(Mat33.translation(this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))));
+            const oldTransform = this.selectionBox.getTransform();
+            this.selectionBox.setTransform(oldTransform.rightMul(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) {
+        if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
+            this.selectionBox.finalizeTransform();
+            return true;
+        }
+        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
+        this.handleOverlay.replaceChildren();
+        this.selectionBox = null;
+        this.handleOverlay.style.display = enabled ? 'block' : 'none';
+        if (enabled) {
+            this.handleOverlay.tabIndex = 0;
+            this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
+        }
+        else {
+            this.handleOverlay.tabIndex = -1;
+        }
+    }
+    // Get the object responsible for displaying this' selection.
+    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);
+        this.onSelectionUpdated();
+    }
+    clearSelection() {
+        this.handleOverlay.replaceChildren();
+        this.prevSelectionBox = this.selectionBox;
+        this.selectionBox = null;
+        this.onSelectionUpdated();
+    }
+}
+SelectionTool.handleableKeys = [
+    'a', 'h', 'ArrowLeft',
+    'd', 'l', 'ArrowRight',
+    'q', 'k', 'ArrowUp',
+    'e', 'j', 'ArrowDown',
+    'r', 'R',
+    'i', 'I', 'o', 'O',
+];

package/dist/src/tools/SelectionTool/TransformMode.d.ts

@@ -0,0 +1,34 @@
+import Editor from '../../Editor';
+import Vec3 from '../../math/Vec3';
+import Selection from './Selection';
+import { ResizeMode } from './types';
+export declare class DragTransformer {
+    private readonly editor;
+    private selection;
+    private dragStartPoint;
+    constructor(editor: Editor, selection: Selection);
+    onDragStart(startPoint: Vec3): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}
+export declare class ResizeTransformer {
+    private readonly editor;
+    private selection;
+    private mode;
+    private dragStartPoint;
+    constructor(editor: Editor, selection: Selection);
+    onDragStart(startPoint: Vec3, mode: ResizeMode): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}
+export declare class RotateTransformer {
+    private readonly editor;
+    private selection;
+    private startAngle;
+    constructor(editor: Editor, selection: Selection);
+    private getAngle;
+    private roundAngle;
+    onDragStart(startPoint: Vec3): void;
+    onDragUpdate(canvasPos: Vec3): void;
+    onDragEnd(): void;
+}

package/dist/src/tools/SelectionTool/TransformMode.js

@@ -0,0 +1,98 @@
+import Mat33 from '../../math/Mat33';
+import { Vec2 } from '../../math/Vec2';
+import Viewport from '../../Viewport';
+import { ResizeMode } from './types';
+export class DragTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+    }
+    onDragStart(startPoint) {
+        this.selection.setTransform(Mat33.identity);
+        this.dragStartPoint = startPoint;
+    }
+    onDragUpdate(canvasPos) {
+        const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+        this.selection.setTransform(Mat33.translation(delta));
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}
+export class ResizeTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.mode = ResizeMode.Both;
+    }
+    onDragStart(startPoint, mode) {
+        this.selection.setTransform(Mat33.identity);
+        this.mode = mode;
+        this.dragStartPoint = startPoint;
+    }
+    onDragUpdate(canvasPos) {
+        const canvasDelta = canvasPos.minus(this.dragStartPoint);
+        const origWidth = this.selection.preTransformRegion.width;
+        const origHeight = this.selection.preTransformRegion.height;
+        let scale = Vec2.of(1, 1);
+        if (this.mode === ResizeMode.HorizontalOnly) {
+            const newWidth = origWidth + canvasDelta.x;
+            scale = Vec2.of(newWidth / origWidth, scale.y);
+        }
+        if (this.mode === ResizeMode.VerticalOnly) {
+            const newHeight = origHeight + canvasDelta.y;
+            scale = Vec2.of(scale.x, newHeight / origHeight);
+        }
+        if (this.mode === ResizeMode.Both) {
+            const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
+            const newWidth = origWidth + delta;
+            scale = Vec2.of(newWidth / origWidth, newWidth / origWidth);
+        }
+        // Round: If this isn't done, scaling can create numbers with long decimal representations.
+        //    long decimal representations => large file sizes.
+        scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
+        if (scale.x > 0 && scale.y > 0) {
+            const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+            this.selection.setTransform(Mat33.scaling2D(scale, origin));
+        }
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}
+export class RotateTransformer {
+    constructor(editor, selection) {
+        this.editor = editor;
+        this.selection = selection;
+        this.startAngle = 0;
+    }
+    getAngle(canvasPoint) {
+        const selectionCenter = this.selection.preTransformRegion.center;
+        const offset = canvasPoint.minus(selectionCenter);
+        return offset.angle();
+    }
+    roundAngle(angle) {
+        // Round angles to the nearest 16th of a turn
+        const roundingFactor = 16 / 2 / Math.PI;
+        return Math.round(angle * roundingFactor) / roundingFactor;
+    }
+    onDragStart(startPoint) {
+        this.selection.setTransform(Mat33.identity);
+        this.startAngle = this.getAngle(startPoint);
+    }
+    onDragUpdate(canvasPos) {
+        const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+        // Transform in canvas space
+        const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
+        const unrounded = Mat33.zRotation(targetRotation);
+        const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
+        const fullRoundedTransform = Mat33
+            .translation(canvasSelCenter)
+            .rightMul(roundedRotationTransform)
+            .rightMul(Mat33.translation(canvasSelCenter.times(-1)));
+        this.selection.setTransform(fullRoundedTransform);
+    }
+    onDragEnd() {
+        this.selection.finalizeTransform();
+    }
+}

package/dist/src/tools/SelectionTool/types.d.ts

@@ -0,0 +1,9 @@
+export declare enum ResizeMode {
+    Both = 0,
+    HorizontalOnly = 1,
+    VerticalOnly = 2
+}
+export declare enum TransformMode {
+    Snap = 0,
+    NoSnap = 1
+}

package/dist/src/tools/SelectionTool/types.js

@@ -0,0 +1,11 @@
+export var ResizeMode;
+(function (ResizeMode) {
+    ResizeMode[ResizeMode["Both"] = 0] = "Both";
+    ResizeMode[ResizeMode["HorizontalOnly"] = 1] = "HorizontalOnly";
+    ResizeMode[ResizeMode["VerticalOnly"] = 2] = "VerticalOnly";
+})(ResizeMode || (ResizeMode = {}));
+export var TransformMode;
+(function (TransformMode) {
+    TransformMode[TransformMode["Snap"] = 0] = "Snap";
+    TransformMode[TransformMode["NoSnap"] = 1] = "NoSnap";
+})(TransformMode || (TransformMode = {}));

package/dist/src/tools/ToolController.js

@@ -3,12 +3,13 @@ import PanZoom, { PanZoomMode } from './PanZoom';
 import Pen from './Pen';
 import ToolEnabledGroup from './ToolEnabledGroup';
 import Eraser from './Eraser';
-import SelectionTool from './SelectionTool';
+import SelectionTool from './SelectionTool/SelectionTool';
 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) {
@@ -35,6 +36,7 @@ export default class ToolController {
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
             new ToolSwitcherShortcut(editor),
+            new PasteHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
@@ -97,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/lib.d.ts

@@ -9,5 +9,6 @@ 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 SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';

package/dist/src/tools/lib.js

@@ -9,5 +9,6 @@ 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 SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';

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

@@ -11,6 +11,9 @@ export interface ToolLocalization {
     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

@@ -11,6 +11,9 @@ export const defaultToolLocalization = {
     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,7 +8,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
-import { BaseWidget } from './lib';
+import BaseWidget from './toolbar/widgets/BaseWidget';
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
@@ -22,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;
@@ -39,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;
 }
@@ -56,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,

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.3.1",
+	"version": "0.4.0",
 	"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",

package/src/Editor.css

@@ -1,5 +1,6 @@
 
 @import url('./toolbar/toolbar.css');
+@import url('./tools/SelectionTool/SelectionTool.css');
 
 .imageEditorContainer {
 	/* Deafult colors for the editor */