javascript 保存和加载 jsPlumb 流程图，包括精确的锚点和连接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20620719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Save and Load jsPlumb flowchart including exact anchors and connections
提问by hbit
This is the jsFiddleof the flowchart editor I am building.
这是我正在构建的流程图编辑器的jsFiddle。
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 threadhere at Stackoverflow.
现在是困难的部分：我希望能够保存和加载准确的流程图。为此，我从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).
为此，我添加了“保存”和“加载”按钮，用于将流程图导出/导入 JSON（保存后以 jsFiddle 中的文本形式显示 - 可以使用相同的文本形式进行加载）。
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:
上面示例的结果 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":"con_46","pageSourceId":"startpoint","pageTargetId":"decisioncontainer2"}],"numberOfElements":2}
{"nodes":[{"blockId":"startpoint","nodetype":"startpoint","positionX":273,"positionY":8},{"blockId":"endpoint","nodetype":"端点","positionX":310,"positionY":385},{"blockId":"taskcontainer1","nodetype":"task","positionX":381,"positionY":208},{"blockId" :"decisioncontainer2","nodetype":"decision","positionX":261,"positionY":103}],"connection":[{"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:
然而，锚点和连接的确切位置丢失了。同样的例子，删除元素然后加载导出的 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?
我的问题是：我需要为整个流程图设计存储哪些关于锚点/连接器位置的信息，以及如何从（并再次加载到）jsPlumb 中提取它？
回答by Greg Ross
See this JSFiddlefor a solution.
请参阅此JSFiddle以获取解决方案。
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.
您需要按如下方式保存锚点详细信息。这符合此处定义的 Anchor 表示。注意双重嵌套以避免地图上的 JQuery 自动展平。
$.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.
请注意，此解决方案不会保留端点详细信息，包括端点的形状和类型。它仅根据您的要求保留锚点详细信息。
