From 693344efdb564531ab315fd405b3b93c5fa24c2a Mon Sep 17 00:00:00 2001 From: OpportunityLiu Date: Fri, 29 Mar 2024 11:02:54 +0800 Subject: [PATCH 1/4] 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('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 { /** * 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 { 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 { 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('scroller') + const renderArea = scroller + ? scroller.getVisibleArea() + : this.graph.getGraphArea() this.graph.renderer.setRenderArea(renderArea) } } From ebf248dfc084194603bd398b94a56f38818d3952 Mon Sep 17 00:00:00 2001 From: OpportunityLiu Date: Mon, 1 Apr 2024 13:06:38 +0800 Subject: [PATCH 2/4] feat: support virtual render with scroller plugin --- packages/x6/src/graph/virtual-render.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/x6/src/graph/virtual-render.ts b/packages/x6/src/graph/virtual-render.ts index 0470c347fdc..ccd25acc5a7 100644 --- a/packages/x6/src/graph/virtual-render.ts +++ b/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() } From 4ed35c7f994b4368fcf73d944e906ffd9db1e056 Mon Sep 17 00:00:00 2001 From: OpportunityLiu Date: Mon, 1 Apr 2024 18:20:16 +0800 Subject: [PATCH 3/4] feat: trigger resize event for scroller --- packages/x6-plugin-scroller/src/index.ts | 6 ++++++ packages/x6/src/graph/graph.ts | 7 +------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/x6-plugin-scroller/src/index.ts b/packages/x6-plugin-scroller/src/index.ts index e452c0bcfa5..439060601fe 100644 --- a/packages/x6-plugin-scroller/src/index.ts +++ b/packages/x6-plugin-scroller/src/index.ts @@ -64,6 +64,12 @@ export class Scroller 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) { diff --git a/packages/x6/src/graph/graph.ts b/packages/x6/src/graph/graph.ts index cbb422922ba..cd40af7e0e1 100644 --- a/packages/x6/src/graph/graph.ts +++ b/packages/x6/src/graph/graph.ts @@ -556,12 +556,7 @@ export class Graph extends Basecoat { } resize(width?: number, height?: number) { - const scroller = this.getPlugin('scroller') - if (scroller) { - scroller.resize(width, height) - } else { - this.transform.resize(width, height) - } + this.size.resize(width, height) return this } From 3ca725e4712c4e22a61671a89e43436e9f83751e Mon Sep 17 00:00:00 2001 From: OpportunityLiu Date: Tue, 9 Apr 2024 15:44:41 +0800 Subject: [PATCH 4/4] fix: ensure functional before triggering events in ScrollerImpl.update() --- packages/x6-plugin-scroller/src/index.ts | 1 + packages/x6-plugin-scroller/src/scroller.ts | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/x6-plugin-scroller/src/index.ts b/packages/x6-plugin-scroller/src/index.ts index 439060601fe..ccef0f14030 100644 --- a/packages/x6-plugin-scroller/src/index.ts +++ b/packages/x6-plugin-scroller/src/index.ts @@ -57,6 +57,7 @@ export class Scroller this.setup() this.startListening() this.updateClassName() + this.scrollerImpl.init() this.scrollerImpl.center() } diff --git a/packages/x6-plugin-scroller/src/scroller.ts b/packages/x6-plugin-scroller/src/scroller.ts index e0dfa8d0184..c242c440666 100644 --- a/packages/x6-plugin-scroller/src/scroller.ts +++ b/packages/x6-plugin-scroller/src/scroller.ts @@ -100,17 +100,17 @@ export class ScrollerImpl extends View { 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() {