From d48f3b862fad74af6576297d471d7834b1f0bba8 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 2 Jan 2023 17:47:38 +1100
Subject: Make baseline time-spans non-overlapping

Remove time-span labels
Fix firstDate/lastDate being passed to TimelineState instead of startDate/endDate
---
 src/components/BaseLine.vue | 25 +++++++++++++++----------
 src/components/TimeLine.vue |  2 +-
 2 files changed, 16 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 8730d90..6d31287 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -5,9 +5,7 @@
 		<div :style="labelStyles">{{p.label}}</div>
 	</div>
 	<TransitionGroup name="fade" v-if="mounted">
-		<div v-for="state in timelines" :key="state.id" class="absolute" :style="spanStyles(state)">
-			{{state.id}}
-		</div>
+		<div v-for="(state, idx) in timelines" :key="state.id" class="absolute" :style="spanStyles(idx)"></div>
 	</TransitionGroup>
 </div>
 </template>
@@ -79,9 +77,11 @@ const labelStyles = computed((): Record<string, string> => ({
 	width: props.vert ? '40px' : 'auto',
 	padding: props.vert ? '0' : '4px',
 }));
-function spanStyles(state: TimelineState){
+function spanStyles(stateIdx: number){
+	const state = props.timelines[stateIdx];
 	let styles: Record<string,string>;
-	let availLen = props.vert ? height.value : width.value;
+	const availLen = props.vert ? height.value : width.value;
+	const availBreadth = props.vert ? width.value : height.value;
 	// Determine start/end date
 	if (state.startOffset == null || state.endOffset == null || state.scaleIdx == null){
 		return {display: 'none'};
@@ -102,19 +102,22 @@ function spanStyles(state: TimelineState){
 		lenPx = 3;
 		startPx -= Math.max(0, startPx + lenPx - availLen);
 	}
+	// Account for multiple timelines
+	const breadth = availBreadth / props.timelines.length;
+	const sidePx = breadth * stateIdx;
 	//
 	if (props.vert){
 		styles = {
 			top: startPx + 'px',
-			left: '0',
+			left: sidePx + 'px',
 			height: lenPx + 'px',
-			width: '100%',
+			width: breadth + 'px',
 		}
 	} else {
 		styles = {
-			top: '0',
+			top: sidePx + 'px',
 			left: startPx + 'px',
-			height: '100%',
+			height: breadth + 'px',
 			width: lenPx + 'px',
 		}
 	}
@@ -123,7 +126,9 @@ function spanStyles(state: TimelineState){
 		transition: skipTransition.value ? 'none' : 'all 300ms ease-out',
 		color: 'black',
 		backgroundColor: store.color.alt,
-		opacity: 0.4,
+		opacity: 0.6,
+		borderWidth: '1px',
+		borderColor: store.color.bg,
 	};
 }
 </script>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 087d504..bdd5434 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -1100,7 +1100,7 @@ function onShiftWheel(evt: WheelEvent){
 // For bound-change signalling
 function onStateChg(){
 	emit('state-chg', new TimelineState(
-		ID, firstDate.value, lastDate.value, startOffset.value, endOffset.value, scaleIdx.value
+		ID, startDate.value, endDate.value, startOffset.value, endOffset.value, scaleIdx.value
 	));
 }
 watch(firstDate, onStateChg);
-- 
cgit v1.2.3