js-draw 0.11.0 → 0.11.2

package/dist/src/Editor.d.ts

@@ -174,7 +174,7 @@ export declare class Editor {
      * editor.dispatchNoAnnounce(editor.viewport.zoomTo(someRectangle), addToHistory);
      * ```
      */
-    dispatchNoAnnounce(command: Command, addToHistory?: boolean): void;
+    dispatchNoAnnounce(command: Command, addToHistory?: boolean): void | Promise<void>;
     /**
      * Apply a large transformation in chunks.
      * If `apply` is `false`, the commands are unapplied.
@@ -186,8 +186,15 @@ export declare class Editor {
     asyncUnapplyCommands(commands: Command[], chunkSize: number): Promise<void>;
     private announceUndoCallback;
     private announceRedoCallback;
+    private nextRerenderListeners;
     private rerenderQueued;
-    queueRerender(): void;
+    /**
+     * Schedule a re-render for some time in the near future. Does not schedule an additional
+     * re-render if a re-render is already queued.
+     *
+     * @returns a promise that resolves when
+     */
+    queueRerender(): Promise<void>;
     rerender(showImageBounds?: boolean): void;
     drawWetInk(...path: RenderablePathSpec[]): void;
     clearWetInk(): void;

package/dist/src/Editor.js

@@ -84,6 +84,8 @@ export class Editor {
         this.announceRedoCallback = (command) => {
             this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this, this.localization)));
         };
+        // Listeners to be called once at the end of the next re-render.
+        this.nextRerenderListeners = [];
         this.rerenderQueued = false;
         this.localization = Object.assign(Object.assign({}, getLocalizationTable()), settings.localization);
         // Fill default settings.
@@ -474,13 +476,9 @@ export class Editor {
     }
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
-        if (addToHistory) {
-            const apply = false; // Don't double-apply
-            this.history.push(command, apply);
-        }
-        const applyResult = command.apply(this);
+        const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
         this.announceForAccessibility(command.description(this, this.localization));
-        return applyResult;
+        return dispatchResult;
     }
     /**
      * Dispatches a command without announcing it. By default, does not add to history.
@@ -499,11 +497,10 @@ export class Editor {
      */
     dispatchNoAnnounce(command, addToHistory = false) {
         if (addToHistory) {
-            this.history.push(command);
-        }
-        else {
-            command.apply(this);
+            const apply = false; // Don't double-apply
+            this.history.push(command, apply);
         }
+        return command.apply(this);
     }
     /**
      * Apply a large transformation in chunks.
@@ -546,16 +543,27 @@ export class Editor {
     asyncUnapplyCommands(commands, chunkSize) {
         return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
     }
-    // Schedule a re-render for some time in the near future. Does not schedule an additional
-    // re-render if a re-render is already queued.
+    /**
+     * Schedule a re-render for some time in the near future. Does not schedule an additional
+     * re-render if a re-render is already queued.
+     *
+     * @returns a promise that resolves when
+     */
     queueRerender() {
         if (!this.rerenderQueued) {
             this.rerenderQueued = true;
             requestAnimationFrame(() => {
-                this.rerender();
-                this.rerenderQueued = false;
+                // If .rerender was called manually, we might not need to
+                // re-render.
+                if (this.rerenderQueued) {
+                    this.rerender();
+                    this.rerenderQueued = false;
+                }
             });
         }
+        return new Promise(resolve => {
+            this.nextRerenderListeners.push(() => resolve());
+        });
     }
     rerender(showImageBounds = true) {
         this.display.startRerender();
@@ -572,6 +580,8 @@ export class Editor {
             renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
         }
         this.rerenderQueued = false;
+        this.nextRerenderListeners.forEach(listener => listener());
+        this.nextRerenderListeners = [];
     }
     drawWetInk(...path) {
         for (const part of path) {

package/dist/src/EditorImage.js

@@ -2,7 +2,7 @@ var _a;
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
 import SerializableCommand from './commands/SerializableCommand';
-// @internal
+// @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
 };

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,34 @@ 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));
+            this.partialCommands = [];
+            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));
+        this.partialCommands = [];
     }
 }

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/package.json

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

package/src/Editor.ts

@@ -626,15 +626,10 @@ export class Editor {
 
 	/** `apply` a command. `command` will be announced for accessibility. */
 	public dispatch(command: Command, addToHistory: boolean = true) {
-		if (addToHistory) {
-			const apply = false; // Don't double-apply
-			this.history.push(command, apply);
-		}
-
-		const applyResult = command.apply(this);
+		const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
 		this.announceForAccessibility(command.description(this, this.localization));
 
-		return applyResult;
+		return dispatchResult;
 	}
 
 	/**
@@ -654,10 +649,11 @@ export class Editor {
 	 */
 	public dispatchNoAnnounce(command: Command, addToHistory: boolean = false) {
 		if (addToHistory) {
-			this.history.push(command);
-		} else {
-			command.apply(this);
+			const apply = false; // Don't double-apply
+			this.history.push(command, apply);
 		}
+
+		return command.apply(this);
 	}
 
 	/**
@@ -714,17 +710,32 @@ export class Editor {
 		this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this, this.localization)));
 	};
 
+	// Listeners to be called once at the end of the next re-render.
+	private nextRerenderListeners: Array<()=> void> = [];
 	private rerenderQueued: boolean = false;
-	// Schedule a re-render for some time in the near future. Does not schedule an additional
-	// re-render if a re-render is already queued.
-	public queueRerender() {
+
+	/**
+	 * Schedule a re-render for some time in the near future. Does not schedule an additional
+	 * re-render if a re-render is already queued.
+	 *
+	 * @returns a promise that resolves when 
+	 */
+	public queueRerender(): Promise<void> {
 		if (!this.rerenderQueued) {
 			this.rerenderQueued = true;
 			requestAnimationFrame(() => {
-				this.rerender();
-				this.rerenderQueued = false;
+				// If .rerender was called manually, we might not need to
+				// re-render.
+				if (this.rerenderQueued) {
+					this.rerender();
+					this.rerenderQueued = false;
+				}
 			});
 		}
+
+		return new Promise(resolve => {
+			this.nextRerenderListeners.push(() => resolve());
+		});
 	}
 
 	public rerender(showImageBounds: boolean = true) {
@@ -751,6 +762,8 @@ export class Editor {
 		}
 
 		this.rerenderQueued = false;
+		this.nextRerenderListeners.forEach(listener => listener());
+		this.nextRerenderListeners = [];
 	}
 
 	public drawWetInk(...path: RenderablePathSpec[]) {

package/src/EditorImage.ts

@@ -7,7 +7,7 @@ import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 
-// @internal
+// @internal Sort by z-index, low to high
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
 };

package/src/tools/Eraser.ts

@@ -9,9 +9,11 @@ import { PointerDevice } from '../Pointer';
 
 export default class Eraser extends BaseTool {
 	private lastPoint: Point2;
-	private command: Erase|null = null;
 	private toRemove: AbstractComponent[];
 
+	// Commands that each remove one element
+	private partialCommands: Erase[] = [];
+
 	public constructor(private editor: Editor, description: string) {
 		super(editor.notifier, description);
 	}
@@ -35,31 +37,35 @@ export default class Eraser extends BaseTool {
 		const line = new LineSegment2(this.lastPoint, currentPoint);
 		const region = line.bbox;
 
+		const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
+			return component.intersects(line);
+		});
+
 		// Remove any intersecting elements.
-		this.toRemove.push(...this.editor.image
-			.getElementsIntersectingRegion(region).filter(component => {
-				return component.intersects(line);
-			}));
+		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.command?.unapply(this.editor);
-		this.command = new Erase(this.toRemove);
-		this.command.apply(this.editor);
+		this.partialCommands.push(...newPartialCommands);
 
 		this.lastPoint = currentPoint;
 	}
 
 	public onPointerUp(_event: PointerEvt): void {
-		if (this.command && this.toRemove.length > 0) {
-			this.command?.unapply(this.editor);
+		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));
+			this.partialCommands = [];
 
-			// Dispatch the command to make it undo-able
-			this.editor.dispatch(this.command);
+			const command = new Erase(this.toRemove);
+			this.editor.dispatch(command); // dispatch: Makes undo-able.
 		}
-		this.command = null;
 	}
 
 	public onGestureCancel(): void {
-		this.command?.unapply(this.editor);
-		this.command = null;
+		this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
+		this.partialCommands = [];
 	}
 }