IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Prettified all files.

Browse Source
This commit is contained in:
Sebastian Kupke
2019-07-18 12:26:39 +02:00
parent 7744b92771
commit 2d400a18ec
125 changed files with 11184 additions and 8154 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/pixi/timeline.js
+167 -123
View File
@@ -2,9 +2,7 @@ import { Cycle, Colors, Dates, isEmpty } from '../utils.js'
import { Capabilities } from '../capabilities.js'
import { BitmapLabeledGraphics, FontInfo } from './labeledgraphics.js'
export class Ticks {
get reservedPrefixes() {
return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second']
}
@@ -70,15 +68,19 @@ export class Ticks {
visibleLast = end
}
}
if (first == null)
return info
return { start: first, end: last, visibleStart: visibleFirst, visibleEnd: visibleLast, units: units }
if (first == null) return info
return {
start: first,
end: last,
visibleStart: visibleFirst,
visibleEnd: visibleLast,
units: units
}
}
drawTick(timeline, x, y, date) {
let visible = date > timeline.start && date < timeline.end
if (!visible)
return false
if (!visible) return false
timeline.drawTick(x)
return true
}
@@ -87,13 +89,24 @@ export class Ticks {
return date.toLocaleDateString('de', format)
}
draw(timeline, range, width, height, available, format, nextFormat, level, extraTicks=false) {
draw(
timeline,
range,
width,
height,
available,
format,
nextFormat,
level,
extraTicks = false
) {
let first = null
let last = null
let keyedFormat = (format) ? format[this.formatKey] : null
let keyedNextFormat = (nextFormat) ? nextFormat[this.formatKey] : null
let redundant = (nextFormat) ? this.formatKey in nextFormat : false
let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat
let keyedFormat = format ? format[this.formatKey] : null
let keyedNextFormat = nextFormat ? nextFormat[this.formatKey] : null
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)
@@ -110,31 +123,29 @@ export class Ticks {
let nextX = timeline.toX(end) - 100
if (x < 0 && nextX > -100 && !redundant) {
xx = Math.min(4, nextX)
}
else {
} else {
xx -= 2
}
}
else if (level > 0) {
} else if (level > 0) {
xx = x + available / 2
}
if (!fullyRedundant) {
timeline.ensureLabel(key, text,
timeline.ensureLabel(
key,
text,
{ x: xx, y: yy, align },
FontInfo.small)
FontInfo.small
)
}
if (extraTicks)
timeline.drawTick(x, -level)
if (extraTicks) timeline.drawTick(x, -level)
}
if (timeline.visibleRange(start, end)) {
if (first == null)
first = start
if (first == null) first = start
last = end
}
}
if (first == null)
return null
if (first == null) return null
return { start: first, end: last }
}
@@ -149,7 +160,6 @@ export class Ticks {
}
export class DecadeTicks extends Ticks {
get milliseconds() {
return 10 * 365 * 24 * 60 * 60 * 1000
}
@@ -182,14 +192,12 @@ export class DecadeTicks extends Ticks {
}
export class YearTicks extends Ticks {
get milliseconds() {
return 365 * 24 * 60 * 60 * 1000
}
format(available) {
if (available < 44)
return { year: '2-digit', timeZone: 'UTC' }
if (available < 44) return { year: '2-digit', timeZone: 'UTC' }
return { year: 'numeric', timeZone: 'UTC' }
}
@@ -211,17 +219,14 @@ export class YearTicks extends Ticks {
}
export class MonthTicks extends Ticks {
get milliseconds() {
return (365 / 12) * 24 * 60 * 60 * 1000
}
format(available) {
let format = { month: 'narrow', timeZone: 'UTC' }
if (available > 44)
format.month = 'short'
if (available > 66)
format.year = '2-digit'
if (available > 44) format.month = 'short'
if (available > 66) format.year = '2-digit'
if (available > 100) {
format.month = 'long'
format.year = 'numeric'
@@ -251,15 +256,13 @@ export class MonthTicks extends Ticks {
}
export class DayTicks extends Ticks {
get milliseconds() {
return 24 * 60 * 60 * 1000
}
format(available) {
let format = { day: 'numeric', timeZone: 'UTC' }
if (available > 44)
format.month = 'short'
if (available > 44) format.month = 'short'
if (available > 100) {
format.month = 'long'
format.year = '2-digit'
@@ -283,7 +286,11 @@ export class DayTicks extends Ticks {
}
iterStart(start) {
return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate()
)
}
next(date) {
@@ -292,7 +299,6 @@ export class DayTicks extends Ticks {
}
export class HourTicks extends Ticks {
get milliseconds() {
return 60 * 60 * 1000
}
@@ -325,17 +331,22 @@ export class HourTicks extends Ticks {
}
dateKey(date) {
return this.key + date.getFullYear()
+ date.getMonth()
+ date.getDate()
+ date.getHours()
return (
this.key +
date.getFullYear() +
date.getMonth() +
date.getDate() +
date.getHours()
)
}
iterStart(start) {
return Dates.create(start.getFullYear(),
return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate(),
start.getHours())
start.getHours()
)
}
next(date) {
@@ -348,7 +359,6 @@ export class HourTicks extends Ticks {
}
export class MinuteTicks extends Ticks {
get milliseconds() {
return 60 * 1000
}
@@ -378,19 +388,24 @@ export class MinuteTicks extends Ticks {
}
dateKey(date) {
return this.key + date.getFullYear()
+ date.getMonth()
+ date.getDate()
+ date.getHours()
+ date.getMinutes()
return (
this.key +
date.getFullYear() +
date.getMonth() +
date.getDate() +
date.getHours() +
date.getMinutes()
)
}
iterStart(start) {
return Dates.create(start.getFullYear(),
return Dates.create(
start.getFullYear(),
start.getMonth(),
start.getDate(),
start.getHours(),
start.getMinutes())
start.getMinutes()
)
}
next(date) {
@@ -403,7 +418,6 @@ export class MinuteTicks extends Ticks {
}
export class TimeTicks {
constructor(...ticks) {
this.ticks = ticks
}
@@ -435,9 +449,11 @@ export class TimeTicks {
let amount = ticks.milliseconds / duration
let available = amount * size
availables.set(ticks, available)
if (available < ticks.minWidth)
break
formats.set(ticks, (available < ticks.minLabelWidth) ? null : ticks.format(available))
if (available < ticks.minWidth) break
formats.set(
ticks,
available < ticks.minLabelWidth ? null : ticks.format(available)
)
nextFormats.set(previous, formats.get(ticks))
previous = ticks
visible.push(ticks)
@@ -445,21 +461,26 @@ export class TimeTicks {
let level = 0
let ranges = []
for (let ticks of visible) {
if (range == null)
continue
range = ticks.draw(timeline, range, width, height,
if (range == null) continue
range = ticks.draw(
timeline,
range,
width,
height,
availables.get(ticks),
formats.get(ticks),
nextFormats.get(ticks), level)
nextFormats.get(ticks),
level
)
if (range) {
ranges.push({ticks, range})
ranges.push({ ticks, range })
}
level += 1
}
let extraLevel = ranges.length - 1
let extraStart = extraLevel
for(let {ticks, range} of ranges) {
for (let { ticks, range } of ranges) {
ticks.drawExtra(timeline, range, extraLevel)
extraLevel -= 1
if (extraLevel <= 0) {
@@ -475,7 +496,6 @@ export class TimeTicks {
}
export class ColorRanges {
constructor(label, color, ranges) {
this.label = label
this.color = color
@@ -502,9 +522,16 @@ export class ColorRanges {
}
export default class Timeline extends BitmapLabeledGraphics {
constructor(width, height, { ticks = null,
baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
constructor(
width,
height,
{
ticks = null,
baseLine = 0.5,
showRange = true,
throwDamping = 0.95
} = {}
) {
super()
this.wantedWidth = width
this.wantedHeight = height
@@ -521,10 +548,12 @@ export default class Timeline extends BitmapLabeledGraphics {
this.deltas = []
this.labelDates = []
this.colorRanges = []
this.rangeColors = new Cycle(Colors.eminence,
this.rangeColors = new Cycle(
Colors.eminence,
Colors.steelblue,
Colors.ochre,
Colors.turquoise)
Colors.turquoise
)
this.callbacks = []
this.onTapCallbacks = []
this.onDoubleTapCallbacks = []
@@ -536,18 +565,21 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false
this.direction = -1
this.throwDamping = throwDamping
this.timeticks = ticks || new TimeTicks(new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks())
this.timeticks =
ticks ||
new TimeTicks(
new DecadeTicks(),
new YearTicks(),
new MonthTicks(),
new DayTicks()
)
this.labelPrefix = '__'
}
updateSelection() {
if (this.visibleDate(this.start) && this.visibleDate(this.end)) {
this.selection = [this.start, this.end]
}
else {
} else {
this.timeticks.selectedRange(this)
}
@@ -593,8 +625,12 @@ export default class Timeline extends BitmapLabeledGraphics {
let cr = this.colorRanges[i]
let label = cr.label
cr.draw(this, w, h)
let current = this.ensureLabel('colorRange:' + label, label,
{ x: xx, y: yy, align: 'right' }, FontInfo.small)
let current = this.ensureLabel(
'colorRange:' + label,
label,
{ x: xx, y: yy, align: 'right' },
FontInfo.small
)
let r = current.getBounds()
xx -= r.width + 16
@@ -623,7 +659,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.prepareLabels()
this.updateColorRanges(w, h)
this.lineStyle(2, 0xFFFFFF)
this.lineStyle(2, 0xffffff)
if (this.start != null && this.end != null) {
this.moveTo(this.toX(this.start), y)
this.lineTo(this.toX(this.end), y)
@@ -631,32 +667,30 @@ export default class Timeline extends BitmapLabeledGraphics {
this.updateSelection()
let selected = this.selection
if (selected[0] != this.start && selected[1] != this.end) {
if (this.showRange)
this.drawSelectedRamge(selected)
if (this.showRange) this.drawSelectedRamge(selected)
}
for (let callback of this.callbacks) {
callback(this.scroll, this.zoom, this.selection)
}
}
else {
} else {
this.moveTo(this.inset, y)
this.lineTo(w - this.inset, y)
}
if (this.progress != null && this.progress < 1) {
this.lineStyle(2, 0xCCCCFF)
this.lineStyle(2, 0xccccff)
this.moveTo(this.inset, y)
this.lineTo((w - this.inset) * this.progress, y)
}
}
totalWidth(bounded = false) {
let w = this.wantedWidth - (2 * this.inset)
let w = this.wantedWidth - 2 * this.inset
return w * this.validZoom(this.zoom, bounded)
}
validZoom(zoom, bounded = true) {
let overshoot = (bounded) ? 1.0 : 2.0
let overshoot = bounded ? 1.0 : 2.0
zoom = Math.max(zoom, this.minZoom / overshoot)
zoom = Math.min(zoom, this.maxZoom * overshoot)
return zoom
@@ -690,7 +724,7 @@ export default class Timeline extends BitmapLabeledGraphics {
y = this.getY()
}
this.moveTo(x, y)
this.lineTo(x, y - (this.tickHeight * direction * this.direction))
this.lineTo(x, y - this.tickHeight * direction * this.direction)
}
prepareLabels() {
@@ -710,24 +744,22 @@ export default class Timeline extends BitmapLabeledGraphics {
visibleDate(date, offset = 0) {
if (date >= this.start && date <= this.end) {
let x = this.toX(date) + offset
return (x > 0 && x < this.wantedWidth)
return x > 0 && x < this.wantedWidth
}
return false
}
visibleRange(start, end) {
let x = this.toX(start)
if (x > this.wantedWidth)
return false
if (x > this.wantedWidth) return false
x = this.toX(end)
if (x < 0)
return false
if (x < 0) return false
return true
}
tickLabelOffset(direction = 1, level = 0) {
let fs = FontInfo.small.fontSize
let dh = fs + (level * (fs + 2))
let dh = fs + level * (fs + 2)
return this.direction * direction * dh
}
@@ -740,12 +772,16 @@ export default class Timeline extends BitmapLabeledGraphics {
let [label, date] = this.labelDates[i]
let align = 'center' // (last == null) ? 'right' : 'left'
let x = this.toX(date)
let current = this.ensureLabel(this.labelPrefix + label, label,
let current = this.ensureLabel(
this.labelPrefix + label,
label,
{
x: x, y: y,
x: x,
y: y,
align
},
FontInfo.small)
FontInfo.small
)
let r = current.getBounds()
current.visible = !(last != null && r.x + r.width > last.x)
if (current.visible) {
@@ -753,12 +789,26 @@ export default class Timeline extends BitmapLabeledGraphics {
last = r
}
}
}
else {
let start = this.start.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' })
let end = this.end.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' })
this.ensureLabel(this.labelPrefix + 'start', start, { x: this.toX(this.start), y: h2 })
this.ensureLabel(this.labelPrefix + 'end', end, { x: this.toX(this.end), y: h2, align: 'right' })
} else {
let start = this.start.toLocaleDateString('de', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
})
let end = this.end.toLocaleDateString('de', {
year: 'numeric',
month: 'numeric',
day: 'numeric'
})
this.ensureLabel(this.labelPrefix + 'start', start, {
x: this.toX(this.start),
y: h2
})
this.ensureLabel(this.labelPrefix + 'end', end, {
x: this.toX(this.end),
y: h2,
align: 'right'
})
}
}
@@ -774,7 +824,7 @@ export default class Timeline extends BitmapLabeledGraphics {
this.killTweens()
this.deltas = []
this.validScroll()
if (typeof ThrowPropsPlugin != "undefined") {
if (typeof ThrowPropsPlugin != 'undefined') {
ThrowPropsPlugin.track(this, 'delta')
}
}
@@ -796,8 +846,7 @@ export default class Timeline extends BitmapLabeledGraphics {
}
onEnd(event, interaction) {
if (typeof ThrowPropsPlugin != "undefined") {
if (typeof ThrowPropsPlugin != 'undefined') {
let vel = ThrowPropsPlugin.getVelocity(this, 'delta')
ThrowPropsPlugin.untrack(this)
}
@@ -815,33 +864,31 @@ export default class Timeline extends BitmapLabeledGraphics {
let anchor = interaction.current.mean()
this.keepInBounds(delta, anchor)
for(let key of interaction.ended.keys()) {
for (let key of interaction.ended.keys()) {
if (interaction.isDoubleTap(key)) {
this.onDoubleTap(event, interaction, key)
}
else if (interaction.isTap(key)) {
} else if (interaction.isTap(key)) {
this.onTap(event, interaction, key)
}
else if (interaction.isLongPress(key)) {
} else if (interaction.isLongPress(key)) {
this.onLongPress(event, interaction, key)
}
}
}
onLongPress(event, interaction, key) {
for(let callback of this.onLongPressCallbacks) {
for (let callback of this.onLongPressCallbacks) {
callback(event, interaction, key)
}
}
onTap(event, interaction, key) {
for(let callback of this.onTapCallbacks) {
for (let callback of this.onTapCallbacks) {
callback(event, interaction, key)
}
}
onDoubleTap(event, interaction, key) {
for(let callback of this.onDoubleTapCallbacks) {
for (let callback of this.onDoubleTapCallbacks) {
callback(event, interaction, key)
}
}
@@ -854,8 +901,7 @@ export default class Timeline extends BitmapLabeledGraphics {
_scrollMaximum(bounded) {
let total = this.totalWidth(bounded)
let limit = this.wantedWidth
if (total > limit)
return 0
if (total > limit) return 0
let w = limit - 2 * this.inset
return (w - total) / 2
}
@@ -873,7 +919,6 @@ export default class Timeline extends BitmapLabeledGraphics {
this.autoScroll = false
}
validScroll(bounded = true) {
let minimum = this.scrollMinimum(bounded)
let maximum = this.scrollMaximum(bounded)
@@ -898,8 +943,7 @@ export default class Timeline extends BitmapLabeledGraphics {
let newX = this.toX(date)
tweens.scroll = this.scroll + anchor.x - newX
this.zoom = oldZoom
}
else {
} else {
if (this.zoom < this.minZoom) {
tweens.zoom = this.minZoom
}
@@ -911,7 +955,9 @@ export default class Timeline extends BitmapLabeledGraphics {
}
}
if (!isEmpty(tweens)) {
tweens.onUpdate = () => { this.redraw() }
tweens.onUpdate = () => {
this.redraw()
}
TweenLite.to(this, 0.5, tweens).delay(0.1)
return
}
@@ -928,15 +974,14 @@ export default class Timeline extends BitmapLabeledGraphics {
let direction = event.detail < 0 || event.wheelDelta > 0
let anchor = { x: event.clientX, y: event.clientY }
const zoomFactor = 1.5
this.onZoom((direction) ? zoomFactor : 1 / zoomFactor, anchor)
this.onZoom(direction ? zoomFactor : 1 / zoomFactor, anchor)
this.redraw()
this.keepInBounds(0, anchor)
}
showRanges(ranges, label = "Untitled", color = null) {
showRanges(ranges, label = 'Untitled', color = null) {
for (let cr of this.colorRanges) {
if (cr.label == label)
return
if (cr.label == label) return
}
while (this.colorRanges.length >= this.rangeColors.length) {
this.colorRanges.shift()
@@ -945,4 +990,3 @@ export default class Timeline extends BitmapLabeledGraphics {
this.redraw()
}
}