debug: start adding more tooling for debugging when interacting with shapes (#2560)

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.
This commit is contained in:
Mime Čuvalo 2024-01-29 10:29:28 +00:00 committed by GitHub
parent f25f92a46d
commit d82344bf15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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() {