ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-23 01:18:57 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

fix extended lines

Browse Source
This commit is contained in:
Scott Bell
2024-12-16 12:15:59 +01:00
parent d97f7c347b
commit cda7cc9d06
1 changed files with 15 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,7 +49,7 @@
<ExtendedLinesOverlay <ExtendedLinesOverlay
:extended-lines-per-key="extendedLinesPerKey" :extended-lines-per-key="extendedLinesPerKey"
:height="height" :height="height"
:left-offset="extendedLeftOffset" :left-offset="extendedLinesLeftOffset"
/> />
</div> </div>
</template> </template>
@ -63,7 +63,7 @@ import SwimLane from '@/ui/components/swim-lane/SwimLane.vue';
import TimelineAxis from '../../ui/components/TimeSystemAxis.vue'; import TimelineAxis from '../../ui/components/TimeSystemAxis.vue';
import { useAlignment } from '../../ui/composables/alignmentContext.js'; import { useAlignment } from '../../ui/composables/alignmentContext.js';
import { getValidatedData, getValidatedGroups } from '../plan/util.js'; import { getValidatedData, getValidatedGroups } from '../plan/util.js';
import ExtendedLinesOverlay from './ExtendedLinesOverlay.vue'; // Import the overlay component import ExtendedLinesOverlay from './ExtendedLinesOverlay.vue';
import TimelineObjectView from './TimelineObjectView.vue'; import TimelineObjectView from './TimelineObjectView.vue';
const unknownObjectType = { const unknownObjectType = {
@ -103,14 +103,13 @@ export default {
useIndependentTime: this.domainObject.configuration.useIndependentTime === true, useIndependentTime: this.domainObject.configuration.useIndependentTime === true,
timeOptions: this.domainObject.configuration.timeOptions, timeOptions: this.domainObject.configuration.timeOptions,
extendedLinesPerKey: {}, extendedLinesPerKey: {},
additionalLeftOffset: 0, extendedLinesLeftOffset: 0
extendedLeftOffset: 0
}; };
}, },
watch: { watch: {
alignmentData: { alignmentData: {
handler() { handler() {
this.extendedLeftOffset = this.alignmentData.leftWidth + this.additionalLeftOffset; this.calculateExtendedLinesLeftOffset();
}, },
deep: true deep: true
} }
@ -125,7 +124,7 @@ export default {
this.contentResizeObserver.disconnect(); this.contentResizeObserver.disconnect();
this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines); this.extendedLinesBus.off('update-extended-lines', this.updateExtendedLines);
}, },
async mounted() { mounted() {
this.items = []; this.items = [];
this.setTimeContext(); this.setTimeContext();
@ -141,8 +140,6 @@ export default {
this.handleContentResize = _.debounce(this.handleContentResize, 500); this.handleContentResize = _.debounce(this.handleContentResize, 500);
this.contentResizeObserver = new ResizeObserver(this.handleContentResize); this.contentResizeObserver = new ResizeObserver(this.handleContentResize);
this.contentResizeObserver.observe(this.$refs.timelineHolder); this.contentResizeObserver.observe(this.$refs.timelineHolder);
await this.$nextTick();
this.calculateAdditionalLeftOffset();
}, },
methods: { methods: {
addItem(domainObject) { addItem(domainObject) {
@ -195,6 +192,7 @@ export default {
if (this.height !== clientHeight) { if (this.height !== clientHeight) {
this.height = clientHeight; this.height = clientHeight;
} }
this.calculateExtendedLinesLeftOffset();
}, },
getClientHeight() { getClientHeight() {
let clientHeight = this.$refs.timelineHolder.getBoundingClientRect().height; let clientHeight = this.$refs.timelineHolder.getBoundingClientRect().height;
@ -256,15 +254,21 @@ export default {
updateExtendedLines({ keyString, lines }) { updateExtendedLines({ keyString, lines }) {
this.extendedLinesPerKey[keyString] = lines; this.extendedLinesPerKey[keyString] = lines;
}, },
calculateAdditionalLeftOffset() { calculateExtendedLinesLeftOffset() {
const swimLaneOffset = this.calculateSwimlaneOffset();
this.extendedLinesLeftOffset = this.alignmentData.leftWidth + swimLaneOffset;
},
calculateSwimlaneOffset() {
const firstSwimLane = this.$el.querySelector('.c-swimlane__lane-object'); const firstSwimLane = this.$el.querySelector('.c-swimlane__lane-object');
if (firstSwimLane) { if (firstSwimLane) {
const timelineHolderRect = this.$refs.timelineHolder.getBoundingClientRect(); const timelineHolderRect = this.$refs.timelineHolder.getBoundingClientRect();
const laneObjectRect = firstSwimLane.getBoundingClientRect(); const laneObjectRect = firstSwimLane.getBoundingClientRect();
const offset = laneObjectRect.left - timelineHolderRect.left; const offset = laneObjectRect.left - timelineHolderRect.left;
this.additionalLeftOffset = offset + AXES_PADDING; const swimLaneOffset = offset + AXES_PADDING;
return swimLaneOffset;
} else {
return 0;
} }
console.debug('🤖 additionalLeftOffset:', this.additionalLeftOffset);
} }
} }
}; };