indicators on the canvas example (#4071)

This PR shows how you could use an OnTheCanvas component to display
shape indicators.

### Change type

- [x] `other`

apps/examples/src/examples/indicators-logic/IndicatorsLogicExample.tsx

@@ -0,0 +1,75 @@
+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
+*/

apps/examples/src/examples/indicators-logic/README.md

@@ -0,0 +1,10 @@
+---
+title: Indicators logic
+component: ./IndicatorsLogicExample.tsx
+category: editor-api
+keywords: [indicators]
+---
+
+---
+
+If for some reason you wanted to show indicators yourself, here's an example of that.