Working on resize handle, drag to resize panels & rows

public/app/features/dashboard/rowCtrl.js

@@ -98,7 +98,7 @@ function (angular, app, _, config) {
     };
 
     $scope.updatePanelSpan = function(panel, span) {
-      panel.span = Math.min(Math.max(panel.span + span, 1), 12);
+      panel.span = Math.min(Math.max(Math.floor(panel.span + span), 1), 12);
     };
 
     $scope.replacePanel = function(newPanel, oldPanel) {
@@ -121,7 +121,7 @@ function (angular, app, _, config) {
   module.directive('rowHeight', function() {
     return function(scope, element) {
       scope.$watchGroup(['row.collapse', 'row.height'], function() {
-        element[0].style.minHeight = scope.row.collapse ? '5px' : scope.row.height;
+        element.css({ minHeight: scope.row.collapse ? '5px' : scope.row.height });
       });
     };
   });

public/app/features/panel/panelDirective.js

@@ -22,7 +22,8 @@ function (angular, $, config) {
           });
         }
       };
-    }).directive('grafanaPanel', function() {
+    })
+    .directive('grafanaPanel', function() {
       return {
         restrict: 'E',
         templateUrl: 'app/features/panel/partials/panel.html',
@@ -36,5 +37,64 @@ function (angular, $, config) {
           });
         }
       };
+    })
+    .directive('panelResizer', function($rootScope) {
+      return {
+        restrict: 'E',
+        template: '<span class="resize-panel-handle"></span>',
+        link: function(scope, elem) {
+          var resizing = false;
+          var handleOffset;
+          var originalHeight;
+          var originalWidth;
+          var maxWidth;
+
+          function dragStartHandler(e) {
+            e.preventDefault();
+            console.log('start');
+            resizing = true;
+
+            handleOffset = $(e.target).offset();
+            originalHeight = parseInt(scope.row.height);
+            originalWidth = scope.panel.span;
+            maxWidth = $(document).width();
+
+            $('body').on('mousemove', moveHandler);
+            $('body').on('mouseup', dragEndHandler);
+          }
+
+          function moveHandler(e) {
+            scope.row.height = originalHeight + (e.pageY - handleOffset.top);
+            scope.panel.span = originalWidth + (((e.pageX - handleOffset.left) / maxWidth) * 12);
+
+            var rowSpan = scope.dashboard.rowSpan(scope.row);
+
+            if (Math.floor(rowSpan) < 14) {
+              scope.row.panels[scope.row.panels.length - 1].span = scope.row.panels[scope.row.panels.length - 1].span - (rowSpan - 12);
+            }
+
+            scope.$apply(function() {
+              scope.$broadcast('render');
+            });
+          }
+
+          function dragEndHandler() {
+            console.log('end');
+            scope.$apply(function() {
+              $rootScope.$broadcast('render');
+            });
+
+            $('body').off('mousemove', moveHandler);
+            $('body').off('mouseup', dragEndHandler);
+          }
+
+          elem.on('mousedown', dragStartHandler);
+
+          scope.$on("$destroy", function() {
+            elem.off('mousedown', dragStartHandler);
+          });
+        }
+      };
     });
+
 });

public/app/features/panel/partials/panel.html

@@ -16,6 +16,7 @@
 	<div class="panel-content">
 		<ng-transclude></ng-transclude>
 	</div>
+	<panel-resizer></panel-resizer>
 </div>
 
 <div class="panel-full-edit" ng-if="editMode">

public/css/less/panel.less

@@ -203,3 +203,13 @@
   top: 0;
   right: 0;
 }
+
+.resize-panel-handle {
+  cursor: se-resize;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 15px;
+  height: 15px;
+  display: block;
+}

public/vendor/angular-native-dragdrop/draganddrop.js

@@ -75,6 +75,10 @@
             function dragstartHandler(e) {
                 var isDragAllowed = !isDragHandleUsed || dragTarget.classList.contains(dragHandleClass);
 
+                if (dragTarget.classList.contains("resize-panel-handle")) {
+                  return;
+                }
+
                 if (isDragAllowed) {
                     var sendChannel = attrs.dragChannel || 'defaultchannel';
                     var dragData = '';