vue-timeline-chart
Version:
Vue3 Timeline Chart component
781 lines (779 loc) • 27.8 kB
JavaScript
import { ref as _, watch as C, computed as $, onMounted as ae, nextTick as Me, getCurrentScope as Ee, onScopeDispose as Te, unref as R, getCurrentInstance as be, defineComponent as Ye, watchEffect as Ne, openBlock as b, createElementBlock as O, createElementVNode as z, withModifiers as W, renderSlot as P, Fragment as E, renderList as T, normalizeClass as I, normalizeStyle as Y, createTextVNode as we, toDisplayString as me, createCommentVNode as ye } from "vue";
const He = (t) => {
const s = _(0), r = _(0);
let n;
function l(v) {
n = new ResizeObserver(([a]) => {
const d = a == null ? void 0 : a.contentRect;
d && ([s.value, r.value] = [d.width, d.height]);
}), n.observe(v);
}
return C(t, (v) => {
if (v) {
l(v);
return;
}
n == null || n.disconnect();
}), {
width: s,
height: r
};
}, te = function(t) {
return `${t}`.trim().padStart(2, "0");
};
function y(t) {
const s = Object.prototype.toString.call(t);
return t instanceof Date || typeof t == "object" && s === "[object Date]" ? new t.constructor(+t) : typeof t == "number" || s === "[object Number]" || typeof t == "string" || s === "[object String]" ? new Date(t) : /* @__PURE__ */ new Date(NaN);
}
function A(t, s) {
return t instanceof Date ? new t.constructor(s) : new Date(s);
}
function Fe(t, s) {
const r = y(t);
return isNaN(s) ? A(t, NaN) : (s && r.setDate(r.getDate() + s), r);
}
function Oe(t, s) {
const r = +y(t);
return A(t, r + s);
}
const Le = 6048e5, Re = 6e4, Ae = 36e5;
function je(t, s) {
return Oe(t, s * Ae);
}
let Xe = {};
function ie() {
return Xe;
}
function N(t, s) {
var d, u, c, w;
const r = ie(), n = (s == null ? void 0 : s.weekStartsOn) ?? ((u = (d = s == null ? void 0 : s.locale) == null ? void 0 : d.options) == null ? void 0 : u.weekStartsOn) ?? r.weekStartsOn ?? ((w = (c = r.locale) == null ? void 0 : c.options) == null ? void 0 : w.weekStartsOn) ?? 0, l = y(t), v = l.getDay(), a = (v < n ? 7 : 0) + v - n;
return l.setDate(l.getDate() - a), l.setHours(0, 0, 0, 0), l;
}
function re(t) {
const s = y(t);
return s.setHours(0, 0, 0, 0), s;
}
function Be(t, s) {
return Oe(t, s * Re);
}
function ze(t, s) {
const r = s * 7;
return Fe(t, r);
}
function Ge(t, s) {
const r = y(t.start), n = y(t.end);
let l = +r > +n;
const v = l ? +r : +n, a = l ? n : r;
a.setHours(0, 0, 0, 0);
let d = 1;
const u = [];
for (; +a <= v; )
u.push(y(a)), a.setDate(a.getDate() + d), a.setHours(0, 0, 0, 0);
return l ? u.reverse() : u;
}
function Ze(t, s) {
const r = y(t.start), n = y(t.end);
let l = +r > +n;
const v = l ? +r : +n;
let a = l ? n : r;
a.setMinutes(0, 0, 0);
let d = 1;
const u = [];
for (; +a <= v; )
u.push(y(a)), a = je(a, d);
return l ? u.reverse() : u;
}
function Ke(t) {
const s = y(t);
return s.setSeconds(0, 0), s;
}
function ke(t, s) {
const r = Ke(y(t.start)), n = y(t.end);
let l = +r > +n;
const v = l ? +r : +n;
let a = l ? n : r, d = 1;
const u = [];
for (; +a <= v; )
u.push(y(a)), a = Be(a, d);
return l ? u.reverse() : u;
}
function qe(t, s) {
const r = y(t.start), n = y(t.end);
let l = +r > +n;
const v = l ? +r : +n, a = l ? n : r;
a.setHours(0, 0, 0, 0), a.setDate(1);
let d = 1;
const u = [];
for (; +a <= v; )
u.push(y(a)), a.setMonth(a.getMonth() + d);
return l ? u.reverse() : u;
}
function Ue(t, s) {
const r = y(t.start), n = y(t.end);
let l = +r > +n;
const v = N(l ? n : r, s), a = N(l ? r : n, s);
v.setHours(15), a.setHours(15);
const d = +a.getTime();
let u = v, c = (s == null ? void 0 : s.step) ?? 1;
if (!c) return [];
c < 0 && (c = -c, l = !l);
const w = [];
for (; +u <= d; )
u.setHours(0), w.push(y(u)), u = ze(u, c), u.setHours(15);
return l ? w.reverse() : w;
}
function Je(t) {
const s = y(t);
return s.setDate(1), s.setHours(0, 0, 0, 0), s;
}
function oe(t) {
const s = y(t), r = A(t, 0);
return r.setFullYear(s.getFullYear(), 0, 1), r.setHours(0, 0, 0, 0), r;
}
function Qe(t, s) {
const r = y(t.start), n = y(t.end);
let l = +r > +n;
const v = l ? +r : +n, a = l ? n : r;
a.setHours(0, 0, 0, 0), a.setMonth(0, 1);
let d = 1;
const u = [];
for (; +a <= v; )
u.push(y(a)), a.setFullYear(a.getFullYear() + d);
return l ? u.reverse() : u;
}
function et(t, s) {
var w, k, p, h;
const r = y(t), n = r.getFullYear(), l = ie(), v = (s == null ? void 0 : s.firstWeekContainsDate) ?? ((k = (w = s == null ? void 0 : s.locale) == null ? void 0 : w.options) == null ? void 0 : k.firstWeekContainsDate) ?? l.firstWeekContainsDate ?? ((h = (p = l.locale) == null ? void 0 : p.options) == null ? void 0 : h.firstWeekContainsDate) ?? 1, a = A(t, 0);
a.setFullYear(n + 1, 0, v), a.setHours(0, 0, 0, 0);
const d = N(a, s), u = A(t, 0);
u.setFullYear(n, 0, v), u.setHours(0, 0, 0, 0);
const c = N(u, s);
return r.getTime() >= d.getTime() ? n + 1 : r.getTime() >= c.getTime() ? n : n - 1;
}
function tt(t, s) {
var d, u, c, w;
const r = ie(), n = (s == null ? void 0 : s.firstWeekContainsDate) ?? ((u = (d = s == null ? void 0 : s.locale) == null ? void 0 : d.options) == null ? void 0 : u.firstWeekContainsDate) ?? r.firstWeekContainsDate ?? ((w = (c = r.locale) == null ? void 0 : c.options) == null ? void 0 : w.firstWeekContainsDate) ?? 1, l = et(t, s), v = A(t, 0);
return v.setFullYear(l, 0, n), v.setHours(0, 0, 0, 0), N(v, s);
}
function nt(t, s) {
const r = y(t), n = +N(r, s) - +tt(r, s);
return Math.round(n / Le) + 1;
}
const G = {
ms: 1,
seconds: 1e3,
minutes: 1e3 * 60,
hours: 1e3 * 60 * 60,
days: 1e3 * 60 * 60 * 24,
weeks: 1e3 * 60 * 60 * 24 * 7,
months: 1e3 * 60 * 60 * 24 * 7 * 4,
years: 1e3 * 60 * 60 * 24 * 7 * 4 * 12
}, ge = (t) => Object.keys(G).indexOf(t), st = (t, s, r, n, l, v) => {
const a = _(r.value), d = _(n.value), u = $(() => {
var p;
return ((p = l.value) != null && p.length ? l.value : [
// #region default-scales
{
// every 100ms, 1 second or 10 seconds
// NOTE: .1 seconds is used here instead of 100ms, so the first ms that would align with the gridline
// (that provides the label) is shown when only the next occuring ms are within the viewport
unit: "seconds",
steps: [0.1, 1, 10]
},
{
// every 15 seconds, 30 seconds, 1 minute, 5 minutes, etc.
unit: "minutes",
steps: [0.25, 0.5, 1, 5, 10]
},
{
// every 15 minutes, 30 minutes, 1 hour, 2 hours
unit: "hours",
steps: [0.25, 0.5, 1, 2]
},
{
// every day
unit: "days",
steps: [1]
},
{
// every week
unit: "weeks",
steps: [1]
},
{
// every month, every other month
unit: "months",
steps: [1, 2]
},
{
// every year, 5 years, 10 years, etc.
unit: "years",
steps: [1, 5, 10, 25, 50, 100, 250, 500, 1e3]
}
// #endregion default-scales
]).toSorted((h, m) => ge(h.unit) - ge(m.unit)).flatMap((h) => h.steps.toSorted((m, g) => m - g).map((m) => ({ unit: h.unit, step: m })));
});
C(r, () => {
a.value = r.value;
}), C(n, () => {
d.value = n.value;
});
const c = $(() => {
let [p] = u.value;
for (const [h, m] of u.value.entries()) {
const g = a.value / (G[m.unit] * (m.step ?? 1));
if (g >= 1 && g <= d.value) {
p = m;
break;
}
if (g < 1) {
p = u.value[h - 1] ?? m;
break;
}
g >= 1 && h === u.value.length - 1 && (p = m);
}
return {
unit: p.unit,
step: p.step ?? 1
};
});
function w(p) {
switch (c.value.unit) {
case "years":
return p.getFullYear() % c.value.step === 0;
case "months":
return p.getMonth() % c.value.step === 0;
case "weeks":
return nt(p, { weekStartsOn: v.value }) % c.value.step === 0;
case "days":
return p.getDate() % c.value.step === 0;
case "hours":
return p.getHours() % c.value.step === 0;
case "minutes":
return p.getMinutes() % c.value.step === 0;
case "seconds":
return p.getSeconds() % c.value.step === 0;
case "ms":
return p.getMilliseconds() % c.value.step === 0;
}
}
const k = $(() => {
const p = [], h = t.value, m = s.value;
let g = [];
switch (c.value.unit) {
case "ms":
g = Array.from({ length: m - h }, (S, V) => new Date(h + V));
break;
case "seconds":
g = ke({ start: h, end: m }).flatMap((S) => {
const V = [];
for (let x = 0; x < 60; x++)
V.push(new Date(S.valueOf() + x * G.seconds));
return V;
});
break;
case "minutes":
g = ke({ start: h, end: m });
break;
case "hours":
g = Ze({ start: h, end: m });
break;
case "days":
g = Ge({ start: h, end: m });
break;
case "weeks":
g = Ue({ start: h, end: m }, { weekStartsOn: v.value });
break;
case "months":
g = qe({ start: h, end: m });
break;
case "years":
g = Qe({ start: h, end: m });
break;
}
for (const S of g)
if (!(c.value.step > 1 && !w(S)) && (p.push(S.valueOf()), c.value.step < 1))
for (let V = 1; V < 1 / c.value.step; V++)
p.push(S.valueOf() + V * c.value.step * G[c.value.unit]);
return p;
});
return {
scale: c,
baseDividers: G,
visibleTimestamps: k
};
};
function ue(t) {
return Ee() ? (Te(t), !0) : !1;
}
function ne(t) {
return typeof t == "function" ? t() : R(t);
}
const rt = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
const ot = (t) => t != null, at = Object.prototype.toString, it = (t) => at.call(t) === "[object Object]", ut = () => {
};
function lt(t) {
return be();
}
function ct(t, s = !0, r) {
lt() ? ae(t, r) : s ? t() : Me(t);
}
const le = rt ? window : void 0;
function j(t) {
var s;
const r = ne(t);
return (s = r == null ? void 0 : r.$el) != null ? s : r;
}
function De(...t) {
let s, r, n, l;
if (typeof t[0] == "string" || Array.isArray(t[0]) ? ([r, n, l] = t, s = le) : [s, r, n, l] = t, !s)
return ut;
Array.isArray(r) || (r = [r]), Array.isArray(n) || (n = [n]);
const v = [], a = () => {
v.forEach((w) => w()), v.length = 0;
}, d = (w, k, p, h) => (w.addEventListener(k, p, h), () => w.removeEventListener(k, p, h)), u = C(
() => [j(s), ne(l)],
([w, k]) => {
if (a(), !w)
return;
const p = it(k) ? { ...k } : k;
v.push(
...r.flatMap((h) => n.map((m) => d(w, h, m, p)))
);
},
{ immediate: !0, flush: "post" }
), c = () => {
u(), a();
};
return ue(c), c;
}
function dt() {
const t = _(!1), s = be();
return s && ae(() => {
t.value = !0;
}, s), t;
}
function Se(t) {
const s = dt();
return $(() => (s.value, !!t()));
}
function vt(t, s, r = {}) {
const { window: n = le, ...l } = r;
let v;
const a = Se(() => n && "MutationObserver" in n), d = () => {
v && (v.disconnect(), v = void 0);
}, u = $(() => {
const p = ne(t), h = (Array.isArray(p) ? p : [p]).map(j).filter(ot);
return new Set(h);
}), c = C(
() => u.value,
(p) => {
d(), a.value && p.size && (v = new MutationObserver(s), p.forEach((h) => v.observe(h, l)));
},
{ immediate: !0, flush: "post" }
), w = () => v == null ? void 0 : v.takeRecords(), k = () => {
c(), d();
};
return ue(k), {
isSupported: a,
stop: k,
takeRecords: w
};
}
function ft(t, s, r = {}) {
const { window: n = le, ...l } = r;
let v;
const a = Se(() => n && "ResizeObserver" in n), d = () => {
v && (v.disconnect(), v = void 0);
}, u = $(() => {
const k = ne(t);
return Array.isArray(k) ? k.map((p) => j(p)) : [j(k)];
}), c = C(
u,
(k) => {
if (d(), a.value && n) {
v = new ResizeObserver(s);
for (const p of k)
p && v.observe(p, l);
}
},
{ immediate: !0, flush: "post" }
), w = () => {
d(), c();
};
return ue(w), {
isSupported: a,
stop: w
};
}
function pt(t, s = {}) {
const {
reset: r = !0,
windowResize: n = !0,
windowScroll: l = !0,
immediate: v = !0,
updateTiming: a = "sync"
} = s, d = _(0), u = _(0), c = _(0), w = _(0), k = _(0), p = _(0), h = _(0), m = _(0);
function g() {
const V = j(t);
if (!V) {
r && (d.value = 0, u.value = 0, c.value = 0, w.value = 0, k.value = 0, p.value = 0, h.value = 0, m.value = 0);
return;
}
const x = V.getBoundingClientRect();
d.value = x.height, u.value = x.bottom, c.value = x.left, w.value = x.right, k.value = x.top, p.value = x.width, h.value = x.x, m.value = x.y;
}
function S() {
a === "sync" ? g() : a === "next-frame" && requestAnimationFrame(() => g());
}
return ft(t, S), C(() => j(t), (V) => !V && S()), vt(t, S, {
attributeFilter: ["style", "class"]
}), l && De("scroll", S, { capture: !0, passive: !0 }), n && De("resize", S, { passive: !0 }), ct(() => {
v && S();
}), {
height: d,
bottom: u,
left: c,
right: w,
top: k,
width: p,
x: h,
y: m,
update: S
};
}
const ht = { class: "timeline-wrapper" }, wt = { class: "timestamps" }, mt = { class: "groups" }, yt = { class: "group-items" }, kt = ["onClick", "onPointermove", "onPointerdown", "onPointerup", "onContextmenu"], gt = ["onClick", "onPointermove", "onPointerdown", "onPointerup", "onContextmenu"], Dt = {
key: 0,
class: "backgrounds"
}, Mt = ["onClick", "onPointermove", "onPointerdown", "onPointerup", "onContextmenu"], bt = {
key: 1,
class: "markers"
}, Ot = /* @__PURE__ */ Ye({
__name: "Timeline",
props: {
groups: { default: () => [] },
items: { default: () => [] },
markers: { default: () => [] },
viewportMin: { default: void 0 },
viewportMax: { default: void 0 },
minViewportDuration: { default: 1e3 },
maxViewportDuration: { default: void 0 },
initialViewportStart: { default: void 0 },
initialViewportEnd: { default: void 0 },
renderTimestampLabel: { type: Function, default: (t, s) => {
const r = new Date(t);
let n = "";
return (!["hours", "minutes", "seconds", "ms"].includes(s.unit) || re(r).valueOf() === t) && (n += `${r.toLocaleString("default", {
month: s.unit !== "years" && (Je(r).valueOf() === t || s.unit === "days" || re(r).valueOf() === t && !(s.unit === "months" && s.step === 0.25)) ? "short" : void 0,
year: oe(r).valueOf() === t ? "numeric" : void 0,
era: oe(r).valueOf() === t && oe(r).getFullYear() <= 0 ? "short" : void 0,
day: s.unit !== "years" && !(s.unit === "months" && s.step >= 1) && re(r).valueOf() === t ? "numeric" : void 0
})} `), ["hours", "minutes", "seconds", "ms"].includes(s.unit) && (n += `${te(r.getHours())}:${te(r.getMinutes())}${r.getSeconds() > 0 ? `:${te(r.getSeconds())}` : ""}${r.getMilliseconds() > 0 ? `.${te(r.getMilliseconds())}` : ""}`), n;
} },
fixedLabels: { type: Boolean, default: !1 },
minTimestampWidth: { default: 100 },
maxZoomSpeed: { default: 60 },
activeItems: { default: () => [] },
maxOffsetOutsideViewport: { default: 50 },
scales: { default: () => [] },
weekStartsOn: { default: 0 }
},
emits: ["pointermove", "pointerdown", "pointerup", "wheel", "click", "contextmenu", "mousemoveTimeline", "mouseleaveTimeline", "changeViewport", "changeScale"],
setup(t, { expose: s, emit: r }) {
const n = t, l = r;
s({
setViewport: F,
onWheel: he
});
const v = _(null), { width: a } = He(v), d = _(0), u = _(1e4), c = $(() => u.value - d.value);
C([d, u], ([e, f]) => {
l("changeViewport", { start: e, end: f });
}), Ne(() => {
try {
pe();
} catch (e) {
console.error(e);
}
});
const { left: w } = pt(v);
function k() {
var e;
return (e = n.items) == null ? void 0 : e.reduce((f, o) => o.start < f ? o.start : f, 1 / 0);
}
function p() {
var e;
return (e = n.items) == null ? void 0 : e.reduce((f, o) => o.end !== void 0 && o.end > f || o.start > f ? o.end ?? o.start : f, -1 / 0);
}
function h() {
F(
n.initialViewportStart ?? n.viewportMin ?? k() ?? 0,
n.initialViewportEnd ?? n.viewportMax ?? p() ?? 1e4
);
}
C([() => n.viewportMin, () => n.viewportMax], () => {
F(d.value, u.value);
}), C([() => n.initialViewportStart, () => n.initialViewportEnd], () => {
F(n.initialViewportStart, n.initialViewportEnd);
});
const m = $(() => n.items.filter((e) => e.start < u.value && (e.end ?? e.start) > d.value).sort((e, f) => e.start - f.start) || []), g = $(() => n.markers.filter((e) => e.start < u.value && e.start > d.value).sort((e, f) => e.start - f.start) || []), S = $(() => g.value.filter((e) => !e.group)), V = $(() => m.value.filter((e) => e.type === "background" && !e.group)), x = /* @__PURE__ */ new Map(), Z = /* @__PURE__ */ new Map();
C([d, u, a], () => {
x.clear(), Z.clear();
}), C(m, () => {
x.clear();
}), C(g, () => {
Z.clear();
}), ae(() => {
h(), Me(() => {
x.clear(), Z.clear();
});
});
function xe(e) {
return {
"--_left": `${ve(e.start, e.end)}px`,
"--_width": e.end !== void 0 ? `${_e(e.start, e.end)}px` : null,
...e.cssVariables
};
}
function H(e, f = !1) {
const o = f ? Z : x, i = o.get(e.id ?? `${e.start}${e.type}${e.end || ""}`);
if (i)
return i;
const D = xe(e);
return o.set(e.id ?? `${e.start}${e.type}${e.end || ""}`, D), D;
}
const $e = $(() => a.value / n.minTimestampWidth), { visibleTimestamps: ce, scale: X } = st(d, u, c, $e, $(() => n.scales), $(() => n.weekStartsOn)), Ve = $(() => ce.value.map((e) => ve(e)));
C(X, (e, f) => {
e.step === (f == null ? void 0 : f.step) && e.unit === (f == null ? void 0 : f.unit) || l("changeScale", e);
}, { immediate: !0 });
function We(e) {
return {
"is-second": e % 1e3 === 0,
"is-minute": e % 6e4 === 0,
"is-hour": e % 36e5 === 0,
"is-day": e % 864e5 === 0
};
}
const K = $(() => n.maxOffsetOutsideViewport / a.value * c.value), de = $(() => a.value + 2 * (K.value / c.value) * a.value);
function ve(e, f) {
if (f !== void 0 && e < d.value - K.value && (f - e) / c.value * a.value > de.value) {
const M = -K.value / c.value * a.value, B = u.value + K.value;
if (f > B)
return M;
const Ie = (B - f) / c.value * a.value;
return M - Ie;
}
return (e - d.value) / c.value * a.value;
}
function _e(e, f) {
const i = (f - e) / c.value * a.value;
return Math.min(i, de.value);
}
function fe(e, f) {
const o = e / a.value * c.value;
e > 0 && u.value === n.viewportMax || e < 0 && d.value === n.viewportMin || (F(d.value + o, u.value + o), se(f));
}
function pe() {
if (n.initialViewportStart !== void 0 && n.initialViewportEnd !== void 0 && n.initialViewportStart >= n.initialViewportEnd)
throw new Error("[vue-timeline-chart] Invalid props: initialViewportStart must be smaller than initialViewportEnd");
if (n.viewportMin !== void 0 && n.viewportMax !== void 0 && n.viewportMin >= n.viewportMax)
throw new Error("[vue-timeline-chart] Invalid props: viewportMin must be smaller than viewportMax");
}
function F(e, f) {
if (e === void 0 && f === void 0) {
console.warn("[vue-timeline-chart] setViewport: both start and end are undefined. No viewport will be set.");
return;
}
let o = e === void 0 ? d.value : n.viewportMin !== void 0 ? Math.max(e, n.viewportMin) : e, i = f === void 0 ? u.value : n.viewportMax !== void 0 ? Math.min(f, n.viewportMax) : f;
const D = i - o;
if (n.minViewportDuration !== void 0 && D < n.minViewportDuration) {
const M = n.minViewportDuration - D;
o -= M * 0.5, i += M * 0.5;
} else if (n.maxViewportDuration !== void 0 && D > n.maxViewportDuration) {
const M = n.maxViewportDuration - D;
o -= M * 0.5, i += M * 0.5;
}
d.value = Math.round(o), u.value = Math.round(i);
}
function he(e) {
if (pe(), l("wheel", e), e.deltaY === 0 && e.preventDefault(), e.shiftKey) {
e.preventDefault();
const D = e.deltaY === 0 && e.deltaX !== 0 ? e.deltaX : e.deltaY;
fe(D * (e.deltaMode === 0 ? 1 : 18), e);
return;
}
if (e.deltaX !== 0) {
fe(e.deltaX * (e.deltaMode === 0 ? 1 : 18), e);
return;
}
if (!(e.metaKey || e.ctrlKey))
return;
e.preventDefault();
const f = (e.clientX - w.value) / a.value, o = n.maxZoomSpeed ? Math.max(-n.maxZoomSpeed, Math.min(n.maxZoomSpeed, e.deltaY * (e.deltaMode === 0 ? 1 : 10))) : e.deltaY * (e.deltaMode === 0 ? 1 : 10), i = Math.round(-c.value * 0.01 * o);
Ce(i, f, e);
}
function Ce(e, f = 0.5, o) {
e > 0 ? e = c.value - e < n.minViewportDuration ? c.value - n.minViewportDuration : e : n.maxViewportDuration && (e = c.value - e > n.maxViewportDuration ? -(n.maxViewportDuration - c.value) : e);
const i = e * f, D = e - i, M = d.value + i, B = u.value - D;
if (M >= B) {
console.error(`Rounding issue probably occured while zooming.
Setting different values for minViewportDuration and maxViewportDuration might help.`);
return;
}
F(M, B), se(o);
}
function L(e) {
const f = (e.clientX - w.value) / a.value;
return d.value + c.value * f;
}
function q(e, f = null) {
l("pointermove", { time: L(e), event: e, item: f });
}
function U(e, f = null) {
l("pointerdown", { time: L(e), event: e, item: f });
}
function J(e, f = null) {
l("pointerup", { time: L(e), event: e, item: f });
}
function Q(e, f = null) {
l("click", { time: L(e), event: e, item: f });
}
function ee(e, f = null) {
l("contextmenu", { time: L(e), event: e, item: f });
}
function se(e) {
l("mousemoveTimeline", { time: L(e), event: e });
}
function Pe(e) {
l("mouseleaveTimeline", { event: e });
}
return (e, f) => (b(), O("div", ht, [
z("div", {
ref_key: "timelineEl",
ref: v,
class: "timeline",
onWheel: he,
onClick: Q,
onPointermove: q,
onPointerdown: U,
onPointerup: J,
onContextmenu: W(ee, ["prevent"]),
onMousemove: se,
onMouseleave: Pe
}, [
z("div", wt, [
P(e.$slots, "timestamps-before", { scale: R(X) }, void 0, !0),
(b(!0), O(E, null, T(R(ce), (o, i) => (b(), O("div", {
key: o,
class: I(["timestamp", We(o)]),
style: Y({ "--_left": `${Ve.value[i]}px` })
}, [
P(e.$slots, "timestamp", {
timestamp: o,
scale: R(X)
}, () => [
we(me(e.renderTimestampLabel(o, R(X))), 1)
], !0)
], 6))), 128)),
P(e.$slots, "timestamps-after", { scale: R(X) }, void 0, !0),
(b(!0), O(E, null, T(g.value.filter((o) => o.group === "_timestamps"), (o) => (b(), O("div", {
key: o.id ?? `${o.start}${o.type}`,
style: Y(H(o)),
class: I([o.type, o.className])
}, [
P(e.$slots, "marker", { item: o }, void 0, !0)
], 6))), 128)),
(b(!0), O(E, null, T(m.value.filter((o) => o.group === "_timestamps" && o.type === "marker"), (o) => (b(), O("div", {
key: o.id ?? `${o.start}${o.type}`,
style: Y(H(o)),
class: I([o.type, o.className])
}, [
P(e.$slots, "marker", { item: o }, void 0, !0)
], 6))), 128))
]),
z("div", mt, [
(b(!0), O(E, null, T(e.groups, (o) => (b(), O("div", {
key: o.id,
class: I(["group", o.className]),
style: Y(o.cssVariables)
}, [
z("div", {
class: I(["group-label", { fixed: e.fixedLabels }])
}, [
P(e.$slots, "group-label", { group: o }, () => [
we(me(o.label), 1)
], !0)
], 2),
z("div", yt, [
P(e.$slots, `items-${o.id}`, {
group: o,
itemsInViewport: m.value.filter((i) => i.group === o.id),
viewportStart: d.value,
viewportEnd: u.value
}, () => [
(b(!0), O(E, null, T(m.value.filter((i) => i.group === o.id && i.type !== "background"), (i, D) => (b(), O("div", {
key: i.id ?? D,
style: Y(H(i)),
class: I(["item", i.type, i.className, { active: e.activeItems.includes(i.id) }]),
onClick: W((M) => Q(M, i), ["stop"]),
onPointermove: W((M) => q(M, i), ["stop"]),
onPointerdown: W((M) => U(M, i), ["stop"]),
onPointerup: W((M) => J(M, i), ["stop"]),
onContextmenu: W((M) => ee(M, i), ["prevent", "stop"])
}, [
P(e.$slots, "item", { item: i }, void 0, !0)
], 46, kt))), 128))
], !0)
]),
(b(!0), O(E, null, T(m.value.filter((i) => i.group === o.id && i.type === "background"), (i) => (b(), O("div", {
key: i.id ?? `${i.start}${i.type}${i.end || ""}`,
style: Y(H(i)),
class: I([i.type, i.className]),
onClick: W((D) => Q(D, i), ["stop"]),
onPointermove: W((D) => q(D, i), ["stop"]),
onPointerdown: W((D) => U(D, i), ["stop"]),
onPointerup: W((D) => J(D, i), ["stop"]),
onContextmenu: W((D) => ee(D, i), ["prevent", "stop"])
}, null, 46, gt))), 128)),
(b(!0), O(E, null, T(g.value.filter((i) => i.group === o.id), (i) => (b(), O("div", {
key: i.id ?? `${i.start}${i.type}`,
style: Y(H(i, !0)),
class: I([i.type, i.className])
}, [
P(e.$slots, "marker", { item: i }, void 0, !0)
], 6))), 128))
], 6))), 128)),
V.value.length > 0 ? (b(), O("div", Dt, [
(b(!0), O(E, null, T(V.value, (o) => (b(), O("div", {
key: o.id ?? `${o.start}${o.type}${o.end || ""}`,
style: Y(H(o)),
class: I([o.type, o.className]),
onClick: W((i) => Q(i, o), ["stop"]),
onPointermove: W((i) => q(i, o), ["stop"]),
onPointerdown: W((i) => U(i, o), ["stop"]),
onPointerup: W((i) => J(i, o), ["stop"]),
onContextmenu: W((i) => ee(i, o), ["prevent", "stop"])
}, null, 46, Mt))), 128))
])) : ye("", !0),
S.value.length > 0 ? (b(), O("div", bt, [
(b(!0), O(E, null, T(S.value, (o) => (b(), O("div", {
key: o.id ?? `${o.start}${o.type}`,
style: Y(H(o, !0)),
class: I([o.type, o.className])
}, [
P(e.$slots, "marker", { item: o }, void 0, !0)
], 6))), 128))
])) : ye("", !0)
])
], 544)
]));
}
}), St = (t, s) => {
const r = t.__vccOpts || t;
for (const [n, l] of s)
r[n] = l;
return r;
}, Vt = /* @__PURE__ */ St(Ot, [["__scopeId", "data-v-ec036952"]]);
export {
Vt as Timeline
};