Upgrade to OpenSeadragon 6.

package.json

@@ -118,7 +118,7 @@
     "manifesto.js": "^4.3.0",
     "mediaelement": "4.2.15",
     "mediaelement-plugins": "5.0.0",
-    "openseadragon": "4.0.0",
+    "openseadragon": "^6.0.0",
     "pdfjs-dist": "3.11.174",
     "pdfobject": "2.3.0",
     "react": "^19.0.0",

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

@@ -25,6 +25,12 @@ import { MediaType } from "@iiif/vocabulary/dist-commonjs";
 import { Events } from "../../../../Events";
 import { Config } from "../../extensions/uv-openseadragon-extension/config/Config";
 
+interface AnnotationOverlayRect extends OpenSeadragon.Rect {
+  canvasIndex: number;
+  resultIndex: number;
+  chars: string;
+}
+
 export class OpenSeadragonCenterPanel extends CenterPanel<
   Config["modules"]["openSeadragonCenterPanel"]
 > {
@@ -238,7 +244,8 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
     this.viewer = OpenSeadragon({
       // id: this.viewerId,
       element: this.$viewer[0],
-      // crossOriginPolicy: "Anonymous",
+      drawer: "auto",
+      crossOriginPolicy: "Anonymous",
       showNavigationControl: true,
       showNavigator: true,
       showRotationControl: true,
@@ -251,13 +258,13 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
       maxZoomPixelRatio: this.config.options.maxZoomPixelRatio || 2,
       controlsFadeDelay: this.config.options.controlsFadeDelay || 250,
       controlsFadeLength: this.getControlsFadeLength(),
-      navigatorPosition: this.extension.helper.isContinuous()
+      navigatorPosition: (this.extension.helper.isContinuous()
         ? "BOTTOM_LEFT"
-        : this.config.options.navigatorPosition || "BOTTOM_RIGHT",
+        : this.config.options.navigatorPosition ||
+          "BOTTOM_RIGHT") as OpenSeadragon.Options["navigatorPosition"],
       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(
@@ -273,7 +280,7 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
         this.config.options.autoHideControls,
         true
       ),
-      prefixUrl: null,
+      prefixUrl: undefined,
       gestureSettingsMouse: {
         clickToZoom: Bools.getBool(
           this.extension.data.config!.options.clickToZoomEnabled,
@@ -323,6 +330,18 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
           HOVER: pixel,
           DOWN: pixel,
         },
+        fullpage: {
+          REST: pixel,
+          GROUP: pixel,
+          HOVER: pixel,
+          DOWN: pixel,
+        },
+        flip: {
+          REST: pixel,
+          GROUP: pixel,
+          HOVER: pixel,
+          DOWN: pixel,
+        },
       },
       // The max number of milliseconds that an image job may take to complete.
       timeout: this.config.options.tileTimeout || 30_000,
@@ -523,10 +542,6 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
       this.config.options.controlsFadeAfterInactive
     );
 
-    this.viewer.addHandler("tile-drawn", () => {
-      this.$spinner.hide();
-    });
-
     //this.viewer.addHandler("open-failed", () => {
     //});
 
@@ -771,9 +786,14 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
       return;
     }
 
-    this.$spinner.show();
+    this.viewer.close();
     this.items = [];
 
+    // only show spinner if loading takes longer than 200ms to avoid quick flash of spinner between images
+    const spinnerTimeout = setTimeout(() => {
+      this.$spinner.show();
+    }, 200);
+
     let images: IExternalResourceData[] =
       await this.extension.getExternalResources(resources);
 
@@ -812,6 +832,9 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
           success: (item: any) => {
             this.items.push(item);
             if (this.items.length === images.length) {
+              clearTimeout(spinnerTimeout);
+              this.$spinner.hide();
+
               this.openPagesHandler();
             }
             this.resize();
@@ -1032,7 +1055,8 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
 
     for (let i = 0; i < annotations.length; i++) {
       const annotation: AnnotationGroup = annotations[i];
-      const rects: any[] = this.getAnnotationOverlayRects(annotation);
+      const rects: AnnotationOverlayRect[] =
+        this.getAnnotationOverlayRects(annotation);
 
       for (let k = 0; k < rects.length; k++) {
         const rect = rects[k];
@@ -1471,7 +1495,9 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
     $(".annotationRect").not($rect).removeClass("current");
   }
 
-  getAnnotationOverlayRects(annotationGroup: AnnotationGroup): any[] {
+  getAnnotationOverlayRects(
+    annotationGroup: AnnotationGroup
+  ): AnnotationOverlayRect[] {
     const newRects: any[] = [];
 
     if (!this.extension.resources) {
@@ -1499,7 +1525,7 @@ export class OpenSeadragonCenterPanel extends CenterPanel<
       const w: number = searchRect.width;
       const h: number = searchRect.height;
 
-      const rect = new OpenSeadragon.Rect(x, y, w, h);
+      const rect = new OpenSeadragon.Rect(x, y, w, h) as AnnotationOverlayRect;
       searchRect.viewportX = x;
       searchRect.viewportY = y;
       rect.canvasIndex = searchRect.canvasIndex;