保存和加载jsPlumb流程图，包括准确的锚点和连接
这是我正在构建的流程图编辑器的jsFiddle。
这是一个使用"Add Decision“+ "Add Task”连接和移动元素可以轻松创建的示例。
现在最难的部分是:我希望能够保存和加载确切的流程图。为此，我从Stackoverflow这里的一个similar thread开始。
为此，我添加了“保存”和“加载”按钮，用于将流程图导出到JSON或从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结果：
{"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”：“”，“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中提取(&再次加载)这些信息？
https://stackoverflow.com/questions/20620719
复制相似问题