From 092d310c5c56dfd9af9de553ddbc6f86b4c957bd Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 2 Jan 2023 16:01:50 +1100
Subject: Visually distinguish 'discover' events

---
 src/components/TimeLine.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 1e78a87..b50141a 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -48,7 +48,7 @@
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)">
 		<!-- Image -->
-		<div class="rounded-full border border-yellow-500" :style="eventImgStyles(id)"></div>
+		<div class="rounded-full" :style="eventImgStyles(id)"></div>
 		<!-- Label -->
 		<div class="text-center text-stone-100 text-sm whitespace-nowrap text-ellipsis overflow-hidden">
 			{{idToEvent.get(id)!.title}}
@@ -1172,6 +1172,8 @@ function eventImgStyles(eventId: number){
 		height: store.eventImgSz + 'px',
 		backgroundImage: `url(${getImagePath(event.imgId)})`,
 		backgroundSize: 'cover',
+		borderColor: event.ctg == 'discovery' ? store.color.alt2 : store.color.altDark,
+		borderWidth: '1px',
 	};
 }
 function eventLineStyles(eventId: number){
-- 
cgit v1.2.3


From d67b35629905b6c26648c7979c28c333664f102f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 2 Jan 2023 16:37:52 +1100
Subject: Skip Timeline transitions for all resize events

Previously, skipping was only done upon vertical/horzontal
orientation change. This didn't address cases like maximising the
window without changing orientation, where pre-existing timeline
ticks would animate out-of-sync with new ones.
---
 src/components/TimeLine.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

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

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index b50141a..087d504 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -102,7 +102,6 @@ const width = ref(0);
 const height = ref(0);
 const availLen = computed(() => props.vert ? height.value : width.value);
 const availBreadth = computed(() => props.vert ? width.value : height.value);
-const prevVert = ref(props.vert); // Previous 'vert' value, used for skipping transitions on horz/vert swap
 const mounted = ref(false);
 onMounted(() => {
 	let rootEl = rootRef.value!;
@@ -118,11 +117,8 @@ const resizeObserver = new ResizeObserver((entries) => {
 			width.value = WRITING_MODE_HORZ ? boxSize.inlineSize : boxSize.blockSize;
 			height.value = WRITING_MODE_HORZ ? boxSize.blockSize : boxSize.inlineSize;
 			// Check for horz/vert swap
-			if (props.vert != prevVert.value){
-				skipTransition.value = true;
-				setTimeout(() => {skipTransition.value = false}, 100); // Note: Using nextTick() doesn't work
-				prevVert.value = props.vert;
-			}
+			skipTransition.value = true;
+			setTimeout(() => {skipTransition.value = false}, 100); // Note: Using nextTick() doesn't work
 		}
 	}
 });
-- 
cgit v1.2.3


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/App.vue                 |  9 +++++----
 src/components/BaseLine.vue | 25 +++++++++++++++----------
 src/components/TimeLine.vue |  2 +-
 src/lib.ts                  |  4 +++-
 4 files changed, 24 insertions(+), 16 deletions(-)

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

diff --git a/src/App.vue b/src/App.vue
index 3de3ac2..b97e55a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,7 +40,7 @@ import SettingsIcon from './components/icon/SettingsIcon.vue';
 import HelpIcon from './components/icon/HelpIcon.vue';
 // Other
 import {timeout, HistDate, HistEvent, queryServer, EventResponseJson, jsonToHistEvent,
-	SCALES, TimelineState, cmpHistEvent, dateToUnit, DateRangeTree} from './lib';
+	SCALES, stepDate, TimelineState, cmpHistEvent, dateToUnit, DateRangeTree} from './lib';
 import {useStore} from './store';
 import {RBTree, rbtree_shallow_copy} from './rbtree';
 
@@ -126,9 +126,10 @@ function reduceEvents(){
 			continue;
 		}
 		// Look for units to keep
-		let scaleIdx: number = timeline.scaleIdx;
-		let startUnit = dateToUnit(timeline.startDate, SCALES[scaleIdx]);
-		let endUnit = dateToUnit(timeline.endDate, SCALES[scaleIdx]);
+		const scaleIdx = timeline.scaleIdx;
+		const scale = SCALES[scaleIdx];
+		let startUnit = dateToUnit(stepDate(timeline.startDate, scale, {forward: false}), scale);
+		let endUnit = dateToUnit(stepDate(timeline.endDate, scale), scale);
 		for (let [unit, count] of unitCountMaps.value[scaleIdx]){
 			if (unit >= startUnit && unit <= endUnit){
 				newMaps[scaleIdx].set(unit, count);
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);
diff --git a/src/lib.ts b/src/lib.ts
index d9d5867..804e352 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -363,8 +363,10 @@ if (DEBUG){
 		}
 	}
 }
-export function stepDate( // If stepping by month or years, leaves day value unchanged
+export function stepDate( // Steps a date N units along a scale
 	date: HistDate, scale: number, {forward=true, count=1, inplace=false} = {}): HistDate {
+	// If stepping by month or years, leaves day value unchanged
+	// Does not account for stepping a CalDate into before MIN_CAL_YEAR
 	const newDate = inplace ? date : date.clone();
 	if (count < 0){
 		count = -count;
-- 
cgit v1.2.3

