ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-03-22 12:05:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Closes #7936

Browse Source 
- Fix left and right `alignmentData` offsets that were not being applied to the correct element.
This commit is contained in:
Charles Hacskaylo 2024-12-19 19:17:28 -08:00
parent 0933d27ce6
commit 15b674f3d1
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,7 @@
at runtime from the About dialog for additional information.
-->
<template>
<div ref="axisHolder" class="c-timesystem-axis">
<div ref="axisHolder" class="c-timesystem-axis" :style="alignmentStyle">
<div class="c-timesystem-axis__mb-line" :style="nowMarkerStyle"></div>
<svg :width="svgWidth" :height="svgHeight">
<g class="axis" :transform="axisTransform"></g>
@ -81,6 +81,7 @@ export default {
const svgHeight = ref(0);
const axisTransform = ref(`translate(0,${TIME_AXIS_LINE_Y})`);
const alignmentOffset = ref(0);
const alignmentStyle = ref({ margin: `0 0 0 0` });
const nowMarkerStyle = reactive({
height: '0px',
left: '0px'
@ -103,6 +104,7 @@ export default {
svgHeight,
axisTransform,
alignmentOffset,
alignmentStyle,
nowMarkerStyle,
openmct
};
@ -111,14 +113,13 @@ export default {
alignmentData: {
handler() {
let leftOffset = 0;
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
if (this.alignmentData.leftWidth) {
leftOffset = this.alignmentData.multiple ? 2 * AXES_PADDING : AXES_PADDING;
}
this.axisTransform = `translate(${this.alignmentData.leftWidth + leftOffset}, ${TIME_AXIS_LINE_Y})`;
const rightOffset = this.alignmentData.rightWidth ? AXES_PADDING : 0;
this.alignmentOffset =
this.alignmentData.leftWidth + leftOffset + this.alignmentData.rightWidth + rightOffset;
this.alignmentStyle = {
margin: `0 ${this.alignmentData.rightWidth + rightOffset}px 0 ${this.alignmentData.leftWidth + leftOffset}px`
};
this.refresh();
},
deep: true
@ -173,19 +174,18 @@ export default {
const nowMarker = this.$el.querySelector('.c-timesystem-axis__mb-line');
if (nowMarker) {
nowMarker.classList.remove('hidden');
// const markerH = this.contentHeight - TIME_AXIS_LINE_Y;
this.nowMarkerStyle.height = this.contentHeight - TIME_AXIS_LINE_Y + 'px';
this.nowMarkerStyle.top = TIME_AXIS_LINE_Y + 'px';
const nowTimeStamp = this.openmct.time.now();
const now = this.xScale(nowTimeStamp);
this.nowMarkerStyle.left = `${now + this.alignmentOffset}px`;
if (now > this.width) {
this.nowMarkerStyle.left = `${now}px`;
if (now < 0 || now > this.width) {
nowMarker.classList.add('hidden');
}
}
},
setDimensions() {
this.width = this.axisHolder.clientWidth - (this.alignmentOffset ?? 0);
this.width = this.axisHolder.clientWidth;
this.height = Math.round(this.axisHolder.getBoundingClientRect().height);
if (this.useSVG) {