aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/App.vue9
-rw-r--r--src/components/BaseLine.vue25
-rw-r--r--src/components/TimeLine.vue14
-rw-r--r--src/lib.ts4
-rw-r--r--src/store.ts3
5 files changed, 31 insertions, 24 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 c869aa3..b9e8197 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -48,7 +48,7 @@
<!-- Events -->
<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)">
<!-- Image -->
- <div class="rounded-full border border-yellow-500" :style="eventImgStyles(id)"></div>
+ <div class="rounded-full" :style="eventImgStyles(id)"></div>
<!-- Label -->
<div class="text-center text-stone-100 text-sm whitespace-nowrap text-ellipsis overflow-hidden">
{{idToEvent.get(id)!.title}}
@@ -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
}
}
});
@@ -1104,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);
@@ -1172,6 +1168,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){
diff --git a/src/lib.ts b/src/lib.ts
index e2d65f9..da18d94 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;
diff --git a/src/store.ts b/src/store.ts
index 8b92c6f..bb29dba 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -18,7 +18,8 @@ export const useStore = defineStore('store', {
alt: '#fde047', // yellow-300
altDark: '#eab308', // yellow-500
altDark2: '#ca8a04', // yellow-600
- altBg: '#6a5e2e'
+ altBg: '#6a5e2e',
+ alt2: '#2563eb', // sky-600
};
return {
tickLen: 16,
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 15:56:34 +0000