Javascript 在jsPlumb上保存并加载流程图

保存和加载流程图的最佳方法是什么？

我正在使用YUI。我正在保存表中连接的每个长方体项目的位置。我为它们提供了一个单独的表，该表存储了项目之间的父子关系，用于确定jsPlumb应该绘制的线。我使用一个选择过程来确定这一点，在这个过程中，选择的第一个项目是父项，而所有其他项目都是子项。单击“连接”按钮时，将清除项目的父/子选择。如果您单击所选的父项，我也会切换此选项-它也会清除子项选择。

我最近写了一篇关于为什么jsPlumb没有保存功能（以及我建议您做什么）的博客文章：

---

…也许有人会发现它很有用。

我只需将所有元素放在一个对象数组中即可保存图表，其中每个对象都有源节点和目标节点，x，y坐标

---

保存时，只需执行

JSON.stringify（整个对象）

，如果加载，只需

JSON.parse（）

，手动定位节点并连接它们。

我的解决方案保存并加载jsPlumb:

function Save() {
    $(".node").resizable("destroy");
    Objs = [];
    $('.node').each(function() {
        Objs.push({id:$(this).attr('id'), html:$(this).html(),left:$(this).css('left'),top:$(this).css('top'),width:$(this).css('width'),height:$(this).css('height')});
    });
    console.log(Objs);
}


function Load() {
    var s="";
    for(var i in Objs) {
        var o = Objs[i];
        console.log(o);
        s+='<div id="'+ o.id+'" class="node" style="left:'+ o.left+'; top:'+ o.top+'; width:'+ o.width +'; height:'+ o.height +' "> '+ o.html+'</div>';
    }
    $('#main').html(s);
}

函数保存（）{
$（“.node”）。可调整大小（“销毁”）；
Objs=[]；
$（'.node'）。每个（函数（）{
Objs.push（{id:$（this.attr（'id'）、html:$（this.html（）、left:$（this.css（'left'）、top:$（this.css（'top'）、width:$（this.css（'height'））、height:$（this.css（'height'））；
});
console.log（Objs）；
}
函数加载（）{
var s=“”；
用于（Objs中的var i）{
var o=Objs[i]；
控制台日志（o）；
s+=''+o.html+''；
}
$（'#main'）.html；
}

UPD演示：

---

注意：如果演示在JSFIDLE中不起作用，请确保它指向现有的jsPlumb链接（链接列在“外部资源”中）jsidle菜单项

我的保存功能不仅仅保存元素及其连接的x、y位置。我还添加了保存连接标签覆盖以及每个元素的自定义文本。您可以根据需要定制此解决方案，但基本上是：

   //save functionality
    function IterateDrawnElements(){  //part of save
        var dict = {};
        $('#id_diagram_container').children('div.window').each(function () {
            var pos = $(this).position()
            var diagram_label = $(this).children('div.asset-label').children('div.asset-diagram-label').text()
            if (diagram_label == null || diagram_label == ''){
                diagram_label='';
            }
            dict[this.id] = [pos.left, pos.top, diagram_label];
        });
        return dict;
    }
    function IterateConnections(){  //part of save
        var list = [];
        var conns = jsPlumb.getConnections()
        for (var i = 0; i < conns.length; i++) {
            var source = conns[i].source.id;
            var target = conns[i].target.id;
            try{
                var label = conns[i].getOverlay("label-overlay").labelText;
            }
            catch(err) {
                label = null
            }
            //list.push([source, target])
            if (source != null && target != null){
                list.push([source, target, label]);
            };
        }
        return list;
    }

}))

加载所有这些更容易，有很多方法可以做到这一点。在Django中，您可以直接在模板中生成html以及用于连接的js，或者您可以在javascript中为所有内容创建JSON对象，然后让javascript基于数组绘制所有内容。为此，我使用jquery

//js & connections load

var asset_conns = [
    {% for conn in diagram_conns  %}
    [ {{ conn.source.id }}, {{ conn.target.id }}, '{{ conn.name }}' ],
    {% endfor %}
]


// Takes loaded connections and connects them
for (var i = 0; i< asset_conns.length; i++){
    var source = asset_conns[i][0].toString();
    var target = asset_conns[i][1].toString();
    var label = asset_conns[i][2];
    var c = jsPlumb.connect({source: source, target: target, detachable:true, reattach: true });  //on init already know what kind of anchor to use!
    if (label != null && label != 'None'){
        c.addOverlay([ "Label", { label: label,  id:"label-overlay"} ]);
    }
}

