Fabric.js select object in group example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="extend.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <canvas id="canvas"></canvas>
  </body>

</html>

$(function(){
  
  fabric.util.object.extend(fabric.Object.prototype, {
    getAbsoluteCenterPoint: function() {
      var point = this.getCenterPoint();
      if (!this.group)
        return point;
      var groupPoint = this.group.getAbsoluteCenterPoint();
      return {
        x: point.x + groupPoint.x,
        y: point.y + groupPoint.y
      };
    },
    containsInGroupPoint: function(point) {
      if (!this.group)
        return this.containsPoint(point);
      
      var center = this.getAbsoluteCenterPoint();
      var thisPos = {
          xStart: center.x - this.width/2,
          xEnd: center.x + this.width/2,
          yStart: center.y - this.height/2,
          yEnd: center.y + this.height/2
      };
      
      if (point.x >= thisPos.xStart && point.x <= (thisPos.xEnd)) {
          if (point.y >= thisPos.yStart && point.y <= thisPos.yEnd) {
              return true;
          }
      }
      return false;
    }
  });
  
  var canvas = new fabric.Canvas('canvas');
  
  canvas.setHeight($(window).height());
  canvas.setWidth($(window).width());
  
  var rect1 = new fabric.Rect({width:100, height:100, id:'a', left:10, top:10, fill:'#ccc', selectable: true})
  var rect2 = new fabric.Rect({width:100, height:100, id:'b', left:150, top:10, fill:'#cc0000', selectable: true})
  var group = new fabric.Group();
  
  group.addWithUpdate(rect1);
  group.addWithUpdate(rect2);
  group.set({
      top:100,
      left:200,
      selectable: false
  });
  
  group.hasControls = false;
  group.hasBorders = false;
  
  canvas.add(group);

  canvas.on('mouse:down', function(options) {
      var mousePos = canvas.getPointer(options.e);
      console.log('mouse pos', mousePos);
 
      if (!options.target || !options.target.isType('group'))
        return;
        
      options.target.forEachObject(function(object,i) {

        if(object.containsInGroupPoint(mousePos)){
          
          object.hasControls = true;
          console.log('HIT !', object);
        }
      });   
  });
})

/* Styles go here */