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

我在调整单元格大小和内置mxGraph布局时遇到了问题。如果我在画布上放置一个单元格，并且尝试调整它的大小，即使是像素，它也会变得很大，例如50000px x 30000px，所以它会拉伸我的整个画布，当然它不可用。如果我从数据库的xml文件加载图形，我可以调整单元格的大小，而不会有任何问题。mxGraph单元格大小调整和图形布局

类似的事情发生在内置的布局。我想要使用紧凑的树形布局（我喜欢它的原因是它使我的整个水平对齐）。当我绘制图形并尝试使用该布局时，我的图形变得很狂野，也拉伸到50000px x 30000px（示例尺寸，但滚动非常小，我几乎可以用鼠标瞄准它）。如果我从数据库的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); 
});

}

有什么想法可能是什么问题？

来源

2013-04-18 Luka Siric

解决方案：

完全图和小区配置从数据库（在该示例中）加载，包括宽度和高度的细胞。

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

它们都必须转换为JavaScript Number对象才能调整大小和布局以正确运行。

来源

2013-05-07 13:54:57

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

回答

相关问题