ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-01 00:45:41 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge branch 'topic-conditionals' of https://github.com/nasa/openmct into fix-enum-metadata

Browse Source
This commit is contained in:
Joshi 2020-03-19 14:06:25 -07:00
commit 983ed7f0e7
20 changed files with 443 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/plugins/condition/ConditionManager.js
View File

@ -34,7 +34,7 @@ export default class ConditionManager extends EventEmitter {
this.initialize();
this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDomainObject) => {
this.update(newDomainObject);
this.conditionSetDomainObject = newDomainObject;
});
}
@ -48,15 +48,6 @@ export default class ConditionManager extends EventEmitter {
}
}
update(newDomainObject) {
this.destroy();
this.conditionSetDomainObject = newDomainObject;
this.stopObservingForChanges = this.openmct.objects.observe(this.conditionSetDomainObject, '*', (newDO) => {
this.update(newDO);
});
this.initialize();
}
updateCondition(conditionConfiguration, index) {
let condition = this.conditionClassCollection[index];
condition.update(conditionConfiguration);
@ -144,18 +135,7 @@ export default class ConditionManager extends EventEmitter {
}
findConditionById(id) {
let found;
for (let i=0, ii=this.conditionClassCollection.length; i < ii; i++) {
if (this.conditionClassCollection[i].id === id) {
found = {
item: this.conditionClassCollection[i],
index: i
};
break;
}
}
return found;
return this.conditionClassCollection.find(conditionClass => conditionClass.id === id);
}
//this.$set(this.conditionClassCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);

7
src/plugins/condition/StyleRuleManager.js
View File

@ -34,7 +34,6 @@ export default class StyleRuleManager extends EventEmitter {
initialize(conditionalStyleConfiguration) {
this.conditionSetIdentifier = conditionalStyleConfiguration.conditionSetIdentifier;
this.defaultStyle = conditionalStyleConfiguration.defaultStyle;
this.updateConditionStylesMap(conditionalStyleConfiguration.styles || []);
}
@ -89,7 +88,11 @@ export default class StyleRuleManager extends EventEmitter {
}
destroy() {
this.currentStyle = this.defaultStyle;
if (this.currentStyle) {
Object.keys(this.currentStyle).forEach(key => {
this.currentStyle[key] = 'inherit';
});
}
this.updateDomainObjectStyle();
if (this.stopProvidingTelemetry) {
this.stopProvidingTelemetry();

81
src/plugins/condition/components/Condition.vue
View File

@ -42,8 +42,28 @@
<span class="c-condition__name">{{ condition.configuration.name }}</span>
<!-- TODO: description should be derived from criteria -->
<span class="c-condition__summary">
Description/summary goes here {{ condition.configuration.description }}
<span v-if="condition.isDefault"
class="c-condition__summary"
>
When all else fails
</span>
<span v-else
class="c-condition__summary"
>
<template v-if="!canEvaluateCriteria">
Define criteria
</template>
<template v-else>
When
<span v-for="(criterion, index) in condition.configuration.criteria"
:key="index"
>
{{ getRule(criterion, index) }}
<template v-if="!isLastCriterion">
{{ getConjunction }}
</template>
</span>
</template>
</span>
<div class="c-condition__buttons">
@ -159,14 +179,35 @@
Output: {{ condition.configuration.output }}
</span>
</div>
<div class="c-condition__summary">
Description/summary goes here {{ condition.configuration.description }}
<div v-if="condition.isDefault"
class="c-condition__summary"
>
When all else fails
</div>
<div v-else
class="c-condition__summary"
>
<template v-if="!canEvaluateCriteria">
Define criteria
</template>
<template v-else>
When
<span v-for="(criterion, index) in condition.configuration.criteria"
:key="index"
>
{{ getRule(criterion, index) }}
<template v-if="!isLastCriterion">
{{ getConjunction }}
</template>
</span>
</template>
</div>
</div>
</template>
<script>
import Criterion from './Criterion.vue';
import { OPERATIONS } from '../utils/operations';
export default {
inject: ['openmct'],
@ -202,6 +243,24 @@ export default {
criterionIndex: 0
};
},
computed: {
canEvaluateCriteria: function () {
let criteria = this.condition.configuration.criteria;
let lastCriterion = criteria[criteria.length - 1];
if (lastCriterion.telemetry &&
lastCriterion.operation &&
(lastCriterion.input.length ||
lastCriterion.operation === 'isDefined' ||
lastCriterion.operation === 'isUndefined')) {
return true;
} else {
return false;
}
},
getConjunction: function () {
return this.condition.configuration.trigger === 'all' ? 'and' : 'or';
}
},
destroyed() {
this.destroy();
},
@ -209,6 +268,20 @@ export default {
this.setOutputSelection();
},
methods: {
getRule(criterion, index) {
return `${criterion.telemetry.name} ${criterion.telemetry.fieldName} ${this.findDescription(criterion.operation, criterion.input)}`;
},
isLastCriterion(index) {
return index === this.condition.configuration.criteria.length - 1;
},
findDescription(operation, values) {
for (let i=0, ii= OPERATIONS.length; i < ii; i++) {
if (operation === OPERATIONS[i].name) {
return OPERATIONS[i].getDescription(values);
}
}
return null;
},
setOutputSelection() {
let conditionOutput = this.condition.configuration.output;
if (conditionOutput) {

3
src/plugins/condition/components/ConditionCollection.vue
View File

@ -121,6 +121,9 @@ export default {
this.conditionCollection = this.domainObject.configuration.conditionCollection;
this.observeForChanges();
this.conditionManager = new ConditionManager(this.domainObject, this.openmct);
this.conditionManager.on('conditionSetResultUpdated', (data) => {
this.$emit('conditionSetResultUpdated', data);
})
},
methods: {
observeForChanges() {

11
src/plugins/condition/components/ConditionSet.vue
View File

@ -34,7 +34,8 @@
</div>
</section>
<TestData :is-editing="isEditing" />
<ConditionCollection :is-editing="isEditing" />
<ConditionCollection :is-editing="isEditing"
@conditionSetResultUpdated="updateCurrentOutput" />
</div>
</template>
@ -58,7 +59,6 @@ export default {
},
mounted() {
this.conditionSetIdentifier = this.openmct.objects.makeKeyString(this.domainObject.identifier);
this.provideTelemetry();
},
beforeDestroy() {
if (this.stopProvidingTelemetry) {
@ -68,13 +68,6 @@ export default {
methods: {
updateCurrentOutput(currentConditionResult) {
this.currentConditionOutput = currentConditionResult.output;
},
provideTelemetry() {
if (this.stopProvidingTelemetry) {
this.stopProvidingTelemetry();
}
this.stopProvidingTelemetry = this.openmct.telemetry
.subscribe(this.domainObject, output => { this.updateCurrentOutput(output); });
}
}
};

24
src/plugins/condition/components/Criterion.vue
View File

@ -52,8 +52,8 @@
>
<input v-model="criterion.input[inputIndex]"
class="c-cdef__control__input"
type="text"
@change="persist"
:type="setInputType"
@blur="persist"
>
<span v-if="inputIndex < inputCount-1">and</span>
</span>
@ -117,6 +117,20 @@ export default {
},
filteredOps: function () {
return [...this.operations.filter(op => op.appliesTo.indexOf(this.operationFormat) !== -1)];
},
setInputType: function () {
let type = '';
for (let i = 0; i < this.filteredOps.length; i++) {
if (this.criterion.operation === this.filteredOps[i].name) {
if (this.filteredOps[i].appliesTo.length === 1) {
type = this.filteredOps[i].appliesTo[0];
} else {
type = 'string'
}
break;
}
}
return type;
}
},
mounted() {
@ -147,6 +161,7 @@ export default {
if (ev) {this.clearInputs()}
if (this.criterion.telemetry) {
this.openmct.objects.get(this.criterion.telemetry).then((telemetryObject) => {
this.criterion.telemetry.name = telemetryObject.name;
this.telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
this.telemetryMetadataOptions = this.telemetryMetadata.values();
this.updateOperations();
@ -157,7 +172,10 @@ export default {
}
},
updateOperations(ev) {
if (ev) {this.clearInputs()}
if (ev) {
this.criterion.telemetry.fieldName = ev.target.options[ev.target.selectedIndex].text;
this.clearInputs()
}
this.getOperationFormat();
this.persist();
},

51
src/plugins/condition/components/inspector/ConditionalStyle.vue
View File

@ -1,28 +1,69 @@
<template>
<div>
<div v-if="conditionName"
<div v-if="conditionStyle"
class="holder c-c-button-wrapper align-left"
>
<div>{{ conditionName }}</div>
<div>{{ conditionStyle.conditionName }}</div>
<span :style="conditionStyle.style">ABC</span>
<toolbar-color-picker v-if="conditionStyle.style.border"
:options="borderColorOption"
@change="updateStyleValue"
/>
<toolbar-color-picker v-if="conditionStyle.style.backgroundColor"
:options="backgroundColorOption"
@change="updateStyleValue"
/>
</div>
</div>
</template>
<script>
import ToolbarColorPicker from "@/ui/toolbar/components/toolbar-color-picker.vue";
export default {
components: {
ToolbarColorPicker
},
inject: [
'openmct'
],
props: {
conditionName: {
type: String,
conditionStyle: {
type: Object,
required: true
}
},
destroyed() {
data() {
return {
condition: null
}
},
computed: {
borderColorOption() {
return {
icon: 'icon-line-horz',
title: 'Set border color',
value: this.conditionStyle.style.border.replace('1px solid ', ''),
property: 'border'
}
},
backgroundColorOption() {
return {
icon: 'icon-paint-bucket',
title: 'Set background color',
value: this.conditionStyle.style.backgroundColor,
property: 'backgroundColor'
}
}
},
methods: {
updateStyleValue(value, item) {
if (item.property === 'border') {
value = '1px solid ' + value;
}
this.conditionStyle.style[item.property] = value;
this.$emit('persist', this.conditionStyle)
}
}
}
</script>

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

@ -23,8 +23,8 @@
<li v-for="conditionStyle in conditionalStyles"
:key="conditionStyle.conditionId"
>
<conditional-style :condition-name="conditionStyle.conditionName"
:condition-style="conditionStyle.style"
<conditional-style :condition-style="conditionStyle"
@persist="updateConditionalStyle"
/>
</li>
</ul>
@ -41,21 +41,33 @@ export default {
},
inject: [
'openmct',
'domainObject',
'layoutItem'
'domainObject'
],
props: {
itemId: {
type: String,
default: ''
},
initialStyles: {
type: Object,
default() {
return undefined;
}
}
},
data() {
return {
conditionalStyles: []
}
},
mounted() {
if (this.layoutItem) {
//TODO: Handle layout items
}
if (this.domainObject.configuration) {
this.defautStyle = this.domainObject.configuration.defaultStyle;
if (this.domainObject.configuration.conditionalStyle) {
if (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) {
if (this.itemId) {
let conditionalStyle = this.domainObject.configuration.conditionalStyle[this.itemId];
if (conditionalStyle) {
this.conditionalStyles = conditionalStyle.styles || [];
}
} else {
this.conditionalStyles = this.domainObject.configuration.conditionalStyle.styles || [];
}
}
@ -65,49 +77,86 @@ export default {
//TODO: this.conditionSetIdentifier will be set by the UI before calling this
this.conditionSetIdentifier = {
namespace: '',
key: 'bb0f61ad-268d-4d3e-bb30-90ca4a2053c4'
key: "81088c8a-4b80-41fe-9d07-fda8b22d6f5f"
};
this.initializeConditionalStyles();
},
removeConditionSet() {
//TODO: Handle the case where domainObject has items with styles but we're trying to remove the styles on the domainObject itself
this.conditionSetIdentifier = '';
this.conditionalStyles = [];
this.persist(undefined);
let domainObjectConditionalStyle = (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) || {};
if (domainObjectConditionalStyle) {
if (this.itemId) {
domainObjectConditionalStyle[this.itemId] = undefined;
delete domainObjectConditionalStyle[this.itemId];
} else {
domainObjectConditionalStyle.conditionSetIdentifier = undefined;
delete domainObjectConditionalStyle.conditionSetIdentifier;
domainObjectConditionalStyle.styles = undefined;
delete domainObjectConditionalStyle.styles;
}
if (_.isEmpty(domainObjectConditionalStyle)) {
domainObjectConditionalStyle = undefined;
}
}
this.persist(domainObjectConditionalStyle);
},
initializeConditionalStyles() {
const backgroundColors = [{backgroundColor: 'red'},{backgroundColor: 'orange'}, {backgroundColor: 'blue'}];
this.openmct.objects.get(this.conditionSetIdentifier).then((conditionSetDomainObject) => {
conditionSetDomainObject.configuration.conditionCollection.forEach((conditionConfiguration, index) => {
this.conditionalStyles.push({
conditionId: conditionConfiguration.id,
conditionName: conditionConfiguration.name,
style: backgroundColors[index]
style: Object.assign({}, this.initialStyles)
});
});
this.persist({
defaultStyle: this.defaultStyle || {backgroundColor: 'inherit'},
let domainObjectConditionalStyle = (this.domainObject.configuration && this.domainObject.configuration.conditionalStyle) || {};
let conditionalStyle = {
conditionSetIdentifier: this.conditionSetIdentifier,
styles: this.conditionalStyles
});
};
if (this.itemId) {
this.persist({
...domainObjectConditionalStyle,
[this.itemId]: conditionalStyle
});
} else {
this.persist({
...domainObjectConditionalStyle,
...conditionalStyle
});
}
});
},
findStyleByConditionId(id) {
for(let i=0, ii=this.conditionalStyles.length; i < ii; i++) {
if (this.conditionalStyles[i].conditionId === id) {
return {
index: i,
item: this.conditionalStyles[i]
};
return this.conditionalStyles.find(conditionalStyle => conditionalStyle.conditionId === id);
},
updateConditionalStyle(conditionStyle) {
let found = this.findStyleByConditionId(conditionStyle.conditionId);
if (found) {
found.style = conditionStyle.style;
let domainObjectConditionalStyle = this.domainObject.configuration.conditionalStyle || {};
if (this.itemId) {
let itemConditionalStyle = domainObjectConditionalStyle[this.itemId];
if (itemConditionalStyle) {
this.persist({
...domainObjectConditionalStyle,
[this.itemId]: {
...itemConditionalStyle,
styles: this.conditionalStyles
}
});
}
} else {
domainObjectConditionalStyle.styles = this.conditionalStyles;
this.persist(domainObjectConditionalStyle);
}
}
},
updateConditionalStyle(conditionId, style) {
let found = this.findStyleByConditionId(conditionId);
if (found) {
this.conditionalStyles[found.index].style = style;
}
this.persist(undefined);
},
persist(conditionalStyle) {
this.openmct.objects.mutate(this.domainObject, 'configuration.conditionalStyle', conditionalStyle);
}

12
src/plugins/condition/utils/operations.js
View File

@ -8,7 +8,7 @@ export const OPERATIONS = [
appliesTo: ['number'],
inputCount: 1,
getDescription: function (values) {
return ' == ' + values[0];
return ' is ' + values[0];
}
},
{
@ -20,7 +20,7 @@ export const OPERATIONS = [
appliesTo: ['number'],
inputCount: 1,
getDescription: function (values) {
return ' != ' + values[0];
return ' is not ' + values[0];
}
},
{
@ -80,7 +80,7 @@ export const OPERATIONS = [
appliesTo: ['number'],
inputCount: 2,
getDescription: function (values) {
return ' between ' + values[0] + ' and ' + values[1];
return ' is between ' + values[0] + ' and ' + values[1];
}
},
{
@ -92,7 +92,7 @@ export const OPERATIONS = [
appliesTo: ['number'],
inputCount: 2,
getDescription: function (values) {
return ' not between ' + values[0] + ' and ' + values[1];
return ' is not between ' + values[0] + ' and ' + values[1];
}
},
{
@ -188,7 +188,7 @@ export const OPERATIONS = [
appliesTo: ['enum'],
inputCount: 1,
getDescription: function (values) {
return ' == ' + values[0];
return ' is ' + values[0];
}
},
{
@ -200,7 +200,7 @@ export const OPERATIONS = [
appliesTo: ['enum'],
inputCount: 1,
getDescription: function (values) {
return ' != ' + values[0];
return ' is not ' + values[0];
}
}
];

19
src/plugins/condition/utils/styleUtils.js Normal file
View File

@ -0,0 +1,19 @@
export const getStyleProp = (key, defaultValue) => {
let styleProp = undefined;
switch(key) {
case 'fill': styleProp = {
backgroundColor: defaultValue || 'none'
};
break;
case 'stroke': styleProp = {
border: '1px solid ' + defaultValue || 'none'
};
break;
case 'color': styleProp = {
color: defaultValue || 'inherit'
};
break;
}
return styleProp;
};

14
src/plugins/displayLayout/components/BoxView.vue
View File

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

4
src/plugins/displayLayout/components/ImageView.vue
View File

@ -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
}
}
},

12
src/plugins/displayLayout/components/LineView.vue
View File

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

18
src/plugins/displayLayout/components/TextView.vue
View File

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

54
src/plugins/displayLayout/mixins/conditionalStyles-mixin.js Normal file
View File

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

2
src/plugins/plot/src/configuration/PlotSeries.js
View File

@ -143,7 +143,7 @@ define([
let strategy;
if (this.model.interpolate !== 'none') {
strategy = 'minMax';
strategy = 'minmax';
}
options = _.extend({}, { size: 1000, strategy, filters: this.filters }, options || {});

79
src/plugins/telemetryTable/components/table.vue
View File

@ -28,7 +28,7 @@
<button
v-if="allowExport"
class="c-button icon-download labeled"
title="Export This View's Data"
title="Export this view's data"
@click="exportAllDataAsCSV()"
>
<span class="c-button__label">Export Table Data</span>
@ -37,7 +37,7 @@
v-if="allowExport"
v-show="markedRows.length"
class="c-button icon-download labeled"
title="Export Marked Rows As CSV"
title="Export marked rows as CSV"
@click="exportMarkedDataAsCSV()"
>
<span class="c-button__label">Export Marked Rows</span>
@ -45,7 +45,7 @@
<button
v-show="markedRows.length"
class="c-button icon-x labeled"
title="Unmark All Rows"
title="Unmark all rows"
@click="unmarkAllRows()"
>
<span class="c-button__label">Unmark All Rows</span>
@ -58,7 +58,7 @@
v-if="marking.enable"
class="c-button icon-pause pause-play labeled"
:class=" paused ? 'icon-play is-paused' : 'icon-pause'"
:title="paused ? 'Continue Data Flow' : 'Pause Data Flow'"
:title="paused ? 'Continue real-time data flow' : 'Pause real-time data flow'"
@click="togglePauseByButton()"
>
<span class="c-button__label">
@ -66,6 +66,29 @@
</span>
</button>
<template v-if="!isEditing">
<div
class="c-separator"
>
</div>
<button
v-if="isAutosizeEnabled"
class="c-button icon-arrows-right-left labeled"
title="Increase column widths to fit currently available data."
@click="recalculateColumnWidths"
>
<span class="c-button__label">Expand Columns</span>
</button>
<button
v-else
class="c-button icon-expand labeled"
title="Automatically size columns to fit the table into the available space."
@click="autosizeColumns"
>
<span class="c-button__label">Autosize Columns</span>
</button>
</template>
<slot name="buttons"></slot>
</div>
<!-- main controlbar end -->
@ -461,17 +484,20 @@ export default {
this.scrollW = (this.scrollable.offsetWidth - this.scrollable.clientWidth) + 1;
},
calculateColumnWidths() {
let columnWidths = {};
let totalWidth = 0;
let sizingRowEl = this.sizingTable.children[0];
let sizingCells = Array.from(sizingRowEl.children);
let headerKeys = Object.keys(this.headers);
let columnWidths = {},
totalWidth = 0,
headerKeys = Object.keys(this.headers),
sizingTableRow = this.sizingTable.children[0],
sizingCells = sizingTableRow.children;
headerKeys.forEach((headerKey, headerIndex)=>{
let cell = sizingCells[headerIndex];
let columnWidth = cell.offsetWidth;
columnWidths[headerKey] = columnWidth;
totalWidth += columnWidth;
headerKeys.forEach((headerKey, headerIndex, array)=>{
if (this.isAutosizeEnabled) {
columnWidths[headerKey] = this.sizingTable.clientWidth / array.length;
} else {
let cell = sizingCells[headerIndex];
columnWidths[headerKey] = cell.offsetWidth;
}
totalWidth += columnWidths[headerKey];
});
this.columnWidths = columnWidths;
@ -818,6 +844,31 @@ export default {
this.setHeight();
this.scrollable.scrollTop = this.userScroll;
}
},
updateWidthsAndClearSizingTable() {
this.calculateColumnWidths();
this.configuredColumnWidths = this.columnWidths;
this.visibleRows.forEach((row, i) => {
this.$set(this.sizingRows, i, undefined);
delete this.sizingRows[i];
});
},
recalculateColumnWidths() {
this.visibleRows.forEach((row,i) => {
this.$set(this.sizingRows, i, row);
});
this.configuredColumnWidths = {};
this.isAutosizeEnabled = false;
this.$nextTick()
.then(this.updateWidthsAndClearSizingTable);
},
autosizeColumns() {
this.isAutosizeEnabled = true;
this.$nextTick().then(this.calculateColumnWidths);
}
}
}

1
src/styles/_controls.scss
View File

@ -676,6 +676,7 @@ select {
.c-separator {
@include cToolbarSeparator();
height: 100%;
}
.c-row-separator {

2
src/ui/components/ObjectView.vue
View File

@ -154,6 +154,8 @@ export default {
this.openmct.objectViews.on('clearData', this.clearData);
},
show(object, viewKey, immediatelySelect, currentObjectPath) {
this.updateStyle();
if (this.unlisten) {
this.unlisten();
}

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

@ -8,6 +8,7 @@
<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'],
@ -24,16 +25,30 @@ 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 domainObject = selection[0][0].context.item;
let layoutItem;
let layoutItem = {};
let styleProps = this.getStyleProperties({
fill: 'inherit',
stroke: 'inherit',
color: 'inherit'
});
if (selection[0].length > 1) {
//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)
domainObject = selection[0][0].context.item;
if (!domainObject) {
styleProps = {};
layoutItem = selection[0][0].context.layoutItem;
styleProps = this.getStyleProperties(layoutItem);
domainObject = selection[0][1].context.item;
}
}
@ -49,14 +64,19 @@ export default {
this.component = new Vue({
provide: {
openmct: this.openmct,
domainObject: domainObject,
layoutItem: layoutItem
domainObject: domainObject
},
el: viewContainer,
components: {
ConditionalStylesView
},
template: '<conditional-styles-view></conditional-styles-view>'
data() {
return {
layoutItem,
styleProps
}
},
template: '<conditional-styles-view :item-id="layoutItem.id" :initial-styles="styleProps"></conditional-styles-view>'
});
}
}