CODEWITHSUNDEEP
javascriptjointjs
user3142695
user3142695

Reputation: 17322

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

By clicking on a blank space of the paper a new cell will be added:

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

But as the change:position event is set in the blank:pointerdblclick event, it just fires for new elements. But it should be set for all cells exisiting for this paper. So for moving of any cell on the paper the fitToContent()-function should be done...

How do I do that?

P.S.: The standard-element is defined like this:

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

Upvotes: 1

Views: 2900

Answers (1)

AmmarCSE
AmmarCSE

Reputation: 30557

Use graph.getElements() and iterate over them setting the handler

graph.getElements().forEach(function(element) {
    element.on('change:position', function() {
        paper.fitToContent();
    });

Upvotes: 2

Related Questions