From 2f5a989bf4ca944888cc16d06339fec237f60319 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 19 Oct 2022 19:26:52 +1100
Subject: Move event labels to below images

Add client-side REQ_EXCLS_LIMIT
Rename posX and posY vars in idToPos computed
---
 src/App.vue                 |  8 +++++++-
 src/components/TimeLine.vue | 34 ++++++++++++++++++----------------
 2 files changed, 25 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 442d3cb..e836fbf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -84,7 +84,7 @@ function onTimelineChg(state: TimelineState, idx: number){
 }
 
 // For timeline addition/removal
-const MIN_TIMELINE_BREADTH = 80 + 10 * 2 + 115; // TODO: Link with constants in components/TimeLine.vue
+const MIN_TIMELINE_BREADTH = 80 + 10 * 2 + 120; // TODO: Link with constants in components/TimeLine.vue
 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){
@@ -192,6 +192,7 @@ function reduceEvents(){
 }
 // For getting events from server
 const EVENT_REQ_LIMIT = 30;
+const REQ_EXCLS_LIMIT = 100;
 let pendingReq = false; // Used to serialise event-req handling
 async function onEventReq(startDate: HistDate, endDate: HistDate){
 	while (pendingReq){
@@ -214,6 +215,11 @@ async function onEventReq(startDate: HistDate, endDate: HistDate){
 		}
 		existingEventIds.push(event.id);
 	}
+	if (existingEventIds.length > REQ_EXCLS_LIMIT){
+		console.log('WARNING: Exceeded request exclusions limit');
+		pendingReq = false;
+		return;
+	}
 	// Get events from server
 	let urlParams = new URLSearchParams({
 		type: 'events',
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 03097d1..a175681 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -40,12 +40,12 @@
 	</svg>
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein" :style="eventStyles(id)">
+		<!-- Image -->
+		<div class="rounded-full border border-yellow-500" :style="eventImgStyles(id)"></div>
 		<!-- Label -->
 		<div class="text-center text-stone-100 text-sm whitespace-nowrap text-ellipsis overflow-hidden">
 			{{idToEvent.get(id)!.title}}
 		</div>
-		<!-- Image -->
-		<div class="rounded-full border border-yellow-500" :style="eventImgStyles(id)"></div>
 	</div>
 	<!-- Buttons -->
 	<icon-button :size="30" class="absolute top-2 right-2"
@@ -117,7 +117,7 @@ onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
 //
 const MAINLINE_WIDTH = 80; // Breadth of mainline area (including ticks and labels)
 const EVENT_IMG_SZ = 100; // Width/height of event images
-const EVENT_LABEL_HEIGHT = 15;
+const EVENT_LABEL_HEIGHT = 20;
 const eventWidth = computed(() => EVENT_IMG_SZ);
 const eventHeight = computed(() => EVENT_IMG_SZ + EVENT_LABEL_HEIGHT);
 const eventMajorSz = computed(() => props.vert ? eventHeight.value : eventWidth.value);
@@ -313,36 +313,36 @@ const idToPos = computed(() => {
 	}
 	let map: Map<number, [number, number, number, number]> = new Map(); // Maps visible event IDs to x/y/w/h
 	// Do basic grid-like layout
-	let posX = SPACING, posY = SPACING;
+	let minorOffset = SPACING, majorOffset = SPACING; // Holds x and y for event element (or y and x if !props.vert)
 	let full = false;
 	for (let event of idToEvent.value.values()){
-		// Layout as if props.vert
-		if (posY + eventMajorSz.value + SPACING > availLen.value){ // If at end of column
-			posY = SPACING;
-			posX += eventMinorSz.value + SPACING;
+		// Check if at end of column (or row if !props.vert)
+		if (majorOffset + eventMajorSz.value + SPACING > availLen.value){
+			majorOffset = SPACING;
+			minorOffset += eventMinorSz.value + SPACING;
 			// If finished last row
-			if (posX + eventMinorSz.value + SPACING > availBreadth.value){
+			if (minorOffset + eventMinorSz.value + SPACING > availBreadth.value){
 				full = true;
 				break;
 			}
 		}
 		// Avoid collision with timeline
 		if (!sideMainline.value){
-			if (posX <= availBreadth.value / 2 + MAINLINE_WIDTH / 2 + SPACING &&
-					posX + eventMinorSz.value >= availBreadth.value / 2 - MAINLINE_WIDTH / 2 - SPACING){
-				posX = availBreadth.value / 2 + MAINLINE_WIDTH / 2 + SPACING;
+			if (minorOffset <= availBreadth.value / 2 + MAINLINE_WIDTH / 2 + SPACING &&
+					minorOffset + eventMinorSz.value >= availBreadth.value / 2 - MAINLINE_WIDTH / 2 - SPACING){
+				minorOffset = availBreadth.value / 2 + MAINLINE_WIDTH / 2 + SPACING;
 			}
-		} else if (posX + eventMinorSz.value + SPACING > mainlineOffset.value){
+		} else if (minorOffset + eventMinorSz.value + SPACING > mainlineOffset.value){
 			break;
 		}
 		// Add coords
 		if (props.vert){
-			map.set(event.id, [posX, posY, eventWidth.value, eventHeight.value]);
+			map.set(event.id, [minorOffset, majorOffset, eventWidth.value, eventHeight.value]);
 		} else {
-			map.set(event.id, [posY, posX, eventWidth.value, eventHeight.value]);
+			map.set(event.id, [majorOffset, minorOffset, eventWidth.value, eventHeight.value]);
 		}
 		// Update to next position
-		posY += eventMajorSz.value + SPACING;
+		majorOffset += eventMajorSz.value + SPACING;
 	}
 	// If more events could be displayed, notify parent
 	if (!full){
@@ -353,6 +353,8 @@ const idToPos = computed(() => {
 	//
 	return map;
 });
+
+// For event lines
 type LineCoords = [number, number, number, number];
 const eventLines: ShallowRef<Map<number, LineCoords>> = shallowRef(new Map());
 	// Maps event ID to event line data (x, y, length, and angle)
-- 
cgit v1.2.3