megaproxy/tiletopia
1
0
Fork 0
Code Issues Pull requests Projects Releases 8 Packages Wiki Activity Actions

Fix resize artifacts: rAF-throttle drag + force xterm repaint

Browse source 
Two related fixes for stale glyphs / visual artifacts while dragging
a gutter:

- Gutter.tsx: pointermove now writes the new ratio into a ref and
  schedules a single requestAnimationFrame flush per frame. Without
  this, setTree fires 60+ times per second during a drag and React
  + ResizeObserver + xterm's DOM renderer get out of sync. The
  pointerup handler flushes any pending ratio so the final position
  always lands.

- XtermPane.tsx: the ResizeObserver callback now also rAF-coalesces
  AND calls term.refresh(0, term.rows - 1) after fit.fit(). xterm's
  DOM renderer doesn't reliably repaint freed-up rows after a
  shrink, so the explicit refresh wipes any stale glyphs.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
megaproxy 2026-05-22 21:40:16 +01:00
parent a4cd82440b
commit 94bdb884ad
2 changed files with 48 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/XtermPane.tsx
View file

@ -165,16 +165,27 @@ export default function XtermPane({
if (ta) ta.addEventListener("focus", () => onFocusRef.current?.(), true);
}
// Re-fit on container resize; forward new size to the PTY.
// Re-fit on container resize; forward new size to the PTY. We
// coalesce multiple ResizeObserver firings into one rAF so a single
// gutter drag tick = one fit/resize/repaint, then explicitly call
// term.refresh() so the DOM renderer fully repaints (without this,
// shrinking a pane sometimes leaves stale glyphs in the freed rows).
let resizeRaf: number | null = null;
ro = new ResizeObserver(() => {
try {
fit.fit();
if (paneId != null && term) {
void resizePane(paneId, term.cols, term.rows);
if (resizeRaf != null) return;
resizeRaf = requestAnimationFrame(() => {
resizeRaf = null;
if (!term) return;
try {
fit.fit();
if (paneId != null) {
void resizePane(paneId, term.cols, term.rows);
}
term.refresh(0, term.rows - 1);
} catch (e) {
console.warn("resize failed", e);
}
} catch (e) {
console.warn("resize failed", e);
}
});
});
ro.observe(container);