dbf-mirador 4.2.3

package/src/components/WorkspaceAdd.jsx

@@ -0,0 +1,221 @@
+import { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import AddIcon from '@mui/icons-material/AddSharp';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMoreSharp';
+import AppBar from '@mui/material/AppBar';
+import Drawer from '@mui/material/Drawer';
+import Grid from '@mui/material/Grid';
+import Fab from '@mui/material/Fab';
+import List from '@mui/material/List';
+import Paper from '@mui/material/Paper';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import { useTranslation } from 'react-i18next';
+import ns from '../config/css-ns';
+import ManifestForm from '../containers/ManifestForm';
+import ManifestListItem from '../containers/ManifestListItem';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import { IIIFDropTarget } from './IIIFDropTarget';
+import { PluginHook } from './PluginHook';
+
+const StyledWorkspaceAdd = styled('div')(() => ({
+  boxSizing: 'border-box',
+  height: '100%',
+  overflowX: 'hidden',
+  overflowY: 'auto',
+}));
+
+const StyledMiradorMenuButton = styled(MiradorMenuButton)(() => ({
+  marginLeft: -12,
+  marginRight: 20,
+}));
+
+/**
+ * An area for managing manifests and adding them to workspace
+ * @memberof Workspace
+ * @private
+ */
+export function WorkspaceAdd({ addResource = () => {}, catalog = [], setWorkspaceAddVisibility, ...rest }) {
+  const { t } = useTranslation();
+  const [addResourcesOpen, setAddResourcesVisibility] = useState(false);
+  const ref = useRef();
+  const [refWidth, setRefWidth] = useState('100%');
+
+  /** */
+  const updateRefWidth = () => {
+    if (ref.current) {
+      setRefWidth(ref.current.offsetWidth);
+    }
+  };
+
+  /** */
+  const handleDrop = ({ manifestId, manifestJson }, props, monitor) => {
+    if (manifestJson) {
+      addResource(manifestId, manifestJson, { provider: 'file' });
+    } else {
+      addResource(manifestId);
+    }
+
+    scrollToTop();
+  };
+
+  /** @private */
+  const onSubmit = () => {
+    setAddResourcesVisibility(false);
+    scrollToTop();
+  };
+
+  /** Scroll the list back to the top */
+  const scrollToTop = () => {
+    if (ref.current) {
+      const el = ref.current;
+      el.scrollTo({ behavior: 'smooth', left: 0, top: 0 });
+    }
+  };
+
+  const manifestList = catalog.map((resource, index) => (
+    <ManifestListItem
+      {...(index === 0 && { buttonRef: (buttonRef) => buttonRef && buttonRef.focus() })}
+      key={resource.manifestId}
+      manifestId={resource.manifestId}
+      provider={resource.provider}
+      handleClose={() => setWorkspaceAddVisibility(false)}
+    />
+  ));
+
+  const pluginProps = {
+    addResource,
+    catalog,
+    setWorkspaceAddVisibility,
+    t,
+    ...rest,
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', updateRefWidth);
+
+    updateRefWidth();
+
+    return () => {
+      window.removeEventListener('resize', updateRefWidth);
+    };
+  }, []);
+
+  return (
+    <IIIFDropTarget onDrop={handleDrop}>
+      <StyledWorkspaceAdd className={classNames(ns('workspace-add'))} ref={ref}>
+        {catalog.length < 1 ? (
+          <Grid
+            container
+            style={{
+              height: '100%',
+            }}
+            sx={{
+              alignItems: 'center',
+            }}
+          >
+            <Grid size={12}>
+              <Typography variant="h1" component="div" align="center">
+                {t('emptyResourceList')}
+              </Typography>
+            </Grid>
+          </Grid>
+        ) : (
+          <Paper sx={{ margin: 2 }}>
+            <Typography style={visuallyHidden} component="h1">
+              {t('miradorResources')}
+            </Typography>
+            <PluginHook targetName="WorkspaceAdd" {...pluginProps} />
+            <List disablePadding>{manifestList}</List>
+          </Paper>
+        )}
+        <Fab
+          variant="extended"
+          disabled={addResourcesOpen}
+          sx={(theme) => ({
+            bottom: theme.spacing(2),
+            position: 'absolute',
+            right: theme.spacing(2),
+          })}
+          className={classNames(ns('add-resource-button'))}
+          aria-label={t('addResource')}
+          color="primary"
+          onClick={() => setAddResourcesVisibility(true)}
+        >
+          <AddIcon />
+          {t('addResource')}
+        </Fab>
+
+        <Drawer
+          sx={(theme) => ({
+            '.MuiDrawer-paper': {
+              borderTop: '0',
+              left: 'unset',
+              width: refWidth,
+            },
+            ...(!addResourcesOpen && {
+              display: 'none',
+            }),
+          })}
+          variant="persistent"
+          anchor="bottom"
+          open={addResourcesOpen}
+          ModalProps={{
+            disablePortal: true,
+            hideBackdrop: true,
+            style: { position: 'absolute' },
+          }}
+        >
+          <Paper
+            sx={{
+              left: '0',
+              marginTop: 6,
+              paddingBottom: 2,
+              paddingLeft: { sm: 3, xs: 2 },
+              paddingRight: { sm: 3, xs: 2 },
+              paddingTop: 2,
+              right: '0',
+            }}
+          >
+            <AppBar position="absolute" color="primary" enableColorOnDark onClick={() => setAddResourcesVisibility(false)}>
+              <Toolbar variant="dense">
+                <StyledMiradorMenuButton aria-label={t('closeAddResourceForm')} color="inherit">
+                  <ExpandMoreIcon />
+                </StyledMiradorMenuButton>
+                <Typography
+                  variant="h2"
+                  noWrap
+                  sx={{
+                    color: 'inherit',
+                    flexGrow: 1,
+                  }}
+                >
+                  {t('addResource')}
+                </Typography>
+              </Toolbar>
+            </AppBar>
+            <ManifestForm
+              addResourcesOpen={addResourcesOpen}
+              onSubmit={onSubmit}
+              onCancel={() => setAddResourcesVisibility(false)}
+            />
+          </Paper>
+        </Drawer>
+      </StyledWorkspaceAdd>
+    </IIIFDropTarget>
+  );
+}
+
+WorkspaceAdd.propTypes = {
+  addResource: PropTypes.func,
+  catalog: PropTypes.arrayOf(
+    PropTypes.shape({
+      manifestId: PropTypes.string.isRequired,
+      provider: PropTypes.string,
+    }),
+  ),
+  setWorkspaceAddVisibility: PropTypes.func.isRequired,
+};

