dbf-mirador 4.2.3

package/src/components/WorkspaceExport.jsx

@@ -0,0 +1,99 @@
+import { useCallback, useId, useMemo, useState } from 'react';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CloseIcon from '@mui/icons-material/Close';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import PropTypes from 'prop-types';
+import copy from 'copy-to-clipboard';
+import { useTranslation } from 'react-i18next';
+import { WorkspaceDialog } from './WorkspaceDialog';
+
+/**
+ */
+export function WorkspaceExport({
+  children = null,
+  container = null,
+  id = undefined,
+  open = false,
+  handleClose,
+  exportableState,
+}) {
+  const { t } = useTranslation();
+  const [copied, setCopied] = useState(false);
+  const titleId = useId();
+  const exportedState = useMemo(() => JSON.stringify(exportableState, null, 2), [exportableState]);
+  const onCopyClick = useCallback(() => {
+    copy(exportedState);
+    setCopied(true);
+  }, [exportedState, setCopied]);
+
+  if (copied) {
+    return (
+      <Snackbar
+        anchorOrigin={{
+          horizontal: 'center',
+          vertical: 'top',
+        }}
+        open
+        autoHideDuration={6000}
+        onClose={handleClose}
+        message={t('exportCopied')}
+        action={
+          <IconButton size="small" aria-label={t('dismiss')} color="inherit" onClick={handleClose}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        }
+      />
+    );
+  }
+  return (
+    <WorkspaceDialog
+      aria-labelledby={titleId}
+      id={id}
+      container={container}
+      open={open}
+      onClose={handleClose}
+      scroll="paper"
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle id={titleId}>{t('downloadExport')}</DialogTitle>
+
+      <DialogContent>
+        <Accordion slotProps={{ heading: { component: 'h4' } }} elevation={2}>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>{t('viewWorkspaceConfiguration')}</Typography>
+          </AccordionSummary>
+          <AccordionDetails sx={{ overflow: 'scroll' }}>
+            {children}
+            <pre>{exportedState}</pre>
+          </AccordionDetails>
+        </Accordion>
+      </DialogContent>
+
+      <DialogActions>
+        <Button onClick={handleClose}>{t('cancel')}</Button>
+        <Button onClick={onCopyClick} variant="contained" color="primary">
+          {t('copy')}
+        </Button>
+      </DialogActions>
+    </WorkspaceDialog>
+  );
+}
+
+WorkspaceExport.propTypes = {
+  children: PropTypes.node,
+  container: PropTypes.object,
+  exportableState: PropTypes.object.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  open: PropTypes.bool,
+};

package/src/components/WorkspaceImport.jsx

@@ -0,0 +1,89 @@
+import { useId, useState } from 'react';
+import DialogTitle from '@mui/material/DialogTitle';
+import PropTypes from 'prop-types';
+import { DialogActions, TextField } from '@mui/material';
+import Button from '@mui/material/Button';
+import { useTranslation } from 'react-i18next';
+import { WorkspaceDialog } from './WorkspaceDialog';
+import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
+
+/**
+ */
+export function WorkspaceImport({
+  addError,
+  container = null,
+  id = undefined,
+  importConfig,
+  classes = {},
+  handleClose,
+  open = false,
+}) {
+  const { t } = useTranslation();
+  const [configImportValue, setConfigImportValue] = useState('');
+  const titleId = useId();
+
+  /** */
+  const handleChange = (event) => {
+    event.preventDefault();
+    setConfigImportValue(event.target.value);
+  };
+
+  /** */
+  const handleImportConfig = (_event) => {
+    try {
+      const configJSON = JSON.parse(configImportValue);
+      importConfig(configJSON);
+      handleClose();
+    } catch (ex) {
+      addError(ex.toString());
+    }
+  };
+
+  return (
+    <WorkspaceDialog
+      aria-labelledby={titleId}
+      container={container}
+      id={id}
+      onClose={handleClose}
+      open={open}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle id={titleId}>{t('importWorkspace')}</DialogTitle>
+      <ScrollIndicatedDialogContent>
+        <TextField
+          className={classes.textField}
+          id="workspace-import-input"
+          multiline
+          onChange={handleChange}
+          minRows={15}
+          variant="filled"
+          sx={{
+            '& .MuiInputBase-input': { fontFamily: 'monospace' },
+            width: '100%',
+          }}
+          helperText={t('importWorkspaceHint')}
+          slotProps={{
+            htmlInput: { autoFocus: 'autofocus' },
+          }}
+        />
+      </ScrollIndicatedDialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>{t('cancel')}</Button>
+        <Button color="primary" onClick={handleImportConfig} variant="contained">
+          {t('import')}
+        </Button>
+      </DialogActions>
+    </WorkspaceDialog>
+  );
+}
+
+WorkspaceImport.propTypes = {
+  addError: PropTypes.func.isRequired,
+  classes: PropTypes.objectOf(PropTypes.string),
+  container: PropTypes.object,
+  handleClose: PropTypes.func.isRequired,
+  id: PropTypes.string,
+  importConfig: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+};

