Remove timelines when screen is shrunk enoughremove-on-shrink

1 files changed, 9 insertions, 4 deletions

diff --git a/src/App.vue b/src/App.vue
index 3de3ac2..21d4b55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,8 +47,9 @@ import {RBTree, rbtree_shallow_copy} from './rbtree';
 // Refs
 const contentAreaRef = ref(null as HTMLElement | null);
 
-// Global store
+// Global constants
 const store = useStore();
+const MIN_TIMELINE_BREADTH = store.mainlineBreadth + store.spacing * 2 + store.eventImgSz + store.eventLabelHeight;
 
 // For content sizing (used to decide between horizontal and vertical mode)
 const contentWidth = ref(0);
@@ -58,6 +59,11 @@ function updateAreaDims(){
 	let contentAreaEl = contentAreaRef.value!;
 	contentWidth.value = contentAreaEl.offsetWidth;
 	contentHeight.value = contentAreaEl.offsetHeight;
+	// Check for too many timelines
+	const majorLen = vert.value ? contentWidth.value : contentHeight.value;
+	while (majorLen / timelines.value.length < MIN_TIMELINE_BREADTH && timelines.value.length > 1){
+		timelines.value.pop();
+	}
 }
 onMounted(updateAreaDims)
 
@@ -82,10 +88,9 @@ function onTimelineChg(state: TimelineState, idx: number){
 }
 
 // For timeline addition/removal
-const MIN_TIMELINE_BREADTH = store.mainlineBreadth + store.spacing * 2 + store.eventImgSz + store.eventLabelHeight;
 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){
+	const majorLen = vert.value ? contentWidth.value : contentHeight.value;
+	if (majorLen && contentWidth.value / (timelines.value.length + 1) < MIN_TIMELINE_BREADTH){
 		console.log('Reached timeline minimum breadth');
 		return;
 	}