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