fabricjs, toolbar

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
    <script src="fabricToolbar.js"></script>
  </head>

  <body>
    <h1>fabricjs, text group</h1>
    <div id="toolbar">
      <ul>
        <li data-action="addText">Text</li>
        <li data-action="scaleRandom">Random Scale</li>
      </ul>
    </div>
    <div id="my_cont" style="height: 500px; width: 500px; border: 1px dashed blue">
      <canvas id="canvas" style="border: 2px solid #ccc;box-sizing: border-box"></canvas>
    </div>
    <script src="demoSetup.js"></script>
    <script>
      var ftoolbar = new FabricToolbar();
    </script>
  </body>

</html>

// Code goes here

var $toolbar = $('#toolbar'),
    $cont = $('#my_cont'),
    $canvasEle = $('#canvas'),
    canvasF = new fabric.Canvas($canvasEle[0]);

/*************************/
/* T00LBAR ***************/
/*************************/

$toolbar.find('li').click(function(){
  
  var active = $(this).hasClass('active');
  
  active ? $(this).removeClass('active') : $(this).addClass('active');
  
  $(this).siblings().removeClass('active');
  
  canvasF.selection = active;
  
});

var toolbarActions = {
  'addText': function (evt) {
    console.log(evt);
    var text = new fabric.IText("hello pressed", $.extend(settings, {
      top: canvasF.getPointer(evt.e).y,
      left: canvasF.getPointer(evt.e).x 
    }));
    
    // set top
    text.setTop(text.top + 15 - 3.2);
    // add
    canvasF.add(text);
    
    //text.enterEditing();
  },
  'scaleRandom': function (evt) {
    scale(_.random(.3,1.7));
  }
}

canvasF.on('mouse:down', function(evt){
  var $active = $toolbar.find('.active');
  if($active.length) {
    toolbarActions[$active.attr('data-action')](evt);
    return false;
  }
});

/*************************/
/* CANVAS ****************/
/*************************/

function scale (number){
  canvasF.setZoom(number);
  canvasF.setWidth($cont.width()*number);
  canvasF.setHeight($cont.height()*number);
}

scale(1);


// add some text
var settings = {
  fill: 'black',
  fontSize: 24,
  left: 250,
  top: 250,
  fontFamily: 'arial'
}

canvasF.add(new fabric.IText("hello", settings));
canvasF.add(new fabric.IText("hello", $.extend(settings,{top: 275, left: 275 })));

/* Styles go here */

ul li { display: inline-block; border: 1px solid #ccc; cursor: pointer; padding: 5px 15px; }

ul li.active { color: #fff; background-color: black; }

var FabricToolbar = function(settings){

  _merge({},{});

  var setup = function(){
    // apply settings
  }; 
  
  
  /************************/
  /** UTILS ***************/
  /************************/

  function _merge (o1,o2, strict) {
    if(strict) {
      _foreach(o1,function(k){
        if(o2[k]){
          o1[k] = o2[k];  
        }
      });
    }else{
      _foreach(o2,function(k){
        o1[k] = o2[k];
      });
    }
  }
  function _foreach(obj, cb) {
    Object.keys(obj).forEach(function(key) {
      cb(key);
    });
  }
  
  // create toolbar
  setup(); 
}