带有端口和工具项(删除、设置等)的 JointJS 元素 [英] JointJS Element with ports and tool items (delete, settings etc.)

问题描述

我设法通过以下方式使用端口增强了我的 SVG 形状:

joint.shapes.devs.Element = joint.shapes.basic.Generic.extend(_.extend({},Joint.shapes.basic.PortsModelInterface，{//带有端口的 SVG 标记});

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

我想用删除按钮来增强这个形状.为此，我有:

joint.shapes.devs.toolElement =joint.shapes.basic.Generic.extend({//删除按钮的标记});

基于 Mike Goodwin 在 .作者使用自己的代码扩展了 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 16.447,13.087 21.949,7.585 10.945,7.585 8.117,10.415 13.618,15.917 10.946,24.248 8.116,21.419 16.447,18.746 21.948,24.248z/><标题>取下该元件型号</title>',

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

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

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

joint.shapes.devs.UnspecifiedProcess = joint.shapes.devs.Model.extend(_.extend({},joint.plugins.TooledModelInterface, {标记:['<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 变换="矩阵(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:b-fill="path3563;-fill="path3563"1-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(''),默认值:joint.util.deepSupplement({类型:'devs.UnspecifiedProcess'，输入端口:['']，输出端口:['']，移动工具:真，调整大小工具:真，尺寸:{ 宽度:100，高度:31}，属性:{'.inPorts圆':{填充:'#fff'}，'.outPorts circle': { fill: '#fff' },'.身体': {宽度:67，高度:21，中风:'无'},}}，joint.shapes.devs.Model.prototype.defaults)，}));Joint.shapes.devs.UnspecifiedProcessView = joint.shapes.devs.ModelView.extend(joint.plugins.TooledViewInterface);

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

//拖放形状如果(Modernizr.draganddrop){//鼠标位置变量 posX = 0,posY = 0;//开始拖动的选定元素var selectedEl = "";var selectedObj = null;var oldObj = null;//$(".draggable-svg").on("dragstart", function(e) {selectedEl = this.id;控制台日志(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]({位置:{ x: posX, y: posY }});graph.addCell(元素);selectedEl = "";oldObj = selectedObj;selectedObj = 元素；});} 别的 {alert("您的浏览器太旧了，请更新.");}

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

based on Mike Goodwin´s solution in How to give JointJS elements a remove tool?

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

Thanks for helping me out.

解决方案

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.

How it´s done

In tooledViewPlugin.js there is joint.plugins.TooledModelInterface = {}. In there I added:

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>',

Below in joint.plugins.TooledViewInterface = {} I wrote

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

An example shape with special SVG markup other than a simple rectangle. Note the <g class="deleteTool"/> in the markup:

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

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屋！