feat(devtools): reset splitter panes on double click by bart-krakowski · Pull Request #515 · TanStack/devtools · GitHub
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/beige-snakes-call.md
6 changes: 6 additions & 0 deletions packages/devtools/src/components/plugin-workspace.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {
findGroupOfTab,
layoutRects,
moveTab,
resetSplit,
resize,
resizeFromPointer,
setTabs,
Expand Down Expand Up @@ -600,6 +601,10 @@ export const PluginWorkspace = (props: {
document.addEventListener('pointerup', up)
}

const resetSplitterDrag = (handle: SplitterHandle) => {
setLayout(resetSplit(layout(), handle.path, handle.gutterIndex))
}

const resizeFromKeyboard = (handle: SplitterHandle, event: KeyboardEvent) => {
const step = event.shiftKey ? KEYBOARD_STEP_COARSE : KEYBOARD_STEP
const grows =
Expand Down Expand Up @@ -867,6 +872,7 @@ export const PluginWorkspace = (props: {
// Read through the accessor at gesture time, so a gutter that has
// been re-measured since render still moves the right sizes.
onPointerDown={(event) => startSplitterDrag(handle(), event)}
onDblClick={() => resetSplitterDrag(handle())}
onKeyDown={(event) => resizeFromKeyboard(handle(), event)}
/>
)
Expand Down
59 changes: 59 additions & 0 deletions packages/devtools/src/utils/layout-tree.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
nextGroupId,
paneRects,
repairLayout,
resetSplit,
resize,
resizeFromPointer,
singleGroup,
Expand Down Expand Up @@ -354,6 +355,64 @@ describe('resize', () => {
})
})

describe('resetSplit', () => {
it('evens out an unequal pair', () => {
const tree = split(
'row',
[group('g0', ['a']), group('g1', ['b'])],
[0.7, 0.3],
)
const next = resetSplit(tree, [], 0) as SplitNode
expect(next.sizes[0]).toBeCloseTo(0.5, 10)
expect(next.sizes[1]).toBeCloseTo(0.5, 10)
expectWellFormed(next)
})

it('only touches the gutter pair, leaving the rest alone', () => {
const tree = split(
'row',
[group('g0', ['a']), group('g1', ['b']), group('g2', ['c'])],
[0.1, 0.7, 0.2],
)
const next = resetSplit(tree, [], 0) as SplitNode
expect(next.sizes[0]).toBeCloseTo(0.4, 10)
expect(next.sizes[1]).toBeCloseTo(0.4, 10)
expect(next.sizes[2]).toBeCloseTo(0.2, 10)
expectWellFormed(next)
})

it('resets a nested split by path', () => {
const tree = split('row', [
group('g0', ['a']),
split('col', [group('g1', ['b']), group('g2', ['c'])], [0.8, 0.2]),
])
const next = resetSplit(tree, [1], 0) as SplitNode
const inner = next.children[1] as SplitNode
expect(inner.sizes[0]).toBeCloseTo(0.5, 10)
expect(inner.sizes[1]).toBeCloseTo(0.5, 10)
// The outer split is untouched.
expect(next.sizes[0]).toBeCloseTo(0.5, 10)
expectWellFormed(next)
})

it('is a no-op when the pair is already even', () => {
const tree = split(
'row',
[group('g0', ['a']), group('g1', ['b'])],
[0.5, 0.5],
)
expect(resetSplit(tree, [], 0)).toEqual(tree)
})

it('is a no-op for a bad path or gutter', () => {
const tree = split('row', [group('g0', ['a']), group('g1', ['b'])])
expect(resetSplit(tree, [9], 0)).toEqual(tree)
expect(resetSplit(tree, [], 5)).toEqual(tree)
expect(resetSplit(group('g0', ['a']), [], 0)).toEqual(group('g0', ['a']))
expect(resetSplit(null, [], 0)).toBeNull()
})
})

describe('resizeFromPointer', () => {
it('applies total mouse travel to the snapshot so later moves do not compound', () => {
const tree = split(
Expand Down
31 changes: 31 additions & 0 deletions packages/devtools/src/utils/layout-tree.ts
Loading