From 9eea2e1cd2dd5fc6ea4f235f474bf0f2025a484f Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 8 Oct 2022 20:09:45 +1100
Subject: Add TimeLine.vue

Add timeline shift and zoom actions, and basic styling/animation
Make App determine TimeLine dimensions (incl handling resizes)
---
 src/App.vue                 |  45 ++++++++-
 src/components/TimeLine.vue | 236 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 278 insertions(+), 3 deletions(-)
 create mode 100644 src/components/TimeLine.vue

diff --git a/src/App.vue b/src/App.vue
index f30339e..880a046 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,18 +13,57 @@
 		</icon-button>
 	</div>
 	<!-- Content area -->
-	<div class="grow min-h-0 relative bg-stone-800">
-		<div class="text-stone-50 p-4">Content</div>
+	<div class="grow min-h-0 bg-stone-800" ref="contentAreaRef">
+		<time-line :width="contentWidth" :height="contentHeight"/>
 	</div>
 </div>
 </template>
 
 <script setup lang="ts">
-import {ref, computed, watch, onMounted, onUnmounted, nextTick} from 'vue';
+import {ref, onMounted, onUnmounted} from 'vue';
 // Components
+import TimeLine from './components/TimeLine.vue';
 import IconButton from './components/IconButton.vue';
 // Icons
 import SettingsIcon from './components/icon/SettingsIcon.vue';
 import HelpIcon from './components/icon/HelpIcon.vue';
 
