diff --git a/package-lock.json b/package-lock.json index 70ec3285f..5f7c3f1ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,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.29", "@openseadragon-imaging/openseadragon-viewerinputhook": "^2.2.1", @@ -1309,9 +1309,9 @@ } }, "node_modules/@iiif/manifold": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@iiif/manifold/-/manifold-2.1.2.tgz", - "integrity": "sha512-odunugOfwagjDzJvYdhlrRrZ5C8nNoaxNH7FTcgORalu0H9nufVXmWSMIKbDpdCY2kRURW+7F3aKgKuu4sZS2w==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@iiif/manifold/-/manifold-2.1.3.tgz", + "integrity": "sha512-vOdXo/j3zew0kRSqKxXDVNg4fDS8JygkTlrnCepAxbz/HVyCUTiVlh38rUimYLEWDEGU2LymmSof+PGk3uPuLA==", "license": "MIT", "dependencies": { "@edsilv/http-status-codes": "^1.0.3", diff --git a/package.json b/package.json index 2d5644269..8734ab89b 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,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.29", "@openseadragon-imaging/openseadragon-viewerinputhook": "^2.2.1", diff --git a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts index c38a755cd..120da3b5c 100644 --- a/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts +++ b/src/content-handlers/iiif/extensions/uv-openseadragon-extension/Extension.ts @@ -1581,7 +1581,7 @@ export default class OpenSeadragonExtension extends BaseExtension { 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; diff --git a/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts b/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts index 6bc0fcf90..077041741 100644 --- a/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.ts +++ b/src/content-handlers/iiif/modules/uv-openseadragoncenterpanel-module/OpenSeadragonCenterPanel.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( @@ -912,6 +915,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(); @@ -925,6 +935,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(); @@ -1506,20 +1568,27 @@ 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); + } + + // stretch navigator, allowing time for OSD to resize + // setTimeout(() => { + // 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()); + // } + // } + // }, 100); } setFocus(): void { diff --git a/src/content-handlers/iiif/modules/uv-shared-module/BaseExtension.ts b/src/content-handlers/iiif/modules/uv-shared-module/BaseExtension.ts index 5ac365ebb..f08d60983 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/BaseExtension.ts +++ b/src/content-handlers/iiif/modules/uv-shared-module/BaseExtension.ts @@ -31,7 +31,7 @@ import { Manifest, Range, } from "manifesto.js"; -import { ViewingHint } from "@iiif/vocabulary/dist-commonjs/"; +// import { ViewingHint } from "@iiif/vocabulary/dist-commonjs/"; import * as KeyCodes from "../../KeyCodes"; import { Bools, @@ -1091,12 +1091,7 @@ export class BaseExtension 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; } }