From 693344efdb564531ab315fd405b3b93c5fa24c2a Mon Sep 17 00:00:00 2001
From: OpportunityLiu <opportunity@live.in>
Date: Fri, 29 Mar 2024 11:02:54 +0800
Subject: [PATCH] feat: support virtual render with scroller plugin

---
 packages/x6-plugin-scroller/src/index.ts    | 24 ++++++++++++++++++---
 packages/x6-plugin-scroller/src/scroller.ts |  6 +++---
 packages/x6/src/graph/graph.ts              |  2 +-
 packages/x6/src/graph/virtual-render.ts     |  7 +++++-
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/x6-plugin-scroller/src/index.ts b/packages/x6-plugin-scroller/src/index.ts
index ead7279121d..e452c0bcfa5 100644
--- a/packages/x6-plugin-scroller/src/index.ts
+++ b/packages/x6-plugin-scroller/src/index.ts
@@ -105,8 +105,15 @@ export class Scroller
     return this
   }
 
-  center(optons?: ScrollerImpl.CenterOptions) {
-    return this.centerPoint(optons)
+  /**
+   * Returns the untransformed size and origin of the current viewport.
+   */
+  getVisibleArea() {
+    return this.scrollerImpl.getVisibleArea()
+  }
+
+  center(options?: ScrollerImpl.CenterOptions) {
+    return this.centerPoint(options)
   }
 
   centerPoint(
@@ -119,7 +126,7 @@ export class Scroller
     y: number,
     options?: ScrollerImpl.CenterOptions,
   ): this
-  centerPoint(optons?: ScrollerImpl.CenterOptions): this
+  centerPoint(options?: ScrollerImpl.CenterOptions): this
   centerPoint(
     x?: number | null | ScrollerImpl.CenterOptions,
     y?: number | null,
@@ -336,6 +343,10 @@ export class Scroller
         this.onRightMouseDown,
       )
     }
+    this.onScroll = this.onScroll.bind(this)
+    this.scrollerImpl.container.addEventListener('scroll', this.onScroll, {
+      passive: true,
+    })
   }
 
   protected stopListening() {
@@ -358,6 +369,7 @@ export class Scroller
         this.onRightMouseDown,
       )
     }
+    this.scrollerImpl.container.removeEventListener('scroll', this.onScroll)
   }
 
   protected onRightMouseDown(e: Dom.MouseDownEvent) {
@@ -368,6 +380,12 @@ export class Scroller
     }
   }
 
+  protected onScroll(e: Event) {
+    const args = { e }
+    this.trigger('scroll', args)
+    this.graph.trigger('scroller:scroll', args)
+  }
+
   protected preparePanning({ e }: { e: Dom.MouseDownEvent }) {
     const allowPanning = this.allowPanning(e, true)
     const selection = this.graph.getPlugin<any>('selection')
diff --git a/packages/x6-plugin-scroller/src/scroller.ts b/packages/x6-plugin-scroller/src/scroller.ts
index b3567cb2e85..e0dfa8d0184 100644
--- a/packages/x6-plugin-scroller/src/scroller.ts
+++ b/packages/x6-plugin-scroller/src/scroller.ts
@@ -490,8 +490,8 @@ export class ScrollerImpl extends View<ScrollerImpl.EventArgs> {
   /**
    * Position the center of graph to the center of the viewport.
    */
-  center(optons?: ScrollerImpl.CenterOptions) {
-    return this.centerPoint(optons)
+  center(options?: ScrollerImpl.CenterOptions) {
+    return this.centerPoint(options)
   }
 
   /**
@@ -510,7 +510,7 @@ export class ScrollerImpl extends View<ScrollerImpl.EventArgs> {
     y: number,
     options?: ScrollerImpl.CenterOptions,
   ): this
-  centerPoint(optons?: ScrollerImpl.CenterOptions): this
+  centerPoint(options?: ScrollerImpl.CenterOptions): this
   centerPoint(
     x?: number | null | ScrollerImpl.CenterOptions,
     y?: number | null,
diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts
index ea57fdf1980..cbb422922ba 100644
--- a/packages/x6/src/graph/graph.ts
+++ b/packages/x6/src/graph/graph.ts
@@ -722,7 +722,7 @@ export class Graph extends Basecoat<EventArgs> {
     y: number,
     options?: Transform.CenterOptions,
   ): this
-  centerPoint(optons?: Transform.CenterOptions): this
+  centerPoint(options?: Transform.CenterOptions): this
   centerPoint(
     x?: number | null | Transform.CenterOptions,
     y?: number | null,
diff --git a/packages/x6/src/graph/virtual-render.ts b/packages/x6/src/graph/virtual-render.ts
index 471bf157e4d..0470c347fdc 100644
--- a/packages/x6/src/graph/virtual-render.ts
+++ b/packages/x6/src/graph/virtual-render.ts
@@ -14,12 +14,14 @@ export class VirtualRenderManager extends Base {
     this.graph.on('translate', this.resetRenderArea, this)
     this.graph.on('scale', this.resetRenderArea, this)
     this.graph.on('resize', this.resetRenderArea, this)
+    this.graph.on('scroller:scroll', this.resetRenderArea, this)
   }
 
   protected stopListening() {
     this.graph.off('translate', this.resetRenderArea, this)
     this.graph.off('scale', this.resetRenderArea, this)
     this.graph.off('resize', this.resetRenderArea, this)
+    this.graph.off('scroller:scroll', this.resetRenderArea, this)
   }
 
   enableVirtualRender() {
@@ -34,7 +36,10 @@ export class VirtualRenderManager extends Base {
 
   resetRenderArea() {
     if (this.options.virtual) {
-      const renderArea = this.graph.getGraphArea()
+      const scroller = this.graph.getPlugin<any>('scroller')
+      const renderArea = scroller
+        ? scroller.getVisibleArea()
+        : this.graph.getGraphArea()
       this.graph.renderer.setRenderArea(renderArea)
     }
   }