refactor(sheets): extract dialogs, tabs, pivots, and AI chat from main.ts · scottlanoue.com/atmosphere-office@6ec6fbd

+178

src/sheets/ai-chat-panel.ts

··· 1 + /** 2 + * AI chat panel logic for sheets — context extraction and message sending. 3 + * 4 + * Extracted from main.ts for decomposition. 5 + */ 6 + 7 + import * as Y from 'yjs'; 8 + import { parseRef, colToLetter, cellId, letterToCol } from './formulas.js'; 9 + import { escapeHtml } from '../lib/escape-html.js'; 10 + import { 11 + isConfigured, buildSystemMessage, streamChat, 12 + appendMessage, appendStreamingBubble, renderMarkdown, 13 + appendActionCard, 14 + } from '../lib/ai-chat.js'; 15 + import { splitResponse, isSheetAction } from '../lib/ai-actions.js'; 16 + import { executeSheetAction } from './ai-sheet-actions.js'; 17 + 18 + // ── Types ─────────────────────────────────────────────────── 19 + 20 + export interface ChatPanelDeps { 21 + getCells: () => any; 22 + getCellData: (id: string) => { v?: any; f?: string; s?: any } | null; 23 + setCellData: (id: string, data: any) => void; 24 + renderGrid: () => void; 25 + chatUI: { 26 + input: HTMLTextAreaElement; 27 + settingsPanel: HTMLElement; 28 + endpointInput: HTMLInputElement; 29 + messageList: HTMLElement; 30 + sendBtn: HTMLElement; 31 + stopBtn: HTMLElement; 32 + contextToggle: HTMLInputElement; 33 + actionsToggle: HTMLInputElement; 34 + }; 35 + chatState: { 36 + messages: any[]; 37 + loading: boolean; 38 + error: string | null; 39 + abortController: AbortController | null; 40 + }; 41 + chatWiring: { getConfig: () => any }; 42 + titleInput: HTMLInputElement; 43 + } 44 + 45 + // ── Sheet context extraction ──────────────────────────────── 46 + 47 + export function getSheetContextText(getCells: () => any): string { 48 + const cells = getCells(); 49 + if (!cells || cells.size === 0) return ''; 50 + 51 + const rows: Record<number, Record<number, string>> = {}; 52 + let maxCol = 0; 53 + let maxRow = 0; 54 + cells.forEach((cell: any, id: string) => { 55 + const ref = parseRef(id); 56 + if (!ref) return; 57 + const { col, row } = ref; 58 + if (!rows[row]) rows[row] = {}; 59 + const c = cell instanceof Y.Map ? cell : null; 60 + const formula = c ? c.get('f') : ''; 61 + const value = c ? (c.get('v') ?? '') : ''; 62 + rows[row][col] = formula ? `=${formula}` : String(value); 63 + if (col > maxCol) maxCol = col; 64 + if (row > maxRow) maxRow = row; 65 + }); 66 + 67 + const lines: string[] = []; 68 + const headers = ['']; 69 + for (let c = 0; c <= maxCol; c++) headers.push(colToLetter(c)); 70 + lines.push(headers.join('\t')); 71 + 72 + for (let r = 0; r <= maxRow; r++) { 73 + if (!rows[r]) continue; 74 + const cols = [String(r + 1)]; 75 + for (let c = 0; c <= maxCol; c++) { 76 + cols.push(rows[r]?.[c] || ''); 77 + } 78 + if (cols.slice(1).every(v => v === '')) continue; 79 + lines.push(cols.join('\t')); 80 + } 81 + return lines.join('\n'); 82 + } 83 + 84 + // ── Send chat message ─────────────────────────────────────── 85 + 86 + export async function sendChatMessage(deps: ChatPanelDeps): Promise<void> { 87 + const text = deps.chatUI.input.value.trim(); 88 + if (!text || deps.chatState.loading) return; 89 + 90 + const cfg = deps.chatWiring.getConfig(); 91 + if (!isConfigured(cfg)) { 92 + deps.chatUI.settingsPanel.style.display = ''; 93 + deps.chatUI.endpointInput.focus(); 94 + return; 95 + } 96 + 97 + const userMsg = { role: 'user', content: text, ts: Date.now() }; 98 + deps.chatState.messages.push(userMsg); 99 + appendMessage(deps.chatUI.messageList, userMsg); 100 + 101 + deps.chatUI.input.value = ''; 102 + deps.chatUI.input.style.height = ''; 103 + deps.chatUI.sendBtn.style.display = 'none'; 104 + deps.chatUI.stopBtn.style.display = ''; 105 + deps.chatState.loading = true; 106 + deps.chatState.error = null; 107 + 108 + const sheetTitle = deps.titleInput.value.trim() || 'Untitled Spreadsheet'; 109 + const includeContext = deps.chatUI.contextToggle.checked; 110 + const actionsEnabled = deps.chatUI.actionsToggle.checked; 111 + const sheetText = includeContext ? getSheetContextText(deps.getCells) : ''; 112 + const systemPrompt = buildSystemMessage(sheetTitle, sheetText, { 113 + editorType: 'sheet', 114 + actionsEnabled, 115 + }); 116 + 117 + const sheetActionDeps = { 118 + setCellData: deps.setCellData, 119 + getCellData: deps.getCellData, 120 + cellId, 121 + parseRef, 122 + letterToCol, 123 + colToLetter, 124 + renderGrid: deps.renderGrid, 125 + }; 126 + 127 + const abortController = new AbortController(); 128 + deps.chatState.abortController = abortController; 129 + const bubble = appendStreamingBubble(deps.chatUI.messageList); 130 + let fullText = ''; 131 + 132 + await streamChat( 133 + cfg, 134 + deps.chatState.messages, 135 + systemPrompt, 136 + { 137 + onChunk(chunk: string) { 138 + fullText += chunk; 139 + bubble.update(renderMarkdown(fullText)); 140 + }, 141 + onDone(text: string) { 142 + if (text) { 143 + deps.chatState.messages.push({ role: 'assistant', content: text, ts: Date.now() }); 144 + 145 + if (actionsEnabled) { 146 + const { displayText, actions } = splitResponse(text); 147 + if (actions.length > 0) { 148 + bubble.update(renderMarkdown(displayText)); 149 + for (const action of actions) { 150 + if (!isSheetAction(action)) continue; 151 + appendActionCard(deps.chatUI.messageList, action, { 152 + onApply: (a: any) => { 153 + const result = executeSheetAction(a, sheetActionDeps); 154 + if (!result.success && result.error) { 155 + appendMessage(deps.chatUI.messageList, { role: 'assistant', content: `Action failed: ${result.error}`, ts: Date.now() }); 156 + } 157 + }, 158 + onDismiss: () => {}, 159 + }); 160 + } 161 + } 162 + } 163 + } 164 + }, 165 + onError(err: string) { 166 + deps.chatState.error = err; 167 + bubble.el.classList.add('ai-chat-bubble--error'); 168 + bubble.update(`<span class="ai-chat-error">${escapeHtml(err)}</span>`); 169 + }, 170 + }, 171 + abortController.signal, 172 + ); 173 + 174 + deps.chatState.loading = false; 175 + deps.chatState.abortController = null; 176 + deps.chatUI.sendBtn.style.display = ''; 177 + deps.chatUI.stopBtn.style.display = 'none'; 178 + }

+45 -1034

src/sheets/main.ts

