tldraw 4.2.2 → 4.2.3

package/src/lib/shapes/text/RichTextArea.tsx

@@ -183,11 +183,6 @@ export const RichTextArea = React.forwardRef<HTMLDivElement, TextAreaProps>(func
 					blockSeparator: '\n',
 				},
 			},
-			// N.B. We disable the text direction in the core list here,
-			// but we add it back in again in our own extensions list so that
-			// people can omit/override it if they want to.
-			enableCoreExtensions: { textDirection: false },
-			textDirection: 'auto',
 			...restOfTipTapConfig,
 			content: rInitialRichText.current as JSONContent,
 		})

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -1,4 +1,4 @@
-import { DefaultTextAlignStyle, toRichText } from '@tldraw/editor'
+import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TextShapeTool } from './TextShapeTool'
@@ -24,7 +24,7 @@ describe(TextShapeTool, () => {
 		editor.pointerUp()
 		editor.expectToBeIn('select.editing_shape')
 		// This comes from the component, not the state chart
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',
@@ -96,7 +96,7 @@ describe('When in idle state', () => {
 		editor.expectToBeIn('select.editing_shape')
 
 		// Update the text shape with some content
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',
@@ -133,7 +133,7 @@ describe('When in idle state', () => {
 		editor.expectToBeIn('select.editing_shape')
 
 		// Update the text shape with some content
-		editor.updateShapes([
+		editor.updateShapes<TLTextShape>([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -43,8 +43,6 @@ const sizeCache = createComputedCache(
 export interface TextShapeOptions {
 	/** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
 	extraArrowHorizontalPadding: number
-	/** Whether to show the outline of the text shape (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
-	showTextOutline: boolean
 }
 
 /** @public */
@@ -55,7 +53,6 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 	override options: TextShapeOptions = {
 		extraArrowHorizontalPadding: 10,
-		showTextOutline: true,
 	}
 
 	getDefaultProps(): TLTextShape['props'] {
@@ -143,7 +140,6 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
-				showTextOutline={this.options.showTextOutline}
 				style={{
 					transform: `scale(${scale})`,
 					transformOrigin: 'top left',
@@ -179,7 +175,6 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				labelColor={getColorValue(theme, shape.props.color, 'solid')}
 				bounds={exportBounds}
 				padding={0}
-				showTextOutline={this.options.showTextOutline}
 			/>
 		)
 	}

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

@@ -1,6 +1,5 @@
 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'
@@ -28,10 +27,21 @@ 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 (!this.editor.canEditShape(onlySelectedShape)) return
-			this.editor.setCurrentTool('select')
-			startEditingShapeWithRichText(this.editor, onlySelectedShape.id, { info })
+			// 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,
+				})
+			}
 		}
 	}
 

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

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

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

@@ -95,8 +95,7 @@ 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.getEfficientZoomLevel() >= 110
+	const showControls = editor.getShapeGeometry(shape).bounds.w * editor.getZoomLevel() >= 110
 	const isEditing = useIsEditing(shape.id)
 	const prefersReducedMotion = usePrefersReducedMotion()
 	const { Spinner } = useEditorComponents()

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

@@ -1,5 +1,7 @@
 import {
 	StateNode,
+	TLFrameShape,
+	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	isAccelKey,
@@ -26,7 +28,7 @@ export class Erasing extends StateNode {
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
-		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const { originPagePoint } = this.editor.inputs
 		this.excludedShapeIds = new Set(
 			this.editor
 				.getCurrentPageShapes()
@@ -35,8 +37,8 @@ export class Erasing extends StateNode {
 					if (this.editor.isShapeOrAncestorLocked(shape)) return true
 					//If the shape is a group or frame, check we're inside it when we start erasing
 					if (
-						this.editor.isShapeOfType(shape, 'group') ||
-						this.editor.isShapeOfType(shape, 'frame')
+						this.editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
+						this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')
 					) {
 						const pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint)
 						const geometry = this.editor.getShapeGeometry(shape)
@@ -58,7 +60,7 @@ export class Erasing extends StateNode {
 	}
 
 	private pushPointToScribble() {
-		const { x, y } = this.editor.inputs.getCurrentPagePoint()
+		const { x, y } = this.editor.inputs.currentPagePoint
 		this.editor.scribbles.addPoint(this.scribbleId, x, y)
 	}
 
@@ -98,8 +100,9 @@ export class Erasing extends StateNode {
 		const erasingShapeIds = editor.getErasingShapeIds()
 		const zoomLevel = editor.getZoomLevel()
 		const currentPageShapes = editor.getCurrentPageRenderingShapesSorted()
-		const currentPagePoint = editor.inputs.getCurrentPagePoint()
-		const previousPagePoint = editor.inputs.getPreviousPagePoint()
+		const {
+			inputs: { currentPagePoint, previousPagePoint },
+		} = editor
 
 		this.pushPointToScribble()
 
@@ -108,7 +111,7 @@ export class Erasing extends StateNode {
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
 		for (const shape of currentPageShapes) {
-			if (editor.isShapeOfType(shape, 'group')) continue
+			if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) continue
 
 			// Avoid testing masked shapes, unless the pointer is inside the mask
 			const pageMask = editor.getShapeMask(shape.id)

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

@@ -1,4 +1,11 @@
-import { isAccelKey, StateNode, TLPointerEventInfo, TLShapeId } from '@tldraw/editor'
+import {
+	isAccelKey,
+	StateNode,
+	TLFrameShape,
+	TLGroupShape,
+	TLPointerEventInfo,
+	TLShapeId,
+} from '@tldraw/editor'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -10,7 +17,9 @@ export class Pointing extends StateNode {
 
 		const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapesSorted = this.editor.getCurrentPageRenderingShapesSorted()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const {
+			inputs: { currentPagePoint },
+		} = this.editor
 
 		const erasing = new Set<TLShapeId>()
 
@@ -18,7 +27,10 @@ export class Pointing extends StateNode {
 
 		for (let n = currentPageShapesSorted.length, i = n - 1; i >= 0; i--) {
 			const shape = currentPageShapesSorted[i]
-			if (this.editor.isShapeOrAncestorLocked(shape) || this.editor.isShapeOfType(shape, 'group')) {
+			if (
+				this.editor.isShapeOrAncestorLocked(shape) ||
+				this.editor.isShapeOfType<TLGroupShape>(shape, 'group')
+			) {
 				continue
 			}
 
@@ -30,7 +42,10 @@ export class Pointing extends StateNode {
 			) {
 				const hitShape = this.editor.getOutermostSelectableShape(shape)
 				// If we've hit a frame after hitting any other shape, stop here
-				if (this.editor.isShapeOfType(hitShape, 'frame') && erasing.size > initialSize) {
+				if (
+					this.editor.isShapeOfType<TLFrameShape>(hitShape, 'frame') &&
+					erasing.size > initialSize
+				) {
 					break
 				}
 
@@ -67,7 +82,7 @@ export class Pointing extends StateNode {
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this._isHoldingAccelKey) return
 
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			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.getCurrentScreenPoint()
+			const { currentScreenPoint } = this.editor.inputs
 			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.getCurrentScreenPoint()
+			const { currentScreenPoint } = this.editor.inputs
 			this.editor.zoomOut(currentScreenPoint, {
 				animation: { duration: 320, easing: EASINGS.easeOutQuint },
 			})
@@ -33,7 +33,9 @@ export class HandTool extends StateNode {
 	override onQuadrupleClick(info: TLClickEventInfo) {
 		if (info.phase === 'settle') {
 			const zoomLevel = this.editor.getZoomLevel()
-			const currentScreenPoint = this.editor.inputs.getCurrentScreenPoint()
+			const {
+				inputs: { currentScreenPoint },
+			} = this.editor
 
 			if (zoomLevel === 1) {
 				this.editor.zoomToFit({ animation: { duration: 400, easing: EASINGS.easeOutQuint } })

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

@@ -28,8 +28,7 @@ export class Dragging extends StateNode {
 
 	private update() {
 		const { initialCamera, editor } = this
-		const currentScreenPoint = editor.inputs.getCurrentScreenPoint()
-		const originScreenPoint = editor.inputs.getOriginScreenPoint()
+		const { currentScreenPoint, originScreenPoint } = editor.inputs
 
 		const delta = Vec.Sub(currentScreenPoint, originScreenPoint).div(editor.getZoomLevel())
 		if (delta.len2() === 0) return
@@ -38,7 +37,7 @@ export class Dragging extends StateNode {
 
 	private complete() {
 		const { editor } = this
-		const pointerVelocity = editor.inputs.getPointerVelocity()
+		const { pointerVelocity } = editor.inputs
 
 		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.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			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.getCurrentPagePoint()
+		const { x, y } = this.editor.inputs.currentPagePoint
 		this.editor.scribbles.addPoint(this.scribbleId, x, y)
 	}
 

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

@@ -44,7 +44,7 @@ export class DragAndDropManager {
 
 		for (const shape of shapesToActuallyMove) {
 			const parent = editor.getShapeParent(shape)
-			if (parent && editor.isShapeOfType(parent, 'group')) {
+			if (parent && editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
 				if (!movingGroups.has(parent)) {
 					movingGroups.add(parent)
 				}
@@ -70,7 +70,9 @@ export class DragAndDropManager {
 			}
 			this.initialIndices.set(shape.id, shape.index)
 
-			const group = editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, 'group'))
+			const group = editor.findShapeAncestor(shape, (s) =>
+				editor.isShapeOfType<TLGroupShape>(s, 'group')
+			)
 			if (group) {
 				this.initialGroupIds.set(shape.id, group.id)
 			}
@@ -92,13 +94,10 @@ export class DragAndDropManager {
 		this.intervalTimerId = this.editor.timers.setInterval(
 			() => {
 				skip2of3FramesWhileMovingFast++
-				if (
-					skip2of3FramesWhileMovingFast % 3 &&
-					this.editor.inputs.getPointerVelocity().len() > 0.5
-				) {
+				if (skip2of3FramesWhileMovingFast % 3 && this.editor.inputs.pointerVelocity.len() > 0.5) {
 					return
 				}
-				this.updateDraggingShapes(editor.inputs.getCurrentPagePoint(), cb)
+				this.updateDraggingShapes(editor.inputs.currentPagePoint, cb)
 			},
 			movingShapes.length > 10 ? SLOW_POINTER_LAG_DURATION : FAST_POINTER_LAG_DURATION
 		)
@@ -106,10 +105,9 @@ export class DragAndDropManager {
 
 	dropShapes(shapes: TLShape[]) {
 		const { editor } = this
-		const currentPagePoint = editor.inputs.getCurrentPagePoint()
-		this.updateDraggingShapes(currentPagePoint)
+		this.updateDraggingShapes(editor.inputs.currentPagePoint)
 
-		const draggingOverShape = editor.getDraggingOverShape(currentPagePoint, shapes)
+		const draggingOverShape = editor.getDraggingOverShape(editor.inputs.currentPagePoint, shapes)
 
 		if (draggingOverShape) {
 			const util = editor.getShapeUtil(draggingOverShape)
@@ -151,9 +149,8 @@ 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 currentPagePoint = editor.inputs.getCurrentPagePoint()
-		const cursorDidMove = !this.prevPagePoint.equals(currentPagePoint)
-		this.prevPagePoint.setTo(currentPagePoint)
+		const cursorDidMove = !this.prevPagePoint.equals(editor.inputs.currentPagePoint)
+		this.prevPagePoint.setTo(editor.inputs.currentPagePoint)
 
 		editor.run(() => {
 			if (this.prevDraggingOverShape?.id === nextDraggingOverShape?.id) {
@@ -161,7 +158,7 @@ export class DragAndDropManager {
 					cursorDidMove &&
 					nextDraggingOverShape &&
 					isShapeId(nextDraggingOverShape.id) &&
-					!editor.inputs.getPreviousPagePoint().equals(currentPagePoint)
+					!editor.inputs.previousPagePoint.equals(editor.inputs.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

@@ -3,6 +3,8 @@ import {
 	Mat,
 	StateNode,
 	TLCancelEventInfo,
+	TLFrameShape,
+	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPageId,
 	TLPointerEventInfo,
@@ -31,7 +33,7 @@ export class Brushing extends StateNode {
 
 	override onEnter(info: TLPointerEventInfo & { target: 'canvas' }) {
 		const { editor } = this
-		const altKey = editor.inputs.getAltKey()
+		const { altKey } = editor.inputs
 
 		this.isWrapMode = editor.user.getIsWrapMode()
 
@@ -55,7 +57,9 @@ export class Brushing extends StateNode {
 			editor
 				.getCurrentPageShapes()
 				.filter(
-					(shape) => editor.isShapeOfType(shape, 'group') || editor.isShapeOrAncestorLocked(shape)
+					(shape) =>
+						editor.isShapeOfType<TLGroupShape>(shape, 'group') ||
+						editor.isShapeOrAncestorLocked(shape)
 				)
 				.map((shape) => shape.id)
 		)
@@ -96,7 +100,7 @@ export class Brushing extends StateNode {
 	}
 
 	override onKeyDown(info: TLKeyboardEventInfo) {
-		if (this.editor.inputs.getAltKey()) {
+		if (this.editor.inputs.altKey) {
 			this.parent.transition('scribble_brushing', info)
 		} else {
 			this.hitTestShapes()
@@ -114,10 +118,9 @@ export class Brushing extends StateNode {
 
 	private hitTestShapes() {
 		const { editor, excludedShapeIds, isWrapMode } = this
-		const originPagePoint = editor.inputs.getOriginPagePoint()
-		const currentPagePoint = editor.inputs.getCurrentPagePoint()
-		const shiftKey = editor.inputs.getShiftKey()
-		const ctrlKey = editor.inputs.getCtrlKey()
+		const {
+			inputs: { originPagePoint, currentPagePoint, shiftKey, ctrlKey },
+		} = editor
 
 		// 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 : [])
@@ -174,7 +177,7 @@ export class Brushing extends StateNode {
 
 			// If we're in wrap mode and the brush did not fully encloses the shape, it's a miss
 			// We also skip frames unless we've completely selected the frame.
-			if (isWrapping || editor.isShapeOfType(shape, 'frame')) {
+			if (isWrapping || editor.isShapeOfType<TLFrameShape>(shape, 'frame')) {
 				continue testAllShapes
 			}
 

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

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

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

@@ -2,6 +2,7 @@ import {
 	ShapeWithCrop,
 	StateNode,
 	TLClickEventInfo,
+	TLGroupShape,
 	TLKeyboardEventInfo,
 	TLPointerEventInfo,
 	Vec,
@@ -42,7 +43,7 @@ export class Idle extends StateNode {
 		switch (info.target) {
 			case 'canvas': {
 				const hitShape = getHitShapeOnCanvasPointerDown(this.editor)
-				if (hitShape && !this.editor.isShapeOfType(hitShape, 'group')) {
+				if (hitShape && !this.editor.isShapeOfType<TLGroupShape>(hitShape, 'group')) {
 					this.onPointerDown({
 						...info,
 						shape: hitShape,
@@ -112,7 +113,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.getShiftKey() || info.phase !== 'up') return
+		if (this.editor.inputs.shiftKey || info.phase !== 'up') return
 
 		const croppingShapeId = this.editor.getCroppingShapeId()
 		if (!croppingShapeId) return
@@ -190,7 +191,7 @@ export class Idle extends StateNode {
 				this.editor.markHistoryStoppingPoint('translate crop')
 			}
 
-			this.editor.updateShapes([partial])
+			this.editor.updateShapes<ShapeWithCrop>([partial])
 		}
 	}
 }

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.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			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.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			this.startCropping()
 		}
 	}

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

@@ -94,8 +94,7 @@ export class TranslatingCrop extends StateNode {
 
 		if (!shape) return
 
-		const originPagePoint = this.editor.inputs.getOriginPagePoint()
-		const currentPagePoint = this.editor.inputs.getCurrentPagePoint()
+		const { originPagePoint, currentPagePoint } = this.editor.inputs
 		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.getShiftKey()
+	const flatten: 'x' | 'y' | null = editor.inputs.shiftKey
 		? 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.getOriginPagePoint().clone()
+		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
 
 		this.editor.setCursor({ type: isCreating ? 'cross' : 'grabbing', rotation: 0 })
 
@@ -115,7 +115,7 @@ export class DraggingHandle extends StateNode {
 		}
 
 		// <!-- Only relevant to arrows
-		if (this.editor.isShapeOfType(shape, 'arrow')) {
+		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
 			const initialBinding = getArrowBindings(this.editor, shape)[info.handle.id as 'start' | 'end']
 
 			this.isPrecise = false
@@ -228,7 +228,7 @@ export class DraggingHandle extends StateNode {
 			}
 			const endChanges = util.onHandleDragEnd?.(shape, handleDragInfo)
 			if (endChanges) {
-				this.editor.updateShapes([{ ...endChanges, id: shape.id }])
+				this.editor.updateShapes([{ ...endChanges, id: shape.id, type: shape.type }])
 			}
 		}
 
@@ -284,12 +284,10 @@ export class DraggingHandle extends StateNode {
 		const { editor, shapeId, initialPagePoint } = this
 		const { initialHandle, initialPageRotation, initialAdjacentHandle } = this
 		const isSnapMode = this.editor.user.getIsSnapMode()
-		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 {
+			snaps,
+			inputs: { currentPagePoint, shiftKey, ctrlKey, altKey, pointerVelocity },
+		} = editor
 
 		const initial = this.info.shape
 
@@ -297,7 +295,7 @@ export class DraggingHandle extends StateNode {
 		if (!shape) return
 		const util = editor.getShapeUtil(shape)
 
-		const initialBinding = editor.isShapeOfType(shape, 'arrow')
+		const initialBinding = editor.isShapeOfType<TLArrowShape>(shape, 'arrow')
 			? getArrowBindings(editor, shape)[initialHandle.id as 'start' | 'end']
 			: undefined
 
@@ -354,7 +352,10 @@ export class DraggingHandle extends StateNode {
 		const next: TLShapePartial<any> = { id: shape.id, type: shape.type, ...changes }
 
 		// Arrows
-		if (initialHandle.type === 'vertex' && this.editor.isShapeOfType(shape, 'arrow')) {
+		if (
+			initialHandle.type === 'vertex' &&
+			this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')
+		) {
 			const bindingAfter = getArrowBindings(editor, shape)[initialHandle.id as 'start' | 'end']
 
 			if (bindingAfter) {