diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 15 | ||||
| -rw-r--r-- | src/components/BaseLine.vue | 4 | ||||
| -rw-r--r-- | src/components/TimeLine.vue | 12 | ||||
| -rw-r--r-- | src/lib.ts | 12 |
4 files changed, 24 insertions, 19 deletions
diff --git a/src/App.vue b/src/App.vue index 1eae198..5970449 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="INITIAL_START_DATE" :initialEnd="INITIAL_END_DATE" + :vert="vert" :initialStart="range.start" :initialEnd="range.end" class="grow basis-full min-h-0 outline outline-1" @remove="onTimelineRemove(idx)" @range-chg="onRangeChg($event, idx)"/> <base-line :vert="vert" :timelineRanges="timelineRanges"/> @@ -64,14 +64,19 @@ 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, startYear: 1900, endYear: 2000}); + if (timelineRanges.value.length == 0){ + timelineRanges.value.push({id: nextTimelineId, start: INITIAL_START_DATE, end: INITIAL_END_DATE}); + } else { + let lastRange = timelineRanges.value[timelineRanges.value.length - 1]; + timelineRanges.value.push({id: nextTimelineId, start: lastRange.start, end: lastRange.end}); + } nextTimelineId++; } addNewTimelineRange(); -function onRangeChg(newBounds: [number, number], idx: number){ +function onRangeChg(newBounds: [HistDate, HistDate], idx: number){ let range = timelineRanges.value[idx]; - range.startYear = newBounds[0]; - range.endYear = newBounds[1]; + range.start = newBounds[0]; + range.end = newBounds[1]; } // For timeline addition/removal diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index e2cf7c8..82507c1 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -81,8 +81,8 @@ function spanStyles(range: TimelineRange){ let styles: Record<string,string>; let availLen = props.vert ? height.value : width.value; // 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 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); 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 d8978e4..a99b05e 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -599,7 +599,7 @@ function onPointerMove(evt: PointerEvent){ } function onPointerUp(evt: PointerEvent){ // Ignore if dragging between div elements - if (evt.relatedTarget != null && rootRef.value.contains(evt.relatedTarget)){ + if (evt.relatedTarget != null && rootRef.value!.contains(evt.relatedTarget as HTMLElement)){ return; } // Remove from event cache @@ -634,13 +634,13 @@ function onShiftWheel(evt: WheelEvent){ // For bound-change signalling watch(startDate, () => { - let startYear = startDate.value.year; - let endYear = endDate.value.year; + let start = startDate.value.clone(); + let end = endDate.value.clone(); if (scale.value != MONTH_SCALE && scale.value != DAY_SCALE){ // Possibly incorporate offsets - startYear -= startOffset.value * scale.value; - endYear += endOffset.value * scale.value; + stepDate(start, 1, {forward: false, count: Math.floor(startOffset.value * scale.value)}); + stepDate(end, 1, {count: Math.floor(endOffset.value * scale.value)}); } - emit('range-chg', [startYear, endYear]); + emit('range-chg', [start, end]); }); // For skipping transitions on startup (and on horz/vert swap) @@ -179,11 +179,11 @@ export function stepDate(date: HistDate, scale: number, {forward=true, count=1, while (count > 0){ if (scale == DAY_SCALE){ if (forward && newDate.day < 28){ - let chg = Math.min(28 - newDate.day, count); + const chg = Math.min(28 - newDate.day, count); newDate.day += chg; count -= chg; } else if (!forward && newDate.day > 1){ - let chg = Math.min(newDate.day - 1, count); + const chg = Math.min(newDate.day - 1, count); newDate.day -= chg; count -= chg; } else { @@ -195,7 +195,7 @@ export function stepDate(date: HistDate, scale: number, {forward=true, count=1, } else if (scale == MONTH_SCALE){ if (forward){ if (newDate.month < 12){ - let chg = Math.min(12 - newDate.month, count); + const chg = Math.min(12 - newDate.month, count); newDate.month += chg; count -= chg; } else { @@ -208,7 +208,7 @@ export function stepDate(date: HistDate, scale: number, {forward=true, count=1, } } else { if (newDate.month > 1){ - let chg = Math.min(newDate.month - 1, count); + const chg = Math.min(newDate.month - 1, count); newDate.month -= chg; count -= chg; } else { @@ -270,8 +270,8 @@ export function getScaleRatio(scale: number, scale2: number){ // For sending timeline-bound data to BaseLine export type TimelineRange = { id: number, - startYear: number, - endYear: number, + start: HistDate, + end: HistDate, }; export type HistEvent = { |