package/src/components/WorkspaceMenu.jsx

@@ -0,0 +1,126 @@
+import { useContext, useState } from 'react';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import LanguageSettings from '../containers/LanguageSettings';
+import { NestedMenu } from './NestedMenu';
+import WorkspaceSelectionDialog from '../containers/WorkspaceSelectionDialog';
+import ChangeThemeDialog from '../containers/ChangeThemeDialog';
+import { PluginHook } from './PluginHook';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+
+/**
+ */
+export function WorkspaceMenu({
+  handleClose,
+  showThemePicker = false,
+  isWorkspaceAddVisible = false,
+  tReady = false,
+  toggleZoomControls = () => {},
+  showZoomControls = false,
+  ...menuProps
+}) {
+  const { t } = useTranslation();
+  const container = useContext(WorkspaceContext);
+  const [selectedOption, setSelectedOption] = useState(null);
+
+  // eslint-disable-next-line prefer-rest-params
+  const pluginProps = arguments[0];
+
+  /** */
+  const handleClick = (option, e) => {
+    setSelectedOption(option);
+    handleClose(e);
+  };
+
+  /** */
+  const handleDialogClose = () => {
+    setSelectedOption(null);
+  };
+
+  /** */
+  const handleZoomToggleClick = (e) => {
+    toggleZoomControls(!showZoomControls);
+    handleClose(e);
+  };
+
+  return (
+    <>
+      <Menu
+        container={container?.current}
+        anchorOrigin={{
+          horizontal: 'right',
+          vertical: 'top',
+        }}
+        transformOrigin={{
+          horizontal: 'left',
+          vertical: 'top',
+        }}
+        onClose={handleClose}
+        {...menuProps}
+      >
+        <MenuItem
+          aria-haspopup="true"
+          aria-expanded={selectedOption === 'workspaceSelection'}
+          disabled={isWorkspaceAddVisible}
+          onClick={(e) => {
+            handleZoomToggleClick(e);
+          }}
+          aria-owns={selectedOption === 'toggleZoom' ? 'toggle-zoom-menu' : undefined}
+        >
+          <Typography variant="body1">{showZoomControls ? t('hideZoomControls') : t('showZoomControls')}</Typography>
+        </MenuItem>
+        <MenuItem
+          aria-haspopup="true"
+          onClick={(e) => {
+            handleClick('workspaceSelection', e);
+          }}
+          aria-owns={selectedOption === 'workspaceSelection' ? 'workspace-selection' : undefined}
+        >
+          <Typography variant="body1">{t('selectWorkspaceMenu')}</Typography>
+        </MenuItem>
+
+        <NestedMenu label={t('language')}>
+          <LanguageSettings afterSelect={handleClose} />
+        </NestedMenu>
+        {showThemePicker && (
+          <MenuItem
+            aria-haspopup="true"
+            onClick={(e) => {
+              handleClick('changeTheme', e);
+            }}
+            aria-owns={selectedOption === 'changeTheme' ? 'change-theme' : undefined}
+          >
+            <Typography variant="body1">{t('changeTheme')}</Typography>
+          </MenuItem>
+        )}
+        <PluginHook targetName="WorkspaceMenu" {...pluginProps} />
+      </Menu>
+      {selectedOption === 'changeTheme' && (
+        <ChangeThemeDialog
+          container={container?.current}
+          handleClose={handleDialogClose}
+          open={selectedOption === 'changeTheme'}
+        />
+      )}
+      {selectedOption === 'workspaceSelection' && (
+        <WorkspaceSelectionDialog
+          open={selectedOption === 'workspaceSelection'}
+          container={container?.current}
+          handleClose={handleDialogClose}
+        />
+      )}
+    </>
+  );
+}
+
+WorkspaceMenu.propTypes = {
+  handleClose: PropTypes.func.isRequired,
+  isWorkspaceAddVisible: PropTypes.bool,
+  showThemePicker: PropTypes.bool,
+  showZoomControls: PropTypes.bool,
+  toggleZoomControls: PropTypes.func,
+  tReady: PropTypes.bool,
+};

