@pennsieve-viz/tsviewer 1.0.0

package/dist/TSAnnotationCanvas-CMZHn8mY.js

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