如何给JointJS元素一个删除工具？ [英] How to give JointJS elements a remove tool?

问题描述

在JointJS中，链接带有一个方便的响应式工具来删除链接（当您将鼠标悬停在链接上时，会出现一个x，然后单击它将删除该链接）。另一方面，元素在API中有remove（）方法，但没有用户界面x向用户公开该方法。

是有一个简单的方法可以让用户删除用户界面中的元素？

解决方案

在我的项目中，我定义了一个自定义形状 - toolElement - 封装了此行为，然后根据需要将其扩展为其他自定义形状。

完整披露：

这是一个jsfiddle显示它的工作原理：

http://jsfiddle.net/kj4bqczd/3/ $ b $ toolElement 定义如下：

pre $ joint.shapes.tm.toolElement = joint.shapes.basic.Generic.extend（{

toolMarkup：['< g class =element-工具>'，
'& lt; g class =element-tool-remove>< circle fill =redr =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>从模型< / title>'，
'< / g>'，
'< / g>' .join（''），

默认值：joint.util.deepSupplement（{
attrs：{
text：{'font-weight'：400，'font-size '：'small'，fill：'black'，'text-anchor'：'middle'，'ref-x'：.5，'ref-y'：.5，'y-alignment'：'middle'} ，
}，
}，joint.shapes.basic.Generic.prototype.defaults）

}）;


如果您需要其他工具以及删除按钮，则可以添加更多标记。

删除行为封装在自定义视图中：

  joint.shapes.tm .ToolElementView = joint.dia.ElementView.extend（{
 
 initialize：function（）{
 
 joint.dia.ElementView.prototype.initialize.apply（this，arguments） ; 
}，
 
 render：function（）{
 
 joint.dia.ElementView.prototype.render.apply（this，arguments）; 
 
 this.renderTools（）; 
 this.update（）; 
 
 return this; 
}，
 
 renderTools：function（） {
 
 var toolMarkup = this.model.toolMarkup || this.model.get（'toolMarkup'）; 
 
 if（toolMarkup）{
 
 var nodes = V（toolMarkup）; 
 V（this.el）.append（nodes）; 
 
} 
 
 return this; 
} ，
 
指针lick：function（evt，x，y）{
 
 this._dx = x; 
 this._dy = y; 
 this._action =''; 
 
 var className = evt.target.parentNode.getAttribute（'class'）; 
 
 switch（className）{
 
 case'element-tool-remove'：
 this.model.remove（）; 
 return; 
休息; 
 
默认值：
} 
 
 joint.dia.CellView.prototype.pointerclick.apply（this，arguments）; 
}，
}）; 
  

然后，您可以扩展这些来制作自定义形状。在我的项目中，我正在做数据流图，这里是 Process 形状的定义：

  joint.shapes.tm.Process = joint.shapes.tm.toolElement.extend（{
 
 markup：'< g class =rotating>< g class =scalable>< circle class =element-process/>< title class =tooltip/>< / g>< text />< / g>'，
 
默认值：joint.util.deepSupplement（{
类型：'tm.Process'，
 attrs：{$ b $'.element-process'：{'stroke- width'：1，r：30，stroke：'black'，transform：'translate（30，30）'}，
 text：{ref：'.element-process'} 
}，
 size：{width：100，height：100} 
}，joint.shapes.tm.toolElement.prototype.defaults）
}）; 
  

and view：

  joint.shapes.tm.ProcessView = joint.shapes.tm.ToolElementView; 
  

显示并隐藏工具标记，具体取决于元素是否使用CSS高亮显示。如果你喜欢，你可以在悬停时做同样的事情（如链接）：

  .element .element-tools {
 display：none; 
 cursor：pointer 
} 
 
 .element.highlighted .element-tools {
 display：inline; 
} 
  

渲染时，看起来像这样（注意：在我的例子中，另一个按钮在工具中，而不仅仅是删除 - 这就是绿色的人字形按钮。我从上面的代码示例中删除了它，以使它们更简单）：

当元素没有突出显示：

突出显示时：

然后，我可以通过扩展toolElement来轻松定义其他形状。以下是数据存储的数据流图形：

和外部角色：

In JointJS, links come with a handy responsive tool for removing links (when you hover over the link, an "x" appears, and clicking it removes the link). Elements, on the other hand, have a remove() method in the API, but don't have the UI "x" to expose that method to users.

Is there a straightforward way to give users the ability to delete elements in the UI?

解决方案

In my project I define a custom shape - toolElement - that encapsulates this behaviour and then extend this with other custom shapes as required.

Full disclosure: This technique leans heavily on the jointjs code for links - I just adapted it :o)

