@tldraw/editor 5.1.0-next.d7c83ba698ae → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.1.0-next.d7c83ba698ae",
+  "version": "5.1.0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.1.0-next.d7c83ba698ae",
-    "@tldraw/state-react": "5.1.0-next.d7c83ba698ae",
-    "@tldraw/store": "5.1.0-next.d7c83ba698ae",
-    "@tldraw/tlschema": "5.1.0-next.d7c83ba698ae",
-    "@tldraw/utils": "5.1.0-next.d7c83ba698ae",
-    "@tldraw/validate": "5.1.0-next.d7c83ba698ae",
+    "@tldraw/state": "5.1.0",
+    "@tldraw/state-react": "5.1.0",
+    "@tldraw/store": "5.1.0",
+    "@tldraw/tlschema": "5.1.0",
+    "@tldraw/utils": "5.1.0",
+    "@tldraw/validate": "5.1.0",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/lib/editor/Editor.ts

@@ -416,6 +416,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		})
 
 		this.fonts = new FontManager(this, fontAssetUrls)
+		this.disposables.add(() => this.fonts.dispose())
 
 		this.inputs = new InputsManager(this)
 		this.performance = new PerformanceManager(this)
@@ -502,6 +503,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		// Overlay utils
 		this.overlays = new OverlayManager(this)
