CODEWITHSUNDEEP
javascriptfabricjs
John Magnolia
John Magnolia

Reputation: 16793

Fabric js disable object de-selecting

What's the best way of preventing the selected fabric object from being de-selected?

This works until you click another object than the one selected. https://codepen.io/anon/pen/KrPdgQ

canvas.on('object:selected', function(e){
  currentObject = e.target;

  // Disable all objects
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    objects[i].selectable = false;
  }

  currentObject.selectable = true;
});

canvas.on('selection:cleared', function(e){
  canvas.setActiveObject(currentObject).renderAll();
});

Upvotes: 0

Views: 3346

Answers (1)

Marius Turcu
Marius Turcu

Reputation: 1511

You can use object.evented.

var canvas = new fabric.Canvas('c');
canvas.selection = false;

var rec = new fabric.Rect({
  top: 10,
  left: 10,
  width: 75,
  height: 100,
  fill: 'yellow',
  stroke: 'blue',
  strokeWidth: 2
});

canvas.add(rec);

var rec2 = new fabric.Rect({
  top: 140,
  left: 210,
  width: 85,
  height: 100,
  fill: 'red',
  evented:false,
  stroke: 'orange',
  strokeWidth: 2, 
  selectable: false
});

canvas.add(rec2);

var currentObject = rec;

canvas.setActiveObject(rec);

canvas.renderAll();

canvas.on('object:selected', function(e){
  currentObject = e.target;
 
  // Disable all objects
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    if(objects[i].left!=currentObject.left &&
      objects[i].top!=currentObject.top)
   { objects[i].selectable = false;
    objects[i].evented = false;}
  }

  currentObject.selectable = true;
});

canvas.on('selection:cleared', function(e){
  canvas.setActiveObject(currentObject).renderAll();
});

// Button de-select object
document.getElementById("object-deselect").onclick = function() {
  currentObject = null;
  
  canvas.deactivateAll();
  
  // Enable selection all objects
  var objects = canvas.getObjects();
  for (var i = 0; i < objects.length; i++) {
    objects[i].selectable = true;
    objects[i].evented = true;
  }
  
  canvas.renderAll();
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.js"></script>
<p>Disable de-selecting object
<button id="object-deselect" type="button">Manually Deselect</button></p>

<canvas id="c" width="400" height="330" style="border:1px dotted red"></canvas>

Upvotes: 1

Related Questions