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:
parent
f25f92a46d
commit
d82344bf15
1 changed files with 32 additions and 2 deletions
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue