drawflow NODES connections

[heziosight]

Hello, since i updated angular version@13 in my package.json i have @types/drawflow": "^0.0.4", when page loading is done, the drawflow is created but can't see the connection nodes lines, just when i drag some of the nodes the connection lines has been show properly. how can i fix that issue? thanks

[jerosoler]

view this:

• https://github.com/jerosoler/Drawflow/issues/437

[heziosight]

that's not helped.

i attached some screenshot video in styles.less i tried to import "https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"; in angular.json i also tried to import drawflow/dist/drawflow.min.js" and drawflow/dist/drawflow.min.css" when page loading i also tried to add logic and use updateConnectionNodes method Object.keys(this.editor.drawflow.drawflow.Home.data).forEach(nodeId => { this.editor.updateConnectionNodes('node-' + nodeId); }); i found that connection of parent-drawflow is placed at top left of the drawflow(attached image)

record of issue

[jerosoler]

Try with settimeout. Css is not loaded

[heziosight]

which css i should load?

[jerosoler]

When loading drawflow it happens that the css is slower and is not yet ready to correctly mount the connections.

Make a settimeout to wait for the css to load.

[heziosight]

please take a look on my ngOnInit to see if there's something wrong because i've been indeed setTimout and it's still not fixed. that's worked before i updated angular version ngOnInit(): void { setTimeout(() => { var id1 = document.getElementById("drawflow"); this.editor = new Drawflow(id1); this.editor.reroute = true; this.editor.curvature = 0; this.editor.start();

  if (this.process.json) {
    const json1 = JSON.parse(this.process.json);
    this.editor.import(json1);

    // Update connections after a slight delay to ensure CSS is loaded
    setTimeout(() => {
      Object.keys(this.editor.drawflow.drawflow.Home.data).forEach(id => {
        this.editor.updateConnectionNodes(id);
      });
    }, 1000); 
  }

  this.editor.on('nodeCreated', (id) => {
    console.log(id);
    this.createNode(id);
  });
  this.editor.on('nodeRemoved', (id) => {
    console.log(id);
    this.removeNode(id);
  });
  this.editor.on("connectionCreated", (connection) => {
    this.createConnection(connection);
  });

  if (!this.process.id)
    this.addNodeToDrawFlow('start', 100, 100);

  this.updateSVGVisibility();
}, 1000); 

}

[heziosight]

great bro i just added some 1500ms of delay in global setTimout that wrap all ngOnInit drawflow functions i created! thanks