package/src/components/WorkspaceMenuButton.jsx

@@ -0,0 +1,42 @@
+import { useId, useState } from 'react';
+import SettingsIcon from '@mui/icons-material/SettingsSharp';
+import { useTranslation } from 'react-i18next';
+import WorkspaceMenu from '../containers/WorkspaceMenu';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+
+/**
+ */
+export function WorkspaceMenuButton() {
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+  const id = useId();
+
+  /**  */
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  /**  */
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <MiradorMenuButton
+        aria-haspopup="true"
+        aria-label={t('workspaceMenu')}
+        aria-owns={open ? id : undefined}
+        selected={open}
+        id="menuBtn"
+        onClick={handleMenuClick}
+      >
+        <SettingsIcon />
+      </MiradorMenuButton>
+      <WorkspaceMenu anchorEl={anchorEl} id={id} handleClose={handleMenuClose} open={open} />
+    </>
+  );
+}

package/src/components/WorkspaceMosaic.jsx

@@ -0,0 +1,149 @@
+import { useContext, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import GlobalStyles from '@mui/material/GlobalStyles';
+import { DndContext } from 'react-dnd';
+import { Mosaic, MosaicWindow, getLeaves, createBalancedTreeFromLeaves, convertLegacyToNary } from 'react-mosaic-component';
+import isEqual from 'lodash/isEqual';
+import classNames from 'classnames';
+import MosaicRenderPreview from '../containers/MosaicRenderPreview';
+import Window from '../containers/Window';
+import MosaicLayout from '../lib/MosaicLayout';
+import globalReactMosaicStyles from '../styles/react-mosaic-component';
+
+const StyledMosaic = styled(Mosaic)({
+  '& .mosaic-preview': {
+    boxShadow: 'none',
+  },
+  '& .mosaic-tile': {
+    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .2), 0 2px 1px -1px rgba(0, 0, 0, .2)',
+  },
+  '& .mosaic-window': {
+    boxShadow: 'none',
+  },
+  '& .mosaic-window-toolbar': {
+    display: 'none !important',
+  },
+});
+
+/** */
+const RenderPreview = ({ windowId }) => (
+  <div className="mosaic-preview" aria-hidden>
+    <MosaicRenderPreview windowId={windowId} />
+  </div>
+);
+
+RenderPreview.propTypes = {
+  windowId: PropTypes.string.isRequired,
+};
+
+/** */
+const ZeroStateView = () => <div />;
+
+/**
+ * Used to regenerate a new layout when windows are added or removed
+ */
+const determineWorkspaceLayout = (currentLayout, windowIds, currentWindowPaths = {}) => {
+  const leaveKeys = getLeaves(currentLayout);
+  const mosaicLayout = new MosaicLayout(currentLayout);
+
+  // Add new windows to layout
+  const addedWindows = windowIds.filter((windowId) => !leaveKeys.includes(windowId));
+  if (addedWindows.length > 0) mosaicLayout.addWindows(addedWindows);
+
+  const removedWindows = leaveKeys.filter((leaveKey) => !windowIds.includes(leaveKey));
+
+  // if we have paths for the removed windows, we can gracefully remove them and
+  // preserve the existing layout for the remaining windows
+  if (removedWindows.every((e) => currentWindowPaths[e])) {
+    mosaicLayout.removeWindows(removedWindows, currentWindowPaths);
+  } else {
+    // Windows were removed (perhaps in a different Workspace). We don't have a
+    // way to reconfigure.. so we have to random generate
+
+    return createBalancedTreeFromLeaves(windowIds);
+  }
+
+  return mosaicLayout.layout;
+};
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+export function WorkspaceMosaic({ layout = undefined, updateWorkspaceMosaicLayout, windowIds = [], workspaceId }) {
+  const windowPaths = useRef({});
+  const dndContext = useContext(DndContext);
+
+  // Convert legacy layout format to new format if needed
+  const normalizedLayout = layout ? convertLegacyToNary(layout) : layout;
+
+  useEffect(() => {
+    const leaveKeys = getLeaves(normalizedLayout);
+    // Handle some trivial layout cases:
+    // 1. No layout
+    // 2. No windows
+    // 3. Not enough windows to create a layout
+    if (!normalizedLayout || windowIds.length === 0 || leaveKeys.length < 2) {
+      updateWorkspaceMosaicLayout(createBalancedTreeFromLeaves(windowIds));
+
+      return undefined;
+    }
+
+    // nothing was added or removed, and all the windows are accounted for in the layout
+    if (windowIds.every((e) => leaveKeys.includes(e)) && leaveKeys.every((e) => windowIds.includes(e))) {
+      return undefined;
+    }
+
+    const newLayout = determineWorkspaceLayout(normalizedLayout, windowIds, windowPaths.current);
+
+    if (!isEqual(newLayout, normalizedLayout)) updateWorkspaceMosaicLayout(newLayout);
+
+    return undefined;
+  }, [normalizedLayout, windowIds, windowPaths, updateWorkspaceMosaicLayout]);
+
+  const toolbarControls = [];
+
+  /**
+   * Render a tile (Window) in the Mosaic.
+   */
+  const tileRenderer = (id, path) => {
+    if (!windowIds.includes(id)) return null;
+    windowPaths.current[id] = path;
+
+    return (
+      <MosaicWindow toolbarControls={toolbarControls} path={path} windowId={id} renderPreview={RenderPreview}>
+        <Window key={`${id}-${workspaceId}`} windowId={id} />
+      </MosaicWindow>
+    );
+  };
+
+  /**
+   * Update the redux store when the Mosaic is changed.
+   */
+  const mosaicChange = (newLayout) => {
+    updateWorkspaceMosaicLayout(newLayout);
+  };
+
+  return (
+    <>
+      <GlobalStyles styles={{ ...globalReactMosaicStyles }} />
+      <StyledMosaic
+        dragAndDropManager={dndContext.dragDropManager}
+        renderTile={tileRenderer}
+        initialValue={normalizedLayout || createBalancedTreeFromLeaves(windowIds)}
+        onChange={mosaicChange}
+        className={classNames('mirador-mosaic')}
+        zeroStateView={<ZeroStateView />}
+      />
+    </>
+  );
+}
+
+WorkspaceMosaic.propTypes = {
+  layout: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
+  windowIds: PropTypes.arrayOf(PropTypes.string),
+  workspaceId: PropTypes.string.isRequired,
+};

