[SOLVED] mxGraph cell resize and graph layout

mxGraph cell resize and graph layout

I'm having problems with resizing cells and built-in mxGraph layouts. If I put a cell on canvas, and I try to resize it, even for a pixel, it grows huge, something like 50000px x 30000px, so it streches my whole canvas, and of course it is unusable. If I load a graph from an xml file from the database, I can resize cells without any problems.

Similar thing happens with the built in layouts. I'd like to use compact tree layout (the reason I like it beacuse it aligns my whole horizontal). When I draw a graph and try to use that layout, my graph goes wild, also streching to 50000px x 30000 px (example dimensions, but the scroll is so tiny I can barely aim it with the mouse). If I load a graph from xml from a database, compact tree layout works perfect. But as soon as I add another cell in it, and try to use compact tree layout again, it goes wild, again.

I use absolute positioning for div which holds the canvas, as same as on the example here (http://jgraph.github.io/mxgraph/javascript/examples/editors/workfloweditor.html)

This is my css and html :

<head>
<style type="text/css">

#graphContainer {
    background: url('../../resources/jgraph/src/images/grid.gif');
    left: 20px;
    right: 20px;
    top: 65px;
    bottom: 20px;
    position: absolute;
    border: 1px solid #F2F2F2;
    white-space: nowrap;
    font-family: Arial;
    font-size: 8pt;
    display: block;
}

</style>
</head>
<body>

<div id="graphContainer"></div>

<script>
    $(document).ready(function(){
        mc.init(document.getElementById('graphContainer'));
    });
</script>
</body>
</html>

And this is my javascript for graph initialization (along with the couple of events, beacuse I'm not sure if they are the problem):

mxConnectionHandler.prototype.connectImage = new mxImage('../../resources/jgraph/src/images/connector.gif', 14, 14);

if (!mxClient.isBrowserSupported()) {
mxUtils.error('Browser is not supported!', 200, false);
} else {


var root = new mxCell();
root.insert(new mxCell());
var model = new mxGraphModel(root);

if (mxClient.IS_QUIRKS)
{
    document.body.style.overflow = 'hidden';
    new mxDivResizer(graphContainer);
}

var editor = new mxEditor();
editor.setGraphContainer(graphContainer);
editor.readGraphModel(model);
var graph = editor.graph;
graph.setConnectable(true);
new mxRubberband(graph);

/* CODE FOR ADDING THE TOOLBAR, excluded from example */


//code for writing out the node name
graph.convertValueToString = function(cell)
{
    if (mxUtils.isNode(cell.value))
    {
        var outValue = cell.value.getAttribute('nodeName');
        if (outValue != null && outValue.length > 0)
        {
            return outValue;
        }
        return '';
    }
    return '';
};

//defining on select event
graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
{
    events.cellSelectionChanged(graph, graph.getSelectionCell());       
});

//triggering the on select event 
events.cellSelectionChanged(graph);

//cells added event
graph.addListener(mxEvent.CELLS_ADDED, function(sender, evt) {

    var vertex = evt.getProperties().cells[0];
    if(vertex.isVertex()){

        var decoder = new mxCodec();
        var nodeModel = decoder.decode(vertex.value);               

        if(nodeModel.type=='node' || nodeModel.type=='branch'){
            utils.changeCellAttribute(vertex, 'nodeName', 'Node_' + vertex.id);                 
        }else if(nodeModel.type=='start'){
            utils.changeCellAttribute(vertex, 'nodeName', 'START');
        }else if(nodeModel.type=='end'){
            utils.changeCellAttribute(vertex, 'nodeName', 'END');                   
        }else if(nodeModel.type=='form'){
            utils.changeCellAttribute(vertex, 'nodeName', 'Form');                  
        }

    }
});

//on connect event 
graph.connectionHandler.addListener(mxEvent.CONNECT, function(sender, evt){  
    var model = graph.getModel();
    var edge = evt.getProperty('cell');  
    var source = model.getTerminal(edge, true);  
    var target = model.getTerminal(edge, false);
});

}

Any thoughts what the problem might be?

Solution

Solution:

Complete graph and cell configuration is loaded from the database (in this example), including the width and height for the cells.

The problem was adding toolbar items for certain cell types, more precise, dropped cell default width and height. As I said we are loading the configuration from the database, it is completely string-ified, so were the width and height.

They both had to be cast to JavaScript Number object for resize and layout to behave properly.