··· 19 19 import { validateChartConfig, parseDataRange, extractChartData, transformChartData, buildChartJsConfig, CHART_TYPES, CHART_COLORS } from './charts.js'; 20 20 import { getUniqueColumnValues, applyFilters, clearColumnFilter, clearAllFilters, buildFilterState } from './filter.js'; 21 21 import { multiColumnSort } from './sort.js'; 22 - import { evaluateRules, buildCfStyle, computeColorScale, formatRuleLabel } from './conditional-format.js'; 22 + import { evaluateRules, buildCfStyle, computeColorScale } from './conditional-format.js'; 23 23 import { isErrorValue, getErrorInfo, formatErrorTooltip } from './error-tooltips.js'; 24 24 import { renderInteractiveCell, handleRichCellClick } from './rich-cells.js'; 25 25 import { parseDateValue, showDatePicker } from './date-picker.js'; ··· 33 33 import { parseCSVLine, detectHeaders } from './csv-utils.js'; 34 34 import type { SpillState } from './spill-tracking.js'; 35 35 import { computeSelectionStats, formatStatValue } from './status-bar.js'; 36 + import { showSortDialog as _showSortDialog, showCfModal as _showCfModal, showValidationModal as _showValidationModal } from './sheet-dialogs.js'; 37 + import { getSheetContextText as _getSheetContextText, sendChatMessage as _sendChatMessage } from './ai-chat-panel.js'; 38 + import { renderSheetTabs as _renderSheetTabs, reorderSheets as _reorderSheets, swapSheetData as _swapSheetData, beginInlineRename as _beginInlineRename, showSheetTabContextMenu as _showSheetTabContextMenu, showTabColorPicker as _showTabColorPicker, confirmAndDeleteSheet as _confirmAndDeleteSheet, doDuplicateSheet as _doDuplicateSheet } from './sheet-tabs-ui.js'; 39 + import { showPivotDialog as _showPivotDialog, renderPivots as _renderPivots } from './pivot-ui.js'; 36 40 import { FORMULA_FUNCTIONS, filterFunctions, navigateAutocomplete, getSelectedFunction } from './formula-autocomplete.js'; 37 41 import { createNote, updateNote, deleteNote, getNote, hasNote, getAllNotes } from './cell-notes.js'; 38 42 import { tokenizeForHighlighting, renderHighlightedFormula } from './formula-highlighter.js'; ··· 42 46 import { insertRow as rowColInsertRow, deleteRow as rowColDeleteRow, insertColumn as rowColInsertColumn, deleteColumn as rowColDeleteColumn } from './row-col-ops.js'; 43 47 import { createContextMenu, buildSheetsCellItems, buildSheetsColumnHeaderItems, buildSheetsRowHeaderItems, SEPARATOR } from '../lib/context-menu.js'; 44 48 import type { MenuItem, MenuItemConfig } from '../lib/context-menu.js'; 45 - import { duplicateSheet, deleteSheet, sheetHasData, countSheets, setTabColor, getTabColor, renameSheet, canMoveLeft, canMoveRight, TAB_COLORS } from './sheet-tab-management.js'; 49 + // Sheet tab management functions used via sheet-tabs-ui.ts (no longer directly imported here) 46 50 import { buildCopyHtml, buildCopyTsv } from './clipboard-copy.js'; 47 51 import { parseClipboardHtml, parseClipboardTsv } from './clipboard-paste.js'; 48 52 import { extractValuesOnly, extractFormulasOnly, extractFormattingOnly, transposeGrid, PASTE_MODES } from './paste-special.js'; ··· 53 57 import { buildSheetsPrintHtml } from '../lib/print-layout.js'; 54 58 import type { PrintCell, PrintRow, SheetsPrintData, SheetsPrintOptions } from '../lib/print-layout.js'; 55 59 import { 56 - createChatSidebar, createChatState, loadConfig, isConfigured, 57 - buildSystemMessage, streamChat, appendMessage, appendStreamingBubble, 58 - renderMarkdown, appendActionCard, initChatWiring, 60 + createChatSidebar, createChatState, loadConfig, initChatWiring, 59 61 } from '../lib/ai-chat.js'; 60 62 import { escapeHtml } from '../lib/escape-html.js'; 61 - import { splitResponse, isSheetAction } from '../lib/ai-actions.js'; 62 - import { executeSheetAction } from './ai-sheet-actions.js'; 63 - import { computePivot, formatAggregateValue } from './pivot-table.js'; 63 + // splitResponse/isSheetAction/executeSheetAction used via ai-chat-panel.ts 64 + // computePivot/formatAggregateValue used via pivot-ui.ts 64 65 import type { PivotConfig, AggregateFunction } from './pivot-table.js'; 65 66 import { buildKanbanColumns, buildGalleryCards, buildCalendarEvents, groupEventsByMonth, eventsForDate, createViewConfig, getViewTypes } from './database-views.js'; 66 67 import type { ViewConfig, ViewType } from './database-views.js'; ··· 2709 2710 if (freezeToggleBtn) { freezeToggleBtn.classList.toggle('active', fr > 0 || fc > 0); } 2710 2711 } 2711 2712 2712 - // --- Sheet tabs --- 2713 - let dragSourceSheetIdx = -1; 2714 - 2715 - /** Start inline rename on a sheet tab. */ 2716 - function beginInlineRename(tab: HTMLElement, sheet: any, sheetIdx: number) { 2717 - // Prevent re-entry if already editing 2718 - if (tab.querySelector('.sheet-tab-rename')) return; 2719 - 2720 - const currentName = sheet.get('name') || 'Sheet ' + (sheetIdx + 1); 2721 - 2722 - // Create a contenteditable span 2723 - const input = document.createElement('span'); 2724 - input.className = 'sheet-tab-rename'; 2725 - input.contentEditable = 'true'; 2726 - input.spellcheck = false; 2727 - input.textContent = currentName; 2728 - 2729 - // Replace tab content with the editable span (preserve color bar) 2730 - const colorBar = tab.querySelector('.sheet-tab-color-bar'); 2731 - tab.textContent = ''; 2732 - if (colorBar) tab.appendChild(colorBar); 2733 - tab.appendChild(input); 2734 - tab.draggable = false; // disable drag while editing 2735 - 2736 - // Select all text 2737 - const range = document.createRange(); 2738 - range.selectNodeContents(input); 2739 - const sel = window.getSelection(); 2740 - sel.removeAllRanges(); 2741 - sel.addRange(range); 2742 - input.focus(); 2743 - 2744 - let committed = false; 2745 - 2746 - function commit() { 2747 - if (committed) return; 2748 - committed = true; 2749 - const newName = (input.textContent || '').trim(); 2750 - if (newName && newName !== currentName) { 2751 - renameSheet(sheet, newName); 2752 - } 2753 - renderSheetTabs(); 2754 - } 2755 - 2756 - function cancel() { 2757 - if (committed) return; 2758 - committed = true; 2759 - renderSheetTabs(); 2760 - } 2761 - 2762 - input.addEventListener('keydown', (e) => { 2763 - if (e.key === 'Enter') { e.preventDefault(); commit(); } 2764 - else if (e.key === 'Escape') { e.preventDefault(); cancel(); } 2765 - }); 2766 - 2767 - input.addEventListener('blur', () => { 2768 - // Small delay to allow Escape keydown to fire before blur 2769 - setTimeout(() => { if (!committed) commit(); }, 0); 2770 - }); 2771 - } 2772 - 2773 - /** Show the tab color picker popup near a tab element. */ 2774 - function showTabColorPicker(tab: HTMLElement, sheet: any, sheetIdx: number) { 2775 - // Remove any existing color picker 2776 - document.querySelectorAll('.sheet-tab-color-picker').forEach(el => el.remove()); 2777 - 2778 - const picker = document.createElement('div'); 2779 - picker.className = 'sheet-tab-color-picker'; 2780 - 2781 - const currentColor = getTabColor(sheet); 2782 - 2783 - // "No color" option 2784 - const noneBtn = document.createElement('button'); 2785 - noneBtn.className = 'sheet-tab-color-swatch sheet-tab-color-none'; 2786 - noneBtn.title = 'No color'; 2787 - noneBtn.textContent = '\u2715'; 2788 - if (!currentColor) noneBtn.classList.add('selected'); 2789 - noneBtn.addEventListener('click', () => { 2790 - setTabColor(sheet, null); 2791 - renderSheetTabs(); 2792 - picker.remove(); 2793 - }); 2794 - picker.appendChild(noneBtn); 2795 - 2796 - // Preset colors 2797 - for (const color of TAB_COLORS) { 2798 - const swatch = document.createElement('button'); 2799 - swatch.className = 'sheet-tab-color-swatch'; 2800 - swatch.style.backgroundColor = color.value; 2801 - swatch.title = color.name; 2802 - if (currentColor === color.value) swatch.classList.add('selected'); 2803 - swatch.addEventListener('click', () => { 2804 - setTabColor(sheet, color.value); 2805 - renderSheetTabs(); 2806 - picker.remove(); 2807 - }); 2808 - picker.appendChild(swatch); 2809 - } 2810 - 2811 - // Position below the tab 2812 - const rect = tab.getBoundingClientRect(); 2813 - picker.style.position = 'fixed'; 2814 - picker.style.left = rect.left + 'px'; 2815 - picker.style.top = (rect.top - 40) + 'px'; // above the tab 2816 - picker.style.zIndex = '10000'; 2817 - 2818 - document.body.appendChild(picker); 2819 - 2820 - // Close on click outside 2821 - const closeHandler = (ev) => { 2822 - if (!picker.contains(ev.target)) { 2823 - picker.remove(); 2824 - document.removeEventListener('mousedown', closeHandler); 2825 - } 2713 + // --- Sheet tabs (extracted to sheet-tabs-ui.ts) --- 2714 + function _sheetTabsDeps() { 2715 + return { 2716 + ySheets, ydoc, getActiveSheetIdx: () => activeSheetIdx, 2717 + setActiveSheetIdx: (idx: number) => { activeSheetIdx = idx; }, 2718 + ensureSheet, evalCache, clearSpillMaps: _clearSpillMaps, 2719 + invalidateRecalcEngine, renderGrid, hideActiveContextMenu, 2720 + setActiveContextMenu: (menu: any) => { _activeContextMenu = menu; }, 2721 + sheetTabsContainer, 2826 2722 }; 2827 - setTimeout(() => document.addEventListener('mousedown', closeHandler), 0); 2828 2723 } 2829 - 2830 - /** Show confirmation dialog and delete a sheet. */ 2831 - function confirmAndDeleteSheet(sheetIdx: number) { 2832 - const total = countSheets(ySheets); 2833 - if (total <= 1) return; // cannot delete last sheet 2834 - 2835 - const sheet = ySheets.get('sheet_' + sheetIdx); 2836 - if (!sheet) return; 2837 - 2838 - const hasData = sheetHasData(sheet); 2839 - if (hasData) { 2840 - if (!confirm('This sheet contains data. Are you sure you want to delete it?')) return; 2841 - } 2842 - 2843 - const newActive = deleteSheet(ydoc, ySheets, sheetIdx, activeSheetIdx); 2844 - if (newActive >= 0) { 2845 - activeSheetIdx = newActive; 2846 - evalCache.clear(); _clearSpillMaps(); 2847 - invalidateRecalcEngine(); 2848 - renderSheetTabs(); 2849 - renderGrid(); 2850 - } 2851 - } 2852 - 2853 - /** Duplicate a sheet and switch to the copy. */ 2854 - function doDuplicateSheet(sheetIdx: number) { 2855 - const total = countSheets(ySheets); 2856 - const targetIdx = total; // append at end 2857 - const newSheet = duplicateSheet(ydoc, ySheets, sheetIdx, targetIdx); 2858 - if (newSheet) { 2859 - activeSheetIdx = targetIdx; 2860 - evalCache.clear(); _clearSpillMaps(); 2861 - invalidateRecalcEngine(); 2862 - renderSheetTabs(); 2863 - renderGrid(); 2864 - } 2865 - } 2866 - 2867 - /** Show the sheet tab context menu. */ 2868 - function showSheetTabContextMenu(e: MouseEvent, tab: HTMLElement, sheetIdx: number) { 2869 - e.preventDefault(); 2870 - hideActiveContextMenu(); 2871 - 2872 - const sheet = ensureSheet(sheetIdx); 2873 - const total = countSheets(ySheets); 2874 - 2875 - const items: MenuItem[] = [ 2876 - { label: 'Rename', icon: '\u270F', action: () => beginInlineRename(tab, sheet, sheetIdx) }, 2877 - { label: 'Duplicate', icon: '\u29C9', action: () => doDuplicateSheet(sheetIdx) }, 2878 - { label: 'Delete', icon: '\u2715', action: () => confirmAndDeleteSheet(sheetIdx), disabled: total <= 1 }, 2879 - SEPARATOR, 2880 - { label: 'Move Left', icon: '\u2190', action: () => { reorderSheets(sheetIdx, sheetIdx - 1); }, disabled: !canMoveLeft(sheetIdx) }, 2881 - { label: 'Move Right', icon: '\u2192', action: () => { reorderSheets(sheetIdx, sheetIdx + 1); }, disabled: !canMoveRight(sheetIdx, total) }, 2882 - SEPARATOR, 2883 - { label: 'Tab Color', icon: '\u25CF', action: () => showTabColorPicker(tab, sheet, sheetIdx) }, 2884 - ]; 2885 - 2886 - const ctxMenu = createContextMenu(items); 2887 - document.body.appendChild(ctxMenu.el); 2888 - ctxMenu.show(e.clientX, e.clientY); 2889 - _activeContextMenu = ctxMenu; 2890 - 2891 - // Close on click outside 2892 - const closeHandler = (ev) => { 2893 - if (!ctxMenu.el.contains(ev.target)) { 2894 - hideActiveContextMenu(); 2895 - document.removeEventListener('mousedown', closeHandler); 2896 - } 2897 - }; 2898 - setTimeout(() => document.addEventListener('mousedown', closeHandler), 0); 2899 - } 2900 - 2901 - function renderSheetTabs() { 2902 - sheetTabsContainer.querySelectorAll('.sheet-tab').forEach(t => t.remove()); 2903 - let sheetCount = 0; 2904 - ySheets.forEach((_, key) => { if (key.startsWith('sheet_')) sheetCount++; }); 2905 - if (sheetCount === 0) ensureSheet(0); 2906 - sheetCount = Math.max(sheetCount, 1); 2907 - const addBtn = document.getElementById('add-sheet'); 2908 - for (let i = 0; i < sheetCount; i++) { 2909 - const sheet = ensureSheet(i); 2910 - const tab = document.createElement('button'); 2911 - tab.className = 'sheet-tab' + (i === activeSheetIdx ? ' active' : ''); 2912 - tab.dataset.sheet = i; 2913 - 2914 - // Tab color indicator bar 2915 - const tabColor = getTabColor(sheet); 2916 - if (tabColor) { 2917 - const colorBar = document.createElement('span'); 2918 - colorBar.className = 'sheet-tab-color-bar'; 2919 - colorBar.style.backgroundColor = tabColor; 2920 - tab.appendChild(colorBar); 2921 - } 2922 - 2923 - // Tab label text 2924 - const label = document.createElement('span'); 2925 - label.className = 'sheet-tab-label'; 2926 - label.textContent = sheet.get('name') || 'Sheet ' + (i + 1); 2927 - tab.appendChild(label); 2928 - 2929 - tab.draggable = true; 2930 - tab.addEventListener('click', () => { activeSheetIdx = i; renderSheetTabs(); evalCache.clear(); _clearSpillMaps(); invalidateRecalcEngine(); renderGrid(); }); 2931 - 2932 - // Double-click for inline rename 2933 - tab.addEventListener('dblclick', (e) => { 2934 - e.preventDefault(); 2935 - beginInlineRename(tab, sheet, i); 2936 - }); 2937 - 2938 - // Right-click context menu 2939 - tab.addEventListener('contextmenu', (e) => { 2940 - showSheetTabContextMenu(e, tab, i); 2941 - }); 2942 - 2943 - // Drag reorder events 2944 - tab.addEventListener('dragstart', (e) => { 2945 - dragSourceSheetIdx = i; 2946 - tab.classList.add('dragging'); 2947 - e.dataTransfer.effectAllowed = 'move'; 2948 - e.dataTransfer.setData('text/plain', String(i)); 2949 - }); 2950 - tab.addEventListener('dragend', () => { 2951 - tab.classList.remove('dragging'); 2952 - dragSourceSheetIdx = -1; 2953 - sheetTabsContainer.querySelectorAll('.sheet-tab').forEach(t => { 2954 - t.classList.remove('drag-over-left', 'drag-over-right'); 2955 - }); 2956 - }); 2957 - tab.addEventListener('dragover', (e) => { 2958 - e.preventDefault(); 2959 - e.dataTransfer.dropEffect = 'move'; 2960 - const targetIdx = parseInt(tab.dataset.sheet); 2961 - if (targetIdx === dragSourceSheetIdx) return; 2962 - sheetTabsContainer.querySelectorAll('.sheet-tab').forEach(t => { 2963 - t.classList.remove('drag-over-left', 'drag-over-right'); 2964 - }); 2965 - if (targetIdx < dragSourceSheetIdx) { 2966 - tab.classList.add('drag-over-left'); 2967 - } else { 2968 - tab.classList.add('drag-over-right'); 2969 - } 2970 - }); 2971 - tab.addEventListener('dragleave', () => { 2972 - tab.classList.remove('drag-over-left', 'drag-over-right'); 2973 - }); 2974 - tab.addEventListener('drop', (e) => { 2975 - e.preventDefault(); 2976 - const fromIdx = dragSourceSheetIdx; 2977 - const toIdx = parseInt(tab.dataset.sheet); 2978 - if (fromIdx === toIdx || fromIdx < 0) return; 2979 - reorderSheets(fromIdx, toIdx); 2980 - }); 2981 - 2982 - sheetTabsContainer.insertBefore(tab, addBtn); 2983 - } 2984 - } 2985 - 2986 - function reorderSheets(fromIdx, toIdx) { 2987 - // Collect all sheet data in order 2988 - let sheetCount = 0; 2989 - ySheets.forEach((_, key) => { if (key.startsWith('sheet_')) sheetCount++; }); 2990 - 2991 - // Build ordered list of sheet keys 2992 - const sheetKeys = []; 2993 - for (let i = 0; i < sheetCount; i++) sheetKeys.push('sheet_' + i); 2994 - 2995 - // Reorder: remove fromIdx and insert at toIdx 2996 - const movedKey = sheetKeys.splice(fromIdx, 1)[0]; 2997 - sheetKeys.splice(toIdx, 0, movedKey); 2998 - 2999 - // Re-assign sheets to their new indices via adjacent swaps 3000 - ydoc.transact(() => { 3001 - const direction = fromIdx < toIdx ? 1 : -1; 3002 - let current = fromIdx; 3003 - while (current !== toIdx) { 3004 - const next = current + direction; 3005 - swapSheetData(current, next); 3006 - current = next; 3007 - } 3008 - }); 3009 - 3010 - // Update active sheet index to follow the moved sheet 3011 - if (activeSheetIdx === fromIdx) { 3012 - activeSheetIdx = toIdx; 3013 - } else if (fromIdx < toIdx && activeSheetIdx > fromIdx && activeSheetIdx <= toIdx) { 3014 - activeSheetIdx--; 3015 - } else if (fromIdx > toIdx && activeSheetIdx >= toIdx && activeSheetIdx < fromIdx) { 3016 - activeSheetIdx++; 3017 - } 3018 - 3019 - evalCache.clear(); _clearSpillMaps(); 3020 - invalidateRecalcEngine(); 3021 - renderSheetTabs(); 3022 - renderGrid(); 3023 - } 3024 - 3025 - function swapSheetData(idxA, idxB) { 3026 - const sheetA = ySheets.get('sheet_' + idxA); 3027 - const sheetB = ySheets.get('sheet_' + idxB); 3028 - if (!sheetA || !sheetB) return; 3029 - 3030 - // Swap names 3031 - const nameA = sheetA.get('name'); 3032 - const nameB = sheetB.get('name'); 3033 - sheetA.set('name', nameB); 3034 - sheetB.set('name', nameA); 3035 - 3036 - // Swap cells: we need to swap the Y.Map references 3037 - // Since Y.Map children can't be moved between parents, we swap the cell data 3038 - const cellsA = sheetA.get('cells'); 3039 - const cellsB = sheetB.get('cells'); 3040 - 3041 - // Collect all cell data from both 3042 - const dataA = new Map(); 3043 - const dataB = new Map(); 3044 - 3045 - if (cellsA) cellsA.forEach((val, key) => { 3046 - const cell = val; 3047 - dataA.set(key, { v: cell.get('v'), f: cell.get('f'), s: cell.get('s') }); 3048 - }); 3049 - 3050 - if (cellsB) cellsB.forEach((val, key) => { 3051 - const cell = val; 3052 - dataB.set(key, { v: cell.get('v'), f: cell.get('f'), s: cell.get('s') }); 3053 - }); 3054 - 3055 - // Clear both cell maps 3056 - if (cellsA) { 3057 - const keysA = []; 3058 - cellsA.forEach((_, key) => keysA.push(key)); 3059 - keysA.forEach(k => cellsA.delete(k)); 3060 - } 3061 - 3062 - if (cellsB) { 3063 - const keysB = []; 3064 - cellsB.forEach((_, key) => keysB.push(key)); 3065 - keysB.forEach(k => cellsB.delete(k)); 3066 - } 3067 - 3068 - // Write B's data into A, A's data into B 3069 - dataB.forEach((data, key) => { 3070 - const cell = new Y.Map(); 3071 - if (data.v !== undefined) cell.set('v', data.v); 3072 - if (data.f) cell.set('f', data.f); 3073 - if (data.s) cell.set('s', data.s); 3074 - cellsA.set(key, cell); 3075 - }); 3076 - 3077 - dataA.forEach((data, key) => { 3078 - const cell = new Y.Map(); 3079 - if (data.v !== undefined) cell.set('v', data.v); 3080 - if (data.f) cell.set('f', data.f); 3081 - if (data.s) cell.set('s', data.s); 3082 - cellsB.set(key, cell); 3083 - }); 3084 - 3085 - // Swap other properties 3086 - const propsToSwap = ['colWidths', 'rowCount', 'colCount', 'freezeRows', 'freezeCols', 'stripedRows', 'merges', 'cfRules', 'validations', 'notes', 'tabColor']; 3087 - for (const prop of propsToSwap) { 3088 - const valA = sheetA.get(prop); 3089 - const valB = sheetB.get(prop); 3090 - // Only swap simple values (numbers, booleans, strings). Y.Map/Y.Array refs can't be swapped directly. 3091 - if (typeof valA !== 'object' && typeof valB !== 'object') { 3092 - sheetA.set(prop, valB !== undefined ? valB : null); 3093 - sheetB.set(prop, valA !== undefined ? valA : null); 3094 - } 3095 - } 3096 - } 2724 + function renderSheetTabs() { _renderSheetTabs(_sheetTabsDeps()); } 2725 + function reorderSheets(fromIdx: number, toIdx: number) { _reorderSheets(_sheetTabsDeps(), fromIdx, toIdx); } 3097 2726 3098 2727 document.getElementById('add-sheet').addEventListener('click', () => { 3099 2728 let count = 0; ··· 3899 3528 return sheet.get('pivots'); 3900 3529 } 3901 3530 3531 + // showPivotDialog and renderPivots extracted to pivot-ui.ts 3532 + function _pivotDeps() { 3533 + return { getActiveSheet, getCellData, getPivots, ydoc, DEFAULT_COLS, DEFAULT_ROWS, pivotSection }; 3534 + } 3902 3535 function showPivotDialog(existingId?: string, existingConfig?: PivotConfig & { title?: string }) { 3903 - if (document.querySelector('.pivot-dialog-overlay')) return; 3904 - const overlay = document.createElement('div'); 3905 - overlay.className = 'sheet-dialog-overlay pivot-dialog-overlay'; 3906 - 3907 - const isEdit = !!existingId; 3908 - const sheet = getActiveSheet(); 3909 - const colCount = sheet.get('colCount') || DEFAULT_COLS; 3910 - 3911 - // Build column options from headers (row 1) 3912 - const colOptions: string[] = []; 3913 - for (let c = 1; c <= colCount; c++) { 3914 - const data = getCellData(cellId(c, 1)); 3915 - const label = data?.v ? String(data.v) : colToLetter(c); 3916 - colOptions.push(`<option value="${c}">${colToLetter(c)}: ${label}</option>`); 3917 - } 3918 - 3919 - const cfg = existingConfig || { rowFields: [], colFields: [], valueField: 1, aggregation: 'sum' as AggregateFunction, title: '' }; 3920 - const aggTypes: AggregateFunction[] = ['sum', 'count', 'avg', 'min', 'max', 'countDistinct']; 3921 - 3922 - overlay.innerHTML = ` 3923 - <div class="sheet-dialog"> 3924 - <h3>${isEdit ? 'Edit' : 'Create'} Pivot Table</h3> 3925 - <label>Title</label> 3926 - <input id="pivot-title" value="${cfg.title || ''}" placeholder="Pivot table title"> 3927 - <label>Row Fields (group by)</label> 3928 - <select id="pivot-rows" multiple size="4">${colOptions.map((o, i) => 3929 - o.replace('>', cfg.rowFields.includes(i + 1) ? ' selected>' : '>') 3930 - ).join('')}</select> 3931 - <label>Column Fields (optional)</label> 3932 - <select id="pivot-cols" multiple size="3">${colOptions.map((o, i) => 3933 - o.replace('>', cfg.colFields.includes(i + 1) ? ' selected>' : '>') 3934 - ).join('')}</select> 3935 - <label>Value Field</label> 3936 - <select id="pivot-value">${colOptions.map((o, i) => 3937 - o.replace('>', (i + 1) === cfg.valueField ? ' selected>' : '>') 3938 - ).join('')}</select> 3939 - <label>Aggregation</label> 3940 - <select id="pivot-agg">${aggTypes.map(a => 3941 - `<option value="${a}" ${a === cfg.aggregation ? 'selected' : ''}>${a}</option>` 3942 - ).join('')}</select> 3943 - <div class="sheet-dialog-actions"> 3944 - <button id="pivot-cancel">Cancel</button> 3945 - <button id="pivot-ok" class="btn-primary">${isEdit ? 'Update' : 'Create'}</button> 3946 - </div> 3947 - </div> 3948 - `; 3949 - document.body.appendChild(overlay); 3950 - 3951 - overlay.querySelector('#pivot-cancel')!.addEventListener('click', () => overlay.remove()); 3952 - overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 3953 - 3954 - overlay.querySelector('#pivot-ok')!.addEventListener('click', () => { 3955 - const rowFields = Array.from(overlay.querySelector('#pivot-rows')!.selectedOptions, o => Number(o.value)); 3956 - const colFields = Array.from(overlay.querySelector('#pivot-cols')!.selectedOptions, o => Number(o.value)); 3957 - const valueField = Number(overlay.querySelector('#pivot-value')!.value); 3958 - const aggregation = overlay.querySelector('#pivot-agg')!.value as AggregateFunction; 3959 - const title = overlay.querySelector('#pivot-title')!.value.trim(); 3960 - 3961 - if (rowFields.length === 0) { 3962 - alert('Select at least one row field.'); 3963 - return; 3964 - } 3965 - 3966 - const config = { rowFields, colFields, valueField, aggregation, title }; 3967 - const pivots = getPivots(); 3968 - const id = existingId || 'pivot_' + Date.now(); 3969 - pivots.set(id, JSON.stringify(config)); 3970 - overlay.remove(); 3971 - renderPivots(); 3972 - }); 3973 - 3974 - setTimeout(() => overlay.querySelector('#pivot-title')?.focus(), 50); 3536 + _showPivotDialog(_pivotDeps(), existingId, existingConfig); 3975 3537 } 3976 - 3977 3538 function renderPivots() { 3978 - const pivots = getPivots(); 3979 - pivotSection.innerHTML = ''; 3980 - 3981 - pivots.forEach((cfgStr: string, id: string) => { 3982 - const config = typeof cfgStr === 'string' ? JSON.parse(cfgStr) : cfgStr; 3983 - 3984 - // Build data from sheet rows (skip header row 1) 3985 - const sheet = getActiveSheet(); 3986 - const rowCount = sheet.get('rowCount') || DEFAULT_ROWS; 3987 - const colCount = sheet.get('colCount') || DEFAULT_COLS; 3988 - const dataRows: Map<string, unknown>[] = []; 3989 - 3990 - for (let r = 2; r <= rowCount; r++) { 3991 - const row = new Map<string, unknown>(); 3992 - let hasData = false; 3993 - for (let c = 1; c <= colCount; c++) { 3994 - const data = getCellData(cellId(c, r)); 3995 - const val = data?.v ?? ''; 3996 - if (val !== '') hasData = true; 3997 - row.set(cellId(c, r), val); 3998 - } 3999 - if (hasData) dataRows.push(row); 4000 - } 4001 - 4002 - if (dataRows.length === 0) return; 4003 - 4004 - const result = computePivot(dataRows, config, colToLetter, 2); 4005 - 4006 - // Build HTML table 4007 - const container = document.createElement('div'); 4008 - container.className = 'pivot-container'; 4009 - container.dataset.pivotId = id; 4010 - 4011 - const actions = document.createElement('div'); 4012 - actions.className = 'pivot-actions'; 4013 - actions.innerHTML = '<button class="pivot-edit">Edit</button><button class="pivot-delete">Delete</button>'; 4014 - container.appendChild(actions); 4015 - 4016 - if (config.title) { 4017 - const heading = document.createElement('h4'); 4018 - heading.textContent = config.title; 4019 - container.appendChild(heading); 4020 - } 4021 - 4022 - const table = document.createElement('table'); 4023 - table.className = 'pivot-table'; 4024 - 4025 - // Header row 4026 - const thead = document.createElement('thead'); 4027 - const headerRow = document.createElement('tr'); 4028 - 4029 - // Row field headers 4030 - for (const f of config.rowFields) { 4031 - const th = document.createElement('th'); 4032 - const hdr = getCellData(cellId(f, 1)); 4033 - th.textContent = hdr?.v ? String(hdr.v) : colToLetter(f); 4034 - headerRow.appendChild(th); 4035 - } 4036 - 4037 - // Column group headers 4038 - if (result.colKeys.length > 0 && result.colKeys[0].length > 0) { 4039 - for (const ck of result.colKeys) { 4040 - const th = document.createElement('th'); 4041 - th.textContent = ck.join(' / ') || '(empty)'; 4042 - headerRow.appendChild(th); 4043 - } 4044 - } else { 4045 - const th = document.createElement('th'); 4046 - const vHdr = getCellData(cellId(config.valueField, 1)); 4047 - th.textContent = (vHdr?.v ? String(vHdr.v) : colToLetter(config.valueField)) + ` (${config.aggregation})`; 4048 - headerRow.appendChild(th); 4049 - } 4050 - 4051 - const totalTh = document.createElement('th'); 4052 - totalTh.textContent = 'Total'; 4053 - headerRow.appendChild(totalTh); 4054 - thead.appendChild(headerRow); 4055 - table.appendChild(thead); 4056 - 4057 - // Body rows 4058 - const tbody = document.createElement('tbody'); 4059 - for (let ri = 0; ri < result.rowKeys.length; ri++) { 4060 - const tr = document.createElement('tr'); 4061 - for (const val of result.rowKeys[ri]) { 4062 - const td = document.createElement('td'); 4063 - td.className = 'pivot-row-header'; 4064 - td.textContent = val || '(empty)'; 4065 - tr.appendChild(td); 4066 - } 4067 - for (let ci = 0; ci < (result.colKeys.length || 1); ci++) { 4068 - const td = document.createElement('td'); 4069 - const cell = result.cells[ri]?.[ci]; 4070 - td.textContent = cell ? formatAggregateValue(cell.value, config.aggregation) : ''; 4071 - tr.appendChild(td); 4072 - } 4073 - const totalTd = document.createElement('td'); 4074 - totalTd.className = 'pivot-total'; 4075 - totalTd.textContent = formatAggregateValue(result.rowTotals[ri]?.value ?? 0, config.aggregation); 4076 - tr.appendChild(totalTd); 4077 - tbody.appendChild(tr); 4078 - } 4079 - table.appendChild(tbody); 4080 - 4081 - // Footer (column totals) 4082 - const tfoot = document.createElement('tfoot'); 4083 - const footRow = document.createElement('tr'); 4084 - const footLabel = document.createElement('td'); 4085 - footLabel.colSpan = config.rowFields.length; 4086 - footLabel.textContent = 'Total'; 4087 - footRow.appendChild(footLabel); 4088 - for (let ci = 0; ci < (result.colKeys.length || 1); ci++) { 4089 - const td = document.createElement('td'); 4090 - td.textContent = formatAggregateValue(result.colTotals[ci]?.value ?? 0, config.aggregation); 4091 - footRow.appendChild(td); 4092 - } 4093 - const grandTd = document.createElement('td'); 4094 - grandTd.className = 'pivot-total'; 4095 - grandTd.textContent = formatAggregateValue(result.grandTotal.value, config.aggregation); 4096 - footRow.appendChild(grandTd); 4097 - tfoot.appendChild(footRow); 4098 - table.appendChild(tfoot); 4099 - 4100 - container.appendChild(table); 4101 - pivotSection.appendChild(container); 4102 - 4103 - actions.querySelector('.pivot-edit')!.addEventListener('click', () => showPivotDialog(id, config)); 4104 - actions.querySelector('.pivot-delete')!.addEventListener('click', () => { 4105 - ydoc.transact(() => getPivots().delete(id)); 4106 - renderPivots(); 4107 - }); 4108 - }); 3539 + _renderPivots(_pivotDeps()); 4109 3540 } 4110 3541 4111 3542 document.getElementById('tb-pivot')!.addEventListener('click', () => { ··· 4569 4000 // Multi-Column Sort Dialog Feature 4570 4001 // ======================================================== 4571 4002 4003 + // showSortDialog extracted to sheet-dialogs.ts 4572 4004 function showSortDialog() { 4573 - const sheet = getActiveSheet(); 4574 - const colCount = sheet.get('colCount') || DEFAULT_COLS; 4575 - 4576 - const overlay = document.createElement('div'); 4577 - overlay.className = 'sheet-dialog-overlay'; 4578 - 4579 - let colOptions = ''; 4580 - for (let c = 1; c <= colCount; c++) { 4581 - colOptions += `<option value="${c}">Column ${colToLetter(c)}</option>`; 4582 - } 4583 - 4584 - overlay.innerHTML = ` 4585 - <div class="sheet-dialog"> 4586 - <h3>Sort</h3> 4587 - <div class="sort-level"> 4588 - <span class="sort-level-label">Sort by</span> 4589 - <select id="sort-col-1">${colOptions}</select> 4590 - <select id="sort-order-1"><option value="asc">A to Z</option><option value="desc">Z to A</option></select> 4591 - </div> 4592 - <div class="sort-level"> 4593 - <span class="sort-level-label">Then by</span> 4594 - <select id="sort-col-2"><option value="">(none)</option>${colOptions}</select> 4595 - <select id="sort-order-2"><option value="asc">A to Z</option><option value="desc">Z to A</option></select> 4596 - </div> 4597 - <div class="sort-level"> 4598 - <span class="sort-level-label">Then by</span> 4599 - <select id="sort-col-3"><option value="">(none)</option>${colOptions}</select> 4600 - <select id="sort-order-3"><option value="asc">A to Z</option><option value="desc">Z to A</option></select> 4601 - </div> 4602 - <div class="sheet-dialog-actions"> 4603 - <button id="sort-cancel">Cancel</button> 4604 - <button id="sort-ok" class="btn-primary">Sort</button> 4605 - </div> 4606 - </div> 4607 - `; 4608 - document.body.appendChild(overlay); 4609 - 4610 - // Pre-select current column 4611 - overlay.querySelector('#sort-col-1').value = String(selectedCell.col); 4612 - 4613 - overlay.querySelector('#sort-cancel').addEventListener('click', () => overlay.remove()); 4614 - overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 4615 - 4616 - overlay.querySelector('#sort-ok').addEventListener('click', () => { 4617 - const sortKeys = []; 4618 - for (let i = 1; i <= 3; i++) { 4619 - const colVal = overlay.querySelector('#sort-col-' + i).value; 4620 - if (!colVal) continue; 4621 - sortKeys.push({ 4622 - col: parseInt(colVal), 4623 - order: overlay.querySelector('#sort-order-' + i).value, 4624 - }); 4625 - } 4626 - if (sortKeys.length === 0) { overlay.remove(); return; } 4627 - 4628 - // Determine sort range 4629 - const sht = getActiveSheet(); 4630 - const colCt = sht.get('colCount') || DEFAULT_COLS; 4631 - let startRow = 1, endRow = sht.get('rowCount') || DEFAULT_ROWS; 4632 - if (selectionRange) { 4633 - const norm = normalizeRange(selectionRange); 4634 - startRow = norm.startRow; 4635 - endRow = norm.endRow; 4636 - } 4637 - 4638 - // Build row objects 4639 - const rows = []; 4640 - for (let r = startRow; r <= endRow; r++) { 4641 - const obj = { _row: r }; 4642 - for (let c = 1; c <= colCt; c++) { 4643 - const data = getCellData(cellId(c, r)); 4644 - obj[c] = data ? data : null; 4645 - } 4646 - // Extract sort values from cell values 4647 - for (const key of sortKeys) { 4648 - const data = obj[key.col]; 4649 - obj['_sort_' + key.col] = data?.v ?? ''; 4650 - } 4651 - rows.push(obj); 4652 - } 4653 - 4654 - // Sort using sort key values 4655 - const sortKeysForModule = sortKeys.map(k => ({ col: '_sort_' + k.col, order: k.order })); 4656 - 4657 - // Custom sort since our keys are in _sort_ prefixed fields 4658 - const sorted = [...rows]; 4659 - sorted.sort((a, b) => { 4660 - for (const key of sortKeys) { 4661 - const aVal = a['_sort_' + key.col]; 4662 - const bVal = b['_sort_' + key.col]; 4663 - let cmp = 0; 4664 - const aEmpty = aVal === '' || aVal === null || aVal === undefined; 4665 - const bEmpty = bVal === '' || bVal === null || bVal === undefined; 4666 - if (aEmpty && bEmpty) cmp = 0; 4667 - else if (aEmpty) cmp = -1; 4668 - else if (bEmpty) cmp = 1; 4669 - else if (typeof aVal === 'number' && typeof bVal === 'number') cmp = aVal - bVal; 4670 - else cmp = String(aVal).localeCompare(String(bVal)); 4671 - if (key.order === 'desc') cmp = -cmp; 4672 - if (cmp !== 0) return cmp; 4673 - } 4674 - return 0; 4675 - }); 4676 - 4677 - // Write sorted data back 4678 - ydoc.transact(() => { 4679 - const cells = getCells(); 4680 - sorted.forEach((row, idx) => { 4681 - const targetRow = startRow + idx; 4682 - for (let c = 1; c <= colCt; c++) { 4683 - const id = cellId(c, targetRow); 4684 - const data = row[c]; 4685 - if (data) { setCellData(id, data); } 4686 - else if (cells.has(id)) { cells.delete(id); } 4687 - } 4688 - }); 4689 - }); 4690 - 4691 - evalCache.clear(); _clearSpillMaps(); invalidateRecalcEngine(); 4692 - refreshVisibleCells(); 4693 - overlay.remove(); 4005 + _showSortDialog({ 4006 + getActiveSheet, selectedCell, selectionRange, getCellData, getCells, setCellData, 4007 + ydoc, DEFAULT_COLS, DEFAULT_ROWS, evalCache, clearSpillMaps: _clearSpillMaps, 4008 + invalidateRecalcEngine, refreshVisibleCells, 4694 4009 }); 4695 4010 } 4696 4011 ··· 4786 4101 }); 4787 4102 4788 4103 // --- Conditional Formatting modal --- 4104 + // showCfModal extracted to sheet-dialogs.ts 4789 4105 function showCfModal() { 4790 - if (document.querySelector('.cf-modal')) return; 4791 - const overlay = document.createElement('div'); 4792 - overlay.className = 'modal-overlay'; 4793 - const modal = document.createElement('div'); 4794 - modal.className = 'modal cf-modal'; 4795 - 4796 - function renderCfModal() { 4797 - const rules = getCfRulesArray(); 4798 - let html = '<h2>Conditional Formatting <button class="shortcuts-modal-close cf-close" title="Close">\u2715</button></h2>'; 4799 - 4800 - // Existing rules list 4801 - html += '<ul class="cf-rule-list">'; 4802 - if (rules.length === 0) { 4803 - html += '<li style="color:var(--color-text-faint); font-size:0.8rem;">No rules yet</li>'; 4804 - } 4805 - rules.forEach((rule, idx) => { 4806 - const bgPreview = rule.bgColor || 'transparent'; 4807 - const label = formatRuleLabel(rule); 4808 - html += '<li class="cf-rule-item">'; 4809 - html += '<span class="cf-rule-preview" style="background:' + bgPreview + '"></span>'; 4810 - html += '<span class="cf-rule-text">' + escapeHtml(label) + '</span>'; 4811 - html += '<button class="cf-delete-rule" data-cf-idx="' + idx + '" title="Delete rule">\u2715</button>'; 4812 - html += '</li>'; 4813 - }); 4814 - html += '</ul>'; 4815 - 4816 - // Add new rule form 4817 - html += '<div class="cf-add-form">'; 4818 - html += '<label>Rule type</label>'; 4819 - html += '<select id="cf-type">'; 4820 - html += '<option value="greaterThan">Greater than</option>'; 4821 - html += '<option value="lessThan">Less than</option>'; 4822 - html += '<option value="equalTo">Equal to</option>'; 4823 - html += '<option value="between">Between</option>'; 4824 - html += '<option value="textContains">Text contains</option>'; 4825 - html += '<option value="isEmpty">Is empty</option>'; 4826 - html += '<option value="isNotEmpty">Is not empty</option>'; 4827 - html += '</select>'; 4828 - html += '<div class="cf-value-row">'; 4829 - html += '<input id="cf-value1" type="text" placeholder="Value">'; 4830 - html += '<input id="cf-value2" type="text" placeholder="Value 2 (for between)" style="display:none">'; 4831 - html += '</div>'; 4832 - html += '<div class="cf-color-row">'; 4833 - html += '<label>Background</label><input type="color" id="cf-bg" value="#fce4e4">'; 4834 - html += '<label>Text</label><input type="color" id="cf-text" value="#9b1c1c">'; 4835 - html += '</div>'; 4836 - html += '<div class="cf-btn-row">'; 4837 - html += '<button class="cf-btn-add cf-btn-primary">Add rule</button>'; 4838 - html += '</div>'; 4839 - html += '</div>'; 4840 - 4841 - modal.innerHTML = html; 4842 - 4843 - // Show/hide value2 based on type 4844 - const typeSelect = modal.querySelector('#cf-type'); 4845 - const value1Input = modal.querySelector('#cf-value1'); 4846 - const value2Input = modal.querySelector('#cf-value2'); 4847 - typeSelect.addEventListener('change', () => { 4848 - const t = typeSelect.value; 4849 - value2Input.style.display = t === 'between' ? '' : 'none'; 4850 - const needsValue = !['isEmpty', 'isNotEmpty'].includes(t); 4851 - value1Input.style.display = needsValue ? '' : 'none'; 4852 - }); 4853 - 4854 - // Delete rule buttons 4855 - modal.querySelectorAll('.cf-delete-rule').forEach(btn => { 4856 - btn.addEventListener('click', () => { 4857 - const idx = parseInt(btn.dataset.cfIdx); 4858 - const yArr = getCfRules(); 4859 - ydoc.transact(() => { yArr.delete(idx, 1); }); 4860 - renderCfModal(); 4861 - evalCache.clear(); _clearSpillMaps(); invalidateRecalcEngine(); 4862 - refreshVisibleCells(); 4863 - }); 4864 - }); 4865 - 4866 - // Add rule button 4867 - modal.querySelector('.cf-btn-add').addEventListener('click', () => { 4868 - const type = typeSelect.value; 4869 - const value = value1Input.value; 4870 - const value2 = value2Input.value; 4871 - const bgColor = modal.querySelector('#cf-bg').value; 4872 - const textColor = modal.querySelector('#cf-text').value; 4873 - const rule = { type, bgColor, textColor }; 4874 - if (!['isEmpty', 'isNotEmpty'].includes(type)) rule.value = value; 4875 - if (type === 'between') rule.value2 = value2; 4876 - const yArr = getCfRules(); 4877 - ydoc.transact(() => { yArr.push([JSON.stringify(rule)]); }); 4878 - renderCfModal(); 4879 - evalCache.clear(); _clearSpillMaps(); invalidateRecalcEngine(); 4880 - refreshVisibleCells(); 4881 - }); 4882 - 4883 - // Close button 4884 - modal.querySelector('.cf-close').addEventListener('click', () => overlay.remove()); 4885 - } 4886 - 4887 - renderCfModal(); 4888 - overlay.appendChild(modal); 4889 - overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 4890 - const handler = (e) => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', handler); } }; 4891 - document.addEventListener('keydown', handler); 4892 - document.body.appendChild(overlay); 4106 + _showCfModal({ 4107 + getCfRulesArray, getCfRules, ydoc, evalCache, clearSpillMaps: _clearSpillMaps, 4108 + invalidateRecalcEngine, refreshVisibleCells, 4109 + }); 4893 4110 } 4894 - 4895 - // formatRuleLabel extracted to conditional-format.ts 4896 4111 4897 4112 document.getElementById('tb-cf').addEventListener('click', () => { closeAllDropdowns(); showCfModal(); }); 4898 4113 4899 - // --- Data Validation modal --- 4114 + // showValidationModal extracted to sheet-dialogs.ts 4900 4115 function showValidationModal() { 4901 - if (document.querySelector('.dv-modal')) return; 4902 - const id = cellId(selectedCell.col, selectedCell.row); 4903 - const existing = getValidationForCell(id); 4904 - 4905 - const overlay = document.createElement('div'); 4906 - overlay.className = 'modal-overlay'; 4907 - const modal = document.createElement('div'); 4908 - modal.className = 'modal dv-modal'; 4909 - 4910 - let html = '<h2>Data Validation <button class="shortcuts-modal-close dv-close" title="Close">\u2715</button></h2>'; 4911 - html += '<div class="dv-form">'; 4912 - html += '<label>Cell: ' + id + (selectionRange ? ' (applied to selected range)' : '') + '</label>'; 4913 - html += '<label>Validation type</label>'; 4914 - html += '<select id="dv-type">'; 4915 - html += '<option value="">None</option>'; 4916 - html += '<option value="list"' + (existing?.type === 'list' ? ' selected' : '') + '>List of items</option>'; 4917 - html += '<option value="numberBetween"' + (existing?.type === 'numberBetween' ? ' selected' : '') + '>Number between</option>'; 4918 - html += '<option value="textLength"' + (existing?.type === 'textLength' ? ' selected' : '') + '>Text length</option>'; 4919 - html += '</select>'; 4920 - html += '<input id="dv-value1" type="text" placeholder="Items (comma-separated) or min" value="' + escapeHtml(existing?.value || '') + '">'; 4921 - html += '<input id="dv-value2" type="text" placeholder="Max value" value="' + escapeHtml(existing?.value2 || '') + '" style="display:' + (existing?.type === 'numberBetween' || existing?.type === 'textLength' ? 'block' : 'none') + '">'; 4922 - html += '<div class="dv-btn-row">'; 4923 - if (existing) html += '<button class="dv-btn-danger dv-remove">Remove</button>'; 4924 - html += '<button class="dv-btn-primary dv-apply">Apply</button>'; 4925 - html += '</div>'; 4926 - html += '</div>'; 4927 - 4928 - modal.innerHTML = html; 4929 - 4930 - const typeSelect = modal.querySelector('#dv-type'); 4931 - const value1Input = modal.querySelector('#dv-value1'); 4932 - const value2Input = modal.querySelector('#dv-value2'); 4933 - 4934 - typeSelect.addEventListener('change', () => { 4935 - const t = typeSelect.value; 4936 - value1Input.style.display = t ? '' : 'none'; 4937 - value2Input.style.display = (t === 'numberBetween' || t === 'textLength') ? '' : 'none'; 4938 - if (t === 'list') { value1Input.placeholder = 'Items (comma-separated)'; } 4939 - else if (t === 'numberBetween') { value1Input.placeholder = 'Min'; value2Input.placeholder = 'Max'; } 4940 - else if (t === 'textLength') { value1Input.placeholder = 'Min length'; value2Input.placeholder = 'Max length'; } 4116 + _showValidationModal({ 4117 + selectedCell, selectionRange, getValidationForCell, getValidations, 4118 + ydoc, applyToSelectedCells, refreshVisibleCells, renderGrid, 4941 4119 }); 4942 - 4943 - // Apply button 4944 - modal.querySelector('.dv-apply').addEventListener('click', () => { 4945 - const type = typeSelect.value; 4946 - const validations = getValidations(); 4947 - if (!type) { 4948 - // Remove validation from selected cells 4949 - applyToSelectedCells((cellId) => { 4950 - ydoc.transact(() => { if (validations.has(cellId)) validations.delete(cellId); }); 4951 - }); 4952 - } else { 4953 - const rule: { type: string; value: string; value2?: string } = { type, value: value1Input.value }; 4954 - if (type === 'numberBetween' || type === 'textLength') rule.value2 = value2Input.value; 4955 - applyToSelectedCells((cellId) => { 4956 - ydoc.transact(() => { validations.set(cellId, JSON.stringify(rule)); }); 4957 - }); 4958 - } 4959 - overlay.remove(); 4960 - refreshVisibleCells(); 4961 - }); 4962 - 4963 - // Remove button 4964 - const removeBtn = modal.querySelector('.dv-remove'); 4965 - if (removeBtn) { 4966 - removeBtn.addEventListener('click', () => { 4967 - const validations = getValidations(); 4968 - applyToSelectedCells((cellId) => { 4969 - ydoc.transact(() => { if (validations.has(cellId)) validations.delete(cellId); }); 4970 - }); 4971 - overlay.remove(); 4972 - renderGrid(); 4973 - }); 4974 - } 4975 - 4976 - // Close 4977 - modal.querySelector('.dv-close').addEventListener('click', () => overlay.remove()); 4978 - overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 4979 - const handler = (e) => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', handler); } }; 4980 - document.addEventListener('keydown', handler); 4981 - 4982 - overlay.appendChild(modal); 4983 - document.body.appendChild(overlay); 4984 4120 } 4985 4121 4986 4122 function applyToSelectedCells(fn) { ··· 5986 5122 }); 5987 5123 5988 5124 /** Extract spreadsheet content as text for AI context */ 5989 - function getSheetContextText() { 5990 - const cells = getCells(); 5991 - if (!cells || cells.size === 0) return ''; 5992 - 5993 - const rows = {}; 5994 - let maxCol = 0; 5995 - let maxRow = 0; 5996 - cells.forEach((cell, id) => { 5997 - const ref = parseRef(id); 5998 - if (!ref) return; 5999 - const { col, row } = ref; 6000 - if (!rows[row]) rows[row] = {}; 6001 - const c = cell instanceof Y.Map ? cell : null; 6002 - const formula = c ? c.get('f') : ''; 6003 - const value = c ? (c.get('v') ?? '') : ''; 6004 - rows[row][col] = formula ? `=${formula}` : String(value); 6005 - if (col > maxCol) maxCol = col; 6006 - if (row > maxRow) maxRow = row; 6007 - }); 6008 - 6009 - const lines = []; 6010 - // Header row with column letters 6011 - const headers = ['']; 6012 - for (let c = 0; c <= maxCol; c++) headers.push(colToLetter(c)); 6013 - lines.push(headers.join('\t')); 6014 - 6015 - for (let r = 0; r <= maxRow; r++) { 6016 - if (!rows[r]) continue; 6017 - const cols = [String(r + 1)]; 6018 - for (let c = 0; c <= maxCol; c++) { 6019 - cols.push(rows[r]?.[c] || ''); 6020 - } 6021 - // Skip completely empty rows 6022 - if (cols.slice(1).every(v => v === '')) continue; 6023 - lines.push(cols.join('\t')); 6024 - } 6025 - return lines.join('\n'); 6026 - } 6027 - 5125 + // getSheetContextText and sendChatMessage extracted to ai-chat-panel.ts 5126 + function getSheetContextText() { return _getSheetContextText(getCells); } 6028 5127 async function sendChatMessage() { 6029 - const text = chatUI.input.value.trim(); 6030 - if (!text || chatState.loading) return; 6031 - 6032 - const cfg = chatWiring.getConfig(); 6033 - if (!isConfigured(cfg)) { 6034 - chatUI.settingsPanel.style.display = ''; 6035 - chatUI.endpointInput.focus(); 6036 - return; 6037 - } 6038 - 6039 - const userMsg = { role: 'user', content: text, ts: Date.now() }; 6040 - chatState.messages.push(userMsg); 6041 - appendMessage(chatUI.messageList, userMsg); 6042 - 6043 - chatUI.input.value = ''; 6044 - chatUI.input.style.height = ''; 6045 - chatUI.sendBtn.style.display = 'none'; 6046 - chatUI.stopBtn.style.display = ''; 6047 - chatState.loading = true; 6048 - chatState.error = null; 6049 - 6050 - const sheetTitle = (titleInput).value.trim() || 'Untitled Spreadsheet'; 6051 - const includeContext = chatUI.contextToggle.checked; 6052 - const actionsEnabled = chatUI.actionsToggle.checked; 6053 - const sheetText = includeContext ? getSheetContextText() : ''; 6054 - const systemPrompt = buildSystemMessage(sheetTitle, sheetText, { 6055 - editorType: 'sheet', 6056 - actionsEnabled, 5128 + return _sendChatMessage({ 5129 + getCells, getCellData, setCellData, renderGrid, chatUI, chatState, chatWiring, 5130 + titleInput: titleInput as HTMLInputElement, 6057 5131 }); 6058 - 6059 - const sheetActionDeps = { 6060 - setCellData, 6061 - getCellData, 6062 - cellId, 6063 - parseRef, 6064 - letterToCol, 6065 - colToLetter, 6066 - renderGrid, 6067 - }; 6068 - 6069 - const abortController = new AbortController(); 6070 - chatState.abortController = abortController; 6071 - const bubble = appendStreamingBubble(chatUI.messageList); 6072 - let fullText = ''; 6073 - 6074 - await streamChat( 6075 - cfg, 6076 - chatState.messages, 6077 - systemPrompt, 6078 - { 6079 - onChunk(chunk) { 6080 - fullText += chunk; 6081 - bubble.update(renderMarkdown(fullText)); 6082 - }, 6083 - onDone(text) { 6084 - if (text) { 6085 - chatState.messages.push({ role: 'assistant', content: text, ts: Date.now() }); 6086 - 6087 - // Parse and render action cards 6088 - if (actionsEnabled) { 6089 - const { displayText, actions } = splitResponse(text); 6090 - if (actions.length > 0) { 6091 - bubble.update(renderMarkdown(displayText)); 6092 - for (const action of actions) { 6093 - if (!isSheetAction(action)) continue; 6094 - appendActionCard(chatUI.messageList, action, { 6095 - onApply: (a) => { 6096 - const result = executeSheetAction(a, sheetActionDeps); 6097 - if (!result.success && result.error) { 6098 - appendMessage(chatUI.messageList, { role: 'assistant', content: `Action failed: ${result.error}`, ts: Date.now() }); 6099 - } 6100 - }, 6101 - onDismiss: () => {}, 6102 - }); 6103 - } 6104 - } 6105 - } 6106 - } 6107 - }, 6108 - onError(err) { 6109 - chatState.error = err; 6110 - bubble.el.classList.add('ai-chat-bubble--error'); 6111 - bubble.update(`<span class="ai-chat-error">${escapeHtml(err)}</span>`); 6112 - }, 6113 - }, 6114 - abortController.signal, 6115 - ); 6116 - 6117 - chatState.loading = false; 6118 - chatState.abortController = null; 6119 - chatUI.sendBtn.style.display = ''; 6120 - chatUI.stopBtn.style.display = 'none'; 6121 5132 } 6122 5133 6123 5134

