使用joint.js更改纸张中每个单元格的位置事件

Change:position event for every cell in the paper using joint.js

本文关键字：单元格 位置 事件 张中每 joint js 使用      更新时间：2023-09-26

点击纸张的空白区域，将添加一个新的单元格:

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()函数…

我该怎么做?

注::标准元素的定义如下:

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();
    });
相关文章：