diff --git a/src/renderer/src/components/tab-group/TabGroupSplitLayout.drag.test.tsx b/src/renderer/src/components/tab-group/TabGroupSplitLayout.drag.test.tsx new file mode 100644 index 00000000000..50aa211d343 --- /dev/null +++ b/src/renderer/src/components/tab-group/TabGroupSplitLayout.drag.test.tsx @@ -0,0 +1,148 @@ +// @vitest-environment happy-dom + +// Why: the sibling TabGroupSplitLayout.test.ts calls components as plain +// functions and cannot exercise the drag gesture; these tests real-render the +// handle to pin the STA-3328 contract — pointermove writes pane styles +// directly and the store is committed exactly once, on release. +import { act } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +globalThis.IS_REACT_ACT_ENVIRONMENT = true + +const setTabGroupSplitRatioMock = vi.fn() +const recordFeatureInteractionMock = vi.fn() + +vi.mock('../../store', () => ({ + useAppStore: (selector: (state: Record) => unknown) => + selector({ + recordFeatureInteraction: recordFeatureInteractionMock, + setTabGroupSplitRatio: setTabGroupSplitRatioMock + }) +})) + +vi.mock('./TabGroupPanel', () => ({ + default: ({ groupId }: { groupId: string }) =>
+})) + +vi.mock('./useTabDragSplit', () => ({ + useTabDragSplit: () => ({ + activeDrag: null, + collisionDetection: vi.fn(), + hoveredDropTarget: null, + hoveredTabInsertion: null, + isTabDragActiveRef: { current: false }, + onDragCancel: vi.fn(), + onDragEnd: vi.fn(), + onDragMove: vi.fn(), + onDragOver: vi.fn(), + onDragStart: vi.fn(), + sensors: [], + setDragRootNode: vi.fn() + }) +})) + +import TabGroupSplitLayout from './TabGroupSplitLayout' + +function pointerEvent(type: string, init: { pointerId?: number; clientX?: number }): Event { + const event = new Event(type, { bubbles: true, cancelable: true }) + Object.defineProperty(event, 'pointerId', { value: init.pointerId ?? 1 }) + Object.defineProperty(event, 'clientX', { value: init.clientX ?? 0 }) + Object.defineProperty(event, 'clientY', { value: 0 }) + return event +} + +describe('TabGroupSplitLayout divider drag', () => { + let container: HTMLDivElement + let root: Root + let handle: HTMLElement + let firstPane: HTMLElement + let secondPane: HTMLElement + + beforeEach(async () => { + setTabGroupSplitRatioMock.mockClear() + recordFeatureInteractionMock.mockClear() + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) + await act(async () => { + root.render( + + ) + }) + handle = container.querySelector('.tab-group-split-resize-handle') as HTMLElement + expect(handle).not.toBeNull() + firstPane = handle.previousElementSibling as HTMLElement + secondPane = handle.nextElementSibling as HTMLElement + let captured = false + Object.assign(handle, { + setPointerCapture: () => { + captured = true + }, + releasePointerCapture: () => { + captured = false + }, + hasPointerCapture: () => captured + }) + const splitContainer = handle.parentElement as HTMLElement + splitContainer.getBoundingClientRect = () => + ({ left: 0, top: 0, width: 1000, height: 500, right: 1000, bottom: 500 }) as DOMRect + }) + + afterEach(() => { + act(() => root.unmount()) + container.remove() + }) + + it('writes pane styles per move and commits the store once on release', async () => { + await act(async () => { + handle.dispatchEvent(pointerEvent('pointerdown', { pointerId: 1 })) + }) + expect(recordFeatureInteractionMock).toHaveBeenCalledWith('terminal-panes') + + await act(async () => { + handle.dispatchEvent(pointerEvent('pointermove', { pointerId: 1, clientX: 300 })) + handle.dispatchEvent(pointerEvent('pointermove', { pointerId: 1, clientX: 320 })) + handle.dispatchEvent(pointerEvent('pointermove', { pointerId: 1, clientX: 340 })) + }) + + // Why: the drag must never publish store updates per move (STA-3328) — + // the panes track the pointer via direct style writes instead. + expect(setTabGroupSplitRatioMock).not.toHaveBeenCalled() + expect(firstPane.style.flex).toBe('0.34 1 0%') + expect(secondPane.style.flex).toBe('0.66 1 0%') + + await act(async () => { + handle.dispatchEvent(pointerEvent('pointerup', { pointerId: 1 })) + }) + expect(setTabGroupSplitRatioMock).toHaveBeenCalledTimes(1) + expect(setTabGroupSplitRatioMock).toHaveBeenCalledWith('wt-1', '', 0.34) + }) + + it('clamps the committed ratio and skips the commit when nothing moved', async () => { + await act(async () => { + handle.dispatchEvent(pointerEvent('pointerdown', { pointerId: 1 })) + handle.dispatchEvent(pointerEvent('pointerup', { pointerId: 1 })) + }) + expect(setTabGroupSplitRatioMock).not.toHaveBeenCalled() + + await act(async () => { + handle.dispatchEvent(pointerEvent('pointerdown', { pointerId: 1 })) + handle.dispatchEvent(pointerEvent('pointermove', { pointerId: 1, clientX: 20 })) + handle.dispatchEvent(pointerEvent('pointerup', { pointerId: 1 })) + }) + expect(setTabGroupSplitRatioMock).toHaveBeenCalledTimes(1) + expect(setTabGroupSplitRatioMock).toHaveBeenCalledWith('wt-1', '', 0.15) + }) +}) diff --git a/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx b/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx index 04cc6536249..8c0c200a3b9 100644 --- a/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx +++ b/src/renderer/src/components/tab-group/TabGroupSplitLayout.tsx @@ -39,20 +39,34 @@ function ResizeHandle({ if (!container) { return } + const firstPane = handle.previousElementSibling as HTMLElement | null + const secondPane = handle.nextElementSibling as HTMLElement | null + if (!firstPane || !secondPane) { + return + } activeResizeCleanupRef.current?.() onResizeStart() setDragging(true) handle.setPointerCapture(event.pointerId) + // Why: measure once — the container can't resize mid-drag, and per-move + // getBoundingClientRect forces a reflow against freshly written styles. + const rect = container.getBoundingClientRect() + let draggedRatio: number | null = null const onPointerMove = (moveEvent: PointerEvent): void => { if (!handle.hasPointerCapture(event.pointerId)) { return } - const rect = container.getBoundingClientRect() const ratio = isHorizontal ? (moveEvent.clientX - rect.left) / rect.width : (moveEvent.clientY - rect.top) / rect.height - onRatioChange(Math.min(MAX_RATIO, Math.max(MIN_RATIO, ratio))) + const clamped = Math.min(MAX_RATIO, Math.max(MIN_RATIO, ratio)) + draggedRatio = clamped + // Why: direct style writes keep the drag off the store — a commit per + // pointermove published 60-120 global store updates/s against every + // subscriber (STA-3328). React re-applies identical flex on commit. + firstPane.style.flex = `${clamped} 1 0%` + secondPane.style.flex = `${1 - clamped} 1 0%` } let cleaned = false @@ -61,6 +75,9 @@ function ResizeHandle({ return } cleaned = true + if (draggedRatio !== null) { + onRatioChange(draggedRatio) + } if (updateDragging) { setDragging(false) } diff --git a/src/renderer/src/store/slices/tabs.test.ts b/src/renderer/src/store/slices/tabs.test.ts index 30bcdb24925..16005a2bc79 100644 --- a/src/renderer/src/store/slices/tabs.test.ts +++ b/src/renderer/src/store/slices/tabs.test.ts @@ -949,6 +949,32 @@ describe('TabsSlice', () => { expect(layout.ratio).toBe(0.5) expect(layout.second.ratio).toBe(0.7) }) + + it('keeps state identity when the ratio is unchanged', () => { + store.setState({ + layoutByWorktree: { + [WT]: { + type: 'split', + direction: 'horizontal', + ratio: 0.5, + first: { type: 'leaf', groupId: 'g-1' }, + second: { type: 'leaf', groupId: 'g-2' } + } + } + }) + const before = store.getState().layoutByWorktree + + // Why: an unchanged commit must not mint fresh root state — every store + // subscriber wakes on the new reference (STA-3328). + store.getState().setTabGroupSplitRatio(WT, '', 0.5) + expect(store.getState().layoutByWorktree).toBe(before) + + store.getState().setTabGroupSplitRatio(WT, '', 0.5004) + expect(store.getState().layoutByWorktree).toBe(before) + + store.getState().setTabGroupSplitRatio(WT, '', 0.7) + expect(store.getState().layoutByWorktree).not.toBe(before) + }) }) describe('move/copy/merge group operations', () => { diff --git a/src/renderer/src/store/slices/tabs.ts b/src/renderer/src/store/slices/tabs.ts index 72e22adc136..f4bb58c54c8 100644 --- a/src/renderer/src/store/slices/tabs.ts +++ b/src/renderer/src/store/slices/tabs.ts @@ -1792,6 +1792,22 @@ export const createTabsSlice: StateCreator = (set, if (!currentLayout) { return {} } + // Why: an unchanged ratio must not mint fresh root state — every store + // subscriber wakes on the new reference (STA-3328). + let targetNode: TabGroupLayoutNode | undefined = currentLayout + for (const segment of nodePath.length > 0 ? nodePath.split('.') : []) { + targetNode = + targetNode && targetNode.type === 'split' && (segment === 'first' || segment === 'second') + ? targetNode[segment] + : undefined + } + if ( + targetNode && + targetNode.type === 'split' && + Math.abs((targetNode.ratio ?? 0.5) - ratio) < 0.0005 + ) { + return {} + } return { layoutByWorktree: { ...state.layoutByWorktree,