Add basic abbreviation for displayed dates

Remove scroll direction reversal in horizontal mode
Fix some linting errors

2 files changed, 51 insertions, 8 deletions

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 89e7057..5aec9b2 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -33,7 +33,7 @@
 		<text v-for="date, idx in ticks.dates" :key="date.toInt()"
 			x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle"
 			:fill="store.color.textDark" :style="tickLabelStyles(idx)" class="text-sm animate-fadein">
-			{{date}}
+			{{date.toDisplayString()}}
 		</text>
 		<!-- 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"/>
@@ -895,9 +895,6 @@ function onPointerUp(evt: PointerEvent){
 }
 function onWheel(evt: WheelEvent){
 	let shiftDir = evt.deltaY > 0 ? 1 : -1;
-	if (!props.vert){
-		shiftDir *= -1;
-	}
 	panTimeline(shiftDir * store.scrollRatio);
 }
 function onShiftWheel(evt: WheelEvent){
diff --git a/src/lib.ts b/src/lib.ts
index 7ea7bb0..2dda2ec 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -94,9 +94,9 @@ export class HistDate {
 		}
 	}
 	cmp(other: HistDate, scale=DAY_SCALE){
-		if (this.isEarlier(other)){
+		if (this.isEarlier(other, scale)){
 			return -1;
-		} else if (!this.equals(other)){
+		} else if (!this.equals(other, scale)){
 			return 1;
 		} else {
 			return 0;
@@ -126,6 +126,52 @@ export class HistDate {
 			return `${this.year}-${this.month}-${this.day}`;
 		}
 	}
+	toDisplayString(){
+		if (this.month == 1 && this.day == 1){
+			if (this.year > 0){
+				return String(this.year);
+			} else if (this.year > -1e3){
+				return String(-this.year) + ' BC';
+			} else if (this.year > -1e6){
+				if (this.year % 1e3 == 0){
+					return String(Math.floor(-this.year / 1e3)) + 'k BC';
+				} else if (this.year % 100 == 0){
+					return String(Math.floor(-this.year / 100) / 10) + 'k BC';
+				} else {
+					return String(-this.year) + ' BC';
+				}
+			} else if (this.year > -1e9){
+				if (this.year % 1e6 == 0){
+					return String(Math.floor(-this.year / 1e6)) + ' mya';
+				} else if (this.year % 1e3 == 0){
+					return String(Math.floor(-this.year / 1e3) / 1e3) + ' mya';
+				} else {
+					return String(-this.year.toLocaleString());
+				}
+			} else {
+				if (this.year % 1e9 == 0){
+					return String(Math.floor(-this.year / 1e9)) + ' bya';
+				} else if (this.year % 1e6 == 0){
+					return String(Math.floor(-this.year / 1e6) / 1e3) + ' bya';
+				} else {
+					return String(this.year.toLocaleString());
+				}
+			}
+		} else if (this.day == 1){
+			const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+			return monthNames[this.month - 1];
+		} else {
+			if (this.day == 1){ // TODO: Show instead of just month name when at day-scale?
+				return '1st';
+			} else if (this.day == 2){
+				return '2nd';
+			} else if (this.day == 3){
+				return '3rd';
+			} else {
+				return String(this.day) + 'th';
+			}
+		}
+	}
 	getDayDiff(other: HistDate){
 		const jdn2 = gregorianToJdn(this.year, this.month, this.day);
 		const jdn1 = gregorianToJdn(other.year, other.month, other.day);
@@ -337,8 +383,8 @@ export class HistEvent {
 	}
 }
 export function cmpHistEvent(event: HistEvent, event2: HistEvent){
-	let cmp = event.start.cmp(event2.start);
-	return cmp != 0 ? cmp : event.id - event2.id;;
+	const cmp = event.start.cmp(event2.start);
+	return cmp != 0 ? cmp : event.id - event2.id;
 }
 
 // For server requests