js-draw 0.25.1 → 1.0.1

package/src/tools/PanZoom.ts

@@ -1,10 +1,9 @@
 
 import { Editor } from '../Editor';
-import Mat33 from '../math/Mat33';
-import { Point2, Vec2 } from '../math/Vec2';
-import Vec3 from '../math/Vec3';
+import { Mat33, Vec3, Point2, Vec2 } from '@js-draw/math';
 import Pointer, { PointerDevice } from '../Pointer';
-import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import { EditorEventType } from '../types';
+import { KeyPressEvent, PointerEvt, WheelEvt } from '../inputEvents';
 import untilNextAnimationFrame from '../util/untilNextAnimationFrame';
 import { Viewport, ViewportTransform } from '../Viewport';
 import BaseTool from './BaseTool';
@@ -47,7 +46,7 @@ class InertialScroller {
 		}
 
 		this.currentVelocity = this.initialVelocity;
-		let lastTime = (new Date()).getTime();
+		let lastTime = performance.now();
 		this.running = true;
 
 		const maxSpeed = 5000; // units/s
@@ -57,7 +56,7 @@ class InertialScroller {
 		}
 
 		while (this.running && this.currentVelocity.magnitude() > minSpeed) {
-			const nowTime = (new Date()).getTime();
+			const nowTime = performance.now();
 			const dt = (nowTime - lastTime) / 1000;
 
 			this.currentVelocity = this.currentVelocity.times(Math.pow(1/8, dt));
@@ -91,6 +90,10 @@ class InertialScroller {
 export default class PanZoom extends BaseTool {
 	private transform: ViewportTransform|null = null;
 
+	// Distance between two touch points at the **start** of a gesture.
+	private startDist: number;
+
+	// Distance between two touch points the last time input data was received.
 	private lastDist: number;
 	private lastScreenCenter: Point2;
 	private lastTimestamp: number;
@@ -98,6 +101,10 @@ export default class PanZoom extends BaseTool {
 	private initialTouchAngle: number = 0;
 	private initialViewportRotation: number = 0;
 
+	// Set to `true` only when scaling has started (if two fingers are down and have moved
+	// far enough).
+	private isScaling: boolean = false;
+
 	private inertialScroller: InertialScroller|null = null;
 	private velocity: Vec2|null = null;
 
@@ -142,9 +149,11 @@ export default class PanZoom extends BaseTool {
 		if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
 			const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
 			this.lastDist = dist;
+			this.startDist = dist;
 			this.lastScreenCenter = screenCenter;
 			this.initialTouchAngle = angle;
 			this.initialViewportRotation = this.editor.viewport.getRotationAngle();
+			this.isScaling = false;
 
 			handlingGesture = true;
 		} else if (pointers.length === 1 && (
@@ -153,11 +162,12 @@ export default class PanZoom extends BaseTool {
 			|| (this.mode & PanZoomMode.SinglePointerGestures)
 		)) {
 			this.lastScreenCenter = pointers[0].screenPos;
+			this.isScaling = false;
 			handlingGesture = true;
 		}
 
 		if (handlingGesture) {
-			this.lastTimestamp = (new Date()).getTime();
+			this.lastTimestamp = performance.now();
 			this.transform ??= Viewport.transformBy(Mat33.identity);
 			this.editor.display.setDraftMode(true);
 		}
@@ -167,7 +177,7 @@ export default class PanZoom extends BaseTool {
 
 	private updateVelocity(currentCenter: Point2) {
 		const deltaPos = currentCenter.minus(this.lastScreenCenter);
-		let deltaTime = ((new Date()).getTime() - this.lastTimestamp) / 1000;
+		let deltaTime = (performance.now() - this.lastTimestamp) / 1000;
 
 		// Ignore duplicate events, unless there has been enough time between them.
 		if (deltaPos.magnitude() === 0 && deltaTime < 0.1) {
@@ -245,8 +255,21 @@ export default class PanZoom extends BaseTool {
 
 		this.updateVelocity(screenCenter);
 
+		let scaleFactor = 1;
+		if (this.isScaling) {
+			scaleFactor = dist / this.lastDist;
+		} else {
+			const initialScaleFactor = dist / this.startDist;
+
+			// Only start scaling if scaling done so far exceeds some threshold.
+			if (initialScaleFactor > 1.05 || initialScaleFactor < 0.95) {
+				scaleFactor = initialScaleFactor;
+				this.isScaling = true;
+			}
+		}
+
 		const transformUpdate = Mat33.translation(delta)
-			.rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
+			.rightMul(Mat33.scaling2D(scaleFactor, canvasCenter))
 			.rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
 
 		this.lastScreenCenter = screenCenter;
@@ -279,7 +302,7 @@ export default class PanZoom extends BaseTool {
 		lastTransform.unapply(this.editor);
 		this.transform.apply(this.editor);
 
-		this.lastTimestamp = (new Date()).getTime();
+		this.lastTimestamp = performance.now();
 	}
 
 	public override onPointerUp(event: PointerEvt): void {

package/src/tools/PasteHandler.ts

@@ -2,11 +2,10 @@ import Editor from '../Editor';
 import AbstractComponent from '../components/AbstractComponent';
 import TextComponent from '../components/TextComponent';
 import SVGLoader from '../SVGLoader';
-import { PasteEvent } from '../types';
-import Mat33 from '../math/Mat33';
+import { PasteEvent } from '../inputEvents';
+import { Mat33, Color4 } from '@js-draw/math';
 import BaseTool from './BaseTool';
 import TextTool from './TextTool';
-import Color4 from '../Color4';
 import ImageComponent from '../components/ImageComponent';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 

package/src/tools/Pen.test.ts

@@ -1,11 +1,9 @@
 
 import PenTool from './Pen';
-import { Vec2 } from '../math/Vec2';
+import { Mat33, Rect2, Vec2 } from '@js-draw/math';
 import createEditor from '../testing/createEditor';
-import { InputEvtType } from '../types';
-import Rect2 from '../math/shapes/Rect2';
+import { InputEvtType } from '../inputEvents';
 import StrokeComponent from '../components/Stroke';
-import Mat33 from '../math/Mat33';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
 import sendPenEvent from '../testing/sendPenEvent';
 import sendTouchEvent from '../testing/sendTouchEvent';

package/src/tools/Pen.ts

@@ -1,19 +1,21 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import Pointer, { PointerDevice } from '../Pointer';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
+import { EditorEventType, StrokeDataPoint } from '../types';
+import { KeyPressEvent, PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 import { undoKeyboardShortcutId } from './keybindings';
-import { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId, lineLockKeyboardShortcutId, snapToGridKeyboardShortcutId } from './keybindings';
-
-
+import { decreaseSizeKeyboardShortcutId, increaseSizeKeyboardShortcutId } from './keybindings';
+import InputStabilizer from './InputFilter/InputStabilizer';
+import { MutableReactiveValue, ReactiveValue } from '../util/ReactiveValue';
 
 export interface PenStyle {
-	color: Color4;
-	thickness: number;
+	readonly color: Color4;
+	readonly thickness: number;
+	readonly factory: ComponentBuilderFactory;
 }
 
 export default class Pen extends BaseTool {
@@ -21,43 +23,36 @@ export default class Pen extends BaseTool {
 	private lastPoint: StrokeDataPoint|null = null;
 	private startPoint: StrokeDataPoint|null = null;
 	private currentDeviceType: PointerDevice|null = null;
-
-	private snapToGridEnabled: boolean = false;
-	private angleLockEnabled: boolean = false;
+	private styleValue: MutableReactiveValue<PenStyle>;
+	private style: PenStyle;
 
 	public constructor(
 		private editor: Editor,
 		description: string,
-		private style: PenStyle,
-		private builderFactory: ComponentBuilderFactory = makeFreehandLineBuilder,
+		style: Partial<PenStyle>,
 	) {
 		super(editor.notifier, description);
-	}
 
-	private getPressureMultiplier() {
-		return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
-	}
+		this.styleValue = ReactiveValue.fromInitialValue<PenStyle>({
+			factory: makeFreehandLineBuilder,
+			color: Color4.blue,
+			thickness: 4,
+			...style,
+		});
 
-	// Snap the given pointer to the nearer of the x/y axes.
-	private xyAxesSnap(pointer: Pointer) {
-		if (!this.startPoint) {
-			return pointer;
-		}
+		this.styleValue.onUpdateAndNow(newValue => {
+			this.style = newValue;
+			this.noteUpdated();
+		});
+	}
 
-		const screenPos = this.editor.viewport.canvasToScreen(this.startPoint.pos);
-		return pointer.lockedToXYAxesScreen(screenPos, this.editor.viewport);
+	private getPressureMultiplier() {
+		const thickness = this.style.thickness;
+		return 1 / this.editor.viewport.getScaleFactor() * thickness;
 	}
 
 	// Converts a `pointer` to a `StrokeDataPoint`.
 	protected toStrokePoint(pointer: Pointer): StrokeDataPoint {
-		if (this.angleLockEnabled && this.lastPoint) {
-			pointer = this.xyAxesSnap(pointer);
-		}
-
-		if (this.snapToGridEnabled) {
-			pointer = pointer.snappedToGrid(this.editor.viewport);
-		}
-
 		const minPressure = 0.3;
 		let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
 
@@ -114,7 +109,7 @@ export default class Pen extends BaseTool {
 
 		if ((allPointers.length === 1 && !isEraser) || anyDeviceIsStylus) {
 			this.startPoint = this.toStrokePoint(current);
-			this.builder = this.builderFactory(this.startPoint, this.editor.viewport);
+			this.builder = this.style.factory(this.startPoint, this.editor.viewport);
 			this.currentDeviceType = current.device;
 			return true;
 		}
@@ -208,39 +203,54 @@ export default class Pen extends BaseTool {
 
 	public setColor(color: Color4): void {
 		if (color.toHexString() !== this.style.color.toHexString()) {
-			this.style = {
+			this.styleValue.set({
 				...this.style,
 				color,
-			};
-			this.noteUpdated();
+			});
 		}
 	}
 
 	public setThickness(thickness: number) {
 		if (thickness !== this.style.thickness) {
-			this.style = {
+			this.styleValue.set({
 				...this.style,
 				thickness,
-			};
-			this.noteUpdated();
+			});
 		}
 	}
 
 	public setStrokeFactory(factory: ComponentBuilderFactory) {
-		if (factory !== this.builderFactory) {
-			this.builderFactory = factory;
-			this.noteUpdated();
+		if (factory !== this.style.factory) {
+			this.styleValue.set({
+				...this.style,
+				factory,
+			});
+		}
+	}
+
+	public setHasStabilization(hasStabilization: boolean) {
+		const hasInputMapper = !!this.getInputMapper();
+
+		// TODO: Currently, this assumes that there is no other input mapper.
+		if (hasStabilization === hasInputMapper) {
+			return;
+		}
+
+		if (hasInputMapper) {
+			this.setInputMapper(null);
+		} else {
+			this.setInputMapper(new InputStabilizer(this.editor.viewport));
 		}
+		this.noteUpdated();
 	}
 
 	public getThickness() { return this.style.thickness; }
 	public getColor() { return this.style.color; }
-	public getStrokeFactory() { return this.builderFactory; }
+	public getStrokeFactory() { return this.style.factory; }
+	public getStyleValue() { return this.styleValue; }
 
 	public override setEnabled(enabled: boolean): void {
 		super.setEnabled(enabled);
-
-		this.snapToGridEnabled = false;
 	}
 
 	public override onKeyPress(event: KeyPressEvent): boolean {
@@ -269,32 +279,6 @@ export default class Pen extends BaseTool {
 			return true;
 		}
 
-		if (shortcuts.matchesShortcut(snapToGridKeyboardShortcutId, event)) {
-			this.snapToGridEnabled = true;
-			return true;
-		}
-
-		if (shortcuts.matchesShortcut(lineLockKeyboardShortcutId, event)) {
-			this.angleLockEnabled = true;
-			return true;
-		}
-
-		return false;
-	}
-
-	public override onKeyUp(event: KeyUpEvent): boolean {
-		const shortcuts = this.editor.shortcuts;
-
-		if (shortcuts.matchesShortcut(snapToGridKeyboardShortcutId, event)) {
-			this.snapToGridEnabled = false;
-			return true;
-		}
-
-		if (shortcuts.matchesShortcut(lineLockKeyboardShortcutId, event)) {
-			this.angleLockEnabled = false;
-			return true;
-		}
-
 		return false;
 	}
 }

package/src/tools/PipetteTool.ts

@@ -1,12 +1,20 @@
 // @internal @packageDocumentation
 
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 import Editor from '../Editor';
-import { PointerEvt } from '../types';
+import { PointerEvt } from '../inputEvents';
 import BaseTool from './BaseTool';
 
 type ColorListener = (color: Color4|null)=>void;
 
+/**
+ * A tool used internally to pick colors from the canvas.
+ *
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
+ * is added to the root element. This can be used by themes.
+ *
+ * @internal
+ */
 export default class PipetteTool extends BaseTool {
 	private colorPreviewListener: ColorListener|null = null;
 	private colorSelectListener: ColorListener|null = null;
@@ -16,6 +24,23 @@ export default class PipetteTool extends BaseTool {
 		description: string,
 	) {
 		super(editor.notifier, description);
+
+		this.enabledValue().onUpdateAndNow(() => {
+			this.updateSelectingStatus();
+		});
+	}
+
+	// Ensures that the root editor element correctly reflects whether color selection
+	// is in progress.
+	private updateSelectingStatus() {
+		const className = 'pipette--color-selection-in-progress';
+
+		if (this.isEnabled() && this.colorSelectListener && this.colorPreviewListener) {
+			this.editor.getRootElement().classList.add(className);
+		}
+		else {
+			this.editor.getRootElement().classList.remove(className);
+		}
 	}
 
 	public setColorListener(
@@ -26,11 +51,15 @@ export default class PipetteTool extends BaseTool {
 	) {
 		this.colorPreviewListener = colorPreviewListener;
 		this.colorSelectListener = colorSelectListener;
+
+		this.updateSelectingStatus();
 	}
 
 	public clearColorListener() {
 		this.colorPreviewListener = null;
 		this.colorSelectListener = null;
+
+		this.updateSelectingStatus();
 	}
 
 	public override onPointerDown({ current, allPointers }: PointerEvt): boolean {

package/src/tools/SelectionTool/SelectAllShortcutHandler.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import { KeyPressEvent } from '../../types';
+import { KeyPressEvent } from '../../inputEvents';
 import BaseTool from '../BaseTool';
 import { selectAllKeyboardShortcut } from '../keybindings';
 import SelectionTool from './SelectionTool';

package/src/tools/SelectionTool/Selection.ts

@@ -5,14 +5,11 @@
 
 import SerializableCommand from '../../commands/SerializableCommand';
 import Editor from '../../Editor';
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
-import { Point2, Vec2 } from '../../math/Vec2';
+import { Mat33, Rect2, Point2, Vec2, Mat33Array } from '@js-draw/math';
 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';
@@ -57,6 +54,7 @@ export default class Selection {
 			HandleShape.Square,
 			Vec2.of(1, 0.5),
 			this,
+			this.editor.viewport,
 			(startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.HorizontalOnly),
 			(currentPoint) => this.transformers.resize.onDragUpdate(currentPoint),
 			() => this.transformers.resize.onDragEnd(),
@@ -66,6 +64,7 @@ export default class Selection {
 			HandleShape.Square,
 			Vec2.of(0.5, 1),
 			this,
+			this.editor.viewport,
 			(startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.VerticalOnly),
 			(currentPoint) => this.transformers.resize.onDragUpdate(currentPoint),
 			() => this.transformers.resize.onDragEnd(),
@@ -75,6 +74,7 @@ export default class Selection {
 			HandleShape.Square,
 			Vec2.of(1, 1),
 			this,
+			this.editor.viewport,
 			(startPoint) => this.transformers.resize.onDragStart(startPoint, ResizeMode.Both),
 			(currentPoint) => this.transformers.resize.onDragUpdate(currentPoint),
 			() => this.transformers.resize.onDragEnd(),
@@ -84,6 +84,7 @@ export default class Selection {
 			HandleShape.Circle,
 			Vec2.of(0.5, 0),
 			this,
+			this.editor.viewport,
 			(startPoint) => this.transformers.rotate.onDragStart(startPoint),
 			(currentPoint) => this.transformers.rotate.onDragUpdate(currentPoint),
 			() => this.transformers.rotate.onDragEnd(),
@@ -179,7 +180,7 @@ export default class Selection {
 	}
 
 	// Applies the current transformation to the selection
-	public finalizeTransform() {
+	public async finalizeTransform() {
 		const fullTransform = this.transform;
 		const selectedElems = this.selectedElems;
 
@@ -188,7 +189,7 @@ export default class Selection {
 		this.transform = Mat33.identity;
 
 		// Make the commands undo-able
-		this.editor.dispatch(new Selection.ApplyTransformationCommand(
+		await this.editor.dispatch(new Selection.ApplyTransformationCommand(
 			this, selectedElems, fullTransform
 		));
 
@@ -459,25 +460,41 @@ export default class Selection {
 
 	private targetHandle: SelectionHandle|null = null;
 	private backgroundDragging: boolean = false;
-	public onDragStart(pointer: Pointer, target: EventTarget): boolean {
-		this.removeDeletedElemsFromSelection();
-		this.addRemoveSelectionFromImage(false);
+	public onDragStart(pointer: Pointer): boolean {
+		// Clear the HTML selection (prevent HTML drag and drop being triggered by this drag)
+		document.getSelection()?.removeAllRanges();
+
+		this.targetHandle = null;
+
+		let result = false;
 
 		for (const handle of this.handles) {
-			if (handle.isTarget(target)) {
-				handle.handleDragStart(pointer);
+			if (handle.containsPoint(pointer.canvasPos)) {
 				this.targetHandle = handle;
-				return true;
+				result = true;
 			}
 		}
 
-		if (this.backgroundElem === target) {
+		this.backgroundDragging = false;
+		if (this.region.containsPoint(pointer.canvasPos)) {
 			this.backgroundDragging = true;
+			result = true;
+		}
+
+		if (result) {
+			this.removeDeletedElemsFromSelection();
+			this.addRemoveSelectionFromImage(false);
+		}
+
+		if (this.targetHandle) {
+			this.targetHandle.handleDragStart(pointer);
+		}
+
+		if (this.backgroundDragging) {
 			this.transformers.drag.onDragStart(pointer.canvasPos);
-			return true;
 		}
 
-		return false;
+		return result;
 	}
 
 	public onDragUpdate(pointer: Pointer) {
@@ -543,10 +560,29 @@ export default class Selection {
 		return new Erase(this.selectedElems);
 	}
 
+	private selectionDuplicatedAnimationTimeout: ReturnType<typeof setTimeout>|null = null;
+	private runSelectionDuplicatedAnimation() {
+		if (this.selectionDuplicatedAnimationTimeout) {
+			clearTimeout(this.selectionDuplicatedAnimationTimeout);
+		}
+
+		const animationDuration = 400; // ms
+		this.backgroundElem.style.animation = `${animationDuration}ms ease selection-duplicated-animation`;
+
+		this.selectionDuplicatedAnimationTimeout = setTimeout(() => {
+			this.backgroundElem.style.animation = '';
+			this.selectionDuplicatedAnimationTimeout = null;
+		}, animationDuration);
+	}
+
 	public async duplicateSelectedObjects(): Promise<Command> {
 		const wasTransforming = this.backgroundDragging || this.targetHandle;
 		let tmpApplyCommand: Command|null = null;
 
+		if (!wasTransforming) {
+			this.runSelectionDuplicatedAnimation();
+		}
+
 		if (wasTransforming) {
 			// Don't update the selection's focus when redoing/undoing
 			const selectionToUpdate: Selection|null = null;
@@ -605,7 +641,7 @@ export default class Selection {
 	}
 
 	public getSelectedObjects(): AbstractComponent[] {
-		return this.selectedElems;
+		return [...this.selectedElems];
 	}
 }
 

package/src/tools/SelectionTool/SelectionHandle.ts

@@ -1,8 +1,9 @@
 import { assertUnreachable } from '../../util/assertions';
-import { Point2, Vec2 } from '../../math/Vec2';
+import { Point2, Rect2, Vec2 } from '@js-draw/math';
 import { cssPrefix } from './SelectionTool';
 import Selection from './Selection';
 import Pointer from '../../Pointer';
+import Viewport from '../../Viewport';
 
 export enum HandleShape {
 	Circle,
@@ -20,12 +21,11 @@ export default class SelectionHandle {
 	private element: HTMLElement;
 	private snapToGrid: boolean;
 
-	// Bounding box in screen coordinates.
-
 	public constructor(
 		readonly shape: HandleShape,
 		private readonly parentSide: Vec2,
 		private readonly parent: Selection,
+		private readonly viewport: Viewport,
 
 		private readonly onDragStart: DragStartCallback,
 		private readonly onDragUpdate: DragUpdateCallback,
@@ -56,25 +56,59 @@ export default class SelectionHandle {
 		container.appendChild(this.element);
 	}
 
-	public updatePosition() {
+	/**
+	 * Returns this handle's bounding box relative to the top left of the
+	 * selection box.
+	 */
+	private getBBoxParentCoords() {
 		const parentRect = this.parent.screenRegion;
 		const size = Vec2.of(handleSize, handleSize);
 		const topLeft = parentRect.size.scale(this.parentSide)
 			// Center
 			.minus(size.times(1/2));
 
-		// Position within the selection box.
-		this.element.style.marginLeft = `${topLeft.x}px`;
-		this.element.style.marginTop = `${topLeft.y}px`;
-		this.element.style.width = `${size.x}px`;
-		this.element.style.height = `${size.y}px`;
+		return new Rect2(topLeft.x, topLeft.y, size.x, size.y);
+	}
+
+	/** @returns this handle's bounding box relative to the canvas. */
+	private getBBoxCanvasCoords() {
+		const parentRect = this.parent.region;
+		const size = Vec2.of(handleSize, handleSize).times(1/this.viewport.getScaleFactor());
+
+		const topLeftFromParent = parentRect.size.scale(this.parentSide).minus(size.times(0.5));
+
+		return new Rect2(topLeftFromParent.x, topLeftFromParent.y, size.x, size.y).translatedBy(parentRect.topLeft);
 	}
 
 	/**
-	 * @returns `true` if the given `EventTarget` matches this.
+	 * Moves the HTML representation of this to the location matching its internal representation.
 	 */
-	public isTarget(target: EventTarget): boolean {
-		return target === this.element;
+	public updatePosition() {
+		const bbox = this.getBBoxParentCoords();
+
+		// Position within the selection box.
+		this.element.style.marginLeft = `${bbox.topLeft.x}px`;
+		this.element.style.marginTop = `${bbox.topLeft.y}px`;
+		this.element.style.width = `${bbox.w}px`;
+		this.element.style.height = `${bbox.h}px`;
+	}
+
+	/** @returns true iff `point` (in editor **canvas** coordinates) is in this. */
+	public containsPoint(point: Point2) {
+		const bbox = this.getBBoxCanvasCoords();
+		const delta = point.minus(bbox.center);
+
+		// Should have same x and y radius
+		const radius = bbox.size.x / 2;
+
+		let result;
+		if (this.shape === HandleShape.Circle) {
+			result = delta.magnitude() <= radius;
+		} else {
+			result = Math.abs(delta.x) <= radius && Math.abs(delta.y) <= radius;
+		}
+
+		return result;
 	}
 
 	private dragLastPos: Vec2|null = null;