dbf-mirador 4.2.3

package/src/components/WindowTopBar.jsx

@@ -0,0 +1,125 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import MenuIcon from '@mui/icons-material/MenuSharp';
+import CloseIcon from '@mui/icons-material/CloseSharp';
+import Toolbar from '@mui/material/Toolbar';
+import AppBar from '@mui/material/AppBar';
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
+import WindowTopMenuButton from '../containers/WindowTopMenuButton';
+import WindowTopBarPluginArea from '../containers/WindowTopBarPluginArea';
+import WindowTopBarPluginMenu from '../containers/WindowTopBarPluginMenu';
+import WindowTopBarTitle from '../containers/WindowTopBarTitle';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import FullScreenButton from '../containers/FullScreenButton';
+import WindowMaxIcon from './icons/WindowMaxIcon';
+import WindowMinIcon from './icons/WindowMinIcon';
+import ns from '../config/css-ns';
+
+const Root = styled(AppBar, { name: 'WindowTopBar', slot: 'root' })(() => ({
+  zIndex: 1100,
+}));
+
+const StyledToolbar = styled(Toolbar, { name: 'WindowTopBar', slot: 'toolbar' })(({ ownerState, theme }) => ({
+  backgroundColor: theme.palette.shades?.main,
+  borderTop: '2px solid',
+  borderTopColor: ownerState?.focused ? theme.palette.primary.main : 'transparent',
+  minHeight: 32,
+  paddingLeft: theme.spacing(0.5),
+  paddingRight: theme.spacing(0.5),
+  ...(ownerState?.windowDraggable && {
+    cursor: 'move',
+  }),
+}));
+
+/**
+ * WindowTopBar
+ */
+export function WindowTopBar({
+  removeWindow,
+  windowId,
+  toggleWindowSideBar,
+  maximizeWindow = () => {},
+  maximized = false,
+  minimizeWindow = () => {},
+  allowClose = true,
+  allowMaximize = true,
+  focusWindow = () => {},
+  allowFullscreen = false,
+  allowTopMenuButton = true,
+  allowWindowSideBar = true,
+  sideBarOpen = false,
+  component = 'nav',
+}) {
+  const { t } = useTranslation();
+  // eslint-disable-next-line prefer-rest-params
+  const ownerState = arguments[0];
+
+  return (
+    <Root component={component} aria-label={t('windowNavigation')} position="relative" color="default" enableColorOnDark>
+      <StyledToolbar
+        disableGutters
+        onMouseDown={focusWindow}
+        ownerState={ownerState}
+        className={classNames(ns('window-top-bar'))}
+        variant="dense"
+      >
+        {allowWindowSideBar && (
+          <MiradorMenuButton
+            aria-expanded={sideBarOpen}
+            aria-haspopup
+            aria-label={sideBarOpen ? t('hideWindowSideBar') : t('showWindowSideBar')}
+            onClick={toggleWindowSideBar}
+            className={ns('window-menu-btn')}
+          >
+            <MenuIcon />
+          </MiradorMenuButton>
+        )}
+        <WindowTopBarTitle windowId={windowId} />
+        {allowTopMenuButton && <WindowTopMenuButton windowId={windowId} className={ns('window-menu-btn')} />}
+        <WindowTopBarPluginArea windowId={windowId} />
+        <WindowTopBarPluginMenu windowId={windowId} />
+        {allowMaximize && (
+          <MiradorMenuButton
+            aria-label={maximized ? t('minimizeWindow') : t('maximizeWindow')}
+            className={classNames(ns('window-maximize'), ns('window-menu-btn'))}
+            onClick={maximized ? minimizeWindow : maximizeWindow}
+          >
+            {maximized ? <WindowMinIcon /> : <WindowMaxIcon />}
+          </MiradorMenuButton>
+        )}
+        {allowFullscreen && <FullScreenButton className={ns('window-menu-btn')} />}
+        {allowClose && (
+          <MiradorMenuButton
+            aria-label={t('closeWindow')}
+            className={classNames(ns('window-close'), ns('window-menu-btn'))}
+            onClick={removeWindow}
+          >
+            <CloseIcon />
+          </MiradorMenuButton>
+        )}
+      </StyledToolbar>
+    </Root>
+  );
+}
+
+WindowTopBar.propTypes = {
+  allowClose: PropTypes.bool,
+  allowFullscreen: PropTypes.bool,
+  allowMaximize: PropTypes.bool,
+  allowTopMenuButton: PropTypes.bool,
+  allowWindowSideBar: PropTypes.bool,
+  component: PropTypes.elementType,
+  // eslint-disable-next-line react/no-unused-prop-types
+  focused: PropTypes.bool,
+  focusWindow: PropTypes.func,
+  maximized: PropTypes.bool,
+  maximizeWindow: PropTypes.func,
+  minimizeWindow: PropTypes.func,
+  sideBarOpen: PropTypes.bool,
+  removeWindow: PropTypes.func.isRequired,
+  toggleWindowSideBar: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
+  windowDraggable: PropTypes.bool,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowTopBarPluginArea.jsx

@@ -0,0 +1,8 @@
+import { PluginHook } from './PluginHook';
+
+/**
+ *
+ */
+export function WindowTopBarPluginArea(props) {
+  return <PluginHook targetName="WindowTopBarPluginArea" {...props} />;
+}

package/src/components/WindowTopBarPluginMenu.jsx

@@ -0,0 +1,78 @@
+import { useContext, useId, useState } from 'react';
+import PropTypes from 'prop-types';
+import MoreVertIcon from '@mui/icons-material/MoreVertSharp';
+import Menu from '@mui/material/Menu';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+import { usePlugins } from '../extend/usePlugins';
+/**
+ *
+ */
+export function WindowTopBarPluginMenu({ windowId, menuIcon = <MoreVertIcon />, pluginTarget = 'WindowTopBarPluginMenu' }) {
+  const { t } = useTranslation();
+  const container = useContext(WorkspaceContext);
+  // eslint-disable-next-line prefer-rest-params
+  const pluginProps = arguments[0];
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const windowPluginMenuId = useId();
+  const { PluginComponents } = usePlugins(pluginTarget);
+
+  /** */
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  /** */
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  if (!PluginComponents || PluginComponents.length === 0) return null;
+
+  return (
+    <>
+      <MiradorMenuButton
+        aria-expanded={!!anchorEl}
+        aria-haspopup="true"
+        aria-label={t('windowPluginMenu')}
+        aria-owns={open ? windowPluginMenuId : undefined}
+        selected={open}
+        onClick={handleMenuClick}
+      >
+        {menuIcon}
+      </MiradorMenuButton>
+
+      <Menu
+        id={windowPluginMenuId}
+        container={container?.current}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          horizontal: 'right',
+          vertical: 'bottom',
+        }}
+        transformOrigin={{
+          horizontal: 'right',
+          vertical: 'top',
+        }}
+        open={open}
+        onClose={handleMenuClose}
+      >
+        <PluginHook targetName={pluginTarget} handleClose={handleMenuClose} {...pluginProps} />
+      </Menu>
+    </>
+  );
+}
+
+WindowTopBarPluginMenu.propTypes = {
+  anchorEl: PropTypes.object,
+  container: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  menuIcon: PropTypes.element,
+  open: PropTypes.bool,
+  pluginTarget: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowTopBarTitle.jsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
+
+const StyledTitleTypography = styled(TitleTypography)(({ theme }) => ({
+  ...theme.typography.h6,
+  flexGrow: 1,
+  paddingLeft: theme.spacing(0.5),
+}));
+
+const StyledTitle = styled('div')(({ theme }) => ({
+  ...theme.typography.h6,
+  flexGrow: 1,
+  paddingLeft: theme.spacing(0.5),
+}));
+/** */
+function TitleTypography({ children, ...props }) {
+  return (
+    <Typography
+      variant="h2"
+      noWrap
+      {...props}
+      sx={[
+        {
+          color: 'inherit',
+        },
+        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+      ]}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+TitleTypography.propTypes = {
+  children: PropTypes.node.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
+};
+
+/**
+ * WindowTopBarTitle
+ */
+export function WindowTopBarTitle({ error = null, hideWindowTitle = false, isFetching = false, manifestTitle = '' }) {
+  let title;
+  if (isFetching) {
+    title = (
+      <StyledTitleTypography>
+        <Skeleton variant="text" />
+      </StyledTitleTypography>
+    );
+  } else if (error) {
+    title = (
+      <>
+        <ErrorIcon color="error" />
+        <StyledTitleTypography color="textSecondary">{error}</StyledTitleTypography>
+      </>
+    );
+  } else if (hideWindowTitle) {
+    title = <StyledTitle />;
+  } else {
+    title = <StyledTitleTypography>{manifestTitle}</StyledTitleTypography>;
+  }
+  return title;
+}
+
+WindowTopBarTitle.propTypes = {
+  error: PropTypes.string,
+  hideWindowTitle: PropTypes.bool,
+  isFetching: PropTypes.bool,
+  manifestTitle: PropTypes.string,
+};

package/src/components/WindowTopMenu.jsx

@@ -0,0 +1,81 @@
+import { useContext } from 'react';
+import ListSubheader from '@mui/material/ListSubheader';
+import Popover from '@mui/material/Popover';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
+import WindowViewSettings from '../containers/WindowViewSettings';
+import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+import { usePlugins } from '../extend/usePlugins';
+
+/** Renders plugins */
+function PluginHookWithHeader({ targetName, ...props }) {
+  const { PluginComponents } = usePlugins(targetName);
+  const { t } = useTranslation();
+  return PluginComponents?.length > 0 ? (
+    <>
+      <ListSubheader role="presentation" disableSticky tabIndex={-1}>
+        {t('windowPluginButtons')}
+      </ListSubheader>
+      <PluginHook targetName={targetName} {...props} />
+    </>
+  ) : null;
+}
+
+PluginHookWithHeader.propTypes = {
+  targetName: PropTypes.string.isRequired,
+};
+
+/**
+ */
+export function WindowTopMenu({
+  handleClose,
+  showThumbnailNavigationSettings = true,
+  toggleDraggingEnabled,
+  windowId,
+  anchorEl = null,
+  open = false,
+}) {
+  const container = useContext(WorkspaceContext);
+  // eslint-disable-next-line prefer-rest-params
+  const pluginProps = arguments[0];
+
+  return (
+    <Popover
+      container={container?.current}
+      anchorOrigin={{
+        horizontal: 'right',
+        vertical: 'bottom',
+      }}
+      transformOrigin={{
+        horizontal: 'right',
+        vertical: 'top',
+      }}
+      onClose={handleClose}
+      orientation="horizontal"
+      anchorEl={anchorEl}
+      open={open}
+      role="menu"
+      slotProps={{
+        transition: {
+          onEntering: toggleDraggingEnabled,
+          onExit: toggleDraggingEnabled,
+        },
+      }}
+    >
+      <WindowViewSettings windowId={windowId} handleClose={handleClose} />
+      {showThumbnailNavigationSettings && <WindowThumbnailSettings windowId={windowId} handleClose={handleClose} />}
+      <PluginHookWithHeader targetName="WindowTopMenu" {...pluginProps} />
+    </Popover>
+  );
+}
+
+WindowTopMenu.propTypes = {
+  anchorEl: PropTypes.object,
+  handleClose: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+  showThumbnailNavigationSettings: PropTypes.bool,
+  toggleDraggingEnabled: PropTypes.func.isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowTopMenuButton.jsx

@@ -0,0 +1,49 @@
+import { useId, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import WindowTopMenu from '../containers/WindowTopMenu';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import WindowOptionsIcon from './icons/WindowOptionsIcon';
+
+/**
+ */
+export function WindowTopMenuButton({ classes = {}, windowId }) {
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const menuId = useId();
+
+  /** */
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  /** */
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <MiradorMenuButton
+        aria-expanded={!!anchorEl}
+        aria-haspopup="true"
+        aria-label={t('windowMenu')}
+        aria-owns={open ? menuId : undefined}
+        className={open ? classes.ctrlBtnSelected : undefined}
+        selected={open}
+        onClick={handleMenuClick}
+      >
+        <WindowOptionsIcon />
+      </MiradorMenuButton>
+      <WindowTopMenu windowId={windowId} anchorEl={anchorEl} handleClose={handleMenuClose} id={menuId} open={open} />
+    </>
+  );
+}
+
+WindowTopMenuButton.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/WindowViewSettings.jsx

@@ -0,0 +1,95 @@
+import { styled } from '@mui/material/styles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import ListSubheader from '@mui/material/ListSubheader';
+import SingleIcon from '@mui/icons-material/CropOriginalSharp';
+import ScrollViewIcon from '@mui/icons-material/ViewColumn';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import BookViewIcon from './icons/BookViewIcon';
+import GalleryViewIcon from './icons/GalleryViewIcon';
+
+const ViewOption = styled(MenuItem, { name: 'WindowViewSettings', slot: 'option' })(({ selected, theme }) => ({
+  '& .MuiFormControlLabel-label': {
+    borderBottom: '2px solid transparent',
+    ...(selected && {
+      borderBottomColor: theme.palette.secondary.main,
+    }),
+    '&.Mui-selected': {
+      backgroundColor: 'transparent !important',
+    },
+    '&.Mui-selected.Mui-focusVisible': {
+      backgroundColor: `${(theme.vars || theme).palette.action.focus} !important`,
+    },
+    '&:focused': {
+      backgroundColor: `${(theme.vars || theme).palette.action.focus} !important`,
+    },
+    color: selected ? theme.palette.secondary.main : undefined,
+    display: 'inline-block',
+  },
+}));
+
+const StyledMenuList = styled(MenuList, { name: 'WindowViewSettings', slot: 'option' })(() => ({
+  display: 'inline-flex',
+}));
+
+/**
+ *
+ */
+export function WindowViewSettings({ handleClose = () => {}, windowViewType, viewTypes = [], setWindowViewType, windowId }) {
+  const { t } = useTranslation();
+  /** */
+  const handleChange = (value) => {
+    setWindowViewType(windowId, value);
+  };
+
+  const iconMap = {
+    book: BookViewIcon,
+    gallery: GalleryViewIcon,
+    scroll: ScrollViewIcon,
+    single: SingleIcon,
+  };
+
+  /** Suspiciously similar to a component, yet if it is invoked through JSX
+      none of the click handlers work? */
+  const menuItem = ({ value, Icon }) => (
+    <ViewOption
+      aria-checked={windowViewType === value}
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      autoFocus={windowViewType === value}
+      key={value}
+      onClick={() => {
+        handleChange(value);
+        handleClose();
+      }}
+      role="menuitemradio"
+      selected={windowViewType === value}
+    >
+      <FormControlLabel
+        value={value}
+        control={<Icon fill="currentcolor" color={windowViewType === value ? 'secondary' : undefined} />}
+        label={t(value)}
+        labelPlacement="bottom"
+      />
+    </ViewOption>
+  );
+
+  if (viewTypes.length === 0) return null;
+  return (
+    <>
+      <ListSubheader role="presentation" disableSticky>
+        {t('view')}
+      </ListSubheader>
+      <StyledMenuList role="menubar">{viewTypes.map((value) => menuItem({ Icon: iconMap[value], value }))}</StyledMenuList>
+    </>
+  );
+}
+
+WindowViewSettings.propTypes = {
+  handleClose: PropTypes.func,
+  setWindowViewType: PropTypes.func.isRequired,
+  viewTypes: PropTypes.arrayOf(PropTypes.string),
+  windowId: PropTypes.string.isRequired,
+  windowViewType: PropTypes.string.isRequired,
+};

package/src/components/WindowViewer.jsx

@@ -0,0 +1,26 @@
+import { lazy, Suspense } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import PropTypes from 'prop-types';
+import WindowCanvasNavigationControls from '../containers/WindowCanvasNavigationControls';
+
+const OSDViewer = lazy(() => import('../containers/OpenSeadragonViewer'));
+
+/**
+ * Represents a WindowViewer in the mirador workspace. Responsible for mounting
+ * OSD and Navigation
+ */
+export function WindowViewer({ windowId }) {
+  return (
+    <ErrorBoundary fallback={null}>
+      <Suspense fallback={<div />}>
+        <OSDViewer windowId={windowId}>
+          <WindowCanvasNavigationControls windowId={windowId} />
+        </OSDViewer>
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
+
+WindowViewer.propTypes = {
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/Workspace.jsx

@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import { useTranslation } from 'react-i18next';
+import Window from '../containers/Window';
+import WorkspaceMosaic from '../containers/WorkspaceMosaic';
+import WorkspaceElastic from '../containers/WorkspaceElastic';
+import ns from '../config/css-ns';
+import { IIIFDropTarget } from './IIIFDropTarget';
+
+const Root = styled('div', { name: 'Workspace', slot: 'root' })(() => ({
+  height: '100%',
+  position: 'relative',
+  width: '100%',
+}));
+
+/** */
+const ZeroWindows = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Root>
+      <Grid
+        container
+        style={{
+          height: '100%',
+          justifyContent: 'center',
+        }}
+        sx={{
+          alignItems: 'center',
+        }}
+      >
+        <Grid size={12}>
+          <Typography variant="h1" component="div" align="center">
+            {t('welcome')}
+          </Typography>
+        </Grid>
+      </Grid>
+    </Root>
+  );
+};
+
+ZeroWindows.propTypes = {};
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+export function Workspace({
+  addWindow = () => {},
+  allowNewWindows = true,
+  maximizedWindowIds = [],
+  windowIds = [],
+  workspaceId,
+  workspaceType,
+}) {
+  const { t } = useTranslation();
+  /** */
+  const handleDrop = ({ canvasId, manifestId, manifestJson }, _props, _monitor) => {
+    if (!allowNewWindows) return;
+
+    addWindow({ canvasId, manifest: manifestJson, manifestId });
+  };
+
+  /**
+   * Determine which workspace to render by configured type
+   */
+  const workspaceByType = () => {
+    if (maximizedWindowIds.length > 0) {
+      if (maximizedWindowIds.length > 0) {
+        return maximizedWindowIds.map((windowId) => (
+          <Window
+            key={`${windowId}-${workspaceId}`}
+            windowId={windowId}
+            className={classNames(ns('workspace-maximized-window'))}
+          />
+        ));
+      }
+    }
+
+    if (windowIds.length === 0) return <ZeroWindows />;
+
+    switch (workspaceType) {
+      case 'elastic':
+        return <WorkspaceElastic />;
+      case 'mosaic':
+        return <WorkspaceMosaic />;
+      default:
+        return windowIds.map((windowId) => <Window key={`${windowId}-${workspaceId}`} windowId={windowId} />);
+    }
+  };
+
+  const ownerState = {
+    allowNewWindows,
+    maximizedWindowIds,
+    windowIds,
+    workspaceId,
+    workspaceType,
+  };
+
+  return (
+    <IIIFDropTarget onDrop={handleDrop}>
+      <Root ownerState={ownerState} className={classNames(ns('workspace-viewport'))}>
+        <Typography style={visuallyHidden} component="h1">
+          {t('miradorViewer')}
+        </Typography>
+        {workspaceByType()}
+      </Root>
+    </IIIFDropTarget>
+  );
+}
+
+Workspace.propTypes = {
+  addWindow: PropTypes.func,
+  allowNewWindows: PropTypes.bool,
+  maximizedWindowIds: PropTypes.arrayOf(PropTypes.string),
+  windowIds: PropTypes.arrayOf(PropTypes.string),
+  workspaceId: PropTypes.string.isRequired,
+  workspaceType: PropTypes.string.isRequired,
+};