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

Mct4207 (#4366)

Browse Source 
* MCT 4207
* fix lint

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
This commit is contained in:
David 'Epper' Marshall 2021-11-15 14:25:57 -05:00 committed by GitHub
parent d10561fc7f
commit 53f5fdabe5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@
v-if="isEditing"
:grid-size="gridSize"
:show-grid="showGrid"
:grid-dimensions="gridDimensions"
/>
<div
v-if="shouldDisplayLayoutDimensions"
@ -159,7 +160,8 @@ export default {
initSelectIndex: undefined,
selection: [],
showGrid: true,
viewContext: {}
viewContext: {},
gridDimensions: [0, 0]
};
},
computed: {
@ -204,6 +206,23 @@ export default {
if (value) {
this.showGrid = value;
}
},
layoutItems: {
handler(value) {
let wMax = this.$el.clientWidth / this.gridSize[0];
let hMax = this.$el.clientHeight / this.gridSize[1];
value.forEach(item => {
if (item.x + item.width > wMax) {
wMax = item.x + item.width + 2;
}
if (item.y + item.height > hMax) {
hMax = item.y + item.height + 2;
}
});
this.gridDimensions = [wMax * this.gridSize[0], hMax * this.gridSize[1]];
},
deep: true
}
},
mounted() {
@ -213,6 +232,7 @@ export default {
this.composition.on('add', this.addChild);
this.composition.on('remove', this.removeChild);
this.composition.load();
this.gridDimensions = [this.$el.offsetWidth, this.$el.scrollHeight];
},
destroyed: function () {
this.openmct.selection.off('change', this.setSelection);

10
src/plugins/displayLayout/components/DisplayLayoutGrid.vue
View File

@ -6,12 +6,12 @@
<div
v-if="gridSize[0] >= 3"
class="c-grid__x l-grid l-grid-x"
:style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
:style="[{ backgroundSize: gridSize[0] + 'px 100%', width: gridDimensions[0] +'px', height: gridDimensions[1] +'px' }]"
></div>
<div
v-if="gridSize[1] >= 3"
class="c-grid__y l-grid l-grid-y"
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px', width: gridDimensions[0] +'px', height: gridDimensions[1] +'px' }]"
></div>
</div>
</template>
@ -28,6 +28,12 @@ export default {
showGrid: {
type: Boolean,
required: true
},
gridDimensions: {
type: Array,
required: true,
validator: (arr) => arr && arr.length === 2
&& arr.every(el => typeof el === 'number')
}
}
};