Skip to content

Commit

Permalink
feat: support virtual render with scroller plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
OpportunityLiu committed Mar 29, 2024
1 parent f4d1412 commit e18a0ce
Show file tree
Hide file tree
Showing 4 changed files with 31 additions and 8 deletions.
24 changes: 21 additions & 3 deletions packages/x6-plugin-scroller/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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,
Expand Down Expand Up @@ -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() {
Expand All @@ -358,6 +369,7 @@ export class Scroller
this.onRightMouseDown,
)
}
this.scrollerImpl.container.removeEventListener('scroll', this.onScroll)
}

protected onRightMouseDown(e: Dom.MouseDownEvent) {
Expand All @@ -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')
Expand Down
6 changes: 3 additions & 3 deletions packages/x6-plugin-scroller/src/scroller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

/**
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion packages/x6/src/graph/graph.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
7 changes: 6 additions & 1 deletion packages/x6/src/graph/virtual-render.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -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)
}
}
Expand Down

0 comments on commit e18a0ce

Please sign in to comment.