ЭтоjsFiddle редактора блок-схем, который я строю.

Это пример того, что можно легко создать с помощьюДобавить решение "+"Добавить задачу ", соединяя и перемещая элементы.

Теперь самое сложное: я хочу сохранить и загрузить точную блок-схему. Для этого я начал на основеаналогичная тема здесь, в Stackoverflow.

Для этого я добавилСохранить" а также "Load» кнопки, которые экспортируют / импортируют потоковую диаграмму в / из JSON (отображаются в текстовой форме в jsFiddle после сохранения - та же самая текстовая форма может использоваться для загрузки).

функция сохранения:

function saveFlowchart(){
            var nodes = []
            $(".node").each(function (idx, elem) {
            var $elem = $(elem);
            var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
            console.log('endpoints of '+$elem.attr('id'));
            console.log(endpoints);
                nodes.push({
                    blockId: $elem.attr('id'),
                    nodetype: $elem.attr('data-nodetype'),
                    positionX: parseInt($elem.css("left"), 10),
                    positionY: parseInt($elem.css("top"), 10)
                });
            });
            var connections = [];
            $.each(jsPlumb.getConnections(), function (idx, connection) {
                connections.push({
                    connectionId: connection.id,
                    pageSourceId: connection.sourceId,
                    pageTargetId: connection.targetId
                });
            });

            var flowChart = {};
            flowChart.nodes = nodes;
            flowChart.connections = connections;
            flowChart.numberOfElements = numberOfElements;

            var flowChartJson = JSON.stringify(flowChart);
            //console.log(flowChartJson);

            $('#jsonOutput').val(flowChartJson);
        }

Результирующий JSON примера выше: {"

узлы»: [{»blockId ":"точка отсчета","NodeType ":"точка отсчета","Позиция X»: 273,»Позиция Y»: 8}, {»blockId ":"конечная точка «»NodeType ":"конечная точка «»Позиция X»: 310,»Позиция Y»: 385}, {»blockId ":"taskcontainer1" ,»NodeType ":"задача «»Позиция X»: 381,»Позиция Y»: 208}, {»blockId ":"decisioncontainer2" ,»NodeType ":"решение","Позиция X»: 261,»Позиция Y»: 103}],»соединения»: [{»ConnectionID ":"con_18" ,»pageSourceId ":"decisioncontainer2" ,»pageTargetId ":"taskcontainer1"}, {»ConnectionID ":"con_25" ,»pageSourceId ":"taskcontainer1" ,»pageTargetId ":"конечная точка»}, {»ConnectionID ":"con_32" ,»pageSourceId ":"decisioncontainer2" ,»pageTargetId ":"конечная точка»}, {»ConnectionID ":"con_46" ,»pageSourceId ":"точка отсчета","pageTargetId ":"decisioncontainer2"}],»numberOfElements»: 2}

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

function loadFlowchart(){
            var flowChartJson = $('#jsonOutput').val();
            var flowChart = JSON.parse(flowChartJson);
            var nodes = flowChart.nodes;
            $.each(nodes, function( index, elem ) {
                if(elem.nodetype === 'startpoint'){
                    repositionElement('startpoint', elem.positionX, elem.positionY);
                }else if(elem.nodetype === 'endpoint'){
                    repositionElement('endpoint', elem.positionX, elem.positionY);
                }else if(elem.nodetype === 'task'){
                    var id = addTask(elem.blockId);
                    repositionElement(id, elem.positionX, elem.positionY);
                }else if(elem.nodetype === 'decision'){
                    var id = addDecision(elem.blockId);
                    repositionElement(id, elem.positionX, elem.positionY);
                }else{

                }
            });

            var connections = flowChart.connections;
            $.each(connections, function( index, elem ) {
                 var connection1 = jsPlumb.connect({
                    source: elem.pageSourceId,
                    target: elem.pageTargetId,
                    anchors: ["BottomCenter", [0.75, 0, 0, -1]]

                });
            });

            numberOfElements = flowChart.numberOfElements;
        }

Однако точное положение анкеров и соединений потеряно. Снова тот же пример, результат после удаления элементов и последующей загрузки экспортированного JSON:

Это не является большим сюрпризом, поскольку я еще не сохранил информацию. Но я застрял в этой точке.

Мой вопрос: какую информацию о положении якорей / разъемов мне нужно сохранить для всей схемы блок-схемы и как я могу извлечь ее из (& загрузить в него снова) jsPlumb?