tldraw 4.2.2 → 4.2.3

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

@@ -3,8 +3,10 @@ import {
 	TLCancelEventInfo,
 	TLCompleteEventInfo,
 	tlenv,
+	TLFrameShape,
 	TLPointerEventInfo,
 	TLShape,
+	TLTextShape,
 } from '@tldraw/editor'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 import { renderPlaintextFromRichText } from '../../../utils/text/richText'
@@ -18,25 +20,13 @@ interface EditingShapeInfo {
 export class EditingShape extends StateNode {
 	static override id = 'editing_shape'
 
-	hitLabelOnShapeForPointerUp: TLShape | null = null
+	hitShapeForPointerUp: 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.hitLabelOnShapeForPointerUp = null
-		this.didPointerDownOnEditingShape = false
+		this.hitShapeForPointerUp = null
 
 		this.info = info
 
@@ -66,34 +56,15 @@ 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.hitLabelOnShapeForPointerUp && this.editor.inputs.getIsDragging()) {
+		if (this.hitShapeForPointerUp && this.editor.inputs.isDragging) {
 			if (this.editor.getIsReadonly()) return
-			if (this.hitLabelOnShapeForPointerUp.isLocked) return
-
-			this.editor.select(this.hitLabelOnShapeForPointerUp)
+			if (this.hitShapeForPointerUp.isLocked) return
+			this.editor.select(this.hitShapeForPointerUp)
 			this.parent.transition('translating', info)
-			this.hitLabelOnShapeForPointerUp = null
+			this.hitShapeForPointerUp = 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': {
@@ -104,8 +75,7 @@ export class EditingShape extends StateNode {
 	}
 
 	override onPointerDown(info: TLPointerEventInfo) {
-		this.hitLabelOnShapeForPointerUp = null
-		this.didPointerDownOnEditingShape = false
+		this.hitShapeForPointerUp = null
 
 		switch (info.target) {
 			// N.B. This bit of logic has a bit of history to it.
@@ -139,12 +109,12 @@ export class EditingShape extends StateNode {
 				const textLabel = textLabels.length === 1 ? textLabels[0] : undefined
 				// N.B. One nuance here is that we want empty text fields to be removed from the canvas when the user clicks away from them.
 				const isEmptyTextShape =
-					this.editor.isShapeOfType(editingShape, 'text') &&
+					this.editor.isShapeOfType<TLTextShape>(editingShape, 'text') &&
 					renderPlaintextFromRichText(this.editor, editingShape.props.richText).trim() === ''
 				if (textLabel && !isEmptyTextShape) {
 					const pointInShapeSpace = this.editor.getPointInShapeSpace(
 						selectingShape,
-						this.editor.inputs.getCurrentPagePoint()
+						this.editor.inputs.currentPagePoint
 					)
 					if (
 						textLabel.bounds.containsPoint(pointInShapeSpace, 0) &&
@@ -152,11 +122,10 @@ export class EditingShape extends StateNode {
 					) {
 						// it's a hit to the label!
 						if (selectingShape.id === editingShape.id) {
-							// Track click on editing shape for drag detection
-							this.didPointerDownOnEditingShape = true
+							// If we clicked on the editing geo / arrow shape's label, do nothing
 							return
 						} else {
-							this.hitLabelOnShapeForPointerUp = selectingShape
+							this.hitShapeForPointerUp = selectingShape
 
 							this.editor.markHistoryStoppingPoint('editing on pointer up')
 							this.editor.select(selectingShape.id)
@@ -166,7 +135,7 @@ export class EditingShape extends StateNode {
 				} else {
 					if (selectingShape.id === editingShape.id) {
 						// If we clicked on a frame, while editing its heading, cancel editing
-						if (this.editor.isShapeOfType(selectingShape, 'frame')) {
+						if (this.editor.isShapeOfType<TLFrameShape>(selectingShape, 'frame')) {
 							this.editor.setEditingShape(null)
 							this.parent.transition('idle', info)
 						}
@@ -189,20 +158,10 @@ 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.hitLabelOnShapeForPointerUp
+		const hitShape = this.hitShapeForPointerUp
 		if (!hitShape) return
-		this.hitLabelOnShapeForPointerUp = null
+		this.hitShapeForPointerUp = null
 
 		// Stay in edit mode to maintain flow of editing.
 		const util = this.editor.getShapeUtil(hitShape)

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

@@ -3,9 +3,11 @@ import {
 	StateNode,
 	TLAdjacentDirection,
 	TLClickEventInfo,
+	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPointerEventInfo,
 	TLShape,
+	TLTextShape,
 	Vec,
 	VecLike,
 	createShapeId,
@@ -16,9 +18,10 @@ import {
 } from '@tldraw/editor'
 import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
+import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
 import { updateHoveredShapeId } from '../../selection-logic/updateHoveredShapeId'
-import { hasRichText, startEditingShapeWithRichText } from '../selectHelpers'
+import { startEditingShapeWithLabel } from '../selectHelpers'
 
 const SKIPPED_KEYS_FOR_AUTO_EDITING = [
 	'Delete',
@@ -52,6 +55,8 @@ export class Idle extends StateNode {
 	}
 
 	override onPointerDown(info: TLPointerEventInfo) {
+		const shouldEnterCropMode = info.ctrlKey && getShouldEnterCropMode(this.editor)
+
 		switch (info.target) {
 			case 'canvas': {
 				// Check to see if we hit any shape under the pointer; if so,
@@ -68,7 +73,9 @@ export class Idle extends StateNode {
 
 				const selectedShapeIds = this.editor.getSelectedShapeIds()
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
-				const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+				const {
+					inputs: { currentPagePoint },
+				} = this.editor
 
 				if (
 					selectedShapeIds.length > 1 ||
@@ -101,7 +108,7 @@ export class Idle extends StateNode {
 			}
 			case 'handle': {
 				if (this.editor.getIsReadonly()) break
-				if (this.editor.inputs.getAltKey()) {
+				if (this.editor.inputs.altKey) {
 					this.parent.transition('pointing_shape', info)
 				} else {
 					// If we're holding ctrl key, we might select it, or start brushing...
@@ -131,8 +138,7 @@ export class Idle extends StateNode {
 					case 'top_right':
 					case 'bottom_left':
 					case 'bottom_right': {
-						const onlySelectedShape = this.editor.getOnlySelectedShape()
-						if (info.ctrlKey && this.editor.canCropShape(onlySelectedShape)) {
+						if (shouldEnterCropMode) {
 							this.parent.transition('crop.pointing_crop_handle', info)
 						} else {
 							if (info.accelKey) {
@@ -167,7 +173,7 @@ export class Idle extends StateNode {
 	}
 
 	override onDoubleClick(info: TLClickEventInfo) {
-		if (this.editor.inputs.getShiftKey() || info.phase !== 'up') return
+		if (this.editor.inputs.shiftKey || info.phase !== 'up') return
 
 		// We don't want to double click while toggling shapes
 		if (info.ctrlKey || info.shiftKey) return
@@ -183,12 +189,11 @@ export class Idle extends StateNode {
 				// of the shape yet because that also creates text shapes, and can produce
 				// unexpected results when working "inside of" a hollow shape.
 
-				const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
 				const hitShape =
-					hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
+					hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 						? hoveredShape
-						: (this.editor.getSelectedShapeAtPoint(currentPagePoint) ??
-							this.editor.getShapeAtPoint(currentPagePoint, {
+						: (this.editor.getSelectedShapeAtPoint(this.editor.inputs.currentPagePoint) ??
+							this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
 								margin: this.editor.options.hitTestMargin / this.editor.getZoomLevel(),
 								hitInside: false,
 							}))
@@ -196,13 +201,13 @@ export class Idle extends StateNode {
 				const focusedGroupId = this.editor.getFocusedGroupId()
 
 				if (hitShape) {
-					if (this.editor.isShapeOfType(hitShape, 'group')) {
+					if (this.editor.isShapeOfType<TLGroupShape>(hitShape, 'group')) {
 						// Probably select the shape
 						selectOnCanvasPointerUp(this.editor, info)
 						return
 					} else {
 						const parent = this.editor.getShape(hitShape.parentId)
-						if (parent && this.editor.isShapeOfType(parent, 'group')) {
+						if (parent && this.editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
 							// The shape is the direct child of a group. If the group is
 							// selected, then we can select the shape. If the group is the
 							// focus layer id, then we can double click into it as usual.
@@ -229,45 +234,30 @@ export class Idle extends StateNode {
 					return
 				}
 
-				if (!this.editor.inputs.getShiftKey()) {
+				if (!this.editor.inputs.shiftKey) {
 					this.handleDoubleClickOnCanvas(info)
 				}
 				break
 			}
 			case 'selection': {
+				if (this.editor.getIsReadonly()) break
+
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
 
 				if (onlySelectedShape) {
 					const util = this.editor.getShapeUtil(onlySelectedShape)
-					const isEdge =
-						info.handle === 'right' ||
-						info.handle === 'left' ||
-						info.handle === 'top' ||
-						info.handle === 'bottom'
-					const isCorner =
-						info.handle === 'top_left' ||
-						info.handle === 'top_right' ||
-						info.handle === 'bottom_right' ||
-						info.handle === 'bottom_left'
 
-					if (this.editor.getIsReadonly()) {
-						// includes readonly check
-						if (
-							this.editor.canEditShape(onlySelectedShape, {
-								type: isCorner
-									? 'double-click-corner'
-									: isEdge
-										? 'double-click-edge'
-										: 'double-click',
-							})
-						) {
-							this.startEditingShape(onlySelectedShape, info, true /* select all */)
-						}
-						break
+					if (!this.canInteractWithShapeInReadOnly(onlySelectedShape)) {
+						return
 					}
 
 					// Test edges for an onDoubleClickEdge handler
-					if (isEdge) {
+					if (
+						info.handle === 'right' ||
+						info.handle === 'left' ||
+						info.handle === 'top' ||
+						info.handle === 'bottom'
+					) {
 						const change = util.onDoubleClickEdge?.(onlySelectedShape, info)
 						if (change) {
 							this.editor.markHistoryStoppingPoint('double click edge')
@@ -277,7 +267,12 @@ export class Idle extends StateNode {
 						}
 					}
 
-					if (isCorner) {
+					if (
+						info.handle === 'top_left' ||
+						info.handle === 'top_right' ||
+						info.handle === 'bottom_right' ||
+						info.handle === 'bottom_left'
+					) {
 						const change = util.onDoubleClickCorner?.(onlySelectedShape, info)
 						if (change) {
 							this.editor.markHistoryStoppingPoint('double click corner')
@@ -286,14 +281,16 @@ export class Idle extends StateNode {
 							return
 						}
 					}
-
 					// For corners OR edges but NOT rotation corners
-					if (this.editor.canCropShape(onlySelectedShape)) {
+					if (
+						util.canCrop(onlySelectedShape) &&
+						!this.editor.isShapeOrAncestorLocked(onlySelectedShape)
+					) {
 						this.parent.transition('crop', info)
 						return
 					}
 
-					if (this.editor.canEditShape(onlySelectedShape)) {
+					if (this.shouldStartEditingShape(onlySelectedShape)) {
 						this.startEditingShape(onlySelectedShape, info, true /* select all */)
 					}
 				}
@@ -324,7 +321,7 @@ export class Idle extends StateNode {
 				}
 
 				// If the shape can edit, then begin editing
-				if (this.editor.canEditShape(shape)) {
+				if (this.shouldStartEditingShape(shape)) {
 					this.startEditingShape(shape, info, true /* select all */)
 				} else {
 					// If the shape's double click handler has not created a change,
@@ -346,7 +343,7 @@ export class Idle extends StateNode {
 				} else {
 					// If the shape's double click handler has not created a change,
 					// and if the shape can edit, then begin editing the shape.
-					if (this.editor.canEditShape(shape)) {
+					if (this.shouldStartEditingShape(shape)) {
 						this.startEditingShape(shape, info, true /* select all */)
 					}
 				}
@@ -359,9 +356,9 @@ export class Idle extends StateNode {
 			case 'canvas': {
 				const hoveredShape = this.editor.getHoveredShape()
 				const hitShape =
-					hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
+					hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 						? hoveredShape
-						: this.editor.getShapeAtPoint(this.editor.inputs.getCurrentPagePoint(), {
+						: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
 								margin: this.editor.options.hitTestMargin / this.editor.getZoomLevel(),
 								hitInside: false,
 								hitLabels: true,
@@ -381,7 +378,9 @@ export class Idle extends StateNode {
 
 				const selectedShapeIds = this.editor.getSelectedShapeIds()
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
-				const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+				const {
+					inputs: { currentPagePoint },
+				} = this.editor
 
 				if (
 					selectedShapeIds.length > 1 ||
@@ -474,7 +473,7 @@ export class Idle extends StateNode {
 					// If it's a note shape, then edit on type
 					this.editor.isShapeOfType(onlySelectedShape, 'note') &&
 					// If it's not locked or anything
-					this.editor.canEditShape(onlySelectedShape)
+					this.shouldStartEditingShape(onlySelectedShape)
 				) {
 					this.startEditingShape(
 						onlySelectedShape,
@@ -526,7 +525,9 @@ export class Idle extends StateNode {
 				const selectedShapes = this.editor.getSelectedShapes()
 
 				// On enter, if every selected shape is a group, then select all of the children of the groups
-				if (selectedShapes.every((shape) => this.editor.isShapeOfType(shape, 'group'))) {
+				if (
+					selectedShapes.every((shape) => this.editor.isShapeOfType<TLGroupShape>(shape, 'group'))
+				) {
 					this.editor.setSelectedShapes(
 						selectedShapes.flatMap((shape) => this.editor.getSortedChildIdsForParent(shape.id))
 					)
@@ -535,10 +536,7 @@ export class Idle extends StateNode {
 
 				// If the only selected shape is editable, then begin editing it
 				const onlySelectedShape = this.editor.getOnlySelectedShape()
-				if (
-					onlySelectedShape &&
-					this.editor.canEditShape(onlySelectedShape, { type: 'press_enter' })
-				) {
+				if (onlySelectedShape && this.shouldStartEditingShape(onlySelectedShape)) {
 					this.startEditingShape(
 						onlySelectedShape,
 						{
@@ -552,7 +550,7 @@ export class Idle extends StateNode {
 				}
 
 				// If the only selected shape is croppable, then begin cropping it
-				if (this.editor.canCropShape(onlySelectedShape)) {
+				if (getShouldEnterCropMode(this.editor)) {
 					this.parent.transition('crop', info)
 				}
 				break
@@ -567,18 +565,23 @@ export class Idle extends StateNode {
 		}
 	}
 
+	private shouldStartEditingShape(
+		shape: TLShape | null = this.editor.getOnlySelectedShape()
+	): boolean {
+		if (!shape) return false
+		if (this.editor.isShapeOrAncestorLocked(shape) && shape.type !== 'embed') return false
+		if (!this.canInteractWithShapeInReadOnly(shape)) return false
+		return this.editor.getShapeUtil(shape).canEdit(shape)
+	}
+
 	private startEditingShape(
 		shape: TLShape,
 		info: TLClickEventInfo | TLKeyboardEventInfo,
 		shouldSelectAll?: boolean
 	) {
-		const { editor } = this
+		if (this.editor.isShapeOrAncestorLocked(shape) && shape.type !== 'embed') return
 		this.editor.markHistoryStoppingPoint('editing shape')
-		if (hasRichText(shape)) {
-			startEditingShapeWithRichText(editor, shape, { selectAll: shouldSelectAll })
-		} else {
-			editor.setEditingShape(shape)
-		}
+		startEditingShapeWithLabel(this.editor, shape, shouldSelectAll)
 		this.parent.transition('editing_shape', info)
 	}
 
@@ -598,10 +601,10 @@ export class Idle extends StateNode {
 
 		const id = createShapeId()
 
-		const { x, y } = this.editor.inputs.getCurrentPagePoint()
+		const { x, y } = this.editor.inputs.currentPagePoint
 
 		// Allow this to trigger the max shapes reached alert
-		this.editor.createShapes([
+		this.editor.createShapes<TLTextShape>([
 			{
 				id,
 				type: 'text',
@@ -617,9 +620,16 @@ export class Idle extends StateNode {
 		const shape = this.editor.getShape(id)
 		if (!shape) return
 
-		if (!this.editor.canEditShape(shape)) return
+		const util = this.editor.getShapeUtil(shape)
+		if (this.editor.getIsReadonly()) {
+			if (!util.canEditInReadonly(shape)) {
+				return
+			}
+		}
 
-		startEditingShapeWithRichText(this.editor, id, { info })
+		this.editor.setEditingShape(id)
+		this.editor.select(id)
+		this.parent.transition('editing_shape', info)
 	}
 
 	private nudgeSelectedShapes(ephemeral = false) {
@@ -659,6 +669,13 @@ export class Idle extends StateNode {
 		this.editor.nudgeShapes(selectedShapeIds, delta.mul(step))
 		kickoutOccludedShapes(this.editor, selectedShapeIds)
 	}
+
+	private canInteractWithShapeInReadOnly(shape: TLShape) {
+		if (!this.editor.getIsReadonly()) return true
+		const util = this.editor.getShapeUtil(shape)
+		if (util.canEditInReadonly(shape)) return true
+		return false
+	}
 }
 
 export const MAJOR_NUDGE_FACTOR = 10

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

@@ -11,7 +11,6 @@ import {
 	getArrowBodyGeometry,
 	getArrowLabelDefaultPosition,
 } from '../../../shapes/arrow/arrowLabel'
-import { startEditingShapeWithRichText } from '../selectHelpers'
 
 export class PointingArrowLabel extends StateNode {
 	static override id = 'pointing_arrow_label'
@@ -55,7 +54,7 @@ export class PointingArrowLabel extends StateNode {
 		if (!labelGeometry) {
 			throw Error(`Expected to find an arrow label geometry for shape: ${shape.id}`)
 		}
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const { currentPagePoint } = this.editor.inputs
 		const pointInShapeSpace = this.editor.getPointInShapeSpace(shape, currentPagePoint)
 
 		this._labelDragOffset = Vec.Sub(labelGeometry.center, pointInShapeSpace)
@@ -82,7 +81,7 @@ export class PointingArrowLabel extends StateNode {
 	private _labelDragOffset = new Vec(0, 0)
 
 	override onPointerMove() {
-		const isDragging = this.editor.inputs.getIsDragging()
+		const { isDragging } = this.editor.inputs
 		if (!isDragging) return
 
 		if (this.didCtrlOnEnter) {
@@ -98,7 +97,7 @@ export class PointingArrowLabel extends StateNode {
 		const transform = this.editor.getShapePageTransform(shape.id)
 
 		const pointInShapeSpace = this.editor
-			.getPointInShapeSpace(shape, this.editor.inputs.getCurrentPagePoint())
+			.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)
 			.add(this._labelDragOffset)
 
 		const defaultLabelPosition = getArrowLabelDefaultPosition(this.editor, shape)
@@ -125,7 +124,7 @@ export class PointingArrowLabel extends StateNode {
 		}
 
 		this.didDrag = true
-		this.editor.updateShape({
+		this.editor.updateShape<TLArrowShape>({
 			id: shape.id,
 			type: shape.type,
 			props: { labelPosition: nextLabelPosition },
@@ -138,8 +137,10 @@ export class PointingArrowLabel extends StateNode {
 
 		if (this.didDrag || !this.wasAlreadySelected) {
 			this.complete()
-		} else if (this.editor.canEditShape(shape)) {
-			startEditingShapeWithRichText(this.editor, shape.id)
+		} else if (!this.editor.getIsReadonly()) {
+			// Go into edit mode.
+			this.editor.setEditingShape(shape.id)
+			this.editor.setCurrentTool('select.editing_shape')
 		}
 	}
 

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

@@ -16,7 +16,7 @@ export class PointingCanvas extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			this.parent.transition('brushing', info)
 		}
 	}

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

@@ -1,4 +1,12 @@
-import { Editor, StateNode, TLHandle, TLNoteShape, TLPointerEventInfo, Vec } from '@tldraw/editor'
+import {
+	Editor,
+	StateNode,
+	TLArrowShape,
+	TLHandle,
+	TLNoteShape,
+	TLPointerEventInfo,
+	Vec,
+} from '@tldraw/editor'
 import { updateArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 import {
@@ -6,7 +14,7 @@ import {
 	getNoteAdjacentPositions,
 	getNoteShapeForAdjacentPosition,
 } from '../../../shapes/note/noteHelpers'
-import { startEditingShapeWithRichText } from '../selectHelpers'
+import { startEditingShapeWithLabel } from '../selectHelpers'
 
 export class PointingHandle extends StateNode {
 	static override id = 'pointing_handle'
@@ -21,7 +29,7 @@ export class PointingHandle extends StateNode {
 		this.didCtrlOnEnter = info.accelKey
 
 		const { shape } = info
-		if (this.editor.isShapeOfType(shape, 'arrow')) {
+		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
 			const initialBindings = getArrowBindings(this.editor, shape)
 			const currentBinding = initialBindings[info.handle.id as 'start' | 'end']
 			const oppositeBinding = initialBindings[info.handle.id === 'start' ? 'end' : 'start']
@@ -50,11 +58,11 @@ export class PointingHandle extends StateNode {
 	override onPointerUp() {
 		const { shape, handle } = this.info
 
-		if (this.editor.isShapeOfType(shape, 'note')) {
+		if (this.editor.isShapeOfType<TLNoteShape>(shape, 'note')) {
 			const { editor } = this
 			const nextNote = getNoteForAdjacentPosition(editor, shape, handle, false)
 			if (nextNote) {
-				startEditingShapeWithRichText(editor, nextNote, { selectAll: true })
+				startEditingShapeWithLabel(editor, nextNote, true /* selectAll */)
 				return
 			}
 		}
@@ -64,7 +72,7 @@ export class PointingHandle extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		const { editor } = this
-		if (editor.inputs.getIsDragging()) {
+		if (editor.inputs.isDragging) {
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {
@@ -82,12 +90,12 @@ export class PointingHandle extends StateNode {
 		if (editor.getIsReadonly()) return
 		const { shape, handle } = this.info
 
-		if (editor.isShapeOfType(shape, 'note')) {
+		if (editor.isShapeOfType<TLNoteShape>(shape, 'note')) {
 			const nextNote = getNoteForAdjacentPosition(editor, shape, handle, true)
 			if (nextNote) {
 				// Center the shape on the current pointer
 				const centeredOnPointer = editor
-					.getPointInParentSpace(nextNote, editor.inputs.getOriginPagePoint())
+					.getPointInParentSpace(nextNote, editor.inputs.originPagePoint)
 					.sub(Vec.Rot(NOTE_CENTER_OFFSET.clone().mul(shape.props.scale), nextNote.rotation))
 				editor.updateShape({ ...nextNote, x: centeredOnPointer.x, y: centeredOnPointer.y })
 
@@ -103,7 +111,7 @@ export class PointingHandle extends StateNode {
 						isCreating: true,
 						onCreate: () => {
 							// When we're done, start editing it
-							startEditingShapeWithRichText(editor, nextNote, { selectAll: true })
+							startEditingShapeWithLabel(editor, nextNote, true /* selectAll */)
 						},
 					})
 				return

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

@@ -47,7 +47,7 @@ export class PointingResizeHandle extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			this.startResizing()
 		}
 	}

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

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

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

@@ -1,4 +1,4 @@
-import { StateNode, TLClickEventInfo, TLPointerEventInfo } from '@tldraw/editor'
+import { StateNode, TLClickEventInfo, TLGroupShape, TLPointerEventInfo } from '@tldraw/editor'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
 
 export class PointingSelection extends StateNode {
@@ -18,7 +18,7 @@ export class PointingSelection extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			this.startTranslating(info)
 		}
 	}
@@ -35,9 +35,9 @@ export class PointingSelection extends StateNode {
 	override onDoubleClick?(info: TLClickEventInfo) {
 		const hoveredShape = this.editor.getHoveredShape()
 		const hitShape =
-			hoveredShape && !this.editor.isShapeOfType(hoveredShape, 'group')
+			hoveredShape && !this.editor.isShapeOfType<TLGroupShape>(hoveredShape, 'group')
 				? hoveredShape
-				: this.editor.getShapeAtPoint(this.editor.inputs.getCurrentPagePoint(), {
+				: this.editor.getShapeAtPoint(this.editor.inputs.currentPagePoint, {
 						hitInside: true,
 						margin: 0,
 						renderingOnly: true,