rete icon indicating copy to clipboard operation
rete copied to clipboard

AreaPlugin zoomAt not centering on screen

Open Githamza opened this issue 5 years ago • 1 comments

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

Capture d’écran 2019-11-29 à 00 56 27

But the weird part is when a new value of data is triggered the editor gets centered. Capture d’écran 2019-11-29 à 01 00 18

Any idea of why this is happening only on initial data value ?

Githamza avatar Nov 29 '19 00:11 Githamza

It seems that Angular didn't render a nodes when AreaPlugin.zoomAt was called. Try to check it using breakpoint in devtools or requestAnimationFrame

Ni55aN avatar Nov 29 '19 10:11 Ni55aN

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.

rete-js[bot] avatar Jul 13 '23 10:07 rete-js[bot]