@annotorious/svelte 3.0.0-rc.1

package/dist/MouseOverTooltip.svelte.d.ts

@@ -0,0 +1 @@
+export { SvelteComponentTyped as default } from 'svelte';

package/dist/annotorious-svelte.es.js

@@ -0,0 +1,9 @@
+import { default as a } from "./annotorious-svelte.es2.js";
+import { default as t } from "./annotorious-svelte.es3.js";
+import { default as f } from "./annotorious-svelte.es4.js";
+export {
+  a as MouseOverTooltip,
+  t as OpenSeadragonAnnotator,
+  f as OpenSeadragonPopup
+};
+//# sourceMappingURL=annotorious-svelte.es.js.map

package/dist/annotorious-svelte.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotorious-svelte.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/annotorious-svelte.es10.js

@@ -0,0 +1,5 @@
+const e = "";
+export {
+  e as default
+};
+//# sourceMappingURL=annotorious-svelte.es10.js.map

package/dist/annotorious-svelte.es10.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotorious-svelte.es10.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/annotorious-svelte.es11.js

@@ -0,0 +1,5 @@
+let o = (n = 21) => crypto.getRandomValues(new Uint8Array(n)).reduce((r, e) => (e &= 63, e < 36 ? r += e.toString(36) : e < 62 ? r += (e - 26).toString(36).toUpperCase() : e > 62 ? r += "-" : r += "_", r), "");
+export {
+  o as nanoid
+};
+//# sourceMappingURL=annotorious-svelte.es11.js.map

