ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-16 15:29:20 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #2861 from nasa/fix-telemetryview-styles

Browse Source 
Styles for telemetry are stored on their container domain objects
This commit is contained in:
Shefali Joshi 2020-04-08 15:19:15 -07:00 committed by GitHub
commit 11574b7c40
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 168 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/plugins/condition/components/CurrentOutput.vue Normal file
View File

58
src/plugins/condition/components/inspector/ConditionalStylesView.vue
View File

@ -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 {getInitialStyleForItem} 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: [],
@ -145,9 +130,13 @@ export default {
}
},
destroyed() {
this.openmct.editor.off('isEditing', this.setEditState);
if (this.stopObserving) {
this.stopObserving();
}
},
mounted() {
this.itemId = '';
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 +151,39 @@ export default {
this.openmct.editor.on('isEditing', this.setEditState);
},
methods: {
isItemType(type, item) {
return item && (item.type === type);
},
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)
layoutItem = this.selection[0][0].context.layoutItem;
const item = this.selection[0][0].context.item;
this.canHide = true;
if (item && this.isItemType('subobject-view', layoutItem)) {
domainObject = item;
} else {
domainObject = this.selection[0][1].context.item;
if (layoutItem) {
this.itemId = layoutItem.id;
}
}
} else {
domainObject = this.selection[0][0].context.item;
}
this.domainObject = domainObject;
this.initialStyles = getInitialStyleForItem(domainObject, layoutItem);
if (this.stopObserving) {
this.stopObserving();
}
if (this.domainObject) {
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;

38
src/plugins/condition/components/inspector/StyleEditor.vue
View File

@ -24,7 +24,7 @@
<div class="c-style">
<span class="c-style-thumb"
:class="{ 'is-style-invisible': styleItem.style.isStyleInvisible }"
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : styleItem.style ]"
:style="[styleItem.style.imageUrl ? { backgroundImage:'url(' + styleItem.style.imageUrl + ')'} : itemStyle ]"
>
<span class="c-style-thumb__text"
:class="{ 'hide-nice': !styleItem.style.color }"
@ -33,27 +33,27 @@
</span>
</span>
<span class="c-toolbar">
<toolbar-color-picker v-if="styleItem.style.border"
<toolbar-color-picker v-if="hasProperty(styleItem.style.border)"
class="c-style__toolbar-button--border-color u-menu-to--center"
:options="borderColorOption"
@change="updateStyleValue"
/>
<toolbar-color-picker v-if="styleItem.style.backgroundColor"
<toolbar-color-picker v-if="hasProperty(styleItem.style.backgroundColor)"
class="c-style__toolbar-button--background-color u-menu-to--center"
:options="backgroundColorOption"
@change="updateStyleValue"
/>
<toolbar-color-picker v-if="styleItem.style.color"
<toolbar-color-picker v-if="hasProperty(styleItem.style.color)"
class="c-style__toolbar-button--color u-menu-to--center"
:options="colorOption"
@change="updateStyleValue"
/>
<toolbar-button v-if="styleItem.style.imageUrl !== undefined"
<toolbar-button v-if="hasProperty(styleItem.style.imageUrl)"
class="c-style__toolbar-button--image-url"
:options="imageUrlOption"
@change="updateStyleValue"
/>
<toolbar-toggle-button v-if="styleItem.style.isStyleInvisible !== undefined"
<toolbar-toggle-button v-if="hasProperty(styleItem.style.isStyleInvisible)"
class="c-style__toolbar-button--toggle-visible"
:options="isStyleInvisibleOption"
@change="updateStyleValue"
@ -89,29 +89,40 @@ export default {
}
},
computed: {
itemStyle() {
let style = {};
const keys = Object.keys(this.styleItem.style);
keys.forEach(key => {
style[key] = this.normalizeValue(this.styleItem.style[key]);
});
return style;
},
borderColorOption() {
let value = this.styleItem.style.border.replace('1px solid ', '');
return {
icon: 'icon-line-horz',
title: STYLE_CONSTANTS.borderColorTitle,
value: this.styleItem.style.border.replace('1px solid ', ''),
value: this.normalizeValue(value),
property: 'border',
isEditing: this.isEditing
}
},
backgroundColorOption() {
let value = this.styleItem.style.backgroundColor;
return {
icon: 'icon-paint-bucket',
title: STYLE_CONSTANTS.backgroundColorTitle,
value: this.styleItem.style.backgroundColor,
value: this.normalizeValue(value),
property: 'backgroundColor',
isEditing: this.isEditing
}
},
colorOption() {
let value = this.styleItem.style.color;
return {
icon: 'icon-font',
title: STYLE_CONSTANTS.textColorTitle,
value: this.styleItem.style.color,
value: this.normalizeValue(value),
property: 'color',
isEditing: this.isEditing
}
@ -163,6 +174,15 @@ export default {
}
},
methods: {
hasProperty(property) {
return property !== undefined;
},
normalizeValue(value) {
if (!value) {
return 'transparent';
}
return value;
},
updateStyleValue(value, item) {
if (item.property === 'border') {
value = '1px solid ' + value;

96
src/plugins/condition/utils/styleUtils.js
View File

@ -19,27 +19,81 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
const NONE_VALUE = 'transparent';
export const getStyleProp = (key, defaultValue) => {
let styleProp = undefined;
switch(key) {
case 'fill': styleProp = {
backgroundColor: defaultValue || 'transparent'
};
break;
case 'stroke': styleProp = {
border: '1px solid ' + (defaultValue || 'transparent')
};
break;
case 'color': styleProp = {
color: defaultValue || 'transparent'
};
break;
case 'url': styleProp = {
imageUrl: defaultValue || 'transparent'
};
break;
const styleProps = {
backgroundColor: {
svgProperty: 'fill',
noneValue: NONE_VALUE,
applicableForType: type => {
return !type ? true : (type === 'text-view' ||
type === 'telemetry-view' ||
type === 'box-view' ||
type === 'subobject-view');
}
},
border: {
svgProperty: 'stroke',
noneValue: NONE_VALUE,
applicableForType: type => {
return !type ? true : (type === 'text-view' ||
type === 'telemetry-view' ||
type === 'box-view' ||
type === 'image-view' ||
type === 'line-view'||
type === 'subobject-view');
}
},
color: {
svgProperty: 'color',
noneValue: 'NONE_VALUE',
applicableForType: type => {
return !type ? true : (type === 'text-view' ||
type === 'telemetry-view'||
type === 'subobject-view');
}
},
imageUrl: {
svgProperty: 'url',
noneValue: '',
applicableForType: type => {
return !type ? false : type === 'image-view';
}
}
return styleProp;
};
const getStaticStyleForItem = (domainObject, id) => {
let domainObjectStyles = domainObject && domainObject.configuration && domainObject.configuration.objectStyles;
if (domainObjectStyles) {
if (id && domainObjectStyles[id] && domainObjectStyles[id].staticStyle) {
return domainObjectStyles[id].staticStyle.style;
} else if (domainObjectStyles.staticStyle) {
return domainObjectStyles.staticStyle.style;
}
}
};
//Returns either existing static styles or uses SVG defaults if available
export const getInitialStyleForItem = (domainObject, item) => {
const type = item && item.type;
const id = item && item.id;
let style = {};
let staticStyle = getStaticStyleForItem(domainObject, id);
const properties = Object.keys(styleProps);
properties.forEach(property => {
const styleProp = styleProps[property];
if (styleProp.applicableForType(type)) {
let defaultValue;
if (staticStyle) {
defaultValue = staticStyle[property];
} else if (item) {
defaultValue = item[styleProp.svgProperty];
}
style[property] = defaultValue === undefined ? styleProp.noneValue : defaultValue;
}
});
return style;
};

62
src/plugins/displayLayout/components/TelemetryView.vue
View File

@ -30,14 +30,13 @@
<div
v-if="domainObject"
class="c-telemetry-view"
:style="styleObject"
:class="styleClass"
:style="telemetryObjectStyle || styleObject"
@contextmenu.prevent="showContextMenu"
>
<div
v-if="showLabel"
class="c-telemetry-view__label"
:class="[styleClass]"
:style="objectStyle"
>
<div class="c-telemetry-view__label-text">
{{ domainObject.name }}
@ -48,8 +47,7 @@
v-if="showValue"
:title="fieldName"
class="c-telemetry-view__value"
:class="[telemetryClass, !telemetryClass && styleClass]"
:style="!telemetryClass && objectStyle"
:class="[telemetryClass]"
>
<div class="c-telemetry-view__value-text">
{{ telemetryValue }}
@ -62,7 +60,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 +89,7 @@ export default {
components: {
LayoutFrame
},
mixins: [conditionalStylesMixin],
props: {
item: {
type: Object,
@ -113,8 +112,7 @@ export default {
datum: undefined,
formats: undefined,
domainObject: undefined,
currentObjectPath: undefined,
objectStyle: ''
currentObjectPath: undefined
}
},
computed: {
@ -135,7 +133,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 +200,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 +242,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 +266,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;
}
}
}

6
src/plugins/displayLayout/mixins/objectStyles-mixin.js
View File

@ -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) {

39
src/ui/inspector/StylesInspectorView.vue
View File

@ -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,20 +55,13 @@ export default {
this.component = new Vue({
provide: {
openmct: this.openmct,
domainObject: domainObject
selection: selection
},
el: viewContainer,
components: {
ConditionalStylesView
},
data() {
return {
layoutItem,
styleProps,
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>'
});
}
}