У меня возникают проблемы с изменением размера ячеек и встроенными макетами mxGraph. Если я поместил ячейку на холст, и я попытаюсь изменить ее размер, даже для пикселя, он станет огромным, что-то вроде 50000 пикселей x 30000 пикселей, поэтому он растягивает весь мой холст, и, конечно, он непригоден. Если я загружаю график из XML-файла из базы данных, я могу без проблем изменять размеры ячеек.mxGraph изменение размера ячейки и схема графика
Аналогичная ситуация происходит со встроенными макетами. Я хотел бы использовать компактный макет дерева (причина, по которой мне это нравится, выравнивает всю мою горизонталь). Когда я рисую график и пытаюсь использовать этот макет, мой график становится диким, а также растягивается до 50000 пикселей 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 для графа инициализации (вместе с парой событий, beacuse Я не уверен, если они проблемы):
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);
});
}
Любые мысли, что может быть проблемой?