How to remove one specific object from selection - fabricjs

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?

Answer 1

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");
<script src="https://cdn.jsdelivr.net/npm/fabric#5.2.4-browser/dist/fabric.min.js"></script>
<canvas id="c"> </canvas>
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");
<script src="https://cdn.jsdelivr.net/npm/fabric#5.2.4-browser/dist/fabric.min.js"></script>
<canvas id="c"> </canvas>