ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-26 16:21:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Display Layout] User should be able to toggle grid lines (#3331)

Browse Source 
* 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:
David Tsay 2020-10-23 09:32:35 -07:00 committed by GitHub
parent c1f3ea4e61
commit 463c44679d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 133 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/plugins/displayLayout/DisplayLayoutToolbar.js
View File

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

37
src/plugins/displayLayout/components/DisplayLayout.vue
View File

@ -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
View 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>

3
src/plugins/displayLayout/plugin.js
View File

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

3
src/plugins/displayLayout/pluginSpec.js
View File

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

13
src/styles/_controls.scss
View File

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

36
src/ui/toolbar/Toolbar.vue
View File

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