- Added shortcut keys support for

js/kitchensink/controller.js

@@ -270,6 +270,24 @@ function addAccessors($scope) {
     canvas.add(textSample);
   };
 
+  $scope.addTextbox = function() {
+    var text = 'Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit,\nsed do eiusmod tempor incididunt\nut labore et dolore magna aliqua.\n' +
+      'Ut enim ad minim veniam,\nquis nostrud exercitation ullamco\nlaboris nisi ut aliquip ex ea commodo consequat.';
+
+    var textBoxSample = new fabric.Textbox(text, {
+      left: getRandomInt(350, 400),
+      top: getRandomInt(350, 400),
+      width: 500,
+      fontFamily: 'helvetica',
+      angle: getRandomInt(-10, 10),
+      fill: '#' + getRandomColor(),
+      scaleX: 0.5,
+      scaleY: 0.5,
+    });
+
+    canvas.add(textBoxSample);
+  };
+
   var addShape = function(shapeName) {
 
     console.log('adding shape', shapeName);
@@ -713,7 +731,27 @@ function addAccessors($scope) {
       }
     });
 
-    canvas.add(iText, iText2);
+    var textBox = new fabric.Textbox('foo bar\nbaz', {
+      left: 50,
+      top: 10,
+      fontFamily: 'Helvetica',
+      fill: '#333',
+      styles: {
+        0: {
+          0: { fill: 'red' },
+          1: { fill: 'red' },
+          2: { fill: 'red' }
+        },
+        2: {
+          0: { fill: 'blue' },
+          1: { fill: 'blue' },
+          2: { fill: 'blue' },
+          3: { fill: 'blue' }
+        }
+      }
+    });
+
+    canvas.add(iText, iText2, textBox);
   }
 
   addTexts();
@@ -899,6 +937,42 @@ function addAccessors($scope) {
       return patternCanvas;
     };
   }
+
+  function bindShortcuts(){
+
+        $(document).keydown(function(event) {
+            // If Control for Windows and metaKey for Max
+            if((event.ctrlKey || event.metaKey) && event.which === 66 && $scope.getText()) { // 66 = B/b key                event.preventDefault();
+                $scope.toggleBold();
+                return false;
+            }else if((event.ctrlKey || event.metaKey) && event.which === 73 && $scope.getText()){ // 73=I/i
+                event.preventDefault();
+                $scope.toggleItalic();
+                return false;
+            }else if((event.ctrlKey || event.metaKey) && event.which === 85 && $scope.getText()){ // 73=I/i
+                event.preventDefault();
+                $scope.toggleUnderline();
+                return false;
+            }else if((event.ctrlKey || event.metaKey) && event.which === 107 && $scope.getText()){ // 107 = +(plus)
+                event.preventDefault();
+                $scope.setFontSize(parseInt($scope.getFontSize(),10)+1);
+                $scope.toggleUnderline();
+                return false;
+            }else if((event.ctrlKey || event.metaKey) && event.which === 109 && $scope.getText()){ // 109 = -(minus)
+                event.preventDefault();
+                $scope.setFontSize(parseInt($scope.getFontSize(),10)-1);
+                $scope.toggleUnderline();
+                return false;
+            }else if(event.which === 46 || ((event.ctrlKey || event.metaKey) && event.which === 68)){ // 46 = DELETE key, 68 = D/d
+                event.preventDefault();
+                $scope.removeSelected();
+                return false;
+            }
+        });
+  }
+
+  bindShortcuts();
+
 }
 
 function watchCanvas($scope) {

posts/demos/_posts/2011-9-1-kitchensink.html

@@ -286,6 +286,7 @@
 
       <p>
         <button class="btn" ng-click="addText()">Add text</button>
+        <button class="btn" ng-click="addTextbox()">Add textbox</button>
       </p>
 
       <p>Add <strong>images</strong> to canvas:</p>