js-draw 0.0.9 → 0.1.1

package/src/rendering/renderers/CanvasRenderer.ts

@@ -0,0 +1,219 @@
+import Color4 from '../../Color4';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
+
+export default class CanvasRenderer extends AbstractRenderer {
+	private ignoreObjectsAboveLevel: number|null = null;
+	private ignoringObject: boolean = false;
+
+	// Minimum square distance of a control point from the line between the end points
+	// for the curve not to be drawn as a line.
+	// For example, if [minSquareCurveApproxDist] = 25 = 5², then a control point on a quadratic
+	// bezier curve needs to be at least 5 units away from the line between the curve's end points
+	// for the curve to be drawn as a Bezier curve (and not a line).
+	private minSquareCurveApproxDist: number;
+
+	// Minimum size of an object (in pixels) for it to be rendered.
+	private minRenderSizeAnyDimen: number;
+	private minRenderSizeBothDimens: number;
+
+	public constructor(private ctx: CanvasRenderingContext2D, viewport: Viewport) {
+		super(viewport);
+		this.setDraftMode(false);
+	}
+
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof CanvasRenderer;
+	}
+
+	public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof CanvasRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+		transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
+		this.ctx.save();
+		// From MDN, transform(a,b,c,d,e,f)
+		// takes input such that
+		// ⎡ a c e ⎤
+		// ⎢ b d f ⎥ transforms content drawn to [ctx].
+		// ⎣ 0 0 1 ⎦
+		this.ctx.transform(
+			transformBy.a1, transformBy.b1, // a, b
+			transformBy.a2, transformBy.b2, // c, d
+			transformBy.a3, transformBy.b3, // e, f 
+		);
+		this.ctx.drawImage(other.ctx.canvas, 0, 0);
+		this.ctx.restore();
+	}
+
+	// Set parameters for lower/higher quality rendering
+	public setDraftMode(draftMode: boolean) {
+		if (draftMode) {
+			this.minSquareCurveApproxDist = 64;
+			this.minRenderSizeBothDimens = 8;
+			this.minRenderSizeAnyDimen = 2;
+		} else {
+			this.minSquareCurveApproxDist = 1;
+			this.minRenderSizeBothDimens = 1;
+			this.minRenderSizeAnyDimen = 0;
+		}
+	}
+
+	public displaySize(): Vec2 {
+		return Vec2.of(
+			this.ctx.canvas.clientWidth,
+			this.ctx.canvas.clientHeight
+		);
+	}
+
+	public clear() {
+		this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+	}
+
+	protected beginPath(startPoint: Point2) {
+		startPoint = this.canvasToScreen(startPoint);
+
+		this.ctx.beginPath();
+		this.ctx.moveTo(startPoint.x, startPoint.y);
+	}
+
+	protected endPath(style: RenderingStyle) {
+		this.ctx.fillStyle = style.fill.toHexString();
+		this.ctx.fill();
+
+		if (style.stroke) {
+			this.ctx.strokeStyle = style.stroke.color.toHexString();
+			this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+			this.ctx.stroke();
+		}
+
+		this.ctx.closePath();
+	}
+
+	protected lineTo(point: Point2) {
+		point = this.canvasToScreen(point);
+		this.ctx.lineTo(point.x, point.y);
+	}
+
+	protected moveTo(point: Point2) {
+		point = this.canvasToScreen(point);
+		this.ctx.moveTo(point.x, point.y);
+	}
+
+	protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2) {
+		p1 = this.canvasToScreen(p1);
+		p2 = this.canvasToScreen(p2);
+		p3 = this.canvasToScreen(p3);
+
+		// Approximate the curve if small enough.
+		const delta1 = p2.minus(p1);
+		const delta2 = p3.minus(p2);
+		if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
+			&& delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
+			this.ctx.lineTo(p3.x, p3.y);
+		} else {
+			this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
+		}
+	}
+
+	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
+
+		// Approximate the curve with a line if small enough
+		const delta = controlPoint.minus(endPoint);
+		if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
+			this.ctx.lineTo(endPoint.x, endPoint.y);
+		} else {
+			this.ctx.quadraticCurveTo(
+				controlPoint.x, controlPoint.y, endPoint.x, endPoint.y
+			);
+		}
+	}
+
+	public drawPath(path: RenderablePathSpec) {
+		if (this.ignoringObject) {
+			return;
+		}
+
+		super.drawPath(path);
+	}
+
+	private clipLevels: number[] = [];
+	public startObject(boundingBox: Rect2, clip: boolean) {
+		if (this.isTooSmallToRender(boundingBox)) {
+			this.ignoreObjectsAboveLevel = this.getNestingLevel();
+			this.ignoringObject = true;
+		}
+
+		super.startObject(boundingBox);
+
+		if (!this.ignoringObject && clip) {
+			this.clipLevels.push(this.objectLevel);
+			this.ctx.save();
+			this.ctx.beginPath();
+			for (const corner of boundingBox.corners) {
+				const screenCorner = this.canvasToScreen(corner);
+				this.ctx.lineTo(screenCorner.x, screenCorner.y);
+			}
+			this.ctx.clip();
+		}
+	}
+
+	public endObject() {
+		if (!this.ignoringObject && this.clipLevels.length > 0) {
+			if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+				this.ctx.restore();
+				this.clipLevels.pop();
+			}
+		}
+
+		super.endObject();
+
+		// If exiting an object with a too-small-to-draw bounding box,
+		if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
+			this.ignoreObjectsAboveLevel = null;
+			this.ignoringObject = false;
+		}
+	}
+
+	public drawPoints(...points: Point2[]) {
+		const pointRadius = 10;
+
+		for (let i = 0; i < points.length; i++) {
+			const point = this.canvasToScreen(points[i]);
+
+			this.ctx.beginPath();
+			this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
+			this.ctx.fillStyle = Color4.ofRGBA(
+				0.5 + Math.sin(i) / 2,
+				1.0,
+				0.5 + Math.cos(i * 0.2) / 4, 0.5
+			).toHexString();
+			this.ctx.fill();
+			this.ctx.stroke();
+			this.ctx.closePath();
+
+			this.ctx.textAlign = 'center';
+			this.ctx.textBaseline = 'middle';
+			this.ctx.fillStyle = 'black';
+			this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
+		}
+	}
+
+	public isTooSmallToRender(rect: Rect2): boolean {
+		// Should we ignore all objects within this object's bbox?
+		const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
+
+		const bothDimenMinSize = this.minRenderSizeBothDimens;
+		const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
+		const anyDimenMinSize = this.minRenderSizeAnyDimen;
+		const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
+		
+		return bothTooSmall || anyTooSmall;
+	}
+}

