diff --git a/src/core_plugins/kibana/public/visualize/editor/__tests__/draggable.js b/src/core_plugins/kibana/public/visualize/editor/__tests__/draggable.js index d8673d30a42e4..33ac5281020fc 100644 --- a/src/core_plugins/kibana/public/visualize/editor/__tests__/draggable.js +++ b/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(`
`); 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(`
`); 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(`
`); const item = angular.element(`
`); 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(`
@@ -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(`
@@ -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(`
`); 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(`
`); const scope = $rootScope.$new(); diff --git a/src/core_plugins/kibana/public/visualize/editor/agg_group.html b/src/core_plugins/kibana/public/visualize/editor/agg_group.html index 98b12162d7c59..4aae422618a0f 100644 --- a/src/core_plugins/kibana/public/visualize/editor/agg_group.html +++ b/src/core_plugins/kibana/public/visualize/editor/agg_group.html @@ -3,7 +3,7 @@ {{ groupName }}
-
+
diff --git a/src/core_plugins/kibana/public/visualize/editor/agg_group.js b/src/core_plugins/kibana/public/visualize/editor/agg_group.js index 6bc2341d7df1d..87a8ecd12094b 100644 --- a/src/core_plugins/kibana/public/visualize/editor/agg_group.js +++ b/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); + }); + }); } }; diff --git a/src/core_plugins/kibana/public/visualize/editor/draggable_container.js b/src/core_plugins/kibana/public/visualize/editor/draggable_container.js index c4d7ba76ea2b8..b76dd18586452 100644 --- a/src/core_plugins/kibana/public/visualize/editor/draggable_container.js +++ b/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; + } } }; diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index 8c29ccfa539cb..f678b3cc8576f 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -660,4 +660,4 @@ fieldset { } } -@import (reference) "~dragula/dist/dragula.css"; +@import "~dragula/dist/dragula.css";