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