diff --git a/src/plugins/plan/components/Plan.vue b/src/plugins/plan/components/Plan.vue index 5a13547012..cf0c0cf617 100644 --- a/src/plugins/plan/components/Plan.vue +++ b/src/plugins/plan/components/Plan.vue @@ -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; } diff --git a/src/plugins/timeline/TimelineViewLayout.vue b/src/plugins/timeline/TimelineViewLayout.vue index 7183d44333..b22f342d45 100644 --- a/src/plugins/timeline/TimelineViewLayout.vue +++ b/src/plugins/timeline/TimelineViewLayout.vue @@ -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; } diff --git a/src/ui/components/TimeSystemAxis.vue b/src/ui/components/TimeSystemAxis.vue index d0db97ce7f..c3751268a6 100644 --- a/src/ui/components/TimeSystemAxis.vue +++ b/src/ui/components/TimeSystemAxis.vue @@ -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() {