From a968f35c4057493300b2eff17c99a76fb780ba0c Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 01:24:09 +1100
Subject: Add settings for hiding event lines and baseline

---
 src/App.vue                      |  2 +-
 src/components/SettingsModal.vue | 32 +++++++++++++++++++++-----------
 src/components/TimeLine.vue      | 16 +++++++++-------
 src/store.ts                     |  4 ++++
 4 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fb9b0e9..b789d91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@
 			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"/>
-		<base-line :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/>
+		<base-line v-if="store.showBaseLine" :vert="vert" :timelines="timelines" class='m-1 sm:m-2'/>
 	</div>
 	<!-- Modals -->
 	<transition name="fade">
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index bb82016..3e56373 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -26,17 +26,27 @@
 		</div>
 		<div class="pb-2" :class="borderBClasses">
 			<h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Display</h2>
-			<div class="px-2">
-				<label> <input type="checkbox" v-model="store.reqImgs"
-					@change="onSettingChg('reqImgs')"/> Only show events with images </label>
-			</div>
-			<div class="px-2">
-				<label> <input type="checkbox" v-model="store.showEventCounts"
-					@change="onSettingChg('showEventCounts')"/> Show event count indicators </label>
-			</div>
-			<div class="px-2">
-				<label> <input type="checkbox" v-model="store.showMinorTicks"
-					@change="onSettingChg('showMinorTicks')"/> Show minor tick labels </label>
+			<div class="grid grid-cols-2">
+				<div class="px-2 col-span-2">
+					<label> <input type="checkbox" v-model="store.reqImgs"
+						@change="onSettingChg('reqImgs')"/> Only events with images </label>
+				</div>
+				<div class="px-2">
+					<label> <input type="checkbox" v-model="store.showMinorTicks"
+						@change="onSettingChg('showMinorTicks')"/> Minor tick text </label>
+				</div>
+				<div class="px-2">
+					<label> <input type="checkbox" v-model="store.showEventLines"
+						@change="onSettingChg('showEventLines')"/> Event lines </label>
+				</div>
+				<div class="px-2">
+					<label> <input type="checkbox" v-model="store.showEventCounts"
+						@change="onSettingChg('showEventCounts')"/> Event density </label>
+				</div>
+				<div class="px-2">
+					<label> <input type="checkbox" v-model="store.showBaseLine"
+						@change="onSettingChg('showBaseLine')"/> Baseline </label>
+				</div>
 			</div>
 		</div>
 		<div v-if="store.touchDevice == false" class="pb-2" :class="borderBClasses">
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 56136fd..073261c 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -15,13 +15,15 @@
 			</linearGradient>
 		</defs>
 		<!-- Event lines (dashed line indicates imprecise start date) -->
-		<line v-for="id in eventLines.keys()" :key="id"
-			x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01"
-			stroke="url('#eventLineGradient')" stroke-width="1px"
-			:stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'"
-			:style="eventLineStyles(id)" class="animate-fadein"/>
-			<!-- Note: With a fully vertical or horizontal line, nothing gets displayed -->
-			<!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform -->
+		<template v-if="store.showEventLines">
+			<line v-for="id in eventLines.keys()" :key="id"
+				x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01"
+				stroke="url('#eventLineGradient')" stroke-width="1px"
+				:stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'"
+				:style="eventLineStyles(id)" class="animate-fadein"/>
+				<!-- Note: With a fully vertical or horizontal line, nothing gets displayed -->
+				<!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform -->
+		</template>
 		<!-- Main line (unit horizontal line that gets transformed, with extra length to avoid gaps when panning) -->
 		<line :stroke="store.color.alt" stroke-width="2px" x1="-1" y1="0" x2="2" y2="0" :style="mainlineStyles"/>
 		<!-- Tick markers -->
diff --git a/src/store.ts b/src/store.ts
index d65dbcf..5da6241 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -24,6 +24,7 @@ export type StoreState = {
 	eventImgSz: number, // Width/height of event images
 	eventLabelHeight: number,
 	spacing: number, // Spacing between display edge, events, and mainline area
+	showEventLines: boolean,
 	// User input
 	scrollRatio: number, // Fraction of timeline length to move by upon scroll
 	zoomRatio: number, // Ratio of timeline expansion upon zooming out (eg: 1.5)
@@ -32,6 +33,7 @@ export type StoreState = {
 	// Other feature-specific
 	reqImgs: boolean, // Only show events with images
 	showEventCounts: boolean,
+	showBaseLine: boolean,
 	searchSuggLimit: number,
 	ctgs: { // Specifies event categories, and which ones should be visible
 		event: boolean,
@@ -101,6 +103,7 @@ function getDefaultState(): StoreState {
 		eventImgSz: 100,
 		eventLabelHeight: 20,
 		spacing: 10,
+		showEventLines: true,
 		// User input
 		scrollRatio: 0.2,
 		zoomRatio: 1.5,
@@ -109,6 +112,7 @@ function getDefaultState(): StoreState {
 		// Other feature-specific
 		reqImgs: true,
 		showEventCounts: true,
+		showBaseLine: true,
 		searchSuggLimit: 10,
 		ctgs: {
 			event: true,
-- 
cgit v1.2.3