package/src/components/WorkspaceAddButton.jsx

@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import Fab from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import AddIcon from '@mui/icons-material/AddSharp';
+import CloseIcon from '@mui/icons-material/CloseSharp';
+import { styled, useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Be careful using this hook. It only works because the number of
+ * breakpoints in theme is static. It will break once you change the number of
+ * breakpoints. See https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
+ */
+function useWidth() {
+  const theme = useTheme();
+  const keys = [...theme.breakpoints.keys].reverse();
+  return (
+    keys.reduce((output, key) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key));
+      return !output && matches ? key : output;
+    }, null) || 'xs'
+  );
+}
+
+const Root = styled(Fab, { name: 'WorkspaceAddButton', slot: 'root' })(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+  '&:hover, &.Mui-focusVisible': {
+    backgroundColor: (theme.vars || theme).palette.primary.dark,
+  },
+  ...theme.applyStyles('dark', {
+    '&:hover, &.Mui-focusVisible': {
+      backgroundColor: (theme.vars || theme).palette.primary.light,
+    },
+  }),
+}));
+
+/**
+ */
+export function WorkspaceAddButton({ setWorkspaceAddVisibility, isWorkspaceAddVisible = false, useExtendedFab }) {
+  const width = useWidth();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip title={isWorkspaceAddVisible ? t('closeAddResourceMenu') : t('addResource')}>
+      <Root
+        size="medium"
+        color="primary"
+        id="addBtn"
+        focusRipple={false}
+        aria-label={
+          isWorkspaceAddVisible
+            ? t('closeAddResourceMenu')
+            : (useExtendedFab && width !== 'xs' && t('startHere')) || t('addResource')
+        }
+        variant={useExtendedFab && width !== 'xs' ? 'extended' : 'circular'}
+        onClick={() => {
+          setWorkspaceAddVisibility(!isWorkspaceAddVisible);
+        }}
+      >
+        {isWorkspaceAddVisible ? <CloseIcon /> : <AddIcon />}
+        {useExtendedFab && width !== 'xs' && t('startHere')}
+      </Root>
+    </Tooltip>
+  );
+}
+
+WorkspaceAddButton.propTypes = {
+  isWorkspaceAddVisible: PropTypes.bool,
+  setWorkspaceAddVisibility: PropTypes.func.isRequired,
+  useExtendedFab: PropTypes.bool.isRequired,
+};