+// Refs
+const contentAreaRef = ref(null as HTMLElement | null);
+
+// For content sizing
+const contentWidth = ref(0);
+const contentHeight = ref(0);
+function updateAreaDims(){
+	let contentAreaEl = contentAreaRef.value!;
+	contentWidth.value = contentAreaEl.offsetWidth;
+	contentHeight.value = contentAreaEl.offsetHeight;
+}
+onMounted(updateAreaDims)
+
+// For resize handling
+let lastResizeHdlrTime = 0; // Used to throttle resize handling
+let afterResizeHdlr = 0; // Used to trigger handler after ending a run of resize events
+async function onResize(){
+	// Handle event if not recently done
+	let handleResize = async () => {
+		updateAreaDims();
+	};
+	let currentTime = new Date().getTime();
+	if (currentTime - lastResizeHdlrTime > 200){
+		lastResizeHdlrTime = currentTime;
+		await handleResize();
+		lastResizeHdlrTime = new Date().getTime();
+	}
+	// Setup a handler to execute after ending a run of resize events
+	clearTimeout(afterResizeHdlr);
+	afterResizeHdlr = setTimeout(async () => {
+		afterResizeHdlr = 0;
+		await handleResize();
+		lastResizeHdlrTime = new Date().getTime();
+	}, 200); // If too small, touch-device detection when swapping to/from mobile-mode gets unreliable
+}
+onMounted(() => window.addEventListener('resize', onResize));
+onUnmounted(() => window.removeEventListener('resize', onResize));
+
 </script>
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
new file mode 100644
index 0000000..9dcf7f8
--- /dev/null
+++ b/src/components/TimeLine.vue
@@ -0,0 +1,236 @@
+<template>
+<div class="touch-none" :width="width" :height="height"
+	@wheel.exact.prevent="onShift" @wheel.shift.exact.prevent="onZoom" ref="rootRef">
+	<svg :viewBox="`0 0 ${width} ${height}`">
+		<line stroke="yellow" stroke-width="2px" x1="50%" y1="0%" x2="50%" y2="100%"/>
+		<line v-for="n in ticks" :key="n"
+			:x1="width/2-8" y1="0" :x2="width/2+8" y2="0" stroke="yellow" stroke-width="1px"
+			:style="tickStyles(n)" class="animate-fadein"/>
+		<text fill="#606060" v-for="n in ticks" :key="n"
+			:x="width/2 + 12" y="0"
+			text-anchor="start" :style="tickLabelStyles(n)" class="text-sm animate-fadein">
+			{{Math.round(n * 100) / 100}}
+		</text>
+	</svg>
+</div>
+</template>
+
+<script setup lang="ts">
+import {ref, onMounted, nextTick} from 'vue';
+
+// Refs
+const rootRef = ref(null as HTMLElement | null);
+
+// Props
+const props = defineProps({
+	width: {type: Number, required: true},
+	height: {type: Number, required: true},
+});
+
+// For date range
+const minDate = -1000;
+const maxDate = 1000;
+const scales = [200, 50, 10, 1, 0.2]; // The timeline get divided into units of scales[0], then scales[1], etc
+let scaleIdx = 0; // Index of current scale in 'scales'
+const startDate = ref(minDate);
+const endDate = ref(maxDate);
+const SHIFT_INC = 0.3; // Proportion of timeline length to shift by
+const ZOOM_RATIO = 1.5; // When zooming out, the timeline length gets multiplied by this ratio
+const MIN_TICK_SEP = 30; // Smallest px separation between ticks
+const MIN_LAST_TICKS = 3; // When at smallest scale, don't zoom further if less than this many ticks would result
+const ticks = ref(null); // Holds date value for each tick
+
+// For initialisation
+function initTicks(): number[] {
+	let len = maxDate - minDate;
+	// Find smallest usable scale
+	for (let i = 0; i < scales.length; i++){
+		if (props.height * (scales[i] / len) > MIN_TICK_SEP){
+			scaleIdx = i;
+		} else {
+			break;
+		}
+	}
+	// Get tick values
+	let newTicks = [];
+	let next = minDate;
+	while (next <= maxDate){
+		newTicks.push(next);
+		next += scales[scaleIdx];
+	}
+	ticks.value = newTicks;
+	//
+	updateTicks();
+}
+onMounted(() => nextTick(initTicks));
+
+// Adds extra ticks outside the visible area (which can transition in upon shift/zoom),
+// and adds/removes ticks upon a scale change
+function updateTicks(){
+	let len = endDate.value - startDate.value;
+	let shiftChg = len * SHIFT_INC;
+	let scaleChg = len * (ZOOM_RATIO - 1) / 2;
+	let scale = scales[scaleIdx];
+	// Get ticks in new range, and add hidden ticks that might transition in on a shift action
+	let tempTicks = [];
+	let next = Math.ceil((Math.max(minDate, startDate.value - shiftChg) - minDate) / scale);
+	let last = Math.floor((Math.min(maxDate, endDate.value + shiftChg) - minDate) / scale);
+	while (next <= last){
+		tempTicks.push(minDate + next * scale);
+		next++;
+	}
+	// Get hidden ticks that might transition in on a zoom action
+	let tempTicks2 = [];
+	let tempTicks3 = [];
+	if (scaleIdx > 0){
+		scale = scales[scaleIdx-1];
+		let first = Math.ceil((Math.max(minDate, startDate.value - scaleChg) - minDate) / scale);
+		while ((minDate + first * scale) < tempTicks[0]){
+			tempTicks2.push(minDate + first * scale);
+			first++;
+		}
+		let last = Math.floor((Math.min(maxDate, endDate.value + scaleChg) - minDate) / scale);
+		let next = Math.floor((tempTicks[tempTicks.length - 1] - minDate) / scale) + 1;
+		while (next <= last){
+			tempTicks3.push(minDate + next * scale);
+			next++;
+		}
+	}
+	//
+	ticks.value = [].concat(tempTicks2, tempTicks, tempTicks3);
+}
+// Performs a shift action
+function shiftTimeline(n: number){
+	let len = endDate.value - startDate.value;
+	let chg = len * n;
+	if (startDate.value + chg < minDate){
+		if (startDate.value == minDate){
+			console.log('Reached minDate limit')
+			return;
+		}
+		chg = minDate - startDate.value;
+		startDate.value = minDate;
+		endDate.value += chg;
+	} else if (endDate.value + chg > maxDate){
+		if (endDate.value == maxDate){
+			console.log('Reached maxDate limit')
+			return;
+		}
+		chg = maxDate - endDate.value;
+		endDate.value = maxDate;
+		startDate.value += chg;
+	} else {
+		startDate.value += chg;
+		endDate.value += chg;
+	}
+	updateTicks();
+}
+// Performs a zoom action
+function zoomTimeline(frac: number){
+	let oldLen = endDate.value - startDate.value;
+	let newLen = oldLen * frac;
+	// Possibly change the scale
+	let tickDiff = props.height * (scales[scaleIdx] / newLen);
+	if (tickDiff < MIN_TICK_SEP){
+		if (scaleIdx == 0){
+			console.log('INFO: Reached zoom out limit');
+			return;
+		} else {
+			scaleIdx--;
+		}
+	} else {
+		if (scaleIdx < scales.length - 1){
+			if (tickDiff > MIN_TICK_SEP * scales[scaleIdx] / scales[scaleIdx + 1]){
+				scaleIdx++;
+			}
+		} else {
+			if (newLen / tickDiff < MIN_LAST_TICKS){
+				console.log('INFO: Reached zoom in limit');
+				return;
+			}
+		}
+	}
+	// Get new bounds
+	let endChg = (newLen - oldLen) / 2;
+	if (startDate.value - endChg < minDate){
+		let tempChg = startDate.value - minDate;
+		if (endDate.value + endChg + tempChg > maxDate){
+			if (startDate.value == minDate && endDate.value == maxDate){
+				console.log('Reached upper scale limit');
+				return;
+			} else {
+				startDate.value = minDate;
+				endDate.value = maxDate;
+			}
+		} else {
+			startDate.value = minDate;
+			endDate.value += endChg + tempChg;
+		}
+	} else if (endDate.value + endChg > maxDate){
+		let tempChg = maxDate - endDate.value;
+		if (startDate.value - endChg - tempChg < minDate){
+			if (startDate.value == minDate && endDate.value == maxDate){
+				console.log('Reached upper scale limit');
+				return;
+			} else {
+				startDate.value = minDate;
+				endDate.value = maxDate;
+			}
+		} else {
+			startDate.value -= endChg + tempChg
+			endDate.value = maxDate;
+		}
+	} else {
+		startDate.value -= endChg;
+		endDate.value += endChg;
+	}
+	//
+	updateTicks();
+}
+
+// For mouse/etc handling
+function onShift(evt: WheelEvent){
+	if (evt.deltaY > 0){
+		shiftTimeline(SHIFT_INC);
+	} else {
+		shiftTimeline(-SHIFT_INC);
+	}
+}
+function onZoom(evt: WheelEvent){
+	if (evt.deltaY > 0){
+		zoomTimeline(ZOOM_RATIO);
+	} else {
+		zoomTimeline(1/ZOOM_RATIO);
+	}
+}
+
+// Styles
+function tickStyles(tick: number){
+	return {
+		transform: `translate(0, ${(tick - startDate.value) / (endDate.value - startDate.value) * props.height}px)`,
+		transition: 'transform 300ms linear',
+	}
+}
+function tickLabelStyles(tick: number){
+	return {
+		transform: `translate(0, ${(tick - startDate.value) / (endDate.value - startDate.value) * props.height + 5}px)`,
+		transition: 'transform 300ms linear',
+	}
+}
+</script>
+
+<style>
+.animate-fadein {
+	animation-name: fadein;
+	animation-duration: 300ms;
+	animation-timing-function: ease-in;
+}
+@keyframes fadein {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+</style>
-- 
cgit v1.2.3