chore: discard invisible cell view data

src/components/canvas/component.tsx

@@ -108,16 +108,16 @@ const Internal: FC<CanvasProps> = observer((props: CanvasProps) => {
     let lastScrollTime = 0
     const onMouseWheel = (e: WheelEvent) => {
         // only support y scrollbar currently
-        if (store.anchorY + e.deltaY < 0) {
-            store.setAnchor(store.anchorX, 0)
-            return
+        let delta = e.deltaY
+        if (store.anchorY + delta < 0) {
+            delta = -store.anchorY
         }
 
         const now = Date.now()
-        if (now - lastScrollTime < 200) return
+        if (now - lastScrollTime < 150) return
 
         lastScrollTime = now
-        store.setAnchor(store.anchorX, store.anchorY + e.deltaY)
+        store.setAnchor(store.anchorX, store.anchorY + delta)
         store.render.render()
         store.scrollbar.update('y')
         store.scroll()

src/components/canvas/store/render.ts

@@ -25,11 +25,17 @@ export class Render {
             this.store.currSheetIdx,
             this.store.anchorX - BUFFER_SIZE,
             this.store.anchorY - BUFFER_SIZE,
-            rect.height + BUFFER_SIZE * 2,
+            rect.height + BUFFER_SIZE,
             rect.width + BUFFER_SIZE
         )
         resp.then((r) => {
             if (isErrorMessage(r)) return
+            const req = r.request
+            // Discard responses that are invisible now
+            if (Math.abs(req.startX - this.store.anchorX) > req.width) return
+            if (Math.abs(req.startY - this.store.anchorY) > req.height) {
+                return
+            }
             const data = r.data
             this._painterService.setupCanvas(this.canvas)
             this._painterService.clear()

src/core/data2/view_manager.ts

@@ -73,7 +73,16 @@ export class ViewManager {
             return a.fromRow < b.fromRow || a.fromCol < b.fromCol ? -1 : 1
         })
 
-        return {type, data: new CellView(this.dataChunks)}
+        return {
+            type,
+            data: new CellView(this.dataChunks),
+            request: {
+                startX,
+                startY,
+                height,
+                width,
+            },
+        }
     }
 
     /**
@@ -89,9 +98,17 @@ export enum CellViewRespType {
     New,
 }
 
+export interface CellViewRequest {
+    readonly startX: number
+    readonly startY: number
+    readonly height: number
+    readonly width: number
+}
+
 export interface CellViewResponse {
     readonly type: CellViewRespType
     readonly data: CellView
+    readonly request: CellViewRequest
 }
 
 export function parseDisplayWindow(