ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-21 17:57:04 +00:00
Code Issues Actions 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" v-if="isEditing"
:grid-size="gridSize" :grid-size="gridSize"
:show-grid="showGrid" :show-grid="showGrid"
:grid-dimensions="gridDimensions"
/> />
<div <div
v-if="shouldDisplayLayoutDimensions" v-if="shouldDisplayLayoutDimensions"
@ -159,7 +160,8 @@ export default {
initSelectIndex: undefined, initSelectIndex: undefined,
selection: [], selection: [],
showGrid: true, showGrid: true,
viewContext: {} viewContext: {},
gridDimensions: [0, 0]
}; };
}, },
computed: { computed: {
@ -204,6 +206,23 @@ export default {
if (value) { if (value) {
this.showGrid = 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() { mounted() {
@ -213,6 +232,7 @@ export default {
this.composition.on('add', this.addChild); this.composition.on('add', this.addChild);
this.composition.on('remove', this.removeChild); this.composition.on('remove', this.removeChild);
this.composition.load(); this.composition.load();
this.gridDimensions = [this.$el.offsetWidth, this.$el.scrollHeight];
}, },
destroyed: function () { destroyed: function () {
this.openmct.selection.off('change', this.setSelection); this.openmct.selection.off('change', this.setSelection);

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

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