Group / Ungroup

by Shakti Patel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<canvas id="paper" width="500" height="300">
			Your browser needs to support canvas for this to work!
		</canvas>

<button id="select">Selection mode</button>
<button id="draw">Drawing mode</button>
<button id="group">Group</button>
<button id="ungroup">Ungroup</button>

CSS

canvas {
    border:2px solid #333;
}

JavaScript

var canvas = new fabric.Canvas('paper',{
	isDrawingMode: true
});

$("#select").click(function(){
    canvas.isDrawingMode = false;
});
$("#draw").click(function(){
    canvas.isDrawingMode = true;
});

$("#group").on('click', function() {
    var activegroup = canvas.getActiveGroup();
    var objectsInGroup = activegroup.getObjects();

    activegroup.clone(function(newgroup) {
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
		    canvas.remove(object);  
	    });
        canvas.add(newgroup);
        
    });
});

$("#ungroup").click(function(){
   var activeObject = canvas.getActiveObject();
    if(activeObject.type=="group"){
        var items = activeObject._objects;
        alert(items);
        activeObject._restoreObjectsState();
        canvas.remove(activeObject);
        for(var i = 0; i < items.length; i++) {
          canvas.add(items[i]);
          canvas.item(canvas.size()-1).hasControls = true;
        }
         
        canvas.renderAll();
    }
});