diff --git a/src/plugins/plot/pluginSpec.js b/src/plugins/plot/pluginSpec.js index 800c5479df..56d15434ad 100644 --- a/src/plugins/plot/pluginSpec.js +++ b/src/plugins/plot/pluginSpec.js @@ -571,6 +571,34 @@ describe("the plugin", function () { range: 2 } }] + }, + configuration: { + objectStyles: { + staticStyle: { + style: { + backgroundColor: 'rgb(0, 200, 0)', + color: '', + border: '' + } + }, + conditionSetIdentifier: { + namespace: '', + key: 'testConditionSetId' + }, + selectedConditionId: 'conditionId1', + defaultConditionId: 'conditionId1', + styles: [ + { + conditionId: 'conditionId1', + style: { + backgroundColor: 'rgb(0, 155, 0)', + color: '', + output: '', + border: '' + } + } + ] + } } }; @@ -815,6 +843,20 @@ describe("the plugin", function () { }); }); + it("shows styles for telemetry objects if available", (done) => { + Vue.nextTick(() => { + let conditionalStylesContainer = element.querySelectorAll(".c-plot--stacked-container .js-style-receiver"); + let hasStyles = 0; + conditionalStylesContainer.forEach(el => { + if (el.style.backgroundColor !== '') { + hasStyles++; + } + }); + expect(hasStyles).toBe(1); + done(); + }); + }); + describe('limits', () => { it('lines are not displayed by default', () => { diff --git a/src/plugins/plot/stackedPlot/StackedPlotItem.vue b/src/plugins/plot/stackedPlot/StackedPlotItem.vue index 713ce00f64..c47dacba42 100644 --- a/src/plugins/plot/stackedPlot/StackedPlotItem.vue +++ b/src/plugins/plot/stackedPlot/StackedPlotItem.vue @@ -26,8 +26,10 @@ import MctPlot from '../MctPlot.vue'; import Vue from "vue"; +import conditionalStylesMixin from "./mixins/objectStyles-mixin"; export default { + mixins: [conditionalStylesMixin], inject: ['openmct', 'domainObject', 'path'], props: { object: { diff --git a/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js new file mode 100644 index 0000000000..524d6b1566 --- /dev/null +++ b/src/plugins/plot/stackedPlot/mixins/objectStyles-mixin.js @@ -0,0 +1,143 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2022, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ + +import StyleRuleManager from "@/plugins/condition/StyleRuleManager"; +import {STYLE_CONSTANTS} from "@/plugins/condition/utils/constants"; + +export default { + inject: ['openmct', 'domainObject', 'path'], + data() { + return { + objectStyle: undefined + }; + }, + mounted() { + this.objectStyles = this.getObjectStyleForItem(this.object.configuration); + this.initObjectStyles(); + }, + beforeDestroy() { + if (this.stopListeningStyles) { + this.stopListeningStyles(); + } + + if (this.styleRuleManager) { + this.styleRuleManager.destroy(); + } + }, + methods: { + getObjectStyleForItem(config) { + if (config && config.objectStyles) { + return config.objectStyles ? Object.assign({}, config.objectStyles) : undefined; + } else { + return undefined; + } + }, + initObjectStyles() { + if (!this.styleRuleManager) { + this.styleRuleManager = new StyleRuleManager(this.objectStyles, this.openmct, this.updateStyle.bind(this), true); + } else { + this.styleRuleManager.updateObjectStyleConfig(this.objectStyles); + } + + if (this.stopListeningStyles) { + this.stopListeningStyles(); + } + + this.stopListeningStyles = this.openmct.objects.observe(this.object, 'configuration.objectStyles', (newObjectStyle) => { + //Updating styles in the inspector view will trigger this so that the changes are reflected immediately + this.styleRuleManager.updateObjectStyleConfig(newObjectStyle); + }); + + if (this.object && this.object.configuration && this.object.configuration.fontStyle) { + const { fontSize, font } = this.object.configuration.fontStyle; + this.setFontSize(fontSize); + this.setFont(font); + } + + this.stopListeningFontStyles = this.openmct.objects.observe(this.object, 'configuration.fontStyle', (newFontStyle) => { + this.setFontSize(newFontStyle.fontSize); + this.setFont(newFontStyle.font); + }); + }, + getStyleReceiver() { + let styleReceiver; + + if (this.$el !== undefined) { + styleReceiver = this.$el.querySelector('.js-style-receiver') + || this.$el.querySelector(':first-child'); + + if (styleReceiver === null) { + styleReceiver = undefined; + } + } + + return styleReceiver; + }, + setFontSize(newSize) { + let elemToStyle = this.getStyleReceiver(); + + if (elemToStyle !== undefined) { + elemToStyle.dataset.fontSize = newSize; + } + }, + setFont(newFont) { + let elemToStyle = this.getStyleReceiver(); + + if (elemToStyle !== undefined) { + elemToStyle.dataset.font = newFont; + } + }, + updateStyle(styleObj) { + let elemToStyle = this.getStyleReceiver(); + + if (!styleObj || elemToStyle === undefined) { + return; + } + + let keys = Object.keys(styleObj); + + keys.forEach(key => { + if (elemToStyle) { + if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('__no_value') > -1)) { + if (elemToStyle.style[key]) { + elemToStyle.style[key] = ''; + } + } else { + if (!styleObj.isStyleInvisible && elemToStyle.classList.contains(STYLE_CONSTANTS.isStyleInvisible)) { + elemToStyle.classList.remove(STYLE_CONSTANTS.isStyleInvisible); + } else if (styleObj.isStyleInvisible && !elemToStyle.classList.contains(styleObj.isStyleInvisible)) { + elemToStyle.classList.add(styleObj.isStyleInvisible); + } + + elemToStyle.style[key] = styleObj[key]; + } + } + }); + + if (this.object && this.object.type === 'conditionWidget' && keys.includes('output')) { + this.openmct.objects.mutate(this.object, 'conditionalLabel', styleObj.output); + } else { + this.openmct.objects.mutate(this.object, 'conditionalLabel', ''); + } + } + } +};