Extract getCurrentCanvasWorld selector

__tests__/src/selectors/viewer.test.js

+import {
+  getCurrentCanvasWorld,
+} from '../../../src/state/selectors/viewer';
+
+describe('getCurrentCanvasWorld', () => {
+  it('returns a CanvasWorld', () => {
+    const windowId = 'id';
+    const state = {
+      manifests: {
+        a: {
+          json: {
+            '@context': 'http://iiif.io/api/presentation/3/context.json',
+            id: 'whatever',
+            items: [
+              { '@id': 'a1', type: 'Canvas' },
+              { '@id': 'a2', type: 'Canvas' },
+            ],
+            type: 'Manifest',
+            viewingDirection: 'sideways',
+          },
+        },
+      },
+      windows: {
+        [windowId]: {
+          manifestId: 'a',
+          visibleCanvases: [
+            'a1', 'a2',
+          ],
+        },
+      },
+    };
+
+    const actual = getCurrentCanvasWorld(state, { windowId });
+    expect(actual.canvases.length).toEqual(2);
+    expect(Object.keys(actual.layers).length).toEqual(2);
+    expect(actual.viewingDirection).toEqual('sideways');
+  });
+});

src/containers/AnnotationsOverlay.js

@@ -4,18 +4,15 @@ import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import { AnnotationsOverlay } from '../components/AnnotationsOverlay';
 import * as actions from '../state/actions';
-import CanvasWorld from '../lib/CanvasWorld';
 import {
   getWindow,
-  getSequenceViewingDirection,
-  getLayersForVisibleCanvases,
-  getVisibleCanvases,
   getSearchAnnotationsForWindow,
   getCompanionWindowsForContent,
   getTheme,
   getConfig,
   getPresentAnnotationsOnSelectedCanvases,
   getSelectedAnnotationId,
+  getCurrentCanvasWorld,
 } from '../state/selectors';
 
 /**
@@ -25,11 +22,7 @@ import {
  */
 const mapStateToProps = (state, { windowId }) => ({
   annotations: getPresentAnnotationsOnSelectedCanvases(state, { windowId }),
-  canvasWorld: new CanvasWorld(
-    getVisibleCanvases(state, { windowId }),
-    getLayersForVisibleCanvases(state, { windowId }),
-    getSequenceViewingDirection(state, { windowId }),
-  ),
+  canvasWorld: getCurrentCanvasWorld(state, { windowId }),
   drawAnnotations: getConfig(state).window.forceDrawAnnotations || getCompanionWindowsForContent(state, { content: 'annotations', windowId }).length > 0,
   drawSearchAnnotations: getConfig(state).window.forceDrawAnnotations || getCompanionWindowsForContent(state, { content: 'search', windowId }).length > 0,
   highlightAllAnnotations: getWindow(state, { windowId }).highlightAllAnnotations,

src/containers/OpenSeadragonViewer.js

@@ -6,18 +6,15 @@ import flatten from 'lodash/flatten';
 import { withPlugins } from '../extend/withPlugins';
 import { OpenSeadragonViewer } from '../components/OpenSeadragonViewer';
 import * as actions from '../state/actions';
-import CanvasWorld from '../lib/CanvasWorld';
 import {
   getVisibleCanvasNonTiledResources,
   getCurrentCanvas,
   getCanvasLabel,
-  getSequenceViewingDirection,
-  getLayersForVisibleCanvases,
-  getVisibleCanvases,
   getViewer,
   getConfig,
   getCompanionWindowsForContent,
   selectInfoResponses,
+  getCurrentCanvasWorld,
 } from '../state/selectors';
 
 /**
@@ -26,12 +23,7 @@ import {
  * @private
  */
 const mapStateToProps = (state, { windowId }) => {
-  const canvasWorld = new CanvasWorld(
-    getVisibleCanvases(state, { windowId }),
-    getLayersForVisibleCanvases(state, { windowId }),
-    getSequenceViewingDirection(state, { windowId }),
-  );
-
+  const canvasWorld = getCurrentCanvasWorld(state, { windowId });
   const infoResponses = selectInfoResponses(state);
   const imageServiceIds = flatten(canvasWorld.canvases.map(c => c.imageServiceIds));
 

src/state/selectors/index.js

@@ -12,3 +12,4 @@ export * from './layers';
 export * from './sequences';
 export * from './auth';
 export * from './utils';
+export * from './viewer';

src/state/selectors/viewer.js

+import { createSelector } from 'reselect';
+import CanvasWorld from '../../lib/CanvasWorld';
+
+import { getVisibleCanvases } from './canvases';
+import { getLayersForVisibleCanvases } from './layers';
+import { getSequenceViewingDirection } from './sequences';
+
+/** Instantiate a manifesto instance */
+export const getCurrentCanvasWorld = createSelector(
+  getVisibleCanvases,
+  getLayersForVisibleCanvases,
+  getSequenceViewingDirection,
+  (canvases, layers, viewingDirection) => new CanvasWorld(canvases, layers, viewingDirection),
+);