From 8fce25984f8f24e9eace8f8204111673524e1487 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 9 Oct 2022 23:30:24 +1100
Subject: Skip tick transitions on horz/vert swap

---
 src/components/TimeLine.vue | 48 +++++++++++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index defa1e4..03adfc5 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -6,20 +6,20 @@
 	ref="rootRef">
 	<svg :viewBox="`0 0 ${width} ${height}`">
 		<line stroke="yellow" stroke-width="2px"
-			:x1="vert ? '50%' :      0" :y1="vert ?      0 : '50%'"
-			:x2="vert ? '50%' : '100%'" :y2="vert ? '100%' : '50%'"/>
+			:x1="vert2 ? '50%' :      0" :y1="vert2 ?      0 : '50%'"
+			:x2="vert2 ? '50%' : '100%'" :y2="vert2 ? '100%' : '50%'"/>
 		<template v-for="n in ticks" :key="n">
 			<line v-if="n == MIN_DATE || n == MAX_DATE"
-				:x1="vert ? -END_TICK_SZ : 0" :y1="vert ? 0 : -END_TICK_SZ"
-				:x2="vert ?  END_TICK_SZ : 0" :y2="vert ? 0 :  END_TICK_SZ"
+				:x1="vert2 ? -END_TICK_SZ : 0" :y1="vert2 ? 0 : -END_TICK_SZ"
+				:x2="vert2 ?  END_TICK_SZ : 0" :y2="vert2 ? 0 :  END_TICK_SZ"
 				stroke="yellow" :stroke-width="`${END_TICK_SZ * 2}px`" :style="tickStyles(n)" class="animate-fadein"/>
 			<line v-else
-				:x1="vert ? -TICK_LEN : 0" :y1="vert ? 0 : -TICK_LEN"
-				:x2="vert ?  TICK_LEN : 0" :y2="vert ? 0 :  TICK_LEN"
+				:x1="vert2 ? -TICK_LEN : 0" :y1="vert2 ? 0 : -TICK_LEN"
+				:x2="vert2 ?  TICK_LEN : 0" :y2="vert2 ? 0 :  TICK_LEN"
 				stroke="yellow" stroke-width="1px" :style="tickStyles(n)" class="animate-fadein"/>
 		</template>
 		<text fill="#606060" v-for="n in ticks" :key="n"
-			x="0" y="0" :text-anchor="vert ? 'start' : 'middle'" dominant-baseline="middle"
+			x="0" y="0" :text-anchor="vert2 ? 'start' : 'middle'" dominant-baseline="middle"
 			:style="tickLabelStyles(n)" class="text-sm animate-fadein">
 			{{n}}
 		</text>
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import {ref, onMounted, computed, nextTick} from 'vue';
+import {ref, onMounted, computed, watch, nextTick} from 'vue';
 
 // Refs
 const rootRef = ref(null as HTMLElement | null);
@@ -52,10 +52,20 @@ const SCROLL_SHIFT_CHG = 0.2; // Proportion of timeline length to shift by upon
 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 into less than this many ticks
-const padUnits = computed(() => props.vert ? 0.5 : 1); // Amount of extra scale units to add before/after min/max date
+const padUnits = computed(() => vert2.value ? 0.5 : 1); // Amount of extra scale units to add before/after min/max date
 const TICK_LEN = 8;
 const END_TICK_SZ = 4; // Size for MIN_DATE/MAX_DATE ticks
-const availLen = computed(() => props.vert ? props.height : props.width);
+const availLen = computed(() => vert2.value ? props.height : props.width);
+
+// For skipping transitions on horz/vert swap
+const vert2 = ref(props.vert); // Used in place of 'vert', and only updated after disabling transitions
+const skipTransition = ref(false);
+watch(() => props.vert, async (newVal: boolean) => {
+	skipTransition.value = true;
+	await nextTick();
+	vert2.value = newVal;
+	setTimeout(() => {skipTransition.value = false}, 0); // Using nextTick() here doesn't work
+});
 
 // For initialisation
 function initTicks(): number[] {
@@ -158,7 +168,7 @@ function zoomTimeline(frac: number){
 	// Get new bounds
 	let newStart: number;
 	let newEnd: number;
-	let ptrOffset = props.vert ? pointerY : pointerX;
+	let ptrOffset = vert2.value ? pointerY : pointerX;
 	if (ptrOffset == null){
 		let lenChg = newDateLen - oldDateLen
 		newStart = startDate.value - lenChg / 2;
@@ -244,7 +254,7 @@ function onPointerMove(evt: PointerEvent){
 	//
 	if (ptrEvtCache.length == 1){
 		// Handle pointer dragging
-		dragDiff += props.vert ? evt.clientY - pointerY : evt.clientX - pointerX;
+		dragDiff += vert2.value ? evt.clientY - pointerY : evt.clientX - pointerX;
 		if (dragHandler == 0){
 			dragHandler = setTimeout(() => {
 				if (Math.abs(dragDiff) > 2){
@@ -256,7 +266,7 @@ function onPointerMove(evt: PointerEvent){
 		}
 	} else if (ptrEvtCache.length == 2){
 		// Handle pinch-zoom
-		const pinchDiff = Math.abs(props.vert ?
+		const pinchDiff = Math.abs(vert2.value ?
 			ptrEvtCache[0].clientY - ptrEvtCache[1].clientY :
 			ptrEvtCache[0].clientX - ptrEvtCache[1].clientX);
 		if (lastPinchDiff > 0){
@@ -286,7 +296,7 @@ function onPointerUp(evt: PointerEvent){
 }
 function onWheel(evt: WheelEvent){
 	let shiftDir = evt.deltaY > 0 ? 1 : -1;
-	if (!props.vert){
+	if (!vert2.value){
 		shiftDir *= -1;
 	}
 	shiftTimeline(shiftDir * SCROLL_SHIFT_CHG);
@@ -307,10 +317,10 @@ function tickStyles(tick: number){
 		scale = 2;
 	}
 	return {
-		transform: props.vert ?
+		transform: vert2.value ?
 			`translate(${props.width/2}px,  ${offset}px) scale(${scale})` :
 			`translate(${offset}px, ${props.height/2}px) scale(${scale})`,
-		transitionProperty: 'transform, opacity',
+		transitionProperty: skipTransition.value ? 'none' : 'transform, opacity',
 		transitionDuration: '300ms',
 		transitionTimingFunction: 'ease-out',
 		opacity: (offset >= 0 && offset <= availLen.value) ? 1 : 0,
@@ -318,12 +328,12 @@ function tickStyles(tick: number){
 }
 function tickLabelStyles(tick: number){
 	let offset = (tick - startDate.value) / (endDate.value - startDate.value) * availLen.value;
-	let labelSz = props.vert ? 10 : 30;
+	let labelSz = vert2.value ? 10 : 30;
 	return {
-		transform: props.vert ?
+		transform: vert2.value ?
 			`translate(${props.width / 2 + 20}px, ${offset}px)` :
 			`translate(${offset}px, ${props.height / 2 + 30}px)`,
-		transitionProperty: 'transform, opacity',
+		transitionProperty: skipTransition.value ? 'none' : 'transform, opacity',
 		transitionDuration: '300ms',
 		transitionTimingFunction: 'ease-out',
 		opacity: (offset >= labelSz && offset <= availLen.value - labelSz) ? 1 : 0,
-- 
cgit v1.2.3