From 6ab60ab52e8e908a76b32b4c8227a1fc798fb792 Mon Sep 17 00:00:00 2001 From: Joshi Date: Mon, 16 Mar 2020 15:00:16 -0700 Subject: [PATCH 1/3] ConditionSet view listens to a listener from conditionCollection to display current output. --- src/plugins/condition/ConditionManager.js | 11 +---------- .../condition/components/ConditionCollection.vue | 3 +++ src/plugins/condition/components/ConditionSet.vue | 11 ++--------- 3 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/plugins/condition/ConditionManager.js b/src/plugins/condition/ConditionManager.js index e10237e062..a74ff2230f 100644 --- a/src/plugins/condition/ConditionManager.js +++ b/src/plugins/condition/ConditionManager.js @@ -34,7 +34,7 @@ export default class ConditionManager extends EventEmitter { this.initialize(); this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDomainObject) => { - this.update(newDomainObject); + this.conditionSetDomainObject = newDomainObject; }); } @@ -48,15 +48,6 @@ export default class ConditionManager extends EventEmitter { } } - update(newDomainObject) { - this.destroy(); - this.conditionSetDomainObject = newDomainObject; - this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDO) => { - this.update(newDO); - }); - this.initialize(); - } - updateCondition(conditionConfiguration, index) { let condition = this.conditionClassCollection[index]; condition.update(conditionConfiguration); diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue index af0dfa2a84..a775b4b9d1 100644 --- a/src/plugins/condition/components/ConditionCollection.vue +++ b/src/plugins/condition/components/ConditionCollection.vue @@ -121,6 +121,9 @@ export default { this.conditionCollection = this.domainObject.configuration.conditionCollection; this.observeForChanges(); this.conditionManager = new ConditionManager(this.domainObject, this.openmct); + this.conditionManager.on('conditionSetResultUpdated', (data) => { + this.$emit('conditionSetResultUpdated', data); + }) }, methods: { observeForChanges() { diff --git a/src/plugins/condition/components/ConditionSet.vue b/src/plugins/condition/components/ConditionSet.vue index 653fdd9985..3393707478 100644 --- a/src/plugins/condition/components/ConditionSet.vue +++ b/src/plugins/condition/components/ConditionSet.vue @@ -34,7 +34,8 @@ - + @@ -58,7 +59,6 @@ export default { }, mounted() { this.conditionSetIdentifier = this.openmct.objects.makeKeyString(this.domainObject.identifier); - this.provideTelemetry(); }, beforeDestroy() { if (this.stopProvidingTelemetry) { @@ -68,13 +68,6 @@ export default { methods: { updateCurrentOutput(currentConditionResult) { this.currentConditionOutput = currentConditionResult.output; - }, - provideTelemetry() { - if (this.stopProvidingTelemetry) { - this.stopProvidingTelemetry(); - } - this.stopProvidingTelemetry = this.openmct.telemetry - .subscribe(this.domainObject, output => { this.updateCurrentOutput(output); }); } } }; From e339d743ed44af436e229a84c3426f2a2ec90226 Mon Sep 17 00:00:00 2001 From: David Tsay Date: Mon, 16 Mar 2020 16:01:12 -0700 Subject: [PATCH 2/3] remove uneccessary update call --- src/plugins/condition/ConditionManager.js | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/src/plugins/condition/ConditionManager.js b/src/plugins/condition/ConditionManager.js index e10237e062..a74ff2230f 100644 --- a/src/plugins/condition/ConditionManager.js +++ b/src/plugins/condition/ConditionManager.js @@ -34,7 +34,7 @@ export default class ConditionManager extends EventEmitter { this.initialize(); this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDomainObject) => { - this.update(newDomainObject); + this.conditionSetDomainObject = newDomainObject; }); } @@ -48,15 +48,6 @@ export default class ConditionManager extends EventEmitter { } } - update(newDomainObject) { - this.destroy(); - this.conditionSetDomainObject = newDomainObject; - this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDO) => { - this.update(newDO); - }); - this.initialize(); - } - updateCondition(conditionConfiguration, index) { let condition = this.conditionClassCollection[index]; condition.update(conditionConfiguration); From 43a82ec05fe0782109bc5a648c204094a9069e1b Mon Sep 17 00:00:00 2001 From: Shefali Joshi Date: Tue, 17 Mar 2020 14:42:15 -0700 Subject: [PATCH 3/3] Conditional styles for drawing objects (#2740) * Hardcoded prototype - conditional styles for display layout or generator domain objects only. * Adds background colors list * Show conditional styles for subObjectViews and telemetryViews * Uses telemetry provider to determine which style is active * Removes hardcoded conditionSet work used for prototype * Add default styles to conditionalStyles when a condition set is added to the domain object. * Use EventEmitter alias instead of eventEmitter3 in imports * Change StyleRuleManager to accept conditionStyle objects instead of domainObjects * Uses a map for conditional styles instead of a list in order to improve performance * Use in-built api to check for identifier equality * Removes unnecessary object get call. * Adds conditional styles for drawing objects * Removes hard coded conditionSetIdentifier * Fixes small conditionManager bug --- src/plugins/condition/ConditionManager.js | 13 +-- src/plugins/condition/StyleRuleManager.js | 7 +- .../components/inspector/ConditionalStyle.vue | 51 +++++++- .../inspector/ConditionalStylesView.vue | 109 +++++++++++++----- src/plugins/condition/utils/styleUtils.js | 19 +++ .../displayLayout/components/BoxView.vue | 14 ++- .../displayLayout/components/ImageView.vue | 4 +- .../displayLayout/components/LineView.vue | 12 +- .../displayLayout/components/TextView.vue | 18 ++- .../mixins/conditionalStyles-mixin.js | 54 +++++++++ src/ui/components/ObjectView.vue | 2 + src/ui/inspector/StylesInspectorView.vue | 28 ++++- 12 files changed, 266 insertions(+), 65 deletions(-) create mode 100644 src/plugins/condition/utils/styleUtils.js create mode 100644 src/plugins/displayLayout/mixins/conditionalStyles-mixin.js diff --git a/src/plugins/condition/ConditionManager.js b/src/plugins/condition/ConditionManager.js index a74ff2230f..da9c7535fb 100644 --- a/src/plugins/condition/ConditionManager.js +++ b/src/plugins/condition/ConditionManager.js @@ -135,18 +135,7 @@ export default class ConditionManager extends EventEmitter { } findConditionById(id) { - let found; - for (let i=0, ii=this.conditionClassCollection.length; i < ii; i++) { - if (this.conditionClassCollection[i].id === id) { - found = { - item: this.conditionClassCollection[i], - index: i - }; - break; - } - } - - return found; + return this.conditionClassCollection.find(conditionClass => conditionClass.id === id); } //this.$set(this.conditionClassCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]); diff --git a/src/plugins/condition/StyleRuleManager.js b/src/plugins/condition/StyleRuleManager.js index 972e8b58a7..09c2c98172 100644 --- a/src/plugins/condition/StyleRuleManager.js +++ b/src/plugins/condition/StyleRuleManager.js @@ -34,7 +34,6 @@ export default class StyleRuleManager extends EventEmitter { initialize(conditionalStyleConfiguration) { this.conditionSetIdentifier = conditionalStyleConfiguration.conditionSetIdentifier; - this.defaultStyle = conditionalStyleConfiguration.defaultStyle; this.updateConditionStylesMap(conditionalStyleConfiguration.styles || []); } @@ -89,7 +88,11 @@ export default class StyleRuleManager extends EventEmitter { } destroy() { - this.currentStyle = this.defaultStyle; + if (this.currentStyle) { + Object.keys(this.currentStyle).forEach(key => { + this.currentStyle[key] = 'inherit'; + }); + } this.updateDomainObjectStyle(); if (this.stopProvidingTelemetry) { this.stopProvidingTelemetry(); diff --git a/src/plugins/condition/components/inspector/ConditionalStyle.vue b/src/plugins/condition/components/inspector/ConditionalStyle.vue index 51389ec435..8e762ac575 100644 --- a/src/plugins/condition/components/inspector/ConditionalStyle.vue +++ b/src/plugins/condition/components/inspector/ConditionalStyle.vue @@ -1,28 +1,69 @@ diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue index fb4de9a38f..8965b311c5 100644 --- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue +++ b/src/plugins/condition/components/inspector/ConditionalStylesView.vue @@ -23,8 +23,8 @@
  • -
    • @@ -41,21 +41,33 @@ export default { }, inject: [ 'openmct', - 'domainObject', - 'layoutItem' + 'domainObject' ], + props: { + itemId: { + type: String, + default: '' + }, + initialStyles: { + type: Object, + default() { + return undefined; + } + } + }, data() { return { conditionalStyles: [] } }, mounted() { - if (this.layoutItem) { - //TODO: Handle layout items - } - if (this.domainObject.configuration) { - this.defautStyle = this.domainObject.configuration.defaultStyle; - if (this.domainObject.configuration.conditionalStyle) { + if (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) { + if (this.itemId) { + let conditionalStyle = this.domainObject.configuration.conditionalStyle[this.itemId]; + if (conditionalStyle) { + this.conditionalStyles = conditionalStyle.styles || []; + } + } else { this.conditionalStyles = this.domainObject.configuration.conditionalStyle.styles || []; } } @@ -65,49 +77,86 @@ export default { //TODO: this.conditionSetIdentifier will be set by the UI before calling this this.conditionSetIdentifier = { namespace: '', - key: 'bb0f61ad-268d-4d3e-bb30-90ca4a2053c4' + key: "81088c8a-4b80-41fe-9d07-fda8b22d6f5f" }; this.initializeConditionalStyles(); }, removeConditionSet() { + //TODO: Handle the case where domainObject has items with styles but we're trying to remove the styles on the domainObject itself this.conditionSetIdentifier = ''; this.conditionalStyles = []; - this.persist(undefined); + let domainObjectConditionalStyle = (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) || {}; + if (domainObjectConditionalStyle) { + if (this.itemId) { + domainObjectConditionalStyle[this.itemId] = undefined; + delete domainObjectConditionalStyle[this.itemId]; + } else { + domainObjectConditionalStyle.conditionSetIdentifier = undefined; + delete domainObjectConditionalStyle.conditionSetIdentifier; + domainObjectConditionalStyle.styles = undefined; + delete domainObjectConditionalStyle.styles; + } + if (_.isEmpty(domainObjectConditionalStyle)) { + domainObjectConditionalStyle = undefined; + } + } + + this.persist(domainObjectConditionalStyle); + }, initializeConditionalStyles() { - const backgroundColors = [{backgroundColor: 'red'},{backgroundColor: 'orange'}, {backgroundColor: 'blue'}]; this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => { conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => { this.conditionalStyles.push({ conditionId: conditionConfiguration.id, conditionName: conditionConfiguration.name, - style: backgroundColors[index] + style: Object.assign({}, this.initialStyles) }); }); - this.persist({ - defaultStyle: this.defaultStyle || {backgroundColor: 'inherit'}, + let domainObjectConditionalStyle = (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) || {}; + let conditionalStyle = { conditionSetIdentifier: this.conditionSetIdentifier, styles: this.conditionalStyles - }); + }; + if (this.itemId) { + this.persist({ + ...domainObjectConditionalStyle, + [this.itemId]: conditionalStyle + }); + } else { + this.persist({ + ...domainObjectConditionalStyle, + ...conditionalStyle + }); + } }); }, findStyleByConditionId(id) { - for(let i=0, ii=this.conditionalStyles.length; i < ii; i++) { - if (this.conditionalStyles[i].conditionId === id) { - return { - index: i, - item: this.conditionalStyles[i] - }; + return this.conditionalStyles.find(conditionalStyle => conditionalStyle.conditionId === id); + }, + updateConditionalStyle(conditionStyle) { + let found = this.findStyleByConditionId(conditionStyle.conditionId); + if (found) { + found.style = conditionStyle.style; + let domainObjectConditionalStyle = this.domainObject.configuration.conditionalStyle || {}; + + if (this.itemId) { + let itemConditionalStyle = domainObjectConditionalStyle[this.itemId]; + if (itemConditionalStyle) { + this.persist({ + ...domainObjectConditionalStyle, + [this.itemId]: { + ...itemConditionalStyle, + styles: this.conditionalStyles + } + }); + } + } else { + domainObjectConditionalStyle.styles = this.conditionalStyles; + this.persist(domainObjectConditionalStyle); } } }, - updateConditionalStyle(conditionId, style) { - let found = this.findStyleByConditionId(conditionId); - if (found) { - this.conditionalStyles[found.index].style = style; - } - this.persist(undefined); - }, persist(conditionalStyle) { this.openmct.objects.mutate(this.domainObject, 'configuration.conditionalStyle', conditionalStyle); } diff --git a/src/plugins/condition/utils/styleUtils.js b/src/plugins/condition/utils/styleUtils.js new file mode 100644 index 0000000000..c4c3525e69 --- /dev/null +++ b/src/plugins/condition/utils/styleUtils.js @@ -0,0 +1,19 @@ +export const getStyleProp = (key, defaultValue) => { + let styleProp = undefined; + switch(key) { + case 'fill': styleProp = { + backgroundColor: defaultValue || 'none' + }; + break; + case 'stroke': styleProp = { + border: '1px solid ' + defaultValue || 'none' + }; + break; + case 'color': styleProp = { + color: defaultValue || 'inherit' + }; + break; + } + + return styleProp; +}; diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue index 0214db0287..f1bf880ebd 100644 --- a/src/plugins/displayLayout/components/BoxView.vue +++ b/src/plugins/displayLayout/components/BoxView.vue @@ -36,6 +36,7 @@