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);
}