diff options
| -rw-r--r-- | src/App.vue | 9 | ||||
| -rw-r--r-- | src/components/BaseLine.vue | 25 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 2 | ||||
| -rw-r--r-- | src/lib.ts | 4 |
4 files changed, 24 insertions, 16 deletions
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 @@ <div :style="labelStyles">{{p.label}}</div> </div> <TransitionGroup name="fade" v-if="mounted"> - <div v-for="state in timelines" :key="state.id" class="absolute" :style="spanStyles(state)"> - {{state.id}} - </div> + <div v-for="(state, idx) in timelines" :key="state.id" class="absolute" :style="spanStyles(idx)"></div> </TransitionGroup> </div> </template> @@ -79,9 +77,11 @@ const labelStyles = computed((): Record<string, string> => ({ 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<string,string>; - 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, }; } </script> 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); @@ -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; |