diff --git a/lib/pixi/timeline.js b/lib/pixi/timeline.js index cf2386a..be6c07e 100644 --- a/lib/pixi/timeline.js +++ b/lib/pixi/timeline.js @@ -9,6 +9,10 @@ export class Ticks { return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second'] } + static get largeTickSize() { + return 4.2 + } + get minWidth() { return 10 } @@ -83,7 +87,7 @@ export class Ticks { return date.toLocaleDateString('de', format) } - draw(timeline, range, width, height, available, format, nextFormat, level) { + draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks=false) { let first = null let last = null let keyedFormat = (format) ? format[this.formatKey] : null @@ -91,7 +95,6 @@ export class Ticks { let redundant = (nextFormat) ? this.formatKey in nextFormat : false let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat let y = timeline.getY() - for (let { start, end } of this.iterRanges(range)) { let x = timeline.toX(start) let xx = x @@ -100,11 +103,10 @@ export class Ticks { let key = this.dateKey(start) let text = this.toLocaleString(start, format) let align = 'center' - let downTick = false if (nextFormat) { yy = y + timeline.tickLabelOffset(-1, 1) align = 'left' - timeline.drawTick(x, 4.2) + timeline.drawTick(x, Ticks.largeTickSize) let nextX = timeline.toX(end) - 100 if (x < 0 && nextX > -100 && !redundant) { xx = Math.min(4, nextX) @@ -112,20 +114,18 @@ export class Ticks { else { xx -= 2 } - downTick = true } else if (level > 0) { xx = x + available / 2 } - else { - downTick = true - } + if (!fullyRedundant) { timeline.ensureLabel(key, text, { x: xx, y: yy, align }, FontInfo.small) } - if (downTick) timeline.drawTick(x, -1) + if (extraTicks) + timeline.drawTick(x, -level) } if (timeline.visibleRange(start, end)) { if (first == null) @@ -137,6 +137,15 @@ export class Ticks { return null return { start: first, end: last } } + + drawExtra(timeline, range, size) { + for (let { start } of this.iterRanges(range)) { + if (timeline.visibleDate(start)) { + let x = timeline.toX(start) + timeline.drawTick(x, -size) + } + } + } } export class DecadeTicks extends Ticks { @@ -434,15 +443,34 @@ export class TimeTicks { visible.push(ticks) } let level = 0 + let ranges = [] for (let ticks of visible) { if (range == null) - return + continue range = ticks.draw(timeline, range, width, height, availables.get(ticks), formats.get(ticks), nextFormats.get(ticks), level) + if (range) { + ranges.push({ticks, range}) + } level += 1 } + + let extraLevel = ranges.length - 1 + let extraStart = extraLevel + for(let {ticks, range} of ranges) { + ticks.drawExtra(timeline, range, extraLevel) + extraLevel -= 1 + if (extraLevel <= 0) { + continue + } + } + + timeline.drawTick(start, Ticks.largeTickSize) + timeline.drawTick(start, -extraStart) + timeline.drawTick(end, Ticks.largeTickSize) + timeline.drawTick(end, -extraStart) } }