package/src/components/WorkspaceArea.jsx

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import { styled, lighten, darken } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import ErrorDialog from '../containers/ErrorDialog';
+import WorkspaceControlPanel from '../containers/WorkspaceControlPanel';
+import Workspace from '../containers/Workspace';
+import WorkspaceAdd from '../containers/WorkspaceAdd';
+import BackgroundPluginArea from '../containers/BackgroundPluginArea';
+import ns from '../config/css-ns';
+
+const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => ({
+  background: darken(theme.palette.shades.light, 0.1),
+  ...theme.applyStyles('dark', {
+    background: lighten(theme.palette.shades.light, 0.1),
+  }),
+  bottom: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  [theme.breakpoints.up('sm')]: {
+    flexDirection: 'row',
+  },
+}));
+
+const ViewerArea = styled('main', { name: 'WorkspaceArea', slot: 'viewer' })(() => ({
+  flexGrow: 1,
+  position: 'relative',
+}));
+
+/**
+ * This is the top level Mirador component.
+ * @prop {Object} manifests
+ */
+export function WorkspaceArea({
+  areaRef = null,
+  controlPanelVariant = undefined,
+  isWorkspaceAddVisible = false,
+  isWorkspaceControlPanelVisible,
+  lang = undefined,
+}) {
+  const { t } = useTranslation();
+  // eslint-disable-next-line prefer-rest-params
+  const ownerState = arguments[0];
+
+  return (
+    <Root ownerState={ownerState}>
+      {isWorkspaceControlPanelVisible && <WorkspaceControlPanel variant={controlPanelVariant} />}
+      <ViewerArea className={ns('viewer')} lang={lang} aria-label={t('workspace')} {...(areaRef ? { ref: areaRef } : {})}>
+        {isWorkspaceAddVisible ? <WorkspaceAdd /> : <Workspace />}
+        <ErrorDialog />
+        <BackgroundPluginArea />
+      </ViewerArea>
+    </Root>
+  );
+}
+
+WorkspaceArea.propTypes = {
+  areaRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  controlPanelVariant: PropTypes.string,
+  isWorkspaceAddVisible: PropTypes.bool,
+  isWorkspaceControlPanelVisible: PropTypes.bool.isRequired,
+  lang: PropTypes.string,
+};

package/src/components/WorkspaceControlPanel.jsx

