@annotorious/react 3.0.0-rc.16 → 3.0.0-rc.18

package/dist/Annotorious.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Annotation, Annotator, StoreChangeEvent } from '@annotorious/annotorious';
+import { Annotation, Annotator, Store } from '@annotorious/annotorious';
 interface Selection<T extends Annotation = Annotation> {
     selected: {
         annotation: T;
@@ -25,32 +25,7 @@ export declare const Annotorious: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<Annotator<Annotation, Annotation>>>;
 export declare const useAnnotator: <T extends Annotator<any, unknown>>() => T;
-export declare const useAnnotationStore: <T extends {
-    addAnnotation: (annotation: Annotation, origin?: import("@annotorious/core").Origin) => void;
-    addBody: (body: import("@annotorious/annotorious").AnnotationBody, origin?: import("@annotorious/core").Origin) => void;
-    all: () => Annotation[];
-    bulkAddAnnotation: (annotations: Annotation[], replace?: boolean, origin?: import("@annotorious/core").Origin) => void;
-    bulkDeleteAnnotation: (annotationsOrIds: (string | Annotation)[], origin?: import("@annotorious/core").Origin) => void;
-    bulkUpdateAnnotation: (annotations: Annotation[], origin?: import("@annotorious/core").Origin) => void;
-    bulkUpdateBodies: (bodies: import("@annotorious/annotorious").AnnotationBody[], origin?: import("@annotorious/core").Origin) => void;
-    bulkUpdateTargets: (targets: import("@annotorious/annotorious").AnnotationTarget[], origin?: import("@annotorious/core").Origin) => void;
-    clear: (origin?: import("@annotorious/core").Origin) => void;
-    deleteAnnotation: (annotationOrId: string | Annotation, origin?: import("@annotorious/core").Origin) => void;
-    deleteBody: (body: {
-        id: string;
-        annotation: string;
-    }, origin?: import("@annotorious/core").Origin) => void;
-    getAnnotation: (id: string) => Annotation;
-    getBody: (id: string) => import("@annotorious/annotorious").AnnotationBody;
-    observe: (onChange: (event: StoreChangeEvent<Annotation>) => void, options?: import("@annotorious/core").StoreObserveOptions) => number;
-    unobserve: (onChange: (event: StoreChangeEvent<Annotation>) => void) => void;
-    updateAnnotation: (arg1: string | Annotation, arg2?: Annotation | import("@annotorious/core").Origin, arg3?: import("@annotorious/core").Origin) => void;
-    updateBody: (oldBodyId: {
-        id: string;
-        annotation: string;
-    }, newBody: import("@annotorious/annotorious").AnnotationBody, origin?: import("@annotorious/core").Origin) => void;
-    updateTarget: (target: import("@annotorious/annotorious").AnnotationTarget, origin?: import("@annotorious/core").Origin) => void;
-}>() => T;
+export declare const useAnnotationStore: <T extends Store<Annotation>>() => T;
 export declare const useAnnotations: <T extends Annotation>(debounce?: number) => T[];
 export declare const useSelection: <T extends Annotation>() => Selection<T>;
 export declare const useAnnotatorUser: () => any;

package/dist/Annotorious.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Annotorious.d.ts","sourceRoot":"","sources":["../src/Annotorious.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAS,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG1F,UAAU,SAAS,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU;IAEnD,QAAQ,EAAE;QAAE,UAAU,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAElD,YAAY,CAAC,EAAE,YAAY,CAAC;CAE7B;AAED,MAAM,WAAW,uBAAuB;IAEtC,IAAI,EAAE,SAAS,CAAC;IAEhB,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAEpD,WAAW,EAAE,UAAU,EAAE,CAAC;IAE1B,SAAS,EAAE,SAAS,CAAC;CAEtB;AAED,eAAO,MAAM,kBAAkB;;;;;;;EAU7B,CAAC;AAEH,eAAO,MAAM,WAAW;cAAqC,SAAS;qEAuEpE,CAAC;AAEH,eAAO,MAAM,YAAY,4CAGxB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;SAG9B,CAAA;AAYD,eAAO,MAAM,cAAc,oCAAqC,MAAM,QACE,CAAC;AAEzE,eAAO,MAAM,YAAY,0CAGxB,CAAA;AAED,eAAO,MAAM,gBAAgB,WAG5B,CAAA;AAmDD,eAAO,MAAM,gBAAgB,oCAAsC,MAAM,QACI,CAAC"}
+{"version":3,"file":"Annotorious.d.ts","sourceRoot":"","sources":["../src/Annotorious.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,SAAS,EAAC,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAoB,MAAM,0BAA0B,CAAC;AAG1F,UAAU,SAAS,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU;IAEnD,QAAQ,EAAE;QAAE,UAAU,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAElD,YAAY,CAAC,EAAE,YAAY,CAAC;CAE7B;AAED,MAAM,WAAW,uBAAuB;IAEtC,IAAI,EAAE,SAAS,CAAC;IAEhB,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAEpD,WAAW,EAAE,UAAU,EAAE,CAAC;IAE1B,SAAS,EAAE,SAAS,CAAC;CAEtB;AAED,eAAO,MAAM,kBAAkB;;;;;;;EAU7B,CAAC;AAEH,eAAO,MAAM,WAAW;cAAqC,SAAS;qEAuEpE,CAAC;AAEH,eAAO,MAAM,YAAY,4CAGxB,CAAA;AAED,eAAO,MAAM,kBAAkB,sCAG9B,CAAA;AAYD,eAAO,MAAM,cAAc,oCAAqC,MAAM,QACE,CAAC;AAEzE,eAAO,MAAM,YAAY,0CAGxB,CAAA;AAED,eAAO,MAAM,gBAAgB,WAG5B,CAAA;AAmDD,eAAO,MAAM,gBAAgB,oCAAsC,MAAM,QACI,CAAC"}

package/dist/annotorious-react.css

@@ -1 +1 @@
-canvas.a9s-gl-canvas{height:100%;left:0;position:absolute;top:0;width:100%}canvas.a9s-gl-canvas.hover{cursor:pointer!important}svg.svelte-190cqdf.svelte-190cqdf{pointer-events:none}svg.drawing.svelte-190cqdf.svelte-190cqdf{pointer-events:all}svg.svelte-190cqdf .svelte-190cqdf{pointer-events:all}text.svelte-1rehw2p{fill:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:600}rect.svelte-1rehw2p{stroke-width:1.2;vector-effect:non-scaling-stroke}polygon.svelte-fgq4n0{stroke-width:1.2;vector-effect:non-scaling-stroke}rect.svelte-gze948{stroke-width:1.2;vector-effect:non-scaling-stroke}svg.svelte-1krwc4m{position:absolute;top:0;left:0;width:100%;height:100%;outline:none;pointer-events:none}.a9s-annotationlayer{box-sizing:border-box;height:100%;left:0;outline:none;position:absolute;top:0;touch-action:none;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.a9s-annotationlayer ellipse,.a9s-annotationlayer polygon,.a9s-annotationlayer rect{fill:transparent;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}.a9s-edge-handle{fill:transparent;stroke:transparent;stroke-width:6px}.a9s-shape-handle,.a9s-corner-handle{cursor:move}.a9s-edge-handle-top{cursor:n-resize}.a9s-edge-handle-right{cursor:e-resize}.a9s-edge-handle-bottom{cursor:s-resize}.a9s-edge-handle-left{cursor:w-resize}.a9s-corner-handle.a9s-corner-handle-topleft{cursor:nw-resize}.a9s-corner-handle.a9s-corner-handle-topright{cursor:ne-resize}.a9s-corner-handle.a9s-corner-handle-bottomright{cursor:se-resize}.a9s-corner-handle.a9s-corner-handle-bottomleft{cursor:sw-resize}.a9s-annotationlayer .a9s-outer,div[data-theme=dark] .a9s-annotationlayer .a9s-outer{display:none}.a9s-annotationlayer .a9s-inner,div[data-theme=dark] .a9s-annotationlayer .a9s-inner{fill:#0000001f;stroke:#000;stroke-width:1px}rect.a9s-corner-handle,div[data-theme=dark] rect.a9s-corner-handle{fill:#000;rx:2px}rect.a9s-close-polygon-handle,div[data-theme=dark] rect.a9s-close-polygon-handle{fill:#000;rx:1px}.a9s-annotationlayer .a9s-outer,div[data-theme=light] .a9s-annotationlayer .a9s-outer{display:block;stroke:#00000040;stroke-width:3.5px}.a9s-annotationlayer .a9s-inner,div[data-theme=light] .a9s-annotationlayer .a9s-inner{fill:#ffffff26;stroke:#fff;stroke-width:1.5px}rect.a9s-corner-handle,div[data-theme=light] rect.a9s-corner-handle{fill:#fff;rx:1px;stroke:#00000073;stroke-width:1px}rect.a9s-close-polygon-handle,div[data-theme=light] rect.a9s-close-polygon-handle{fill:#fff;rx:1px;stroke:#00000073;stroke-width:1px}
+canvas.a9s-gl-canvas{height:100%;left:0;position:absolute;top:0;width:100%}canvas.a9s-gl-canvas.hover{cursor:pointer!important}svg.svelte-190cqdf.svelte-190cqdf{pointer-events:none}svg.drawing.svelte-190cqdf.svelte-190cqdf{pointer-events:all}svg.svelte-190cqdf .svelte-190cqdf{pointer-events:all}text.svelte-1rehw2p{fill:#fff;font-family:Arial,Helvetica,sans-serif;font-weight:600}rect.svelte-1rehw2p{stroke-width:1.2;vector-effect:non-scaling-stroke}polygon.svelte-fgq4n0{stroke-width:1.2;vector-effect:non-scaling-stroke}rect.svelte-gze948{stroke-width:1.2;vector-effect:non-scaling-stroke}svg.svelte-1krwc4m{position:absolute;top:0;left:0;width:100%;height:100%;outline:none;pointer-events:none}.a9s-touch-halo.svelte-1sgkh33{fill:transparent;stroke-width:0}.a9s-touch-halo.touched.svelte-1sgkh33{fill:#ffffff40}.a9s-annotationlayer{box-sizing:border-box;height:100%;left:0;outline:none;position:absolute;top:0;touch-action:none;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.a9s-annotationlayer ellipse,.a9s-annotationlayer polygon,.a9s-annotationlayer rect{fill:transparent;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke}.a9s-edge-handle{fill:transparent;stroke:transparent;stroke-width:6px}.a9s-shape-handle,.a9s-handle{cursor:move}.a9s-edge-handle-top{cursor:n-resize}.a9s-edge-handle-right{cursor:e-resize}.a9s-edge-handle-bottom{cursor:s-resize}.a9s-edge-handle-left{cursor:w-resize}.a9s-handle.a9s-corner-handle-topleft{cursor:nw-resize}.a9s-handle.a9s-corner-handle-topright{cursor:ne-resize}.a9s-handle.a9s-corner-handle-bottomright{cursor:se-resize}.a9s-handle.a9s-corner-handle-bottomleft{cursor:sw-resize}.a9s-annotationlayer .a9s-outer,div[data-theme=dark] .a9s-annotationlayer .a9s-outer{display:none}.a9s-annotationlayer .a9s-inner,div[data-theme=dark] .a9s-annotationlayer .a9s-inner{fill:#0000001f;stroke:#000;stroke-width:1px}rect.a9s-handle,div[data-theme=dark] rect.a9s-handle{fill:#000;rx:2px}rect.a9s-close-polygon-handle,div[data-theme=dark] rect.a9s-close-polygon-handle{fill:#000;rx:1px}.a9s-annotationlayer .a9s-outer,div[data-theme=light] .a9s-annotationlayer .a9s-outer{display:block;stroke:#00000040;stroke-width:3.5px}.a9s-annotationlayer .a9s-inner,div[data-theme=light] .a9s-annotationlayer .a9s-inner{fill:#ffffff26;stroke:#fff;stroke-width:1.5px}rect.a9s-handle,div[data-theme=light] rect.a9s-handle{fill:#fff;rx:1px;stroke:#00000073;stroke-width:1px}rect.a9s-close-polygon-handle,div[data-theme=light] rect.a9s-close-polygon-handle{fill:#fff;rx:1px;stroke:#00000073;stroke-width:1px}

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es.js","sources":["../src/index.ts"],"sourcesContent":["export * from './Annotorious';\nexport * from './AnnotoriousPlugin';\nexport * from './AnnotoriousPopup';\nexport * from './ImageAnnotator';\n\nexport * from './openseadragon';\n\n// This ensures the Annotorious stylesheet gets packaged into annotorious-react\nimport '@annotorious/annotorious/annotorious.css';\nimport '@annotorious/openseadragon/annotorious-openseadragon.css';\n\n// Essential re-exports from @annotorious/core\nexport type {\n  Annotation,\n  AnnotationBody,\n  AnnotationTarget,\n  Annotator,\n  AnnotatorState,\n  Appearance,\n  AppearanceProvider,\n  Color,\n  DrawingStyle,\n  Filter,\n  FormatAdapter,\n  HoverState,\n  LifecycleEvents,\n  ParseResult,\n  PresentUser,\n  Purpose,\n  Selection,\n  SelectionState,\n  Store,\n  StoreChangeEvent,\n  StoreObserver,\n  User,\n  W3CAnnotation,\n  W3CAnnotationBody,\n  W3CAnnotationTarget,\n  W3CSelector\n} from '@annotorious/core';\n\nimport {\n  createAnonymousGuest as _createAnonymousGuest, \n  createBody as _createBody,\n  defaultColorProvider as _defaultColorProvider,\n  Origin as _Origin,\n  PointerSelectAction as _PointerSelectAction\n} from '@annotorious/core';\n\nexport { _createAnonymousGuest as createAnonymousGuest };\nexport { _createBody as createBody };\nexport { _defaultColorProvider as defaultColorProvider };\nexport { _Origin as Origin };\nexport { _PointerSelectAction as PointerSelectAction };\n\n// Essential re-exports from @annotorious/annotorious \nexport type {\n  AnnotoriousOpts,\n  DrawingMode,\n  DrawingTool,\n  ImageAnnotator as AnnotoriousImageAnnotator,\n  ImageAnnotation,\n  ImageAnnotator,\n  ImageAnnotatorState,\n  Polygon,\n  PolygonGeometry,\n  Rectangle,\n  RectangleGeometry,\n  Shape\n} from '@annotorious/annotorious';\n\nimport {   \n  createImageAnnotator as _createImageAnnotator,\n  ShapeType as _ShapeType,\n  W3CImageFormat as _W3CImageFormat\n} from '@annotorious/annotorious';\n\nexport const createImageAnnotator = _createImageAnnotator;\nexport const ShapeType = _ShapeType;\nexport const W3CImageFormat = _W3CImageFormat;\n\n// Essential re-exports from @annotorious/openseadragon \nexport type {\n  OpenSeadragonAnnotator as AnnotoriousOpenSeadragonAnnotator\n} from '@annotorious/openseadragon';\n\nexport type { Viewer } from 'openseadragon';"],"names":["createImageAnnotator","_createImageAnnotator","ShapeType","_ShapeType","W3CImageFormat","_W3CImageFormat"],"mappings":";;;;;;;;;;;AA6EO,MAAMA,IAAuBC,GACvBC,IAAYC,GACZC,IAAiBC;"}
+{"version":3,"file":"annotorious-react.es.js","sources":["../src/index.ts"],"sourcesContent":["export * from './Annotorious';\nexport * from './AnnotoriousPlugin';\nexport * from './AnnotoriousPopup';\nexport * from './ImageAnnotator';\n\nexport * from './openseadragon';\n\n// This ensures the Annotorious stylesheet gets packaged into annotorious-react\nimport '@annotorious/annotorious/annotorious.css';\nimport '@annotorious/openseadragon/annotorious-openseadragon.css';\n\n// Essential re-exports from @annotorious/core\nexport type {\n  Annotation,\n  AnnotationBody,\n  AnnotationTarget,\n  Annotator,\n  AnnotatorState,\n  Appearance,\n  AppearanceProvider,\n  Color,\n  DrawingStyle,\n  Filter,\n  FormatAdapter,\n  HoverState,\n  LifecycleEvents,\n  ParseResult,\n  PresentUser,\n  Purpose,\n  Selection,\n  SelectionState,\n  Store,\n  StoreChangeEvent,\n  StoreObserver,\n  User,\n  W3CAnnotation,\n  W3CAnnotationBody,\n  W3CAnnotationTarget\n} from '@annotorious/core';\n\nimport {\n  createAnonymousGuest as _createAnonymousGuest, \n  createBody as _createBody,\n  defaultColorProvider as _defaultColorProvider,\n  Origin as _Origin,\n  PointerSelectAction as _PointerSelectAction\n} from '@annotorious/core';\n\nexport { _createAnonymousGuest as createAnonymousGuest };\nexport { _createBody as createBody };\nexport { _defaultColorProvider as defaultColorProvider };\nexport { _Origin as Origin };\nexport { _PointerSelectAction as PointerSelectAction };\n\n// Essential re-exports from @annotorious/annotorious \nexport type {\n  AnnotoriousOpts,\n  DrawingMode,\n  DrawingTool,\n  ImageAnnotator as AnnotoriousImageAnnotator,\n  ImageAnnotation,\n  ImageAnnotator,\n  ImageAnnotatorState,\n  Polygon,\n  PolygonGeometry,\n  Rectangle,\n  RectangleGeometry,\n  Shape\n} from '@annotorious/annotorious';\n\nimport {   \n  createImageAnnotator as _createImageAnnotator,\n  ShapeType as _ShapeType,\n  W3CImageFormat as _W3CImageFormat\n} from '@annotorious/annotorious';\n\nexport const createImageAnnotator = _createImageAnnotator;\nexport const ShapeType = _ShapeType;\nexport const W3CImageFormat = _W3CImageFormat;\n\n// Essential re-exports from @annotorious/openseadragon \nexport type {\n  OpenSeadragonAnnotator as AnnotoriousOpenSeadragonAnnotator\n} from '@annotorious/openseadragon';\n\nexport type { Viewer } from 'openseadragon';\n"],"names":["createImageAnnotator","_createImageAnnotator","ShapeType","_ShapeType","W3CImageFormat","_W3CImageFormat"],"mappings":";;;;;;;;;;;AA4EO,MAAMA,IAAuBC,GACvBC,IAAYC,GACZC,IAAiBC;"}

package/dist/annotorious-react.es10.js

@@ -1,18 +1,18 @@
-import { jsx as v } from "./annotorious-react.es12.js";
-import { useRef as w, useState as d, useEffect as c } from "react";
-import { Draggable as S } from "./annotorious-react.es4.js";
-import { useViewer as x } from "./annotorious-react.es9.js";
-import { useSelection as D } from "./annotorious-react.es2.js";
-import { setPosition as I } from "./annotorious-react.es17.js";
-const q = (u) => {
-  const n = w(null), o = x(), { selected: t } = D(), [l, f] = d([]), [s, i] = d(!1), m = () => i(!0), p = () => {
+import { j as v } from "./annotorious-react.es12.js";
+import { useRef as w, useState as d, useEffect as u } from "react";
+import { Draggable as x } from "./annotorious-react.es4.js";
+import { useViewer as S } from "./annotorious-react.es9.js";
+import { useSelection as j } from "./annotorious-react.es2.js";
+import { setPosition as D } from "./annotorious-react.es16.js";
+const R = (c) => {
+  const n = w(null), o = S(), { selected: t } = j(), [l, m] = d([]), [s, i] = d(!1), f = () => i(!0), p = () => {
     const e = t[0].annotation;
-    I(o, e, n.current);
+    D(o, e, n.current);
   }, g = (e, r) => e.every((a) => r.includes(a)) && r.every((a) => e.includes(a));
-  return c(() => {
+  return u(() => {
     const e = t.map(({ annotation: r }) => r.id);
-    g(l, e) || (i(!1), f(e));
-  }, [t]), c(() => {
+    g(l, e) || (i(!1), m(e));
+  }, [t]), u(() => {
     if (!n.current)
       return;
     s || p();
@@ -22,18 +22,18 @@ const q = (u) => {
     return o.addHandler("update-viewport", e), () => {
       o.removeHandler("update-viewport", e);
     };
-  }, [t, s]), t.length > 0 ? /* @__PURE__ */ v(
-    S,
+  }, [t, s]), t.length > 0 ? /* @__PURE__ */ v.jsx(
+    x,
     {
       ref: n,
       className: "a9s-popup a9s-osd-popup",
-      onDragStart: m,
-      children: u.popup({ viewer: o, selected: t })
+      onDragStart: f,
+      children: c.popup({ viewer: o, selected: t })
     },
     t.map(({ annotation: e }) => e.id).join("-")
   ) : null;
 };
 export {
-  q as OpenSeadragonPopup
+  R as OpenSeadragonPopup
 };
 //# 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/OpenSeadragonPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport { ImageAnnotation } from '@annotorious/annotorious';\nimport OpenSeadragon from 'openseadragon';\nimport { AnnotoriousPopupProps, Draggable } from '../AnnotoriousPopup';\nimport { useViewer } from './OpenSeadragonAnnotator';\nimport { useSelection } from '../Annotorious';\nimport { setPosition } from './setPosition';\n\nexport type OpenSeadragonPopupProps = AnnotoriousPopupProps & {\n\n  viewer: OpenSeadragon.Viewer\n\n}\n\nexport type OpenSeadragonPopupContainerProps = {\n\n  popup(props: OpenSeadragonPopupProps): ReactNode\n\n}\n\nexport const OpenSeadragonPopup = (props: OpenSeadragonPopupContainerProps) => {\n\n  const el = useRef<HTMLDivElement>(null);\n\n  const viewer = useViewer();\n\n  const { selected } = useSelection<ImageAnnotation>();\n\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n  const [dragged, setDragged] = useState(false);\n\n  const onDragStart = () => setDragged(true);\n\n  const updatePosition = () => {\n    // Note: this popup only supports a single selection\n    const annotation = selected[0].annotation;\n    setPosition(viewer, annotation, el.current);\n  }\n\n  const equal = (a: string[], b: string[]) => \n    a.every(str => b.includes(str)) && b.every(str => a.includes(str));\n\n  useEffect(() => {\n    // Reset drag flag if selected IDs have changed\n    const nextIds = selected.map(({ annotation }) => annotation.id);\n\n    if (!equal(selectedIds, nextIds)) {\n      setDragged(false);\n      setSelectedIds(nextIds);\n    }\n  }, [selected]);\n\n  useEffect(() => {\n    if (!el.current) return;\n\n    if (!dragged) updatePosition();\n\n    const onUpdateViewport = () => {\n      if (!dragged) updatePosition();\n    }\n\n    viewer.addHandler('update-viewport', onUpdateViewport);\n\n    return () => {\n      viewer.removeHandler('update-viewport', onUpdateViewport);\n    }\n  }, [selected, dragged]);\n  \n  return selected.length > 0 ? (\n    <Draggable \n      ref={el} \n      key={selected.map(({ annotation }) => annotation.id).join('-')} \n      className=\"a9s-popup a9s-osd-popup\" \n      onDragStart={onDragStart}>\n\n      {props.popup({ viewer, selected })}\n      \n    </Draggable>\n  ) : null;\n\n}"],"names":["OpenSeadragonPopup","props","el","useRef","viewer","useViewer","selected","useSelection","selectedIds","setSelectedIds","useState","dragged","setDragged","onDragStart","updatePosition","annotation","setPosition","equal","a","b","str","useEffect","nextIds","onUpdateViewport","jsx","Draggable"],"mappings":";;;;;;AAoBa,MAAAA,IAAqB,CAACC,MAA4C;AAEvE,QAAAC,IAAKC,EAAuB,IAAI,GAEhCC,IAASC,KAET,EAAE,UAAAC,MAAaC,KAEf,CAACC,GAAaC,CAAc,IAAIC,EAAmB,CAAE,CAAA,GAErD,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtCG,IAAc,MAAMD,EAAW,EAAI,GAEnCE,IAAiB,MAAM;AAErB,UAAAC,IAAaT,EAAS,CAAC,EAAE;AACnB,IAAAU,EAAAZ,GAAQW,GAAYb,EAAG,OAAO;AAAA,EAAA,GAGtCe,IAAQ,CAACC,GAAaC,MAC1BD,EAAE,MAAM,OAAOC,EAAE,SAASC,CAAG,CAAC,KAAKD,EAAE,MAAM,OAAOD,EAAE,SAASE,CAAG,CAAC;AAEnE,SAAAC,EAAU,MAAM;AAER,UAAAC,IAAUhB,EAAS,IAAI,CAAC,EAAE,YAAAS,QAAiBA,EAAW,EAAE;AAE9D,IAAKE,EAAMT,GAAac,CAAO,MAC7BV,EAAW,EAAK,GAChBH,EAAea,CAAO;AAAA,EACxB,GACC,CAAChB,CAAQ,CAAC,GAEbe,EAAU,MAAM;AACd,QAAI,CAACnB,EAAG;AAAS;AAEjB,IAAKS,KAAwBG;AAE7B,UAAMS,IAAmB,MAAM;AAC7B,MAAKZ,KAAwBG;IAAA;AAGxB,WAAAV,EAAA,WAAW,mBAAmBmB,CAAgB,GAE9C,MAAM;AACJ,MAAAnB,EAAA,cAAc,mBAAmBmB,CAAgB;AAAA,IAAA;AAAA,EAC1D,GACC,CAACjB,GAAUK,CAAO,CAAC,GAEfL,EAAS,SAAS,IACvB,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKvB;AAAA,MAEL,WAAU;AAAA,MACV,aAAAW;AAAA,MAEC,UAAMZ,EAAA,MAAM,EAAE,QAAAG,GAAQ,UAAAE,GAAU;AAAA,IAAA;AAAA,IAJ5BA,EAAS,IAAI,CAAC,EAAE,YAAAS,EAAA,MAAiBA,EAAW,EAAE,EAAE,KAAK,GAAG;AAAA,EAO7D,IAAA;AAEN;"}
+{"version":3,"file":"annotorious-react.es10.js","sources":["../src/openseadragon/OpenSeadragonPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport { ImageAnnotation } from '@annotorious/annotorious';\nimport OpenSeadragon from 'openseadragon';\nimport { AnnotoriousPopupProps, Draggable } from '../AnnotoriousPopup';\nimport { useViewer } from './OpenSeadragonAnnotator';\nimport { useSelection } from '../Annotorious';\nimport { setPosition } from './setPosition';\n\nexport type OpenSeadragonPopupProps = AnnotoriousPopupProps & {\n\n  viewer: OpenSeadragon.Viewer\n\n}\n\nexport type OpenSeadragonPopupContainerProps = {\n\n  popup(props: OpenSeadragonPopupProps): ReactNode\n\n}\n\nexport const OpenSeadragonPopup = (props: OpenSeadragonPopupContainerProps) => {\n\n  const el = useRef<HTMLDivElement>(null);\n\n  const viewer = useViewer();\n\n  const { selected } = useSelection<ImageAnnotation>();\n\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n  const [dragged, setDragged] = useState(false);\n\n  const onDragStart = () => setDragged(true);\n\n  const updatePosition = () => {\n    // Note: this popup only supports a single selection\n    const annotation = selected[0].annotation;\n    setPosition(viewer, annotation, el.current);\n  }\n\n  const equal = (a: string[], b: string[]) => \n    a.every(str => b.includes(str)) && b.every(str => a.includes(str));\n\n  useEffect(() => {\n    // Reset drag flag if selected IDs have changed\n    const nextIds = selected.map(({ annotation }) => annotation.id);\n\n    if (!equal(selectedIds, nextIds)) {\n      setDragged(false);\n      setSelectedIds(nextIds);\n    }\n  }, [selected]);\n\n  useEffect(() => {\n    if (!el.current) return;\n\n    if (!dragged) updatePosition();\n\n    const onUpdateViewport = () => {\n      if (!dragged) updatePosition();\n    }\n\n    viewer.addHandler('update-viewport', onUpdateViewport);\n\n    return () => {\n      viewer.removeHandler('update-viewport', onUpdateViewport);\n    }\n  }, [selected, dragged]);\n  \n  return selected.length > 0 ? (\n    <Draggable \n      ref={el} \n      key={selected.map(({ annotation }) => annotation.id).join('-')} \n      className=\"a9s-popup a9s-osd-popup\" \n      onDragStart={onDragStart}>\n\n      {props.popup({ viewer, selected })}\n      \n    </Draggable>\n  ) : null;\n\n}"],"names":["OpenSeadragonPopup","props","el","useRef","viewer","useViewer","selected","useSelection","selectedIds","setSelectedIds","useState","dragged","setDragged","onDragStart","updatePosition","annotation","setPosition","equal","a","b","str","useEffect","nextIds","onUpdateViewport","jsx","Draggable"],"mappings":";;;;;;AAoBa,MAAAA,IAAqB,CAACC,MAA4C;AAEvE,QAAAC,IAAKC,EAAuB,IAAI,GAEhCC,IAASC,KAET,EAAE,UAAAC,MAAaC,KAEf,CAACC,GAAaC,CAAc,IAAIC,EAAmB,CAAE,CAAA,GAErD,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtCG,IAAc,MAAMD,EAAW,EAAI,GAEnCE,IAAiB,MAAM;AAErB,UAAAC,IAAaT,EAAS,CAAC,EAAE;AACnB,IAAAU,EAAAZ,GAAQW,GAAYb,EAAG,OAAO;AAAA,EAAA,GAGtCe,IAAQ,CAACC,GAAaC,MAC1BD,EAAE,MAAM,OAAOC,EAAE,SAASC,CAAG,CAAC,KAAKD,EAAE,MAAM,OAAOD,EAAE,SAASE,CAAG,CAAC;AAEnE,SAAAC,EAAU,MAAM;AAER,UAAAC,IAAUhB,EAAS,IAAI,CAAC,EAAE,YAAAS,QAAiBA,EAAW,EAAE;AAE9D,IAAKE,EAAMT,GAAac,CAAO,MAC7BV,EAAW,EAAK,GAChBH,EAAea,CAAO;AAAA,EACxB,GACC,CAAChB,CAAQ,CAAC,GAEbe,EAAU,MAAM;AACd,QAAI,CAACnB,EAAG;AAAS;AAEjB,IAAKS,KAAwBG;AAE7B,UAAMS,IAAmB,MAAM;AAC7B,MAAKZ,KAAwBG;IAAA;AAGxB,WAAAV,EAAA,WAAW,mBAAmBmB,CAAgB,GAE9C,MAAM;AACJ,MAAAnB,EAAA,cAAc,mBAAmBmB,CAAgB;AAAA,IAAA;AAAA,EAC1D,GACC,CAACjB,GAAUK,CAAO,CAAC,GAEfL,EAAS,SAAS,IACvBkB,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKvB;AAAA,MAEL,WAAU;AAAA,MACV,aAAAW;AAAA,MAEC,UAAMZ,EAAA,MAAM,EAAE,QAAAG,GAAQ,UAAAE,GAAU;AAAA,IAAA;AAAA,IAJ5BA,EAAS,IAAI,CAAC,EAAE,YAAAS,EAAA,MAAiBA,EAAW,EAAE,EAAE,KAAK,GAAG;AAAA,EAO7D,IAAA;AAEN;"}

package/dist/annotorious-react.es11.js

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

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, 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  useEffect(() => {    \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        v.destroy();\n\n        if (setViewer) \n          setViewer(undefined);\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","useEffect","v","OpenSeadragon","useImperativeHandle","jsx"],"mappings":";;;;AAYO,MAAMA,IAAsBC,EAA2D,CAACC,GAAiCC,MAAQ;AAEhI,QAAA,EAAE,WAAAC,GAAW,SAAAC,EAAY,IAAAH,GAEzBI,IAAUC,EAAuB,IAAI,GAErC,EAAE,QAAAC,GAAQ,WAAAC,EAAU,IAAIC,EAAWC,CAA6B;AAEtE,SAAAC,EAAU,MAAM;AACd,QAAIN,EAAQ,SAAS;AACb,YAAAO,IAAIC,EAAc,EAAC,GAAGT,GAAS,SAASC,EAAQ,SAAS;AAI3D,aAAAG,KACFA,EAAUI,CAAC,GAEN,MAAM;AACX,QAAAA,EAAE,QAAQ,GAENJ,KACFA,EAAU,MAAS;AAAA,MAAA;AAAA,IAEzB;AAAA,KACC,CAAC,KAAK,UAAUJ,CAAO,CAAC,CAAC,GAERU,EAAAZ,GAAK,MAAMK,CAAM,GAGlC,gBAAAQ,EAAA,OAAA,EAAI,WAAAZ,GAAsB,KAAKE,EAAS,CAAA;AAG7C,CAAC;"}
+{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useImperativeHandle, 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  useEffect(() => {    \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        v.destroy();\n\n        if (setViewer) \n          setViewer(undefined);\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","useEffect","v","OpenSeadragon","useImperativeHandle","jsx"],"mappings":";;;;AAYO,MAAMA,IAAsBC,EAA2D,CAACC,GAAiCC,MAAQ;AAEhI,QAAA,EAAE,WAAAC,GAAW,SAAAC,EAAY,IAAAH,GAEzBI,IAAUC,EAAuB,IAAI,GAErC,EAAE,QAAAC,GAAQ,WAAAC,EAAU,IAAIC,EAAWC,CAA6B;AAEtE,SAAAC,EAAU,MAAM;AACd,QAAIN,EAAQ,SAAS;AACb,YAAAO,IAAIC,EAAc,EAAC,GAAGT,GAAS,SAASC,EAAQ,SAAS;AAI3D,aAAAG,KACFA,EAAUI,CAAC,GAEN,MAAM;AACX,QAAAA,EAAE,QAAQ,GAENJ,KACFA,EAAU,MAAS;AAAA,MAAA;AAAA,IAEzB;AAAA,KACC,CAAC,KAAK,UAAUJ,CAAO,CAAC,CAAC,GAERU,EAAAZ,GAAK,MAAMK,CAAM,GAGlCQ,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAAZ,GAAsB,KAAKE,EAAS,CAAA;AAG7C,CAAC;"}

package/dist/annotorious-react.es12.js

@@ -1,7 +1,9 @@
-import { j as t } from "./annotorious-react.es15.js";
-const o = t.Fragment, r = t.jsx;
+import { __module as e } from "./annotorious-react.es17.js";
+import { __require as r } from "./annotorious-react.es18.js";
+import { __require as o } from "./annotorious-react.es19.js";
+process.env.NODE_ENV === "production" ? e.exports = o() : e.exports = r();
+var m = e.exports;
 export {
-  o as Fragment,
-  r as jsx
+  m as j
 };
 //# sourceMappingURL=annotorious-react.es12.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"annotorious-react.es12.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"annotorious-react.es12.js","sources":["../../../node_modules/react/jsx-runtime.js"],"sourcesContent":["'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-jsx-runtime.production.min.js');\n} else {\n  module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n"],"names":["jsxRuntimeModule","require$$1","require$$0"],"mappings":";;;AAEI,QAAQ,IAAI,aAAa,eAC3BA,EAAA,UAAiBC,MAEjBD,EAAA,UAAiBE;;","x_google_ignoreList":[0]}