Open components to support multiple image resources per canvas

__tests__/src/lib/CanvasWorld.test.js

@@ -19,9 +19,9 @@ describe('CanvasWorld', () => {
   });
   describe('canvasToWorldCoordinates', () => {
     it('converts canvas coordinates to world offset by location', () => {
-      expect(new CanvasWorld([canvases[1]]).canvasToWorldCoordinates(0))
+      expect(new CanvasWorld([canvases[1]]).canvasToWorldCoordinates({ '@id': 'https://stacks.stanford.edu/image/iiif/fr426cg9537%2FSC1094_s3_b14_f17_Cats_1976_0005' }))
         .toEqual([0, 0, 6501, 4421]);
-      expect(new CanvasWorld(canvasSubset).canvasToWorldCoordinates(1))
+      expect(new CanvasWorld(canvasSubset).canvasToWorldCoordinates({ '@id': 'https://stacks.stanford.edu/image/iiif/rz176rt6531%2FPC0170_s3_Tree_Calendar_20081101_152516_0410' }))
         .toEqual([6305, 0, 2848, 4288]);
     });
     it('supports RTL orientations', () => {

__tests__/src/lib/ManifestoCanvas.test.js

@@ -85,13 +85,13 @@ describe('ManifestoCanvas', () => {
   });
   describe('imageInformationUri', () => {
     it('correctly returns an image information url for a v2 Image API', () => {
-      expect(instance.imageInformationUri).toEqual('https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/info.json');
+      expect(instance.imageInformationUri()).toEqual('https://stacks.stanford.edu/image/iiif/hg676jb4964%2F0380_796-44/info.json');
     });
     it('correctly returns an image information url for a v1 Image API', () => {
       const imagev1Instance = new ManifestoCanvas(
         Utils.parseManifest(imagev1Fixture).getSequences()[0].getCanvases()[0],
       );
-      expect(imagev1Instance.imageInformationUri).toEqual('https://images.britishart.yale.edu/iiif/b38081da-8991-4464-a71e-d9891226a35f/info.json');
+      expect(imagev1Instance.imageInformationUri()).toEqual('https://images.britishart.yale.edu/iiif/b38081da-8991-4464-a71e-d9891226a35f/info.json');
     });
 
     it('is undefined if a canvas is empty (e.g. has no images)', () => {
@@ -99,7 +99,7 @@ describe('ManifestoCanvas', () => {
         Utils.parseManifest(emptyCanvasFixture).getSequences()[0].getCanvases()[3],
       );
 
-      expect(emptyCanvasInstance.imageInformationUri).toBeUndefined();
+      expect(emptyCanvasInstance.imageInformationUri()).toBeUndefined();
     });
   });
   describe('aspectRatio', () => {

src/components/WindowViewer.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import flatten from 'lodash/flatten';
 import OSDViewer from '../containers/OpenSeadragonViewer';
 import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
 import ManifestoCanvas from '../lib/ManifestoCanvas';
@@ -33,12 +34,16 @@ export class WindowViewer extends Component {
     if (!this.infoResponseIsInStore()) {
       currentCanvases.forEach((canvas) => {
         const manifestoCanvas = new ManifestoCanvas(canvas);
-        const { imageResource } = manifestoCanvas;
-        if (imageResource) {
+        manifestoCanvas.imageResources.forEach((imageResource) => {
           fetchInfoResponse({ imageResource });
-        }
+        });
         manifestoCanvas.processAnnotations(fetchAnnotation, receiveAnnotation);
       });
+
+      currentCanvases.map(canvas => new ManifestoCanvas(canvas))
+        .map(manifestoCanvas => manifestoCanvas.annotationListUris.forEach((uri) => {
+          fetchAnnotation(manifestoCanvas.canvas.id, uri);
+        }));
     }
   }
 
@@ -56,12 +61,16 @@ export class WindowViewer extends Component {
     ) {
       currentCanvases.forEach((canvas) => {
         const manifestoCanvas = new ManifestoCanvas(canvas);
-        const { imageResource } = manifestoCanvas;
-        if (imageResource) {
+        manifestoCanvas.imageResources.forEach((imageResource) => {
           fetchInfoResponse({ imageResource });
-        }
+        });
         manifestoCanvas.processAnnotations(fetchAnnotation, receiveAnnotation);
       });
+
+      currentCanvases.map(canvas => new ManifestoCanvas(canvas))
+        .map(manifestoCanvas => manifestoCanvas.annotationListUris.forEach((uri) => {
+          fetchAnnotation(manifestoCanvas.canvas.id, uri);
+        }));
     }
   }
 
@@ -71,24 +80,29 @@ export class WindowViewer extends Component {
    * @return [Boolean]
    */
   infoResponseIsInStore() {
-    const { currentCanvases } = this.props;
-
     const responses = this.currentInfoResponses();
-    if (responses.length === currentCanvases.length) {
+    if (responses.length === this.imageIds().length) {
       return true;
     }
     return false;
   }
 
+  /** */
+  imageIds() {
+    const { currentCanvases } = this.props;
+
+    return flatten(currentCanvases.map(canvas => new ManifestoCanvas(canvas).imageIds));
+  }
+
   /**
    * currentInfoResponses - Selects infoResponses that are relevent to existing
    * canvases to be displayed.
    */
   currentInfoResponses() {
-    const { currentCanvases, infoResponses } = this.props;
+    const { infoResponses } = this.props;
 
-    return currentCanvases.map(canvas => (
-      infoResponses[new ManifestoCanvas(canvas).imageId]
+    return this.imageIds().map(imageId => (
+      infoResponses[imageId]
     )).filter(infoResponse => (infoResponse !== undefined
       && infoResponse.isFetching === false
       && infoResponse.error === undefined));
@@ -98,12 +112,10 @@ export class WindowViewer extends Component {
    * Return an image information response from the store for the correct image
    */
   tileInfoFetchedFromStore() {
-    const { currentCanvases } = this.props;
-
     const responses = this.currentInfoResponses()
       .map(infoResponse => infoResponse.json);
     // Only return actual tileSources when all current canvases have completed.
-    if (responses.length === currentCanvases.length) {
+    if (responses.length === this.imageIds().length) {
       return responses;
     }
     return [];

src/lib/CanvasWorld.js

+import normalizeUrl from 'normalize-url';
+import ManifestoCanvas from './ManifestoCanvas';
+
 /**
  * CanvasWorld
  */
@@ -20,8 +23,9 @@ export default class CanvasWorld {
    * canvasToWorldCoordinates - calculates the canvas coordinates respective to
    * the world.
    */
-  canvasToWorldCoordinates(i) {
+  canvasToWorldCoordinates(tileSource) {
     const wholeBounds = this.worldBounds();
+    const i = this.indexOfImageResource(tileSource['@id']);
     const canvas = this.canvases[i];
     const aspectRatio = canvas.getWidth() / canvas.getHeight();
     const scaledWidth = Math.floor(wholeBounds[3] * aspectRatio);
@@ -50,6 +54,14 @@ export default class CanvasWorld {
     return this.canvases.map(canvas => canvas.id).indexOf(canvasTarget);
   }
 
+  /** @private */
+  indexOfImageResource(imageId) {
+    return this.canvases.findIndex(c => new ManifestoCanvas(c).imageIds.some(id => (
+      normalizeUrl(id, { stripAuthentication: false })
+        === normalizeUrl(imageId, { stripAuthentication: false })
+    )));
+  }
+
   /**
    * offsetByCanvas - calculates the offset for a given canvas target. Currently
    * assumes a horrizontal only layout.

src/lib/ManifestoCanvas.js

 import flatten from 'lodash/flatten';
-import { Utils } from 'manifesto.js/dist-esmodule/Utils';
+import flattenDeep from 'lodash/flattenDeep';
+import { Canvas, Utils } from 'manifesto.js';
 /**
  * ManifestoCanvas - adds additional, testable logic around Manifesto's Canvas
  * https://iiif-commons.github.io/manifesto/classes/_canvas_.manifesto.canvas.html
@@ -16,12 +17,13 @@ export default class ManifestoCanvas {
    * Implements Manifesto's canonicalImageUri algorithm to support
    * IIIF Presentation v3
    */
-  canonicalImageUri(w, format = 'jpg') {
-    const service = this.imageResource.getServices()[0];
+  canonicalImageUri(w, format = 'jpg', resourceId = undefined) {
+    const resource = this.getImageResourceOrDefault(resourceId);
+    const service = resource && resource.getServices()[0];
     if (!(service)) return undefined;
     const region = 'full';
     let size = w;
-    const imageWidth = this.imageResource.getWidth();
+    const imageWidth = resource.getWidth();
     if ((!w) || w === imageWidth) size = 'full';
     const quality = Utils.getImageQuality(service.getProfile());
     const id = service.id.replace(/\/+$/, '');
@@ -79,36 +81,24 @@ export default class ManifestoCanvas {
    * Will negotiate a v2 or v3 type of resource
    */
   get imageResource() {
-    return (this.presentation2ImageResource || this.presentation3ImageResource);
+    return this.imageResources[0];
   }
 
   /** */
-  get presentation2ImageResource() {
-    if (!(
-      this.canvas.getImages()[0]
-      && this.canvas.getImages()[0].getResource()
-      && this.canvas.getImages()[0].getResource().getServices()[0]
-      && this.canvas.getImages()[0].getResource().getServices()[0].id
-    )) {
-      return undefined;
-    }
-
-    return this.canvas.getImages()[0].getResource();
-  }
-
-  /** */
-  get presentation3ImageResource() {
-    if (!(
-      this.canvas.getContent()[0]
-      && this.canvas.getContent()[0]
-      && this.canvas.getContent()[0].getBody()[0]
-      && this.canvas.getContent()[0].getBody()[0].getServices()[0]
-      && this.canvas.getContent()[0].getBody()[0].getServices()[0].id
-    )) {
-      return undefined;
+  get imageResources() {
+    const resources = flattenDeep([
+      this.canvas.getImages().map(i => i.getResource()),
+      this.canvas.getContent().map(i => i.getBody()),
+    ]);
+
+    return flatten(resources.map((resource) => {
+      switch (resource.getProperty('type')) {
+        case 'oa:Choice':
+          return new Canvas({ images: flatten([resource.getProperty('default'), resource.getProperty('item')]).map(r => ({ resource: r })) }, this.canvas.options).getImages().map(i => i.getResource());
+        default:
+          return resource;
       }
-
-    return this.canvas.getContent()[0].getBody()[0];
+    })).filter(r => r && r.getServices()[0] && r.getServices()[0].id);
   }
 
   /**
@@ -121,15 +111,29 @@ export default class ManifestoCanvas {
     return this.imageResource.getServices()[0].id;
   }
 
-  /**
-   */
-  get imageInformationUri() {
-    if (!(this.imageId)) {
-      return undefined;
+  /** */
+  get imageIds() {
+    return this.imageResources.map(r => r.getServices()[0].id);
+  }
+
+  /** */
+  getImageResourceOrDefault(resourceId) {
+    const resources = this.imageResources;
+
+    if (resourceId) return resources.find(r => r.id === resourceId);
+    return resources[0];
   }
 
+  /** @private */
+  imageInformationUri(resourceId) {
+    const image = this.getImageResourceOrDefault(resourceId);
+
+    const imageId = image && image.getServices()[0].id;
+
+    if (!imageId) return undefined;
+
     return `${
-      this.imageId.replace(/\/$/, '')
+      imageId.replace(/\/$/, '')
     }/info.json`;
   }
 
@@ -183,11 +187,11 @@ export default class ManifestoCanvas {
    * Creates a canonical image request for a thumb
    * @param {Number} height
    */
-  thumbnail(maxWidth = undefined, maxHeight = undefined) {
+  thumbnail(maxWidth = undefined, maxHeight = undefined, resourceId = undefined) {
     let width;
     let height;
 
-    if (!this.imageInformationUri) {
+    if (!this.imageInformationUri(resourceId)) {
       return undefined;
     }
 
@@ -205,7 +209,7 @@ export default class ManifestoCanvas {
     // note that, although the IIIF server may support sizeByConfinedWh (e.g. !w,h)
     // this is a IIIF level 2 feature, so we're instead providing w, or h,-style requests
     // which are only level 1.
-    return this.canonicalImageUri().replace(/\/full\/.*\/0\//, `/full/${width || ''},${height || ''}/0/`);
+    return this.canonicalImageUri(undefined, undefined, resourceId).replace(/\/full\/.*\/0\//, `/full/${width || ''},${height || ''}/0/`);
   }
 
   /** @private */

src/state/selectors/canvases.js

@@ -2,6 +2,7 @@ import { createSelector } from 'reselect';
 import { Utils } from 'manifesto.js/dist-esmodule/Utils';
 import flatten from 'lodash/flatten';
 import CanvasGroupings from '../../lib/CanvasGroupings';
+import ManifestoCanvas from '../../lib/ManifestoCanvas';
 import { getManifestoInstance } from './manifests';
 import { getWindow, getWindowViewType } from './windows';
 
@@ -200,11 +201,16 @@ export const selectInfoResponse = createSelector(
     getCanvas,
     selectInfoResponses,
   ],
-  (canvas, infoResponses) => canvas && canvas.getImages()[0]
-    && canvas.getImages()[0].getResource().getServices()[0]
-    && infoResponses[canvas.getImages()[0].getResource().getServices()[0].id]
-    && !infoResponses[canvas.getImages()[0].getResource().getServices()[0].id].isFetching
-    && infoResponses[canvas.getImages()[0].getResource().getServices()[0].id],
+  (canvas, infoResponses) => {
+    if (!canvas) return undefined;
+    const manifestoCanvas = new ManifestoCanvas(canvas);
+    const image = manifestoCanvas.imageResources[0];
+    const iiifServiceId = image && image.getServices()[0].id;
+
+    return iiifServiceId && infoResponses[iiifServiceId]
+    && !infoResponses[iiifServiceId].isFetching
+    && infoResponses[iiifServiceId];
+  },
 );
 
 const authServiceProfiles = {