@tldraw/editor 4.3.0-next.f4772c19540d → 4.3.0

package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.test.ts

@@ -18,8 +18,56 @@ describe('EdgeScrollManager', () => {
 		}
 	>
 	let edgeScrollManager: EdgeScrollManager
+	let mockInputs: {
+		_currentScreenPoint: Vec
+		currentScreenPoint: Vec
+		getCurrentScreenPoint(): Vec
+		setCurrentScreenPoint(value: Vec): void
+		_isDragging: boolean
+		isDragging: boolean
+		getIsDragging(): boolean
+		setIsDragging(value: boolean): void
+		_isPanning: boolean
+		isPanning: boolean
+		getIsPanning(): boolean
+		setIsPanning(value: boolean): void
+	}
 
 	beforeEach(() => {
+		// Create a mock inputs object with writable properties and getters
+		mockInputs = {
+			_currentScreenPoint: new Vec(500, 300),
+			get currentScreenPoint() {
+				return this._currentScreenPoint
+			},
+			getCurrentScreenPoint() {
+				return this._currentScreenPoint
+			},
+			setCurrentScreenPoint(value: Vec) {
+				this._currentScreenPoint = value
+			},
+			_isDragging: true,
+			get isDragging() {
+				return this._isDragging
+			},
+			getIsDragging() {
+				return this._isDragging
+			},
+			setIsDragging(value: boolean) {
+				this._isDragging = value
+			},
+			_isPanning: false,
+			get isPanning() {
+				return this._isPanning
+			},
+			getIsPanning() {
+				return this._isPanning
+			},
+			setIsPanning(value: boolean) {
+				this._isPanning = value
+			},
+		}
+
 		editor = {
 			options: {
 				edgeScrollDelay: 200,
@@ -28,22 +76,15 @@ describe('EdgeScrollManager', () => {
 				edgeScrollDistance: 8,
 				coarsePointerWidth: 12,
 			},
-			inputs: {
-				currentScreenPoint: new Vec(500, 300),
-				isDragging: true,
-				isPanning: false,
-			},
+			inputs: mockInputs as unknown as Editor['inputs'],
 			user: {
 				getEdgeScrollSpeed: vi.fn(() => 1),
 			},
 			getViewportScreenBounds: vi.fn(() => new Box(0, 0, 1000, 600)),
-			getInstanceState: vi.fn(
-				() =>
-					({
-						isCoarsePointer: false,
-						insets: [false, false, false, false], // [top, right, bottom, left]
-					}) as any
-			),
+			getInstanceState: vi.fn(() => ({
+				isCoarsePointer: false,
+				insets: [false, false, false, false], // [top, right, bottom, left]
+			})),
 			getCameraOptions: vi.fn(() => ({
 				isLocked: false,
 				panSpeed: 1,
@@ -54,9 +95,17 @@ describe('EdgeScrollManager', () => {
 			getZoomLevel: vi.fn(() => 1),
 			getCamera: vi.fn(() => new Vec(0, 0, 1)),
 			setCamera: vi.fn(),
-		} as any
+		} as unknown as Mocked<
+			Editor & {
+				user: { getEdgeScrollSpeed: Mock }
+				getCamera: Mock
+				getCameraOptions: Mock
+				getZoomLevel: Mock
+				getViewportScreenBounds: Mock
+			}
+		>
 
-		edgeScrollManager = new EdgeScrollManager(editor as any)
+		edgeScrollManager = new EdgeScrollManager(editor)
 	})
 
 	afterEach(() => {
@@ -67,49 +116,45 @@ describe('EdgeScrollManager', () => {
 		it('should initialize with editor reference', () => {
 			expect(edgeScrollManager.editor).toBe(editor)
 		})
-
-		it('should initialize edge scrolling state as false', () => {
-			// Access private properties for testing
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(false)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(-1)
-		})
 	})
 
 	describe('basic edge scrolling behavior', () => {
 		it('should not trigger edge scrolling when pointer is in center', () => {
-			editor.inputs.currentScreenPoint = new Vec(500, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(500, 300))
 
 			edgeScrollManager.updateEdgeScrolling(16)
 
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(false)
 			expect(editor.setCamera).not.toHaveBeenCalled()
 		})
 
 		it('should start edge scrolling when pointer is near edge', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
+			// Should not scroll immediately due to delay
 			edgeScrollManager.updateEdgeScrolling(16)
+			expect(editor.setCamera).not.toHaveBeenCalled()
 
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(true)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(16)
+			// Should scroll after delay
+			edgeScrollManager.updateEdgeScrolling(200)
+			expect(editor.setCamera).toHaveBeenCalled()
 		})
 
 		it('should stop edge scrolling when pointer moves away from edge', () => {
-			// Start edge scrolling
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
-			edgeScrollManager.updateEdgeScrolling(16)
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(true)
+			// Start edge scrolling near edge
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
+			edgeScrollManager.updateEdgeScrolling(300)
+			expect(editor.setCamera).toHaveBeenCalled()
 
-			// Move pointer to center
-			editor.inputs.currentScreenPoint = new Vec(500, 300)
+			// Move pointer to center - should stop scrolling
+			editor.setCamera.mockClear()
+			mockInputs.setCurrentScreenPoint(new Vec(500, 300))
 			edgeScrollManager.updateEdgeScrolling(16)
 
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(false)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(0)
+			expect(editor.setCamera).not.toHaveBeenCalled()
 		})
 
 		it('should respect edge scroll delay', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			// First update - should not scroll yet due to delay
 			edgeScrollManager.updateEdgeScrolling(100)
@@ -123,7 +168,7 @@ describe('EdgeScrollManager', () => {
 
 	describe('edge proximity detection', () => {
 		it('should detect left edge proximity', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 			edgeScrollManager.updateEdgeScrolling(300) // Enough to trigger after delay
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -132,7 +177,7 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should detect right edge proximity', () => {
-			editor.inputs.currentScreenPoint = new Vec(995, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(995, 300))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -141,7 +186,7 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should detect top edge proximity', () => {
-			editor.inputs.currentScreenPoint = new Vec(500, 5)
+			mockInputs.setCurrentScreenPoint(new Vec(500, 5))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -150,7 +195,7 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should detect bottom edge proximity', () => {
-			editor.inputs.currentScreenPoint = new Vec(500, 595)
+			mockInputs.setCurrentScreenPoint(new Vec(500, 595))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -159,7 +204,7 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should handle corner proximity (both x and y)', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 5)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 5))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -172,11 +217,11 @@ describe('EdgeScrollManager', () => {
 	describe('coarse pointer handling', () => {
 		it('should account for coarse pointer width', () => {
 			editor.getInstanceState.mockReturnValue({
+				...editor.getInstanceState(),
 				isCoarsePointer: true,
 				insets: [false, false, false, false],
-			} as any)
-
-			editor.inputs.currentScreenPoint = new Vec(15, 300)
+			})
+			mockInputs.setCurrentScreenPoint(new Vec(15, 300))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -184,11 +229,11 @@ describe('EdgeScrollManager', () => {
 
 		it('should not trigger edge scrolling for fine pointer at same position', () => {
 			editor.getInstanceState.mockReturnValue({
+				...editor.getInstanceState(),
 				isCoarsePointer: false,
 				insets: [false, false, false, false],
-			} as any)
-
-			editor.inputs.currentScreenPoint = new Vec(15, 300)
+			})
+			mockInputs.setCurrentScreenPoint(new Vec(15, 300))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).not.toHaveBeenCalled()
@@ -197,8 +242,8 @@ describe('EdgeScrollManager', () => {
 
 	describe('camera movement conditions', () => {
 		it('should not move camera when not dragging', () => {
-			editor.inputs.isDragging = false
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			editor.inputs.setIsDragging(false)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -206,8 +251,8 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should not move camera when panning', () => {
-			editor.inputs.isPanning = true
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			editor.inputs.setIsPanning(true)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -222,7 +267,7 @@ describe('EdgeScrollManager', () => {
 				zoomSteps: [1],
 				wheelBehavior: 'pan' as const,
 			})
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -233,7 +278,7 @@ describe('EdgeScrollManager', () => {
 	describe('camera movement calculation', () => {
 		it('should calculate scroll speed based on user preference', () => {
 			editor.user.getEdgeScrollSpeed.mockReturnValue(2)
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -244,7 +289,7 @@ describe('EdgeScrollManager', () => {
 
 		it('should apply screen size factor for small screens', () => {
 			editor.getViewportScreenBounds.mockReturnValue(new Box(0, 0, 800, 600))
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -253,7 +298,7 @@ describe('EdgeScrollManager', () => {
 
 		it('should adjust scroll speed based on zoom level', () => {
 			editor.getZoomLevel.mockReturnValue(2)
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -266,7 +311,7 @@ describe('EdgeScrollManager', () => {
 		it('should add scroll delta to current camera position', () => {
 			const currentCamera = new Vec(100, 200, 1)
 			editor.getCamera.mockReturnValue(currentCamera)
-			editor.inputs.currentScreenPoint = new Vec(5, 5)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 5))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -280,14 +325,14 @@ describe('EdgeScrollManager', () => {
 
 	describe('proximity factor calculation', () => {
 		it('should return 0 when not near any edge', () => {
-			editor.inputs.currentScreenPoint = new Vec(500, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(500, 300))
 			edgeScrollManager.updateEdgeScrolling(16)
 
 			expect(editor.setCamera).not.toHaveBeenCalled()
 		})
 
 		it('should cap proximity factor at 1', () => {
-			editor.inputs.currentScreenPoint = new Vec(0, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(0, 300))
 			edgeScrollManager.updateEdgeScrolling(300)
 
 			expect(editor.setCamera).toHaveBeenCalled()
@@ -297,20 +342,20 @@ describe('EdgeScrollManager', () => {
 
 	describe('edge cases and error handling', () => {
 		it('should handle negative elapsed time', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			expect(() => edgeScrollManager.updateEdgeScrolling(-16)).not.toThrow()
 		})
 
 		it('should handle very large elapsed time', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			expect(() => edgeScrollManager.updateEdgeScrolling(100000)).not.toThrow()
 		})
 
 		it('should handle zero user edge scroll speed', () => {
 			editor.user.getEdgeScrollSpeed.mockReturnValue(0)
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
 
@@ -322,7 +367,7 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should handle extreme zoom levels', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			editor.getZoomLevel.mockReturnValue(0.01) // Very zoomed out
 			expect(() => edgeScrollManager.updateEdgeScrolling(300)).not.toThrow()
@@ -335,41 +380,46 @@ describe('EdgeScrollManager', () => {
 	describe('state transitions', () => {
 		it('should properly transition from not scrolling to scrolling', () => {
 			// Start with no edge scrolling
-			editor.inputs.currentScreenPoint = new Vec(500, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(500, 300))
 			edgeScrollManager.updateEdgeScrolling(16)
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(false)
+			expect(editor.setCamera).not.toHaveBeenCalled()
 
-			// Move to edge
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			// Move to edge - should start scrolling after delay
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 			edgeScrollManager.updateEdgeScrolling(16)
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(true)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(16)
+			expect(editor.setCamera).not.toHaveBeenCalled() // Not yet, due to delay
+
+			edgeScrollManager.updateEdgeScrolling(200)
+			expect(editor.setCamera).toHaveBeenCalled()
 		})
 
 		it('should accumulate edge scroll duration over multiple updates', () => {
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
+			// First update - not enough time
 			edgeScrollManager.updateEdgeScrolling(50)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(50)
+			expect(editor.setCamera).not.toHaveBeenCalled()
 
-			edgeScrollManager.updateEdgeScrolling(30)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(80)
+			// Second update - still not enough
+			edgeScrollManager.updateEdgeScrolling(50)
+			expect(editor.setCamera).not.toHaveBeenCalled()
 
-			edgeScrollManager.updateEdgeScrolling(25)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(105)
+			// Third update - now should trigger (50 + 50 + 101 = 201ms > 200ms delay)
+			edgeScrollManager.updateEdgeScrolling(101)
+			expect(editor.setCamera).toHaveBeenCalled()
 		})
 
 		it('should reset duration when stopping edge scroll', () => {
 			// Start edge scrolling
-			editor.inputs.currentScreenPoint = new Vec(5, 300)
-			edgeScrollManager.updateEdgeScrolling(100)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(100)
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
+			edgeScrollManager.updateEdgeScrolling(300)
+			expect(editor.setCamera).toHaveBeenCalled()
 
-			// Stop edge scrolling
-			editor.inputs.currentScreenPoint = new Vec(500, 300)
+			// Stop edge scrolling - move away
+			editor.setCamera.mockClear()
+			mockInputs.setCurrentScreenPoint(new Vec(500, 300))
 			edgeScrollManager.updateEdgeScrolling(16)
-			expect((edgeScrollManager as any)._isEdgeScrolling).toBe(false)
-			expect((edgeScrollManager as any)._edgeScrollDuration).toBe(0)
+			expect(editor.setCamera).not.toHaveBeenCalled()
 		})
 	})
 })

package/src/lib/editor/managers/EdgeScrollManager/EdgeScrollManager.ts

@@ -9,6 +9,10 @@ export class EdgeScrollManager {
 	private _isEdgeScrolling = false
 	private _edgeScrollDuration = -1
 
+	getIsEdgeScrolling() {
+		return this._isEdgeScrolling
+	}
+
 	/**
 	 * Update the camera position when the mouse is close to the edge of the screen.
 	 * Run this on every tick when in a state where edge scrolling is enabled.
@@ -81,11 +85,7 @@ export class EdgeScrollManager {
 
 	private getEdgeScroll() {
 		const { editor } = this
-		const {
-			inputs: {
-				currentScreenPoint: { x, y },
-			},
-		} = editor
+		const { x, y } = editor.inputs.getCurrentScreenPoint()
 		const screenBounds = editor.getViewportScreenBounds()
 
 		const {
@@ -107,7 +107,11 @@ export class EdgeScrollManager {
 	 */
 	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }) {
 		const { editor } = this
-		if (!editor.inputs.isDragging || editor.inputs.isPanning || editor.getCameraOptions().isLocked)
+		if (
+			!editor.inputs.getIsDragging() ||
+			editor.inputs.getIsPanning() ||
+			editor.getCameraOptions().isLocked
+		)
 			return
 
 		if (proximityFactor.x === 0 && proximityFactor.y === 0) return

package/src/lib/editor/managers/FontManager/FontManager.test.ts

@@ -1,4 +1,5 @@
-import { TLShape, TLShapeId, createShapeId } from '@tldraw/tlschema'
+import { TLParentId, TLShape, TLShapeId, createShapeId, toRichText } from '@tldraw/tlschema'
+import { IndexKey } from '@tldraw/utils'
 import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { FontManager, TLFontFace } from './FontManager'
@@ -41,12 +42,21 @@ describe('FontManager', () => {
 		x: 0,
 		y: 0,
 		rotation: 0,
-		index: 'a1' as any,
-		parentId: 'page:page' as any,
+		index: 'a1' as IndexKey,
+		parentId: 'page:page' as TLParentId,
 		opacity: 1,
 		isLocked: false,
 		meta: {},
-		props: {},
+		props: {
+			color: 'black',
+			size: 'xl',
+			font: 'serif',
+			textAlign: 'middle',
+			w: 100,
+			richText: toRichText('❤️'),
+			scale: 2,
+			autoSize: true,
+		},
 		typeName: 'shape' as const,
 	})