@pennsieve-viz/tsviewer 1.0.3 → 1.0.31

package/dist/TSAnnotationCanvas-DV93mqhV.js

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