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 +++++++++++++++++++++++++++++++++++----
 src/components/TimeLine.vue | 44 +++++++++++++++-----------------------------
 2 files changed, 50 insertions(+), 33 deletions(-)

(limited to 'src/components')

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>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 796f5c7..2cdf31f 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -32,7 +32,8 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, computed, nextTick} from 'vue';
+import {ref, onMounted, computed, watch, nextTick} from 'vue';
+import {MIN_DATE, MAX_DATE} from '../lib';
 // Components
 import IconButton from './IconButton.vue';
 // Icons
@@ -44,8 +45,10 @@ const rootRef = ref(null as HTMLElement | null);
 // Props + events
 const props = defineProps({
 	vert: {type: Boolean, required: true},
+	initialStart: {type: Number, required: true},
+	initialEnd: {type: Number, required: true},
 });
-const emit = defineEmits(['close']);
+const emit = defineEmits(['close', 'bound-chg']);
 
 // For skipping transitions on horz/vert swap
 const skipTransition = ref(false);
@@ -72,10 +75,8 @@ const resizeObserver = new ResizeObserver((entries) => {
 onMounted(() => resizeObserver.observe(rootRef.value));
 
 // Vars
-const MIN_DATE = -1000; // Lowest date that gets marked
-const MAX_DATE = 1000;
-const startDate = ref(0); // Lowest date on displayed timeline
-const endDate = ref(0);
+const startDate = ref(props.initialStart); // Lowest date on displayed timeline
+const endDate = ref(props.initialEnd);
 const SCALES = [200, 50, 10, 1, 0.2]; // The timeline get divided into units of SCALES[0], then SCALES[1], etc
 let scaleIdx = 0; // Index of current scale in SCALES
 const ticks = ref(null); // Holds date value for each tick
@@ -92,21 +93,17 @@ const availLen = computed(() => props.vert ? height.value : width.value);
 function initTicks(): number[] {
 	// Find smallest usable scale
 	for (let i = 0; i < SCALES.length; i++){
-		let dateLen = MAX_DATE - MIN_DATE + (padUnits.value * SCALES[i]) * 2;
+		let dateLen = endDate.value - startDate.value;
 		if (availLen.value * (SCALES[i] / dateLen) > MIN_TICK_SEP){
 			scaleIdx = i;
 		} else {
 			break;
 		}
 	}
-	// Set start/end date
-	let extraPad = padUnits.value * SCALES[scaleIdx];
-	startDate.value = MIN_DATE - extraPad;
-	endDate.value = MAX_DATE + extraPad;
 	// Get tick values
 	let newTicks = [];
-	let next = MIN_DATE;
-	while (next <= MAX_DATE){
+	let next = startDate.value;
+	while (next <= endDate.value){
 		newTicks.push(next);
 		next += SCALES[scaleIdx];
 	}
@@ -362,6 +359,11 @@ function onClose(){
 	emit('close');
 }
 
+// For bound-change signalling
+watch(startDate, () => {
+	emit('bound-chg', [startDate.value, endDate.value]);
+});
+
 // Styles
 const mainlineStyles = computed(() => ({
 	transform: props.vert ?
@@ -401,19 +403,3 @@ function tickLabelStyles(tick: number){
 	}
 }
 </script>
-
-<style>
-.animate-fadein {
-	animation-name: fadein;
-	animation-duration: 300ms;
-	animation-timing-function: ease-in;
-}
-@keyframes fadein {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-</style>
-- 
cgit v1.2.3