question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Contribution] Horizontal graph auto-layout code

See original GitHub issue

Altought this code is specific for the model of my project (w/ InPorts & OutPorts) I’ve made a recursive method to organize the graph layout horizontally. Example: Before auto layout call & After layout call

In case this helps someone integration I’ll drop the code here.

The function itself:

 //NodeData is the custom NodeModel implementation
 public delegate void SearchAction(NodeData node, int depthLevel, int branchesOffset);

public int DFS_SearchGraph(SearchAction searchAction, NodeData currentNode, int depthLevel, int maxBranchesPrevChilds)
        {
            var maxBranchesCurrent = 0;
            int maxBranchesPrevChild = 0;


            for (int i = 0; i < currentNode.OutPort.connectedNodes.Count; i++)
            {
                maxBranchesPrevChild = DFS_SearchGraph(searchAction, currentNode.OutPort.connectedNodes[i], depthLevel + 1, maxBranchesPrevChilds + maxBranchesCurrent);

                if (i < currentNode.OutPort.connectedNodes.Count-1) //Has next branch
                    maxBranchesCurrent += maxBranchesPrevChild + 1;
                else
                    maxBranchesCurrent += maxBranchesPrevChild;
            }
            searchAction(currentNode, depthLevel, maxBranchesPrevChilds);
            return maxBranchesCurrent;
        }

The delegate implementation & function call:


public void OrganizeLayout()
        {
            const int marginX = 400;
            const int marginY = 120;


            var rootNode = FindRootNode();
            if (rootNode is null) return;


            Dictionary<int, (double?, double?)> nodesPos = new();

            foreach (NodeData node in diagram.Nodes)
                nodesPos.Add(node.DataId, (null, null));


            SearchAction organizeLayoutAction = (n, l, m) =>
            {

                var xFromCurrent = l * marginX;
                var yFromCurrent = m * marginY;
                if (nodesPos[n.DataId].Item1.HasValue) //If node already visited
                {
                    var xSet = nodesPos[n.DataId].Item1.Value;

                    var ySet = nodesPos[n.DataId].Item2.Value;

                    nodesPos[n.DataId] = (xFromCurrent > xSet ? xFromCurrent : xSet, yFromCurrent < ySet ? yFromCurrent : ySet);
                }
                else
                {
                    nodesPos[n.DataId] = (xFromCurrent, yFromCurrent);
                }
            };

            DFS_SearchGraph(organizeLayoutAction, rootNode, 0, 0);


            foreach (var nodePos in nodesPos)
            {
                var test = nodePos;
                var node = diagram.Nodes.Where(x => ((NodeData)x).DataId == nodePos.Key).FirstOrDefault();
                node?.SetPosition(nodePos.Value.Item1.Value, nodePos.Value.Item2.Value);
            }

            diagram.Refresh();
        }

  public NodeData FindRootNode()
        {
            foreach (var node in diagram.Nodes)
                if (((NodeData)node).InPort.IsPortEmpty())
                    return (NodeData)node;
            return null;
        }

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:4
  • Comments:8

github_iconTop GitHub Comments

1reaction
ud-wafflecommented, Jun 29, 2021

The graph search algorithm is based on DFS but the rest was made by head w/ some trial and error, if that makes sense? To have multiple directions/orientations I’m guessing: You can probably just alter the marginX & marginY values to negative and invert the flow direction. Or use depthLevel for Y position & branchesOffset for X position to make it flow vertically. But never tried it out tho

0reactions
petarvucommented, Feb 22, 2023

Hi @glinkot , would you mind sharing your implementation?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to setup layout constraints for a horizontal alignment ...
Try the following steps 1) first select all of them and add constraint EQUAL WIDTH to images 2) set the leading space between...
Read more >
The why, what, and how of Swift Auto-Layout
It calculates the size and position on your behalf as long as the rules you set (the constraints) result in one sound outcome....
Read more >
Throwing Auto Layout Out the Window
The black horizontal line is 16 milliseconds and you can see that for a feed item using UIStackView , it would take 46...
Read more >
ConstraintLayout vs Auto Layout: How Do They Compare?
With Auto Layout, each view needs to have enough constraints to determine its vertical and horizontal position and size. For some Views, their ......
Read more >
Manual: Auto Layout
The auto layout system provides ways to place elements in nested layout groups such as horizontal groups, vertical groups, or grids.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found