@tldraw/driver 5.3.2 → 5.4.0-canary.02cd0bd3b597

package/src/lib/Driver.ts

@@ -28,6 +28,19 @@ export type PointerEventInit = Partial<TLPointerEventInfo> | TLShapeId
 /** Modifier keys for events. @public */
 export type EventModifiers = Partial<Pick<TLPointerEventInfo, 'shiftKey' | 'ctrlKey' | 'altKey'>>
 
+const KEY_CODES: Record<string, string> = {
+	Shift: 'ShiftLeft',
+	Alt: 'AltLeft',
+	Control: 'CtrlLeft',
+	Meta: 'MetaLeft',
+	' ': 'Space',
+	Enter: 'Enter',
+	ArrowRight: 'ArrowRight',
+	ArrowLeft: 'ArrowLeft',
+	ArrowUp: 'ArrowUp',
+	ArrowDown: 'ArrowDown',
+}
+
 /**
  * Driver wraps an Editor instance and provides an imperative API for driving it
  * programmatically. Useful for scripting, automation, REPL usage, and testing.
@@ -38,7 +51,8 @@ export type EventModifiers = Partial<Pick<TLPointerEventInfo, 'shiftKey' | 'ctrl
  */
 export class Driver {
 	/** The underlying Editor instance. */
-	private _cleanup: (() => void) | null = null
+	private _cleanup: (() => void) | null
+	private _lastCreatedShapes: TLShape[] = []
 
 	constructor(public readonly editor: Editor) {
 		this._cleanup = this.editor.sideEffects.registerAfterCreateHandler('shape', (record) => {
@@ -58,8 +72,6 @@ export class Driver {
 	/** Local clipboard content. Used by copy, cut, and paste. */
 	clipboard: TLContent | null = null
 
-	private _lastCreatedShapes: TLShape[] = []
-
 	/**
 	 * Get the last created shapes.
 	 * @param count - The number of shapes to get.
@@ -116,10 +128,7 @@ export class Driver {
 	 */
 	cut(ids = this.editor.getSelectedShapeIds()) {
 		if (ids.length > 0) {
-			const content = this.editor.getContentFromCurrentPage(ids)
-			if (content) {
-				this.clipboard = content
-			}
+			this.copy(ids)
 			this.editor.deleteShapes(ids)
 		}
 		return this
@@ -174,10 +183,7 @@ export class Driver {
 	 */
 	getPageRotationById(id: TLShapeId): number {
 		const pageTransform = this.editor.getShapePageTransform(id)
-		if (pageTransform) {
-			return Mat.Decompose(pageTransform).rotation
-		}
-		return 0
+		return pageTransform ? pageTransform.rotation() : 0
 	}
 
 	/**
@@ -199,6 +205,17 @@ export class Driver {
 
 	/* --------------- Event building --------------- */
 
+	private getModifierKeys() {
+		const { inputs } = this.editor
+		return {
+			shiftKey: inputs.getShiftKey(),
+			ctrlKey: inputs.getCtrlKey(),
+			altKey: inputs.getAltKey(),
+			metaKey: inputs.getMetaKey(),
+			accelKey: isAccelKey(inputs),
+		}
+	}
+
 	/**
 	 * Builds a TLPointerEventInfo object for input simulation.
 	 * @param x - Screen x coordinate. Defaults to current pointer.
@@ -221,10 +238,7 @@ export class Driver {
 			name: 'pointer_down',
 			type: 'pointer',
 			pointerId: 1,
-			shiftKey: this.editor.inputs.getShiftKey(),
-			ctrlKey: this.editor.inputs.getCtrlKey(),
-			altKey: this.editor.inputs.getAltKey(),
-			metaKey: this.editor.inputs.getMetaKey(),
+			...this.getModifierKeys(),
 			accelKey: isAccelKey({ ...this.editor.inputs.toJson(), ...modifiers }),
 			point: { x, y, z: null },
 			button: 0,
@@ -268,26 +282,9 @@ export class Driver {
 		}
 		return {
 			...flags,
-			accelKey: flags.accelKey ?? (tlenv.isDarwin ? flags.metaKey : flags.ctrlKey || flags.metaKey),
+			accelKey: flags.accelKey ?? isAccelKey(flags),
 			name,
-			code:
-				key === 'Shift'
-					? 'ShiftLeft'
-					: key === 'Alt'
-						? 'AltLeft'
-						: key === 'Control'
-							? 'CtrlLeft'
-							: key === 'Meta'
-								? 'MetaLeft'
-								: key === ' '
-									? 'Space'
-									: key === 'Enter' ||
-										  key === 'ArrowRight' ||
-										  key === 'ArrowLeft' ||
-										  key === 'ArrowUp' ||
-										  key === 'ArrowDown'
-										? key
-										: 'Key' + key[0].toUpperCase() + key.slice(1),
+			code: KEY_CODES[key] ?? 'Key' + key[0].toUpperCase() + key.slice(1),
 			type: 'keyboard',
 			key,
 		}
@@ -428,8 +425,7 @@ export class Driver {
 		options?: PointerEventInit,
 		modifiers?: EventModifiers
 	) {
-		this.pointerDown(x, y, options, modifiers)
-		this.pointerUp(x, y, options, modifiers)
+		this.click(x, y, options, modifiers)
 		this.editor.dispatch({
 			...this.getPointerEventInfo(x, y, options, modifiers),
 			type: 'click',
@@ -463,7 +459,7 @@ export class Driver {
 	 * @param options - Partial keyboard event overrides.
 	 */
 	keyDown(key: string, options = {} as Partial<Omit<TLKeyboardEventInfo, 'key'>>) {
-		this.editor.dispatch({ ...this.getKeyboardEventInfo(key, 'key_down', options) })
+		this.editor.dispatch(this.getKeyboardEventInfo(key, 'key_down', options))
 		this.forceTick()
 		return this
 	}
@@ -474,7 +470,7 @@ export class Driver {
 	 * @param options - Partial keyboard event overrides.
 	 */
 	keyRepeat(key: string, options = {} as Partial<Omit<TLKeyboardEventInfo, 'key'>>) {
-		this.editor.dispatch({ ...this.getKeyboardEventInfo(key, 'key_repeat', options) })
+		this.editor.dispatch(this.getKeyboardEventInfo(key, 'key_repeat', options))
 		this.forceTick()
 		return this
 	}
@@ -485,15 +481,15 @@ export class Driver {
 	 * @param options - Partial keyboard event overrides.
 	 */
 	keyUp(key: string, options = {} as Partial<Omit<TLKeyboardEventInfo, 'key'>>) {
-		this.editor.dispatch({
-			...this.getKeyboardEventInfo(key, 'key_up', {
+		this.editor.dispatch(
+			this.getKeyboardEventInfo(key, 'key_up', {
 				shiftKey: this.editor.inputs.getShiftKey() && key !== 'Shift',
 				ctrlKey: this.editor.inputs.getCtrlKey() && !(key === 'Control' || key === 'Meta'),
 				altKey: this.editor.inputs.getAltKey() && key !== 'Alt',
 				metaKey: this.editor.inputs.getMetaKey() && key !== 'Meta',
 				...options,
-			}),
-		})
+			})
+		)
 		this.forceTick()
 		return this
 	}
@@ -510,11 +506,7 @@ export class Driver {
 			type: 'wheel',
 			name: 'wheel',
 			point: new Vec(currentScreenPoint.x, currentScreenPoint.y),
-			shiftKey: this.editor.inputs.getShiftKey(),
-			ctrlKey: this.editor.inputs.getCtrlKey(),
-			altKey: this.editor.inputs.getAltKey(),
-			metaKey: this.editor.inputs.getMetaKey(),
-			accelKey: isAccelKey(this.editor.inputs),
+			...this.getModifierKeys(),
 			...options,
 			delta: { x: dx, y: dy },
 		})
@@ -537,6 +529,26 @@ export class Driver {
 		return this
 	}
 
+	private pinch(
+		name: TLPinchEventInfo['name'],
+		x: number,
+		y: number,
+		z: number,
+		dx: number,
+		dy: number,
+		dz: number,
+		options: Partial<Omit<TLPinchEventInfo, 'point' | 'delta' | 'offset'>>
+	) {
+		this.editor.dispatch({
+			type: 'pinch',
+			name,
+			...this.getModifierKeys(),
+			...options,
+			point: { x, y, z },
+			delta: { x: dx, y: dy, z: dz },
+		})
+	}
+
 	/**
 	 * Dispatches a pinch start event.
 	 * @param x - Screen x coordinate. Defaults to current pointer.
@@ -556,18 +568,7 @@ export class Driver {
 		dz: number,
 		options = {} as Partial<Omit<TLPinchEventInfo, 'point' | 'delta' | 'offset'>>
 	) {
-		this.editor.dispatch({
-			type: 'pinch',
-			name: 'pinch_start',
-			shiftKey: this.editor.inputs.getShiftKey(),
-			ctrlKey: this.editor.inputs.getCtrlKey(),
-			altKey: this.editor.inputs.getAltKey(),
-			metaKey: this.editor.inputs.getMetaKey(),
-			accelKey: isAccelKey(this.editor.inputs),
-			...options,
-			point: { x, y, z },
-			delta: { x: dx, y: dy, z: dz },
-		})
+		this.pinch('pinch_start', x, y, z, dx, dy, dz, options)
 		this.forceTick()
 		return this
 	}
@@ -591,18 +592,7 @@ export class Driver {
 		dz: number,
 		options = {} as Partial<Omit<TLPinchEventInfo, 'point' | 'delta' | 'offset'>>
 	) {
-		this.editor.dispatch({
-			type: 'pinch',
-			name: 'pinch',
-			shiftKey: this.editor.inputs.getShiftKey(),
-			ctrlKey: this.editor.inputs.getCtrlKey(),
-			altKey: this.editor.inputs.getAltKey(),
-			metaKey: this.editor.inputs.getMetaKey(),
-			accelKey: isAccelKey(this.editor.inputs),
-			...options,
-			point: { x, y, z },
-			delta: { x: dx, y: dy, z: dz },
-		})
+		this.pinch('pinch', x, y, z, dx, dy, dz, options)
 		return this
 	}
 
@@ -625,33 +615,13 @@ export class Driver {
 		dz: number,
 		options = {} as Partial<Omit<TLPinchEventInfo, 'point' | 'delta' | 'offset'>>
 	) {
-		this.editor.dispatch({
-			type: 'pinch',
-			name: 'pinch_end',
-			shiftKey: this.editor.inputs.getShiftKey(),
-			ctrlKey: this.editor.inputs.getCtrlKey(),
-			altKey: this.editor.inputs.getAltKey(),
-			metaKey: this.editor.inputs.getMetaKey(),
-			accelKey: isAccelKey(this.editor.inputs),
-			...options,
-			point: { x, y, z },
-			delta: { x: dx, y: dy, z: dz },
-		})
+		this.pinch('pinch_end', x, y, z, dx, dy, dz, options)
 		this.forceTick()
 		return this
 	}
 
 	/* --------------- Interaction helpers --------------- */
 
-	/**
-	 * Converts a point from page coordinates to screen coordinates.
-	 * Pointer events operate in screen space, so page-space points must be
-	 * converted before being passed to pointerDown/Move/Up.
-	 */
-	private pageToScreen(point: VecLike) {
-		return this.editor.pageToScreen(point)
-	}
-
 	/**
 	 * Simulates rotating the current selection by the given angle in radians via the rotation handle.
 	 * @param angleRadians - Rotation angle in radians.
@@ -668,19 +638,16 @@ export class Driver {
 
 		this.editor.setCurrentTool('select')
 
-		const handlePoint = this.editor
-			.getSelectionRotatedPageBounds()!
+		const bounds = this.editor.getSelectionRotatedPageBounds()!
+		const handlePoint = bounds
 			.getHandlePoint(ROTATE_CORNER_TO_SELECTION_CORNER[handle])
 			.clone()
-			.rotWith(
-				this.editor.getSelectionRotatedPageBounds()!.point,
-				this.editor.getSelectionRotation()
-			)
+			.rotWith(bounds.point, this.editor.getSelectionRotation())
 
 		const targetHandlePoint = Vec.RotWith(handlePoint, this.getSelectionPageCenter()!, angleRadians)
 
-		const screenHandle = this.pageToScreen(handlePoint)
-		const screenTarget = this.pageToScreen(targetHandlePoint)
+		const screenHandle = this.editor.pageToScreen(handlePoint)
+		const screenTarget = this.editor.pageToScreen(targetHandlePoint)
 
 		this.pointerDown(screenHandle.x, screenHandle.y, { target: 'selection', handle })
 		this.pointerMove(screenTarget.x, screenTarget.y, { shiftKey })
@@ -701,18 +668,18 @@ export class Driver {
 		this.editor.setCurrentTool('select')
 
 		const center = this.getSelectionPageCenter()!
-		const screenCenter = this.pageToScreen(center)
+		const screenCenter = this.editor.pageToScreen(center)
 
 		this.pointerDown(screenCenter.x, screenCenter.y, this.editor.getSelectedShapeIds()[0])
 		const numSteps = 10
 		for (let i = 1; i < numSteps; i++) {
-			const p = this.pageToScreen({
+			const p = this.editor.pageToScreen({
 				x: center.x + (i * dx) / numSteps,
 				y: center.y + (i * dy) / numSteps,
 			})
 			this.pointerMove(p.x, p.y, options)
 		}
-		const endScreen = this.pageToScreen({ x: center.x + dx, y: center.y + dy })
+		const endScreen = this.editor.pageToScreen({ x: center.x + dx, y: center.y + dy })
 		this.pointerUp(endScreen.x, endScreen.y, options)
 		return this
 	}
@@ -734,6 +701,7 @@ export class Driver {
 		}
 		this.editor.setCurrentTool('select')
 		const bounds = this.editor.getSelectionRotatedPageBounds()!
+		const rotation = this.editor.getSelectionRotation()
 		const preRotationHandlePoint = bounds.getHandlePoint(handle)
 
 		const preRotationScaleOriginPoint = options?.altKey
@@ -748,19 +716,11 @@ export class Driver {
 			preRotationScaleOriginPoint
 		)
 
-		const handlePoint = Vec.RotWith(
-			preRotationHandlePoint,
-			bounds.point,
-			this.editor.getSelectionRotation()
-		)
-		const targetHandlePoint = Vec.RotWith(
-			preRotationTargetHandlePoint,
-			bounds.point,
-			this.editor.getSelectionRotation()
-		)
+		const handlePoint = Vec.RotWith(preRotationHandlePoint, bounds.point, rotation)
+		const targetHandlePoint = Vec.RotWith(preRotationTargetHandlePoint, bounds.point, rotation)
 
-		const screenHandle = this.pageToScreen(handlePoint)
-		const screenTarget = this.pageToScreen(targetHandlePoint)
+		const screenHandle = this.editor.pageToScreen(handlePoint)
+		const screenTarget = this.editor.pageToScreen(targetHandlePoint)
 
 		this.pointerDown(screenHandle.x, screenHandle.y, { target: 'selection', handle }, options)
 		this.pointerMove(screenTarget.x, screenTarget.y, options)