From a466ffe92a9f2ac883cc47554703a64531c40c62 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Fri, 5 Jul 2024 10:29:42 +0100
Subject: [PATCH] indicators on the canvas example (#4071)

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

### Change type

- [x] `other`
---
 .../IndicatorsLogicExample.tsx                | 75 +++++++++++++++++++
 .../src/examples/indicators-logic/README.md   | 10 +++
 2 files changed, 85 insertions(+)
 create mode 100644 apps/examples/src/examples/indicators-logic/IndicatorsLogicExample.tsx
 create mode 100644 apps/examples/src/examples/indicators-logic/README.md

diff --git a/apps/examples/src/examples/indicators-logic/IndicatorsLogicExample.tsx b/apps/examples/src/examples/indicators-logic/IndicatorsLogicExample.tsx
new file mode 100644
index 000000000..3b4879279
--- /dev/null
+++ b/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
+*/
diff --git a/apps/examples/src/examples/indicators-logic/README.md b/apps/examples/src/examples/indicators-logic/README.md
new file mode 100644
index 000000000..4edc99e00
--- /dev/null
+++ b/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.