Conditional styles for drawing objects (#2740)

* Hardcoded prototype - conditional styles for display layout or generator domain objects only.
* 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
* Add default styles to conditionalStyles when a condition set is added to the domain object.
* Use EventEmitter alias instead of eventEmitter3 in imports
* 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
* Removes unnecessary object get call.
* Adds conditional styles for drawing objects
* Removes hard coded conditionSetIdentifier
* Fixes small conditionManager bug

src/plugins/displayLayout/components/BoxView.vue

@@ -36,6 +36,7 @@
 
 <script>
 import LayoutFrame from './LayoutFrame.vue'
+import conditionalStylesMixin from '../mixins/conditionalStyles-mixin';
 
 export default {
     makeDefinition() {
@@ -52,6 +53,7 @@ export default {
     components: {
         LayoutFrame
     },
+    mixins: [conditionalStylesMixin],
     props: {
         item: {
             type: Object,
@@ -71,10 +73,14 @@ export default {
     },
     computed: {
         style() {
-            return {
-                backgroundColor: this.item.fill,
-                border: '1px solid ' + this.item.stroke
-            };
+            if (this.itemStyle) {
+                return this.itemStyle;
+            } else {
+                return {
+                    backgroundColor: this.item.fill,
+                    border: '1px solid ' + this.item.stroke
+                };
+            }
         }
     },
     watch: {

src/plugins/displayLayout/components/ImageView.vue

@@ -36,6 +36,7 @@
 
 <script>
 import LayoutFrame from './LayoutFrame.vue'
+import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
 
 export default {
     makeDefinition(openmct, gridSize, element) {
@@ -52,6 +53,7 @@ export default {
     components: {
         LayoutFrame
     },
+    mixins: [conditionalStylesMixin],
     props: {
         item: {
             type: Object,
@@ -73,7 +75,7 @@ export default {
         style() {
             return {
                 backgroundImage: 'url(' + this.item.url + ')',
-                border: '1px solid ' + this.item.stroke
+                border: this.itemStyle ? this.itemStyle.border : '1px solid ' + this.item.stroke
             }
         }
     },

src/plugins/displayLayout/components/LineView.vue

@@ -31,7 +31,7 @@
     >
         <line
             v-bind="linePosition"
-            :stroke="item.stroke"
+            :stroke="stroke"
             stroke-width="2"
         />
     </svg>
@@ -60,6 +60,8 @@
 
 <script>
 
+import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
+
 const START_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--sw',
     2: 'c-frame-edit__handle--se',
@@ -85,6 +87,7 @@ export default {
         };
     },
     inject: ['openmct'],
+    mixins: [conditionalStylesMixin],
     props: {
         item: {
             type: Object,
@@ -122,6 +125,13 @@ export default {
             }
             return {x, y, x2, y2};
         },
+        stroke() {
+            if (this.itemStyle && this.itemStyle.border) {
+                return this.itemStyle.border.replace('1px solid ', '');
+            } else {
+                return this.item.stroke;
+            }
+        },
         style() {
             let {x, y, x2, y2} = this.position;
             let width = Math.max(this.gridSize[0] * Math.abs(x - x2), 1);

src/plugins/displayLayout/components/TextView.vue

@@ -38,6 +38,7 @@
 
 <script>
 import LayoutFrame from './LayoutFrame.vue'
+import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
 
 export default {
     makeDefinition(openmct, gridSize, element) {
@@ -57,6 +58,7 @@ export default {
     components: {
         LayoutFrame
     },
+    mixins: [conditionalStylesMixin],
     props: {
         item: {
             type: Object,
@@ -76,12 +78,16 @@ export default {
     },
     computed: {
         style() {
-            return {
-                backgroundColor: this.item.fill,
-                borderColor: this.item.stroke,
-                color: this.item.color,
-                fontSize: this.item.size
-            };
+            if (this.itemStyle) {
+                return this.itemStyle;
+            } else {
+                return {
+                    backgroundColor: this.item.fill,
+                    borderColor: this.item.stroke,
+                    color: this.item.color,
+                    fontSize: this.item.size
+                };
+            }
         }
     },
     watch: {

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

@@ -0,0 +1,54 @@
+import StyleRuleManager from "@/plugins/condition/StyleRuleManager";
+
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            itemStyle: this.itemStyle
+        }
+    },
+    mounted() {
+        this.domainObject = this.$parent.domainObject;
+        this.itemId = this.item.id;
+        this.conditionalStyle = this.getConditionalStyleForItem(this.domainObject.configuration.conditionalStyle);
+        this.initConditionalStyles();
+    },
+    destroyed() {
+        if (this.stopListeningConditionalStyles) {
+            this.stopListeningConditionalStyles();
+        }
+    },
+    methods: {
+        getConditionalStyleForItem(conditionalStyle) {
+            if (conditionalStyle) {
+                return conditionalStyle[this.itemId];
+            } else {
+                return undefined;
+            }
+        },
+        initConditionalStyles() {
+            if (!this.styleRuleManager) {
+                this.styleRuleManager = new StyleRuleManager(this.conditionalStyle, this.openmct);
+                this.styleRuleManager.on('conditionalStyleUpdated', this.updateStyle.bind(this));
+            } else {
+                this.styleRuleManager.updateConditionalStyleConfig(this.conditionalStyle);
+            }
+
+            if (this.stopListeningConditionalStyles) {
+                this.stopListeningConditionalStyles();
+            }
+
+            this.stopListeningConditionalStyles = 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
+                let newItemConditionalStyle = this.getConditionalStyleForItem(newConditionalStyle);
+                if (this.conditionalStyle !== newItemConditionalStyle) {
+                    this.conditionalStyle = newItemConditionalStyle;
+                    this.styleRuleManager.updateConditionalStyleConfig(this.conditionalStyle);
+                }
+            });
+        },
+        updateStyle(style) {
+            this.itemStyle = style;
+        }
+    }
+};