@annotorious/react 3.6.12 → 3.7.1
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/README.md +8 -4
- package/dist/annotorious-react.css +1 -1
- package/dist/annotorious-react.es10.js +25 -21
- package/dist/annotorious-react.es10.js.map +1 -1
- package/dist/annotorious-react.es11.js +4 -4
- package/dist/annotorious-react.es11.js.map +1 -1
- package/dist/annotorious-react.es9.js +63 -59
- package/dist/annotorious-react.es9.js.map +1 -1
- package/dist/openseadragon/OpenSeadragonAnnotationPopup.d.ts +1 -1
- package/dist/openseadragon/OpenSeadragonAnnotationPopup.d.ts.map +1 -1
- package/dist/openseadragon/OpenSeadragonHoverTooltip.d.ts +1 -1
- package/dist/openseadragon/OpenSeadragonHoverTooltip.d.ts.map +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -5,13 +5,17 @@
|
|
|
5
5
|
Add image annotation functionality to any web page with a few lines of JavaScript. Visit the
|
|
6
6
|
[project website](https://annotorious.dev) for documentation and live demos.
|
|
7
7
|
|
|
8
|
+
## License
|
|
9
|
+
|
|
10
|
+
Annotorious is licensed under the [BSD 3-Clause](LICENSE) license.
|
|
11
|
+
|
|
8
12
|
## Community
|
|
9
13
|
|
|
10
14
|
Visit the [Discussion Forum](https://github.com/annotorious/annotorious/discussions) for community support, or file an
|
|
11
15
|
issue on the [Issue Tracker](https://github.com/annotorious/annotorious/issues).
|
|
12
16
|
|
|
13
|
-
##
|
|
17
|
+
## Professional Support Available
|
|
18
|
+
|
|
19
|
+
Looking for help with integration, customization, or feature development? I offer consulting and professional services for teams and organizations that need dedicated support or technical guidance. Services are available on an hourly basis.
|
|
14
20
|
|
|
15
|
-
|
|
16
|
-
time supporting the community, and make Annotorious better for everyone. [Make a one-time or monthly
|
|
17
|
-
donation via my SteadyHQ account](https://steadyhq.com/rainer-simon).
|
|
21
|
+
Contact me at hello@rainersimon.io to discuss your project.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
canvas.a9s-gl-canvas{height:100%;left:0;position:absolute;top:0;width:100%}canvas.a9s-gl-canvas.hidden{display:none}canvas.a9s-gl-canvas.hover{cursor:pointer!important}svg.svelte-g4ws1v.svelte-g4ws1v{pointer-events:none}svg.drawing.svelte-g4ws1v.svelte-g4ws1v,svg.editing.svelte-g4ws1v .svelte-g4ws1v{pointer-events:all}svg.hover.svelte-g4ws1v.svelte-g4ws1v{cursor:pointer}svg.svelte-g4ws1v .svelte-g4ws1v{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}svg.svelte-jwrce3{overflow:visible;position:absolute;top:0;left:0;width:100%;height:100%;outline:none;pointer-events:none}.a9s-osd-selectionlayer :is(rect,path,polygon,ellipse,line){fill:#3182ed40;stroke:#3182ed;stroke-width:1.5px;vector-effect:non-scaling-stroke}rect.a9s-union-fg.svelte-jwrce3{fill:#3182ed1f;stroke-width:1px}rect.a9s-union-bg.svelte-jwrce3{fill:transparent;stroke:#fff;stroke-width:2px}.a9s-polygon-midpoint.svelte-12ykj76{cursor:crosshair}.a9s-polygon-midpoint-buffer.svelte-12ykj76{fill:transparent}.a9s-polygon-midpoint-outer.svelte-12ykj76{display:none;fill:transparent;pointer-events:none;stroke:#00000059;stroke-width:1.5px;vector-effect:non-scaling-stroke}.a9s-polygon-midpoint-inner.svelte-12ykj76{fill:#00000040;pointer-events:none;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke}mask.a9s-polygon-editor-mask.svelte-1h2slbm>rect.svelte-1h2slbm{fill:#fff}mask.a9s-polygon-editor-mask.svelte-1h2slbm>circle.svelte-1h2slbm,mask.a9s-polygon-editor-mask.svelte-1h2slbm>polygon.svelte-1h2slbm{fill:#000}mask.a9s-rectangle-editor-mask.svelte-1njczvj>rect.rect-mask-bg.svelte-1njczvj{fill:#fff}mask.a9s-rectangle-editor-mask.svelte-1njczvj>rect.rect-mask-fg.svelte-1njczvj{fill:#000}mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>rect.svelte-1vxo6dc{fill:#fff}mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>circle.svelte-1vxo6dc,mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>path.svelte-1vxo6dc{fill:#000}mask.a9s-rubberband-rectangle-mask.svelte-1a76qe7>rect.rect-mask-bg.svelte-1a76qe7{fill:#fff}mask.a9s-rubberband-rectangle-mask.svelte-1a76qe7>rect.rect-mask-fg.svelte-1a76qe7{fill:#000}mask.a9s-rubberband-polygon-mask.svelte-18wrg3t>rect.svelte-18wrg3t{fill:#fff}mask.a9s-rubberband-polygon-mask.svelte-18wrg3t>polygon.svelte-18wrg3t{fill:#000}circle.a9s-handle.svelte-18wrg3t.svelte-18wrg3t{fill:#fff;pointer-events:none;stroke:#00000059;stroke-width:1px;vector-effect:non-scaling-stroke}path.open.svelte-1w0132l{fill:transparent!important}.a9s-annotationlayer{box-sizing:border-box;height:100%;left:0;outline:none;position:absolute;top:0;touch-action:none;width:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.a9s-annotationlayer.hover{cursor:pointer}.a9s-annotationlayer.hidden{display:none}.a9s-annotationlayer ellipse,.a9s-annotationlayer line,.a9s-annotationlayer path,.a9s-annotationlayer polygon,.a9s-annotationlayer rect{fill:transparent;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke;-webkit-tap-highlight-color:transparent}.a9s-touch-halo{fill:transparent;pointer-events:none;stroke-width:0;transition:fill .15s}.a9s-touch-halo.touched{fill:#fff6}.a9s-handle-buffer{fill:transparent}.a9s-handle-dot{fill:#fff;pointer-events:none;stroke:#00000059;stroke-width:1px;vector-effect:non-scaling-stroke}.a9s-handle-dot.selected{fill:#1a1a1a;stroke:none}.a9s-handle-selected{animation:dash-rotate .35s linear infinite reverse;fill:#ffffff40;stroke:#000000e6;stroke-dasharray:2 2;stroke-width:1px;pointer-events:none;vector-effect:non-scaling-stroke}@keyframes dash-rotate{0%{stroke-dashoffset:0}to{stroke-dashoffset:4}}.a9s-edge-handle{fill:transparent;stroke:transparent;stroke-width:6px}.a9s-shape-handle,.a9s-handle{cursor:move}.a9s-handle.a9s-corner-handle{cursor:crosshair}.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:#00000059;stroke-width:3px}.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}
|
|
1
|
+
canvas.a9s-gl-canvas{height:100%;left:0;position:absolute;top:0;width:100%}canvas.a9s-gl-canvas.hidden{display:none}canvas.a9s-gl-canvas.hover{cursor:pointer!important}svg.svelte-g4ws1v.svelte-g4ws1v{pointer-events:none}svg.drawing.svelte-g4ws1v.svelte-g4ws1v,svg.editing.svelte-g4ws1v .svelte-g4ws1v{pointer-events:all}svg.hover.svelte-g4ws1v.svelte-g4ws1v{cursor:pointer}svg.svelte-g4ws1v .svelte-g4ws1v{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}svg.svelte-jwrce3{overflow:visible;position:absolute;top:0;left:0;width:100%;height:100%;outline:none;pointer-events:none}.a9s-osd-selectionlayer :is(rect,path,polygon,ellipse,line){fill:#3182ed40;stroke:#3182ed;stroke-width:1.5px;vector-effect:non-scaling-stroke}rect.a9s-union-fg.svelte-jwrce3{fill:#3182ed1f;stroke-width:1px}rect.a9s-union-bg.svelte-jwrce3{fill:transparent;stroke:#fff;stroke-width:2px}.a9s-polygon-midpoint.svelte-12ykj76{cursor:crosshair}.a9s-polygon-midpoint-buffer.svelte-12ykj76{fill:transparent}.a9s-polygon-midpoint-outer.svelte-12ykj76{display:none;fill:transparent;pointer-events:none;stroke:#00000059;stroke-width:1.5px;vector-effect:non-scaling-stroke}.a9s-polygon-midpoint-inner.svelte-12ykj76{fill:#00000040;pointer-events:none;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke}mask.a9s-polygon-editor-mask.svelte-1h2slbm>rect.svelte-1h2slbm{fill:#fff}mask.a9s-polygon-editor-mask.svelte-1h2slbm>circle.svelte-1h2slbm,mask.a9s-polygon-editor-mask.svelte-1h2slbm>polygon.svelte-1h2slbm{fill:#000}mask.a9s-rectangle-editor-mask.svelte-1njczvj>rect.rect-mask-bg.svelte-1njczvj{fill:#fff}mask.a9s-rectangle-editor-mask.svelte-1njczvj>rect.rect-mask-fg.svelte-1njczvj{fill:#000}mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>rect.svelte-1vxo6dc{fill:#fff}mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>circle.svelte-1vxo6dc,mask.a9s-multipolygon-editor-mask.svelte-1vxo6dc>path.svelte-1vxo6dc{fill:#000}mask.a9s-rubberband-rectangle-mask.svelte-1a76qe7>rect.rect-mask-bg.svelte-1a76qe7{fill:#fff}mask.a9s-rubberband-rectangle-mask.svelte-1a76qe7>rect.rect-mask-fg.svelte-1a76qe7{fill:#000}mask.a9s-rubberband-polygon-mask.svelte-18wrg3t>rect.svelte-18wrg3t{fill:#fff}mask.a9s-rubberband-polygon-mask.svelte-18wrg3t>polygon.svelte-18wrg3t{fill:#000}circle.a9s-handle.svelte-18wrg3t.svelte-18wrg3t{fill:#fff;pointer-events:none;stroke:#00000059;stroke-width:1px;vector-effect:non-scaling-stroke}path.open.svelte-1w0132l{fill:transparent!important}.a9s-annotationlayer{box-sizing:border-box;height:100%;left:0;outline:none;position:absolute;top:0;touch-action:none;width:100%;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.a9s-annotationlayer.hover{cursor:pointer}.a9s-annotationlayer.hidden{display:none}.a9s-annotationlayer ellipse,.a9s-annotationlayer line,.a9s-annotationlayer path,.a9s-annotationlayer polygon,.a9s-annotationlayer rect{fill:transparent;shape-rendering:geometricPrecision;vector-effect:non-scaling-stroke;-webkit-tap-highlight-color:transparent}.a9s-touch-halo{fill:transparent;pointer-events:none;stroke-width:0;transition:fill .15s}.a9s-touch-halo.touched{fill:#fff6}.a9s-handle-buffer{fill:transparent}.a9s-handle [role=button]{cursor:inherit!important}.a9s-handle-dot{fill:#fff;pointer-events:none;stroke:#00000059;stroke-width:1px;vector-effect:non-scaling-stroke}.a9s-handle-dot.selected{fill:#1a1a1a;stroke:none}.a9s-handle-selected{animation:dash-rotate .35s linear infinite reverse;fill:#ffffff40;stroke:#000000e6;stroke-dasharray:2 2;stroke-width:1px;pointer-events:none;vector-effect:non-scaling-stroke}@keyframes dash-rotate{0%{stroke-dashoffset:0}to{stroke-dashoffset:4}}.a9s-edge-handle{fill:transparent;stroke:transparent;stroke-width:6px}.a9s-shape-handle,.a9s-handle{cursor:move}.a9s-handle.a9s-corner-handle{cursor:crosshair}.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:#00000059;stroke-width:3px}.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}
|
|
@@ -1,36 +1,40 @@
|
|
|
1
1
|
import { jsx as b } from "react/jsx-runtime";
|
|
2
2
|
import { useState as c, useEffect as E } from "react";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { createPortal as h } from "react-dom";
|
|
4
|
+
import { useAnnotator as y } from "./annotorious-react.es2.js";
|
|
5
|
+
import { useViewer as A } from "./annotorious-react.es8.js";
|
|
6
|
+
const m = 10, T = (n) => {
|
|
7
|
+
const a = n.offsetX || m, v = n.offsetY || m, o = y(), t = A(), [s, p] = c(), [r, i] = c();
|
|
7
8
|
return E(() => {
|
|
8
|
-
if (!
|
|
9
|
-
const
|
|
10
|
-
i(e ?
|
|
9
|
+
if (!o || !t) return;
|
|
10
|
+
const l = (e) => {
|
|
11
|
+
i(e ? o.state.store.getAnnotation(e) : void 0);
|
|
11
12
|
}, f = (e) => {
|
|
12
13
|
const { offsetX: d, offsetY: x } = e;
|
|
13
14
|
p({ x: d, y: x });
|
|
14
15
|
};
|
|
15
|
-
|
|
16
|
-
const
|
|
16
|
+
t.element.addEventListener("pointermove", f);
|
|
17
|
+
const u = o.state.hover.subscribe(l);
|
|
17
18
|
return () => {
|
|
18
19
|
var e;
|
|
19
|
-
(e =
|
|
20
|
+
(e = t.element) == null || e.removeEventListener("pointermove", f), u();
|
|
20
21
|
};
|
|
21
|
-
}, [
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
}, [o, t]), r && s && h(
|
|
23
|
+
/* @__PURE__ */ b(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
style: {
|
|
27
|
+
position: "absolute",
|
|
28
|
+
top: `${s.y + v}px`,
|
|
29
|
+
left: `${s.x + a}px`
|
|
30
|
+
},
|
|
31
|
+
children: n.tooltip({ annotation: r })
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
t.element
|
|
31
35
|
);
|
|
32
36
|
};
|
|
33
37
|
export {
|
|
34
|
-
|
|
38
|
+
T as OpenSeadragonHoverTooltip
|
|
35
39
|
};
|
|
36
40
|
//# sourceMappingURL=annotorious-react.es10.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotorious-react.es10.js","sources":["../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport { Annotation } from '@annotorious/core';\nimport { ImageAnnotation } from '@annotorious/annotorious';\nimport { useAnnotator } from '../Annotorious';\nimport { AnnotoriousOpenSeadragonAnnotator, useViewer } from '.';\n\ninterface HoverTooltipContentProps <T extends Annotation = ImageAnnotation> {\n \n annotation: T;\n\n}\n\ninterface OpenSeadragonHoverTooltipProps {\n\n offsetX?: number;\n\n offsetY?: number;\n\n tooltip: (props: HoverTooltipContentProps) => ReactNode;\n\n}\n\nconst DEFAULT_OFFSET = 10;\n\nexport const OpenSeadragonHoverTooltip = (props: OpenSeadragonHoverTooltipProps) => {\n\n const offsetX = props.offsetX || DEFAULT_OFFSET;\n const offsetY = props.offsetY || DEFAULT_OFFSET;\n\n const anno = useAnnotator<AnnotoriousOpenSeadragonAnnotator>();\n\n const viewer = useViewer();\n\n const [pos, setPos] = useState<{ x: number, y: number } | undefined>();\n\n const [hovered, setHovered] = useState<ImageAnnotation | undefined>();\n\n useEffect(() => {\n if (!anno || !viewer) return;\n\n const onHover = (id: string) => {\n if (id)\n setHovered(anno.state.store.getAnnotation(id));\n else\n setHovered(undefined);\n }\n\n const onPointerMove = (evt: PointerEvent) => {\n const { offsetX: x, offsetY: y } = evt;\n setPos({ x, y });\n }\n\n viewer.element.addEventListener('pointermove', onPointerMove);\n const unsubscribe = anno.state.hover.subscribe(onHover);\n\n return () => {\n viewer.element?.removeEventListener('pointermove', onPointerMove);\n unsubscribe();\n }\n }, [anno, viewer]);\n\n return (hovered && pos) && (\n <div \n style={{ \n position: 'absolute',\n top: `${pos.y + offsetY}px`,\n left: `${pos.x + offsetX}px`\n }}>\n {props.tooltip({ annotation: hovered })}\n </div>\n )\n\n}"],"names":["DEFAULT_OFFSET","OpenSeadragonHoverTooltip","props","offsetX","offsetY","anno","useAnnotator","viewer","useViewer","pos","setPos","useState","hovered","setHovered","useEffect","onHover","id","onPointerMove","evt","x","y","unsubscribe","_a","jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"annotorious-react.es10.js","sources":["../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Annotation } from '@annotorious/core';\nimport { ImageAnnotation } from '@annotorious/annotorious';\nimport { useAnnotator } from '../Annotorious';\nimport { AnnotoriousOpenSeadragonAnnotator, useViewer } from '.';\n\ninterface HoverTooltipContentProps <T extends Annotation = ImageAnnotation> {\n \n annotation: T;\n\n}\n\ninterface OpenSeadragonHoverTooltipProps {\n\n offsetX?: number;\n\n offsetY?: number;\n\n tooltip: (props: HoverTooltipContentProps) => ReactNode;\n\n}\n\nconst DEFAULT_OFFSET = 10;\n\nexport const OpenSeadragonHoverTooltip = (props: OpenSeadragonHoverTooltipProps) => {\n\n const offsetX = props.offsetX || DEFAULT_OFFSET;\n const offsetY = props.offsetY || DEFAULT_OFFSET;\n\n const anno = useAnnotator<AnnotoriousOpenSeadragonAnnotator>();\n\n const viewer = useViewer();\n\n const [pos, setPos] = useState<{ x: number, y: number } | undefined>();\n\n const [hovered, setHovered] = useState<ImageAnnotation | undefined>();\n\n useEffect(() => {\n if (!anno || !viewer) return;\n\n const onHover = (id: string) => {\n if (id)\n setHovered(anno.state.store.getAnnotation(id));\n else\n setHovered(undefined);\n }\n\n const onPointerMove = (evt: PointerEvent) => {\n const { offsetX: x, offsetY: y } = evt;\n setPos({ x, y });\n }\n\n viewer.element.addEventListener('pointermove', onPointerMove);\n const unsubscribe = anno.state.hover.subscribe(onHover);\n\n return () => {\n viewer.element?.removeEventListener('pointermove', onPointerMove);\n unsubscribe();\n }\n }, [anno, viewer]);\n\n return (hovered && pos) && createPortal(\n <div \n style={{ \n position: 'absolute',\n top: `${pos.y + offsetY}px`,\n left: `${pos.x + offsetX}px`\n }}>\n {props.tooltip({ annotation: hovered })}\n </div>\n , viewer.element)\n\n}"],"names":["DEFAULT_OFFSET","OpenSeadragonHoverTooltip","props","offsetX","offsetY","anno","useAnnotator","viewer","useViewer","pos","setPos","useState","hovered","setHovered","useEffect","onHover","id","onPointerMove","evt","x","y","unsubscribe","_a","createPortal","jsx"],"mappings":";;;;;AAuBA,MAAMA,IAAiB,IAEVC,IAA4B,CAACC,MAA0C;AAElF,QAAMC,IAAUD,EAAM,WAAWF,GAC3BI,IAAUF,EAAM,WAAWF,GAE3BK,IAAOC,EAAA,GAEPC,IAASC,EAAA,GAET,CAACC,GAAKC,CAAM,IAAIC,EAAA,GAEhB,CAACC,GAASC,CAAU,IAAIF,EAAA;AAE9B,SAAAG,EAAU,MAAM;AACd,QAAI,CAACT,KAAQ,CAACE,EAAQ;AAEtB,UAAMQ,IAAU,CAACC,MAAe;AAC9B,MACEH,EADEG,IACSX,EAAK,MAAM,MAAM,cAAcW,CAAE,IAEjC,MAFkC;AAAA,IAGjD,GAEMC,IAAgB,CAACC,MAAsB;AAC3C,YAAM,EAAE,SAASC,GAAG,SAASC,MAAMF;AACnC,MAAAR,EAAO,EAAE,GAAAS,GAAG,GAAAC,GAAG;AAAA,IACjB;AAEA,IAAAb,EAAO,QAAQ,iBAAiB,eAAeU,CAAa;AAC5D,UAAMI,IAAchB,EAAK,MAAM,MAAM,UAAUU,CAAO;AAEtD,WAAO,MAAM;;AACX,OAAAO,IAAAf,EAAO,YAAP,QAAAe,EAAgB,oBAAoB,eAAeL,IACnDI,EAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAChB,GAAME,CAAM,CAAC,GAETK,KAAWH,KAAQc;AAAA,IACzB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK,GAAGf,EAAI,IAAIL,CAAO;AAAA,UACvB,MAAM,GAAGK,EAAI,IAAIN,CAAO;AAAA,QAAA;AAAA,QAEzB,UAAAD,EAAM,QAAQ,EAAE,YAAYU,GAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAExCL,EAAO;AAAA,EAAA;AAEX;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as m, useRef as p, useContext as u, useLayoutEffect as c, useImperativeHandle as d } from "react";
|
|
3
3
|
import l from "openseadragon";
|
|
4
4
|
import { OpenSeadragonAnnotatorContext as v } from "./annotorious-react.es8.js";
|
|
5
|
-
const S = m((n,
|
|
6
|
-
const { className:
|
|
5
|
+
const S = m((n, s) => {
|
|
6
|
+
const { className: i, options: t } = n, r = p(null), { viewer: a, setViewer: e } = u(v);
|
|
7
7
|
return c(() => {
|
|
8
8
|
if (r.current) {
|
|
9
9
|
const o = l({ ...t, element: r.current });
|
|
@@ -11,7 +11,7 @@ const S = m((n, i) => {
|
|
|
11
11
|
e && e(void 0), o.destroy();
|
|
12
12
|
};
|
|
13
13
|
}
|
|
14
|
-
}, [
|
|
14
|
+
}, [t]), d(s, () => a), /* @__PURE__ */ f("div", { className: i, ref: r });
|
|
15
15
|
});
|
|
16
16
|
export {
|
|
17
17
|
S as OpenSeadragonViewer
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { OpenSeadragonAnnotatorContext } from './OpenSeadragonAnnotator';\n\nexport interface OpenSeadragonViewerProps {\n\n className?: string;\n\n options: OpenSeadragon.Options;\n\n}\n\nexport const OpenSeadragonViewer = forwardRef<OpenSeadragon.Viewer, OpenSeadragonViewerProps>((props: OpenSeadragonViewerProps, ref) => {\n\n const { className, options } = props;\n\n const element = useRef<HTMLDivElement>(null);\n\n const { viewer, setViewer } = useContext(OpenSeadragonAnnotatorContext);\n\n useLayoutEffect(() => { \n if (element.current) {\n const v = OpenSeadragon({...options, element: element.current });\n\n // Checking for setViewer is just a convenience so we can\n // use this component also without an OpenSeadragonAnnotator\n if (setViewer)\n setViewer(v);\n\n return () => {\n if (setViewer)\n setViewer(undefined);\n\n v.destroy();\n }\n }\n }, [
|
|
1
|
+
{"version":3,"file":"annotorious-react.es11.js","sources":["../src/openseadragon/OpenSeadragonViewer.tsx"],"sourcesContent":["import { forwardRef, useContext, useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { OpenSeadragonAnnotatorContext } from './OpenSeadragonAnnotator';\n\nexport interface OpenSeadragonViewerProps {\n\n className?: string;\n\n options: OpenSeadragon.Options;\n\n}\n\nexport const OpenSeadragonViewer = forwardRef<OpenSeadragon.Viewer, OpenSeadragonViewerProps>((props: OpenSeadragonViewerProps, ref) => {\n\n const { className, options } = props;\n\n const element = useRef<HTMLDivElement>(null);\n\n const { viewer, setViewer } = useContext(OpenSeadragonAnnotatorContext);\n\n useLayoutEffect(() => { \n if (element.current) {\n const v = OpenSeadragon({...options, element: element.current });\n\n // Checking for setViewer is just a convenience so we can\n // use this component also without an OpenSeadragonAnnotator\n if (setViewer)\n setViewer(v);\n\n return () => {\n if (setViewer)\n setViewer(undefined);\n\n v.destroy();\n }\n }\n }, [options]);\n\n useImperativeHandle(ref, () => viewer);\n\n return (\n <div className={className} ref={element} />\n );\n\n});"],"names":["OpenSeadragonViewer","forwardRef","props","ref","className","options","element","useRef","viewer","setViewer","useContext","OpenSeadragonAnnotatorContext","useLayoutEffect","v","OpenSeadragon","useImperativeHandle","jsx"],"mappings":";;;;AAYO,MAAMA,IAAsBC,EAA2D,CAACC,GAAiCC,MAAQ;AAEtI,QAAM,EAAE,WAAAC,GAAW,SAAAC,EAAA,IAAYH,GAEzBI,IAAUC,EAAuB,IAAI,GAErC,EAAE,QAAAC,GAAQ,WAAAC,MAAcC,EAAWC,CAA6B;AAEtE,SAAAC,EAAgB,MAAM;AACpB,QAAIN,EAAQ,SAAS;AACnB,YAAMO,IAAIC,EAAc,EAAC,GAAGT,GAAS,SAASC,EAAQ,SAAS;AAI/D,aAAIG,KACFA,EAAUI,CAAC,GAEN,MAAM;AACX,QAAIJ,KACFA,EAAU,MAAS,GAErBI,EAAE,QAAA;AAAA,MACJ;AAAA,IACF;AAAA,EACF,GAAG,CAACR,CAAO,CAAC,GAEZU,EAAoBZ,GAAK,MAAMK,CAAM,GAGnC,gBAAAQ,EAAC,OAAA,EAAI,WAAAZ,GAAsB,KAAKE,EAAA,CAAS;AAG7C,CAAC;"}
|
|
@@ -1,113 +1,117 @@
|
|
|
1
1
|
import { jsxs as h, jsx as O } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
2
|
+
import { useState as P, useRef as A, useEffect as D } from "react";
|
|
3
|
+
import { createPortal as L } from "react-dom";
|
|
3
4
|
import g from "openseadragon";
|
|
4
|
-
import { useAnnotator as
|
|
5
|
+
import { useAnnotator as S, useSelection as b } from "./annotorious-react.es2.js";
|
|
5
6
|
/* empty css */
|
|
6
7
|
/* empty css */
|
|
7
8
|
import "@annotorious/core";
|
|
8
9
|
import "@annotorious/annotorious";
|
|
9
|
-
import { toClientRects as
|
|
10
|
-
import { useFloating as
|
|
11
|
-
import { useViewer as
|
|
12
|
-
import { inline as
|
|
13
|
-
import { autoUpdate as
|
|
10
|
+
import { toClientRects as U } from "./annotorious-react.es14.js";
|
|
11
|
+
import { useFloating as F, FloatingArrow as M } from "./annotorious-react.es13.js";
|
|
12
|
+
import { useViewer as V } from "./annotorious-react.es8.js";
|
|
13
|
+
import { inline as j, offset as z, flip as H, shift as T, arrow as X } from "./annotorious-react.es16.js";
|
|
14
|
+
import { autoUpdate as Y } from "./annotorious-react.es15.js";
|
|
14
15
|
import w from "./annotorious-react.es17.js";
|
|
15
|
-
const
|
|
16
|
-
const { minX: d, minY: a, maxX:
|
|
16
|
+
const I = (n, r) => {
|
|
17
|
+
const { minX: d, minY: a, maxX: t, maxY: m } = r.bounds, { top: s, left: p } = n.element.getBoundingClientRect(), o = n.viewport.imageToViewerElementCoordinates(new g.Point(d, a)), l = n.viewport.imageToViewerElementCoordinates(new g.Point(t, m));
|
|
17
18
|
return new DOMRect(
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
19
|
+
o.x + p,
|
|
20
|
+
o.y + s,
|
|
21
|
+
l.x - o.x,
|
|
22
|
+
l.y - o.y
|
|
22
23
|
);
|
|
23
|
-
},
|
|
24
|
+
}, re = (n) => {
|
|
24
25
|
var u, f;
|
|
25
|
-
const r =
|
|
26
|
+
const r = S(), [d, a] = P(!1), t = V(), m = A(null), { selected: s, event: p } = b(), o = (u = s[0]) == null ? void 0 : u.annotation, l = (f = s[0]) == null ? void 0 : f.editable, { refs: c, floatingStyles: y, context: v } = F({
|
|
26
27
|
open: d,
|
|
27
28
|
onOpenChange: a,
|
|
28
29
|
placement: n.placement,
|
|
29
30
|
middleware: [
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
j(),
|
|
32
|
+
z(10),
|
|
33
|
+
H({ crossAxis: !0 }),
|
|
34
|
+
T({
|
|
34
35
|
crossAxis: !0,
|
|
35
|
-
boundary:
|
|
36
|
+
boundary: t == null ? void 0 : t.element,
|
|
36
37
|
padding: { right: 5, left: 5, top: 10, bottom: 10 }
|
|
37
38
|
}),
|
|
38
|
-
|
|
39
|
-
element:
|
|
39
|
+
X({
|
|
40
|
+
element: m,
|
|
40
41
|
padding: 5
|
|
41
42
|
})
|
|
42
43
|
],
|
|
43
|
-
whileElementsMounted:
|
|
44
|
+
whileElementsMounted: Y
|
|
44
45
|
});
|
|
45
|
-
|
|
46
|
+
D(() => {
|
|
46
47
|
if (s.length === 0)
|
|
47
48
|
a(!1);
|
|
48
49
|
else {
|
|
49
50
|
const e = () => {
|
|
50
|
-
if (!
|
|
51
|
-
const i =
|
|
51
|
+
if (!t.element) return;
|
|
52
|
+
const i = I(t, o.target.selector.geometry);
|
|
52
53
|
c.setReference({
|
|
53
54
|
getBoundingClientRect: () => i,
|
|
54
|
-
getClientRects: () =>
|
|
55
|
+
getClientRects: () => U(i)
|
|
55
56
|
});
|
|
56
57
|
};
|
|
57
|
-
return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e),
|
|
58
|
-
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e),
|
|
58
|
+
return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), t.addHandler("update-viewport", e), e(), a(!0), () => {
|
|
59
|
+
window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e), t.removeHandler("update-viewport", e);
|
|
59
60
|
};
|
|
60
61
|
}
|
|
61
|
-
}, [n.popup, s,
|
|
62
|
+
}, [n.popup, s, t]);
|
|
62
63
|
const x = (e) => {
|
|
63
64
|
const i = e.id || w();
|
|
64
65
|
r.state.store.addBody({
|
|
65
66
|
...e,
|
|
66
67
|
id: i,
|
|
67
|
-
annotation:
|
|
68
|
+
annotation: o.id,
|
|
68
69
|
created: e.created || /* @__PURE__ */ new Date(),
|
|
69
70
|
creator: r.getUser()
|
|
70
71
|
});
|
|
71
72
|
}, R = (e) => {
|
|
72
|
-
r.state.store.deleteBody({ id: e, annotation:
|
|
73
|
+
r.state.store.deleteBody({ id: e, annotation: o.id });
|
|
73
74
|
}, B = (e, i) => {
|
|
74
75
|
const C = i.id || w(), E = {
|
|
75
76
|
updated: /* @__PURE__ */ new Date(),
|
|
76
77
|
updatedBy: r.getUser(),
|
|
77
78
|
...i,
|
|
78
79
|
id: C,
|
|
79
|
-
annotation:
|
|
80
|
+
annotation: o.id
|
|
80
81
|
};
|
|
81
82
|
r.state.store.updateBody(e, E);
|
|
82
83
|
};
|
|
83
|
-
return d &&
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
84
|
+
return d && o ? L(
|
|
85
|
+
/* @__PURE__ */ h(
|
|
86
|
+
"div",
|
|
87
|
+
{
|
|
88
|
+
className: "a9s-popup a9s-image-popup",
|
|
89
|
+
ref: c.setFloating,
|
|
90
|
+
style: y,
|
|
91
|
+
children: [
|
|
92
|
+
n.arrow && /* @__PURE__ */ O(
|
|
93
|
+
M,
|
|
94
|
+
{
|
|
95
|
+
ref: m,
|
|
96
|
+
context: v,
|
|
97
|
+
...n.arrowProps || {}
|
|
98
|
+
}
|
|
99
|
+
),
|
|
100
|
+
n.popup({
|
|
101
|
+
annotation: o,
|
|
102
|
+
editable: l,
|
|
103
|
+
event: p,
|
|
104
|
+
onCreateBody: x,
|
|
105
|
+
onDeleteBody: R,
|
|
106
|
+
onUpdateBody: B
|
|
107
|
+
})
|
|
108
|
+
]
|
|
109
|
+
}
|
|
110
|
+
),
|
|
111
|
+
t.element
|
|
108
112
|
) : null;
|
|
109
113
|
};
|
|
110
114
|
export {
|
|
111
|
-
|
|
115
|
+
re as OpenSeadragonAnnotationPopup
|
|
112
116
|
};
|
|
113
117
|
//# sourceMappingURL=annotorious-react.es9.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"annotorious-react.es9.js","sources":["../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef, useState } from 'react';\nimport OpenSeadragon from 'openseadragon';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useAnnotator, useSelection, useViewer} from '@annotorious/react';\nimport type { PopupProps } from '@annotorious/react';\nimport type { AnnotationBody, Annotator, Geometry, ImageAnnotation } from '@annotorious/annotorious';\nimport { toClientRects } from '../utils/toClientRects';\nimport {\n useFloating,\n arrow,\n shift,\n inline,\n autoUpdate,\n flip,\n offset,\n FloatingArrow,\n FloatingArrowProps,\n Placement\n} from '@floating-ui/react';\n\nconst toDOMRect = (viewer: OpenSeadragon.Viewer, geometry: Geometry) => {\n const { minX, minY, maxX, maxY } = geometry.bounds;\n\n const { top, left } = viewer.element.getBoundingClientRect();\n\n const topLeft = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(minX, minY));\n const bottomRight = viewer.viewport.imageToViewerElementCoordinates(new OpenSeadragon.Point(maxX, maxY));\n\n return new DOMRect(\n topLeft.x + left,\n topLeft.y + top,\n bottomRight.x - topLeft.x,\n bottomRight.y - topLeft.y\n );\n}\n\ninterface OpenSeadragonAnnotationPopupProps {\n\n arrow?: boolean;\n\n arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'>;\n\n placement?: Placement;\n\n popup: (props: PopupProps) => ReactNode;\n\n}\n\nexport const OpenSeadragonAnnotationPopup = (props: OpenSeadragonAnnotationPopupProps) => {\n \n const anno = useAnnotator<Annotator<ImageAnnotation>>();\n\n const [isOpen, setIsOpen] = useState(false);\n\n const viewer = useViewer();\n\n const arrowRef = useRef(null);\n\n const { selected, event } = useSelection();\n\n const annotation = selected[0]?.annotation;\n\n const editable = selected[0]?.editable;\n\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: setIsOpen,\n placement: props.placement,\n middleware: [\n inline(), \n offset(10),\n flip({ crossAxis: true }),\n shift({ \n crossAxis: true,\n boundary: viewer?.element,\n padding: { right: 5, left: 5, top: 10, bottom: 10 }\n }),\n arrow({\n element: arrowRef,\n padding: 5\n })\n ],\n whileElementsMounted: autoUpdate\n });\n\n useEffect(() => {\n if (selected.length === 0) {\n setIsOpen(false);\n } else { \n const setPosition = () => { \n // This avoids issues when new viewer instances are mounted/unmounted \n // while the popup is open\n if (!viewer.element) return;\n\n const rect = toDOMRect(viewer, annotation.target.selector.geometry);\n \n refs.setReference({\n getBoundingClientRect: () => rect,\n getClientRects: () => toClientRects(rect)\n });\n }\n\n window.addEventListener('scroll', setPosition, true);\n window.addEventListener('resize', setPosition);\n viewer.addHandler('update-viewport', setPosition);\n\n setPosition();\n\n setIsOpen(true);\n\n return () => {\n window.removeEventListener('scroll', setPosition, true);\n window.removeEventListener('resize', setPosition);\n viewer.removeHandler('update-viewport', setPosition);\n };\n }\n }, [props.popup, selected, viewer]);\n\n const onCreateBody = (body: Partial<AnnotationBody>) => {\n const id = body.id || uuidv4();\n \n anno.state.store.addBody({\n ...body,\n id,\n annotation: annotation.id,\n created: body.created || new Date(),\n creator: anno.getUser()\n });\n }\n\n const onDeleteBody = (id: string) => {\n anno.state.store.deleteBody({ id, annotation: annotation.id });\n }\n\n const onUpdateBody = (current: AnnotationBody, next: AnnotationBody) => {\n const id = next.id || uuidv4();\n\n const updated: AnnotationBody = {\n updated: new Date(),\n updatedBy: anno.getUser(),\n ...next,\n id,\n annotation: annotation.id\n }\n\n anno.state.store.updateBody(current, updated);\n }\n\n return (isOpen && annotation) ? (\n <div\n className=\"a9s-popup a9s-image-popup\"\n ref={refs.setFloating}\n style={floatingStyles}>\n \n {props.arrow && (\n <FloatingArrow \n ref={arrowRef} \n context={context} \n {...(props.arrowProps || {})} />\n )}\n\n {props.popup({ \n annotation, \n editable, \n event,\n onCreateBody,\n onDeleteBody,\n onUpdateBody\n })}\n </div>\n ) : null;\n\n}"],"names":["toDOMRect","viewer","geometry","minX","minY","maxX","maxY","top","left","topLeft","OpenSeadragon","bottomRight","OpenSeadragonAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","useViewer","arrowRef","useRef","selected","event","useSelection","annotation","_a","editable","_b","refs","floatingStyles","context","useFloating","inline","offset","flip","shift","arrow","autoUpdate","useEffect","setPosition","rect","toClientRects","onCreateBody","body","id","uuidv4","onDeleteBody","onUpdateBody","current","next","updated","jsxs","jsx","FloatingArrow"],"mappings":"
|
|
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'>;\n\n placement?: Placement;\n\n popup: (props: PopupProps) => ReactNode;\n\n}\n\nexport const OpenSeadragonAnnotationPopup = (props: OpenSeadragonAnnotationPopupProps) => {\n \n const anno = useAnnotator<Annotator<ImageAnnotation>>();\n\n const [isOpen, setIsOpen] = useState(false);\n\n const viewer = useViewer();\n\n const arrowRef = useRef(null);\n\n const { selected, event } = useSelection();\n\n const annotation = selected[0]?.annotation;\n\n const editable = selected[0]?.editable;\n\n const { refs, floatingStyles, context } = useFloating({\n open: isOpen,\n onOpenChange: setIsOpen,\n placement: props.placement,\n middleware: [\n inline(), \n offset(10),\n flip({ crossAxis: true }),\n shift({ \n crossAxis: true,\n boundary: viewer?.element,\n padding: { right: 5, left: 5, top: 10, bottom: 10 }\n }),\n arrow({\n element: arrowRef,\n padding: 5\n })\n ],\n whileElementsMounted: autoUpdate\n });\n\n useEffect(() => {\n if (selected.length === 0) {\n setIsOpen(false);\n } else { \n const setPosition = () => { \n // This avoids issues when new viewer instances are mounted/unmounted \n // while the popup is open\n if (!viewer.element) return;\n\n const rect = toDOMRect(viewer, annotation.target.selector.geometry);\n \n refs.setReference({\n getBoundingClientRect: () => rect,\n getClientRects: () => toClientRects(rect)\n });\n }\n\n window.addEventListener('scroll', setPosition, true);\n window.addEventListener('resize', setPosition);\n viewer.addHandler('update-viewport', setPosition);\n\n setPosition();\n\n setIsOpen(true);\n\n return () => {\n window.removeEventListener('scroll', setPosition, true);\n window.removeEventListener('resize', setPosition);\n viewer.removeHandler('update-viewport', setPosition);\n };\n }\n }, [props.popup, selected, viewer]);\n\n const onCreateBody = (body: Partial<AnnotationBody>) => {\n const id = body.id || uuidv4();\n \n anno.state.store.addBody({\n ...body,\n id,\n annotation: annotation.id,\n created: body.created || new Date(),\n creator: anno.getUser()\n });\n }\n\n const onDeleteBody = (id: string) => {\n anno.state.store.deleteBody({ id, annotation: annotation.id });\n }\n\n const onUpdateBody = (current: AnnotationBody, next: AnnotationBody) => {\n const id = next.id || uuidv4();\n\n const updated: AnnotationBody = {\n updated: new Date(),\n updatedBy: anno.getUser(),\n ...next,\n id,\n annotation: annotation.id\n }\n\n anno.state.store.updateBody(current, updated);\n }\n\n return (isOpen && annotation) ? createPortal(\n <div\n className=\"a9s-popup a9s-image-popup\"\n ref={refs.setFloating}\n style={floatingStyles}>\n \n {props.arrow && (\n <FloatingArrow \n ref={arrowRef} \n context={context} \n {...(props.arrowProps || {})} />\n )}\n\n {props.popup({ \n annotation, \n editable, \n event,\n onCreateBody,\n onDeleteBody,\n onUpdateBody\n })}\n </div>\n , viewer.element) : null;\n\n}"],"names":["toDOMRect","viewer","geometry","minX","minY","maxX","maxY","top","left","topLeft","OpenSeadragon","bottomRight","OpenSeadragonAnnotationPopup","props","anno","useAnnotator","isOpen","setIsOpen","useState","useViewer","arrowRef","useRef","selected","event","useSelection","annotation","_a","editable","_b","refs","floatingStyles","context","useFloating","inline","offset","flip","shift","arrow","autoUpdate","useEffect","setPosition","rect","toClientRects","onCreateBody","body","id","uuidv4","onDeleteBody","onUpdateBody","current","next","updated","createPortal","jsxs","jsx","FloatingArrow"],"mappings":"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"}
|
|
@@ -7,6 +7,6 @@ interface OpenSeadragonAnnotationPopupProps {
|
|
|
7
7
|
placement?: Placement;
|
|
8
8
|
popup: (props: PopupProps) => ReactNode;
|
|
9
9
|
}
|
|
10
|
-
export declare const OpenSeadragonAnnotationPopup: (props: OpenSeadragonAnnotationPopupProps) => import(
|
|
10
|
+
export declare const OpenSeadragonAnnotationPopup: (props: OpenSeadragonAnnotationPopupProps) => import('react').ReactPortal;
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=OpenSeadragonAnnotationPopup.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EASL,kBAAkB,EAClB,SAAS,EACV,MAAM,oBAAoB,CAAC;AAkB5B,UAAU,iCAAiC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,SAAS,GAAG,KAAK,CAAC,CAAC;IAEzD,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAEzC;AAED,eAAO,MAAM,4BAA4B,GAAI,OAAO,iCAAiC,gCA4HpF,CAAA"}
|
|
@@ -9,6 +9,6 @@ interface OpenSeadragonHoverTooltipProps {
|
|
|
9
9
|
offsetY?: number;
|
|
10
10
|
tooltip: (props: HoverTooltipContentProps) => ReactNode;
|
|
11
11
|
}
|
|
12
|
-
export declare const OpenSeadragonHoverTooltip: (props: OpenSeadragonHoverTooltipProps) => import(
|
|
12
|
+
export declare const OpenSeadragonHoverTooltip: (props: OpenSeadragonHoverTooltipProps) => import('react').ReactPortal;
|
|
13
13
|
export {};
|
|
14
14
|
//# sourceMappingURL=OpenSeadragonHoverTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpenSeadragonHoverTooltip.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"OpenSeadragonHoverTooltip.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonHoverTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAI3D,UAAU,wBAAwB,CAAE,CAAC,SAAS,UAAU,GAAG,eAAe;IAExE,UAAU,EAAE,CAAC,CAAC;CAEf;AAED,UAAU,8BAA8B;IAEtC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,OAAO,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAEzD;AAID,eAAO,MAAM,yBAAyB,GAAI,OAAO,8BAA8B,gCAgD9E,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@annotorious/react",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.7.1",
|
|
4
4
|
"description": "Annotorious React bindings",
|
|
5
5
|
"author": "Rainer Simon",
|
|
6
6
|
"license": "BSD-3-Clause",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"./annotorious-react.css": "./dist/annotorious-react.css"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@types/react": "^19.1.
|
|
29
|
+
"@types/react": "^19.1.10",
|
|
30
30
|
"@types/react-dom": "^19.1.7",
|
|
31
31
|
"@vitejs/plugin-react": "^4.7.0",
|
|
32
32
|
"typescript": "^5.9.2",
|
|
@@ -45,9 +45,9 @@
|
|
|
45
45
|
}
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@annotorious/annotorious": "3.
|
|
49
|
-
"@annotorious/core": "3.
|
|
50
|
-
"@annotorious/openseadragon": "3.
|
|
48
|
+
"@annotorious/annotorious": "3.7.1",
|
|
49
|
+
"@annotorious/core": "3.7.1",
|
|
50
|
+
"@annotorious/openseadragon": "3.7.1",
|
|
51
51
|
"@floating-ui/react": "^0.27.15",
|
|
52
52
|
"zustand": "^5.0.7"
|
|
53
53
|
},
|