Diagram breaks when updating data for nodes and connectors

[Jano Hernández Cobos]

Hello, 

Every time I update the information of the nodes or the connectors they all appear overlapping in the same place.

instead:

This is the html of my diagram:

 <ejs-diagram #diagram
               id="diagram"
               width="100%"
               height="calc(100vh - 300px);"
               [layout]="layout"
               [snapSettings]="snapSettings"
               [nodes]="nodes"
               [connectors]="connectors"
               (click)="openStepDialogClick($event)">
  </ejs-diagram>

and I refresh my data like this, A bit complex, but I need it for my data structure:

  refreshData() {
    this.conectores = [];
    this.pasos = [];

    for (let step of this.steps) {
      let paso: NodeModel = {
        id: 'step' + step.id,
        shape: {
          type: 'HTML',
          content: this.getShape(step.stepTypeId),
        },
        annotations: [
          {
            id: 'nota-paso' + step.id,
            content: step.title,
          },
        ],
        constraints: this.nodeConstraints,
      };
      this.pasos.push(paso);

      if (step.links.length != 0) {
        let i = 0;
        for (let child of step.links) {
          let flecha: ConnectorModel;
          flecha = {
            id: 'arrow' + step.id + '-' + i,
            sourceID: 'step' + step.id,
            targetID: 'step' + child.id,
            type: 'Orthogonal',
            style: { strokeColor: '#888' },
            constraints: this.connectorConstraints,
          };

          if (child.text != null) {
            flecha.annotations = [
              {
                id: 'nota' + step.id + '-' + i,
                content: child.text,
                offset: 0.5,
                style: { fill: 'white', color: '#888' },
              },
            ];

          }
          i++;
          this.conectores.push(flecha);
        }
      }
    }
    this.nodes = this.pasos;
    this.connectors = this.conectores;
    this.layout = this.layoutModel;
  }

I have also tried to have the layout generated only the first time it is painted, but it works just as badly for me. All nodes and arrows update fine but are painted in the same place.

Is there a way to repaint the diagram or do this correctly? Thanks.

[Sivakumar Sekar]

Hi Marina, 

On analysis of the shared query, we suspect that you have reset all the nodes and connectors in the diagram and added new nodes and connectors, if the nodes and connectors are created manually at runtime, we have to use a diagram.doLayout method to rearrange the newly added node automatically to perform layout. Please add the below code snippet after resetting the nodes and connectors collections. 

this.diagram.doLayout(); 

Regards, 

Sivakumar     

[Jano Hernández Cobos]

Hello,

Thank you very much for responding so quickly. I've been testing and I can't get it to work for me, if I add that line it stops painting the diagram. Does it make any sense?

Regards, Marina.

[Sivakumar Sekar]

Hi Marina 

We have added the sample link and a video link to demonstrate how to reset the nodes and connectors collections and perform automatic layout in the diagram.  

this.diagram.nodes = nodes; 

this.diagram.connectors = connectors; 

  setTimeout(()=>{ 

   this.diagram.doLayout(); 

  },0);   

Sample link: https://stackblitz.com/edit/angular-xxypbp-1lsena?file=app.component.ts  

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/3491831038275132  

If the above-shared suggestion doesn`t satisfy your requirement, please share more details or replicate the issue in the shared sample. This will be helpful for us to proceed further. 

Regards, 

Sivakumar