mirador/src/components/WindowCanvasNavigationControls.jsx

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 { forwardRef } from 'react';
import PropTypes from 'prop-types';
import { alpha, styled } from '@mui/material/styles';
import classNames from 'classnames';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import { visuallyHidden } from '@mui/utils';
import { useElementSize } from '@custom-react-hooks/use-element-size';
import mergeRefs from 'merge-refs';
import ZoomControls from '../containers/ZoomControls';
import ViewerInfo from '../containers/ViewerInfo';
import ViewerNavigation from '../containers/ViewerNavigation';
import ns from '../config/css-ns';
import { PluginHook } from './PluginHook';

const Root = styled(Paper, { name: 'WindowCanvasNavigationControls', slot: 'root' })(({ theme }) => ({
  alignItems: 'center',
  backgroundColor: alpha(theme.palette.background.paper, 0.5),
  bottom: 0,
  cursor: 'default',
  display: 'flex',
  flexDirection: 'column',
  flexWrap: 'wrap',
  justifyContent: 'center',
  position: 'absolute',
  textAlign: 'center',
  width: '100%',
  zIndex: 50,
}));

/**
 * Represents the viewer controls in the mirador workspace.
 */
export const WindowCanvasNavigationControls = forwardRef(({
  showZoomControls = false, visible = true, windowId, zoomToWorld, ...rest
}, ref) => {
  const [sizeRef, size] = useElementSize();

  const pluginProps = {
    showZoomControls, size, visible, windowId, ...rest,
  };
  /**
   * Determine if canvasNavControls are stacked (based on a hard-coded width)
  */
  const canvasNavControlsAreStacked = (size && size.width && size.width <= 253);

  if (!visible) return (<Typography style={visuallyHidden} component="div"><ViewerInfo windowId={windowId} /></Typography>);

  return (
    <Root
      square
      className={
        classNames(
          ns('canvas-nav'),
          canvasNavControlsAreStacked ? ns('canvas-nav-stacked') : null,
        )
      }
      elevation={0}
      ref={mergeRefs(ref, sizeRef)}
    >
      <Stack
        direction={canvasNavControlsAreStacked ? 'column' : 'row'}
        divider={<Divider orientation={canvasNavControlsAreStacked ? 'horizontal' : 'vertical'} variant="middle" flexItem />}
        spacing={0}
      >
        { showZoomControls && <ZoomControls windowId={windowId} zoomToWorld={zoomToWorld} /> }
        <ViewerNavigation windowId={windowId} />
      </Stack>
      <ViewerInfo windowId={windowId} />

      <PluginHook targetName="WindowCanvasNavigationControls" {...pluginProps} />
    </Root>
  );
});

WindowCanvasNavigationControls.propTypes = {
  showZoomControls: PropTypes.bool,
  visible: PropTypes.bool,
  windowId: PropTypes.string.isRequired,
  zoomToWorld: PropTypes.func.isRequired,
};

WindowCanvasNavigationControls.defaultProps = {
  showZoomControls: false,
  visible: true,
};

WindowCanvasNavigationControls.displayName = 'WindowCanvasNavigationControls';