@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.0

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

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

@@ -1,31 +0,0 @@
-import { TLScribble } from '@tldraw/tlschema'
-import classNames from 'classnames'
-import { getSvgPathFromPoints } from '../../utils/getSvgPathFromPoints'
-
-/** @public */
-export interface TLScribbleProps {
-	userId?: string
-	scribble: TLScribble
-	zoom: number
-	color?: string
-	opacity?: number
-	className?: string
-}
-
-/** @public @react */
-export function DefaultScribble({ scribble, zoom, color, opacity, className }: TLScribbleProps) {
-	if (!scribble.points.length) return null
-
-	return (
-		<svg className={className ? classNames('tl-overlays__item', className) : className}>
-			<path
-				className="tl-scribble"
-				d={getSvgPathFromPoints(scribble.points, false)}
-				stroke={color ?? `var(--tl-color-${scribble.color})`}
-				fill="none"
-				strokeWidth={8 / zoom}
-				opacity={opacity ?? scribble.opacity}
-			/>
-		</svg>
-	)
-}

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

@@ -1,50 +0,0 @@
-import { useValue } from '@tldraw/state-react'
-import classNames from 'classnames'
-import { useRef } from 'react'
-import { useEditor } from '../../hooks/useEditor'
-import { useTransform } from '../../hooks/useTransform'
-import { Box } from '../../primitives/Box'
-import { toDomPrecision } from '../../primitives/utils'
-
-/** @public */
-export interface TLSelectionForegroundProps {
-	bounds: Box
-	rotation: number
-}
-
-/** @public @react */
-export function DefaultSelectionForeground({ bounds, rotation }: TLSelectionForegroundProps) {
-	const editor = useEditor()
-	const rSvg = useRef<SVGSVGElement>(null)
-
-	const onlyShape = useValue('only selected shape', () => editor.getOnlySelectedShape(), [editor])
-
-	// if all shapes have an expandBy for the selection outline, we can expand by the l
-	const expandOutlineBy = onlyShape
-		? editor.getShapeUtil(onlyShape).expandSelectionOutlinePx(onlyShape)
-		: 0
-
-	useTransform(rSvg, bounds?.x, bounds?.y, 1, rotation, {
-		x: -expandOutlineBy,
-		y: -expandOutlineBy,
-	})
-
-	bounds =
-		expandOutlineBy instanceof Box
-			? bounds.clone().expand(expandOutlineBy).zeroFix()
-			: bounds.clone().expandBy(expandOutlineBy).zeroFix()
-
-	return (
-		<svg
-			ref={rSvg}
-			className="tl-overlays__item tl-selection__fg"
-			data-testid="selection-foreground"
-		>
-			<rect
-				className={classNames('tl-selection__fg__outline')}
-				width={toDomPrecision(bounds.width)}
-				height={toDomPrecision(bounds.height)}
-			/>
-		</svg>
-	)
-}

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

@@ -1,104 +0,0 @@
-import { useQuickReactor, useStateTracking, useValue } from '@tldraw/state-react'
-import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import classNames from 'classnames'
-import { memo, useLayoutEffect, useRef } from 'react'
-import type { Editor } from '../../editor/Editor'
-import { ShapeUtil } from '../../editor/shapes/ShapeUtil'
-import { useEditorComponents } from '../../hooks/EditorComponentsContext'
-import { useEditor } from '../../hooks/useEditor'
-import { OptionalErrorBoundary } from '../ErrorBoundary'
-
-// need an extra layer of indirection here to allow hooks to be used inside the indicator render
-const EvenInnererIndicator = memo(
-	({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
-		return useStateTracking('Indicator: ' + shape.type, () =>
-			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-			// calling the render method with stale data.
-			util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
-		)
-	},
-	(prevProps, nextProps) => {
-		return (
-			prevProps.shape.props === nextProps.shape.props &&
-			prevProps.shape.meta === nextProps.shape.meta
-		)
-	}
-)
-
-const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {
-	const shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])
-
-	const { ShapeIndicatorErrorFallback } = useEditorComponents()
-
-	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}
-			onError={(error) =>
-				editor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })
-			}
-		>
-			<EvenInnererIndicator key={shape.id} shape={shape} util={util} />
-		</OptionalErrorBoundary>
-	)
-})
-
-/** @public */
-export interface TLShapeIndicatorProps {
-	userId?: string
-	shapeId: TLShapeId
-	color?: string | undefined
-	opacity?: number
-	className?: string
-	hidden?: boolean
-}
-
-/** @public @react */
-export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
-	shapeId,
-	className,
-	color,
-	hidden,
-	opacity,
-}: TLShapeIndicatorProps) {
-	const editor = useEditor()
-
-	const rIndicator = useRef<SVGSVGElement>(null)
-
-	useQuickReactor(
-		'indicator transform',
-		() => {
-			if (hidden) return
-			const elm = rIndicator.current
-			if (!elm) return
-			const pageTransform = editor.getShapePageTransform(shapeId)
-			if (!pageTransform) return
-			elm.style.setProperty('transform', pageTransform.toCssString())
-		},
-		[editor, shapeId, hidden]
-	)
-
-	useLayoutEffect(() => {
-		const elm = rIndicator.current
-		if (!elm) return
-		elm.style.setProperty('display', hidden ? 'none' : 'block')
-	}, [hidden])
-
-	return (
-		<svg ref={rIndicator} className={classNames('tl-overlays__item', className)} aria-hidden="true">
-			<g
-				className="tl-shape-indicator"
-				stroke={color ?? 'var(--tl-color-selected)'}
-				opacity={opacity}
-			>
-				<InnerIndicator editor={editor} id={shapeId} />
-			</g>
-		</svg>
-	)
-})

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

