Reorder api update (#2319)

* Added 'reorder' function to composition API

* Re-implemented reordering in Elements

* Make LAD table editable

* Remove test spec focus

* Fixing bugs with event listeners

* Clean up listeners properly in Elements pool

* Fixed race condition on drag-and-drop to initiate edit

* Implement reordering in LAD tables

* Reorder events emit full reorder plan

* Fixed failing specs

src/api/composition/CompositionAPISpec.js

@@ -98,18 +98,24 @@ define([
                     composition.reorder(1, 0);
                     let newComposition =
                         publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];
 
-                    expect(listener).toHaveBeenCalledWith(1, 0);
+                    expect(reorderPlan.oldIndex).toBe(1);
+                    expect(reorderPlan.newIndex).toBe(0);
                     expect(newComposition[0].key).toEqual('b');
                     expect(newComposition[1].key).toEqual('a');
+                    expect(newComposition[2].key).toEqual('c');
                 });
                 it('', function () {
                     composition.reorder(0, 2);
                     let newComposition =
                         publicAPI.objects.mutate.calls.mostRecent().args[2];
+                    let reorderPlan = listener.calls.mostRecent().args[0][0];
 
-                    expect(listener).toHaveBeenCalledWith(0, 2);
-                    expect(newComposition[0].key).toEqual('c');
+                    expect(reorderPlan.oldIndex).toBe(0);
+                    expect(reorderPlan.newIndex).toBe(2);
+                    expect(newComposition[0].key).toEqual('b');
+                    expect(newComposition[1].key).toEqual('c');
                     expect(newComposition[2].key).toEqual('a');
                 })
             });

src/api/composition/CompositionCollection.js

@@ -236,19 +236,15 @@ define([
      * @name remove
      */
     CompositionCollection.prototype.reorder = function (oldIndex, newIndex, skipMutate) {
-        if (!skipMutate) {
-            this.provider.reorder(this.domainObject, oldIndex, newIndex);
-        } else {
-            this.emit('reorder', oldIndex, newIndex);
-        }
+        this.provider.reorder(this.domainObject, oldIndex, newIndex);
     };
 
     /**
      * Handle reorder from provider.
      * @private
      */
-    CompositionCollection.prototype.onProviderReorder = function (oldIndex, newIndex) {
-        this.reorder(oldIndex, newIndex, true);
+    CompositionCollection.prototype.onProviderReorder = function (reorderMap) {
+        this.emit('reorder', reorderMap);
     };
 
     /**

src/api/composition/DefaultCompositionProvider.js

@@ -206,8 +206,32 @@ define([
 
     DefaultCompositionProvider.prototype.reorder = function (domainObject, oldIndex, newIndex) {
         let newComposition = domainObject.composition.slice();
-        newComposition[newIndex] = domainObject.composition[oldIndex];
-        newComposition[oldIndex] = domainObject.composition[newIndex];
+        let removeId = oldIndex > newIndex ? oldIndex + 1 : oldIndex;
+        let insertPosition = oldIndex < newIndex ? newIndex + 1 : newIndex;
+        //Insert object in new position
+        newComposition.splice(insertPosition, 0, domainObject.composition[oldIndex]);
+        newComposition.splice(removeId, 1);
+
+        let reorderPlan = [{
+            oldIndex,
+            newIndex
+        }];
+
+        if (oldIndex > newIndex) {
+            for (let i = newIndex; i < oldIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i + 1
+                });
+            }
+        } else {
+            for (let i = oldIndex + 1; i <= newIndex; i++) {
+                reorderPlan.push({
+                    oldIndex: i,
+                    newIndex: i - 1
+                });
+            }
+        }
         this.publicAPI.objects.mutate(domainObject, 'composition', newComposition);
 
         let id = objectUtils.makeKeyString(domainObject.identifier);
@@ -221,9 +245,9 @@ define([
 
         function notify(listener) {
             if (listener.context) {
-                listener.callback.call(listener.context, oldIndex, newIndex);
+                listener.callback.call(listener.context, reorderPlan);
             } else {
-                listener.callback(oldIndex, newIndex);
+                listener.callback(reorderPlan);
             }
         }
     };

src/plugins/LADTable/components/LADTable.vue

@@ -66,10 +66,11 @@ export default {
 
             this.items.splice(index, 1);
         },
-        reorder(oldIndex, newIndex) {
-            let objectAtOldIndex = this.items[oldIndex];
-            this.$set(this.items, oldIndex, this.items[newIndex]);
-            this.$set(this.items, newIndex, objectAtOldIndex);
+        reorder(reorderPlan) {
+            let oldItems = this.items.slice();
+            reorderPlan.forEach((reorderEvent) => {
+                this.$set(this.items, reorderEvent.newIndex, oldItems[reorderEvent.oldIndex]);
+            });
         }
     },
     mounted() {

src/plugins/LADTable/components/LadTableSet.vue

@@ -93,11 +93,11 @@
             this.primaryTelemetryObjects.splice(index,1);
             primary = undefined;
         },
-        reorderPrimary(oldIndex, newIndex) {
-            let objectAtOldIndex = this.primaryTelemetryObjects[oldIndex];
-            this.$set(this.primaryTelemetryObjects, oldIndex, this.primaryTelemetryObjects[newIndex]);
-            this.$set(this.primaryTelemetryObjects, newIndex, objectAtOldIndex);
-
+        reorderPrimary(reorderPlan) {
+            let oldComposition = this.primaryTelemetryObjects.slice();
+            reorderPlan.forEach(reorderEvent => {
+                this.$set(this.primaryTelemetryObjects, reorderEvent.newIndex, oldComposition[reorderEvent.oldIndex]);
+            });
         },
         addSecondary(primary) {
             return (domainObject) => {