From 2dbb370955078089db6cd75b5e2c233cfc23ce97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 26 Jun 2015 18:45:23 +0200
Subject: [PATCH] Working on resize handle, drag to resize panels & rows

---
 public/app/features/dashboard/rowCtrl.js      |  4 +-
 public/app/features/panel/panelDirective.js   | 62 ++++++++++++++++++-
 public/app/features/panel/partials/panel.html |  1 +
 public/css/less/panel.less                    | 10 +++
 .../angular-native-dragdrop/draganddrop.js    |  4 ++
 5 files changed, 78 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/rowCtrl.js b/public/app/features/dashboard/rowCtrl.js
index c63017365bb..58005dc827d 100644
--- a/public/app/features/dashboard/rowCtrl.js
+++ b/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 });
       });
     };
   });
diff --git a/public/app/features/panel/panelDirective.js b/public/app/features/panel/panelDirective.js
index 7330bb627de..189ce5d731d 100644
--- a/public/app/features/panel/panelDirective.js
+++ b/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);
+          });
+        }
+      };
     });
+
 });
diff --git a/public/app/features/panel/partials/panel.html b/public/app/features/panel/partials/panel.html
index 6fbab9de70a..a7fef0f5d67 100644
--- a/public/app/features/panel/partials/panel.html
+++ b/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">
diff --git a/public/css/less/panel.less b/public/css/less/panel.less
index 6f011b2978f..8292ceb1267 100644
--- a/public/css/less/panel.less
+++ b/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;
+}
diff --git a/public/vendor/angular-native-dragdrop/draganddrop.js b/public/vendor/angular-native-dragdrop/draganddrop.js
index f45b47df4d9..2616241607b 100644
--- a/public/vendor/angular-native-dragdrop/draganddrop.js
+++ b/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 = '';