Create reversed mxHierarchical layout in mxgraph

Question

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 converted with mxHierarchicalLayout Code snippet:

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

How I want to convert the graph

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?

score 2 · Accepted Answer · answered Feb 15 '19 at 16:44

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

Create reversed mxHierarchical layout in mxgraph

1 Answers1