Изменение размера ячейки mxGraph и расположение графика

У меня проблемы с изменением размеров ячеек и встроенных макетов mxGraph. Если я помещаю ячейку на холст и пытаюсь изменить ее размер, даже для пикселя, он становится огромным, например, 50000px x 30000px, поэтому он растягивает весь холст и, конечно, его невозможно использовать. Если я загружаю график из XML-файла из базы данных, я могу изменить размеры ячеек без каких-либо проблем.

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

}

Есть мысли, в чем может быть проблема?

Источник

1 ответ

Решение

Решение:

Полный график и конфигурация ячеек загружаются из базы данных (в этом примере), включая ширину и высоту ячеек.

Проблема заключалась в добавлении элементов панели инструментов для определенных типов ячеек, точнее, по умолчанию ширина и высота отброшенных ячеек. Как я уже сказал, мы загружаем конфигурацию из базы данных, она полностью строковая, как и ширина и высота.

Они оба должны были быть приведены к объекту JavaScript Number для изменения размера и макета для правильного поведения.

Источник
Другие вопросы по тегам