jsplumb设置锚点,保存并加载jsPlumb流程图，包括精确的锚点和连接

This is the jsFiddle of the flowchart editor I am building.

This is an example of what can be easily created with "Add Decision" + "Add Task", connecting and moving the elements.

Now for the hard part: I want to be able to save and load the exact flowchart. For this I got started based with a similar thread here at Stackoverflow.

For this I added the "Save" and "Load" buttons that export/import the flowchart to/from JSON (shown in a textform in the jsFiddle after save - same textform can be used for loading).

The save function:

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

}

The resulting JSON of the example above:

{"nodes":[{"blockId":"startpoint","nodetype":"startpoint","positionX":273,"positionY":8},{"blockId":"endpoint","nodetype":"endpoint","positionX":310,"positionY":385},{"blockId":"taskcontainer1","nodetype":"task","positionX":381,"positionY":208},{"blockId":"decisioncontainer2","nodetype":"decision","positionX":261,"positionY":103}],"connections":[{"connectionId":"con_18","pageSourceId":"decisioncontainer2","pageTargetId":"taskcontainer1"},{"connectionId":"con_25","pageSourceId":"taskcontainer1","pageTargetId":"endpoint"},{"connectionId":"con_32","pageSourceId":"decisioncontainer2","pageTargetId":"endpoint"},{"connectionId":"con_46","pageSourceId":"startpoint","pageTargetId":"decisioncontainer2"}],"numberOfElements":2}

With that I am able to save the position of the elements as well as part of the information of the connections.

Here the load function:

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;

}

However, the exact position of the anchors and connections are lost. Same example again, the result after deleting the elements and then loading the exported JSON:

This comes not as a big surprise as I have not yet stored the information. But I am stuck at this point.

My question is: which information regarding the anchors/connectors position do I need to store for the whole flowchart design and how I can extract it from (& load into it again) jsPlumb?

解决方案

See this JSFiddle for a solution.

You need to save the anchor details as follows. This conforms to the Anchor representation defined here. Note the double nesting to avoid the JQuery auto-flatten on the map.

$.each(jsPlumb.getConnections(), function (idx, connection) {

connections.push({

connectionId: connection.id,

pageSourceId: connection.sourceId,

pageTargetId: connection.targetId,

anchors: $.map(connection.endpoints, function(endpoint) {

return [[endpoint.anchor.x,

endpoint.anchor.y,

endpoint.anchor.orientation[0],

endpoint.anchor.orientation[1],

endpoint.anchor.offsets[0],

endpoint.anchor.offsets[1]]];

})

});

});

...and load them, as follows:

$.each(connections, function( index, elem ) {

var connection1 = jsPlumb.connect({

source: elem.pageSourceId,

target: elem.pageTargetId,

anchors: elem.anchors

});

});

Note that this solution does not preserve end-point details including the shape and type of end-points. It only preserves the anchor details, as you requested.