1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<template>
<div class="flex relative" :class="{'flex-col': vert}"
:style="{color: store.color.text}" ref="rootRef">
<div v-for="p in periods" :key="p.label" :style="periodStyles(p)">
<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>
</TransitionGroup>
</div>
</template>
<script setup lang="ts">
import {ref, computed, onMounted, PropType, Ref} from 'vue';
import {MIN_DATE, MAX_DATE, SCALES, MONTH_SCALE, DAY_SCALE, WRITING_MODE_HORZ, TimelineState, stepDate} from '../lib';
import {useStore} from '../store';
// Refs
const rootRef = ref(null as HTMLElement | null);
// Global store
const store = useStore();
// Props
const props = defineProps({
vert: {type: Boolean, required: true},
timelines: {type: Object as PropType<TimelineState[]>, required: true},
});
// Static time periods
type Period = {label: string, len: number};
const periods: Ref<Period[]> = ref([
{label: 'Pre Hadean', len: 8},
{label: 'Hadean', len: 1},
{label: 'Archaean', len: 1.5},
{label: 'Proterozoic', len: 2},
{label: 'Phanerozoic', len: 0.5},
]);
// For skipping transitions on startup
const skipTransition = ref(true);
onMounted(() => setTimeout(() => {skipTransition.value = false}, 100));
// For size and mount-status tracking
const width = ref(0);
const height = ref(0);
const mounted = ref(false);
onMounted(() => {
let rootEl = rootRef.value!;
width.value = rootEl.offsetWidth;
height.value = rootEl.offsetHeight;
mounted.value = true;
})
const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries){
if (entry.contentBoxSize){
const boxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
width.value = WRITING_MODE_HORZ ? boxSize.inlineSize : boxSize.blockSize;
height.value = WRITING_MODE_HORZ ? boxSize.blockSize : boxSize.inlineSize;
}
}
});
onMounted(() => resizeObserver.observe(rootRef.value as HTMLElement));
// Styles
function periodStyles(period: Period){
return {
backgroundColor: store.color.bgDark2,
outline: '1px solid gray',
flexGrow: period.len,
overflow: 'hidden',
};
}
const labelStyles = computed((): Record<string, string> => ({
transform: props.vert ? 'rotate(90deg) translate(50%, 0)' : 'none',
whiteSpace: 'nowrap',
width: props.vert ? '40px' : 'auto',
padding: props.vert ? '0' : '4px',
}));
function spanStyles(state: TimelineState){
let styles: Record<string,string>;
let availLen = props.vert ? height.value : width.value;
// 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){ // Account for 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);
if (lenPx < 3){ // Prevent zero length
lenPx = 3;
startPx -= Math.max(0, startPx + lenPx - availLen);
}
//
if (props.vert){
styles = {
top: startPx + 'px',
left: '0',
height: lenPx + 'px',
width: '100%',
}
} else {
styles = {
top: '0',
left: startPx + 'px',
height: '100%',
width: lenPx + 'px',
}
}
return {
...styles,
transition: skipTransition.value ? 'none' : 'all 300ms ease-out',
color: 'black',
backgroundColor: store.color.alt,
opacity: 0.4,
};
}
</script>
|
