From bb4f7f6dd4054de2c29113f72bc43777337aed9b Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 10 Oct 2022 19:24:56 +1100
Subject: Add timeline bound indicators to baseline

---
 src/components/BaseLine.vue | 39 +++++++++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 4 deletions(-)

(limited to 'src/components/BaseLine.vue')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index f0008f9..bde2e56 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -1,21 +1,28 @@
 <template>
-<div class="bg-stone-900 text-stone-50 flex" :class="{'flex-col': vert}">
+<div class="bg-stone-900 text-stone-50 flex relative" :class="{'flex-col': vert}">
 	<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
 		<div :style="labelStyles">{{p.label}}</div>
 	</div>
+	<TransitionGroup name="fade">
+		<div v-for="d in timelineData" :key="d.id"
+			class="absolute bg-yellow-200/50" :style="spanStyles(d)">
+			{{d.id}}
+		</div>
+	</TransitionGroup>
 </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, PropType} from 'vue';
+import {ref, computed} from 'vue';
+import {MIN_DATE, MAX_DATE} from '../lib';
 
 // Props
 const props = defineProps({
 	vert: {type: Boolean, required: true},
-	timelineData: {type: Object as PropType<number[][]>, required: true},
+	timelineData: {type: Object, required: true},
 });
 
-// Time periods to represent
+// Static time periods to represent
 const periods = ref([
 	{label: 'One', len: 1},
 	{label: 'Two', len: 2},
@@ -35,4 +42,28 @@ const labelStyles = computed(() => ({
 	width: props.vert ? '40px' : 'auto',
 	padding: props.vert ? '0' : '4px',
 }));
+function spanStyles(d){
+	let styles: Record<string,string>;
+	let beforeFrac = Math.max(0, (d.start - MIN_DATE) / (MAX_DATE - MIN_DATE)); // Clip at zero due to end-padding
+	let lenFrac = Math.min(1 - beforeFrac, (d.end - d.start) / (MAX_DATE - MIN_DATE));
+	if (props.vert){
+		styles = {
+			top: beforeFrac * 100 + '%',
+			left: 0,
+			height: lenFrac * 100 + '%',
+			width: '100%',
+		}
+	} else {
+		styles = {
+			top: 0,
+			left: beforeFrac * 100 + '%',
+			height: '100%',
+			width: lenFrac * 100 + '%',
+		}
+	}
+	return {
+		...styles,
+		transition: 'all 300ms ease-out',
+	};
+}
 </script>
-- 
cgit v1.2.3