JointJS元素与端口和工具项目（删除，设置等） [英] JointJS Element with ports and tool items (delete, settings etc.)

问题描述

我设法通过提升我的SVG-形状端口：

I managed to enhance my SVG-shape with ports via:

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

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

With this I get the output:

我要增强这个形状与删除按钮。对于我有：

I want to enhance this shape with a delete button. For that I have:

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

在如何给JointJS元素一个删除工具？

我的问题：我如何与删除工具结合PortModelInterface？
该解决方案应该是这样的：

My question: How can I combine the PortModelInterface with the delete tool? The solution should look like this:

谢谢你帮我。

推荐答案

关键是这个插件。笔者扩展了自己的code中的PortsModelInterface的MOVE-，resize-和端口的工具。我通过实现删除功能进一步扩展它。这样，开发者的模式是开放的在功能情况下，任何的扩展。

Solution

The key was this plugin. The author extended the PortsModelInterface with own code for a move-, resize- and ports-tool. I extended it further by implementing the delete functionality. This way the devs-model is open to any extension in case of functionality.

在 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标记。注意＆LT; G班=deleteTool/＆GT; 中的标记：

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

最后一部分就是实例与新joint.shapes.devs.UnspecifiedProcess 元素。我$ P $它psent给你我的拖放逻辑，因为它可能是你太有用了：

The final part is instantiating the element with new joint.shapes.devs.UnspecifiedProcess. I present it to you with my drag and drop logic as it might be useful for you too:

//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元素与端口和工具项目（删除，设置等）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！