+229

src/sheets/pivot-ui.ts

··· 1 + /** 2 + * Pivot table UI — dialog and rendering. 3 + * 4 + * Extracted from main.ts for decomposition. 5 + */ 6 + 7 + import { colToLetter, cellId } from './formulas.js'; 8 + import { computePivot, formatAggregateValue } from './pivot-table.js'; 9 + import type { PivotConfig, AggregateFunction } from './pivot-table.js'; 10 + 11 + // ── Types ─────────────────────────────────────────────────── 12 + 13 + export interface PivotUIDeps { 14 + getActiveSheet: () => any; 15 + getCellData: (id: string) => { v?: any; f?: string; s?: any } | null; 16 + getPivots: () => any; 17 + ydoc: { transact: (fn: () => void) => void }; 18 + DEFAULT_COLS: number; 19 + DEFAULT_ROWS: number; 20 + pivotSection: HTMLElement; 21 + } 22 + 23 + // ── Pivot Dialog ──────────────────────────────────────────── 24 + 25 + export function showPivotDialog(deps: PivotUIDeps, existingId?: string, existingConfig?: PivotConfig & { title?: string }): void { 26 + if (document.querySelector('.pivot-dialog-overlay')) return; 27 + const overlay = document.createElement('div'); 28 + overlay.className = 'sheet-dialog-overlay pivot-dialog-overlay'; 29 + 30 + const isEdit = !!existingId; 31 + const sheet = deps.getActiveSheet(); 32 + const colCount = sheet.get('colCount') || deps.DEFAULT_COLS; 33 + 34 + const colOptions: string[] = []; 35 + for (let c = 1; c <= colCount; c++) { 36 + const data = deps.getCellData(cellId(c, 1)); 37 + const label = data?.v ? String(data.v) : colToLetter(c); 38 + colOptions.push(`<option value="${c}">${colToLetter(c)}: ${label}</option>`); 39 + } 40 + 41 + const cfg = existingConfig || { rowFields: [] as number[], colFields: [] as number[], valueField: 1, aggregation: 'sum' as AggregateFunction, title: '' }; 42 + const aggTypes: AggregateFunction[] = ['sum', 'count', 'avg', 'min', 'max', 'countDistinct']; 43 + 44 + overlay.innerHTML = ` 45 + <div class="sheet-dialog"> 46 + <h3>${isEdit ? 'Edit' : 'Create'} Pivot Table</h3> 47 + <label>Title</label> 48 + <input id="pivot-title" value="${cfg.title || ''}" placeholder="Pivot table title"> 49 + <label>Row Fields (group by)</label> 50 + <select id="pivot-rows" multiple size="4">${colOptions.map((o, i) => 51 + o.replace('>', cfg.rowFields.includes(i + 1) ? ' selected>' : '>') 52 + ).join('')}</select> 53 + <label>Column Fields (optional)</label> 54 + <select id="pivot-cols" multiple size="3">${colOptions.map((o, i) => 55 + o.replace('>', cfg.colFields.includes(i + 1) ? ' selected>' : '>') 56 + ).join('')}</select> 57 + <label>Value Field</label> 58 + <select id="pivot-value">${colOptions.map((o, i) => 59 + o.replace('>', (i + 1) === cfg.valueField ? ' selected>' : '>') 60 + ).join('')}</select> 61 + <label>Aggregation</label> 62 + <select id="pivot-agg">${aggTypes.map(a => 63 + `<option value="${a}" ${a === cfg.aggregation ? 'selected' : ''}>${a}</option>` 64 + ).join('')}</select> 65 + <div class="sheet-dialog-actions"> 66 + <button id="pivot-cancel">Cancel</button> 67 + <button id="pivot-ok" class="btn-primary">${isEdit ? 'Update' : 'Create'}</button> 68 + </div> 69 + </div> 70 + `; 71 + document.body.appendChild(overlay); 72 + 73 + overlay.querySelector('#pivot-cancel')!.addEventListener('click', () => overlay.remove()); 74 + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 75 + 76 + overlay.querySelector('#pivot-ok')!.addEventListener('click', () => { 77 + const rowFields = Array.from((overlay.querySelector('#pivot-rows') as HTMLSelectElement).selectedOptions, o => Number(o.value)); 78 + const colFields = Array.from((overlay.querySelector('#pivot-cols') as HTMLSelectElement).selectedOptions, o => Number(o.value)); 79 + const valueField = Number((overlay.querySelector('#pivot-value') as HTMLSelectElement).value); 80 + const aggregation = (overlay.querySelector('#pivot-agg') as HTMLSelectElement).value as AggregateFunction; 81 + const title = (overlay.querySelector('#pivot-title') as HTMLInputElement).value.trim(); 82 + 83 + if (rowFields.length === 0) { 84 + alert('Select at least one row field.'); 85 + return; 86 + } 87 + 88 + const config = { rowFields, colFields, valueField, aggregation, title }; 89 + const pivots = deps.getPivots(); 90 + const id = existingId || 'pivot_' + Date.now(); 91 + pivots.set(id, JSON.stringify(config)); 92 + overlay.remove(); 93 + renderPivots(deps); 94 + }); 95 + 96 + setTimeout(() => (overlay.querySelector('#pivot-title') as HTMLInputElement)?.focus(), 50); 97 + } 98 + 99 + // ── Render Pivots ─────────────────────────────────────────── 100 + 101 + export function renderPivots(deps: PivotUIDeps): void { 102 + const pivots = deps.getPivots(); 103 + deps.pivotSection.innerHTML = ''; 104 + 105 + pivots.forEach((cfgStr: string, id: string) => { 106 + const config = typeof cfgStr === 'string' ? JSON.parse(cfgStr) : cfgStr; 107 + 108 + const sheet = deps.getActiveSheet(); 109 + const rowCount = sheet.get('rowCount') || deps.DEFAULT_ROWS; 110 + const colCount = sheet.get('colCount') || deps.DEFAULT_COLS; 111 + const dataRows: Map<string, unknown>[] = []; 112 + 113 + for (let r = 2; r <= rowCount; r++) { 114 + const row = new Map<string, unknown>(); 115 + let hasData = false; 116 + for (let c = 1; c <= colCount; c++) { 117 + const data = deps.getCellData(cellId(c, r)); 118 + const val = data?.v ?? ''; 119 + if (val !== '') hasData = true; 120 + row.set(cellId(c, r), val); 121 + } 122 + if (hasData) dataRows.push(row); 123 + } 124 + 125 + if (dataRows.length === 0) return; 126 + 127 + const result = computePivot(dataRows, config, colToLetter, 2); 128 + 129 + const container = document.createElement('div'); 130 + container.className = 'pivot-container'; 131 + container.dataset.pivotId = id; 132 + 133 + const actions = document.createElement('div'); 134 + actions.className = 'pivot-actions'; 135 + actions.innerHTML = '<button class="pivot-edit">Edit</button><button class="pivot-delete">Delete</button>'; 136 + container.appendChild(actions); 137 + 138 + if (config.title) { 139 + const heading = document.createElement('h4'); 140 + heading.textContent = config.title; 141 + container.appendChild(heading); 142 + } 143 + 144 + const table = document.createElement('table'); 145 + table.className = 'pivot-table'; 146 + 147 + // Header row 148 + const thead = document.createElement('thead'); 149 + const headerRow = document.createElement('tr'); 150 + 151 + for (const f of config.rowFields) { 152 + const th = document.createElement('th'); 153 + const hdr = deps.getCellData(cellId(f, 1)); 154 + th.textContent = hdr?.v ? String(hdr.v) : colToLetter(f); 155 + headerRow.appendChild(th); 156 + } 157 + 158 + if (result.colKeys.length > 0 && result.colKeys[0].length > 0) { 159 + for (const ck of result.colKeys) { 160 + const th = document.createElement('th'); 161 + th.textContent = ck.join(' / ') || '(empty)'; 162 + headerRow.appendChild(th); 163 + } 164 + } else { 165 + const th = document.createElement('th'); 166 + const vHdr = deps.getCellData(cellId(config.valueField, 1)); 167 + th.textContent = (vHdr?.v ? String(vHdr.v) : colToLetter(config.valueField)) + ` (${config.aggregation})`; 168 + headerRow.appendChild(th); 169 + } 170 + 171 + const totalTh = document.createElement('th'); 172 + totalTh.textContent = 'Total'; 173 + headerRow.appendChild(totalTh); 174 + thead.appendChild(headerRow); 175 + table.appendChild(thead); 176 + 177 + // Body rows 178 + const tbody = document.createElement('tbody'); 179 + for (let ri = 0; ri < result.rowKeys.length; ri++) { 180 + const tr = document.createElement('tr'); 181 + for (const val of result.rowKeys[ri]) { 182 + const td = document.createElement('td'); 183 + td.className = 'pivot-row-header'; 184 + td.textContent = val || '(empty)'; 185 + tr.appendChild(td); 186 + } 187 + for (let ci = 0; ci < (result.colKeys.length || 1); ci++) { 188 + const td = document.createElement('td'); 189 + const cell = result.cells[ri]?.[ci]; 190 + td.textContent = cell ? formatAggregateValue(cell.value, config.aggregation) : ''; 191 + tr.appendChild(td); 192 + } 193 + const totalTd = document.createElement('td'); 194 + totalTd.className = 'pivot-total'; 195 + totalTd.textContent = formatAggregateValue(result.rowTotals[ri]?.value ?? 0, config.aggregation); 196 + tr.appendChild(totalTd); 197 + tbody.appendChild(tr); 198 + } 199 + table.appendChild(tbody); 200 + 201 + // Footer (column totals) 202 + const tfoot = document.createElement('tfoot'); 203 + const footRow = document.createElement('tr'); 204 + const footLabel = document.createElement('td'); 205 + footLabel.colSpan = config.rowFields.length; 206 + footLabel.textContent = 'Total'; 207 + footRow.appendChild(footLabel); 208 + for (let ci = 0; ci < (result.colKeys.length || 1); ci++) { 209 + const td = document.createElement('td'); 210 + td.textContent = formatAggregateValue(result.colTotals[ci]?.value ?? 0, config.aggregation); 211 + footRow.appendChild(td); 212 + } 213 + const grandTd = document.createElement('td'); 214 + grandTd.className = 'pivot-total'; 215 + grandTd.textContent = formatAggregateValue(result.grandTotal.value, config.aggregation); 216 + footRow.appendChild(grandTd); 217 + tfoot.appendChild(footRow); 218 + table.appendChild(tfoot); 219 + 220 + container.appendChild(table); 221 + deps.pivotSection.appendChild(container); 222 + 223 + actions.querySelector('.pivot-edit')!.addEventListener('click', () => showPivotDialog(deps, id, config)); 224 + actions.querySelector('.pivot-delete')!.addEventListener('click', () => { 225 + deps.ydoc.transact(() => deps.getPivots().delete(id)); 226 + renderPivots(deps); 227 + }); 228 + }); 229 + }

