[Selection] support getting object view's selection context (#2272)

* Get selection context from object view for constructing the context in subobject view.

* Implement getSelectionContext for flexible layout provider and remove code that makes flexible layout self selectable.

* Get selection context from object frame when constructing context for frames.

* Disable Add button when selected parent is a flexible layout

* Make 'Add' button working for selected display layouts in a flexible layout.

* fix expand error and fix flexible layout toggle container issue

* Check for parent object before getting composition.

src/plugins/displayLayout/components/SubobjectView.vue

@@ -26,7 +26,8 @@
         <object-frame v-if="domainObject"
                       :domain-object="domainObject"
                       :object-path="objectPath"
-                      :has-frame="item.hasFrame">
+                      :has-frame="item.hasFrame"
+                      ref="objectFrame">
         </object-frame>
     </layout-frame>
 </template>
@@ -98,13 +99,15 @@
             setObject(domainObject) {
                 this.domainObject = domainObject;
                 this.objectPath = [this.domainObject].concat(this.openmct.router.path);
-                this.context = {
+                this.$nextTick(function () {
-                    item: domainObject,
+                    let childContext = this.$refs.objectFrame.getSelectionContext();
-                    layoutItem: this.item,
+                    childContext.item = domainObject;
-                    index: this.index
+                    childContext.layoutItem = this.item;
-                };
+                    childContext.index = this.index;
-                this.removeSelectable = this.openmct.selection.selectable(
+                    this.context = childContext;
-                    this.$el, this.context, this.initSelect);
+                    this.removeSelectable = this.openmct.selection.selectable(
+                        this.$el, this.context, this.initSelect);
+                });
             }
         },
         mounted() {

src/plugins/flexibleLayout/components/frame.vue

@@ -35,7 +35,8 @@
                 v-if="domainObject"
                 :domain-object="domainObject"
                 :object-path="objectPath"
-                :has-frame="hasFrame">
+                :has-frame="hasFrame"
+                ref="objectFrame">
             </object-frame>
 
             <div class="c-fl-frame__size-indicator"
@@ -78,14 +79,14 @@ export default {
             this.setSelection();
         },
         setSelection() {
-            let context = {
+            this.$nextTick(function () {
-                item: this.domainObject,
+                let childContext = this.$refs.objectFrame.getSelectionContext();
-                addContainer: this.addContainer,
+                childContext.item = this.domainObject;
-                type: 'frame',
+                childContext.type = 'frame';
-                frameId: this.frame.id
+                childContext.frameId = this.frame.id;
-            };
+                this.unsubscribeSelection = this.openmct.selection.selectable(
-
+                    this.$refs.frame, childContext, false);
-            this.unsubscribeSelection = this.openmct.selection.selectable(this.$refs.frame, context, false);
+            });
         },
         initDrag(event) {
             let type = this.openmct.types.get(this.domainObject.type),

src/plugins/flexibleLayout/toolbarProvider.js

@@ -53,7 +53,7 @@ function ToolbarProvider(openmct) {
             toggleContainer = {
                 control: 'toggle-button',
                 key: 'toggle-layout',
-                domainObject: secondary ? secondary.context.item : primary.context.item,
+                domainObject: primary.context.item,
                 property: 'configuration.rowsLayout',
                 options: [
                     {
@@ -140,6 +140,8 @@ function ToolbarProvider(openmct) {
                     title: 'Add Container'
                 };
 
+                toggleContainer.domainObject = secondary.context.item;
+
             } else if (primary.context.type === 'container') {
 
                 deleteContainer = {

src/ui/components/ObjectFrame.vue

@@ -129,6 +129,10 @@
             objectPath: Array,
             hasFrame: Boolean,
         },
+        components: {
+            ObjectView,
+            ContextMenuDropDown,
+        },
         methods: {
             expand() {
                 let objectView = this.$refs.objectView,
@@ -142,12 +146,11 @@
                         parentElement.append(childElement);
                     }
                 });
+            },
+            getSelectionContext() {
+                return this.$refs.objectView.getSelectionContext();
             }
         },
-        components: {
-            ObjectView,
-            ContextMenuDropDown,
-        },
         data() {
             let objectType = this.openmct.types.get(this.domainObject.type),
                 cssClass = objectType && objectType.definition ? objectType.definition.cssClass : 'icon-object-unknown',

src/ui/components/ObjectView.vue

@@ -40,6 +40,11 @@ export default {
             }
             delete this.viewContainer;
             delete this.currentView;
+
+            if (this.removeSelectable) {
+                this.removeSelectable();
+                delete this.removeSelectable;
+            }
         },
         updateView(immediatelySelect) {
             this.clear();
@@ -61,12 +66,7 @@ export default {
 
             if (immediatelySelect) {
                 this.removeSelectable = openmct.selection.selectable(
-                    this.$el,
+                    this.$el, this.getSelectionContext(), true);
-                    this.currentView.getSelectionContext ?
-                        this.currentView.getSelectionContext() :
-                        { item: this.currentObject },
-                    true
-                );
             }
         },
         show(object, viewKey, immediatelySelect) {
@@ -87,6 +87,13 @@ export default {
             this.viewKey = viewKey;
             this.updateView(immediatelySelect);
         },
+        getSelectionContext() {
+            if (this.currentView.getSelectionContext) {
+                return this.currentView.getSelectionContext();
+            } else {
+                return { item: this.currentObject };
+            }
+        },
         onDragOver(event) {
             if (this.hasComposableDomainObject(event)) {
                 event.preventDefault();

src/ui/inspector/Inspector.vue

@@ -235,7 +235,7 @@
                 if (selection[0]) {
                     let parentObject = selection[0].context.item;
 
-                    this.hasComposition = !!this.openmct.composition.get(parentObject);
+                    this.hasComposition = !!(parentObject && this.openmct.composition.get(parentObject));
                 }
             }
         },