fixed rectangle that were hard to select after creation

javascript/src/Plugins/qfq.fabric.js

@@ -13,7 +13,6 @@ $(function () {
     var fgColor = '#000';
     var borderColor = '#000';
     var borderSize = 5;
-    var brushWidth = 2;
     var textSize = 16;
     var addPositionLeft = 20;
     var addPositionTop = 20;
@@ -70,9 +69,10 @@ $(function () {
         rect.hasControls = true;
         canvas.selection = true;
         canvas.discardActiveObject();
+        canvas.remove(rect);
+        canvas.add(rect);
         canvas.renderAll();
-        var group = new canvas.Group([rect]);
-        canvas.add(group);
+
     }
 
     function adjustDefaultPosition() {
@@ -110,10 +110,11 @@ $(function () {
             width: pointer.x-origX,
             height: pointer.y-origY,
             angle: 0,
-            fill: 'rgba(255,0,0,0.5)',
+            fill: 'rgba(255,0,0,0.4)',
             strokeWidth: borderSize,
             stroke: 'rgba(255, 0, 0, 1)',
             selectable: true,
+            borderScaleFactor: 0,
             hasControls: false
         });
         canvas.add(rect);
@@ -146,7 +147,8 @@ $(function () {
             fontSize: textSize,
             color: '#000',
             left: 10,
-            top: 10
+            top: 10,
+            editable: true
         });
         var rect = new fabric.Rect();
         rect.set({
@@ -207,18 +209,18 @@ $(function () {
         }
     });
 
-    canvas.on('key:up', function(e) {
+    canvas.onkeyup = function(e) {
         if(e.keyCode == 46) {
             deleteActiveGroup();
         }
-    });
+        console.log(e.keyCode);
+    };
 
     setBackground(imageURL);
 
 
     $("#clear-canvas").on( "click", function() {
-        canvas.clear();
-        setBackground(imageURL);
+        deleteActiveGroup();
     });
 
     $("#text-bg-submit").on("click", function() {

less/qfq-bs.css.less

@@ -185,7 +185,7 @@ i.@{spinner_class} {
   background-image: url("../icons/white_bg.png");
 }
 
-#text-yellow-bg {
+#text-yellow-bg, #highlight-yellow {
   background-image: url("../icons/yellow_bg.png");
 }
 
@@ -193,6 +193,18 @@ i.@{spinner_class} {
   background-image: url("../icons/yellow_border.png");
 }
 
+#draw-black {
+  background-image: url("../icons/black_dot.png");
+}
+
+#draw-blue {
+  background-image: url("../icons/blue_dot.png");
+}
+
+#draw-red {
+  background-image: url("../icons/red_dot.png");
+}
+
 // typeAhead Input: Default Bootstrap column width
 .twitter-typeahead {
   display: block !important;

mockup/fabric.html

@@ -45,6 +45,14 @@
                 <button class="btn btn-default" id="add-rect"><span class="glyphicon glyphicon-stop"></span></button>
                 <button class="btn btn-default" id="move-mode"><span class="glyphicon glyphicon-move"></span></button>
             </div>
+            <div class="drawing-control" id="user-drawing-control">
+                <div class="drawing-options">
+                    <button type="button" class="text-bg-toggle" id="draw-black"></button>
+                    <button type="button" class="text-bg-toggle" id="draw-blue"></button>
+                    <button type="button" class="text-bg-toggle" id="draw-red"></button>
+                    <button type="button" class="text-bg-toggle" id="highlight-yellow"></button>
+                </div>
+            </div>
             <div class="text-insert" style="display:none;" id="user-text-control">
                 <textarea class="fabric-text" placeholder="Remember, be nice!" id="text-user-value"></textarea>
                 <div class="text-options">