tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

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

@@ -1,6 +1,7 @@
 import {
 	Box,
 	DefaultFontFamilies,
+	ExtractShapeByProps,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
 	TLDefaultHorizontalAlignStyle,
@@ -14,6 +15,7 @@ import {
 	useReactor,
 	useValue,
 } from '@tldraw/editor'
+import classNames from 'classnames'
 import React, { useMemo } from 'react'
 import { renderHtmlFromRichText } from '../../utils/text/richText'
 import { RichTextArea } from '../text/RichTextArea'
@@ -24,7 +26,7 @@ import { useEditableRichText } from './useEditableRichText'
 /** @public */
 export interface RichTextLabelProps {
 	shapeId: TLShapeId
-	type: string
+	type: ExtractShapeByProps<{ richText: TLRichText }>['type']
 	font: TLDefaultFontStyle
 	fontSize: number
 	lineHeight: number
@@ -43,6 +45,7 @@ export interface RichTextLabelProps {
 	textHeight?: number
 	padding?: number
 	hasCustomTabBehavior?: boolean
+	showTextOutline?: boolean
 }
 
 /**
@@ -71,6 +74,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	textWidth,
 	textHeight,
 	hasCustomTabBehavior,
+	showTextOutline = true,
 }: RichTextLabelProps) {
 	const editor = useEditor()
 	const isDragging = React.useRef(false)
@@ -93,7 +97,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 		'isDragging',
 		() => {
 			editor.getInstanceState()
-			isDragging.current = editor.inputs.isDragging
+			isDragging.current = editor.inputs.getIsDragging()
 		},
 		[editor]
 	)
@@ -128,7 +132,10 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	const cssPrefix = classNamePrefix || 'tl-text'
 	return (
 		<div
-			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
+			className={classNames(
+				`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,
+				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+			)}
 			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
@@ -258,7 +265,10 @@ export function RichTextSVG({
 			y={bounds.minY}
 			width={bounds.w}
 			height={bounds.h}
-			className="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+			className={classNames(
+				'tl-export-embed-styles tl-rich-text tl-rich-text-svg',
+				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+			)}
 		>
 			<div style={wrapperStyle}>
 				<div dangerouslySetInnerHTML={{ __html: html }} style={style} />

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

@@ -50,10 +50,10 @@ export const ShapeFill = React.memo(function ShapeFill({
 export function PatternFill({ d, color, theme }: ShapeFillProps) {
 	const editor = useEditor()
 	const svgExport = useSvgExportContext()
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const getHashPatternZoomName = useGetHashPatternZoomName()
 
-	const teenyTiny = editor.getZoomLevel() <= 0.18
+	const teenyTiny = zoomLevel <= 0.18
 
 	return (
 		<>

package/src/lib/shapes/shared/crop.ts

@@ -361,6 +361,7 @@ export function getCropBox<T extends ShapeWithCrop>(
 		x: newPoint.x,
 		y: newPoint.y,
 		props: {
+			...shape.props,
 			w: tempBox.w,
 			h: tempBox.h,
 			crop: newCrop,

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.path)))
+	endSegments.forEach((segment) => endPoints.push(...b64Vecs.decodePoints(segment.path)))
 
 	const maxLength = Math.max(startPoints.length, endPoints.length)
 	const pointsToUseStart: VecModel[] = []
@@ -39,7 +39,7 @@ export const interpolateSegments = (
 	return [
 		{
 			type: 'free',
-			points: interpolatedPoints,
+			path: b64Vecs.encodePoints(interpolatedPoints),
 		},
 	]
 }

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -1,7 +1,7 @@
 import {
 	Editor,
+	ExtractShapeByProps,
 	TLShapeId,
-	TLUnknownShape,
 	getPointerInfo,
 	noop,
 	preventDefault,
@@ -13,7 +13,11 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import { TextHelpers } from './TextHelpers'
 
 /** @public */
-export function useEditablePlainText(shapeId: TLShapeId, type: string, text?: string) {
+export function useEditablePlainText(
+	shapeId: TLShapeId,
+	type: ExtractShapeByProps<{ text: string }>['type'],
+	text?: string
+) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -75,7 +79,7 @@ export function useEditablePlainText(shapeId: TLShapeId, type: string, text?: st
 			if (editor.getEditingShapeId() !== shapeId) return
 
 			const normalizedPlaintext = TextHelpers.normalizeText(plaintext || '')
-			editor.updateShape<TLUnknownShape & { props: { text: string } }>({
+			editor.updateShape({
 				id: shapeId,
 				type,
 				props: { text: normalizedPlaintext },

package/src/lib/shapes/shared/useEditableRichText.ts

@@ -1,10 +1,14 @@
-import { TLRichText, TLShapeId, TLUnknownShape, isAccelKey, useEditor } from '@tldraw/editor'
+import { ExtractShapeByProps, TLRichText, TLShapeId, isAccelKey, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef } from 'react'
 import { isEmptyRichText } from '../../utils/text/richText'
 import { useEditableTextCommon } from './useEditablePlainText'
 
 /** @public */
-export function useEditableRichText(shapeId: TLShapeId, type: string, richText?: TLRichText) {
+export function useEditableRichText(
+	shapeId: TLShapeId,
+	type: ExtractShapeByProps<{ richText: TLRichText }>['type'],
+	richText?: TLRichText
+) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -39,7 +43,7 @@ export function useEditableRichText(shapeId: TLShapeId, type: string, richText?:
 		({ richText }: { richText: TLRichText }) => {
 			if (editor.getEditingShapeId() !== shapeId) return
 
-			editor.updateShape<TLUnknownShape & { props: { richText: TLRichText } }>({
+			editor.updateShape({
 				id: shapeId,
 				type,
 				props: { richText },

package/src/lib/shapes/shared/useEfficientZoomThreshold.ts

@@ -0,0 +1,10 @@
+import { useEditor, useValue } from '@tldraw/editor'
+
+/** Returns true when zoomed out far enough that shapes should render in a simplified "solid" style. */
+export function useEfficientZoomThreshold(threshold = 0.25) {
+	const editor = useEditor()
+	return useValue('efficient zoom threshold', () => editor.getEfficientZoomLevel() < threshold, [
+		editor,
+		threshold,
+	])
+}

package/src/lib/shapes/shared/useImageOrVideoAsset.ts

@@ -96,7 +96,7 @@ export function useImageOrVideoAsset({ shapeId, assetId, width }: UseImageOrVide
 
 			const screenScale = exportInfo
 				? exportInfo.scale * (width / asset.props.w)
-				: editor.getZoomLevel() * (width / asset.props.w)
+				: editor.getEfficientZoomLevel() * (width / asset.props.w)
 
 			function resolve(asset: TLImageAsset | TLVideoAsset, url: string | null) {
 				if (isCancelled) return // don't update if the hook has remounted

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/TextShapeTool.test.ts

@@ -1,4 +1,4 @@
-import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
+import { DefaultTextAlignStyle, 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<TLTextShape>([
+		editor.updateShapes([
 			{
 				...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<TLTextShape>([
+		editor.updateShapes([
 			{
 				...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<TLTextShape>([
+		editor.updateShapes([
 			{
 				...editor.getCurrentPageShapes()[0]!,
 				type: 'text',

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

@@ -43,6 +43,8 @@ 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 */
@@ -53,6 +55,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 	override options: TextShapeOptions = {
 		extraArrowHorizontalPadding: 10,
+		showTextOutline: true,
 	}
 
 	getDefaultProps(): TLTextShape['props'] {
@@ -140,6 +143,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
+				showTextOutline={this.options.showTextOutline}
 				style={{
 					transform: `scale(${scale})`,
 					transformOrigin: 'top left',
@@ -175,6 +179,7 @@ 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,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() {
@@ -124,7 +124,7 @@ export class Pointing extends StateNode {
 	}
 
 	private createTextShape(id: TLShapeId, point: Vec, autoSize: boolean, width: number) {
-		this.editor.createShape<TLTextShape>({
+		this.editor.createShape({
 			id,
 			type: 'text',
 			x: point.x,

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

@@ -1,7 +1,6 @@
 import {
+	Box,
 	StateNode,
-	TLFrameShape,
-	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	isAccelKey,
@@ -28,7 +27,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()
@@ -37,8 +36,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<TLGroupShape>(shape, 'group') ||
-						this.editor.isShapeOfType<TLFrameShape>(shape, 'frame')
+						this.editor.isShapeOfType(shape, 'group') ||
+						this.editor.isShapeOfType(shape, 'frame')
 					) {
 						const pointInShapeShape = this.editor.getPointInShapeSpace(shape, originPagePoint)
 						const geometry = this.editor.getShapeGeometry(shape)
@@ -60,7 +59,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)
 	}
 
@@ -99,10 +98,8 @@ export class Erasing extends StateNode {
 		const { editor, excludedShapeIds } = this
 		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()
 
@@ -110,8 +107,21 @@ export class Erasing extends StateNode {
 		const erasing = new Set<TLShapeId>(erasingShapeIds)
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
+		// Create bounds around line segment with margin
+		const lineBounds = Box.FromPoints([previousPagePoint, currentPagePoint]).expandBy(minDist)
+		const candidateIds = editor.getShapeIdsInsideBounds(lineBounds)
+
+		// Early return if no candidates - avoid expensive getCurrentPageRenderingShapesSorted()
+		if (candidateIds.size === 0) {
+			editor.setErasingShapes(Array.from(erasing))
+			return
+		}
+
+		const allShapes = editor.getCurrentPageRenderingShapesSorted()
+		const currentPageShapes = allShapes.filter((shape) => candidateIds.has(shape.id))
+
 		for (const shape of currentPageShapes) {
-			if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) continue
+			if (editor.isShapeOfType(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,11 +1,4 @@
-import {
-	isAccelKey,
-	StateNode,
-	TLFrameShape,
-	TLGroupShape,
-	TLPointerEventInfo,
-	TLShapeId,
-} from '@tldraw/editor'
+import { isAccelKey, StateNode, TLPointerEventInfo, TLShapeId } from '@tldraw/editor'
 
 export class Pointing extends StateNode {
 	static override id = 'pointing'
@@ -17,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>()
 
@@ -27,10 +18,7 @@ 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<TLGroupShape>(shape, 'group')
-			) {
+			if (this.editor.isShapeOrAncestorLocked(shape) || this.editor.isShapeOfType(shape, 'group')) {
 				continue
 			}
 
@@ -42,10 +30,7 @@ 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<TLFrameShape>(hitShape, 'frame') &&
-					erasing.size > initialSize
-				) {
+				if (this.editor.isShapeOfType(hitShape, 'frame') && erasing.size > initialSize) {
 					break
 				}
 
@@ -82,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

@@ -44,7 +44,7 @@ export class DragAndDropManager {
 
 		for (const shape of shapesToActuallyMove) {
 			const parent = editor.getShapeParent(shape)
-			if (parent && editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
+			if (parent && editor.isShapeOfType(parent, 'group')) {
 				if (!movingGroups.has(parent)) {
 					movingGroups.add(parent)
 				}
@@ -70,9 +70,7 @@ export class DragAndDropManager {
 			}
 			this.initialIndices.set(shape.id, shape.index)
 
-			const group = editor.findShapeAncestor(shape, (s) =>
-				editor.isShapeOfType<TLGroupShape>(s, 'group')
-			)
+			const group = editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, 'group'))
 			if (group) {
 				this.initialGroupIds.set(shape.id, group.id)
 			}
@@ -94,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
 		)
@@ -105,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)
@@ -149,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) {
@@ -158,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)