Links Overlaping

[ahmadshaik1608]

Hi, Is there a way to find the overlap of two links and make the bump when a overlap happen,

Exactly when a perpendicular over lap with another link.

Please Find the image for reference...

[jerosoler]

All lines would have to be calculated every time a node moves.

Calculate all the SVG lines and see where they intersect.

You could get all the points of the SVG in this way: https://tympanus.net/codrops/2022/01/19/animate-anything-along-an-svg-path/

But it is complicated....

[ahmadshaik1608]

Hi, Sorry for late reply.

Actually i achieved it by implementing additional logic within the component. the result is as below pic It is working as expected when i draw the flow chart, but when i load already existing chart then it is not giving bumps.

Now what i want is when i load the existing chart. can we call connectionCreated function as you are calling createCurvature?

[jerosoler]

WoW!! I'm impressed!

If you want to share your code with the community, they will appreciate it.

If you move a node, is it also corrected?

Yes that's how it is. You can do it this way at import time:

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

[ahmadshaik1608]

Hi @jerosoler,

Yes, when we move node then i'm refreshing all the paths.

I'm storing the every path of nodes. For each path i'm calculating the straight line points(x1,y1 & x2,y2) leaving the edge curves and storing in below object {'inputNodeId_outputNodeId' : {points : [], path : ''}}

And after every connectionCreation,nodeMoved,connectionRemoved,nodeRemoved i'm refreshing the paths.

For every refresh i'm checking if any of lines in one path are perpendicular to any lines of another path and adding extra svg to that path as below .

function createPathElement(line1, x, y, intersectionKey) {   //For creating the bump
  const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = line1.direction === 'v' ? `M ${x} ${y + 10} A 10 10 0 0 1 ${x} ${y - 10}Z` : `M ${x + 10} ${y} A 10 10 0 0 1 ${x - 10} ${y}Z`;
  pathElement.setAttribute("d", d);
  pathElement.classList.add("main-path");
  pathElement.setAttribute("id", intersectionKey);
  return pathElement;
}

function createPathElement2(line1, x, y, intersectionKey) {   //For creating the white line that hides line going inside bump
  const pathElement2 = document.createElementNS("http://www.w3.org/2000/svg", "path");
  const d = line1.direction === 'v' ? `M ${x} ${y + 10} L ${x} ${y - 10}Z` : `M ${x + 10} ${y} L ${x - 10} ${y}Z`;
  pathElement2.setAttribute("d", d);
  pathElement2.classList.add("main-path");
  pathElement2.setAttribute("style", "stroke: white; fill: white;stroke-width:1px");
  pathElement2.setAttribute("id", intersectionKey);
  return pathElement2;
}

I'm happy to share if anything more required on this.

Question:

editor.updateConnectionNodes(id) // ex: editor.updateConnectionNodes('node-5') 
  } 

This is just giving the created node id's, but i need to call connectionCreated function, such that i can get the node ids of created path.

Can you please help me on this.

[jerosoler]

You can get the connections of the nodes with.

editor.getNodeFromId(id) // ex: editor.getNodeFromId(5)

Here you can find the input and output connections.

[ahmadshaik1608]

Hi, This is not worked for me.

createCurvature is called automatically when imported right, like wise i need to know which nodes are using this svg path and i need that function is auto called

or else is there a way to know the node ids for the created svg, i need the mapping of which svg connects which nodes.

[jerosoler]

I don't know if I'm understanding you correctly.

But you can get all the connections like this:

document.getElementsByClassName("connection");

In the node classes are all the connection ids.

[ahmadshaik1608]

Thanks for this idea. It solved my problem, now curves are loading when chart is imported.