feat: support virtual render with scroller plugin

packages/x6-plugin-scroller/src/index.ts

@@ -57,13 +57,20 @@ export class Scroller
     this.setup()
     this.startListening()
     this.updateClassName()
+    this.scrollerImpl.init()
     this.scrollerImpl.center()
   }
 
   // #region api
 
   resize(width?: number, height?: number) {
     this.scrollerImpl.resize(width, height)
+    const size = {
+      width: this.scrollerImpl.options.width,
+      height: this.scrollerImpl.options.height,
+    }
+    this.trigger('resize', size)
+    this.graph.trigger('resize', size)
   }
 
   resizePage(width?: number, height?: number) {
@@ -105,8 +112,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 +133,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 +350,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 +376,7 @@ export class Scroller
         this.onRightMouseDown,
       )
     }
+    this.scrollerImpl.container.removeEventListener('scroll', this.onScroll)
   }
 
   protected onRightMouseDown(e: Dom.MouseDownEvent) {
@@ -368,6 +387,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')

packages/x6-plugin-scroller/src/scroller.ts

@@ -100,17 +100,17 @@ export class ScrollerImpl extends View<ScrollerImpl.EventArgs> {
     Dom.append(this.content, graphContainer)
     Dom.appendTo(this.content, this.container)
 
-    this.startListening()
+    this.backgroundManager = new ScrollerImpl.Background(this)
+  }
 
+  init() {
     if (!this.options.pageVisible) {
       this.graph.grid.update()
     }
-
-    this.backgroundManager = new ScrollerImpl.Background(this)
-
     if (!this.options.autoResize) {
       this.update()
     }
+    this.startListening()
   }
 
   protected startListening() {
@@ -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,

packages/x6/src/graph/graph.ts

@@ -556,12 +556,7 @@ export class Graph extends Basecoat<EventArgs> {
   }
 
   resize(width?: number, height?: number) {
-    const scroller = this.getPlugin<any>('scroller')
-    if (scroller) {
-      scroller.resize(width, height)
-    } else {
-      this.transform.resize(width, height)
-    }
+    this.size.resize(width, height)
     return this
   }
 
@@ -722,7 +717,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,

packages/x6/src/graph/virtual-render.ts

@@ -3,9 +3,13 @@ import { Base } from './base'
 
 export class VirtualRenderManager extends Base {
   protected init() {
-    this.resetRenderArea = FunctionExt.throttle(this.resetRenderArea, 200, {
-      leading: true,
-    })
+    this.resetRenderArea = FunctionExt.throttle(
+      FunctionExt.throttle(this.resetRenderArea, 200, {
+        leading: true,
+      }),
+      1,
+      { leading: false },
+    )
     this.resetRenderArea()
     this.startListening()
   }
@@ -14,12 +18,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 +40,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)
     }
   }