@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0

package/src/lib/components/LiveCollaborators.tsx

@@ -1,180 +0,0 @@
-import { track } from '@tldraw/state-react'
-import { TLInstancePresence } from '@tldraw/tlschema'
-import { useEffect, useRef, useState } from 'react'
-import { Editor } from '../editor/Editor'
-import { useEditorComponents } from '../hooks/EditorComponentsContext'
-import { useEditor } from '../hooks/useEditor'
-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()
-	return peerIds.map((id) => <CollaboratorGuard key={id} collaboratorId={id} />)
-})
-
-const CollaboratorGuard = track(function CollaboratorGuard({
-	collaboratorId,
-}: {
-	collaboratorId: string
-}) {
-	const editor = useEditor()
-	const presence = usePresence(collaboratorId)
-	const collaboratorState = useCollaboratorState(editor, presence)
-
-	if (!(presence && presence.currentPageId === editor.getCurrentPageId())) {
-		// No need to render if we don't have a presence or if they're on a different page
-		return null
-	}
-
-	if (!shouldShowCollaborator(editor, presence, collaboratorState)) {
-		return null
-	}
-
-	return <Collaborator latestPresence={presence} />
-})
-
-const Collaborator = track(function Collaborator({
-	latestPresence,
-}: {
-	latestPresence: TLInstancePresence
-}) {
-	const editor = useEditor()
-
-	const {
-		CollaboratorBrush,
-		CollaboratorScribble,
-		CollaboratorCursor,
-		CollaboratorHint,
-		CollaboratorShapeIndicator,
-	} = useEditorComponents()
-
-	const zoomLevel = editor.getZoomLevel()
-	const viewportPageBounds = editor.getViewportPageBounds()
-	const { userId, chatMessage, brush, scribbles, selectedShapeIds, userName, cursor, color } =
-		latestPresence
-
-	if (!cursor) return null
-
-	// Add a little padding to the top-left of the viewport
-	// so that the cursor doesn't get cut off
-	const isCursorInViewport = !(
-		cursor.x < viewportPageBounds.minX - 12 / zoomLevel ||
-		cursor.y < viewportPageBounds.minY - 16 / zoomLevel ||
-		cursor.x > viewportPageBounds.maxX - 12 / zoomLevel ||
-		cursor.y > viewportPageBounds.maxY - 16 / zoomLevel
-	)
-
-	return (
-		<>
-			{brush && CollaboratorBrush ? (
-				<CollaboratorBrush
-					className="tl-collaborator__brush"
-					key={userId + '_brush'}
-					userId={userId}
-					brush={brush}
-					color={color}
-					opacity={0.1}
-				/>
-			) : null}
-			{isCursorInViewport && CollaboratorCursor ? (
-				<CollaboratorCursor
-					className="tl-collaborator__cursor"
-					key={userId + '_cursor'}
-					userId={userId}
-					point={cursor}
-					color={color}
-					zoom={zoomLevel}
-					name={userName !== 'New User' ? userName : null}
-					chatMessage={chatMessage ?? ''}
-				/>
-			) : CollaboratorHint ? (
-				<CollaboratorHint
-					className="tl-collaborator__cursor-hint"
-					key={userId + '_cursor_hint'}
-					userId={userId}
-					point={cursor}
-					color={color}
-					zoom={zoomLevel}
-					viewport={viewportPageBounds}
-				/>
-			) : null}
-			{CollaboratorScribble && scribbles.length ? (
-				<>
-					{scribbles.map((scribble) => (
-						<CollaboratorScribble
-							key={userId + '_scribble_' + scribble.id}
-							className="tl-collaborator__scribble"
-							userId={userId}
-							scribble={scribble}
-							color={color}
-							zoom={zoomLevel}
-							opacity={scribble.color === 'laser' ? 0.5 : 0.1}
-						/>
-					))}
-				</>
-			) : null}
-			{CollaboratorShapeIndicator &&
-				selectedShapeIds
-					.filter((id) => {
-						// Skip hidden shapes
-						if (editor.isShapeHidden(id)) return false
-						// When canvas indicators are disabled, render SVG indicators for
-						// every selected shape. Otherwise shapes that opt into the canvas
-						// path via useLegacyIndicator() === false would never get a
-						// collaborator indicator drawn.
-						if (!editor.options.useCanvasIndicators) return true
-						// Otherwise, only render SVG indicators for shapes that opt in to
-						// the legacy path — 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"
-							key={userId + '_' + shapeId}
-							userId={userId}
-							shapeId={shapeId}
-							color={color}
-							opacity={0.5}
-						/>
-					))}
-		</>
-	)
-})
-
-function useCollaboratorState(
-	editor: Editor,
-	latestPresence: TLInstancePresence | null
-): CollaboratorState {
-	const rLastActivityTimestamp = useRef(latestPresence?.lastActivityTimestamp ?? -1)
-
-	const [state, setState] = useState<CollaboratorState>(() =>
-		getCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
-	)
-
-	useEffect(() => {
-		const interval = editor.timers.setInterval(() => {
-			setState(
-				getCollaboratorStateFromElapsedTime(editor, Date.now() - rLastActivityTimestamp.current)
-			)
-		}, editor.options.collaboratorCheckIntervalMs)
-
-		return () => clearInterval(interval)
-	}, [editor])
-
-	if (latestPresence) {
-		// We can do this on every render, it's free and cheaper than an effect
-		// remember, there can be lots and lots of cursors moving around all the time
-		rLastActivityTimestamp.current = latestPresence.lastActivityTimestamp ?? Infinity
-	}
-
-	return state
-}

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

