fix(Canvas): Canvas directive to component implementation

src/canvas-view/canvas-editor/canvas-editor.component.js

@@ -4,13 +4,13 @@
   angular.module('patternfly.canvas').component('pfCanvasEditor', {
 
     bindings: {
-      chartDataModel: "=",
-      chartViewModel: "=?",
-      toolboxTabs: "=",
+      chartDataModel: '=',
+      chartViewModel: '=?',
+      toolboxTabs: '=',
       readOnly: '<?'
     },
     transclude: true,
-    templateUrl: "canvas-view/canvas-editor/canvas-editor.html",
+    templateUrl: 'canvas-view/canvas-editor/canvas-editor.html',
     controller: function ($timeout) {
       var ctrl = this;
       var newNodeCount = 0;
@@ -59,8 +59,8 @@
         // focus to filter input box
 
         $timeout(function () {
-          angular.element(".subtabs>ul").addClass('nav-tabs-pf');
-          angular.element("#filterFld").focus();
+          angular.element('.subtabs>u').addClass('nav-tabs-pf');
+          angular.element('#filterFld').focus();
         });
       };
 
@@ -79,7 +79,7 @@
       };
 
       ctrl.tabClicked = function () {
-        angular.element("#filterFld").focus();
+        angular.element('#filterFld').focus();
       };
 
       /*** Toolbox ***/
@@ -109,7 +109,7 @@
       };
 
       ctrl.tabClicked = function () {
-        angular.element("#filterFld").focus();
+        angular.element('#filterFld').focus();
       };
 
       ctrl.activeTab = function () {

src/canvas-view/canvas-editor/toolbox-items.component.js

@@ -0,0 +1,29 @@
+(function () {
+  'use strict';
+
+  angular.module('patternfly.canvas')
+    .component('toolboxItems', {
+      templateUrl: 'canvas-view/canvas-editor/toolbox-items.html',
+      bindings: {
+        items: '=',
+        startDragCallback: '<',
+        clickCallback: '<',
+        searchText: '='
+      },
+      controller: function toolboxItemsController () {
+        var ctrl = this;
+
+        ctrl.itemClicked = function (item) {
+          if (angular.isFunction(ctrl.clickCallback) && !item.disableInToolbox) {
+            ctrl.clickCallback(item);
+          }
+        };
+
+        ctrl.startItemDrag = function (event, ui, item) {
+          if (angular.isFunction(ctrl.startDragCallback)) {
+            ctrl.startDragCallback(event, ui, item);
+          }
+        };
+      }
+    });
+})();

src/canvas-view/canvas-editor/toolbox-items.html

@@ -1,12 +1,12 @@
 <ul class="toolbox-items-list">
-    <li class="toolbox-item" ng-repeat="item in vm.items | filter:vm.searchText"
-        data-drag="{{!item.disableInToolbox}}" jqyoui-draggable="{onStart:'vm.startDragCallbackfmDir(item)'}"
-        ng-class="{'not-draggable': item.disableInToolbox}"
-        data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
-        ng-click="vm.clickCallbackfmDir(item)"
-        uib-tooltip="{{(item.disableInToolbox ? 'Items cannot be added to the canvas more than once.' : '')}}">
-        <img ng-if="item.image" src="{{item.image}}" alt="{{item.name}}"/>
-        <i ng-if="item.icon && !item.image" class="draggable-item-icon {{item.icon}}"></i>
-        <span>{{ item.name }}</span>
-    </li>
+  <li class="toolbox-item" ng-repeat="item in $ctrl.items | filter:$ctrl.searchText"
+      data-drag="{{!item.disableInToolbox}}" jqyoui-draggable="{onStart:'$ctrl.startDragCallbackfmDir(item)'}"
+      ng-class="{'not-draggable': item.disableInToolbox}"
+      data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
+      ng-click="$ctrl.clickCallbackfmDir(item)"
+      uib-tooltip="{{(item.disableInToolbox ? 'Items cannot be added to the canvas more than once.' : '')}}">
+    <img ng-if="item.image" src="{{item.image}}" alt="{{item.name}}"/>
+    <i ng-if="item.icon && !item.image" class="draggable-item-icon {{item.icon}}"></i>
+    <span>{{ item.name }}</span>
+  </li>
 </ul>