Improved ticks.

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)
     }
 }