tsviewer 1.0.27 → 1.0.28

package/dist/TSFilterModal-DjKgP7Y2.mjs

@@ -0,0 +1,238 @@
+import "./base-CIy5gWpu.mjs";
+import { E as F } from "./el-overlay-_Fd7WVZL.mjs";
+import { I as g } from "./IconSelection-BGj1-2Pf.mjs";
+import { a as y, b as k } from "./el-input-DNjlHApm.mjs";
+import { E as S } from "./el-input-number-CAzspsnM.mjs";
+import { resolveComponent as P, createBlock as u, openBlock as o, withCtx as i, createElementVNode as s, createVNode as r, createElementBlock as a, toDisplayString as c, createTextVNode as d, createCommentVNode as p, Fragment as _, renderList as v } from "vue";
+import { e as N } from "./index-BtnXpu3W.mjs";
+const H = {
+  name: "TimeseriesFilterModal",
+  components: {
+    "bf-button": () => import("./BFButton-V2zgKAQA.mjs"),
+    IconSelection: g
+  },
+  mixins: [],
+  watch: {},
+  computed: {
+    computeVisible0: function() {
+      switch (this.selectedFilter) {
+        case "lowpass":
+          return !0;
+        case "highpass":
+          return !0;
+        case "bandpass":
+          return !0;
+        default:
+          return !1;
+      }
+    },
+    onSingleChannel: function() {
+      return this.onChannels.length == 1;
+    },
+    selectedChannels: function() {
+      return this.onChannels.length;
+    },
+    computeVisible1: function() {
+      switch (this.selectedFilter) {
+        case "lowpass":
+          return !1;
+        case "highpass":
+          return !1;
+        case "bandpass":
+          return !0;
+        default:
+          return !1;
+      }
+    },
+    computeVisible2: function() {
+      switch (this.selectedFilter) {
+        case "bandstop":
+          return !0;
+        default:
+          return !1;
+      }
+    },
+    computePlaceholder1: function(t) {
+      switch (this.selectedFilter) {
+        case "lowpass":
+          return "Low Pass Cutoff Frequency (Hz)";
+        case "highpass":
+          return "High Pass Cutoff Frequency (Hz)";
+        case "bandpass":
+          return "Low Pass Cutoff Frequency (Hz)";
+        default:
+          return "";
+      }
+    },
+    computePlaceholder2: function(t) {
+      switch (this.selectedFilter) {
+        case "bandpass":
+          return "High Pass Cutoff Frequency (Hz)";
+        default:
+          return "";
+      }
+    }
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data: function() {
+    return {
+      selectedFilter: null,
+      filterOptions: [
+        {
+          label: "No Filter",
+          value: "clear"
+        },
+        {
+          label: "Low Pass",
+          value: "lowpass"
+        },
+        {
+          label: "High Pass",
+          value: "highpass"
+        },
+        {
+          label: "Band Pass",
+          value: "bandpass"
+        },
+        {
+          label: "Notch",
+          value: "bandstop"
+        }
+      ],
+      selectedNotch: null,
+      notchOptions: [
+        {
+          label: "50Hz",
+          value: 50
+        },
+        {
+          label: "60Hz",
+          value: 60
+        }
+      ],
+      input0: null,
+      input1: null,
+      onChannels: []
+    };
+  },
+  methods: {
+    close: function() {
+      this.$emit("closeWindow");
+    },
+    handleChange: function() {
+    },
+    onButtonClick: function() {
+    },
+    submitForm: function(t) {
+      this.$emit("closeWindow");
+    }
+  }
+}, E = { slot: "body" }, I = { class: "select-wrapper" }, z = {
+  key: 0,
+  class: "filter-input-wrapper"
+}, B = {
+  key: 1,
+  class: "filter-input-wrapper"
+}, O = { slot: "footer" }, U = { class: "button-wrapper" }, q = { class: "channels-selected" }, L = { key: 0 }, T = { key: 1 }, A = { class: "buttons" };
+function D(t, l, h, M, W, n) {
+  const m = k, f = y, b = S, C = g, V = P("bf-button"), w = F;
+  return o(), u(w, {
+    class: "timeseries-filter-modal",
+    ref: "filter-modal",
+    title: "Set Filter",
+    modelValue: h.visible,
+    "onUpdate:modelValue": l[4] || (l[4] = (e) => h.visible = e),
+    onClose: n.close
+  }, {
+    default: i(() => [
+      s("div", E, [
+        s("div", I, [
+          r(f, {
+            modelValue: t.selectedFilter,
+            "onUpdate:modelValue": l[0] || (l[0] = (e) => t.selectedFilter = e),
+            placeholder: "Select"
+          }, {
+            default: i(() => [
+              (o(!0), a(_, null, v(t.filterOptions, (e) => (o(), u(m, {
+                key: e.value,
+                label: e.label,
+                value: e.value
+              }, null, 8, ["label", "value"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"]),
+          n.computeVisible0 ? (o(), a("div", z, [
+            d(c(n.computePlaceholder1) + " ", 1),
+            r(b, {
+              class: "filterInput",
+              modelValue: t.input0,
+              "onUpdate:modelValue": l[1] || (l[1] = (e) => t.input0 = e),
+              "controls-position": "right",
+              precision: 2,
+              onChange: n.handleChange
+            }, null, 8, ["modelValue", "onChange"])
+          ])) : p("", !0),
+          n.computeVisible1 ? (o(), a("div", B, [
+            d(c(n.computePlaceholder2) + " ", 1),
+            r(b, {
+              class: "filterInput",
+              modelValue: t.input1,
+              "onUpdate:modelValue": l[2] || (l[2] = (e) => t.input1 = e),
+              "controls-position": "right",
+              precision: 2,
+              onChange: n.handleChange
+            }, null, 8, ["modelValue", "onChange"])
+          ])) : p("", !0),
+          n.computeVisible2 ? (o(), u(f, {
+            key: 2,
+            modelValue: t.selectedNotch,
+            "onUpdate:modelValue": l[3] || (l[3] = (e) => t.selectedNotch = e),
+            placeholder: "Select",
+            class: "filter-input-wrapper"
+          }, {
+            default: i(() => [
+              (o(!0), a(_, null, v(t.notchOptions, (e) => (o(), u(m, {
+                key: e.value,
+                label: e.label,
+                value: e.value
+              }, null, 8, ["label", "value"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["modelValue"])) : p("", !0)
+        ])
+      ])
+    ]),
+    footer: i(() => [
+      s("div", O, [
+        s("div", U, [
+          s("div", q, [
+            r(C, {
+              height: 24,
+              width: 24
+            }),
+            n.onSingleChannel ? (o(), a("div", L, " Adding to single channel ")) : (o(), a("div", T, " Adding to " + c(n.selectedChannels) + " Selected Channels ", 1))
+          ]),
+          s("div", A, [
+            r(V, { onClick: n.submitForm }, {
+              default: i(() => l[5] || (l[5] = [
+                d("Set Filter ")
+              ])),
+              _: 1,
+              __: [5]
+            }, 8, ["onClick"])
+          ])
+        ])
+      ])
+    ]),
+    _: 1
+  }, 8, ["modelValue", "onClose"]);
+}
+const Y = /* @__PURE__ */ N(H, [["render", D], ["__scopeId", "data-v-99d3adec"]]);
+export {
+  Y as default
+};

package/dist/TSScrubber-BZo4SyGm.mjs

@@ -0,0 +1,380 @@
+import { ref as u, computed as N, watch as U, nextTick as E, onMounted as Ne, createElementBlock as Ie, openBlock as $e, createElementVNode as x, toDisplayString as K, normalizeStyle as Q } from "vue";
+import { _ as ve, a as Y, b as Ue, c as ge, d as Ve, k as Oe, e as Le, u as Xe } from "./index-BtnXpu3W.mjs";
+import { u as de } from "./useToken-CJWB6KGF.mjs";
+import { _ as me, a as je, u as fe, b as he } from "./request_composable-DV-ftNZG.mjs";
+function Se(g, c, l) {
+  return function() {
+    for (var t = [], p = 0, v = g, k = 0; k < c.length || p < arguments.length; ) {
+      var W;
+      k < c.length && (!ve(c[k]) || p >= arguments.length) ? W = c[k] : (W = arguments[p], p += 1), t[k] = W, ve(W) || (v -= 1), k += 1;
+    }
+    return v <= 0 ? l.apply(this, t) : me(v, Se(g, t, l));
+  };
+}
+var ze = /* @__PURE__ */ Y(function(c, l) {
+  return c === 1 ? Ue(l) : me(c, Se(c, [], l));
+});
+function Be(g, c) {
+  for (var l = 0, t = c.length, p = Array(t); l < t; )
+    p[l] = g(c[l]), l += 1;
+  return p;
+}
+var He = /* @__PURE__ */ function() {
+  function g(c, l) {
+    this.xf = l, this.f = c;
+  }
+  return g.prototype["@@transducer/init"] = ge.init, g.prototype["@@transducer/result"] = ge.result, g.prototype["@@transducer/step"] = function(c, l) {
+    return this.xf["@@transducer/step"](c, this.f(l));
+  }, g;
+}(), qe = /* @__PURE__ */ Y(function(c, l) {
+  return new He(c, l);
+}), Fe = /* @__PURE__ */ Y(
+  /* @__PURE__ */ Ve(["fantasy-land/map", "map"], qe, function(c, l) {
+    switch (Object.prototype.toString.call(l)) {
+      case "[object Function]":
+        return ze(l.length, function() {
+          return c.call(this, l.apply(this, arguments));
+        });
+      case "[object Object]":
+        return je(function(t, p) {
+          return t[p] = c(l[p]), t;
+        }, {}, Oe(l));
+      default:
+        return Be(c, l);
+    }
+  })
+);
+const Ge = { class: "timeseries-scrubber" }, Je = { class: "dateWrap" }, Ke = { class: "noselect" }, Qe = {
+  id: "scrubber",
+  noselect: ""
+}, Ye = ["width", "height"], Ze = ["width", "height"], et = ["width", "height"], tt = {
+  __name: "TSScrubber",
+  props: {
+    ts_start: Number,
+    ts_end: Number,
+    cWidth: Number,
+    constants: Object,
+    start: Number,
+    duration: Number,
+    cursorLoc: Number,
+    labelWidth: Number,
+    config: Object,
+    activeViewer: Object
+  },
+  emits: ["setStart"],
+  setup(g, { expose: c, emit: l }) {
+    const t = g, p = l, v = Xe(), k = u(null), W = u(null), H = u(null), T = u(null), f = u(1), Z = u(28), C = u(30), V = u(!1), I = u(""), O = u("point"), ee = u(null), D = u([]), w = u([]), y = u([]), L = u(!1), te = u(0), ne = u(0), R = u(0), X = u(0), pe = N(() => oe(t.ts_start)), be = N(() => oe(t.ts_end)), _e = N(() => {
+      if (I.value !== "")
+        return I.value;
+      if (t.start > 0) {
+        const n = new Date(t.start / 1e3).toUTCString();
+        return n.substring(0, n.length - 3);
+      }
+      return "";
+    }), ae = N(() => ({
+      width: t.labelWidth + t.cWidth - 8 + 5 + "px",
+      height: "28px"
+    })), we = N(() => ({
+      width: t.labelWidth + t.cWidth - 8 + 5 + "px",
+      height: "30px"
+    })), Te = N(() => t.cWidth + t.labelWidth - 8 + 5), Ce = N(() => Math.floor((t.ts_end - t.ts_start) / t.cWidth));
+    U(() => t.start, () => {
+      A();
+    }), U(() => t.duration, () => {
+      A();
+    }), U(() => t.cWidth, () => {
+      A();
+    }), U(() => t.activeViewer, (n, e) => {
+      var a;
+      n && n !== e && (console.log("TSScrubber: ActiveViewer changed, resetting component state"), L.value = !0, se(), (a = n.content) != null && a.id ? E(() => {
+        B(), L.value = !1;
+      }) : L.value = !1);
+    }, { deep: !0 }), U(() => v.viewerChannels, (n, e) => {
+      var a, s;
+      n && n.length > 0 && !L.value && (!e || n.length !== e.length || ((a = n[0]) == null ? void 0 : a.id) !== ((s = e[0]) == null ? void 0 : s.id)) && (console.log("TSScrubber: Viewer channels changed, re-initializing segments"), z(), E(() => {
+        ie();
+      }));
+    }, { deep: !0 }), U(() => v.viewerAnnotations, (n, e) => {
+      var a, s;
+      n && n !== e && !L.value ? (console.log("TSScrubber: Viewer annotations changed independently, re-fetching annotations"), E(() => {
+        B();
+      })) : n && n.length > 0 && !e && ((s = (a = t.activeViewer) == null ? void 0 : a.content) != null && s.id) && (console.log("TSScrubber: Annotation layers now available, fetching annotations"), E(() => {
+        B();
+      }));
+    }, { deep: !0 });
+    const se = () => {
+      console.log("TSScrubber: Resetting component state"), D.value = [], z(), V.value = !1, I.value = "", O.value = "point", re();
+    }, z = () => {
+      console.log("TSScrubber: Resetting segment state"), y.value = new Array(5e3), y.value = y.value.fill(0, 0, 4999), w.value = [];
+    }, re = () => {
+      E(() => {
+        [W.value, H.value, T.value].forEach((e) => {
+          if (e) {
+            const a = e.getContext("2d");
+            a && a.clearRect(0, 0, e.width, e.height);
+          }
+        });
+      });
+    }, $ = (n, e, a) => e * (n + a), ye = () => {
+      const n = T.value.getContext("2d"), e = window.devicePixelRatio || 1, a = n.webkitBackingStorePixelRatio || n.mozBackingStorePixelRatio || n.msBackingStorePixelRatio || n.oBackingStorePixelRatio || n.backingStorePixelRatio || 1;
+      return e / a;
+    }, oe = (n) => {
+      if (n > 0)
+        return n = n / 1e3, n = new Date(n), ("0" + n.getUTCHours()).slice(-2) + ":" + ("0" + n.getUTCMinutes()).slice(-2) + ":" + ("0" + n.getUTCSeconds()).slice(-2);
+    }, xe = (n) => {
+      if (V.value) {
+        const a = (n.clientX - te.value) / t.cWidth * (t.ts_end - t.ts_start), s = ne.value + a;
+        p("setStart", s);
+        const r = new Date((a + t.ts_start) / 1e3);
+        I.value = r.toUTCString();
+      } else {
+        const e = T.value.getBoundingClientRect(), a = n.clientX - e.left, s = R.value + X.value, r = O.value;
+        a > R.value - 10 && a < s + 10 ? (O.value = "drag", T.value.setAttribute("dragme", !0), T.value.removeAttribute("resizeme")) : (O.value = "point", T.value.removeAttribute("dragme"), T.value.removeAttribute("resizeme"));
+        const o = a / t.cWidth * (t.ts_end - t.ts_start) + t.ts_start, m = new Date(o / 1e3).toUTCString();
+        I.value = m.substring(0, m.length - 3), r !== O.value && A();
+      }
+    }, ke = () => {
+      V.value = !1;
+    }, We = (n) => {
+      V.value = !0;
+      const e = T.value.getBoundingClientRect(), a = n.clientX - e.left;
+      te.value = n.clientX;
+      const s = a / Te.value * (t.ts_end - t.ts_start);
+      p("setStart", s + t.ts_start), ne.value = s + t.ts_start;
+    }, Re = () => {
+      V.value = !1;
+    }, Ae = () => {
+      I.value = "";
+    }, ie = () => {
+      var a;
+      if (!v.viewerChannels || v.viewerChannels.length === 0) {
+        console.warn("TSScrubber: Cannot init segment spans - no viewer channels available");
+        return;
+      }
+      if (!t.ts_start || !t.ts_end) {
+        console.warn("TSScrubber: Cannot init segment spans - invalid time range");
+        return;
+      }
+      if (!((a = t.config) != null && a.timeSeriesApi)) {
+        console.warn("TSScrubber: Cannot init segment spans - no timeSeriesApi configured");
+        return;
+      }
+      console.log(`TSScrubber: Initializing segment spans for ${v.viewerChannels.length} channels`), z();
+      const n = Math.min(t.constants.SEGMENTSPAN, t.ts_end - t.ts_start), e = v.viewerChannels;
+      for (let s = 0; s < e.length; s++)
+        le(e[s].id, s, t.ts_start, t.ts_start + n, 0);
+    }, le = async (n, e, a, s, r) => {
+      var o;
+      const i = t.constants.MAXRECURSION;
+      if (!((o = t.config) != null && o.timeSeriesApi)) {
+        console.warn("TSScrubber: Cannot request segment span - no timeSeriesApi configured");
+        return;
+      }
+      if (!n) {
+        console.warn("TSScrubber: Cannot request segment span - no channel ID provided");
+        return;
+      }
+      try {
+        const m = await de(), _ = `${t.config.timeSeriesApi}/ts/retrieve/segments?session=${m}&channel=${n}&start=${a}&end=${s}`;
+        console.log(`TSScrubber: Fetching segments for channel ${n} (${e})`);
+        const b = await fe(_);
+        if (!v.viewerChannels[e] || v.viewerChannels[e].id !== n) {
+          console.warn("TSScrubber: Channel mismatch detected, ignoring segment response (likely package switched)");
+          return;
+        }
+        let h = new Array(b.length * 2), d = 0;
+        for (let M = 0; M < b.length; M++) {
+          h[d] = b[M][0], h[d + 1] = b[M][1], d = d + 2;
+          const J = Math.floor((b[M][0] - t.ts_start) / (t.ts_end - t.ts_start) * 5e3), De = Math.ceil((b[M][1] - t.ts_start) / (t.ts_end - t.ts_start) * 5e3);
+          y.value.fill(1, J, De);
+        }
+        let S = 0, j = !1, G = 0;
+        for (w.value = []; S < y.value.length - 1; ) {
+          if (!y.value[S] && !j) {
+            S++;
+            continue;
+          } else y.value[S] ? j || (G = S, j = !0) : (w.value = w.value.concat([G, S]), j = !1);
+          S++;
+        }
+        j && (w.value = w.value.concat([G, S])), w.value = w.value.concat([5e3]);
+        let Ee = h[0], P = v.viewerChannels[e];
+        if (!P || P.id !== n) {
+          console.warn("TSScrubber: Channel configuration mismatch, skipping update");
+          return;
+        }
+        Ee < P.dataSegments[P.dataSegments.length - 1] && (h.shift(), h.shift()), P.dataSegments = P.dataSegments.concat(h.sort((M, J) => M - J)), v.updateChannelProperty(P.id, "dataSegments", P.dataSegments);
+        let ue = s - a;
+        a + ue < t.ts_end && r < i ? le(n, e, s, s + ue, r + 1) : F();
+      } catch (m) {
+        console.error(`TSScrubber: Error fetching segments for channel ${n}:`, m), he(m);
+      }
+    }, B = async () => {
+      var e, a, s, r, i;
+      const n = (a = (e = t.activeViewer) == null ? void 0 : e.content) == null ? void 0 : a.id;
+      if (!n) {
+        console.warn("TSScrubber: Cannot get annotations - no active viewer ID"), D.value = [];
+        return;
+      }
+      if (!((s = t.config) != null && s.apiUrl)) {
+        console.warn("TSScrubber: Cannot get annotations - no API URL configured"), D.value = [];
+        return;
+      }
+      if (!v.viewerAnnotations || v.viewerAnnotations.length === 0) {
+        console.log("TSScrubber: No annotation layers available, skipping annotation fetch"), D.value = [], A();
+        return;
+      }
+      try {
+        const o = await de(), m = Fe((S) => S.id, v.viewerAnnotations), _ = t.ts_end;
+        let h = `${t.config.apiUrl}/timeseries/${n}/annotations/window` + `?api_key=${o}&aggregation=count&start=${t.ts_start}&end=${t.ts_end}&period=${Ce.value}&mergePeriods=true`;
+        for (let S in m)
+          h = h + `&layerIds=${m[S]}`;
+        console.log(`TSScrubber: Fetching annotations for viewer ${n}`);
+        const d = await fe(h);
+        ((i = (r = t.activeViewer) == null ? void 0 : r.content) == null ? void 0 : i.id) === n ? (D.value = d, A()) : console.log("TSScrubber: Ignoring annotation response - viewer changed during fetch");
+      } catch (o) {
+        console.error("TSScrubber: Error fetching annotations:", o), D.value = [], he(o), A();
+      }
+    }, A = () => {
+      q(), ce(), F();
+    }, q = () => {
+      E(() => {
+        const n = T.value;
+        if (!n) {
+          console.warn("iCanvas ref is missing, skipping render");
+          return;
+        }
+        const e = n.getContext("2d");
+        if (!e) {
+          console.warn("2D context is not available");
+          return;
+        }
+        e.setTransform(f.value, 0, 0, f.value, 0, 0), e.clearRect(0, 0, t.cWidth, C.value), R.value = (t.start - t.ts_start) / (t.ts_end - t.ts_start) * t.cWidth + 0.5 | 0, X.value = t.duration / (t.ts_end - t.ts_start) * t.cWidth + 0.5 | 0, e.fillStyle = "rgb(80,80,80)", e.strokeStyle = "rgb(80,80,80)", e.strokeRect(R.value + 0.5, 0.5, X.value, C.value - 1), e.fillRect(R.value - 2, C.value / 2 - 5 | 0, 2, 10), e.fillRect(R.value + X.value + 1, C.value / 2 - 5 | 0, 2, 10);
+        const a = R.value + t.cursorLoc * X.value;
+        a > R.value + 0.5 && (e.strokeStyle = "red", e.beginPath(), e.moveTo(a, 0), e.lineTo(a, C.value - 1), e.stroke());
+      });
+    }, F = () => {
+      E(() => {
+        const n = W.value;
+        if (!n) {
+          console.warn("segmentsCanvas ref is missing, skipping renderSegments");
+          return;
+        }
+        const e = n.getContext("2d");
+        if (!e) {
+          console.warn("Unable to get 2D context for segmentsCanvas, skipping renderSegments");
+          return;
+        }
+        e.setTransform(f.value, 0, 0, f.value, 0, 0), e.fillStyle = e.createPattern(ee.value, "repeat"), e.clearRect(0, 0, t.cWidth, C.value);
+        for (let a = 1; a < w.value.length; a += 2) {
+          const s = t.cWidth * w.value[a] / 5e3, r = t.cWidth * w.value[a + 1] / 5e3;
+          e.fillRect(s, 2, r - s, C.value - 6);
+        }
+      });
+    }, ce = () => {
+      const n = H.value;
+      if (!n) {
+        console.warn("annotationCanvas ref is missing, skipping renderTimelimeLine");
+        return;
+      }
+      const e = n.getContext("2d");
+      if (!e) {
+        console.warn("Unable to get 2D context for annotationCanvas, skipping renderTimelimeLine");
+        return;
+      }
+      e.setTransform(f.value, 0, 0, f.value, 0, 0), e.clearRect(0, 0, t.cWidth, Z.value);
+      const a = t.ts_start, s = t.ts_end, r = D.value;
+      let i = 0;
+      const o = 0, m = Math.floor((Z.value - 2) / Object.keys(r).length - o), _ = v.viewerAnnotations;
+      let b = "rgb(0,0,0)";
+      for (const h in r)
+        if (r.hasOwnProperty(h)) {
+          for (let d = 0; d < _.length; d++)
+            if (_[d].id === parseInt(h)) {
+              i = d, b = _[d].color;
+              break;
+            }
+          Pe(e, a, s, o, m, r[h], i, b);
+        }
+    }, Pe = (n, e, a, s, r, i, o, m) => {
+      E(() => {
+        n.setTransform(f.value, 0, 0, f.value, 0, 0), n.fillStyle = m;
+        for (let _ = 0; _ < i.length; _++)
+          if (i[_].value > 0) {
+            const b = (i[_].start - e) / (a - e) * t.cWidth;
+            let d = (i[_].end - e) / (a - e) * t.cWidth - b;
+            d < 1 && (d = 1);
+            const S = 1 + o * (r - 1 + s) + o;
+            n.fillRect(b, S, d, r);
+          }
+      });
+    }, Me = () => {
+      const n = document.createElement("canvas"), e = n.getContext("2d", { antialias: !0 }), a = "rgb(220,220,220)", s = 5, r = s, i = s, o = 10;
+      return n.width = r, n.height = i, e.fillStyle = a, e.beginPath(), e.moveTo(0, i * (1 / o)), e.lineTo(r * (1 / o), 0), e.lineTo(0, 0), e.lineTo(0, i * (1 / o)), e.fill(), e.beginPath(), e.moveTo(r, i * (1 / o)), e.lineTo(r * (1 / o), i), e.lineTo(0, i), e.lineTo(0, i * ((o - 1) / o)), e.lineTo(r * ((o - 1) / o), 0), e.lineTo(r, 0), e.lineTo(r, i * (1 / o)), e.fill(), e.beginPath(), e.moveTo(r, i * ((o - 1) / o)), e.lineTo(r * ((o - 1) / o), i), e.lineTo(r, i), e.lineTo(r, i * ((o - 1) / o)), e.fill(), n;
+    };
+    return Ne(() => {
+      y.value = new Array(5e3), y.value = y.value.fill(0, 0, 4999), f.value = ye(), ee.value = Me(), q();
+    }), c({
+      getAnnotations: B,
+      initSegmentSpans: ie,
+      render: A,
+      renderViewPort: q,
+      renderSegments: F,
+      renderTimelimeLine: ce,
+      resetComponentState: se,
+      resetSegmentState: z,
+      clearCanvases: re
+    }), (n, e) => ($e(), Ie("div", Ge, [
+      x("div", Je, [
+        x("div", null, K(pe.value), 1),
+        x("div", null, K(_e.value), 1),
+        x("div", null, K(be.value), 1)
+      ]),
+      x("div", Ke, [
+        x("div", Qe, [
+          x("div", {
+            id: "canvasWrap",
+            ref_key: "canvasWrap",
+            ref: k
+          }, [
+            x("canvas", {
+              id: "segmentsCanvas",
+              class: "canvas",
+              ref_key: "segmentsCanvas",
+              ref: W,
+              width: $(g.cWidth, f.value, 0),
+              height: $(C.value - 2, f.value, 0),
+              style: Q(ae.value)
+            }, null, 12, Ye),
+            x("canvas", {
+              id: "annotationCanvas",
+              class: "canvas",
+              ref_key: "annotationCanvas",
+              ref: H,
+              width: $(g.cWidth, f.value, 0),
+              height: $(C.value - 2, f.value, 0),
+              style: Q(ae.value)
+            }, null, 12, Ze),
+            x("canvas", {
+              id: "iCanvas",
+              class: "canvas",
+              ref_key: "iCanvas",
+              ref: T,
+              width: $(g.cWidth, f.value, 0),
+              height: $(C.value, f.value, 0),
+              onClick: e[0] || (e[0] = (...a) => n._onTap && n._onTap(...a)),
+              onMousemove: xe,
+              onMousedown: We,
+              onMouseup: ke,
+              onMouseenter: Re,
+              onMouseout: Ae,
+              style: Q(we.value)
+            }, null, 44, et)
+          ], 512)
+        ])
+      ])
+    ]));
+  }
+}, ot = /* @__PURE__ */ Le(tt, [["__scopeId", "data-v-4f7f1867"]]);
+export {
+  ot as default
+};