CODEWITHSUNDEEP
javascriptjqueryjointjs
Steve Jax
Steve Jax

Reputation: 87

Select only a particular cell in JointJS

want to change attr of the cell i click on...e.g if i click on a cell it should change its attribute...like color to red.

This code below is working perfectly...but when i click on another cell the red fill should only be applied to that and the red fill of the all remaining cells should be back to its default value like they were before.

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: $('#myholder'),
    width: 600,
    height: 200,
    model: graph,
    gridSize: 1
});
 var rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 100 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
    });

 var rect2 = new joint.shapes.basic.Rect({
    position: { x: 20, y: 30 },
    size: { width: 150, height: 30 },
    attrs: { rect: { fill: 'white' }, text: { text: 'my box2', fill: 'blue' } }
});

rect2.translate(300,30);

var link = new joint.dia.Link({
    source: { id: rect.id },
    target: { id: rect2.id }
});

graph.addCells([rect, rect2, link]);

 paper.on('cell:pointerdown', function (cellView) {

              cellView.model.attr({rect: { fill: 'red' }});

                });

// looking for Some thing to reset all the attributes of the remaining cell to default(as they were before) when i click on another node...currently its changing color of every node to red that i click on.

Upvotes: 1

Views: 2762

Answers (1)

Thirumal
Thirumal

Reputation: 9536

  1. Get the all element from the graph

  2. Change back to original color

  3. Change cellview to Red

    paper.on('cell:pointerdown', function (cellView) {
     _.each(graph.getElements(), function(element) {
         element.attr({
                  rect: { fill: 'white' }
         });   
      });
     cellView.model.attr({rect: { fill: 'red' }});

    });

Remember I have used underscore.js for _.each loop.

Upvotes: 1

Related Questions