+356

src/sheets/sheet-dialogs.ts

··· 1 + /** 2 + * Sheet dialog functions — Sort, Conditional Formatting, Data Validation. 3 + * 4 + * Extracted from main.ts for decomposition. Each function receives its 5 + * dependencies as parameters to stay decoupled from module-level state. 6 + */ 7 + 8 + import { colToLetter, cellId } from './formulas.js'; 9 + import { normalizeRange } from './selection-utils.js'; 10 + import { formatRuleLabel } from './conditional-format.js'; 11 + import { escapeHtml } from '../lib/escape-html.js'; 12 + 13 + // ── Types for dependency injection ────────────────────────── 14 + 15 + export interface SortDialogDeps { 16 + getActiveSheet: () => any; 17 + selectedCell: { col: number; row: number }; 18 + selectionRange: { startCol: number; startRow: number; endCol: number; endRow: number } | null; 19 + getCellData: (id: string) => { v?: any; f?: string; s?: any } | null; 20 + getCells: () => any; 21 + setCellData: (id: string, data: any) => void; 22 + ydoc: { transact: (fn: () => void) => void }; 23 + DEFAULT_COLS: number; 24 + DEFAULT_ROWS: number; 25 + evalCache: { clear: () => void }; 26 + clearSpillMaps: () => void; 27 + invalidateRecalcEngine: () => void; 28 + refreshVisibleCells: () => void; 29 + } 30 + 31 + export interface CfDialogDeps { 32 + getCfRulesArray: () => any[]; 33 + getCfRules: () => any; 34 + ydoc: { transact: (fn: () => void) => void }; 35 + evalCache: { clear: () => void }; 36 + clearSpillMaps: () => void; 37 + invalidateRecalcEngine: () => void; 38 + refreshVisibleCells: () => void; 39 + } 40 + 41 + export interface ValidationDialogDeps { 42 + selectedCell: { col: number; row: number }; 43 + selectionRange: { startCol: number; startRow: number; endCol: number; endRow: number } | null; 44 + getValidationForCell: (id: string) => any | null; 45 + getValidations: () => any; 46 + ydoc: { transact: (fn: () => void) => void }; 47 + applyToSelectedCells: (fn: (cellId: string) => void) => void; 48 + refreshVisibleCells: () => void; 49 + renderGrid: () => void; 50 + } 51 + 52 + // ── Sort Dialog ───────────────────────────────────────────── 53 + 54 + export function showSortDialog(deps: SortDialogDeps): void { 55 + const sheet = deps.getActiveSheet(); 56 + const colCount = sheet.get('colCount') || deps.DEFAULT_COLS; 57 + 58 + const overlay = document.createElement('div'); 59 + overlay.className = 'sheet-dialog-overlay'; 60 + 61 + let colOptions = ''; 62 + for (let c = 1; c <= colCount; c++) { 63 + colOptions += `<option value="${c}">Column ${colToLetter(c)}</option>`; 64 + } 65 + 66 + overlay.innerHTML = ` 67 + <div class="sheet-dialog"> 68 + <h3>Sort</h3> 69 + <div class="sort-level"> 70 + <span class="sort-level-label">Sort by</span> 71 + <select id="sort-col-1">${colOptions}</select> 72 + <select id="sort-order-1"><option value="asc">A to Z</option><option value="desc">Z to A</option></select> 73 + </div> 74 + <div class="sort-level"> 75 + <span class="sort-level-label">Then by</span> 76 + <select id="sort-col-2"><option value="">(none)</option>${colOptions}</select> 77 + <select id="sort-order-2"><option value="asc">A to Z</option><option value="desc">Z to A</option></select> 78 + </div> 79 + <div class="sort-level"> 80 + <span class="sort-level-label">Then by</span> 81 + <select id="sort-col-3"><option value="">(none)</option>${colOptions}</select> 82 + <select id="sort-order-3"><option value="asc">A to Z</option><option value="desc">Z to A</option></select> 83 + </div> 84 + <div class="sheet-dialog-actions"> 85 + <button id="sort-cancel">Cancel</button> 86 + <button id="sort-ok" class="btn-primary">Sort</button> 87 + </div> 88 + </div> 89 + `; 90 + document.body.appendChild(overlay); 91 + 92 + overlay.querySelector('#sort-col-1').value = String(deps.selectedCell.col); 93 + 94 + overlay.querySelector('#sort-cancel').addEventListener('click', () => overlay.remove()); 95 + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 96 + 97 + overlay.querySelector('#sort-ok').addEventListener('click', () => { 98 + const sortKeys = []; 99 + for (let i = 1; i <= 3; i++) { 100 + const colVal = overlay.querySelector('#sort-col-' + i).value; 101 + if (!colVal) continue; 102 + sortKeys.push({ 103 + col: parseInt(colVal), 104 + order: overlay.querySelector('#sort-order-' + i).value, 105 + }); 106 + } 107 + if (sortKeys.length === 0) { overlay.remove(); return; } 108 + 109 + const sht = deps.getActiveSheet(); 110 + const colCt = sht.get('colCount') || deps.DEFAULT_COLS; 111 + let startRow = 1, endRow = sht.get('rowCount') || deps.DEFAULT_ROWS; 112 + if (deps.selectionRange) { 113 + const norm = normalizeRange(deps.selectionRange); 114 + startRow = norm.startRow; 115 + endRow = norm.endRow; 116 + } 117 + 118 + // Build row objects 119 + const rows = []; 120 + for (let r = startRow; r <= endRow; r++) { 121 + const obj: any = { _row: r }; 122 + for (let c = 1; c <= colCt; c++) { 123 + const data = deps.getCellData(cellId(c, r)); 124 + obj[c] = data ? data : null; 125 + } 126 + for (const key of sortKeys) { 127 + const data = obj[key.col]; 128 + obj['_sort_' + key.col] = data?.v ?? ''; 129 + } 130 + rows.push(obj); 131 + } 132 + 133 + const sorted = [...rows]; 134 + sorted.sort((a, b) => { 135 + for (const key of sortKeys) { 136 + const aVal = a['_sort_' + key.col]; 137 + const bVal = b['_sort_' + key.col]; 138 + let cmp = 0; 139 + const aEmpty = aVal === '' || aVal === null || aVal === undefined; 140 + const bEmpty = bVal === '' || bVal === null || bVal === undefined; 141 + if (aEmpty && bEmpty) cmp = 0; 142 + else if (aEmpty) cmp = -1; 143 + else if (bEmpty) cmp = 1; 144 + else if (typeof aVal === 'number' && typeof bVal === 'number') cmp = aVal - bVal; 145 + else cmp = String(aVal).localeCompare(String(bVal)); 146 + if (key.order === 'desc') cmp = -cmp; 147 + if (cmp !== 0) return cmp; 148 + } 149 + return 0; 150 + }); 151 + 152 + // Write sorted data back 153 + deps.ydoc.transact(() => { 154 + const cells = deps.getCells(); 155 + sorted.forEach((row, idx) => { 156 + const targetRow = startRow + idx; 157 + for (let c = 1; c <= colCt; c++) { 158 + const id = cellId(c, targetRow); 159 + const data = row[c]; 160 + if (data) { deps.setCellData(id, data); } 161 + else if (cells.has(id)) { cells.delete(id); } 162 + } 163 + }); 164 + }); 165 + 166 + deps.evalCache.clear(); deps.clearSpillMaps(); deps.invalidateRecalcEngine(); 167 + deps.refreshVisibleCells(); 168 + overlay.remove(); 169 + }); 170 + } 171 + 172 + // ── Conditional Formatting Dialog ─────────────────────────── 173 + 174 + export function showCfModal(deps: CfDialogDeps): void { 175 + if (document.querySelector('.cf-modal')) return; 176 + const overlay = document.createElement('div'); 177 + overlay.className = 'modal-overlay'; 178 + const modal = document.createElement('div'); 179 + modal.className = 'modal cf-modal'; 180 + 181 + function renderCfModal() { 182 + const rules = deps.getCfRulesArray(); 183 + let html = '<h2>Conditional Formatting <button class="shortcuts-modal-close cf-close" title="Close">\u2715</button></h2>'; 184 + 185 + html += '<ul class="cf-rule-list">'; 186 + if (rules.length === 0) { 187 + html += '<li style="color:var(--color-text-faint); font-size:0.8rem;">No rules yet</li>'; 188 + } 189 + rules.forEach((rule, idx) => { 190 + const bgPreview = rule.bgColor || 'transparent'; 191 + const label = formatRuleLabel(rule); 192 + html += '<li class="cf-rule-item">'; 193 + html += '<span class="cf-rule-preview" style="background:' + bgPreview + '"></span>'; 194 + html += '<span class="cf-rule-text">' + escapeHtml(label) + '</span>'; 195 + html += '<button class="cf-delete-rule" data-cf-idx="' + idx + '" title="Delete rule">\u2715</button>'; 196 + html += '</li>'; 197 + }); 198 + html += '</ul>'; 199 + 200 + html += '<div class="cf-add-form">'; 201 + html += '<label>Rule type</label>'; 202 + html += '<select id="cf-type">'; 203 + html += '<option value="greaterThan">Greater than</option>'; 204 + html += '<option value="lessThan">Less than</option>'; 205 + html += '<option value="equalTo">Equal to</option>'; 206 + html += '<option value="between">Between</option>'; 207 + html += '<option value="textContains">Text contains</option>'; 208 + html += '<option value="isEmpty">Is empty</option>'; 209 + html += '<option value="isNotEmpty">Is not empty</option>'; 210 + html += '</select>'; 211 + html += '<div class="cf-value-row">'; 212 + html += '<input id="cf-value1" type="text" placeholder="Value">'; 213 + html += '<input id="cf-value2" type="text" placeholder="Value 2 (for between)" style="display:none">'; 214 + html += '</div>'; 215 + html += '<div class="cf-color-row">'; 216 + html += '<label>Background</label><input type="color" id="cf-bg" value="#fce4e4">'; 217 + html += '<label>Text</label><input type="color" id="cf-text" value="#9b1c1c">'; 218 + html += '</div>'; 219 + html += '<div class="cf-btn-row">'; 220 + html += '<button class="cf-btn-add cf-btn-primary">Add rule</button>'; 221 + html += '</div>'; 222 + html += '</div>'; 223 + 224 + modal.innerHTML = html; 225 + 226 + const typeSelect = modal.querySelector('#cf-type') as HTMLSelectElement; 227 + const value1Input = modal.querySelector('#cf-value1') as HTMLInputElement; 228 + const value2Input = modal.querySelector('#cf-value2') as HTMLInputElement; 229 + typeSelect.addEventListener('change', () => { 230 + const t = typeSelect.value; 231 + value2Input.style.display = t === 'between' ? '' : 'none'; 232 + const needsValue = !['isEmpty', 'isNotEmpty'].includes(t); 233 + value1Input.style.display = needsValue ? '' : 'none'; 234 + }); 235 + 236 + modal.querySelectorAll('.cf-delete-rule').forEach(btn => { 237 + btn.addEventListener('click', () => { 238 + const idx = parseInt((btn as HTMLElement).dataset.cfIdx!); 239 + const yArr = deps.getCfRules(); 240 + deps.ydoc.transact(() => { yArr.delete(idx, 1); }); 241 + renderCfModal(); 242 + deps.evalCache.clear(); deps.clearSpillMaps(); deps.invalidateRecalcEngine(); 243 + deps.refreshVisibleCells(); 244 + }); 245 + }); 246 + 247 + modal.querySelector('.cf-btn-add')!.addEventListener('click', () => { 248 + const type = typeSelect.value; 249 + const value = value1Input.value; 250 + const value2 = value2Input.value; 251 + const bgColor = (modal.querySelector('#cf-bg') as HTMLInputElement).value; 252 + const textColor = (modal.querySelector('#cf-text') as HTMLInputElement).value; 253 + const rule: any = { type, bgColor, textColor }; 254 + if (!['isEmpty', 'isNotEmpty'].includes(type)) rule.value = value; 255 + if (type === 'between') rule.value2 = value2; 256 + const yArr = deps.getCfRules(); 257 + deps.ydoc.transact(() => { yArr.push([JSON.stringify(rule)]); }); 258 + renderCfModal(); 259 + deps.evalCache.clear(); deps.clearSpillMaps(); deps.invalidateRecalcEngine(); 260 + deps.refreshVisibleCells(); 261 + }); 262 + 263 + modal.querySelector('.cf-close')!.addEventListener('click', () => overlay.remove()); 264 + } 265 + 266 + renderCfModal(); 267 + overlay.appendChild(modal); 268 + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 269 + const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', handler); } }; 270 + document.addEventListener('keydown', handler); 271 + document.body.appendChild(overlay); 272 + } 273 + 274 + // ── Data Validation Dialog ────────────────────────────────── 275 + 276 + export function showValidationModal(deps: ValidationDialogDeps): void { 277 + if (document.querySelector('.dv-modal')) return; 278 + const id = cellId(deps.selectedCell.col, deps.selectedCell.row); 279 + const existing = deps.getValidationForCell(id); 280 + 281 + const overlay = document.createElement('div'); 282 + overlay.className = 'modal-overlay'; 283 + const modal = document.createElement('div'); 284 + modal.className = 'modal dv-modal'; 285 + 286 + let html = '<h2>Data Validation <button class="shortcuts-modal-close dv-close" title="Close">\u2715</button></h2>'; 287 + html += '<div class="dv-form">'; 288 + html += '<label>Cell: ' + id + (deps.selectionRange ? ' (applied to selected range)' : '') + '</label>'; 289 + html += '<label>Validation type</label>'; 290 + html += '<select id="dv-type">'; 291 + html += '<option value="">None</option>'; 292 + html += '<option value="list"' + (existing?.type === 'list' ? ' selected' : '') + '>List of items</option>'; 293 + html += '<option value="numberBetween"' + (existing?.type === 'numberBetween' ? ' selected' : '') + '>Number between</option>'; 294 + html += '<option value="textLength"' + (existing?.type === 'textLength' ? ' selected' : '') + '>Text length</option>'; 295 + html += '</select>'; 296 + html += '<input id="dv-value1" type="text" placeholder="Items (comma-separated) or min" value="' + escapeHtml(existing?.value || '') + '">'; 297 + html += '<input id="dv-value2" type="text" placeholder="Max value" value="' + escapeHtml(existing?.value2 || '') + '" style="display:' + (existing?.type === 'numberBetween' || existing?.type === 'textLength' ? 'block' : 'none') + '">'; 298 + html += '<div class="dv-btn-row">'; 299 + if (existing) html += '<button class="dv-btn-danger dv-remove">Remove</button>'; 300 + html += '<button class="dv-btn-primary dv-apply">Apply</button>'; 301 + html += '</div>'; 302 + html += '</div>'; 303 + 304 + modal.innerHTML = html; 305 + 306 + const typeSelect = modal.querySelector('#dv-type') as HTMLSelectElement; 307 + const value1Input = modal.querySelector('#dv-value1') as HTMLInputElement; 308 + const value2Input = modal.querySelector('#dv-value2') as HTMLInputElement; 309 + 310 + typeSelect.addEventListener('change', () => { 311 + const t = typeSelect.value; 312 + value1Input.style.display = t ? '' : 'none'; 313 + value2Input.style.display = (t === 'numberBetween' || t === 'textLength') ? '' : 'none'; 314 + if (t === 'list') { value1Input.placeholder = 'Items (comma-separated)'; } 315 + else if (t === 'numberBetween') { value1Input.placeholder = 'Min'; value2Input.placeholder = 'Max'; } 316 + else if (t === 'textLength') { value1Input.placeholder = 'Min length'; value2Input.placeholder = 'Max length'; } 317 + }); 318 + 319 + modal.querySelector('.dv-apply')!.addEventListener('click', () => { 320 + const type = typeSelect.value; 321 + const validations = deps.getValidations(); 322 + if (!type) { 323 + deps.applyToSelectedCells((cellId) => { 324 + deps.ydoc.transact(() => { if (validations.has(cellId)) validations.delete(cellId); }); 325 + }); 326 + } else { 327 + const rule: { type: string; value: string; value2?: string } = { type, value: value1Input.value }; 328 + if (type === 'numberBetween' || type === 'textLength') rule.value2 = value2Input.value; 329 + deps.applyToSelectedCells((cellId) => { 330 + deps.ydoc.transact(() => { validations.set(cellId, JSON.stringify(rule)); }); 331 + }); 332 + } 333 + overlay.remove(); 334 + deps.refreshVisibleCells(); 335 + }); 336 + 337 + const removeBtn = modal.querySelector('.dv-remove'); 338 + if (removeBtn) { 339 + removeBtn.addEventListener('click', () => { 340 + const validations = deps.getValidations(); 341 + deps.applyToSelectedCells((cellId) => { 342 + deps.ydoc.transact(() => { if (validations.has(cellId)) validations.delete(cellId); }); 343 + }); 344 + overlay.remove(); 345 + deps.renderGrid(); 346 + }); 347 + } 348 + 349 + modal.querySelector('.dv-close')!.addEventListener('click', () => overlay.remove()); 350 + overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); }); 351 + const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') { overlay.remove(); document.removeEventListener('keydown', handler); } }; 352 + document.addEventListener('keydown', handler); 353 + 354 + overlay.appendChild(modal); 355 + document.body.appendChild(overlay); 356 + }

