Draggable rework

src/core_plugins/kibana/public/visualize/editor/__tests__/draggable.js

@@ -7,7 +7,7 @@ let init;
 let $rootScope;
 let $compile;
 
-describe('draggable_* directives', function () {
+describe(`draggable_* directives`, function () {
 
   beforeEach(ngMock.module('kibana'));
   beforeEach(ngMock.inject(function ($injector) {
@@ -35,36 +35,36 @@ describe('draggable_* directives', function () {
     };
   }));
 
-  describe('draggable_container directive', function () {
-    it('should expose the drake', function () {
+  describe(`draggable_container directive`, function () {
+    it(`should expose the drake`, function () {
       const { $scope } = init();
       expect($scope.drake).to.be.an(Object);
     });
 
-    it('should expose the controller', function () {
+    it(`should expose the controller`, function () {
       const { $scope } = init();
       expect($scope.draggableContainerCtrl).to.be.an(Object);
     });
 
-    it('should pull item list from directive attribute', function () {
+    it(`should pull item list from directive attribute`, function () {
       const { $scope, $parentScope } = init();
       expect($scope.draggableContainerCtrl.getList()).to.eql($parentScope.items);
     });
 
-    it('should not be able to move extraneous DOM elements', function () {
+    it(`should not be able to move extraneous DOM elements`, function () {
       const bare = angular.element(`<div>`);
       const { $scope } = init();
       expect($scope.drake.canMove(bare[0])).to.eql(false);
     });
 
-    it('should not be able to move non-[draggable-item] elements', function () {
+    it(`should not be able to move non-[draggable-item] elements`, function () {
       const bare = angular.element(`<div>`);
       const { $scope, $elem } = init();
       $elem.append(bare);
       expect($scope.drake.canMove(bare[0])).to.eql(false);
     });
 
-    it('shouldn\'t be able to move extraneous [draggable-item] elements', function () {
+    it(`shouldn't be able to move extraneous [draggable-item] elements`, function () {
       const anotherParent = angular.element(`<div draggable-container="items">`);
       const item = angular.element(`<div draggable-item="items[0]">`);
       const scope = $rootScope.$new();
@@ -76,7 +76,7 @@ describe('draggable_* directives', function () {
       expect($scope.drake.canMove(item[0])).to.eql(false);
     });
 
-    it('shouldn\'t be able to move [draggable-item] if it has a handle', function () {
+    it(`shouldn't be able to move [draggable-item] if it has a handle`, function () {
       const { $scope, $elem } = init(`
         <div draggable-item="items[0]">
           <div draggable-handle></div>
@@ -86,7 +86,7 @@ describe('draggable_* directives', function () {
       expect($scope.drake.canMove(item[0])).to.eql(false);
     });
 
-    it('should be able to move [draggable-item] by its handle', function () {
+    it(`should be able to move [draggable-item] by its handle`, function () {
       const { $scope, $elem } = init(`
         <div draggable-item="items[0]">
           <div draggable-handle></div>
@@ -97,8 +97,8 @@ describe('draggable_* directives', function () {
     });
   });
 
-  describe('draggable_item', function () {
-    it('should be required to be a child to [draggable-container]', function () {
+  describe(`draggable_item`, function () {
+    it(`should be required to be a child to [draggable-container]`, function () {
       const item = angular.element(`<div draggable-item="items[0]">`);
       const scope = $rootScope.$new();
       expect(() => {
@@ -108,7 +108,7 @@ describe('draggable_* directives', function () {
     });
   });
 
-  describe('draggable_handle', function () {
+  describe(`draggable_handle`, function () {
     it('should be required to be a child to [draggable-item]', function () {
       const handle = angular.element(`<div draggable-handle>`);
       const scope = $rootScope.$new();

src/core_plugins/kibana/public/visualize/editor/agg_group.html

@@ -3,7 +3,7 @@
     {{ groupName }}
   </div>
 
-  <div ng-class="groupName" draggable-container="vis.aggs" class="vis-editor-agg-group">
+  <div ng-class="groupName" draggable-container="group" class="vis-editor-agg-group">
     <!-- wrapper needed for nesting-indicator -->
     <div ng-repeat="agg in group" draggable-item="agg" class="vis-editor-agg-wrapper">
       <!-- agg.html - controls for aggregation -->

src/core_plugins/kibana/public/visualize/editor/agg_group.js

@@ -43,7 +43,16 @@ uiModules
       });
 
       $scope.$on('agg-drag-start', e => $scope.dragging = true);
-      $scope.$on('agg-drag-end', e => $scope.dragging = false);
+      $scope.$on('agg-drag-end', e => {
+        $scope.dragging = false;
+
+        //the aggs have been reordered in [group] and we need
+        //to apply that ordering to [vis.aggs]
+        const indexOffset = $scope.vis.aggs.indexOf($scope.group[0]);
+        _.forEach($scope.group, (agg, index) => {
+          _.move($scope.vis.aggs, agg, indexOffset + index);
+        });
+      });
     }
   };
 

src/core_plugins/kibana/public/visualize/editor/draggable_container.js

@@ -69,19 +69,34 @@ uiModules
         const list = $scope.draggableContainerCtrl.getList();
         const itemScope = $(el).scope();
         const item = itemScope.draggableItemCtrl.getItem();
-        const toIndex = getSiblingItemIndex(list, sibling);
+        const fromIndex = list.indexOf(item);
+        const siblingIndex = getItemIndexFromElement(list, sibling);
+
+        const toIndex = getTargetIndex(list, fromIndex, siblingIndex);
         _.move(list, item, toIndex);
       }
 
-      function getSiblingItemIndex(list, sibling) {
-        if (!sibling) { // means the item was dropped at the end of the list
+      function getTargetIndex(list, fromIndex, siblingIndex) {
+        if (siblingIndex === -1) {
+          // means the item was dropped at the end of the list
           return list.length - 1;
+        } else if (fromIndex < siblingIndex) {
+          // An item moving from a lower index to a higher index will offset the
+          // index of the earlier items by one.
+          return siblingIndex - 1;
         }
-        const siblingScope = $(sibling).scope();
-        const siblingItem = siblingScope.draggableItemCtrl.getItem();
-        const siblingIndex = list.indexOf(siblingItem);
         return siblingIndex;
       }
+
+      function getItemIndexFromElement(list, element) {
+        if (!element) return -1;
+
+        const scope = $(element).scope();
+        const item = scope.draggableItemCtrl.getItem();
+        const index = list.indexOf(item);
+
+        return index;
+      }
     }
   };
 

src/ui/public/styles/base.less

@@ -660,4 +660,4 @@ fieldset {
   }
 }
 
-@import (reference) "~dragula/dist/dragula.css";
+@import "~dragula/dist/dragula.css";