Apply condition sets to drawing objects in a layout + Static styling for objects. (#2767)

* 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.

* Conditionals styling WIP

- Tweaks for layout/overflow issues;
- Better header alignment;
- Much better approach to "accordion" spacing;

* Adds conditional styles for drawing objects

* Fixes small bugs while adding or removing nested conditional styling

* Removes hard coded conditionSetIdentifier

* Fixes small conditionManager bug

* WIP - Adds condition set selection dialog

* WIP - Add condition set

* Styling for tree dialog in selector

- New `.c-selector` class;
- Markup added to tree-item.vue to fix missing `c-object-label` wrapper;

* Adds image url to styles inspector view

* Adds highlight for selected conditionSet in selection dialog.

* Conditionals Inspector styling WIP

- Simplified Inspector markup;
- Refined `.c-inspector` layout strategy;
- Refined `.l-multipane` classes for better layout and scroll handling;
- TODOs: styling for 'styles' section; unit test, find regressions, fix;

* Read-only mode changes for the styles inspector

* Adds basic styling for styles inspector view

* Removes unused code

* Displays condition set name

* Display description for conditions

* Conditionals Inspector styling WIP

- Add new ObjectName component to Inspector;
- Add supporting styles;

* Conditionals Inspector styling WIP

- Refactor for better usage of c-object-label;
- Refactor `c-properties` classes to `c-inspect-properties`;

* Conditionals Inspector styling WIP

- Introduce `c-inspect-styles` class;
- Markup refined in ConditionalStylesView.vue;

* Conditionals Inspector styling WIP

- Fix unintended regression in `c-object-label`;

* Makes inspector view tabs sticky.
Shows errors if either telemetry or conditions are missing
Refresh conditionStyles when styles inspector is loaded to show new conditions that might be added to the conditionSet

* Conditionals styling WIP

- Added title to Condition Set selector dialog;

* Conditionals styling WIP

- CSS and markup changes;

* Conditionals styling WIP

- Markup changes;

* Componentize conditional style editor, condition description and condition error

* Conditionals styling WIP

- Conditional styling elements in Inspector, significant refinements;
- Condition description formatting;
- Significant markup simplification in StyleEditor.vue;
- Moved `.c-inspect-styles` into conditional-styles.scss;

* Conditionals styling WIP

- Added menu positioning css;

* Conditionals styling WIP

- Display images in StyleEditor `c-style-thumb` element;

* Use the condition description component to show the condition description in condition set views

* Conditionals styling WIP

- New `u-alert` and `u-error` classes and mixin;
- New $colorError theme constants;

* Conditionals styling WIP

- Fixed background: cover or c-style-thumbs;

* Conditionals styling WIP

- Add navigate-or-preview functionality to attached Condition Set used
for conditional styling (thank you Deep!);
- Better theme-compliant box-shadowing on c-style-thumb;
- Added default color property to cClickIcon SCSS mixin;

* Fixes ConditionDescription and ConditionErrors views

* Allow static styles for domain Objects and display layout items

* Consolidate handling of 'none' style to the object styles mixin

* Adds visibility option to child items

* Conditionals styling WIP

- Add `is-style-invisible` class;
- Better color approach for table headers to support domain object
styling;

* Change visibility to isInvisible class

* Fixes visibility for object views and telemetry views

* Fixes selection of condition set from tree view

* Conditionals styling WIP

- Added new $glyph-icon-eye-disabled font symbol and related class;
- Modded glyphs used for visibility toggle button;
- Modded StyleEditor thumb preview to reflect visibility setting;
- Tweaked `is-style-invisible` opacity property;
- Code cleanup;

* Conditionals styling WIP

- Display disabled toolbar for Inspector styles in Browse mode;
- Better approach to 'is-style-invisible' `c-style-thumb` with new
bgCheckerboard mixin;
- Moved `$controlDisabledOpacity` into a theme constant;
- Refined spacing in Inspector grid;

* Fixes linting issues

* Fixes telemetry metadata name

* criterion descriptions is now an array of strings

* Fixes spacing

* Removes commented out code.

* Remove v-if

Co-authored-by: charlesh88 <charlesh88@gmail.com>

src/plugins/displayLayout/components/AlphanumericFormatView.vue

@@ -23,20 +23,20 @@
 <template>
 <div
     v-if="isEditing"
-    class="c-properties"
+    class="c-inspect-properties"
 >
-    <div class="c-properties__header">
+    <div class="c-inspect-properties__header">
         Alphanumeric Format
     </div>
-    <ul class="c-properties__section">
-        <li class="c-properties__row">
+    <ul class="c-inspect-properties__section">
+        <li class="c-inspect-properties__row">
             <div
-                class="c-properties__label"
+                class="c-inspect-properties__label"
                 title="Printf formatting for the selected telemetry"
             >
                 <label for="telemetryPrintfFormat">Format</label>
             </div>
-            <div class="c-properties__value">
+            <div class="c-inspect-properties__value">
                 <input
                     id="telemetryPrintfFormat"
                     type="text"

src/plugins/displayLayout/components/BoxView.vue

@@ -29,6 +29,7 @@
 >
     <div
         class="c-box-view"
+        :class="[styleClass]"
         :style="style"
     ></div>
 </layout-frame>
@@ -36,7 +37,7 @@
 
 <script>
 import LayoutFrame from './LayoutFrame.vue'
-import conditionalStylesMixin from '../mixins/conditionalStyles-mixin';
+import conditionalStylesMixin from '../mixins/objectlStyles-mixin';
 
 export default {
     makeDefinition() {
@@ -73,14 +74,13 @@ export default {
     },
     computed: {
         style() {
-            if (this.itemStyle) {
-                return this.itemStyle;
-            } else {
-                return {
-                    backgroundColor: this.item.fill,
-                    border: '1px solid ' + this.item.stroke
-                };
-            }
+            return Object.assign({
+                backgroundColor: this.item.fill,
+                border: '1px solid ' + this.item.stroke
+            }, this.itemStyle);
+        },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/ImageView.vue

@@ -29,6 +29,7 @@
 >
     <div
         class="c-image-view"
+        :class="[styleClass]"
         :style="style"
     ></div>
 </layout-frame>
@@ -36,7 +37,7 @@
 
 <script>
 import LayoutFrame from './LayoutFrame.vue'
-import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
+import conditionalStylesMixin from "../mixins/objectlStyles-mixin";
 
 export default {
     makeDefinition(openmct, gridSize, element) {
@@ -74,9 +75,12 @@ export default {
     computed: {
         style() {
             return {
-                backgroundImage: 'url(' + this.item.url + ')',
-                border: this.itemStyle ? this.itemStyle.border : '1px solid ' + this.item.stroke
-            }
+                backgroundImage: this.itemStyle ? ('url(' + this.itemStyle.imageUrl + ')') : 'url(' + this.item.url + ')',
+                border: (this.itemStyle && this.itemStyle.border) ? this.itemStyle.border : ('1px solid ' + this.item.stroke)
+            };
+        },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

src/plugins/displayLayout/components/LineView.vue

@@ -23,6 +23,7 @@
 <template>
 <div
     class="l-layout__frame c-frame no-frame"
+    :class="[styleClass]"
     :style="style"
 >
     <svg
@@ -60,7 +61,7 @@
 
 <script>
 
-import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
+import conditionalStylesMixin from "../mixins/objectlStyles-mixin";
 
 const START_HANDLE_QUADRANTS = {
     1: 'c-frame-edit__handle--sw',
@@ -145,6 +146,9 @@ export default {
                 height: `${height}px`
             };
         },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
+        },
         startHandleClass() {
             return START_HANDLE_QUADRANTS[this.vectorQuadrant];
         },

src/plugins/displayLayout/components/TelemetryView.vue

@@ -36,7 +36,8 @@
         <div
             v-if="showLabel"
             class="c-telemetry-view__label"
-            :style="conditionalStyle"
+            :class="[styleClass]"
+            :style="objectStyle"
         >
             <div class="c-telemetry-view__label-text">
                 {{ domainObject.name }}
@@ -47,8 +48,8 @@
             v-if="showValue"
             :title="fieldName"
             class="c-telemetry-view__value"
-            :class="[telemetryClass]"
-            :style="!telemetryClass && conditionalStyle"
+            :class="[telemetryClass, !telemetryClass && styleClass]"
+            :style="!telemetryClass && objectStyle"
         >
             <div class="c-telemetry-view__value-text">
                 {{ telemetryValue }}
@@ -113,7 +114,7 @@ export default {
             formats: undefined,
             domainObject: undefined,
             currentObjectPath: undefined,
-            conditionalStyle: ''
+            objectStyle: ''
         }
     },
     computed: {
@@ -133,6 +134,9 @@ export default {
                 fontSize: this.item.size
             }
         },
+        styleClass() {
+            return this.objectStyle && this.objectStyle.isStyleInvisible;
+        },
         fieldName() {
             return this.valueMetadata && this.valueMetadata.name;
         },
@@ -192,7 +196,6 @@ export default {
 
         if (this.styleRuleManager) {
             this.styleRuleManager.destroy();
-            this.styleRuleManager.off('conditionalStyleUpdated', this.updateStyle.bind(this));
             delete this.styleRuleManager;
         }
 
@@ -238,7 +241,7 @@ export default {
         },
         setObject(domainObject) {
             this.domainObject = domainObject;
-            this.initConditionalStyles();
+            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);
@@ -264,20 +267,27 @@ 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));
+        initObjectStyles() {
+            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.conditionalStyle', (newConditionalStyle) => {
-                //Updating conditional styles in the inspector view will trigger this so that the changes are reflected immediately
-                this.styleRuleManager.updateConditionalStyleConfig(newConditionalStyle);
+            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) {
-            this.conditionalStyle = 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/components/TextView.vue

@@ -29,6 +29,7 @@
 >
     <div
         class="c-text-view"
+        :class="[styleClass]"
         :style="style"
     >
         {{ item.text }}
@@ -38,7 +39,7 @@
 
 <script>
 import LayoutFrame from './LayoutFrame.vue'
-import conditionalStylesMixin from "../mixins/conditionalStyles-mixin";
+import conditionalStylesMixin from "../mixins/objectlStyles-mixin";
 
 export default {
     makeDefinition(openmct, gridSize, element) {
@@ -78,16 +79,15 @@ export default {
     },
     computed: {
         style() {
-            if (this.itemStyle) {
-                return this.itemStyle;
-            } else {
-                return {
-                    backgroundColor: this.item.fill,
-                    borderColor: this.item.stroke,
-                    color: this.item.color,
-                    fontSize: this.item.size
-                };
-            }
+            return Object.assign({
+                backgroundColor: this.item.fill,
+                border: '1px solid ' + this.item.stroke,
+                color: this.item.color,
+                fontSize: this.item.size
+            }, this.itemStyle);
+        },
+        styleClass() {
+            return this.itemStyle && this.itemStyle.isStyleInvisible;
         }
     },
     watch: {

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

@@ -1,54 +0,0 @@
-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;
-        }
-    }
-};

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

@@ -0,0 +1,59 @@
+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.objectStyle = this.getObjectStyleForItem(this.domainObject.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.domainObject, '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];
+                }
+            });
+        }
+    }
+};