Issue 1503, fix continuous behavior (#1519)

Author: jamesmisson

package-lock.json

@@ -99,7 +99,7 @@
     "@google/model-viewer": "^4.0.0",
     "@iiif/base-component": "2.0.1",
     "@iiif/iiif-av-component": "1.2.4",
-    "@iiif/manifold": "^2.1.1",
+    "@iiif/manifold": "^2.1.3",
     "@iiif/presentation-3": "^1.0.5",
     "@iiif/vocabulary": "^1.0.31",
     "@openseadragon-imaging/openseadragon-viewerinputhook": "^2.2.1",

package.json

@@ -1588,7 +1588,7 @@ export default class OpenSeadragonExtension extends BaseExtension<Config> {
     let indices: number[] = [];
 
     // if it's a continuous manifest, get all resources.
-    if (sequence.getViewingHint() === ViewingHint.CONTINUOUS) {
+    if (this.helper.isContinuous()) {
       // get all canvases to be displayed inline
       indices = canvases.map((_canvas: Canvas, index: number) => {
         return index;

src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts

@@ -251,10 +251,13 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
       maxZoomPixelRatio: this.config.options.maxZoomPixelRatio || 2,
       controlsFadeDelay: this.config.options.controlsFadeDelay || 250,
       controlsFadeLength: this.getControlsFadeLength(),
-      navigatorPosition:
-        this.config.options.navigatorPosition || "BOTTOM_RIGHT",
+      navigatorPosition: this.extension.helper.isContinuous()
+        ? "BOTTOM_LEFT"
+        : this.config.options.navigatorPosition || "BOTTOM_RIGHT",
       navigatorHeight: "100px",
       navigatorWidth: "100px",
+      navigatorMaintainSizeRatio: false,
+      navigatorAutoResize: false,
       animationTime: this.config.options.animationTime || 1.2,
       visibilityRatio: this.config.options.visibilityRatio || 0.5,
       constrainDuringPan: Bools.getBool(
@@ -914,6 +917,13 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
 
     this.setNavigatorVisible();
 
+    // resize navigator for continuous manifests
+    if (this.extension.helper.isContinuous()) {
+      setTimeout(() => {
+        this.resizeNavigatorForContinuous();
+      }, 200);
+    }
+
     this.overlayAnnotations();
 
     this.updateBounds();
@@ -927,6 +937,58 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
     this.isFirstLoad = false;
   }
 
+  private resizeNavigatorForContinuous(): void {
+    if (!this.viewer || !this.viewer.navigator) return;
+
+    const homeBounds = this.viewer.world.getHomeBounds();
+    const contentAspectRatio = homeBounds.width / homeBounds.height;
+
+    const viewportWidth = this.$viewer.width();
+    const viewportHeight = this.$viewer.height();
+    const maxNavigatorWidth = 100;
+    const maxNavigatorHeight = 100;
+    const minVerticalNavigatorWidth = 60;
+    const minHorizontalNavigatorHeight = 40;
+
+    let navigatorWidth: number;
+    let navigatorHeight: number;
+
+    if (this.extension.helper.isVerticallyAligned()) {
+      navigatorHeight = viewportHeight - this.$zoomInButton.height() - 4;
+      navigatorWidth = navigatorHeight * contentAspectRatio;
+
+      // Enforce max width
+      if (navigatorWidth > maxNavigatorWidth) {
+        navigatorWidth = maxNavigatorWidth;
+      }
+
+      // Enforce min width
+      if (navigatorWidth < minVerticalNavigatorWidth) {
+        navigatorWidth = minVerticalNavigatorWidth;
+      }
+    } else {
+      navigatorWidth = viewportWidth;
+      navigatorHeight = navigatorWidth / contentAspectRatio;
+
+      // Enforce max height
+      if (navigatorHeight > maxNavigatorHeight) {
+        navigatorHeight = maxNavigatorHeight;
+      }
+
+      // Enforce min height
+      if (navigatorHeight < minHorizontalNavigatorHeight) {
+        navigatorHeight = minHorizontalNavigatorHeight;
+      }
+    }
+
+    const navigatorElement = this.viewer.navigator.element;
+    navigatorElement.style.width = `${navigatorWidth}px`;
+    navigatorElement.style.height = `${navigatorHeight}px`;
+
+    this.viewer.navigator.viewport.fitBounds(homeBounds, true);
+    this.viewer.navigator.updateSize();
+  }
+
   zoomToInitialAnnotation(): void {
     const annotationRect: AnnotationRect | null =
       this.getInitialAnnotationRect();
@@ -1508,20 +1570,14 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
           );
           break;
       }
-    }
 
-    // stretch navigator, allowing time for OSD to resize
-    setTimeout(() => {
+      // resize navigator for continuous manifests
       if (this.extension.helper.isContinuous()) {
-        if (this.extension.helper.isHorizontallyAligned()) {
-          const width: number =
-            this.$viewer.width() - this.$viewer.rightMargin();
-          this.$navigator.width(width);
-        } else {
-          this.$navigator.height(this.$viewer.height());
-        }
+        setTimeout(() => {
+          this.resizeNavigatorForContinuous();
+        }, 200);
       }
-    }, 100);
+    }
   }
 
   setFocus(): void {

src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts

@@ -31,7 +31,6 @@ import {
   Manifest,
   Range,
 } from "manifesto.js";
-import { ViewingHint } from "@iiif/vocabulary/dist-commonjs/";
 import * as KeyCodes from "../../KeyCodes";
 import {
   Bools,
@@ -1091,12 +1090,7 @@ export class BaseExtension<T extends BaseConfig> implements IExtension {
       if (this.helper.hasParentCollection()) {
         return true;
       } else if (this.helper.isMultiCanvas()) {
-        const viewingHint: ViewingHint | null = this.helper.getViewingHint();
-
-        if (
-          !viewingHint ||
-          (viewingHint && viewingHint !== ViewingHint.CONTINUOUS)
-        ) {
+        if (!this.helper.isContinuous()) {
           return true;
         }
       }