diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 12 | ||||
| -rw-r--r-- | src/components/BaseLine.vue | 6 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 8 | ||||
| -rw-r--r-- | src/lib.ts | 4 |
4 files changed, 19 insertions, 11 deletions
diff --git a/src/App.vue b/src/App.vue index 278ef63..1eae198 100644 --- a/src/App.vue +++ b/src/App.vue @@ -19,7 +19,7 @@ <div class="grow min-h-0 flex" :class="{'flex-col': !vert}" :style="{backgroundColor: store.color.bg}" ref="contentAreaRef"> <time-line v-for="(range, idx) in timelineRanges" :key="range.id" - :vert="vert" :initialStart="range.start" :initialEnd="range.end" + :vert="vert" :initialStart="INITIAL_START_DATE" :initialEnd="INITIAL_END_DATE" class="grow basis-full min-h-0 outline outline-1" @remove="onTimelineRemove(idx)" @range-chg="onRangeChg($event, idx)"/> <base-line :vert="vert" :timelineRanges="timelineRanges"/> @@ -60,16 +60,18 @@ onMounted(updateAreaDims) // Timeline data const timelineRanges: Ref<TimelineRange[]> = ref([]); +const INITIAL_START_DATE = new HistDate(1900, 1, 1); +const INITIAL_END_DATE = new HistDate(2000, 1, 1); let nextTimelineId = 1; function addNewTimelineRange(){ - timelineRanges.value.push({id: nextTimelineId, start: new HistDate(1900, 1, 1), end: new HistDate(2000, 1, 1)}); + timelineRanges.value.push({id: nextTimelineId, startYear: 1900, endYear: 2000}); nextTimelineId++; } addNewTimelineRange(); -function onRangeChg(newBounds: [HistDate, HistDate], idx: number){ +function onRangeChg(newBounds: [number, number], idx: number){ let range = timelineRanges.value[idx]; - range.start = newBounds[0]; - range.end = newBounds[1]; + range.startYear = newBounds[0]; + range.endYear = newBounds[1]; } // For timeline addition/removal diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index ccadb0b..e2cf7c8 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -80,9 +80,9 @@ const labelStyles = computed((): Record<string, string> => ({ function spanStyles(range: TimelineRange){ let styles: Record<string,string>; let availLen = props.vert ? height.value : width.value; - // Determine positions in full timeline (only considers year values) - 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 positions in full timeline + let startFrac = (range.startYear - MIN_DATE.year) / (MAX_DATE.year - MIN_DATE.year); + let lenFrac = (range.endYear - range.startYear) / (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 22069bc..281f4e4 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -630,7 +630,13 @@ function onShiftWheel(evt: WheelEvent){ // For bound-change signalling watch(startDate, () => { - emit('range-chg', [startDate.value, endDate.value]); + let startYear = startDate.value.year; + let endYear = endDate.value.year; + if (scale.value != MONTH_SCALE && scale.value != DAY_SCALE){ // Possibly incorporate offsets + startYear -= startOffset.value * scale.value; + endYear += endOffset.value * scale.value; + } + emit('range-chg', [startYear, endYear]); }); // For skipping transitions on startup (and on horz/vert swap) @@ -261,8 +261,8 @@ export function getScaleRatio(scale: number, scale2: number){ // For sending timeline-bound data to BaseLine export type TimelineRange = { id: number, - start: HistDate, - end: HistDate, + startYear: number, + endYear: number, }; export type HistEvent = { |