From 1b14b45ac494c090037eb4c5f92321d1aebc59da Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 00:34:36 +1100
Subject: Make title clicks reset timelines

---
 src/App.vue                 | 32 +++++++++++++++++++++-----------
 src/components/TimeLine.vue | 10 ++++++++++
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 933a36d..fb9b0e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,8 @@
 <div class="absolute left-0 top-0 w-screen h-screen overflow-hidden flex flex-col">
 	<!-- Title bar -->
 	<div class="flex gap-2 p-2" :style="{backgroundColor: store.color.bgDark2}">
-		<h1 class="my-auto sm:ml-2 text-3xl sm:text-4xl" :style="{color: store.color.altDark}">Histplorer</h1>
+		<h1 class="my-auto sm:ml-2 text-3xl sm:text-4xl hover:cursor-pointer" :style="{color: store.color.altDark}"
+			@click="onReset" title="Reset Timeline">Histplorer</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
 		<icon-button :size="45" :style="buttonStyles" @click="helpOpen = true" title="Show help info">
@@ -24,8 +25,8 @@
 			:style="{backgroundColor: store.color.bg}" ref="contentAreaRef">
 		<time-line v-for="(state, idx) in timelines" :key="state.id"
 			:vert="vert" :initialState="state" :closeable="timelines.length > 1"
-			:eventTree="eventTree" :unitCountMaps="unitCountMaps"
-			:current="idx == currentTimelineIdx && !modalOpen" :searchTarget="timelineTargets[idx]"
+			:eventTree="eventTree" :unitCountMaps="unitCountMaps" :current="idx == currentTimelineIdx && !modalOpen"
+			:searchTarget="searchTargets[idx]" :reset="resetFlags[idx]"
 			class="grow basis-full min-h-0 outline outline-1"
 			@close="onTimelineClose(idx)" @state-chg="onTimelineChg($event, idx)" @event-display="onEventDisplay"
 			@info-click="onInfoClick" @pointerenter="currentTimelineIdx = idx"/>
@@ -99,7 +100,8 @@ function addTimeline(){
 		timelines.value.splice(currentTimelineIdx.value, 0, new TimelineState(
 			nextTimelineId, state.startDate, state.endDate, state.startOffset, state.endOffset, state.scaleIdx));
 	}
-	timelineTargets.value.splice(currentTimelineIdx.value, 0, [null, false]);
+	searchTargets.value.splice(currentTimelineIdx.value, 0, [null, false]);
+	resetFlags.value.splice(currentTimelineIdx.value, 0, false);
 	currentTimelineIdx.value += 1;
 	nextTimelineId += 1;
 }
@@ -128,7 +130,8 @@ function onTimelineClose(idx: number){
 		return;
 	}
 	timelines.value.splice(idx, 1);
-	timelineTargets.value.splice(idx, 1);
+	searchTargets.value.splice(idx, 1);
+	resetFlags.value.splice(idx, 1);
 	if (currentTimelineIdx.value >= idx){
 		currentTimelineIdx.value = Math.max(0, idx - 1);
 	}
@@ -195,7 +198,7 @@ async function onEventDisplay(
 	async function handleEvent(
 			timelineId: number, eventIds: number[], firstDate: HistDate, lastDate: HistDate, scaleIdx: number){
 		let timelineIdx = timelines.value.findIndex((s : TimelineState) => s.id == timelineId);
-		let targetEvent = timelineTargets.value[timelineIdx][0];
+		let targetEvent = searchTargets.value[timelineIdx][0];
 		// Skip if range has been queried, and enough of its events have been obtained
 		if (queriedRanges[scaleIdx].contains([firstDate, lastDate])
 				&& (targetEvent == null || idToEvent.has(targetEvent.id))){
@@ -277,7 +280,7 @@ async function onEventDisplay(
 			if (!idToEvent.has(targetEvent.id)){
 				console.log(`WARNING: Server response did not include event matching 'incl=${targetEvent.id}'`);
 			}
-			timelineTargets.value[timelineIdx][0] = null;
+			searchTargets.value[timelineIdx][0] = null;
 		}
 		// Collect unit counts
 		const unitCounts = responseObj.unitCounts;
@@ -326,13 +329,13 @@ async function onInfoClick(eventTitle: string){
 
 // For search modal
 const searchOpen = ref(false);
-const timelineTargets = ref([] as [HistEvent | null, boolean][]); // For communicating search results to timelines
+const searchTargets = ref([] as [HistEvent | null, boolean][]); // For communicating search results to timelines
 	// A boolean flag is used to trigger jumping even when the same event occurs twice
 function onSearch(event: HistEvent){
 	searchOpen.value = false;
-	// Trigger jump in endmost timeline
-	let oldVal = timelineTargets.value[currentTimelineIdx.value];
-	timelineTargets.value.splice(currentTimelineIdx.value, 1, [event, !oldVal[1]]);
+	// Trigger jump in current timeline
+	let oldVal = searchTargets.value[currentTimelineIdx.value];
+	searchTargets.value.splice(currentTimelineIdx.value, 1, [event, !oldVal[1]]);
 }
 
 // For settings modal
@@ -351,6 +354,13 @@ function onSettingChg(option: string){
 // For help modal
 const helpOpen = ref(false);
 
+// For timeline reset
+const resetFlags: Ref<boolean[]> = ref([]);
+function onReset(){
+	let oldFlag = resetFlags.value[currentTimelineIdx.value];
+	resetFlags.value.splice(currentTimelineIdx.value, 1, !oldFlag);
+}
+
 //
 const modalOpen = computed(() =>
 	(infoModalData.value != null || searchOpen.value || settingsOpen.value || helpOpen.value));
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index f1188cc..56136fd 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -102,6 +102,7 @@ const props = defineProps({
 	unitCountMaps: {type: Object as PropType<Map<number, number>[]>, required: true},
 	current: {type: Boolean, required: true},
 	searchTarget: {type: Object as PropType<[null | HistEvent, boolean]>, required: true},
+	reset: {type: Boolean, required: true},
 });
 const emit = defineEmits(['close', 'state-chg', 'event-display', 'info-click']);
 
@@ -1256,6 +1257,15 @@ watch(idToEvent, () => { // Remove highlighting of search results that have beco
 	}
 });
 
+// For resets
+watch(() => props.reset, () => {
+	startDate.value = store.initialStartDate;
+	endDate.value = store.initialEndDate;
+	startOffset.value = store.defaultEndTickOffset;
+	endOffset.value = store.defaultEndTickOffset;
+	initScale();
+});
+
 // For keyboard shortcuts
 function onKeyDown(evt: KeyboardEvent){
 	if (!props.current || store.disableShortcuts){
-- 
cgit v1.2.3