28 lines
2.2 KiB
JavaScript
28 lines
2.2 KiB
JavaScript
const fs = require('fs');
|
|
let code = fs.readFileSync('src/components/TerminalPanel.vue', 'utf8');
|
|
|
|
// The reason it's stuttering and freezing might be related to CSS native scrolling fighting with xterm's pointer/touch handlers, or our own JS momentum not playing well.
|
|
// But wait, the logs showed Δy is HUGE (e.g. 102px in 16ms -> speed -102).
|
|
// And the `viewportScroller.scrollTop` was actually updating fine, BUT xterm might not be syncing its rows because xterm intercepts `wheel` and `touchmove` originally to sync `core._core.viewport.scroll`.
|
|
// Wait... if we update `.xterm-viewport`'s `scrollTop` manually, does xterm re-render the canvas/dom lines?
|
|
// YES it does through the `scroll` event listener on '.xterm-viewport'.
|
|
|
|
// Let's completely nuke `pointermove` preventions and xterm interception during passive scrolls, and let the BROWSER do EVERYTHING natively.
|
|
// The user noted that when "现在手指滑动失效" (scrolling broke altogether), it was when we removed EventListeners completely. Because xterm sets up the viewport explicitly.
|
|
|
|
// Let's revert touchmove and touchstart, and pointermove to just STOP PROPAGATION but NOT prevent default, and importantly, REMOVE our JS scroll tracking since native scroll is just better. Wait. The user's logs WERE our JS scrolling!
|
|
// Look at the logs:
|
|
// [Log] [Scroll] 🖐️ MOVE | 跟手延迟Δt=1.0ms | 手指位移Δy=50.7px | 渲染视口=3896→3845 | 当前算得速度v=-810.67
|
|
// The browser JS engine is grouping events. 1.0ms and jumping 50.7px. This means it's a huge jump between RAF frames.
|
|
// JS-driven scrolling via touchmove on mobile is ALWAYS janky because `touchmove` frequency is lower and uneven compared to compositor scrolling.
|
|
|
|
// What we MUST DO:
|
|
// 1. Let browser natively scroll the container (.xterm-viewport has overflow-y: auto)
|
|
// 2. STOP xterm from intercepting touchmove so it doesn't call e.preventDefault().
|
|
// 3. We do NOT update scrollTop manually.
|
|
// 4. We DO use pointers / touches.
|
|
|
|
// Wait, I already did this! Remember, user said "现在不动" (it doesn't move now) when I just did stopImmediatePropagation.
|
|
// Why did it not move? Because `.xterm-viewport` DOES NOT HAVE CSS overflow: auto?
|
|
// Actually I removed my CSS changes to `main.css` earlier!
|