@@ -1,300 +0,0 @@
-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 { getComputedStyle } from '../../exports/domUtils'
-import { useColorMode } from '../../hooks/useColorMode'
-import { useEditor } from '../../hooks/useEditor'
-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()
-
-	// Skip canvas indicator rendering when the option is disabled (e.g. A/B test)
-	if (!editor.options.useCanvasIndicators) {
-		return null
-	}
-
-	return <CanvasShapeIndicatorsInner />
-})
-
-const CanvasShapeIndicatorsInner = memo(function CanvasShapeIndicatorsInner() {
-	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 colorMode = useColorMode()
-
-	useEffect(() => {
-		const timer = editor.timers.setTimeout(() => {
-			rSelectedColor.current = null
-		}, 0)
-		return () => clearTimeout(timer)
-	}, [colorMode, 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 = editor.getInstanceState().devicePixelRatio
-			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/DefaultBrush.tsx

@@ -1,35 +0,0 @@
-import { BoxModel } from '@tldraw/tlschema'
-import { useRef } from 'react'
-import { useTransform } from '../../hooks/useTransform'
-import { toDomPrecision } from '../../primitives/utils'
-
-/** @public */
-export interface TLBrushProps {
-	userId?: string
-	brush: BoxModel
-	color?: string
-	opacity?: number
-	className?: string
-}
-
-/** @public @react */
-export const DefaultBrush = ({ brush, color, opacity, className }: TLBrushProps) => {
-	const rSvg = useRef<SVGSVGElement>(null)
-	useTransform(rSvg, brush.x, brush.y)
-
-	const w = toDomPrecision(Math.max(1, brush.w))
-	const h = toDomPrecision(Math.max(1, brush.h))
-
-	return (
-		<svg className="tl-overlays__item" ref={rSvg} aria-hidden="true">
-			{color ? (
-				<g className="tl-brush" opacity={opacity}>
-					<rect width={w} height={h} fill={color} opacity={0.75} />
-					<rect width={w} height={h} fill="none" stroke={color} opacity={0.1} />
-				</g>
-			) : (
-				<rect className={`tl-brush tl-brush__default ${className}`} width={w} height={h} />
-			)}
-		</svg>
-	)
-}

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

@@ -1,52 +0,0 @@
-import { VecModel } from '@tldraw/tlschema'
-import classNames from 'classnames'
-import { useRef } from 'react'
-import { useSharedSafeId } from '../../hooks/useSafeId'
-import { useTransform } from '../../hooks/useTransform'
-import { Box } from '../../primitives/Box'
-import { clamp } from '../../primitives/utils'
-import { Vec } from '../../primitives/Vec'
-
-/** @public */
-export interface TLCollaboratorHintProps {
-	userId: string
-	className?: string
-	point: VecModel
-	viewport: Box
-	zoom: number
-	opacity?: number
-	color: string
-}
-
-/** @public @react */
-export function DefaultCollaboratorHint({
-	className,
-	zoom,
-	point,
-	color,
-	viewport,
-	opacity = 1,
-}: TLCollaboratorHintProps) {
-	const rSvg = useRef<SVGSVGElement>(null)
-
-	useTransform(
-		rSvg,
-		clamp(point.x, viewport.minX + 5 / zoom, viewport.maxX - 5 / zoom),
-		clamp(point.y, viewport.minY + 5 / zoom, viewport.maxY - 5 / zoom),
-		1 / zoom,
-		Vec.Angle(viewport.center, point)
-	)
-	const cursorHintId = useSharedSafeId('cursor_hint')
-
-	return (
-		<svg ref={rSvg} className={classNames('tl-overlays__item', className)} aria-hidden="true">
-			<use
-				href={`#${cursorHintId}`}
-				color={color}
-				strokeWidth={3}
-				stroke="var(--tl-color-background)"
-			/>
-			<use href={`#${cursorHintId}`} color={color} opacity={opacity} />
-		</svg>
-	)
-}

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

@@ -1,59 +0,0 @@
-import { VecModel } from '@tldraw/tlschema'
-import classNames from 'classnames'
-import { memo, useRef } from 'react'
-import { useSharedSafeId } from '../../hooks/useSafeId'
-import { useTransform } from '../../hooks/useTransform'
-
-/** @public */
-export interface TLCursorProps {
-	userId: string
-	className?: string
-	point: VecModel | null
-	zoom: number
-	color?: string
-	name: string | null
-	chatMessage: string
-}
-
-/** @public @react */
-export const DefaultCursor = memo(function DefaultCursor({
-	className,
-	zoom,
-	point,
-	color,
-	name,
-	chatMessage,
-}: TLCursorProps) {
-	const rCursor = useRef<HTMLDivElement>(null)
-	useTransform(rCursor, point?.x, point?.y, 1 / zoom)
-
-	const cursorId = useSharedSafeId('cursor')
-
-	if (!point) return null
-
-	return (
-		<div ref={rCursor} className={classNames('tl-overlays__item', className)}>
-			<svg className="tl-cursor" aria-hidden="true">
-				<use href={`#${cursorId}`} color={color} />
-			</svg>
-			{chatMessage ? (
-				<>
-					{name && (
-						<div className="tl-nametag-title" style={{ color }}>
-							{name}
-						</div>
-					)}
-					<div className="tl-nametag-chat" style={{ backgroundColor: color }}>
-						{chatMessage}
-					</div>
-				</>
-			) : (
-				name && (
-					<div className="tl-nametag" style={{ backgroundColor: color }}>
-						{name}
-					</div>
-				)
-			)}
-		</div>
-	)
-})

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

@@ -1,42 +0,0 @@
-import { TLHandle, TLShapeId } from '@tldraw/tlschema'
-import classNames from 'classnames'
-import { SIDES } from '../../constants'
-import { useEditor } from '../../hooks/useEditor'
-
-/** @public */
-export interface TLHandleProps {
-	shapeId: TLShapeId
-	handle: TLHandle
-	zoom: number
-	isCoarse: boolean
-	className?: string
-}
-
-/** @public @react */
-export function DefaultHandle({ handle, isCoarse, className, zoom }: TLHandleProps) {
-	const editor = useEditor()
-	const br = (isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoom
-
-	if (handle.type === 'clone') {
-		// bouba
-		const fr = 3 / zoom
-		const path = `M0,${-fr} A${fr},${fr} 0 0,1 0,${fr}`
-
-		const index = SIDES.indexOf(handle.id as (typeof SIDES)[number])
-		return (
-			<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
-				<circle className="tl-handle__bg" r={br} />
-				{/* Half circle */}
-				<path className="tl-handle__fg" d={path} transform={`rotate(${-90 + 90 * index})`} />
-			</g>
-		)
-	}
-
-	const fr = (handle.type === 'create' && isCoarse ? 3 : 4) / Math.max(zoom, 0.25)
-	return (
-		<g className={classNames(`tl-handle tl-handle__${handle.type}`, className)}>
-			<circle className="tl-handle__bg" r={br} />
-			<circle className="tl-handle__fg" r={fr} />
-		</g>
-	)
-}

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

@@ -1,15 +0,0 @@
-import { ReactNode } from 'react'
-
-/** @public */
-export interface TLHandlesProps {
-	children: ReactNode
-}
-
-/** @public @react */
-export const DefaultHandles = ({ children }: TLHandlesProps) => {
-	return (
-		<svg className="tl-user-handles tl-overlays__item" aria-hidden="true">
-			{children}
-		</svg>
-	)
-}