@tldraw/editor 4.6.0-next.fe1474dc57d8 → 5.0.0

package/src/index.ts

@@ -14,62 +14,24 @@ export * from '@tldraw/utils'
 export * from '@tldraw/validate'
 
 export { DefaultBackground } from './lib/components/default-components/DefaultBackground'
-export { DefaultBrush, type TLBrushProps } from './lib/components/default-components/DefaultBrush'
 export {
 	DefaultCanvas,
 	type TLCanvasComponentProps,
 } from './lib/components/default-components/DefaultCanvas'
-export {
-	DefaultCollaboratorHint,
-	type TLCollaboratorHintProps,
-} from './lib/components/default-components/DefaultCollaboratorHint'
-export {
-	DefaultCursor,
-	type TLCursorProps,
-} from './lib/components/default-components/DefaultCursor'
 export {
 	DefaultErrorFallback,
 	type TLErrorFallbackComponent,
 } from './lib/components/default-components/DefaultErrorFallback'
 export { DefaultGrid, type TLGridProps } from './lib/components/default-components/DefaultGrid'
-export {
-	DefaultHandle,
-	type TLHandleProps,
-} from './lib/components/default-components/DefaultHandle'
-export {
-	DefaultHandles,
-	type TLHandlesProps,
-} from './lib/components/default-components/DefaultHandles'
-export {
-	DefaultScribble,
-	type TLScribbleProps,
-} from './lib/components/default-components/DefaultScribble'
 export {
 	DefaultSelectionBackground,
 	type TLSelectionBackgroundProps,
 } from './lib/components/default-components/DefaultSelectionBackground'
-export {
-	DefaultSelectionForeground,
-	type TLSelectionForegroundProps,
-} from './lib/components/default-components/DefaultSelectionForeground'
 export { type TLShapeErrorFallbackComponent } from './lib/components/default-components/DefaultShapeErrorFallback'
-export {
-	DefaultShapeIndicator,
-	type TLShapeIndicatorProps,
-} from './lib/components/default-components/DefaultShapeIndicator'
-export { type TLShapeIndicatorErrorFallbackComponent } from './lib/components/default-components/DefaultShapeIndicatorErrorFallback'
-export {
-	DefaultShapeIndicators,
-	type TLShapeIndicatorsProps,
-} from './lib/components/default-components/DefaultShapeIndicators'
 export {
 	DefaultShapeWrapper,
 	type TLShapeWrapperProps,
 } from './lib/components/default-components/DefaultShapeWrapper'
