js-draw 0.10.3 → 0.11.1

package/dist/src/toolbar/widgets/InsertImageWidget.js

@@ -0,0 +1,169 @@
+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 ImageComponent from '../../components/ImageComponent';
+import Erase from '../../commands/Erase';
+import EditorImage from '../../EditorImage';
+import { SelectionTool, uniteCommands } from '../../lib';
+import Mat33 from '../../math/Mat33';
+import fileToBase64 from '../../util/fileToBase64';
+import ActionButtonWidget from './ActionButtonWidget';
+export default class InsertImageWidget extends ActionButtonWidget {
+    constructor(editor, localization) {
+        localization !== null && localization !== void 0 ? localization : (localization = editor.localization);
+        super(editor, 'insert-image-widget', () => editor.icons.makeInsertImageIcon(), localization.image, () => this.onClicked());
+        this.imageSelectionOverlay = document.createElement('div');
+        this.imageSelectionOverlay.classList.add('toolbar-image-selection-overlay');
+        this.fillOverlay();
+        this.editor.createHTMLOverlay(this.imageSelectionOverlay);
+        this.imageSelectionOverlay.style.display = 'none';
+    }
+    fillOverlay() {
+        const container = document.createElement('div');
+        const chooseImageRow = document.createElement('div');
+        const altTextRow = document.createElement('div');
+        this.imagePreview = document.createElement('img');
+        this.statusView = document.createElement('div');
+        const actionButtonRow = document.createElement('div');
+        actionButtonRow.classList.add('action-button-row');
+        this.submitButton = document.createElement('button');
+        const cancelButton = document.createElement('button');
+        this.imageFileInput = document.createElement('input');
+        this.imageAltTextInput = document.createElement('input');
+        const imageFileInputLabel = document.createElement('label');
+        const imageAltTextLabel = document.createElement('label');
+        const fileInputId = `insert-image-file-input-${InsertImageWidget.nextInputId++}`;
+        const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
+        this.imageFileInput.setAttribute('id', fileInputId);
+        this.imageAltTextInput.setAttribute('id', altTextInputId);
+        imageAltTextLabel.htmlFor = altTextInputId;
+        imageFileInputLabel.htmlFor = fileInputId;
+        this.imageFileInput.accept = 'image/*';
+        imageAltTextLabel.innerText = this.localizationTable.inputAltText;
+        imageFileInputLabel.innerText = this.localizationTable.chooseFile;
+        this.imageFileInput.type = 'file';
+        this.imageAltTextInput.type = 'text';
+        this.statusView.setAttribute('aria-live', 'polite');
+        cancelButton.innerText = this.localizationTable.cancel;
+        this.submitButton.innerText = this.localizationTable.submit;
+        this.imageFileInput.onchange = () => __awaiter(this, void 0, void 0, function* () {
+            if (this.imageFileInput.value === '' || !this.imageFileInput.files || !this.imageFileInput.files[0]) {
+                this.imagePreview.style.display = 'none';
+                this.submitButton.disabled = true;
+                return;
+            }
+            this.imagePreview.style.display = 'block';
+            const image = this.imageFileInput.files[0];
+            let data = null;
+            try {
+                data = yield fileToBase64(image);
+            }
+            catch (e) {
+                this.statusView.innerText = this.localizationTable.imageLoadError(e);
+            }
+            this.imageBase64URL = data;
+            if (data) {
+                this.imagePreview.src = data;
+                this.submitButton.disabled = false;
+                this.updateImageSizeDisplay();
+            }
+            else {
+                this.submitButton.disabled = true;
+                this.statusView.innerText = '';
+            }
+        });
+        cancelButton.onclick = () => {
+            this.hideDialog();
+        };
+        this.imageSelectionOverlay.onclick = (evt) => {
+            // If clicking on the backdrop
+            if (evt.target === this.imageSelectionOverlay) {
+                this.hideDialog();
+            }
+        };
+        chooseImageRow.replaceChildren(imageFileInputLabel, this.imageFileInput);
+        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+        actionButtonRow.replaceChildren(cancelButton, this.submitButton);
+        container.replaceChildren(chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow);
+        this.imageSelectionOverlay.replaceChildren(container);
+    }
+    hideDialog() {
+        this.imageSelectionOverlay.style.display = 'none';
+    }
+    updateImageSizeDisplay() {
+        var _a;
+        const imageData = (_a = this.imageBase64URL) !== null && _a !== void 0 ? _a : '';
+        const sizeInKiB = imageData.length / 1024;
+        const sizeInMiB = sizeInKiB / 1024;
+        let units = 'KiB';
+        let size = sizeInKiB;
+        if (sizeInMiB >= 1) {
+            size = sizeInMiB;
+            units = 'MiB';
+        }
+        this.statusView.innerText = this.localizationTable.imageSize(Math.round(size), units);
+    }
+    clearInputs() {
+        this.imageFileInput.value = '';
+        this.imageAltTextInput.value = '';
+        this.imagePreview.style.display = 'none';
+        this.submitButton.disabled = true;
+        this.statusView.innerText = '';
+    }
+    onClicked() {
+        var _a;
+        this.imageSelectionOverlay.style.display = '';
+        this.clearInputs();
+        this.imageFileInput.focus();
+        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
+        let editingImage = null;
+        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent) {
+            editingImage = selectedObjects[0];
+            this.imageAltTextInput.value = (_a = editingImage.getAltText()) !== null && _a !== void 0 ? _a : '';
+            this.imagePreview.style.display = 'block';
+            this.submitButton.disabled = false;
+            this.imageBase64URL = editingImage.getURL();
+            this.imagePreview.src = this.imageBase64URL;
+            this.updateImageSizeDisplay();
+        }
+        else {
+            selectionTools.forEach(tool => tool.clearSelection());
+        }
+        this.submitButton.onclick = () => __awaiter(this, void 0, void 0, function* () {
+            var _b;
+            if (!this.imageBase64URL) {
+                return;
+            }
+            const image = new Image();
+            image.src = this.imageBase64URL;
+            image.setAttribute('alt', this.imageAltTextInput.value);
+            const component = yield ImageComponent.fromImage(image, Mat33.identity);
+            if (component.getBBox().area === 0) {
+                this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                return;
+            }
+            this.imageSelectionOverlay.style.display = 'none';
+            if (editingImage) {
+                const eraseCommand = new Erase([editingImage]);
+                yield this.editor.dispatch(uniteCommands([
+                    EditorImage.addElement(component),
+                    component.transformBy(editingImage.getTransformation()),
+                    component.setZIndex(editingImage.getZIndex()),
+                    eraseCommand,
+                ]));
+                (_b = selectionTools[0]) === null || _b === void 0 ? void 0 : _b.setSelection([component]);
+            }
+            else {
+                yield this.editor.addAndCenterComponents([component]);
+            }
+        });
+    }
+}
+InsertImageWidget.nextInputId = 0;

