FabricJS UnGroup

FabricJS UnGroup

HTML

<canvas id="c" width="600" height="400"></canvas>
<button onclick="window.container.unGroup()">unGroup</button>
<button onclick="window.container.doGroup()">doGroup</button>

CSS

#c {
  outline: 1px solid #ccc
}

JavaScript

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

// Ungroup on click on specific object inside
// Group back on click outside
var Container = function(canvas, objects) {
  var self = this;
  var groupOptions = {padding: 10, borderColor: 'green', subTargetCheck: true};
  self.fabricGroup = new fabric.Group([], groupOptions);
  self.isGrouped = true;
  
  self.add = function(fabricObject) {
  	self.fabricGroup.addWithUpdate(fabricObject);
  }
  
  self.remove = function(fabricObject) {
  	self.fabricGroup.remove(fabricObject);
  }

  objects.forEach(function(object) {
  	self.add(object);
    object.on('mousedown', function(e) {
    	self.unGroup();
      canvas.setActiveObject(object);
    });
    object.on('deselected', function(e) {
      setTimeout(function() {
        self.doGroup();
      });    	
    });
  });
  
  canvas.add(self.fabricGroup);
   
  
  self.unGroup = function() {
		if(!self.isGrouped) return;
    self.isGrouped = false;
		var items = self.fabricGroup.getObjects();
    self.fabricGroup.destroy();
    canvas.remove(self.fabricGroup);
    for (var i = 0; i < items.length; i++) {
      canvas.add(items[i]);
    }
    canvas.renderAll();
	}
  
  self.doGroup = function() {
    if(self.isGrouped) return;
    self.isGrouped = true;
    var items = self.fabricGroup.getObjects();
    self.fabricGroup = new fabric.Group(items, groupOptions);
    canvas.add(self.fabricGroup);
    for (var i = 0; i < items.length; i++) {
      canvas.remove(items[i]);
    }
  	canvas.renderAll();
	}
}

var objects = [
  new fabric.Rect({
    width: 50,
    height: 50,
    left: 50,
    top: 50,
    fill: 'rgb(255,0,0)'
  }),
  new fabric.Rect({
    width: 50,
    height: 50,
    left: 110,
    top: 50,
    fill: 'rgb(255,0,0)'
  }),new fabric.Rect({
    width: 50,
    height: 50,
    left: 110,
    top: 50,
    fill: 'rgb(255,0,0)'
  }),new fabric.Rect({
    width: 50,
    height: 50,
    left: 110,
    top: 50,
    fill: 'rgb(255,0,0)'
  })
];

window.container = new...