tldraw 4.3.0-canary.e52fa5385f86 → 4.3.0-canary.ea88b223b83a

package/src/lib/shapes/text/toolStates/Idle.ts

@@ -1,5 +1,6 @@
 import { StateNode, TLKeyboardEventInfo, TLPointerEventInfo } from '@tldraw/editor'
 import { updateHoveredShapeId } from '../../../tools/selection-logic/updateHoveredShapeId'
+import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 
 export class Idle extends StateNode {
 	static override id = 'idle'
@@ -27,21 +28,10 @@ export class Idle extends StateNode {
 
 	override onKeyDown(info: TLKeyboardEventInfo) {
 		if (info.key === 'Enter') {
-			if (this.editor.getIsReadonly()) return null
 			const onlySelectedShape = this.editor.getOnlySelectedShape()
-			// If the only selected shape is editable, start editing it
-			if (
-				onlySelectedShape &&
-				this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)
-			) {
-				this.editor.setCurrentTool('select')
-				this.editor.setEditingShape(onlySelectedShape.id)
-				this.editor.root.getCurrent()?.transition('editing_shape', {
-					...info,
-					target: 'shape',
-					shape: onlySelectedShape,
-				})
-			}
+			if (!this.editor.canEditShape(onlySelectedShape)) return
+			this.editor.setCurrentTool('select')
+			startEditingShapeWithRichText(this.editor, onlySelectedShape.id, { info })
 		}
 	}
 

package/src/lib/shapes/text/toolStates/Pointing.ts

@@ -9,6 +9,7 @@ import {
 	maybeSnapToGrid,
 	toRichText,
 } from '@tldraw/editor'
+import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -37,11 +38,12 @@ export class Pointing extends StateNode {
 		if (Date.now() - this.enterTime < 150) return
 
 		const { editor } = this
-		const { isPointing } = editor.inputs
+		const isPointing = editor.inputs.getIsPointing()
 
 		if (!isPointing) return
 
-		const { originPagePoint, currentPagePoint } = editor.inputs
+		const originPagePoint = editor.inputs.getOriginPagePoint()
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
 		const currentDragDist = Math.abs(originPagePoint.x - currentPagePoint.x)
 
@@ -83,8 +85,7 @@ export class Pointing extends StateNode {
 				creationCursorOffset: { x: currentDragDist * scale, y: 1 },
 				onInteractionEnd: 'text',
 				onCreate: () => {
-					editor.setEditingShape(shape.id)
-					// this will automatically set the state to 'select.editing_shape'
+					startEditingShapeWithRichText(editor, shape.id)
 				},
 			})
 		}
