@annotorious/react 3.7.10 → 3.7.12
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/annotorious-react.es11.js +13 -13
- package/dist/annotorious-react.es11.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/OpenSeadragonViewer.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -3,12 +3,12 @@ import { forwardRef as C, useRef as p, useContext as O, useLayoutEffect as w, us
|
|
|
3
3
|
import g from "openseadragon";
|
|
4
4
|
import { dequal as m } from "./annotorious-react.es12.js";
|
|
5
5
|
import { OpenSeadragonAnnotatorContext as h } from "./annotorious-react.es8.js";
|
|
6
|
-
const x = (c,
|
|
6
|
+
const x = (c, f) => {
|
|
7
7
|
if (!c) return !1;
|
|
8
|
-
const { tileSources:
|
|
9
|
-
return s && !
|
|
10
|
-
},
|
|
11
|
-
const { className:
|
|
8
|
+
const { tileSources: a, ...e } = c, { tileSources: o, ...n } = f, s = !m(a, o), l = !m(e, n);
|
|
9
|
+
return s && !l;
|
|
10
|
+
}, H = C((c, f) => {
|
|
11
|
+
const { className: a, options: e } = c, o = p(null), n = p(null), s = p(null), { viewer: l, setViewer: t } = O(h);
|
|
12
12
|
return w(() => {
|
|
13
13
|
if (o.current && !n.current) {
|
|
14
14
|
const r = g({ ...e, element: o.current });
|
|
@@ -17,12 +17,12 @@ const x = (c, u) => {
|
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
19
|
}, []), w(() => {
|
|
20
|
-
const r = n.current,
|
|
21
|
-
if (!(!r || !
|
|
22
|
-
if (x(
|
|
20
|
+
const r = n.current, d = s.current;
|
|
21
|
+
if (!(!r || !d)) {
|
|
22
|
+
if (x(d, e)) {
|
|
23
23
|
const i = Array.isArray(e.tileSources) ? e.tileSources : [e.tileSources];
|
|
24
|
-
r.world.removeAll(), i.forEach((
|
|
25
|
-
const S = typeof
|
|
24
|
+
r.world.removeAll(), i.forEach((u, v) => {
|
|
25
|
+
const S = typeof u == "object" && "tileSource" in u ? u : { tileSource: u };
|
|
26
26
|
r.addTiledImage({
|
|
27
27
|
...S,
|
|
28
28
|
index: v,
|
|
@@ -31,14 +31,14 @@ const x = (c, u) => {
|
|
|
31
31
|
}
|
|
32
32
|
});
|
|
33
33
|
}), s.current = e;
|
|
34
|
-
} else if (!m(
|
|
34
|
+
} else if (!m(d, e) && (console.warn("Forced re-creation of OpenSeadragon viewer. Beware of race conditions!"), t && t(void 0), r.destroy(), o.current)) {
|
|
35
35
|
const i = g({ ...e, element: o.current });
|
|
36
36
|
n.current = i, s.current = e, t && t(i);
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
}, [e]), R(
|
|
39
|
+
}, [e]), R(f, () => l), /* @__PURE__ */ y("div", { className: a, ref: o });
|
|
40
40
|
});
|
|
41
41
|
export {
|
|
42
|
-
|
|
42
|
+
H as OpenSeadragonViewer
|
|
43
43
|
};
|
|
44
44
|
//# sourceMappingURL=annotorious-react.es11.js.map
|
|
@@ -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: OpenSeadragon.Options['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 === '
|
|
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: OpenSeadragon.Options['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,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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenSeadragonViewer.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonViewer.tsx"],"names":[],"mappings":"AACA,OAAO,aAAa,MAAM,eAAe,CAAC;AAI1C,MAAM,WAAW,wBAAwB;IAEvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC;CAEhC;AAoBD,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"OpenSeadragonViewer.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonViewer.tsx"],"names":[],"mappings":"AACA,OAAO,aAAa,MAAM,eAAe,CAAC;AAI1C,MAAM,WAAW,wBAAwB;IAEvC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC;CAEhC;AAoBD,eAAO,MAAM,mBAAmB,2HAsF9B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@annotorious/react",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.12",
|
|
4
4
|
"description": "Annotorious React bindings",
|
|
5
5
|
"author": "Rainer Simon",
|
|
6
6
|
"license": "BSD-3-Clause",
|
|
@@ -45,9 +45,9 @@
|
|
|
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.12",
|
|
49
|
+
"@annotorious/core": "3.7.12",
|
|
50
|
+
"@annotorious/openseadragon": "3.7.12",
|
|
51
51
|
"@floating-ui/react": "^0.27.16",
|
|
52
52
|
"dequal": "^2.0.3",
|
|
53
53
|
"zustand": "^5.0.8"
|