package/dist/src/toolbar/widgets/lib.d.ts

@@ -6,3 +6,4 @@ export { default as TextToolWidget } from './TextToolWidget';
 export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
+export { default as InsertImageWidget } from './InsertImageWidget';

package/dist/src/toolbar/widgets/lib.js

@@ -6,3 +6,4 @@ export { default as TextToolWidget } from './TextToolWidget';
 export { default as HandToolWidget } from './HandToolWidget';
 export { default as SelectionToolWidget } from './SelectionToolWidget';
 export { default as EraserToolWidget } from './EraserToolWidget';
+export { default as InsertImageWidget } from './InsertImageWidget';

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

@@ -4,8 +4,8 @@ import Editor from '../Editor';
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
-    private command;
     private toRemove;
+    private partialCommands;
     constructor(editor: Editor, description: string);
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;

package/dist/src/tools/Eraser.js

@@ -6,7 +6,8 @@ export default class Eraser extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
-        this.command = null;
+        // Commands that each remove one element
+        this.partialCommands = [];
     }
     onPointerDown(event) {
         if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
@@ -17,35 +18,32 @@ export default class Eraser extends BaseTool {
         return false;
     }
     onPointerMove(event) {
-        var _a;
         const currentPoint = event.current.canvasPos;
         if (currentPoint.minus(this.lastPoint).magnitude() === 0) {
             return;
         }
         const line = new LineSegment2(this.lastPoint, currentPoint);
         const region = line.bbox;
-        // Remove any intersecting elements.
-        this.toRemove.push(...this.editor.image
-            .getElementsIntersectingRegion(region).filter(component => {
+        const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
             return component.intersects(line);
-        }));
-        (_a = this.command) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
-        this.command = new Erase(this.toRemove);
-        this.command.apply(this.editor);
+        });
+        // Remove any intersecting elements.
+        this.toRemove.push(...intersectingElems);
+        // Create new Erase commands for the now-to-be-erased elements and apply them.
+        const newPartialCommands = intersectingElems.map(elem => new Erase([elem]));
+        newPartialCommands.forEach(cmd => cmd.apply(this.editor));
+        this.partialCommands.push(...newPartialCommands);
         this.lastPoint = currentPoint;
     }
     onPointerUp(_event) {
-        var _a;
-        if (this.command && this.toRemove.length > 0) {
-            (_a = this.command) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
-            // Dispatch the command to make it undo-able
-            this.editor.dispatch(this.command);
+        if (this.toRemove.length > 0) {
+            // Undo commands for each individual component and unite into a single command.
+            this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
+            const command = new Erase(this.toRemove);
+            this.editor.dispatch(command); // dispatch: Makes undo-able.
         }
-        this.command = null;
     }
     onGestureCancel() {
-        var _a;
-        (_a = this.command) === null || _a === void 0 ? void 0 : _a.unapply(this.editor);
-        this.command = null;
+        this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
     }
 }

