From 092d310c5c56dfd9af9de553ddbc6f86b4c957bd Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Mon, 2 Jan 2023 16:01:50 +1100 Subject: Visually distinguish 'discover' events --- src/components/TimeLine.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/components/TimeLine.vue') diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 1e78a87..b50141a 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -48,7 +48,7 @@
-
+
{{idToEvent.get(id)!.title}} @@ -1172,6 +1172,8 @@ function eventImgStyles(eventId: number){ height: store.eventImgSz + 'px', backgroundImage: `url(${getImagePath(event.imgId)})`, backgroundSize: 'cover', + borderColor: event.ctg == 'discovery' ? store.color.alt2 : store.color.altDark, + borderWidth: '1px', }; } function eventLineStyles(eventId: number){ -- cgit v1.2.3 From d67b35629905b6c26648c7979c28c333664f102f Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Mon, 2 Jan 2023 16:37:52 +1100 Subject: Skip Timeline transitions for all resize events Previously, skipping was only done upon vertical/horzontal orientation change. This didn't address cases like maximising the window without changing orientation, where pre-existing timeline ticks would animate out-of-sync with new ones. --- src/components/TimeLine.vue | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'src/components/TimeLine.vue') diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index b50141a..087d504 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -102,7 +102,6 @@ const width = ref(0); const height = ref(0); const availLen = computed(() => props.vert ? height.value : width.value); const availBreadth = computed(() => props.vert ? width.value : height.value); -const prevVert = ref(props.vert); // Previous 'vert' value, used for skipping transitions on horz/vert swap const mounted = ref(false); onMounted(() => { let rootEl = rootRef.value!; @@ -118,11 +117,8 @@ const resizeObserver = new ResizeObserver((entries) => { width.value = WRITING_MODE_HORZ ? boxSize.inlineSize : boxSize.blockSize; height.value = WRITING_MODE_HORZ ? boxSize.blockSize : boxSize.inlineSize; // Check for horz/vert swap - if (props.vert != prevVert.value){ - skipTransition.value = true; - setTimeout(() => {skipTransition.value = false}, 100); // Note: Using nextTick() doesn't work - prevVert.value = props.vert; - } + skipTransition.value = true; + setTimeout(() => {skipTransition.value = false}, 100); // Note: Using nextTick() doesn't work } } }); -- cgit v1.2.3 From d48f3b862fad74af6576297d471d7834b1f0bba8 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Mon, 2 Jan 2023 17:47:38 +1100 Subject: Make baseline time-spans non-overlapping Remove time-span labels Fix firstDate/lastDate being passed to TimelineState instead of startDate/endDate --- src/App.vue | 9 +++++---- src/components/BaseLine.vue | 25 +++++++++++++++---------- src/components/TimeLine.vue | 2 +- src/lib.ts | 4 +++- 4 files changed, 24 insertions(+), 16 deletions(-) (limited to 'src/components/TimeLine.vue') diff --git a/src/App.vue b/src/App.vue index 3de3ac2..b97e55a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -40,7 +40,7 @@ import SettingsIcon from './components/icon/SettingsIcon.vue'; import HelpIcon from './components/icon/HelpIcon.vue'; // Other import {timeout, HistDate, HistEvent, queryServer, EventResponseJson, jsonToHistEvent, - SCALES, TimelineState, cmpHistEvent, dateToUnit, DateRangeTree} from './lib'; + SCALES, stepDate, TimelineState, cmpHistEvent, dateToUnit, DateRangeTree} from './lib'; import {useStore} from './store'; import {RBTree, rbtree_shallow_copy} from './rbtree'; @@ -126,9 +126,10 @@ function reduceEvents(){ continue; } // Look for units to keep - let scaleIdx: number = timeline.scaleIdx; - let startUnit = dateToUnit(timeline.startDate, SCALES[scaleIdx]); - let endUnit = dateToUnit(timeline.endDate, SCALES[scaleIdx]); + const scaleIdx = timeline.scaleIdx; + const scale = SCALES[scaleIdx]; + let startUnit = dateToUnit(stepDate(timeline.startDate, scale, {forward: false}), scale); + let endUnit = dateToUnit(stepDate(timeline.endDate, scale), scale); for (let [unit, count] of unitCountMaps.value[scaleIdx]){ if (unit >= startUnit && unit <= endUnit){ newMaps[scaleIdx].set(unit, count); diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index 8730d90..6d31287 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -5,9 +5,7 @@
{{p.label}}
-
- {{state.id}} -
+
@@ -79,9 +77,11 @@ const labelStyles = computed((): Record => ({ width: props.vert ? '40px' : 'auto', padding: props.vert ? '0' : '4px', })); -function spanStyles(state: TimelineState){ +function spanStyles(stateIdx: number){ + const state = props.timelines[stateIdx]; let styles: Record; - let availLen = props.vert ? height.value : width.value; + const availLen = props.vert ? height.value : width.value; + const availBreadth = props.vert ? width.value : height.value; // Determine start/end date if (state.startOffset == null || state.endOffset == null || state.scaleIdx == null){ return {display: 'none'}; @@ -102,19 +102,22 @@ function spanStyles(state: TimelineState){ lenPx = 3; startPx -= Math.max(0, startPx + lenPx - availLen); } + // Account for multiple timelines + const breadth = availBreadth / props.timelines.length; + const sidePx = breadth * stateIdx; // if (props.vert){ styles = { top: startPx + 'px', - left: '0', + left: sidePx + 'px', height: lenPx + 'px', - width: '100%', + width: breadth + 'px', } } else { styles = { - top: '0', + top: sidePx + 'px', left: startPx + 'px', - height: '100%', + height: breadth + 'px', width: lenPx + 'px', } } @@ -123,7 +126,9 @@ function spanStyles(state: TimelineState){ transition: skipTransition.value ? 'none' : 'all 300ms ease-out', color: 'black', backgroundColor: store.color.alt, - opacity: 0.4, + opacity: 0.6, + borderWidth: '1px', + borderColor: store.color.bg, }; } diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index 087d504..bdd5434 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -1100,7 +1100,7 @@ function onShiftWheel(evt: WheelEvent){ // For bound-change signalling function onStateChg(){ emit('state-chg', new TimelineState( - ID, firstDate.value, lastDate.value, startOffset.value, endOffset.value, scaleIdx.value + ID, startDate.value, endDate.value, startOffset.value, endOffset.value, scaleIdx.value )); } watch(firstDate, onStateChg); diff --git a/src/lib.ts b/src/lib.ts index d9d5867..804e352 100644 --- a/src/lib.ts +++ b/src/lib.ts @@ -363,8 +363,10 @@ if (DEBUG){ } } } -export function stepDate( // If stepping by month or years, leaves day value unchanged +export function stepDate( // Steps a date N units along a scale date: HistDate, scale: number, {forward=true, count=1, inplace=false} = {}): HistDate { + // If stepping by month or years, leaves day value unchanged + // Does not account for stepping a CalDate into before MIN_CAL_YEAR const newDate = inplace ? date : date.clone(); if (count < 0){ count = -count; -- cgit v1.2.3