[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/DisplayLayoutToolbar.js

@@ -125,11 +125,41 @@ define([], function () {
                 let separator = {
                     control: "separator"
                 };
+                let remove = {
+                    control: "button",
+                    domainObject: selectedParent,
+                    icon: "icon-trash",
+                    title: "Delete the selected object",
+                    method: function () {
+                        let removeItem = selection[1].context.removeItem;
+                        let prompt = openmct.overlays.dialog({
+                            iconClass: 'alert',
+                            message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
+                            buttons: [
+                                {
+                                    label: 'Ok',
+                                    emphasis: 'true',
+                                    callback: function () {
+                                        removeItem(layoutItem, layoutItemIndex);
+                                        prompt.dismiss();
+                                    }
+                                },
+                                {
+                                    label: 'Cancel',
+                                    callback: function () {
+                                        prompt.dismiss();
+                                    }
+                                }
+                            ]
+                        });
+                    }
+                };
 
                 if (layoutItem.type === 'subobject-view') {
                     if (toolbar.length > 0) {
                         toolbar.push(separator);
                     }
+
                     toolbar.push({
                         control: "toggle-button",
                         domainObject: selectedParent,
@@ -147,6 +177,8 @@ define([], function () {
                             }
                         ]
                     });
+                    toolbar.push(separator);
+                    toolbar.push(remove);
                 } else {
                     const TEXT_SIZE = [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96];
                     let fill = {
@@ -263,7 +295,9 @@ define([], function () {
                             x,
                             y,
                             height,
-                            width
+                            width,
+                            separator,
+                            remove
                         ];
                     } else if (layoutItem.type === 'text-view' ) {
                         let text = {
@@ -286,7 +320,9 @@ define([], function () {
                             height,
                             width,
                             separator,
-                            text
+                            text,
+                            separator,
+                            remove
                         ];
                     } else if (layoutItem.type === 'box-view') {
                         toolbar = [
@@ -296,7 +332,9 @@ define([], function () {
                             x,
                             y,
                             height,
-                            width
+                            width,
+                            separator,
+                            remove
                         ];
                     } else if (layoutItem.type === 'image-view') {
                         let url = {
@@ -315,7 +353,9 @@ define([], function () {
                             height,
                             width,
                             separator,
-                            url
+                            url,
+                            separator,
+                            remove
                         ];
                     } else if (layoutItem.type === 'line-view') {
                         let x2 = {
@@ -340,7 +380,9 @@ define([], function () {
                             x,
                             y,
                             x2,
-                            y2
+                            y2,
+                            separator,
+                            remove
                         ];
                     }
                 }

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,
+                this.$el, this.context, this.initSelect);
-                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,
+                this.$el, this.context, this.initSelect);
-                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) {

src/plugins/displayLayout/plugin.js

@@ -60,7 +60,8 @@ export default function () {
                     getSelectionContext() {
                         return {
                             item: domainObject,
-                            addElement: component && component.$refs.displayLayout.addElement
+                            addElement: component && component.$refs.displayLayout.addElement,
+                            removeItem: component && component.$refs.displayLayout.removeItem
                         }
                     },
                     destroy() {

src/ui/inspector/Elements.vue

@@ -155,6 +155,7 @@ export default {
         }
     },
     destroyed() {
+        this.openmct.selection.off('change', this.showSelection);
     }
 }
 </script>