@annotorious/react 3.1.1 → 3.1.3

package/dist/annotorious-react.es4.js

@@ -1,12 +1,12 @@
-import { j as g } from "./annotorious-react.es11.js";
-import { useState as E, useRef as C, useEffect as A } from "react";
-import { useFloating as D, FloatingArrow as O } from "./annotorious-react.es13.js";
-import { useAnnotator as j, useSelection as L } from "./annotorious-react.es2.js";
-import { toClientRects as S } from "./annotorious-react.es14.js";
-import { inline as U, offset as F, flip as M, shift as P, arrow as b } from "./annotorious-react.es15.js";
-import { autoUpdate as k } from "./annotorious-react.es16.js";
-import w from "./annotorious-react.es17.js";
-const z = (i, t) => {
+import { jsxs as x, jsx as C } from "react/jsx-runtime";
+import { useState as E, useRef as A, useEffect as D } from "react";
+import { useFloating as O, FloatingArrow as L } from "./annotorious-react.es12.js";
+import { useAnnotator as S, useSelection as U } from "./annotorious-react.es2.js";
+import { toClientRects as F } from "./annotorious-react.es13.js";
+import { inline as M, offset as P, flip as b, shift as j, arrow as k } from "./annotorious-react.es14.js";
+import { autoUpdate as z } from "./annotorious-react.es15.js";
+import g from "./annotorious-react.es16.js";
+const H = (i, t) => {
   const n = t.querySelector("img"), { left: a, top: d } = n.getBoundingClientRect(), s = n.offsetWidth / n.naturalWidth, c = n.offsetHeight / n.naturalHeight, { minX: o, minY: l, maxX: p, maxY: u } = i.bounds;
   return new DOMRect(
     a + s * o,
@@ -14,35 +14,35 @@ const z = (i, t) => {
     s * (p - o),
     c * (u - l)
   );
-}, K = (i) => {
+}, Q = (i) => {
   var m, f;
-  const t = j(), [n, a] = E(!1), d = C(null), { selected: s, event: c } = L(), o = (m = s[0]) == null ? void 0 : m.annotation, l = (f = s[0]) == null ? void 0 : f.editable, { refs: p, floatingStyles: u, context: h, update: H } = D({
+  const t = S(), [n, a] = E(!1), d = A(null), { selected: s, event: c } = U(), o = (m = s[0]) == null ? void 0 : m.annotation, l = (f = s[0]) == null ? void 0 : f.editable, { refs: p, floatingStyles: u, context: w, update: I } = O({
     open: n,
     onOpenChange: a,
     middleware: [
-      U(),
-      F(10),
-      M({ crossAxis: !0 }),
-      P({
+      M(),
+      P(10),
+      b({ crossAxis: !0 }),
+      j({
         crossAxis: !0,
         padding: { right: 5, left: 5, top: 10, bottom: 10 }
       }),
-      b({
+      k({
         element: d,
         padding: 5
       })
     ],
-    whileElementsMounted: k
+    whileElementsMounted: z
   });
-  A(() => {
+  D(() => {
     if (s.length === 0)
       a(!1);
     else {
       const e = () => {
-        const r = z(o.target.selector.geometry, t.element);
+        const r = H(o.target.selector.geometry, t.element);
         p.setReference({
           getBoundingClientRect: () => r,
-          getClientRects: () => S(r)
+          getClientRects: () => F(r)
         });
       };
       return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), e(), a(!0), () => {
@@ -50,8 +50,8 @@ const z = (i, t) => {
       };
     }
   }, [t, i.popup, s]);
-  const x = (e) => {
-    const r = e.id || w();
+  const h = (e) => {
+    const r = e.id || g();
     t.state.store.addBody({
       ...e,
       id: r,
@@ -61,28 +61,28 @@ const z = (i, t) => {
     });
   }, y = (e) => {
     t.state.store.deleteBody({ id: e, annotation: o.id });
-  }, R = (e, r) => {
-    const v = r.id || w(), B = {
+  }, v = (e, r) => {
+    const B = r.id || g(), R = {
       updated: /* @__PURE__ */ new Date(),
       updatedBy: t.getUser(),
       ...r,
-      id: v,
+      id: B,
       annotation: o.id
     };
-    t.state.store.updateBody(e, B);
+    t.state.store.updateBody(e, R);
   };
-  return n && o ? /* @__PURE__ */ g.jsxs(
+  return n && o ? /* @__PURE__ */ x(
     "div",
     {
       className: "a9s-popup a9s-image-popup",
       ref: p.setFloating,
       style: u,
       children: [
-        i.arrow && /* @__PURE__ */ g.jsx(
-          O,
+        i.arrow && /* @__PURE__ */ C(
+          L,
           {
             ref: d,
-            context: h,
+            context: w,
             ...i.arrowProps || {}
           }
         ),
@@ -90,15 +90,15 @@ const z = (i, t) => {
           annotation: o,
           editable: l,
           event: c,
-          onCreateBody: x,
+          onCreateBody: h,
           onDeleteBody: y,
-          onUpdateBody: R
+          onUpdateBody: v
         })
       ]
     }
   ) : null;
 };
 export {
-  K as ImageAnnotationPopup
+  Q as ImageAnnotationPopup
 };
 //# sourceMappingURL=annotorious-react.es4.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es4.js","sources":["../src/ImageAnnotationPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { AnnotationBody, Geometry } from '@annotorious/annotorious';\nimport {\n  useFloating,\n  arrow,\n  shift,\n  inline,\n  autoUpdate,\n  flip,\n  offset,\n  FloatingArrow,\n  FloatingArrowProps\n} from '@floating-ui/react';\nimport { useAnnotator, useSelection } from './Annotorious';\nimport { PopupProps } from './PopupProps';\nimport { toClientRects } from './utils/toClientRects';\nimport { ImageAnnotator } from '@annotorious/openseadragon';\n\nconst toDOMRect = (geometry: Geometry, container: HTMLDivElement) => {\n  const img = container.querySelector('img');\n\n  const { left, top } = img.getBoundingClientRect();\n\n  const kx = img.offsetWidth / img.naturalWidth;\n  const ky = img.offsetHeight / img.naturalHeight;\n\n  const { minX, minY, maxX, maxY } = geometry.bounds;\n\n  return new DOMRect(\n    left + kx * minX,\n    top + ky * minY,\n    kx * (maxX - minX),\n    ky * (maxY - minY)\n  );\n}\n\ninterface ImageAnnotationPopupProps {\n\n  arrow?: boolean;\n\n  arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'>;\n\n  popup: (props: PopupProps) => ReactNode;\n\n}\n\nexport const ImageAnnotationPopup = (props: ImageAnnotationPopupProps) => {\n\n  const anno = useAnnotator<ImageAnnotator>();\n\n  const [isOpen, setIsOpen] = useState(false);\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, update } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    middleware: [\n      inline(), \n      offset(10),\n      flip({ crossAxis: true }),\n      shift({ \n        crossAxis: true,\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        const rect = toDOMRect(annotation.target.selector.geometry, anno.element);\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\n      setPosition();\n\n      setIsOpen(true);\n\n      return () => {\n        window.removeEventListener('scroll', setPosition, true);\n        window.removeEventListener('resize', setPosition);\n      };\n    }\n  }, [anno, props.popup, selected]);\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}\n"],"names":["toDOMRect","geometry","container","img","left","top","kx","ky","minX","minY","maxX","maxY","ImageAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","arrowRef","useRef","selected","event","useSelection","annotation","_a","editable","_b","refs","floatingStyles","context","update","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.es4.js","sources":["../src/ImageAnnotationPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { AnnotationBody, Geometry } from '@annotorious/annotorious';\nimport {\n  useFloating,\n  arrow,\n  shift,\n  inline,\n  autoUpdate,\n  flip,\n  offset,\n  FloatingArrow,\n  FloatingArrowProps\n} from '@floating-ui/react';\nimport { useAnnotator, useSelection } from './Annotorious';\nimport { PopupProps } from './PopupProps';\nimport { toClientRects } from './utils/toClientRects';\nimport { ImageAnnotator } from '@annotorious/openseadragon';\n\nconst toDOMRect = (geometry: Geometry, container: HTMLDivElement) => {\n  const img = container.querySelector('img');\n\n  const { left, top } = img.getBoundingClientRect();\n\n  const kx = img.offsetWidth / img.naturalWidth;\n  const ky = img.offsetHeight / img.naturalHeight;\n\n  const { minX, minY, maxX, maxY } = geometry.bounds;\n\n  return new DOMRect(\n    left + kx * minX,\n    top + ky * minY,\n    kx * (maxX - minX),\n    ky * (maxY - minY)\n  );\n}\n\ninterface ImageAnnotationPopupProps {\n\n  arrow?: boolean;\n\n  arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'>;\n\n  popup: (props: PopupProps) => ReactNode;\n\n}\n\nexport const ImageAnnotationPopup = (props: ImageAnnotationPopupProps) => {\n\n  const anno = useAnnotator<ImageAnnotator>();\n\n  const [isOpen, setIsOpen] = useState(false);\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, update } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    middleware: [\n      inline(), \n      offset(10),\n      flip({ crossAxis: true }),\n      shift({ \n        crossAxis: true,\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        const rect = toDOMRect(annotation.target.selector.geometry, anno.element);\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\n      setPosition();\n\n      setIsOpen(true);\n\n      return () => {\n        window.removeEventListener('scroll', setPosition, true);\n        window.removeEventListener('resize', setPosition);\n      };\n    }\n  }, [anno, props.popup, selected]);\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}\n"],"names":["toDOMRect","geometry","container","img","left","top","kx","ky","minX","minY","maxX","maxY","ImageAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","arrowRef","useRef","selected","event","useSelection","annotation","_a","editable","_b","refs","floatingStyles","context","update","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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"}

package/dist/annotorious-react.es5.js

@@ -1,29 +1,29 @@
-import { j as i } from "./annotorious-react.es11.js";
-import { Children as g, useContext as u, useEffect as n, cloneElement as x } from "react";
-import { createImageAnnotator as A } from "@annotorious/annotorious";
-import { AnnotoriousContext as C } from "./annotorious-react.es2.js";
-const N = (e) => {
-  const { children: a, tool: o, ...l } = e, r = g.only(a), { anno: t, setAnno: c } = u(C), s = (m) => {
-    if (!t) {
-      const f = m.target, d = A(f, l);
-      c(d);
+import { jsx as d, Fragment as g } from "react/jsx-runtime";
+import { Children as u, useContext as A, useEffect as n, cloneElement as C } from "react";
+import { createImageAnnotator as x } from "@annotorious/annotorious";
+import { AnnotoriousContext as E } from "./annotorious-react.es2.js";
+const S = (t) => {
+  const { children: i, tool: o, ...a } = t, l = u.only(i), { anno: e, setAnno: c } = A(E), r = (s) => {
+    if (!e) {
+      const m = s.target, f = x(m, a);
+      c(f);
     }
   };
   return n(() => {
-    !t || !e.containerClassName || (t.element.className = e.containerClassName);
-  }, [e.containerClassName, t]), n(() => {
-    t && t.setDrawingEnabled(e.drawingEnabled);
-  }, [e.drawingEnabled]), n(() => {
-    t && t.setFilter(e.filter);
-  }, [e.filter]), n(() => {
-    t && t.setStyle(e.style);
-  }, [e.style]), n(() => {
-    o && t && t.setDrawingTool(e.tool);
-  }, [o, t]), n(() => {
-    t && t.setUserSelectAction(e.userSelectAction);
-  }, [e.userSelectAction]), /* @__PURE__ */ i.jsx(i.Fragment, { children: x(r, { onLoad: s }) });
+    !e || !t.containerClassName || (e.element.className = t.containerClassName);
+  }, [t.containerClassName, e]), n(() => {
+    e && e.setDrawingEnabled(t.drawingEnabled);
+  }, [t.drawingEnabled]), n(() => {
+    e && e.setFilter(t.filter);
+  }, [t.filter]), n(() => {
+    e && e.setStyle(t.style);
+  }, [t.style]), n(() => {
+    o && e && e.setDrawingTool(t.tool);
+  }, [o, e]), n(() => {
+    e && e.setUserSelectAction(t.userSelectAction);
+  }, [t.userSelectAction]), /* @__PURE__ */ d(g, { children: C(l, { onLoad: r }) });
 };
 export {
-  N as ImageAnnotator
+  S as ImageAnnotator
 };
 //# sourceMappingURL=annotorious-react.es5.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es5.js","sources":["../src/ImageAnnotator.tsx"],"sourcesContent":["import { Children, ReactElement, cloneElement, useContext, useEffect } from 'react';\nimport { AnnotoriousOpts, createImageAnnotator } from '@annotorious/annotorious';\nimport type { DrawingTool, Filter, ImageAnnotation } from '@annotorious/annotorious';\nimport { AnnotoriousContext } from './Annotorious';\n\nexport interface ImageAnnotatorProps<E extends unknown> extends AnnotoriousOpts<ImageAnnotation, E> {\n\n  children: ReactElement<HTMLImageElement>;\n\n  containerClassName?: string;\n\n  filter?: Filter<ImageAnnotation>;\n\n  tool?: DrawingTool;\n\n}\n\nexport const ImageAnnotator = <E extends unknown>(props: ImageAnnotatorProps<E>) => {\n\n  const { children, tool, ...opts } = props;\n\n  const child = Children.only(children);\n\n  const { anno, setAnno } = useContext(AnnotoriousContext);\n\n  const onLoad = (evt: Event) => {\n    if (!anno) {\n      const img = evt.target as HTMLImageElement;\n\n      const next = createImageAnnotator(img, opts);\n      setAnno(next); \n    }\n  };\n\n  useEffect(() => {\n    if (!anno || !props.containerClassName) return;\n    anno.element.className = props.containerClassName;\n  }, [props.containerClassName, anno]);\n\n  useEffect(() => {\n    if (anno) anno.setDrawingEnabled(props.drawingEnabled);\n  }, [props.drawingEnabled]);\n\n  useEffect(() => {\n    if (anno) anno.setFilter(props.filter);\n  }, [props.filter]);\n\n  useEffect(() => {\n    if (anno) anno.setStyle(props.style);\n  }, [props.style]);\n\n  useEffect(() => {\n    if (tool && anno) anno.setDrawingTool(props.tool);\n  }, [tool, anno]);\n\n  useEffect(() => {\n    if (anno) anno.setUserSelectAction(props.userSelectAction);\n  }, [props.userSelectAction]);\n \n  return <>{cloneElement(child, { onLoad }  as Partial<HTMLImageElement>)}</>\n\n}\n"],"names":["ImageAnnotator","props","children","tool","opts","child","Children","anno","setAnno","useContext","AnnotoriousContext","onLoad","evt","img","next","createImageAnnotator","useEffect","cloneElement"],"mappings":";;;;AAiBa,MAAAA,IAAiB,CAAoBC,MAAkC;AAElF,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,GAAGC,EAAS,IAAAH,GAE9BI,IAAQC,EAAS,KAAKJ,CAAQ,GAE9B,EAAE,MAAAK,GAAM,SAAAC,MAAYC,EAAWC,CAAkB,GAEjDC,IAAS,CAACC,MAAe;AAC7B,QAAI,CAACL,GAAM;AACT,YAAMM,IAAMD,EAAI,QAEVE,IAAOC,EAAqBF,GAAKT,CAAI;AAC3C,MAAAI,EAAQM,CAAI;AAAA,IAAA;AAAA,EAEhB;AAEA,SAAAE,EAAU,MAAM;AACd,IAAI,CAACT,KAAQ,CAACN,EAAM,uBACfM,EAAA,QAAQ,YAAYN,EAAM;AAAA,EAC9B,GAAA,CAACA,EAAM,oBAAoBM,CAAI,CAAC,GAEnCS,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,kBAAkBN,EAAM,cAAc;AAAA,EAAA,GACpD,CAACA,EAAM,cAAc,CAAC,GAEzBe,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,UAAUN,EAAM,MAAM;AAAA,EAAA,GACpC,CAACA,EAAM,MAAM,CAAC,GAEjBe,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,SAASN,EAAM,KAAK;AAAA,EAAA,GAClC,CAACA,EAAM,KAAK,CAAC,GAEhBe,EAAU,MAAM;AACd,IAAIb,KAAQI,KAAWA,EAAA,eAAeN,EAAM,IAAI;AAAA,EAAA,GAC/C,CAACE,GAAMI,CAAI,CAAC,GAEfS,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,oBAAoBN,EAAM,gBAAgB;AAAA,EAAA,GACxD,CAACA,EAAM,gBAAgB,CAAC,uCAEjB,UAAagB,EAAAZ,GAAO,EAAE,QAAAM,EAAsC,CAAA,GAAE;AAE1E;"}
+{"version":3,"file":"annotorious-react.es5.js","sources":["../src/ImageAnnotator.tsx"],"sourcesContent":["import { Children, ReactElement, cloneElement, useContext, useEffect } from 'react';\nimport { AnnotoriousOpts, createImageAnnotator } from '@annotorious/annotorious';\nimport type { DrawingTool, Filter, ImageAnnotation } from '@annotorious/annotorious';\nimport { AnnotoriousContext } from './Annotorious';\n\nexport interface ImageAnnotatorProps<E extends unknown> extends AnnotoriousOpts<ImageAnnotation, E> {\n\n  children: ReactElement<HTMLImageElement>;\n\n  containerClassName?: string;\n\n  filter?: Filter<ImageAnnotation>;\n\n  tool?: DrawingTool;\n\n}\n\nexport const ImageAnnotator = <E extends unknown>(props: ImageAnnotatorProps<E>) => {\n\n  const { children, tool, ...opts } = props;\n\n  const child = Children.only(children);\n\n  const { anno, setAnno } = useContext(AnnotoriousContext);\n\n  const onLoad = (evt: Event) => {\n    if (!anno) {\n      const img = evt.target as HTMLImageElement;\n\n      const next = createImageAnnotator(img, opts);\n      setAnno(next); \n    }\n  };\n\n  useEffect(() => {\n    if (!anno || !props.containerClassName) return;\n    anno.element.className = props.containerClassName;\n  }, [props.containerClassName, anno]);\n\n  useEffect(() => {\n    if (anno) anno.setDrawingEnabled(props.drawingEnabled);\n  }, [props.drawingEnabled]);\n\n  useEffect(() => {\n    if (anno) anno.setFilter(props.filter);\n  }, [props.filter]);\n\n  useEffect(() => {\n    if (anno) anno.setStyle(props.style);\n  }, [props.style]);\n\n  useEffect(() => {\n    if (tool && anno) anno.setDrawingTool(props.tool);\n  }, [tool, anno]);\n\n  useEffect(() => {\n    if (anno) anno.setUserSelectAction(props.userSelectAction);\n  }, [props.userSelectAction]);\n \n  return <>{cloneElement(child, { onLoad }  as Partial<HTMLImageElement>)}</>\n\n}\n"],"names":["ImageAnnotator","props","children","tool","opts","child","Children","anno","setAnno","useContext","AnnotoriousContext","onLoad","evt","img","next","createImageAnnotator","useEffect","cloneElement"],"mappings":";;;;AAiBa,MAAAA,IAAiB,CAAoBC,MAAkC;AAElF,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,GAAGC,EAAS,IAAAH,GAE9BI,IAAQC,EAAS,KAAKJ,CAAQ,GAE9B,EAAE,MAAAK,GAAM,SAAAC,MAAYC,EAAWC,CAAkB,GAEjDC,IAAS,CAACC,MAAe;AAC7B,QAAI,CAACL,GAAM;AACT,YAAMM,IAAMD,EAAI,QAEVE,IAAOC,EAAqBF,GAAKT,CAAI;AAC3C,MAAAI,EAAQM,CAAI;AAAA,IAAA;AAAA,EAEhB;AAEA,SAAAE,EAAU,MAAM;AACd,IAAI,CAACT,KAAQ,CAACN,EAAM,uBACfM,EAAA,QAAQ,YAAYN,EAAM;AAAA,EAC9B,GAAA,CAACA,EAAM,oBAAoBM,CAAI,CAAC,GAEnCS,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,kBAAkBN,EAAM,cAAc;AAAA,EAAA,GACpD,CAACA,EAAM,cAAc,CAAC,GAEzBe,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,UAAUN,EAAM,MAAM;AAAA,EAAA,GACpC,CAACA,EAAM,MAAM,CAAC,GAEjBe,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,SAASN,EAAM,KAAK;AAAA,EAAA,GAClC,CAACA,EAAM,KAAK,CAAC,GAEhBe,EAAU,MAAM;AACd,IAAIb,KAAQI,KAAWA,EAAA,eAAeN,EAAM,IAAI;AAAA,EAAA,GAC/C,CAACE,GAAMI,CAAI,CAAC,GAEfS,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,oBAAoBN,EAAM,gBAAgB;AAAA,EAAA,GACxD,CAACA,EAAM,gBAAgB,CAAC,0BAEjB,UAAagB,EAAAZ,GAAO,EAAE,QAAAM,EAAsC,CAAA,GAAE;AAE1E;"}

package/dist/annotorious-react.es8.js

@@ -1,13 +1,13 @@
-import { j as d } from "./annotorious-react.es11.js";
-import { createContext as m, forwardRef as S, useState as w, useContext as s, useImperativeHandle as A, useEffect as n } from "react";
-import { createAnonymousGuest as x } from "@annotorious/core";
-import { createOSDAnnotator as g } from "@annotorious/openseadragon";
+import { jsx as d } from "react/jsx-runtime";
+import { createContext as m, forwardRef as S, useState as w, useContext as a, useImperativeHandle as A, useEffect as n } from "react";
+import { createAnonymousGuest as g } from "@annotorious/core";
+import { createOSDAnnotator as x } from "@annotorious/openseadragon";
 import { AnnotoriousContext as y } from "./annotorious-react.es2.js";
-const a = m({ viewer: null, setViewer: null }), D = S((t, c) => {
-  const { children: E, tool: o, ...u } = t, [r, f] = w(), { anno: e, setAnno: i } = s(y);
+const s = m({ viewer: null, setViewer: null }), O = S((t, c) => {
+  const { children: v, tool: o, ...f } = t, [r, u] = w(), { anno: e, setAnno: i } = a(y);
   return A(c, () => e, [e]), n(() => {
     if (r != null && r.element) {
-      const l = g(r, u);
+      const l = x(r, f);
       return i(l), () => {
         l.destroy(), i(void 0);
       };
@@ -23,17 +23,17 @@ const a = m({ viewer: null, setViewer: null }), D = S((t, c) => {
   }, [e, o]), n(() => {
     e && e.setModalSelect(t.modalSelect);
   }, [e, t.modalSelect]), n(() => {
-    e && (t.user ? e.setUser(t.user) : e.setUser(x()));
+    e && (t.user ? e.setUser(t.user) : e.setUser(g()));
   }, [e, t.user]), n(() => {
     e && e.setUserSelectAction(t.userSelectAction);
-  }, [e, t.userSelectAction]), /* @__PURE__ */ d.jsx(a.Provider, { value: { viewer: r, setViewer: f }, children: t.children });
-}), O = () => {
-  const { viewer: t } = s(a);
+  }, [e, t.userSelectAction]), /* @__PURE__ */ d(s.Provider, { value: { viewer: r, setViewer: u }, children: t.children });
+}), U = () => {
+  const { viewer: t } = a(s);
   return t;
 };
 export {
-  D as OpenSeadragonAnnotator,
-  a as OpenSeadragonAnnotatorContext,
-  O as useViewer
+  O as OpenSeadragonAnnotator,
+  s as OpenSeadragonAnnotatorContext,
+  U as useViewer
 };
 //# sourceMappingURL=annotorious-react.es8.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es8.js","sources":["../src/openseadragon/OpenSeadragonAnnotator.tsx"],"sourcesContent":["import { createContext, forwardRef, ReactNode, useContext, useEffect, useImperativeHandle, useState } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { createAnonymousGuest } from '@annotorious/core';\nimport { createOSDAnnotator } from '@annotorious/openseadragon';\nimport { Annotation, AnnotoriousOpts, DrawingStyle, Filter, User} from '@annotorious/annotorious';\nimport { AnnotoriousContext } from '../Annotorious';\nimport { AnnotoriousOpenSeadragonAnnotator } from '.';\n\nexport const OpenSeadragonAnnotatorContext = createContext<{ \n  viewer: OpenSeadragon.Viewer,\n  setViewer(viewer: OpenSeadragon.Viewer): void\n}>({ viewer: null, setViewer: null });\n\nexport type OpenSeadragonAnnotatorProps<I extends Annotation, E extends unknown> = AnnotoriousOpts<I, E> & {\n\n  children?: ReactNode;\n\n  filter?: Filter<I>;\n\n  style?: DrawingStyle | ((annotation: I) => DrawingStyle);\n\n  tool?: string | null;\n\n  user?: User;\n\n}\n\nexport const OpenSeadragonAnnotator = forwardRef(<I extends Annotation, E extends unknown>(\n  props: OpenSeadragonAnnotatorProps<I, E>, \n  ref: React.ForwardedRef<AnnotoriousOpenSeadragonAnnotator<I, E> | null>\n) => {\n  const { children, tool, ...opts } = props;\n\n  const [viewer, setViewer] = useState<OpenSeadragon.Viewer>();\n\n  const { anno, setAnno } = useContext(AnnotoriousContext);\n\n  useImperativeHandle(ref, () => anno as AnnotoriousOpenSeadragonAnnotator<I, E> | null, [anno]);\n\n  useEffect(() => {\n    if (viewer?.element) {\n      const anno = createOSDAnnotator<I, E>(viewer, opts as AnnotoriousOpts<I, E>);\n      setAnno(anno);\n\n      return () => {\n        anno.destroy();\n        setAnno(undefined);\n      }\n    }\n  }, [viewer]);\n\n  useEffect(() => {\n    if (anno) anno.setDrawingEnabled(props.drawingEnabled);\n  }, [anno, props.drawingEnabled]);\n\n  useEffect(() => {\n    if (anno) anno.setFilter(props.filter);\n  }, [anno, props.filter]);\n\n  useEffect(() => {\n    if (anno) anno.setStyle(props.style);\n  }, [anno, props.style]);\n\n  useEffect(() => {\n    if (anno) anno.setDrawingTool(tool || 'rectangle');\n  }, [anno, tool]);\n\n  useEffect(() => {\n    if (anno) anno.setModalSelect(props.modalSelect);\n  }, [anno, props.modalSelect]);\n\n  useEffect(() => {\n    if (!anno) return;\n    \n    if (props.user)\n      anno.setUser(props.user);\n    else \n      anno.setUser(createAnonymousGuest());\n  }, [anno, props.user]);\n\n  useEffect(() => {\n    if (anno) anno.setUserSelectAction(props.userSelectAction);\n  }, [anno, props.userSelectAction]);\n\n  return (\n    <OpenSeadragonAnnotatorContext.Provider value={{ viewer, setViewer }}>\n      {props.children}\n    </OpenSeadragonAnnotatorContext.Provider>\n  )\n\n}) as <I extends Annotation, E extends unknown> (\n  props: OpenSeadragonAnnotatorProps<I, E> & { ref?: React.ForwardedRef<AnnotoriousOpenSeadragonAnnotator<I, E> | null> }\n) => React.ReactElement;\n\nexport const useViewer = () => {\n  const { viewer } = useContext(OpenSeadragonAnnotatorContext);\n  return viewer;\n}"],"names":["OpenSeadragonAnnotatorContext","createContext","OpenSeadragonAnnotator","forwardRef","props","ref","children","tool","opts","viewer","setViewer","useState","anno","setAnno","useContext","AnnotoriousContext","useImperativeHandle","useEffect","createOSDAnnotator","createAnonymousGuest","jsx","useViewer"],"mappings":";;;;;AAQO,MAAMA,IAAgCC,EAG1C,EAAE,QAAQ,MAAM,WAAW,KAAM,CAAA,GAgBvBC,IAAyBC,EAAW,CAC/CC,GACAC,MACG;AACH,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,GAAGC,EAAS,IAAAJ,GAE9B,CAACK,GAAQC,CAAS,IAAIC,EAA+B,GAErD,EAAE,MAAAC,GAAM,SAAAC,MAAYC,EAAWC,CAAkB;AAEvD,SAAAC,EAAoBX,GAAK,MAAMO,GAAwD,CAACA,CAAI,CAAC,GAE7FK,EAAU,MAAM;AACd,QAAIR,KAAA,QAAAA,EAAQ,SAAS;AACbG,YAAAA,IAAOM,EAAyBT,GAAQD,CAA6B;AAC3E,aAAAK,EAAQD,CAAI,GAEL,MAAM;AACXA,QAAAA,EAAK,QAAQ,GACbC,EAAQ,MAAS;AAAA,MACnB;AAAA,IAAA;AAAA,EACF,GACC,CAACJ,CAAM,CAAC,GAEXQ,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,kBAAkBR,EAAM,cAAc;AAAA,EACpD,GAAA,CAACQ,GAAMR,EAAM,cAAc,CAAC,GAE/Ba,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,UAAUR,EAAM,MAAM;AAAA,EACpC,GAAA,CAACQ,GAAMR,EAAM,MAAM,CAAC,GAEvBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,SAASR,EAAM,KAAK;AAAA,EAClC,GAAA,CAACQ,GAAMR,EAAM,KAAK,CAAC,GAEtBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,eAAeL,KAAQ,WAAW;AAAA,EAAA,GAChD,CAACK,GAAML,CAAI,CAAC,GAEfU,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,eAAeR,EAAM,WAAW;AAAA,EAC9C,GAAA,CAACQ,GAAMR,EAAM,WAAW,CAAC,GAE5Ba,EAAU,MAAM;AACd,IAAKL,MAEDR,EAAM,OACHQ,EAAA,QAAQR,EAAM,IAAI,IAElBQ,EAAA,QAAQO,GAAsB;AAAA,EACpC,GAAA,CAACP,GAAMR,EAAM,IAAI,CAAC,GAErBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,oBAAoBR,EAAM,gBAAgB;AAAA,EACxD,GAAA,CAACQ,GAAMR,EAAM,gBAAgB,CAAC,GAG/BgB,gBAAAA,MAACpB,EAA8B,UAA9B,EAAuC,OAAO,EAAE,QAAAS,GAAQ,WAAAC,KACtD,UAAAN,EAAM,SACT,CAAA;AAGJ,CAAC,GAIYiB,IAAY,MAAM;AAC7B,QAAM,EAAE,QAAAZ,EAAA,IAAWK,EAAWd,CAA6B;AACpD,SAAAS;AACT;"}
+{"version":3,"file":"annotorious-react.es8.js","sources":["../src/openseadragon/OpenSeadragonAnnotator.tsx"],"sourcesContent":["import { createContext, forwardRef, ReactNode, useContext, useEffect, useImperativeHandle, useState } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { createAnonymousGuest } from '@annotorious/core';\nimport { createOSDAnnotator } from '@annotorious/openseadragon';\nimport { Annotation, AnnotoriousOpts, DrawingStyle, Filter, User} from '@annotorious/annotorious';\nimport { AnnotoriousContext } from '../Annotorious';\nimport { AnnotoriousOpenSeadragonAnnotator } from '.';\n\nexport const OpenSeadragonAnnotatorContext = createContext<{ \n  viewer: OpenSeadragon.Viewer,\n  setViewer(viewer: OpenSeadragon.Viewer): void\n}>({ viewer: null, setViewer: null });\n\nexport type OpenSeadragonAnnotatorProps<I extends Annotation, E extends unknown> = AnnotoriousOpts<I, E> & {\n\n  children?: ReactNode;\n\n  filter?: Filter<I>;\n\n  style?: DrawingStyle | ((annotation: I) => DrawingStyle);\n\n  tool?: string | null;\n\n  user?: User;\n\n}\n\nexport const OpenSeadragonAnnotator = forwardRef(<I extends Annotation, E extends unknown>(\n  props: OpenSeadragonAnnotatorProps<I, E>, \n  ref: React.ForwardedRef<AnnotoriousOpenSeadragonAnnotator<I, E> | null>\n) => {\n  const { children, tool, ...opts } = props;\n\n  const [viewer, setViewer] = useState<OpenSeadragon.Viewer>();\n\n  const { anno, setAnno } = useContext(AnnotoriousContext);\n\n  useImperativeHandle(ref, () => anno as AnnotoriousOpenSeadragonAnnotator<I, E> | null, [anno]);\n\n  useEffect(() => {\n    if (viewer?.element) {\n      const anno = createOSDAnnotator<I, E>(viewer, opts as AnnotoriousOpts<I, E>);\n      setAnno(anno);\n\n      return () => {\n        anno.destroy();\n        setAnno(undefined);\n      }\n    }\n  }, [viewer]);\n\n  useEffect(() => {\n    if (anno) anno.setDrawingEnabled(props.drawingEnabled);\n  }, [anno, props.drawingEnabled]);\n\n  useEffect(() => {\n    if (anno) anno.setFilter(props.filter);\n  }, [anno, props.filter]);\n\n  useEffect(() => {\n    if (anno) anno.setStyle(props.style);\n  }, [anno, props.style]);\n\n  useEffect(() => {\n    if (anno) anno.setDrawingTool(tool || 'rectangle');\n  }, [anno, tool]);\n\n  useEffect(() => {\n    if (anno) anno.setModalSelect(props.modalSelect);\n  }, [anno, props.modalSelect]);\n\n  useEffect(() => {\n    if (!anno) return;\n    \n    if (props.user)\n      anno.setUser(props.user);\n    else \n      anno.setUser(createAnonymousGuest());\n  }, [anno, props.user]);\n\n  useEffect(() => {\n    if (anno) anno.setUserSelectAction(props.userSelectAction);\n  }, [anno, props.userSelectAction]);\n\n  return (\n    <OpenSeadragonAnnotatorContext.Provider value={{ viewer, setViewer }}>\n      {props.children}\n    </OpenSeadragonAnnotatorContext.Provider>\n  )\n\n}) as <I extends Annotation, E extends unknown> (\n  props: OpenSeadragonAnnotatorProps<I, E> & { ref?: React.ForwardedRef<AnnotoriousOpenSeadragonAnnotator<I, E> | null> }\n) => React.ReactElement;\n\nexport const useViewer = () => {\n  const { viewer } = useContext(OpenSeadragonAnnotatorContext);\n  return viewer;\n}"],"names":["OpenSeadragonAnnotatorContext","createContext","OpenSeadragonAnnotator","forwardRef","props","ref","children","tool","opts","viewer","setViewer","useState","anno","setAnno","useContext","AnnotoriousContext","useImperativeHandle","useEffect","createOSDAnnotator","createAnonymousGuest","jsx","useViewer"],"mappings":";;;;;AAQO,MAAMA,IAAgCC,EAG1C,EAAE,QAAQ,MAAM,WAAW,KAAM,CAAA,GAgBvBC,IAAyBC,EAAW,CAC/CC,GACAC,MACG;AACH,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,GAAGC,EAAS,IAAAJ,GAE9B,CAACK,GAAQC,CAAS,IAAIC,EAA+B,GAErD,EAAE,MAAAC,GAAM,SAAAC,MAAYC,EAAWC,CAAkB;AAEvD,SAAAC,EAAoBX,GAAK,MAAMO,GAAwD,CAACA,CAAI,CAAC,GAE7FK,EAAU,MAAM;AACd,QAAIR,KAAA,QAAAA,EAAQ,SAAS;AACbG,YAAAA,IAAOM,EAAyBT,GAAQD,CAA6B;AAC3E,aAAAK,EAAQD,CAAI,GAEL,MAAM;AACXA,QAAAA,EAAK,QAAQ,GACbC,EAAQ,MAAS;AAAA,MACnB;AAAA,IAAA;AAAA,EACF,GACC,CAACJ,CAAM,CAAC,GAEXQ,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,kBAAkBR,EAAM,cAAc;AAAA,EACpD,GAAA,CAACQ,GAAMR,EAAM,cAAc,CAAC,GAE/Ba,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,UAAUR,EAAM,MAAM;AAAA,EACpC,GAAA,CAACQ,GAAMR,EAAM,MAAM,CAAC,GAEvBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,SAASR,EAAM,KAAK;AAAA,EAClC,GAAA,CAACQ,GAAMR,EAAM,KAAK,CAAC,GAEtBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,eAAeL,KAAQ,WAAW;AAAA,EAAA,GAChD,CAACK,GAAML,CAAI,CAAC,GAEfU,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,eAAeR,EAAM,WAAW;AAAA,EAC9C,GAAA,CAACQ,GAAMR,EAAM,WAAW,CAAC,GAE5Ba,EAAU,MAAM;AACd,IAAKL,MAEDR,EAAM,OACHQ,EAAA,QAAQR,EAAM,IAAI,IAElBQ,EAAA,QAAQO,GAAsB;AAAA,EACpC,GAAA,CAACP,GAAMR,EAAM,IAAI,CAAC,GAErBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,oBAAoBR,EAAM,gBAAgB;AAAA,EACxD,GAAA,CAACQ,GAAMR,EAAM,gBAAgB,CAAC,GAG/B,gBAAAgB,EAACpB,EAA8B,UAA9B,EAAuC,OAAO,EAAE,QAAAS,GAAQ,WAAAC,KACtD,UAAAN,EAAM,SACT,CAAA;AAGJ,CAAC,GAIYiB,IAAY,MAAM;AAC7B,QAAM,EAAE,QAAAZ,EAAA,IAAWK,EAAWd,CAA6B;AACpD,SAAAS;AACT;"}

package/dist/annotorious-react.es9.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@annotorious/react",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "Annotorious React bindings",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -45,9 +45,9 @@
     }
   },
   "dependencies": {
-    "@annotorious/annotorious": "3.1.1",
-    "@annotorious/core": "3.1.1",
-    "@annotorious/openseadragon": "3.1.1",
+    "@annotorious/annotorious": "3.1.3",
+    "@annotorious/core": "3.1.3",
+    "@annotorious/openseadragon": "3.1.3",
     "@floating-ui/react": "^0.27.3",
     "zustand": "^5.0.3"
   },

package/dist/annotorious-react.es23.js

@@ -1,5 +0,0 @@
-var e = {};
-export {
-  e as __exports
-};
-//# sourceMappingURL=annotorious-react.es23.js.map

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

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

package/dist/annotorious-react.es24.js

@@ -1,10 +0,0 @@
-const i = [];
-for (let n = 0; n < 256; ++n)
-  i.push((n + 256).toString(16).slice(1));
-function c(n, u = 0) {
-  return (i[n[u + 0]] + i[n[u + 1]] + i[n[u + 2]] + i[n[u + 3]] + "-" + i[n[u + 4]] + i[n[u + 5]] + "-" + i[n[u + 6]] + i[n[u + 7]] + "-" + i[n[u + 8]] + i[n[u + 9]] + "-" + i[n[u + 10]] + i[n[u + 11]] + i[n[u + 12]] + i[n[u + 13]] + i[n[u + 14]] + i[n[u + 15]]).toLowerCase();
-}
-export {
-  c as unsafeStringify
-};
-//# sourceMappingURL=annotorious-react.es24.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"annotorious-react.es24.js","sources":["../../../node_modules/uuid/dist/esm-browser/stringify.js"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n"],"names":["byteToHex","i","unsafeStringify","arr","offset"],"mappings":"AACA,MAAMA,IAAY,CAAE;AACpB,SAASC,IAAI,GAAGA,IAAI,KAAK,EAAEA;AACvB,EAAAD,EAAU,MAAMC,IAAI,KAAO,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC;AAE7C,SAASC,EAAgBC,GAAKC,IAAS,GAAG;AAC7C,UAAQJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IAC7BJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzBJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzBJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzB,MACAJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzBJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzB,MACAJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzBJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzB,MACAJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzBJ,EAAUG,EAAIC,IAAS,CAAC,CAAC,IACzB,MACAJ,EAAUG,EAAIC,IAAS,EAAE,CAAC,IAC1BJ,EAAUG,EAAIC,IAAS,EAAE,CAAC,IAC1BJ,EAAUG,EAAIC,IAAS,EAAE,CAAC,IAC1BJ,EAAUG,EAAIC,IAAS,EAAE,CAAC,IAC1BJ,EAAUG,EAAIC,IAAS,EAAE,CAAC,IAC1BJ,EAAUG,EAAIC,IAAS,EAAE,CAAC,GAAG,YAAa;AAClD;","x_google_ignoreList":[0]}

package/dist/annotorious-react.es25.js

@@ -1,5 +0,0 @@
-const o = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), t = { randomUUID: o };
-export {
-  t as default
-};
-//# sourceMappingURL=annotorious-react.es25.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"annotorious-react.es25.js","sources":["../../../node_modules/uuid/dist/esm-browser/native.js"],"sourcesContent":["const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n"],"names":["randomUUID","native"],"mappings":"AAAA,MAAMA,IAAa,OAAO,SAAW,OAAe,OAAO,cAAc,OAAO,WAAW,KAAK,MAAM,GACvFC,IAAA,EAAE,YAAAD,EAAY;","x_google_ignoreList":[0]}

package/dist/annotorious-react.es26.js

@@ -1,14 +0,0 @@
-let t;
-const e = new Uint8Array(16);
-function o() {
-  if (!t) {
-    if (typeof crypto > "u" || !crypto.getRandomValues)
-      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    t = crypto.getRandomValues.bind(crypto);
-  }
-  return t(e);
-}
-export {
-  o as default
-};
-//# sourceMappingURL=annotorious-react.es26.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"annotorious-react.es26.js","sources":["../../../node_modules/uuid/dist/esm-browser/rng.js"],"sourcesContent":["let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n"],"names":["getRandomValues","rnds8","rng"],"mappings":"AAAA,IAAIA;AACJ,MAAMC,IAAQ,IAAI,WAAW,EAAE;AAChB,SAASC,IAAM;AAC1B,MAAI,CAACF,GAAiB;AAClB,QAAI,OAAO,SAAW,OAAe,CAAC,OAAO;AACzC,YAAM,IAAI,MAAM,0GAA0G;AAE9H,IAAAA,IAAkB,OAAO,gBAAgB,KAAK,MAAM;AAAA,EAC5D;AACI,SAAOA,EAAgBC,CAAK;AAChC;","x_google_ignoreList":[0]}