+397

src/sheets/sheet-tabs-ui.ts

··· 1 + /** 2 + * Sheet tabs UI — rendering, reordering, inline rename, context menu, color picker. 3 + * 4 + * Extracted from main.ts for decomposition. 5 + */ 6 + 7 + import * as Y from 'yjs'; 8 + import { renameSheet, duplicateSheet, deleteSheet, sheetHasData, countSheets, setTabColor, getTabColor, canMoveLeft, canMoveRight, TAB_COLORS } from './sheet-tab-management.js'; 9 + import { createContextMenu, SEPARATOR } from '../lib/context-menu.js'; 10 + import type { MenuItem } from '../lib/context-menu.js'; 11 + 12 + // ── Types ─────────────────────────────────────────────────── 13 + 14 + export interface SheetTabsDeps { 15 + ySheets: any; 16 + ydoc: { transact: (fn: () => void) => void }; 17 + getActiveSheetIdx: () => number; 18 + setActiveSheetIdx: (idx: number) => void; 19 + ensureSheet: (idx: number) => any; 20 + evalCache: { clear: () => void }; 21 + clearSpillMaps: () => void; 22 + invalidateRecalcEngine: () => void; 23 + renderGrid: () => void; 24 + hideActiveContextMenu: () => void; 25 + setActiveContextMenu: (menu: any) => void; 26 + sheetTabsContainer: HTMLElement; 27 + } 28 + 29 + // ── Swap sheet data (pure Yjs operation) ──────────────────── 30 + 31 + export function swapSheetData(ySheets: any, idxA: number, idxB: number): void { 32 + const sheetA = ySheets.get('sheet_' + idxA); 33 + const sheetB = ySheets.get('sheet_' + idxB); 34 + if (!sheetA || !sheetB) return; 35 + 36 + // Swap names 37 + const nameA = sheetA.get('name'); 38 + const nameB = sheetB.get('name'); 39 + sheetA.set('name', nameB); 40 + sheetB.set('name', nameA); 41 + 42 + // Swap cells 43 + const cellsA = sheetA.get('cells'); 44 + const cellsB = sheetB.get('cells'); 45 + 46 + const dataA = new Map<string, { v?: any; f?: string; s?: any }>(); 47 + const dataB = new Map<string, { v?: any; f?: string; s?: any }>(); 48 + 49 + if (cellsA) cellsA.forEach((val: any, key: string) => { 50 + dataA.set(key, { v: val.get('v'), f: val.get('f'), s: val.get('s') }); 51 + }); 52 + 53 + if (cellsB) cellsB.forEach((val: any, key: string) => { 54 + dataB.set(key, { v: val.get('v'), f: val.get('f'), s: val.get('s') }); 55 + }); 56 + 57 + if (cellsA) { 58 + const keysA: string[] = []; 59 + cellsA.forEach((_: any, key: string) => keysA.push(key)); 60 + keysA.forEach((k: string) => cellsA.delete(k)); 61 + } 62 + 63 + if (cellsB) { 64 + const keysB: string[] = []; 65 + cellsB.forEach((_: any, key: string) => keysB.push(key)); 66 + keysB.forEach((k: string) => cellsB.delete(k)); 67 + } 68 + 69 + dataB.forEach((data, key) => { 70 + const cell = new Y.Map(); 71 + if (data.v !== undefined) cell.set('v', data.v); 72 + if (data.f) cell.set('f', data.f); 73 + if (data.s) cell.set('s', data.s); 74 + cellsA.set(key, cell); 75 + }); 76 + 77 + dataA.forEach((data, key) => { 78 + const cell = new Y.Map(); 79 + if (data.v !== undefined) cell.set('v', data.v); 80 + if (data.f) cell.set('f', data.f); 81 + if (data.s) cell.set('s', data.s); 82 + cellsB.set(key, cell); 83 + }); 84 + 85 + // Swap other properties 86 + const propsToSwap = ['colWidths', 'rowCount', 'colCount', 'freezeRows', 'freezeCols', 'stripedRows', 'merges', 'cfRules', 'validations', 'notes', 'tabColor']; 87 + for (const prop of propsToSwap) { 88 + const valA = sheetA.get(prop); 89 + const valB = sheetB.get(prop); 90 + if (typeof valA !== 'object' && typeof valB !== 'object') { 91 + sheetA.set(prop, valB !== undefined ? valB : null); 92 + sheetB.set(prop, valA !== undefined ? valA : null); 93 + } 94 + } 95 + } 96 + 97 + // ── Reorder sheets ────────────────────────────────────────── 98 + 99 + export function reorderSheets(deps: SheetTabsDeps, fromIdx: number, toIdx: number): void { 100 + let sheetCount = 0; 101 + deps.ySheets.forEach((_: any, key: string) => { if (key.startsWith('sheet_')) sheetCount++; }); 102 + 103 + deps.ydoc.transact(() => { 104 + const direction = fromIdx < toIdx ? 1 : -1; 105 + let current = fromIdx; 106 + while (current !== toIdx) { 107 + const next = current + direction; 108 + swapSheetData(deps.ySheets, current, next); 109 + current = next; 110 + } 111 + }); 112 + 113 + const activeSheetIdx = deps.getActiveSheetIdx(); 114 + if (activeSheetIdx === fromIdx) { 115 + deps.setActiveSheetIdx(toIdx); 116 + } else if (fromIdx < toIdx && activeSheetIdx > fromIdx && activeSheetIdx <= toIdx) { 117 + deps.setActiveSheetIdx(activeSheetIdx - 1); 118 + } else if (fromIdx > toIdx && activeSheetIdx >= toIdx && activeSheetIdx < fromIdx) { 119 + deps.setActiveSheetIdx(activeSheetIdx + 1); 120 + } 121 + 122 + deps.evalCache.clear(); deps.clearSpillMaps(); 123 + deps.invalidateRecalcEngine(); 124 + renderSheetTabs(deps); 125 + deps.renderGrid(); 126 + } 127 + 128 + // ── Inline rename ─────────────────────────────────────────── 129 + 130 + export function beginInlineRename(deps: SheetTabsDeps, tab: HTMLElement, sheet: any, sheetIdx: number): void { 131 + if (tab.querySelector('.sheet-tab-rename')) return; 132 + 133 + const currentName = sheet.get('name') || 'Sheet ' + (sheetIdx + 1); 134 + 135 + const input = document.createElement('span'); 136 + input.className = 'sheet-tab-rename'; 137 + input.contentEditable = 'true'; 138 + input.spellcheck = false; 139 + input.textContent = currentName; 140 + 141 + const colorBar = tab.querySelector('.sheet-tab-color-bar'); 142 + tab.textContent = ''; 143 + if (colorBar) tab.appendChild(colorBar); 144 + tab.appendChild(input); 145 + tab.draggable = false; 146 + 147 + const range = document.createRange(); 148 + range.selectNodeContents(input); 149 + const sel = window.getSelection()!; 150 + sel.removeAllRanges(); 151 + sel.addRange(range); 152 + input.focus(); 153 + 154 + let committed = false; 155 + 156 + function commit() { 157 + if (committed) return; 158 + committed = true; 159 + const newName = (input.textContent || '').trim(); 160 + if (newName && newName !== currentName) { 161 + renameSheet(sheet, newName); 162 + } 163 + renderSheetTabs(deps); 164 + } 165 + 166 + function cancel() { 167 + if (committed) return; 168 + committed = true; 169 + renderSheetTabs(deps); 170 + } 171 + 172 + input.addEventListener('keydown', (e) => { 173 + if (e.key === 'Enter') { e.preventDefault(); commit(); } 174 + else if (e.key === 'Escape') { e.preventDefault(); cancel(); } 175 + }); 176 + 177 + input.addEventListener('blur', () => { 178 + setTimeout(() => { if (!committed) commit(); }, 0); 179 + }); 180 + } 181 + 182 + // ── Tab color picker ──────────────────────────────────────── 183 + 184 + export function showTabColorPicker(deps: SheetTabsDeps, tab: HTMLElement, sheet: any, _sheetIdx: number): void { 185 + document.querySelectorAll('.sheet-tab-color-picker').forEach(el => el.remove()); 186 + 187 + const picker = document.createElement('div'); 188 + picker.className = 'sheet-tab-color-picker'; 189 + 190 + const currentColor = getTabColor(sheet); 191 + 192 + const noneBtn = document.createElement('button'); 193 + noneBtn.className = 'sheet-tab-color-swatch sheet-tab-color-none'; 194 + noneBtn.title = 'No color'; 195 + noneBtn.textContent = '\u2715'; 196 + if (!currentColor) noneBtn.classList.add('selected'); 197 + noneBtn.addEventListener('click', () => { 198 + setTabColor(sheet, null); 199 + renderSheetTabs(deps); 200 + picker.remove(); 201 + }); 202 + picker.appendChild(noneBtn); 203 + 204 + for (const color of TAB_COLORS) { 205 + const swatch = document.createElement('button'); 206 + swatch.className = 'sheet-tab-color-swatch'; 207 + swatch.style.backgroundColor = color.value; 208 + swatch.title = color.name; 209 + if (currentColor === color.value) swatch.classList.add('selected'); 210 + swatch.addEventListener('click', () => { 211 + setTabColor(sheet, color.value); 212 + renderSheetTabs(deps); 213 + picker.remove(); 214 + }); 215 + picker.appendChild(swatch); 216 + } 217 + 218 + const rect = tab.getBoundingClientRect(); 219 + picker.style.position = 'fixed'; 220 + picker.style.left = rect.left + 'px'; 221 + picker.style.top = (rect.top - 40) + 'px'; 222 + picker.style.zIndex = '10000'; 223 + 224 + document.body.appendChild(picker); 225 + 226 + const closeHandler = (ev: MouseEvent) => { 227 + if (!picker.contains(ev.target as Node)) { 228 + picker.remove(); 229 + document.removeEventListener('mousedown', closeHandler); 230 + } 231 + }; 232 + setTimeout(() => document.addEventListener('mousedown', closeHandler), 0); 233 + } 234 + 235 + // ── Confirm and delete sheet ──────────────────────────────── 236 + 237 + export function confirmAndDeleteSheet(deps: SheetTabsDeps, sheetIdx: number): void { 238 + const total = countSheets(deps.ySheets); 239 + if (total <= 1) return; 240 + 241 + const sheet = deps.ySheets.get('sheet_' + sheetIdx); 242 + if (!sheet) return; 243 + 244 + const hasData = sheetHasData(sheet); 245 + if (hasData) { 246 + if (!confirm('This sheet contains data. Are you sure you want to delete it?')) return; 247 + } 248 + 249 + const newActive = deleteSheet(deps.ydoc as any, deps.ySheets, sheetIdx, deps.getActiveSheetIdx()); 250 + if (newActive >= 0) { 251 + deps.setActiveSheetIdx(newActive); 252 + deps.evalCache.clear(); deps.clearSpillMaps(); 253 + deps.invalidateRecalcEngine(); 254 + renderSheetTabs(deps); 255 + deps.renderGrid(); 256 + } 257 + } 258 + 259 + // ── Duplicate sheet ───────────────────────────────────────── 260 + 261 + export function doDuplicateSheet(deps: SheetTabsDeps, sheetIdx: number): void { 262 + const total = countSheets(deps.ySheets); 263 + const targetIdx = total; 264 + const newSheet = duplicateSheet(deps.ydoc as any, deps.ySheets, sheetIdx, targetIdx); 265 + if (newSheet) { 266 + deps.setActiveSheetIdx(targetIdx); 267 + deps.evalCache.clear(); deps.clearSpillMaps(); 268 + deps.invalidateRecalcEngine(); 269 + renderSheetTabs(deps); 270 + deps.renderGrid(); 271 + } 272 + } 273 + 274 + // ── Sheet tab context menu ────────────────────────────────── 275 + 276 + export function showSheetTabContextMenu(deps: SheetTabsDeps, e: MouseEvent, tab: HTMLElement, sheetIdx: number): void { 277 + e.preventDefault(); 278 + deps.hideActiveContextMenu(); 279 + 280 + const sheet = deps.ensureSheet(sheetIdx); 281 + const total = countSheets(deps.ySheets); 282 + 283 + const items: MenuItem[] = [ 284 + { label: 'Rename', icon: '\u270F', action: () => beginInlineRename(deps, tab, sheet, sheetIdx) }, 285 + { label: 'Duplicate', icon: '\u29C9', action: () => doDuplicateSheet(deps, sheetIdx) }, 286 + { label: 'Delete', icon: '\u2715', action: () => confirmAndDeleteSheet(deps, sheetIdx), disabled: total <= 1 }, 287 + SEPARATOR, 288 + { label: 'Move Left', icon: '\u2190', action: () => { reorderSheets(deps, sheetIdx, sheetIdx - 1); }, disabled: !canMoveLeft(sheetIdx) }, 289 + { label: 'Move Right', icon: '\u2192', action: () => { reorderSheets(deps, sheetIdx, sheetIdx + 1); }, disabled: !canMoveRight(sheetIdx, total) }, 290 + SEPARATOR, 291 + { label: 'Tab Color', icon: '\u25CF', action: () => showTabColorPicker(deps, tab, sheet, sheetIdx) }, 292 + ]; 293 + 294 + const ctxMenu = createContextMenu(items); 295 + document.body.appendChild(ctxMenu.el); 296 + ctxMenu.show(e.clientX, e.clientY); 297 + deps.setActiveContextMenu(ctxMenu); 298 + 299 + const closeHandler = (ev: MouseEvent) => { 300 + if (!ctxMenu.el.contains(ev.target as Node)) { 301 + deps.hideActiveContextMenu(); 302 + document.removeEventListener('mousedown', closeHandler); 303 + } 304 + }; 305 + setTimeout(() => document.addEventListener('mousedown', closeHandler), 0); 306 + } 307 + 308 + // ── Render sheet tabs ─────────────────────────────────────── 309 + 310 + let dragSourceSheetIdx = -1; 311 + 312 + export function renderSheetTabs(deps: SheetTabsDeps): void { 313 + deps.sheetTabsContainer.querySelectorAll('.sheet-tab').forEach(t => t.remove()); 314 + let sheetCount = 0; 315 + deps.ySheets.forEach((_: any, key: string) => { if (key.startsWith('sheet_')) sheetCount++; }); 316 + if (sheetCount === 0) deps.ensureSheet(0); 317 + sheetCount = Math.max(sheetCount, 1); 318 + const addBtn = document.getElementById('add-sheet'); 319 + const activeSheetIdx = deps.getActiveSheetIdx(); 320 + 321 + for (let i = 0; i < sheetCount; i++) { 322 + const sheet = deps.ensureSheet(i); 323 + const tab = document.createElement('button'); 324 + tab.className = 'sheet-tab' + (i === activeSheetIdx ? ' active' : ''); 325 + tab.dataset.sheet = String(i); 326 + 327 + const tabColor = getTabColor(sheet); 328 + if (tabColor) { 329 + const colorBar = document.createElement('span'); 330 + colorBar.className = 'sheet-tab-color-bar'; 331 + colorBar.style.backgroundColor = tabColor; 332 + tab.appendChild(colorBar); 333 + } 334 + 335 + const label = document.createElement('span'); 336 + label.className = 'sheet-tab-label'; 337 + label.textContent = sheet.get('name') || 'Sheet ' + (i + 1); 338 + tab.appendChild(label); 339 + 340 + tab.draggable = true; 341 + tab.addEventListener('click', () => { 342 + deps.setActiveSheetIdx(i); 343 + renderSheetTabs(deps); 344 + deps.evalCache.clear(); deps.clearSpillMaps(); deps.invalidateRecalcEngine(); 345 + deps.renderGrid(); 346 + }); 347 + 348 + tab.addEventListener('dblclick', (e) => { 349 + e.preventDefault(); 350 + beginInlineRename(deps, tab, sheet, i); 351 + }); 352 + 353 + tab.addEventListener('contextmenu', (e) => { 354 + showSheetTabContextMenu(deps, e, tab, i); 355 + }); 356 + 357 + tab.addEventListener('dragstart', (e) => { 358 + dragSourceSheetIdx = i; 359 + tab.classList.add('dragging'); 360 + e.dataTransfer!.effectAllowed = 'move'; 361 + e.dataTransfer!.setData('text/plain', String(i)); 362 + }); 363 + tab.addEventListener('dragend', () => { 364 + tab.classList.remove('dragging'); 365 + dragSourceSheetIdx = -1; 366 + deps.sheetTabsContainer.querySelectorAll('.sheet-tab').forEach(t => { 367 + t.classList.remove('drag-over-left', 'drag-over-right'); 368 + }); 369 + }); 370 + tab.addEventListener('dragover', (e) => { 371 + e.preventDefault(); 372 + e.dataTransfer!.dropEffect = 'move'; 373 + const targetIdx = parseInt(tab.dataset.sheet!); 374 + if (targetIdx === dragSourceSheetIdx) return; 375 + deps.sheetTabsContainer.querySelectorAll('.sheet-tab').forEach(t => { 376 + t.classList.remove('drag-over-left', 'drag-over-right'); 377 + }); 378 + if (targetIdx < dragSourceSheetIdx) { 379 + tab.classList.add('drag-over-left'); 380 + } else { 381 + tab.classList.add('drag-over-right'); 382 + } 383 + }); 384 + tab.addEventListener('dragleave', () => { 385 + tab.classList.remove('drag-over-left', 'drag-over-right'); 386 + }); 387 + tab.addEventListener('drop', (e) => { 388 + e.preventDefault(); 389 + const fromIdx = dragSourceSheetIdx; 390 + const toIdx = parseInt(tab.dataset.sheet!); 391 + if (fromIdx === toIdx || fromIdx < 0) return; 392 + reorderSheets(deps, fromIdx, toIdx); 393 + }); 394 + 395 + deps.sheetTabsContainer.insertBefore(tab, addBtn); 396 + } 397 + }

