@annotorious/react 3.7.11 → 3.7.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ImageAnnotator.d.ts +4 -4
- package/dist/ImageAnnotator.d.ts.map +1 -1
- package/dist/annotorious-react.es11.js.map +1 -1
- package/dist/annotorious-react.es5.js.map +1 -1
- package/dist/annotorious-react.es8.js +23 -19
- package/dist/annotorious-react.es8.js.map +1 -1
- package/dist/annotorious-react.es9.js +61 -55
- package/dist/annotorious-react.es9.js.map +1 -1
- package/dist/openseadragon/OpenSeadragonAnnotationPopup.d.ts.map +1 -1
- package/dist/openseadragon/OpenSeadragonAnnotator.d.ts +1 -0
- package/dist/openseadragon/OpenSeadragonAnnotator.d.ts.map +1 -1
- package/package.json +10 -11
- package/dist/state/AnnotoriousZustand.d.ts +0 -23
- package/dist/state/AnnotoriousZustand.d.ts.map +0 -1
package/dist/ImageAnnotator.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { AnnotoriousOpts, DrawingTool, Filter, ImageAnnotation } from '@annotorious/annotorious';
|
|
3
|
-
export interface ImageAnnotatorProps<E extends unknown> extends AnnotoriousOpts<ImageAnnotation, E> {
|
|
2
|
+
import { AnnotoriousOpts, Annotation, DrawingTool, Filter, ImageAnnotation } from '@annotorious/annotorious';
|
|
3
|
+
export interface ImageAnnotatorProps<I extends Annotation, E extends unknown> extends AnnotoriousOpts<ImageAnnotation, E> {
|
|
4
4
|
children: ReactElement<HTMLImageElement>;
|
|
5
5
|
containerClassName?: string;
|
|
6
|
-
filter?: Filter<
|
|
6
|
+
filter?: Filter<I>;
|
|
7
7
|
tool?: DrawingTool;
|
|
8
8
|
}
|
|
9
|
-
export declare const ImageAnnotator: <E extends unknown>(props: ImageAnnotatorProps<E>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const ImageAnnotator: <I extends Annotation, E extends unknown>(props: ImageAnnotatorProps<I, E>) => import("react/jsx-runtime").JSX.Element;
|
|
10
10
|
//# sourceMappingURL=ImageAnnotator.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageAnnotator.d.ts","sourceRoot":"","sources":["../src/ImageAnnotator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAuC,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,eAAe,EAAwB,MAAM,0BAA0B,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"ImageAnnotator.d.ts","sourceRoot":"","sources":["../src/ImageAnnotator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,YAAY,EAAuC,MAAM,OAAO,CAAC;AACpF,OAAO,EAAE,eAAe,EAAwB,MAAM,0BAA0B,CAAC;AACjF,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAGjG,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,OAAO,CAAE,SAAQ,eAAe,CAAC,eAAe,EAAE,CAAC,CAAC;IAEvH,QAAQ,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAEzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAEnB,IAAI,CAAC,EAAE,WAAW,CAAC;CAEpB;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,OAAO,EAAE,OAAO,mBAAmB,CAAC,CAAC,EAAE,CAAC,CAAC,4CA4CvG,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { dequal } from 'dequal/lite';\nimport { OpenSeadragonAnnotatorContext } from './OpenSeadragonAnnotator';\n\nexport interface OpenSeadragonViewerProps {\n\n className?: string;\n\n options: OpenSeadragon.Options;\n\n}\n\n/**\n * If the only thing that changes about the options are the tileSources, \n * there's no need to destroy and re-create the viewer, which can introduce\n * dangerous race conditions and break interop with plugins. (Changing \n * tileSources is probably the main use case by far.)\n */\nconst onlyTileSourcesChanged = (prev: OpenSeadragon.Options | undefined, next: OpenSeadragon.Options): boolean => {\n if (!prev) return false;\n\n const { tileSources: prevTiles, ...prevRest } = prev;\n const { tileSources: nextTiles, ...nextRest } = next;\n\n const tileSourcesChanged = !dequal(prevTiles, nextTiles);\n const otherOptionsChanged = !dequal(prevRest, nextRest);\n\n return tileSourcesChanged && !otherOptionsChanged;\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 const viewerRef = useRef<OpenSeadragon.Viewer | undefined>(null);\n const prevOptionsRef = useRef<OpenSeadragon.Options>(null);\n\n const { viewer, setViewer } = useContext(OpenSeadragonAnnotatorContext);\n\n // Init and destroy the OSD viewer on mount/unmount\n useLayoutEffect(() => { \n if (element.current && !viewerRef.current) {\n const v = OpenSeadragon({...options, element: element.current });\n viewerRef.current = v;\n prevOptionsRef.current = options;\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 viewerRef.current = undefined;\n }\n }\n }, []);\n\n useLayoutEffect(() => { \n const v = viewerRef.current;\n const prev = prevOptionsRef.current;\n if (!v || !prev) return; \n\n if (onlyTileSourcesChanged(prev, options)) { \n const tileSources
|
|
1
|
+
{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { dequal } from 'dequal/lite';\nimport { OpenSeadragonAnnotatorContext } from './OpenSeadragonAnnotator';\n\nexport interface OpenSeadragonViewerProps {\n\n className?: string;\n\n options: OpenSeadragon.Options;\n\n}\n\n/**\n * If the only thing that changes about the options are the tileSources, \n * there's no need to destroy and re-create the viewer, which can introduce\n * dangerous race conditions and break interop with plugins. (Changing \n * tileSources is probably the main use case by far.)\n */\nconst onlyTileSourcesChanged = (prev: OpenSeadragon.Options | undefined, next: OpenSeadragon.Options): boolean => {\n if (!prev) return false;\n\n const { tileSources: prevTiles, ...prevRest } = prev;\n const { tileSources: nextTiles, ...nextRest } = next;\n\n const tileSourcesChanged = !dequal(prevTiles, nextTiles);\n const otherOptionsChanged = !dequal(prevRest, nextRest);\n\n return tileSourcesChanged && !otherOptionsChanged;\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 const viewerRef = useRef<OpenSeadragon.Viewer | undefined>(null);\n const prevOptionsRef = useRef<OpenSeadragon.Options>(null);\n\n const { viewer, setViewer } = useContext(OpenSeadragonAnnotatorContext);\n\n // Init and destroy the OSD viewer on mount/unmount\n useLayoutEffect(() => { \n if (element.current && !viewerRef.current) {\n const v = OpenSeadragon({...options, element: element.current });\n viewerRef.current = v;\n prevOptionsRef.current = options;\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 viewerRef.current = undefined;\n }\n }\n }, []);\n\n useLayoutEffect(() => { \n const v = viewerRef.current;\n const prev = prevOptionsRef.current;\n if (!v || !prev) return; \n\n if (onlyTileSourcesChanged(prev, options)) { \n const tileSources = \n Array.isArray(options.tileSources) ? options.tileSources : [options.tileSources];\n \n v.world.removeAll();\n\n tileSources.forEach((tileSource, index) => {\n const tileConfig = (typeof tileSource === 'object') && 'tileSource' in tileSource\n // Special case: handling nested notation\n // https://github.com/openseadragon/openseadragon/issues/2659#issuecomment-2583944426\n ? tileSource : { tileSource }\n \n v.addTiledImage({\n ...tileConfig,\n index,\n success: () => {\n if (index === 0) {\n v.viewport.goHome();\n }\n }\n } as OpenSeadragon.TiledImageOptions);\n });\n\n prevOptionsRef.current = options;\n } else if (!dequal(prev, options)) {\n console.warn('Forced re-creation of OpenSeadragon viewer. Beware of race conditions!');\n \n if (setViewer)\n setViewer(undefined);\n \n v.destroy();\n\n if (element.current) {\n const newViewer = OpenSeadragon({...options, element: element.current });\n viewerRef.current = newViewer;\n prevOptionsRef.current = options;\n\n if (setViewer)\n setViewer(newViewer);\n }\n }\n }, [options]);\n\n useImperativeHandle(ref, () => viewer);\n\n return (\n <div className={className} ref={element} />\n );\n\n});"],"names":["onlyTileSourcesChanged","prev","next","prevTiles","prevRest","nextTiles","nextRest","tileSourcesChanged","dequal","otherOptionsChanged","OpenSeadragonViewer","forwardRef","props","ref","className","options","element","useRef","viewerRef","prevOptionsRef","viewer","setViewer","useContext","OpenSeadragonAnnotatorContext","useLayoutEffect","v","OpenSeadragon","tileSources","tileSource","index","tileConfig","newViewer","useImperativeHandle","jsx"],"mappings":";;;;;AAmBA,MAAMA,IAAyB,CAACC,GAAyCC,MAAyC;AAC9G,MAAI,CAACD,EAAM,QAAO;AAElB,QAAM,EAAE,aAAaE,GAAW,GAAGC,MAAaH,GAC1C,EAAE,aAAaI,GAAW,GAAGC,MAAaJ,GAE1CK,IAAqB,CAACC,EAAOL,GAAWE,CAAS,GACjDI,IAAsB,CAACD,EAAOJ,GAAUE,CAAQ;AAEtD,SAAOC,KAAsB,CAACE;AAChC,GAEWC,IAAsBC,EAA2D,CAACC,GAAiCC,MAAQ;AAEtI,QAAM,EAAE,WAAAC,GAAW,SAAAC,EAAA,IAAYH,GAEzBI,IAAUC,EAAuB,IAAI,GACrCC,IAAYD,EAAyC,IAAI,GACzDE,IAAiBF,EAA8B,IAAI,GAEnD,EAAE,QAAAG,GAAQ,WAAAC,MAAcC,EAAWC,CAA6B;AAGtE,SAAAC,EAAgB,MAAM;AACpB,QAAIR,EAAQ,WAAW,CAACE,EAAU,SAAS;AACzC,YAAMO,IAAIC,EAAc,EAAC,GAAGX,GAAS,SAASC,EAAQ,SAAS;AAC/D,aAAAE,EAAU,UAAUO,GACpBN,EAAe,UAAUJ,GAIrBM,KACFA,EAAUI,CAAC,GAEN,MAAM;AACX,QAAIJ,KACFA,EAAU,MAAS,GAErBI,EAAE,QAAA,GACFP,EAAU,UAAU;AAAA,MACtB;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE,GAELM,EAAgB,MAAM;AACpB,UAAMC,IAAIP,EAAU,SACdjB,IAAOkB,EAAe;AAC5B,QAAI,GAACM,KAAK,CAACxB;AAEX,UAAID,EAAuBC,GAAMc,CAAO,GAAG;AACzC,cAAMY,IACJ,MAAM,QAAQZ,EAAQ,WAAW,IAAIA,EAAQ,cAAc,CAACA,EAAQ,WAAW;AAEjF,QAAAU,EAAE,MAAM,UAAA,GAERE,EAAY,QAAQ,CAACC,GAAYC,MAAU;AACzC,gBAAMC,IAAc,OAAOF,KAAe,YAAa,gBAAgBA,IAGnEA,IAAa,EAAE,YAAAA,EAAA;AAEnB,UAAAH,EAAE,cAAc;AAAA,YACd,GAAGK;AAAA,YACH,OAAAD;AAAA,YACA,SAAS,MAAM;AACb,cAAIA,MAAU,KACZJ,EAAE,SAAS,OAAA;AAAA,YAEf;AAAA,UAAA,CACkC;AAAA,QACtC,CAAC,GAEDN,EAAe,UAAUJ;AAAA,MAC3B,WAAW,CAACP,EAAOP,GAAMc,CAAO,MAC9B,QAAQ,KAAK,wEAAwE,GAEjFM,KACFA,EAAU,MAAS,GAErBI,EAAE,QAAA,GAEET,EAAQ,UAAS;AACnB,cAAMe,IAAYL,EAAc,EAAC,GAAGX,GAAS,SAASC,EAAQ,SAAS;AACvE,QAAAE,EAAU,UAAUa,GACpBZ,EAAe,UAAUJ,GAErBM,KACFA,EAAUU,CAAS;AAAA,MACvB;AAAA;AAAA,EAEJ,GAAG,CAAChB,CAAO,CAAC,GAEZiB,EAAoBnB,GAAK,MAAMO,CAAM,GAGnC,gBAAAa,EAAC,OAAA,EAAI,WAAAnB,GAAsB,KAAKE,EAAA,CAAS;AAG7C,CAAC;"}
|
|
@@ -1 +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<
|
|
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 { Annotation, DrawingTool, Filter, ImageAnnotation } from '@annotorious/annotorious';\nimport { AnnotoriousContext } from './Annotorious';\n\nexport interface ImageAnnotatorProps<I extends Annotation, E extends unknown> extends AnnotoriousOpts<ImageAnnotation, E> {\n\n children: ReactElement<HTMLImageElement>;\n\n containerClassName?: string;\n\n filter?: Filter<I>;\n\n tool?: DrawingTool;\n\n}\n\nexport const ImageAnnotator = <I extends Annotation, E extends unknown>(props: ImageAnnotatorProps<I, 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":";;;;AAiBO,MAAMA,IAAiB,CAA0CC,MAAqC;AAE3G,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASH,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,IACd;AAAA,EACF;AAEA,SAAAE,EAAU,MAAM;AACd,IAAI,CAACT,KAAQ,CAACN,EAAM,uBACpBM,EAAK,QAAQ,YAAYN,EAAM;AAAA,EACjC,GAAG,CAACA,EAAM,oBAAoBM,CAAI,CAAC,GAEnCS,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,kBAAkBN,EAAM,cAAc;AAAA,EACvD,GAAG,CAACA,EAAM,cAAc,CAAC,GAEzBe,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,UAAUN,EAAM,MAAM;AAAA,EACvC,GAAG,CAACA,EAAM,MAAM,CAAC,GAEjBe,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,SAASN,EAAM,KAAK;AAAA,EACrC,GAAG,CAACA,EAAM,KAAK,CAAC,GAEhBe,EAAU,MAAM;AACd,IAAIb,KAAQI,KAAMA,EAAK,eAAeN,EAAM,IAAI;AAAA,EAClD,GAAG,CAACE,GAAMI,CAAI,CAAC,GAEfS,EAAU,MAAM;AACd,IAAIT,KAAMA,EAAK,oBAAoBN,EAAM,gBAAgB;AAAA,EAC3D,GAAG,CAACA,EAAM,gBAAgB,CAAC,0BAEjB,UAAAgB,EAAaZ,GAAO,EAAE,QAAAM,EAAA,CAAsC,GAAE;AAE1E;"}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { createAnonymousGuest as
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as A, createContext as S, useState as w, useContext as c, useImperativeHandle as g, useEffect as n } from "react";
|
|
3
|
+
import { createAnonymousGuest as h } from "@annotorious/core";
|
|
4
4
|
import { createOSDAnnotator as x } from "@annotorious/openseadragon";
|
|
5
|
-
import { AnnotoriousContext as
|
|
6
|
-
const s =
|
|
7
|
-
const { children: v, tool: o, ...
|
|
8
|
-
return
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
import { AnnotoriousContext as y } from "./annotorious-react.es2.js";
|
|
6
|
+
const s = S({ viewer: null, setViewer: null }), O = A((t, f) => {
|
|
7
|
+
const { children: v, tool: o, ...d } = t, [i, u] = w(), { anno: e, setAnno: l } = c(y);
|
|
8
|
+
return g(f, () => e, [e]), n(() => {
|
|
9
|
+
var a;
|
|
10
|
+
if (i != null && i.element)
|
|
11
|
+
try {
|
|
12
|
+
const r = x(i, d);
|
|
13
|
+
return l(r), () => {
|
|
14
|
+
r.destroy(), l(void 0);
|
|
15
|
+
};
|
|
16
|
+
} catch (r) {
|
|
17
|
+
(a = t.onInitError) == null || a.call(t, r);
|
|
18
|
+
}
|
|
15
19
|
}, [i]), n(() => {
|
|
16
20
|
e && e.setDrawingEnabled(t.drawingEnabled);
|
|
17
21
|
}, [e, t.drawingEnabled]), n(() => {
|
|
@@ -25,17 +29,17 @@ const s = A({ viewer: null, setViewer: null }), D = m((t, c) => {
|
|
|
25
29
|
}, [e, o]), n(() => {
|
|
26
30
|
e && e.setModalSelect(t.modalSelect);
|
|
27
31
|
}, [e, t.modalSelect]), n(() => {
|
|
28
|
-
e && (t.user ? e.setUser(t.user) : e.setUser(
|
|
32
|
+
e && (t.user ? e.setUser(t.user) : e.setUser(h()));
|
|
29
33
|
}, [e, t.user]), n(() => {
|
|
30
34
|
e && e.setUserSelectAction(t.userSelectAction);
|
|
31
|
-
}, [e, t.userSelectAction]), /* @__PURE__ */
|
|
32
|
-
}),
|
|
33
|
-
const { viewer: t } =
|
|
35
|
+
}, [e, t.userSelectAction]), /* @__PURE__ */ m(s.Provider, { value: { viewer: i, setViewer: u }, children: t.children });
|
|
36
|
+
}), U = () => {
|
|
37
|
+
const { viewer: t } = c(s);
|
|
34
38
|
return t;
|
|
35
39
|
};
|
|
36
40
|
export {
|
|
37
|
-
|
|
41
|
+
O as OpenSeadragonAnnotator,
|
|
38
42
|
s as OpenSeadragonAnnotatorContext,
|
|
39
|
-
|
|
43
|
+
U as useViewer
|
|
40
44
|
};
|
|
41
45
|
//# sourceMappingURL=annotorious-react.es8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotorious-react.es8.js","sources":["../src/openseadragon/OpenSeadragonAnnotator.tsx"],"sourcesContent":["import { \n createContext, \n forwardRef, \n ReactNode, \n useContext, \n useEffect, \n useImperativeHandle, \n useState \n} from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { createAnonymousGuest } from '@annotorious/core';\nimport { AnnotoriousOSDOpts, createOSDAnnotator } from '@annotorious/openseadragon';\nimport { Annotation, 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> = AnnotoriousOSDOpts<I, E> & {\n\n children?: ReactNode;\n\n filter?: Filter<I>;\n\n hideAnnotations?: boolean;\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 AnnotoriousOSDOpts<I, E>);\n
|
|
1
|
+
{"version":3,"file":"annotorious-react.es8.js","sources":["../src/openseadragon/OpenSeadragonAnnotator.tsx"],"sourcesContent":["import { \n createContext, \n forwardRef, \n ReactNode, \n useContext, \n useEffect, \n useImperativeHandle, \n useState \n} from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { createAnonymousGuest } from '@annotorious/core';\nimport { AnnotoriousOSDOpts, createOSDAnnotator } from '@annotorious/openseadragon';\nimport { Annotation, 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> = AnnotoriousOSDOpts<I, E> & {\n\n children?: ReactNode;\n\n filter?: Filter<I>;\n\n hideAnnotations?: boolean;\n\n style?: DrawingStyle | ((annotation: I) => DrawingStyle);\n\n tool?: string | null;\n\n user?: User;\n\n onInitError?(error: Error): void;\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 try {\n const anno = createOSDAnnotator<I, E>(viewer, opts as AnnotoriousOSDOpts<I, E>);\n setAnno(anno);\n\n return () => {\n anno.destroy();\n setAnno(undefined);\n }\n } catch (error) {\n // Typical scenario: hardware acceleration is disabled \n props.onInitError?.(error);\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.setVisible(!props.hideAnnotations);\n }, [anno, props.hideAnnotations]);\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","error","_a","createAnonymousGuest","jsx","useViewer"],"mappings":";;;;;AAgBO,MAAMA,IAAgCC,EAG1C,EAAE,QAAQ,MAAM,WAAW,MAAM,GAoBvBC,IAAyBC,EAAW,CAC/CC,GACAC,MACG;AACH,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASJ,GAE9B,CAACK,GAAQC,CAAS,IAAIC,EAAA,GAEtB,EAAE,MAAAC,GAAM,SAAAC,MAAYC,EAAWC,CAAkB;AAEvD,SAAAC,EAAoBX,GAAK,MAAMO,GAAwD,CAACA,CAAI,CAAC,GAE7FK,EAAU,MAAM;;AACd,QAAIR,KAAA,QAAAA,EAAQ;AACV,UAAI;AACF,cAAMG,IAAOM,EAAyBT,GAAQD,CAAgC;AAC9E,eAAAK,EAAQD,CAAI,GAEL,MAAM;AACXA,UAAAA,EAAK,QAAA,GACLC,EAAQ,MAAS;AAAA,QACnB;AAAA,MACF,SAASM,GAAO;AAEd,SAAAC,IAAAhB,EAAM,gBAAN,QAAAgB,EAAA,KAAAhB,GAAoBe;AAAA,MACtB;AAAA,EAEJ,GAAG,CAACV,CAAM,CAAC,GAEXQ,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,kBAAkBR,EAAM,cAAc;AAAA,EACvD,GAAG,CAACQ,GAAMR,EAAM,cAAc,CAAC,GAE/Ba,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,UAAUR,EAAM,MAAM;AAAA,EACvC,GAAG,CAACQ,GAAMR,EAAM,MAAM,CAAC,GAEvBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,WAAW,CAACR,EAAM,eAAe;AAAA,EAClD,GAAG,CAACQ,GAAMR,EAAM,eAAe,CAAC,GAEhCa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,SAASR,EAAM,KAAK;AAAA,EACrC,GAAG,CAACQ,GAAMR,EAAM,KAAK,CAAC,GAEtBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,eAAeL,KAAQ,WAAW;AAAA,EACnD,GAAG,CAACK,GAAML,CAAI,CAAC,GAEfU,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,eAAeR,EAAM,WAAW;AAAA,EACjD,GAAG,CAACQ,GAAMR,EAAM,WAAW,CAAC,GAE5Ba,EAAU,MAAM;AACd,IAAKL,MAEDR,EAAM,OACRQ,EAAK,QAAQR,EAAM,IAAI,IAEvBQ,EAAK,QAAQS,GAAsB;AAAA,EACvC,GAAG,CAACT,GAAMR,EAAM,IAAI,CAAC,GAErBa,EAAU,MAAM;AACd,IAAIL,KAAMA,EAAK,oBAAoBR,EAAM,gBAAgB;AAAA,EAC3D,GAAG,CAACQ,GAAMR,EAAM,gBAAgB,CAAC,GAG/B,gBAAAkB,EAACtB,EAA8B,UAA9B,EAAuC,OAAO,EAAE,QAAAS,GAAQ,WAAAC,KACtD,UAAAN,EAAM,SAAA,CACT;AAGJ,CAAC,GAIYmB,IAAY,MAAM;AAC7B,QAAM,EAAE,QAAAd,EAAA,IAAWK,EAAWd,CAA6B;AAC3D,SAAOS;AACT;"}
|
|
@@ -1,67 +1,73 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import
|
|
5
|
-
import { useAnnotator as
|
|
1
|
+
import { jsxs as E, jsx as h } from "react/jsx-runtime";
|
|
2
|
+
import { useState as O, useRef as P, useMemo as A, useEffect as L } from "react";
|
|
3
|
+
import { createPortal as D } from "react-dom";
|
|
4
|
+
import f from "openseadragon";
|
|
5
|
+
import { useAnnotator as S, useSelection as b } from "./annotorious-react.es2.js";
|
|
6
6
|
/* empty css */
|
|
7
7
|
/* empty css */
|
|
8
8
|
import "@annotorious/core";
|
|
9
9
|
import "@annotorious/annotorious";
|
|
10
|
-
import { toClientRects as
|
|
11
|
-
import { useFloating as
|
|
12
|
-
import { useViewer as
|
|
13
|
-
import { inline as
|
|
14
|
-
import { autoUpdate as
|
|
15
|
-
import
|
|
16
|
-
const
|
|
17
|
-
const { minX: d, minY: a, maxX:
|
|
10
|
+
import { toClientRects as M } from "./annotorious-react.es15.js";
|
|
11
|
+
import { useFloating as U, FloatingArrow as F } from "./annotorious-react.es14.js";
|
|
12
|
+
import { useViewer as V } from "./annotorious-react.es8.js";
|
|
13
|
+
import { inline as j, offset as z, flip as H, shift as I, arrow as T } from "./annotorious-react.es17.js";
|
|
14
|
+
import { autoUpdate as X } from "./annotorious-react.es16.js";
|
|
15
|
+
import g from "./annotorious-react.es18.js";
|
|
16
|
+
const Y = (t, r) => {
|
|
17
|
+
const { minX: d, minY: a, maxX: n, maxY: m } = r.bounds, { top: s, left: c } = t.element.getBoundingClientRect(), o = t.viewport.imageToViewerElementCoordinates(new f.Point(d, a)), l = t.viewport.imageToViewerElementCoordinates(new f.Point(n, m));
|
|
18
18
|
return new DOMRect(
|
|
19
|
-
o.x +
|
|
19
|
+
o.x + c,
|
|
20
20
|
o.y + s,
|
|
21
21
|
l.x - o.x,
|
|
22
22
|
l.y - o.y
|
|
23
23
|
);
|
|
24
|
-
},
|
|
25
|
-
var
|
|
26
|
-
|
|
24
|
+
}, k = (t) => {
|
|
25
|
+
var r;
|
|
26
|
+
return ((r = t == null ? void 0 : t.target) == null ? void 0 : r.selector) && "geometry" in t.target.selector;
|
|
27
|
+
}, ie = (t) => {
|
|
28
|
+
var u;
|
|
29
|
+
const r = S(), [d, a] = O(!1), n = V(), m = P(null), { selected: s, event: c } = b(), [o, l] = A(() => {
|
|
30
|
+
const e = s[0];
|
|
31
|
+
return k(e == null ? void 0 : e.annotation) ? [e.annotation, e.editable] : [void 0, void 0];
|
|
32
|
+
}, [s]), { refs: p, floatingStyles: w, context: v } = U({
|
|
27
33
|
open: d,
|
|
28
34
|
onOpenChange: a,
|
|
29
|
-
placement:
|
|
35
|
+
placement: t.placement,
|
|
30
36
|
middleware: [
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
37
|
+
j(),
|
|
38
|
+
z(10),
|
|
39
|
+
H({ crossAxis: !0 }),
|
|
40
|
+
I({
|
|
35
41
|
crossAxis: !0,
|
|
36
|
-
boundary:
|
|
42
|
+
boundary: n == null ? void 0 : n.element,
|
|
37
43
|
padding: { right: 5, left: 5, top: 10, bottom: 10 }
|
|
38
44
|
}),
|
|
39
|
-
|
|
45
|
+
T({
|
|
40
46
|
element: m,
|
|
41
|
-
padding: ((
|
|
47
|
+
padding: ((u = t.arrowProps) == null ? void 0 : u.padding) || 5
|
|
42
48
|
})
|
|
43
49
|
],
|
|
44
|
-
whileElementsMounted:
|
|
50
|
+
whileElementsMounted: X
|
|
45
51
|
});
|
|
46
52
|
L(() => {
|
|
47
|
-
if (s.length === 0)
|
|
53
|
+
if (s.length === 0 || !o)
|
|
48
54
|
a(!1);
|
|
49
55
|
else {
|
|
50
56
|
const e = () => {
|
|
51
|
-
if (!
|
|
52
|
-
const i =
|
|
53
|
-
|
|
57
|
+
if (!n.element) return;
|
|
58
|
+
const i = Y(n, o.target.selector.geometry);
|
|
59
|
+
p.setReference({
|
|
54
60
|
getBoundingClientRect: () => i,
|
|
55
|
-
getClientRects: () =>
|
|
61
|
+
getClientRects: () => M(i)
|
|
56
62
|
});
|
|
57
63
|
};
|
|
58
|
-
return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e),
|
|
59
|
-
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e),
|
|
64
|
+
return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), n.addHandler("update-viewport", e), e(), a(!0), () => {
|
|
65
|
+
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), n.removeHandler("update-viewport", e);
|
|
60
66
|
};
|
|
61
67
|
}
|
|
62
|
-
}, [
|
|
63
|
-
const
|
|
64
|
-
const i = e.id ||
|
|
68
|
+
}, [t.popup, s, n]);
|
|
69
|
+
const y = (e) => {
|
|
70
|
+
const i = e.id || g();
|
|
65
71
|
r.state.store.addBody({
|
|
66
72
|
...e,
|
|
67
73
|
id: i,
|
|
@@ -69,46 +75,46 @@ const N = (n, r) => {
|
|
|
69
75
|
created: e.created || /* @__PURE__ */ new Date(),
|
|
70
76
|
creator: r.getUser()
|
|
71
77
|
});
|
|
72
|
-
},
|
|
78
|
+
}, x = (e) => {
|
|
73
79
|
r.state.store.deleteBody({ id: e, annotation: o.id });
|
|
74
|
-
},
|
|
75
|
-
const
|
|
80
|
+
}, R = (e, i) => {
|
|
81
|
+
const B = i.id || g(), C = {
|
|
76
82
|
updated: /* @__PURE__ */ new Date(),
|
|
77
83
|
updatedBy: r.getUser(),
|
|
78
84
|
...i,
|
|
79
|
-
id:
|
|
85
|
+
id: B,
|
|
80
86
|
annotation: o.id
|
|
81
87
|
};
|
|
82
|
-
r.state.store.updateBody(e,
|
|
88
|
+
r.state.store.updateBody(e, C);
|
|
83
89
|
};
|
|
84
|
-
return d && o ?
|
|
85
|
-
/* @__PURE__ */
|
|
90
|
+
return d && o ? D(
|
|
91
|
+
/* @__PURE__ */ E(
|
|
86
92
|
"div",
|
|
87
93
|
{
|
|
88
94
|
className: "a9s-popup a9s-image-popup",
|
|
89
|
-
ref:
|
|
90
|
-
style:
|
|
95
|
+
ref: p.setFloating,
|
|
96
|
+
style: w,
|
|
91
97
|
children: [
|
|
92
|
-
|
|
93
|
-
|
|
98
|
+
t.arrow && /* @__PURE__ */ h(
|
|
99
|
+
F,
|
|
94
100
|
{
|
|
95
101
|
ref: m,
|
|
96
|
-
context:
|
|
97
|
-
...
|
|
102
|
+
context: v,
|
|
103
|
+
...t.arrowProps || {}
|
|
98
104
|
}
|
|
99
105
|
),
|
|
100
|
-
|
|
106
|
+
t.popup({
|
|
101
107
|
annotation: o,
|
|
102
108
|
editable: l,
|
|
103
|
-
event:
|
|
104
|
-
onCreateBody:
|
|
105
|
-
onDeleteBody:
|
|
106
|
-
onUpdateBody:
|
|
109
|
+
event: c,
|
|
110
|
+
onCreateBody: y,
|
|
111
|
+
onDeleteBody: x,
|
|
112
|
+
onUpdateBody: R
|
|
107
113
|
})
|
|
108
114
|
]
|
|
109
115
|
}
|
|
110
116
|
),
|
|
111
|
-
|
|
117
|
+
n.element
|
|
112
118
|
) : null;
|
|
113
119
|
};
|
|
114
120
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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'> & { padding?: number };\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
|
|
1
|
+
{"version":3,"file":"annotorious-react.es9.js","sources":["../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useMemo, 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 { Annotation, 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\n/**\n * Note that the store may hold different types of annotations.\n * Ignore any that the popup cannot handle.\n */\nconst isImageAnnotationLike = (annotation?: Annotation) =>\n annotation?.target?.selector && 'geometry' in annotation.target.selector;\n\ninterface OpenSeadragonAnnotationPopupProps {\n\n arrow?: boolean;\n\n arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'> & { padding?: number };\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, editable]= useMemo(() => {\n const first = selected[0];\n \n if (isImageAnnotationLike(first?.annotation)) {\n return [first.annotation, first.editable];\n } else {\n return [undefined, undefined];\n }\n }, [selected]);\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: props.arrowProps?.padding || 5\n })\n ],\n whileElementsMounted: autoUpdate\n });\n\n useEffect(() => {\n if (selected.length === 0 || !annotation) {\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","isImageAnnotationLike","annotation","_a","OpenSeadragonAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","useViewer","arrowRef","useRef","selected","event","useSelection","editable","useMemo","first","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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AAKxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EASL,kBAAkB,EAClB,SAAS,EACV,MAAM,oBAAoB,CAAC;AAyB5B,UAAU,iCAAiC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,KAAK,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEhF,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAEzC;AAED,eAAO,MAAM,4BAA4B,GAAI,OAAO,iCAAiC,gCAkIpF,CAAA"}
|
|
@@ -14,6 +14,7 @@ export type OpenSeadragonAnnotatorProps<I extends Annotation, E extends unknown>
|
|
|
14
14
|
style?: DrawingStyle | ((annotation: I) => DrawingStyle);
|
|
15
15
|
tool?: string | null;
|
|
16
16
|
user?: User;
|
|
17
|
+
onInitError?(error: Error): void;
|
|
17
18
|
};
|
|
18
19
|
export declare const OpenSeadragonAnnotator: <I extends Annotation, E extends unknown>(props: OpenSeadragonAnnotatorProps<I, E> & {
|
|
19
20
|
ref?: React.ForwardedRef<AnnotoriousOpenSeadragonAnnotator<I, E> | null>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenSeadragonAnnotator.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,aAAa,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAsB,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,0BAA0B,CAAC;AAEjF,OAAO,EAAE,iCAAiC,EAAE,MAAM,GAAG,CAAC;AAEtD,eAAO,MAAM,6BAA6B;YAChC,aAAa,CAAC,MAAM;sBACV,aAAa,CAAC,MAAM,GAAG,IAAI;EACV,CAAC;AAEtC,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,OAAO,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAE5G,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,KAAK,YAAY,CAAC,CAAC;IAEzD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,IAAI,CAAC,EAAE,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"OpenSeadragonAnnotator.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EAKV,MAAM,OAAO,CAAC;AACf,OAAO,aAAa,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,kBAAkB,EAAsB,MAAM,4BAA4B,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,0BAA0B,CAAC;AAEjF,OAAO,EAAE,iCAAiC,EAAE,MAAM,GAAG,CAAC;AAEtD,eAAO,MAAM,6BAA6B;YAChC,aAAa,CAAC,MAAM;sBACV,aAAa,CAAC,MAAM,GAAG,IAAI;EACV,CAAC;AAEtC,MAAM,MAAM,2BAA2B,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,OAAO,IAAI,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAE5G,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAEnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,KAAK,CAAC,EAAE,YAAY,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,KAAK,YAAY,CAAC,CAAC;IAEzD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CAElC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAwE7B,CAAC,CAAC,SAAS,UAAU,EAAE,CAAC,SAAS,OAAO,EAC5C,KAAK,EAAE,2BAA2B,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,iCAAiC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;CAAE,KACpH,KAAK,CAAC,YAAY,CAAC;AAExB,eAAO,MAAM,SAAS,4BAGrB,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@annotorious/react",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.13",
|
|
4
4
|
"description": "Annotorious React bindings",
|
|
5
5
|
"author": "Rainer Simon",
|
|
6
6
|
"license": "BSD-3-Clause",
|
|
@@ -27,17 +27,17 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@types/react": "^19.2.2",
|
|
30
|
-
"@types/react-dom": "^19.2.
|
|
30
|
+
"@types/react-dom": "^19.2.2",
|
|
31
31
|
"@vitejs/plugin-react": "^4.7.0",
|
|
32
32
|
"typescript": "^5.9.3",
|
|
33
|
-
"vite": "^5.4.
|
|
33
|
+
"vite": "^5.4.21",
|
|
34
34
|
"vite-plugin-dts": "^4.5.4",
|
|
35
35
|
"vite-tsconfig-paths": "^5.1.4"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"openseadragon": "
|
|
39
|
-
"react": "16.8.0 || >=17.x || >=18.x || >=19.x",
|
|
40
|
-
"react-dom": "16.8.0 || >=17.x || >=18.x || >=19.x"
|
|
38
|
+
"openseadragon": ">= ^4.0.0 || >= ^5.0.0",
|
|
39
|
+
"react": "^16.8.0 || >= ^17.x || >= ^18.x || >= ^19.x",
|
|
40
|
+
"react-dom": "^16.8.0 || >= ^17.x || >= ^18.x || >= ^19.x"
|
|
41
41
|
},
|
|
42
42
|
"peerDependenciesMeta": {
|
|
43
43
|
"openseadragon": {
|
|
@@ -45,12 +45,11 @@
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@annotorious/annotorious": "3.7.
|
|
49
|
-
"@annotorious/core": "3.7.
|
|
50
|
-
"@annotorious/openseadragon": "3.7.
|
|
48
|
+
"@annotorious/annotorious": "3.7.13",
|
|
49
|
+
"@annotorious/core": "3.7.13",
|
|
50
|
+
"@annotorious/openseadragon": "3.7.13",
|
|
51
51
|
"@floating-ui/react": "^0.27.16",
|
|
52
|
-
"dequal": "^2.0.3"
|
|
53
|
-
"zustand": "^5.0.8"
|
|
52
|
+
"dequal": "^2.0.3"
|
|
54
53
|
},
|
|
55
54
|
"sideEffects": false
|
|
56
55
|
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { StoreObserveOptions } from '@annotorious/core';
|
|
3
|
-
import { Annotation, Annotator, ImageAnnotation, Selection as CoreSelection, Store, User } from '@annotorious/annotorious';
|
|
4
|
-
interface Selection<T extends Annotation = Annotation> extends Omit<CoreSelection, 'selected'> {
|
|
5
|
-
selected: {
|
|
6
|
-
annotation: T;
|
|
7
|
-
editable?: boolean;
|
|
8
|
-
}[];
|
|
9
|
-
}
|
|
10
|
-
export declare const useAnnotator: <T extends unknown = Annotator<any, unknown>>() => T;
|
|
11
|
-
export declare const useAnnotationStore: <T extends unknown = Store<Annotation>>() => T | undefined;
|
|
12
|
-
export declare const useAnnotations: <T extends Annotation = ImageAnnotation>(debounce?: number) => any;
|
|
13
|
-
export declare const useAnnotation: <T extends Annotation = ImageAnnotation>(id: string, options?: Omit<StoreObserveOptions, "annotations">) => T;
|
|
14
|
-
export declare const useAnnotationSelectAction: <I extends Annotation = ImageAnnotation>(id: string) => import('@annotorious/core').UserSelectAction;
|
|
15
|
-
export declare const useSelection: <T extends Annotation = ImageAnnotation>() => Selection<T>;
|
|
16
|
-
export declare const useHover: <T extends Annotation = ImageAnnotation>() => T | undefined;
|
|
17
|
-
export declare const useAnnotatorUser: () => User;
|
|
18
|
-
export declare const useViewportState: <T extends Annotation = ImageAnnotation>(debounce?: number) => any;
|
|
19
|
-
export declare const Annotorious: import('react').ForwardRefExoticComponent<{
|
|
20
|
-
children: ReactNode;
|
|
21
|
-
} & import('react').RefAttributes<Annotator<Annotation, Annotation>>>;
|
|
22
|
-
export {};
|
|
23
|
-
//# sourceMappingURL=AnnotoriousZustand.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AnnotoriousZustand.d.ts","sourceRoot":"","sources":["../../src/state/AnnotoriousZustand.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAA4C,MAAM,OAAO,CAAC;AAExF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,SAAS,IAAI,aAAa,EAC1B,KAAK,EAEL,IAAI,EACL,MAAM,0BAA0B,CAAC;AAGlC,UAAU,SAAS,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,CAAE,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC;IAC5F,QAAQ,EAAE;QAAE,UAAU,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CACnD;AA2FD,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,OAAO,GAAG,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,OACjB,CACtD,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,OAE1C,CAAC,GAAG,SACjC,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,UAAU,GAAG,eAAe,EAAE,WAAW,MAAM,QAGvF,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,UAAU,GAAG,eAAe,EAClE,IAAI,MAAM,EACV,UAAU,IAAI,CAAC,mBAAmB,EAAE,aAAa,CAAC,MAoBnD,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,CAAC,SAAS,UAAU,GAAG,eAAe,EAC9E,IAAI,MAAM,iDAKX,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,UAAU,GAAG,eAAe,OACP,SAAS,CAAC,CAAC,CACtE,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,UAAU,GAAG,eAAe,OACP,CAAC,GAAG,SAC3D,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAO,IAGnC,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,UAAU,GAAG,eAAe,EAAE,WAAW,MAAM,QAGzF,CAAA;AAGD,eAAO,MAAM,WAAW;cAAqC,SAAS;qEASrE,CAAA"}
|