这是我正在构建的流程图编辑器的jsFiddle.
这是使用"添加决策"+"添加任务",连接和移动元素可以轻松创建的示例.
现在是困难的部分:我希望能够保存并加载确切的流程图.为此,我开始在Stackoverflow 上使用类似的线程.
为此,我添加了"保存"和"加载"按钮,用于将流程图导出/导入JSON(在保存后显示在jsFiddle中的textform中 - 相同的textform可用于加载).
该保存功能:
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, "位置▲":8},{ "BLOCKID": "端点", "NODETYPE":"终点", "位X":310, "位置▲":385},{ "块标识": "taskcontainer1", "NODETYPE": "任务", "位X":381, "位置▲":208},{ "块标识" : "decisioncontainer2", "NODETYPE": "决定", "位X":261, "位置▲":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中提取它?