[Display Layout] Add delete button (#2251)

* Add delete button in the toolbar for removing items

* Mutate composition if there are no telemetry objects. Select the parent layout after deleting an item.

* Saving work

* Watch for index in the components and update it in the context.

* Select the parent after a composition is removed.

* Address reviewer's feedback.
- Rename mutatComposition() to removeFromComposition().
- Inline logic for filtering composition
- Use separate branches for each item type in trackItem().

* Address reviewer's requested changes

src/plugins/displayLayout/components/BoxView.vue

@@ -75,16 +75,22 @@
                 };
             }
         },
+        watch: {
+            index(newIndex) {
+                if (!this.context) {
+                    return;
+                }
+
+                this.context.index = newIndex;
+            }
+        },
         mounted() {
-            let context = {
+            this.context = {
                 layoutItem: this.item,
                 index: this.index
             };
             this.removeSelectable = this.openmct.selection.selectable(
-                this.$el,
-                context,
-                this.initSelect
-            );
+                this.$el, this.context, this.initSelect);
         },
         destroyed() {
             if (this.removeSelectable) {

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -40,6 +40,7 @@
             <component v-for="(item, index) in layoutItems"
                 :is="item.type"
                 :item="item"
+                :key="item.id"
                 :gridSize="gridSize"
                 :initSelect="initSelectIndex === index"
                 :index="index"
@@ -226,6 +227,7 @@
             addItem(itemType, ...options) {
                 let item = getItemDefinition(itemType, this.openmct, this.gridSize, ...options);
                 item.type = itemType;
+                item.id = uuid();
                 this.trackItem(item);
                 this.layoutItems.push(item);
                 this.openmct.objects.mutate(this.internalDomainObject, "configuration.items", this.layoutItems);
@@ -233,11 +235,46 @@
             },
             trackItem(item) {
                 if (item.type === "telemetry-view") {
-                    this.telemetryViewMap[this.openmct.objects.makeKeyString(item.identifier)] = true;
+                    let keyString = this.openmct.objects.makeKeyString(item.identifier);
+                    let count = this.telemetryViewMap[keyString] || 0;
+                    this.telemetryViewMap[keyString] = ++count;
                 } else if (item.type === "subobject-view") {
                     this.objectViewMap[this.openmct.objects.makeKeyString(item.identifier)] = true;
                 }
             },
+            removeItem(item, index) {
+                this.initSelectIndex = -1;
+                this.layoutItems.splice(index, 1);
+                this.mutate("configuration.items", this.layoutItems);
+                this.untrackItem(item);
+                this.$el.click();
+            },
+            untrackItem(item) {
+                if (!item.identifier) {
+                    return;
+                }
+
+                let keyString = this.openmct.objects.makeKeyString(item.identifier);
+
+                if (item.type === 'telemetry-view') {
+                    let count = --this.telemetryViewMap[keyString];
+
+                    if (count === 0) {
+                        delete this.telemetryViewMap[keyString];
+                        this.removeFromComposition(keyString);
+                    }
+                } else if (item.type === 'subobject-view') {
+                    delete this.objectViewMap[keyString];
+                    this.removeFromComposition(keyString);
+                }
+            },
+            removeFromComposition(keyString) {
+                let composition = _.get(this.internalDomainObject, 'composition');
+                composition = composition.filter(identifier => {
+                    return this.openmct.objects.makeKeyString(identifier) !== keyString;
+                });
+                this.mutate("composition", composition);
+            },
             initializeItems() {
                 this.telemetryViewMap = {};
                 this.objectViewMap = {};
@@ -254,7 +291,26 @@
                 }
             },
             removeChild(identifier) {
-                // TODO: implement
+                let keyString = this.openmct.objects.makeKeyString(identifier);
+
+                if (this.objectViewMap[keyString]) {
+                    delete this.objectViewMap[keyString];
+                    this.removeFromConfiguration(keyString);
+                } else if (this.telemetryViewMap[keyString]) {
+                    delete this.telemetryViewMap[keyString];
+                    this.removeFromConfiguration(keyString);
+                }
+            },
+            removeFromConfiguration(keyString) {
+                let layoutItems = this.layoutItems.filter(item => {
+                    if (!item.identifier) {
+                        return true;
+                    } else {
+                        return this.openmct.objects.makeKeyString(item.identifier) !== keyString;
+                    }
+                });
+                this.mutate("configuration.items", layoutItems);
+                this.$el.click();
             }
         },
         mounted() {

src/plugins/displayLayout/components/ImageView.vue

@@ -77,13 +77,22 @@
                 }
             }
         },