@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import classNames from 'classnames';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import { useTranslation } from 'react-i18next';
+import WorkspaceAddButton from '../containers/WorkspaceAddButton';
+import WorkspaceControlPanelButtons from '../containers/WorkspaceControlPanelButtons';
+import Branding from '../containers/Branding';
+import ns from '../config/css-ns';
+
+const Root = styled(AppBar, { name: 'WorkspaceControlPanel', slot: 'root' })(({ ownerState, theme }) => ({
+  display: 'flex',
+  height: 64,
+  padding: theme.spacing(1),
+  paddingBottom: 0,
+  position: 'relative',
+  [theme.breakpoints.up('sm')]: {
+    height: 'auto',
+    width: ownerState.variant === 'wide' ? 'auto' : 64,
+  },
+  ...(ownerState.variant === 'wide' && {
+    width: 'auto',
+  }),
+}));
+
+const StyledToolbar = styled(Toolbar, { name: 'WorkspaceControlPanel', slot: 'toolbar' })(({ theme }) => ({
+  display: 'flex',
+  flexGrow: 1,
+  justifyContent: 'space-between',
+  [theme.breakpoints.up('sm')]: {
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    minHeight: 0,
+  },
+}));
+
+const StyledWorkspaceButtons = styled('div', { name: 'WorkspaceControlPanel', slot: 'buttonArea' })(({ theme }) => ({
+  [theme.breakpoints.up('sm')]: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
+    marginBottom: theme.spacing(1),
+    marginTop: theme.spacing(1),
+  },
+}));
+
+const StyledBranding = styled(Branding, { name: 'WorkspaceControlPanel', slot: 'branding' })(({ theme }) => ({
+  [theme.breakpoints.up('xs')]: {
+    display: 'none',
+  },
+  [theme.breakpoints.up('sm')]: {
+    display: 'flex',
+  },
+}));
+
+/**
+ * Provides the panel responsible for controlling the entire workspace
+ */
+export function WorkspaceControlPanel({ variant = 'default', ...rest }) {
+  const { t } = useTranslation();
+  return (
+    <Root
+      ownerState={{ t, variant, ...rest }}
+      className={classNames(ns('workspace-control-panel'))}
+      color="default"
+      enableColorOnDark
+      position="absolute"
+      component="nav"
+      aria-label={t('workspaceNavigation')}
+    >
+      <StyledToolbar disableGutters>
+        <WorkspaceAddButton />
+        <StyledWorkspaceButtons>
+          <WorkspaceControlPanelButtons />
+        </StyledWorkspaceButtons>
+      </StyledToolbar>
+      <StyledBranding variant={variant} />
+    </Root>
+  );
+}
+
+WorkspaceControlPanel.propTypes = {
+  variant: PropTypes.oneOf(['default', 'wide']),
+};

package/src/components/WorkspaceControlPanelButtons.jsx

@@ -0,0 +1,20 @@
+import FullScreenButton from '../containers/FullScreenButton';
+import WorkspaceMenuButton from '../containers/WorkspaceMenuButton';
+import WorkspaceOptionsButton from '../containers/WorkspaceOptionsButton';
+import WindowListButton from '../containers/WindowListButton';
+import { PluginHook } from './PluginHook';
+
+/**
+ *
+ */
+export function WorkspaceControlPanelButtons({ ...rest }) {
+  return (
+    <>
+      <WindowListButton />
+      <WorkspaceMenuButton />
+      <WorkspaceOptionsButton />
+      <FullScreenButton />
+      <PluginHook targetName="WorkspaceControlPanelButtons" {...rest} />
+    </>
+  );
+}

package/src/components/WorkspaceDialog.jsx

@@ -0,0 +1,11 @@
+import { Dialog } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const WorkspaceDialog = styled(Dialog, { name: 'WorkspaceDialog', slot: 'root' })(({ theme, variant }) => ({
+  '& .MuiDialogTitle-root': theme.unstable_sx({ typography: 'h2' }),
+  ...(variant === 'menu' && {
+    '& .MuiDialogContent-root': {
+      padding: 0,
+    },
+  }),
+}));

