How to remove one specific object from selection

Question

I'm trying to make a restriction: when a group of objects is selected, some specific object must not be included in the selection.

F.e. we create 3 rectangles. If we select the group and the red one is inside of it, it must be removed from selection:

function addRect(){
    var redRect = new fabric.Rect({
        left: 50,
        top: 50,
        fill: 'red',
        width: 50,
        height: 50
    });

    var greenRect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'green',
        width: 50,
        height: 50
    });

    var blueRect = new fabric.Rect({
        left: 150,
        top: 150,
        fill: 'blue',
        width: 50,
        height: 50
    });

    canvas.add(redRect);
    canvas.add(greenRect);
    canvas.add(blueRect);
}


function createCanvas(id){
    canvas = new fabric.Canvas(id);
    addRect();

    canvas.on('selection:created', function(e) {
        for (var i = 0; i < canvas.getActiveObjects().length; i++) {
            if(canvas.getActiveObjects()[i].fill == "red"){
                //somehow remove the red one from selection
            };
        }
    });

    return canvas;
}

discardActiveObject() will remove the whole selection.

"selected = false" also doesn't work.

Any ideas?

A.D · Answer

There are two ways to achieve this using selectable property

http://fabricjs.com/docs/fabric.Rect.html#selectable

By setting selectable: false within the call back function
By setting selectable: false during object creation.

function addRect() {
  var redRect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 50,
    height: 50,
    selectable: false
  });

  var greenRect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: "green",
    width: 50,
    height: 50
  });

  var blueRect = new fabric.Rect({
    left: 150,
    top: 150,
    fill: "blue",
    width: 50,
    height: 50
  });

  canvas.add(redRect);
  canvas.add(greenRect);
  canvas.add(blueRect);
}

function createCanvas(id) {
  canvas = new fabric.Canvas(id, {
    height: 500,
    width: 800,
    backgroundColor: "rgb(100,100,200)",
    selectionColor: "blue"
  });
  addRect();

  canvas.on("selection:created", function(e) {
    for (var i = 0; i < canvas.getActiveObjects().length; i++) {
      if (canvas.getActiveObjects()[i].fill == "red") {
        canvas.getActiveObjects()[i].selectable = false;
        canvas.renderAll();
      }
    }
  });

  return canvas;
}

createCanvas("c");

function addRect() {
  var redRect = new fabric.Rect({
    left: 50,
    top: 50,
    fill: "red",
    width: 50,
    height: 50,
    selectable: false
  });

  var greenRect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: "green",
    width: 50,
    height: 50
  });

  var blueRect = new fabric.Rect({
    left: 150,
    top: 150,
    fill: "blue",
    width: 50,
    height: 50
  });

  canvas.add(redRect);
  canvas.add(greenRect);
  canvas.add(blueRect);
}

function createCanvas(id) {
  canvas = new fabric.Canvas(id, {
    height: 500,
    width: 800,
    backgroundColor: "rgb(100,100,200)",
    selectionColor: "blue"
  });
  addRect();

  canvas.on("selection:created", function (e) {
    for (var i = 0; i < canvas.getActiveObjects().length; i++) {
      if (canvas.getActiveObjects()[i].fill == "red") {
        //somehow remove the red one from selection
      }
    }
  });

  return canvas;
}

createCanvas("c");

How to remove one specific object from selection

1 Answers