+        watch: {
+            index(newIndex) {
+                if (!this.context) {
+                    return;
+                }
+
+                this.context.index = newIndex;
+            }
+        },
         mounted() {
-            let context = {
+            this.context = {
                 layoutItem: this.item,
                 index: this.index
             };
             this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, context, this.initSelect);
+                this.$el, this.context, this.initSelect);
         },
         destroyed() {
             if (this.removeSelectable) {

src/plugins/displayLayout/components/LineView.vue

@@ -210,17 +210,22 @@
                 return dragPosition;
             }
         },
+        watch: {
+            index(newIndex) {
+                if (!this.context) {
+                    return;
+                }
+
+                this.context.index = newIndex;
+            }
+        },
         mounted() {
-            let context = {
+            this.context = {
                 layoutItem: this.item,
                 index: this.index
             };
-
             this.removeSelectable = this.openmct.selection.selectable(
-                this.$el,
-                context,
-                this.initSelect
-            );
+                this.$el, this.context, this.initSelect);
         },
         destroyed() {
             if (this.removeSelectable) {

src/plugins/displayLayout/components/SubobjectView.vue

@@ -85,21 +85,29 @@
             ObjectFrame,
             LayoutFrame
         },
+        watch: {
+            index(newIndex) {
+                if (!this.context) {
+                    return;
+                }
+
+                this.context.index = newIndex;
+            }
+        },
         methods: {
             setObject(domainObject) {
                 this.domainObject = domainObject;
                 this.objectPath = [this.domainObject].concat(this.openmct.router.path);
-                let context = {
+                this.context = {
                     item: domainObject,
                     layoutItem: this.item,
                     index: this.index
                 };
                 this.removeSelectable = this.openmct.selection.selectable(
-                    this.$el, context, this.initSelect);
+                    this.$el, this.context, this.initSelect);
             }
         },
         mounted() {
-            console.log(this.item);
             this.openmct.objects.get(this.item.identifier)
                 .then(this.setObject);
         },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -160,6 +160,15 @@
                 domainObject: undefined
             }
         },
+        watch: {
+            index(newIndex) {
+                if (!this.context) {
+                    return;
+                }
+
+                this.context.index = newIndex;
+            }
+        },
         methods: {
             requestHistoricalData() {
                 let bounds = this.openmct.time.bounds();
@@ -205,13 +214,13 @@
                 this.requestHistoricalData();
                 this.subscribeToObject();
 
-                let context = {
+                this.context = {
                     item: domainObject,
                     layoutItem: this.item,
                     index: this.index
                 };
                 this.removeSelectable = this.openmct.selection.selectable(
-                    this.$el, context, this.initSelect);
+                    this.$el, this.context, this.initSelect);
             }
         },
         mounted() {

src/plugins/displayLayout/components/TextView.vue

@@ -82,13 +82,22 @@
                 };
             }
         },
+        watch: {
+            index(newIndex) {
+                if (!this.context) {
+                    return;
+                }
+
+                this.context.index = newIndex;
+            }
+        },
         mounted() {
-            let context = {
+            this.context = {
                 layoutItem: this.item,
                 index: this.index
             };
             this.removeSelectable = this.openmct.selection.selectable(
-                this.$el, context, this.initSelect);
+                this.$el, this.context, this.initSelect);
         },
         destroyed() {
             if (this.removeSelectable) {