mirador/src/state/selectors/canvases.js

An open-source, web-based 'multi-up' viewer that supports zoom-pan-rotate functionality, ability to display/compare simple images, and images with annotations.

import { createSelector } from 'reselect';
import flatten from 'lodash/flatten';
import CanvasGroupings from '../../lib/CanvasGroupings';
import { getIiifResourceImageService } from '../../lib/iiif';
import { getMiradorCanvasWrapper } from './wrappers';
import { miradorSlice, EMPTY_ARRAY } from './utils';
import { getWindow } from './getters';
import { getSequence } from './sequences';
import { getWindowViewType } from './windows';
import { getManifestLocale } from './manifests';

/**
 * Returns the info response.
 * @param {object} state
 * @returns {object}
 */
export const selectInfoResponses = (state) => miradorSlice(state).infoResponses;

export const getCanvases = createSelector([getSequence], (sequence) => (sequence && sequence.getCanvases()) || EMPTY_ARRAY);

/**
 * Return the canvas selected by an id
 * @param {object} state
 * @param {object} props
 * @param {string} props.canvasId
 * @returns {object}
 */
export const getCanvas = createSelector([getSequence, (state, { canvasId }) => canvasId], (sequence, canvasId) => {
  if (!sequence || !canvasId) return undefined;

  return sequence.getCanvasById(canvasId);
});

/**
 * Returns the current canvas.
 * @param {object} state
 * @param {object} props
 * @param {string} props.windowId
 * @returns {object|undefined}
 */
export const getCurrentCanvas = createSelector([getSequence, getWindow], (sequence, window) => {
  if (!sequence || !window) return undefined;

  if (!window.canvasId) return sequence.getCanvasByIndex(0);

  return sequence.getCanvasById(window.canvasId);
});

/**
 * Returns the visible canvas ids.
 * @param {object} state
 * @param {object} props
 * @param {string} props.windowId
 * @returns {Array}
 */
export const getVisibleCanvasIds = createSelector(
  [getWindow],
  (window) => (window && (window.visibleCanvases || (window.canvasId && [window.canvasId]))) || EMPTY_ARRAY,
);

/**
 * Returns the visible canvses.
 * @param {object} state
 * @param {object} props
 * @param {string} props.windowId
 * @returns {Array}
 */
export const getVisibleCanvases = createSelector([getVisibleCanvasIds, getCanvases], (canvasIds, canvases) =>
  (canvases || []).filter((c) => canvasIds.includes(c.id)),
);

/**
 * Return the current canvases grouped by how they'll appear in the viewer.
 * For book view returns groups of 2, for single returns 1.
 * @param {object} state
 * @param {object} props
 * @param {string} props.manifestId
 * @param {string} props.windowId
 * @returns {Array}
 */
export const getCanvasGroupings = createSelector(
  [getCanvases, getWindowViewType],
  (canvases, view) => canvases && new CanvasGroupings(canvases, view).groupings(),
);

/**
 * Return the current canvases selected in a window.
 * For book view returns 2, for single returns 1.
 * @param {object} state
 * @param {object} props
 * @param {string} props.manifestId
 * @param {string} props.windowId
 * @param {string} props.canvasId
 * @returns {Array}
 */
export const getCanvasGrouping = createSelector(
  [getCanvasGroupings, (state, { canvasId }) => canvasId],
  (groupings, canvasId) => (groupings && groupings.find((group) => group.some((c) => c.id === canvasId))) || EMPTY_ARRAY,
);

/**
 * Return the next canvas(es) for a window.
 * For book view returns 2, for single returns 1.
 * @param {object} state
 * @param {object} props
 * @param {string} props.manifestId
 * @param {string} props.windowId
 * @returns {Array}
 */
export const getNextCanvasGrouping = createSelector([getCanvasGroupings, getCurrentCanvas], (groupings, canvas, view) => {
  if (!groupings || !canvas) return undefined;
  const currentGroupIndex = groupings.findIndex((group) => group.some((c) => c.id === canvas.id));

  if (currentGroupIndex < 0 || currentGroupIndex + 1 >= groupings.length) return undefined;
  const newGroup = groupings[currentGroupIndex + 1];

  return newGroup;
});

/**
 * Return the previous canvas(es) for a window.
 * For book view returns 2, for single returns 1.
 * @param {object} state
 * @param {object} props
 * @param {string} props.manifestId
 * @param {string} props.windowId
 * @returns {Array}
 */