@@ -109,13 +110,12 @@ export class Pointing extends StateNode {
 	private complete() {
 		this.editor.markHistoryStoppingPoint('creating text shape')
 		const id = createShapeId()
-		const { originPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 		const shape = this.createTextShape(id, originPagePoint, true, 20)
 		if (!shape) return
 
 		this.editor.select(id)
-		this.editor.setEditingShape(id)
-		// this will automatically set the state to 'select.editing_shape'
+		startEditingShapeWithRichText(this.editor, id)
 	}
 
 	private cancel() {

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -95,7 +95,8 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 
 const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape }) {
 	const editor = useEditor()
-	const showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110
+	const showControls =
+		editor.getShapeGeometry(shape).bounds.w * editor.getEfficientZoomLevel() >= 110
 	const isEditing = useIsEditing(shape.id)
 	const prefersReducedMotion = usePrefersReducedMotion()
 	const { Spinner } = useEditorComponents()

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -26,7 +26,7 @@ export class Erasing extends StateNode {
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
-		const { originPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 		this.excludedShapeIds = new Set(
 			this.editor
 				.getCurrentPageShapes()
@@ -58,7 +58,7 @@ export class Erasing extends StateNode {
 	}
 
 	private pushPointToScribble() {
-		const { x, y } = this.editor.inputs.currentPagePoint
+		const { x, y } = this.editor.inputs.getCurrentPagePoint()
 		this.editor.scribbles.addPoint(this.scribbleId, x, y)
 	}
 
@@ -98,9 +98,8 @@ export class Erasing extends StateNode {
 		const erasingShapeIds = editor.getErasingShapeIds()
 		const zoomLevel = editor.getZoomLevel()
 		const currentPageShapes = editor.getCurrentPageRenderingShapesSorted()
-		const {
-			inputs: { currentPagePoint, previousPagePoint },
-		} = editor
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const previousPagePoint = editor.inputs.getPreviousPagePoint()
 
 		this.pushPointToScribble()
 

package/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -10,9 +10,7 @@ export class Pointing extends StateNode {
 
 		const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapesSorted = this.editor.getCurrentPageRenderingShapesSorted()
-		const {
-			inputs: { currentPagePoint },
-		} = this.editor
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 
 		const erasing = new Set<TLShapeId>()
 
@@ -69,7 +67,7 @@ export class Pointing extends StateNode {
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this._isHoldingAccelKey) return
 
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startErasing(info)
 		}
 	}

package/src/lib/tools/HandTool/HandTool.ts

@@ -14,7 +14,7 @@ export class HandTool extends StateNode {
 
 	override onDoubleClick(info: TLClickEventInfo) {
 		if (info.phase === 'settle') {
-			const { currentScreenPoint } = this.editor.inputs
+			const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
 			this.editor.zoomIn(currentScreenPoint, {
 				animation: { duration: 220, easing: EASINGS.easeOutQuint },
 			})
@@ -23,7 +23,7 @@ export class HandTool extends StateNode {
 
 	override onTripleClick(info: TLClickEventInfo) {
 		if (info.phase === 'settle') {
-			const { currentScreenPoint } = this.editor.inputs
+			const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
 			this.editor.zoomOut(currentScreenPoint, {
 				animation: { duration: 320, easing: EASINGS.easeOutQuint },
 			})
@@ -33,9 +33,7 @@ export class HandTool extends StateNode {
 	override onQuadrupleClick(info: TLClickEventInfo) {
 		if (info.phase === 'settle') {
 			const zoomLevel = this.editor.getZoomLevel()
-			const {
-				inputs: { currentScreenPoint },
-			} = this.editor
+			const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
 
 			if (zoomLevel === 1) {
 				this.editor.zoomToFit({ animation: { duration: 400, easing: EASINGS.easeOutQuint } })

package/src/lib/tools/HandTool/childStates/Dragging.ts

@@ -28,7 +28,8 @@ export class Dragging extends StateNode {
 
 	private update() {
 		const { initialCamera, editor } = this
-		const { currentScreenPoint, originScreenPoint } = editor.inputs
+		const currentScreenPoint = editor.inputs.getCurrentScreenPoint()
+		const originScreenPoint = editor.inputs.getOriginScreenPoint()
 
 		const delta = Vec.Sub(currentScreenPoint, originScreenPoint).div(editor.getZoomLevel())
 		if (delta.len2() === 0) return
@@ -37,7 +38,7 @@ export class Dragging extends StateNode {
 
 	private complete() {
 		const { editor } = this
-		const { pointerVelocity } = editor.inputs
+		const pointerVelocity = editor.inputs.getPointerVelocity()
 
 		const velocityAtPointerUp = Math.min(pointerVelocity.len(), 2)
 

package/src/lib/tools/HandTool/childStates/Pointing.ts

@@ -13,7 +13,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startDragging()
 		}
 	}

package/src/lib/tools/LaserTool/childStates/Lasering.ts

@@ -31,7 +31,7 @@ export class Lasering extends StateNode {
 	}
 
 	private pushPointToScribble() {
-		const { x, y } = this.editor.inputs.currentPagePoint
+		const { x, y } = this.editor.inputs.getCurrentPagePoint()
 		this.editor.scribbles.addPoint(this.scribbleId, x, y)
 	}
 

package/src/lib/tools/SelectTool/DragAndDropManager.ts

@@ -92,10 +92,13 @@ export class DragAndDropManager {
 		this.intervalTimerId = this.editor.timers.setInterval(
 			() => {
 				skip2of3FramesWhileMovingFast++
-				if (skip2of3FramesWhileMovingFast % 3 && this.editor.inputs.pointerVelocity.len() > 0.5) {
+				if (
+					skip2of3FramesWhileMovingFast % 3 &&
+					this.editor.inputs.getPointerVelocity().len() > 0.5
+				) {
 					return
 				}
-				this.updateDraggingShapes(editor.inputs.currentPagePoint, cb)
+				this.updateDraggingShapes(editor.inputs.getCurrentPagePoint(), cb)
 			},
 			movingShapes.length > 10 ? SLOW_POINTER_LAG_DURATION : FAST_POINTER_LAG_DURATION
 		)
@@ -103,9 +106,10 @@ export class DragAndDropManager {
 
 	dropShapes(shapes: TLShape[]) {
 		const { editor } = this
-		this.updateDraggingShapes(editor.inputs.currentPagePoint)
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		this.updateDraggingShapes(currentPagePoint)
 
-		const draggingOverShape = editor.getDraggingOverShape(editor.inputs.currentPagePoint, shapes)
+		const draggingOverShape = editor.getDraggingOverShape(currentPagePoint, shapes)
 
 		if (draggingOverShape) {
 			const util = editor.getShapeUtil(draggingOverShape)
@@ -147,8 +151,9 @@ export class DragAndDropManager {
 		// This is the shape under the pointer that can handle at least one of the dragging shapes
 		const nextDraggingOverShape = editor.getDraggingOverShape(point, this.shapesToActuallyMove)
 
-		const cursorDidMove = !this.prevPagePoint.equals(editor.inputs.currentPagePoint)
-		this.prevPagePoint.setTo(editor.inputs.currentPagePoint)
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const cursorDidMove = !this.prevPagePoint.equals(currentPagePoint)
+		this.prevPagePoint.setTo(currentPagePoint)
 
 		editor.run(() => {
 			if (this.prevDraggingOverShape?.id === nextDraggingOverShape?.id) {
@@ -156,7 +161,7 @@ export class DragAndDropManager {
 					cursorDidMove &&
 					nextDraggingOverShape &&
 					isShapeId(nextDraggingOverShape.id) &&
-					!editor.inputs.previousPagePoint.equals(editor.inputs.currentPagePoint)
+					!editor.inputs.getPreviousPagePoint().equals(currentPagePoint)
 				) {
 					// If the cursor moved, call onDragShapesOver for the previous dragging over shape
 					const util = editor.getShapeUtil(nextDraggingOverShape)

package/src/lib/tools/SelectTool/childStates/Brushing.ts

@@ -31,7 +31,7 @@ export class Brushing extends StateNode {
 
 	override onEnter(info: TLPointerEventInfo & { target: 'canvas' }) {
 		const { editor } = this
-		const { altKey } = editor.inputs
+		const altKey = editor.inputs.getAltKey()
 
 		this.isWrapMode = editor.user.getIsWrapMode()
 
@@ -96,7 +96,7 @@ export class Brushing extends StateNode {
 	}
 
 	override onKeyDown(info: TLKeyboardEventInfo) {
-		if (this.editor.inputs.altKey) {
+		if (this.editor.inputs.getAltKey()) {
 			this.parent.transition('scribble_brushing', info)
 		} else {
 			this.hitTestShapes()
@@ -114,9 +114,10 @@ export class Brushing extends StateNode {
 
 	private hitTestShapes() {
 		const { editor, excludedShapeIds, isWrapMode } = this
-		const {
-			inputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey },
-		} = editor
+		const originPagePoint = editor.inputs.getOriginPagePoint()
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const shiftKey = editor.inputs.getShiftKey()
+		const ctrlKey = editor.inputs.getCtrlKey()
 
 		// We'll be collecting shape ids of selected shapes; if we're holding shift key, we start from our initial shapes
 		const results = new Set(shiftKey ? this.initialSelectedShapeIds : [])

package/src/lib/tools/SelectTool/childStates/Crop/children/Cropping.ts

@@ -83,9 +83,12 @@ export class Cropping extends StateNode {
 		const util = this.editor.getShapeUtil<ShapeWithCrop>(shape.type)
 		if (!util) return
 
-		const { shiftKey } = this.editor.inputs
-		const currentPagePoint = this.editor.inputs.currentPagePoint.clone().sub(cursorHandleOffset)
-		const originPagePoint = this.editor.inputs.originPagePoint.clone().sub(cursorHandleOffset)
+		const shiftKey = this.editor.inputs.getShiftKey()
+		const currentPagePoint = this.editor.inputs
+			.getCurrentPagePoint()
+			.clone()
+			.sub(cursorHandleOffset)
+		const originPagePoint = this.editor.inputs.getOriginPagePoint().clone().sub(cursorHandleOffset)
 		const change = currentPagePoint.clone().sub(originPagePoint).rot(-shape.rotation)
 
 		const crop = shape.props.crop ?? getDefaultCrop()
@@ -145,9 +148,7 @@ export class Cropping extends StateNode {
 
 	private createSnapshot() {
 		const selectionRotation = this.editor.getSelectionRotation()
-		const {
-			inputs: { originPagePoint },
-		} = this.editor
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 		const shape = this.editor.getOnlySelectedShape() as ShapeWithCrop
 

package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts

@@ -112,7 +112,7 @@ export class Idle extends StateNode {
 	override onDoubleClick(info: TLClickEventInfo) {
 		// Without this, the double click's "settle" would trigger the reset
 		// after the user double clicked the edge to begin cropping
-		if (this.editor.inputs.shiftKey || info.phase !== 'up') return
+		if (this.editor.inputs.getShiftKey() || info.phase !== 'up') return
 
 		const croppingShapeId = this.editor.getCroppingShapeId()
 		if (!croppingShapeId) return

package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCrop.ts

@@ -8,7 +8,7 @@ export class PointingCrop extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startDragging(info)
 		}
 	}

package/src/lib/tools/SelectTool/childStates/Crop/children/PointingCropHandle.ts

@@ -31,7 +31,7 @@ export class PointingCropHandle extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.startCropping()
 		}
 	}

package/src/lib/tools/SelectTool/childStates/Crop/children/TranslatingCrop.ts

@@ -94,7 +94,8 @@ export class TranslatingCrop extends StateNode {
 
 		if (!shape) return
 
-		const { originPagePoint, currentPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 		const delta = currentPagePoint.clone().sub(originPagePoint)
 		const partial = getTranslateCroppedImageChange(this.editor, shape, delta)
 

package/src/lib/tools/SelectTool/childStates/Crop/children/crop_helpers.ts

@@ -12,7 +12,7 @@ export function getTranslateCroppedImageChange(editor: Editor, shape: ShapeWithC
 		return
 	}
 
-	const flatten: 'x' | 'y' | null = editor.inputs.shiftKey
+	const flatten: 'x' | 'y' | null = editor.inputs.getShiftKey()
 		? Math.abs(delta.x) < Math.abs(delta.y)
 			? 'x'
 			: 'y'

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -73,7 +73,7 @@ export class DraggingHandle extends StateNode {
 
 		this.initialPageTransform = this.editor.getShapePageTransform(shape)!
 		this.initialPageRotation = this.initialPageTransform.rotation()
-		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
+		this.initialPagePoint = this.editor.inputs.getOriginPagePoint().clone()
 
 		this.editor.setCursor({ type: isCreating ? 'cross' : 'grabbing', rotation: 0 })
 
@@ -284,10 +284,12 @@ export class DraggingHandle extends StateNode {
 		const { editor, shapeId, initialPagePoint } = this
 		const { initialHandle, initialPageRotation, initialAdjacentHandle } = this
 		const isSnapMode = this.editor.user.getIsSnapMode()
-		const {
-			snaps,
-			inputs: { currentPagePoint, shiftKey, ctrlKey, altKey, pointerVelocity },
-		} = editor
+		const { snaps } = editor
+		const currentPagePoint = editor.inputs.getCurrentPagePoint()
+		const shiftKey = editor.inputs.getShiftKey()
+		const ctrlKey = editor.inputs.getCtrlKey()
+		const altKey = editor.inputs.getAltKey()
+		const pointerVelocity = editor.inputs.getPointerVelocity()
 
 		const initial = this.info.shape
 

package/src/lib/tools/SelectTool/childStates/EditingShape.ts

@@ -18,13 +18,25 @@ interface EditingShapeInfo {
 export class EditingShape extends StateNode {
 	static override id = 'editing_shape'
 
-	hitShapeForPointerUp: TLShape | null = null
+	hitLabelOnShapeForPointerUp: TLShape | null = null
 	private info = {} as EditingShapeInfo
+	private didPointerDownOnEditingShape = false
+
+	private isTextInputFocused(): boolean {
+		const container = this.editor.getContainer()
+		return (
+			container.contains(document.activeElement) &&
+			(document.activeElement?.nodeName === 'INPUT' ||
+				document.activeElement?.nodeName === 'TEXTAREA' ||
+				(document.activeElement as HTMLElement)?.isContentEditable)
+		)
+	}
 
 	override onEnter(info: EditingShapeInfo) {
 		const editingShape = this.editor.getEditingShape()
 		if (!editingShape) throw Error('Entered editing state without an editing shape')
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
+		this.didPointerDownOnEditingShape = false
 
 		this.info = info
 
@@ -54,15 +66,34 @@ export class EditingShape extends StateNode {
 	override onPointerMove(info: TLPointerEventInfo) {
 		// In the case where on pointer down we hit a shape's label, we need to check if the user is dragging.
 		// and if they are, we need to transition to translating instead.
-		if (this.hitShapeForPointerUp && this.editor.inputs.isDragging) {
+		if (this.hitLabelOnShapeForPointerUp && this.editor.inputs.getIsDragging()) {
 			if (this.editor.getIsReadonly()) return
-			if (this.hitShapeForPointerUp.isLocked) return
-			this.editor.select(this.hitShapeForPointerUp)
+			if (this.hitLabelOnShapeForPointerUp.isLocked) return
+
+			this.editor.select(this.hitLabelOnShapeForPointerUp)
 			this.parent.transition('translating', info)
-			this.hitShapeForPointerUp = null
+			this.hitLabelOnShapeForPointerUp = null
 			return
 		}
 
+		// Check if dragging from editing shape with blurred input
+		if (this.didPointerDownOnEditingShape && this.editor.inputs.isDragging) {
+			if (this.editor.getIsReadonly()) return
+
+			const editingShape = this.editor.getEditingShape()
+			if (!editingShape || editingShape.isLocked) return
+
+			if (!this.isTextInputFocused()) {
+				// Input blurred during drag - exit edit mode and start translating
+				this.editor.select(editingShape)
+				this.parent.transition('translating', info)
+				this.didPointerDownOnEditingShape = false
+				return
+			}
+			// Input still focused - user is selecting text, stay in edit mode
+			this.didPointerDownOnEditingShape = false
+		}
+
 		switch (info.target) {
 			case 'shape':
 			case 'canvas': {
@@ -73,7 +104,8 @@ export class EditingShape extends StateNode {
 	}
 
 	override onPointerDown(info: TLPointerEventInfo) {
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
+		this.didPointerDownOnEditingShape = false
 
 		switch (info.target) {
 			// N.B. This bit of logic has a bit of history to it.
@@ -112,7 +144,7 @@ export class EditingShape extends StateNode {
 				if (textLabel && !isEmptyTextShape) {
 					const pointInShapeSpace = this.editor.getPointInShapeSpace(
 						selectingShape,
-						this.editor.inputs.currentPagePoint
+						this.editor.inputs.getCurrentPagePoint()
 					)
 					if (
 						textLabel.bounds.containsPoint(pointInShapeSpace, 0) &&
@@ -120,10 +152,11 @@ export class EditingShape extends StateNode {
 					) {
 						// it's a hit to the label!
 						if (selectingShape.id === editingShape.id) {
-							// If we clicked on the editing geo / arrow shape's label, do nothing
+							// Track click on editing shape for drag detection
+							this.didPointerDownOnEditingShape = true
 							return
 						} else {
-							this.hitShapeForPointerUp = selectingShape
+							this.hitLabelOnShapeForPointerUp = selectingShape
 
 							this.editor.markHistoryStoppingPoint('editing on pointer up')
 							this.editor.select(selectingShape.id)
@@ -156,10 +189,20 @@ export class EditingShape extends StateNode {
 	}
 
 	override onPointerUp(info: TLPointerEventInfo) {
+		if (this.didPointerDownOnEditingShape) {
+			this.didPointerDownOnEditingShape = false
+			if (!this.isTextInputFocused()) {
+				// We clicked on the text label, which blured the input.
+				// We want to stay in edit mode and select all the text.
+				this.editor.getRichTextEditor()?.commands.focus('all')
+				return
+			}
+		}
+
 		// If we're not dragging, and it's a hit to the label, begin editing the shape.
-		const hitShape = this.hitShapeForPointerUp
+		const hitShape = this.hitLabelOnShapeForPointerUp
 		if (!hitShape) return
-		this.hitShapeForPointerUp = null
+		this.hitLabelOnShapeForPointerUp = null
 
 		// Stay in edit mode to maintain flow of editing.
 		const util = this.editor.getShapeUtil(hitShape)