package/src/components/WorkspaceOptionsButton.jsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp';
+import { useTranslation } from 'react-i18next';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu';
+
+/**
+ * WorkspaceOptionsButton ~
+ */
+export function WorkspaceOptionsButton() {
+  const { t } = useTranslation();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [open, setOpen] = useState(false);
+
+  /**  */
+  const handleMenuClick = (event) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  /**  */
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <MiradorMenuButton aria-label={t('workspaceOptions')} onClick={handleMenuClick} selected={open}>
+        <MoreHorizontalIcon />
+      </MiradorMenuButton>
+      <WorkspaceOptionsMenu anchorEl={anchorEl} handleClose={handleMenuClose} open={open} />
+    </>
+  );
+}

package/src/components/WorkspaceOptionsMenu.jsx

@@ -0,0 +1,112 @@
+import { useContext, useId, useState } from 'react';
+import PropTypes from 'prop-types';
+import ImportIcon from '@mui/icons-material/Input';
+import SaveAltIcon from '@mui/icons-material/SaveAltSharp';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import WorkspaceExport from '../containers/WorkspaceExport';
+import WorkspaceImport from '../containers/WorkspaceImport';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+import { PluginHook } from './PluginHook';
+
+/**
+ * WorkspaceOptionsMenu ~ the menu for workspace options such as import/export
+ */
+export function WorkspaceOptionsMenu({ anchorEl = null, handleClose, open = false, ...rest }) {
+  const { t } = useTranslation();
+  const container = useContext(WorkspaceContext);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const exportId = useId();
+  const importId = useId();
+
+  const pluginProps = {
+    anchorEl,
+    container,
+    handleClose,
+    open,
+    t,
+    ...rest,
+  };
+
+  /** */
+  const handleClick = (option) => {
+    setSelectedOption(option);
+    handleClose();
+  };
+
+  /** */
+  const handleDialogClose = () => {
+    setSelectedOption(null);
+  };
+
+  return (
+    <>
+      <Menu
+        id="workspace-options-menu"
+        container={container?.current}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          horizontal: 'right',
+          vertical: 'top',
+        }}
+        transformOrigin={{
+          horizontal: 'left',
+          vertical: 'top',
+        }}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem
+          aria-haspopup="true"
+          onClick={() => {
+            handleClick('exportWorkspace');
+          }}
+          aria-owns={selectedOption === 'exportWorkspace' ? exportId : undefined}
+        >
+          <ListItemIcon>
+            <SaveAltIcon />
+          </ListItemIcon>
+          <Typography variant="body1">{t('downloadExportWorkspace')}</Typography>
+        </MenuItem>
+        <MenuItem
+          aria-haspopup="true"
+          onClick={() => {
+            handleClick('importWorkspace');
+          }}
+          aria-owns={selectedOption === 'importWorkspace' ? importId : undefined}
+        >
+          <ListItemIcon>
+            <ImportIcon />
+          </ListItemIcon>
+          <Typography variant="body1">{t('importWorkspace')}</Typography>
+        </MenuItem>
+        <PluginHook targetName="WorkspaceOptionsMenu" {...pluginProps} />
+      </Menu>
+      {selectedOption === 'exportWorkspace' && (
+        <WorkspaceExport
+          id={exportId}
+          open={selectedOption === 'exportWorkspace'}
+          container={container?.current}
+          handleClose={handleDialogClose}
+        />
+      )}
+      {selectedOption === 'importWorkspace' && (
+        <WorkspaceImport
+          id={importId}
+          open={selectedOption === 'importWorkspace'}
+          container={container?.current}
+          handleClose={handleDialogClose}
+        />
+      )}
+    </>
+  );
+}
+
+WorkspaceOptionsMenu.propTypes = {
+  anchorEl: PropTypes.object,
+  handleClose: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+};