export const getPreviousCanvasGrouping = createSelector([getCanvasGroupings, getCurrentCanvas], (groupings, canvas, view) => {
  if (!groupings || !canvas) return undefined;

  const currentGroupIndex = groupings.findIndex((group) => group.some((c) => c.id === canvas.id));

  if (currentGroupIndex < 1) return undefined;
  const newGroup = groupings[currentGroupIndex - 1];

  return newGroup;
});

/**
 * Return canvas label, or alternatively return the given index + 1 to be displayed.
 * @param {object} state
 * @param {object} props
 * @param {string} props.canvasId
 * @param {string} props.manifestId
 * @returns {string|number}
 */
export const getCanvasLabel = createSelector(
  [getCanvas, getManifestLocale],
  (canvas, locale) => canvas && (canvas.getLabel().length > 0 ? canvas.getLabel().getValue(locale) : String(canvas.index + 1)),
);

/**
 * Return canvas description.
 * @param {object} canvas
 * @param {string} companionWindowId
 */
export const getCanvasDescription = createSelector([getCanvas], (canvas) => canvas && canvas.getProperty('description'));

/**
 * Return visible non tiled canvas resources.
 * @param {object}
 * @param {string} windowId
 * @returns {Array}
 */
export const getVisibleCanvasNonTiledResources = createSelector(
  [getVisibleCanvases, getMiradorCanvasWrapper],
  (canvases, getMiradorCanvas) =>
    flatten(canvases.map((canvas) => getMiradorCanvas(canvas).imageResources)).filter(
      (resource) => !getIiifResourceImageService(resource),
    ),
);

/**
 * Returns visible canvas text resources.
 * @param {object} state
 * @param {string} windowId
 * @return {Array}
 */
export const getVisibleCanvasTextResources = createSelector(
  [getVisibleCanvases, getMiradorCanvasWrapper],
  (canvases, getMiradorCanvas) => flatten(canvases.map((canvas) => getMiradorCanvas(canvas).textResources)),
);

/**
 * Returns visible canvas video resources.
 * @param {object} state
 * @param {string} windowId
 * @return {Array}
 */
export const getVisibleCanvasVideoResources = createSelector(
  [getVisibleCanvases, getMiradorCanvasWrapper],
  (canvases, getMiradorCanvas) => flatten(canvases.map((canvas) => getMiradorCanvas(canvas).videoResources)),
);

/**
 * Returns visible canvas captions.
 * @param {object} state
 * @param {string} windowId
 * @return {Array}
 */
export const getVisibleCanvasCaptions = createSelector(
  [getVisibleCanvases, getMiradorCanvasWrapper],
  (canvases, getMiradorCanvas) =>
    flatten(
      canvases.map((canvas) => {
        const miradorCanvas = getMiradorCanvas(canvas);
        // prefer v3, fallback to v2, which can also be an empty array if no captions exist.
        if (miradorCanvas.v3VttContent.length) return miradorCanvas.v3VttContent;
        return miradorCanvas.v2VttContent;
      }),
    ),
);

/**
 * Returns visible canvas audio resources.
 * @param {object} state
 * @param {string} windowId
 * @return {Array}
 */
export const getVisibleCanvasAudioResources = createSelector(
  [getVisibleCanvases, getMiradorCanvasWrapper],
  (canvases, getMiradorCanvas) => flatten(canvases.map((canvas) => getMiradorCanvas(canvas).audioResources)),
);

/**
 * Returns info response.
 * @param {object} state
 * @param {object} props
 * @param {string} props.windowId
 * @param {string} props.canvasId
 * @param {string} props.infoId
 * @returns {object|undefined}
 */
export const selectInfoResponse = createSelector(
  [(state, { infoId }) => infoId, getCanvas, getMiradorCanvasWrapper, selectInfoResponses],
  (infoId, canvas, getMiradorCanvas, infoResponses) => {
    let iiifServiceId = infoId;

    if (!infoId) {
      if (!canvas) return undefined;
      const image = getMiradorCanvas(canvas).iiifImageResources[0];
      iiifServiceId = image && getIiifResourceImageService(image)?.id;
    }

    return (
      iiifServiceId && infoResponses[iiifServiceId] && !infoResponses[iiifServiceId].isFetching && infoResponses[iiifServiceId]
    );
  },
);