package/dist/annotorious-svelte.es11.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotorious-svelte.es11.js","sources":["../../../node_modules/nanoid/index.browser.js"],"sourcesContent":["export { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nexport let nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\n"],"names":["nanoid","size","id","byte"],"mappings":"AAmBU,IAACA,IAAS,CAACC,IAAO,OAC1B,OAAO,gBAAgB,IAAI,WAAWA,CAAI,CAAC,EAAE,OAAO,CAACC,GAAIC,OACvDA,KAAQ,IACJA,IAAO,KACTD,KAAMC,EAAK,SAAS,EAAE,IACbA,IAAO,KAChBD,MAAOC,IAAO,IAAI,SAAS,EAAE,EAAE,YAAa,IACnCA,IAAO,KAChBD,KAAM,MAENA,KAAM,KAEDA,IACN,EAAE;","x_google_ignoreList":[0]}

package/dist/annotorious-svelte.es2.js

@@ -0,0 +1,128 @@
+import { SvelteComponent as O, init as T, safe_not_equal as q, empty as w, insert as E, transition_in as u, transition_out as _, check_outros as A, detach as L, getContext as N, component_subscribe as S, onMount as X, create_slot as Y, element as j, attr as c, update_slot_base as z, get_all_dirty_from_scope as B, get_slot_changes as D, group_outros as F } from "./annotorious-svelte.es5.js";
+const G = (o) => ({ hovered: o & /*hovered*/
+16 }), b = (o) => ({ hovered: (
+  /*hovered*/
+  o[4]
+) });
+function g(o) {
+  let r, s, e;
+  const t = (
+    /*#slots*/
+    o[8].default
+  ), n = Y(
+    t,
+    o,
+    /*$$scope*/
+    o[7],
+    b
+  );
+  return {
+    c() {
+      r = j("div"), n && n.c(), c(r, "class", "a9s-tooltip"), c(r, "style", s = `left:${/*left*/
+      o[2]}px; top:${/*top*/
+      o[1]}px; position: absolute;`);
+    },
+    m(i, l) {
+      E(i, r, l), n && n.m(r, null), e = !0;
+    },
+    p(i, l) {
+      n && n.p && (!e || l & /*$$scope, hovered*/
+      144) && z(
+        n,
+        t,
+        i,
+        /*$$scope*/
+        i[7],
+        e ? D(
+          t,
+          /*$$scope*/
+          i[7],
+          l,
+          G
+        ) : B(
+          /*$$scope*/
+          i[7]
+        ),
+        b
+      ), (!e || l & /*left, top*/
+      6 && s !== (s = `left:${/*left*/
+      i[2]}px; top:${/*top*/
+      i[1]}px; position: absolute;`)) && c(r, "style", s);
+    },
+    i(i) {
+      e || (u(n, i), e = !0);
+    },
+    o(i) {
+      _(n, i), e = !1;
+    },
+    d(i) {
+      i && L(r), n && n.d(i);
+    }
+  };
+}
+function H(o) {
+  let r, s, e = (
+    /*$hover*/
+    o[0] && /*show*/
+    o[3] && g(o)
+  );
+  return {
+    c() {
+      e && e.c(), r = w();
+    },
+    m(t, n) {
+      e && e.m(t, n), E(t, r, n), s = !0;
+    },
+    p(t, [n]) {
+      /*$hover*/
+      t[0] && /*show*/
+      t[3] ? e ? (e.p(t, n), n & /*$hover, show*/
+      9 && u(e, 1)) : (e = g(t), e.c(), u(e, 1), e.m(r.parentNode, r)) : e && (F(), _(e, 1, 1, () => {
+        e = null;
+      }), A());
+    },
+    i(t) {
+      s || (u(e), s = !0);
+    },
+    o(t) {
+      _(e), s = !1;
+    },
+    d(t) {
+      e && e.d(t), t && L(r);
+    }
+  };
+}
+function I(o, r, s) {
+  let e, t, { $$slots: n = {}, $$scope: i } = r, { container: l } = r;
+  const k = N("anno"), { store: M, hover: p } = k.state;
+  S(o, p, (f) => s(0, t = f));
+  let v, d, a = !0;
+  return X(() => {
+    const f = () => {
+      s(3, a = !0);
+    }, m = (y) => {
+      const { offsetX: P, offsetY: C } = y;
+      s(2, d = P), s(1, v = C);
+    }, h = () => {
+      s(3, a = !1);
+    };
+    return l.addEventListener("pointerenter", f), l.addEventListener("pointermove", m), l.addEventListener("pointerleave", h), () => {
+      l.removeEventListener("pointerenter", f), l.removeEventListener("pointermove", m), l.removeEventListener("pointerleave", h);
+    };
+  }), o.$$set = (f) => {
+    "container" in f && s(6, l = f.container), "$$scope" in f && s(7, i = f.$$scope);
+  }, o.$$.update = () => {
+    o.$$.dirty & /*$hover*/
+    1 && s(4, e = t ? M.getAnnotation(t) : void 0);
+  }, [t, v, d, a, e, p, l, i, n];
+}
+class J extends O {
+  constructor(r) {
+    super(), T(this, r, I, H, q, { container: 6 });
+  }
+}
+const Q = J;
+export {
+  Q as default
+};
+//# sourceMappingURL=annotorious-svelte.es2.js.map

package/dist/annotorious-svelte.es2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotorious-svelte.es2.js","sources":["../src/MouseOverTooltip.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import { getContext, onMount } from 'svelte';\n  import type { ImageAnnotation } from '@annotorious/annotorious';\n  import type { SvelteAnnotator } from '@annotorious/core';\n\n  export let container: Element;\n\n  const anno = getContext<SvelteAnnotator<ImageAnnotation>>('anno');\n\n  const { store, hover } = anno.state;\n\n  let top: number;\n\n  let left: number;\n\n  let show = true;\n\n  $: hovered = $hover ? store.getAnnotation($hover) : undefined;\n  \n  onMount(() => {\n    const onPointerEnter = () => {\n      show = true;\n    }\n\n    const onPointerMove = (event: PointerEvent) => {\n      const { offsetX, offsetY } = event;\n      left = offsetX;\n      top = offsetY;\n    }\n\n    const onPointerLeave = () => {\n      show = false;\n    }\n\n    container.addEventListener('pointerenter', onPointerEnter);\n    container.addEventListener('pointermove', onPointerMove);\n    container.addEventListener('pointerleave', onPointerLeave);\n\n    return () => {\n      container.removeEventListener('pointerenter', onPointerEnter);\n      container.removeEventListener('pointermove', onPointerMove);\n      container.removeEventListener('pointerleave', onPointerLeave);\n    }\n  });\n</script>\n\n{#if $hover && show}\n  <div \n    class=\"a9s-tooltip\" \n    style={`left:${left}px; top:${top}px; position: absolute;`}>\n\n    <slot hovered={hovered} />\n\n  </div>\n{/if}"],"names":["ctx","attr","div","div_style_value","insert","target","anchor","current","dirty","if_block","create_if_block","container","$$props","anno","getContext","store","hover","top","left","show","onMount","onPointerEnter","$$invalidate","onPointerMove","event","offsetX","offsetY","onPointerLeave","hovered","$hover"],"mappings":";;;;EAmDmBA,EAAO,CAAA;AAAA,EAAA;;;;;;;;;;;;;;;8DAFPC,EAAAC,GAAA,SAAAC,IAAA;AAAA,MAAAH;MAAeA,EAAG,CAAA,CAAA,yBAAA;AAAA;;AAFnC,MAAAI,EAMKC,GAAAH,GAAAI,CAAA;;;;;;;;;;;;;;;;;;;;;UAJY,CAAAC,KAAAC;AAAA,MAAA,KAAAL,OAAAA,IAAA;AAAA,MAAAH;MAAeA,EAAG,CAAA,CAAA;;;;;;;;;;;;;;YAHhCS;AAAA;AAAA,IAAAT;IAAUA,EAAI,CAAA,KAAAU,EAAAV,CAAA;AAAA;;;;;;;;;AAAd;AAAA,MAAAA;MAAUA,EAAI,CAAA;;;;;;;;;;;;;;;;;mDAzCN,WAAAW,EAAkB,IAAAC;QAEvBC,IAAOC,EAA6C,MAAM,GAExD,EAAA,OAAAC,GAAO,OAAAC,MAAUH,EAAK;;MAE1BI,GAEAC,GAEAC,IAAO;AAIX,SAAAC,EAAO,MAAA;UACCC,IAAc,MAAA;AAClB,MAAAC,EAAA,GAAAH,IAAO,EAAI;AAAA,OAGPI,IAAiB,CAAAC,MAAmB;cAChC,SAAAC,GAAS,SAAAC,EAAO,IAAKF;AAC7B,MAAAF,EAAA,GAAAJ,IAAOO,CAAO,GACdH,EAAA,GAAAL,IAAMS,CAAO;AAAA,OAGTC,IAAc,MAAA;AAClB,MAAAL,EAAA,GAAAH,IAAO,EAAK;AAAA;AAGd,WAAAR,EAAU,iBAAiB,gBAAgBU,CAAc,GACzDV,EAAU,iBAAiB,eAAeY,CAAa,GACvDZ,EAAU,iBAAiB,gBAAgBgB,CAAc;AAGvD,MAAAhB,EAAU,oBAAoB,gBAAgBU,CAAc,GAC5DV,EAAU,oBAAoB,eAAeY,CAAa,GAC1DZ,EAAU,oBAAoB,gBAAgBgB,CAAc;AAAA;;;;;SAxB/DL,EAAA,GAAEM,IAAUC,IAASd,EAAM,cAAcc,CAAM,IAAI,MAAS;AAAA;;;;;;;;"}

package/dist/annotorious-svelte.es3.js

@@ -0,0 +1,113 @@
+import { SvelteComponent as g, init as b, safe_not_equal as h, empty as k, insert as w, transition_in as l, transition_out as c, check_outros as A, detach as O, create_slot as v, update_slot_base as C, get_all_dirty_from_scope as N, get_slot_changes as q, group_outros as y, setContext as m } from "./annotorious-svelte.es5.js";
+import { toSvelteStore as D } from "./annotorious-svelte.es6.js";
+import "./annotorious-svelte.es7.js";
+import { createOSDAnnotator as E } from "./annotorious-svelte.es8.js";
+function d(s) {
+  let n;
+  const o = (
+    /*#slots*/
+    s[4].default
+  ), t = v(
+    o,
+    s,
+    /*$$scope*/
+    s[3],
+    null
+  );
+  return {
+    c() {
+      t && t.c();
+    },
+    m(e, i) {
+      t && t.m(e, i), n = !0;
+    },
+    p(e, i) {
+      t && t.p && (!n || i & /*$$scope*/
+      8) && C(
+        t,
+        o,
+        e,
+        /*$$scope*/
+        e[3],
+        n ? q(
+          o,
+          /*$$scope*/
+          e[3],
+          i,
+          null
+        ) : N(
+          /*$$scope*/
+          e[3]
+        ),
+        null
+      );
+    },
+    i(e) {
+      n || (l(t, e), n = !0);
+    },
+    o(e) {
+      c(t, e), n = !1;
+    },
+    d(e) {
+      t && t.d(e);
+    }
+  };
+}
+function j(s) {
+  let n, o, t = (
+    /*viewer*/
+    s[0] && d(s)
+  );
+  return {
+    c() {
+      t && t.c(), n = k();
+    },
+    m(e, i) {
+      t && t.m(e, i), w(e, n, i), o = !0;
+    },
+    p(e, [i]) {
+      /*viewer*/
+      e[0] ? t ? (t.p(e, i), i & /*viewer*/
+      1 && l(t, 1)) : (t = d(e), t.c(), l(t, 1), t.m(n.parentNode, n)) : t && (y(), c(t, 1, 1, () => {
+        t = null;
+      }), A());
+    },
+    i(e) {
+      o || (l(t), o = !0);
+    },
+    o(e) {
+      c(t), o = !1;
+    },
+    d(e) {
+      t && t.d(e), e && O(n);
+    }
+  };
+}
+function z(s, n, o) {
+  let { $$slots: t = {}, $$scope: e } = n, { viewer: i } = n, { opts: f = {} } = n, { anno: a = void 0 } = n;
+  const p = (r) => {
+    if (r) {
+      const u = E(r, f), S = D(u.state.store), _ = {
+        ...u,
+        state: { ...u.state, store: S }
+      };
+      m("anno", _), m("viewer", r), o(1, a = _);
+    }
+  };
+  return s.$$set = (r) => {
+    "viewer" in r && o(0, i = r.viewer), "opts" in r && o(2, f = r.opts), "anno" in r && o(1, a = r.anno), "$$scope" in r && o(3, e = r.$$scope);
+  }, s.$$.update = () => {
+    s.$$.dirty & /*viewer*/
+    1 && p(i);
+  }, [i, a, f, e, t];
+}
+class B extends g {
+  constructor(n) {
+    super(), b(this, n, z, j, h, { viewer: 0, opts: 2, anno: 1 });
+  }
+}
+const J = B;
+export {
+  J as default
+};
+//# sourceMappingURL=annotorious-svelte.es3.js.map

package/dist/annotorious-svelte.es3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotorious-svelte.es3.js","sources":["../src/osd/OpenSeadragonAnnotator.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import { setContext } from 'svelte';\n  import { SvelteAnnotator, SvelteAnnotatorState, toSvelteStore } from '@annotorious/core';\n  import { createOSDAnnotator, ImageAnnotation } from '@annotorious/openseadragon';\n  import type OpenSeadragon from 'openseadragon';\n\n  /** props **/\n  export let viewer: OpenSeadragon.Viewer;\n  export let opts = {};\n  export let anno: SvelteAnnotator<ImageAnnotation> = undefined;\n\n  $: init(viewer);\n\n  const init = (viewer: OpenSeadragon.Viewer) => {\n    if (viewer) {\n      const annotator = createOSDAnnotator(viewer, opts);\n\n      // Wrap the store for Svelte reactivity\n      const svelteStore = toSvelteStore(annotator.state.store);\n\n      const shim = {\n        ...annotator,\n        state: {\n          ...annotator.state,\n          store: svelteStore\n        } as SvelteAnnotatorState<ImageAnnotation>\n      } as SvelteAnnotator<ImageAnnotation>\n\n      setContext('anno', shim);\n      setContext('viewer', viewer);\n\n      anno = shim;\n    }\n  }\n</script>\n\n{#if viewer}\n  <slot />\n{/if}\n"],"names":["ctx","create_if_block","viewer","$$props","opts","anno","init","annotator","createOSDAnnotator","svelteStore","toSvelteStore","shim","setContext","$$invalidate"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAoCKA,EAAM,CAAA,KAAAC,EAAAD,CAAA;AAAA;;;;;;;;;;MAANA,EAAM,CAAA;;;;;;;;;;;;;;;;;6CA7BE,QAAAE,EAA4B,IAAAC,KAC5B,MAAAC,IAAI,GAAA,IAAAD,GACJ,EAAA,MAAAE,IAAyC,OAAS,IAAAF;AAIvD,QAAAG,IAAQ,CAAAJ,MAA4B;QACpCA,GAAM;AACF,YAAAK,IAAYC,EAAmBN,GAAQE,CAAI,GAG3CK,IAAcC,EAAcH,EAAU,MAAM,KAAK,GAEjDI,IAAI;AAAA,WACLJ;AAAA,QACH,YACKA,EAAU,OACb,OAAOE,EAAA;AAAA;AAIX,MAAAG,EAAW,QAAQD,CAAI,GACvBC,EAAW,UAAUV,CAAM,GAE3BW,EAAA,GAAAR,IAAOM,CAAI;AAAA;;;;;;SApBZL,EAAKJ,CAAM;AAAA;;;;;;;;"}

package/dist/annotorious-svelte.es4.js

@@ -0,0 +1,126 @@
+import { SvelteComponent as A, init as H, safe_not_equal as I, empty as X, insert as P, noop as v, detach as S, component_subscribe as Y, onMount as q, element as x, text as G, attr as L, append as R, action_destroyer as U, listen as _, set_data as z, is_function as B, run_all as F } from "./annotorious-svelte.es5.js";
+import { draggable as J } from "./annotorious-svelte.es9.js";
+import b from "openseadragon";
+import "./annotorious-svelte.es10.js";
+function w(n) {
+  let o, e = (
+    /*$selection*/
+    n[0].selected.map(y).join(", ") + ""
+  ), t, s, a, d;
+  return {
+    c() {
+      o = x("div"), t = G(e), L(o, "class", "a9s-popup a9s-osd-popup svelte-1xuxeat");
+    },
+    m(r, l) {
+      P(r, o, l), R(o, t), a || (d = [
+        U(s = J.call(null, o, {
+          position: { x: (
+            /*left*/
+            n[1]
+          ), y: (
+            /*top*/
+            n[2]
+          ) }
+        })),
+        _(
+          o,
+          "neodrag:start",
+          /*onDragStart*/
+          n[4]
+        ),
+        _(
+          o,
+          "neodrag:end",
+          /*onDragEnd*/
+          n[5]
+        )
+      ], a = !0);
+    },
+    p(r, l) {
+      l & /*$selection*/
+      1 && e !== (e = /*$selection*/
+      r[0].selected.map(y).join(", ") + "") && z(t, e), s && B(s.update) && l & /*left, top*/
+      6 && s.update.call(null, {
+        position: { x: (
+          /*left*/
+          r[1]
+        ), y: (
+          /*top*/
+          r[2]
+        ) }
+      });
+    },
+    d(r) {
+      r && S(o), a = !1, F(d);
+    }
+  };
+}
+function K(n) {
+  let o, e = (
+    /*$selection*/
+    n[0] && w(n)
+  );
+  return {
+    c() {
+      e && e.c(), o = X();
+    },
+    m(t, s) {
+      e && e.m(t, s), P(t, o, s);
+    },
+    p(t, [s]) {
+      /*$selection*/
+      t[0] ? e ? e.p(t, s) : (e = w(t), e.c(), e.m(o.parentNode, o)) : e && (e.d(1), e = null);
+    },
+    i: v,
+    o: v,
+    d(t) {
+      e && e.d(t), t && S(o);
+    }
+  };
+}
+const y = (n) => n.id;
+function Q(n, o, e) {
+  let t, { state: s } = o, { viewer: a } = o, d, r, l = !1, c;
+  const { selection: m, store: u } = s;
+  Y(n, m, (i) => e(0, t = i));
+  const g = (i) => {
+    var p;
+    return ((p = i.selected) == null ? void 0 : p.length) > 0;
+  }, E = () => {
+    l = !0, a.setMouseNavEnabled(!1);
+  }, D = () => {
+    a.setMouseNavEnabled(!0);
+  }, N = () => {
+    c && u.unobserve(c), g(t) && (l = !1, f(t), c = (i) => {
+      l || f(t);
+    }, u.observe(c, {
+      annotations: t.selected.map((i) => i.id)
+    }));
+  }, f = (i) => {
+    const p = i.selected[0].id, h = u.getAnnotation(p), { minX: k, minY: C, maxX: M, maxY: O } = h.target.selector.geometry.bounds, T = 14, V = a.viewport.imageToViewerElementCoordinates(new b.Point(k, C)), j = a.viewport.imageToViewerElementCoordinates(new b.Point(M, O));
+    e(1, d = j.x + T), e(2, r = V.y);
+  };
+  return q(() => {
+    const i = () => {
+      g(t) && !l && f(t);
+    };
+    return a.addHandler("update-viewport", i), () => {
+      a.removeHandler("update-viewport", i);
+    };
+  }), n.$$set = (i) => {
+    "state" in i && e(6, s = i.state), "viewer" in i && e(7, a = i.viewer);
+  }, n.$$.update = () => {
+    n.$$.dirty & /*$selection*/
+    1 && N();
+  }, [t, d, r, m, E, D, s, a];
+}
+class W extends A {
+  constructor(o) {
+    super(), H(this, o, Q, K, I, { state: 6, viewer: 7 });
+  }
+}
+const oe = W;
+export {
+  oe as default
+};
+//# sourceMappingURL=annotorious-svelte.es4.js.map

package/dist/annotorious-svelte.es4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotorious-svelte.es4.js","sources":["../src/osd/OpenSeadragonPopup.svelte"],"sourcesContent":["<script lang=\"ts\">\n  import { onMount } from 'svelte';\n  import { draggable } from '@neodrag/svelte';\n  import OpenSeadragon from 'openseadragon';\n  import type { Selection, StoreChangeEvent, SvelteAnnotatorState } from '@annotorious/core';\n  import type { ImageAnnotation } from '@annotorious/annotorious';\n\n  export let state: SvelteAnnotatorState<ImageAnnotation>;\n\n  export let viewer: OpenSeadragon.Viewer;\n\n  let left: number;\n\n  let top: number;\n\n  let dragged = false;\n\n  let storeObserver: (event: StoreChangeEvent<ImageAnnotation>) => void;\n\n  const { selection, store } = state; \n\n  const isSelected = (selection: Selection) => selection.selected?.length > 0;\n\n  const onDragStart = () => {\n    dragged = true;\n    viewer.setMouseNavEnabled(false);\n  }\n\n  const onDragEnd = () => {\n    viewer.setMouseNavEnabled(true);\n  }\n\n  $: $selection, onSelect();\n\n  const onSelect = () => {\n    if (storeObserver)\n      store.unobserve(storeObserver);\n\n    if (isSelected($selection)) {\n      dragged = false;\n\n      setPosition($selection);\n\n      storeObserver = (event: StoreChangeEvent<ImageAnnotation>) => {\n        if (!dragged)\n          setPosition($selection);\n      }\n\n      store.observe(storeObserver, { annotations: $selection.selected.map(s => s.id) });\n    }\n  }\n\n  const setPosition = (selection: Selection) => {\n    // Note: this demo popup only supports a single selection\n    const selectedId = selection.selected[0].id;\n    const annotation = store.getAnnotation(selectedId);\n\n    const { minX, minY, maxX, maxY } = annotation.target.selector.geometry.bounds;\n\n    const PADDING = 14;\n\n    const topLeft = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(minX, minY));\n    const bottomRight = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(maxX, maxY));\n\n    // [left, top] = defaultStrategy(annotation, lastPointerDown);\n    left = bottomRight.x + PADDING;\n    top = topLeft.y;\n  }\n\n  onMount(() => {\n    const onUpdateViewport = () => {\n      if (isSelected($selection) && !dragged)\n        setPosition($selection);\n    }\n\n    viewer.addHandler('update-viewport', onUpdateViewport);\n\n    return () => {\n      viewer.removeHandler('update-viewport', onUpdateViewport);\n    }\n  });\n</script>\n\n{#if $selection}\n  <div \n    class=\"a9s-popup a9s-osd-popup\"\n    use:draggable={{ position: { x: left, y: top }}}\n    on:neodrag:start={onDragStart}\n    on:neodrag:end={onDragEnd}>\n    {$selection.selected.map(s => s.id).join(', ')}\n  </div>\n{/if}\n\n<style>\n  .a9s-osd-popup {\n    background-color: #fff;\n    border: 1px solid #a2a2a2;\n    height: 250px;\n    position: absolute;\n    width: 400px;\n    z-index: 1;\n  }\n</style>"],"names":["t_value","ctx","func","insert","target","div","anchor","dirty","set_data","create_if_block","s","state","$$props","viewer","left","top","dragged","storeObserver","selection","store","isSelected","_a","onDragStart","onDragEnd","onSelect","$selection","setPosition","event","selectedId","annotation","minX","minY","maxX","maxY","PADDING","topLeft","OpenSeadragon","bottomRight","$$invalidate","onMount","onUpdateViewport"],"mappings":";;;;;SAyFKA;AAAA;AAAA,IAAAC,KAAW,SAAS,IAAeC,CAAA,EAAA,KAAK,IAAI,IAAA;AAAA;;;;;;AAL/C,MAAAC,EAMKC,GAAAC,GAAAC,CAAA;;UAJc,YAAY;AAAA;AAAA,YAAGL,EAAM,CAAA;AAAA,aAAA;AAAA;AAAA,YAAGA,EAAG,CAAA;AAAA,YAAA;AAAA;;;;;UAC1BA,EAAW,CAAA;AAAA,QAAA;AAAA;;;;UACbA,EAAS,CAAA;AAAA,QAAA;AAAA;;;AACxB,MAAAM;AAAA,MAAA,KAAAP,OAAAA;AAAA,MAAAC,KAAW,SAAS,IAAeC,CAAA,EAAA,KAAK,IAAI,IAAA,OAAAM,EAAA,GAAAR,CAAA;;QAH5B,YAAY;AAAA;AAAA,UAAGC,EAAM,CAAA;AAAA,WAAA;AAAA;AAAA,UAAGA,EAAG,CAAA;AAAA,UAAA;AAAA;;;;;;;;;;IAH3CA,EAAU,CAAA,KAAAQ,EAAAR,CAAA;AAAA;;;;;;;;;;MAAVA,EAAU,CAAA;;;;;;;;;UAMc,CAAAS,MAAKA,EAAE;;WAlFvB,OAAAC,EAA4C,IAAAC,KAE5C,QAAAC,EAA4B,IAAAD,GAEnCE,GAEAC,GAEAC,IAAU,IAEVC;UAEI,WAAAC,GAAW,OAAAC,EAAK,IAAKR;;QAEvBS,IAAc,CAAAF,MAAyB;;AAAA,aAAAG,IAAAH,EAAU,aAAV,gBAAAG,EAAoB,UAAS;AAAA,KAEpEC,IAAW,MAAA;AACf,IAAAN,IAAU,IACVH,EAAO,mBAAmB,EAAK;AAAA,KAG3BU,IAAS,MAAA;AACb,IAAAV,EAAO,mBAAmB,EAAI;AAAA,KAK1BW,IAAQ,MAAA;AACR,IAAAP,KACFE,EAAM,UAAUF,CAAa,GAE3BG,EAAWK,CAAU,MACvBT,IAAU,IAEVU,EAAYD,CAAU,GAEtBR,IAAiB,CAAAU,MAAwC;MAClDX,KACHU,EAAYD,CAAU;AAAA,OAG1BN,EAAM,QAAQF,GAAa;AAAA,MAAI,aAAaQ,EAAW,SAAS,IAAI,CAAAf,MAAKA,EAAE,EAAE;AAAA;KAI3EgB,IAAe,CAAAR,MAAoB;AAEjC,UAAAU,IAAaV,EAAU,SAAS,CAAC,EAAE,IACnCW,IAAaV,EAAM,cAAcS,CAAU,GAEzC,EAAA,MAAAE,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,EAAI,IAAKJ,EAAW,OAAO,SAAS,SAAS,QAEjEK,IAAU,IAEVC,IAAUtB,EAAO,SAAS,gCAAoC,IAAAuB,EAAc,MAAMN,GAAMC,CAAI,CAAA,GAC5FM,IAAcxB,EAAO,SAAS,gCAAoC,IAAAuB,EAAc,MAAMJ,GAAMC,CAAI,CAAA;AAGtG,IAAAK,EAAA,GAAAxB,IAAOuB,EAAY,IAAIH,CAAO,QAC9BnB,IAAMoB,EAAQ,CAAC;AAAA;AAGjB,SAAAI,EAAO,MAAA;UACCC,IAAgB,MAAA;AAChB,MAAApB,EAAWK,CAAU,KAAA,CAAMT,KAC7BU,EAAYD,CAAU;AAAA;AAG1B,WAAAZ,EAAO,WAAW,mBAAmB2B,CAAgB;AAGnD,MAAA3B,EAAO,cAAc,mBAAmB2B,CAAgB;AAAA;;;;;SA9C7ChB,EAAQ;AAAA;;;;;;;;"}