@tldraw/editor 4.4.0-next.55b4db2171bd → 4.4.0-next.f181afb0ab39

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/default-components/CanvasShapeIndicators.tsx

@@ -0,0 +1,244 @@
+import { useComputed, useQuickReactor } from '@tldraw/state-react'
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { dedupe, isEqual } 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[]
+}
+
+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: isEqual },
+		[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

@@ -26,6 +26,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 +160,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 />
@@ -445,7 +447,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/editor/Editor.ts

@@ -10544,7 +10544,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 								}
 							}
 
-							const zoom = cz + (delta ?? 0) * zoomSpeed * cz
+							// because we can't for sure detect whether a user is using a mouse or a trackpad,
+							// we need to check the input mode preference, and only invert the zoom direction
+							// if the user has specifically set it to a mouse.
+							const isZoomDirectionInverted =
+								(this.user.getUserPreferences().isZoomDirectionInverted && inputMode === 'mouse') ??
+								false
+							const deltaValue = delta ?? 0
+							const finalDelta = isZoomDirectionInverted ? -deltaValue : deltaValue
+
+							const zoom = cz + finalDelta * zoomSpeed * cz
 							this._setCamera(new Vec(cx + x / zoom - x / cz, cy + y / zoom - y / cz, zoom), {
 								immediate: true,
 							})