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
Save and load a flowchart on jsPlumb
提问by Diogo Cardoso
采纳答案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 应该绘制的线。我使用一个选择过程来确定这一点,其中选择的第一个项目是父项,所有其他项都是子项。单击“连接”按钮时,将清除项目的父/子选择。如果您单击选定的父项,我也会切换此选项 - 它也会清除子项选择。