Draw2d.js: Добавить редактируемый ярлык к существующим соединениям через doubleclick

Question

Я хочу создать блок-схему с помощью Draw2D. Все, что мне нужно, это создать несколько ящиков с редактируемым контентом, соединения с редактируемыми метками и чтение/сохранение диаграммы в виде JSON-массива. Большинство из этих вещей уже готовы, как вы можете увидеть здесь:

JS:

var Element = draw2d.shape.basic.Text.extend({ 
    NAME: "Element", 
    init: function (attr) { 
     this._super(attr); 
     this.installEditor(new draw2d.ui.LabelInplaceEditor()); 

     this.createPort("hybrid", new draw2d.layout.locator.TopLocator()); 
     this.createPort("hybrid", new draw2d.layout.locator.BottomLocator()); 
     this.createPort("hybrid", new draw2d.layout.locator.InputPortLocator()); 
     this.createPort("hybrid", new draw2d.layout.locator.OutputPortLocator()); 
    } 
}); 

$(window).load(function() { 
    var canvas = new draw2d.Canvas("gfx_holder").installEditPolicy(new draw2d.policy.canvas.SnapToGridEditPolicy()); 

    var jsonDocument = $("#json").text(); 
    var reader = new draw2d.io.json.Reader(); 
    reader.unmarshal(canvas, jsonDocument); 

    $("#add").click(function (e) { // Add a new rectangle 
     var element = new Element({ 
      text:"Editable content", 
      width: 200, 
      radius: 3, 
      bgColor: '#ffffff', 
      stroke: 1, 
      color: '#d7d7d7', 
      padding: 7 
     }); 
     canvas.add(element, 10, 10); 
    }); 

    $("#save").click(function (e) { // Save flowchart 
    var svg = $("#gfx_holder").html(); 
    var writer = new draw2d.io.json.Writer(); 
    writer.marshal(canvas,function(json){ 
     var jsonarray = JSON.stringify(json, null, 2); 
     // Save jsonarray to DB 
     }); 
    }); 
}); 

HTML:

<button id="add">Add Element</button><button id="save">Save</button><div onselectstart="javascript:/*IE8 hack*/return false" id="gfx_holder" style="width:500px; height:500px;-webkit-tap-highlight-color: rgba(0,0,0,0);" class="ui-widget-content" ></div> 
<pre id="json">[ 
    { 
    "type": "Element", 
    "id": "cd56129b-98dd-5d3d-527e-132033694c85", 
    "x": 30, 
    "y": 80, 
    "width": 100, 
    "height": 27.421875, 
    "alpha": 1, 
    "userData": {}, 
    "cssClass": "Element", 
    "bgColor": "#FFFFFF", 
    "color": "#D7D7D7", 
    "stroke": 1, 
    "radius": 3, 
    "text": "First Box", 
    "outlineStroke": 0, 
    "outlineColor": "none", 
    "fontSize": 12, 
    "fontColor": "#080808", 
    "fontFamily": null 
    }, 
    { 
    "type": "Element", 
    "id": "2685c6bb-ce13-2af4-daa3-144839601e56", 
    "x": 170, 
    "y": 60, 
    "width": 100, 
    "height": 27.421875, 
    "alpha": 1, 
    "userData": {}, 
    "cssClass": "Element", 
    "bgColor": "#FFFFFF", 
    "color": "#D7D7D7", 
    "stroke": 1, 
    "radius": 3, 
    "text": "Second Box", 
    "outlineStroke": 0, 
    "outlineColor": "none", 
    "fontSize": 12, 
    "fontColor": "#080808", 
    "fontFamily": null 
    }, 
    { 
    "type": "draw2d.Connection", 
    "id": "b7e92769-5d37-b859-32d4-0f41910b691b", 
    "alpha": 1, 
    "userData": {}, 
    "cssClass": "draw2d_Connection", 
    "stroke": 1, 
    "color": "#1B1B1B", 
    "outlineStroke": 0, 
    "outlineColor": "none", 
    "policy": "draw2d.policy.line.LineSelectionFeedbackPolicy", 
    "router": "draw2d.layout.connection.ManhattanConnectionRouter", 
    "radius": 2, 
    "source": { 
     "node": "cd56129b-98dd-5d3d-527e-132033694c85", 
     "port": "hybrid0" 
    }, 
    "target": { 
     "node": "2685c6bb-ce13-2af4-daa3-144839601e56", 
     "port": "hybrid0" 
    } 
    } 
]</pre> 

JSFiddle:http://jsfiddle.net/6pbjh3s6/4/ (Unfortunatly Безразлично» t работа в JSFiddle, но я не знаю, что не так)

Проблема: Моя проблема заключается в добавлении редактируемых меток в любые соединения, т. Е. Двойным щелчком мыши по существующей метке.

Draw2D.js API:http://draw2d.org/draw2d_touch/jsdoc_5/#!/api

Answer 1

Вы можете добавить редактируемые соединения таким образом (см пример на Draw2D-сайте):

var LabelConnection = draw2d.Connection.extend({ 
    init:function(attr) 
    { 
     this._super(attr); 
     this.label = new draw2d.shape.basic.Label({ text:"I'm a Label" }); 
     this.add(this.label, new draw2d.layout.locator.ManhattanMidpointLocator());  
    } 
}); 

Если вам необходимо использовать редактор для метки , вы должны добавить:

this.label.installEditor(new draw2d.ui.LabelInplaceEditor()); 

Так просто сделать событие JQuery как:

$(document).on('dblclick', '.draw2d_Connection', function() { 
// Apply the new labled connection to the selected one 
});