mirador/src/state/selectors/layers.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 { getMiradorCanvasWrapper } from './wrappers';
import { getCanvas, getVisibleCanvasIds } from './canvases';
import { miradorSlice, EMPTY_ARRAY } from './utils';

/**
 * Get the image layers from a canvas.
 * @param {object} state
 * @param {object} props
 * @param {string} props.canvasId
 * @param {string} props.windowId
 * @param {string} props.companionWindowId
 * @returns {Array}
 */
export const getCanvasLayers = createSelector([getCanvas, getMiradorCanvasWrapper], (canvas, getMiradorCanvas) => {
  if (!canvas) return [];
  return getMiradorCanvas(canvas).imageResources;
});

export const getLayersForWindow = createSelector(
  [(state) => miradorSlice(state).layers, (state, { windowId }) => windowId],
  (layers, windowId) => (layers ? layers[windowId] || EMPTY_ARRAY : EMPTY_ARRAY),
);

/**
 * Get the layer state for a particular canvas.
 * @param {object} state
 * @param {string} windowId
 * @returns {object}
 */
export const getLayers = createSelector(
  [getLayersForWindow, (state, { canvasId }) => canvasId],
  (layers, canvasId) => layers[canvasId],
);

/**
 * Returns a list of canvas layers, sorted by the layer state configuration.
 * @param {object} state
 * @param {object} props
 * @param {string} props.companionWindowId
 * @returns {Array}
 */
export const getSortedLayers = createSelector([getCanvasLayers, getLayers], (canvasLayers, layerConfig) => {
  if (!layerConfig) return canvasLayers;

  const sorted = canvasLayers.sort((a, b) => {
    if (
      layerConfig[a.id] &&
      layerConfig[a.id].index !== undefined &&
      layerConfig[b.id] &&
      layerConfig[b.id].index !== undefined
    ) {
      return layerConfig[a.id].index - layerConfig[b.id].index;
    }

    // sort a layer with index data above layers without
    if (layerConfig[a.id] && layerConfig[a.id].index !== undefined) return -1;
    if (layerConfig[b.id] && layerConfig[b.id].index !== undefined) return 1;

    return 0;
  });

  return sorted;
});

/**
 * Get all the layer configuration for visible canvases.
 * @param {object} state
 * @param {object} props
 * @param {string} props.windowId
 * @returns {object}
 */
export const getLayersForVisibleCanvases = createSelector([getVisibleCanvasIds, getLayersForWindow], (canvasIds, layers) =>
  canvasIds.reduce((acc, canvasId) => {
    // eslint-disable-next-line no-param-reassign
    acc[canvasId] = layers[canvasId];
    return acc;
  }, {}),
);