@tldraw/editor 4.6.0-next.fecc64eee134 → 5.0.0

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

@@ -1,7 +1,7 @@
 import { react } from '@tldraw/state'
 import { useQuickReactor, useValue } from '@tldraw/state-react'
-import { TLHandle, TLShapeId } from '@tldraw/tlschema'
-import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
+import { TLShapeId } from '@tldraw/tlschema'
+import { modulate, objectMapValues } from '@tldraw/utils'
 import classNames from 'classnames'
 import { Fragment, JSX, useEffect, useRef, useState } from 'react'
 import { tlenv } from '../../globals/environment'
@@ -13,21 +13,15 @@ import { useDocumentEvents } from '../../hooks/useDocumentEvents'
 import { useEditor } from '../../hooks/useEditor'
 import { useFixSafariDoubleTapZoomPencilEvents } from '../../hooks/useFixSafariDoubleTapZoomPencilEvents'
 import { useGestureEvents } from '../../hooks/useGestureEvents'
-import { useHandleEvents } from '../../hooks/useHandleEvents'
-import { useSharedSafeId } from '../../hooks/useSafeId'
 import { useScreenBounds } from '../../hooks/useScreenBounds'
 import { ShapeCullingProvider, useShapeCulling } from '../../hooks/useShapeCulling'
 import { Box } from '../../primitives/Box'
-import { Mat } from '../../primitives/Mat'
 import { toDomPrecision } from '../../primitives/utils'
-import { Vec } from '../../primitives/Vec'
 import { debugFlags } from '../../utils/debug-flags'
 import { setStyleProperty } from '../../utils/dom'
-import { GeometryDebuggingView } from '../GeometryDebuggingView'
-import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
 import { Shape } from '../Shape'
