From 7a906ccf5c53ab549a6390094151afcb0140a01f Mon Sep 17 00:00:00 2001 From: Shefali Joshi Date: Thu, 30 Apr 2020 13:00:43 -0700 Subject: [PATCH] Preview condition styles on selecting that condition or one of it's styles (#2925) * Preview condition styles on selecting that condition or one of it's styles * Do not evaluate conditional styles in edit mode Co-authored-by: charlesh88 Co-authored-by: Andrew Henry --- src/plugins/condition/StyleRuleManager.js | 45 ++++++++++-- .../inspector/ConditionalStylesView.vue | 68 +++++++++++++++++-- .../inspector/conditional-styles.scss | 25 +++++++ .../mixins/objectStyles-mixin.js | 2 +- src/ui/components/ObjectView.vue | 2 +- 5 files changed, 129 insertions(+), 13 deletions(-) diff --git a/src/plugins/condition/StyleRuleManager.js b/src/plugins/condition/StyleRuleManager.js index 6d99190f5c..f371bf8026 100644 --- a/src/plugins/condition/StyleRuleManager.js +++ b/src/plugins/condition/StyleRuleManager.js @@ -23,10 +23,13 @@ import EventEmitter from 'EventEmitter'; export default class StyleRuleManager extends EventEmitter { - constructor(styleConfiguration, openmct, callback) { + constructor(styleConfiguration, openmct, callback, suppressSubscriptionOnEdit) { super(); this.openmct = openmct; this.callback = callback; + if (suppressSubscriptionOnEdit) { + this.openmct.editor.on('isEditing', this.toggleSubscription.bind(this)); + } if (styleConfiguration) { this.initialize(styleConfiguration); if (styleConfiguration.conditionSetIdentifier) { @@ -37,9 +40,25 @@ export default class StyleRuleManager extends EventEmitter { } } + toggleSubscription(isEditing) { + this.isEditing = isEditing; + if (this.isEditing) { + if (this.stopProvidingTelemetry) { + this.stopProvidingTelemetry(); + } + if (this.conditionSetIdentifier) { + this.applySelectedConditionStyle(); + } + } else if (this.conditionSetIdentifier) { + this.subscribeToConditionSet(); + } + } + initialize(styleConfiguration) { this.conditionSetIdentifier = styleConfiguration.conditionSetIdentifier; this.staticStyle = styleConfiguration.staticStyle; + this.selectedConditionId = styleConfiguration.selectedConditionId; + this.defaultConditionId = styleConfiguration.defaultConditionId; this.updateConditionStylesMap(styleConfiguration.styles || []); } @@ -54,7 +73,7 @@ export default class StyleRuleManager extends EventEmitter { this.handleConditionSetResultUpdated(output[0]); } }); - this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, output => this.handleConditionSetResultUpdated(output)); + this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this)); }); } @@ -66,9 +85,13 @@ export default class StyleRuleManager extends EventEmitter { let isNewConditionSet = !this.conditionSetIdentifier || !this.openmct.objects.areIdsEqual(this.conditionSetIdentifier, styleConfiguration.conditionSetIdentifier); this.initialize(styleConfiguration); - //Only resubscribe if the conditionSet has changed. - if (isNewConditionSet) { - this.subscribeToConditionSet(); + if (this.isEditing) { + this.applySelectedConditionStyle(); + } else { + //Only resubscribe if the conditionSet has changed. + if (isNewConditionSet) { + this.subscribeToConditionSet(); + } } } } @@ -103,6 +126,16 @@ export default class StyleRuleManager extends EventEmitter { } } + applySelectedConditionStyle() { + const conditionId = this.selectedConditionId || this.defaultConditionId; + if (!conditionId) { + this.applyStaticStyle(); + } else if (this.conditionalStyleMap[conditionId]) { + this.currentStyle = this.conditionalStyleMap[conditionId]; + this.updateDomainObjectStyle(); + } + } + applyStaticStyle() { if (this.staticStyle) { this.currentStyle = this.staticStyle.style; @@ -123,6 +156,8 @@ export default class StyleRuleManager extends EventEmitter { } delete this.stopProvidingTelemetry; this.conditionSetIdentifier = undefined; + this.isEditing = undefined; + this.callback = undefined; } } diff --git a/src/plugins/condition/components/inspector/ConditionalStylesView.vue b/src/plugins/condition/components/inspector/ConditionalStylesView.vue index 1d5e0a171f..0d88d551cc 100644 --- a/src/plugins/condition/components/inspector/ConditionalStylesView.vue +++ b/src/plugins/condition/components/inspector/ConditionalStylesView.vue @@ -79,6 +79,8 @@
{ - if ((key !== 'styles') && + const keyIsItemId = (key !== 'styles') && (key !== 'staticStyle') && - (key !== 'conditionSetIdentifier')) { + (key !== 'defaultConditionId') && + (key !== 'selectedConditionId') && + (key !== 'conditionSetIdentifier'); + if (keyIsItemId) { if (!(newItems.find(item => item.id === key))) { itemsToRemove.push(key); } @@ -324,6 +348,9 @@ export default { } let conditionalStyles = []; this.conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => { + if (conditionConfiguration.isDefault) { + this.selectedConditionId = conditionConfiguration.id; + } this.conditions[conditionConfiguration.id] = conditionConfiguration; let foundStyle = this.findStyleByConditionId(conditionConfiguration.id); if (foundStyle) { @@ -339,7 +366,27 @@ export default { //we're doing this so that we remove styles for any conditions that have been removed from the condition set this.conditionalStyles = conditionalStyles; this.conditionsLoaded = true; - this.persist(this.getDomainObjectConditionalStyle()); + this.persist(this.getDomainObjectConditionalStyle(this.selectedConditionId)); + if (!this.isEditing) { + this.subscribeToConditionSet(); + } + }, + subscribeToConditionSet() { + if (this.stopProvidingTelemetry) { + this.stopProvidingTelemetry(); + } + if (this.conditionSetDomainObject) { + this.openmct.telemetry.request(this.conditionSetDomainObject) + .then(output => { + if (output && output.length) { + this.handleConditionSetResultUpdated(output[0]); + } + }); + this.stopProvidingTelemetry = this.openmct.telemetry.subscribe(this.conditionSetDomainObject, this.handleConditionSetResultUpdated.bind(this)); + } + }, + handleConditionSetResultUpdated(resultData) { + this.selectedConditionId = resultData ? resultData.conditionId : ''; }, initializeStaticStyle(objectStyles) { let staticStyle = objectStyles && objectStyles.staticStyle; @@ -364,14 +411,19 @@ export default { let found = this.findStyleByConditionId(conditionStyle.conditionId); if (found) { found.style = conditionStyle.style; + this.selectedConditionId = found.conditionId; this.persist(this.getDomainObjectConditionalStyle()); } }, - getDomainObjectConditionalStyle() { + getDomainObjectConditionalStyle(defaultConditionId) { let objectStyle = { styles: this.conditionalStyles, - staticStyle: this.staticStyle + staticStyle: this.staticStyle, + selectedConditionId: this.selectedConditionId }; + if (defaultConditionId) { + objectStyle.defaultConditionId = defaultConditionId; + } if (this.conditionSetDomainObject) { objectStyle.conditionSetIdentifier = this.conditionSetDomainObject.identifier; } @@ -393,6 +445,10 @@ export default { getCondition(id) { return this.conditions ? this.conditions[id] : {}; }, + applySelectedConditionStyle(conditionId) { + this.selectedConditionId = conditionId; + this.persist(this.getDomainObjectConditionalStyle()); + }, persist(style) { this.openmct.objects.mutate(this.domainObject, 'configuration.objectStyles', style); } diff --git a/src/plugins/condition/components/inspector/conditional-styles.scss b/src/plugins/condition/components/inspector/conditional-styles.scss index 4033d27b01..bbcf2888c3 100644 --- a/src/plugins/condition/components/inspector/conditional-styles.scss +++ b/src/plugins/condition/components/inspector/conditional-styles.scss @@ -60,6 +60,31 @@ &__condition { @include discreteItem(); + border: 1px solid transparent; + pointer-events: none; // Prevent selecting when the object isn't being edited + + &.is-current { + $c: $colorBodyFg; + border-color: rgba($c, 0.5); + background: rgba($c, 0.2); + } + + .is-editing & { + cursor: pointer; + pointer-events: initial; + transition: $transOut; + + &:hover { + background: rgba($colorBodyFg, 0.1); + transition: $transIn; + } + + &.is-current { + $c: $editUIColorBg; + border-color: $c; + background: rgba($c, 0.1); + } + } } .c-style { diff --git a/src/plugins/displayLayout/mixins/objectStyles-mixin.js b/src/plugins/displayLayout/mixins/objectStyles-mixin.js index ebdfab7b5f..cda33a7480 100644 --- a/src/plugins/displayLayout/mixins/objectStyles-mixin.js +++ b/src/plugins/displayLayout/mixins/objectStyles-mixin.js @@ -52,7 +52,7 @@ export default { }, initObjectStyles() { if (!this.styleRuleManager) { - this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this)); + this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this), true); } else { this.styleRuleManager.updateObjectStyleConfig(this.objectStyle); } diff --git a/src/ui/components/ObjectView.vue b/src/ui/components/ObjectView.vue index c6cc21861e..f16c35bef3 100644 --- a/src/ui/components/ObjectView.vue +++ b/src/ui/components/ObjectView.vue @@ -201,7 +201,7 @@ export default { }, initObjectStyles() { if (!this.styleRuleManager) { - this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this)); + this.styleRuleManager = new StyleRuleManager((this.currentObject.configuration && this.currentObject.configuration.objectStyles), this.openmct, this.updateStyle.bind(this), true); } else { this.styleRuleManager.updateObjectStyleConfig(this.currentObject.configuration && this.currentObject.configuration.objectStyles); }