have viewer update with xywh coordinates

ProjectMirador · Dec 10, 2024 · d3b75b5 · d3b75b5
1 parent 26409c7
commit d3b75b5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/__tests__/src/components/OpenSeadragonViewer.test.js b/__tests__/src/components/OpenSeadragonViewer.test.js
@@ -85,6 +85,7 @@ describe('OpenSeadragonViewer', () => {
         getBounds: () => [],
         getFlip: () => false,
         getRotation: () => 90,
+        viewportToImageRectangle: () => '0,0,0,0',
         zoomSpring: { target: { value: 0.5 } },
       });
 

diff --git a/src/components/OpenSeadragonComponent.js b/src/components/OpenSeadragonComponent.js
@@ -23,9 +23,19 @@ function OpenSeadragonComponent({
     viewerRef.current?.raiseEvent('mouse-move', event);
   }, [viewerRef]), 10);
 
+  /** OSD returns negative and float bounds */
+  const convertToIIIFCoords = (bounds) => {
+    if (bounds < 0) return 0;
+    return Math.round(bounds);
+  };
+
   const onViewportChange = useCallback((event) => {
     const { viewport } = event.eventSource;
 
+    const imageBounds = viewport.viewportToImageRectangle(viewport.getBounds());
+    const parsedBounds = `${convertToIIIFCoords(imageBounds.x)},${convertToIIIFCoords(imageBounds.y)},${convertToIIIFCoords(imageBounds.width)},${convertToIIIFCoords(imageBounds.height)}`;
+    viewerRef.current?.element.parentNode.setAttribute('data-xywh-coords', parsedBounds);
+
     onUpdateViewport({
       bounds: viewport.getBounds(),
       flip: viewport.getFlip(),

diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js
@@ -93,7 +93,7 @@ export function PrimaryWindow({
   };
 
   return (
-    <Root data-testid="test-window" className={classNames(ns('primary-window'), className)}>
+    <Root data-testid="test-window" data-parent-window-id={windowId} className={classNames(ns('primary-window'), className)}>
       <WindowSideBar windowId={windowId} />
       <CompanionArea windowId={windowId} position="left" />
       { isCollectionDialogVisible && <CollectionDialog windowId={windowId} /> }