//html right into django template to draw elements, asset element interchangeable terms

{% for element in drawn_elements %}
    <div id="{{ element.asset.id }}" class="window" style="left:{{ element.left }}px;top:{{ element.top }}px;background-image: url('{% static element.asset.asset_mold.image.url %}'); width: {{ element.asset.asset_mold.image.width }}px;height: {{ element.asset.asset_mold.image.height }}px;">
        <div class="asset-label" id="label-{{ element.asset.id }}">
            {#{{ element.asset }}#}<a class="lbl-link" id="lbl-link-{{ element.asset.id }}" href="{{ element.asset.get_absolute_url }}">{{ element.asset }}</a>
            <div class='asset-diagram-label' id="lbl-{{ element.asset.id }}">{% if element.asset.diagram_label  %}{{ element.asset.diagram_label }}{% endif %}</div>
        </div>
        <div class='ep' id="ep-{{ element.asset.id }}"></div>
    </div>
{% endfor %}

//js&连接加载
var资产连接=[
{图中conn的%u\conns%}
[{{conn.source.id}，{{conn.target.id}，{{conn.name}}}，]，
{%endfor%}
]
//获取加载的连接并连接它们
对于（变量i=0；i

---

您可以极大地简化此操作，但我的也可以获得元素的背景，以及用于周边锚定的元素的标签和形状。此解决方案有效并经过测试。我将很快在PyPi上发布一个开源的Djago应用程序。

人们正在寻找的是一种简单的方式：将此图表持久化为xml/json，或者以其他方式保存它，以便轻松解析和映射以更新数据模型。。。这似乎是一个明显的可用性问题。似乎你在这里概述的内容会让我采取很多恼人的额外步骤，以我想要的方式到达那里。嗨，谢谢你的提示。我只是尝试用jsplumb创建一个在线有限状态机设计器，为了正确地保存/加载，我需要传递比添加到数组中的html更多的数据。比如“州名”、“连接到”等等。你知道，实际上是为了保存我的“状态机”，而不仅仅是我的“绘图”。也许你知道怎么做吗？那太好了！JSFIDLE链接不起作用。无法拖动且未创建任何连接。控制台中存在保存、加载和清除错误。请共享一些代码好吗？我不知道如何加载和连接它们。哦。。那是很久以前的事了，但据我记忆所及，只是通过JSON.stringify（objectCollection）保存数据。有关系、位置等。现在，当您想要加载时，执行JSON.parse（generatedStrnig），然后手动遍历对象中的每个节点，定位它（使用CSS）并连接它们（使用jsPlumb API）。对不起，我记不清了：）

//js & connections load

var asset_conns = [
    {% for conn in diagram_conns  %}
    [ {{ conn.source.id }}, {{ conn.target.id }}, '{{ conn.name }}' ],
    {% endfor %}
]


// Takes loaded connections and connects them
for (var i = 0; i< asset_conns.length; i++){
    var source = asset_conns[i][0].toString();
    var target = asset_conns[i][1].toString();
    var label = asset_conns[i][2];
    var c = jsPlumb.connect({source: source, target: target, detachable:true, reattach: true });  //on init already know what kind of anchor to use!
    if (label != null && label != 'None'){
        c.addOverlay([ "Label", { label: label,  id:"label-overlay"} ]);
    }
}

//html right into django template to draw elements, asset element interchangeable terms

{% for element in drawn_elements %}
    <div id="{{ element.asset.id }}" class="window" style="left:{{ element.left }}px;top:{{ element.top }}px;background-image: url('{% static element.asset.asset_mold.image.url %}'); width: {{ element.asset.asset_mold.image.width }}px;height: {{ element.asset.asset_mold.image.height }}px;">
        <div class="asset-label" id="label-{{ element.asset.id }}">
            {#{{ element.asset }}#}<a class="lbl-link" id="lbl-link-{{ element.asset.id }}" href="{{ element.asset.get_absolute_url }}">{{ element.asset }}</a>
            <div class='asset-diagram-label' id="lbl-{{ element.asset.id }}">{% if element.asset.diagram_label  %}{{ element.asset.diagram_label }}{% endif %}</div>
        </div>
        <div class='ep' id="ep-{{ element.asset.id }}"></div>
    </div>
{% endfor %}