Plan rendering inside a timestrip (#6852)

* 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 <[email protected]>
nasa · Jul 28, 2023 · 3c2b032 · 3c2b032
1 parent d4e51cb
commit 3c2b032
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 19 deletions.
diff --git a/src/plugins/plan/components/Plan.vue b/src/plugins/plan/components/Plan.vue
@@ -281,20 +281,23 @@ 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;
         }
       }
 
       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
@@ -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,18 +138,21 @@ export default {
         this.items[reorderEvent.newIndex] = oldItems[reorderEvent.oldIndex];
       });
     },
+    handleContentResize() {
+      this.updateContentHeight();
+    },
     updateContentHeight() {
       const clientHeight = this.getClientHeight();
       if (this.height !== clientHeight) {
         this.height = clientHeight;
       }
     },
     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
@@ -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() {