React-diagrams: Reroute (redistribute) links only, based on current nodes positions

Created on 23 Sep 2020  路  5Comments  路  Source: projectstorm/react-diagrams

Hi guys,

the current implementation provides only rerouting nodes and links at the same time. But I would like to arrange the nodes in my own way, and then reroute links. I tried to do the following, but Dagre rearranges links in such a way as if it also rearranged the nodes. How do I get it to based off their current position?

Thank you!

    // Create a new directed graph
    let g = new dagre.graphlib.Graph({
      multigraph: true
    })

    g.setGraph({
      rankdir: 'TB',
      ranker : 'network-simplex',
      marginx: 200,
      marginy: 200
    })

    g.setDefaultEdgeLabel(function() {
      return {}
    })

    const processedlinks = {}

    _forEach(model.getLinks(), link => {
      // set edges
      if (link.getSourcePort() && link.getTargetPort()) {
        processedlinks[link.getID()] = true

        g.setEdge({
          v   : link.getSourcePort().getNode().getID(),
          w   : link.getTargetPort().getNode().getID(),
          name: link.getID()
        })
      }
    })

    // layout the graph
    dagre.layout(g)

    g.edges().forEach(e => {
      const edge = g.edge(e)
      const link = model.getLink(e.name)

      const points = [link.getFirstPoint()]

      for (let i = 1; i < edge.points.length - 2; i++) {
        points.push(new PointModel({ link: link, position: new Point(edge.points[i].x, edge.points[i].y) }))
      }

      link.setPoints(points.concat(link.getLastPoint()))
    })

UPD:
@dylanvorster Nice to see that you are back, I see you are putting things in order in the issues 馃憤

needs investigation question

Most helpful comment

Looks so complex and great, congrats!
It's great to hear that this cool library will continue to evolve, I intend to do cool things thanks to it (and you).

All 5 comments

@stanislav-grin and @renato-bohler Sorry I've been gone, I've been busy getting this (see below) released :P

Thats actually where most of my time has been these past 2 years, so now that things are quieting down, I'm going to try get my hands dirt here again, I've got so many large architectural improvements I want to make

Looks so complex and great, congrats!
It's great to hear that this cool library will continue to evolve, I intend to do cool things thanks to it (and you).

Hello,

I put a good amount of time to figure out how it can be resolved. I checked the Dagre project for any relevant function that could help where they found nothing.
So, I wrote the re-routing method directly in this project.
Here is the naive idea of how I find the route for links:
Assuming each cell of the matrix is a node, I aim to find the route between cells of the same colour (e.g., red to red). The routing starts with the longest links. Ideally, a link should be a horizontal line. So, it goes horizontally until it hits the target node. If it hits any other nodes, it starts another line (above, below). The best route has the minimum cost. I calculate the cost of each route. Cost = total length of moving vertically.
image

I hope it helps.

I have already sent a pull request for this issue.

Hey @dylanvorster,

not sure if this is the right place for this, but I want to share with you what I have implemented using your library. There are still many new features and improvements ahead, but today was the first release and I'm very glad it happened!

Here is a blog post
https://backendless.com/introducing-the-visual-data-modele

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ganesh-sankey picture ganesh-sankey  路  4Comments

schecter22107 picture schecter22107  路  3Comments

t-gacema picture t-gacema  路  4Comments

DanieLazarLDAPPS picture DanieLazarLDAPPS  路  3Comments

shortwavedave picture shortwavedave  路  3Comments