javascriptmxgraphjgraphxjgraph

Create reversed mxHierarchical layout in mxgraph


Greetings to the community! I am currently creating a custom mxgraph editor and I am converting the graphs using different layouts. I would like to convert my graph layout into an mxHierarchicalLayout but reversed (instead of top-to-down I would like it to be down-to-top). Example of what I do and what I would like to do.

My graph

my graph

My graph converted with mxHierarchicalLayout Code snippet:

let layout = new mxHierarchicalLayout(graph); layout.execute(graph.getDefaultParent());

my graph with mxhierarchicallayout

How I want to convert the graph

enter image description here

I found in the mxHierarchicalLayout that there is an orientation member variable which is by default 'NORTH'. However when I tried to do the following

 let layout = new mxHierarchicalLayout(graph);
 layout.orientation=mxConstants.DIRECTION_SOUTH;
 layout.execute(graph.getDefaultParent());

The graph went out of my "canvas" and cannot be seen to check if this is the responsible parameter to "reverse" the tree. Could anyone help ? Thanks in advance.

PS

When I use layout.orientation = mxConstants.DIRECTION_SOUTH; it seems that the layout is converted as I want to but cannot be seen because the coordinates of the svg elements are of type x=-10, y=-5 (negatives), any workaround for this?


Solution

  • SOLVED

    I do not know why mxgraph has that buggy behaviour with orientation = south in mxHierarchicalLayout but I managed to create a workaround solution for my problem since I realized that the newly generated layout put my mxCell children objects of the graph to the north ( negative y coordinate). So what I did was after layout.execute(graph.getDefaultParent()); I get each and every child of the graph and retrieve the most negative y coordinate and then move all the cells of the graph from their new coordinates to a new incremented by the absolute value of the most negative y-coordinated element.

    Code

     function convertGraphToInverseHorizontalTree(){
            let layout = new mxHierarchicalLayout(graph);
            layout.orientation = mxConstants.DIRECTION_SOUTH;
            layout.execute(graph.getDefaultParent());
            graph.model.beginUpdate();
            //get the most negative y
            let mostNegativeY = getMostNegativeCoordinateY(graph);
            let children = graph.getChildCells();
            graph.moveCells(children, undefined , Math.abs(mostNegativeY));
            graph.model.endUpdate();
        }
    
        function getMostNegativeCoordinateY(graph){
            let children = graph.getChildCells();
            let mostNegative = 10000;
            for(let i = 0; i < children.length; i++){
               if(children[i].geometry != undefined){
                   if(children[i].geometry.y < mostNegative){
                       mostNegative = children[i].geometry.y;
                       }
               }
            }
            return mostNegative;
        }
    

    Now the graph is like this

    inversed hierarchical tree