+77

tests/ai-chat-panel.test.ts

··· 1 + import { describe, it, expect } from 'vitest'; 2 + import * as Y from 'yjs'; 3 + import { getSheetContextText } from '../src/sheets/ai-chat-panel.js'; 4 + 5 + /** Create a Y.Doc-backed cells map (Y.Map instances need a doc to work properly) */ 6 + function buildCells(data: Record<string, { v?: any; f?: string }>) { 7 + const ydoc = new Y.Doc(); 8 + const cells = ydoc.getMap('cells'); 9 + for (const [id, cell] of Object.entries(data)) { 10 + const ymap = new Y.Map(); 11 + if (cell.v !== undefined) ymap.set('v', cell.v); 12 + if (cell.f) ymap.set('f', cell.f); 13 + cells.set(id, ymap); 14 + } 15 + return cells; 16 + } 17 + 18 + describe('getSheetContextText', () => { 19 + it('returns empty string for empty cells', () => { 20 + const ydoc = new Y.Doc(); 21 + const cells = ydoc.getMap('cells'); 22 + expect(getSheetContextText(() => cells)).toBe(''); 23 + }); 24 + 25 + it('returns empty string for null cells', () => { 26 + expect(getSheetContextText(() => null)).toBe(''); 27 + }); 28 + 29 + it('formats single cell with value', () => { 30 + const cells = buildCells({ 'A1': { v: 'Hello' } }); 31 + const result = getSheetContextText(() => cells); 32 + const lines = result.split('\n'); 33 + expect(lines.length).toBe(2); // header + 1 data row 34 + expect(lines[0]).toContain('A'); // column header 35 + expect(lines[1]).toContain('Hello'); 36 + }); 37 + 38 + it('formats formula cells with = prefix', () => { 39 + const cells = buildCells({ 'A1': { v: 10, f: 'SUM(B1:B5)' } }); 40 + const result = getSheetContextText(() => cells); 41 + expect(result).toContain('=SUM(B1:B5)'); 42 + }); 43 + 44 + it('formats multiple cells across rows and columns', () => { 45 + const cells = buildCells({ 46 + 'A1': { v: 'Name' }, 47 + 'B1': { v: 'Age' }, 48 + 'A2': { v: 'Alice' }, 49 + 'B2': { v: 30 }, 50 + }); 51 + const result = getSheetContextText(() => cells); 52 + const lines = result.split('\n'); 53 + expect(lines.length).toBe(3); // header + 2 data rows 54 + expect(result).toContain('Name'); 55 + expect(result).toContain('Alice'); 56 + expect(result).toContain('30'); 57 + }); 58 + 59 + it('skips completely empty rows', () => { 60 + const cells = buildCells({ 61 + 'A1': { v: 'Top' }, 62 + 'A3': { v: 'Bottom' }, 63 + }); 64 + const result = getSheetContextText(() => cells); 65 + expect(result).toContain('Top'); 66 + expect(result).toContain('Bottom'); 67 + const lines = result.split('\n'); 68 + // header + row 1 + row 3 = 3 lines (row 2 skipped) 69 + expect(lines.length).toBe(3); 70 + }); 71 + 72 + it('includes value cells as strings', () => { 73 + const cells = buildCells({ 'B2': { v: 42 } }); 74 + const result = getSheetContextText(() => cells); 75 + expect(result).toContain('42'); 76 + }); 77 + });

+142

tests/sheet-tabs-ui.test.ts

··· 1 + import { describe, it, expect } from 'vitest'; 2 + import * as Y from 'yjs'; 3 + import { swapSheetData } from '../src/sheets/sheet-tabs-ui.js'; 4 + 5 + /** Create a minimal Y.Doc with two sheets for swap testing */ 6 + function createTestSheets() { 7 + const ydoc = new Y.Doc(); 8 + const ySheets = ydoc.getMap('sheets'); 9 + 10 + // Sheet 0 11 + const sheet0 = new Y.Map(); 12 + sheet0.set('name', 'Sales'); 13 + sheet0.set('rowCount', 50); 14 + sheet0.set('colCount', 10); 15 + const cells0 = new Y.Map(); 16 + const cellA1 = new Y.Map(); 17 + cellA1.set('v', 'Revenue'); 18 + cellA1.set('f', ''); 19 + cells0.set('A1', cellA1); 20 + const cellB1 = new Y.Map(); 21 + cellB1.set('v', 100); 22 + cells0.set('B1', cellB1); 23 + sheet0.set('cells', cells0); 24 + ySheets.set('sheet_0', sheet0); 25 + 26 + // Sheet 1 27 + const sheet1 = new Y.Map(); 28 + sheet1.set('name', 'Expenses'); 29 + sheet1.set('rowCount', 30); 30 + sheet1.set('colCount', 5); 31 + const cells1 = new Y.Map(); 32 + const cellC1 = new Y.Map(); 33 + cellC1.set('v', 'Cost'); 34 + cellC1.set('f', 'SUM(C2:C10)'); 35 + cells1.set('C1', cellC1); 36 + sheet1.set('cells', cells1); 37 + ySheets.set('sheet_1', sheet1); 38 + 39 + return { ydoc, ySheets }; 40 + } 41 + 42 + describe('swapSheetData', () => { 43 + it('swaps sheet names', () => { 44 + const { ySheets } = createTestSheets(); 45 + 46 + swapSheetData(ySheets, 0, 1); 47 + 48 + expect(ySheets.get('sheet_0').get('name')).toBe('Expenses'); 49 + expect(ySheets.get('sheet_1').get('name')).toBe('Sales'); 50 + }); 51 + 52 + it('swaps cell data between sheets', () => { 53 + const { ySheets } = createTestSheets(); 54 + 55 + swapSheetData(ySheets, 0, 1); 56 + 57 + // Sheet 0 should now have sheet 1's cells (C1 with formula) 58 + const cells0 = ySheets.get('sheet_0').get('cells'); 59 + expect(cells0.has('C1')).toBe(true); 60 + expect(cells0.get('C1').get('v')).toBe('Cost'); 61 + expect(cells0.get('C1').get('f')).toBe('SUM(C2:C10)'); 62 + expect(cells0.has('A1')).toBe(false); 63 + expect(cells0.has('B1')).toBe(false); 64 + 65 + // Sheet 1 should now have sheet 0's cells 66 + const cells1 = ySheets.get('sheet_1').get('cells'); 67 + expect(cells1.has('A1')).toBe(true); 68 + expect(cells1.get('A1').get('v')).toBe('Revenue'); 69 + expect(cells1.has('B1')).toBe(true); 70 + expect(cells1.get('B1').get('v')).toBe(100); 71 + expect(cells1.has('C1')).toBe(false); 72 + }); 73 + 74 + it('swaps simple properties (rowCount, colCount)', () => { 75 + const { ySheets } = createTestSheets(); 76 + 77 + swapSheetData(ySheets, 0, 1); 78 + 79 + expect(ySheets.get('sheet_0').get('rowCount')).toBe(30); 80 + expect(ySheets.get('sheet_0').get('colCount')).toBe(5); 81 + expect(ySheets.get('sheet_1').get('rowCount')).toBe(50); 82 + expect(ySheets.get('sheet_1').get('colCount')).toBe(10); 83 + }); 84 + 85 + it('handles missing sheets gracefully', () => { 86 + const { ySheets } = createTestSheets(); 87 + 88 + // Should not throw when one sheet doesn't exist 89 + expect(() => swapSheetData(ySheets, 0, 5)).not.toThrow(); 90 + 91 + // Original data should be unchanged 92 + expect(ySheets.get('sheet_0').get('name')).toBe('Sales'); 93 + }); 94 + 95 + it('double swap restores original state', () => { 96 + const { ySheets } = createTestSheets(); 97 + 98 + swapSheetData(ySheets, 0, 1); 99 + swapSheetData(ySheets, 0, 1); 100 + 101 + expect(ySheets.get('sheet_0').get('name')).toBe('Sales'); 102 + expect(ySheets.get('sheet_1').get('name')).toBe('Expenses'); 103 + 104 + const cells0 = ySheets.get('sheet_0').get('cells'); 105 + expect(cells0.has('A1')).toBe(true); 106 + expect(cells0.get('A1').get('v')).toBe('Revenue'); 107 + 108 + const cells1 = ySheets.get('sheet_1').get('cells'); 109 + expect(cells1.has('C1')).toBe(true); 110 + expect(cells1.get('C1').get('v')).toBe('Cost'); 111 + }); 112 + 113 + it('swaps sheets with empty cells', () => { 114 + const ydoc = new Y.Doc(); 115 + const ySheets = ydoc.getMap('sheets'); 116 + 117 + ydoc.transact(() => { 118 + const sheet0 = new Y.Map(); 119 + sheet0.set('name', 'Full'); 120 + sheet0.set('cells', new Y.Map()); 121 + ySheets.set('sheet_0', sheet0); 122 + 123 + // Must add cell after sheet0 is in the doc 124 + const cell = new Y.Map(); 125 + cell.set('v', 'data'); 126 + ySheets.get('sheet_0').get('cells').set('A1', cell); 127 + 128 + const sheet1 = new Y.Map(); 129 + sheet1.set('name', 'Empty'); 130 + sheet1.set('cells', new Y.Map()); 131 + ySheets.set('sheet_1', sheet1); 132 + }); 133 + 134 + swapSheetData(ySheets, 0, 1); 135 + 136 + expect(ySheets.get('sheet_0').get('name')).toBe('Empty'); 137 + expect(ySheets.get('sheet_0').get('cells').size).toBe(0); 138 + expect(ySheets.get('sheet_1').get('name')).toBe('Full'); 139 + expect(ySheets.get('sheet_1').get('cells').size).toBe(1); 140 + expect(ySheets.get('sheet_1').get('cells').get('A1').get('v')).toBe('data'); 141 + }); 142 + });

Configure Feed

Configure Feed