rete
rete copied to clipboard
AreaPlugin zoomAt not centering on screen
I'm trying to use the AreaPlugin to center nodes, I get a weird behaviour.
I'm regenerating all graph when I get update from an observable
async ngAfterViewInit() {
this.dataflow$.subscribe(async data => {
this.dataFlowService.dataflowModified.next(data)
if (this.container) {
while (this.container.firstChild) {
this.container.removeChild(this.container.firstChild)
}
}
this.container = this.el.nativeElement
const reteFormat = await this.reteComponentService.convertToReteFormat(
_.cloneDeep(data)
)
let reteFormatJson = Object.create(reteFormat)
const components: any[] = []
for (const obj in data) {
components.push(new NumComponent(data[obj].name, data))
}
this.engine = new Engine('[email protected]')
this.editor = new NodeEditor('[email protected]', this.container)
this.editor.clear()
this.editor.use(ConnectionPlugin)
this.editor.use(ContextMenuPlugin, {
searchBar: false,
delay: 600000,
})
this.editor.use(AutoArrangePlugin, { margin: { x: 50, y: 50 }, depth: 0 })
this.editor.use(AngularRenderPlugin, { component: MyNodeComponent })
components.map(c => {
this.editor.register(c)
this.engine.register(c)
})
await this.editor.fromJSON(Object.create(reteFormatJson))
await this.editor.nodes.map(elm => {
this.editor.trigger('arrange' as any, { elm })
})
AreaPlugin.zoomAt(this.editor)
}
The first time when observable gets it's first data the editor is not centered on screen
But the weird part is when a new value of data is triggered the editor gets centered.
Any idea of why this is happening only on initial data
value ?
It seems that Angular didn't render a nodes when AreaPlugin.zoomAt
was called. Try to check it using breakpoint in devtools or requestAnimationFrame
This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.