mirror of
https://github.com/nasa/openmct.git
synced 2025-06-21 08:39:59 +00:00
Conditional styles (#2718)
* Hardcoded prototype - conditional styles for display layout or generator domain objects only. Needs Architectural review * Updates to ConditionalStylesView * 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 * Fixes failing test * Add default styles to conditionalStyles when a condition set is added to the domain object. * Use EventEmitter alias instead of eventEmitter3 in imports Change variable name for better readability and clarity Remove unused code * 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 Pass missing arguments * Removes unnecessary object get call.
This commit is contained in:
@ -36,6 +36,7 @@
|
||||
<div
|
||||
v-if="showLabel"
|
||||
class="c-telemetry-view__label"
|
||||
:style="conditionalStyle"
|
||||
>
|
||||
<div class="c-telemetry-view__label-text">
|
||||
{{ domainObject.name }}
|
||||
@ -47,6 +48,7 @@
|
||||
:title="fieldName"
|
||||
class="c-telemetry-view__value"
|
||||
:class="[telemetryClass]"
|
||||
:style="!telemetryClass && conditionalStyle"
|
||||
>
|
||||
<div class="c-telemetry-view__value-text">
|
||||
{{ telemetryValue }}
|
||||
@ -59,6 +61,7 @@
|
||||
<script>
|
||||
import LayoutFrame from './LayoutFrame.vue'
|
||||
import printj from 'printj'
|
||||
import StyleRuleManager from "../../condition/StyleRuleManager";
|
||||
|
||||
const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
|
||||
DEFAULT_POSITION = [1, 1],
|
||||
@ -109,7 +112,8 @@ export default {
|
||||
datum: undefined,
|
||||
formats: undefined,
|
||||
domainObject: undefined,
|
||||
currentObjectPath: undefined
|
||||
currentObjectPath: undefined,
|
||||
conditionalStyle: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -182,6 +186,16 @@ export default {
|
||||
this.removeSelectable();
|
||||
}
|
||||
|
||||
if (this.unlistenStyles) {
|
||||
this.unlistenStyles();
|
||||
}
|
||||
|
||||
if (this.styleRuleManager) {
|
||||
this.styleRuleManager.destroy();
|
||||
this.styleRuleManager.off('conditionalStyleUpdated', this.updateStyle.bind(this));
|
||||
delete this.styleRuleManager;
|
||||
}
|
||||
|
||||
this.openmct.time.off("bounds", this.refreshData);
|
||||
},
|
||||
methods: {
|
||||
@ -224,6 +238,7 @@ export default {
|
||||
},
|
||||
setObject(domainObject) {
|
||||
this.domainObject = domainObject;
|
||||
this.initConditionalStyles();
|
||||
this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
|
||||
this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
|
||||
this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
|
||||
@ -248,6 +263,21 @@ export default {
|
||||
},
|
||||
showContextMenu(event) {
|
||||
this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
|
||||
},
|
||||
initConditionalStyles() {
|
||||
this.styleRuleManager = new StyleRuleManager(this.domainObject.configuration.conditionalStyle, this.openmct);
|
||||
this.styleRuleManager.on('conditionalStyleUpdated', this.updateStyle.bind(this));
|
||||
|
||||
if (this.unlistenStyles) {
|
||||
this.unlistenStyles();
|
||||
}
|
||||
this.unlistenStyles = this.openmct.objects.observe(this.domainObject, 'configuration.conditionalStyle', (newConditionalStyle) => {
|
||||
//Updating conditional styles in the inspector view will trigger this so that the changes are reflected immediately
|
||||
this.styleRuleManager.updateConditionalStyleConfig(newConditionalStyle);
|
||||
});
|
||||
},
|
||||
updateStyle(styleObj) {
|
||||
this.conditionalStyle = styleObj;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user