@annotorious/react 3.0.8 → 3.0.9
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.
|
@@ -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} 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 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 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 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 <FloatingArrow \n ref={arrowRef} \n context={context} \n fill=\"#fff\" />\n\n {props.popup({ \n annotation, \n editable, \n event,\n onCreateBody,\n onDeleteBody,\n onUpdateBody\n })}\n </div>\n )\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":";;;;;;;;;;;;;;AAkBA,MAAMA,IAAY,CAACC,GAA8BC,MAAuB;AACtE,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,MAASJ,EAAS,QAEtC,EAAE,KAAAK,GAAK,MAAAC,EAAA,IAASP,EAAO,QAAQ,yBAE/BQ,IAAUR,EAAO,SAAS,gCAAgC,IAAIS,EAAc,MAAMP,GAAMC,CAAI,CAAC,GAC7FO,IAAcV,EAAO,SAAS,gCAAgC,IAAIS,EAAc,MAAML,GAAMC,CAAI,CAAC;AAEvG,SAAO,IAAI;AAAA,IACTG,EAAQ,IAAID;AAAA,IACZC,EAAQ,IAAIF;AAAA,IACZI,EAAY,IAAKF,EAAQ;AAAA,IACzBE,EAAY,IAAIF,EAAQ;AAAA,EAAA;AAE5B,GAUaG,KAA+B,CAACC,MAA6C;;AAExF,QAAMC,IAAOC,KAEP,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCjB,IAASkB,KAETC,IAAWC,EAAO,IAAI,GAEtB,EAAE,UAAAC,GAAU,OAAAC,EAAM,IAAIC,EAAa,GAEnCC,KAAaC,IAAAJ,EAAS,CAAC,MAAV,gBAAAI,EAAa,YAE1BC,KAAWC,IAAAN,EAAS,CAAC,MAAV,gBAAAM,EAAa,UAExB,EAAE,MAAAC,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,IACpD,MAAMhB;AAAA,IACN,cAAcC;AAAA,IACd,YAAY;AAAA,MACVgB,EAAO;AAAA,MACPC,EAAO,EAAE;AAAA,MACTC,EAAK,EAAE,WAAW,IAAM;AAAA,MACxBC,EAAM;AAAA,QACJ,WAAW;AAAA,QACX,UAAUnC,KAAA,gBAAAA,EAAQ;AAAA,QAClB,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,IAAI,QAAQ,GAAG;AAAA,MAAA,CACnD;AAAA,MACDoC,EAAM;AAAA,QACJ,SAASjB;AAAA,QACT,SAAS;AAAA,MAAA,CACV;AAAA,IACH;AAAA,IACA,sBAAsBkB;AAAA,EAAA,CACvB;AAED,EAAAC,EAAU,MAAM;AACV,QAAAjB,EAAS,WAAW;AACtB,MAAAL,EAAU,EAAK;AAAA,SACV;AACL,YAAMuB,IAAc,MAAM;
|
|
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} 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 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 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 <FloatingArrow \n ref={arrowRef} \n context={context} \n fill=\"#fff\" />\n\n {props.popup({ \n annotation, \n editable, \n event,\n onCreateBody,\n onDeleteBody,\n onUpdateBody\n })}\n </div>\n )\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":";;;;;;;;;;;;;;AAkBA,MAAMA,IAAY,CAACC,GAA8BC,MAAuB;AACtE,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,MAAAC,GAAM,MAAAC,MAASJ,EAAS,QAEtC,EAAE,KAAAK,GAAK,MAAAC,EAAA,IAASP,EAAO,QAAQ,yBAE/BQ,IAAUR,EAAO,SAAS,gCAAgC,IAAIS,EAAc,MAAMP,GAAMC,CAAI,CAAC,GAC7FO,IAAcV,EAAO,SAAS,gCAAgC,IAAIS,EAAc,MAAML,GAAMC,CAAI,CAAC;AAEvG,SAAO,IAAI;AAAA,IACTG,EAAQ,IAAID;AAAA,IACZC,EAAQ,IAAIF;AAAA,IACZI,EAAY,IAAKF,EAAQ;AAAA,IACzBE,EAAY,IAAIF,EAAQ;AAAA,EAAA;AAE5B,GAUaG,KAA+B,CAACC,MAA6C;;AAExF,QAAMC,IAAOC,KAEP,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCjB,IAASkB,KAETC,IAAWC,EAAO,IAAI,GAEtB,EAAE,UAAAC,GAAU,OAAAC,EAAM,IAAIC,EAAa,GAEnCC,KAAaC,IAAAJ,EAAS,CAAC,MAAV,gBAAAI,EAAa,YAE1BC,KAAWC,IAAAN,EAAS,CAAC,MAAV,gBAAAM,EAAa,UAExB,EAAE,MAAAC,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,IACpD,MAAMhB;AAAA,IACN,cAAcC;AAAA,IACd,YAAY;AAAA,MACVgB,EAAO;AAAA,MACPC,EAAO,EAAE;AAAA,MACTC,EAAK,EAAE,WAAW,IAAM;AAAA,MACxBC,EAAM;AAAA,QACJ,WAAW;AAAA,QACX,UAAUnC,KAAA,gBAAAA,EAAQ;AAAA,QAClB,SAAS,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,IAAI,QAAQ,GAAG;AAAA,MAAA,CACnD;AAAA,MACDoC,EAAM;AAAA,QACJ,SAASjB;AAAA,QACT,SAAS;AAAA,MAAA,CACV;AAAA,IACH;AAAA,IACA,sBAAsBkB;AAAA,EAAA,CACvB;AAED,EAAAC,EAAU,MAAM;AACV,QAAAjB,EAAS,WAAW;AACtB,MAAAL,EAAU,EAAK;AAAA,SACV;AACL,YAAMuB,IAAc,MAAM;AAGpB,YAAA,CAACvC,EAAO,QAAS;AAErB,cAAMwC,IAAOzC,EAAUC,GAAQwB,EAAW,OAAO,SAAS,QAAQ;AAElE,QAAAI,EAAK,aAAa;AAAA,UAChB,uBAAuB,MAAMY;AAAA,UAC7B,gBAAgB,MAAMC,EAAcD,CAAI;AAAA,QAAA,CACzC;AAAA,MAAA;AAGI,oBAAA,iBAAiB,UAAUD,GAAa,EAAI,GAC5C,OAAA,iBAAiB,UAAUA,CAAW,GACtCvC,EAAA,WAAW,mBAAmBuC,CAAW,GAEpCA,KAEZvB,EAAU,EAAI,GAEP,MAAM;AACJ,eAAA,oBAAoB,UAAUuB,GAAa,EAAI,GAC/C,OAAA,oBAAoB,UAAUA,CAAW,GACzCvC,EAAA,cAAc,mBAAmBuC,CAAW;AAAA,MAAA;AAAA,IAEvD;AAAA,KACC,CAAC3B,EAAM,OAAOS,GAAUrB,CAAM,CAAC;AAE5B,QAAA0C,IAAe,CAACC,MAAkC;AAChD,UAAAC,IAAKD,EAAK,MAAME,EAAO;AAExB,IAAAhC,EAAA,MAAM,MAAM,QAAQ;AAAA,MACvB,GAAG8B;AAAA,MACH,IAAAC;AAAA,MACA,YAAYpB,EAAW;AAAA,MACvB,SAASmB,EAAK,WAAW,oBAAI,KAAK;AAAA,MAClC,SAAS9B,EAAK,QAAQ;AAAA,IAAA,CACvB;AAAA,EAAA,GAGGiC,IAAe,CAACF,MAAe;AAC9B,IAAA/B,EAAA,MAAM,MAAM,WAAW,EAAE,IAAA+B,GAAI,YAAYpB,EAAW,IAAI;AAAA,EAAA,GAGzDuB,IAAe,CAACC,GAAyBC,MAAyB;AAChE,UAAAL,IAAKK,EAAK,MAAMJ,EAAO,GAEvBK,IAA0B;AAAA,MAC9B,6BAAa,KAAK;AAAA,MAClB,WAAWrC,EAAK,QAAQ;AAAA,MACxB,GAAGoC;AAAA,MACH,IAAAL;AAAA,MACA,YAAYpB,EAAW;AAAA,IAAA;AAGzB,IAAAX,EAAK,MAAM,MAAM,WAAWmC,GAASE,CAAO;AAAA,EAAA;AAG9C,SAAOnC,KAAUS,KACf2B,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAKvB,EAAK;AAAA,MACV,OAAOC;AAAA,MAEP,UAAA;AAAA,QAAAuB,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKlC;AAAA,YACL,SAAAW;AAAA,YACA,MAAK;AAAA,UAAA;AAAA,QAAO;AAAA,QAEblB,EAAM,MAAM;AAAA,UACX,YAAAY;AAAA,UACA,UAAAE;AAAA,UACA,OAAAJ;AAAA,UACA,cAAAoB;AAAA,UACA,cAAAI;AAAA,UACA,cAAAC;AAAA,QAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIP;"}
|
|
@@ -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;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AA8BrD,UAAU,iCAAiC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAEzC;AAED,eAAO,MAAM,4BAA4B,UAAW,iCAAiC,
|
|
1
|
+
{"version":3,"file":"OpenSeadragonAnnotationPopup.d.ts","sourceRoot":"","sources":["../../src/openseadragon/OpenSeadragonAnnotationPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAI/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AA8BrD,UAAU,iCAAiC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,KAAK,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAEzC;AAED,eAAO,MAAM,4BAA4B,UAAW,iCAAiC,4CAyHpF,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@annotorious/react",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.9",
|
|
4
4
|
"description": "Annotorious React bindings",
|
|
5
5
|
"author": "Rainer Simon",
|
|
6
6
|
"license": "BSD-3-Clause",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"./annotorious-react.css": "./dist/annotorious-react.css"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@types/react": "^18.3.
|
|
28
|
+
"@types/react": "^18.3.9",
|
|
29
29
|
"@types/react-dom": "^18.3.0",
|
|
30
30
|
"@vitejs/plugin-react": "^4.3.1",
|
|
31
31
|
"typescript": "5.6.2",
|
|
32
|
-
"vite": "^5.4.
|
|
33
|
-
"vite-plugin-dts": "^4.2.
|
|
32
|
+
"vite": "^5.4.8",
|
|
33
|
+
"vite-plugin-dts": "^4.2.2",
|
|
34
34
|
"vite-tsconfig-paths": "^5.0.1"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@annotorious/annotorious": "3.0.
|
|
48
|
-
"@annotorious/core": "3.0.
|
|
49
|
-
"@annotorious/openseadragon": "3.0.
|
|
47
|
+
"@annotorious/annotorious": "3.0.9",
|
|
48
|
+
"@annotorious/core": "3.0.9",
|
|
49
|
+
"@annotorious/openseadragon": "3.0.9",
|
|
50
50
|
"@floating-ui/react": "^0.26.24"
|
|
51
51
|
},
|
|
52
52
|
"sideEffects": false
|