From 8b77a42f313e6514a4634dcad988dd2fea6bdee6 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sat, 15 Oct 2022 17:54:32 +1100
Subject: Pass TimeLine offsets to BaseLine

Add TimelineState
---
 src/components/BaseLine.vue | 27 +++++++++++++++++++--------
 src/components/TimeLine.vue | 38 ++++++++++++++++++++++----------------
 2 files changed, 41 insertions(+), 24 deletions(-)

(limited to 'src/components')

diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue
index 82507c1..33d8a88 100644
--- a/src/components/BaseLine.vue
+++ b/src/components/BaseLine.vue
@@ -5,8 +5,8 @@
 		<div :style="labelStyles">{{p.label}}</div>
 	</div>
 	<TransitionGroup name="fade" v-if="mounted">
-		<div v-for="range in timelineRanges" :key="range.id" class="absolute" :style="spanStyles(range)">
-			{{range.id}}
+		<div v-for="state in timelines" :key="state.id" class="absolute" :style="spanStyles(state)">
+			{{state.id}}
 		</div>
 	</TransitionGroup>
 </div>
@@ -14,7 +14,7 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, PropType, Ref} from 'vue';
-import {MIN_DATE, MAX_DATE, WRITING_MODE_HORZ, TimelineRange} from '../lib';
+import {MIN_DATE, MAX_DATE, SCALES, MONTH_SCALE, DAY_SCALE, WRITING_MODE_HORZ, TimelineState, stepDate} from '../lib';
 import {useStore} from '../store';
 
 // Refs
@@ -26,7 +26,7 @@ const store = useStore();
 // Props
 const props = defineProps({
 	vert: {type: Boolean, required: true},
-	timelineRanges: {type: Object as PropType<TimelineRange[]>, required: true},
+	timelines: {type: Object as PropType<TimelineState[]>, required: true},
 });
 
 // Static time periods
@@ -77,12 +77,23 @@ const labelStyles = computed((): Record<string, string> => ({
 	width: props.vert ? '40px' : 'auto',
 	padding: props.vert ? '0' : '4px',
 }));
-function spanStyles(range: TimelineRange){
+function spanStyles(state: TimelineState){
 	let styles: Record<string,string>;
 	let availLen = props.vert ? height.value : width.value;
-	// Determine positions in full timeline
-	let startFrac = (range.start.year - MIN_DATE.year) / (MAX_DATE.year - MIN_DATE.year);
-	let lenFrac = (range.end.year - range.start.year) / (MAX_DATE.year - MIN_DATE.year);
+	// Determine start/end date
+	if (state.startOffset == null || state.endOffset == null || state.scaleIdx == null){
+		return {display: 'none'};
+	}
+	let start = state.startDate.clone();
+	let end = state.endDate.clone();
+	let scale = SCALES[state.scaleIdx];
+	if (scale != MONTH_SCALE && scale != DAY_SCALE){ // Possibly incorporate offsets
+		stepDate(start, 1, {forward: false, count: Math.floor(state.startOffset * scale), inplace: true});
+		stepDate(end, 1, {count: Math.floor(state.endOffset * scale), inplace: true});
+	}
+	// Determine positions in full timeline (only uses year information)
+	let startFrac = (start.year - MIN_DATE.year) / (MAX_DATE.year - MIN_DATE.year);
+	let lenFrac = (end.year - start.year) / (MAX_DATE.year - MIN_DATE.year);
 	let startPx = Math.max(0, availLen * startFrac); // Prevent negatives due to end-padding
 	let lenPx = Math.min(availLen - startPx, availLen * lenFrac);
 	lenPx = Math.max(1, lenPx); // Prevent zero length
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index a99b05e..add7ce8 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -44,7 +44,7 @@ import IconButton from './IconButton.vue';
 import MinusIcon from './icon/MinusIcon.vue';
 // Other
 import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES, MIN_CAL_DATE,
-	HistDate, stepDate, inDateScale, getScaleRatio, getDaysInMonth, moduloPositive} from '../lib';
+	HistDate, stepDate, inDateScale, getScaleRatio, getDaysInMonth, moduloPositive, TimelineState} from '../lib';
 import {useStore} from '../store';
 
 // Refs
@@ -56,10 +56,9 @@ const store = useStore();
 // Props + events
 const props = defineProps({
 	vert: {type: Boolean, required: true},
-	initialStart: {type: Object as PropType<HistDate>, required: true},
-	initialEnd: {type: Object as PropType<HistDate>, required: true},
+	initialState: {type: Object as PropType<TimelineState>, required: true},
 });
-const emit = defineEmits(['remove', 'range-chg']);
+const emit = defineEmits(['remove', 'state-chg']);
 
 // For size tracking
 const width = ref(0);
@@ -92,17 +91,29 @@ const resizeObserver = new ResizeObserver((entries) => {
 onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
 
 // Timeline data
-const startDate = ref(props.initialStart); // Earliest date to display
-const endDate = ref(props.initialEnd);
+const ID = props.initialState.id;
+const startDate = ref(props.initialState.startDate); // Earliest date to display
+const endDate = ref(props.initialState.endDate);
 const INITIAL_EXTRA_OFFSET = 0.5;
 const startOffset = ref(INITIAL_EXTRA_OFFSET); // Fraction of a scale unit before startDate to show
 	// Note: Without this, the timeline can only move if the distance is over one unit, which makes dragging awkward,
 		// can cause unexpected jumps when zooming, and limits display when a unit has many ticks on the next scale
+if (props.initialState.startOffset != null){
+	startOffset.value = props.initialState.startOffset as number;
+}
 const endOffset = ref(INITIAL_EXTRA_OFFSET);
+if (props.initialState.endOffset != null){
+	endOffset.value = props.initialState.endOffset as number;
+}
 const scaleIdx = ref(0); // Index of current scale in SCALES
+if (props.initialState.scaleIdx != null){
+	scaleIdx.value = props.initialState.scaleIdx as number;
+} else {
+	onMounted(initScale);
+}
 const scale = computed(() => SCALES[scaleIdx.value])
-// Initialise to smallest usable scale
-function initScale(){
+//
+function initScale(){ // Initialises to smallest usable scale
 	if (startDate.value.isEarlier(MIN_CAL_DATE)){ // If unable to use JDNs, use a yearly scale
 		scaleIdx.value = getYearlyScale(startDate.value, endDate.value, availLen.value);
 	} else {
@@ -139,7 +150,6 @@ function getYearlyScale(startDate: HistDate, endDate: HistDate, availLen: number
 	}
 	return idx;
 }
-onMounted(initScale);
 
 // Tick data
 const TICK_LEN = 8;
@@ -634,13 +644,9 @@ function onShiftWheel(evt: WheelEvent){
 
 // For bound-change signalling
 watch(startDate, () => {
-	let start = startDate.value.clone();
-	let end = endDate.value.clone();
-	if (scale.value != MONTH_SCALE && scale.value != DAY_SCALE){ // Possibly incorporate offsets
-		stepDate(start, 1, {forward: false, count: Math.floor(startOffset.value * scale.value)});
-		stepDate(end, 1, {count: Math.floor(endOffset.value * scale.value)});
-	}
-	emit('range-chg', [start, end]);
+	emit('state-chg', new TimelineState(
+		ID, startDate.value, endDate.value, startOffset.value, endOffset.value, scaleIdx.value
+	));
 });
 
 // For skipping transitions on startup (and on horz/vert swap)
-- 
cgit v1.2.3