diff options
| -rw-r--r-- | src/components/TimeLine.vue | 34 | ||||
| -rw-r--r-- | src/store.ts | 2 |
2 files changed, 20 insertions, 16 deletions
diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue index e7ba9f8..f1188cc 100644 --- a/src/components/TimeLine.vue +++ b/src/components/TimeLine.vue @@ -55,7 +55,7 @@ </div> </div> <!-- Timeline position label --> - <div class="absolute top-2 left-2 z-20 text-lg" :class="[current ? 'text-yellow-300' : 'text-stone-50']" + <div class="absolute top-1 left-2 z-20 text-lg" :class="[current ? 'text-yellow-300' : 'text-stone-50']" style="text-shadow: 0px 0px 5px black"> {{timelinePosStr}} </div> @@ -505,30 +505,34 @@ function getEventLayout(): Map<number, [number, number, number, number]> { let afterMainlineIdx: number | null = null; // Index of first column after the mainline, if there is one if (!sideMainline.value){ // Get columns before mainline area - let columnOffset = availBreadth.value / 2 - store.mainlineBreadth / 2 - store.spacing - eventMinorSz.value; - while (columnOffset >= store.spacing){ + let colArea = availBreadth.value / 2 - store.mainlineBreadth / 2 - store.spacing * 2; + let numCols = Math.floor(colArea / eventMinorSz.value); + let colSep = Math.floor((colArea % eventMinorSz.value) / (numCols + 1)); + let colOffset = store.spacing + colSep; + for (let i = 0; i < numCols; i++){ cols.push([]); - colOffsets.push(columnOffset); - columnOffset -= eventMinorSz.value + store.spacing; + colOffsets.push(colOffset); + colOffset += eventMinorSz.value + colSep; } - colOffsets.reverse(); afterMainlineIdx = cols.length; // Get columns after mainline area - columnOffset = availBreadth.value / 2 + store.mainlineBreadth / 2 + store.spacing; - while (columnOffset + eventMinorSz.value + store.spacing < availBreadth.value){ + colOffset = availBreadth.value / 2 + store.mainlineBreadth / 2 + store.spacing; + for (let i = 0; i < numCols; i++){ cols.push([]); - colOffsets.push(columnOffset); - columnOffset += eventMinorSz.value + store.spacing; + colOffsets.push(colOffset); + colOffset += eventMinorSz.value + colSep; } } else { // Get columns before mainline area - let columnOffset = mainlineOffset.value - store.spacing - eventMinorSz.value - store.spacing; - while (columnOffset >= store.spacing){ + let colArea = availBreadth.value - store.mainlineBreadth - store.spacing * 2; + let numCols = Math.floor(colArea / eventMinorSz.value); + let colSep = Math.floor((colArea % eventMinorSz.value) / (numCols + 1)); + let colOffset = store.spacing + colSep; + for (let i = 0; i < numCols; i++){ cols.push([]); - colOffsets.push(columnOffset); - columnOffset -= eventMinorSz.value + store.spacing; + colOffsets.push(colOffset); + colOffset += eventMinorSz.value + colSep; } - colOffsets.reverse(); } if (cols.length == 0){ console.log('WARNING: No space for events'); diff --git a/src/store.ts b/src/store.ts index 695d3a9..d65dbcf 100644 --- a/src/store.ts +++ b/src/store.ts @@ -97,7 +97,7 @@ function getDefaultState(): StoreState { defaultEndTickOffset: 0.5, showMinorTicks: true, // Mainline and event display - mainlineBreadth: 80, + mainlineBreadth: 70, eventImgSz: 100, eventLabelHeight: 20, spacing: 10, |