ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-23 10:30:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Store telemetry styles on their container domain objects.

Browse Source
This commit is contained in:
Joshi 2020-04-01 15:51:40 -07:00
parent dd70bb470f
commit 97b37edce4
5 changed files with 87 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
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 { 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;

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

@ -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,
objectStyle: ''
currentObjectPath: undefined
}
},
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;
}
}
}

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

59
src/plugins/displayLayout/mixins/objectlStyles-mixin.js
View File

@ -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];
}
});
}
}
};

38
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,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,
styleProps,
isChildItem
// 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>'
});
}
}