@@ -1,9 +0,0 @@
-import { ComponentType } from 'react'
-
-/** @public */
-export type TLShapeIndicatorErrorFallbackComponent = ComponentType<{ error: unknown }>
-
-/** @internal */
-export const DefaultShapeIndicatorErrorFallback: TLShapeIndicatorErrorFallbackComponent = () => {
-	return <circle cx={4} cy={4} r={8} strokeWidth="1" stroke="red" />
-}

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

@@ -1,116 +0,0 @@
-import { useValue } from '@tldraw/state-react'
-import { TLShapeId } from '@tldraw/tlschema'
-import { memo, useRef } from 'react'
-import { useEditorComponents } from '../../hooks/EditorComponentsContext'
-import { useEditor } from '../../hooks/useEditor'
-
-/** @public */
-export interface TLShapeIndicatorsProps {
-	/** Whether to hide all of the indicators */
-	hideAll?: boolean
-	/** Whether to show all of the indicators */
-	showAll?: boolean
-}
-
-/** @public @react */
-export const DefaultShapeIndicators = memo(function DefaultShapeIndicators({
-	hideAll,
-	showAll,
-}: TLShapeIndicatorsProps) {
-	const editor = useEditor()
-
-	if (hideAll && showAll)
-		throw Error('You cannot set both hideAll and showAll props to true, cmon now')
-
-	const rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())
-
-	const idsToDisplay = useValue(
-		'should display selected ids',
-		() => {
-			const prev = rPreviousSelectedShapeIds.current
-			const next = new Set<TLShapeId>()
-
-			const instanceState = editor.getInstanceState()
-
-			const isChangingStyle = instanceState.isChangingStyle
-
-			// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?
-
-			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'
-			)
-
-			// We hide all indicators if we're changing style or in certain interactions
-			// todo: move this to some kind of Tool.hideIndicators property
-			if (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {
-				rPreviousSelectedShapeIds.current = next
-				return next
-			}
-
-			// We always want to show indicators for the selected shapes, if any
-			for (const id of editor.getSelectedShapeIds()) {
-				next.add(id)
-			}
-
-			// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any
-			if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
-				const hovered = editor.getHoveredShapeId()
-				if (hovered) next.add(hovered)
-			}
-
-			// Ok, has anything changed?
-
-			// If the number of items in the set is different, then the selection has changed. This catches most changes.
-			if (prev.size !== next.size) {
-				rPreviousSelectedShapeIds.current = next
-				return next
-			}
-
-			// Set difference check
-			for (const id of next) {
-				if (!prev.has(id)) {
-					rPreviousSelectedShapeIds.current = next
-					return next
-				}
-			}
-
-			return prev
-		},
-		[editor]
-	)
-
-	// Show indicators only for the shapes that are currently being rendered (ie that are on screen)
-	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 shapesToRender.map(({ id }) => (
-		<ShapeIndicator
-			key={id + '_indicator'}
-			shapeId={id}
-			hidden={!showAll && (hideAll || !idsToDisplay.has(id))}
-		/>
-	))
-})

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

