Store styles for telemetry on domain objects

src/plugins/displayLayout/components/TelemetryView.vue

@@ -37,7 +37,7 @@
             v-if="showLabel"
             class="c-telemetry-view__label"
             :class="[styleClass]"
-            :style="objectStyle"
+            :style="telemetryObjectStyle"
         >
             <div class="c-telemetry-view__label-text">
                 {{ domainObject.name }}
@@ -49,7 +49,7 @@
             :title="fieldName"
             class="c-telemetry-view__value"
             :class="[telemetryClass, !telemetryClass && styleClass]"
-            :style="!telemetryClass && objectStyle"
+            :style="!telemetryClass && telemetryObjectStyle"
         >
             <div class="c-telemetry-view__value-text">
                 {{ telemetryValue }}
@@ -62,7 +62,7 @@
 <script>
 import LayoutFrame from './LayoutFrame.vue'
 import printj from 'printj'
-import StyleRuleManager from "../../condition/StyleRuleManager";
+import conditionalStylesMixin from "@/plugins/displayLayout/mixins/objectlStyles-mixin";
 
 const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
     DEFAULT_POSITION = [1, 1],
@@ -91,6 +91,7 @@ export default {
     components: {
         LayoutFrame
     },
+    mixins: [conditionalStylesMixin],
     props: {
         item: {
             type: Object,
@@ -113,8 +114,7 @@ export default {
             datum: undefined,
             formats: undefined,
             domainObject: undefined,
-            currentObjectPath: undefined,
+            currentObjectPath: undefined
-            objectStyle: ''
         }
     },
     computed: {
@@ -135,7 +135,19 @@ export default {
             }
         },
         styleClass() {
-            return this.objectStyle && this.objectStyle.isStyleInvisible;
+            return this.telemetryObjectStyle && this.telemetryObjectStyle.isStyleInvisible;
+        },
+        telemetryObjectStyle() {
+            let styleObj = Object.assign({}, this.itemStyle);
+            let keys = Object.keys(styleObj);
+            keys.forEach(key => {
+                if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
+                    if (styleObj[key]) {
+                        styleObj[key] = '';
+                    }
+                }
+            });
+            return styleObj;
         },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;
@@ -190,15 +202,6 @@ export default {
             this.removeSelectable();
         }
 
-        if (this.unlistenStyles) {
-            this.unlistenStyles();
-        }
-
-        if (this.styleRuleManager) {
-            this.styleRuleManager.destroy();
-            delete this.styleRuleManager;
-        }
-
         this.openmct.time.off("bounds", this.refreshData);
     },
     methods: {
@@ -241,7 +244,6 @@ export default {
         },
         setObject(domainObject) {
             this.domainObject = domainObject;
-            this.initObjectStyles();
             this.keyString = this.openmct.objects.makeKeyString(domainObject.identifier);
             this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
             this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.domainObject);
@@ -266,30 +268,6 @@ export default {
         },
         showContextMenu(event) {
             this.openmct.contextMenu._showContextMenuForObjectPath(this.currentObjectPath, event.x, event.y, CONTEXT_MENU_ACTIONS);
-        },
-        initObjectStyles() {
-            if (this.domainObject.configuration) {
-                this.styleRuleManager = new StyleRuleManager(this.domainObject.configuration.objectStyles, this.openmct, this.updateStyle.bind(this));
-
-                if (this.unlistenStyles) {
-                    this.unlistenStyles();
-                }
-                this.unlistenStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
-                    //Updating object styles in the inspector view will trigger this so that the changes are reflected immediately
-                    this.styleRuleManager.updateObjectStyleConfig(newObjectStyle);
-                });
-            }
-        },
-        updateStyle(styleObj) {
-            let keys = Object.keys(styleObj);
-            keys.forEach(key => {
-                if ((typeof styleObj[key] === 'string') && (styleObj[key].indexOf('transparent') > -1)) {
-                    if (styleObj[key]) {
-                        styleObj[key] = '';
-                    }
-                }
-            });
-            this.objectStyle = styleObj;
         }
     }
 }

src/plugins/displayLayout/mixins/objectlStyles-mixin.js

@@ -8,9 +8,9 @@ export default {
         }
     },
     mounted() {
-        this.domainObject = this.$parent.domainObject;
+        this.parentDomainObject = this.$parent.domainObject;
         this.itemId = this.item.id;
-        this.objectStyle = this.getObjectStyleForItem(this.domainObject.configuration.objectStyles);
+        this.objectStyle = this.getObjectStyleForItem(this.parentDomainObject.configuration.objectStyles);
         this.initObjectStyles();
     },
     destroyed() {
@@ -37,7 +37,7 @@ export default {
                 this.stopListeningObjectStyles();
             }
 
-            this.stopListeningObjectStyles = this.openmct.objects.observe(this.domainObject, 'configuration.objectStyles', (newObjectStyle) => {
+            this.stopListeningObjectStyles = this.openmct.objects.observe(this.parentDomainObject, 'configuration.objectStyles', (newObjectStyle) => {
                 //Updating object styles in the inspector view will trigger this so that the changes are reflected immediately
                 let newItemObjectStyle = this.getObjectStyleForItem(newObjectStyle);
                 if (this.objectStyle !== newItemObjectStyle) {

src/ui/inspector/StylesInspectorView.vue

@@ -43,12 +43,10 @@ export default {
                     isChildItem = true;
                     //If there are more than 1 items in the selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
                     //The second item in the selection[0] list is the container object (usually a layout)
-                    if (!domainObject) {
+                    styleProps = {};
-                        styleProps = {};
+                    layoutItem = selection[0][0].context.layoutItem;
-                        layoutItem = selection[0][0].context.layoutItem;
+                    styleProps = this.getStyleProperties(layoutItem);
-                        styleProps = this.getStyleProperties(layoutItem);
+                    domainObject = selection[0][1].context.item;
-                        domainObject = selection[0][1].context.item;
-                    }
                 }
 
                 if (this.component) {