Multiple layout in mxgraph

Question

I am trying have multiple mxCompactTreeLayout with its layout manager in a single mxgraph canvas. can anyone help me how to achieve this. Below code i have tried to add multiple tree layout to the same canvas.

var layout = new mxCompactTreeLayout(graph, false);
            layout.useBoundingBox = false;
            layout.edgeRouting = false;
            layout.levelDistance = 30;
            layout.nodeDistance = 10;

            var layout2 = new mxCompactTreeLayout(graph, false);
            layout2.useBoundingBox = false;
            layout2.edgeRouting = false;
            layout2.levelDistance = 30;
            layout2.nodeDistance = 10;
            
            if(type == "input"){
                var layoutMgr = new mxLayoutManager(graph);
            
                layoutMgr.getLayout = function(cell)
                {
                    if (cell.getChildCount() > 0)
                    {
                        return layout;              
                    }
                };
            }else{
                var layoutMgrs = new mxLayoutManager(graph);
            
                layoutMgrs.getLayout = function(cell)
                {
                    if (cell.getChildCount() > 0)
                    {
                        return layout2;             
                    }
                };
            }

I want to create 2 tree with 2 roots. to create the tree i have used

TreeNodeShape.prototype = new mxCylinder();
    TreeNodeShape.prototype.constructor = TreeNodeShape;

    // Defines the length of the upper edge segment.
    TreeNodeShape.prototype.segment = 20;

    // Needs access to the cell state for rendering
    TreeNodeShape.prototype.apply = function(state)
    {
        mxCylinder.prototype.apply.apply(this, arguments);
        this.state = state;
    };
    
    TreeNodeShape.prototype.redrawPath = function(path, x, y, w, h, isForeground)
    {
        var graph = this.state.view.graph;
        var hasChildren = graph.model.getOutgoingEdges(this.state.cell).length > 0;
        
        if (isForeground)
        {
            if (hasChildren)
            {
                // Painting outside of vertex bounds is used here
                path.moveTo(w / 2, h + this.segment);
                path.lineTo(w / 2, h);
                path.end();
            }   
        }
        else
        {
            path.moveTo(0, 0);
            path.lineTo(w, 0);
            path.lineTo(w, h);
            path.lineTo(0, h);
            path.close();
        }
    };
    
    mxCellRenderer.registerShape('treenode', TreeNodeShape);

But the second tree doesnt behave as expected. My tree consist of

var w = graph.container.offsetWidth;
                var root = graph.insertVertex(parent, 'treeRoot', 'Root', w/2 - 30, 20, 60, 40);

                var v1 = graph.insertVertex(parent, 'v1', 'Child 1', 0, 0, 60, 40);
                graph.insertEdge(parent, null, '', root, v1);
                
                var v2 = graph.insertVertex(parent, 'v2', 'Child 2', 0, 0, 60, 40);
                graph.insertEdge(parent, null, '', root, v2);

                var v3 = graph.insertVertex(parent, 'v3', 'Child 3', 0, 0, 60, 40);
                graph.insertEdge(parent, null, '', root, v3);

Same way i have created one more tree but it doesnt as expected. below is the screenshot

For the second tree i get