Update line height calculation and management in App.tsx
This commit is contained in:
57
src/App.tsx
57
src/App.tsx
@@ -490,14 +490,61 @@ export default function App() {
|
|||||||
const measure = measureRef.current;
|
const measure = measureRef.current;
|
||||||
if (!textarea || !measure) return;
|
if (!textarea || !measure) return;
|
||||||
measure.style.width = `${textarea.clientWidth}px`;
|
measure.style.width = `${textarea.clientWidth}px`;
|
||||||
const heights = Array.from(measure.children).map((child) =>
|
const computed = window.getComputedStyle(textarea);
|
||||||
Math.ceil((child as HTMLElement).getBoundingClientRect().height)
|
const lineHeight = parseFloat(computed.lineHeight);
|
||||||
);
|
if (Number.isFinite(lineHeight) && lineHeight > 0 && lineHeight !== defaultLineHeight) {
|
||||||
setLineHeights(heights);
|
setDefaultLineHeight(lineHeight);
|
||||||
|
}
|
||||||
|
}, [defaultLineHeight, measureTick, showLineNumbersActive, sidebarCollapsed, historyOpen, textSize]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showLineNumbersActive) return;
|
||||||
|
fenwickRef.current.reset(lineCount);
|
||||||
|
lineHeightsRef.current = new Array(lineCount).fill(0);
|
||||||
|
setLineNumbersVersion((version) => version + 1);
|
||||||
|
updateVisibleRange();
|
||||||
|
}, [defaultLineHeight, lineCount, measureTick, showLineNumbersActive, textSize, updateVisibleRange]);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
if (!showLineNumbersActive || !defaultLineHeight) return;
|
||||||
|
const textarea = textareaRef.current;
|
||||||
|
const measureContainer = measureRef.current;
|
||||||
|
const measureLine = measureLineRef.current;
|
||||||
|
if (!textarea || !measureContainer || !measureLine) return;
|
||||||
|
measureContainer.style.width = `${textarea.clientWidth}px`;
|
||||||
|
if (visibleRange.end < visibleRange.start) return;
|
||||||
|
let changed = false;
|
||||||
|
for (let i = visibleRange.start; i <= visibleRange.end; i += 1) {
|
||||||
|
const lineText = lines[i] ?? "";
|
||||||
|
measureLine.textContent = lineText.length > 0 ? lineText : " ";
|
||||||
|
const height = Math.ceil(measureLine.getBoundingClientRect().height);
|
||||||
|
const prev = lineHeightsRef.current[i] || 0;
|
||||||
|
const base = prev || defaultLineHeight;
|
||||||
|
if (height > 0 && height !== prev) {
|
||||||
|
lineHeightsRef.current[i] = height;
|
||||||
|
fenwickRef.current.add(i, height - base);
|
||||||
|
changed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (changed) {
|
||||||
|
setLineNumbersVersion((version) => version + 1);
|
||||||
|
scheduleUpdateVisibleRange();
|
||||||
|
}
|
||||||
if (lineNumbersRef.current) {
|
if (lineNumbersRef.current) {
|
||||||
lineNumbersRef.current.scrollTop = textarea.scrollTop;
|
lineNumbersRef.current.scrollTop = textarea.scrollTop;
|
||||||
}
|
}
|
||||||
}, [lines, showLineNumbersActive, textSize, measureTick, sidebarCollapsed, historyOpen]);
|
}, [
|
||||||
|
defaultLineHeight,
|
||||||
|
lines,
|
||||||
|
measureTick,
|
||||||
|
scheduleUpdateVisibleRange,
|
||||||
|
showLineNumbersActive,
|
||||||
|
sidebarCollapsed,
|
||||||
|
historyOpen,
|
||||||
|
textSize,
|
||||||
|
visibleRange.end,
|
||||||
|
visibleRange.start
|
||||||
|
]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (showLineNumbersActive && textareaRef.current && lineNumbersRef.current) {
|
if (showLineNumbersActive && textareaRef.current && lineNumbersRef.current) {
|
||||||
|
|||||||
Reference in New Issue
Block a user