JointJS元素包含端口和工具项（删除，设置等）

Question

我设法通过以下方式增强了我的SVG形状：

joint.shapes.devs.Element = joint.shapes.basic.Generic.extend(_.extend({},     
joint.shapes.basic.PortsModelInterface, {
    // SVG markup with ports
});

有了这个，我得到了输出：

我想用删除按钮增强此形状。为此，我有：

joint.shapes.devs.toolElement = joint.shapes.basic.Generic.extend({
    // markup for delete button
});

基于Mike Goodwin在How to give JointJS elements a remove tool?

中的解决方案

我的问题：如何将PortModelInterface与删除工具结合起来？ 解决方案应如下所示：

感谢您帮助我。

Answer 1

解决方案

关键是this plugin。作者使用移动，调整大小和端口工具的自己的代码扩展了PortsModelInterface。我通过实现删除功能进一步扩展了它。这样，devs-model在功能的情况下对任何扩展都是开放的。

如何完成

在tooledViewPlugin.js中有joint.plugins.TooledModelInterface = {}。在那里，我补充道：

deleteToolMarkup: '<circle fill="red" r="11"/><path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/><title>Remove this element from the model</title>',

在我写的joint.plugins.TooledViewInterface = {}下面

renderDeleteTool: function () {
    var deleteContainer = this.$('.deleteTool').empty();
    var markup = V(this.model.deleteToolMarkup);
    for(var id in markup)
        deleteContainer.append(markup[id].node);
}

具有特殊SVG标记的示例形状，而不是简单的矩形。请注意标记中的<g class="deleteTool"/>：

joint.shapes.devs.UnspecifiedProcess = joint.shapes.devs.Model.extend(_.extend({}, joint.plugins.TooledModelInterface, {

markup: ['<g class="rotatable">',
            '<g class="scalable">',
                '<rect class="body"/>',
                '<g xmlns="http://www.w3.org/2000/svg" transform="translate(-549.49953,-824.87393)" id="layer1">',
                    '<g transform="matrix(0.933025,0,0,-0.2986125,549.49953,846.37362)" id="g3553">',
                      '<g transform="scale(0.98976,3.0047)" id="g3555">',
                        '<g clip-path="url(#clipPath3559)" id="g3557">',
                          '<path d="m 57.805,0.90155 -57.805,0 0,23.06045 57.805,0 L 72.244,12.432 57.805,0.90155 z" id="path3563" style="fill:#b8cde8;fill-opacity:1;fill-rule:evenodd;stroke:none"/>',
                        '</g>',
                      '</g>',
                    '</g>',
                '</g>',
            '</g>',
            '<g class="inPorts"/>',
            '<g class="outPorts"/>',
            '<g class="moveTool"/>',
            '<g class="resizeTool"/>',
            '<g class="portsTool"/>',
            '<g class="deleteTool"/>',
            '<title class="tooltip"/>',
        '</g>'].join(''),

defaults: joint.util.deepSupplement({
    type: 'devs.UnspecifiedProcess',
    inPorts: [''],
    outPorts: [''],
    moveTool: true,
    resizeTool: true,
    size: { width: 100, height: 31},
    attrs: {
        '.inPorts circle': { fill: '#fff' },
        '.outPorts circle': { fill: '#fff' },
        '.body': {
            width: 67, height: 21,
            stroke: 'none'
        },
    }
}, joint.shapes.devs.Model.prototype.defaults),
}));
joint.shapes.devs.UnspecifiedProcessView = joint.shapes.devs.ModelView.extend(joint.plugins.TooledViewInterface);

最后一部分是使用new joint.shapes.devs.UnspecifiedProcess实例化元素。我用拖放逻辑向你展示它，因为它也可能对你有用：

//Drag and drop shapes
if (Modernizr.draganddrop) {
    // Mouse position
    var posX = 0,
        posY = 0;
    // Selected Element with start of dragging
    var selectedEl = "";
    var selectedObj = null;
    var oldObj = null;
    //
    $(".draggable-svg").on("dragstart", function(e) {
        selectedEl = this.id;
        console.log(selectedEl);
    }); 
    $("#drawing-area").on("dragover", function(e) {
        e.preventDefault();
        posX = e.originalEvent.pageX - sideBarW;
        posY = e.originalEvent.pageY - topBarH;
    }); 
    $("#drawing-area").on("drop", function(e) {
        e.preventDefault();
        var element = new joint.shapes.devs[selectedEl]({
            position: { x: posX, y: posY }
        });
        graph.addCell(element);
        selectedEl = "";
        oldObj = selectedObj;
        selectedObj = element;

    }); 
} else {
    alert("Your browser is very old. Please update.");
}