package/src/rendering/renderers/DummyRenderer.test.ts

@@ -0,0 +1,43 @@
+
+import EventDispatcher from '../../EventDispatcher';
+import Mat33 from '../../geometry/Mat33';
+import { Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
+import DummyRenderer from './DummyRenderer';
+
+const makeRenderer = (): [DummyRenderer, Viewport] => {
+	const viewport = new Viewport(new EventDispatcher());
+	return [ new DummyRenderer(viewport), viewport ];
+};
+
+describe('DummyRenderer', () => {
+	it('should correctly calculate the size of a pixel on the screen', () => {
+		const [ renderer, viewport ] = makeRenderer();
+		viewport.updateScreenSize(Vec2.of(100, 100));
+		viewport.resetTransform(Mat33.identity);
+
+		expect(1/viewport.getScaleFactor()).toBe(1);
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+
+		// Updating the translation matrix shouldn't affect the size of a pixel on the
+		// screen.
+		renderer.setTransform(Mat33.translation(Vec2.of(-1, -2)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+		viewport.resetTransform(Mat33.translation(Vec2.of(3, 4)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
+
+		// Scale objects by a factor of 2 when drawing
+		renderer.setTransform(Mat33.scaling2D(2));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
+		viewport.resetTransform(Mat33.scaling2D(0.5));
+
+		// When a renderer transform is set, **only** the renderer transform should be used.
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
+		renderer.setTransform(null);
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(0.5);
+
+		// Rotating should not affect the size of a pixel
+		renderer.setTransform(Mat33.zRotation(Math.PI / 4).rightMul(Mat33.scaling2D(4)));
+		expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(4);
+	});
+});

package/src/rendering/{DummyRenderer.ts → renderers/DummyRenderer.ts}

@@ -1,9 +1,10 @@
 // Renderer that outputs nothing. Useful for automated tests.
 
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Vec3 from '../geometry/Vec3';
-import Viewport from '../Viewport';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
 export default class DummyRenderer extends AbstractRenderer {
@@ -22,8 +23,17 @@ export default class DummyRenderer extends AbstractRenderer {
 	}
 
 	public displaySize(): Vec2 {
-		// Return a dummy
-		return Vec2.of(640, 480);
+		// Do we have a stored viewport size?
+		const viewportSize = this.getViewport().getResolution();
+
+		// Don't use a 0x0 viewport — DummyRenderer is often used
+		// for tests that run without a display, so pretend we have a
+		// reasonable-sized display.
+		if (viewportSize.x === 0 || viewportSize.y === 0) {
+			return Vec2.of(640, 480);
+		}
+
+		return viewportSize;
 	}
 
 	public clear() {
@@ -47,18 +57,29 @@ export default class DummyRenderer extends AbstractRenderer {
 		this.lastFillStyle = style;
 	}
 	protected lineTo(point: Vec3) {
+		point = this.canvasToScreen(point);
+
 		this.lastPoint = point;
 		this.pointBuffer.push(point);
 	}
 	protected moveTo(point: Point2) {
+		point = this.canvasToScreen(point);
+
 		this.lastPoint = point;
 		this.pointBuffer.push(point);
 	}
 	protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3) {
+		p1 = this.canvasToScreen(p1);
+		p2 = this.canvasToScreen(p2);
+		p3 = this.canvasToScreen(p3);
+
 		this.lastPoint = p3;
 		this.pointBuffer.push(p1, p2, p3);
 	}
 	protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
+
 		this.lastPoint = endPoint;
 		this.pointBuffer.push(controlPoint, endPoint);
 	}
@@ -67,7 +88,7 @@ export default class DummyRenderer extends AbstractRenderer {
 		// As such, it is unlikely to be the target of automated tests.
 	}
 
-	public startObject(boundingBox: Rect2) {
+	public startObject(boundingBox: Rect2, _clip: boolean) {
 		super.startObject(boundingBox);
 
 		this.objectNestingLevel += 1;
@@ -77,4 +98,26 @@ export default class DummyRenderer extends AbstractRenderer {
 
 		this.objectNestingLevel -= 1;
 	}
+
+	public isTooSmallToRender(_rect: Rect2): boolean {
+		return false;
+	}
+
+
+	public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
+		return other instanceof DummyRenderer;
+	}
+
+	public renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void {
+		if (!(other instanceof DummyRenderer)) {
+			throw new Error(`${other} cannot be rendered onto ${this}`);
+		}
+
+		this.renderedPathCount += other.renderedPathCount;
+		this.lastFillStyle = other.lastFillStyle;
+		this.lastPoint = other.lastPoint;
+		this.pointBuffer.push(...other.pointBuffer.map(point => {
+			return transform.transformVec2(point);
+		}));
+	}
 }

package/src/rendering/{SVGRenderer.ts → renderers/SVGRenderer.ts}

@@ -1,8 +1,8 @@
 
-import Path, { PathCommand, PathCommandType } from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
-import { Point2, Vec2 } from '../geometry/Vec2';
-import Viewport from '../Viewport';
+import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
+import Rect2 from '../../geometry/Rect2';
+import { Point2, Vec2 } from '../../geometry/Vec2';
+import Viewport from '../../Viewport';
 import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -61,7 +61,7 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	protected beginPath(startPoint: Point2) {
 		this.currentPath = [];
-		this.pathStart = this.viewport.canvasToScreen(startPoint);
+		this.pathStart = this.canvasToScreen(startPoint);
 		this.lastPathStart ??= this.pathStart;
 	}
 
@@ -126,7 +126,7 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected lineTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 
 		this.currentPath!.push({
 			kind: PathCommandType.LineTo,
@@ -135,7 +135,7 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected moveTo(point: Point2) {
-		point = this.viewport.canvasToScreen(point);
+		point = this.canvasToScreen(point);
 
 		this.currentPath!.push({
 			kind: PathCommandType.MoveTo,
@@ -146,9 +146,9 @@ export default class SVGRenderer extends AbstractRenderer {
 	protected traceCubicBezierCurve(
 		controlPoint1: Point2, controlPoint2: Point2, endPoint: Point2
 	) {
-		controlPoint1 = this.viewport.canvasToScreen(controlPoint1);
-		controlPoint2 = this.viewport.canvasToScreen(controlPoint2);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint1 = this.canvasToScreen(controlPoint1);
+		controlPoint2 = this.canvasToScreen(controlPoint2);
+		endPoint = this.canvasToScreen(endPoint);
 
 		this.currentPath!.push({
 			kind: PathCommandType.CubicBezierTo,
@@ -159,8 +159,8 @@ export default class SVGRenderer extends AbstractRenderer {
 	}
 
 	protected traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2) {
-		controlPoint = this.viewport.canvasToScreen(controlPoint);
-		endPoint = this.viewport.canvasToScreen(endPoint);
+		controlPoint = this.canvasToScreen(controlPoint);
+		endPoint = this.canvasToScreen(endPoint);
 
 		this.currentPath!.push({
 			kind: PathCommandType.QuadraticBezierTo,
@@ -179,8 +179,12 @@ export default class SVGRenderer extends AbstractRenderer {
 		});
 	}
 
-	// Renders a copy of the given element.
+	// Renders a **copy** of the given element.
 	public drawSVGElem(elem: SVGElement) {
 		this.elem.appendChild(elem.cloneNode(true));
 	}
+
+	public isTooSmallToRender(_rect: Rect2): boolean {
+		return false;
+	}
 }

package/src/testing/createEditor.ts

@@ -1,4 +1,4 @@
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 
 export default () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });

package/src/toolbar/HTMLToolbar.ts

@@ -10,7 +10,7 @@ import BaseTool from '../tools/BaseTool';
 import SelectionTool from '../tools/SelectionTool';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import { Vec2 } from '../geometry/Vec2';
-import SVGRenderer from '../rendering/SVGRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 import EventDispatcher from '../EventDispatcher';
 import { ComponentBuilderFactory } from '../components/builders/types';
@@ -245,15 +245,24 @@ class SelectionWidget extends ToolbarWidget {
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
 		const resizeButton = document.createElement('button');
+		const deleteButton = document.createElement('button');
 
 		resizeButton.innerText = this.localizationTable.resizeImageToSelection;
 		resizeButton.disabled = true;
+		deleteButton.innerText = this.localizationTable.deleteSelection;
+		deleteButton.disabled = true;
 
 		resizeButton.onclick = () => {
 			const selection = this.tool.getSelection();
 			this.editor.dispatch(this.editor.setImportExportRect(selection!.region));
 		};
 
+		deleteButton.onclick = () => {
+			const selection = this.tool.getSelection();
+			this.editor.dispatch(selection!.deleteSelectedObjects());
+			this.tool.clearSelection();
+		};
+
 		// Enable/disable actions based on whether items are selected
 		this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
 			if (toolEvt.kind !== EditorEventType.ToolUpdated) {
@@ -263,11 +272,13 @@ class SelectionWidget extends ToolbarWidget {
 			if (toolEvt.tool === this.tool) {
 				const selection = this.tool.getSelection();
 				const hasSelection = selection && selection.region.area > 0;
+
 				resizeButton.disabled = !hasSelection;
+				deleteButton.disabled = resizeButton.disabled;
 			}
 		});
 
-		container.replaceChildren(resizeButton);
+		container.replaceChildren(resizeButton, deleteButton);
 		dropdown.appendChild(container);
 		return true;
 	}

package/src/toolbar/localization.ts

@@ -14,6 +14,7 @@ export interface ToolbarLocalization {
 	touchDrawing: string;
 	thicknessLabel: string;
 	resizeImageToSelection: string;
+	deleteSelection: string;
 	undo: string;
 	redo: string;
 
@@ -29,6 +30,7 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	resizeImageToSelection: 'Resize image to selection',
+	deleteSelection: 'Delete selection',
 	undo: 'Undo',
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',

package/src/tools/PanZoom.ts

@@ -78,6 +78,7 @@ export default class PanZoom extends BaseTool {
 
 		if (handlingGesture) {
 			this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
+			this.editor.display.setDraftMode(true);
 		}
 
 		return handlingGesture;
@@ -136,11 +137,13 @@ export default class PanZoom extends BaseTool {
 			this.editor.dispatch(this.transform, false);
 		}
 
+		this.editor.display.setDraftMode(false);
 		this.transform = null;
 	}
 
 	public onGestureCancel(): void {
 		this.transform?.unapply(this.editor);
+		this.editor.display.setDraftMode(false);
 		this.transform = null;
 	}
 

package/src/tools/SelectionTool.test.ts

@@ -2,7 +2,7 @@
 
 import Color4 from '../Color4';
 import Stroke from '../components/Stroke';
-import { RenderingMode } from '../Display';
+import { RenderingMode } from '../rendering/Display';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Path from '../geometry/Path';

package/src/tools/SelectionTool.ts

@@ -1,4 +1,5 @@
 import Command from '../commands/Command';
+import Erase from '../commands/Erase';
 import AbstractComponent from '../components/AbstractComponent';
 import Editor from '../Editor';
 import Mat33 from '../geometry/Mat33';
@@ -6,7 +7,6 @@ import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import { EditorEventType, PointerEvt } from '../types';
-import Viewport from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
 
@@ -119,7 +119,7 @@ const makeDraggable = (element: HTMLElement, onDrag: DragCallback, onDragEnd: Dr
 };
 
 // Maximum number of strokes to transform without a re-render.
-const updateChunkSize = 50;
+const updateChunkSize = 100;
 
 class Selection {
 	public region: Rect2;
@@ -340,10 +340,16 @@ class Selection {
 		this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
 			if (this.region.containsRect(elem.getBBox())) {
 				return true;
-			} else if (this.region.getEdges().some(edge => elem.intersects(edge))) {
-				return true;
 			}
-			return false;
+
+			// Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+			// As such, test with more lines than just this' edges.
+			const testLines = [];
+			for (const subregion of this.region.divideIntoGrid(2, 2)) {
+				testLines.push(...subregion.getEdges());
+			}
+
+			return testLines.some(edge => elem.intersects(edge));
 		});
 
 		// Find the bounding box of all selected elements.
@@ -421,6 +427,10 @@ class Selection {
 		this.backgroundBox.style.transform = `rotate(${rotationDeg}deg)`;
 		this.rotateCircle.style.transform = `rotate(${-rotationDeg}deg)`;
 	}
+
+	public deleteSelectedObjects(): Command {
+		return new Erase(this.selectedElems);
+	}
 }
 
 export default class SelectionTool extends BaseTool {
@@ -479,38 +489,12 @@ export default class SelectionTool extends BaseTool {
 		});
 
 		if (hasSelection) {
-			const visibleRect = this.editor.viewport.visibleRect;
-			const selectionRect = this.selectionBox.region;
-
 			this.editor.announceForAccessibility(
 				this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount())
 			);
 
-			// Try to move the selection within the center 2/3rds of the viewport.
-			const targetRect = visibleRect.transformedBoundingBox(
-				Mat33.scaling2D(2 / 3, visibleRect.center)
-			);
-
-			// Ensure that the selection fits within the target
-			if (targetRect.w < selectionRect.w || targetRect.h < selectionRect.h) {
-				const multiplier = Math.max(
-					selectionRect.w / targetRect.w, selectionRect.h / targetRect.h
-				);
-				const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
-				const viewportContentTransform = visibleRectTransform.inverse();
-
-				(new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-			}
-
-			// Ensure that the top left is visible
-			if (!targetRect.containsRect(selectionRect)) {
-				// target position - current position
-				const translation = selectionRect.center.minus(targetRect.center);
-				const visibleRectTransform = Mat33.translation(translation);
-				const viewportContentTransform = visibleRectTransform.inverse();
-
-				(new Viewport.ViewportTransform(viewportContentTransform)).apply(this.editor);
-			}
+			const selectionRect = this.selectionBox.region;
+			this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
 		}
 	}
 
@@ -542,4 +526,15 @@ export default class SelectionTool extends BaseTool {
 	public getSelection(): Selection|null {
 		return this.selectionBox;
 	}
+
+	public clearSelection() {
+		this.handleOverlay.replaceChildren();
+		this.prevSelectionBox = this.selectionBox;
+		this.selectionBox = null;
+
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
 }

package/src/types.ts

@@ -134,11 +134,18 @@ export type OnProgressListener =
 	(amountProcessed: number, totalToProcess: number)=> Promise<void>|null;
 
 export type ComponentAddedListener = (component: AbstractComponent)=> void;
+
+// Called when a new estimate for the import/export rect has been generated. This can be called multiple times.
+// Only the last call to this listener must be accurate.
+// The import/export rect is also returned by [start].
+export type OnDetermineExportRectListener = (exportRect: Rect2)=> void;
+
 export interface ImageLoader {
-	// Returns the main region of the loaded image
 	start(
-		onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener
-	): Promise<Rect2>;
+		onAddComponent: ComponentAddedListener,
+		onProgressListener: OnProgressListener,
+		onDetermineExportRect?: OnDetermineExportRectListener,
+	): Promise<void>;
 }
 
 export interface StrokeDataPoint {

package/tsconfig.json

@@ -24,5 +24,6 @@
 
 		// Files that don't need transpilation
 		"**/*.test.ts",
+		"__mocks__/*"
 	],
 }

package/dist/__mocks__/coloris.d.ts

@@ -1,2 +0,0 @@
-export declare const coloris: (_options: any) => void;
-export declare const init: () => void;