Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@losting/timeline

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@losting/timeline - npm Package Compare versions

Comparing version 2.2.0 to 3.0.0

index.html

1040

dist/timeline.es.js

@@ -1,502 +0,310 @@

var $t = Object.defineProperty;
var vt = (n, e, t) => e in n ? $t(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
var j = (n, e, t) => (vt(n, typeof e != "symbol" ? e + "" : e, t), t), ct = (n, e, t) => {
if (!e.has(n))
throw TypeError("Cannot " + t);
var Ft = Object.defineProperty;
var Ct = (a, t, i) => t in a ? Ft(a, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[t] = i;
var V = (a, t, i) => (Ct(a, typeof t != "symbol" ? t + "" : t, i), i), gt = (a, t, i) => {
if (!t.has(a))
throw TypeError("Cannot " + i);
};
var k = (n, e, t) => (ct(n, e, "read from private field"), t ? t.call(n) : e.get(n)), Q = (n, e, t) => {
if (e.has(n))
var f = (a, t, i) => (gt(a, t, "read from private field"), i ? i.call(a) : t.get(a)), T = (a, t, i) => {
if (t.has(a))
throw TypeError("Cannot add the same private member more than once");
e instanceof WeakSet ? e.add(n) : e.set(n, t);
}, F = (n, e, t, a) => (ct(n, e, "write to private field"), a ? a.call(n, t) : e.set(n, t), t);
function gt(n) {
return { all: n = n || /* @__PURE__ */ new Map(), on: function(e, t) {
var a = n.get(e);
a ? a.push(t) : n.set(e, [t]);
}, off: function(e, t) {
var a = n.get(e);
a && (t ? a.splice(a.indexOf(t) >>> 0, 1) : n.set(e, []));
}, emit: function(e, t) {
var a = n.get(e);
a && a.slice().map(function(l) {
l(t);
}), (a = n.get("*")) && a.slice().map(function(l) {
l(e, t);
t instanceof WeakSet ? t.add(a) : t.set(a, i);
}, O = (a, t, i, r) => (gt(a, t, "write to private field"), r ? r.call(a, i) : t.set(a, i), i);
var H = (a, t, i) => (gt(a, t, "access private method"), i);
function Ht(a) {
return { all: a = a || /* @__PURE__ */ new Map(), on: function(t, i) {
var r = a.get(t);
r ? r.push(i) : a.set(t, [i]);
}, off: function(t, i) {
var r = a.get(t);
r && (i ? r.splice(r.indexOf(i) >>> 0, 1) : a.set(t, []));
}, emit: function(t, i) {
var r = a.get(t);
r && r.slice().map(function(l) {
l(i);
}), (r = a.get("*")) && r.slice().map(function(l) {
l(t, i);
});
} };
}
var et = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, mt = "Expected a function", ft = 0 / 0, pt = "[object Symbol]", xt = /^\s+|\s+$/g, Mt = /^[-+]0x[0-9a-f]+$/i, yt = /^0b[01]+$/i, bt = /^0o[0-7]+$/i, Ct = parseInt, Dt = typeof et == "object" && et && et.Object === Object && et, Ot = typeof self == "object" && self && self.Object === Object && self, wt = Dt || Ot || Function("return this")(), Tt = Object.prototype, St = Tt.toString, _t = Math.max, kt = Math.min, at = function() {
return wt.Date.now();
};
function Yt(n, e, t) {
var a, l, h, m, u, y, f = 0, b = !1, c = !1, M = !0;
if (typeof n != "function")
throw new TypeError(mt);
e = ut(e) || 0, rt(t) && (b = !!t.leading, c = "maxWait" in t, h = c ? _t(ut(t.maxWait) || 0, e) : h, M = "trailing" in t ? !!t.trailing : M);
function o(D) {
var E = a, z = l;
return a = l = void 0, f = D, m = n.apply(z, E), m;
}
function g(D) {
return f = D, u = setTimeout(J, e), b ? o(D) : m;
}
function x(D) {
var E = D - y, z = D - f, T = e - E;
return c ? kt(T, h - z) : T;
}
function W(D) {
var E = D - y, z = D - f;
return y === void 0 || E >= e || E < 0 || c && z >= h;
}
function J() {
var D = at();
if (W(D))
return q(D);
u = setTimeout(J, x(D));
}
function q(D) {
return u = void 0, M && a ? o(D) : (a = l = void 0, m);
}
function I() {
u !== void 0 && clearTimeout(u), f = 0, a = y = l = u = void 0;
}
function nt() {
return u === void 0 ? m : q(at());
}
function B() {
var D = at(), E = W(D);
if (a = arguments, l = this, y = D, E) {
if (u === void 0)
return g(y);
if (c)
return u = setTimeout(J, e), o(y);
}
return u === void 0 && (u = setTimeout(J, e)), m;
}
return B.cancel = I, B.flush = nt, B;
var Lt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
function Ot(a) {
return a && a.__esModule && Object.prototype.hasOwnProperty.call(a, "default") ? a.default : a;
}
function At(n, e, t) {
var a = !0, l = !0;
if (typeof n != "function")
throw new TypeError(mt);
return rt(t) && (a = "leading" in t ? !!t.leading : a, l = "trailing" in t ? !!t.trailing : l), Yt(n, e, {
leading: a,
maxWait: e,
trailing: l
});
}
function rt(n) {
var e = typeof n;
return !!n && (e == "object" || e == "function");
}
function jt(n) {
return !!n && typeof n == "object";
}
function It(n) {
return typeof n == "symbol" || jt(n) && St.call(n) == pt;
}
function ut(n) {
if (typeof n == "number")
return n;
if (It(n))
return ft;
if (rt(n)) {
var e = typeof n.valueOf == "function" ? n.valueOf() : n;
n = rt(e) ? e + "" : e;
}
if (typeof n != "string")
return n === 0 ? n : +n;
n = n.replace(xt, "");
var t = yt.test(n);
return t || bt.test(n) ? Ct(n.slice(2), t ? 2 : 8) : Mt.test(n) ? ft : +n;
}
var lt = At, dt = { exports: {} };
(function(n, e) {
(function(t, a) {
n.exports = a();
})(et, function() {
var t = 1e3, a = 6e4, l = 36e5, h = "millisecond", m = "second", u = "minute", y = "hour", f = "day", b = "week", c = "month", M = "quarter", o = "year", g = "date", x = "Invalid Date", W = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, J = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, q = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(d) {
var r = ["th", "st", "nd", "rd"], i = d % 100;
return "[" + d + (r[(i - 20) % 10] || r[i] || r[0]) + "]";
} }, I = function(d, r, i) {
var $ = String(d);
return !$ || $.length >= r ? d : "" + Array(r + 1 - $.length).join(i) + d;
}, nt = { s: I, z: function(d) {
var r = -d.utcOffset(), i = Math.abs(r), $ = Math.floor(i / 60), s = i % 60;
return (r <= 0 ? "+" : "-") + I($, 2, "0") + ":" + I(s, 2, "0");
}, m: function d(r, i) {
if (r.date() < i.date())
return -d(i, r);
var $ = 12 * (i.year() - r.year()) + (i.month() - r.month()), s = r.clone().add($, c), p = i - s < 0, v = r.clone().add($ + (p ? -1 : 1), c);
return +(-($ + (i - s) / (p ? s - v : v - s)) || 0);
}, a: function(d) {
return d < 0 ? Math.ceil(d) || 0 : Math.floor(d);
}, p: function(d) {
return { M: c, y: o, w: b, d: f, D: g, h: y, m: u, s: m, ms: h, Q: M }[d] || String(d || "").toLowerCase().replace(/s$/, "");
}, u: function(d) {
return d === void 0;
} }, B = "en", D = {};
D[B] = q;
var E = function(d) {
return d instanceof it;
}, z = function d(r, i, $) {
var Yt = { exports: {} };
(function(a, t) {
(function(i, r) {
a.exports = r();
})(Lt, function() {
var i = 1e3, r = 6e4, l = 36e5, g = "millisecond", $ = "second", p = "minute", v = "hour", w = "day", y = "week", b = "month", F = "quarter", E = "year", W = "date", Q = "Invalid Date", ft = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, K = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, lt = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(o) {
var n = ["th", "st", "nd", "rd"], e = o % 100;
return "[" + o + (n[(e - 20) % 10] || n[e] || n[0]) + "]";
} }, P = function(o, n, e) {
var h = String(o);
return !h || h.length >= n ? o : "" + Array(n + 1 - h.length).join(e) + o;
}, J = { s: P, z: function(o) {
var n = -o.utcOffset(), e = Math.abs(n), h = Math.floor(e / 60), s = e % 60;
return (n <= 0 ? "+" : "-") + P(h, 2, "0") + ":" + P(s, 2, "0");
}, m: function o(n, e) {
if (n.date() < e.date())
return -o(e, n);
var h = 12 * (e.year() - n.year()) + (e.month() - n.month()), s = n.clone().add(h, b), u = e - s < 0, c = n.clone().add(h + (u ? -1 : 1), b);
return +(-(h + (e - s) / (u ? s - c : c - s)) || 0);
}, a: function(o) {
return o < 0 ? Math.ceil(o) || 0 : Math.floor(o);
}, p: function(o) {
return { M: b, y: E, w: y, d: w, D: W, h: v, m: p, s: $, ms: g, Q: F }[o] || String(o || "").toLowerCase().replace(/s$/, "");
}, u: function(o) {
return o === void 0;
} }, k = "en", j = {};
j[k] = lt;
var dt = function(o) {
return o instanceof et;
}, tt = function o(n, e, h) {
var s;
if (!r)
return B;
if (typeof r == "string") {
var p = r.toLowerCase();
D[p] && (s = p), i && (D[p] = i, s = p);
var v = r.split("-");
if (!s && v.length > 1)
return d(v[0]);
if (!n)
return k;
if (typeof n == "string") {
var u = n.toLowerCase();
j[u] && (s = u), e && (j[u] = e, s = u);
var c = n.split("-");
if (!s && c.length > 1)
return o(c[0]);
} else {
var C = r.name;
D[C] = r, s = C;
var m = n.name;
j[m] = n, s = m;
}
return !$ && s && (B = s), s || !$ && B;
}, T = function(d, r) {
if (E(d))
return d.clone();
var i = typeof r == "object" ? r : {};
return i.date = d, i.args = arguments, new it(i);
}, O = nt;
O.l = z, O.i = E, O.w = function(d, r) {
return T(d, { locale: r.$L, utc: r.$u, x: r.$x, $offset: r.$offset });
return !h && s && (k = s), s || !h && k;
}, x = function(o, n) {
if (dt(o))
return o.clone();
var e = typeof n == "object" ? n : {};
return e.date = o, e.args = arguments, new et(e);
}, d = J;
d.l = tt, d.i = dt, d.w = function(o, n) {
return x(o, { locale: n.$L, utc: n.$u, x: n.$x, $offset: n.$offset });
};
var it = function() {
function d(i) {
this.$L = z(i.locale, null, !0), this.parse(i);
var et = function() {
function o(e) {
this.$L = tt(e.locale, null, !0), this.parse(e);
}
var r = d.prototype;
return r.parse = function(i) {
this.$d = function($) {
var s = $.date, p = $.utc;
var n = o.prototype;
return n.parse = function(e) {
this.$d = function(h) {
var s = h.date, u = h.utc;
if (s === null)
return new Date(NaN);
if (O.u(s))
return new Date();
return /* @__PURE__ */ new Date(NaN);
if (d.u(s))
return /* @__PURE__ */ new Date();
if (s instanceof Date)
return new Date(s);
if (typeof s == "string" && !/Z$/i.test(s)) {
var v = s.match(W);
if (v) {
var C = v[2] - 1 || 0, S = (v[7] || "0").substring(0, 3);
return p ? new Date(Date.UTC(v[1], C, v[3] || 1, v[4] || 0, v[5] || 0, v[6] || 0, S)) : new Date(v[1], C, v[3] || 1, v[4] || 0, v[5] || 0, v[6] || 0, S);
var c = s.match(ft);
if (c) {
var m = c[2] - 1 || 0, D = (c[7] || "0").substring(0, 3);
return u ? new Date(Date.UTC(c[1], m, c[3] || 1, c[4] || 0, c[5] || 0, c[6] || 0, D)) : new Date(c[1], m, c[3] || 1, c[4] || 0, c[5] || 0, c[6] || 0, D);
}
}
return new Date(s);
}(i), this.$x = i.x || {}, this.init();
}, r.init = function() {
var i = this.$d;
this.$y = i.getFullYear(), this.$M = i.getMonth(), this.$D = i.getDate(), this.$W = i.getDay(), this.$H = i.getHours(), this.$m = i.getMinutes(), this.$s = i.getSeconds(), this.$ms = i.getMilliseconds();
}, r.$utils = function() {
return O;
}, r.isValid = function() {
return this.$d.toString() !== x;
}, r.isSame = function(i, $) {
var s = T(i);
return this.startOf($) <= s && s <= this.endOf($);
}, r.isAfter = function(i, $) {
return T(i) < this.startOf($);
}, r.isBefore = function(i, $) {
return this.endOf($) < T(i);
}, r.$g = function(i, $, s) {
return O.u(i) ? this[$] : this.set(s, i);
}, r.unix = function() {
}(e), this.$x = e.x || {}, this.init();
}, n.init = function() {
var e = this.$d;
this.$y = e.getFullYear(), this.$M = e.getMonth(), this.$D = e.getDate(), this.$W = e.getDay(), this.$H = e.getHours(), this.$m = e.getMinutes(), this.$s = e.getSeconds(), this.$ms = e.getMilliseconds();
}, n.$utils = function() {
return d;
}, n.isValid = function() {
return this.$d.toString() !== Q;
}, n.isSame = function(e, h) {
var s = x(e);
return this.startOf(h) <= s && s <= this.endOf(h);
}, n.isAfter = function(e, h) {
return x(e) < this.startOf(h);
}, n.isBefore = function(e, h) {
return this.endOf(h) < x(e);
}, n.$g = function(e, h, s) {
return d.u(e) ? this[h] : this.set(s, e);
}, n.unix = function() {
return Math.floor(this.valueOf() / 1e3);
}, r.valueOf = function() {
}, n.valueOf = function() {
return this.$d.getTime();
}, r.startOf = function(i, $) {
var s = this, p = !!O.u($) || $, v = O.p(i), C = function(P, A) {
var X = O.w(s.$u ? Date.UTC(s.$y, A, P) : new Date(s.$y, A, P), s);
return p ? X : X.endOf(f);
}, S = function(P, A) {
return O.w(s.toDate()[P].apply(s.toDate("s"), (p ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(A)), s);
}, w = this.$W, Y = this.$M, V = this.$D, N = "set" + (this.$u ? "UTC" : "");
switch (v) {
case o:
return p ? C(1, 0) : C(31, 11);
case c:
return p ? C(1, Y) : C(0, Y + 1);
}, n.startOf = function(e, h) {
var s = this, u = !!d.u(h) || h, c = d.p(e), m = function(U, C) {
var I = d.w(s.$u ? Date.UTC(s.$y, C, U) : new Date(s.$y, C, U), s);
return u ? I : I.endOf(w);
}, D = function(U, C) {
return d.w(s.toDate()[U].apply(s.toDate("s"), (u ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(C)), s);
}, M = this.$W, S = this.$M, z = this.$D, _ = "set" + (this.$u ? "UTC" : "");
switch (c) {
case E:
return u ? m(1, 0) : m(31, 11);
case b:
var L = this.$locale().weekStart || 0, tt = (w < L ? w + 7 : w) - L;
return C(p ? V - tt : V + (6 - tt), Y);
case f:
case g:
return S(N + "Hours", 0);
return u ? m(1, S) : m(0, S + 1);
case y:
return S(N + "Minutes", 1);
case u:
return S(N + "Seconds", 2);
case m:
return S(N + "Milliseconds", 3);
var R = this.$locale().weekStart || 0, q = (M < R ? M + 7 : M) - R;
return m(u ? z - q : z + (6 - q), S);
case w:
case W:
return D(_ + "Hours", 0);
case v:
return D(_ + "Minutes", 1);
case p:
return D(_ + "Seconds", 2);
case $:
return D(_ + "Milliseconds", 3);
default:
return this.clone();
}
}, r.endOf = function(i) {
return this.startOf(i, !1);
}, r.$set = function(i, $) {
var s, p = O.p(i), v = "set" + (this.$u ? "UTC" : ""), C = (s = {}, s[f] = v + "Date", s[g] = v + "Date", s[c] = v + "Month", s[o] = v + "FullYear", s[y] = v + "Hours", s[u] = v + "Minutes", s[m] = v + "Seconds", s[h] = v + "Milliseconds", s)[p], S = p === f ? this.$D + ($ - this.$W) : $;
if (p === c || p === o) {
var w = this.clone().set(g, 1);
w.$d[C](S), w.init(), this.$d = w.set(g, Math.min(this.$D, w.daysInMonth())).$d;
}, n.endOf = function(e) {
return this.startOf(e, !1);
}, n.$set = function(e, h) {
var s, u = d.p(e), c = "set" + (this.$u ? "UTC" : ""), m = (s = {}, s[w] = c + "Date", s[W] = c + "Date", s[b] = c + "Month", s[E] = c + "FullYear", s[v] = c + "Hours", s[p] = c + "Minutes", s[$] = c + "Seconds", s[g] = c + "Milliseconds", s)[u], D = u === w ? this.$D + (h - this.$W) : h;
if (u === b || u === E) {
var M = this.clone().set(W, 1);
M.$d[m](D), M.init(), this.$d = M.set(W, Math.min(this.$D, M.daysInMonth())).$d;
} else
C && this.$d[C](S);
m && this.$d[m](D);
return this.init(), this;
}, r.set = function(i, $) {
return this.clone().$set(i, $);
}, r.get = function(i) {
return this[O.p(i)]();
}, r.add = function(i, $) {
var s, p = this;
i = Number(i);
var v = O.p($), C = function(Y) {
var V = T(p);
return O.w(V.date(V.date() + Math.round(Y * i)), p);
}, n.set = function(e, h) {
return this.clone().$set(e, h);
}, n.get = function(e) {
return this[d.p(e)]();
}, n.add = function(e, h) {
var s, u = this;
e = Number(e);
var c = d.p(h), m = function(S) {
var z = x(u);
return d.w(z.date(z.date() + Math.round(S * e)), u);
};
if (v === c)
return this.set(c, this.$M + i);
if (v === o)
return this.set(o, this.$y + i);
if (v === f)
return C(1);
if (v === b)
return C(7);
var S = (s = {}, s[u] = a, s[y] = l, s[m] = t, s)[v] || 1, w = this.$d.getTime() + i * S;
return O.w(w, this);
}, r.subtract = function(i, $) {
return this.add(-1 * i, $);
}, r.format = function(i) {
var $ = this, s = this.$locale();
if (c === b)
return this.set(b, this.$M + e);
if (c === E)
return this.set(E, this.$y + e);
if (c === w)
return m(1);
if (c === y)
return m(7);
var D = (s = {}, s[p] = r, s[v] = l, s[$] = i, s)[c] || 1, M = this.$d.getTime() + e * D;
return d.w(M, this);
}, n.subtract = function(e, h) {
return this.add(-1 * e, h);
}, n.format = function(e) {
var h = this, s = this.$locale();
if (!this.isValid())
return s.invalidDate || x;
var p = i || "YYYY-MM-DDTHH:mm:ssZ", v = O.z(this), C = this.$H, S = this.$m, w = this.$M, Y = s.weekdays, V = s.months, N = function(A, X, ot, st) {
return A && (A[X] || A($, p)) || ot[X].slice(0, st);
}, L = function(A) {
return O.s(C % 12 || 12, A, "0");
}, tt = s.meridiem || function(A, X, ot) {
var st = A < 12 ? "AM" : "PM";
return ot ? st.toLowerCase() : st;
}, P = { YY: String(this.$y).slice(-2), YYYY: this.$y, M: w + 1, MM: O.s(w + 1, 2, "0"), MMM: N(s.monthsShort, w, V, 3), MMMM: N(V, w), D: this.$D, DD: O.s(this.$D, 2, "0"), d: String(this.$W), dd: N(s.weekdaysMin, this.$W, Y, 2), ddd: N(s.weekdaysShort, this.$W, Y, 3), dddd: Y[this.$W], H: String(C), HH: O.s(C, 2, "0"), h: L(1), hh: L(2), a: tt(C, S, !0), A: tt(C, S, !1), m: String(S), mm: O.s(S, 2, "0"), s: String(this.$s), ss: O.s(this.$s, 2, "0"), SSS: O.s(this.$ms, 3, "0"), Z: v };
return p.replace(J, function(A, X) {
return X || P[A] || v.replace(":", "");
return s.invalidDate || Q;
var u = e || "YYYY-MM-DDTHH:mm:ssZ", c = d.z(this), m = this.$H, D = this.$m, M = this.$M, S = s.weekdays, z = s.months, _ = function(C, I, mt, st) {
return C && (C[I] || C(h, u)) || mt[I].slice(0, st);
}, R = function(C) {
return d.s(m % 12 || 12, C, "0");
}, q = s.meridiem || function(C, I, mt) {
var st = C < 12 ? "AM" : "PM";
return mt ? st.toLowerCase() : st;
}, U = { YY: String(this.$y).slice(-2), YYYY: d.s(this.$y, 4, "0"), M: M + 1, MM: d.s(M + 1, 2, "0"), MMM: _(s.monthsShort, M, z, 3), MMMM: _(z, M), D: this.$D, DD: d.s(this.$D, 2, "0"), d: String(this.$W), dd: _(s.weekdaysMin, this.$W, S, 2), ddd: _(s.weekdaysShort, this.$W, S, 3), dddd: S[this.$W], H: String(m), HH: d.s(m, 2, "0"), h: R(1), hh: R(2), a: q(m, D, !0), A: q(m, D, !1), m: String(D), mm: d.s(D, 2, "0"), s: String(this.$s), ss: d.s(this.$s, 2, "0"), SSS: d.s(this.$ms, 3, "0"), Z: c };
return u.replace(K, function(C, I) {
return I || U[C] || c.replace(":", "");
});
}, r.utcOffset = function() {
}, n.utcOffset = function() {
return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
}, r.diff = function(i, $, s) {
var p, v = O.p($), C = T(i), S = (C.utcOffset() - this.utcOffset()) * a, w = this - C, Y = O.m(this, C);
return Y = (p = {}, p[o] = Y / 12, p[c] = Y, p[M] = Y / 3, p[b] = (w - S) / 6048e5, p[f] = (w - S) / 864e5, p[y] = w / l, p[u] = w / a, p[m] = w / t, p)[v] || w, s ? Y : O.a(Y);
}, r.daysInMonth = function() {
return this.endOf(c).$D;
}, r.$locale = function() {
return D[this.$L];
}, r.locale = function(i, $) {
if (!i)
}, n.diff = function(e, h, s) {
var u, c = d.p(h), m = x(e), D = (m.utcOffset() - this.utcOffset()) * r, M = this - m, S = d.m(this, m);
return S = (u = {}, u[E] = S / 12, u[b] = S, u[F] = S / 3, u[y] = (M - D) / 6048e5, u[w] = (M - D) / 864e5, u[v] = M / l, u[p] = M / r, u[$] = M / i, u)[c] || M, s ? S : d.a(S);
}, n.daysInMonth = function() {
return this.endOf(b).$D;
}, n.$locale = function() {
return j[this.$L];
}, n.locale = function(e, h) {
if (!e)
return this.$L;
var s = this.clone(), p = z(i, $, !0);
return p && (s.$L = p), s;
}, r.clone = function() {
return O.w(this.$d, this);
}, r.toDate = function() {
var s = this.clone(), u = tt(e, h, !0);
return u && (s.$L = u), s;
}, n.clone = function() {
return d.w(this.$d, this);
}, n.toDate = function() {
return new Date(this.valueOf());
}, r.toJSON = function() {
}, n.toJSON = function() {
return this.isValid() ? this.toISOString() : null;
}, r.toISOString = function() {
}, n.toISOString = function() {
return this.$d.toISOString();
}, r.toString = function() {
}, n.toString = function() {
return this.$d.toUTCString();
}, d;
}(), ht = it.prototype;
return T.prototype = ht, [["$ms", h], ["$s", m], ["$m", u], ["$H", y], ["$W", f], ["$M", c], ["$y", o], ["$D", g]].forEach(function(d) {
ht[d[1]] = function(r) {
return this.$g(r, d[0], d[1]);
}, o;
}(), pt = et.prototype;
return x.prototype = pt, [["$ms", g], ["$s", $], ["$m", p], ["$H", v], ["$W", w], ["$M", b], ["$y", E], ["$D", W]].forEach(function(o) {
pt[o[1]] = function(n) {
return this.$g(n, o[0], o[1]);
};
}), T.extend = function(d, r) {
return d.$i || (d(r, it, T), d.$i = !0), T;
}, T.locale = z, T.isDayjs = E, T.unix = function(d) {
return T(1e3 * d);
}, T.en = D[B], T.Ls = D, T.p = {}, T;
}), x.extend = function(o, n) {
return o.$i || (o(n, et, x), o.$i = !0), x;
}, x.locale = tt, x.isDayjs = dt, x.unix = function(o) {
return x(1e3 * o);
}, x.en = j[k], x.Ls = j, x.p = {}, x;
});
})(dt);
const U = dt.exports, _ = (n, e = "MM/DD HH:mm") => U(n * 1e3).format(e), Wt = (n = Math.floor(Date.now() / 1e3)) => {
const e = n * 1e3, t = U(e).year(), a = U(e).month(), l = U(e).date(), h = U(e).day(), m = new Date(t, a, l - h).getTime();
return Math.floor(m / 1e3);
};
function Et({
pointWidth: n,
timePerPixel: e,
timeSpacing: t,
screenScaleCount: a,
scaleSpacing: l,
scaleHeight: h,
startTime: m,
drawLine: u,
drawText: y
}) {
if (t === 1) {
for (let f = 0; f < a; f++) {
const b = f * l + n / 2, c = Math.ceil(m + f * t);
if (c % 10 === 0) {
u(b, h.height5), y(b, h.height5 + 13, `${_(c, "HH:mm:ss")}`);
})(Yt);
var Et = Yt.exports;
const _t = /* @__PURE__ */ Ot(Et), $t = (a, t = "MM/DD HH:mm") => _t(a).format(t), Mt = (a, t) => {
let i, r = 0;
return (...l) => {
const g = Date.now(), $ = g - r;
!r || $ >= t ? (r = g, a.apply(void 0, l)) : i || (i = setTimeout(() => {
r = g, a.apply(void 0, l), i = null;
}, t - $));
};
}, At = (a, t) => {
const i = document.createElement("canvas");
i.width = i.height = 1;
const r = i.getContext("2d");
r.fillStyle = a, r.fillRect(0, 0, 1, 1);
const l = r.getImageData(0, 0, 1, 1).data;
return `rgba(${l[0]}, ${l[1]}, ${l[2]}, ${t})`;
}, Wt = ({ xCenterPoint: a, cfg: t, timePerPixel: i, timeSpacing: r, currentTime: l, $canvas: g, screenScaleCount: $, scaleHeight: p, startTime: v, drawLine: w, drawText: y, drawArea: b }) => {
const F = ({ space: E, scaleFormat: W, bgFormat: Q, currentFormat: ft }) => {
y({
x: g.width - a / 10,
y: 6,
text: $t(l, Q),
fontSize: `${g.height - 5}px`,
align: "right",
baseLine: "top",
color: t.bgTextColor
});
const K = v % r, lt = K / i;
for (let P = 0; P < $; P++) {
const J = P * t.scaleSpacing - lt - t.pointWidth / 2, k = v + P * r - K;
if (k % (r * E) === 0) {
w({ x: J, y: p.long }), y({
x: J,
y: g.height - p.long - 5,
text: $t(k, W),
baseLine: "bottom"
});
continue;
}
if (c % 5 === 0) {
u(b, h.height3);
continue;
}
if (c % 1 === 0) {
u(b, h.height1);
continue;
}
w({ x: J, y: p.short });
}
return;
}
if (t === 10) {
const f = +_(m, "s") % 10, b = f / e;
for (let c = 0; c < a; c++) {
const M = c * l - b - n / 2, o = Math.ceil(m + c * t - f);
if (o % 60 === 0) {
u(M, h.height4), y(M, h.height5 + 13, `${_(o, "HH:mm")}`);
continue;
}
if (o % 10 === 0) {
u(M, h.height1);
continue;
}
}
return;
}
if (t === 30) {
const f = +_(m, "s") % 30, b = f / e;
for (let c = 0; c < a; c++) {
const M = c * l - b - n / 2, o = Math.ceil(m + c * t - f);
if (o % (60 * 5) === 0) {
u(M, h.height4), y(M, h.height5 + 13, `${_(o, "HH:mm")}`);
continue;
}
if (o % 30 === 0) {
u(M, h.height1);
continue;
}
}
return;
}
if (t === 60) {
const f = +_(m, "s") % 60, b = f / e;
for (let c = 0; c < a; c++) {
const M = c * l - b - n / 2, o = Math.ceil(m + c * t - f);
if (o % (60 * 60) === 0) {
u(M, h.height5), y(M, h.height5 + 13, `${_(o)}`);
continue;
}
if (o % (60 * 5) === 0) {
u(M, h.height3), o % (60 * 10) === 0 && y(M, h.height5 + 13, `${_(o, "HH:mm")}`);
continue;
}
if (o % 60 === 0) {
u(M, h.height1);
continue;
}
}
return;
}
if (t === 120) {
const f = _(m, "m:s").split(":"), c = (+f[0] * 60 + +f[1]) % 120, M = c / e;
for (let o = 0; o < a; o++) {
const g = o * l - M - n / 2, x = Math.ceil(m + o * t - c);
if (x % (60 * 30) === 0) {
u(g, h.height5), y(g, h.height5 + 13, `${_(x)}`);
continue;
}
if (x % (60 * 10) === 0) {
u(g, h.height3);
continue;
}
if (x % (60 * 2) === 0) {
u(g, h.height1);
continue;
}
}
return;
}
if (t === 300) {
const f = _(m, "m:s").split(":"), c = (+f[0] * 60 + +f[1]) % 300, M = c / e;
for (let o = 0; o < a; o++) {
const g = o * l - M - n / 2, x = Math.ceil(m + o * t - c);
if (x % (60 * 60) === 0) {
u(g, h.height5), y(g, h.height5 + 13, `${_(x)}`);
continue;
}
if (x % (60 * 30) === 0) {
u(g, h.height3);
continue;
}
if (x % (60 * 5) === 0) {
u(g, h.height1);
continue;
}
}
return;
}
if (t === 7200) {
const f = _(m, "H:m:s").split(":"), c = (+f[0] * 3600 + +f[1] * 60 + +f[2]) % 7200, M = c / e;
for (let o = 0; o < a; o++) {
const g = o * l - M - n / 2, x = Math.ceil(m + o * t - c);
if (x % (3600 * 24) === 0) {
u(g, h.height5), y(g, h.height5 + 13, `${_(x, "MM/DD HH:mm")}`);
continue;
}
if (x % (3600 * 12) === 0) {
u(g, h.height3);
continue;
}
if (x % 7200 === 0) {
u(g, h.height1);
continue;
}
}
return;
}
if (t === 86400) {
const f = _(m, "H:m:s").split(":"), c = (+f[0] * 3600 + +f[1] * 60 + +f[2]) % 86400, M = c / e;
for (let o = 0; o < a; o++) {
const g = o * l - M - n / 2, x = Math.ceil(m + o * t - c);
if (_(x, "D") === "1") {
u(g, h.height5), y(g, h.height5 + 13, `${_(x, "YYYY/MM/DD")}`);
continue;
}
if (x % 86400 === 57600) {
u(g, h.height1);
continue;
}
}
return;
}
if (t === 604800) {
const f = m - Wt(m), b = f / e, c = new Array(a).fill(!1), M = (o) => {
for (let g = o; g > o - 7; g--)
if (c[g])
return !1;
return !0;
};
for (let o = 0; o < a; o++) {
const g = o * l - b, x = Math.ceil(m + o * t - f);
if (U(x * 1e3).month() === 0 && (U(x * 1e3).date() > 0 || U(x * 1e3).date() <= 31) && M(o)) {
c[o] = !0, u(g, h.height5), y(g, h.height5 + 13, `${_(x, "YYYY/MM/DD")}`);
continue;
}
if (U(x * 1e3).day() === 0) {
u(g, h.height1);
continue;
}
}
return;
}
}
const Zt = {
fill: !1,
w({
x: a - t.pointWidth / 2,
y: g.height,
width: t.pointWidth,
color: t.pointColor
}), b({
startX: a - 50,
startY: 4,
endX: a + 50,
endY: 18,
bgColor: t.pointColor
}), y({
x: a,
y: 6,
text: $t(l, ft),
align: "center",
baseLine: "top"
});
};
r < 100 ? F({ space: 10, scaleFormat: "mm:ss:SSS", bgFormat: "YYYY/MM/DD", currentFormat: "HH:mm:ss:SSS" }) : r < 1e3 ? F({ space: 10, scaleFormat: "mm:ss", bgFormat: "YYYY/MM/DD", currentFormat: "HH:mm:ss:SSS" }) : r < 1e4 ? F({ space: 10, scaleFormat: "mm:ss", bgFormat: "YYYY/MM/DD", currentFormat: "HH:mm:ss" }) : r < 6e4 ? F({ space: 12, scaleFormat: "HH:mm:ss", bgFormat: "YYYY/MM/DD", currentFormat: "HH:mm:ss" }) : r < 6e5 ? F({ space: 10, scaleFormat: "HH:mm:ss", bgFormat: "YYYY/MM/DD", currentFormat: "HH:mm:ss" }) : r < 36e5 ? F({ space: 12, scaleFormat: "MM/DD HH:mm", bgFormat: "YYYY/MM", currentFormat: "MM/DD HH:mm:ss" }) : r < 864e5 ? F({ space: 12, scaleFormat: "MM/DD HH:mm", bgFormat: "YYYY/MM", currentFormat: "YYYY/MM/DD HH:mm" }) : r < 6048e5 ? F({ space: 10, scaleFormat: "YYYY/MM/DD", bgFormat: "YYYY", currentFormat: "YYYY/MM/DD" }) : F({ space: 10, scaleFormat: "YYYY/MM/DD", bgFormat: "YYYY", currentFormat: "YYYY/MM/DD" });
}, Pt = {
fill: !0,
width: 1e3,
height: 60,
bgColor: "rgba(0,0,0,0.5)",
areaBgColor: "#ffffff55",
textColor: "#ffffff",
scaleColor: "#ffffff",
areaBgColor: "#ffffff55",
pointColor: "#00aeec",

@@ -506,178 +314,170 @@ pointWidth: 3,

fps: 60,
zoom: 2,
maxZoom: 9,
minZoom: 1,
timeFormat: "YYYY/MM/DD HH:mm:ss"
zoom: 3,
timeSpacingList: [10, 100, 1e3, 1e4, 6e4, 6e5, 36e5, 864e5, 6048e5]
};
var G, R, Z, K, H;
var Z, L, A, Y, X, N, nt, Dt, rt, wt, at, yt, ot, xt, ht, bt, ct, St, G, vt, B, it, ut, Tt;
class zt {
constructor(e, t) {
j(this, "$canvas");
j(this, "canvasContext");
Q(this, G, void 0);
j(this, "currentTime");
j(this, "areas");
Q(this, R, void 0);
Q(this, Z, void 0);
j(this, "scaleSpacing");
j(this, "bgColor");
Q(this, K, void 0);
j(this, "pointWidth");
j(this, "pointColor");
j(this, "textColor");
j(this, "scaleColor");
j(this, "areaBgColor");
Q(this, H, void 0);
j(this, "fps");
j(this, "timeFormat");
if (!e)
throw new Error("canvas id is required!");
this.$canvas = document.getElementById(e), this.canvasContext = this.$canvas.getContext("2d");
const { fill: a, width: l, height: h, bgColor: m, textColor: u, scaleColor: y, areaBgColor: f, pointColor: b, pointWidth: c, scaleSpacing: M, fps: o, zoom: g, maxZoom: x, minZoom: W, timeFormat: J } = { ...Zt, ...t };
if (g < W || g > x || g % 1 !== 0)
throw new Error(`zoom must be minZoom ~ maxZoom(${W} ~1 ${x}), and must be an integer`);
if (x < 1 || x > 9 || x % 1 !== 0)
throw new Error("maxZoom must be 1 ~ 9, and must be an integer");
if (W < 1 || W > 9 || W % 1 !== 0)
throw new Error("minZoom must be 1 ~ 9, and must be an integer");
if (x < W)
throw new Error("maxZoom must be greater than minZoom");
if (a) {
const I = this.$canvas.parentElement;
this.$canvas.width = I.clientWidth, this.$canvas.height = I.clientHeight, new ResizeObserver(lt(this._onParentResize.bind(this), 200)).observe(I);
constructor(t, i) {
// 拖拽
T(this, nt);
// 缩放
T(this, rt);
// 父元素size变化
T(this, at);
// 清空画布
T(this, ot);
// 绘制比例尺
T(this, ht);
// 绘制线条
T(this, ct);
// 绘制文字
T(this, G);
// 绘制区域
T(this, B);
T(this, ut);
V(this, "$canvas");
V(this, "ctx");
V(this, "$canvasParent");
V(this, "cfg");
T(this, Z, Ht());
T(this, L, 0);
T(this, A, void 0);
T(this, Y, void 0);
// 刻度高度
T(this, X, void 0);
// 是否在拖拽中
T(this, N, !1);
if (!t)
throw new Error("canvas Element Or Element ID is required!");
if (typeof t == "string" ? this.$canvas = document.querySelector(t) : this.$canvas = t, !(this.$canvas instanceof HTMLCanvasElement))
throw new Error("element must be canvas!");
this.ctx = this.$canvas.getContext("2d"), this.cfg = { ...Pt, ...i };
const { fill: r, width: l, height: g, zoom: $, timeSpacingList: p, scaleHeight: v, textColor: w } = this.cfg;
if (this.cfg.bgTextColor = At(w, 0.18), $ < 0 || $ >= p.length || $ % 1 !== 0)
throw new Error(`zoom must be 0 ~ ${p.length - 1}, and must be an integer`);
if (r) {
const y = this.$canvas.parentElement;
this.$canvasParent = y, this.$canvas.width = y.clientWidth, this.$canvas.height = y.clientHeight, new ResizeObserver(Mt(H(this, at, yt).bind(this), 200)).observe(y);
} else
l && (this.$canvas.width = l), h && (this.$canvas.height = h);
F(this, H, !1), F(this, G, gt()), this.currentTime = 0;
const q = [1, 10, 30, 60, 120, 300, 7200, 86400, 604800];
F(this, R, []);
for (let I = W - 1; I < x; I++)
k(this, R).push(q[I]);
F(this, Z, q[g - 1]), this.scaleSpacing = M, F(this, K, {
height6: this.$canvas.height / 2,
height5: this.$canvas.height / 3,
height4: this.$canvas.height / 4,
height3: this.$canvas.height / 5,
height2: this.$canvas.height / 8,
height1: this.$canvas.height / 10
}), this.bgColor = m, this.pointWidth = c, this.pointColor = b, this.textColor = u, this.scaleColor = y, this.areaBgColor = f, this.fps = o, this.timeFormat = J;
l && (this.$canvas.width = l), g && (this.$canvas.height = g);
O(this, Y, p[$]), v != null && v.long && (v != null && v.short) ? O(this, X, v) : O(this, X, {
long: this.$canvas.height / 3,
// 1/3高度
medium: this.$canvas.height / 6,
// 1/6高度
short: this.$canvas.height / 10
// 1/10高度
}), this.draw(), this.$canvas.addEventListener("wheel", H(this, rt, wt).bind(this), { passive: !1 }), this.$canvas.addEventListener("mousedown", H(this, nt, Dt).bind(this));
}
draw({ currentTime: e, areas: t, _privateFlag: a } = {}) {
if (k(this, H) && !a)
// 绘制时间轴
draw({ currentTime: t, areas: i, _privateFlag: r } = {}) {
if (f(this, N) && !r)
return;
this.currentTime = e || Math.floor(Date.now() / 1e3), this.areas = t || [];
const l = Math.ceil(this.$canvas.width / this.scaleSpacing), h = l * k(this, Z), m = this.currentTime - h / 2, u = this.currentTime + h / 2, y = this.$canvas.width / 2, f = h / this.$canvas.width;
this.clear(), this.drawArea(0, 0, this.$canvas.width, this.$canvas.height, this.bgColor), this.areas.forEach((b) => {
const c = b.startTime < m ? 0 : Math.floor((b.startTime - m) / f), M = b.endTime > u ? this.$canvas.width : Math.floor((b.endTime - m) / f);
this.drawArea(c, 0, M, this.$canvas.height, b.bgColor || this.areaBgColor);
}), Et.bind(this)({
pointWidth: this.pointWidth,
timePerPixel: f,
scaleHeight: k(this, K),
scaleSpacing: this.scaleSpacing,
timeSpacing: k(this, Z),
O(this, L, t || Date.now()), O(this, A, i || []);
const l = Math.ceil(this.$canvas.width / this.cfg.scaleSpacing), g = l * f(this, Y), $ = f(this, L) - g / 2, p = f(this, L) + g / 2, v = this.$canvas.width / 2, w = g / this.$canvas.width;
H(this, ot, xt).call(this), H(this, B, it).call(this, {
startX: 0,
startY: 0,
endX: this.$canvas.width,
endY: this.$canvas.height,
bgColor: this.cfg.bgColor
}), f(this, A).forEach((y) => {
const b = y.startTime < $ ? 0 : Math.floor((y.startTime - $) / w), F = y.endTime > p ? this.$canvas.width : Math.floor((y.endTime - $) / w);
H(this, B, it).call(this, {
startX: b,
startY: 0,
endX: F,
endY: this.$canvas.height,
bgColor: y.bgColor || this.cfg.areaBgColor
});
}), Wt.bind(this)({
xCenterPoint: v,
screenScaleCount: l,
startTime: m,
drawLine: this.drawLine.bind(this),
drawText: this.drawText.bind(this)
}), this.drawTimelineScale(k(this, Z)), this.drawLine(y - this.pointWidth / 2, this.$canvas.height, this.pointWidth, this.pointColor), this.drawArea(y - 54, 4, y + 54, 18, this.pointColor), this.drawText(y, 6, `${_(this.currentTime, this.timeFormat)}`, this.textColor, "center", "top"), this.$canvas.onwheel = this._onZoom.bind(this), this.$canvas.onmousedown = this._onDrag.bind(this);
startTime: $,
timePerPixel: w,
scaleHeight: f(this, X),
timeSpacing: f(this, Y),
currentTime: f(this, L),
$canvas: this.$canvas,
cfg: this.cfg,
drawLine: H(this, ct, St).bind(this),
drawText: H(this, G, vt).bind(this),
drawArea: H(this, B, it).bind(this)
}), H(this, ht, bt).call(this);
}
_onDrag({ clientX: e }) {
F(this, H, !0);
let t = 0;
document.onmousemove = lt((a) => {
const l = a.clientX - e, h = this.currentTime - k(this, Z) / this.scaleSpacing * (l - t);
t = l, this.draw({
currentTime: Math.round(h),
areas: this.areas,
_privateFlag: !0
});
}, k(this, Z) === 1 ? 100 : 1e3 / this.fps), document.onmouseup = () => {
document.onmousemove = null, document.onmouseup = null, F(this, H, !1), this.emit("timeUpdate", this.currentTime);
};
// 获取当前时间
getCurrentTime() {
return f(this, L);
}
_onZoom(e) {
e.preventDefault();
const t = k(this, R).findIndex((a) => a === k(this, Z));
e.deltaY < 0 && t > 0 ? (F(this, Z, k(this, R)[t - 1]), this.draw({
currentTime: this.currentTime,
areas: this.areas,
_privateFlag: !0
})) : e.deltaY > 0 && t < k(this, R).length - 1 && (F(this, Z, k(this, R)[t + 1]), this.draw({
currentTime: this.currentTime,
areas: this.areas,
_privateFlag: !0
}));
on(t, i) {
f(this, Z).on(t, i);
}
_onParentResize() {
const e = this.$canvas.parentNode;
!e || (this.$canvas.width = e.clientWidth, this.$canvas.height = e.clientHeight, F(this, K, {
height6: this.$canvas.height / 2,
height5: this.$canvas.height / 3,
height4: this.$canvas.height / 4,
height3: this.$canvas.height / 5,
height2: this.$canvas.height / 8,
height1: this.$canvas.height / 10
}), this.draw({
currentTime: this.currentTime,
areas: this.areas
}));
off(t, i) {
f(this, Z).off(t, i);
}
clear() {
this.canvasContext && this.canvasContext.clearRect(0, 0, this.$canvas.width, this.$canvas.height), this.$canvas && (this.$canvas.onwheel = null, this.$canvas.onmousedown = null);
}
drawTimelineScale(e) {
let t = "";
switch (e) {
case 1:
t = "1s";
break;
case 10:
t = "10s";
break;
case 30:
t = "30s";
break;
case 60:
t = "1min";
break;
case 120:
t = "2min";
break;
case 300:
t = "5min";
break;
case 7200:
t = "2hour";
break;
case 86400:
t = "1day";
break;
case 604800:
t = "1week";
break;
}
this.drawText(this.scaleSpacing + 12, 9, `${t}`, this.textColor, "left", "middle"), this.canvasContext.beginPath(), this.canvasContext.moveTo(5, 6), this.canvasContext.lineTo(5, 10), this.canvasContext.lineTo(this.scaleSpacing + 7, 10), this.canvasContext.lineTo(this.scaleSpacing + 7, 6), this.canvasContext.strokeStyle = this.scaleColor, this.canvasContext.lineWidth = 1.5, this.canvasContext.stroke();
}
drawLine(e, t, a = 1, l = this.scaleColor) {
this.canvasContext.beginPath(), this.canvasContext.moveTo(e, this.$canvas.height), this.canvasContext.lineTo(e, this.$canvas.height - t), this.canvasContext.closePath(), this.canvasContext.strokeStyle = l, this.canvasContext.lineWidth = a, this.canvasContext.stroke();
}
drawText(e, t, a, l = this.textColor, h = "center", m = "alphabetic") {
this.canvasContext.beginPath(), this.canvasContext.font = "11px Arial", this.canvasContext.fillStyle = l, this.canvasContext.textAlign = h, this.canvasContext.textBaseline = m, this.canvasContext.fillText(a, e, t);
}
drawArea(e, t, a, l, h) {
this.canvasContext.beginPath(), this.canvasContext.rect(e, t, a - e, l - t), this.canvasContext.fillStyle = h, this.canvasContext.fill();
}
on(e, t) {
k(this, G).on(e, t);
}
off(e, t) {
k(this, G).off(e, t);
}
emit(...e) {
k(this, G).emit(...e);
}
}
G = new WeakMap(), R = new WeakMap(), Z = new WeakMap(), K = new WeakMap(), H = new WeakMap();
Z = new WeakMap(), L = new WeakMap(), A = new WeakMap(), Y = new WeakMap(), X = new WeakMap(), N = new WeakMap(), nt = new WeakSet(), Dt = function(t) {
O(this, N, !0);
let i = 0, r = f(this, L);
const l = Mt(({ offsetX: p }) => {
if (!f(this, N))
return;
const v = p - t.offsetX;
r = Math.round(f(this, L) - f(this, Y) / this.cfg.scaleSpacing * (v - i)), i = v, this.draw({
currentTime: r,
areas: f(this, A),
_privateFlag: !0
});
}, 1e3 / this.cfg.fps), g = ({ offsetX: p, offsetY: v }) => {
(p < 3 || p > this.$canvas.width - 3 || v < 3 || v > this.$canvas.height - 3) && (this.$canvas.removeEventListener("mousemove", l), this.$canvas.removeEventListener("mousemove", g));
}, $ = () => {
this.$canvas.removeEventListener("mousemove", l), this.$canvas.removeEventListener("mousemove", g), document.removeEventListener("mouseup", $), O(this, N, !1), H(this, ut, Tt).call(this, "dragged", r);
};
this.$canvas.addEventListener("mousemove", l), this.$canvas.addEventListener("mousemove", g), document.addEventListener("mouseup", $);
}, rt = new WeakSet(), wt = function(t) {
t.preventDefault();
const i = this.cfg.timeSpacingList.findIndex((r) => r === f(this, Y));
t.deltaY < 0 && i > 0 ? (O(this, Y, this.cfg.timeSpacingList[i - 1]), this.draw({
currentTime: f(this, L),
areas: f(this, A),
_privateFlag: !0
})) : t.deltaY > 0 && i < this.cfg.timeSpacingList.length - 1 && (O(this, Y, this.cfg.timeSpacingList[i + 1]), this.draw({
currentTime: f(this, L),
areas: f(this, A),
_privateFlag: !0
}));
}, at = new WeakSet(), yt = function() {
this.$canvasParent && (this.$canvas.width = this.$canvasParent.clientWidth, this.$canvas.height = this.$canvasParent.clientHeight, this.cfg.scaleHeight || O(this, X, {
long: this.$canvas.height / 3,
// 1/3高度
medium: this.$canvas.height / 6,
// 1/6高度
short: this.$canvas.height / 10
// 1/10高度
}), this.draw({
currentTime: f(this, L),
areas: f(this, A)
}));
}, ot = new WeakSet(), xt = function() {
this.ctx.clearRect(0, 0, this.$canvas.width, this.$canvas.height);
}, ht = new WeakSet(), bt = function() {
const t = () => f(this, Y) < 1e3 ? `${f(this, Y)}ms` : f(this, Y) < 6e4 ? `${Math.round(f(this, Y) / 100) / 10}sec` : f(this, Y) < 36e5 ? `${Math.round(f(this, Y) / 100 / 60) / 10}min` : f(this, Y) < 864e5 ? `${Math.round(f(this, Y) / 100 / 60 / 60) / 10}hours` : f(this, Y) < 6048e5 ? `${Math.round(f(this, Y) / 100 / 60 / 60 / 24) / 10}days` : `${Math.round(f(this, Y) / 100 / 60 / 60 / 24 / 7) / 10}weeks`;
H(this, G, vt).call(this, {
x: this.cfg.scaleSpacing + 12,
y: 9,
text: t(),
align: "left",
baseLine: "middle"
}), this.ctx.beginPath(), this.ctx.moveTo(5, 6), this.ctx.lineTo(5, 10), this.ctx.lineTo(this.cfg.scaleSpacing + 6, 10), this.ctx.lineTo(this.cfg.scaleSpacing + 6, 6), this.ctx.strokeStyle = this.cfg.scaleColor, this.ctx.lineWidth = 1.5, this.ctx.stroke();
}, ct = new WeakSet(), St = function({ x: t, y: i, width: r = 1, color: l = this.cfg.scaleColor }) {
this.ctx.beginPath(), this.ctx.moveTo(t, this.$canvas.height), this.ctx.lineTo(t, this.$canvas.height - i), this.ctx.closePath(), this.ctx.strokeStyle = l, this.ctx.lineWidth = r, this.ctx.stroke();
}, G = new WeakSet(), vt = function({ x: t, y: i, text: r, color: l = this.cfg.textColor, fontSize: g = "11px", align: $ = "center", baseLine: p = "alphabetic" }) {
this.ctx.beginPath(), this.ctx.font = `${g} Arial`, this.ctx.fillStyle = l, this.ctx.textAlign = $, this.ctx.textBaseline = p, this.ctx.fillText(r, t, i);
}, B = new WeakSet(), it = function({ startX: t, startY: i, endX: r, endY: l, bgColor: g }) {
this.ctx.beginPath(), this.ctx.rect(t, i, r - t, l - i), this.ctx.fillStyle = g, this.ctx.fill();
}, ut = new WeakSet(), Tt = function(...t) {
f(this, Z).emit(...t);
};
export {
zt as default
};

2

dist/timeline.iife.js

@@ -1,1 +0,1 @@

var Zt=Object.defineProperty;var Ft=(S,w,Y)=>w in S?Zt(S,w,{enumerable:!0,configurable:!0,writable:!0,value:Y}):S[w]=Y;var E=(S,w,Y)=>(Ft(S,typeof w!="symbol"?w+"":w,Y),Y),$t=(S,w,Y)=>{if(!w.has(S))throw TypeError("Cannot "+Y)};var j=(S,w,Y)=>($t(S,w,"read from private field"),Y?Y.call(S):w.get(S)),et=(S,w,Y)=>{if(w.has(S))throw TypeError("Cannot add the same private member more than once");w instanceof WeakSet?w.add(S):w.set(S,Y)},N=(S,w,Y,nt)=>($t(S,w,"write to private field"),nt?nt.call(S,Y):w.set(S,Y),Y);var $timeline=function(){var P,J,F,L,Q;"use strict";function S(r){return{all:r=r||new Map,on:function(e,t){var c=r.get(e);c?c.push(t):r.set(e,[t])},off:function(e,t){var c=r.get(e);c&&(t?c.splice(c.indexOf(t)>>>0,1):r.set(e,[]))},emit:function(e,t){var c=r.get(e);c&&c.slice().map(function(l){l(t)}),(c=r.get("*"))&&c.slice().map(function(l){l(e,t)})}}}var w=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},Y="Expected a function",nt=0/0,vt="[object Symbol]",gt=/^\s+|\s+$/g,pt=/^[-+]0x[0-9a-f]+$/i,xt=/^0b[01]+$/i,Mt=/^0o[0-7]+$/i,yt=parseInt,bt=typeof w=="object"&&w&&w.Object===Object&&w,Ct=typeof self=="object"&&self&&self.Object===Object&&self,Dt=bt||Ct||Function("return this")(),Ot=Object.prototype,wt=Ot.toString,Tt=Math.max,St=Math.min,ct=function(){return Dt.Date.now()};function _t(r,e,t){var c,l,a,m,u,y,f=0,b=!1,h=!1,M=!0;if(typeof r!="function")throw new TypeError(Y);e=ut(e)||0,rt(t)&&(b=!!t.leading,h="maxWait"in t,a=h?Tt(ut(t.maxWait)||0,e):a,M="trailing"in t?!!t.trailing:M);function o(D){var B=c,R=l;return c=l=void 0,f=D,m=r.apply(R,B),m}function g(D){return f=D,u=setTimeout(q,e),b?o(D):m}function x(D){var B=D-y,R=D-f,_=e-B;return h?St(_,a-R):_}function z(D){var B=D-y,R=D-f;return y===void 0||B>=e||B<0||h&&R>=a}function q(){var D=ct();if(z(D))return K(D);u=setTimeout(q,x(D))}function K(D){return u=void 0,M&&c?o(D):(c=l=void 0,m)}function Z(){u!==void 0&&clearTimeout(u),f=0,c=y=l=u=void 0}function ot(){return u===void 0?m:K(ct())}function V(){var D=ct(),B=z(D);if(c=arguments,l=this,y=D,B){if(u===void 0)return g(y);if(h)return u=setTimeout(q,e),o(y)}return u===void 0&&(u=setTimeout(q,e)),m}return V.cancel=Z,V.flush=ot,V}function kt(r,e,t){var c=!0,l=!0;if(typeof r!="function")throw new TypeError(Y);return rt(t)&&(c="leading"in t?!!t.leading:c,l="trailing"in t?!!t.trailing:l),_t(r,e,{leading:c,maxWait:e,trailing:l})}function rt(r){var e=typeof r;return!!r&&(e=="object"||e=="function")}function Yt(r){return!!r&&typeof r=="object"}function At(r){return typeof r=="symbol"||Yt(r)&&wt.call(r)==vt}function ut(r){if(typeof r=="number")return r;if(At(r))return nt;if(rt(r)){var e=typeof r.valueOf=="function"?r.valueOf():r;r=rt(e)?e+"":e}if(typeof r!="string")return r===0?r:+r;r=r.replace(gt,"");var t=xt.test(r);return t||Mt.test(r)?yt(r.slice(2),t?2:8):pt.test(r)?nt:+r}var lt=kt,mt={exports:{}};(function(r,e){(function(t,c){r.exports=c()})(w,function(){var t=1e3,c=6e4,l=36e5,a="millisecond",m="second",u="minute",y="hour",f="day",b="week",h="month",M="quarter",o="year",g="date",x="Invalid Date",z=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,q=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,K={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(d){var s=["th","st","nd","rd"],n=d%100;return"["+d+(s[(n-20)%10]||s[n]||s[0])+"]"}},Z=function(d,s,n){var $=String(d);return!$||$.length>=s?d:""+Array(s+1-$.length).join(n)+d},ot={s:Z,z:function(d){var s=-d.utcOffset(),n=Math.abs(s),$=Math.floor(n/60),i=n%60;return(s<=0?"+":"-")+Z($,2,"0")+":"+Z(i,2,"0")},m:function d(s,n){if(s.date()<n.date())return-d(n,s);var $=12*(n.year()-s.year())+(n.month()-s.month()),i=s.clone().add($,h),p=n-i<0,v=s.clone().add($+(p?-1:1),h);return+(-($+(n-i)/(p?i-v:v-i))||0)},a:function(d){return d<0?Math.ceil(d)||0:Math.floor(d)},p:function(d){return{M:h,y:o,w:b,d:f,D:g,h:y,m:u,s:m,ms:a,Q:M}[d]||String(d||"").toLowerCase().replace(/s$/,"")},u:function(d){return d===void 0}},V="en",D={};D[V]=K;var B=function(d){return d instanceof at},R=function d(s,n,$){var i;if(!s)return V;if(typeof s=="string"){var p=s.toLowerCase();D[p]&&(i=p),n&&(D[p]=n,i=p);var v=s.split("-");if(!i&&v.length>1)return d(v[0])}else{var C=s.name;D[C]=s,i=C}return!$&&i&&(V=i),i||!$&&V},_=function(d,s){if(B(d))return d.clone();var n=typeof s=="object"?s:{};return n.date=d,n.args=arguments,new at(n)},O=ot;O.l=R,O.i=B,O.w=function(d,s){return _(d,{locale:s.$L,utc:s.$u,x:s.$x,$offset:s.$offset})};var at=function(){function d(n){this.$L=R(n.locale,null,!0),this.parse(n)}var s=d.prototype;return s.parse=function(n){this.$d=function($){var i=$.date,p=$.utc;if(i===null)return new Date(NaN);if(O.u(i))return new Date;if(i instanceof Date)return new Date(i);if(typeof i=="string"&&!/Z$/i.test(i)){var v=i.match(z);if(v){var C=v[2]-1||0,k=(v[7]||"0").substring(0,3);return p?new Date(Date.UTC(v[1],C,v[3]||1,v[4]||0,v[5]||0,v[6]||0,k)):new Date(v[1],C,v[3]||1,v[4]||0,v[5]||0,v[6]||0,k)}}return new Date(i)}(n),this.$x=n.x||{},this.init()},s.init=function(){var n=this.$d;this.$y=n.getFullYear(),this.$M=n.getMonth(),this.$D=n.getDate(),this.$W=n.getDay(),this.$H=n.getHours(),this.$m=n.getMinutes(),this.$s=n.getSeconds(),this.$ms=n.getMilliseconds()},s.$utils=function(){return O},s.isValid=function(){return this.$d.toString()!==x},s.isSame=function(n,$){var i=_(n);return this.startOf($)<=i&&i<=this.endOf($)},s.isAfter=function(n,$){return _(n)<this.startOf($)},s.isBefore=function(n,$){return this.endOf($)<_(n)},s.$g=function(n,$,i){return O.u(n)?this[$]:this.set(i,n)},s.unix=function(){return Math.floor(this.valueOf()/1e3)},s.valueOf=function(){return this.$d.getTime()},s.startOf=function(n,$){var i=this,p=!!O.u($)||$,v=O.p(n),C=function(tt,W){var H=O.w(i.$u?Date.UTC(i.$y,W,tt):new Date(i.$y,W,tt),i);return p?H:H.endOf(f)},k=function(tt,W){return O.w(i.toDate()[tt].apply(i.toDate("s"),(p?[0,0,0,0]:[23,59,59,999]).slice(W)),i)},T=this.$W,I=this.$M,G=this.$D,X="set"+(this.$u?"UTC":"");switch(v){case o:return p?C(1,0):C(31,11);case h:return p?C(1,I):C(0,I+1);case b:var it=this.$locale().weekStart||0,st=(T<it?T+7:T)-it;return C(p?G-st:G+(6-st),I);case f:case g:return k(X+"Hours",0);case y:return k(X+"Minutes",1);case u:return k(X+"Seconds",2);case m:return k(X+"Milliseconds",3);default:return this.clone()}},s.endOf=function(n){return this.startOf(n,!1)},s.$set=function(n,$){var i,p=O.p(n),v="set"+(this.$u?"UTC":""),C=(i={},i[f]=v+"Date",i[g]=v+"Date",i[h]=v+"Month",i[o]=v+"FullYear",i[y]=v+"Hours",i[u]=v+"Minutes",i[m]=v+"Seconds",i[a]=v+"Milliseconds",i)[p],k=p===f?this.$D+($-this.$W):$;if(p===h||p===o){var T=this.clone().set(g,1);T.$d[C](k),T.init(),this.$d=T.set(g,Math.min(this.$D,T.daysInMonth())).$d}else C&&this.$d[C](k);return this.init(),this},s.set=function(n,$){return this.clone().$set(n,$)},s.get=function(n){return this[O.p(n)]()},s.add=function(n,$){var i,p=this;n=Number(n);var v=O.p($),C=function(I){var G=_(p);return O.w(G.date(G.date()+Math.round(I*n)),p)};if(v===h)return this.set(h,this.$M+n);if(v===o)return this.set(o,this.$y+n);if(v===f)return C(1);if(v===b)return C(7);var k=(i={},i[u]=c,i[y]=l,i[m]=t,i)[v]||1,T=this.$d.getTime()+n*k;return O.w(T,this)},s.subtract=function(n,$){return this.add(-1*n,$)},s.format=function(n){var $=this,i=this.$locale();if(!this.isValid())return i.invalidDate||x;var p=n||"YYYY-MM-DDTHH:mm:ssZ",v=O.z(this),C=this.$H,k=this.$m,T=this.$M,I=i.weekdays,G=i.months,X=function(W,H,ft,ht){return W&&(W[H]||W($,p))||ft[H].slice(0,ht)},it=function(W){return O.s(C%12||12,W,"0")},st=i.meridiem||function(W,H,ft){var ht=W<12?"AM":"PM";return ft?ht.toLowerCase():ht},tt={YY:String(this.$y).slice(-2),YYYY:this.$y,M:T+1,MM:O.s(T+1,2,"0"),MMM:X(i.monthsShort,T,G,3),MMMM:X(G,T),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:X(i.weekdaysMin,this.$W,I,2),ddd:X(i.weekdaysShort,this.$W,I,3),dddd:I[this.$W],H:String(C),HH:O.s(C,2,"0"),h:it(1),hh:it(2),a:st(C,k,!0),A:st(C,k,!1),m:String(k),mm:O.s(k,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:v};return p.replace(q,function(W,H){return H||tt[W]||v.replace(":","")})},s.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},s.diff=function(n,$,i){var p,v=O.p($),C=_(n),k=(C.utcOffset()-this.utcOffset())*c,T=this-C,I=O.m(this,C);return I=(p={},p[o]=I/12,p[h]=I,p[M]=I/3,p[b]=(T-k)/6048e5,p[f]=(T-k)/864e5,p[y]=T/l,p[u]=T/c,p[m]=T/t,p)[v]||T,i?I:O.a(I)},s.daysInMonth=function(){return this.endOf(h).$D},s.$locale=function(){return D[this.$L]},s.locale=function(n,$){if(!n)return this.$L;var i=this.clone(),p=R(n,$,!0);return p&&(i.$L=p),i},s.clone=function(){return O.w(this.$d,this)},s.toDate=function(){return new Date(this.valueOf())},s.toJSON=function(){return this.isValid()?this.toISOString():null},s.toISOString=function(){return this.$d.toISOString()},s.toString=function(){return this.$d.toUTCString()},d}(),dt=at.prototype;return _.prototype=dt,[["$ms",a],["$s",m],["$m",u],["$H",y],["$W",f],["$M",h],["$y",o],["$D",g]].forEach(function(d){dt[d[1]]=function(s){return this.$g(s,d[0],d[1])}}),_.extend=function(d,s){return d.$i||(d(s,at,_),d.$i=!0),_},_.locale=R,_.isDayjs=B,_.unix=function(d){return _(1e3*d)},_.en=D[V],_.Ls=D,_.p={},_})})(mt);const U=mt.exports,A=(r,e="MM/DD HH:mm")=>U(r*1e3).format(e),jt=(r=Math.floor(Date.now()/1e3))=>{const e=r*1e3,t=U(e).year(),c=U(e).month(),l=U(e).date(),a=U(e).day(),m=new Date(t,c,l-a).getTime();return Math.floor(m/1e3)};function It({pointWidth:r,timePerPixel:e,timeSpacing:t,screenScaleCount:c,scaleSpacing:l,scaleHeight:a,startTime:m,drawLine:u,drawText:y}){if(t===1){for(let f=0;f<c;f++){const b=f*l+r/2,h=Math.ceil(m+f*t);if(h%10===0){u(b,a.height5),y(b,a.height5+13,`${A(h,"HH:mm:ss")}`);continue}if(h%5===0){u(b,a.height3);continue}if(h%1===0){u(b,a.height1);continue}}return}if(t===10){const f=+A(m,"s")%10,b=f/e;for(let h=0;h<c;h++){const M=h*l-b-r/2,o=Math.ceil(m+h*t-f);if(o%60===0){u(M,a.height4),y(M,a.height5+13,`${A(o,"HH:mm")}`);continue}if(o%10===0){u(M,a.height1);continue}}return}if(t===30){const f=+A(m,"s")%30,b=f/e;for(let h=0;h<c;h++){const M=h*l-b-r/2,o=Math.ceil(m+h*t-f);if(o%300===0){u(M,a.height4),y(M,a.height5+13,`${A(o,"HH:mm")}`);continue}if(o%30===0){u(M,a.height1);continue}}return}if(t===60){const f=+A(m,"s")%60,b=f/e;for(let h=0;h<c;h++){const M=h*l-b-r/2,o=Math.ceil(m+h*t-f);if(o%3600===0){u(M,a.height5),y(M,a.height5+13,`${A(o)}`);continue}if(o%300===0){u(M,a.height3),o%600===0&&y(M,a.height5+13,`${A(o,"HH:mm")}`);continue}if(o%60===0){u(M,a.height1);continue}}return}if(t===120){const f=A(m,"m:s").split(":"),h=(+f[0]*60+ +f[1])%120,M=h/e;for(let o=0;o<c;o++){const g=o*l-M-r/2,x=Math.ceil(m+o*t-h);if(x%1800===0){u(g,a.height5),y(g,a.height5+13,`${A(x)}`);continue}if(x%600===0){u(g,a.height3);continue}if(x%120===0){u(g,a.height1);continue}}return}if(t===300){const f=A(m,"m:s").split(":"),h=(+f[0]*60+ +f[1])%300,M=h/e;for(let o=0;o<c;o++){const g=o*l-M-r/2,x=Math.ceil(m+o*t-h);if(x%3600===0){u(g,a.height5),y(g,a.height5+13,`${A(x)}`);continue}if(x%1800===0){u(g,a.height3);continue}if(x%300===0){u(g,a.height1);continue}}return}if(t===7200){const f=A(m,"H:m:s").split(":"),h=(+f[0]*3600+ +f[1]*60+ +f[2])%7200,M=h/e;for(let o=0;o<c;o++){const g=o*l-M-r/2,x=Math.ceil(m+o*t-h);if(x%86400===0){u(g,a.height5),y(g,a.height5+13,`${A(x,"MM/DD HH:mm")}`);continue}if(x%43200===0){u(g,a.height3);continue}if(x%7200===0){u(g,a.height1);continue}}return}if(t===86400){const f=A(m,"H:m:s").split(":"),h=(+f[0]*3600+ +f[1]*60+ +f[2])%86400,M=h/e;for(let o=0;o<c;o++){const g=o*l-M-r/2,x=Math.ceil(m+o*t-h);if(A(x,"D")==="1"){u(g,a.height5),y(g,a.height5+13,`${A(x,"YYYY/MM/DD")}`);continue}if(x%86400===57600){u(g,a.height1);continue}}return}if(t===604800){const f=m-jt(m),b=f/e,h=new Array(c).fill(!1),M=o=>{for(let g=o;g>o-7;g--)if(h[g])return!1;return!0};for(let o=0;o<c;o++){const g=o*l-b,x=Math.ceil(m+o*t-f);if(U(x*1e3).month()===0&&(U(x*1e3).date()>0||U(x*1e3).date()<=31)&&M(o)){h[o]=!0,u(g,a.height5),y(g,a.height5+13,`${A(x,"YYYY/MM/DD")}`);continue}if(U(x*1e3).day()===0){u(g,a.height1);continue}}return}}const Wt={fill:!1,bgColor:"rgba(0,0,0,0.5)",textColor:"#ffffff",scaleColor:"#ffffff",areaBgColor:"#ffffff55",pointColor:"#00aeec",pointWidth:3,scaleSpacing:7,fps:60,zoom:2,maxZoom:9,minZoom:1,timeFormat:"YYYY/MM/DD HH:mm:ss"};class Et{constructor(e,t){E(this,"$canvas");E(this,"canvasContext");et(this,P,void 0);E(this,"currentTime");E(this,"areas");et(this,J,void 0);et(this,F,void 0);E(this,"scaleSpacing");E(this,"bgColor");et(this,L,void 0);E(this,"pointWidth");E(this,"pointColor");E(this,"textColor");E(this,"scaleColor");E(this,"areaBgColor");et(this,Q,void 0);E(this,"fps");E(this,"timeFormat");if(!e)throw new Error("canvas id is required!");this.$canvas=document.getElementById(e),this.canvasContext=this.$canvas.getContext("2d");const{fill:c,width:l,height:a,bgColor:m,textColor:u,scaleColor:y,areaBgColor:f,pointColor:b,pointWidth:h,scaleSpacing:M,fps:o,zoom:g,maxZoom:x,minZoom:z,timeFormat:q}={...Wt,...t};if(g<z||g>x||g%1!==0)throw new Error(`zoom must be minZoom ~ maxZoom(${z} ~1 ${x}), and must be an integer`);if(x<1||x>9||x%1!==0)throw new Error("maxZoom must be 1 ~ 9, and must be an integer");if(z<1||z>9||z%1!==0)throw new Error("minZoom must be 1 ~ 9, and must be an integer");if(x<z)throw new Error("maxZoom must be greater than minZoom");if(c){const Z=this.$canvas.parentElement;this.$canvas.width=Z.clientWidth,this.$canvas.height=Z.clientHeight,new ResizeObserver(lt(this._onParentResize.bind(this),200)).observe(Z)}else l&&(this.$canvas.width=l),a&&(this.$canvas.height=a);N(this,Q,!1),N(this,P,S()),this.currentTime=0;const K=[1,10,30,60,120,300,7200,86400,604800];N(this,J,[]);for(let Z=z-1;Z<x;Z++)j(this,J).push(K[Z]);N(this,F,K[g-1]),this.scaleSpacing=M,N(this,L,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10}),this.bgColor=m,this.pointWidth=h,this.pointColor=b,this.textColor=u,this.scaleColor=y,this.areaBgColor=f,this.fps=o,this.timeFormat=q}draw({currentTime:e,areas:t,_privateFlag:c}={}){if(j(this,Q)&&!c)return;this.currentTime=e||Math.floor(Date.now()/1e3),this.areas=t||[];const l=Math.ceil(this.$canvas.width/this.scaleSpacing),a=l*j(this,F),m=this.currentTime-a/2,u=this.currentTime+a/2,y=this.$canvas.width/2,f=a/this.$canvas.width;this.clear(),this.drawArea(0,0,this.$canvas.width,this.$canvas.height,this.bgColor),this.areas.forEach(b=>{const h=b.startTime<m?0:Math.floor((b.startTime-m)/f),M=b.endTime>u?this.$canvas.width:Math.floor((b.endTime-m)/f);this.drawArea(h,0,M,this.$canvas.height,b.bgColor||this.areaBgColor)}),It.bind(this)({pointWidth:this.pointWidth,timePerPixel:f,scaleHeight:j(this,L),scaleSpacing:this.scaleSpacing,timeSpacing:j(this,F),screenScaleCount:l,startTime:m,drawLine:this.drawLine.bind(this),drawText:this.drawText.bind(this)}),this.drawTimelineScale(j(this,F)),this.drawLine(y-this.pointWidth/2,this.$canvas.height,this.pointWidth,this.pointColor),this.drawArea(y-54,4,y+54,18,this.pointColor),this.drawText(y,6,`${A(this.currentTime,this.timeFormat)}`,this.textColor,"center","top"),this.$canvas.onwheel=this._onZoom.bind(this),this.$canvas.onmousedown=this._onDrag.bind(this)}_onDrag({clientX:e}){N(this,Q,!0);let t=0;document.onmousemove=lt(c=>{const l=c.clientX-e,a=this.currentTime-j(this,F)/this.scaleSpacing*(l-t);t=l,this.draw({currentTime:Math.round(a),areas:this.areas,_privateFlag:!0})},j(this,F)===1?100:1e3/this.fps),document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,N(this,Q,!1),this.emit("timeUpdate",this.currentTime)}}_onZoom(e){e.preventDefault();const t=j(this,J).findIndex(c=>c===j(this,F));e.deltaY<0&&t>0?(N(this,F,j(this,J)[t-1]),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0})):e.deltaY>0&&t<j(this,J).length-1&&(N(this,F,j(this,J)[t+1]),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0}))}_onParentResize(){const e=this.$canvas.parentNode;!e||(this.$canvas.width=e.clientWidth,this.$canvas.height=e.clientHeight,N(this,L,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10}),this.draw({currentTime:this.currentTime,areas:this.areas}))}clear(){this.canvasContext&&this.canvasContext.clearRect(0,0,this.$canvas.width,this.$canvas.height),this.$canvas&&(this.$canvas.onwheel=null,this.$canvas.onmousedown=null)}drawTimelineScale(e){let t="";switch(e){case 1:t="1s";break;case 10:t="10s";break;case 30:t="30s";break;case 60:t="1min";break;case 120:t="2min";break;case 300:t="5min";break;case 7200:t="2hour";break;case 86400:t="1day";break;case 604800:t="1week";break}this.drawText(this.scaleSpacing+12,9,`${t}`,this.textColor,"left","middle"),this.canvasContext.beginPath(),this.canvasContext.moveTo(5,6),this.canvasContext.lineTo(5,10),this.canvasContext.lineTo(this.scaleSpacing+7,10),this.canvasContext.lineTo(this.scaleSpacing+7,6),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1.5,this.canvasContext.stroke()}drawLine(e,t,c=1,l=this.scaleColor){this.canvasContext.beginPath(),this.canvasContext.moveTo(e,this.$canvas.height),this.canvasContext.lineTo(e,this.$canvas.height-t),this.canvasContext.closePath(),this.canvasContext.strokeStyle=l,this.canvasContext.lineWidth=c,this.canvasContext.stroke()}drawText(e,t,c,l=this.textColor,a="center",m="alphabetic"){this.canvasContext.beginPath(),this.canvasContext.font="11px Arial",this.canvasContext.fillStyle=l,this.canvasContext.textAlign=a,this.canvasContext.textBaseline=m,this.canvasContext.fillText(c,e,t)}drawArea(e,t,c,l,a){this.canvasContext.beginPath(),this.canvasContext.rect(e,t,c-e,l-t),this.canvasContext.fillStyle=a,this.canvasContext.fill()}on(e,t){j(this,P).on(e,t)}off(e,t){j(this,P).off(e,t)}emit(...e){j(this,P).emit(...e)}}return P=new WeakMap,J=new WeakMap,F=new WeakMap,L=new WeakMap,Q=new WeakMap,Et}();
var $timeline=function(){var J,E,P,w,U,Z,st,xt,it,bt,nt,St,rt,Tt,at,Ft,ot,Ct,G,Dt,R,mt,ht,Ht;"use strict";var Pt=Object.defineProperty;var kt=(p,M,y)=>M in p?Pt(p,M,{enumerable:!0,configurable:!0,writable:!0,value:y}):p[M]=y;var et=(p,M,y)=>(kt(p,typeof M!="symbol"?M+"":M,y),y),Yt=(p,M,y)=>{if(!M.has(p))throw TypeError("Cannot "+y)};var u=(p,M,y)=>(Yt(p,M,"read from private field"),y?y.call(p):M.get(p)),H=(p,M,y)=>{if(M.has(p))throw TypeError("Cannot add the same private member more than once");M instanceof WeakSet?M.add(p):M.set(p,y)},A=(p,M,y,V)=>(Yt(p,M,"write to private field"),V?V.call(p,y):M.set(p,y),y);var _=(p,M,y)=>(Yt(p,M,"access private method"),y);function p(l){return{all:l=l||new Map,on:function(n,r){var i=l.get(n);i?i.push(r):l.set(n,[r])},off:function(n,r){var i=l.get(n);i&&(r?i.splice(i.indexOf(r)>>>0,1):l.set(n,[]))},emit:function(n,r){var i=l.get(n);i&&i.slice().map(function(f){f(r)}),(i=l.get("*"))&&i.slice().map(function(f){f(n,r)})}}}var M=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function y(l){return l&&l.__esModule&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l}var V={exports:{}};(function(l,n){(function(r,i){l.exports=i()})(M,function(){var r=1e3,i=6e4,f=36e5,g="millisecond",$="second",Y="minute",v="hour",b="day",S="week",F="month",L="quarter",W="year",z="date",ct="Invalid Date",$t=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,ut=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,vt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(a){var s=["th","st","nd","rd"],t=a%100;return"["+a+(s[(t-20)%10]||s[t]||s[0])+"]"}},I=function(a,s,t){var o=String(a);return!o||o.length>=s?a:""+Array(s+1-o.length).join(t)+a},Q={s:I,z:function(a){var s=-a.utcOffset(),t=Math.abs(s),o=Math.floor(t/60),e=t%60;return(s<=0?"+":"-")+I(o,2,"0")+":"+I(e,2,"0")},m:function a(s,t){if(s.date()<t.date())return-a(t,s);var o=12*(t.year()-s.year())+(t.month()-s.month()),e=s.clone().add(o,F),c=t-e<0,h=s.clone().add(o+(c?-1:1),F);return+(-(o+(t-e)/(c?e-h:h-e))||0)},a:function(a){return a<0?Math.ceil(a)||0:Math.floor(a)},p:function(a){return{M:F,y:W,w:S,d:b,D:z,h:v,m:Y,s:$,ms:g,Q:L}[a]||String(a||"").toLowerCase().replace(/s$/,"")},u:function(a){return a===void 0}},j="en",B={};B[j]=vt;var Mt=function(a){return a instanceof lt},ft=function a(s,t,o){var e;if(!s)return j;if(typeof s=="string"){var c=s.toLowerCase();B[c]&&(e=c),t&&(B[c]=t,e=c);var h=s.split("-");if(!e&&h.length>1)return a(h[0])}else{var m=s.name;B[m]=s,e=m}return!o&&e&&(j=e),e||!o&&j},T=function(a,s){if(Mt(a))return a.clone();var t=typeof s=="object"?s:{};return t.date=a,t.args=arguments,new lt(t)},d=Q;d.l=ft,d.i=Mt,d.w=function(a,s){return T(a,{locale:s.$L,utc:s.$u,x:s.$x,$offset:s.$offset})};var lt=function(){function a(t){this.$L=ft(t.locale,null,!0),this.parse(t)}var s=a.prototype;return s.parse=function(t){this.$d=function(o){var e=o.date,c=o.utc;if(e===null)return new Date(NaN);if(d.u(e))return new Date;if(e instanceof Date)return new Date(e);if(typeof e=="string"&&!/Z$/i.test(e)){var h=e.match($t);if(h){var m=h[2]-1||0,x=(h[7]||"0").substring(0,3);return c?new Date(Date.UTC(h[1],m,h[3]||1,h[4]||0,h[5]||0,h[6]||0,x)):new Date(h[1],m,h[3]||1,h[4]||0,h[5]||0,h[6]||0,x)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},s.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},s.$utils=function(){return d},s.isValid=function(){return this.$d.toString()!==ct},s.isSame=function(t,o){var e=T(t);return this.startOf(o)<=e&&e<=this.endOf(o)},s.isAfter=function(t,o){return T(t)<this.startOf(o)},s.isBefore=function(t,o){return this.endOf(o)<T(t)},s.$g=function(t,o,e){return d.u(t)?this[o]:this.set(e,t)},s.unix=function(){return Math.floor(this.valueOf()/1e3)},s.valueOf=function(){return this.$d.getTime()},s.startOf=function(t,o){var e=this,c=!!d.u(o)||o,h=d.p(t),m=function(q,O){var N=d.w(e.$u?Date.UTC(e.$y,O,q):new Date(e.$y,O,q),e);return c?N:N.endOf(b)},x=function(q,O){return d.w(e.toDate()[q].apply(e.toDate("s"),(c?[0,0,0,0]:[23,59,59,999]).slice(O)),e)},D=this.$W,C=this.$M,X=this.$D,k="set"+(this.$u?"UTC":"");switch(h){case W:return c?m(1,0):m(31,11);case F:return c?m(1,C):m(0,C+1);case S:var K=this.$locale().weekStart||0,tt=(D<K?D+7:D)-K;return m(c?X-tt:X+(6-tt),C);case b:case z:return x(k+"Hours",0);case v:return x(k+"Minutes",1);case Y:return x(k+"Seconds",2);case $:return x(k+"Milliseconds",3);default:return this.clone()}},s.endOf=function(t){return this.startOf(t,!1)},s.$set=function(t,o){var e,c=d.p(t),h="set"+(this.$u?"UTC":""),m=(e={},e[b]=h+"Date",e[z]=h+"Date",e[F]=h+"Month",e[W]=h+"FullYear",e[v]=h+"Hours",e[Y]=h+"Minutes",e[$]=h+"Seconds",e[g]=h+"Milliseconds",e)[c],x=c===b?this.$D+(o-this.$W):o;if(c===F||c===W){var D=this.clone().set(z,1);D.$d[m](x),D.init(),this.$d=D.set(z,Math.min(this.$D,D.daysInMonth())).$d}else m&&this.$d[m](x);return this.init(),this},s.set=function(t,o){return this.clone().$set(t,o)},s.get=function(t){return this[d.p(t)]()},s.add=function(t,o){var e,c=this;t=Number(t);var h=d.p(o),m=function(C){var X=T(c);return d.w(X.date(X.date()+Math.round(C*t)),c)};if(h===F)return this.set(F,this.$M+t);if(h===W)return this.set(W,this.$y+t);if(h===b)return m(1);if(h===S)return m(7);var x=(e={},e[Y]=i,e[v]=f,e[$]=r,e)[h]||1,D=this.$d.getTime()+t*x;return d.w(D,this)},s.subtract=function(t,o){return this.add(-1*t,o)},s.format=function(t){var o=this,e=this.$locale();if(!this.isValid())return e.invalidDate||ct;var c=t||"YYYY-MM-DDTHH:mm:ssZ",h=d.z(this),m=this.$H,x=this.$m,D=this.$M,C=e.weekdays,X=e.months,k=function(O,N,pt,dt){return O&&(O[N]||O(o,c))||pt[N].slice(0,dt)},K=function(O){return d.s(m%12||12,O,"0")},tt=e.meridiem||function(O,N,pt){var dt=O<12?"AM":"PM";return pt?dt.toLowerCase():dt},q={YY:String(this.$y).slice(-2),YYYY:d.s(this.$y,4,"0"),M:D+1,MM:d.s(D+1,2,"0"),MMM:k(e.monthsShort,D,X,3),MMMM:k(X,D),D:this.$D,DD:d.s(this.$D,2,"0"),d:String(this.$W),dd:k(e.weekdaysMin,this.$W,C,2),ddd:k(e.weekdaysShort,this.$W,C,3),dddd:C[this.$W],H:String(m),HH:d.s(m,2,"0"),h:K(1),hh:K(2),a:tt(m,x,!0),A:tt(m,x,!1),m:String(x),mm:d.s(x,2,"0"),s:String(this.$s),ss:d.s(this.$s,2,"0"),SSS:d.s(this.$ms,3,"0"),Z:h};return c.replace(ut,function(O,N){return N||q[O]||h.replace(":","")})},s.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},s.diff=function(t,o,e){var c,h=d.p(o),m=T(t),x=(m.utcOffset()-this.utcOffset())*i,D=this-m,C=d.m(this,m);return C=(c={},c[W]=C/12,c[F]=C,c[L]=C/3,c[S]=(D-x)/6048e5,c[b]=(D-x)/864e5,c[v]=D/f,c[Y]=D/i,c[$]=D/r,c)[h]||D,e?C:d.a(C)},s.daysInMonth=function(){return this.endOf(F).$D},s.$locale=function(){return B[this.$L]},s.locale=function(t,o){if(!t)return this.$L;var e=this.clone(),c=ft(t,o,!0);return c&&(e.$L=c),e},s.clone=function(){return d.w(this.$d,this)},s.toDate=function(){return new Date(this.valueOf())},s.toJSON=function(){return this.isValid()?this.toISOString():null},s.toISOString=function(){return this.$d.toISOString()},s.toString=function(){return this.$d.toUTCString()},a}(),yt=lt.prototype;return T.prototype=yt,[["$ms",g],["$s",$],["$m",Y],["$H",v],["$W",b],["$M",F],["$y",W],["$D",z]].forEach(function(a){yt[a[1]]=function(s){return this.$g(s,a[0],a[1])}}),T.extend=function(a,s){return a.$i||(a(s,lt,T),a.$i=!0),T},T.locale=ft,T.isDayjs=Mt,T.unix=function(a){return T(1e3*a)},T.en=B[j],T.Ls=B,T.p={},T})})(V);var Lt=V.exports;const Ot=y(Lt),gt=(l,n="MM/DD HH:mm")=>Ot(l).format(n),wt=(l,n)=>{let r,i=0;return(...f)=>{const g=Date.now(),$=g-i;!i||$>=n?(i=g,l.apply(void 0,f)):r||(r=setTimeout(()=>{i=g,l.apply(void 0,f),r=null},n-$))}},Et=(l,n)=>{const r=document.createElement("canvas");r.width=r.height=1;const i=r.getContext("2d");i.fillStyle=l,i.fillRect(0,0,1,1);const f=i.getImageData(0,0,1,1).data;return`rgba(${f[0]}, ${f[1]}, ${f[2]}, ${n})`},_t=({xCenterPoint:l,cfg:n,timePerPixel:r,timeSpacing:i,currentTime:f,$canvas:g,screenScaleCount:$,scaleHeight:Y,startTime:v,drawLine:b,drawText:S,drawArea:F})=>{const L=({space:W,scaleFormat:z,bgFormat:ct,currentFormat:$t})=>{S({x:g.width-l/10,y:6,text:gt(f,ct),fontSize:`${g.height-5}px`,align:"right",baseLine:"top",color:n.bgTextColor});const ut=v%i,vt=ut/r;for(let I=0;I<$;I++){const Q=I*n.scaleSpacing-vt-n.pointWidth/2,j=v+I*i-ut;if(j%(i*W)===0){b({x:Q,y:Y.long}),S({x:Q,y:g.height-Y.long-5,text:gt(j,z),baseLine:"bottom"});continue}b({x:Q,y:Y.short})}b({x:l-n.pointWidth/2,y:g.height,width:n.pointWidth,color:n.pointColor}),F({startX:l-50,startY:4,endX:l+50,endY:18,bgColor:n.pointColor}),S({x:l,y:6,text:gt(f,$t),align:"center",baseLine:"top"})};i<100?L({space:10,scaleFormat:"mm:ss:SSS",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss:SSS"}):i<1e3?L({space:10,scaleFormat:"mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss:SSS"}):i<1e4?L({space:10,scaleFormat:"mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss"}):i<6e4?L({space:12,scaleFormat:"HH:mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss"}):i<6e5?L({space:10,scaleFormat:"HH:mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss"}):i<36e5?L({space:12,scaleFormat:"MM/DD HH:mm",bgFormat:"YYYY/MM",currentFormat:"MM/DD HH:mm:ss"}):i<864e5?L({space:12,scaleFormat:"MM/DD HH:mm",bgFormat:"YYYY/MM",currentFormat:"YYYY/MM/DD HH:mm"}):i<6048e5?L({space:10,scaleFormat:"YYYY/MM/DD",bgFormat:"YYYY",currentFormat:"YYYY/MM/DD"}):L({space:10,scaleFormat:"YYYY/MM/DD",bgFormat:"YYYY",currentFormat:"YYYY/MM/DD"})},At={fill:!0,width:1e3,height:60,bgColor:"rgba(0,0,0,0.5)",areaBgColor:"#ffffff55",textColor:"#ffffff",scaleColor:"#ffffff",pointColor:"#00aeec",pointWidth:3,scaleSpacing:7,fps:60,zoom:3,timeSpacingList:[10,100,1e3,1e4,6e4,6e5,36e5,864e5,6048e5]};class Wt{constructor(n,r){H(this,st);H(this,it);H(this,nt);H(this,rt);H(this,at);H(this,ot);H(this,G);H(this,R);H(this,ht);et(this,"$canvas");et(this,"ctx");et(this,"$canvasParent");et(this,"cfg");H(this,J,p());H(this,E,0);H(this,P,void 0);H(this,w,void 0);H(this,U,void 0);H(this,Z,!1);if(!n)throw new Error("canvas Element Or Element ID is required!");if(typeof n=="string"?this.$canvas=document.querySelector(n):this.$canvas=n,!(this.$canvas instanceof HTMLCanvasElement))throw new Error("element must be canvas!");this.ctx=this.$canvas.getContext("2d"),this.cfg={...At,...r};const{fill:i,width:f,height:g,zoom:$,timeSpacingList:Y,scaleHeight:v,textColor:b}=this.cfg;if(this.cfg.bgTextColor=Et(b,.18),$<0||$>=Y.length||$%1!==0)throw new Error(`zoom must be 0 ~ ${Y.length-1}, and must be an integer`);if(i){const S=this.$canvas.parentElement;this.$canvasParent=S,this.$canvas.width=S.clientWidth,this.$canvas.height=S.clientHeight,new ResizeObserver(wt(_(this,nt,St).bind(this),200)).observe(S)}else f&&(this.$canvas.width=f),g&&(this.$canvas.height=g);A(this,w,Y[$]),v!=null&&v.long&&(v!=null&&v.short)?A(this,U,v):A(this,U,{long:this.$canvas.height/3,medium:this.$canvas.height/6,short:this.$canvas.height/10}),this.draw(),this.$canvas.addEventListener("wheel",_(this,it,bt).bind(this),{passive:!1}),this.$canvas.addEventListener("mousedown",_(this,st,xt).bind(this))}draw({currentTime:n,areas:r,_privateFlag:i}={}){if(u(this,Z)&&!i)return;A(this,E,n||Date.now()),A(this,P,r||[]);const f=Math.ceil(this.$canvas.width/this.cfg.scaleSpacing),g=f*u(this,w),$=u(this,E)-g/2,Y=u(this,E)+g/2,v=this.$canvas.width/2,b=g/this.$canvas.width;_(this,rt,Tt).call(this),_(this,R,mt).call(this,{startX:0,startY:0,endX:this.$canvas.width,endY:this.$canvas.height,bgColor:this.cfg.bgColor}),u(this,P).forEach(S=>{const F=S.startTime<$?0:Math.floor((S.startTime-$)/b),L=S.endTime>Y?this.$canvas.width:Math.floor((S.endTime-$)/b);_(this,R,mt).call(this,{startX:F,startY:0,endX:L,endY:this.$canvas.height,bgColor:S.bgColor||this.cfg.areaBgColor})}),_t.bind(this)({xCenterPoint:v,screenScaleCount:f,startTime:$,timePerPixel:b,scaleHeight:u(this,U),timeSpacing:u(this,w),currentTime:u(this,E),$canvas:this.$canvas,cfg:this.cfg,drawLine:_(this,ot,Ct).bind(this),drawText:_(this,G,Dt).bind(this),drawArea:_(this,R,mt).bind(this)}),_(this,at,Ft).call(this)}getCurrentTime(){return u(this,E)}on(n,r){u(this,J).on(n,r)}off(n,r){u(this,J).off(n,r)}}return J=new WeakMap,E=new WeakMap,P=new WeakMap,w=new WeakMap,U=new WeakMap,Z=new WeakMap,st=new WeakSet,xt=function(n){A(this,Z,!0);let r=0,i=u(this,E);const f=wt(({offsetX:Y})=>{if(!u(this,Z))return;const v=Y-n.offsetX;i=Math.round(u(this,E)-u(this,w)/this.cfg.scaleSpacing*(v-r)),r=v,this.draw({currentTime:i,areas:u(this,P),_privateFlag:!0})},1e3/this.cfg.fps),g=({offsetX:Y,offsetY:v})=>{(Y<3||Y>this.$canvas.width-3||v<3||v>this.$canvas.height-3)&&(this.$canvas.removeEventListener("mousemove",f),this.$canvas.removeEventListener("mousemove",g))},$=()=>{this.$canvas.removeEventListener("mousemove",f),this.$canvas.removeEventListener("mousemove",g),document.removeEventListener("mouseup",$),A(this,Z,!1),_(this,ht,Ht).call(this,"dragged",i)};this.$canvas.addEventListener("mousemove",f),this.$canvas.addEventListener("mousemove",g),document.addEventListener("mouseup",$)},it=new WeakSet,bt=function(n){n.preventDefault();const r=this.cfg.timeSpacingList.findIndex(i=>i===u(this,w));n.deltaY<0&&r>0?(A(this,w,this.cfg.timeSpacingList[r-1]),this.draw({currentTime:u(this,E),areas:u(this,P),_privateFlag:!0})):n.deltaY>0&&r<this.cfg.timeSpacingList.length-1&&(A(this,w,this.cfg.timeSpacingList[r+1]),this.draw({currentTime:u(this,E),areas:u(this,P),_privateFlag:!0}))},nt=new WeakSet,St=function(){this.$canvasParent&&(this.$canvas.width=this.$canvasParent.clientWidth,this.$canvas.height=this.$canvasParent.clientHeight,this.cfg.scaleHeight||A(this,U,{long:this.$canvas.height/3,medium:this.$canvas.height/6,short:this.$canvas.height/10}),this.draw({currentTime:u(this,E),areas:u(this,P)}))},rt=new WeakSet,Tt=function(){this.ctx.clearRect(0,0,this.$canvas.width,this.$canvas.height)},at=new WeakSet,Ft=function(){const n=()=>u(this,w)<1e3?`${u(this,w)}ms`:u(this,w)<6e4?`${Math.round(u(this,w)/100)/10}sec`:u(this,w)<36e5?`${Math.round(u(this,w)/100/60)/10}min`:u(this,w)<864e5?`${Math.round(u(this,w)/100/60/60)/10}hours`:u(this,w)<6048e5?`${Math.round(u(this,w)/100/60/60/24)/10}days`:`${Math.round(u(this,w)/100/60/60/24/7)/10}weeks`;_(this,G,Dt).call(this,{x:this.cfg.scaleSpacing+12,y:9,text:n(),align:"left",baseLine:"middle"}),this.ctx.beginPath(),this.ctx.moveTo(5,6),this.ctx.lineTo(5,10),this.ctx.lineTo(this.cfg.scaleSpacing+6,10),this.ctx.lineTo(this.cfg.scaleSpacing+6,6),this.ctx.strokeStyle=this.cfg.scaleColor,this.ctx.lineWidth=1.5,this.ctx.stroke()},ot=new WeakSet,Ct=function({x:n,y:r,width:i=1,color:f=this.cfg.scaleColor}){this.ctx.beginPath(),this.ctx.moveTo(n,this.$canvas.height),this.ctx.lineTo(n,this.$canvas.height-r),this.ctx.closePath(),this.ctx.strokeStyle=f,this.ctx.lineWidth=i,this.ctx.stroke()},G=new WeakSet,Dt=function({x:n,y:r,text:i,color:f=this.cfg.textColor,fontSize:g="11px",align:$="center",baseLine:Y="alphabetic"}){this.ctx.beginPath(),this.ctx.font=`${g} Arial`,this.ctx.fillStyle=f,this.ctx.textAlign=$,this.ctx.textBaseline=Y,this.ctx.fillText(i,n,r)},R=new WeakSet,mt=function({startX:n,startY:r,endX:i,endY:f,bgColor:g}){this.ctx.beginPath(),this.ctx.rect(n,r,i-n,f-r),this.ctx.fillStyle=g,this.ctx.fill()},ht=new WeakSet,Ht=function(...n){u(this,J).emit(...n)},Wt}();

2

dist/timeline.umd.js

@@ -1,1 +0,1 @@

var Zt=Object.defineProperty;var Ft=(T,C,Y)=>C in T?Zt(T,C,{enumerable:!0,configurable:!0,writable:!0,value:Y}):T[C]=Y;var E=(T,C,Y)=>(Ft(T,typeof C!="symbol"?C+"":C,Y),Y),$t=(T,C,Y)=>{if(!C.has(T))throw TypeError("Cannot "+Y)};var A=(T,C,Y)=>($t(T,C,"read from private field"),Y?Y.call(T):C.get(T)),et=(T,C,Y)=>{if(C.has(T))throw TypeError("Cannot add the same private member more than once");C instanceof WeakSet?C.add(T):C.set(T,Y)},N=(T,C,Y,nt)=>($t(T,C,"write to private field"),nt?nt.call(T,Y):C.set(T,Y),Y);(function(T,C){typeof exports=="object"&&typeof module<"u"?module.exports=C():typeof define=="function"&&define.amd?define(C):(T=typeof globalThis<"u"?globalThis:T||self,T.$timeline=C())})(this,function(){var P,J,F,L,Q;"use strict";function T(r){return{all:r=r||new Map,on:function(e,t){var c=r.get(e);c?c.push(t):r.set(e,[t])},off:function(e,t){var c=r.get(e);c&&(t?c.splice(c.indexOf(t)>>>0,1):r.set(e,[]))},emit:function(e,t){var c=r.get(e);c&&c.slice().map(function(l){l(t)}),(c=r.get("*"))&&c.slice().map(function(l){l(e,t)})}}}var C=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},Y="Expected a function",nt=0/0,vt="[object Symbol]",gt=/^\s+|\s+$/g,pt=/^[-+]0x[0-9a-f]+$/i,xt=/^0b[01]+$/i,yt=/^0o[0-7]+$/i,Mt=parseInt,bt=typeof C=="object"&&C&&C.Object===Object&&C,Ct=typeof self=="object"&&self&&self.Object===Object&&self,Dt=bt||Ct||Function("return this")(),Ot=Object.prototype,wt=Ot.toString,Tt=Math.max,St=Math.min,ct=function(){return Dt.Date.now()};function _t(r,e,t){var c,l,a,d,u,M,f=0,b=!1,h=!1,y=!0;if(typeof r!="function")throw new TypeError(Y);e=ut(e)||0,rt(t)&&(b=!!t.leading,h="maxWait"in t,a=h?Tt(ut(t.maxWait)||0,e):a,y="trailing"in t?!!t.trailing:y);function o(O){var B=c,R=l;return c=l=void 0,f=O,d=r.apply(R,B),d}function g(O){return f=O,u=setTimeout(q,e),b?o(O):d}function x(O){var B=O-M,R=O-f,_=e-B;return h?St(_,a-R):_}function z(O){var B=O-M,R=O-f;return M===void 0||B>=e||B<0||h&&R>=a}function q(){var O=ct();if(z(O))return K(O);u=setTimeout(q,x(O))}function K(O){return u=void 0,y&&c?o(O):(c=l=void 0,d)}function Z(){u!==void 0&&clearTimeout(u),f=0,c=M=l=u=void 0}function ot(){return u===void 0?d:K(ct())}function V(){var O=ct(),B=z(O);if(c=arguments,l=this,M=O,B){if(u===void 0)return g(M);if(h)return u=setTimeout(q,e),o(M)}return u===void 0&&(u=setTimeout(q,e)),d}return V.cancel=Z,V.flush=ot,V}function kt(r,e,t){var c=!0,l=!0;if(typeof r!="function")throw new TypeError(Y);return rt(t)&&(c="leading"in t?!!t.leading:c,l="trailing"in t?!!t.trailing:l),_t(r,e,{leading:c,maxWait:e,trailing:l})}function rt(r){var e=typeof r;return!!r&&(e=="object"||e=="function")}function Yt(r){return!!r&&typeof r=="object"}function jt(r){return typeof r=="symbol"||Yt(r)&&wt.call(r)==vt}function ut(r){if(typeof r=="number")return r;if(jt(r))return nt;if(rt(r)){var e=typeof r.valueOf=="function"?r.valueOf():r;r=rt(e)?e+"":e}if(typeof r!="string")return r===0?r:+r;r=r.replace(gt,"");var t=xt.test(r);return t||yt.test(r)?Mt(r.slice(2),t?2:8):pt.test(r)?nt:+r}var lt=kt,dt={exports:{}};(function(r,e){(function(t,c){r.exports=c()})(C,function(){var t=1e3,c=6e4,l=36e5,a="millisecond",d="second",u="minute",M="hour",f="day",b="week",h="month",y="quarter",o="year",g="date",x="Invalid Date",z=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,q=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,K={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(m){var s=["th","st","nd","rd"],n=m%100;return"["+m+(s[(n-20)%10]||s[n]||s[0])+"]"}},Z=function(m,s,n){var $=String(m);return!$||$.length>=s?m:""+Array(s+1-$.length).join(n)+m},ot={s:Z,z:function(m){var s=-m.utcOffset(),n=Math.abs(s),$=Math.floor(n/60),i=n%60;return(s<=0?"+":"-")+Z($,2,"0")+":"+Z(i,2,"0")},m:function m(s,n){if(s.date()<n.date())return-m(n,s);var $=12*(n.year()-s.year())+(n.month()-s.month()),i=s.clone().add($,h),p=n-i<0,v=s.clone().add($+(p?-1:1),h);return+(-($+(n-i)/(p?i-v:v-i))||0)},a:function(m){return m<0?Math.ceil(m)||0:Math.floor(m)},p:function(m){return{M:h,y:o,w:b,d:f,D:g,h:M,m:u,s:d,ms:a,Q:y}[m]||String(m||"").toLowerCase().replace(/s$/,"")},u:function(m){return m===void 0}},V="en",O={};O[V]=K;var B=function(m){return m instanceof at},R=function m(s,n,$){var i;if(!s)return V;if(typeof s=="string"){var p=s.toLowerCase();O[p]&&(i=p),n&&(O[p]=n,i=p);var v=s.split("-");if(!i&&v.length>1)return m(v[0])}else{var D=s.name;O[D]=s,i=D}return!$&&i&&(V=i),i||!$&&V},_=function(m,s){if(B(m))return m.clone();var n=typeof s=="object"?s:{};return n.date=m,n.args=arguments,new at(n)},w=ot;w.l=R,w.i=B,w.w=function(m,s){return _(m,{locale:s.$L,utc:s.$u,x:s.$x,$offset:s.$offset})};var at=function(){function m(n){this.$L=R(n.locale,null,!0),this.parse(n)}var s=m.prototype;return s.parse=function(n){this.$d=function($){var i=$.date,p=$.utc;if(i===null)return new Date(NaN);if(w.u(i))return new Date;if(i instanceof Date)return new Date(i);if(typeof i=="string"&&!/Z$/i.test(i)){var v=i.match(z);if(v){var D=v[2]-1||0,k=(v[7]||"0").substring(0,3);return p?new Date(Date.UTC(v[1],D,v[3]||1,v[4]||0,v[5]||0,v[6]||0,k)):new Date(v[1],D,v[3]||1,v[4]||0,v[5]||0,v[6]||0,k)}}return new Date(i)}(n),this.$x=n.x||{},this.init()},s.init=function(){var n=this.$d;this.$y=n.getFullYear(),this.$M=n.getMonth(),this.$D=n.getDate(),this.$W=n.getDay(),this.$H=n.getHours(),this.$m=n.getMinutes(),this.$s=n.getSeconds(),this.$ms=n.getMilliseconds()},s.$utils=function(){return w},s.isValid=function(){return this.$d.toString()!==x},s.isSame=function(n,$){var i=_(n);return this.startOf($)<=i&&i<=this.endOf($)},s.isAfter=function(n,$){return _(n)<this.startOf($)},s.isBefore=function(n,$){return this.endOf($)<_(n)},s.$g=function(n,$,i){return w.u(n)?this[$]:this.set(i,n)},s.unix=function(){return Math.floor(this.valueOf()/1e3)},s.valueOf=function(){return this.$d.getTime()},s.startOf=function(n,$){var i=this,p=!!w.u($)||$,v=w.p(n),D=function(tt,W){var H=w.w(i.$u?Date.UTC(i.$y,W,tt):new Date(i.$y,W,tt),i);return p?H:H.endOf(f)},k=function(tt,W){return w.w(i.toDate()[tt].apply(i.toDate("s"),(p?[0,0,0,0]:[23,59,59,999]).slice(W)),i)},S=this.$W,I=this.$M,G=this.$D,X="set"+(this.$u?"UTC":"");switch(v){case o:return p?D(1,0):D(31,11);case h:return p?D(1,I):D(0,I+1);case b:var it=this.$locale().weekStart||0,st=(S<it?S+7:S)-it;return D(p?G-st:G+(6-st),I);case f:case g:return k(X+"Hours",0);case M:return k(X+"Minutes",1);case u:return k(X+"Seconds",2);case d:return k(X+"Milliseconds",3);default:return this.clone()}},s.endOf=function(n){return this.startOf(n,!1)},s.$set=function(n,$){var i,p=w.p(n),v="set"+(this.$u?"UTC":""),D=(i={},i[f]=v+"Date",i[g]=v+"Date",i[h]=v+"Month",i[o]=v+"FullYear",i[M]=v+"Hours",i[u]=v+"Minutes",i[d]=v+"Seconds",i[a]=v+"Milliseconds",i)[p],k=p===f?this.$D+($-this.$W):$;if(p===h||p===o){var S=this.clone().set(g,1);S.$d[D](k),S.init(),this.$d=S.set(g,Math.min(this.$D,S.daysInMonth())).$d}else D&&this.$d[D](k);return this.init(),this},s.set=function(n,$){return this.clone().$set(n,$)},s.get=function(n){return this[w.p(n)]()},s.add=function(n,$){var i,p=this;n=Number(n);var v=w.p($),D=function(I){var G=_(p);return w.w(G.date(G.date()+Math.round(I*n)),p)};if(v===h)return this.set(h,this.$M+n);if(v===o)return this.set(o,this.$y+n);if(v===f)return D(1);if(v===b)return D(7);var k=(i={},i[u]=c,i[M]=l,i[d]=t,i)[v]||1,S=this.$d.getTime()+n*k;return w.w(S,this)},s.subtract=function(n,$){return this.add(-1*n,$)},s.format=function(n){var $=this,i=this.$locale();if(!this.isValid())return i.invalidDate||x;var p=n||"YYYY-MM-DDTHH:mm:ssZ",v=w.z(this),D=this.$H,k=this.$m,S=this.$M,I=i.weekdays,G=i.months,X=function(W,H,ft,ht){return W&&(W[H]||W($,p))||ft[H].slice(0,ht)},it=function(W){return w.s(D%12||12,W,"0")},st=i.meridiem||function(W,H,ft){var ht=W<12?"AM":"PM";return ft?ht.toLowerCase():ht},tt={YY:String(this.$y).slice(-2),YYYY:this.$y,M:S+1,MM:w.s(S+1,2,"0"),MMM:X(i.monthsShort,S,G,3),MMMM:X(G,S),D:this.$D,DD:w.s(this.$D,2,"0"),d:String(this.$W),dd:X(i.weekdaysMin,this.$W,I,2),ddd:X(i.weekdaysShort,this.$W,I,3),dddd:I[this.$W],H:String(D),HH:w.s(D,2,"0"),h:it(1),hh:it(2),a:st(D,k,!0),A:st(D,k,!1),m:String(k),mm:w.s(k,2,"0"),s:String(this.$s),ss:w.s(this.$s,2,"0"),SSS:w.s(this.$ms,3,"0"),Z:v};return p.replace(q,function(W,H){return H||tt[W]||v.replace(":","")})},s.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},s.diff=function(n,$,i){var p,v=w.p($),D=_(n),k=(D.utcOffset()-this.utcOffset())*c,S=this-D,I=w.m(this,D);return I=(p={},p[o]=I/12,p[h]=I,p[y]=I/3,p[b]=(S-k)/6048e5,p[f]=(S-k)/864e5,p[M]=S/l,p[u]=S/c,p[d]=S/t,p)[v]||S,i?I:w.a(I)},s.daysInMonth=function(){return this.endOf(h).$D},s.$locale=function(){return O[this.$L]},s.locale=function(n,$){if(!n)return this.$L;var i=this.clone(),p=R(n,$,!0);return p&&(i.$L=p),i},s.clone=function(){return w.w(this.$d,this)},s.toDate=function(){return new Date(this.valueOf())},s.toJSON=function(){return this.isValid()?this.toISOString():null},s.toISOString=function(){return this.$d.toISOString()},s.toString=function(){return this.$d.toUTCString()},m}(),mt=at.prototype;return _.prototype=mt,[["$ms",a],["$s",d],["$m",u],["$H",M],["$W",f],["$M",h],["$y",o],["$D",g]].forEach(function(m){mt[m[1]]=function(s){return this.$g(s,m[0],m[1])}}),_.extend=function(m,s){return m.$i||(m(s,at,_),m.$i=!0),_},_.locale=R,_.isDayjs=B,_.unix=function(m){return _(1e3*m)},_.en=O[V],_.Ls=O,_.p={},_})})(dt);const U=dt.exports,j=(r,e="MM/DD HH:mm")=>U(r*1e3).format(e),At=(r=Math.floor(Date.now()/1e3))=>{const e=r*1e3,t=U(e).year(),c=U(e).month(),l=U(e).date(),a=U(e).day(),d=new Date(t,c,l-a).getTime();return Math.floor(d/1e3)};function It({pointWidth:r,timePerPixel:e,timeSpacing:t,screenScaleCount:c,scaleSpacing:l,scaleHeight:a,startTime:d,drawLine:u,drawText:M}){if(t===1){for(let f=0;f<c;f++){const b=f*l+r/2,h=Math.ceil(d+f*t);if(h%10===0){u(b,a.height5),M(b,a.height5+13,`${j(h,"HH:mm:ss")}`);continue}if(h%5===0){u(b,a.height3);continue}if(h%1===0){u(b,a.height1);continue}}return}if(t===10){const f=+j(d,"s")%10,b=f/e;for(let h=0;h<c;h++){const y=h*l-b-r/2,o=Math.ceil(d+h*t-f);if(o%60===0){u(y,a.height4),M(y,a.height5+13,`${j(o,"HH:mm")}`);continue}if(o%10===0){u(y,a.height1);continue}}return}if(t===30){const f=+j(d,"s")%30,b=f/e;for(let h=0;h<c;h++){const y=h*l-b-r/2,o=Math.ceil(d+h*t-f);if(o%(60*5)===0){u(y,a.height4),M(y,a.height5+13,`${j(o,"HH:mm")}`);continue}if(o%30===0){u(y,a.height1);continue}}return}if(t===60){const f=+j(d,"s")%60,b=f/e;for(let h=0;h<c;h++){const y=h*l-b-r/2,o=Math.ceil(d+h*t-f);if(o%(60*60)===0){u(y,a.height5),M(y,a.height5+13,`${j(o)}`);continue}if(o%(60*5)===0){u(y,a.height3),o%(60*10)===0&&M(y,a.height5+13,`${j(o,"HH:mm")}`);continue}if(o%60===0){u(y,a.height1);continue}}return}if(t===120){const f=j(d,"m:s").split(":"),h=(+f[0]*60+ +f[1])%120,y=h/e;for(let o=0;o<c;o++){const g=o*l-y-r/2,x=Math.ceil(d+o*t-h);if(x%(60*30)===0){u(g,a.height5),M(g,a.height5+13,`${j(x)}`);continue}if(x%(60*10)===0){u(g,a.height3);continue}if(x%(60*2)===0){u(g,a.height1);continue}}return}if(t===300){const f=j(d,"m:s").split(":"),h=(+f[0]*60+ +f[1])%300,y=h/e;for(let o=0;o<c;o++){const g=o*l-y-r/2,x=Math.ceil(d+o*t-h);if(x%(60*60)===0){u(g,a.height5),M(g,a.height5+13,`${j(x)}`);continue}if(x%(60*30)===0){u(g,a.height3);continue}if(x%(60*5)===0){u(g,a.height1);continue}}return}if(t===7200){const f=j(d,"H:m:s").split(":"),h=(+f[0]*3600+ +f[1]*60+ +f[2])%7200,y=h/e;for(let o=0;o<c;o++){const g=o*l-y-r/2,x=Math.ceil(d+o*t-h);if(x%(3600*24)===0){u(g,a.height5),M(g,a.height5+13,`${j(x,"MM/DD HH:mm")}`);continue}if(x%(3600*12)===0){u(g,a.height3);continue}if(x%7200===0){u(g,a.height1);continue}}return}if(t===86400){const f=j(d,"H:m:s").split(":"),h=(+f[0]*3600+ +f[1]*60+ +f[2])%86400,y=h/e;for(let o=0;o<c;o++){const g=o*l-y-r/2,x=Math.ceil(d+o*t-h);if(j(x,"D")==="1"){u(g,a.height5),M(g,a.height5+13,`${j(x,"YYYY/MM/DD")}`);continue}if(x%86400===57600){u(g,a.height1);continue}}return}if(t===604800){const f=d-At(d),b=f/e,h=new Array(c).fill(!1),y=o=>{for(let g=o;g>o-7;g--)if(h[g])return!1;return!0};for(let o=0;o<c;o++){const g=o*l-b,x=Math.ceil(d+o*t-f);if(U(x*1e3).month()===0&&(U(x*1e3).date()>0||U(x*1e3).date()<=31)&&y(o)){h[o]=!0,u(g,a.height5),M(g,a.height5+13,`${j(x,"YYYY/MM/DD")}`);continue}if(U(x*1e3).day()===0){u(g,a.height1);continue}}return}}const Wt={fill:!1,bgColor:"rgba(0,0,0,0.5)",textColor:"#ffffff",scaleColor:"#ffffff",areaBgColor:"#ffffff55",pointColor:"#00aeec",pointWidth:3,scaleSpacing:7,fps:60,zoom:2,maxZoom:9,minZoom:1,timeFormat:"YYYY/MM/DD HH:mm:ss"};class Et{constructor(e,t){E(this,"$canvas");E(this,"canvasContext");et(this,P,void 0);E(this,"currentTime");E(this,"areas");et(this,J,void 0);et(this,F,void 0);E(this,"scaleSpacing");E(this,"bgColor");et(this,L,void 0);E(this,"pointWidth");E(this,"pointColor");E(this,"textColor");E(this,"scaleColor");E(this,"areaBgColor");et(this,Q,void 0);E(this,"fps");E(this,"timeFormat");if(!e)throw new Error("canvas id is required!");this.$canvas=document.getElementById(e),this.canvasContext=this.$canvas.getContext("2d");const{fill:c,width:l,height:a,bgColor:d,textColor:u,scaleColor:M,areaBgColor:f,pointColor:b,pointWidth:h,scaleSpacing:y,fps:o,zoom:g,maxZoom:x,minZoom:z,timeFormat:q}={...Wt,...t};if(g<z||g>x||g%1!==0)throw new Error(`zoom must be minZoom ~ maxZoom(${z} ~1 ${x}), and must be an integer`);if(x<1||x>9||x%1!==0)throw new Error("maxZoom must be 1 ~ 9, and must be an integer");if(z<1||z>9||z%1!==0)throw new Error("minZoom must be 1 ~ 9, and must be an integer");if(x<z)throw new Error("maxZoom must be greater than minZoom");if(c){const Z=this.$canvas.parentElement;this.$canvas.width=Z.clientWidth,this.$canvas.height=Z.clientHeight,new ResizeObserver(lt(this._onParentResize.bind(this),200)).observe(Z)}else l&&(this.$canvas.width=l),a&&(this.$canvas.height=a);N(this,Q,!1),N(this,P,T()),this.currentTime=0;const K=[1,10,30,60,120,300,7200,86400,604800];N(this,J,[]);for(let Z=z-1;Z<x;Z++)A(this,J).push(K[Z]);N(this,F,K[g-1]),this.scaleSpacing=y,N(this,L,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10}),this.bgColor=d,this.pointWidth=h,this.pointColor=b,this.textColor=u,this.scaleColor=M,this.areaBgColor=f,this.fps=o,this.timeFormat=q}draw({currentTime:e,areas:t,_privateFlag:c}={}){if(A(this,Q)&&!c)return;this.currentTime=e||Math.floor(Date.now()/1e3),this.areas=t||[];const l=Math.ceil(this.$canvas.width/this.scaleSpacing),a=l*A(this,F),d=this.currentTime-a/2,u=this.currentTime+a/2,M=this.$canvas.width/2,f=a/this.$canvas.width;this.clear(),this.drawArea(0,0,this.$canvas.width,this.$canvas.height,this.bgColor),this.areas.forEach(b=>{const h=b.startTime<d?0:Math.floor((b.startTime-d)/f),y=b.endTime>u?this.$canvas.width:Math.floor((b.endTime-d)/f);this.drawArea(h,0,y,this.$canvas.height,b.bgColor||this.areaBgColor)}),It.bind(this)({pointWidth:this.pointWidth,timePerPixel:f,scaleHeight:A(this,L),scaleSpacing:this.scaleSpacing,timeSpacing:A(this,F),screenScaleCount:l,startTime:d,drawLine:this.drawLine.bind(this),drawText:this.drawText.bind(this)}),this.drawTimelineScale(A(this,F)),this.drawLine(M-this.pointWidth/2,this.$canvas.height,this.pointWidth,this.pointColor),this.drawArea(M-54,4,M+54,18,this.pointColor),this.drawText(M,6,`${j(this.currentTime,this.timeFormat)}`,this.textColor,"center","top"),this.$canvas.onwheel=this._onZoom.bind(this),this.$canvas.onmousedown=this._onDrag.bind(this)}_onDrag({clientX:e}){N(this,Q,!0);let t=0;document.onmousemove=lt(c=>{const l=c.clientX-e,a=this.currentTime-A(this,F)/this.scaleSpacing*(l-t);t=l,this.draw({currentTime:Math.round(a),areas:this.areas,_privateFlag:!0})},A(this,F)===1?100:1e3/this.fps),document.onmouseup=()=>{document.onmousemove=null,document.onmouseup=null,N(this,Q,!1),this.emit("timeUpdate",this.currentTime)}}_onZoom(e){e.preventDefault();const t=A(this,J).findIndex(c=>c===A(this,F));e.deltaY<0&&t>0?(N(this,F,A(this,J)[t-1]),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0})):e.deltaY>0&&t<A(this,J).length-1&&(N(this,F,A(this,J)[t+1]),this.draw({currentTime:this.currentTime,areas:this.areas,_privateFlag:!0}))}_onParentResize(){const e=this.$canvas.parentNode;!e||(this.$canvas.width=e.clientWidth,this.$canvas.height=e.clientHeight,N(this,L,{height6:this.$canvas.height/2,height5:this.$canvas.height/3,height4:this.$canvas.height/4,height3:this.$canvas.height/5,height2:this.$canvas.height/8,height1:this.$canvas.height/10}),this.draw({currentTime:this.currentTime,areas:this.areas}))}clear(){this.canvasContext&&this.canvasContext.clearRect(0,0,this.$canvas.width,this.$canvas.height),this.$canvas&&(this.$canvas.onwheel=null,this.$canvas.onmousedown=null)}drawTimelineScale(e){let t="";switch(e){case 1:t="1s";break;case 10:t="10s";break;case 30:t="30s";break;case 60:t="1min";break;case 120:t="2min";break;case 300:t="5min";break;case 7200:t="2hour";break;case 86400:t="1day";break;case 604800:t="1week";break}this.drawText(this.scaleSpacing+12,9,`${t}`,this.textColor,"left","middle"),this.canvasContext.beginPath(),this.canvasContext.moveTo(5,6),this.canvasContext.lineTo(5,10),this.canvasContext.lineTo(this.scaleSpacing+7,10),this.canvasContext.lineTo(this.scaleSpacing+7,6),this.canvasContext.strokeStyle=this.scaleColor,this.canvasContext.lineWidth=1.5,this.canvasContext.stroke()}drawLine(e,t,c=1,l=this.scaleColor){this.canvasContext.beginPath(),this.canvasContext.moveTo(e,this.$canvas.height),this.canvasContext.lineTo(e,this.$canvas.height-t),this.canvasContext.closePath(),this.canvasContext.strokeStyle=l,this.canvasContext.lineWidth=c,this.canvasContext.stroke()}drawText(e,t,c,l=this.textColor,a="center",d="alphabetic"){this.canvasContext.beginPath(),this.canvasContext.font="11px Arial",this.canvasContext.fillStyle=l,this.canvasContext.textAlign=a,this.canvasContext.textBaseline=d,this.canvasContext.fillText(c,e,t)}drawArea(e,t,c,l,a){this.canvasContext.beginPath(),this.canvasContext.rect(e,t,c-e,l-t),this.canvasContext.fillStyle=a,this.canvasContext.fill()}on(e,t){A(this,P).on(e,t)}off(e,t){A(this,P).off(e,t)}emit(...e){A(this,P).emit(...e)}}return P=new WeakMap,J=new WeakMap,F=new WeakMap,L=new WeakMap,Q=new WeakMap,Et});
(function($,d){typeof exports=="object"&&typeof module<"u"?module.exports=d():typeof define=="function"&&define.amd?define(d):($=typeof globalThis<"u"?globalThis:$||self,$.$timeline=d())})(this,function(){var J,E,P,w,U,Z,it,xt,st,bt,nt,St,rt,Tt,at,Ft,ot,Ct,G,Dt,R,mt,ht,Ht;"use strict";var Pt=Object.defineProperty;var kt=($,d,y)=>d in $?Pt($,d,{enumerable:!0,configurable:!0,writable:!0,value:y}):$[d]=y;var et=($,d,y)=>(kt($,typeof d!="symbol"?d+"":d,y),y),Yt=($,d,y)=>{if(!d.has($))throw TypeError("Cannot "+y)};var u=($,d,y)=>(Yt($,d,"read from private field"),y?y.call($):d.get($)),H=($,d,y)=>{if(d.has($))throw TypeError("Cannot add the same private member more than once");d instanceof WeakSet?d.add($):d.set($,y)},A=($,d,y,V)=>(Yt($,d,"write to private field"),V?V.call($,y):d.set($,y),y);var _=($,d,y)=>(Yt($,d,"access private method"),y);function $(l){return{all:l=l||new Map,on:function(n,r){var s=l.get(n);s?s.push(r):l.set(n,[r])},off:function(n,r){var s=l.get(n);s&&(r?s.splice(s.indexOf(r)>>>0,1):l.set(n,[]))},emit:function(n,r){var s=l.get(n);s&&s.slice().map(function(f){f(r)}),(s=l.get("*"))&&s.slice().map(function(f){f(n,r)})}}}var d=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function y(l){return l&&l.__esModule&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l}var V={exports:{}};(function(l,n){(function(r,s){l.exports=s()})(d,function(){var r=1e3,s=6e4,f=36e5,v="millisecond",p="second",Y="minute",M="hour",b="day",S="week",F="month",L="quarter",W="year",z="date",ct="Invalid Date",$t=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,ut=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,vt={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(a){var i=["th","st","nd","rd"],t=a%100;return"["+a+(i[(t-20)%10]||i[t]||i[0])+"]"}},I=function(a,i,t){var o=String(a);return!o||o.length>=i?a:""+Array(i+1-o.length).join(t)+a},Q={s:I,z:function(a){var i=-a.utcOffset(),t=Math.abs(i),o=Math.floor(t/60),e=t%60;return(i<=0?"+":"-")+I(o,2,"0")+":"+I(e,2,"0")},m:function a(i,t){if(i.date()<t.date())return-a(t,i);var o=12*(t.year()-i.year())+(t.month()-i.month()),e=i.clone().add(o,F),c=t-e<0,h=i.clone().add(o+(c?-1:1),F);return+(-(o+(t-e)/(c?e-h:h-e))||0)},a:function(a){return a<0?Math.ceil(a)||0:Math.floor(a)},p:function(a){return{M:F,y:W,w:S,d:b,D:z,h:M,m:Y,s:p,ms:v,Q:L}[a]||String(a||"").toLowerCase().replace(/s$/,"")},u:function(a){return a===void 0}},j="en",B={};B[j]=vt;var pt=function(a){return a instanceof lt},ft=function a(i,t,o){var e;if(!i)return j;if(typeof i=="string"){var c=i.toLowerCase();B[c]&&(e=c),t&&(B[c]=t,e=c);var h=i.split("-");if(!e&&h.length>1)return a(h[0])}else{var g=i.name;B[g]=i,e=g}return!o&&e&&(j=e),e||!o&&j},T=function(a,i){if(pt(a))return a.clone();var t=typeof i=="object"?i:{};return t.date=a,t.args=arguments,new lt(t)},m=Q;m.l=ft,m.i=pt,m.w=function(a,i){return T(a,{locale:i.$L,utc:i.$u,x:i.$x,$offset:i.$offset})};var lt=function(){function a(t){this.$L=ft(t.locale,null,!0),this.parse(t)}var i=a.prototype;return i.parse=function(t){this.$d=function(o){var e=o.date,c=o.utc;if(e===null)return new Date(NaN);if(m.u(e))return new Date;if(e instanceof Date)return new Date(e);if(typeof e=="string"&&!/Z$/i.test(e)){var h=e.match($t);if(h){var g=h[2]-1||0,x=(h[7]||"0").substring(0,3);return c?new Date(Date.UTC(h[1],g,h[3]||1,h[4]||0,h[5]||0,h[6]||0,x)):new Date(h[1],g,h[3]||1,h[4]||0,h[5]||0,h[6]||0,x)}}return new Date(e)}(t),this.$x=t.x||{},this.init()},i.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds()},i.$utils=function(){return m},i.isValid=function(){return this.$d.toString()!==ct},i.isSame=function(t,o){var e=T(t);return this.startOf(o)<=e&&e<=this.endOf(o)},i.isAfter=function(t,o){return T(t)<this.startOf(o)},i.isBefore=function(t,o){return this.endOf(o)<T(t)},i.$g=function(t,o,e){return m.u(t)?this[o]:this.set(e,t)},i.unix=function(){return Math.floor(this.valueOf()/1e3)},i.valueOf=function(){return this.$d.getTime()},i.startOf=function(t,o){var e=this,c=!!m.u(o)||o,h=m.p(t),g=function(q,O){var N=m.w(e.$u?Date.UTC(e.$y,O,q):new Date(e.$y,O,q),e);return c?N:N.endOf(b)},x=function(q,O){return m.w(e.toDate()[q].apply(e.toDate("s"),(c?[0,0,0,0]:[23,59,59,999]).slice(O)),e)},D=this.$W,C=this.$M,X=this.$D,k="set"+(this.$u?"UTC":"");switch(h){case W:return c?g(1,0):g(31,11);case F:return c?g(1,C):g(0,C+1);case S:var K=this.$locale().weekStart||0,tt=(D<K?D+7:D)-K;return g(c?X-tt:X+(6-tt),C);case b:case z:return x(k+"Hours",0);case M:return x(k+"Minutes",1);case Y:return x(k+"Seconds",2);case p:return x(k+"Milliseconds",3);default:return this.clone()}},i.endOf=function(t){return this.startOf(t,!1)},i.$set=function(t,o){var e,c=m.p(t),h="set"+(this.$u?"UTC":""),g=(e={},e[b]=h+"Date",e[z]=h+"Date",e[F]=h+"Month",e[W]=h+"FullYear",e[M]=h+"Hours",e[Y]=h+"Minutes",e[p]=h+"Seconds",e[v]=h+"Milliseconds",e)[c],x=c===b?this.$D+(o-this.$W):o;if(c===F||c===W){var D=this.clone().set(z,1);D.$d[g](x),D.init(),this.$d=D.set(z,Math.min(this.$D,D.daysInMonth())).$d}else g&&this.$d[g](x);return this.init(),this},i.set=function(t,o){return this.clone().$set(t,o)},i.get=function(t){return this[m.p(t)]()},i.add=function(t,o){var e,c=this;t=Number(t);var h=m.p(o),g=function(C){var X=T(c);return m.w(X.date(X.date()+Math.round(C*t)),c)};if(h===F)return this.set(F,this.$M+t);if(h===W)return this.set(W,this.$y+t);if(h===b)return g(1);if(h===S)return g(7);var x=(e={},e[Y]=s,e[M]=f,e[p]=r,e)[h]||1,D=this.$d.getTime()+t*x;return m.w(D,this)},i.subtract=function(t,o){return this.add(-1*t,o)},i.format=function(t){var o=this,e=this.$locale();if(!this.isValid())return e.invalidDate||ct;var c=t||"YYYY-MM-DDTHH:mm:ssZ",h=m.z(this),g=this.$H,x=this.$m,D=this.$M,C=e.weekdays,X=e.months,k=function(O,N,Mt,dt){return O&&(O[N]||O(o,c))||Mt[N].slice(0,dt)},K=function(O){return m.s(g%12||12,O,"0")},tt=e.meridiem||function(O,N,Mt){var dt=O<12?"AM":"PM";return Mt?dt.toLowerCase():dt},q={YY:String(this.$y).slice(-2),YYYY:m.s(this.$y,4,"0"),M:D+1,MM:m.s(D+1,2,"0"),MMM:k(e.monthsShort,D,X,3),MMMM:k(X,D),D:this.$D,DD:m.s(this.$D,2,"0"),d:String(this.$W),dd:k(e.weekdaysMin,this.$W,C,2),ddd:k(e.weekdaysShort,this.$W,C,3),dddd:C[this.$W],H:String(g),HH:m.s(g,2,"0"),h:K(1),hh:K(2),a:tt(g,x,!0),A:tt(g,x,!1),m:String(x),mm:m.s(x,2,"0"),s:String(this.$s),ss:m.s(this.$s,2,"0"),SSS:m.s(this.$ms,3,"0"),Z:h};return c.replace(ut,function(O,N){return N||q[O]||h.replace(":","")})},i.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},i.diff=function(t,o,e){var c,h=m.p(o),g=T(t),x=(g.utcOffset()-this.utcOffset())*s,D=this-g,C=m.m(this,g);return C=(c={},c[W]=C/12,c[F]=C,c[L]=C/3,c[S]=(D-x)/6048e5,c[b]=(D-x)/864e5,c[M]=D/f,c[Y]=D/s,c[p]=D/r,c)[h]||D,e?C:m.a(C)},i.daysInMonth=function(){return this.endOf(F).$D},i.$locale=function(){return B[this.$L]},i.locale=function(t,o){if(!t)return this.$L;var e=this.clone(),c=ft(t,o,!0);return c&&(e.$L=c),e},i.clone=function(){return m.w(this.$d,this)},i.toDate=function(){return new Date(this.valueOf())},i.toJSON=function(){return this.isValid()?this.toISOString():null},i.toISOString=function(){return this.$d.toISOString()},i.toString=function(){return this.$d.toUTCString()},a}(),yt=lt.prototype;return T.prototype=yt,[["$ms",v],["$s",p],["$m",Y],["$H",M],["$W",b],["$M",F],["$y",W],["$D",z]].forEach(function(a){yt[a[1]]=function(i){return this.$g(i,a[0],a[1])}}),T.extend=function(a,i){return a.$i||(a(i,lt,T),a.$i=!0),T},T.locale=ft,T.isDayjs=pt,T.unix=function(a){return T(1e3*a)},T.en=B[j],T.Ls=B,T.p={},T})})(V);var Lt=V.exports;const Ot=y(Lt),gt=(l,n="MM/DD HH:mm")=>Ot(l).format(n),wt=(l,n)=>{let r,s=0;return(...f)=>{const v=Date.now(),p=v-s;!s||p>=n?(s=v,l.apply(void 0,f)):r||(r=setTimeout(()=>{s=v,l.apply(void 0,f),r=null},n-p))}},Et=(l,n)=>{const r=document.createElement("canvas");r.width=r.height=1;const s=r.getContext("2d");s.fillStyle=l,s.fillRect(0,0,1,1);const f=s.getImageData(0,0,1,1).data;return`rgba(${f[0]}, ${f[1]}, ${f[2]}, ${n})`},_t=({xCenterPoint:l,cfg:n,timePerPixel:r,timeSpacing:s,currentTime:f,$canvas:v,screenScaleCount:p,scaleHeight:Y,startTime:M,drawLine:b,drawText:S,drawArea:F})=>{const L=({space:W,scaleFormat:z,bgFormat:ct,currentFormat:$t})=>{S({x:v.width-l/10,y:6,text:gt(f,ct),fontSize:`${v.height-5}px`,align:"right",baseLine:"top",color:n.bgTextColor});const ut=M%s,vt=ut/r;for(let I=0;I<p;I++){const Q=I*n.scaleSpacing-vt-n.pointWidth/2,j=M+I*s-ut;if(j%(s*W)===0){b({x:Q,y:Y.long}),S({x:Q,y:v.height-Y.long-5,text:gt(j,z),baseLine:"bottom"});continue}b({x:Q,y:Y.short})}b({x:l-n.pointWidth/2,y:v.height,width:n.pointWidth,color:n.pointColor}),F({startX:l-50,startY:4,endX:l+50,endY:18,bgColor:n.pointColor}),S({x:l,y:6,text:gt(f,$t),align:"center",baseLine:"top"})};s<100?L({space:10,scaleFormat:"mm:ss:SSS",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss:SSS"}):s<1e3?L({space:10,scaleFormat:"mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss:SSS"}):s<1e4?L({space:10,scaleFormat:"mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss"}):s<6e4?L({space:12,scaleFormat:"HH:mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss"}):s<6e5?L({space:10,scaleFormat:"HH:mm:ss",bgFormat:"YYYY/MM/DD",currentFormat:"HH:mm:ss"}):s<36e5?L({space:12,scaleFormat:"MM/DD HH:mm",bgFormat:"YYYY/MM",currentFormat:"MM/DD HH:mm:ss"}):s<864e5?L({space:12,scaleFormat:"MM/DD HH:mm",bgFormat:"YYYY/MM",currentFormat:"YYYY/MM/DD HH:mm"}):s<6048e5?L({space:10,scaleFormat:"YYYY/MM/DD",bgFormat:"YYYY",currentFormat:"YYYY/MM/DD"}):L({space:10,scaleFormat:"YYYY/MM/DD",bgFormat:"YYYY",currentFormat:"YYYY/MM/DD"})},At={fill:!0,width:1e3,height:60,bgColor:"rgba(0,0,0,0.5)",areaBgColor:"#ffffff55",textColor:"#ffffff",scaleColor:"#ffffff",pointColor:"#00aeec",pointWidth:3,scaleSpacing:7,fps:60,zoom:3,timeSpacingList:[10,100,1e3,1e4,6e4,6e5,36e5,864e5,6048e5]};class Wt{constructor(n,r){H(this,it);H(this,st);H(this,nt);H(this,rt);H(this,at);H(this,ot);H(this,G);H(this,R);H(this,ht);et(this,"$canvas");et(this,"ctx");et(this,"$canvasParent");et(this,"cfg");H(this,J,$());H(this,E,0);H(this,P,void 0);H(this,w,void 0);H(this,U,void 0);H(this,Z,!1);if(!n)throw new Error("canvas Element Or Element ID is required!");if(typeof n=="string"?this.$canvas=document.querySelector(n):this.$canvas=n,!(this.$canvas instanceof HTMLCanvasElement))throw new Error("element must be canvas!");this.ctx=this.$canvas.getContext("2d"),this.cfg={...At,...r};const{fill:s,width:f,height:v,zoom:p,timeSpacingList:Y,scaleHeight:M,textColor:b}=this.cfg;if(this.cfg.bgTextColor=Et(b,.18),p<0||p>=Y.length||p%1!==0)throw new Error(`zoom must be 0 ~ ${Y.length-1}, and must be an integer`);if(s){const S=this.$canvas.parentElement;this.$canvasParent=S,this.$canvas.width=S.clientWidth,this.$canvas.height=S.clientHeight,new ResizeObserver(wt(_(this,nt,St).bind(this),200)).observe(S)}else f&&(this.$canvas.width=f),v&&(this.$canvas.height=v);A(this,w,Y[p]),M!=null&&M.long&&(M!=null&&M.short)?A(this,U,M):A(this,U,{long:this.$canvas.height/3,medium:this.$canvas.height/6,short:this.$canvas.height/10}),this.draw(),this.$canvas.addEventListener("wheel",_(this,st,bt).bind(this),{passive:!1}),this.$canvas.addEventListener("mousedown",_(this,it,xt).bind(this))}draw({currentTime:n,areas:r,_privateFlag:s}={}){if(u(this,Z)&&!s)return;A(this,E,n||Date.now()),A(this,P,r||[]);const f=Math.ceil(this.$canvas.width/this.cfg.scaleSpacing),v=f*u(this,w),p=u(this,E)-v/2,Y=u(this,E)+v/2,M=this.$canvas.width/2,b=v/this.$canvas.width;_(this,rt,Tt).call(this),_(this,R,mt).call(this,{startX:0,startY:0,endX:this.$canvas.width,endY:this.$canvas.height,bgColor:this.cfg.bgColor}),u(this,P).forEach(S=>{const F=S.startTime<p?0:Math.floor((S.startTime-p)/b),L=S.endTime>Y?this.$canvas.width:Math.floor((S.endTime-p)/b);_(this,R,mt).call(this,{startX:F,startY:0,endX:L,endY:this.$canvas.height,bgColor:S.bgColor||this.cfg.areaBgColor})}),_t.bind(this)({xCenterPoint:M,screenScaleCount:f,startTime:p,timePerPixel:b,scaleHeight:u(this,U),timeSpacing:u(this,w),currentTime:u(this,E),$canvas:this.$canvas,cfg:this.cfg,drawLine:_(this,ot,Ct).bind(this),drawText:_(this,G,Dt).bind(this),drawArea:_(this,R,mt).bind(this)}),_(this,at,Ft).call(this)}getCurrentTime(){return u(this,E)}on(n,r){u(this,J).on(n,r)}off(n,r){u(this,J).off(n,r)}}return J=new WeakMap,E=new WeakMap,P=new WeakMap,w=new WeakMap,U=new WeakMap,Z=new WeakMap,it=new WeakSet,xt=function(n){A(this,Z,!0);let r=0,s=u(this,E);const f=wt(({offsetX:Y})=>{if(!u(this,Z))return;const M=Y-n.offsetX;s=Math.round(u(this,E)-u(this,w)/this.cfg.scaleSpacing*(M-r)),r=M,this.draw({currentTime:s,areas:u(this,P),_privateFlag:!0})},1e3/this.cfg.fps),v=({offsetX:Y,offsetY:M})=>{(Y<3||Y>this.$canvas.width-3||M<3||M>this.$canvas.height-3)&&(this.$canvas.removeEventListener("mousemove",f),this.$canvas.removeEventListener("mousemove",v))},p=()=>{this.$canvas.removeEventListener("mousemove",f),this.$canvas.removeEventListener("mousemove",v),document.removeEventListener("mouseup",p),A(this,Z,!1),_(this,ht,Ht).call(this,"dragged",s)};this.$canvas.addEventListener("mousemove",f),this.$canvas.addEventListener("mousemove",v),document.addEventListener("mouseup",p)},st=new WeakSet,bt=function(n){n.preventDefault();const r=this.cfg.timeSpacingList.findIndex(s=>s===u(this,w));n.deltaY<0&&r>0?(A(this,w,this.cfg.timeSpacingList[r-1]),this.draw({currentTime:u(this,E),areas:u(this,P),_privateFlag:!0})):n.deltaY>0&&r<this.cfg.timeSpacingList.length-1&&(A(this,w,this.cfg.timeSpacingList[r+1]),this.draw({currentTime:u(this,E),areas:u(this,P),_privateFlag:!0}))},nt=new WeakSet,St=function(){this.$canvasParent&&(this.$canvas.width=this.$canvasParent.clientWidth,this.$canvas.height=this.$canvasParent.clientHeight,this.cfg.scaleHeight||A(this,U,{long:this.$canvas.height/3,medium:this.$canvas.height/6,short:this.$canvas.height/10}),this.draw({currentTime:u(this,E),areas:u(this,P)}))},rt=new WeakSet,Tt=function(){this.ctx.clearRect(0,0,this.$canvas.width,this.$canvas.height)},at=new WeakSet,Ft=function(){const n=()=>u(this,w)<1e3?`${u(this,w)}ms`:u(this,w)<6e4?`${Math.round(u(this,w)/100)/10}sec`:u(this,w)<36e5?`${Math.round(u(this,w)/100/60)/10}min`:u(this,w)<864e5?`${Math.round(u(this,w)/100/60/60)/10}hours`:u(this,w)<6048e5?`${Math.round(u(this,w)/100/60/60/24)/10}days`:`${Math.round(u(this,w)/100/60/60/24/7)/10}weeks`;_(this,G,Dt).call(this,{x:this.cfg.scaleSpacing+12,y:9,text:n(),align:"left",baseLine:"middle"}),this.ctx.beginPath(),this.ctx.moveTo(5,6),this.ctx.lineTo(5,10),this.ctx.lineTo(this.cfg.scaleSpacing+6,10),this.ctx.lineTo(this.cfg.scaleSpacing+6,6),this.ctx.strokeStyle=this.cfg.scaleColor,this.ctx.lineWidth=1.5,this.ctx.stroke()},ot=new WeakSet,Ct=function({x:n,y:r,width:s=1,color:f=this.cfg.scaleColor}){this.ctx.beginPath(),this.ctx.moveTo(n,this.$canvas.height),this.ctx.lineTo(n,this.$canvas.height-r),this.ctx.closePath(),this.ctx.strokeStyle=f,this.ctx.lineWidth=s,this.ctx.stroke()},G=new WeakSet,Dt=function({x:n,y:r,text:s,color:f=this.cfg.textColor,fontSize:v="11px",align:p="center",baseLine:Y="alphabetic"}){this.ctx.beginPath(),this.ctx.font=`${v} Arial`,this.ctx.fillStyle=f,this.ctx.textAlign=p,this.ctx.textBaseline=Y,this.ctx.fillText(s,n,r)},R=new WeakSet,mt=function({startX:n,startY:r,endX:s,endY:f,bgColor:v}){this.ctx.beginPath(),this.ctx.rect(n,r,s-n,f-r),this.ctx.fillStyle=v,this.ctx.fill()},ht=new WeakSet,Ht=function(...n){u(this,J).emit(...n)},Wt});

27

package.json
{
"name": "@losting/timeline",
"version": "2.2.0",
"description": "canvas timeline",
"version": "3.0.0",
"description": "Canvas timeline supports zooming, dragging, infinite scrolling, and custom control levels.",
"type": "module",

@@ -11,6 +11,5 @@ "main": "./dist/timeline.iife.js",

"dev": "vite",
"build": "tsc && vite build",
"build": "vite build",
"preview": "vite preview",
"release": "release-it",
"prepublishOnly": "pnpm run build"
"release": "release-it"
},

@@ -21,4 +20,5 @@ "files": [

"types",
"README.md",
"example/demo.png",
"README.md"
"index.html"
],

@@ -44,10 +44,11 @@ "keywords": [

"devDependencies": {
"@types/lodash.throttle": "^4.1.7",
"dayjs": "^1.11.7",
"lodash.throttle": "^4.1.1",
"mitt": "^3.0.0",
"release-it": "^15.10.1",
"typescript": "^4.9.5",
"vite": "^3.2.6"
"@types/color": "^3.0.3",
"release-it": "^15.10.3",
"typescript": "^5.0.4",
"vite": "^4.3.9"
},
"dependencies": {
"dayjs": "^1.11.8",
"mitt": "^3.0.0"
}
}

156

README.md

@@ -1,15 +0,9 @@

<!--
* @Author: losting
* @Date: 2022-05-07 15:31:25
* @LastEditTime: 2023-02-21 10:27:02
* @LastEditors: thelostword
* @Description:
* @FilePath: \timeline\README.md
-->
中文 | [English](./README_EN.md)
# timeline
Canvas 时间轴，支持缩放、拖拽、无限滚动
简体中文 | [English](./README_EN.md)
# Timeline
Canvas 时间轴，支持缩放、拖拽、无限滚动、自定义控制级别
![预览图](./example/demo.png)
[演示地址](thelostword.github.io/timeline/)
### es module
## 如何使用
### ES Module
``` shell

@@ -19,5 +13,3 @@ npm install @losting/timeline

``` html
<div id="root" style="width: 100%;height: 70px;">
<canvas id="timeline"></canvas>
</div>
<canvas id="Timeline"></canvas>
```

@@ -28,26 +20,28 @@

// new Timeline(canvasId, options)
const timeline = new Timeline('timeline', {
fill: true,
const timeline = new Timeline('#Timeline', {
fill: false,
width: 1000,
height: 60,
});
// 自定义绘制
timeline.draw({
currentTime: 1651829532,
currentTime: 1651827817000,
areas: [{
startTime: 1651827433,
endTime: 1651829413,
// bgColor: '#00AEEC55'
startTime: 1651827433000,
endTime: 1651829413000,
bgColor: '#f897aa'
},{
startTime: 1651829533,
endTime: 1651832533,
// bgColor: '#00AEEC55'
startTime: 1651829533000,
endTime: 1651832533000,
}],
});
timeline.on('timeUpdate', (time) => {
console.log('selected time:', time);
timeline.on('dragged', (timestamp) => {
console.log(new Date(timestamp));
// ...
})
```
### 直接使用
### CDN
``` html

@@ -61,12 +55,8 @@ <!DOCTYPE html>

<title>Document</title>
<script src="./dist/timeline.iife.js"></script>
<script src="https://unpkg.com/@losting/timeline@3.0.0/dist/timeline.iife.js"></script>
</head>
<body>
<div id="root" style="width: 100%;height: 70px;">
<canvas id="timeline"></canvas>
</div>
<canvas id="Timeline"></canvas>
<script>
const timeline = new window['$timeline']('timeline', {
fill: true,
});
const timeline = new window['$timeline']('#Timeline');
// ....

@@ -78,8 +68,9 @@ </script>

### TimeLine options
## 配置文档
### Config
| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| width | number | 无 | canvas宽度 |
| height | number | 无 | canvas高度 |
| fill | boolean | false | 是否适应父容器宽高,若为false则需要手动设定canvas宽高 |
| fill | boolean | true | 是否适应父容器宽高，若为false则需要手动设定canvas宽高 |
| width | number | 1000 | canvas宽度 |
| height | number | 60 | canvas高度 |
| bgColor | string | rgba(0,0,0,0.5) | canvas背景色 |

@@ -93,37 +84,68 @@ | textColor | string | #ffffff | 文字颜色 |

| fps | number | 60 | 帧数 |
| zoom | integer | 2 | 初始缩放值，`minZoom` ~ `maxZoom` 之间(包含)的正整数 |
| maxZoom | integer | 9 | 最大缩放限制，1~9之间的整数 |
| minZoom | integer | 1 | 最小缩放限制，1~9之间的整数 |
| timeFormat | string | YYYY/MM/DD HH:mm:ss | 时间格式 |
| zoom | integer | 3 | 初始缩放值，`0` ~ `timeSpacingList.length - 1` 之间(包含)的正整数。 对应 `timeSpacingList` 的索引值 |
| timeSpacingList | number[] | [10, 100, 1000, 10000, 60000, 600000, 3600000, 86400000, 604800000] | 自定义每刻度所占时间（毫秒） |
| ~~maxZoom~~ | - | - | 已移除，设置 `timeSpacingList` 替代 |
| ~~minZoom~~ | - | - | 已移除，设置 `timeSpacingList` 替代 |
| ~~timeFormat~~ | - | - | 已移除 |
### 事件
### Events
| 方法名 | 说明 |
| --- | --- |
| draw | 生成时间轴，返回值：无 |
| on | 事件监听。 |
| 事件名 | 说明 | 参数示例 |
| --- | --- | --- |
| draw | timeline 的绘制方法 | draw([DrawConfig](#DrawConfig)) |
| on | 监听 timeline 内部事件，目前只支持事件名 `dragged`， 拖动结束的回调事件。 | on(name, (listener) => void) |
| off | 取消监听 timeline 内部事件 | off(name, listener)、 取消全部 off('*') |
#### draw方法
| 参数 | 类型 | 是否必填 | 说明 |
| --- | --- | --- | --- |
| currentTime | number | 否 | 当前所在时间，默认为当前时间 |
| areas | array | 否 | 阴影区域 |
#### on 方法
``` js
timeline.on(eventName, (value) => {
// ...
});
#### DrawConfig
| 参数 | 类型 | 是否必填 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
| currentTime | number | 否 | Date.now() | 中心点指向时间戳（毫秒） |
| areas | Object[] | 否 | [] | 阴影区配置，见 [AreaConfig](#AreaConfig) |
##### AreaConfig
| 参数 | 类型 | 是否必填 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
| startTime | number | 是 | - | 阴影区域开始时间戳（毫秒） |
| endTime | number | 是 | - | 阴影区域结束时间戳（毫秒） |
| bgColor | string | 否 | `Config.bgColor` | 当前阴影区背景颜色 |
## 版本升级 v2.X -> v3.X
``` html
<canvas id="Timeline"></canvas>
<script>
// -------- v2 -----------
const timeline = new Timeline('Timeline', {
fill: false,
width: 1000,
height: 60,
});
timeline.on('timeUpdate', (timestamp) => {
// ...
})
// ---------> v3 --------------
const timeline = new Timeline('#Timeline', {
// ...
// 注意这里时间戳由秒全部变为毫秒
});
// OR
const timeline = new Timeline(document.querySelector('#Timeline'), {
// ...
});
timeline.on('dragged', (timestamp) => {
// ...
})
</script>
```
| eventName | value |
| --- | --- |
| timeUpdate | currentTime |
> 其他变更请参考上述文档
## License
#### areas
| 参数 | 类型 | 是否必填 | 说明 |
| --- | --- | --- | --- |
| startTime | number | 是 | 阴影区域开始时间 |
| endTime | number | 是 | 阴影区域结束时间点 |
| bgColor | string | 否 | 背景颜色, 默认值：#ffffff55 |
[MIT](https://opensource.org/licenses/MIT)
Copyright (c) 2022-present, XiuLiu <https://www.github.com/thelostword>

130

types/timeline.d.ts

@@ -1,45 +0,101 @@

/*
* @Author: thelostword
* @Date: 2022-11-14 17:00:52
* @LastEditors: thelostword
* @LastEditTime: 2022-11-15 11:25:58
* @FilePath: \timeline\types\timeline.d.ts
*/
declare type AreaItem = {
export = timeline;
declare namespace timeline {
export type ElementType = string | HTMLCanvasElement;
export type ConfigMap = {
// 根据父容器自动填充
fill?: boolean,
// 宽度
width?: number,
// 高度
height?: number,
// 背景色
bgColor?: string,
// 区域背景色
areaBgColor?: string,
// 文字颜色
textColor?: string,
// 刻度颜色
scaleColor?: string,
// 刻度间距
scaleSpacing?: number,
// 当前时间显示背景色
pointColor?: string,
// 当前时间显示宽度
pointWidth?: number,
// 每秒帧数，Frames Per Second
fps?: number,
// 默认焦距
zoom?: number,
// 时间间距
timeSpacingList: number[],
}
export type DrawAreasType = {
startTime: number;
endTime: number;
bgColor?: string;
};
declare type DrawArgs = {
}
export type DrawType = {
currentTime?: number;
zoom?: number;
areas?: AreaItem[];
};
areas?: DrawAreasType[];
}
declare type TimeLineOption = {
fill?: boolean;
width?: number;
height?: number;
bgColor?: string;
textColor?: string;
scaleColor?: string;
scaleSpacing?: number;
areaBgColor?: string;
pointColor?: string;
pointWidth?: number;
fps?: number;
zoom?: number;
maxZoom?: number;
minZoom?: number;
};
export type DragendEventType = 'dragend';
export type DragendHandler<T = number> = (event: T) => void;
declare type CallFunction = (params:number) => void;
class TimeLine {
constructor (el: ElementType, config: ConfigMap);
declare class Timeline {
constructor(id: string, option?: TimeLineOption);
draw(option: DrawArgs ): void;
on(type: 'timeUpdate', call: CallFunction): void;
/**
* draw methods.
* ```
* new TimeLine(document.querySelector('#Timeline'), {
* ...
* })
* .draw({...})
* ```
* Docs: https://github.com/thelostword/timeline#draw
*/
draw(cfg: DrawType): void;
/**
* get time of center point.
* ```
* new TimeLine(document.querySelector('#Timeline'), {
* ...
* })
* .getCurrentTime() // => timestamp
* ```
* Docs: https://github.com/thelostword/timeline#getCurrentTime
*/
getCurrentTime(): number;
/**
* event listener.
* ```
* new TimeLine(document.querySelector('#Timeline'), {
* ...
* })
* .on('dragend', (timestamp) => {
* ....
* })
* ```
* Docs: https://github.com/thelostword/timeline#on
*/
on(event: DragendEventType, listener: DragendHandler): void;
/**
* event listener.
* ```
* new TimeLine(document.querySelector('#Timeline'), {
* ...
* })
* .off('dragend', listener)
* ```
* Docs: https://github.com/thelostword/timeline#off
*/
off(event: DragendEventType, listener: DragendHandler): void;
}
}
export = Timeline;
example/demo.png

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc