diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-12-27 10:15:02 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-12-27 10:15:02 +1100 |
| commit | 4261c285072a88e7fd7f631f46fdbc40fa9f14a7 (patch) | |
| tree | 4d2e70d5b5c19cf344e146c1922c98213f87ef1e /src/components | |
| parent | 0fe21621c7ae4d413c6db7f8f8edefc1870a3160 (diff) | |
Show dashed line if event has imprecise start
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/TimeLine.vue | 11 |
1 files changed, 7 insertions, 4 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index ee88424..009abd8 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -32,11 +32,14 @@ :fill="store.color.textDark" :style="tickLabelStyles(tick)" class="text-sm animate-fadein"> {{tick.date.toDisplayString()}} </text> - <!-- Event lines --> + <!-- Event lines (dashed line indicates imprecise start date) --> <line v-for="id in eventLines.keys()" :key="id" - x1="0" y1="0" x2="1" y2="0.01" stroke="url('#eventLineGradient')" stroke-width="1px" + x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01" + stroke="url('#eventLineGradient')" stroke-width="1px" + :stroke-dasharray="idToEvent.get(id)!.startUpper == null ? '' : '16,4'" :style="eventLineStyles(id)" class="animate-fadein"/> <!-- Note: With a fully vertical or horizontal line, nothing gets displayed --> + <!-- Note: Can't use :x2="1" and scale in style, as it makes dashed-lines non-uniform --> </svg> <!-- Events --> <div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein" :style="eventStyles(id)"> @@ -1075,9 +1078,9 @@ function eventImgStyles(eventId: number){ }; } function eventLineStyles(eventId: number){ - const [x, y, l, a] = eventLines.value.get(eventId)!; + const [x, y, , a] = eventLines.value.get(eventId)!; return { - transform: `translate(${x}px, ${y}px) rotate(${a}deg) scaleX(${l})`, + transform: `translate(${x}px, ${y}px) rotate(${a}deg)`, transitionProperty: skipTransition.value ? 'none' : 'transform', transitionDuration: store.transitionDuration + 'ms', transitionTimingFunction: 'ease-out', |