如何保存和加载jsplumb流程图，包括精确的锚和连接？

— title: 如何保存和加载jsplumb流程图，包括精确的锚和连接？ date: 2021-08-27 15:42:05 categories:

IT技术
编程语言
js tags:
IT技术
编程语言
js

摘要：如何保存和加载jsplumb流程图，包括精确的锚和连接？ - 问答 - 云+社区 - 腾讯云

如何保存和加载jsplumb流程图，包括精确的锚和连接？

这是我正在建立的流程编辑器的jsFiddle。这是使用“添加决定”+“添加任务”，连接和移动元素可以轻松创建的示例。

现在的难点在于：我希望能够保存并加载确切的流程图。为此

如何保存和加载jsplumb流程图，包括精确的锚和连接？

如何保存和加载jsplumb流程图，包括精确的锚和连接？ - 问答 - 云+社区 - 腾讯云

如何保存和加载jsplumb流程图，包括精确的锚和连接？

这是我正在建立的流程编辑器的jsFiddle。这是使用“添加决定”+“添加任务”，连接和移动元素可以轻松创建的示例。

现在的难点在于：我希望能够保存并加载确切的流程图。为此，我开始在Stackoverflow中使用类似的线程。为此，我添加了“保存”和“加载”按钮，从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， “位置▲”：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）？提问于 2018-02-02

1 个回答

热门排序用户回答回答于 2018-02-02 你需要按以下方式保存锚点详细信息。这符合定义的锚表示。这里注意双嵌套，以避免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]]];
      })
    });
  });

然后按以下方式装载：

    $.each(connections, function( index, elem ) {
     var connection1 = jsPlumb.connect({
      source: elem.pageSourceId,
      target: elem.pageTargetId,
      anchors: elem.anchors
    });
  });

请注意，此解决方案不保留端点细节，包括端点的形状和类型。它只保留锚的细节，如你所要求的。