@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.1

package/src/lib/components/GeometryDebuggingView.tsx

@@ -1,108 +0,0 @@
-import { track } from '@tldraw/state-react'
-import { modulate } from '@tldraw/utils'
-import { useEditor } from '../hooks/useEditor'
-import { Geometry2d } from '../primitives/geometry/Geometry2d'
-import { Group2d } from '../primitives/geometry/Group2d'
-
-export const GeometryDebuggingView = track(function GeometryDebuggingView({
-	showStroke = true,
-	showVertices = true,
-	showClosestPointOnOutline = true,
-}: {
-	showStroke?: boolean
-	showVertices?: boolean
-	showClosestPointOnOutline?: boolean
-}) {
-	const editor = useEditor()
-
-	const zoomLevel = editor.getZoomLevel()
-	const renderingShapes = editor.getRenderingShapes()
-	const currentPagePoint = editor.inputs.getCurrentPagePoint()
-
-	return (
-		<svg
-			style={{
-				position: 'absolute',
-				pointerEvents: 'none',
-				zIndex: 999999999,
-				top: 0,
-				left: 0,
-				overflow: 'visible',
-			}}
-		>
-			{renderingShapes.map((result) => {
-				const shape = editor.getShape(result.id)!
-
-				if (shape.type === 'group') return null
-
-				const geometry = editor.getShapeGeometry(shape)
-				const pageTransform = editor.getShapePageTransform(shape)!
-
-				const pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint)
-				const nearestPointOnShape = geometry.nearestPoint(pointInShapeSpace)
-				const distanceToPoint = geometry.distanceToPoint(pointInShapeSpace, true)
-				const dist = Math.abs(distanceToPoint) * zoomLevel
-				const hitInside = distanceToPoint < 0
-
-				const { vertices } = geometry
-
-				return (
-					<g
-						key={result.id + '_outline'}
-						transform={pageTransform.toCssString()}
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						{showStroke && (
-							<g
-								stroke={geometry.debugColor ?? 'red'}
-								opacity="1"
-								strokeWidth={2 / zoomLevel}
-								fill="none"
-							>
-								<GeometryStroke geometry={geometry} />
-							</g>
-						)}
-						{showVertices &&
-							vertices.map((v, i) => (
-								<circle
-									key={`v${i}`}
-									cx={v.x}
-									cy={v.y}
-									r={2 / zoomLevel}
-									fill={`hsl(${modulate(i, [0, vertices.length - 1], [120, 200])}, 100%, 50%)`}
-									stroke="black"
-									strokeWidth={1 / zoomLevel}
-								/>
-							))}
-						{showClosestPointOnOutline && dist < 150 && (
-							<line
-								x1={nearestPointOnShape.x}
-								y1={nearestPointOnShape.y}
-								x2={pointInShapeSpace.x}
-								y2={pointInShapeSpace.y}
-								opacity={1 - dist / 150}
-								stroke={hitInside ? 'goldenrod' : 'dodgerblue'}
-								strokeWidth={2 / zoomLevel}
-							/>
-						)}
-					</g>
-				)
-			})}
-		</svg>
-	)
-})
-
-function GeometryStroke({ geometry }: { geometry: Geometry2d }) {
-	if (geometry instanceof Group2d) {
-		return (
-			<g stroke={geometry.debugColor}>
-				{[...geometry.children, ...geometry.ignoredChildren].map((child, i) => (
-					<GeometryStroke geometry={child} key={i} />
-				))}
-			</g>
-		)
-	}
-
-	return <path d={geometry.toSimpleSvgPath()} stroke={geometry.debugColor} />
-}

package/src/lib/components/LiveCollaborators.tsx

@@ -1,174 +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
-						// 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"
-							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,289 +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()
-	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>
-	)
-}