-export {
-	DefaultSnapIndicator,
-	type TLSnapIndicatorProps,
-} from './lib/components/default-components/DefaultSnapIndictor'
 export { DefaultSpinner } from './lib/components/default-components/DefaultSpinner'
 export { DefaultSvgDefs } from './lib/components/default-components/DefaultSvgDefs'
 export {
@@ -174,6 +136,7 @@ export {
 export { DEFAULT_THEME } from './lib/editor/managers/ThemeManager/defaultThemes'
 export { ThemeManager, resolveThemes } from './lib/editor/managers/ThemeManager/ThemeManager'
 export { TickManager } from './lib/editor/managers/TickManager/TickManager'
+export { CollaboratorsManager } from './lib/editor/managers/CollaboratorsManager/CollaboratorsManager'
 export { PerformanceApiAdapter } from './lib/editor/managers/PerformanceManager/PerformanceApiAdapter'
 export { PerformanceManager } from './lib/editor/managers/PerformanceManager/PerformanceManager'
 export {
@@ -211,6 +174,22 @@ export {
 	type TLShapeUtilCanvasSvgDef,
 	type TLShapeUtilConstructor,
 } from './lib/editor/shapes/ShapeUtil'
+export {
+	getOverlayDisplayValues,
+	type OverlayOptionsWithDisplayValues,
+} from './lib/editor/overlays/getOverlayDisplayValues'
+export { OverlayManager, type TLOverlayEntry } from './lib/editor/overlays/OverlayManager'
+export {
+	OverlayUtil,
+	type TLAnyOverlayUtilConstructor,
+	type TLOverlay,
+	type TLOverlayUtilConstructor,
+} from './lib/editor/overlays/OverlayUtil'
+export {
+	ShapeIndicatorOverlayUtil,
+	strokeShapeIndicators,
+	type TLShapeIndicatorOverlay,
+} from './lib/editor/overlays/ShapeIndicatorOverlayUtil'
 export {
 	getPerfectDashProps,
 	type PerfectDashTerminal,
@@ -345,7 +324,6 @@ export {
 	useUniqueSafeId,
 	type SafeId,
 } from './lib/hooks/useSafeId'
-export { useSelectionEvents } from './lib/hooks/useSelectionEvents'
 export { useTLSchemaFromUtils, useTLStore } from './lib/hooks/useTLStore'
 export { useTransform } from './lib/hooks/useTransform'
 export { useViewportHeight } from './lib/hooks/useViewportHeight'

package/src/lib/TldrawEditor.tsx

@@ -33,6 +33,7 @@ import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
 import { TLEditorSnapshot } from './config/TLEditorSnapshot'
 import { Editor } from './editor/Editor'
 import { resolveThemes } from './editor/managers/ThemeManager/ThemeManager'
+import { TLAnyOverlayUtilConstructor } from './editor/overlays/OverlayUtil'
 import { TLStateNodeConstructor } from './editor/tools/StateNode'
 import { TLCameraOptions } from './editor/types/misc-types'
 import { useEditorComponents } from './hooks/EditorComponentsContext'
@@ -137,6 +138,11 @@ export interface TldrawEditorBaseProps {
 	 */
 	assetUtils?: readonly TLAnyAssetUtilConstructor[]
 
+	/**
+	 * An array of overlay utils to use in the editor for canvas overlay UI elements.
+	 */
+	overlayUtils?: readonly TLAnyOverlayUtilConstructor[]
+
 	/**
 	 * An array of tools to add to the editor's state chart.
 	 */
@@ -461,6 +467,7 @@ function TldrawEditorWithReadyStore({
 	shapeUtils,
 	bindingUtils,
 	assetUtils,
+	overlayUtils,
 	user,
 	initialState,
 	autoFocus = true,
@@ -532,6 +539,7 @@ function TldrawEditorWithReadyStore({
 				shapeUtils,
 				bindingUtils,
 				assetUtils,
+				overlayUtils,
 				tools,
 				getContainer: () => container,
 				user,
@@ -575,6 +583,7 @@ function TldrawEditorWithReadyStore({
 			colorScheme,
 			container,
 			options,
+			overlayUtils,
 			shapeUtils,
 			store,
 			tools,

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

@@ -0,0 +1,208 @@
+import { EffectScheduler, computed } from '@tldraw/state'
+import { memo, useEffect, useRef } from 'react'
+import { useEditor } from '../../hooks/useEditor'
+import { Geometry2d } from '../../primitives/geometry/Geometry2d'
+import { Group2d } from '../../primitives/geometry/Group2d'
+import { debugFlags } from '../../utils/debug-flags'
+
+interface RenderInputs {
+	dpr: number
+	w: number
+	h: number
+	cx: number
+	cy: number
+	zoom: number
+}
+
+/** @internal @react */
+export const CanvasOverlays = memo(function CanvasOverlays() {
+	const editor = useEditor()
+	const canvasRef = useRef<HTMLCanvasElement>(null)
+
+	useEffect(() => {
+		// Bundle the primitive scalars the renderer needs into one computed so the
+		// effect only refires on actual visual change. Reading the whole instance
+		// state directly would otherwise wake the renderer on every cursor move,
+		// brush update, etc.
+
+		const renderInputs$ = computed<RenderInputs>(
+			'canvas overlays render inputs',
+			() => {
+				const instance = editor.getInstanceState()
+				const camera = editor.getCamera()
+				return {
+					dpr: instance.devicePixelRatio,
+					w: instance.screenBounds.w,
+					h: instance.screenBounds.h,
+					cx: camera.x,
+					cy: camera.y,
+					zoom: camera.z,
+				}
+			},
+			{
+				isEqual: (a, b) =>
+					a.dpr === b.dpr &&
+					a.w === b.w &&
+					a.h === b.h &&
+					a.cx === b.cx &&
+					a.cy === b.cy &&
+					a.zoom === b.zoom,
+			}
+		)
+
+		const scheduler = new EffectScheduler('canvas overlays render', () => {
+			const canvas = canvasRef.current
+			if (!canvas) return
+
+			const ctx = canvas.getContext('2d')
+			if (!ctx) return
+
+			const { dpr, w, h, cx, cy, zoom } = renderInputs$.get()
+
+			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.setTransform(1, 0, 0, 1, 0, 0)
+			ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+			// One setTransform = DPR scale * zoom scale * camera translate, into page space.
+			const s = dpr * zoom
+			ctx.setTransform(s, 0, 0, s, s * cx, s * cy)
+
+			// Render all active overlay utils in zIndex order (low to high).
+			for (const { util, overlays } of editor.overlays.getActiveOverlayEntries()) {
+				ctx.save()
+				util.render(ctx, overlays)
+				ctx.restore()
+			}
+
+			// Debug: draw all geometry
+			if (debugFlags.debugGeometry.get()) {
+				const currentPagePoint = editor.inputs.getCurrentPagePoint()
+
+				// Shape geometries
+				const renderingShapes = editor.getRenderingShapes()
+				for (const result of renderingShapes) {
+					const shape = editor.getShape(result.id)
+					if (!shape || shape.type === 'group') continue
+
+					const geometry = editor.getShapeGeometry(shape)
+					const pageTransform = editor.getShapePageTransform(shape)
+					if (!pageTransform) continue
+
+					ctx.save()
+					const m = pageTransform
+					ctx.transform(m.a, m.b, m.c, m.d, m.e, m.f)
+
+					// Outline
+					ctx.strokeStyle = geometry.debugColor ?? 'red'
+					ctx.lineWidth = 2 / zoom
+					ctx.fillStyle = 'none'
+					drawGeometryStroke(ctx, geometry)
+
+					// Vertices
+					const { vertices } = geometry
+					for (let i = 0; i < vertices.length; i++) {
+						const v = vertices[i]
+						const hue = vertices.length > 1 ? 120 + ((200 - 120) * i) / (vertices.length - 1) : 160
+						ctx.fillStyle = `hsl(${hue}, 100%, 50%)`
+						ctx.strokeStyle = 'black'
+						ctx.lineWidth = 1 / zoom
+						ctx.beginPath()
+						ctx.arc(v.x, v.y, 2 / zoom, 0, Math.PI * 2)
+						ctx.fill()
+						ctx.stroke()
+					}
+
+					// Nearest point line
+					const pointInShapeSpace = editor.getPointInShapeSpace(shape, currentPagePoint)
+					const dist = Math.abs(geometry.distanceToPoint(pointInShapeSpace, true)) * zoom
+					if (dist < 150) {
+						const nearestPoint = geometry.nearestPoint(pointInShapeSpace)
+						const hitInside = geometry.distanceToPoint(pointInShapeSpace, true) < 0
+						ctx.strokeStyle = hitInside ? 'goldenrod' : 'dodgerblue'
+						ctx.lineWidth = 2 / zoom
+						ctx.globalAlpha = 1 - dist / 150
+						ctx.beginPath()
+						ctx.moveTo(nearestPoint.x, nearestPoint.y)
+						ctx.lineTo(pointInShapeSpace.x, pointInShapeSpace.y)
+						ctx.stroke()
+						ctx.globalAlpha = 1
+					}
+
+					ctx.restore()
+				}
+
+				// Overlay hit-test geometries
+				ctx.save()
+				ctx.strokeStyle = 'magenta'
+				ctx.fillStyle = 'rgba(255, 0, 255, 0.1)'
+				ctx.lineWidth = 1 / zoom
+				for (const { overlays } of editor.overlays.getActiveOverlayEntries()) {
+					for (const overlay of overlays) {
+						const geometry = editor.overlays.getOverlayGeometry(overlay)
+						if (!geometry) continue
+						const vertices = geometry.vertices
+						if (vertices.length < 2) continue
+						ctx.beginPath()
+						ctx.moveTo(vertices[0].x, vertices[0].y)
+						for (let i = 1; i < vertices.length; i++) {
+							ctx.lineTo(vertices[i].x, vertices[i].y)
+						}
+						if (geometry.isClosed) {
+							ctx.closePath()
+							ctx.fill()
+						}
+						ctx.stroke()
+						for (const v of vertices) {
+							ctx.beginPath()
+							ctx.arc(v.x, v.y, 2 / zoom, 0, Math.PI * 2)
+							ctx.fill()
+						}
+					}
+				}
+				ctx.restore()
+			}
+		})
+
+		scheduler.attach()
+		scheduler.execute()
+		return () => scheduler.detach()
+	}, [editor])
+
+	return <canvas ref={canvasRef} className="tl-canvas-overlays" />
+})
+
+function drawGeometryStroke(ctx: CanvasRenderingContext2D, geometry: Geometry2d) {
+	if (geometry instanceof Group2d) {
+		const prevStroke = ctx.strokeStyle
+		for (const child of geometry.children) {
+			if (child.debugColor) ctx.strokeStyle = child.debugColor
+			drawGeometryStroke(ctx, child)
+			ctx.strokeStyle = prevStroke
+		}
+		for (const child of geometry.ignoredChildren) {
+			if (child.debugColor) ctx.strokeStyle = child.debugColor
+			drawGeometryStroke(ctx, child)
+			ctx.strokeStyle = prevStroke
+		}
+		return
+	}
+
+	const vertices = geometry.vertices
+	if (vertices.length < 2) return
+	ctx.beginPath()
+	ctx.moveTo(vertices[0].x, vertices[0].y)
+	for (let i = 1; i < vertices.length; i++) {
+		ctx.lineTo(vertices[i].x, vertices[i].y)
+	}
+	if (geometry.isClosed) ctx.closePath()
+	ctx.stroke()
+}