ux(dashboard): improving drag and drop behavior!

public/app/features/dashboard/row/add_panel.html

@@ -8,7 +8,12 @@
 
   <div class="add-panel-panels-scroll">
     <div class="add-panel-panels">
-      <div class="add-panel-item" ng-repeat="panel in ctrl.panelHits" ng-class="{active: $index === ctrl.activeIndex}" ng-click="ctrl.addPanel(panel)">
+      <div class="add-panel-item"
+					ng-repeat="panel in ctrl.panelHits"
+					ng-class="{active: $index === ctrl.activeIndex}"
+					ng-click="ctrl.addPanel(panel)"
+					ui-draggable="ctrl.dashboard.editMode"
+					drag="panel.id">
         <img class="add-panel-item-img" ng-src="{{panel.info.logos.small}}"></img>
         <div class="add-panel-item-name">{{panel.name}}</div>
       </div>

public/app/features/dashboard/row/add_panel.ts

@@ -93,7 +93,6 @@ export class AddPanelCtrl {
       isNew: true,
     };
 
-    this.rowCtrl.dropView = 0;
     this.dashboard.addPanel(panel, this.row);
     this.$timeout(() => {
       this.$rootScope.$broadcast('render');

public/app/features/dashboard/row/row.html

@@ -53,7 +53,7 @@
 </div>
 
 <div class="panels-wrapper" ng-if="!ctrl.row.collapse">
-  <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="!ctrl.dashboard.meta.fullscreen" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
+  <div ng-repeat="panel in ctrl.row.panels track by panel.id" class="panel" ui-draggable="ctrl.dashboard.editMode" drag="panel.id" ui-on-drop="ctrl.onDrop($data, panel)" drag-handle-class="drag-handle" panel-width>
     <plugin-component type="panel" class="panel-margin">
     </plugin-component>
   </div>

public/app/features/dashboard/row/row.ts

@@ -26,21 +26,61 @@ export class DashRowCtrl {
   }
 
   onDrop(panelId, dropTarget) {
-    var info = this.dashboard.getPanelInfoById(panelId);
+    var dragObject;
+
+    // if string it's a panel type
+    if (_.isString(panelId)) {
+      // setup new panel
+      dragObject = {
+        row: this.row,
+        panel: {
+          title: config.new_panel_title,
+          type: panelId,
+          id: this.dashboard.getNextPanelId(),
+        },
+        isNew: true,
+      };
+    } else {
+      dragObject = this.dashboard.getPanelInfoById(panelId);
+    }
+
     if (dropTarget) {
-      var dropInfo = this.dashboard.getPanelInfoById(dropTarget.id);
-      dropInfo.row.panels[dropInfo.index] = info.panel;
-      info.row.panels[info.index] = dropTarget;
-      var dragSpan = info.panel.span;
-      info.panel.span = dropTarget.span;
-      dropTarget.span = dragSpan;
+      dropTarget = this.dashboard.getPanelInfoById(dropTarget.id);
+      // if draging new panel onto existing panel split it
+      if (dragObject.isNew) {
+        dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
+        // insert after
+        dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
+      } else if (this.row === dragObject.row) {
+        // just move element
+        this.row.movePanel(dropTarget.index, dragObject.index);
+      } else {
+        // split drop target space
+        dragObject.panel.span = dropTarget.panel.span = dropTarget.panel.span/2;
+        // insert after
+        dropTarget.row.panels.splice(dropTarget.index+1, 0, dragObject.panel);
+        // remove from source row
+        dragObject.row.removePanel(dragObject.panel);
+      }
+      // dropInfo.row.panels[dropInfo.index] = info.panel;
+      // info.row.panels[info.index] = dropTarget;
+      // var dragSpan = info.panel.span;
+      // info.panel.span = dropTarget.span;
+      // dropTarget.span = dragSpan;
     } else {
-      info.row.panels.splice(info.index, 1);
-      info.panel.span = 12 - this.dashboard.rowSpan(this.row);
-      this.row.panels.push(info.panel);
+      dragObject.panel.span = 12 - this.row.span;
+      this.row.panels.push(dragObject.panel);
+
+      // if not new remove from source row
+      if (!dragObject.isNew) {
+        dragObject.row.removePanel(dragObject.panel);
+      }
     }
 
-    this.$rootScope.$broadcast('render');
+    this.row.panelSpanChanged();
+    this.$timeout(() => {
+      this.$rootScope.$broadcast('render');
+    });
   }
 
   setHeight(height) {
@@ -216,16 +256,9 @@ coreModule.directive('panelDropZone', function($timeout) {
     scope.$on("ANGULAR_DRAG_START", function() {
       indrag = true;
       updateState();
-      // $timeout(function() {
-      //   var dropZoneSpan = 12 - scope.ctrl.dashboard.rowSpan(scope.ctrl.row);
-      //   if (dropZoneSpan > 0) {
-      //     showPanel(dropZoneSpan, 'Panel Drop Zone');
-      //   }
-      // });
     });
 
     scope.$on("ANGULAR_DRAG_END", function() {
-      console.log('drag end');
       indrag = false;
       updateState();
     });

public/app/features/dashboard/row/row_model.ts

@@ -22,7 +22,6 @@ export class DashboardRow {
   };
 
   constructor(private model) {
-    console.log(model.isNew);
     assignModelProperties(this, model, this.defaults);
     this.events = new Emitter();
     this.updateRowSpan();
@@ -63,6 +62,11 @@ export class DashboardRow {
         this.panels[0].span = 4;
         this.panels[1].span = 4;
         panel.span = 4;
+      } else if (panelCount === 3) {
+        this.panels[0].span = 3;
+        this.panels[1].span = 3;
+        this.panels[2].span = 3;
+        panel.span = 3;
       }
     }
 
@@ -78,5 +82,9 @@ export class DashboardRow {
     this.events.emit('panel-removed', panel);
     this.panelSpanChanged();
   }
+
+  movePanel(fromIndex, toIndex) {
+    this.panels.splice(toIndex, 0, this.panels.splice(fromIndex, 1)[0]);
+  }
 }