diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js index a30c10dd98..e889de072d 100644 --- a/src/plugins/displayLayout/DisplayLayoutToolbar.js +++ b/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 ]; } } diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue index 0a9bb359c8..0aeace04c6 100644 --- a/src/plugins/displayLayout/components/BoxView.vue +++ b/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) { diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue index dbdf12d208..b7b48c92a0 100644 --- a/src/plugins/displayLayout/components/DisplayLayout.vue +++ b/src/plugins/displayLayout/components/DisplayLayout.vue @@ -40,6 +40,7 @@ { + 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() { diff --git a/src/plugins/displayLayout/components/ImageView.vue b/src/plugins/displayLayout/components/ImageView.vue index 17fa360f54..0288e0cc3c 100644 --- a/src/plugins/displayLayout/components/ImageView.vue +++ b/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) { diff --git a/src/plugins/displayLayout/components/LineView.vue b/src/plugins/displayLayout/components/LineView.vue index e61be65c76..92bb36ab4e 100644 --- a/src/plugins/displayLayout/components/LineView.vue +++ b/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) { diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue index a0af30b700..1c2d9557f4 100644 --- a/src/plugins/displayLayout/components/SubobjectView.vue +++ b/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); }, diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 5dedfad635..359ee7967a 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/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() { diff --git a/src/plugins/displayLayout/components/TextView.vue b/src/plugins/displayLayout/components/TextView.vue index 22b62d8c9e..d1c69ecfeb 100644 --- a/src/plugins/displayLayout/components/TextView.vue +++ b/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) { diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js index a50d6bf2df..fb694c4455 100644 --- a/src/plugins/displayLayout/plugin.js +++ b/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() { diff --git a/src/ui/inspector/Elements.vue b/src/ui/inspector/Elements.vue index 2967f543f6..be81e6d6ca 100644 --- a/src/ui/inspector/Elements.vue +++ b/src/ui/inspector/Elements.vue @@ -155,6 +155,7 @@ export default { } }, destroyed() { + this.openmct.selection.off('change', this.showSelection); } }