Lưu và tải một sơ đồ trên jsPlumb

Question

Cách tiếp cận tốt nhất để lưu và tải một sơ đồ trên jsPlumb là gì?

Answer 1

tôi quản lý để tiết kiệm biểu đồ bằng cách đơn giản là có tất cả các yếu tố bên trong một mảng của các đối tượng, trong đó mỗi đối tượng có nguồn và nút mục tiêu, x, y phối.

Khi lưu, chỉ cần thực hiện JSON.stringify(whole_object) và nếu tải, chỉ cần JSON.parse() và định vị thủ công các nút cũng như kết nối chúng.

Answer 2

Tôi đang sử dụng YUI với nó. Tôi đang lưu vị trí của mỗi mục hộp được kết nối trong một bảng. Tôi họ có một bảng riêng biệt các cửa hàng một phụ huynh để mối quan hệ con giữa các mục, được sử dụng để xác định các dòng jsPlumb nên vẽ. Tôi xác định điều này bằng cách sử dụng quy trình lựa chọn trong đó mục đầu tiên được chọn là phụ huynh và tất cả các mục khác là trẻ em. Khi nút "kết nối" được nhấp, lựa chọn cha mẹ/con của các mục sẽ bị xóa. Tôi cũng chuyển đổi điều này nếu bạn nhấp vào phụ huynh đã chọn - nó cũng xóa các lựa chọn con.

Answer 3

Gần đây tôi đã viết bài đăng blog về việc tại sao jsPlumb không có chức năng tiết kiệm (và những gì tôi khuyên bạn nên làm):

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

... có lẽ ai đó sẽ tìm thấy nó hữu ích.

Answer 4

Giải pháp của tôi tiết kiệm và tải 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/

Lưu ý: nếu bản demo không hoạt động trong JsFiddle, chắc chắn rằng nó trỏ đến một liên kết jsPlumb hiện (liên kết được liệt kê trong "Tài nguyên bên ngoài" Mục menu JsFiddle

Answer 5

Chức năng lưu của tôi không nhiều hơn một chút so với việc lưu vị trí x, y của phần tử và các kết nối của nó. Yo u có thể chỉnh giải pháp này theo yêu cầu của bạn, nhưng ở đây nó là cơ bản:

//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; 
    } 

tôi bắt đầu tất cả điều này khi người dùng chạm vào nút lưu, một cuộc gọi ajax được làm lại cho máy chủ, trong trường hợp này Django được chặn yêu cầu ajax và lưu dữ liệu vào cơ sở dữ liệu.

// gọi ajax khi nút tiết kiệm ép $ 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? 

});

Để tải tất cả việc này trở nên dễ dàng hơn và có nhiều cách bạn có thể thực hiện việc này. Trong Django bạn chỉ có thể tạo html thẳng trong mẫu của bạn cũng như các js cho các kết nối hoặc bạn có thể tạo một đối tượng JSON trong javascript cho tất cả mọi thứ và sau đó có javascript vẽ tất cả dựa trên mảng. Tôi đã sử dụng jquery cho việc này.

//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 %} 

Bạn có thể đơn giản hóa điều này nhưng tôi cũng nhận được nền tảng cho phần tử, cũng như nhãn và hình dạng của phần tử để sử dụng với các vành đai chu vi. Giải pháp này hoạt động và được kiểm tra. Tôi sẽ phát hành một ứng dụng mã nguồn mở Djago cho điều này sớm trên PyPi.