Indicators logic
If for some reason you wanted to show indicators yourself, here's an example of that.
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
*/
Is this page helpful?
Prev
Editor focusNext
Prevent instance change