js-draw 0.3.2 → 0.4.0

package/src/math/Vec3.ts

@@ -95,6 +95,27 @@ export default class Vec3 {
 		);
 	}
 
+	/**
+	 * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+	 * if `other is a `number`, returns the result of scalar multiplication.
+	 * 
+	 * @example
+	 * ```
+	 * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+	 * ```
+	 */
+	public scale(other: Vec3|number): Vec3 {
+		if (typeof other === 'number') {
+			return this.times(other);
+		}
+
+		return Vec3.of(
+			this.x * other.x,
+			this.y * other.y,
+			this.z * other.z,
+		);
+	}
+
 	/**
 	 * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
 	 * 90 degrees counter-clockwise.
@@ -158,7 +179,7 @@ export default class Vec3 {
 		);
 	}
 
-	public asArray(): number[] {
+	public asArray(): [ number, number, number ] {
 		return [this.x, this.y, this.z];
 	}
 

package/src/math/rounding.test.ts

@@ -1,4 +1,4 @@
-import { toRoundedString, toStringOfSamePrecision } from './rounding';
+import { cleanUpNumber, toRoundedString, toStringOfSamePrecision } from './rounding';
 
 describe('toRoundedString', () => {
 	it('should round up numbers endings similar to .999999999999999', () => {
@@ -12,18 +12,28 @@ describe('toRoundedString', () => {
 		expect(toRoundedString(10.999999998)).toBe('11');
 	});
 
-	// Handling this creates situations with potential error:
-	//it('should round strings with multiple digits after the ending decimal points', () => {
-	//	expect(toRoundedString(292.2 - 292.8)).toBe('-0.6');
-	//});
+	it('should round strings with multiple digits after the ending decimal points', () => {
+		expect(toRoundedString(292.2 - 292.8)).toBe('-.6');
+		expect(toRoundedString(4.06425600000023)).toBe('4.064256');
+	});
 
 	it('should round down strings ending endings similar to .00000001', () => {
 		expect(toRoundedString(10.00000001)).toBe('10');
+		expect(toRoundedString(-30.00000001)).toBe('-30');
+		expect(toRoundedString(-14.20000000000002)).toBe('-14.2');
+	});
+
+	it('should not round numbers insufficiently close to the next', () => {
+		expect(toRoundedString(-10.9999)).toBe('-10.9999');
+		expect(toRoundedString(-10.0001)).toBe('-10.0001');
+		expect(toRoundedString(-10.123499)).toBe('-10.123499');
+		expect(toRoundedString(0.00123499)).toBe('.00123499');
 	});
 });
 
 it('toStringOfSamePrecision', () => {
 	expect(toStringOfSamePrecision(1.23456, '1.12')).toBe('1.23');
+	expect(toStringOfSamePrecision(1.23456, '1.120')).toBe('1.235');
 	expect(toStringOfSamePrecision(1.23456, '1.1')).toBe('1.2');
 	expect(toStringOfSamePrecision(1.23456, '1.1', '5.32')).toBe('1.23');
 	expect(toStringOfSamePrecision(-1.23456, '1.1', '5.32')).toBe('-1.23');
@@ -37,4 +47,19 @@ it('toStringOfSamePrecision', () => {
 	expect(toStringOfSamePrecision(-0.09999999999999432, '291.3')).toBe('-.1');
 	expect(toStringOfSamePrecision(-0.9999999999999432, '291.3')).toBe('-1');
 	expect(toStringOfSamePrecision(9998.9, '.1', '-11')).toBe('9998.9');
+	expect(toStringOfSamePrecision(-14.20000000000002, '.000001', '-11')).toBe('-14.2');
+});
+
+it('cleanUpNumber', () => {
+	expect(cleanUpNumber('000.0000')).toBe('0');
+	expect(cleanUpNumber('-000.0000')).toBe('0');
+	expect(cleanUpNumber('0.0000')).toBe('0');
+	expect(cleanUpNumber('0.001')).toBe('.001');
+	expect(cleanUpNumber('-0.001')).toBe('-.001');
+	expect(cleanUpNumber('-0.000000001')).toBe('-.000000001');
+	expect(cleanUpNumber('-0.00000000100')).toBe('-.000000001');
+	expect(cleanUpNumber('1234')).toBe('1234');
+	expect(cleanUpNumber('1234.5')).toBe('1234.5');
+	expect(cleanUpNumber('1234.500')).toBe('1234.5');
+	expect(cleanUpNumber('1.1368683772161603e-13')).toBe('0');
 });

package/src/math/rounding.ts

@@ -1,9 +1,17 @@
 // @packageDocumentation @internal
 
 // Clean up stringified numbers
-const cleanUpNumber = (text: string) => {
+export const cleanUpNumber = (text: string) => {
 	// Regular expression substitions can be somewhat expensive. Only do them
 	// if necessary.
+
+	if (text.indexOf('e') > 0) {
+		// Round to zero.
+		if (text.match(/[eE][-]\d{2,}$/)) {
+			return '0';
+		}
+	}
+
 	const lastChar = text.charAt(text.length - 1);
 	if (lastChar === '0' || lastChar === '.') {
 		// Remove trailing zeroes
@@ -12,10 +20,6 @@ const cleanUpNumber = (text: string) => {
 
 		// Remove trailing period
 		text = text.replace(/[.]$/, '');
-
-		if (text === '-0') {
-			return '0';
-		}
 	}
 
 	const firstChar = text.charAt(0);
@@ -23,6 +27,11 @@ const cleanUpNumber = (text: string) => {
 		// Remove unnecessary leading zeroes.
 		text = text.replace(/^(0+)[.]/, '.');
 		text = text.replace(/^-(0+)[.]/, '-.');
+		text = text.replace(/^(-?)0+$/, '$10');
+	}
+
+	if (text === '-0') {
+		return '0';
 	}
 
 	return text;
@@ -31,8 +40,8 @@ const cleanUpNumber = (text: string) => {
 export const toRoundedString = (num: number): string => {
 	// Try to remove rounding errors. If the number ends in at least three/four zeroes
 	// (or nines) just one or two digits, it's probably a rounding error.
-	const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,2}$/;
-	const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+	const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,4}$/;
+	const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
 
 	let text = num.toString(10);
 	if (text.indexOf('.') === -1) {

package/src/rendering/renderers/AbstractRenderer.ts

@@ -122,8 +122,9 @@ export default abstract class AbstractRenderer {
 		}
 	}
 
-	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
-	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle): void {
+	// Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+	// This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
+	public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle) {
 		const path = Path.fromRect(rect, lineWidth);
 		this.drawPath(path.toRenderable(lineFill));
 	}

package/src/toolbar/HTMLToolbar.ts

@@ -3,19 +3,20 @@ import { EditorEventType } from '../types';
 
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
 import { makeRedoIcon, makeUndoIcon } from './icons';
-import PanZoom from '../tools/PanZoom';
+import SelectionTool from '../tools/SelectionTool/SelectionTool';
+import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
+import EraserTool from '../tools/Eraser';
+import PenTool from '../tools/Pen';
 import PenToolWidget from './widgets/PenToolWidget';
 import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
 import BaseWidget from './widgets/BaseWidget';
-import { EraserTool, PenTool } from '../tools/lib';
 
 export const toolbarCSSPrefix = 'toolbar-';
 
@@ -200,7 +201,7 @@ export default class HTMLToolbar {
 			this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
 		}
 
-		const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+		const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
 		if (panZoomTool) {
 			this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
 		}

package/src/toolbar/widgets/SelectionToolWidget.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import SelectionTool from '../../tools/SelectionTool';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { EditorEventType } from '../../types';
 import { makeDeleteSelectionIcon, makeDuplicateSelectionIcon, makeResizeViewportIcon, makeSelectionIcon } from '../icons';
 import { ToolbarLocalization } from '../localization';

package/src/tools/PasteHandler.ts

@@ -11,11 +11,12 @@ import { PasteEvent } from '../types';
 import { Mat33, Rect2, Vec2 } from '../math/lib';
 import BaseTool from './BaseTool';
 import EditorImage from '../EditorImage';
-import SelectionTool from './SelectionTool';
+import SelectionTool from './SelectionTool/SelectionTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import { TextStyle } from '../components/Text';
 import ImageComponent from '../components/ImageComponent';
+import Viewport from '../Viewport';
 
 // { @inheritDoc PasteHandler! }
 export default class PasteHandler extends BaseTool {
@@ -67,6 +68,8 @@ export default class PasteHandler extends BaseTool {
 		}
 		scaleRatio *= 2 / 3;
 
+		scaleRatio = Viewport.roundScaleRatio(scaleRatio);
+
 		const transfm = Mat33.translation(
 			visibleRect.center.minus(bbox.center)
 		).rightMul(

package/src/tools/Pen.ts

@@ -171,7 +171,7 @@ export default class Pen extends BaseTool {
 		}
 
 		if (newThickness !== undefined) {
-			newThickness = Math.min(Math.max(1, newThickness), 128);
+			newThickness = Math.min(Math.max(1, newThickness), 256);
 			this.setThickness(newThickness);
 			return true;
 		}

package/src/tools/SelectionTool/Selection.ts

@@ -0,0 +1,455 @@
+/**
+ * @internal
+ * @packageDocumentation
+ */
+
+import SerializableCommand from '../../commands/SerializableCommand';
+import Editor from '../../Editor';
+import { Mat33, Rect2 } from '../../math/lib';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Pointer from '../../Pointer';
+import SelectionHandle, { HandleShape, handleSize } from './SelectionHandle';
+import { cssPrefix } from './SelectionTool';
+import AbstractComponent from '../../components/AbstractComponent';
+import { Mat33Array } from '../../math/Mat33';
+import { EditorLocalization } from '../../localization';
+import Viewport from '../../Viewport';
+import Erase from '../../commands/Erase';
+import Duplicate from '../../commands/Duplicate';
+import Command from '../../commands/Command';
+import { DragTransformer, ResizeTransformer, RotateTransformer } from './TransformMode';
+import { ResizeMode } from './types';
+
+const updateChunkSize = 100;
+
+// @internal
+export default class Selection {
+	private handles: SelectionHandle[];
+	private originalRegion: Rect2;
+
+	private transformers;
+
+	private transform: Mat33 = Mat33.identity;
+	private transformCommands: SerializableCommand[] = [];
+
+	private selectedElems: AbstractComponent[] = [];
+
+	private container: HTMLElement;
+	private backgroundElem: HTMLElement;
+
+	public constructor(startPoint: Point2, private editor: Editor) {
+		this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
+		this.transformers = {
+			drag: new DragTransformer(editor, this),
+			resize: new ResizeTransformer(editor, this),
+			rotate: new RotateTransformer(editor, this),
+		};
+
+		this.container = document.createElement('div');
+		this.backgroundElem = document.createElement('div');
+		this.backgroundElem.classList.add(`${cssPrefix}selection-background`);
+		this.container.appendChild(this.backgroundElem);
+
+		const resizeHorizontalHandle = new SelectionHandle(
+			HandleShape.Square,
+			Vec2.of(1, 0.5),
+			this,
+			(startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly),
+			(currentPoint) => this.transformers.resize.onDragUpdate(currentPoint),
+			() => this.transformers.resize.onDragEnd(),
+		);
+
+		const resizeVerticalHandle = new SelectionHandle(
+			HandleShape.Square,
+			Vec2.of(0.5, 1),
+			this,
+			(startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly),
+			(currentPoint) => this.transformers.resize.onDragUpdate(currentPoint),
+			() => this.transformers.resize.onDragEnd(),
+		);
+
+		const resizeBothHandle = new SelectionHandle(
+			HandleShape.Square,
+			Vec2.of(1, 1),
+			this,
+			(startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.Both),
+			(currentPoint) => this.transformers.resize.onDragUpdate(currentPoint),
+			() => this.transformers.resize.onDragEnd(),
+		);
+
+		const rotationHandle = new SelectionHandle(
+			HandleShape.Circle,
+			Vec2.of(0.5, 0),
+			this,
+			(startPoint) => this.transformers.rotate.onDragStart(startPoint),
+			(currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint),
+			() => this.transformers.rotate.onDragEnd(),
+		);
+
+		this.handles = [
+			resizeBothHandle,
+			resizeHorizontalHandle,
+			resizeVerticalHandle,
+			rotationHandle,
+		];
+
+		for (const handle of this.handles) {
+			handle.addTo(this.backgroundElem);
+		}
+	}
+
+	public getTransform(): Mat33 {
+		return this.transform;
+	}
+
+	public get preTransformRegion(): Rect2 {
+		return this.originalRegion;
+	}
+
+	public get region(): Rect2 {
+		// TODO: This currently assumes that the region rotates about its center.
+		// This may not be true.
+		const rotationMatrix = Mat33.zRotation(this.regionRotation, this.originalRegion.center);
+		const scaleAndTranslateMat = this.transform.rightMul(rotationMatrix.inverse());
+		return this.originalRegion.transformedBoundingBox(scaleAndTranslateMat);
+	}
+
+	public get regionRotation(): number {
+		return this.transform.transformVec3(Vec2.unitX).angle();
+	}
+
+	public get preTransformedScreenRegion(): Rect2 {
+		const toScreen = (vec: Point2) => this.editor.viewport.canvasToScreen(vec);
+		return Rect2.fromCorners(
+			toScreen(this.preTransformRegion.topLeft),
+			toScreen(this.preTransformRegion.bottomRight)
+		);
+	}
+
+	public get preTransformedScreenRegionRotation(): number {
+		return this.editor.viewport.getRotationAngle();
+	}
+
+	public get screenRegion(): Rect2 {
+		const toScreen = this.editor.viewport.canvasToScreenTransform;
+		const scaleFactor = this.editor.viewport.getScaleFactor();
+
+		const screenCenter = toScreen.transformVec2(this.region.center);
+
+		return new Rect2(
+			screenCenter.x, screenCenter.y, scaleFactor * this.region.width, scaleFactor * this.region.height
+		).translatedBy(this.region.size.times(-scaleFactor/2));
+	}
+
+	public get screenRegionRotation(): number {
+		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.previewTransformCmds();
+			this.scrollTo();
+		}
+	}
+
+	// Applies the current transformation to the selection
+	public finalizeTransform() {
+		this.transformCommands.forEach(cmd => {
+			cmd.unapply(this.editor);
+		});
+
+		const fullTransform = this.transform;
+		const currentTransfmCommands = this.computeTransformCommands();
+
+		// Reset for the next drag
+		this.transformCommands = [];
+		this.originalRegion = this.originalRegion.transformedBoundingBox(this.transform);
+		this.transform = Mat33.identity;
+
+		// Make the commands undo-able
+		this.editor.dispatch(new Selection.ApplyTransformationCommand(
+			this, currentTransfmCommands, fullTransform
+		));
+	}
+
+	static {
+		SerializableCommand.register('selection-tool-transform', (json: any, editor) => {
+			// The selection box is lost when serializing/deserializing. No need to store box rotation
+			const fullTransform: Mat33 = new Mat33(...(json.transform as Mat33Array));
+			const commands = (json.commands as any[]).map(data => SerializableCommand.deserialize(data, editor));
+
+			return new this.ApplyTransformationCommand(null, commands, fullTransform);
+		});
+	}
+
+	private static ApplyTransformationCommand = class extends SerializableCommand {
+		public constructor(
+			private selection: Selection|null,
+			private currentTransfmCommands: SerializableCommand[],
+			private fullTransform: Mat33,
+		) {
+			super('selection-tool-transform');
+		}
+
+		public async apply(editor: Editor) {
+			this.selection?.setTransform(this.fullTransform, false);
+			this.selection?.updateUI();
+			await editor.asyncApplyCommands(this.currentTransfmCommands, updateChunkSize);
+			this.selection?.setTransform(Mat33.identity, false);
+			this.selection?.recomputeRegion();
+			this.selection?.updateUI();
+		}
+
+		public async unapply(editor: Editor) {
+			this.selection?.setTransform(this.fullTransform.inverse(), false);
+			this.selection?.updateUI();
+
+			await editor.asyncUnapplyCommands(this.currentTransfmCommands, updateChunkSize);
+			this.selection?.setTransform(Mat33.identity);
+			this.selection?.recomputeRegion();
+			this.selection?.updateUI();
+		}
+
+		protected serializeToJSON() {
+			return {
+				commands: this.currentTransfmCommands.map(command => command.serialize()),
+				transform: this.fullTransform.toArray(),
+			};
+		}
+
+		public description(_editor: Editor, localizationTable: EditorLocalization) {
+			return localizationTable.transformedElements(this.currentTransfmCommands.length);
+		}
+	};
+
+	// 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) {
+			this.updateUI();
+			return;
+		}
+
+		this.transformCommands.forEach(cmd => cmd.unapply(this.editor));
+		this.transformCommands = this.computeTransformCommands();
+		this.transformCommands.forEach(cmd => cmd.apply(this.editor));
+
+		this.updateUI();
+	}
+
+	// Find the objects corresponding to this in the document,
+	// select them.
+	// Returns false iff nothing was selected.
+	public resolveToObjects(): boolean {
+		let singleItemSelectionMode = false;
+		this.transform = Mat33.identity;
+
+		// Grow the rectangle, if necessary
+		if (this.region.w === 0 || this.region.h === 0) {
+			const padding = this.editor.viewport.visibleRect.maxDimension / 200;
+			this.originalRegion = Rect2.bboxOf(this.region.corners, padding);
+
+			// Only select one item if the rectangle was very small.
+			singleItemSelectionMode = true;
+		}
+
+		this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
+			if (this.region.containsRect(elem.getBBox())) {
+				return true;
+			}
+
+			// 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));
+		});
+
+		if (singleItemSelectionMode && this.selectedElems.length > 0) {
+			this.selectedElems = [ this.selectedElems[this.selectedElems.length - 1] ];
+		}
+
+		// Find the bounding box of all selected elements.
+		if (!this.recomputeRegion()) {
+			return false;
+		}
+		this.updateUI();
+
+		return true;
+	}
+
+	// Recompute this' region from the selected elements.
+	// Returns false if the selection is empty.
+	public recomputeRegion(): boolean {
+		const newRegion = this.selectedElems.reduce((
+			accumulator: Rect2|null, elem: AbstractComponent
+		): Rect2 => {
+			return (accumulator ?? elem.getBBox()).union(elem.getBBox());
+		}, null);
+
+		if (!newRegion) {
+			this.cancelSelection();
+			return false;
+		}
+
+		this.originalRegion = newRegion;
+
+		const minSize = this.getMinCanvasSize();
+		if (this.originalRegion.w < minSize || this.originalRegion.h < minSize) {
+			// Add padding
+			const padding = minSize / 2;
+			this.originalRegion = Rect2.bboxOf(
+				this.originalRegion.corners, padding
+			);
+		}
+
+		return true;
+	}
+
+	public getMinCanvasSize(): number {
+		const canvasHandleSize = handleSize / this.editor.viewport.getScaleFactor();
+		return canvasHandleSize * 2;
+	}
+
+	public getSelectedItemCount() {
+		return this.selectedElems.length;
+	}
+
+	// @internal
+	public updateUI() {
+		// marginLeft, marginTop: Display relative to the top left of the selection overlay.
+		// left, top don't work for this.
+		this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
+		this.backgroundElem.style.marginTop = `${this.screenRegion.topLeft.y}px`;
+
+		this.backgroundElem.style.width = `${this.screenRegion.width}px`;
+		this.backgroundElem.style.height = `${this.screenRegion.height}px`;
+
+		const rotationDeg = this.screenRegionRotation * 180 / Math.PI;
+		this.backgroundElem.style.transform = `rotate(${rotationDeg}deg)`;
+		this.backgroundElem.style.transformOrigin = 'center';
+
+		for (const handle of this.handles) {
+			handle.updatePosition();
+		}
+	}
+
+	private targetHandle: SelectionHandle|null = null;
+	private backgroundDragging: boolean = false;
+	public onDragStart(pointer: Pointer, target: EventTarget): boolean {
+		for (const handle of this.handles) {
+			if (handle.isTarget(target)) {
+				handle.handleDragStart(pointer);
+				this.targetHandle = handle;
+				return true;
+			}
+		}
+
+		if (this.backgroundElem === target) {
+			this.backgroundDragging = true;
+			this.transformers.drag.onDragStart(pointer.canvasPos);
+			return true;
+		}
+
+		return false;
+	}
+
+	public onDragUpdate(pointer: Pointer) {
+		if (this.backgroundDragging) {
+			this.transformers.drag.onDragUpdate(pointer.canvasPos);
+		}
+
+		if (this.targetHandle) {
+			this.targetHandle.handleDragUpdate(pointer);
+		}
+
+		this.updateUI();
+	}
+
+	public onDragEnd() {
+		if (this.backgroundDragging) {
+			this.transformers.drag.onDragEnd();
+		}
+		else if (this.targetHandle) {
+			this.targetHandle.handleDragEnd();
+		}
+
+		this.backgroundDragging = false;
+		this.targetHandle = null;
+		this.updateUI();
+	}
+
+	public onDragCancel() {
+		this.backgroundDragging = false;
+		this.targetHandle = null;
+		this.setTransform(Mat33.identity);
+	}
+
+	// Scroll the viewport to this. Does not zoom
+	public 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
+			);
+		}
+	}
+
+	public deleteSelectedObjects(): Command {
+		return new Erase(this.selectedElems);
+	}
+
+	public duplicateSelectedObjects(): Command {
+		return new Duplicate(this.selectedElems);
+	}
+
+	public addTo(elem: HTMLElement) {
+		if (this.container.parentElement) {
+			this.container.remove();
+		}
+
+		elem.appendChild(this.container);
+	}
+
+	public setToPoint(point: Point2) {
+		this.originalRegion = this.originalRegion.grownToPoint(point);
+		this.updateUI();
+	}
+
+	public cancelSelection() {
+		if (this.container.parentElement) {
+			this.container.remove();
+		}
+		this.originalRegion = Rect2.empty;
+	}
+
+	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
+		this.originalRegion = bbox;
+		this.selectedElems = objects;
+		this.updateUI();
+	}
+
+	public getSelectedObjects(): AbstractComponent[] {
+		return this.selectedElems;
+	}
+}
+