Here is a jsfiddle showing it working:

http://jsfiddle.net/kj4bqczd/3/

The toolElement is defined like this:

joint.shapes.tm.toolElement = joint.shapes.basic.Generic.extend({

    toolMarkup: ['<g class="element-tools">',
        '<g class="element-tool-remove"><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>',
        '</g>',
        '</g>'].join(''),

    defaults: joint.util.deepSupplement({
        attrs: {
            text: { 'font-weight': 400, 'font-size': 'small', fill: 'black', 'text-anchor': 'middle', 'ref-x': .5, 'ref-y': .5, 'y-alignment': 'middle' },
        },
    }, joint.shapes.basic.Generic.prototype.defaults)

});

You can add more markup if you need other tools as well as the remove button.

The remove behaviour is encapsulated in a custom view:

joint.shapes.tm.ToolElementView = joint.dia.ElementView.extend({

    initialize: function() {

        joint.dia.ElementView.prototype.initialize.apply(this, arguments);
    },

    render: function () {

        joint.dia.ElementView.prototype.render.apply(this, arguments);

        this.renderTools();
        this.update();

        return this;
    },

    renderTools: function () {

        var toolMarkup = this.model.toolMarkup || this.model.get('toolMarkup');

        if (toolMarkup) {

            var nodes = V(toolMarkup);
            V(this.el).append(nodes);

        }

        return this;
    },

    pointerclick: function (evt, x, y) {

        this._dx = x;
        this._dy = y;
        this._action = '';

        var className = evt.target.parentNode.getAttribute('class');

        switch (className) {

            case 'element-tool-remove':
                this.model.remove();
                return;
                break;

            default:
        }

        joint.dia.CellView.prototype.pointerclick.apply(this, arguments);
    },
});

You can then extend these to make your custom shapes. In my project, I am doing data flow diagrams and here is the definition of the Process shape:

joint.shapes.tm.Process = joint.shapes.tm.toolElement.extend({

    markup: '<g class="rotatable"><g class="scalable"><circle class="element-process"/><title class="tooltip"/></g><text/></g>',

    defaults: joint.util.deepSupplement({
        type: 'tm.Process',
        attrs: {
            '.element-process': { 'stroke-width': 1, r: 30, stroke: 'black', transform: 'translate(30, 30)' },
            text: { ref: '.element-process'}
        },
        size: { width: 100, height: 100 }
    }, joint.shapes.tm.toolElement.prototype.defaults)
});

and view:

joint.shapes.tm.ProcessView = joint.shapes.tm.ToolElementView;

I show and hide the tool markup, depending whether the element is highlighted using CSS. You could do the same when hovering (like the links do) if you like:

.element .element-tools {
    display: none;
    cursor: pointer
}

.element.highlighted .element-tools {
    display: inline;
}

When rendered, it looks like this (note: in my case, I have another button in the tools, not just the remove - that is what the green chevron button is. I removed this from the code samples above to make them simpler):

When the element is not highlighted:

When it is highlighted:

I can then define other shapes really easily by extending toolElement. Here are the data flow diagram shapes for data stores:

and external actors:

这篇关于如何给JointJS元素一个删除工具？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！