package/src/components/WorkspaceElastic.jsx

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import { useState, useRef, useLayoutEffect } from 'react';
+import { styled } from '@mui/material/styles';
+import { Rnd } from 'react-rnd';
+import useResizeObserver from '@react-hook/resize-observer';
+import WorkspaceElasticWindow from '../containers/WorkspaceElasticWindow';
+import ns from '../config/css-ns';
+
+const Root = styled('div', { name: 'WorkspaceElastic', slot: 'root' })({
+  height: '100%',
+  overflow: 'hidden',
+  position: 'relative',
+  width: '100%',
+});
+
+const StyledRnd = styled(Rnd)({
+  boxSizing: 'border-box',
+  margin: 0,
+  position: 'absolute',
+  transitionDuration: '.7s',
+  '&.react-draggable-dragging': {
+    transitionDuration: 'unset',
+  },
+});
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+function WorkspaceElastic({ workspace, elasticLayout, setWorkspaceViewportDimensions, setWorkspaceViewportPosition }) {
+  const { viewportPosition } = workspace;
+  const offsetX = workspace.width / 2;
+  const offsetY = workspace.height / 2;
+  const target = useRef(null);
+
+  useLayoutEffect(() => {
+    if (target.current) setWorkspaceViewportDimensions(target.current.getBoundingClientRect());
+  }, [target, setWorkspaceViewportDimensions]);
+
+  useResizeObserver(target, (entry) => {
+    setWorkspaceViewportDimensions(entry.contentRect);
+  });
+
+  return (
+    <Root ref={target}>
+      <StyledRnd
+        size={{
+          height: workspace.height,
+          width: workspace.width,
+        }}
+        position={{
+          x: -1 * viewportPosition.x - offsetX,
+          y: -1 * viewportPosition.y - offsetY,
+        }}
+        enableResizing={{
+          bottom: false,
+          bottomLeft: false,
+          bottomRight: false,
+          left: false,
+          right: false,
+          top: false,
+          topLeft: false,
+          topRight: false,
+        }}
+        onDragStop={(e, d) => {
+          setWorkspaceViewportPosition({ x: -1 * d.x - offsetX, y: -1 * d.y - offsetY });
+        }}
+        cancel={`.${ns('window')}`}
+        className={ns('workspace')}
+        disableDragging={!workspace.draggingEnabled}
+      >
+        {Object.keys(elasticLayout).map((windowId) => (
+          <WorkspaceElasticWindow key={windowId} windowId={windowId} />
+        ))}
+      </StyledRnd>
+    </Root>
+  );
+}
+
+WorkspaceElastic.propTypes = {
+  elasticLayout: PropTypes.object.isRequired,
+  setWorkspaceViewportDimensions: PropTypes.func.isRequired,
+  setWorkspaceViewportPosition: PropTypes.func.isRequired,
+  workspace: PropTypes.object.isRequired,
+};
+
+export default WorkspaceElastic;

package/src/components/WorkspaceElasticWindow.jsx

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { Rnd } from 'react-rnd';
+import Window from '../containers/Window';
+import ns from '../config/css-ns';
+
+const StyledRnd = styled(Rnd, { shouldForwardProp: (prop) => prop !== 'focused' })(({ focused, theme }) => ({
+  zIndex: focused ? theme.zIndex.modal - 1 : 'auto',
+}));
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+function WorkspaceElasticWindow({
+  classes = {},
+  companionWindowDimensions = { height: 0, width: 0 },
+  focused = false,
+  focusWindow = () => {},
+  layout,
+  workspace,
+  updateElasticWindowLayout,
+}) {
+  const offsetX = workspace.width / 2;
+  const offsetY = workspace.height / 2;
+
+  return (
+    <StyledRnd
+      focused={focused}
+      className={focused ? classes.focused : undefined}
+      key={`${layout.windowId}-${workspace.id}`}
+      size={{
+        height: layout.height + companionWindowDimensions.height,
+        width: layout.width + companionWindowDimensions.width,
+      }}
+      position={{ x: layout.x + offsetX, y: layout.y + offsetY }}
+      bounds="parent"
+      onDragStop={(e, d) => {
+        updateElasticWindowLayout(layout.windowId, { x: d.x - offsetX, y: d.y - offsetY });
+      }}
+      onDragStart={focusWindow}
+      onResize={(e, direction, ref, delta, position) => {
+        updateElasticWindowLayout(layout.windowId, {
+          height: Number.parseInt(ref.style.height, 10) - companionWindowDimensions.height,
+          width: Number.parseInt(ref.style.width, 10) - companionWindowDimensions.width,
+          x: position.x - offsetX,
+          y: position.y - offsetY,
+        });
+      }}
+      dragHandleClassName={ns('window-top-bar')}
+      cancel={`.${ns('window-menu-btn')}`}
+    >
+      <Window windowId={layout.windowId} />
+    </StyledRnd>
+  );
+}
+
+WorkspaceElasticWindow.propTypes = {
+  classes: PropTypes.objectOf(PropTypes.string),
+  companionWindowDimensions: PropTypes.shape({
+    height: PropTypes.number,
+    width: PropTypes.number,
+  }),
+  focused: PropTypes.bool,
+  focusWindow: PropTypes.func,
+  layout: PropTypes.shape({
+    height: PropTypes.number,
+    id: PropTypes.string,
+    width: PropTypes.number,
+    windowId: PropTypes.string,
+    x: PropTypes.number,
+    y: PropTypes.number,
+  }).isRequired,
+  updateElasticWindowLayout: PropTypes.func.isRequired,
+  workspace: PropTypes.object.isRequired,
+};
+
+export default WorkspaceElasticWindow;