@tldraw/editor 4.4.0-next.2248da8625f1 → 4.4.0-next.47ddfa11ee6e

package/src/lib/components/LiveCollaborators.tsx

@@ -6,6 +6,11 @@ import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { usePeerIds } from '../hooks/usePeerIds'
 import { usePresence } from '../hooks/usePresence'
+import {
+	CollaboratorState,
+	getCollaboratorStateFromElapsedTime,
+	shouldShowCollaborator,
+} from '../utils/collaboratorState'
 
 export const LiveCollaborators = track(function Collaborators() {
 	const peerIds = usePeerIds()
@@ -26,30 +31,8 @@ const CollaboratorGuard = track(function CollaboratorGuard({
 		return null
 	}
 
-	switch (collaboratorState) {
-		case 'inactive': {
-			const { followingUserId, highlightedUserIds } = editor.getInstanceState()
-			// If they're inactive and unless we're following them or they're highlighted, hide them
-			if (!(followingUserId === presence.userId || highlightedUserIds.includes(presence.userId))) {
-				return null
-			}
-			break
-		}
-		case 'idle': {
-			const { highlightedUserIds } = editor.getInstanceState()
-			// If they're idle and following us and unless they have a chat message or are highlighted, hide them
-			if (
-				presence.followingUserId === editor.user.getId() &&
-				!(presence.chatMessage || highlightedUserIds.includes(presence.userId))
-			) {
-				return null
-			}
-			break
-		}
-		case 'active': {
-			// If they're active, show them
-			break
-		}
+	if (!shouldShowCollaborator(editor, presence, collaboratorState)) {
+		return null
 	}
 
 	return <Collaborator latestPresence={presence} />
@@ -137,7 +120,16 @@ const Collaborator = track(function Collaborator({
 			) : null}
 			{CollaboratorShapeIndicator &&
 				selectedShapeIds
-					.filter((id) => !editor.isShapeHidden(id))
+					.filter((id) => {
+						// Skip hidden shapes
+						if (editor.isShapeHidden(id)) return false
+						// Only render SVG indicators for shapes that use legacy indicators
+						// Canvas-based indicators are handled by CanvasShapeIndicators
+						const shape = editor.getShape(id)
+						if (!shape) return false
+						const util = editor.getShapeUtil(shape)
+						return util.useLegacyIndicator()
+					})
 					.map((shapeId) => (
 						<CollaboratorShapeIndicator
 							className="tl-collaborator__shape-indicator"
@@ -152,24 +144,21 @@ const Collaborator = track(function Collaborator({
 	)
 })
 
-function getStateFromElapsedTime(editor: Editor, elapsed: number) {
-	return elapsed > editor.options.collaboratorInactiveTimeoutMs
-		? 'inactive'
-		: elapsed > editor.options.collaboratorIdleTimeoutMs
-			? 'idle'
-			: 'active'
-}
-
-function useCollaboratorState(editor: Editor, latestPresence: TLInstancePresence | null) {
+function useCollaboratorState(
+	editor: Editor,
+	latestPresence: TLInstancePresence | null
+): CollaboratorState {
 	const rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)
 
-	const [state, setState] = useState<'active' | 'idle' | 'inactive'>(() =>
-		getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
+	const [state, setState] = useState<CollaboratorState>(() =>
+		getCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
 	)
 
 	useEffect(() => {
 		const interval = editor.timers.setInterval(() => {
-			setState(getStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current))
+			setState(
+				getCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
+			)
 		}, editor.options.collaboratorCheckIntervalMs)
 
 		return () => clearInterval(interval)

package/src/lib/components/Shape.tsx

@@ -5,6 +5,7 @@ import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
+import { useShapeCulling } from '../hooks/useShapeCulling'
 import { Mat } from '../primitives/Mat'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { setStyleProperty } from '../utils/dom'
@@ -57,7 +58,6 @@ export const Shape = memo(function Shape({
 		height: 0,
 		x: 0,
 		y: 0,
-		isCulled: false,
 	})
 
 	useQuickReactor(
@@ -118,22 +118,21 @@ export const Shape = memo(function Shape({
 		setStyleProperty(bgContainer, 'z-index', backgroundIndex)
 	}, [opacity, index, backgroundIndex])
 
-	useQuickReactor(
-		'set display',
-		() => {
-			const shape = editor.getShape(id)
-			if (!shape) return // probably the shape was just deleted
+	// Register container refs with the centralized culling context.
+	// This runs on mount and handles initial display state.
+	const { register, unregister } = useShapeCulling()
+	useLayoutEffect(() => {
+		const container = containerRef.current
+		if (!container) return
 
-			const culledShapes = editor.getCulledShapes()
-			const isCulled = culledShapes.has(id)
-			if (isCulled !== memoizedStuffRef.current.isCulled) {
-				setStyleProperty(containerRef.current, 'display', isCulled ? 'none' : 'block')
-				setStyleProperty(bgContainerRef.current, 'display', isCulled ? 'none' : 'block')
-				memoizedStuffRef.current.isCulled = isCulled
-			}
-		},
-		[editor]
-	)
+		// Check initial culling state and register with the context
+		const isCulled = editor.getCulledShapes().has(id)
+		register(id, container, bgContainerRef.current, isCulled)
+
+		return () => {
+			unregister(id)
+		}
+	}, [editor, id, register, unregister])
 	const annotateError = useCallback(
 		(error: any) => editor.annotateError(error, { origin: 'shape', willCrashApp: false }),
 		[editor]

package/src/lib/components/default-components/CanvasShapeIndicators.tsx

@@ -0,0 +1,288 @@
+import { useComputed, useQuickReactor } from '@tldraw/state-react'
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { dedupe } from '@tldraw/utils'
+import { memo, useEffect, useRef } from 'react'
+import { Editor } from '../../editor/Editor'
+import { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'
+import { useEditor } from '../../hooks/useEditor'
+import { useIsDarkMode } from '../../hooks/useIsDarkMode'
+import { useActivePeerIds$ } from '../../hooks/usePeerIds'
+
+interface CollaboratorIndicatorData {
+	color: string
+	shapeIds: TLShapeId[]
+}
+
+interface RenderData {
+	idsToDisplay: Set<TLShapeId>
+	renderingShapeIds: Set<TLShapeId>
+	hintingShapeIds: TLShapeId[]
+	collaboratorIndicators: CollaboratorIndicatorData[]
+}
+
+function setsEqual<T>(a: Set<T>, b: Set<T>): boolean {
+	if (a.size !== b.size) return false
+	for (const item of a) {
+		if (!b.has(item)) return false
+	}
+	return true
+}
+
+function arraysEqual<T>(a: readonly T[], b: readonly T[]): boolean {
+	if (a.length !== b.length) return false
+	for (let i = 0; i < a.length; i++) {
+		if (a[i] !== b[i]) return false
+	}
+	return true
+}
+
+function collaboratorIndicatorsEqual(
+	a: CollaboratorIndicatorData[],
+	b: CollaboratorIndicatorData[]
+): boolean {
+	if (a.length !== b.length) return false
+	for (let i = 0; i < a.length; i++) {
+		if (a[i].color !== b[i].color) return false
+		if (!arraysEqual(a[i].shapeIds, b[i].shapeIds)) return false
+	}
+	return true
+}
+
+function renderDataEqual(a: RenderData, b: RenderData): boolean {
+	return (
+		setsEqual(a.idsToDisplay, b.idsToDisplay) &&
+		setsEqual(a.renderingShapeIds, b.renderingShapeIds) &&
+		arraysEqual(a.hintingShapeIds, b.hintingShapeIds) &&
+		collaboratorIndicatorsEqual(a.collaboratorIndicators, b.collaboratorIndicators)
+	)
+}
+
+const indicatorPathCache = createComputedCache(
+	'indicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	}
+)
+
+const getIndicatorPath = (editor: Editor, shape: TLShape) => {
+	return indicatorPathCache.get(editor, shape.id)
+}
+
+function renderShapeIndicator(
+	ctx: CanvasRenderingContext2D,
+	editor: Editor,
+	shapeId: TLShapeId,
+	renderingShapeIds: Set<TLShapeId>
+): boolean {
+	if (!renderingShapeIds.has(shapeId)) return false
+
+	const shape = editor.getShape(shapeId)
+	if (!shape || shape.isLocked) return false
+
+	const pageTransform = editor.getShapePageTransform(shape)
+	if (!pageTransform) return false
+
+	const indicatorPath = getIndicatorPath(editor, shape)
+	if (!indicatorPath) return false
+
+	ctx.save()
+	ctx.transform(
+		pageTransform.a,
+		pageTransform.b,
+		pageTransform.c,
+		pageTransform.d,
+		pageTransform.e,
+		pageTransform.f
+	)
+	renderIndicatorPath(ctx, indicatorPath)
+	ctx.restore()
+
+	return true
+}
+
+function renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {
+	if (indicatorPath instanceof Path2D) {
+		ctx.stroke(indicatorPath)
+	} else {
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (clipPath) {
+			ctx.save()
+			ctx.clip(clipPath, 'evenodd')
+			ctx.stroke(path)
+			ctx.restore()
+		} else {
+			ctx.stroke(path)
+		}
+
+		if (additionalPaths) {
+			for (const additionalPath of additionalPaths) {
+				ctx.stroke(additionalPath)
+			}
+		}
+	}
+}
+
+/** @internal @react */
+export const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {
+	const editor = useEditor()
+	const canvasRef = useRef<HTMLCanvasElement>(null)
+
+	// Cache the selected color to avoid getComputedStyle on every render
+	const rSelectedColor = useRef<string | null>(null)
+	const isDarkMode = useIsDarkMode()
+
+	useEffect(() => {
+		const timer = editor.timers.setTimeout(() => {
+			rSelectedColor.current = null
+		}, 0)
+		return () => clearTimeout(timer)
+	}, [isDarkMode, editor])
+
+	// Get active peer IDs (already handles time-based state transitions)
+	const activePeerIds$ = useActivePeerIds$()
+
+	const $renderData = useComputed(
+		'indicator render data',
+		() => {
+			const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))
+
+			// Compute ids to display for selected/hovered shapes
+			const idsToDisplay = new Set<TLShapeId>()
+			const instanceState = editor.getInstanceState()
+			const isChangingStyle = instanceState.isChangingStyle
+			const isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')
+			const isInSelectState = editor.isInAny(
+				'select.brushing',
+				'select.scribble_brushing',
+				'select.pointing_shape',
+				'select.pointing_selection',
+				'select.pointing_handle'
+			)
+
+			if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
+				for (const id of editor.getSelectedShapeIds()) {
+					idsToDisplay.add(id)
+				}
+				if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
+					const hovered = editor.getHoveredShapeId()
+					if (hovered) idsToDisplay.add(hovered)
+				}
+			}
+
+			// Compute hinting shape ids
+			const hintingShapeIds = dedupe(editor.getHintingShapeIds())
+
+			// Compute collaborator indicators
+			const collaboratorIndicators: CollaboratorIndicatorData[] = []
+			const currentPageId = editor.getCurrentPageId()
+			const activePeerIds = activePeerIds$.get()
+
+			const collaborators = editor.getCollaborators()
+			for (const peerId of activePeerIds.values()) {
+				// Skip collaborators on different pages
+				const presence = collaborators.find((c) => c.userId === peerId)
+				if (!presence || presence.currentPageId !== currentPageId) continue
+
+				// Filter to shapes that are visible and on the current rendering set
+				const visibleShapeIds = presence.selectedShapeIds.filter(
+					(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)
+				)
+
+				if (visibleShapeIds.length > 0) {
+					collaboratorIndicators.push({
+						color: presence.color,
+						shapeIds: visibleShapeIds,
+					})
+				}
+			}
+
+			return {
+				idsToDisplay,
+				renderingShapeIds,
+				hintingShapeIds,
+				collaboratorIndicators,
+			}
+		},
+		{ isEqual: renderDataEqual },
+		[editor, activePeerIds$]
+	)
+
+	useQuickReactor(
+		'canvas indicators render',
+		() => {
+			const canvas = canvasRef.current
+			if (!canvas) return
+
+			const ctx = canvas.getContext('2d')
+			if (!ctx) return
+
+			const { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =
+				$renderData.get()
+
+			const { w, h } = editor.getViewportScreenBounds()
+			const dpr = window.devicePixelRatio || 1
+			const { x: cx, y: cy, z: zoom } = editor.getCamera()
+
+			const canvasWidth = Math.ceil(w * dpr)
+			const canvasHeight = Math.ceil(h * dpr)
+
+			if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
+				canvas.width = canvasWidth
+				canvas.height = canvasHeight
+				canvas.style.width = `${w}px`
+				canvas.style.height = `${h}px`
+			}
+
+			ctx.resetTransform()
+			ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+			ctx.scale(dpr, dpr)
+			ctx.scale(zoom, zoom)
+			ctx.translate(cx, cy)
+
+			ctx.lineCap = 'round'
+			ctx.lineJoin = 'round'
+
+			// Draw collaborator indicators first (underneath local indicators)
+			// Use 0.5 opacity to match the original SVG-based collaborator indicators
+			ctx.lineWidth = 1.5 / zoom
+			for (const collaborator of collaboratorIndicators) {
+				ctx.strokeStyle = collaborator.color
+				ctx.globalAlpha = 0.7
+				for (const shapeId of collaborator.shapeIds) {
+					renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+				}
+			}
+
+			// Reset alpha for local indicators
+			ctx.globalAlpha = 1.0
+
+			// Use cached color, only call getComputedStyle when cache is empty
+			if (!rSelectedColor.current) {
+				rSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')
+			}
+
+			ctx.strokeStyle = rSelectedColor.current
+
+			// Draw selected/hovered indicators (1.5px stroke)
+			ctx.lineWidth = 1.5 / zoom
+			for (const shapeId of idsToDisplay) {
+				renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+			}
+
+			// Draw hinted indicators with a thicker stroke (2.5px)
+			if (hintingShapeIds.length > 0) {
+				ctx.lineWidth = 2.5 / zoom
+				for (const shapeId of hintingShapeIds) {
+					renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+				}
+			}
+		},
+		[editor, $renderData]
+	)
+
+	return <canvas ref={canvasRef} className="tl-canvas-indicators" />
+})

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -16,6 +16,7 @@ import { useGestureEvents } from '../../hooks/useGestureEvents'
 import { useHandleEvents } from '../../hooks/useHandleEvents'
 import { useSharedSafeId } from '../../hooks/useSafeId'
 import { useScreenBounds } from '../../hooks/useScreenBounds'
+import { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'
 import { Box } from '../../primitives/Box'
 import { Mat } from '../../primitives/Mat'
 import { Vec } from '../../primitives/Vec'
@@ -26,6 +27,7 @@ import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
 import { Shape } from '../Shape'
+import { CanvasShapeIndicators } from './CanvasShapeIndicators'
 
 /** @public */
 export interface TLCanvasComponentProps {
@@ -159,6 +161,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 				</div>
 				<div className="tl-overlays">
+					<CanvasShapeIndicators />
 					<div ref={rHtmlLayer2} className="tl-html-layer">
 						{debugGeometry ? <GeometryDebuggingView /> : null}
 						<BrushWrapper />
@@ -426,18 +429,39 @@ function ReflowIfNeeded() {
 	return null
 }
 
+/**
+ * Centralized culling controller that updates shape container visibility.
+ * This single reactor replaces per-shape subscriptions for O(1) instead of O(N) subscriptions.
+ */
+function CullingController() {
+	const editor = useEditor()
+	const { updateCulling } = useShapeCulling()
+
+	useQuickReactor(
+		'update shape culling',
+		() => {
+			const culledShapes = editor.getCulledShapes()
+			updateCulling(culledShapes)
+		},
+		[editor, updateCulling]
+	)
+
+	return null
+}
+
 function ShapesToDisplay() {
 	const editor = useEditor()
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
 	return (
-		<>
+		<ShapeCullingProvider>
 			{renderingShapes.map((result) => (
 				<Shape key={result.id + '_shape'} {...result} />
 			))}
+			<CullingController />
 			{tlenv.isSafari && <ReflowIfNeeded />}
-		</>
+		</ShapeCullingProvider>
 	)
 }
 
@@ -445,7 +469,19 @@ function HintedShapeIndicator() {
 	const editor = useEditor()
 	const { ShapeIndicator } = useEditorComponents()
 
-	const ids = useValue('hinting shape ids', () => dedupe(editor.getHintingShapeIds()), [editor])
+	const ids = useValue(
+		'hinting shape ids without canvas indicator',
+		() => {
+			// Filter to only shapes that use legacy SVG indicators
+			return dedupe(editor.getHintingShapeIds()).filter((id) => {
+				const shape = editor.getShape(id)
+				if (!shape) return false
+				const util = editor.getShapeUtil(shape)
+				return util.useLegacyIndicator()
+			})
+		},
+		[editor]
+	)
 
 	if (!ids.length) return null
 	if (!ShapeIndicator) return null

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -32,6 +32,11 @@ const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId })
 
 	if (!shape || shape.isLocked) return null
 
+	const util = editor.getShapeUtil(shape)
+
+	// If the shape uses canvas indicators, it will be rendered by CanvasShapeIndicators
+	if (!util.useLegacyIndicator()) return null
+
 	return (
 		<OptionalErrorBoundary
 			fallback={ShapeIndicatorErrorFallback}
@@ -39,7 +44,7 @@ const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId })
 				editor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })
 			}
 		>
-			<EvenInnererIndicator key={shape.id} shape={shape} util={editor.getShapeUtil(shape)} />
+			<EvenInnererIndicator key={shape.id} shape={shape} util={util} />
 		</OptionalErrorBoundary>
 	)
 })

package/src/lib/components/default-components/DefaultShapeIndicators.tsx

@@ -89,9 +89,24 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators({
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
 	const { ShapeIndicator } = useEditorComponents()
+
+	// Filter out shapes that have canvas indicator support - only render shapes that use legacy SVG indicators
+	const shapesToRender = useValue(
+		'shapes to render for svg indicators',
+		() => {
+			return renderingShapes.filter(({ id }) => {
+				const shape = editor.getShape(id)
+				if (!shape) return false
+				const util = editor.getShapeUtil(shape)
+				return util.useLegacyIndicator()
+			})
+		},
+		[editor, renderingShapes]
+	)
+
 	if (!ShapeIndicator) return null
 
-	return renderingShapes.map(({ id }) => (
+	return shapesToRender.map(({ id }) => (
 		<ShapeIndicator
 			key={id + '_indicator'}
 			shapeId={id}

package/src/lib/config/TLUserPreferences.test.ts

@@ -21,6 +21,7 @@ describe('TLUserPreferences consistency', () => {
 		'isPasteAtCursorMode',
 		'enhancedA11yMode',
 		'inputMode',
+		'isZoomDirectionInverted',
 	] as const
 
 	it('defaultUserPreferences contains all TLUserPreferences keys (except id)', () => {

package/src/lib/config/TLUserPreferences.ts

@@ -26,6 +26,7 @@ export interface TLUserPreferences {
 	isPasteAtCursorMode?: boolean | null
 	enhancedA11yMode?: boolean | null
 	inputMode?: 'trackpad' | 'mouse' | null
+	isZoomDirectionInverted?: boolean | null
 }
 
 interface UserDataSnapshot {
@@ -56,6 +57,7 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	isPasteAtCursorMode: T.boolean.nullable().optional(),
 	enhancedA11yMode: T.boolean.nullable().optional(),
 	inputMode: T.literalEnum('trackpad', 'mouse').nullable().optional(),
+	isZoomDirectionInverted: T.boolean.nullable().optional(),
 })
 
 const Versions = {
@@ -71,6 +73,7 @@ const Versions = {
 	AddShowUiLabels: 10,
 	AddPointerPeripheral: 11,
 	RenameShowUiLabelsToEnhancedA11yMode: 12,
+	AddZoomDirectionInverted: 13,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -121,6 +124,10 @@ function migrateSnapshot(data: { version: number; user: any }) {
 		data.user.inputMode = null
 	}
 
+	if (data.version < Versions.AddZoomDirectionInverted) {
+		data.user.isZoomDirectionInverted = false
+	}
+
 	// finally
 	data.version = CURRENT_VERSION
 }
@@ -171,6 +178,7 @@ export const defaultUserPreferences = Object.freeze({
 	enhancedA11yMode: false,
 	colorScheme: 'light',
 	inputMode: null,
+	isZoomDirectionInverted: false,
 }) satisfies Readonly<Omit<TLUserPreferences, 'id'>>
 
 /** @public */

package/src/lib/config/createTLStore.ts

@@ -29,7 +29,7 @@ export interface TLStoreBaseOptions {
 	/** How should this store upload & resolve assets? */
 	assets?: TLAssetStore
 
-	/** Called when the store is connected to an {@link Editor}. */
+	/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
 	onMount?(editor: Editor): void | (() => void)
 }