From 3e40591c87ad8dab0447408d2de7b41ab98a4f4d Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 00:18:27 +1100
Subject: Disable timeline-add button upon reaching max

---
 src/App.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/App.vue')

diff --git a/src/App.vue b/src/App.vue
index 44b9388..933a36d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,7 +11,8 @@
 		<icon-button :size="45" :style="buttonStyles" @click="settingsOpen = true" title="Show settings">
 			<settings-icon/>
 		</icon-button>
-		<icon-button :size="45" :style="buttonStyles" @click="onTimelineAdd" title="Add a timeline">
+		<icon-button :size="45" :disabled="maxTimelines" :style="buttonStyles"
+			@click="onTimelineAdd" title="Add a timeline">
 			<plus-icon/>
 		</icon-button>
 		<icon-button :size="45" :style="buttonStyles" @click="searchOpen = true" title="Search">
@@ -110,10 +111,13 @@ function onTimelineChg(state: TimelineState, idx: number){
 
 // For timeline addition/removal
 const MIN_TIMELINE_BREADTH = store.mainlineBreadth + store.spacing * 2 + store.eventImgSz + store.eventLabelHeight;
+const maxTimelines = computed(() => {
+	return vert.value && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH
+		|| !vert.value && contentHeight.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH
+});
 function onTimelineAdd(){
-	if (vert.value && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH ||
-		!vert.value && contentHeight.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH){
-		console.log('Reached timeline minimum breadth');
+	if (maxTimelines.value){
+		console.log('Ignored addition of timeline upon reaching max');
 		return;
 	}
 	addTimeline();
-- 
cgit v1.2.3

