带有端口和工具项（删除、设置等）的 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 在

中的解决方案

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

谢谢你帮我。

Answer 1

解决方案

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

它是如何完成的

在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.");
}

带有端口和工具项（删除、设置等）的 JointJS 元素

JointJS Element with ports and tool items (delete, settings etc.)

svg

diagramming

backbone.js

jointjs

解决方案

它是如何完成的