+202

src/split-view.ts

reviewed

··· 1 1 + /** 2 2 + * Split View — side-by-side document pane management. 3 3 + * 4 4 + * Pure logic module: pane state, layout calculations, focus tracking. 5 5 + * DOM rendering handled by the editor entry points. 6 6 + */ 7 7 + 8 8 + export type SplitDirection = 'horizontal' | 'vertical'; 9 9 + 10 10 + export interface Pane { 11 11 + id: string; 12 12 + docId: string; 13 13 + docType: 'doc' | 'sheet'; 14 14 + /** Percentage of total space (0-100) */ 15 15 + size: number; 16 16 + } 17 17 + 18 18 + export interface SplitState { 19 19 + direction: SplitDirection; 20 20 + panes: Pane[]; 21 21 + focusedPaneId: string | null; 22 22 + } 23 23 + 24 24 + let _paneCounter = 0; 25 25 + 26 26 + /** 27 27 + * Generate a unique pane ID. 28 28 + */ 29 29 + export function generatePaneId(): string { 30 30 + return `pane-${++_paneCounter}`; 31 31 + } 32 32 + 33 33 + /** 34 34 + * Reset pane counter (for testing). 35 35 + */ 36 36 + export function resetPaneCounter(): void { 37 37 + _paneCounter = 0; 38 38 + } 39 39 + 40 40 + /** 41 41 + * Create an initial single-pane state. 42 42 + */ 43 43 + export function createSplitState( 44 44 + docId: string, 45 45 + docType: 'doc' | 'sheet', 46 46 + ): SplitState { 47 47 + const id = generatePaneId(); 48 48 + return { 49 49 + direction: 'horizontal', 50 50 + panes: [{ id, docId, docType, size: 100 }], 51 51 + focusedPaneId: id, 52 52 + }; 53 53 + } 54 54 + 55 55 + /** 56 56 + * Add a new pane by splitting the focused pane. 57 57 + * Returns updated state or null if max panes reached. 58 58 + */ 59 59 + export function addPane( 60 60 + state: SplitState, 61 61 + docId: string, 62 62 + docType: 'doc' | 'sheet', 63 63 + maxPanes = 4, 64 64 + ): SplitState | null { 65 65 + if (state.panes.length >= maxPanes) return null; 66 66 + 67 67 + const newId = generatePaneId(); 68 68 + const newCount = state.panes.length + 1; 69 69 + const equalSize = Math.floor(100 / newCount); 70 70 + const remainder = 100 - equalSize * newCount; 71 71 + 72 72 + const panes: Pane[] = state.panes.map((p, i) => ({ 73 73 + ...p, 74 74 + size: equalSize + (i === 0 ? remainder : 0), 75 75 + })); 76 76 + 77 77 + panes.push({ id: newId, docId, docType, size: equalSize }); 78 78 + 79 79 + return { 80 80 + ...state, 81 81 + panes, 82 82 + focusedPaneId: newId, 83 83 + }; 84 84 + } 85 85 + 86 86 + /** 87 87 + * Remove a pane by ID. Redistributes space to remaining panes. 88 88 + * Returns null if only one pane remains (can't remove the last one). 89 89 + */ 90 90 + export function removePane( 91 91 + state: SplitState, 92 92 + paneId: string, 93 93 + ): SplitState | null { 94 94 + if (state.panes.length <= 1) return null; 95 95 + 96 96 + const removed = state.panes.find(p => p.id === paneId); 97 97 + if (!removed) return state; 98 98 + 99 99 + const remaining = state.panes.filter(p => p.id !== paneId); 100 100 + const redistributed = removed.size / remaining.length; 101 101 + 102 102 + const panes = remaining.map(p => ({ 103 103 + ...p, 104 104 + size: p.size + redistributed, 105 105 + })); 106 106 + 107 107 + // If we removed the focused pane, focus the first remaining 108 108 + const focusedPaneId = 109 109 + state.focusedPaneId === paneId 110 110 + ? panes[0].id 111 111 + : state.focusedPaneId; 112 112 + 113 113 + return { ...state, panes, focusedPaneId }; 114 114 + } 115 115 + 116 116 + /** 117 117 + * Set focus to a specific pane. 118 118 + */ 119 119 + export function focusPane( 120 120 + state: SplitState, 121 121 + paneId: string, 122 122 + ): SplitState { 123 123 + const exists = state.panes.some(p => p.id === paneId); 124 124 + if (!exists) return state; 125 125 + return { ...state, focusedPaneId: paneId }; 126 126 + } 127 127 + 128 128 + /** 129 129 + * Toggle split direction between horizontal and vertical. 130 130 + */ 131 131 + export function toggleDirection(state: SplitState): SplitState { 132 132 + return { 133 133 + ...state, 134 134 + direction: state.direction === 'horizontal' ? 'vertical' : 'horizontal', 135 135 + }; 136 136 + } 137 137 + 138 138 + /** 139 139 + * Resize a pane. Adjusts the next pane to compensate. 140 140 + * newSize is the desired percentage for the target pane. 141 141 + */ 142 142 + export function resizePane( 143 143 + state: SplitState, 144 144 + paneId: string, 145 145 + newSize: number, 146 146 + ): SplitState { 147 147 + const idx = state.panes.findIndex(p => p.id === paneId); 148 148 + if (idx === -1 || idx >= state.panes.length - 1) return state; 149 149 + 150 150 + const minSize = 10; 151 151 + const currentPane = state.panes[idx]; 152 152 + const nextPane = state.panes[idx + 1]; 153 153 + const combinedSize = currentPane.size + nextPane.size; 154 154 + 155 155 + // Clamp to valid range 156 156 + const clamped = Math.max(minSize, Math.min(combinedSize - minSize, newSize)); 157 157 + const nextSize = combinedSize - clamped; 158 158 + 159 159 + const panes = state.panes.map((p, i) => { 160 160 + if (i === idx) return { ...p, size: clamped }; 161 161 + if (i === idx + 1) return { ...p, size: nextSize }; 162 162 + return p; 163 163 + }); 164 164 + 165 165 + return { ...state, panes }; 166 166 + } 167 167 + 168 168 + /** 169 169 + * Swap the document in a pane. 170 170 + */ 171 171 + export function swapPaneDoc( 172 172 + state: SplitState, 173 173 + paneId: string, 174 174 + docId: string, 175 175 + docType: 'doc' | 'sheet', 176 176 + ): SplitState { 177 177 + const panes = state.panes.map(p => 178 178 + p.id === paneId ? { ...p, docId, docType } : p, 179 179 + ); 180 180 + return { ...state, panes }; 181 181 + } 182 182 + 183 183 + /** 184 184 + * Get the focused pane, or null if none. 185 185 + */ 186 186 + export function getFocusedPane(state: SplitState): Pane | null { 187 187 + return state.panes.find(p => p.id === state.focusedPaneId) || null; 188 188 + } 189 189 + 190 190 + /** 191 191 + * Check if split view is active (more than one pane). 192 192 + */ 193 193 + export function isSplitActive(state: SplitState): boolean { 194 194 + return state.panes.length > 1; 195 195 + } 196 196 + 197 197 + /** 198 198 + * Compute CSS grid template from pane sizes. 199 199 + */ 200 200 + export function computeGridTemplate(state: SplitState): string { 201 201 + return state.panes.map(p => `${p.size}%`).join(' '); 202 202 + }

+207

tests/split-view.test.ts

reviewed

··· 1 1 + import { describe, it, expect, beforeEach } from 'vitest'; 2 2 + import { 3 3 + createSplitState, 4 4 + addPane, 5 5 + removePane, 6 6 + focusPane, 7 7 + toggleDirection, 8 8 + resizePane, 9 9 + swapPaneDoc, 10 10 + getFocusedPane, 11 11 + isSplitActive, 12 12 + computeGridTemplate, 13 13 + resetPaneCounter, 14 14 + } from '../src/split-view.js'; 15 15 + 16 16 + describe('Split View', () => { 17 17 + beforeEach(() => { 18 18 + resetPaneCounter(); 19 19 + }); 20 20 + 21 21 + describe('createSplitState', () => { 22 22 + it('creates single-pane state', () => { 23 23 + const state = createSplitState('doc1', 'doc'); 24 24 + expect(state.panes).toHaveLength(1); 25 25 + expect(state.panes[0].docId).toBe('doc1'); 26 26 + expect(state.panes[0].size).toBe(100); 27 27 + expect(state.direction).toBe('horizontal'); 28 28 + }); 29 29 + 30 30 + it('focuses the initial pane', () => { 31 31 + const state = createSplitState('doc1', 'doc'); 32 32 + expect(state.focusedPaneId).toBe(state.panes[0].id); 33 33 + }); 34 34 + }); 35 35 + 36 36 + describe('addPane', () => { 37 37 + it('adds a second pane with equal sizes', () => { 38 38 + const state = createSplitState('doc1', 'doc'); 39 39 + const updated = addPane(state, 'doc2', 'sheet'); 40 40 + expect(updated).not.toBeNull(); 41 41 + expect(updated!.panes).toHaveLength(2); 42 42 + expect(updated!.panes[0].size).toBe(50); 43 43 + expect(updated!.panes[1].size).toBe(50); 44 44 + }); 45 45 + 46 46 + it('focuses the new pane', () => { 47 47 + const state = createSplitState('doc1', 'doc'); 48 48 + const updated = addPane(state, 'doc2', 'doc'); 49 49 + expect(updated!.focusedPaneId).toBe(updated!.panes[1].id); 50 50 + }); 51 51 + 52 52 + it('returns null when max panes reached', () => { 53 53 + let state = createSplitState('doc1', 'doc'); 54 54 + state = addPane(state, 'doc2', 'doc')!; 55 55 + const result = addPane(state, 'doc3', 'doc', 2); 56 56 + expect(result).toBeNull(); 57 57 + }); 58 58 + 59 59 + it('supports up to 4 panes by default', () => { 60 60 + let state = createSplitState('d1', 'doc'); 61 61 + state = addPane(state, 'd2', 'doc')!; 62 62 + state = addPane(state, 'd3', 'doc')!; 63 63 + state = addPane(state, 'd4', 'doc')!; 64 64 + expect(state.panes).toHaveLength(4); 65 65 + expect(addPane(state, 'd5', 'doc')).toBeNull(); 66 66 + }); 67 67 + }); 68 68 + 69 69 + describe('removePane', () => { 70 70 + it('removes a pane and redistributes space', () => { 71 71 + let state = createSplitState('doc1', 'doc'); 72 72 + state = addPane(state, 'doc2', 'doc')!; 73 73 + const paneToRemove = state.panes[1].id; 74 74 + const updated = removePane(state, paneToRemove); 75 75 + expect(updated).not.toBeNull(); 76 76 + expect(updated!.panes).toHaveLength(1); 77 77 + expect(updated!.panes[0].size).toBe(100); 78 78 + }); 79 79 + 80 80 + it('returns null when only one pane', () => { 81 81 + const state = createSplitState('doc1', 'doc'); 82 82 + expect(removePane(state, state.panes[0].id)).toBeNull(); 83 83 + }); 84 84 + 85 85 + it('moves focus when removing focused pane', () => { 86 86 + let state = createSplitState('doc1', 'doc'); 87 87 + state = addPane(state, 'doc2', 'doc')!; 88 88 + const focusedId = state.focusedPaneId!; 89 89 + const updated = removePane(state, focusedId); 90 90 + expect(updated!.focusedPaneId).not.toBe(focusedId); 91 91 + expect(updated!.focusedPaneId).toBe(updated!.panes[0].id); 92 92 + }); 93 93 + 94 94 + it('keeps focus when removing non-focused pane', () => { 95 95 + let state = createSplitState('doc1', 'doc'); 96 96 + state = addPane(state, 'doc2', 'doc')!; 97 97 + const firstPaneId = state.panes[0].id; 98 98 + state = focusPane(state, firstPaneId); 99 99 + const updated = removePane(state, state.panes[1].id); 100 100 + expect(updated!.focusedPaneId).toBe(firstPaneId); 101 101 + }); 102 102 + }); 103 103 + 104 104 + describe('focusPane', () => { 105 105 + it('sets focused pane', () => { 106 106 + let state = createSplitState('doc1', 'doc'); 107 107 + state = addPane(state, 'doc2', 'doc')!; 108 108 + const updated = focusPane(state, state.panes[0].id); 109 109 + expect(updated.focusedPaneId).toBe(state.panes[0].id); 110 110 + }); 111 111 + 112 112 + it('ignores invalid pane id', () => { 113 113 + const state = createSplitState('doc1', 'doc'); 114 114 + const updated = focusPane(state, 'nonexistent'); 115 115 + expect(updated.focusedPaneId).toBe(state.focusedPaneId); 116 116 + }); 117 117 + }); 118 118 + 119 119 + describe('toggleDirection', () => { 120 120 + it('toggles horizontal to vertical', () => { 121 121 + const state = createSplitState('doc1', 'doc'); 122 122 + expect(toggleDirection(state).direction).toBe('vertical'); 123 123 + }); 124 124 + 125 125 + it('toggles vertical back to horizontal', () => { 126 126 + let state = createSplitState('doc1', 'doc'); 127 127 + state = toggleDirection(state); 128 128 + expect(toggleDirection(state).direction).toBe('horizontal'); 129 129 + }); 130 130 + }); 131 131 + 132 132 + describe('resizePane', () => { 133 133 + it('resizes pane and adjusts neighbor', () => { 134 134 + let state = createSplitState('doc1', 'doc'); 135 135 + state = addPane(state, 'doc2', 'doc')!; 136 136 + const updated = resizePane(state, state.panes[0].id, 70); 137 137 + expect(updated.panes[0].size).toBe(70); 138 138 + expect(updated.panes[1].size).toBe(30); 139 139 + }); 140 140 + 141 141 + it('enforces minimum size of 10%', () => { 142 142 + let state = createSplitState('doc1', 'doc'); 143 143 + state = addPane(state, 'doc2', 'doc')!; 144 144 + const updated = resizePane(state, state.panes[0].id, 5); 145 145 + expect(updated.panes[0].size).toBe(10); 146 146 + expect(updated.panes[1].size).toBe(90); 147 147 + }); 148 148 + 149 149 + it('prevents neighbor from going below minimum', () => { 150 150 + let state = createSplitState('doc1', 'doc'); 151 151 + state = addPane(state, 'doc2', 'doc')!; 152 152 + const updated = resizePane(state, state.panes[0].id, 95); 153 153 + expect(updated.panes[0].size).toBe(90); 154 154 + expect(updated.panes[1].size).toBe(10); 155 155 + }); 156 156 + 157 157 + it('ignores resize on last pane (no neighbor)', () => { 158 158 + let state = createSplitState('doc1', 'doc'); 159 159 + state = addPane(state, 'doc2', 'doc')!; 160 160 + const lastId = state.panes[state.panes.length - 1].id; 161 161 + const updated = resizePane(state, lastId, 70); 162 162 + expect(updated).toEqual(state); 163 163 + }); 164 164 + }); 165 165 + 166 166 + describe('swapPaneDoc', () => { 167 167 + it('changes document in a pane', () => { 168 168 + const state = createSplitState('doc1', 'doc'); 169 169 + const updated = swapPaneDoc(state, state.panes[0].id, 'sheet1', 'sheet'); 170 170 + expect(updated.panes[0].docId).toBe('sheet1'); 171 171 + expect(updated.panes[0].docType).toBe('sheet'); 172 172 + }); 173 173 + }); 174 174 + 175 175 + describe('getFocusedPane', () => { 176 176 + it('returns the focused pane', () => { 177 177 + const state = createSplitState('doc1', 'doc'); 178 178 + const focused = getFocusedPane(state); 179 179 + expect(focused).not.toBeNull(); 180 180 + expect(focused!.docId).toBe('doc1'); 181 181 + }); 182 182 + }); 183 183 + 184 184 + describe('isSplitActive', () => { 185 185 + it('returns false for single pane', () => { 186 186 + expect(isSplitActive(createSplitState('doc1', 'doc'))).toBe(false); 187 187 + }); 188 188 + 189 189 + it('returns true for multiple panes', () => { 190 190 + let state = createSplitState('doc1', 'doc'); 191 191 + state = addPane(state, 'doc2', 'doc')!; 192 192 + expect(isSplitActive(state)).toBe(true); 193 193 + }); 194 194 + }); 195 195 + 196 196 + describe('computeGridTemplate', () => { 197 197 + it('returns single value for one pane', () => { 198 198 + expect(computeGridTemplate(createSplitState('d1', 'doc'))).toBe('100%'); 199 199 + }); 200 200 + 201 201 + it('returns space-separated values for multiple panes', () => { 202 202 + let state = createSplitState('d1', 'doc'); 203 203 + state = addPane(state, 'd2', 'doc')!; 204 204 + expect(computeGridTemplate(state)).toBe('50% 50%'); 205 205 + }); 206 206 + }); 207 207 + });