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/components/SettingsModal.vue | 32 +++++++++++++++++++++-----------
 src/components/TimeLine.vue      | 16 +++++++++-------
 2 files changed, 30 insertions(+), 18 deletions(-)

(limited to 'src/components')

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 -->
-- 
cgit v1.2.3