Avoid dashed event-line at scales at/above event-start precision

2 files changed, 24 insertions, 4 deletions

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index 009abd8..30d5404 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -36,10 +36,10 @@
 		<line v-for="id in eventLines.keys()" :key="id"
 			x1="0" y1="0" :x2="eventLines.get(id)![2]" y2="0.01"
 			stroke="url('#eventLineGradient')" stroke-width="1px"
-			:stroke-dasharray="idToEvent.get(id)!.startUpper == null ? '' : '16,4'"
+			:stroke-dasharray="getEventPrecision(idToEvent.get(id)!) <= minorScale ? '' : '16,4'"
 			:style="eventLineStyles(id)" class="animate-fadein"/>
 			<!-- Note: With a fully vertical or horizontal line, nothing gets displayed -->
-			<!-- Note: Can't use :x2="1" and scale in style, as it makes dashed-lines non-uniform -->
+			<!-- Note: Can't use :x2="1" with scaling in :style="", as it makes dashed-lines non-uniform -->
 	</svg>
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein" :style="eventStyles(id)">
@@ -66,8 +66,8 @@ import IconButton from './IconButton.vue';
 // Icons
 import CloseIcon from './icon/CloseIcon.vue';
 // Other
-import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES,
-	MIN_CAL_YEAR, HistDate, CalDate, stepDate, getScaleRatio, getNumSubUnits, getUnitDiff, getDaysInMonth,
+import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES, MIN_CAL_YEAR,
+	getDaysInMonth, HistDate, CalDate, stepDate, getScaleRatio, getNumSubUnits, getUnitDiff, getEventPrecision,
 	moduloPositive, TimelineState, HistEvent, getImagePath} from '../lib';
 import {useStore} from '../store';
 import {RBTree} from '../rbtree';
diff --git a/src/lib.ts b/src/lib.ts
index fdabe4b..353fa57 100644
--- a/src/lib.ts
+++ b/src/lib.ts
@@ -473,6 +473,26 @@ export function getUnitDiff(date: HistDate, date2: HistDate, scale: number): num
 		return date.getYearDiff(date2) / scale;
 	}
 }
+export function getEventPrecision(event: HistEvent): number {
+	// Returns smallest scale at which 'event's start-startUpper range is within one unit, or infinity
+	// Note: Intentionally not adding an exception for century and millenia ranges like
+		// 101 to 200 (as opposed to 100 to 199) being interpreted as 'within' one 100/1000-year scale unit
+	const {start, startUpper} = event;
+	if (startUpper == null || start.getDayDiff(startUpper) == 0){
+		return DAY_SCALE;
+	}
+	if (start.getMonthDiff(startUpper) == 0){
+		return MONTH_SCALE;
+	}
+	const yearScaleIdx = SCALES.length - 1 - 2;
+	for (let scaleIdx = yearScaleIdx; scaleIdx >= 0; scaleIdx--){
+		const scale = SCALES[scaleIdx];
+		if (Math.floor(start.year / scale) == Math.floor(startUpper.year / scale)){
+			return scale;
+		}
+	}
+	return Number.POSITIVE_INFINITY;
+}
 
 // For sending timeline-bound data to BaseLine
 export class TimelineState {