@@ -1,174 +0,0 @@
-import classNames from 'classnames'
-import * as React from 'react'
-import {
-	type GapsSnapIndicator,
-	type PointsSnapIndicator,
-	type SnapIndicator,
-} from '../../editor/managers/SnapManager/SnapManager'
-import { rangeIntersection } from '../../primitives/utils'
-
-function PointsSnapIndicator({ points, zoom }: { zoom: number } & PointsSnapIndicator) {
-	const l = 2.5 / zoom
-
-	const minX = points.reduce((acc, p) => Math.min(acc, p.x), Infinity)
-	const maxX = points.reduce((acc, p) => Math.max(acc, p.x), -Infinity)
-	const minY = points.reduce((acc, p) => Math.min(acc, p.y), Infinity)
-	const maxY = points.reduce((acc, p) => Math.max(acc, p.y), -Infinity)
-
-	const useNWtoSEdireciton = points.some((p) => p.x === minX && p.y === minY)
-	let firstX: number, firstY: number, secondX: number, secondY: number
-	if (useNWtoSEdireciton) {
-		firstX = minX
-		firstY = minY
-		secondX = maxX
-		secondY = maxY
-	} else {
-		firstX = minX
-		firstY = maxY
-		secondX = maxX
-		secondY = minY
-	}
-
-	return (
-		<g className="tl-snap-indicator" stroke="lime">
-			<line x1={firstX} y1={firstY} x2={secondX} y2={secondY} />
-			{points.map((p, i) => (
-				<g transform={`translate(${p.x},${p.y})`} key={i}>
-					<path
-						className="tl-snap-point"
-						d={`M ${-l},${-l} L ${l},${l} M ${-l},${l} L ${l},${-l}`}
-					/>
-				</g>
-			))}
-		</g>
-	)
-}
-
-function GapsSnapIndicator({ gaps, direction, zoom }: { zoom: number } & GapsSnapIndicator) {
-	const l = 3.5 / zoom
-
-	let edgeIntersection: number[] | null = [-Infinity, +Infinity]
-	let nextEdgeIntersection: number[] | null = null
-
-	const horizontal = direction === 'horizontal'
-
-	// find intersection of all gaps so we can render a straight line through it;
-	// some range intersections may return null, in which case we skip that gap.
-	for (const gap of gaps) {
-		nextEdgeIntersection = rangeIntersection(
-			edgeIntersection[0],
-			edgeIntersection[1],
-			horizontal ? gap.startEdge[0].y : gap.startEdge[0].x,
-			horizontal ? gap.startEdge[1].y : gap.startEdge[1].x
-		)
-
-		if (nextEdgeIntersection) {
-			edgeIntersection = nextEdgeIntersection
-		} else {
-			continue
-		}
-
-		nextEdgeIntersection = rangeIntersection(
-			edgeIntersection[0],
-			edgeIntersection[1],
-			horizontal ? gap.endEdge[0].y : gap.endEdge[0].x,
-			horizontal ? gap.endEdge[1].y : gap.endEdge[1].x
-		)
-
-		if (nextEdgeIntersection) {
-			edgeIntersection = nextEdgeIntersection
-		} else {
-			continue
-		}
-	}
-
-	if (edgeIntersection === null) {
-		return null
-	}
-
-	const midPoint = (edgeIntersection[0] + edgeIntersection[1]) / 2
-
-	return (
-		<g className="tl-snap-indicator" stroke="cyan">
-			{gaps.map(({ startEdge, endEdge }, i) => (
-				<React.Fragment key={i}>
-					{horizontal ? (
-						// horizontal gap
-						<>
-							{/* start edge */}
-							<line
-								x1={startEdge[0].x}
-								y1={midPoint - 2 * l}
-								x2={startEdge[1].x}
-								y2={midPoint + 2 * l}
-							/>
-							{/* end edge */}
-							<line
-								x1={endEdge[0].x}
-								y1={midPoint - 2 * l}
-								x2={endEdge[1].x}
-								y2={midPoint + 2 * l}
-							/>
-							{/* joining line */}
-							<line x1={startEdge[0].x} y1={midPoint} x2={endEdge[0].x} y2={midPoint} />
-							{/* center point marker */}
-							<line
-								x1={(startEdge[0].x + endEdge[0].x) / 2}
-								y1={midPoint - l}
-								x2={(startEdge[0].x + endEdge[0].x) / 2}
-								y2={midPoint + l}
-							/>
-						</>
-					) : (
-						// vertical gap
-						<>
-							{/* start edge */}
-							<line
-								x1={midPoint - 2 * l}
-								y1={startEdge[0].y}
-								x2={midPoint + 2 * l}
-								y2={startEdge[1].y}
-							/>
-							{/* end edge */}
-							<line
-								x1={midPoint - 2 * l}
-								y1={endEdge[0].y}
-								x2={midPoint + 2 * l}
-								y2={endEdge[1].y}
-							/>
-							{/* joining line */}
-							<line x1={midPoint} y1={startEdge[0].y} x2={midPoint} y2={endEdge[0].y} />
-							{/* center point marker */}
-							<line
-								x1={midPoint - l}
-								y1={(startEdge[0].y + endEdge[0].y) / 2}
-								x2={midPoint + l}
-								y2={(startEdge[0].y + endEdge[0].y) / 2}
-							/>
-						</>
-					)}
-				</React.Fragment>
-			))}
-		</g>
-	)
-}
-
-/** @public */
-export interface TLSnapIndicatorProps {
-	className?: string
-	line: SnapIndicator
-	zoom: number
-}
-
-/** @public @react */
-export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps) {
-	return (
-		<svg className={classNames('tl-overlays__item', className)} aria-hidden="true">
-			{line.type === 'points' ? (
-				<PointsSnapIndicator {...line} zoom={zoom} />
-			) : line.type === 'gaps' ? (
-				<GapsSnapIndicator {...line} zoom={zoom} />
-			) : null}
-		</svg>
-	)
-}

