From d82344bf155fd9d2480b3663648f057b431e8161 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= <mimecuvalo@gmail.com>
Date: Mon, 29 Jan 2024 10:29:28 +0000
Subject: [PATCH] debug: start adding more tooling for debugging when
 interacting with shapes (#2560)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I borrowed `useTick` from `GeometryDebuggingView.tsx` — didn't see a
good place to have that in a shared file somewhere but lemme know if
there is ¯\_(ツ)_/¯


https://github.com/tldraw/tldraw/assets/469604/89ae4bb1-0680-4275-8e34-ead7c0cd091e


### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan


- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds more information in the debug view about what shape is selected
and coordinates.
---
 .../src/lib/ui/components/DebugPanel.tsx      | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/tldraw/src/lib/ui/components/DebugPanel.tsx b/packages/tldraw/src/lib/ui/components/DebugPanel.tsx
index ee42b9c04..8c4cb46a0 100644
--- a/packages/tldraw/src/lib/ui/components/DebugPanel.tsx
+++ b/packages/tldraw/src/lib/ui/components/DebugPanel.tsx
@@ -10,6 +10,7 @@ import {
 	uniqueId,
 	useEditor,
 	useValue,
+	Vec,
 } from '@tldraw/editor'
 import * as React from 'react'
 import { useDialogs } from '../hooks/useDialogsProvider'
@@ -66,9 +67,38 @@ export const DebugPanel = React.memo(function DebugPanel({
 	)
 })
 
-const CurrentState = track(function CurrentState() {
+function useTick(isEnabled = true) {
+	const [_, setTick] = React.useState(0)
 	const editor = useEditor()
-	return <div className="tlui-debug-panel__current-state">{editor.getPath()}</div>
+	React.useEffect(() => {
+		if (!isEnabled) return
+		const update = () => setTick((tick) => tick + 1)
+		editor.on('tick', update)
+		return () => {
+			editor.off('tick', update)
+		}
+	}, [editor, isEnabled])
+}
+
+const CurrentState = track(function CurrentState() {
+	useTick()
+
+	const editor = useEditor()
+
+	const path = editor.getPath()
+	const hoverShape = editor.getHoveredShape()
+	const selectedShape = editor.getOnlySelectedShape()
+	const shape = path === 'select.idle' || !path.includes('select.') ? hoverShape : selectedShape
+	const shapeInfo =
+		shape && path.includes('select.')
+			? ` / ${shape.type || ''}${'geo' in shape.props ? ' / ' + shape.props.geo : ''} / [${Vec.ToFixed(editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint), 0)}]`
+			: ''
+	const ruler =
+		path.startsWith('select.') && !path.includes('.idle')
+			? ` / [${Vec.ToFixed(editor.inputs.originPagePoint, 0)}] → [${Vec.ToFixed(editor.inputs.currentPagePoint, 0)}] = ${Vec.Dist(editor.inputs.originPagePoint, editor.inputs.currentPagePoint).toFixed(0)}`
+			: ''
+
+	return <div className="tlui-debug-panel__current-state">{`${path}${shapeInfo}${ruler}`}</div>
 })
 
 function FPS() {