[英]Change:position event for every cell in the paper using joint.js
[英]How to add an onclick event to a joint.js element?
我在DAG中有一个joint.js元素,并希望能够通过单击它来触发事件。
我可以使用$(selector).click(...)
来做它,但我想知道是否有一个joint.js特定的处理方式,因为这可能会更好。 我决定的一个事件是onclick的候选人是'批处理:停止'
我的代码:
var variable = new joint.shapes.basic.Rect({
name : label,
id: label,
onclick : function () {alert("hello");},
size: { width: width, height: height },
attrs: {
text: { text: label, 'font-size': letterSize, 'font-family': 'monospace' },
rect: {
fill : fillColor,
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555'
}
}
});
variable.on('batch:stop', function (element) {alert(""); toggleEvidence(element.name);});
return variable;
我应该如何添加onclick事件?
JointJS形状是模型,因此您点击处理程序无法使用它们是正确的。 JointJS论文触发了可能对您有用的事件:
paper.on('cell:pointerdown',
function(cellView, evt, x, y) {
alert('cell view ' + cellView.model.id + ' was clicked');
}
);
其他事件有:cell:pointerup,cell:pointerdblclick,cell:pointermove。
完整列表可以在这里找到: http : //jointjs.com/api#joint.dia.Paper : events 。
编辑 :
从JointJS v0.9开始,还有一个cell:pointerclick
事件。
您还可以使用Backbone本身将特定事件附加到特定模型。 JointJS只是引擎盖下的Backbone。
const newElement = new jointjs.shapes.devs.Model({....});
graph.addCell(newElement);
newElement
.findView(paper)
.$el.find('.Settings') // this is nested in the model / cell
.click(() => {
// do something
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.