Question

我在调整单元格大小和内置mxGraph布局方面遇到了问题。如果我在画布上放置一个单元格，并且我尝试调整它的大小，即使对于一个像素，它也会变大，类似于50000px x 30000px，所以它会拉伸我的整个画布，当然它无法使用。如果我从数据库中加载xml文件中的图形，我可以毫无问题地调整单元格大小。

内置布局也会发生类似的事情。我想使用紧凑的树形布局（我喜欢它的原因，因为它对齐我的整个水平）。当我绘制图形并尝试使用该布局时，我的图形变得狂野，也拉伸到50000px x 30000像素（示例尺寸，但滚动非常小，我几乎无法用鼠标瞄准它）。如果我从数据库中加载xml的图形，则紧凑的树形布局非常有效。但是当我在其中添加另一个单元格并再次尝试使用紧凑树形布局时，它又会变得狂野。

我对包含画布的div使用绝对定位，与此处的示例相同（http://jgraph.github.io/mxgraph/javascript/examples/editors/workfloweditor.html）

这是我的CSS和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>

这是我用于图形初始化的javascript（以及几个事件，因为我不确定它们是否是问题）：

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);
});

}

任何想法可能是什么问题？

Answer 1

解决方案：

从数据库（在此示例中）加载完整的图形和单元格配置，包括单元格的宽度和高度。

问题是为某些单元格类型添加工具栏项，更精确，删除单元格默认宽度和高度。正如我所说，我们正在从数据库加载配置，它是完全字符串，宽度和高度也是如此。

他们都必须被强制转换为JavaScript Number对象才能调整大小，布局才能正常运行。

mxGraph单元格调整大小和图形布局

1 个答案: