mirror of
https://github.com/nasa/openmct.git
synced 2024-12-26 00:01:05 +00:00
[Display Layout] User should be able to toggle grid lines (#3331)
* Display Layout grid toggle and dimensions - Added toggle grid button; - Added Layout 'size' properties; - Very WIP! * Display Layout grid toggle and dimensions - Cleanup toolbar; * new configuration layoutDimensions * extract display layout grid to own vue component * split toolbar structure into two structures * allow toggling grid when editing display layout * toggle grid icon show/hide state on click * grid be shown on starting edit mode * remove dimensions code for other display layout feature * toggle icon after method completes * change icon names * update spec to include new action and separator Co-authored-by: charlesh88 <charlesh88@gmail.com> Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
This commit is contained in:
parent
c1f3ea4e61
commit
463c44679d
src
plugins/displayLayout
styles
ui/toolbar
@ -623,6 +623,33 @@ define(['lodash'], function (_) {
|
||||
}
|
||||
}
|
||||
|
||||
function getToggleGridButton(selection, selectionPath) {
|
||||
const ICON_GRID_SHOW = 'icon-grid-on';
|
||||
const ICON_GRID_HIDE = 'icon-grid-off';
|
||||
|
||||
let displayLayoutContext;
|
||||
|
||||
if (selection.length === 1 && selectionPath === undefined) {
|
||||
displayLayoutContext = selection[0][0].context;
|
||||
} else {
|
||||
displayLayoutContext = selectionPath[1].context;
|
||||
}
|
||||
|
||||
return {
|
||||
control: "button",
|
||||
domainObject: displayLayoutContext.item,
|
||||
icon: ICON_GRID_SHOW,
|
||||
method: function () {
|
||||
displayLayoutContext.toggleGrid();
|
||||
|
||||
this.icon = this.icon === ICON_GRID_SHOW
|
||||
? ICON_GRID_HIDE
|
||||
: ICON_GRID_SHOW;
|
||||
},
|
||||
secondary: true
|
||||
};
|
||||
}
|
||||
|
||||
function getSeparator() {
|
||||
return {
|
||||
control: "separator"
|
||||
@ -637,7 +664,9 @@ define(['lodash'], function (_) {
|
||||
}
|
||||
|
||||
if (isMainLayoutSelected(selectedObjects[0])) {
|
||||
return [getAddButton(selectedObjects)];
|
||||
return [
|
||||
getToggleGridButton(selectedObjects),
|
||||
getAddButton(selectedObjects)];
|
||||
}
|
||||
|
||||
let toolbar = {
|
||||
@ -653,7 +682,8 @@ define(['lodash'], function (_) {
|
||||
'position': [],
|
||||
'duplicate': [],
|
||||
'unit-toggle': [],
|
||||
'remove': []
|
||||
'remove': [],
|
||||
'toggle-grid': []
|
||||
};
|
||||
|
||||
selectedObjects.forEach(selectionPath => {
|
||||
@ -800,6 +830,10 @@ define(['lodash'], function (_) {
|
||||
if (toolbar.duplicate.length === 0) {
|
||||
toolbar.duplicate = [getDuplicateButton(selectedParent, selectionPath, selectedObjects)];
|
||||
}
|
||||
|
||||
if (toolbar['toggle-grid'].length === 0) {
|
||||
toolbar['toggle-grid'] = [getToggleGridButton(selectedObjects, selectionPath)];
|
||||
}
|
||||
});
|
||||
|
||||
let toolbarArray = Object.values(toolbar);
|
||||
|
@ -31,22 +31,12 @@
|
||||
@click.capture="bypassSelection"
|
||||
@drop="handleDrop"
|
||||
>
|
||||
<!-- Background grid -->
|
||||
<div
|
||||
<display-layout-grid
|
||||
v-if="isEditing"
|
||||
class="l-layout__grid-holder c-grid"
|
||||
>
|
||||
<div
|
||||
v-if="gridSize[0] >= 3"
|
||||
class="c-grid__x l-grid l-grid-x"
|
||||
:style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
|
||||
></div>
|
||||
<div
|
||||
v-if="gridSize[1] >= 3"
|
||||
class="c-grid__y l-grid l-grid-y"
|
||||
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
|
||||
></div>
|
||||
</div>
|
||||
:grid-size="gridSize"
|
||||
:show-grid="showGrid"
|
||||
/>
|
||||
|
||||
<component
|
||||
:is="item.type"
|
||||
v-for="(item, index) in layoutItems"
|
||||
@ -81,6 +71,7 @@ import TextView from './TextView.vue';
|
||||
import LineView from './LineView.vue';
|
||||
import ImageView from './ImageView.vue';
|
||||
import EditMarquee from './EditMarquee.vue';
|
||||
import DisplayLayoutGrid from './DisplayLayoutGrid.vue';
|
||||
import _ from 'lodash';
|
||||
|
||||
const TELEMETRY_IDENTIFIER_FUNCTIONS = {
|
||||
@ -127,6 +118,7 @@ const DUPLICATE_OFFSET = 3;
|
||||
|
||||
let components = ITEM_TYPE_VIEW_MAP;
|
||||
components['edit-marquee'] = EditMarquee;
|
||||
components['display-layout-grid'] = DisplayLayoutGrid;
|
||||
|
||||
function getItemDefinition(itemType, ...options) {
|
||||
let itemView = ITEM_TYPE_VIEW_MAP[itemType];
|
||||
@ -140,6 +132,7 @@ function getItemDefinition(itemType, ...options) {
|
||||
|
||||
export default {
|
||||
components: components,
|
||||
inject: ['openmct', 'options', 'objectPath'],
|
||||
props: {
|
||||
domainObject: {
|
||||
type: Object,
|
||||
@ -156,7 +149,8 @@ export default {
|
||||
return {
|
||||
internalDomainObject: domainObject,
|
||||
initSelectIndex: undefined,
|
||||
selection: []
|
||||
selection: [],
|
||||
showGrid: true
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -179,7 +173,13 @@ export default {
|
||||
return this.isEditing && selectionPath && selectionPath.length > 1 && !singleSelectedLine;
|
||||
}
|
||||
},
|
||||
inject: ['openmct', 'options', 'objectPath'],
|
||||
watch: {
|
||||
isEditing(value) {
|
||||
if (value) {
|
||||
this.showGrid = value;
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
|
||||
this.internalDomainObject = JSON.parse(JSON.stringify(obj));
|
||||
@ -798,6 +798,9 @@ export default {
|
||||
|
||||
this.removeItem(selection);
|
||||
this.initSelectIndex = this.layoutItems.length - 1; //restore selection
|
||||
},
|
||||
toggleGrid() {
|
||||
this.showGrid = !this.showGrid;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
34
src/plugins/displayLayout/components/DisplayLayoutGrid.vue
Normal file
34
src/plugins/displayLayout/components/DisplayLayoutGrid.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div
|
||||
class="l-layout__grid-holder"
|
||||
:class="{ 'c-grid': showGrid }"
|
||||
>
|
||||
<div
|
||||
v-if="gridSize[0] >= 3"
|
||||
class="c-grid__x l-grid l-grid-x"
|
||||
:style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
|
||||
></div>
|
||||
<div
|
||||
v-if="gridSize[1] >= 3"
|
||||
class="c-grid__y l-grid l-grid-y"
|
||||
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
gridSize: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (arr) => arr && arr.length === 2
|
||||
&& arr.every(el => typeof el === 'number')
|
||||
},
|
||||
showGrid: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
@ -72,7 +72,8 @@ export default function DisplayLayoutPlugin(options) {
|
||||
duplicateItem: component && component.$refs.displayLayout.duplicateItem,
|
||||
switchViewType: component && component.$refs.displayLayout.switchViewType,
|
||||
mergeMultipleTelemetryViews: component && component.$refs.displayLayout.mergeMultipleTelemetryViews,
|
||||
mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots
|
||||
mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots,
|
||||
toggleGrid: component && component.$refs.displayLayout.toggleGrid
|
||||
};
|
||||
},
|
||||
onEditModeChange: function (isEditing) {
|
||||
|
@ -340,7 +340,8 @@ describe('the plugin', function () {
|
||||
|
||||
it('provides controls including separators', () => {
|
||||
const displayLayoutToolbar = openmct.toolbars.get(selection);
|
||||
expect(displayLayoutToolbar.length).toBe(9);
|
||||
|
||||
expect(displayLayoutToolbar.length).toBe(11);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -739,8 +739,17 @@ select {
|
||||
}
|
||||
|
||||
.c-toolbar {
|
||||
> * + * {
|
||||
margin-left: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
> * {
|
||||
// First level items
|
||||
display: flex;
|
||||
|
||||
> * + * {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__separator {
|
||||
|
@ -1,13 +1,25 @@
|
||||
<template>
|
||||
<div class="c-toolbar">
|
||||
<component
|
||||
:is="item.control"
|
||||
v-for="(item, index) in structure"
|
||||
:key="index"
|
||||
:options="item"
|
||||
@click="triggerMethod(item, $event)"
|
||||
@change="updateObjectValue"
|
||||
/>
|
||||
<div class="c-toolbar__element-controls">
|
||||
<component
|
||||
:is="item.control"
|
||||
v-for="(item, index) in primaryStructure"
|
||||
:key="index"
|
||||
:options="item"
|
||||
@change="updateObjectValue"
|
||||
@click="triggerMethod(item, $event)"
|
||||
/>
|
||||
</div>
|
||||
<div class="c-toolbar__dimensions-and-controls">
|
||||
<component
|
||||
:is="item.control"
|
||||
v-for="(item, index) in secondaryStructure"
|
||||
:key="index"
|
||||
:options="item"
|
||||
@change="updateObjectValue"
|
||||
@click="triggerMethod(item, $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -40,6 +52,14 @@ export default {
|
||||
structure: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
primaryStructure() {
|
||||
return this.structure.filter(item => !item.secondary);
|
||||
},
|
||||
secondaryStructure() {
|
||||
return this.structure.filter(item => item.secondary);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.openmct.selection.on('change', this.handleSelection);
|
||||
this.handleSelection(this.openmct.selection.get());
|
||||
|
Loading…
Reference in New Issue
Block a user