package/dist/src/tools/PanZoom.js

@@ -202,10 +202,20 @@ export default class PanZoom extends BaseTool {
             && this.velocity !== null
             && event.current.timeStamp - this.lastPointerDownTimestamp > minInertialScrollDt;
         if (shouldInertialScroll && this.velocity !== null) {
+            const oldVelocity = this.velocity;
             // If the user drags the screen, then stops, then lifts the pointer,
             // we want the final velocity to reflect the stop at the end (so the velocity
             // should be near zero). Handle this:
             this.updateVelocity(event.current.screenPos);
+            // Work around an input issue. Some devices that disable the touchscreen when a stylus
+            // comes near the screen fire a touch-end event at the position of the stylus when a
+            // touch gesture is canceled. Because the stylus is often far away from the last touch,
+            // this causes a great displacement between the second-to-last (from the touchscreen) and
+            // last (from the pen that is now near the screen) events. Only allow velocity to decrease
+            // to work around this:
+            if (oldVelocity.magnitude() < this.velocity.magnitude()) {
+                this.velocity = oldVelocity;
+            }
             // Cancel any ongoing inertial scrolling.
             (_a = this.inertialScroller) === null || _a === void 0 ? void 0 : _a.stop();
             this.inertialScroller = new InertialScroller(this.velocity, (scrollDelta) => {

package/dist/src/tools/PasteHandler.js

@@ -12,16 +12,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { TextComponent } from '../components/lib';
-import { uniteCommands } from '../commands/lib';
 import SVGLoader from '../SVGLoader';
 import { Mat33 } from '../math/lib';
 import BaseTool from './BaseTool';
-import EditorImage from '../EditorImage';
-import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import ImageComponent from '../components/ImageComponent';
-import Viewport from '../Viewport';
 // { @inheritDoc PasteHandler! }
 export default class PasteHandler extends BaseTool {
     constructor(editor) {
@@ -46,41 +42,7 @@ export default class PasteHandler extends BaseTool {
     }
     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;
-            scaleRatio = Viewport.roundScaleRatio(scaleRatio);
-            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);
-            }
+            yield this.editor.addAndCenterComponents(components);
         });
     }
     doSVGPaste(data) {

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

@@ -14,7 +14,6 @@ export default class Selection {
     private originalRegion;
     private transformers;
     private transform;
-    private transformCommands;
     private selectedElems;
     private container;
     private backgroundElem;
@@ -28,7 +27,6 @@ export default class Selection {
     get preTransformedScreenRegionRotation(): number;
     get screenRegion(): Rect2;
     get screenRegionRotation(): number;
-    private computeTransformCommands;
     setTransform(transform: Mat33, preview?: boolean): void;
     finalizeTransform(): void;
     private static ApplyTransformationCommand;
@@ -38,13 +36,14 @@ export default class Selection {
     getMinCanvasSize(): number;
     getSelectedItemCount(): number;
     updateUI(): void;
+    private addRemoveSelectionFromImage;
     private targetHandle;
     private backgroundDragging;
     onDragStart(pointer: Pointer, target: EventTarget): boolean;
     onDragUpdate(pointer: Pointer): void;
     onDragEnd(): void;
     onDragCancel(): void;
-    scrollTo(): void;
+    scrollTo(): Promise<void>;
     deleteSelectedObjects(): Command;
     duplicateSelectedObjects(): Command;
     addTo(elem: HTMLElement): void;

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

@@ -22,13 +22,14 @@ import Erase from '../../commands/Erase';
 import Duplicate from '../../commands/Duplicate';
 import { DragTransformer, ResizeTransformer, RotateTransformer } from './TransformMode';
 import { ResizeMode } from './types';
+import EditorImage from '../../EditorImage';
 const updateChunkSize = 100;
+const maxPreviewElemCount = 500;
 // @internal
 export default class Selection {
     constructor(startPoint, editor) {
         this.editor = editor;
         this.transform = Mat33.identity;
-        this.transformCommands = [];
         this.selectedElems = [];
         this.hasParent = true;
         this.targetHandle = null;
@@ -89,28 +90,19 @@ export default class Selection {
     get screenRegionRotation() {
         return this.regionRotation + this.editor.viewport.getRotationAngle();
     }
-    computeTransformCommands() {
-        return this.selectedElems.map(elem => {
-            return elem.transformBy(this.transform);
-        });
-    }
     // Applies, previews, but doesn't finalize the given transformation.
     setTransform(transform, preview = true) {
         this.transform = transform;
         if (preview && this.hasParent) {
-            this.previewTransformCmds();
             this.scrollTo();
+            this.previewTransformCmds();
         }
     }
     // Applies the current transformation to the selection
     finalizeTransform() {
-        this.transformCommands.forEach(cmd => {
-            cmd.unapply(this.editor);
-        });
         const fullTransform = this.transform;
         const selectedElems = this.selectedElems;
         // Reset for the next drag
-        this.transformCommands = [];
         this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
         this.transform = Mat33.identity;
         // Make the commands undo-able
@@ -119,13 +111,19 @@ export default class Selection {
     // Preview the effects of the current transformation on the selection
     previewTransformCmds() {
         // Don't render what we're moving if it's likely to be slow.
-        if (this.selectedElems.length > updateChunkSize) {
+        if (this.selectedElems.length > maxPreviewElemCount) {
             this.updateUI();
             return;
         }
-        this.transformCommands.forEach(cmd => cmd.unapply(this.editor));
-        this.transformCommands = this.computeTransformCommands();
-        this.transformCommands.forEach(cmd => cmd.apply(this.editor));
+        const wetInkRenderer = this.editor.display.getWetInkRenderer();
+        wetInkRenderer.clear();
+        wetInkRenderer.pushTransform(this.transform);
+        const viewportVisibleRect = this.editor.viewport.visibleRect;
+        const visibleRect = viewportVisibleRect.transformedBoundingBox(this.transform.inverse());
+        for (const elem of this.selectedElems) {
+            elem.render(wetInkRenderer, visibleRect);
+        }
+        wetInkRenderer.popTransform();
         this.updateUI();
     }
     // Find the objects corresponding to this in the document,
@@ -208,7 +206,39 @@ export default class Selection {
             handle.updatePosition();
         }
     }
+    // Add/remove the contents of this' seleciton from the editor.
+    // Used to prevent previewed content from looking like duplicate content
+    // while dragging.
+    //
+    // Does nothing if a large number of elements are selected (and so modifying
+    // the editor image is likely to be slow.)
+    //
+    // If removed from the image, selected elements are drawn as wet ink.
+    addRemoveSelectionFromImage(inImage) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Don't hide elements if doing so will be slow.
+            if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
+                return;
+            }
+            for (const elem of this.selectedElems) {
+                const parent = this.editor.image.findParent(elem);
+                if (!inImage) {
+                    parent === null || parent === void 0 ? void 0 : parent.remove();
+                }
+                // If we're making things visible and the selected object wasn't previously
+                // visible,
+                else if (!parent) {
+                    EditorImage.addElement(elem).apply(this.editor);
+                }
+            }
+            yield this.editor.queueRerender();
+            if (!inImage) {
+                this.previewTransformCmds();
+            }
+        });
+    }
     onDragStart(pointer, target) {
+        void this.addRemoveSelectionFromImage(false);
         for (const handle of this.handles) {
             if (handle.isTarget(target)) {
                 handle.handleDragStart(pointer);
@@ -230,7 +260,6 @@ export default class Selection {
         if (this.targetHandle) {
             this.targetHandle.handleDragUpdate(pointer);
         }
-        this.updateUI();
     }
     onDragEnd() {
         if (this.backgroundDragging) {
@@ -239,6 +268,7 @@ export default class Selection {
         else if (this.targetHandle) {
             this.targetHandle.handleDragEnd();
         }
+        this.addRemoveSelectionFromImage(true);
         this.backgroundDragging = false;
         this.targetHandle = null;
         this.updateUI();
@@ -247,19 +277,26 @@ export default class Selection {
         this.backgroundDragging = false;
         this.targetHandle = null;
         this.setTransform(Mat33.identity);
+        this.addRemoveSelectionFromImage(true);
     }
     // Scroll the viewport to this. Does not zoom
     scrollTo() {
-        if (this.selectedElems.length === 0) {
-            return;
-        }
-        const screenRect = new Rect2(0, 0, this.editor.display.width, this.editor.display.height);
-        if (!screenRect.containsPoint(this.screenRegion.center)) {
-            const closestPoint = screenRect.getClosestPointOnBoundaryTo(this.screenRegion.center);
-            const screenDelta = this.screenRegion.center.minus(closestPoint);
-            const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenDelta);
-            this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.selectedElems.length === 0) {
+                return;
+            }
+            const screenRect = new Rect2(0, 0, this.editor.display.width, this.editor.display.height);
+            if (!screenRect.containsPoint(this.screenRegion.center)) {
+                const closestPoint = screenRect.getClosestPointOnBoundaryTo(this.screenRegion.center);
+                const screenDelta = this.screenRegion.center.minus(closestPoint);
+                const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenDelta);
+                yield this.editor.dispatchNoAnnounce(Viewport.transformBy(Mat33.translation(delta.times(-1))), false);
+                // Re-renders clear wet ink, so we need to re-draw the preview
+                // after the full re-render.
+                yield this.editor.queueRerender();
+                this.previewTransformCmds();
+            }
+        });
     }
     deleteSelectedObjects() {
         return new Erase(this.selectedElems);

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

@@ -311,6 +311,15 @@ export default class SelectionTool extends BaseTool {
     setSelection(objects) {
         // Only select selectable objects.
         objects = objects.filter(obj => obj.isSelectable());
+        // Sort by z-index
+        objects.sort((a, b) => a.getZIndex() - b.getZIndex());
+        // Remove duplicates
+        objects = objects.filter((current, idx) => {
+            if (idx > 0) {
+                return current !== objects[idx - 1];
+            }
+            return true;
+        });
         let bbox = null;
         for (const object of objects) {
             if (bbox) {

package/dist/src/util/fileToBase64.d.ts

@@ -0,0 +1,3 @@
+type ProgressListener = (evt: ProgressEvent<FileReader>) => void;
+declare const fileToBase64: (file: File, onprogress?: ProgressListener) => Promise<string | null>;
+export default fileToBase64;

package/dist/src/util/fileToBase64.js

@@ -0,0 +1,13 @@
+const fileToBase64 = (file, onprogress) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.onabort = reject;
+        reader.onprogress = (evt) => {
+            onprogress === null || onprogress === void 0 ? void 0 : onprogress(evt);
+        };
+        reader.readAsDataURL(file);
+    });
+};
+export default fileToBase64;

package/dist/src/util/waitForTimeout.d.ts

@@ -0,0 +1,2 @@
+declare const waitForTimeout: (timeout: number) => Promise<void>;
+export default waitForTimeout;

package/dist/src/util/waitForTimeout.js

@@ -0,0 +1,7 @@
+// Returns a promise that resolves after `timeout` milliseconds.
+const waitForTimeout = (timeout) => {
+    return new Promise(resolve => {
+        setTimeout(() => resolve(), timeout);
+    });
+};
+export default waitForTimeout;

package/package.json

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