Store telemetry styles on their container domain objects.

src/plugins/condition/components/inspector/ConditionalStylesView.vue

@@ -105,6 +105,7 @@ import ConditionDescription from "@/plugins/condition/components/ConditionDescri
 import ConditionError from "@/plugins/condition/components/ConditionError.vue";
 import Vue from 'vue';
 import PreviewAction from "@/ui/preview/PreviewAction.js";
+import { getStyleProp } from "@/plugins/condition/utils/styleUtils";
 
 export default {
     name: 'ConditionalStylesView',
@@ -115,24 +116,8 @@ export default {
     },
     inject: [
         'openmct',
-        'domainObject'
+        'selection'
     ],
-    props: {
-        itemId: {
-            type: String,
-            default: ''
-        },
-        initialStyles: {
-            type: Object,
-            default() {
-                return undefined;
-            }
-        },
-        canHide: {
-            type: Boolean,
-            default: false
-        }
-    },
     data() {
         return {
             conditionalStyles: [],
@@ -144,10 +129,28 @@ export default {
             navigateToPath: ''
         }
     },
+    watch: {
+        domainObject: {
+            handler(newDomainObject) {
+                this.domainObject = newDomainObject;
+            },
+            deep: true
+        }
+    },
     destroyed() {
-        this.openmct.editor.off('isEditing', this.setEditState);
+        if (this.stopObserving) {
+            this.stopObserving();
+        }
     },
     mounted() {
+        this.canHide = false;
+        this.itemId = '';
+        this.initialStyles = this.getStyleProperties({
+            fill: 'transparent',
+            stroke: 'transparent',
+            color: 'transparent'
+        });
+        this.getDomainObjectFromSelection();
         this.previewAction = new PreviewAction(this.openmct);
         if (this.domainObject.configuration && this.domainObject.configuration.objectStyles) {
             let objectStyles = this.itemId ? this.domainObject.configuration.objectStyles[this.itemId] : this.domainObject.configuration.objectStyles;
@@ -162,6 +165,46 @@ export default {
         this.openmct.editor.on('isEditing', this.setEditState);
     },
     methods: {
+        getStyleProperties(item) {
+            let styleProps = {};
+            Object.keys(item).forEach((key) => {
+                Object.assign(styleProps, getStyleProp(key, item[key]));
+            });
+            return styleProps;
+        },
+        getDomainObjectFromSelection() {
+            let layoutItem = {};
+            let domainObject;
+
+            if (this.selection[0].length > 1) {
+                //If there are more than 1 items in the this.selection[0] list, the first one could either be a sub domain object OR a layout drawing control.
+                //The second item in the this.selection[0] list is the container object (usually a layout)
+                const item = this.selection[0][0].context.item;
+                this.canHide = true;
+                if (item && item.composition) {
+                    domainObject = item;
+                } else {
+                    domainObject = this.selection[0][1].context.item;
+                    if (!item) {
+                        //if this isn't a sub-object
+                        this.initialStyles = {};
+                        layoutItem = this.selection[0][0].context.layoutItem;
+                        this.initialStyles = this.getStyleProperties(layoutItem);
+                        this.itemId = layoutItem.id;
+                    } else {
+                        layoutItem = Object.assign({}, { id: this.selection[0][0].context.layoutItem.id }, item);
+                        this.itemId = layoutItem.id;
+                    }
+                }
+            } else {
+                domainObject = this.selection[0][0].context.item;
+            }
+            this.domainObject = domainObject;
+            if (this.stopObserving) {
+                this.stopObserving();
+            }
+            this.stopObserving = this.openmct.objects.observe(this.domainObject, '*', newDomainObject => this.domainObject = newDomainObject);
+        },
         initialize(conditionSetDomainObject) {
             //If there are new conditions in the conditionSet we need to set those styles to default
             this.conditionSetDomainObject = conditionSetDomainObject;

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 "../mixins/objectStyles-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/objectStyles-mixin.js

@@ -30,9 +30,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() {
@@ -59,7 +59,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/plugins/displayLayout/mixins/objectlStyles-mixin.js

@@ -1,59 +0,0 @@
-import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
-
-export default {
-    inject: ['openmct'],
-    data() {
-        return {
-            itemStyle: this.itemStyle
-        }
-    },
-    mounted() {
-        this.parentDomainObject = this.$parent.domainObject;
-        this.itemId = this.item.id;
-        this.objectStyle = this.getObjectStyleForItem(this.parentDomainObject.configuration.objectStyles);
-        this.initObjectStyles();
-    },
-    destroyed() {
-        if (this.stopListeningObjectStyles) {
-            this.stopListeningObjectStyles();
-        }
-    },
-    methods: {
-        getObjectStyleForItem(objectStyle) {
-            if (objectStyle) {
-                return objectStyle[this.itemId] ? Object.assign({}, objectStyle[this.itemId]) : undefined;
-            } else {
-                return undefined;
-            }
-        },
-        initObjectStyles() {
-            if (!this.styleRuleManager) {
-                this.styleRuleManager = new StyleRuleManager(this.objectStyle, this.openmct, this.updateStyle.bind(this));
-            } else {
-                this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
-            }
-
-            if (this.stopListeningObjectStyles) {
-                this.stopListeningObjectStyles();
-            }
-
-            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) {
-                    this.objectStyle = newItemObjectStyle;
-                    this.styleRuleManager.updateObjectStyleConfig(this.objectStyle);
-                }
-            });
-        },
-        updateStyle(style) {
-            this.itemStyle = style;
-            let keys = Object.keys(this.itemStyle);
-            keys.forEach((key) => {
-                if ((typeof this.itemStyle[key] === 'string') && (this.itemStyle[key].indexOf('transparent') > -1)) {
-                    delete this.itemStyle[key];
-                }
-            });
-        }
-    }
-};

src/ui/inspector/StylesInspectorView.vue

@@ -27,7 +27,6 @@
 <script>
 import ConditionalStylesView from '../../plugins/condition/components/inspector/ConditionalStylesView.vue';
 import Vue from 'vue';
-import { getStyleProp } from "../../plugins/condition/utils/styleUtils";
 
 export default {
     inject: ['openmct'],
@@ -44,35 +43,8 @@ export default {
         this.openmct.selection.off('change', this.updateSelection);
     },
     methods: {
-        getStyleProperties(item) {
-            let styleProps = {};
-            Object.keys(item).forEach((key) => {
-                Object.assign(styleProps, getStyleProp(key, item[key]));
-            });
-            return styleProps;
-        },
         updateSelection(selection) {
             if (selection.length > 0 && selection[0].length > 0) {
-                let isChildItem = false;
-                let domainObject = selection[0][0].context.item;
-                let layoutItem = {};
-                let styleProps = this.getStyleProperties({
-                    fill: 'transparent',
-                    stroke: 'transparent',
-                    color: 'transparent'
-                });
-                if (selection[0].length > 1) {
-                    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 = {};
-                        layoutItem = selection[0][0].context.layoutItem;
-                        styleProps = this.getStyleProperties(layoutItem);
-                        domainObject = selection[0][1].context.item;
-                    }
-                }
-
                 if (this.component) {
                     this.component.$destroy();
                     this.component = undefined;
@@ -83,7 +55,7 @@ export default {
                 this.component = new Vue({
                     provide: {
                         openmct: this.openmct,
-                        domainObject: domainObject
+                        selection: selection
                     },
                     el: viewContainer,
                     components: {
@@ -91,12 +63,12 @@ export default {
                     },
                     data() {
                         return {
-                            layoutItem,
+                            // layoutItem,
-                            styleProps,
+                            // styleProps,
-                            isChildItem
+                            // isChildItem
                         }
                     },
-                    template: '<conditional-styles-view :can-hide="isChildItem" :item-id="layoutItem.id" :initial-styles="styleProps"></conditional-styles-view>'
+                    template: '<conditional-styles-view></conditional-styles-view>'
                 });
             }
         }