[Elements Pool][Flexible Layout] Improvements (#3694)

* fix flexible-layout bug

* abstract element item from elements pool

* improve dragging of elements pool

* better dragover handling in elements pool

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.com>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>

src/plugins/flexibleLayout/components/flexibleLayout.vue

@@ -271,11 +271,6 @@ export default {
             });
         },
         removeFromComposition(identifier) {
-            let keystring = this.openmct.objects.makeKeyString(identifier);
-
-            this.identifierMap[keystring] = undefined;
-            delete this.identifierMap[keystring];
-
             this.composition.remove({identifier});
         },
         setSelectionToParent() {
@@ -355,6 +350,9 @@ export default {
         removeChildObject(identifier) {
             let removeIdentifier = this.openmct.objects.makeKeyString(identifier);
 
+            this.identifierMap[removeIdentifier] = undefined;
+            delete this.identifierMap[removeIdentifier];
+
             this.containers.forEach(container => {
                 container.frames = container.frames.filter(frame => {
                     let frameIdentifier = this.openmct.objects.makeKeyString(frame.domainObjectIdentifier);

src/ui/inspector/ElementItem.vue

@@ -0,0 +1,96 @@
+<template>
+<li
+    draggable="true"
+    @dragstart="emitDragStartEvent"
+    @dragenter="onDragenter"
+    @dragover="onDragover"
+    @dragleave="onDragleave"
+    @drop="emitDropEvent"
+>
+    <div
+        class="c-tree__item c-elements-pool__item"
+        :class="{
+            'is-context-clicked': contextClickActive,
+            'hover': hover
+        }"
+    >
+        <span
+            class="c-elements-pool__grippy c-grippy c-grippy--vertical-drag"
+        ></span>
+        <object-label
+            :domain-object="elementObject"
+            :object-path="[elementObject, parentObject]"
+            @context-click-active="setContextClickState"
+        />
+    </div>
+</li>
+</template>
+
+<script>
+import ObjectLabel from '../components/ObjectLabel.vue';
+
+export default {
+    components: {
+        ObjectLabel
+    },
+    props: {
+        index: {
+            type: Number,
+            required: true,
+            default: () => {
+                return 0;
+            }
+        },
+        elementObject: {
+            type: Object,
+            required: true,
+            default: () => {
+                return {};
+            }
+        },
+        parentObject: {
+            type: Object,
+            required: true,
+            default: () => {
+                return {};
+            }
+        },
+        allowDrop: {
+            type: Boolean
+        }
+    },
+    data() {
+        return {
+            contextClickActive: false,
+            hover: false
+        };
+    },
+    methods: {
+        onDragover(event) {
+            event.preventDefault();
+        },
+        emitDropEvent(event) {
+            this.$emit('drop-custom', this.index);
+            this.hover = false;
+        },
+        emitDragStartEvent(event) {
+            this.$emit('dragstart-custom', this.index);
+        },
+        onDragenter(event) {
+            if (this.allowDrop) {
+                this.hover = true;
+                this.dragElement = event.target.parentElement;
+            }
+        },
+        onDragleave(event) {
+            if (event.target.parentElement === this.dragElement) {
+                this.hover = false;
+                delete this.dragElement;
+            }
+        },
+        setContextClickState(state) {
+            this.contextClickActive = state;
+        }
+    }
+};
+</script>

src/ui/inspector/ElementsPool.vue

@@ -8,34 +8,22 @@
     />
     <div
         class="c-elements-pool__elements"
-        :class="{'is-dragging': isDragging}"
     >
         <ul
             v-if="elements.length > 0"
             id="inspector-elements-tree"
             class="c-tree c-elements-pool__tree"
         >
-            <li
+            <element-item
                 v-for="(element, index) in elements"
                 :key="element.identifier.key"
-                @drop="moveTo(index)"
-                @dragover="allowDrop"
-            >
-                <div
-                    class="c-tree__item c-elements-pool__item"
-                    draggable="true"
-                    @dragstart="moveFrom(index)"
-                >
-                    <span
-                        v-if="elements.length > 1 && isEditing"
-                        class="c-elements-pool__grippy c-grippy c-grippy--vertical-drag"
-                    ></span>
-                    <object-label
-                        :domain-object="element"
-                        :object-path="[element, parentObject]"
-                    />
-                </div>
-            </li>
+                :index="index"
+                :element-object="element"
+                :parent-object="parentObject"
+                :allow-drop="allowDrop"
+                @dragstart-custom="moveFrom(index)"
+                @drop-custom="moveTo(index)"
+            />
             <li
                 class="js-last-place"
                 @drop="moveToIndex(elements.length)"
@@ -51,12 +39,12 @@
 <script>
 import _ from 'lodash';
 import Search from '../components/search.vue';
-import ObjectLabel from '../components/ObjectLabel.vue';
+import ElementItem from './ElementItem.vue';
 
 export default {
     components: {
         'Search': Search,
-        'ObjectLabel': ObjectLabel
+        'ElementItem': ElementItem
     },
     inject: ['openmct'],
     data() {
@@ -65,8 +53,9 @@ export default {
             isEditing: this.openmct.editor.isEditing(),
             parentObject: undefined,
             currentSearch: '',
-            isDragging: false,
-            selection: []
+            selection: [],
+            contextClickTracker: {},
+            allowDrop: false
         };
     },
     mounted() {
@@ -148,20 +137,15 @@ export default {
                     && element.name.toLowerCase().search(this.currentSearch) !== -1;
             });
         },
-        allowDrop(event) {
-            event.preventDefault();
-        },
         moveTo(moveToIndex) {
-            this.composition.reorder(this.moveFromIndex, moveToIndex);
+            if (this.allowDrop) {
+                this.composition.reorder(this.moveFromIndex, moveToIndex);
+                this.allowDrop = false;
+            }
         },
         moveFrom(index) {
-            this.isDragging = true;
+            this.allowDrop = true;
             this.moveFromIndex = index;
-            document.addEventListener('dragend', this.hideDragStyling);
-        },
-        hideDragStyling() {
-            this.isDragging = false;
-            document.removeEventListener('dragend', this.hideDragStyling);
         }
     }
 };

src/ui/inspector/Inspector.vue

@@ -29,7 +29,7 @@
                 handle="before"
                 label="Elements"
             >
-                <elements />
+                <elements-pool />
             </pane>
         </multipane>
         <multipane
@@ -55,7 +55,7 @@
 <script>
 import multipane from '../layout/multipane.vue';
 import pane from '../layout/pane.vue';
-import Elements from './Elements.vue';
+import ElementsPool from './ElementsPool.vue';
 import Location from './Location.vue';
 import Properties from './Properties.vue';
 import ObjectName from './ObjectName.vue';
@@ -71,7 +71,7 @@ export default {
         SavedStylesInspectorView,
         multipane,
         pane,
-        Elements,
+        ElementsPool,
         Properties,
         ObjectName,
         Location,

src/ui/inspector/elements.scss

@@ -15,9 +15,6 @@
     &__elements {
         flex: 1 1 auto;
         overflow: auto;
-        &.is-dragging {
-            li { opacity: 0.2; }
-        }
     }
 
     .c-grippy {
@@ -27,8 +24,16 @@
         transform: translateY(-2px);
         width: $d; height: $d;
     }
+
+    &.is-context-clicked {
+        box-shadow: inset $colorItemTreeSelectedBg 0 0 0 1px;
+    }
+
+    .hover {
+        background-color: $colorItemTreeSelectedBg;
+    }
 }
 
 .js-last-place {
     height: 10px;
-}
+}