问题描述
限时送ChatGPT账号..在 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/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屋!
更多推荐
[db:关键词]
发布评论