Only preserve the viewport if the preserved viewport 'makes sense'

Author: cbeer

__tests__/integration/mirador/mirador-configs/index.js

@@ -20,12 +20,6 @@ export default {
     transitions: {},
   },
   windows: [{
-    canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892',
-    manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
-  },
-  {
-    canvasId: 'https://iiif.bodleian.ox.ac.uk/iiif/canvas/e58b8c60-005c-4c41-a22f-07d49cb25ede.json',
-    manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json',
-    thumbnailNavigationPosition: 'far-bottom',
+    manifestId: 'https://wellcomelibrary.org/iiif/b18035723/manifest',
   }],
 };

src/components/OpenSeadragonComponent.js

@@ -33,6 +33,11 @@ function OpenSeadragonComponent({
       bounds: viewport.getBounds(),
       flip: viewport.getFlip(),
       rotation: viewport.getRotation(),
+      worldBounds: (() => {
+        const homeBounds = viewport.viewer.world.getHomeBounds();
+
+        return [homeBounds.x, homeBounds.y, homeBounds.width, homeBounds.height];
+      })(),
       x: Math.round(viewport.centerSpringX.target.value),
       y: Math.round(viewport.centerSpringY.target.value),
       zoom: viewport.zoomSpring.target.value,
@@ -105,17 +110,41 @@ function OpenSeadragonComponent({
     const bounds = viewerConfig.bounds || worldBounds;
     if (bounds && !viewerConfig.x && !viewerConfig.y && !viewerConfig.zoom) {
       const rect = new Openseadragon.Rect(...bounds);
-      if (rect.equals(viewport.getBounds())) {
+      if (!rect.equals(viewport.getBounds())) {
         viewport.fitBounds(rect, false);
       }
     }
   }, [initialViewportSet, setInitialBounds, viewerConfig, viewerRef, worldBounds]);
 
+  useEffect(() => {
+    if (!osdConfig.preserveViewport) return;
+    if (!viewerConfig?.worldBounds || !worldBounds) return;
+
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+    const { viewport } = viewer;
+
+    const [_x, _y, width, height] = viewerConfig.worldBounds;
+    const [_x1, _y1, width1, height1] = worldBounds;
+
+    const previousAspectRatio = (1.0 * width) / height;
+    const newAspectRatio = (1.0 * width1) / height1;
+
+    if ((previousAspectRatio < (1 - osdConfig.resetViewportAfterAspectRatioDelta) * newAspectRatio)
+        || (previousAspectRatio > (1 + osdConfig.resetViewportAfterAspectRatioDelta) * newAspectRatio)) {
+      const rect = new Openseadragon.Rect(...worldBounds);
+      if (!rect.equals(viewport.getBounds())) {
+        viewport.fitBounds(rect, false);
+      }
+    }
+  }, [osdConfig, viewerConfig, worldBounds, viewerRef]);
+
   // initialize OSD stuff when this component is mounted
   useEffect(() => {
     const viewer = Openseadragon({
       element: ref.current,
       ...osdConfig,
+      preserveViewportAspectRatio: undefined,
     });
 
     viewer.addHandler('canvas-drag', () => {

src/components/OpenSeadragonViewer.js

@@ -33,11 +33,12 @@ export function OpenSeadragonViewer({
   const apiRef = useRef();
   const [viewer, setViewer] = useState(null);
   const onViewportChange = useCallback(({
-    flip, rotation, x, y, zoom,
+    flip, rotation, worldBounds, x, y, zoom,
   }) => {
     updateViewport(windowId, {
       flip,
       rotation,
+      worldBounds,
       x,
       y,
       zoom,

src/config/settings.js

@@ -545,6 +545,7 @@ export default {
     blendTime: 0.1,
     preserveImageSizeOnResize: true,
     preserveViewport: true,
+    resetViewportAfterAspectRatioDelta: 0.25,
     showNavigationControl: false,
     zoomPerClick: 1, // disable zoom-to-click
     zoomPerDoubleClick: 2.0