@annotorious/react 3.6.12 → 3.7.0

package/README.md

@@ -5,13 +5,17 @@
 Add image annotation functionality to any web page with a few lines of JavaScript. Visit the
 [project website](https://annotorious.dev) for documentation and live demos.
 
+## License
+
+Annotorious is licensed under the [BSD 3-Clause](LICENSE) license.
+
 ## Community
 
 Visit the [Discussion Forum](https://github.com/annotorious/annotorious/discussions) for community support, or file an
 issue on the [Issue Tracker](https://github.com/annotorious/annotorious/issues).
 
-## Become a Sponsor
+## Professional Support Available
+
+Looking for help with integration, customization, or feature development? I offer consulting and professional services for teams and organizations that need dedicated support or technical guidance. Services are available on an hourly basis.
 
-Using Annotorious at work? Become a sponsor! Your support helps me cover hosting costs, spend more 
-time supporting the community, and make Annotorious better for everyone. [Make a one-time or monthly
-donation via my SteadyHQ account](https://steadyhq.com/rainer-simon).
+Contact me at hello@rainersimon.io to discuss your project.

package/dist/annotorious-react.es10.js

@@ -1,36 +1,40 @@
 import { jsx as b } from "react/jsx-runtime";
 import { useState as c, useEffect as E } from "react";
-import { useAnnotator as h } from "./annotorious-react.es2.js";
-import { useViewer as y } from "./annotorious-react.es8.js";
-const v = 10, S = (n) => {
-  const m = n.offsetX || v, a = n.offsetY || v, t = h(), o = y(), [s, p] = c(), [r, i] = c();
+import { createPortal as h } from "react-dom";
+import { useAnnotator as y } from "./annotorious-react.es2.js";
+import { useViewer as A } from "./annotorious-react.es8.js";
+const m = 10, T = (n) => {
+  const a = n.offsetX || m, v = n.offsetY || m, o = y(), t = A(), [s, p] = c(), [r, i] = c();
   return E(() => {
-    if (!t || !o) return;
-    const u = (e) => {
-      i(e ? t.state.store.getAnnotation(e) : void 0);
+    if (!o || !t) return;
+    const l = (e) => {
+      i(e ? o.state.store.getAnnotation(e) : void 0);
     }, f = (e) => {
       const { offsetX: d, offsetY: x } = e;
       p({ x: d, y: x });
     };
-    o.element.addEventListener("pointermove", f);
-    const l = t.state.hover.subscribe(u);
+    t.element.addEventListener("pointermove", f);
+    const u = o.state.hover.subscribe(l);
     return () => {
       var e;
-      (e = o.element) == null || e.removeEventListener("pointermove", f), l();
+      (e = t.element) == null || e.removeEventListener("pointermove", f), u();
     };
-  }, [t, o]), r && s && /* @__PURE__ */ b(
-    "div",
-    {
-      style: {
-        position: "absolute",
-        top: `${s.y + a}px`,
-        left: `${s.x + m}px`
-      },
-      children: n.tooltip({ annotation: r })
-    }
+  }, [o, t]), r && s && h(
+    /* @__PURE__ */ b(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: `${s.y + v}px`,
+          left: `${s.x + a}px`
+        },
+        children: n.tooltip({ annotation: r })
+      }
+    ),
+    t.element
   );
 };
 export {
-  S as OpenSeadragonHoverTooltip
+  T as OpenSeadragonHoverTooltip
 };
 //# sourceMappingURL=annotorious-react.es10.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es10.js","sources":["../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport { Annotation } from '@annotorious/core';\nimport { ImageAnnotation } from '@annotorious/annotorious';\nimport { useAnnotator } from '../Annotorious';\nimport { AnnotoriousOpenSeadragonAnnotator, useViewer } from '.';\n\ninterface HoverTooltipContentProps <T extends Annotation = ImageAnnotation> {\n   \n  annotation: T;\n\n}\n\ninterface OpenSeadragonHoverTooltipProps {\n\n  offsetX?: number;\n\n  offsetY?: number;\n\n  tooltip: (props: HoverTooltipContentProps) => ReactNode;\n\n}\n\nconst DEFAULT_OFFSET = 10;\n\nexport const OpenSeadragonHoverTooltip = (props: OpenSeadragonHoverTooltipProps) => {\n\n  const offsetX = props.offsetX || DEFAULT_OFFSET;\n  const offsetY = props.offsetY || DEFAULT_OFFSET;\n\n  const anno = useAnnotator<AnnotoriousOpenSeadragonAnnotator>();\n\n  const viewer = useViewer();\n\n  const [pos, setPos] = useState<{ x: number, y: number } | undefined>();\n\n  const [hovered, setHovered] = useState<ImageAnnotation | undefined>();\n\n  useEffect(() => {\n    if (!anno || !viewer) return;\n\n    const onHover = (id: string) => {\n      if (id)\n        setHovered(anno.state.store.getAnnotation(id));\n      else\n        setHovered(undefined);\n    }\n\n    const onPointerMove = (evt: PointerEvent) => {\n      const { offsetX: x, offsetY: y } = evt;\n      setPos({ x, y });\n    }\n\n    viewer.element.addEventListener('pointermove', onPointerMove);\n    const unsubscribe = anno.state.hover.subscribe(onHover);\n\n    return () => {\n      viewer.element?.removeEventListener('pointermove', onPointerMove);\n      unsubscribe();\n    }\n  }, [anno, viewer]);\n\n  return (hovered && pos) && (\n    <div \n      style={{ \n        position: 'absolute',\n        top: `${pos.y + offsetY}px`,\n        left: `${pos.x + offsetX}px`\n      }}>\n      {props.tooltip({ annotation: hovered })}\n    </div>\n  )\n\n}"],"names":["DEFAULT_OFFSET","OpenSeadragonHoverTooltip","props","offsetX","offsetY","anno","useAnnotator","viewer","useViewer","pos","setPos","useState","hovered","setHovered","useEffect","onHover","id","onPointerMove","evt","x","y","unsubscribe","_a","jsx"],"mappings":";;;;AAsBA,MAAMA,IAAiB,IAEVC,IAA4B,CAACC,MAA0C;AAElF,QAAMC,IAAUD,EAAM,WAAWF,GAC3BI,IAAUF,EAAM,WAAWF,GAE3BK,IAAOC,EAAA,GAEPC,IAASC,EAAA,GAET,CAACC,GAAKC,CAAM,IAAIC,EAAA,GAEhB,CAACC,GAASC,CAAU,IAAIF,EAAA;AAE9B,SAAAG,EAAU,MAAM;AACd,QAAI,CAACT,KAAQ,CAACE,EAAQ;AAEtB,UAAMQ,IAAU,CAACC,MAAe;AAC9B,MACEH,EADEG,IACSX,EAAK,MAAM,MAAM,cAAcW,CAAE,IAEjC,MAFkC;AAAA,IAGjD,GAEMC,IAAgB,CAACC,MAAsB;AAC3C,YAAM,EAAE,SAASC,GAAG,SAASC,MAAMF;AACnC,MAAAR,EAAO,EAAE,GAAAS,GAAG,GAAAC,GAAG;AAAA,IACjB;AAEA,IAAAb,EAAO,QAAQ,iBAAiB,eAAeU,CAAa;AAC5D,UAAMI,IAAchB,EAAK,MAAM,MAAM,UAAUU,CAAO;AAEtD,WAAO,MAAM;;AACX,OAAAO,IAAAf,EAAO,YAAP,QAAAe,EAAgB,oBAAoB,eAAeL,IACnDI,EAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAChB,GAAME,CAAM,CAAC,GAETK,KAAWH,KACjB,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,UAAU;AAAA,QACV,KAAK,GAAGd,EAAI,IAAIL,CAAO;AAAA,QACvB,MAAM,GAAGK,EAAI,IAAIN,CAAO;AAAA,MAAA;AAAA,MAEzB,UAAAD,EAAM,QAAQ,EAAE,YAAYU,GAAS;AAAA,IAAA;AAAA,EAAA;AAI5C;"}
+{"version":3,"file":"annotorious-react.es10.js","sources":["../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Annotation } from '@annotorious/core';\nimport { ImageAnnotation } from '@annotorious/annotorious';\nimport { useAnnotator } from '../Annotorious';\nimport { AnnotoriousOpenSeadragonAnnotator, useViewer } from '.';\n\ninterface HoverTooltipContentProps <T extends Annotation = ImageAnnotation> {\n   \n  annotation: T;\n\n}\n\ninterface OpenSeadragonHoverTooltipProps {\n\n  offsetX?: number;\n\n  offsetY?: number;\n\n  tooltip: (props: HoverTooltipContentProps) => ReactNode;\n\n}\n\nconst DEFAULT_OFFSET = 10;\n\nexport const OpenSeadragonHoverTooltip = (props: OpenSeadragonHoverTooltipProps) => {\n\n  const offsetX = props.offsetX || DEFAULT_OFFSET;\n  const offsetY = props.offsetY || DEFAULT_OFFSET;\n\n  const anno = useAnnotator<AnnotoriousOpenSeadragonAnnotator>();\n\n  const viewer = useViewer();\n\n  const [pos, setPos] = useState<{ x: number, y: number } | undefined>();\n\n  const [hovered, setHovered] = useState<ImageAnnotation | undefined>();\n\n  useEffect(() => {\n    if (!anno || !viewer) return;\n\n    const onHover = (id: string) => {\n      if (id)\n        setHovered(anno.state.store.getAnnotation(id));\n      else\n        setHovered(undefined);\n    }\n\n    const onPointerMove = (evt: PointerEvent) => {\n      const { offsetX: x, offsetY: y } = evt;\n      setPos({ x, y });\n    }\n\n    viewer.element.addEventListener('pointermove', onPointerMove);\n    const unsubscribe = anno.state.hover.subscribe(onHover);\n\n    return () => {\n      viewer.element?.removeEventListener('pointermove', onPointerMove);\n      unsubscribe();\n    }\n  }, [anno, viewer]);\n\n  return (hovered && pos) && createPortal(\n    <div \n      style={{ \n        position: 'absolute',\n        top: `${pos.y + offsetY}px`,\n        left: `${pos.x + offsetX}px`\n      }}>\n      {props.tooltip({ annotation: hovered })}\n    </div>\n  , viewer.element)\n\n}"],"names":["DEFAULT_OFFSET","OpenSeadragonHoverTooltip","props","offsetX","offsetY","anno","useAnnotator","viewer","useViewer","pos","setPos","useState","hovered","setHovered","useEffect","onHover","id","onPointerMove","evt","x","y","unsubscribe","_a","createPortal","jsx"],"mappings":";;;;;AAuBA,MAAMA,IAAiB,IAEVC,IAA4B,CAACC,MAA0C;AAElF,QAAMC,IAAUD,EAAM,WAAWF,GAC3BI,IAAUF,EAAM,WAAWF,GAE3BK,IAAOC,EAAA,GAEPC,IAASC,EAAA,GAET,CAACC,GAAKC,CAAM,IAAIC,EAAA,GAEhB,CAACC,GAASC,CAAU,IAAIF,EAAA;AAE9B,SAAAG,EAAU,MAAM;AACd,QAAI,CAACT,KAAQ,CAACE,EAAQ;AAEtB,UAAMQ,IAAU,CAACC,MAAe;AAC9B,MACEH,EADEG,IACSX,EAAK,MAAM,MAAM,cAAcW,CAAE,IAEjC,MAFkC;AAAA,IAGjD,GAEMC,IAAgB,CAACC,MAAsB;AAC3C,YAAM,EAAE,SAASC,GAAG,SAASC,MAAMF;AACnC,MAAAR,EAAO,EAAE,GAAAS,GAAG,GAAAC,GAAG;AAAA,IACjB;AAEA,IAAAb,EAAO,QAAQ,iBAAiB,eAAeU,CAAa;AAC5D,UAAMI,IAAchB,EAAK,MAAM,MAAM,UAAUU,CAAO;AAEtD,WAAO,MAAM;;AACX,OAAAO,IAAAf,EAAO,YAAP,QAAAe,EAAgB,oBAAoB,eAAeL,IACnDI,EAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAChB,GAAME,CAAM,CAAC,GAETK,KAAWH,KAAQc;AAAA,IACzB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK,GAAGf,EAAI,IAAIL,CAAO;AAAA,UACvB,MAAM,GAAGK,EAAI,IAAIN,CAAO;AAAA,QAAA;AAAA,QAEzB,UAAAD,EAAM,QAAQ,EAAE,YAAYU,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAExCL,EAAO;AAAA,EAAA;AAEX;"}

package/dist/annotorious-react.es11.js

@@ -1,9 +1,9 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import { forwardRef as m, useRef as p, useContext as u, useLayoutEffect as c, useImperativeHandle as d } from "react";
 import l from "openseadragon";
 import { OpenSeadragonAnnotatorContext as v } from "./annotorious-react.es8.js";
-const S = m((n, i) => {
-  const { className: s, options: t } = n, r = p(null), { viewer: f, setViewer: e } = u(v);
+const S = m((n, s) => {
+  const { className: i, options: t } = n, r = p(null), { viewer: a, setViewer: e } = u(v);
   return c(() => {
     if (r.current) {
       const o = l({ ...t, element: r.current });
@@ -11,7 +11,7 @@ const S = m((n, i) => {
         e && e(void 0), o.destroy();
       };
     }
-  }, [JSON.stringify(t)]), d(i, () => f), /* @__PURE__ */ a("div", { className: s, ref: r });
+  }, [t]), d(s, () => a), /* @__PURE__ */ f("div", { className: i, ref: r });
 });
 export {
   S as OpenSeadragonViewer

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { OpenSeadragonAnnotatorContext } from './OpenSeadragonAnnotator';\n\nexport interface OpenSeadragonViewerProps {\n\n  className?: string;\n\n  options: OpenSeadragon.Options;\n\n}\n\nexport const OpenSeadragonViewer = forwardRef<OpenSeadragon.Viewer, OpenSeadragonViewerProps>((props: OpenSeadragonViewerProps, ref) => {\n\n  const { className, options } = props;\n\n  const element = useRef<HTMLDivElement>(null);\n\n  const { viewer, setViewer } = useContext(OpenSeadragonAnnotatorContext);\n\n  useLayoutEffect(() => {    \n    if (element.current) {\n      const v = OpenSeadragon({...options, element: element.current });\n\n      // Checking for setViewer is just a convenience so we can\n      // use this component also without an OpenSeadragonAnnotator\n      if (setViewer)\n        setViewer(v);\n\n      return () => {\n        if (setViewer)\n          setViewer(undefined);\n\n        v.destroy();\n      }\n    }\n  }, [JSON.stringify(options)]);\n\n  useImperativeHandle(ref, () => viewer);\n\n  return (\n    <div className={className} ref={element} />\n  );\n\n});"],"names":["OpenSeadragonViewer","forwardRef","props","ref","className","options","element","useRef","viewer","setViewer","useContext","OpenSeadragonAnnotatorContext","useLayoutEffect","v","OpenSeadragon","useImperativeHandle","jsx"],"mappings":";;;;AAYO,MAAMA,IAAsBC,EAA2D,CAACC,GAAiCC,MAAQ;AAEtI,QAAM,EAAE,WAAAC,GAAW,SAAAC,EAAA,IAAYH,GAEzBI,IAAUC,EAAuB,IAAI,GAErC,EAAE,QAAAC,GAAQ,WAAAC,MAAcC,EAAWC,CAA6B;AAEtE,SAAAC,EAAgB,MAAM;AACpB,QAAIN,EAAQ,SAAS;AACnB,YAAMO,IAAIC,EAAc,EAAC,GAAGT,GAAS,SAASC,EAAQ,SAAS;AAI/D,aAAIG,KACFA,EAAUI,CAAC,GAEN,MAAM;AACX,QAAIJ,KACFA,EAAU,MAAS,GAErBI,EAAE,QAAA;AAAA,MACJ;AAAA,IACF;AAAA,EACF,GAAG,CAAC,KAAK,UAAUR,CAAO,CAAC,CAAC,GAE5BU,EAAoBZ,GAAK,MAAMK,CAAM,GAGnC,gBAAAQ,EAAC,OAAA,EAAI,WAAAZ,GAAsB,KAAKE,EAAA,CAAS;AAG7C,CAAC;"}
+{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { OpenSeadragonAnnotatorContext } from './OpenSeadragonAnnotator';\n\nexport interface OpenSeadragonViewerProps {\n\n  className?: string;\n\n  options: OpenSeadragon.Options;\n\n}\n\nexport const OpenSeadragonViewer = forwardRef<OpenSeadragon.Viewer, OpenSeadragonViewerProps>((props: OpenSeadragonViewerProps, ref) => {\n\n  const { className, options } = props;\n\n  const element = useRef<HTMLDivElement>(null);\n\n  const { viewer, setViewer } = useContext(OpenSeadragonAnnotatorContext);\n\n  useLayoutEffect(() => {    \n    if (element.current) {\n      const v = OpenSeadragon({...options, element: element.current });\n\n      // Checking for setViewer is just a convenience so we can\n      // use this component also without an OpenSeadragonAnnotator\n      if (setViewer)\n        setViewer(v);\n\n      return () => {\n        if (setViewer)\n          setViewer(undefined);\n\n        v.destroy();\n      }\n    }\n  }, [options]);\n\n  useImperativeHandle(ref, () => viewer);\n\n  return (\n    <div className={className} ref={element} />\n  );\n\n});"],"names":["OpenSeadragonViewer","forwardRef","props","ref","className","options","element","useRef","viewer","setViewer","useContext","OpenSeadragonAnnotatorContext","useLayoutEffect","v","OpenSeadragon","useImperativeHandle","jsx"],"mappings":";;;;AAYO,MAAMA,IAAsBC,EAA2D,CAACC,GAAiCC,MAAQ;AAEtI,QAAM,EAAE,WAAAC,GAAW,SAAAC,EAAA,IAAYH,GAEzBI,IAAUC,EAAuB,IAAI,GAErC,EAAE,QAAAC,GAAQ,WAAAC,MAAcC,EAAWC,CAA6B;AAEtE,SAAAC,EAAgB,MAAM;AACpB,QAAIN,EAAQ,SAAS;AACnB,YAAMO,IAAIC,EAAc,EAAC,GAAGT,GAAS,SAASC,EAAQ,SAAS;AAI/D,aAAIG,KACFA,EAAUI,CAAC,GAEN,MAAM;AACX,QAAIJ,KACFA,EAAU,MAAS,GAErBI,EAAE,QAAA;AAAA,MACJ;AAAA,IACF;AAAA,EACF,GAAG,CAACR,CAAO,CAAC,GAEZU,EAAoBZ,GAAK,MAAMK,CAAM,GAGnC,gBAAAQ,EAAC,OAAA,EAAI,WAAAZ,GAAsB,KAAKE,EAAA,CAAS;AAG7C,CAAC;"}

package/dist/annotorious-react.es9.js

@@ -1,113 +1,117 @@
 import { jsxs as h, jsx as O } from "react/jsx-runtime";
-import { useState as A, useRef as D, useEffect as L } from "react";
+import { useState as P, useRef as A, useEffect as D } from "react";
+import { createPortal as L } from "react-dom";
 import g from "openseadragon";
-import { useAnnotator as P, useSelection as S } from "./annotorious-react.es2.js";
+import { useAnnotator as S, useSelection as b } from "./annotorious-react.es2.js";
 /* empty css                      */
 /* empty css                      */
 import "@annotorious/core";
 import "@annotorious/annotorious";
-import { toClientRects as b } from "./annotorious-react.es14.js";
-import { useFloating as U, FloatingArrow as F } from "./annotorious-react.es13.js";
-import { useViewer as M } from "./annotorious-react.es8.js";
-import { inline as V, offset as j, flip as z, shift as H, arrow as T } from "./annotorious-react.es16.js";
-import { autoUpdate as X } from "./annotorious-react.es15.js";
+import { toClientRects as U } from "./annotorious-react.es14.js";
+import { useFloating as F, FloatingArrow as M } from "./annotorious-react.es13.js";
+import { useViewer as V } from "./annotorious-react.es8.js";
+import { inline as j, offset as z, flip as H, shift as T, arrow as X } from "./annotorious-react.es16.js";
+import { autoUpdate as Y } from "./annotorious-react.es15.js";
 import w from "./annotorious-react.es17.js";
-const Y = (n, r) => {
-  const { minX: d, minY: a, maxX: o, maxY: l } = r.bounds, { top: s, left: p } = n.element.getBoundingClientRect(), t = n.viewport.imageToViewerElementCoordinates(new g.Point(d, a)), m = n.viewport.imageToViewerElementCoordinates(new g.Point(o, l));
+const I = (n, r) => {
+  const { minX: d, minY: a, maxX: t, maxY: m } = r.bounds, { top: s, left: p } = n.element.getBoundingClientRect(), o = n.viewport.imageToViewerElementCoordinates(new g.Point(d, a)), l = n.viewport.imageToViewerElementCoordinates(new g.Point(t, m));
   return new DOMRect(
-    t.x + p,
-    t.y + s,
-    m.x - t.x,
-    m.y - t.y
+    o.x + p,
+    o.y + s,
+    l.x - o.x,
+    l.y - o.y
   );
-}, oe = (n) => {
+}, re = (n) => {
   var u, f;
-  const r = P(), [d, a] = A(!1), o = M(), l = D(null), { selected: s, event: p } = S(), t = (u = s[0]) == null ? void 0 : u.annotation, m = (f = s[0]) == null ? void 0 : f.editable, { refs: c, floatingStyles: y, context: v } = U({
+  const r = S(), [d, a] = P(!1), t = V(), m = A(null), { selected: s, event: p } = b(), o = (u = s[0]) == null ? void 0 : u.annotation, l = (f = s[0]) == null ? void 0 : f.editable, { refs: c, floatingStyles: y, context: v } = F({
     open: d,
     onOpenChange: a,
     placement: n.placement,
     middleware: [
-      V(),
-      j(10),
-      z({ crossAxis: !0 }),
-      H({
+      j(),
+      z(10),
+      H({ crossAxis: !0 }),
+      T({
         crossAxis: !0,
-        boundary: o == null ? void 0 : o.element,
+        boundary: t == null ? void 0 : t.element,
         padding: { right: 5, left: 5, top: 10, bottom: 10 }
       }),
-      T({
-        element: l,
+      X({
+        element: m,
         padding: 5
       })
     ],
-    whileElementsMounted: X
+    whileElementsMounted: Y
   });
-  L(() => {
+  D(() => {
     if (s.length === 0)
       a(!1);
     else {
       const e = () => {
-        if (!o.element) return;
-        const i = Y(o, t.target.selector.geometry);
+        if (!t.element) return;
+        const i = I(t, o.target.selector.geometry);
         c.setReference({
           getBoundingClientRect: () => i,
-          getClientRects: () => b(i)
+          getClientRects: () => U(i)
         });
       };
-      return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), o.addHandler("update-viewport", e), e(), a(!0), () => {
-        window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), o.removeHandler("update-viewport", e);
+      return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), t.addHandler("update-viewport", e), e(), a(!0), () => {
+        window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), t.removeHandler("update-viewport", e);
       };
     }
-  }, [n.popup, s, o]);
+  }, [n.popup, s, t]);
   const x = (e) => {
     const i = e.id || w();
     r.state.store.addBody({
       ...e,
       id: i,
-      annotation: t.id,
+      annotation: o.id,
       created: e.created || /* @__PURE__ */ new Date(),
       creator: r.getUser()
     });
   }, R = (e) => {
-    r.state.store.deleteBody({ id: e, annotation: t.id });
+    r.state.store.deleteBody({ id: e, annotation: o.id });
   }, B = (e, i) => {
     const C = i.id || w(), E = {
       updated: /* @__PURE__ */ new Date(),
       updatedBy: r.getUser(),
       ...i,
       id: C,
-      annotation: t.id
+      annotation: o.id
     };
     r.state.store.updateBody(e, E);
   };
-  return d && t ? /* @__PURE__ */ h(
-    "div",
-    {
-      className: "a9s-popup a9s-image-popup",
-      ref: c.setFloating,
-      style: y,
-      children: [
-        n.arrow && /* @__PURE__ */ O(
-          F,
-          {
-            ref: l,
-            context: v,
-            ...n.arrowProps || {}
-          }
-        ),
-        n.popup({
-          annotation: t,
-          editable: m,
-          event: p,
-          onCreateBody: x,
-          onDeleteBody: R,
-          onUpdateBody: B
-        })
-      ]
-    }
+  return d && o ? L(
+    /* @__PURE__ */ h(
+      "div",
+      {
+        className: "a9s-popup a9s-image-popup",
+        ref: c.setFloating,
+        style: y,
+        children: [
+          n.arrow && /* @__PURE__ */ O(
+            M,
+            {
+              ref: m,
+              context: v,
+              ...n.arrowProps || {}
+            }
+          ),
+          n.popup({
+            annotation: o,
+            editable: l,
+            event: p,
+            onCreateBody: x,
+            onDeleteBody: R,
+            onUpdateBody: B
+          })
+        ]
+      }
+    ),
+    t.element
   ) : null;
 };
 export {
-  oe as OpenSeadragonAnnotationPopup
+  re as OpenSeadragonAnnotationPopup
 };
 //# sourceMappingURL=annotorious-react.es9.js.map

package/dist/annotorious-react.es9.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es9.js","sources":["../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useAnnotator, useSelection, useViewer} from '@annotorious/react';\nimport type { PopupProps } from '@annotorious/react';\nimport type { AnnotationBody, Annotator, Geometry, ImageAnnotation } from '@annotorious/annotorious';\nimport { toClientRects } from '../utils/toClientRects';\nimport {\n  useFloating,\n  arrow,\n  shift,\n  inline,\n  autoUpdate,\n  flip,\n  offset,\n  FloatingArrow,\n  FloatingArrowProps,\n  Placement\n} from '@floating-ui/react';\n\nconst toDOMRect = (viewer: OpenSeadragon.Viewer, geometry: Geometry) => {\n  const { minX, minY, maxX, maxY } = geometry.bounds;\n\n  const { top, left } = viewer.element.getBoundingClientRect();\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  return new DOMRect(\n    topLeft.x + left,\n    topLeft.y + top,\n    bottomRight.x  - topLeft.x,\n    bottomRight.y - topLeft.y\n  );\n}\n\ninterface OpenSeadragonAnnotationPopupProps {\n\n  arrow?: boolean;\n\n  arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'>;\n\n  placement?: Placement;\n\n  popup: (props: PopupProps) => ReactNode;\n\n}\n\nexport const OpenSeadragonAnnotationPopup = (props: OpenSeadragonAnnotationPopupProps) => {\n  \n  const anno = useAnnotator<Annotator<ImageAnnotation>>();\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const viewer = useViewer();\n\n  const arrowRef = useRef(null);\n\n  const { selected, event } = useSelection();\n\n  const annotation = selected[0]?.annotation;\n\n  const editable = selected[0]?.editable;\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: props.placement,\n    middleware: [\n      inline(), \n      offset(10),\n      flip({ crossAxis: true }),\n      shift({ \n        crossAxis: true,\n        boundary: viewer?.element,\n        padding: { right: 5, left: 5, top: 10, bottom: 10 }\n      }),\n      arrow({\n        element: arrowRef,\n        padding: 5\n      })\n    ],\n    whileElementsMounted: autoUpdate\n  });\n\n  useEffect(() => {\n    if (selected.length === 0) {\n      setIsOpen(false);\n    } else {  \n      const setPosition = () => { \n        // This avoids issues when new viewer instances are mounted/unmounted \n        // while the popup is open\n        if (!viewer.element) return;\n\n        const rect = toDOMRect(viewer, annotation.target.selector.geometry);\n        \n        refs.setReference({\n          getBoundingClientRect: () => rect,\n          getClientRects: () => toClientRects(rect)\n        });\n      }\n\n      window.addEventListener('scroll', setPosition, true);\n      window.addEventListener('resize', setPosition);\n      viewer.addHandler('update-viewport', setPosition);\n\n      setPosition();\n\n      setIsOpen(true);\n\n      return () => {\n        window.removeEventListener('scroll', setPosition, true);\n        window.removeEventListener('resize', setPosition);\n        viewer.removeHandler('update-viewport', setPosition);\n      };\n    }\n  }, [props.popup, selected, viewer]);\n\n  const onCreateBody = (body: Partial<AnnotationBody>) => {\n    const id = body.id || uuidv4();\n    \n    anno.state.store.addBody({\n      ...body,\n      id,\n      annotation: annotation.id,\n      created: body.created || new Date(),\n      creator: anno.getUser()\n    });\n  }\n\n  const onDeleteBody = (id: string) => {\n    anno.state.store.deleteBody({ id, annotation: annotation.id });\n  }\n\n  const onUpdateBody = (current: AnnotationBody, next: AnnotationBody) => {\n    const id = next.id || uuidv4();\n\n    const updated: AnnotationBody = {\n      updated: new Date(),\n      updatedBy: anno.getUser(),\n      ...next,\n      id,\n      annotation: annotation.id\n    }\n\n    anno.state.store.updateBody(current, updated);\n  }\n\n  return (isOpen && annotation) ? (\n    <div\n      className=\"a9s-popup a9s-image-popup\"\n      ref={refs.setFloating}\n      style={floatingStyles}>\n      \n      {props.arrow && (\n        <FloatingArrow \n          ref={arrowRef} \n          context={context} \n          {...(props.arrowProps || {})} />\n      )}\n\n      {props.popup({ \n        annotation, \n        editable, \n        event,\n        onCreateBody,\n        onDeleteBody,\n        onUpdateBody\n      })}\n    </div>\n  ) : null;\n\n}"],"names":["toDOMRect","viewer","geometry","minX","minY","maxX","maxY","top","left","topLeft","OpenSeadragon","bottomRight","OpenSeadragonAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","useViewer","arrowRef","useRef","selected","event","useSelection","annotation","_a","editable","_b","refs","floatingStyles","context","useFloating","inline","offset","flip","shift","arrow","autoUpdate","useEffect","setPosition","rect","toClientRects","onCreateBody","body","id","uuidv4","onDeleteBody","onUpdateBody","current","next","updated","jsxs","jsx","FloatingArrow"],"mappings":"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"}
+{"version":3,"file":"annotorious-react.es9.js","sources":["../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport OpenSeadragon from 'openseadragon';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useAnnotator, useSelection, useViewer} from '@annotorious/react';\nimport type { PopupProps } from '@annotorious/react';\nimport type { AnnotationBody, Annotator, Geometry, ImageAnnotation } from '@annotorious/annotorious';\nimport { toClientRects } from '../utils/toClientRects';\nimport {\n  useFloating,\n  arrow,\n  shift,\n  inline,\n  autoUpdate,\n  flip,\n  offset,\n  FloatingArrow,\n  FloatingArrowProps,\n  Placement\n} from '@floating-ui/react';\n\nconst toDOMRect = (viewer: OpenSeadragon.Viewer, geometry: Geometry) => {\n  const { minX, minY, maxX, maxY } = geometry.bounds;\n\n  const { top, left } = viewer.element.getBoundingClientRect();\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  return new DOMRect(\n    topLeft.x + left,\n    topLeft.y + top,\n    bottomRight.x  - topLeft.x,\n    bottomRight.y - topLeft.y\n  );\n}\n\ninterface OpenSeadragonAnnotationPopupProps {\n\n  arrow?: boolean;\n\n  arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'>;\n\n  placement?: Placement;\n\n  popup: (props: PopupProps) => ReactNode;\n\n}\n\nexport const OpenSeadragonAnnotationPopup = (props: OpenSeadragonAnnotationPopupProps) => {\n  \n  const anno = useAnnotator<Annotator<ImageAnnotation>>();\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const viewer = useViewer();\n\n  const arrowRef = useRef(null);\n\n  const { selected, event } = useSelection();\n\n  const annotation = selected[0]?.annotation;\n\n  const editable = selected[0]?.editable;\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    placement: props.placement,\n    middleware: [\n      inline(), \n      offset(10),\n      flip({ crossAxis: true }),\n      shift({ \n        crossAxis: true,\n        boundary: viewer?.element,\n        padding: { right: 5, left: 5, top: 10, bottom: 10 }\n      }),\n      arrow({\n        element: arrowRef,\n        padding: 5\n      })\n    ],\n    whileElementsMounted: autoUpdate\n  });\n\n  useEffect(() => {\n    if (selected.length === 0) {\n      setIsOpen(false);\n    } else {  \n      const setPosition = () => { \n        // This avoids issues when new viewer instances are mounted/unmounted \n        // while the popup is open\n        if (!viewer.element) return;\n\n        const rect = toDOMRect(viewer, annotation.target.selector.geometry);\n        \n        refs.setReference({\n          getBoundingClientRect: () => rect,\n          getClientRects: () => toClientRects(rect)\n        });\n      }\n\n      window.addEventListener('scroll', setPosition, true);\n      window.addEventListener('resize', setPosition);\n      viewer.addHandler('update-viewport', setPosition);\n\n      setPosition();\n\n      setIsOpen(true);\n\n      return () => {\n        window.removeEventListener('scroll', setPosition, true);\n        window.removeEventListener('resize', setPosition);\n        viewer.removeHandler('update-viewport', setPosition);\n      };\n    }\n  }, [props.popup, selected, viewer]);\n\n  const onCreateBody = (body: Partial<AnnotationBody>) => {\n    const id = body.id || uuidv4();\n    \n    anno.state.store.addBody({\n      ...body,\n      id,\n      annotation: annotation.id,\n      created: body.created || new Date(),\n      creator: anno.getUser()\n    });\n  }\n\n  const onDeleteBody = (id: string) => {\n    anno.state.store.deleteBody({ id, annotation: annotation.id });\n  }\n\n  const onUpdateBody = (current: AnnotationBody, next: AnnotationBody) => {\n    const id = next.id || uuidv4();\n\n    const updated: AnnotationBody = {\n      updated: new Date(),\n      updatedBy: anno.getUser(),\n      ...next,\n      id,\n      annotation: annotation.id\n    }\n\n    anno.state.store.updateBody(current, updated);\n  }\n\n  return (isOpen && annotation) ? createPortal(\n    <div\n      className=\"a9s-popup a9s-image-popup\"\n      ref={refs.setFloating}\n      style={floatingStyles}>\n      \n      {props.arrow && (\n        <FloatingArrow \n          ref={arrowRef} \n          context={context} \n          {...(props.arrowProps || {})} />\n      )}\n\n      {props.popup({ \n        annotation, \n        editable, \n        event,\n        onCreateBody,\n        onDeleteBody,\n        onUpdateBody\n      })}\n    </div>\n  , viewer.element) : null;\n\n}"],"names":["toDOMRect","viewer","geometry","minX","minY","maxX","maxY","top","left","topLeft","OpenSeadragon","bottomRight","OpenSeadragonAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","useViewer","arrowRef","useRef","selected","event","useSelection","annotation","_a","editable","_b","refs","floatingStyles","context","useFloating","inline","offset","flip","shift","arrow","autoUpdate","useEffect","setPosition","rect","toClientRects","onCreateBody","body","id","uuidv4","onDeleteBody","onUpdateBody","current","next","updated","createPortal","jsxs","jsx","FloatingArrow"],"mappings":"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"}

package/dist/openseadragon/OpenSeadragonAnnotationPopup.d.ts

@@ -7,6 +7,6 @@ interface OpenSeadragonAnnotationPopupProps {
     placement?: Placement;
     popup: (props: PopupProps) => ReactNode;
 }
-export declare const OpenSeadragonAnnotationPopup: (props: OpenSeadragonAnnotationPopupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OpenSeadragonAnnotationPopup: (props: OpenSeadragonAnnotationPopupProps) => import('react').ReactPortal;
 export {};
 //# sourceMappingURL=OpenSeadragonAnnotationPopup.d.ts.map

package/dist/openseadragon/OpenSeadragonAnnotationPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EASL,kBAAkB,EAClB,SAAS,EACV,MAAM,oBAAoB,CAAC;AAkB5B,UAAU,iCAAiC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,KAAK,CAAC,CAAC;IAEzD,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAEzC;AAED,eAAO,MAAM,4BAA4B,GAAI,OAAO,iCAAiC,4CA4HpF,CAAA"}
+{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EASL,kBAAkB,EAClB,SAAS,EACV,MAAM,oBAAoB,CAAC;AAkB5B,UAAU,iCAAiC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,KAAK,CAAC,CAAC;IAEzD,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAEzC;AAED,eAAO,MAAM,4BAA4B,GAAI,OAAO,iCAAiC,gCA4HpF,CAAA"}

package/dist/openseadragon/OpenSeadragonHoverTooltip.d.ts

@@ -9,6 +9,6 @@ interface OpenSeadragonHoverTooltipProps {
     offsetY?: number;
     tooltip: (props: HoverTooltipContentProps) => ReactNode;
 }
-export declare const OpenSeadragonHoverTooltip: (props: OpenSeadragonHoverTooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OpenSeadragonHoverTooltip: (props: OpenSeadragonHoverTooltipProps) => import('react').ReactPortal;
 export {};
 //# sourceMappingURL=OpenSeadragonHoverTooltip.d.ts.map

package/dist/openseadragon/OpenSeadragonHoverTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OpenSeadragonHoverTooltip.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,UAAU,wBAAwB,CAAE,CAAC,SAAS,UAAU,GAAG,eAAe;IAExE,UAAU,EAAE,CAAC,CAAC;CAEf;AAED,UAAU,8BAA8B;IAEtC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAEzD;AAID,eAAO,MAAM,yBAAyB,GAAI,OAAO,8BAA8B,4CAgD9E,CAAA"}
+{"version":3,"file":"OpenSeadragonHoverTooltip.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,UAAU,wBAAwB,CAAE,CAAC,SAAS,UAAU,GAAG,eAAe;IAExE,UAAU,EAAE,CAAC,CAAC;CAEf;AAED,UAAU,8BAA8B;IAEtC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAEzD;AAID,eAAO,MAAM,yBAAyB,GAAI,OAAO,8BAA8B,gCAgD9E,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/react",
-  "version": "3.6.12",
+  "version": "3.7.0",
   "description": "Annotorious React bindings",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -26,7 +26,7 @@
     "./annotorious-react.css": "./dist/annotorious-react.css"
   },
   "devDependencies": {
-    "@types/react": "^19.1.9",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^4.7.0",
     "typescript": "^5.9.2",
@@ -45,9 +45,9 @@
     }
   },
   "dependencies": {
-    "@annotorious/annotorious": "3.6.12",
-    "@annotorious/core": "3.6.12",
-    "@annotorious/openseadragon": "3.6.12",
+    "@annotorious/annotorious": "3.7.0",
+    "@annotorious/core": "3.7.0",
+    "@annotorious/openseadragon": "3.7.0",
     "@floating-ui/react": "^0.27.15",
     "zustand": "^5.0.7"
   },