Draw2d.js: 通过双击为现有连接添加可编辑标签

Question

我想通过 Draw2D 创建流程图。我只需要创建一些包含可编辑内容的框、带有可编辑标签的连接以及 reading/saving 作为 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/（不幸的是它在 JSFiddle 上不起作用，但我不知道哪里出了问题）

问题：我的问题是向任何连接添加可编辑标签，即通过双击现有标签。

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

Answer 1

您可以通过这种方式添加可编辑连接（参见 draw2d-website 上的示例）：

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

Draw2d.js: 通过双击为现有连接添加可编辑标签

Draw2d.js: Add editable label to existing connections via doubleclick

javascript

jquery

draw2d-js