js-draw 0.11.0 → 0.11.2

package/src/tools/SelectionTool/Selection.ts

@@ -19,8 +19,10 @@ import Duplicate from '../../commands/Duplicate';
 import Command from '../../commands/Command';
 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 {
@@ -28,9 +30,7 @@ export default class Selection {
 	private originalRegion: Rect2;
 
 	private transformers;
-
 	private transform: Mat33 = Mat33.identity;
-	private transformCommands: SerializableCommand[] = [];
 
 	private selectedElems: AbstractComponent[] = [];
 
@@ -147,33 +147,22 @@ export default class Selection {
 		return this.regionRotation + this.editor.viewport.getRotationAngle();
 	}
 
-	private computeTransformCommands(): SerializableCommand[] {
-		return this.selectedElems.map(elem => {
-			return elem.transformBy(this.transform);
-		});
-	}
-
 	// Applies, previews, but doesn't finalize the given transformation.
 	public setTransform(transform: Mat33, preview: boolean = true) {
 		this.transform = transform;
 
 		if (preview && this.hasParent) {
-			this.previewTransformCmds();
 			this.scrollTo();
+			this.previewTransformCmds();
 		}
 	}
 
 	// Applies the current transformation to the selection
 	public 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;
 
@@ -277,14 +266,23 @@ export default class Selection {
 	// Preview the effects of the current transformation on the selection
 	private 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();
 	}
@@ -394,9 +392,44 @@ export default class Selection {
 		}
 	}
 
+	// 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.
+	private async addRemoveSelectionFromImage(inImage: boolean) {
+		// 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?.remove();
+			}
+			// If we're making things visible and the selected object wasn't previously
+			// visible,
+			else if (!parent) {
+				EditorImage.addElement(elem).apply(this.editor);
+			}
+		}
+
+		await this.editor.queueRerender();
+		if (!inImage) {
+			this.previewTransformCmds();
+		}
+	}
+
 	private targetHandle: SelectionHandle|null = null;
 	private backgroundDragging: boolean = false;
 	public onDragStart(pointer: Pointer, target: EventTarget): boolean {
+		void this.addRemoveSelectionFromImage(false);
+
 		for (const handle of this.handles) {
 			if (handle.isTarget(target)) {
 				handle.handleDragStart(pointer);
@@ -422,8 +455,6 @@ export default class Selection {
 		if (this.targetHandle) {
 			this.targetHandle.handleDragUpdate(pointer);
 		}
-
-		this.updateUI();
 	}
 
 	public onDragEnd() {
@@ -434,6 +465,8 @@ export default class Selection {
 			this.targetHandle.handleDragEnd();
 		}
 
+		this.addRemoveSelectionFromImage(true);
+
 		this.backgroundDragging = false;
 		this.targetHandle = null;
 		this.updateUI();
@@ -443,10 +476,12 @@ 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
-	public scrollTo() {
+	public async scrollTo() {
 		if (this.selectedElems.length === 0) {
 			return;
 		}
@@ -456,9 +491,14 @@ export default class Selection {
 			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(
+			await 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.
+			await this.editor.queueRerender();
+			this.previewTransformCmds();
 		}
 	}
 

package/src/tools/SelectionTool/SelectionTool.ts

@@ -381,6 +381,18 @@ export default class SelectionTool extends BaseTool {
 		// 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: Rect2|null = null;
 		for (const object of objects) {
 			if (bbox) {