javascript 在 jsPlumb 上保存和加载流程图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7405637/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 00:01:22  来源:igfitidea点击:

Save and load a flowchart on jsPlumb

javascriptjqueryjquery-pluginsjsplumb

提问by Diogo Cardoso

What's the best approach to save and load an flowchart on jsPlumb?

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

采纳答案by lukas.pukenis

I managed to save the chart by simply having all the elements inside an array of objects, where each object has sourceand target nodes, x, y coordinates.

我设法通过简单地将所有元素放在一个对象数组中来保存图表,其中每个对象都有目标节点,x, y 坐标

When saving, simply do JSON.stringify(whole_object), and if loading, simply JSON.parse()and manually position the nodes as well as connect them.

保存时,只需执行JSON.stringify(whole_object),如果加载,只需JSON.parse()手动定位节点并连接它们。

回答by sergi0

My solution save and load jsPlumb:

我的解决方案保存并加载 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);
}

UPD Demo: http://jsfiddle.net/Rra6Y/137/

UPD 演示:http: //jsfiddle.net/Rra6Y/137/

Note: if demo does not work in JsFiddle, make sure it points to an existing jsPlumb link (links are listed in "External Resources" JsFiddle menu item

注意:如果演示在 JsFiddle 中不起作用,请确保它指向现有的 jsPlumb 链接(链接列在“外部资源”JsFiddle 菜单项中

回答by radtek

My save functionality does a bit more than just save the x, y position of the element and its connections. I also added saving a connection Label overlay as well as custom text for each element. You can tailor this solution as per your requirements but here it is basically:

我的保存功能不仅仅是保存元素的 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;
    }

I initiate all this when the user hits the save button, an ajax call is made back to the server, in this case Django is intercepting the ajax request and saves the data to the database.

当用户点击保存按钮时,我启动了所有这些,一个 ajax 调用返回到服务器,在这种情况下,Django 正在拦截 ajax 请求并将数据保存到数据库中。

//ajax call when save button pressed $save_btn.click(function() {

//按下保存按钮时调用ajax $save_btn.click(function() {

//drawn elements
var d_elements = IterateDrawnElements();
var d_conns = IterateConnections();
var d_name =$('#id_diagram_name').val();

$.ajax({
    url : ".",
    type : "POST",
    dataType: "json",
    data : {
        drawn_elements: JSON.stringify(d_elements),
        conns: JSON.stringify(d_conns),
        diagram_name: d_name,
        csrfmiddlewaretoken: '{{ csrf_token }}'
    },
    success: function (result) {

        if (result.success == true){
            save_status.html(result.message)
        }
        //console.log(JSON.stringify(result));
        $save_btn.attr('disabled','disabled');
        if (result.old_name != false){
            //alert()
            $('#id_diagram_name').val(result.old_name)
        }
    },
    error: function(xhr, textStatus, errorThrown) {
        alert("Please report this error: "+errorThrown+xhr.status+xhr.responseText);
    }
});
//return false; // always return error?

});

});

To load all this up is even easier and there are many ways you can do this. In Django you can just generate the html straight in your template as well as the js for the connections or you can create a JSON object in javascript for everything and then have javascript draw it all based on the array. I used jquery for this.

加载所有这些甚至更容易,并且有很多方法可以做到这一点。在 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 %}

You can greatly simplify this but mine also gets a background for the element, as well as label and the shape of the element to use with perimeter anchors. This solution works and is tested. I'll release an open source Djago application for this soon on PyPi.

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

回答by radtek

I recently wrote this blog post about why jsPlumb doesn't have a save function (and what I recommend you do):

我最近写了这篇关于为什么 jsPlumb 没有保存功能的博客文章(以及我建议你做的事情):

http://jsplumb.tumblr.com/post/11297005239/why-doesnt-jsplumb-offer-a-save-function

http://jsplumb.tumblr.com/post/11297005239/why-doesnt-jsplumb-offer-a-save-function

...maybe someone will find it useful.

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

回答by JasonMichael

I'm using YUI with it. I'm saving the position of each box item being connected in a table. I them have a separate table the stores a parent to child relationship between the items, which is used to determine the lines jsPlumb should draw. I determine this using a selection process in which the first item selected is the parent, and all other items are children. When the "connect" button is clicked, the parent/child selection of the items is cleared. I also toggle this if you click the selected parent - it clear the child selections as well.

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