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

@@ -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});
     }
 
     /**

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]),

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,

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,

src/plugins/flexibleLayout/plugin.js

@@ -44,6 +44,7 @@ define([
                         containers: [new Container.default(50), new Container.default(50)],
                         rowsLayout: false
                     };
+                    domainObject.composition = [];
                 }
             });
 

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),

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);
 

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;
             }
         },

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);
         }
     }
 }

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);
         }
     }
 }