Indicators logic

import { TLComponents, Tldraw, useEditor, useEditorComponents, useValue } from 'tldraw'
import 'tldraw/tldraw.css'

const components: TLComponents = {
	OnTheCanvas: () => {
		const editor = useEditor()

		// [1]
		const renderingShapes = useValue(
			'rendering shapes',
			() => editor.getRenderingShapes().filter((_info) => true),
			[editor]
		)

		// [2
		const { ShapeIndicator } = useEditorComponents()
		if (!ShapeIndicator) return null

		return (
			<div style={{ position: 'absolute', top: 0, left: 0, zIndex: 9999 }}>
				{renderingShapes.map(({ id }) => (
					<ShapeIndicator key={id + '_indicator'} shapeId={id} />
				))}
			</div>
		)
	},
}

export default function IndicatorsLogicExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw
				components={components}
				onMount={(editor) => {
					if (editor.getCurrentPageShapeIds().size === 0) {
						editor.createShapes([
							{
								type: 'geo',
								x: 100,
								y: 100,
							},
							{
								type: 'geo',
								x: 500,
								y: 150,
							},
							{
								type: 'geo',
								x: 100,
								y: 500,
							},
							{
								type: 'geo',
								x: 500,
								y: 500,
							},
						])
					}
				}}
			/>
		</div>
	)
}

/*
[1]
Get which indicators to show (based on the shapes currently on screen).
You could include logic here using the filter to narrow down which shapes
you want to show the indicators for.

[2]
You could override the default ShapeIndicator component in this
same TLComponents object, but the default (DefaultIndicator.tsx)
has a lot of logic for where and how to display the indicator
*/