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

Plan rendering inside a timestrip (#6852)

Browse Source 
* Use the width and height of the container of the plan to set the activity widths and now markers

* Use the right parent to determine height and width

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>
This commit is contained in:
Shefali Joshi 2023-07-28 10:24:48 -07:00 committed by GitHub
parent d4e51cbaf1
commit 3c2b032526
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/plugins/plan/components/Plan.vue
View File

@ -281,7 +281,7 @@ export default {
if (!clientWidth) {
//this is a hack - need a better way to find the parent of this component
let parent = this.openmct.layout.$refs.browseObject.$el;
let parent = this.getParent();
if (parent) {
clientWidth = parent.getBoundingClientRect().width;
}
@ -289,12 +289,15 @@ export default {
return clientWidth - 200;
},
getParent() {
//this is a hack - need a better way to find the parent of this component
return this.$el.closest('.is-object-type-time-strip');
},
getClientHeight() {
let clientHeight = this.$refs.plan.clientHeight;
if (!clientHeight) {
//this is a hack - need a better way to find the parent of this component
let parent = this.openmct.layout.$refs.browseObject.$el;
let parent = this.getParent();
if (parent) {
clientHeight = parent.getBoundingClientRect().height;
}

13
src/plugins/timeline/TimelineViewLayout.vue
View File

@ -52,6 +52,7 @@ import TimelineObjectView from './TimelineObjectView.vue';
import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
import { getValidatedData } from '../plan/util';
import _ from 'lodash';
const unknownObjectType = {
definition: {
@ -81,6 +82,7 @@ export default {
this.composition.off('remove', this.removeItem);
this.composition.off('reorder', this.reorder);
this.stopFollowingTimeContext();
this.contentResizeObserver.disconnect();
},
mounted() {
this.items = [];
@ -92,6 +94,10 @@ export default {
this.composition.on('reorder', this.reorder);
this.composition.load();
}
this.handleContentResize = _.debounce(this.handleContentResize, 500);
this.contentResizeObserver = new ResizeObserver(this.handleContentResize);
this.contentResizeObserver.observe(this.$refs.timelineHolder);
},
methods: {
addItem(domainObject) {
@ -132,6 +138,9 @@ export default {
this.items[reorderEvent.newIndex] = oldItems[reorderEvent.oldIndex];
});
},
handleContentResize() {
this.updateContentHeight();
},
updateContentHeight() {
const clientHeight = this.getClientHeight();
if (this.height !== clientHeight) {
@ -139,11 +148,11 @@ export default {
}
},
getClientHeight() {
let clientHeight = this.$refs.contentHolder.getBoundingClientRect().height;
let clientHeight = this.$refs.timelineHolder.getBoundingClientRect().height;
if (!clientHeight) {
//this is a hack - need a better way to find the parent of this component
let parent = this.openmct.layout.$refs.browseObject.$el;
let parent = this.$el.closest('.c-object-view');
if (parent) {
clientHeight = parent.getBoundingClientRect().height;
}

24
src/ui/components/TimeSystemAxis.vue
View File

@ -78,6 +78,9 @@ export default {
},
timeSystem(newTimeSystem) {
this.drawAxis(this.bounds, newTimeSystem);
},
contentHeight() {
this.updateNowMarker();
}
},
mounted() {
@ -110,20 +113,13 @@ export default {
}
},
updateNowMarker() {
if (this.openmct.time.getClock() === undefined) {
let nowMarker = document.querySelector('.nowMarker');
if (nowMarker) {
nowMarker.classList.add('hidden');
}
} else {
let nowMarker = document.querySelector('.nowMarker');
if (nowMarker) {
nowMarker.classList.remove('hidden');
nowMarker.style.height = this.contentHeight + 'px';
const nowTimeStamp = this.openmct.time.getClock().currentValue();
const now = this.xScale(nowTimeStamp);
nowMarker.style.left = now + this.offset + 'px';
}
let nowMarker = this.$el.querySelector('.nowMarker');
if (nowMarker) {
nowMarker.classList.remove('hidden');
nowMarker.style.height = this.contentHeight + 'px';
const nowTimeStamp = this.openmct.time.now();
const now = this.xScale(nowTimeStamp);
nowMarker.style.left = now + this.offset + 'px';
}
},
setDimensions() {