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

问题描述

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

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.

是否有一种直接的方法可以让用户能够删除 UI 中的元素?

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

推荐答案

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

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

全面披露:该技术严重依赖于用于链接的jointjs代码 - 我只是对其进行了调整:o)

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

这是一个显示它工作的jsfiddle:

Here is a jsfiddle showing it working:

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

toolElement 定义如下:

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

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

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

并查看:

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

我显示和隐藏工具标记，这取决于元素是否使用 CSS 突出显示.如果你愿意，你可以在悬停时做同样的事情(就像链接一样):

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

渲染时，它看起来像这样(注意:在我的例子中，我在工具中有另一个按钮，而不仅仅是删除 - 那就是绿色 V 形按钮.我从上面的代码示例中删除了它以制作它们更简单):

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

当元素没有高亮时:

突出显示时:

然后我可以通过扩展 toolElement 轻松地定义其他形状.以下是数据存储的数据流图形状:

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

和外部参与者:

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