From 4084a1ac869855f5811c6c22de5deef145d3370b Mon Sep 17 00:00:00 2001
From: Andrew Henry <andrew.k.henry@nasa.gov>
Date: Fri, 11 Jan 2019 11:20:57 -0800
Subject: [PATCH] Drag and drop fixes (#2249)

* Drag-drop edit mode from capture handler. Drag-drop composition from bubble handler. Check composability on drag start

* Show drop hints without being in edit mode.

* Don't serialize objects twice on drag
---
 src/api/Editor.js                             |  5 ++++
 .../components/DisplayLayout.vue              |  4 +--
 .../flexibleLayout/components/container.vue   |  6 ++--
 .../flexibleLayout/components/dropHint.vue    |  6 +---
 src/plugins/flexibleLayout/plugin.js          |  1 +
 .../src/controllers/EntryController.js        |  2 +-
 .../src/controllers/NotebookController.js     |  4 +--
 src/plugins/tabs/components/tabs.vue          |  2 +-
 src/ui/components/ObjectLabel.vue             |  7 ++++-
 src/ui/components/ObjectView.vue              | 29 +++++++++----------
 10 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/src/api/Editor.js b/src/api/Editor.js
index b0814080a7..3d1b98c48f 100644
--- a/src/api/Editor.js
+++ b/src/api/Editor.js
@@ -28,6 +28,11 @@ export default class Editor extends EventEmitter {
         super();
         this.editing = false;
         this.openmct = openmct;
+        document.addEventListener('drop', (event) => {
+            if (!this.isEditing()) {
+                this.edit();
+            }
+        }, {capture: true});
     }
 
     /**
diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue
index 967e0d9d5d..5adfd7bc92 100644
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -177,13 +177,13 @@
                 this.openmct.objects.mutate(this.internalDomainObject, path, value);
             },
             handleDrop($event) {
-                if (!$event.dataTransfer.types.includes('domainobject')) {
+                if (!$event.dataTransfer.types.includes('openmct/domain-object')) {
                     return;
                 }
 
                 $event.preventDefault();
 
-                let domainObject = JSON.parse($event.dataTransfer.getData('domainobject'));
+                let domainObject = JSON.parse($event.dataTransfer.getData('openmct/domain-object'));
                 let elementRect = this.$el.getBoundingClientRect();
                 let droppedObjectPosition = [
                     Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
diff --git a/src/plugins/flexibleLayout/components/container.vue b/src/plugins/flexibleLayout/components/container.vue
index e7c17d0d5f..8639319c5d 100644
--- a/src/plugins/flexibleLayout/components/container.vue
+++ b/src/plugins/flexibleLayout/components/container.vue
@@ -100,7 +100,7 @@ export default {
     },
     methods: {
         allowDrop(event, index) {
-            if (event.dataTransfer.getData('domainObject')) {
+            if (event.dataTransfer.getData('openmct/domain-object')) {
                 return true;
             }
             let frameId = event.dataTransfer.getData('frameid'),
@@ -124,9 +124,9 @@ export default {
             }
         },
         moveOrCreateFrame(insertIndex, event) {
-            if (event.dataTransfer.types.includes('domainobject')) {
+            if (event.dataTransfer.types.includes('openmct/domain-object')) {
                 // create frame using domain object
-                let domainObject = JSON.parse(event.dataTransfer.getData('domainObject'));
+                let domainObject = JSON.parse(event.dataTransfer.getData('openmct/domain-object'));
                 this.$emit(
                     'create-frame',
                     this.index,
diff --git a/src/plugins/flexibleLayout/components/dropHint.vue b/src/plugins/flexibleLayout/components/dropHint.vue
index b5adf11db3..328fd9fa1c 100644
--- a/src/plugins/flexibleLayout/components/dropHint.vue
+++ b/src/plugins/flexibleLayout/components/dropHint.vue
@@ -21,8 +21,7 @@
  *****************************************************************************/
 
 <template>
-    <div v-if="isEditing"
-         v-show="isValidTarget">
+    <div v-show="isValidTarget">
         <div class="c-drop-hint c-drop-hint--always-show"
              :class="{'is-mouse-over': isMouseOver}"
              @dragenter="dragenter"
@@ -37,8 +36,6 @@
 </style>
 
 <script>
-import isEditingMixin from '../mixins/isEditing';
-
 export default {
     props:{
         index: Number,
@@ -47,7 +44,6 @@ export default {
             required: true
         }
     },
-    mixins: [isEditingMixin],
     data() {
         return {
             isMouseOver: false,
diff --git a/src/plugins/flexibleLayout/plugin.js b/src/plugins/flexibleLayout/plugin.js
index 38a0bd8592..61ee9ba2cf 100644
--- a/src/plugins/flexibleLayout/plugin.js
+++ b/src/plugins/flexibleLayout/plugin.js
@@ -44,6 +44,7 @@ define([
                         containers: [new Container.default(50), new Container.default(50)],
                         rowsLayout: false
                     };
+                    domainObject.composition = [];
                 }
             });
 
diff --git a/src/plugins/notebook/src/controllers/EntryController.js b/src/plugins/notebook/src/controllers/EntryController.js
index 92f6bd98cd..758790cf5e 100644
--- a/src/plugins/notebook/src/controllers/EntryController.js
+++ b/src/plugins/notebook/src/controllers/EntryController.js
@@ -107,7 +107,7 @@ function (
 
     EntryController.prototype.dropOnEntry = function (entryid, event) {
 
-        var data = event.dataTransfer.getData('domainObject');
+        var data = event.dataTransfer.getData('openmct/domain-object');
 
         if (data) {
             var selectedObject = JSON.parse(data),
diff --git a/src/plugins/notebook/src/controllers/NotebookController.js b/src/plugins/notebook/src/controllers/NotebookController.js
index bf2deccf2b..0d9b91f7ba 100644
--- a/src/plugins/notebook/src/controllers/NotebookController.js
+++ b/src/plugins/notebook/src/controllers/NotebookController.js
@@ -120,8 +120,8 @@ function (
         var date = Date.now(),
             embed;
 
-        if (event.dataTransfer && event.dataTransfer.getData('domainObject')) {
-            var selectedObject = JSON.parse(event.dataTransfer.getData('domainObject')),
+        if (event.dataTransfer && event.dataTransfer.getData('openmct/domain-object')) {
+            var selectedObject = JSON.parse(event.dataTransfer.getData('openmct/domain-object')),
                 selectedObjectId = selectedObject.identifier.key,
                 cssClass = this.openmct.types.get(selectedObject.type);
 
diff --git a/src/plugins/tabs/components/tabs.vue b/src/plugins/tabs/components/tabs.vue
index 0122ea7303..d13cace7ad 100644
--- a/src/plugins/tabs/components/tabs.vue
+++ b/src/plugins/tabs/components/tabs.vue
@@ -147,7 +147,7 @@ export default {
             this.setCurrentTab = true;
         },
         dragstart (e) {
-            if (e.dataTransfer.getData('domainObject')) {
+            if (e.dataTransfer.getData('openmct/domain-object')) {
                 this.isDragging = true;
             }
         },
diff --git a/src/ui/components/ObjectLabel.vue b/src/ui/components/ObjectLabel.vue
index 9199138ac2..289880862c 100644
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@@ -44,7 +44,12 @@ export default {
     },
     methods: {
         dragStart(event) {
-            event.dataTransfer.setData("domainObject", JSON.stringify(this.observedObject));
+            let navigatedObject = this.openmct.router.path[0];
+            let serializedObject = JSON.stringify(this.observedObject);
+            if (this.openmct.composition.checkPolicy(navigatedObject, this.observedObject)) {
+                event.dataTransfer.setData("openmct/composable-domain-object", serializedObject);
+            }
+            event.dataTransfer.setData("openmct/domain-object", serializedObject);
         }
     }
 }
diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue
index c4c867e446..f809247dee 100644
--- a/src/ui/components/ObjectView.vue
+++ b/src/ui/components/ObjectView.vue
@@ -88,26 +88,25 @@ export default {
             this.updateView(immediatelySelect);
         },
         onDragOver(event) {
-            event.preventDefault();
+            if (this.hasComposableDomainObject(event)) {
+                event.preventDefault();
+            }
         },
         onDrop(event) {
-            let parentObject = this.currentObject;
-            let d = event.dataTransfer.getData("domainObject");
-
-            if (d) {
-                let childObject = JSON.parse(d);
-
-                if (this.openmct.composition.checkPolicy(parentObject, childObject)){
-                    if (!this.openmct.editor.isEditing() && parentObject.type !== 'folder'){
-                        this.openmct.editor.edit();
-                    }
-                    parentObject.composition.push(childObject.identifier);
-                    this.openmct.objects.mutate(parentObject, 'composition', parentObject.composition);
-                }
-
+            if (this.hasComposableDomainObject(event)) {
+                let composableDomainObject = this.getComposableDomainObject(event);
+                this.currentObject.composition.push(composableDomainObject.identifier);
+                this.openmct.objects.mutate(this.currentObject, 'composition', this.currentObject.composition);
                 event.preventDefault();
                 event.stopPropagation();
             }
+        },
+        hasComposableDomainObject(event) {
+            return event.dataTransfer.types.includes('openmct/composable-domain-object')
+        },
+        getComposableDomainObject(event) {
+            let serializedDomainObject = event.dataTransfer.getData('openmct/composable-domain-object');
+            return JSON.parse(serializedDomainObject);
         }
     }
 }