tldraw 4.3.0-canary.9c474ef3fad5 → 4.3.0-canary.a2419250444e

package/src/lib/shapes/highlight/HighlightShapeUtil.test.ts

@@ -0,0 +1,146 @@
+import { createShapeId, TLHighlightShape } from '@tldraw/editor'
+import { TestEditor } from '../../../test/TestEditor'
+import { createDrawSegments, pointsToBase64 } from '../../utils/test-helpers'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe('HighlightShapeUtil dot detection', () => {
+	const shapeId = createShapeId('test-highlight')
+
+	function createHighlightShape(segments: TLHighlightShape['props']['segments']): TLHighlightShape {
+		editor.createShapes([
+			{
+				id: shapeId,
+				type: 'highlight',
+				props: { segments },
+			},
+		])
+		return editor.getShape(shapeId) as TLHighlightShape
+	}
+
+	describe('getIsDot behavior via hideResizeHandles', () => {
+		it('treats a shape with one segment and zero points as a dot', () => {
+			const shape = createHighlightShape([{ type: 'free', points: '' }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and one point as a dot', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and two points as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with one segment and many points as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+						{ x: 20, y: 5, z: 0.5 },
+						{ x: 30, y: 15, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with multiple segments as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([[{ x: 0, y: 0, z: 0.5 }], [{ x: 10, y: 10, z: 0.5 }]])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+	})
+
+	describe('hideRotateHandle mirrors hideResizeHandles for dots', () => {
+		it('hides rotate handle for dots', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideRotateHandle(shape)).toBe(true)
+		})
+
+		it('shows rotate handle for non-dots', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideRotateHandle(shape)).toBe(false)
+		})
+	})
+
+	describe('hideSelectionBoundsFg mirrors hideResizeHandles for dots', () => {
+		it('hides selection bounds for dots', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(true)
+		})
+
+		it('shows selection bounds for non-dots', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(false)
+		})
+	})
+
+	describe('base64 encoding boundary conditions', () => {
+		it('correctly handles the boundary at exactly 16 base64 characters (2 points)', () => {
+			// Each point is 8 base64 characters (3 Float16s = 6 bytes = 8 base64 chars)
+			// 2 points = 16 characters, which should NOT be a dot
+			const twoPointsBase64 = pointsToBase64([
+				{ x: 0, y: 0, z: 0.5 },
+				{ x: 1, y: 1, z: 0.5 },
+			])
+			expect(twoPointsBase64.length).toBe(16)
+
+			const shape = createHighlightShape([{ type: 'free', points: twoPointsBase64 }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('correctly handles the boundary at exactly 8 base64 characters (1 point)', () => {
+			// 1 point = 8 characters, which should be a dot
+			const onePointBase64 = pointsToBase64([{ x: 0, y: 0, z: 0.5 }])
+			expect(onePointBase64.length).toBe(8)
+
+			const shape = createHighlightShape([{ type: 'free', points: onePointBase64 }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+	})
+})

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -5,7 +5,6 @@ import {
 	Polygon2d,
 	SVGContainer,
 	ShapeUtil,
-	TLDrawShapeSegment,
 	TLHighlightShape,
 	TLHighlightShapeProps,
 	TLResizeInfo,
@@ -19,7 +18,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 
-import { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'
+import { getHighlightFreehandSettings, getPointsFromDrawSegments } from '../draw/getPath'
 import { FONT_SIZES } from '../shared/default-shape-constants'
 import { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'
 import { getStrokePoints } from '../shared/freehand/getStrokePoints'
@@ -70,6 +69,8 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 			isComplete: false,
 			isPen: false,
 			scale: 1,
+			scaleX: 1,
+			scaleY: 1,
 		}
 	}
 
@@ -130,7 +131,11 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 		const strokeWidth = getStrokeWidth(shape)
 
 		const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid)
-		const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+		const allPointsFromSegments = getPointsFromDrawSegments(
+			shape.props.segments,
+			shape.props.scaleX,
+			shape.props.scaleY
+		)
 
 		let strokePath
 		if (strokePoints.length < 2) {
@@ -177,24 +182,10 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 	override onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>) {
 		const { scaleX, scaleY } = info
 
-		const newSegments: TLDrawShapeSegment[] = []
-
-		for (const segment of shape.props.segments) {
-			newSegments.push({
-				...segment,
-				points: segment.points.map(({ x, y, z }) => {
-					return {
-						x: scaleX * x,
-						y: scaleY * y,
-						z,
-					}
-				}),
-			})
-		}
-
 		return {
 			props: {
-				segments: newSegments,
+				scaleX: scaleX * shape.props.scaleX,
+				scaleY: scaleY * shape.props.scaleY,
 			},
 		}
 	}
@@ -231,7 +222,11 @@ function getHighlightStrokePoints(
 	strokeWidth: number,
 	forceSolid: boolean
 ) {
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 	const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'
 
 	let sw = strokeWidth
@@ -254,7 +249,9 @@ function getStrokeWidth(shape: TLHighlightShape) {
 }
 
 function getIsDot(shape: TLHighlightShape) {
-	return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2
+	// Each point is 8 base64 characters (3 Float16s = 6 bytes = 8 base64 chars)
+	// Check if we have less than 2 points without decoding
+	return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 16
 }
 
 function HighlightRenderer({
@@ -270,7 +267,11 @@ function HighlightRenderer({
 }) {
 	const theme = useDefaultColorTheme()
 
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 
 	let sw = strokeWidth
 	if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
@@ -287,7 +288,7 @@ function HighlightRenderer({
 	const solidStrokePath =
 		strokePoints.length > 1
 			? getSvgPathFromStrokePoints(strokePoints, false)
-			: getShapeDot(shape.props.segments[0].points[0])
+			: getShapeDot(allPointsFromSegments[0])
 
 	const colorSpace = useColorSpace()
 

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

@@ -23,14 +23,14 @@ export class Pointing extends StateNode {
 
 	override onEnter(info: { shapeId?: TLShapeId }) {
 		const { inputs } = this.editor
-		const { currentPagePoint } = inputs
+		const currentPagePoint = inputs.getCurrentPagePoint()
 
 		this.markId = undefined
 
 		// Previously created line shape that we might be extending
 		const shape = info.shapeId && this.editor.getShape<TLLineShape>(info.shapeId)
 
-		if (shape && inputs.shiftKey) {
+		if (shape && inputs.getShiftKey()) {
 			// Extending a previous shape
 			this.markId = this.editor.markHistoryStoppingPoint(`creating_line:${shape.id}`)
 			this.shape = shape
@@ -114,7 +114,7 @@ export class Pointing extends StateNode {
 	override onPointerMove() {
 		if (!this.shape) return
 
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			const handles = this.editor.getShapeHandles(this.shape)
 			if (!handles) {
 				if (this.markId) this.editor.bailToMark(this.markId)

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -32,7 +32,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { useCallback, useContext } from 'react'
-import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
+import { startEditingShapeWithRichText } from '../../tools/SelectTool/selectHelpers'
 import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
@@ -536,7 +536,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				const newNote = getNoteShapeForAdjacentPosition(editor, shape, adjacentCenter, pageRotation)
 
 				if (newNote) {
-					startEditingShapeWithLabel(editor, newNote, true /* selectAll */)
+					startEditingShapeWithRichText(editor, newNote, { selectAll: true })
 				}
 			}
 		},

package/src/lib/shapes/note/noteCloning.test.ts

@@ -30,7 +30,7 @@ function testCloneHandles(x: number, y: number, rotation: number) {
 		const handleInPageSpace = editor.getShapePageTransform(shape).applyToPoint(handle)
 		editor.select(shape.id)
 		editor.pointerMove(handleInPageSpace.x, handleInPageSpace.y)
-		expect(editor.inputs.currentPagePoint).toMatchObject({
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({
 			x: handleInPageSpace.x,
 			y: handleInPageSpace.y,
 		})
@@ -99,6 +99,7 @@ function testDragCloneHandles(x: number, y: number, rotation: number) {
 		editor.expectToBeIn('select.pointing_handle')
 
 		editor.pointerMove(handleInPageSpace.x + 30, handleInPageSpace.y + 30)
+		editor.forceTick()
 
 		editor.expectToBeIn('select.translating')
 
@@ -205,6 +206,7 @@ it('Creates an adjacent note when dragging the clone handle', () => {
 	editor.expectToBeIn('select.pointing_handle')
 
 	editor.pointerMove(handle.x + 30, handle.y + 30)
+	editor.forceTick()
 
 	const newShape = editor.getLastCreatedShape()
 

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

@@ -9,6 +9,7 @@ import {
 	maybeSnapToGrid,
 } from '@tldraw/editor'
 
+import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 import {
 	NOTE_ADJACENT_POSITION_SNAP_RADIUS,
 	getAvailableNoteAdjacentPositions,
@@ -32,7 +33,7 @@ export class Pointing extends StateNode {
 		this.markId = editor.markHistoryStoppingPoint(`creating_note:${id}`)
 
 		// Check for note pits; if the pointer is close to one, place the note centered on the pit
-		const center = this.editor.inputs.originPagePoint.clone()
+		const center = this.editor.inputs.getOriginPagePoint().clone()
 		const offset = getNoteShapeAdjacentPositionOffset(
 			this.editor,
 			center,
@@ -52,7 +53,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.editor.setCurrentTool('select.translating', {
 				...info,
 				target: 'shape',
@@ -61,8 +62,7 @@ export class Pointing extends StateNode {
 				isCreating: true,
 				creatingMarkId: this.markId,
 				onCreate: () => {
-					this.editor.setEditingShape(this.shape.id)
-					this.editor.setCurrentTool('select.editing_shape')
+					startEditingShapeWithRichText(this.editor, this.shape.id)
 				},
 			})
 		}
@@ -88,12 +88,7 @@ export class Pointing extends StateNode {
 		if (this.editor.getInstanceState().isToolLocked) {
 			this.parent.transition('idle')
 		} else {
-			this.editor.setEditingShape(this.shape.id)
-			this.editor.setCurrentTool('select.editing_shape', {
-				...this.info,
-				target: 'shape',
-				shape: this.shape,
-			})
+			startEditingShapeWithRichText(this.editor, this.shape.id, { info: this.info })
 		}
 	}
 

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -11,7 +11,7 @@ export function HyperlinkButton({ url }: { url: string }) {
 	const hideButton = useEfficientZoomThreshold()
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
+			if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -97,7 +97,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 		'isDragging',
 		() => {
 			editor.getInstanceState()
-			isDragging.current = editor.inputs.isDragging
+			isDragging.current = editor.inputs.getIsDragging()
 		},
 		[editor]
 	)

package/src/lib/shapes/shared/interpolate-props.ts

@@ -1,4 +1,4 @@
-import { TLDrawShapeSegment, VecModel, lerp } from '@tldraw/editor'
+import { TLDrawShapeSegment, VecModel, b64Vecs, lerp } from '@tldraw/editor'
 
 /** @public */
 export const interpolateSegments = (
@@ -10,8 +10,8 @@ export const interpolateSegments = (
 	const endPoints: VecModel[] = []
 
 	// Extract all points from startSegments and endSegments
-	startSegments.forEach((segment) => startPoints.push(...segment.points))
-	endSegments.forEach((segment) => endPoints.push(...segment.points))
+	startSegments.forEach((segment) => startPoints.push(...b64Vecs.decodePoints(segment.points)))
+	endSegments.forEach((segment) => endPoints.push(...b64Vecs.decodePoints(segment.points)))
 
 	const maxLength = Math.max(startPoints.length, endPoints.length)
 	const pointsToUseStart: VecModel[] = []
@@ -39,7 +39,7 @@ export const interpolateSegments = (
 	return [
 		{
 			type: 'free',
-			points: interpolatedPoints,
+			points: b64Vecs.encodePoints(interpolatedPoints),
 		},
 	]
 }

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

@@ -183,6 +183,11 @@ 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/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/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)
 	}