1004 lines
32 KiB
TypeScript
1004 lines
32 KiB
TypeScript
import { useFileData, useLatestFileForTemplate } from '@/hook/useFileQueries'
|
||
import { useMultiSheetEngine } from '@/hook/useMultiSheetEngine'
|
||
import { useSheetAutoSave } from '@/hook/useSheetAutoSave'
|
||
import { produce } from 'immer'
|
||
import React, {
|
||
FC,
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
} from 'react'
|
||
|
||
// Импорты из новых модулей
|
||
import { FormulaBar, Spreadsheet } from './components'
|
||
import { useDraggableDivider } from './hooks/useDraggableDivider'
|
||
import {
|
||
CachedCellData,
|
||
CellSelection,
|
||
COL_COUNT,
|
||
DualSpreadsheetProps,
|
||
HighlightedCell,
|
||
ROW_COUNT,
|
||
SHEET_NAMES,
|
||
SHEET_TYPES,
|
||
SheetType,
|
||
} from './types'
|
||
import {
|
||
convertReferencesToHighlights,
|
||
createCellAddress,
|
||
createQualifiedCellReference,
|
||
createSelectionFromRange,
|
||
extractCellReferences,
|
||
getAllCellsInSelections,
|
||
getColumnLabel,
|
||
} from './utils'
|
||
|
||
const DualSpreadsheet: FC<DualSpreadsheetProps> = ({
|
||
templateData = {},
|
||
mergedCells = [],
|
||
templateId,
|
||
onEngineReady,
|
||
enableAutoSave = true,
|
||
}) => {
|
||
// Мемоизируем конфигурацию листов
|
||
const sheetsConfig = useMemo(
|
||
() => [
|
||
{ name: SHEET_NAMES.report, rows: ROW_COUNT, cols: COL_COUNT },
|
||
{ name: SHEET_NAMES.calculations, rows: ROW_COUNT, cols: COL_COUNT },
|
||
],
|
||
[]
|
||
)
|
||
|
||
const { revision, updateRevision, setTemplateData, ...multiSheetEngine } =
|
||
useMultiSheetEngine({
|
||
sheets: sheetsConfig,
|
||
initialData: templateData || {},
|
||
})
|
||
|
||
// Мемоизируем объект для передачи родительскому компоненту
|
||
const engineAPI = useMemo(
|
||
() => ({
|
||
...multiSheetEngine,
|
||
updateRevision,
|
||
}),
|
||
[multiSheetEngine, updateRevision]
|
||
)
|
||
|
||
// Передаем методы движка родительскому компоненту
|
||
useEffect(() => {
|
||
if (onEngineReady) {
|
||
onEngineReady(engineAPI)
|
||
}
|
||
}, [onEngineReady, engineAPI])
|
||
|
||
const [activeSheet, setActiveSheet] = useState<SheetType>('report')
|
||
const [selectedCell, setSelectedCell] = useState<{
|
||
row: number
|
||
col: number
|
||
} | null>(null)
|
||
|
||
// Флаг, что пользователь изменил хотя бы одну ячейку
|
||
const [userEdited, setUserEdited] = useState(false)
|
||
|
||
// Состояние для множественного выделения
|
||
const [multiSelection, setMultiSelection] = useState<CellSelection[]>([])
|
||
const [isDragging, setIsDragging] = useState(false)
|
||
const [dragStart, setDragStart] = useState<{
|
||
row: number
|
||
col: number
|
||
} | null>(null)
|
||
const [isEditing, setIsEditing] = useState(false)
|
||
const [editingValue, setEditingValue] = useState<string>('') // Локальное значение во время редактирования
|
||
// Источник ввода: 'cell' (редактирование внутри ячейки) или 'formula'
|
||
const [editingSource, setEditingSource] = useState<'cell' | 'formula'>('cell')
|
||
const [isInitialized, setIsInitialized] = useState(false)
|
||
const [baseFileData, setBaseFileData] = useState<
|
||
Record<string, Record<string, any>>
|
||
>({}) // Базовые данные файла
|
||
const [highlightedCells, setHighlightedCells] = useState<HighlightedCell[]>(
|
||
[]
|
||
)
|
||
|
||
// React Query хуки для оптимизации API запросов
|
||
const { data: latestFile, isLoading: isLoadingLatestFile } =
|
||
useLatestFileForTemplate(templateId)
|
||
const { data: fileData, isLoading: isLoadingFileData } = useFileData(
|
||
latestFile?.id
|
||
)
|
||
|
||
// Мемоизируем начальное состояние ширин колонок
|
||
const initialColumnWidths = useMemo(
|
||
() => ({
|
||
report: Array(COL_COUNT).fill(96),
|
||
calculations: Array(COL_COUNT).fill(96),
|
||
}),
|
||
[]
|
||
)
|
||
|
||
const [columnWidths, setColumnWidths] =
|
||
useState<Record<SheetType, number[]>>(initialColumnWidths)
|
||
|
||
const gridRefs = useRef<Record<SheetType, any>>({
|
||
report: null,
|
||
calculations: null,
|
||
})
|
||
const containerRefs = useRef<Record<SheetType, HTMLDivElement | null>>({
|
||
report: null,
|
||
calculations: null,
|
||
})
|
||
const headerRefs = useRef<Record<SheetType, HTMLDivElement | null>>({
|
||
report: null,
|
||
calculations: null,
|
||
})
|
||
const rowHeaderRefs = useRef<Record<SheetType, HTMLDivElement | null>>({
|
||
report: null,
|
||
calculations: null,
|
||
})
|
||
|
||
const activeCellInputRef = useRef<HTMLInputElement | null>(null)
|
||
const formulaBarRef = useRef<HTMLInputElement | null>(null)
|
||
const initialTemplateValues = useRef<Record<string, string>>({})
|
||
|
||
const cellDataCache = useRef<Record<string, Record<string, CachedCellData>>>(
|
||
{}
|
||
)
|
||
const lastRevision = useRef<number>(-1)
|
||
|
||
// Мемоизируем обработчик обновления начальных значений
|
||
const updateInitialValues = useCallback(() => {
|
||
// Обновляем начальные значения только если есть данные
|
||
const hasBaseFileData = Object.keys(baseFileData).length > 0
|
||
const hasTemplateData = Object.keys(templateData).length > 0
|
||
|
||
if (hasBaseFileData) {
|
||
Object.entries(baseFileData).forEach(([sheetName, sheetData]) => {
|
||
Object.entries(sheetData).forEach(([cellAddress, value]) => {
|
||
initialTemplateValues.current[cellAddress] = String(value || '')
|
||
})
|
||
})
|
||
} else if (hasTemplateData) {
|
||
Object.entries(templateData).forEach(([sheetName, sheetData]) => {
|
||
Object.entries(sheetData).forEach(([cellAddress, value]) => {
|
||
initialTemplateValues.current[cellAddress] = String(value || '')
|
||
})
|
||
})
|
||
}
|
||
}, [baseFileData, templateData])
|
||
|
||
useEffect(() => {
|
||
updateInitialValues()
|
||
}, [updateInitialValues])
|
||
|
||
// Мемоизируем обработчик скролла к выбранной ячейке
|
||
const scrollToSelectedCell = useCallback(() => {
|
||
if (selectedCell && activeSheet) {
|
||
const grid = gridRefs.current[activeSheet]
|
||
grid?.scrollToItem({
|
||
rowIndex: selectedCell.row,
|
||
columnIndex: selectedCell.col,
|
||
align: 'auto',
|
||
})
|
||
}
|
||
}, [selectedCell, activeSheet])
|
||
|
||
useEffect(() => {
|
||
scrollToSelectedCell()
|
||
}, [scrollToSelectedCell])
|
||
|
||
const getCachedCellData = useCallback(
|
||
(sheetType: SheetType): Record<string, CachedCellData> => {
|
||
const cacheKey = `${sheetType}-${revision}-${columnWidths[sheetType].join('-')}`
|
||
|
||
if (cellDataCache.current[cacheKey]) {
|
||
return cellDataCache.current[cacheKey]
|
||
}
|
||
|
||
const sheetName = SHEET_NAMES[sheetType]
|
||
const cachedData: Record<string, CachedCellData> = {}
|
||
|
||
const allCellValues: Record<string, string> = {}
|
||
for (let row = 0; row < ROW_COUNT; row++) {
|
||
for (let col = 0; col < COL_COUNT; col++) {
|
||
const cellKey = `${row}-${col}`
|
||
const displayValue = String(
|
||
multiSheetEngine.getCellValue(sheetName, row, col) || ''
|
||
)
|
||
allCellValues[cellKey] = displayValue.trim()
|
||
}
|
||
}
|
||
|
||
// 1. Находим ближайшую занятую колонку справа для каждой ячейки строки
|
||
const nextContentInRow: Record<number, number[]> = {}
|
||
for (let row = 0; row < ROW_COUNT; row++) {
|
||
nextContentInRow[row] = Array(COL_COUNT).fill(COL_COUNT)
|
||
let next = COL_COUNT
|
||
for (let col = COL_COUNT - 1; col >= 0; col--) {
|
||
const cellKey = `${row}-${col}`
|
||
nextContentInRow[row][col] = next // сохранить для использования ниже
|
||
if (allCellValues[cellKey]) {
|
||
next = col // текущая колонка занята → "новый" предел
|
||
}
|
||
}
|
||
}
|
||
|
||
// 2. Заполняем cache
|
||
for (let row = 0; row < ROW_COUNT; row++) {
|
||
for (let col = 0; col < COL_COUNT; col++) {
|
||
const cellKey = `${row}-${col}`
|
||
const rawValue = multiSheetEngine.getCellRawValue(sheetName, row, col)
|
||
const displayValue = allCellValues[cellKey]
|
||
const nextCol = nextContentInRow[row][col]
|
||
|
||
// ширина от текущей колонки до nextCol-1 включительно
|
||
const availablePx = columnWidths[sheetType]
|
||
.slice(col, nextCol)
|
||
.reduce((sum, w) => sum + w, 0)
|
||
|
||
const cellName = getColumnLabel(col) + (row + 1)
|
||
const baseFileValue = initialTemplateValues.current[cellName] ?? '' // Базовое значение из файла
|
||
|
||
// Нормализуем значения для сравнения
|
||
const normalizeValue = (value: any): string => {
|
||
if (value === null || value === undefined) return ''
|
||
const str = String(value).trim()
|
||
// Считаем "0" и пустую строку эквивалентными
|
||
if (str === '0' || str === '') return ''
|
||
return str
|
||
}
|
||
|
||
const normalizedBaseFile = normalizeValue(baseFileValue)
|
||
const normalizedRaw = normalizeValue(rawValue)
|
||
|
||
const isModified =
|
||
sheetType === 'report' && normalizedRaw !== normalizedBaseFile
|
||
|
||
cachedData[cellKey] = {
|
||
displayValue,
|
||
rawValue,
|
||
isModified,
|
||
nextContentCol: nextCol,
|
||
availablePx,
|
||
}
|
||
}
|
||
}
|
||
|
||
if (lastRevision.current !== revision) {
|
||
Object.keys(cellDataCache.current).forEach(key => {
|
||
if (!key.endsWith(`-${revision}`)) {
|
||
delete cellDataCache.current[key]
|
||
}
|
||
})
|
||
lastRevision.current = revision
|
||
}
|
||
|
||
cellDataCache.current[cacheKey] = cachedData
|
||
return cachedData
|
||
},
|
||
[revision, multiSheetEngine, initialTemplateValues, columnWidths]
|
||
)
|
||
|
||
// Функция для обновления подсветки ячеек при вводе формулы
|
||
const updateCellHighlights = useCallback(
|
||
(formula: string) => {
|
||
if (!formula.startsWith('=')) {
|
||
setHighlightedCells([])
|
||
return
|
||
}
|
||
|
||
try {
|
||
// Извлекаем ссылки на ячейки из формулы
|
||
const references = extractCellReferences(formula)
|
||
|
||
// Конвертируем ссылки в подсвеченные ячейки
|
||
const highlights = convertReferencesToHighlights(
|
||
references,
|
||
activeSheet
|
||
)
|
||
|
||
setHighlightedCells(highlights)
|
||
} catch (error) {
|
||
console.error('Ошибка при обновлении подсветки ячеек:', error)
|
||
setHighlightedCells([])
|
||
}
|
||
},
|
||
[activeSheet]
|
||
)
|
||
|
||
const formulaBarValue = useMemo(() => {
|
||
if (isEditing) {
|
||
return editingValue
|
||
}
|
||
if (selectedCell) {
|
||
const sheetName = SHEET_NAMES[activeSheet]
|
||
return multiSheetEngine.getCellRawValue(
|
||
sheetName,
|
||
selectedCell.row,
|
||
selectedCell.col
|
||
)
|
||
}
|
||
return ''
|
||
}, [
|
||
isEditing,
|
||
editingValue,
|
||
selectedCell,
|
||
activeSheet,
|
||
multiSheetEngine,
|
||
revision,
|
||
])
|
||
|
||
useEffect(() => {
|
||
if (isEditing && activeCellInputRef.current) {
|
||
const input = activeCellInputRef.current
|
||
input.focus()
|
||
const length = input.value.length
|
||
input.setSelectionRange(length, length)
|
||
}
|
||
}, [isEditing])
|
||
|
||
// Синхронизация между formula bar и ячейкой при редактировании
|
||
useEffect(() => {
|
||
if (isEditing && formulaBarRef.current) {
|
||
formulaBarRef.current.value = editingValue
|
||
}
|
||
}, [editingValue, isEditing])
|
||
|
||
// Обновление подсветки ячеек при вводе формулы
|
||
useEffect(() => {
|
||
if (isEditing) {
|
||
updateCellHighlights(editingValue)
|
||
} else {
|
||
// Очищаем подсветку когда не редактируем
|
||
setHighlightedCells([])
|
||
}
|
||
}, [isEditing, editingValue, updateCellHighlights])
|
||
|
||
const startEditing = useCallback(() => {
|
||
if (!selectedCell) return
|
||
// Сбрасываем множественное выделение при начале редактирования
|
||
setMultiSelection([])
|
||
const sheetName = SHEET_NAMES[activeSheet]
|
||
const rawValue = multiSheetEngine.getCellRawValue(
|
||
sheetName,
|
||
selectedCell.row,
|
||
selectedCell.col
|
||
)
|
||
setIsEditing(true)
|
||
setEditingValue(rawValue)
|
||
}, [activeSheet, selectedCell, multiSheetEngine])
|
||
|
||
const stopEditing = useCallback(
|
||
(save: boolean) => {
|
||
if (save && selectedCell) {
|
||
const sheetName = SHEET_NAMES[activeSheet]
|
||
|
||
multiSheetEngine.setCellValueWithoutRecalc(
|
||
sheetName,
|
||
selectedCell.row,
|
||
selectedCell.col,
|
||
editingValue
|
||
)
|
||
updateRevision()
|
||
multiSheetEngine.debouncedRecalc()
|
||
}
|
||
setIsEditing(false)
|
||
setEditingValue('')
|
||
setEditingSource('cell')
|
||
containerRefs.current[activeSheet]?.focus({ preventScroll: true })
|
||
},
|
||
[activeSheet, selectedCell, editingValue, multiSheetEngine, updateRevision]
|
||
)
|
||
|
||
const handleCellChange = useCallback(
|
||
(newValue: string) => {
|
||
if (isEditing) {
|
||
setEditingValue(newValue)
|
||
if (!userEdited) setUserEdited(true)
|
||
}
|
||
},
|
||
[isEditing, userEdited]
|
||
)
|
||
|
||
const handleClearCell = useCallback(() => {
|
||
if (!selectedCell) return
|
||
const sheetName = SHEET_NAMES[activeSheet]
|
||
|
||
multiSheetEngine.setCellValueWithoutRecalc(
|
||
sheetName,
|
||
selectedCell.row,
|
||
selectedCell.col,
|
||
''
|
||
)
|
||
setUserEdited(true)
|
||
updateRevision()
|
||
multiSheetEngine.debouncedRecalc()
|
||
setMultiSelection([])
|
||
}, [activeSheet, selectedCell, multiSheetEngine, updateRevision])
|
||
|
||
const moveSelection = useCallback(
|
||
(deltaRow: number, deltaCol: number) => {
|
||
if (!selectedCell) {
|
||
setSelectedCell({ row: 0, col: 0 })
|
||
return
|
||
}
|
||
|
||
if (isEditing) {
|
||
stopEditing(true)
|
||
}
|
||
|
||
const newRow = Math.max(
|
||
0,
|
||
Math.min(ROW_COUNT - 1, selectedCell.row + deltaRow)
|
||
)
|
||
const newCol = Math.max(
|
||
0,
|
||
Math.min(COL_COUNT - 1, selectedCell.col + deltaCol)
|
||
)
|
||
|
||
setSelectedCell({ row: newRow, col: newCol })
|
||
// Сбрасываем множественное выделение при навигации
|
||
setMultiSelection([])
|
||
},
|
||
[selectedCell, isEditing, stopEditing]
|
||
)
|
||
|
||
// Функция для очистки множества выделенных ячеек
|
||
const handleClearMultipleCells = useCallback(() => {
|
||
if (multiSelection.length === 0) return
|
||
|
||
const sheetName = SHEET_NAMES[activeSheet]
|
||
const cellsToDelete = getAllCellsInSelections(multiSelection)
|
||
|
||
cellsToDelete.forEach(({ row, col }) => {
|
||
multiSheetEngine.setCellValueWithoutRecalc(sheetName, row, col, '')
|
||
})
|
||
|
||
setUserEdited(true)
|
||
updateRevision()
|
||
multiSheetEngine.debouncedRecalc()
|
||
setMultiSelection([])
|
||
}, [multiSelection, activeSheet, multiSheetEngine, updateRevision])
|
||
|
||
const handleKeyDown = useCallback(
|
||
(e: React.KeyboardEvent) => {
|
||
if (isEditing) return
|
||
|
||
if (!selectedCell && e.key.match(/^(Arrow|Enter|F2|Delete|Backspace)$/)) {
|
||
moveSelection(0, 0)
|
||
e.preventDefault()
|
||
return
|
||
}
|
||
if (!selectedCell) return
|
||
|
||
const keyHandlers: Record<string, () => void> = {
|
||
ArrowUp: () => moveSelection(-1, 0),
|
||
ArrowDown: () => moveSelection(1, 0),
|
||
ArrowLeft: () => moveSelection(0, -1),
|
||
ArrowRight: () => moveSelection(0, 1),
|
||
Enter: () => {
|
||
setEditingSource('cell')
|
||
startEditing()
|
||
},
|
||
F2: () => {
|
||
setEditingSource('cell')
|
||
startEditing()
|
||
},
|
||
Delete: () => {
|
||
// Если есть множественное выделение, удаляем все выделенные ячейки
|
||
if (multiSelection.length > 0) {
|
||
handleClearMultipleCells()
|
||
} else {
|
||
handleClearCell()
|
||
}
|
||
},
|
||
Backspace: () => {
|
||
// Если есть множественное выделение, удаляем все выделенные ячейки
|
||
if (multiSelection.length > 0) {
|
||
handleClearMultipleCells()
|
||
} else {
|
||
handleClearCell()
|
||
}
|
||
},
|
||
Escape: () => {
|
||
// Сбрасываем множественное выделение
|
||
setMultiSelection([])
|
||
},
|
||
}
|
||
|
||
// Ctrl+A - выделить все ячейки
|
||
if (e.key === 'a' && (e.ctrlKey || e.metaKey)) {
|
||
e.preventDefault()
|
||
const allSelection = createSelectionFromRange(
|
||
0,
|
||
0,
|
||
ROW_COUNT - 1,
|
||
COL_COUNT - 1
|
||
)
|
||
setMultiSelection([allSelection])
|
||
return
|
||
}
|
||
|
||
if (keyHandlers[e.key]) {
|
||
e.preventDefault()
|
||
keyHandlers[e.key]()
|
||
} else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
|
||
e.preventDefault()
|
||
setEditingSource('cell')
|
||
setEditingValue(e.key)
|
||
setIsEditing(true)
|
||
if (!userEdited) setUserEdited(true)
|
||
}
|
||
},
|
||
[
|
||
selectedCell,
|
||
isEditing,
|
||
moveSelection,
|
||
startEditing,
|
||
handleClearCell,
|
||
multiSelection,
|
||
handleClearMultipleCells,
|
||
]
|
||
)
|
||
|
||
const handleCellClick = useCallback(
|
||
(row: number, col: number, event?: React.MouseEvent) => {
|
||
if (isEditing) {
|
||
stopEditing(true)
|
||
}
|
||
|
||
// Если удерживается Ctrl (или Cmd на Mac), добавляем к множественному выделению
|
||
if (event && (event.ctrlKey || event.metaKey)) {
|
||
const newSelection = createSelectionFromRange(row, col, row, col)
|
||
setMultiSelection(prev => [...prev, newSelection])
|
||
setSelectedCell({ row, col })
|
||
return
|
||
}
|
||
|
||
// Если удерживается Shift, расширяем выделение
|
||
if (event && event.shiftKey && selectedCell) {
|
||
const newSelection = createSelectionFromRange(
|
||
selectedCell.row,
|
||
selectedCell.col,
|
||
row,
|
||
col
|
||
)
|
||
setMultiSelection([newSelection])
|
||
return
|
||
}
|
||
|
||
// Обычный клик - очищаем множественное выделение
|
||
setMultiSelection([])
|
||
setSelectedCell({ row, col })
|
||
containerRefs.current[activeSheet]?.focus({ preventScroll: true })
|
||
},
|
||
[isEditing, stopEditing, activeSheet, selectedCell]
|
||
)
|
||
|
||
// Новый обработчик для начала drag selection
|
||
const handleCellMouseDown = useCallback(
|
||
(row: number, col: number, event: React.MouseEvent) => {
|
||
// Игнорируем правый клик
|
||
if (event.button !== 0) return
|
||
|
||
// Если удерживаются модификаторы, не начинаем drag
|
||
if (event.ctrlKey || event.metaKey || event.shiftKey) return
|
||
|
||
setIsDragging(true)
|
||
setDragStart({ row, col })
|
||
setMultiSelection([])
|
||
setSelectedCell({ row, col })
|
||
},
|
||
[]
|
||
)
|
||
|
||
// Обработчик для drag selection
|
||
const handleCellMouseEnter = useCallback(
|
||
(row: number, col: number) => {
|
||
if (!isDragging || !dragStart) return
|
||
|
||
const newSelection = createSelectionFromRange(
|
||
dragStart.row,
|
||
dragStart.col,
|
||
row,
|
||
col
|
||
)
|
||
setMultiSelection([newSelection])
|
||
},
|
||
[isDragging, dragStart]
|
||
)
|
||
|
||
// Обработчик завершения drag selection
|
||
const handleCellMouseUp = useCallback(() => {
|
||
if (isDragging) {
|
||
setIsDragging(false)
|
||
setDragStart(null)
|
||
}
|
||
}, [isDragging])
|
||
|
||
// Глобальный обработчик для завершения drag selection
|
||
useEffect(() => {
|
||
const handleGlobalMouseUp = () => {
|
||
if (isDragging) {
|
||
setIsDragging(false)
|
||
setDragStart(null)
|
||
}
|
||
}
|
||
|
||
if (isDragging) {
|
||
document.addEventListener('mouseup', handleGlobalMouseUp)
|
||
return () => {
|
||
document.removeEventListener('mouseup', handleGlobalMouseUp)
|
||
}
|
||
}
|
||
}, [isDragging])
|
||
|
||
// Новый обработчик для кликов в режиме редактирования - вставляет ссылку
|
||
const handleCellReferenceClick = useCallback(
|
||
(targetSheetType: SheetType, row: number, col: number) => {
|
||
if (!isEditing || !selectedCell || !editingValue.startsWith('=')) {
|
||
stopEditing(true)
|
||
setSelectedCell({ row, col })
|
||
return
|
||
}
|
||
|
||
let cellReference: string
|
||
|
||
if (targetSheetType !== activeSheet) {
|
||
cellReference = createQualifiedCellReference(targetSheetType, row, col)
|
||
} else {
|
||
cellReference = createCellAddress(row, col)
|
||
}
|
||
|
||
const newValue = editingValue + cellReference
|
||
setEditingValue(newValue)
|
||
if (!userEdited) setUserEdited(true)
|
||
|
||
if (editingSource === 'formula') {
|
||
if (formulaBarRef.current) {
|
||
formulaBarRef.current.value = newValue
|
||
formulaBarRef.current.focus()
|
||
const length = newValue.length
|
||
formulaBarRef.current.setSelectionRange(length, length)
|
||
}
|
||
} else {
|
||
if (activeCellInputRef.current) {
|
||
activeCellInputRef.current.value = newValue
|
||
activeCellInputRef.current.focus({ preventScroll: true })
|
||
const length = newValue.length
|
||
activeCellInputRef.current.setSelectionRange(length, length)
|
||
}
|
||
}
|
||
},
|
||
[isEditing, selectedCell, editingValue, activeSheet, editingSource]
|
||
)
|
||
|
||
const handleCellDoubleClick = useCallback(
|
||
(row: number, col: number) => {
|
||
setSelectedCell({ row, col })
|
||
setEditingSource('cell')
|
||
startEditing()
|
||
},
|
||
[startEditing]
|
||
)
|
||
|
||
const handleColumnResize = useCallback(
|
||
(sheetType: SheetType, colIndex: number, newWidth: number) => {
|
||
setColumnWidths(
|
||
produce(draft => {
|
||
draft[sheetType][colIndex] = Math.max(60, newWidth)
|
||
const grid = gridRefs.current[sheetType]
|
||
if (grid) {
|
||
grid.resetAfterColumnIndex(colIndex)
|
||
}
|
||
})
|
||
)
|
||
},
|
||
[]
|
||
)
|
||
|
||
const handleFormulaBarChange = useCallback(
|
||
(newValue: string) => {
|
||
if (selectedCell) {
|
||
if (!isEditing) setIsEditing(true)
|
||
setEditingValue(newValue)
|
||
if (!userEdited) setUserEdited(true)
|
||
}
|
||
},
|
||
[selectedCell, isEditing, userEdited]
|
||
)
|
||
|
||
const handleFormulaBarFocus = useCallback(() => {
|
||
if (selectedCell && !isEditing) {
|
||
setEditingSource('formula')
|
||
startEditing()
|
||
}
|
||
}, [selectedCell, isEditing, startEditing])
|
||
|
||
const handleFormulaBarBlur = useCallback(
|
||
(e: React.FocusEvent<HTMLInputElement>) => {
|
||
// Проверяем, не переходит ли фокус в ячейку редактирования
|
||
const relatedTarget = e.relatedTarget as HTMLElement
|
||
if (relatedTarget && relatedTarget.closest('input[type="text"]')) {
|
||
return // Не завершаем редактирование
|
||
}
|
||
// Завершаем редактирование только если фокус ушел полностью
|
||
if (isEditing) {
|
||
stopEditing(true)
|
||
}
|
||
},
|
||
[isEditing, stopEditing]
|
||
)
|
||
|
||
const handleFormulaBarKeyDown = useCallback(
|
||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault()
|
||
stopEditing(true)
|
||
moveSelection(1, 0)
|
||
setTimeout(() => {
|
||
containerRefs.current[activeSheet]?.focus({ preventScroll: true })
|
||
}, 0)
|
||
} else if (e.key === 'Escape') {
|
||
e.preventDefault()
|
||
stopEditing(false)
|
||
containerRefs.current[activeSheet]?.focus({ preventScroll: true })
|
||
}
|
||
},
|
||
[stopEditing, moveSelection, activeSheet]
|
||
)
|
||
|
||
const onGridScroll = useCallback(
|
||
(
|
||
sheetType: SheetType,
|
||
{ scrollLeft, scrollTop }: { scrollLeft: number; scrollTop: number }
|
||
) => {
|
||
if (headerRefs.current[sheetType]) {
|
||
headerRefs.current[sheetType]!.scrollLeft = scrollLeft
|
||
}
|
||
if (rowHeaderRefs.current[sheetType]) {
|
||
rowHeaderRefs.current[sheetType]!.scrollTop = scrollTop
|
||
}
|
||
},
|
||
[]
|
||
)
|
||
|
||
// Мемоизируем состояние ширин таблиц
|
||
const [spreadsheetWidths, setSpreadsheetWidths] = useState({
|
||
L: 0.5,
|
||
R: 0.5,
|
||
})
|
||
|
||
// Мемоизируем опции автосохранения
|
||
const autoSaveOptions = useMemo(
|
||
() => ({
|
||
templateId,
|
||
autoSaveDelay: 4000,
|
||
enableAutoSave: enableAutoSave && userEdited,
|
||
}),
|
||
[templateId, enableAutoSave, userEdited]
|
||
)
|
||
|
||
// Мемоизируем getAllModifiedCells для предотвращения частых ререндеров хука автосохранения
|
||
const memoizedGetAllModifiedCells = useCallback(
|
||
multiSheetEngine.getAllModifiedCells,
|
||
[revision] // Используем revision вместо функции для более стабильной мемоизации
|
||
)
|
||
|
||
// Используем новый хук автосохранения
|
||
const {
|
||
isSaving,
|
||
isLoading,
|
||
hasUnsavedChanges,
|
||
lastSaveError,
|
||
manualSave,
|
||
clearError,
|
||
loadSheets,
|
||
} = useSheetAutoSave(
|
||
memoizedGetAllModifiedCells,
|
||
multiSheetEngine.isCalculating,
|
||
revision,
|
||
autoSaveOptions
|
||
)
|
||
|
||
// Используем хук для перетаскивания разделителя
|
||
const handleDividerDrag = useCallback((newLeftPercentage: number) => {
|
||
// Используем requestAnimationFrame для более плавного обновления
|
||
requestAnimationFrame(() => {
|
||
setSpreadsheetWidths({
|
||
L: newLeftPercentage,
|
||
R: 1 - newLeftPercentage,
|
||
})
|
||
})
|
||
}, [])
|
||
|
||
const separatorRef = useDraggableDivider(handleDividerDrag)
|
||
|
||
// Мемоизируем функцию инициализации данных
|
||
const initializeData = useCallback(async () => {
|
||
if (!templateId || isInitialized) return
|
||
|
||
let finalBaseData: Record<string, Record<string, any>> = {}
|
||
|
||
// 1. ИСПОЛЬЗУЕМ ДАННЫЕ ИЗ REACT QUERY КЕША
|
||
if (fileData && Object.keys(fileData.data).length > 0) {
|
||
finalBaseData = { [SHEET_NAMES.report]: fileData.data }
|
||
setBaseFileData(finalBaseData)
|
||
setTemplateData(finalBaseData)
|
||
}
|
||
|
||
// 2. ИСПОЛЬЗУЕМ templateData КАК FALLBACK или основные данные
|
||
const hasTemplateData =
|
||
Object.keys(templateData).length > 0 &&
|
||
Object.values(templateData).some(sheet => Object.keys(sheet).length > 0)
|
||
|
||
if (hasTemplateData && Object.keys(finalBaseData).length === 0) {
|
||
finalBaseData = templateData
|
||
setBaseFileData(finalBaseData)
|
||
setTemplateData(templateData)
|
||
}
|
||
|
||
// 3. ЗАГРУЖАЕМ ПОЛЬЗОВАТЕЛЬСКИЕ ИЗМЕНЕНИЯ ИЗ API
|
||
try {
|
||
const apiSheets = await loadSheets()
|
||
|
||
// Преобразуем листы API в формат данных
|
||
const userChanges: Record<string, Record<string, any>> = {}
|
||
Object.entries(apiSheets).forEach(([sheetName, sheet]) => {
|
||
// Нормализуем имя листа: "Report" -> "L"
|
||
const normalizedName =
|
||
sheetName === 'Report'
|
||
? SHEET_NAMES.report
|
||
: sheetName === 'Calculations'
|
||
? SHEET_NAMES.calculations
|
||
: sheetName
|
||
|
||
// Интересуют только листы L и R
|
||
if (
|
||
(normalizedName === SHEET_NAMES.report ||
|
||
normalizedName === SHEET_NAMES.calculations) &&
|
||
sheet.cells &&
|
||
Object.keys(sheet.cells).length > 0
|
||
) {
|
||
userChanges[normalizedName] = sheet.cells
|
||
}
|
||
})
|
||
|
||
// 4. ОБЪЕДИНЯЕМ БАЗОВЫЕ ДАННЫЕ С ПОЛЬЗОВАТЕЛЬСКИМИ ИЗМЕНЕНИЯМИ
|
||
if (Object.keys(userChanges).length > 0) {
|
||
// Создаем объединенные данные: базовые данные файла + пользовательские изменения
|
||
const mergedData: Record<string, Record<string, any>> = {}
|
||
|
||
// Копируем базовые данные файла как основу
|
||
Object.entries(finalBaseData).forEach(([sheetName, sheetData]) => {
|
||
mergedData[sheetName] = { ...sheetData }
|
||
})
|
||
|
||
// Применяем пользовательские изменения поверх базовых данных
|
||
Object.entries(userChanges).forEach(([sheetName, sheetData]) => {
|
||
if (!mergedData[sheetName]) {
|
||
mergedData[sheetName] = {}
|
||
}
|
||
Object.entries(sheetData).forEach(([cellAddress, value]) => {
|
||
mergedData[sheetName][cellAddress] = value
|
||
})
|
||
})
|
||
|
||
multiSheetEngine.loadData(mergedData)
|
||
} else if (Object.keys(finalBaseData).length > 0) {
|
||
multiSheetEngine.loadData(finalBaseData)
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ Ошибка при загрузке пользовательских изменений:', error)
|
||
|
||
// В случае ошибки используем только базовые данные
|
||
if (Object.keys(finalBaseData).length > 0) {
|
||
multiSheetEngine.loadData(finalBaseData)
|
||
}
|
||
}
|
||
|
||
setIsInitialized(true)
|
||
}, [
|
||
templateId,
|
||
templateData,
|
||
fileData,
|
||
loadSheets,
|
||
multiSheetEngine,
|
||
setTemplateData,
|
||
isInitialized,
|
||
])
|
||
|
||
// Загружаем сохраненные формулы при инициализации
|
||
// Ждем загрузки данных из React Query перед инициализацией
|
||
useEffect(() => {
|
||
// Инициализируем только когда все данные загружены или их нет вообще
|
||
const canInitialize =
|
||
!isLoadingLatestFile && !isLoadingFileData && templateId && !isInitialized
|
||
|
||
if (canInitialize) {
|
||
initializeData()
|
||
}
|
||
}, [
|
||
initializeData,
|
||
isLoadingLatestFile,
|
||
isLoadingFileData,
|
||
templateId,
|
||
isInitialized,
|
||
])
|
||
|
||
return (
|
||
<div className="flex h-full flex-col bg-background">
|
||
<FormulaBar
|
||
selectedCell={selectedCell}
|
||
formulaBarValue={formulaBarValue}
|
||
isCalculating={multiSheetEngine.isCalculating}
|
||
isEditing={isEditing}
|
||
onValueChange={handleFormulaBarChange}
|
||
onFocus={handleFormulaBarFocus}
|
||
onBlur={handleFormulaBarBlur}
|
||
onKeyDown={handleFormulaBarKeyDown}
|
||
formulaBarRef={el => {
|
||
formulaBarRef.current = el
|
||
}}
|
||
isSaving={isSaving}
|
||
isLoading={isLoading}
|
||
hasUnsavedChanges={hasUnsavedChanges}
|
||
lastSaveError={lastSaveError}
|
||
onManualSave={manualSave}
|
||
onClearError={clearError}
|
||
/>
|
||
<div
|
||
className="flex min-w-0 flex-1 gap-1 overflow-hidden"
|
||
style={{ transition: 'none' }}
|
||
>
|
||
{SHEET_TYPES.map((sheetType, index) => (
|
||
<React.Fragment key={sheetType}>
|
||
<Spreadsheet
|
||
sheetType={sheetType}
|
||
columnWidths={columnWidths[sheetType]}
|
||
spreadsheetWidths={spreadsheetWidths}
|
||
getCachedCellData={getCachedCellData}
|
||
selectedCell={selectedCell}
|
||
multiSelection={multiSelection}
|
||
activeSheet={activeSheet}
|
||
isEditing={isEditing}
|
||
editingValue={editingValue}
|
||
highlightedCells={highlightedCells}
|
||
handleCellClick={handleCellClick}
|
||
handleCellDoubleClick={handleCellDoubleClick}
|
||
handleCellChange={handleCellChange}
|
||
handleCellReferenceClick={handleCellReferenceClick}
|
||
handleCellMouseDown={handleCellMouseDown}
|
||
handleCellMouseEnter={handleCellMouseEnter}
|
||
handleCellMouseUp={handleCellMouseUp}
|
||
isInEditMode={isEditing}
|
||
stopEditing={stopEditing}
|
||
setActiveSheet={setActiveSheet}
|
||
activeCellInputRef={activeCellInputRef}
|
||
containerRefs={containerRefs}
|
||
handleKeyDown={handleKeyDown}
|
||
headerRefs={headerRefs}
|
||
rowHeaderRefs={rowHeaderRefs}
|
||
gridRefs={gridRefs}
|
||
onGridScroll={onGridScroll}
|
||
handleColumnResize={handleColumnResize}
|
||
mergedCells={mergedCells}
|
||
/>
|
||
{index === 0 && (
|
||
<div
|
||
ref={separatorRef}
|
||
className="flex w-2 cursor-col-resize items-center justify-center bg-border transition-colors hover:bg-primary/20"
|
||
style={{ userSelect: 'none' }}
|
||
>
|
||
<div className="h-4 w-0.5 rounded-full bg-muted-foreground/50" />
|
||
</div>
|
||
)}
|
||
</React.Fragment>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DualSpreadsheet
|