package/src/lib/hooks/useHandleEvents.ts

@@ -1,88 +0,0 @@
-import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'
-import * as React from 'react'
-import { Editor } from '../editor/Editor'
-import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'
-import { getPointerInfo } from '../utils/getPointerInfo'
-import { useEditor } from './useEditor'
-
-function getHandle(editor: Editor, id: TLShapeId, handleId: string) {
-	const shape = editor.getShape<TLArrowShape | TLLineShape>(id)!
-	const handles = editor.getShapeHandles(shape)!
-	return { shape, handle: handles.find((h) => h.id === handleId) }
-}
-
-export function useHandleEvents(id: TLShapeId, handleId: string) {
-	const editor = useEditor()
-
-	return React.useMemo(() => {
-		const onPointerDown = (e: React.PointerEvent) => {
-			if (editor.wasEventAlreadyHandled(e)) return
-
-			// Must set pointer capture on an HTML element!
-			const target = loopToHtmlElement(e.currentTarget)
-			setPointerCapture(target, e)
-
-			const { shape, handle } = getHandle(editor, id, handleId)
-
-			if (!handle) return
-
-			editor.dispatch({
-				type: 'pointer',
-				target: 'handle',
-				handle,
-				shape,
-				name: 'pointer_down',
-				...getPointerInfo(editor, e),
-			})
-		}
-
-		// Track the last screen point
-		let lastX: number, lastY: number
-
-		const onPointerMove = (e: React.PointerEvent) => {
-			if (editor.wasEventAlreadyHandled(e)) return
-			if (e.clientX === lastX && e.clientY === lastY) return
-			lastX = e.clientX
-			lastY = e.clientY
-
-			const { shape, handle } = getHandle(editor, id, handleId)
-
-			if (!handle) return
-
-			editor.dispatch({
-				type: 'pointer',
-				target: 'handle',
-				handle,
-				shape,
-				name: 'pointer_move',
-				...getPointerInfo(editor, e),
-			})
-		}
-
-		const onPointerUp = (e: React.PointerEvent) => {
-			if (editor.wasEventAlreadyHandled(e)) return
-
-			const target = loopToHtmlElement(e.currentTarget)
-			releasePointerCapture(target, e)
-
-			const { shape, handle } = getHandle(editor, id, handleId)
-
-			if (!handle) return
-
-			editor.dispatch({
-				type: 'pointer',
-				target: 'handle',
-				handle,
-				shape,
-				name: 'pointer_up',
-				...getPointerInfo(editor, e),
-			})
-		}
-
-		return {
-			onPointerDown,
-			onPointerMove,
-			onPointerUp,
-		}
-	}, [editor, id, handleId])
-}