From 0d27e899cf580a90784a7ac929a027c456ef30b0 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Thu, 29 Dec 2022 22:56:11 +1100
Subject: Adjust event-count-indicator styling

Use solid color, and skip transitions on screen size change
---
 src/App.vue                 | 1 +
 src/components/TimeLine.vue | 7 ++++---
 src/store.ts                | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 31be46d..3de3ac2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -200,6 +200,7 @@ async function onEventDisplay(
 	// Check memory limit
 	displayedEvents.set(timelineId, eventIds);
 	if (eventTree.value.size > EXCESS_EVENTS_THRESHOLD){
+		console.log(`INFO: Calling reduceEvents() upon reaching ${eventTree.value.size} events`);
 		reduceEvents();
 		queriedRanges.forEach((t: DateRangeTree) => t.clear());
 	}
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index d68cff0..5e52b9c 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -6,7 +6,7 @@
 	ref="rootRef">
 	<template v-if="store.showEventCounts">
 		<div v-for="[tickIdx, count] in tickToCount.entries()" :key="ticks[tickIdx].date.toInt()"
-			:style="countDivStyles(tickIdx, count)" class="absolute bg-yellow-300/30 animate-fadein"></div>
+			:style="countDivStyles(tickIdx, count)" class="absolute animate-fadein"></div>
 	</template>
 	<svg :viewBox="`0 0 ${width} ${height}`" class="relative z-10">
 		<defs>
@@ -278,7 +278,7 @@ const ticks = computed((): Tick[] => {
 	let numUnits = getNumDisplayUnits();
 	let majorUnitSz = availLen.value / numUnits;
 	// Get before-startDate ticks (including start-offset ticks and hidden ticks)
-	let panUnits = Math.floor(getNumDisplayUnits() * store.scrollRatio); // Potential shift distance upon a pan action
+	let panUnits = Math.floor(numUnits * store.scrollRatio); // Potential shift distance upon a pan action
 	let date = startDate.value;
 	for (let i = 0; i < panUnits + Math.ceil(startOffset.value); i++){
 		if (MIN_DATE.equals(date, scale.value)){
@@ -1154,11 +1154,12 @@ function countDivStyles(tickIdx: number, count: number): Record<string,string> {
 	let countLevel = Math.min(Math.ceil(Math.log10(count+1)), 4);
 	let breadth = countLevel * 4 + 4;
 	return {
+		backgroundColor: store.color.altBg,
 		top: props.vert ? pxOffset + 'px' : (mainlineOffset.value - breadth / 2) + 'px',
 		left: props.vert ? (mainlineOffset.value - breadth / 2) + 'px' : pxOffset + 'px',
 		width: props.vert ? breadth + 'px' : len + 'px',
 		height: props.vert ? len + 'px' : breadth + 'px',
-		transitionProperty: 'top, left, width, height',
+		transitionProperty: skipTransition.value ? 'none' : 'top, left, width, height',
 		transitionDuration: store.transitionDuration + 'ms',
 		transitionTimingFunction: 'linear',
 	}
diff --git a/src/store.ts b/src/store.ts
index d3ece49..8b92c6f 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -18,6 +18,7 @@ export const useStore = defineStore('store', {
 			alt: '#fde047',      // yellow-300
 			altDark: '#eab308',  // yellow-500
 			altDark2: '#ca8a04', // yellow-600
+			altBg: '#6a5e2e'
 		};
 		return {
 			tickLen: 16,
-- 
cgit v1.2.3