+		this.disposables.add(() => this.overlays.dispose())
 		if (overlayUtilConstructors) {
 			for (const Util of overlayUtilConstructors) {
 				const util = new Util(this)
@@ -10370,11 +10372,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	blur({ blurContainer = true } = {}): this {
 		if (!this.getIsFocused()) return this
-		if (blurContainer) {
-			this.focusManager.blur()
-		} else {
-			this.complete() // stop any interaction
-		}
+		this.focusManager.blur({ blurContainer })
 		this.updateInstanceState({ isFocused: false })
 		return this
 	}

package/src/lib/editor/derivations/notVisibleShapes.ts

@@ -1,6 +1,7 @@
 import { computed, isUninitialized } from '@tldraw/state'
-import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { TLShapeId } from '@tldraw/tlschema'
 import type { Editor } from '../Editor'
+import { ShapeUtil } from '../shapes/ShapeUtil'
 
 /**
  * Non visible shapes are shapes outside of the viewport page bounds.
@@ -10,48 +11,55 @@ import type { Editor } from '../Editor'
  */
 export function notVisibleShapes(editor: Editor) {
 	const emptySet = new Set<TLShapeId>()
+	const defaultCanCull = ShapeUtil.prototype.canCull
 
 	return computed<Set<TLShapeId>>('notVisibleShapes', function (prevValue) {
-		const allShapes = editor.getCurrentPageShapes()
+		const allShapeIds = editor.getCurrentPageShapeIds()
 		const viewportPageBounds = editor.getViewportPageBounds()
 		const visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds)
 
-		let shape: TLShape | undefined
-
 		// Fast path: if all shapes are visible, return empty set
-		if (visibleIds.size === allShapes.length) {
+		if (visibleIds.size === allShapeIds.size) {
 			if (isUninitialized(prevValue) || prevValue.size > 0) {
 				return emptySet
 			}
 			return prevValue
 		}
 
-		// First run: compute from scratch
-		if (isUninitialized(prevValue)) {
-			const nextValue = new Set<TLShapeId>()
-			for (let i = 0; i < allShapes.length; i++) {
-				shape = allShapes[i]
-				if (visibleIds.has(shape.id)) continue
-				if (!editor.getShapeUtil(shape.type).canCull(shape)) continue
-				nextValue.add(shape.id)
+		const notVisibleIds = new Set<TLShapeId>()
+		for (const id of allShapeIds) {
+			if (visibleIds.has(id)) continue
+
+			// Peek at the shape without subscribing — we only need its type to look up the util.
+			// Type is treated as immutable for a given id, so this is safe.
+			const peek = editor.store.unsafeGetWithoutCapture(id)
+			if (!peek) continue
+			const util = editor.getShapeUtil(peek.type)
+
+			// If canCull is the default (always-true), skip per-shape subscription entirely.
+			// >99% of shapes hit this path in practice.
+			if (util.canCull === defaultCanCull) {
+				notVisibleIds.add(id)
+				continue
 			}
-			return nextValue
+
+			// Custom canCull — subscribe so prop flips invalidate this derivation.
+			const shape = editor.getShape(id)
+			if (!shape) continue
+			if (!util.canCull(shape)) continue
+			notVisibleIds.add(id)
 		}
 
-		// Subsequent runs: single pass to collect IDs and detect changes
-		const notVisibleIds: TLShapeId[] = []
-		for (let i = 0; i < allShapes.length; i++) {
-			shape = allShapes[i]
-			if (visibleIds.has(shape.id)) continue
-			if (!editor.getShapeUtil(shape.type).canCull(shape)) continue
-			notVisibleIds.push(shape.id)
+		// First run
+		if (isUninitialized(prevValue)) {
+			return notVisibleIds
 		}
 
-		// Check if the result changed
-		if (notVisibleIds.length === prevValue.size) {
+		// Reuse prev set when contents are unchanged
+		if (notVisibleIds.size === prevValue.size) {
 			let same = true
-			for (let i = 0; i < notVisibleIds.length; i++) {
-				if (!prevValue.has(notVisibleIds[i])) {
+			for (const id of notVisibleIds) {
+				if (!prevValue.has(id)) {
 					same = false
 					break
 				}
@@ -59,6 +67,6 @@ export function notVisibleShapes(editor: Editor) {
 			if (same) return prevValue
 		}
 
-		return new Set(notVisibleIds)
+		return notVisibleIds
 	})
 }

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

@@ -0,0 +1,132 @@
+import { PageRecordType, type TLInstancePresence } from '@tldraw/tlschema'
+import { vi } from 'vitest'
+import type { Editor } from '../../Editor'
+import { CollaboratorsManager } from './CollaboratorsManager'
+
+const currentPageId = PageRecordType.createId('page')
+
+function createPresence(userId: string): TLInstancePresence {
+	return {
+		typeName: 'instance_presence',
+		id: `instance_presence:${userId}` as TLInstancePresence['id'],
+		userId,
+		userName: userId,
+		lastActivityTimestamp: Date.now(),
+		color: '#000000',
+		camera: null,
+		selectedShapeIds: [],
+		currentPageId,
+		brush: null,
+		scribbles: [],
+		screenBounds: null,
+		followingUserId: null,
+		cursor: null,
+		chatMessage: '',
+		meta: {},
+	}
+}
+
+function createEditor(presences: TLInstancePresence[] = []) {
+	const setInterval = vi.fn(() => 123)
+	const getInstanceState = vi.fn(() => ({
+		followingUserId: null,
+		highlightedUserIds: [],
+	}))
+	const userGetId = vi.fn(() => 'current-user')
+
+	const editor = {
+		options: {
+			collaboratorCheckIntervalMs: 1000,
+			collaboratorIdleTimeoutMs: 3000,
+			collaboratorInactiveTimeoutMs: 5000,
+		},
+		timers: {
+			setInterval,
+		},
+		user: {
+			getId: userGetId,
+		},
+		store: {
+			query: {
+				records: vi.fn(() => ({
+					get: () => presences,
+				})),
+			},
+		},
+		getInstanceState,
+		getCurrentPageId: vi.fn(() => currentPageId),
+	} as unknown as Editor
+
+	return { editor, setInterval, getInstanceState, userGetId }
+}
+
+describe(CollaboratorsManager, () => {
+	afterEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it('starts the visibility clock on the first visible collaborators read', () => {
+		const { editor, setInterval } = createEditor()
+		const manager = new CollaboratorsManager(editor)
+
+		expect(setInterval).not.toHaveBeenCalled()
+
+		expect(manager.getVisibleCollaborators()).toEqual([])
+
+		expect(setInterval).toHaveBeenCalledTimes(1)
+		expect(setInterval).toHaveBeenCalledWith(expect.any(Function), 1000)
+	})
+
+	it('only starts the visibility clock once across repeated reads', () => {
+		const { editor, setInterval } = createEditor()
+		const manager = new CollaboratorsManager(editor)
+
+		manager.getVisibleCollaborators()
+		manager.getVisibleCollaborators()
+		manager.getVisibleCollaborators()
+
+		expect(setInterval).toHaveBeenCalledTimes(1)
+	})
+
+	it('reads instance state once when filtering visible collaborators', () => {
+		const { editor, getInstanceState } = createEditor([
+			createPresence('user-1'),
+			createPresence('user-2'),
+		])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(2)
+
+		expect(getInstanceState).toHaveBeenCalledTimes(1)
+	})
+
+	it('hides idle collaborators that are following us', () => {
+		const presence = createPresence('peer')
+		presence.lastActivityTimestamp = Date.now() - 4000
+		presence.followingUserId = 'current-user'
+		const { editor } = createEditor([presence])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toEqual([])
+	})
+
+	it('shows idle collaborators that are following us when they have a chat message', () => {
+		const presence = createPresence('peer')
+		presence.lastActivityTimestamp = Date.now() - 4000
+		presence.followingUserId = 'current-user'
+		presence.chatMessage = 'hi'
+		const { editor } = createEditor([presence])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(1)
+	})
+
+	it('shows idle collaborators that are not following us', () => {
+		const presence = createPresence('peer')
+		presence.lastActivityTimestamp = Date.now() - 4000
+		const { editor } = createEditor([presence])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(1)
+	})
+})

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

@@ -1,10 +1,6 @@
 import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'
-import { TLInstancePresence } from '@tldraw/tlschema'
+import type { TLInstancePresence } from '@tldraw/tlschema'
 import { maxBy } from '@tldraw/utils'
-import {
-	getCollaboratorStateFromElapsedTime,
-	shouldShowCollaborator,
-} from '../../../utils/collaboratorState'
 import type { Editor } from '../../Editor'
 
 /**
@@ -17,12 +13,19 @@ import type { Editor } from '../../Editor'
  * @public
  */
 export class CollaboratorsManager {
-	constructor(private readonly editor: Editor) {
+	constructor(private readonly editor: Editor) {}
+
+	private _visibilityClockStarted = false
+
+	private _startVisibilityClock() {
+		if (this._visibilityClockStarted) return
+		this._visibilityClockStarted = true
+
 		// Editor disposes `editor.timers` on its own teardown, so the interval is
 		// automatically cleared when the editor is disposed.
-		editor.timers.setInterval(() => {
+		this.editor.timers.setInterval(() => {
 			this._visibilityClock.set(Date.now())
-		}, editor.options.collaboratorCheckIntervalMs)
+		}, this.editor.options.collaboratorCheckIntervalMs)
 	}
 
 	/**
@@ -75,14 +78,39 @@ export class CollaboratorsManager {
 	 */
 	@computed
 	getVisibleCollaborators(): TLInstancePresence[] {
+		const { editor } = this
+		const { collaboratorInactiveTimeoutMs, collaboratorIdleTimeoutMs } = editor.options
+
+		this._startVisibilityClock()
 		this._visibilityClock.get()
 		const now = Date.now()
-		return this.getCollaborators().filter((presence) => {
+		const collaborators = this.getCollaborators()
+		if (!collaborators.length) return EMPTY_ARRAY
+
+		const { followingUserId, highlightedUserIds } = this.editor.getInstanceState()
+		const currentUserId = this.editor.user.getId()
+
+		return collaborators.filter((presence) => {
+			const { lastActivityTimestamp, userId, chatMessage } = presence
+
 			// Treat a missing `lastActivityTimestamp` as "active right now" (elapsed = 0)
 			// so newly-joined peers aren't immediately classified as idle/inactive.
-			const elapsed = Math.max(0, now - (presence.lastActivityTimestamp ?? now))
-			const state = getCollaboratorStateFromElapsedTime(this.editor, elapsed)
-			return shouldShowCollaborator(this.editor, presence, state)
+			const elapsed = Math.max(0, now - (lastActivityTimestamp ?? now))
+
+			if (elapsed > collaboratorInactiveTimeoutMs) {
+				// Inactive: If they're inactive, only show if we're following them or they're highlighted
+				return followingUserId === userId || highlightedUserIds.includes(userId)
+			}
+
+			if (elapsed > collaboratorIdleTimeoutMs) {
+				// Idle: If they're idle and following us, hide them unless they have a chat message or are highlighted
+				if (presence.followingUserId === currentUserId) {
+					return !!(chatMessage || highlightedUserIds.includes(userId))
+				}
+			}
+
+			// Active
+			return true
 		})
 	}
 

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

@@ -2,6 +2,10 @@ import { EASINGS } from '../../../primitives/easings'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 
+// Tuned for touch/small-screen feel; adjust together with coarsePointerWidth.
+const EDGE_SCROLL_SMALL_SCREEN_THRESHOLD_PX = 1000
+const EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR = 0.612
+
 /** @public */
 export class EdgeScrollManager {
 	constructor(public editor: Editor) {}
@@ -115,8 +119,14 @@ export class EdgeScrollManager {
 		const screenBounds = editor.getViewportScreenBounds()
 
 		// Determines how much the speed is affected by the screen size
-		const screenSizeFactorX = screenBounds.w < 1000 ? 0.612 : 1
-		const screenSizeFactorY = screenBounds.h < 1000 ? 0.612 : 1
+		const screenSizeFactorX =
+			screenBounds.w < EDGE_SCROLL_SMALL_SCREEN_THRESHOLD_PX
+				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
+				: 1
+		const screenSizeFactorY =
+			screenBounds.h < EDGE_SCROLL_SMALL_SCREEN_THRESHOLD_PX
+				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
+				: 1
 
 		// Determines the base speed of the scroll
 		const zoomLevel = editor.getZoomLevel()

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

@@ -334,6 +334,13 @@ describe('FocusManager', () => {
 
 			expect(callOrder).toEqual(['complete', 'blur'])
 		})
+
+		it('should complete without blurring the container when blurContainer is false', () => {
+			focusManager.blur({ blurContainer: false })
+
+			expect(editor.complete).toHaveBeenCalled()
+			expect(mockContainer.blur).not.toHaveBeenCalled()
+		})
 	})
 
 	describe('dispose', () => {

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

@@ -80,9 +80,9 @@ export class FocusManager {
 		this.editor.getContainer().focus()
 	}
 
-	blur() {
+	blur({ blurContainer = true } = {}) {
 		this.editor.complete() // stop any interaction
-		this.editor.getContainer().blur() // blur the container
+		if (blurContainer) this.editor.getContainer().blur() // blur the container
 	}
 
 	dispose() {

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

@@ -36,6 +36,8 @@ describe('FontManager', () => {
 	let editor: Mocked<Editor>
 	let fontManager: FontManager
 	let mockAssetUrls: { [key: string]: string }
+	let mockShapeFontFacesCacheGet: Mock
+	let mockShapeFontLoadStateCacheGet: Mock
 
 	const createMockFont = (overrides: Partial<TLFontFace> = {}): TLFontFace => ({
 		family: 'Test Font',
@@ -78,12 +80,15 @@ describe('FontManager', () => {
 			getFontFaces: vi.fn(() => []),
 		}
 
+		mockShapeFontFacesCacheGet = vi.fn(() => [])
+		mockShapeFontLoadStateCacheGet = vi.fn(() => ({ get: vi.fn(() => []) }))
+
 		const mockStore = {
 			createComputedCache: vi.fn(() => ({
-				get: vi.fn(() => []),
+				get: mockShapeFontFacesCacheGet,
 			})),
 			createCache: vi.fn(() => ({
-				get: vi.fn(() => ({ get: vi.fn(() => []) })),
+				get: mockShapeFontLoadStateCacheGet,
 			})),
 		}
 
@@ -110,6 +115,32 @@ describe('FontManager', () => {
 		})
 	})
 
+	describe('dispose', () => {
+		it('clears font state and caches', async () => {
+			const font = createMockFont()
+			const shapeId = createShapeId('test')
+			mockShapeFontFacesCacheGet.mockReturnValue([font])
+			const firstPromise = fontManager.ensureFontIsLoaded(font)
+
+			expect(fontManager.getShapeFontFaces(shapeId)).toEqual([font])
+			fontManager.trackFontsForShape(shapeId)
+			fontManager.requestFonts([font])
+			await firstPromise
+			fontManager.dispose()
+			fontManager.requestFonts([font])
+			const secondPromise = fontManager.ensureFontIsLoaded(font)
+
+			expect(fontManager.getShapeFontFaces(shapeId)).toEqual([])
+			fontManager.trackFontsForShape(shapeId)
+			expect(mockShapeFontFacesCacheGet).toHaveBeenCalledTimes(1)
+			expect(mockShapeFontLoadStateCacheGet).toHaveBeenCalledTimes(1)
+			expect(queueMicrotask).toHaveBeenCalledTimes(2)
+			expect(secondPromise).not.toBe(firstPromise)
+
+			await secondPromise
+		})
+	})
+
 	describe('getShapeFontFaces', () => {
 		it('should return empty array when no fonts found', () => {
 			const shape = createMockShape()

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

@@ -16,6 +16,17 @@ interface FontState {
 	readonly loadingPromise: Promise<void>
 }
 
+interface ShapeFontFacesCache {
+	get(id: TLShapeId): TLFontFace[] | undefined
+}
+
+interface ShapeFontLoadStateCache {
+	get(id: TLShapeId): (FontState | null)[] | undefined
+}
+
+const EMPTY_SHAPE_FONT_FACES_CACHE: ShapeFontFacesCache = { get: () => undefined }
+const EMPTY_SHAPE_FONT_LOAD_STATE_CACHE: ShapeFontLoadStateCache = { get: () => undefined }
+
 /** @public */
 export class FontManager {
 	constructor(
@@ -49,8 +60,15 @@ export class FontManager {
 		)
 	}
 
-	private readonly shapeFontFacesCache
-	private readonly shapeFontLoadStateCache
+	dispose() {
+		this.fontStates.clear()
+		this.fontsToLoad.clear()
+		this.shapeFontFacesCache = EMPTY_SHAPE_FONT_FACES_CACHE
+		this.shapeFontLoadStateCache = EMPTY_SHAPE_FONT_LOAD_STATE_CACHE
+	}
+
+	private shapeFontFacesCache: ShapeFontFacesCache
+	private shapeFontLoadStateCache: ShapeFontLoadStateCache
 
 	getShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {
 		const shapeId = typeof shape === 'string' ? shape : shape.id

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

@@ -7,6 +7,9 @@ import { isAccelKey } from '../../../utils/keyboard'
 import type { Editor } from '../../Editor'
 import { TLPinchEventInfo, TLPointerEventInfo, TLWheelEventInfo } from '../../types/event-types'
 
+const POINTER_VELOCITY_REFERENCE_INTERVAL_MS = 16
+const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
+
 /** @public */
 export class InputsManager {
 	constructor(private readonly editor: Editor) {}
@@ -473,8 +476,14 @@ export class InputsManager {
 		const length = delta.len()
 		const direction = length ? delta.div(length) : new Vec(0, 0)
 
-		// consider adjusting this with an easing rather than a linear interpolation
-		const next = pointerVelocity.clone().lrp(direction.mul(length / elapsed), 0.5)
+		// Preserve the old 16ms smoothing with alpha = 1 - (1 - 0.5)^(elapsed / 16).
+		const smoothing =
+			1 -
+			Math.pow(
+				1 - POINTER_VELOCITY_REFERENCE_SMOOTHING,
+				elapsed / POINTER_VELOCITY_REFERENCE_INTERVAL_MS
+			)
+		const next = pointerVelocity.clone().lrp(direction.mul(length / elapsed), smoothing)
 
 		// if the velocity is very small, just set it to 0
 		if (Math.abs(next.x) < 0.01) next.x = 0

package/src/lib/editor/managers/SpatialIndexManager/RBushIndex.ts

@@ -113,25 +113,24 @@ export class RBushIndex {
 	}
 
 	/**
-	 * Get all shape IDs currently in the spatial index.
+	 * Get the raw stored element for a shape, without allocating a Box.
+	 * Use when you only need to read the indexed bounds for comparison.
+	 *
+	 * @internal
 	 */
-	getAllShapeIds(): TLShapeId[] {
-		return Array.from(this.elementsInTree.keys())
+	getElement(id: TLShapeId): SpatialElement | undefined {
+		return this.elementsInTree.get(id)
 	}
 
 	/**
-	 * Get the bounds currently stored in the spatial index for a shape.
-	 * Returns undefined if the shape is not in the index.
+	 * Iterate the entries currently in the index. Callers may upsert existing
+	 * keys or remove keys during iteration; current callers do not insert new
+	 * keys.
+	 *
+	 * @internal
 	 */
-	getBounds(id: TLShapeId): Box | undefined {
-		const element = this.elementsInTree.get(id)
-		if (!element) return undefined
-		return new Box(
-			element.minX,
-			element.minY,
-			element.maxX - element.minX,
-			element.maxY - element.minY
-		)
+	entries(): IterableIterator<[TLShapeId, SpatialElement]> {
+		return this.elementsInTree.entries()
 	}
 
 	/**