@pennsieve-viz/tsviewer 1.1.2 → 1.1.3

package/dist/TSAnnotationCanvas-AGRX_hmt.js

@@ -0,0 +1,716 @@
+import { inject as _, ref as C, computed as K, watch as ne, onMounted as oe, openBlock as ae, createElementBlock as re, normalizeStyle as ie, unref as Q, nextTick as se } from "vue";
+import { o as le, m as ue, h as U, p as j, u as N, j as $, i as P, g as ce } from "./index-CnKz29Cn.js";
+import { storeToRefs as te } from "pinia";
+import { f as fe, h as de } from "./TSViewerCanvas-Bn8wSlLN.js";
+import { p as G } from "./pathOr-CIhHlnzf.js";
+import { g as he } from "./_commonjsHelpers-DaMA6jEr.js";
+const M = (t, a) => {
+  let u;
+  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(t))
+    return u = t.substring(1).split(""), u.length === 3 && (u = [u[0], u[0], u[1], u[1], u[2], u[2]]), u = "0x" + u.join(""), "rgba(" + [u >> 16 & 255, u >> 8 & 255, u & 255].join(",") + "," + a + ")";
+  throw new Error("Bad Hex");
+}, ve = (t) => {
+  t.sort((a, u) => a.start < u.start ? -1 : a.start > u.start ? 1 : 0);
+}, Y = (t, a) => {
+  const u = (t == null ? void 0 : t.layer_id) || 0;
+  return le({}, fe(ue("id", u), a));
+}, Z = (t, a, u, i = 0, f = !1) => {
+  let c;
+  return f ? c = q(t, a, i, t.length - 1, u) : c = W(t, a, i, t.length - 1, u), c === -1 ? c = 0 : c < 0 && (c = -c - 2), c;
+}, W = (t, a, u, i, f) => {
+  if (i < u) {
+    let y = i >= 0 ? i : -i - 2;
+    if (y === -1) return y;
+    const T = t[y].start;
+    for (; y >= 0 && t[y].start === T; )
+      y--;
+    return -y - 2;
+  }
+  const c = parseInt((u + i) / 2);
+  if (t[c].start > a)
+    return W(t, a, u, c - 1, f);
+  if (t[c].start < a)
+    return W(t, a, c + 1, i, f);
+  {
+    let y = c;
+    if (f) {
+      for (; y >= 0 && t[y].start === a; )
+        y--;
+      y++;
+    } else {
+      for (; y < t.length && t[y].start === a; )
+        y++;
+      y--;
+    }
+    return y;
+  }
+}, q = (t, a, u, i, f) => {
+  if (i < u) {
+    let T = i >= 0 ? i : -i - 2;
+    if (T === -1) return T;
+    const I = t[T].start + t[T].duration;
+    for (; T >= 0 && t[T].start + t[T].duration === I; )
+      T--;
+    return -T - 2;
+  }
+  const c = parseInt((u + i) / 2), y = t[c].start + t[c].duration;
+  if (y > a)
+    return q(t, a, u, c - 1, f);
+  if (y < a)
+    return q(t, a, c + 1, i, f);
+  {
+    let T = c;
+    if (f) {
+      for (; T >= 0 && t[T].start + t[T].duration === a; )
+        T--;
+      T++;
+    } else {
+      for (; T < t.length && t[T].start + t[T].duration === a; )
+        T++;
+      T--;
+    }
+    return T;
+  }
+}, X = (t, a, u = 0) => a * (t + u);
+function ge(t = null) {
+  const a = t || _("viewerStore", null) || U("default"), { viewerChannels: u, viewerAnnotations: i, viewerMontageScheme: f } = te(a), c = C([]), y = C([]), T = (g) => {
+    const h = f.value !== "NOT_MONTAGED";
+    let e = j("", "id", g);
+    if (h) {
+      const r = e.split("_");
+      e = r.length ? de(r) : e;
+    }
+    return e;
+  }, I = async (g, h, e, r, d) => {
+    const l = [];
+    l.push({ start: g, end: e.tsEnd });
+    let o = 0;
+    for (let n = 0; n < c.value.length; n++) {
+      const s = c.value[n];
+      if (g >= s.start && h <= s.end)
+        return;
+      if (l[0].start > h)
+        break;
+      if (s.start <= l[0].start && s.end >= g)
+        o = n + 1, l[0].start = s.end;
+      else if (s.start > l[0].start) {
+        o = n;
+        break;
+      }
+    }
+    const v = i.value.reduce((n, s) => n + s.annotations.length, 0);
+    if (l[0].start >= l[0].end && v > 0)
+      return;
+    const m = 0;
+    for (let n = o; n < c.value.length; n++)
+      if (c.value[n].start >= l[m].start)
+        if (l[m].end = c.value[n].start, c.value[n].end < h)
+          l.push({ start: c.value[n].end, end: e.tsEnd });
+        else
+          break;
+    if (!(l[0].start >= l[0].end && v > 0) && l.length > 0) {
+      u.value.map((n) => T(n));
+      for (const n of l) {
+        for (const s of i.value) {
+          if (!s.id) {
+            console.warn("Layer ID is undefined, skipping annotation request for layer:", s);
+            continue;
+          }
+          const w = Math.floor(n.end), E = {
+            id: r.content.id,
+            start: Math.floor(n.start),
+            end: w,
+            layerId: s.id,
+            limit: e.constants.LIMITANNFETCH
+          };
+          try {
+            const k = await N(), p = `${a.config.apiUrl}/timeseries/${r.content.id}/layers/${s.id}/annotations?api_key=${k}`, L = Object.keys(E).map((J) => `&${J}=${E[J]}`).join(""), b = `${p}${L}`, F = await fetch(b, {
+              method: "GET",
+              headers: { "Content-type": "application/json" }
+            });
+            if (F.status >= 400)
+              throw new Error(F.status);
+            const H = await F.json();
+            await R(H, d);
+          } catch (k) {
+            $(k);
+          }
+        }
+        c.value.push({
+          start: Math.floor(n.start),
+          end: Math.floor(n.end)
+        });
+      }
+      c.value.sort((n, s) => n.start < s.start ? -1 : n.start > s.start ? 1 : 0);
+    }
+  }, R = async (g, h) => {
+    const e = j({}, "linkedPackages", g);
+    let r = G([], ["annotations", "results"], g);
+    if (r.length >= 500) {
+      let l = 0;
+      for (const o of r)
+        o.start > l && (l = o.start);
+      for (const o of c.value)
+        if (o.end > l && o.start < l) {
+          o.end = l;
+          break;
+        }
+    }
+    const d = f.value !== "NOT_MONTAGED";
+    if (r.length > 0) {
+      const l = r.map((o) => {
+        const v = {
+          name: "",
+          id: o.id,
+          label: o.label,
+          description: o.description,
+          start: o.start,
+          duration: o.end - o.start,
+          end: o.end,
+          cStart: null,
+          cEnd: null,
+          selected: !1,
+          channelIds: o.channelIds,
+          allChannels: !1,
+          layer_id: o.layerId,
+          userId: o.userId
+        };
+        if (o.linkedPackage) {
+          const m = o.linkedPackage;
+          v.linkedPackage = G("", ["content", "id"], e[m]), v.linkedPackageDTO = e[m];
+        }
+        return (!d && v.channelIds.length === u.value.length || d && v.channelIds.length > u.value.length) && (v.allChannels = !0), v;
+      });
+      i.value.forEach((o) => {
+        const v = o.annotations, m = l.filter((n) => o.id === n.layer_id);
+        o.annotations = v.concat(m), a.updateLayer(o);
+      });
+    }
+    h("annotationsReceived");
+  };
+  return {
+    cachedAnnRange: c,
+    annLayerInfo: y,
+    checkAnnotationRange: I,
+    findNextAnnotation: (g) => {
+      const h = a.getViewerActiveLayer(), e = Z(h.annotations, g, !1);
+      return e < h.annotations.length ? h.annotations[e].start > g ? h.annotations[e] : h.annotations[e + 1] || h.annotations[e] : h.annotations[e];
+    },
+    findPreviousAnnotation: (g) => {
+      const h = a.getViewerActiveLayer(), e = Z(h.annotations, g, !0);
+      return h.annotations[e].start < g ? h.annotations[e] : e > 0 ? h.annotations[e - 1] : h.annotations[e];
+    },
+    getChannelId: T
+  };
+}
+function ye(t = null) {
+  const a = t || _("viewerStore", null) || U("default"), { viewerAnnotations: u, viewerChannels: i } = te(a), f = C([]), c = C([]), y = C(null), T = C(["#FFFF4E"]), I = (e, r) => {
+    var v, m;
+    const l = (((v = r.constants) == null ? void 0 : v.ANNOTATIONLABELHEIGHT) || 20) / 2 | 0, o = ((m = r.constants) == null ? void 0 : m.XOFFSET) || 0;
+    for (const n of e) {
+      let s = n.start, w = n.duration;
+      n.duration < 0 && (s = n.start + n.duration, w = -n.duration);
+      const E = o + (s - r.start) / r.rsPeriod;
+      if (n.cStart = E | 0, n.duration !== 0) {
+        const k = o + (s + w - r.start) / r.rsPeriod;
+        n.cEnd = k | 0;
+      } else
+        n.cEnd = n.cStart + r.cWidth / 40 | 0;
+      if (n.allChannels)
+        n.allOffsets = [l], n.cY = l;
+      else {
+        n.allOffsets = [], n.minOffset = r.cHeight | 0, n.maxOffset = 0;
+        const k = i.value;
+        for (const S of n.channelIds) {
+          let p = null;
+          for (const L of k)
+            if (L.id === S && L.visible) {
+              p = L.rowBaseline | 0, p < n.minOffset && (n.minOffset = p), p > n.maxOffset && (n.maxOffset = p), n.allOffsets.push(p);
+              break;
+            }
+        }
+        c.value.indexOf(n.minOffset) < 0 && c.value.push(n.minOffset), n.cY = n.minOffset;
+      }
+    }
+  }, R = (e, r, d, l) => {
+    var m, n;
+    const o = ((m = d.constants) == null ? void 0 : m.ANNOTATIONLABELHEIGHT) || 20, v = o / 2 | 0;
+    e.setTransform(d.pixelRatio, 0, 0, d.pixelRatio, 0, 0), e.save(), e.lineWidth = 1, e.setLineDash([8, 5]), e.strokeStyle = "rgba(0,0,0, 0.6)", e.fillStyle = "rgba(0,0,0,0.05)";
+    for (const s of r) {
+      const w = Y(s, u.value);
+      s.selected && (e.save(), e.strokeStyle = w.selColor, e.fillStyle = w.bkColor, e.lineWidth = 1);
+      const E = Math.round(s.cStart) + 0.5, k = Math.round(s.cEnd) + 0.5;
+      s.allChannels ? s.duration === 0 ? (e.beginPath(), e.moveTo(E + 1, o), e.lineTo(E, l), e.stroke()) : (e.fillRect(E, o, k - E, l - o), e.beginPath(), e.moveTo(E, o), e.lineTo(E, l), e.moveTo(k, o), e.lineTo(k, l), e.stroke()) : ((n = s == null ? void 0 : s.channelIds) == null ? void 0 : n.length) === 1 ? s.duration === 0 && (e.beginPath(), e.moveTo(E, s.minOffset + v), e.lineTo(E, s.minOffset + v + 8), e.stroke()) : s.duration === 0 ? (e.beginPath(), e.moveTo(E, s.minOffset + v), e.lineTo(E, s.maxOffset - v), e.stroke()) : (e.fillRect(
+        E - 1,
+        s.minOffset + v,
+        k - E + 1,
+        s.maxOffset - s.minOffset - o
+      ), e.beginPath(), e.moveTo(E, s.minOffset + v), e.lineTo(E, s.maxOffset - v), e.moveTo(k, s.minOffset + v), e.lineTo(k, s.maxOffset - v), e.stroke()), s.selected && e.restore();
+    }
+    e.restore();
+  }, A = async (e, r, d, l, o, v) => {
+    var s;
+    const m = ((s = d.constants) == null ? void 0 : s.ANNOTATIONLABELHEIGHT) || 20, n = m / 2 | 0;
+    e.setTransform(d.pixelRatio, 0, 0, d.pixelRatio, 0, 0), e.save(), e.lineWidth = 2, e.font = "14px sans-serif", e.textAlign = "left";
+    for (const w of r) {
+      const E = Y(w, u.value);
+      if (w === y.value && l)
+        continue;
+      w.selected ? (e.fillStyle = E.selColor || "rgba(51,204,102, 0.8)", e.strokeStyle = "white") : (e.fillStyle = E.color || "rgba(51,204,102,0.8)", e.strokeStyle = w === y.value ? "white" : "rgba(255,255,255,0.8)");
+      const k = Math.round(w.cStart) + 1, S = Math.round(w.cEnd);
+      let p = 0;
+      for (let F = 0; F < w.allOffsets.length; F++)
+        e.fillRect(
+          k - 1,
+          w.allOffsets[F] - n,
+          S - k + 2,
+          m
+        ), w.allOffsets[F] === w.minOffset && (p = F);
+      const L = w.allOffsets[p];
+      if (["annSelect", "annResize-left", "annResize-right"].includes(o) && v === "annotate" && (e.beginPath(), w.duration !== 0 && (e.moveTo(S - 3, L - n + 3), e.lineTo(S - 3, L + n - 3)), e.moveTo(k + 3, L - n + 3), e.lineTo(k + 3, L + n - 3), e.stroke()), S - k > w.label.length * 8 + 10) {
+        e.fillStyle = T.value.indexOf(E.hexColor) >= 0 ? "black" : "white";
+        const F = w.linkedPackage ? k + 30 : k + 10, H = w.linkedPackage ? L + n - n / 2 : L + n - 6;
+        e.fillText(w.label, F, H);
+      }
+      const b = w.linkedPackageDTO;
+      b && S - k >= 30 && await O(e, b, k, L, n, m);
+    }
+    e.restore();
+  }, O = async (e, r, d, l, o, v) => {
+    const m = G({}, ["objects", "view", 1, "content"], r), n = j("", "fileType", m), s = new Image();
+    if (n === "PNG") {
+      const { id: w, packageId: E } = m, k = a.config.apiUrl;
+      try {
+        const S = await N();
+        s.src = `${k}/packages/${E}/files/${w}/presign/?api_key=${S}`, s.complete ? e.drawImage(s, d, l - o, 27, v) : s.addEventListener("load", () => {
+          e.drawImage(s, d, l - o, 27, v);
+        }, { once: !0 });
+      } catch (S) {
+        console.error("Error loading image:", S);
+      }
+    } else
+      s.src = g(), e.drawImage(s, d + 5, l - o, 20, 20);
+  }, g = (e) => "/path/to/default/icon.png";
+  return {
+    renderAnn: f,
+    hoverOffsets: c,
+    focusedAnn: y,
+    render: (e, r, d, l) => {
+      var w, E;
+      if (!r) {
+        console.warn("TSAnnotationCanvas: annotationsCanvas prop is undefined or null");
+        return;
+      }
+      const o = r.getContext("2d"), v = d.getContext("2d");
+      o.setTransform(e.pixelRatio, 0, 0, e.pixelRatio, 0, 0), v.setTransform(e.pixelRatio, 0, 0, e.pixelRatio, 0, 0), c.value = [(((w = e.constants) == null ? void 0 : w.ANNOTATIONLABELHEIGHT) || 20) / 2], o.clearRect(0, 0, e.cWidth, e.cHeight), v.clearRect(0, 0, e.cWidth, e.cHeight), f.value = [];
+      const m = e.duration && e.duration > 0 ? e.duration : 15e6, n = e.start || 0, s = n + m;
+      for (const k of u.value)
+        if (k.visible && ((E = k.annotations) == null ? void 0 : E.length) > 0) {
+          const S = k.annotations.filter((p) => {
+            const L = p.start, b = p.end || p.start + (p.duration || 0);
+            return L < s && b > n;
+          });
+          S.length > 0 && (S.sort((p, L) => p.start - L.start), f.value.push(...S));
+        }
+      f.value.length !== 0 && (ve(f.value), I(f.value, e), R(o, f.value, e, l), A(v, f.value, e, !0, e.pointerMode, e.viewerActiveTool), y.value && A(v, [y.value], e, !1, e.pointerMode, e.viewerActiveTool));
+    },
+    computeRenderOptions: I,
+    renderAnnotationAreas: R,
+    renderAnnotationLabels: A
+  };
+}
+function me(t, a, u, i = null) {
+  const f = i || _("viewerStore", null) || U("default"), c = C([0, 0]), y = (e, r) => {
+    const l = ((r == null ? void 0 : r.ANNOTATIONLABELHEIGHT) || 20) / 2;
+    for (const o of u.value)
+      if (e >= o - l && e <= o + l)
+        return !0;
+    return !1;
+  }, T = (e, r, d) => {
+    var v;
+    const o = ((d == null ? void 0 : d.ANNOTATIONLABELHEIGHT) || 20) / 2;
+    for (let m = 0; m < (((v = a.value) == null ? void 0 : v.length) || 0); m++) {
+      const n = a.value[m];
+      if (n.cStart < e && n.cEnd > e) {
+        if (r > n.cY - o && r < n.cY + o)
+          return m;
+      } else if (n.cStart > e)
+        break;
+    }
+    return null;
+  }, I = (e, r, d) => {
+    if (!d) return r;
+    switch (r) {
+      case "annotate":
+        return e <= d.cStart + 10 ? "annResize-left" : e >= d.cEnd - 10 && d.duration > 0 ? "annResize-right" : "annSelect";
+      case "pointer":
+        return "annSelect";
+      default:
+        return r;
+    }
+  };
+  return {
+    mouseDownPosition: c,
+    shouldCheckAnnotationHover: y,
+    findAnnotationAtPosition: T,
+    determinePointerMode: I,
+    resetFocusedAnnotation: () => {
+      var e;
+      ((e = t.value) == null ? void 0 : e.oldStart) !== void 0 && (t.value.start = t.value.oldStart, t.value.duration = t.value.oldDuration, t.value.end = t.value.start + t.value.duration);
+    },
+    selectFocusedAnnotation: () => t.value ? (f.setActiveAnnotation(t.value), !0) : !1,
+    onMouseDown: (e, r, d) => {
+      t.value && ["annResize-left", "annResize-right"].includes(d) && (t.value.oldStart = t.value.start, t.value.oldDuration = t.value.duration, c.value = [e, r]);
+    },
+    onMouseMove: (e, r, d, l, o) => {
+      let v = d;
+      if (l && c.value) {
+        const m = (e - c.value[0]) * o.rsPeriod;
+        switch (d) {
+          case "annResize-left":
+            t.value.oldDuration > 0 ? (t.value.start = t.value.oldStart + m, t.value.duration = t.value.oldDuration - m, t.value.end = t.value.start + t.value.duration) : t.value.start = t.value.oldStart + m;
+            break;
+          case "annResize-right":
+            t.value.duration = t.value.oldDuration + m, t.value.end = t.value.start + t.value.duration;
+            break;
+        }
+      } else {
+        const m = y(r, o.constants);
+        if (v = o.viewerActiveTool, m) {
+          const n = T(e, r, o.constants);
+          if (n !== null) {
+            const s = t.value, w = a.value[n];
+            (!s || e < t.value.cStart || e > t.value.cEnd) && (t.value = w), v = I(e, o.viewerActiveTool, t.value);
+          } else
+            t.value = null;
+        } else
+          t.value = null, v = o.viewerActiveTool;
+      }
+      return v;
+    },
+    onMouseUp: (e, r) => {
+      if (t.value && ["annResize-left", "annResize-right"].includes(e)) {
+        if (t.value.duration < 0) {
+          const d = -t.value.duration, l = t.value.start - d;
+          t.value.start = l, t.value.duration = d, t.value.end = l + d;
+        }
+        f.setActiveAnnotation(t.value), r("updateAnnotation", t.value);
+      }
+    }
+  };
+}
+var D = { exports: {} }, V;
+function Te() {
+  if (V) return D.exports;
+  V = 1;
+  function t() {
+  }
+  return t.prototype = {
+    on: function(a, u, i) {
+      var f = this.e || (this.e = {});
+      return (f[a] || (f[a] = [])).push({
+        fn: u,
+        ctx: i
+      }), this;
+    },
+    once: function(a, u, i) {
+      var f = this;
+      function c() {
+        f.off(a, c), u.apply(i, arguments);
+      }
+      return c._ = u, this.on(a, c, i);
+    },
+    emit: function(a) {
+      var u = [].slice.call(arguments, 1), i = ((this.e || (this.e = {}))[a] || []).slice(), f = 0, c = i.length;
+      for (f; f < c; f++)
+        i[f].fn.apply(i[f].ctx, u);
+      return this;
+    },
+    off: function(a, u) {
+      var i = this.e || (this.e = {}), f = i[a], c = [];
+      if (f && u)
+        for (var y = 0, T = f.length; y < T; y++)
+          f[y].fn !== u && f[y].fn._ !== u && c.push(f[y]);
+      return c.length ? i[a] = c : delete i[a], this;
+    }
+  }, D.exports = t, D.exports.TinyEmitter = t, D.exports;
+}
+var z, x;
+function we() {
+  if (x) return z;
+  x = 1;
+  var t = Te();
+  return z = new t(), z;
+}
+var ke = we();
+const B = /* @__PURE__ */ he(ke), ee = {
+  $emit: (...t) => B.emit(...t),
+  $on: (...t) => B.on(...t),
+  $off: (...t) => B.off(...t),
+  $once: (...t) => B.once(...t)
+};
+function Oe(t = null) {
+  const a = t || _("viewerStore", null) || U("default"), u = C([]), i = C([
+    "#18BA62",
+    "#FFBC27",
+    "#E94B4B",
+    "#0D4EFF",
+    "#FF4FFF",
+    "#50FFFF",
+    "#FFFF4E",
+    "#512BAF",
+    "#8A6ECF",
+    "#389BAD",
+    "#187D46",
+    "#B12800",
+    "#0C2475",
+    "#FF5321",
+    "#FF99CC",
+    "#DCC180",
+    "#FF6C21",
+    "#000000",
+    "#9B9B9B",
+    "#00FF00",
+    "#FA8072",
+    "#808000",
+    "#A0522D",
+    "#2760FF"
+  ]), f = async (O, g) => {
+    const h = [];
+    if (O.results.length === 0)
+      await c({
+        name: "Default",
+        color: "#18BA62",
+        description: "Default Annotation Layer"
+      }, null, g);
+    else {
+      for (let e = 0; e < O.results.length; e++) {
+        const r = O.results[e];
+        let d = r.color || i.value[e % i.value.length];
+        const l = {
+          id: r.id,
+          name: r.name,
+          description: r.description,
+          visible: !0,
+          selected: e === 0,
+          // First layer is selected by default
+          annotations: [],
+          color: M(d, 0.7),
+          hexColor: d,
+          bkColor: M(d, 0.15),
+          selColor: M(d, 0.9)
+        };
+        h.push(l);
+      }
+      a.setAnnotations(h), g("annLayersInitialized");
+    }
+    u.value = O.results;
+  }, c = async (O, g, h) => {
+    var e;
+    if (!((e = g == null ? void 0 : g.content) != null && e.id))
+      return null;
+    try {
+      const r = await N(), d = `${a.config.apiUrl}/timeseries/${g.content.id}/layers?api_key=${r}`, l = await P(d, {
+        method: "POST",
+        body: {
+          name: O.name,
+          color: O.color,
+          description: O.description || O.name
+        }
+      }), o = {
+        ...l,
+        annotations: [],
+        hexColor: l.color,
+        color: M(l.color, 0.7),
+        bkColor: M(l.color, 0.15),
+        selColor: M(l.color, 0.9),
+        visible: !0,
+        selected: !0
+      };
+      return a.createLayer(o), a.setActiveAnnotationLayer(o.id), ee.$emit("toast", {
+        detail: {
+          msg: `'${o.name}' Layer Created`
+        }
+      }), o;
+    } catch (r) {
+      throw $(r), r;
+    } finally {
+      h && h("closeAnnotationLayerWindow");
+    }
+  };
+  return {
+    annLayerInfo: u,
+    defaultColors: i,
+    initializeLayers: f,
+    createAnnotationLayer: c,
+    updateLayerVisibility: (O, g) => {
+      const h = a.viewerAnnotations.find((e) => e.id === O);
+      h && (h.visible = g, a.updateLayer(h));
+    },
+    selectLayer: (O) => {
+      a.viewerAnnotations.forEach((h) => {
+        h.selected = !1, a.updateLayer(h);
+      });
+      const g = a.viewerAnnotations.find((h) => h.id === O);
+      g && (g.selected = !0, a.updateLayer(g), a.setActiveAnnotationLayer(O));
+    },
+    deleteLayer: async (O, g) => {
+      var h;
+      if (!((h = g == null ? void 0 : g.content) != null && h.id))
+        return null;
+      try {
+        const e = await N(), r = `${a.config.apiUrl}/timeseries/${g.content.id}/layers/${O}?api_key=${e}`;
+        await P(r, { method: "DELETE" }), a.removeLayer(O), ee.$emit("toast", {
+          detail: {
+            msg: "Layer deleted successfully"
+          }
+        });
+      } catch (e) {
+        throw $(e), e;
+      }
+    },
+    updateLayerColor: async (O, g, h) => {
+      var e;
+      if (!((e = h == null ? void 0 : h.content) != null && e.id))
+        return null;
+      try {
+        const r = await N(), d = `${a.config.apiUrl}/timeseries/${h.content.id}/layers/${O}?api_key=${r}`, l = await P(d, {
+          method: "PUT",
+          body: { color: g }
+        }), o = a.viewerAnnotations.find((v) => v.id === O);
+        return o && (o.hexColor = g, o.color = M(g, 0.7), o.bkColor = M(g, 0.15), o.selColor = M(g, 0.9), a.updateLayer(o)), l;
+      } catch (r) {
+        throw $(r), r;
+      }
+    },
+    loadLayers: async (O, g) => {
+      var h;
+      if (!((h = O == null ? void 0 : O.content) != null && h.id))
+        return null;
+      try {
+        const e = await N(), r = `${a.config.apiUrl}/timeseries/${O.content.id}/layers?api_key=${e}`, d = await P(r);
+        return await f(d, g), d;
+      } catch (e) {
+        throw $(e), e;
+      }
+    }
+  };
+}
+const Le = ["width", "height"], Ee = {
+  __name: "TSAnnotationCanvas",
+  props: {
+    cWidth: { type: Number, default: 0 },
+    cHeight: Number,
+    start: Number,
+    duration: Number,
+    tsEnd: Number,
+    rsPeriod: Number,
+    pixelRatio: Number,
+    constants: {
+      type: Object,
+      default: () => ({
+        ANNOTATIONLABELHEIGHT: 20,
+        XOFFSET: 0,
+        LIMITANNFETCH: 500
+      })
+    },
+    pointerMode: String,
+    annotationsCanvas: [HTMLCanvasElement, Object],
+    activeViewer: { type: Object, required: !0 },
+    viewerActiveTool: String
+  },
+  emits: [
+    "annLayersInitialized",
+    "annotationsReceived",
+    "closeAnnotationLayerWindow",
+    "updateAnnotation"
+  ],
+  setup(t, { expose: a, emit: u }) {
+    const i = t, f = u, c = C(null), {
+      checkAnnotationRange: y,
+      findNextAnnotation: T,
+      findPreviousAnnotation: I
+    } = ge(), {
+      renderAnn: R,
+      hoverOffsets: A,
+      focusedAnn: O,
+      render: g
+    } = ye(), {
+      resetFocusedAnnotation: h,
+      selectFocusedAnnotation: e,
+      onMouseDown: r,
+      onMouseMove: d,
+      onMouseUp: l
+    } = me(O, R, A), {
+      createAnnotationLayer: o,
+      loadLayers: v
+    } = Oe(), m = K(() => i.cHeight - 20), n = K(() => ({
+      width: i.cWidth + "px",
+      height: m.value + "px"
+    })), s = () => {
+      g(i, i.annotationsCanvas, c.value, m.value);
+    }, w = (L, b) => {
+      r(L, b, i.pointerMode);
+    }, E = (L, b, F, H) => d(L, b, F, H, i), k = () => {
+      l(i.pointerMode, f);
+    }, S = () => {
+      e() && se(() => s());
+    }, p = async (L) => {
+      try {
+        await o(L, i.activeViewer, f);
+      } catch (b) {
+        console.error("Error creating layer:", b);
+      }
+    };
+    return ne(
+      () => i.activeViewer,
+      async (L) => {
+        try {
+          await v(L, f), await y(
+            i.start,
+            i.start + i.duration,
+            i,
+            L,
+            f
+          );
+        } catch (b) {
+          console.error("Error loading annotations for new viewer:", b);
+        }
+      }
+    ), oe(async () => {
+      try {
+        await v(i.activeViewer, f), await y(
+          i.start,
+          i.start + i.duration,
+          i,
+          i.activeViewer,
+          f
+        );
+      } catch (L) {
+        console.error("Error initializing annotations:", L);
+      }
+    }), a({
+      render: s,
+      resetFocusedAnnotation: h,
+      findNextAnnotation: T,
+      findPreviousAnnotation: I,
+      checkAnnotationRange: (L, b) => y(L, b, i, i.activeViewer, f),
+      selectFocusedAnn: S,
+      createAnnotationLayer: p,
+      onMouseDown: w,
+      onMouseMove: E,
+      onMouseUp: k
+    }), (L, b) => (ae(), re("canvas", {
+      id: "annLabelArea",
+      ref_key: "annLabelArea",
+      ref: c,
+      class: "timeseries-annotation-canvas",
+      width: Q(X)(t.cWidth, t.pixelRatio, 0),
+      height: Q(X)(m.value, t.pixelRatio, 0),
+      style: ie(n.value)
+    }, null, 12, Le));
+  }
+}, Me = /* @__PURE__ */ ce(Ee, [["__scopeId", "data-v-2261f569"]]);
+export {
+  Me as default
+};