diff options
Diffstat (limited to 'src/components/TimeLine.vue')
| -rw-r--r-- | src/components/TimeLine.vue | 12 |
1 files changed, 9 insertions, 3 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 7684bbc..bc0f43c 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -5,9 +5,7 @@ @pointercancel.prevent="onPointerUp" @pointerout.prevent="onPointerUp" @pointerleave.prevent="onPointerUp" ref="rootRef"> <svg :viewBox="`0 0 ${width} ${height}`"> - <line stroke="yellow" stroke-width="2px" - :x1="vert2 ? width/2 : 0" :y1="vert2 ? 0 : height/2" - :x2="vert2 ? width/2 : width" :y2="vert2 ? height : height/2"/> + <line stroke="yellow" stroke-width="2px" x1="0" y1="0" x2="1" y2="0" :style="mainlineStyles"/> <template v-for="n in ticks" :key="n"> <line v-if="n == MIN_DATE || n == MAX_DATE" :x1="vert2 ? -END_TICK_SZ : 0" :y1="vert2 ? 0 : -END_TICK_SZ" @@ -366,6 +364,14 @@ function onClose(){ } // Styles +const mainlineStyles = computed(() => ({ + transform: vert2.value ? + `translate(${width.value/2}px, 0) rotate(90deg) scale(${height.value},1)` : + `translate(0, ${height.value/2}px) scale(${width.value},1)`, + transitionProperty: skipTransition.value ? 'none' : 'transform', + transitionDuration: '300ms', + transitionTimingFunction: 'ease-out', +})); function tickStyles(tick: number){ let offset = (tick - startDate.value) / (endDate.value - startDate.value) * availLen.value; let scale = 1; |