Change:position 论文中每个单元格的事件使用 joint.js
Change:position event for every cell in the paper using joint.js
通过单击论文的空白 space,将添加一个新单元格:
paper.on({
'blank:pointerdblclick': function(event, x, y) {
var rect = new joint.shapes.app.Standard({
position: { x: x, y: y },
size: { width: 100, height: 80 },
});
graph.addCell(rect);
rect.on('change:position', function() {
paper.fitToContent();
});
}
});
但是由于 change:position
事件是在 blank:pointerdblclick
事件中设置的,它只会为新元素触发。但它应该为本文存在的所有单元格设置。
因此,要移动纸上的任何单元格,应执行 fitToContent() 函数...
我该怎么做?
P.S.: 标准元素定义如下:
joint.shapes.app.Standard = joint.shapes.basic.Generic.extend({
markup: '<rect/><circle class="port-top"/><circle class="port-bottom"/><circle class="port-right"/><circle class="port-left"/><text/>',
defaults: joint.util.deepSupplement({
type: 'app.Standard',
attrs: {
...
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
使用graph.getElements()并迭代它们设置处理程序
graph.getElements().forEach(function(element) {
element.on('change:position', function() {
paper.fitToContent();
});
通过单击论文的空白 space,将添加一个新单元格:
paper.on({
'blank:pointerdblclick': function(event, x, y) {
var rect = new joint.shapes.app.Standard({
position: { x: x, y: y },
size: { width: 100, height: 80 },
});
graph.addCell(rect);
rect.on('change:position', function() {
paper.fitToContent();
});
}
});
但是由于 change:position
事件是在 blank:pointerdblclick
事件中设置的,它只会为新元素触发。但它应该为本文存在的所有单元格设置。
因此,要移动纸上的任何单元格,应执行 fitToContent() 函数...
我该怎么做?
P.S.: 标准元素定义如下:
joint.shapes.app.Standard = joint.shapes.basic.Generic.extend({
markup: '<rect/><circle class="port-top"/><circle class="port-bottom"/><circle class="port-right"/><circle class="port-left"/><text/>',
defaults: joint.util.deepSupplement({
type: 'app.Standard',
attrs: {
...
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
使用graph.getElements()并迭代它们设置处理程序
graph.getElements().forEach(function(element) {
element.on('change:position', function() {
paper.fitToContent();
});