-import { CanvasShapeIndicators } from './CanvasShapeIndicators'
+import { CanvasOverlays } from './CanvasOverlays'
 
 /** @public */
 export interface TLCanvasComponentProps {
@@ -38,11 +32,10 @@ export interface TLCanvasComponentProps {
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	const editor = useEditor()
 
-	const { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()
+	const { SelectionBackground, Background, SvgDefs } = useEditorComponents()
 
 	const rCanvas = useRef<HTMLDivElement>(null)
 	const rHtmlLayer = useRef<HTMLDivElement>(null)
-	const rHtmlLayer2 = useRef<HTMLDivElement>(null)
 	const container = useContainer()
 
 	useScreenBounds(rCanvas)
@@ -52,6 +45,24 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	useGestureEvents(rCanvas)
 	useFixSafariDoubleTapZoomPencilEvents(rCanvas)
 
+	useQuickReactor(
+		'update canvas state data attributes',
+		() => {
+			const canvas = rCanvas.current
+			if (!canvas) return
+
+			canvas.setAttribute(
+				'data-iseditinganything',
+				editor.getEditingShapeId() === null ? 'false' : 'true'
+			)
+			canvas.setAttribute(
+				'data-isselectinganything',
+				editor.getSelectedShapeIds().length === 0 ? 'false' : 'true'
+			)
+		},
+		[editor]
+	)
+
 	const rMemoizedStuff = useRef({ lodDisableTextOutline: false, allowTextOutline: true })
 
 	useQuickReactor(
@@ -90,7 +101,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 			)}px,${toDomPrecision(y + offset)}px)`
 
 			setStyleProperty(rHtmlLayer.current, 'transform', transform)
-			setStyleProperty(rHtmlLayer2.current, 'transform', transform)
 		},
 		[editor, container]
 	)
@@ -115,27 +125,15 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	)
 
 	const hideShapes = useValue('debug_shapes', () => debugFlags.hideShapes.get(), [debugFlags])
-	const debugGeometry = useValue('debug_geometry', () => debugFlags.debugGeometry.get(), [
-		debugFlags,
-	])
-	const isEditingAnything = useValue(
-		'isEditingAnything',
-		() => editor.getEditingShapeId() !== null,
-		[editor]
-	)
-	const isSelectingAnything = useValue(
-		'isSelectingAnything',
-		() => !!editor.getSelectedShapeIds().length,
-		[editor]
-	)
+
+	const isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])
+	const { Grid } = useEditorComponents()
 
 	return (
 		<>
 			<div
 				ref={rCanvas}
 				draggable={false}
-				data-iseditinganything={isEditingAnything}
-				data-isselectinganything={isSelectingAnything}
 				className={classNames('tl-canvas', className)}
 				data-testid="canvas"
 				{...events}
@@ -143,8 +141,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				<svg className="tl-svg-context" aria-hidden="true">
 					<defs>
 						{shapeSvgDefs}
-						<CursorDef />
-						<CollaboratorHintDef />
 						{SvgDefs && <SvgDefs />}
 					</defs>
 				</svg>
@@ -153,249 +149,50 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<Background />
 					</div>
 				)}
-				<GridWrapper />
+				{isGridMode && Grid && <GridWrapper />}
 				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 					<OnTheCanvasWrapper />
 					{SelectionBackground && <SelectionBackgroundWrapper />}
-					{hideShapes ? null : <ShapesLayer />}
-				</div>
-				<div className="tl-overlays">
-					<CanvasShapeIndicators />
-					<div ref={rHtmlLayer2} className="tl-html-layer">
-						{debugGeometry ? <GeometryDebuggingView /> : null}
-						<BrushWrapper />
-						<ScribbleWrapper />
-						<ZoomBrushWrapper />
-						{ShapeIndicators && <ShapeIndicators />}
-						<HintedShapeIndicator />
-						<SnapIndicatorWrapper />
-						<SelectionForegroundWrapper />
-						<HandlesWrapper />
-						<OverlaysWrapper />
-						<LiveCollaborators />
-					</div>
+					{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}
 				</div>
+				<CanvasOverlays />
 				<MovingCameraHitTestBlocker />
 			</div>
-			<div
-				className="tl-canvas__in-front"
-				onPointerDown={editor.markEventAsHandled}
-				onPointerUp={editor.markEventAsHandled}
-				onTouchStart={editor.markEventAsHandled}
-				onTouchEnd={editor.markEventAsHandled}
-			>
-				<InFrontOfTheCanvasWrapper />
-			</div>
+			<InFrontOfTheCanvasWrapper />
 			<MenuClickCapture />
 		</>
 	)
 }
 
 function InFrontOfTheCanvasWrapper() {
+	const editor = useEditor()
 	const { InFrontOfTheCanvas } = useEditorComponents()
 	if (!InFrontOfTheCanvas) return null
-	return <InFrontOfTheCanvas />
+	return (
+		<div
+			className="tl-canvas__in-front"
+			onPointerDown={editor.markEventAsHandled}
+			onPointerUp={editor.markEventAsHandled}
+			onTouchStart={editor.markEventAsHandled}
+			onTouchEnd={editor.markEventAsHandled}
+		>
+			<InFrontOfTheCanvas />
+		</div>
+	)
 }
 
 function GridWrapper() {
 	const editor = useEditor()
 	const gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])
 	const { x, y, z } = useValue('camera', () => editor.getCamera(), [editor])
-	const isGridMode = useValue('isGridMode', () => editor.getInstanceState().isGridMode, [editor])
 	const { Grid } = useEditorComponents()
 
-	if (!(Grid && isGridMode)) return null
+	if (!Grid) return null
 
 	return <Grid x={x} y={y} z={z} size={gridSize} />
 }
 
-function ScribbleWrapper() {
-	const editor = useEditor()
-	const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
-	const { Scribble } = useEditorComponents()
-
-	if (!(Scribble && scribbles.length)) return null
-
-	return scribbles.map((scribble) => (
-		<Scribble key={scribble.id} className="tl-user-scribble" scribble={scribble} zoom={zoomLevel} />
-	))
-}
-
-function BrushWrapper() {
-	const editor = useEditor()
-	const brush = useValue('brush', () => editor.getInstanceState().brush, [editor])
-	const { Brush } = useEditorComponents()
-
-	if (!(Brush && brush)) return null
-
-	return <Brush className="tl-user-brush" brush={brush} />
-}
-
-function ZoomBrushWrapper() {
-	const editor = useEditor()
-	const zoomBrush = useValue('zoomBrush', () => editor.getInstanceState().zoomBrush, [editor])
-	const { ZoomBrush } = useEditorComponents()
-
-	if (!(ZoomBrush && zoomBrush)) return null
-
-	return <ZoomBrush className="tl-user-brush tl-zoom-brush" brush={zoomBrush} />
-}
-
-function SnapIndicatorWrapper() {
-	const editor = useEditor()
-	const lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
-	const { SnapIndicator } = useEditorComponents()
-
-	if (!(SnapIndicator && lines.length > 0)) return null
-
-	return lines.map((line) => (
-		<SnapIndicator key={line.id} className="tl-user-snapline" line={line} zoom={zoomLevel} />
-	))
-}
-
-function HandlesWrapper() {
-	const editor = useEditor()
-
-	// We don't want this to update every time the shape changes
-	const shapeIdWithHandles = useValue(
-		'handles shapeIdWithHandles',
-		() => {
-			const { isReadonly, isChangingStyle } = editor.getInstanceState()
-			if (isReadonly || isChangingStyle) return false
-
-			const onlySelectedShape = editor.getOnlySelectedShape()
-			if (!onlySelectedShape) return false
-
-			// slightly redundant but saves us from updating the handles every time the shape changes
-			const handles = editor.getShapeHandles(onlySelectedShape)
-			if (!handles) return false
-
-			return onlySelectedShape.id
-		},
-		[editor]
-	)
-
-	if (!shapeIdWithHandles) return null
-
-	return <HandlesWrapperInner shapeId={shapeIdWithHandles} />
-}
-
-function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
-	const editor = useEditor()
-	const { Handles } = useEditorComponents()
-
-	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
-
-	const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [
-		editor,
-	])
-
-	const transform = useValue('handles transform', () => editor.getShapePageTransform(shapeId), [
-		editor,
-		shapeId,
-	])
-
-	const handles = useValue(
-		'handles',
-		() => {
-			const handles = editor.getShapeHandles(shapeId)
-			if (!handles) return null
-
-			const minDistBetweenVirtualHandlesAndRegularHandles =
-				((isCoarse ? editor.options.coarseHandleRadius : editor.options.handleRadius) / zoomLevel) *
-				2
-
-			return (
-				handles
-					.filter(
-						(handle) =>
-							// if the handle isn't a virtual handle, we'll display it
-							handle.type !== 'virtual' ||
-							// but for virtual handles, we'll only display them if they're far enough away from vertex handles
-							!handles.some(
-								(h) =>
-									// skip the handle we're checking against
-									h !== handle &&
-									// only check against vertex handles
-									h.type === 'vertex' &&
-									// and check that their distance isn't below the minimum distance
-									Vec.Dist(handle, h) < minDistBetweenVirtualHandlesAndRegularHandles
-							)
-					)
-					// We want vertex handles in front of all other handles
-					.sort((a) => (a.type === 'vertex' ? 1 : -1))
-			)
-		},
-		[editor, zoomLevel, isCoarse, shapeId]
-	)
-
-	const isHidden = useValue('isHidden', () => editor.isShapeHidden(shapeId), [editor, shapeId])
-
-	if (!Handles || !handles || !transform || isHidden) {
-		return null
-	}
-
-	return (
-		<Handles>
-			<g transform={Mat.toCssString(transform)}>
-				{handles.map((handle) => {
-					return (
-						<HandleWrapper
-							key={handle.id}
-							shapeId={shapeId}
-							handle={handle}
-							zoom={zoomLevel}
-							isCoarse={isCoarse}
-						/>
-					)
-				})}
-			</g>
-		</Handles>
-	)
-}
-
-function HandleWrapper({
-	shapeId,
-	handle,
-	zoom,
-	isCoarse,
-}: {
-	shapeId: TLShapeId
-	handle: TLHandle
-	zoom: number
-	isCoarse: boolean
-}) {
-	const events = useHandleEvents(shapeId, handle.id)
-	const { Handle } = useEditorComponents()
-
-	if (!Handle) return null
-
-	return (
-		<g
-			role="button"
-			// TODO(mime): handle.label needs to be required in the future.
-			aria-label={handle.label || 'handle'}
-			transform={`translate(${handle.x}, ${handle.y})`}
-			{...events}
-		>
-			<Handle shapeId={shapeId} handle={handle} zoom={zoom} isCoarse={isCoarse} />
-		</g>
-	)
-}
-
-function OverlaysWrapper() {
-	const { Overlays } = useEditorComponents()
-	if (!Overlays) return null
-	return (
-		<div className="tl-custom-overlays tl-overlays__item">
-			<Overlays />
-		</div>
-	)
-}
-
-function ShapesLayer() {
+function ShapesLayer({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {
 	const editor = useEditor()
 	const debugSvg = useValue('debug svg', () => debugFlags.debugSvg.get(), [debugFlags])
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
@@ -413,11 +210,11 @@ function ShapesLayer() {
 				)
 			)}
 			<CullingController />
-			{tlenv.isSafari && <ReflowIfNeeded />}
+			{tlenv.isSafari && <ReflowIfNeeded canvasRef={canvasRef} />}
 		</ShapeCullingProvider>
 	)
 }
-function ReflowIfNeeded() {
+function ReflowIfNeeded({ canvasRef }: { canvasRef: { readonly current: HTMLDivElement | null } }) {
 	const editor = useEditor()
 	const culledShapesRef = useRef<Set<TLShapeId>>(new Set())
 	useQuickReactor(
@@ -427,13 +224,13 @@ function ReflowIfNeeded() {
 			if (culledShapesRef.current === culledShapes) return
 
 			culledShapesRef.current = culledShapes
-			const canvas = editor.getContainerDocument().getElementsByClassName('tl-canvas')
-			if (canvas.length === 0) return
+			const canvas = canvasRef.current
+			if (!canvas) return
 			// This causes a reflow
 			// https://gist.github.com/paulirish/5d52fb081b3570c81e3a
-			const _height = (canvas[0] as HTMLDivElement).offsetHeight
+			const _height = canvas.offsetHeight
 		},
-		[editor]
+		[editor, canvasRef]
 	)
 	return null
 }
@@ -458,56 +255,6 @@ function CullingController() {
 	return null
 }
 
-function HintedShapeIndicator() {
-	const editor = useEditor()
-	const { ShapeIndicator } = useEditorComponents()
-
-	const ids = useValue(
-		'hinting shape ids without canvas indicator',
-		() => {
-			// Filter to only shapes that use legacy SVG indicators
-			return dedupe(editor.getHintingShapeIds()).filter((id) => {
-				const shape = editor.getShape(id)
-				if (!shape) return false
-				const util = editor.getShapeUtil(shape)
-				return util.useLegacyIndicator()
-			})
-		},
-		[editor]
-	)
-
-	if (!ids.length) return null
-	if (!ShapeIndicator) return null
-
-	return ids.map((id) => (
-		<ShapeIndicator className="tl-user-indicator__hint" shapeId={id} key={id + '_hinting'} />
-	))
-}
-
-function CursorDef() {
-	return (
-		<g id={useSharedSafeId('cursor')}>
-			<g fill="rgba(0,0,0,.2)" transform="translate(-11,-11)">
-				<path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" />
-				<path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" />
-			</g>
-			<g fill="white" transform="translate(-12,-12)">
-				<path d="m12 24.4219v-16.015l11.591 11.619h-6.781l-.411.124z" />
-				<path d="m21.0845 25.0962-3.605 1.535-4.682-11.089 3.686-1.553z" />
-			</g>
-			<g fill="currentColor" transform="translate(-12,-12)">
-				<path d="m19.751 24.4155-1.844.774-3.1-7.374 1.841-.775z" />
-				<path d="m13 10.814v11.188l2.969-2.866.428-.139h4.768z" />
-			</g>
-		</g>
-	)
-}
-
-function CollaboratorHintDef() {
-	const cursorHintId = useSharedSafeId('cursor_hint')
-	return <path id={cursorHintId} fill="currentColor" d="M -2,-5 2,0 -2,5 Z" />
-}
-
 function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 	const editor = useEditor()
 
@@ -530,7 +277,8 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 			const renderId = Math.random()
 			latest = renderId
 
-			const isSingleFrame = editor.isShapeOfType(id, 'frame')
+			const shape = editor.getShape(id)
+			const isSingleFrame = !!shape && editor.isShapeFrameLike(shape)
 			const padding = isSingleFrame ? 0 : 10
 			let bounds = editor.getShapePageBounds(id)
 			if (!bounds) return
@@ -589,25 +337,6 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 	)
 }
 
-function SelectionForegroundWrapper() {
-	const editor = useEditor()
-	const selectionRotation = useValue(
-		'selection rotation',
-		function getSelectionRotation() {
-			return editor.getSelectionRotation()
-		},
-		[editor]
-	)
-	const selectionBounds = useValue(
-		'selection bounds',
-		() => editor.getSelectionRotatedPageBounds(),
-		[editor]
-	)
-	const { SelectionForeground } = useEditorComponents()
-	if (!selectionBounds || !SelectionForeground) return null
-	return <SelectionForeground bounds={selectionBounds} rotation={selectionRotation} />
-}
-
 function SelectionBackgroundWrapper() {
 	const editor = useEditor()
 	const selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [

package/src/lib/editor/Editor.test.ts

@@ -46,7 +46,9 @@ class CustomShape extends ShapeUtil<ICustomShape> {
 			isFilled: shape.props.isFilled,
 		})
 	}
-	indicator() {}
+	getIndicatorPath() {
+		return undefined
+	}
 	component() {}
 }