@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.1

package/src/lib/components/MenuClickCapture.tsx

@@ -1,8 +1,10 @@
 import { useValue } from '@tldraw/state-react'
-import { PointerEvent, useCallback, useRef, useState } from 'react'
+import { type PointerEvent, useCallback, useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
 import { useCanvasEvents } from '../hooks/useCanvasEvents'
 import { useEditor } from '../hooks/useEditor'
 import { Vec } from '../primitives/Vec'
+import { releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 
 /**
@@ -13,115 +15,173 @@ import { getPointerInfo } from '../utils/getPointerInfo'
 export function MenuClickCapture() {
 	const editor = useEditor()
 
-	// Whether any menus are open
 	const isMenuOpen = useValue('is menu open', () => editor.menus.hasAnyOpenMenus(), [editor])
 
-	// Whether we're pointing or not—keep this component visible if we're pointing
+	// Keep this component mounted while the pointer is down so pointerup/move still
+	// land here after a synchronous clearOpenMenus() flips isMenuOpen to false.
 	const [isPointing, setIsPointing] = useState(false)
-
 	const showElement = isMenuOpen || isPointing
 
-	// Get the same events that we use on the canvas
 	const canvasEvents = useCanvasEvents()
 
-	// Keep track of the pointer state
 	const rPointerState = useRef({
 		isDown: false,
 		isDragging: false,
+		button: 0,
 		start: new Vec(),
 	})
 
+	// Swallow the native contextmenu that follows a right-click pointerdown. Without
+	// this, Radix's trigger catches the native event and opens a menu at the pointer-
+	// DOWN position — then our own synthetic contextmenu (fired on pointerup) opens it
+	// again at the release position, producing a visible flash.
+	const rCancelContextMenuSwallow = useRef<null | (() => void)>(null)
+	useEffect(
+		() => () => {
+			rCancelContextMenuSwallow.current?.()
+			rCancelContextMenuSwallow.current = null
+		},
+		[]
+	)
+	const swallowNextNativeContextMenu = useCallback(() => {
+		rCancelContextMenuSwallow.current?.()
+		const doc = editor.getContainerDocument()
+		const onContextMenu = (event: MouseEvent) => {
+			// Skip our own synthetic contextmenu — only swallow the real browser one
+			if (!event.isTrusted) return
+			rCancelContextMenuSwallow.current?.()
+			rCancelContextMenuSwallow.current = null
+			event.preventDefault()
+			event.stopImmediatePropagation()
+		}
+		const cancel = () => doc.removeEventListener('contextmenu', onContextMenu, true)
+		rCancelContextMenuSwallow.current = cancel
+		doc.addEventListener('contextmenu', onContextMenu, true)
+		// Drop the listener on the next tick if it never fires (e.g. pointer moved off-screen)
+		doc.defaultView?.setTimeout(() => {
+			if (rCancelContextMenuSwallow.current === cancel) {
+				cancel()
+				rCancelContextMenuSwallow.current = null
+			}
+		}, 0)
+	}, [editor])
+
 	const handlePointerDown = useCallback(
 		(e: PointerEvent) => {
-			if (e.button === 0) {
-				setIsPointing(true)
-				rPointerState.current = {
-					isDown: true,
-					isDragging: false,
-					start: new Vec(e.clientX, e.clientY),
-				}
-				rDidAPointerDownAndDragWhileMenuWasOpen.current = false
+			if (e.button !== 0 && e.button !== 2) return
+
+			flushSync(() => setIsPointing(true))
+			setPointerCapture(e.currentTarget, e)
+			rPointerState.current = {
+				isDown: true,
+				isDragging: false,
+				button: e.button,
+				start: new Vec(e.clientX, e.clientY),
 			}
+
 			if (e.button === 2) {
-				// Swallow the contextmenu event that follows this right-click pointerdown.
-				// clearOpenMenus() below triggers a synchronous render that unmounts this
-				// component, so our React onContextMenu handler won't be around to catch it.
-				// Without this, the contextmenu event reaches the Radix Trigger and briefly
-				// opens a new context menu (which then immediately dismisses — causing a flash).
-				const ownerDocument = editor.getContainerDocument()
-				ownerDocument.addEventListener(
-					'contextmenu',
-					(event) => {
-						event.preventDefault()
-						event.stopImmediatePropagation()
-					},
-					{ capture: true, once: true }
-				)
+				if (!editor.options.rightClickPanning) {
+					// Right-click panning off: close the open menu and swallow the native
+					// contextmenu that would otherwise briefly open a new one (causing a flash).
+					swallowNextNativeContextMenu()
+					editor.menus.clearOpenMenus()
+					return
+				}
+				// Forward right-click pointerdown through the canvas's own handler so
+				// pointer capture is also set on the canvas (load-bearing: without this
+				// the context menu briefly flashes closed during consecutive right-clicks).
+				// We don't clearOpenMenus() — Radix's DismissableLayer closes the menu
+				// via outside-click detection, keeping its internal state in sync.
+				const canvas =
+					editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas') ?? e.currentTarget
+				canvasEvents.onPointerDown?.({ ...e, currentTarget: canvas })
+				swallowNextNativeContextMenu()
+				return
 			}
+
 			editor.menus.clearOpenMenus()
 		},
-		[editor]
+		[canvasEvents, editor, swallowNextNativeContextMenu]
 	)
 
-	const rDidAPointerDownAndDragWhileMenuWasOpen = useRef(false)
-
 	const handlePointerMove = useCallback(
 		(e: PointerEvent) => {
-			// Do nothing unless we're pointing
-			if (!rPointerState.current.isDown) return
+			const state = rPointerState.current
+			if (!state.isDown) return
 
-			// call the onPointerDown with the original pointer position
-			const { x, y } = rPointerState.current.start
-
-			if (!rDidAPointerDownAndDragWhileMenuWasOpen.current) {
+			// Left-click: wait for the drag threshold before forwarding anything, then
+			// replay pointerdown at the original start so the editor records the
+			// correct drag origin. Right-click forwards moves immediately (pointerdown
+			// was already dispatched in handlePointerDown).
+			if (state.button !== 2 && !state.isDragging) {
 				if (
-					// We're pointing, but are we dragging?
-					Vec.Dist2(rPointerState.current.start, new Vec(e.clientX, e.clientY)) >
+					Vec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <=
 					editor.options.dragDistanceSquared
 				) {
-					rDidAPointerDownAndDragWhileMenuWasOpen.current = true
-					// Wehaddaeventitsadrag
-					rPointerState.current = {
-						...rPointerState.current,
-						isDown: true,
-						isDragging: true,
-					}
-					canvasEvents.onPointerDown?.({
-						...e,
-						clientX: x,
-						clientY: y,
-						button: 0,
-					})
+					return
 				}
-			}
-
-			if (rDidAPointerDownAndDragWhileMenuWasOpen.current) {
+				state.isDragging = true
 				editor.dispatch({
 					type: 'pointer',
 					target: 'canvas',
-					name: 'pointer_move',
-					...getPointerInfo(editor, e),
+					name: 'pointer_down',
+					...getPointerInfo(editor, { ...e, clientX: state.start.x, clientY: state.start.y }),
 				})
 			}
+
+			editor.dispatch({
+				type: 'pointer',
+				target: 'canvas',
+				name: 'pointer_move',
+				...getPointerInfo(editor, e),
+			})
 		},
-		[canvasEvents, editor]
+		[editor]
 	)
 
 	const handlePointerUp = useCallback(
 		(e: PointerEvent) => {
-			// Run the pointer up
-			canvasEvents.onPointerUp?.(e)
-			// Then turn off pointing
+			const isStaticRightClick = e.button === 2 && !rPointerState.current.isDragging
+
+			editor.dispatch({
+				type: 'pointer',
+				target: 'canvas',
+				name: 'pointer_up',
+				...getPointerInfo(editor, e),
+			})
+
+			if (isStaticRightClick && editor.options.rightClickPanning) {
+				// Dispatch contextmenu on the canvas's parent (Radix's trigger) so the
+				// menu opens at the release position. Bypassing the canvas avoids its
+				// own onContextMenu handler, which preventDefaults non-synthesized events.
+				const canvas = editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas')
+				const trigger = canvas?.parentElement ?? e.currentTarget
+				editor.timers.requestAnimationFrame(() => {
+					trigger.dispatchEvent(
+						new PointerEvent('contextmenu', {
+							bubbles: true,
+							clientX: e.clientX,
+							clientY: e.clientY,
+							button: 2,
+							buttons: 0,
+							pointerId: e.pointerId,
+							pointerType: e.pointerType,
+							isPrimary: e.isPrimary,
+						})
+					)
+				})
+			}
+
+			releasePointerCapture(e.currentTarget, e)
 			setIsPointing(false)
-			// Reset the pointer state
 			rPointerState.current = {
 				isDown: false,
 				isDragging: false,
+				button: 0,
 				start: new Vec(e.clientX, e.clientY),
 			}
-			rDidAPointerDownAndDragWhileMenuWasOpen.current = false
 		},
-		[canvasEvents]
+		[editor]
 	)
 
 	return (

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()
+}