dbf-mirador 4.2.3

package/src/components/CanvasAnnotations.jsx

@@ -0,0 +1,125 @@
+import { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import Chip from '@mui/material/Chip';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import SanitizedHtml from '../containers/SanitizedHtml';
+import { ScrollTo } from './ScrollTo';
+
+/**
+ * CanvasAnnotations ~
+ */
+export function CanvasAnnotations({
+  annotations = [],
+  index,
+  label,
+  selectedAnnotationId = undefined,
+  totalSize,
+  listContainerComponent = 'li',
+  htmlSanitizationRuleSet = 'iiif',
+  hoveredAnnotationIds = [],
+  containerRef = undefined,
+  deselectAnnotation,
+  selectAnnotation,
+  windowId,
+  hoverAnnotation,
+}) {
+  const { t } = useTranslation();
+  const handleClick = useCallback(
+    (_event, annotation) => {
+      if (window.getSelection()?.toString()) return;
+      if (selectedAnnotationId === annotation.id) {
+        deselectAnnotation(windowId, annotation.id);
+      } else {
+        selectAnnotation(windowId, annotation.id);
+      }
+    },
+    [windowId, deselectAnnotation, selectAnnotation, selectedAnnotationId],
+  );
+
+  const handleAnnotationHover = useCallback(
+    (annotation) => {
+      hoverAnnotation(windowId, [annotation.id]);
+    },
+    [hoverAnnotation, windowId],
+  );
+
+  const handleAnnotationBlur = useCallback(() => {
+    hoverAnnotation(windowId, []);
+  }, [hoverAnnotation, windowId]);
+
+  if (annotations.length === 0) return null;
+
+  return (
+    <>
+      <Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
+        {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
+      </Typography>
+      <MenuList autoFocusItem variant="selectedMenu">
+        {annotations.map((annotation) => (
+          <ScrollTo
+            containerRef={containerRef}
+            key={`${annotation.id}-scroll`}
+            offsetTop={96} // offset for the height of the form above
+            scrollTo={selectedAnnotationId === annotation.id}
+            selected={selectedAnnotationId === annotation.id}
+          >
+            <MenuItem
+              component={listContainerComponent}
+              variant="multiline"
+              divider
+              sx={{
+                '&:hover,&:focus': {
+                  backgroundColor: 'action.hover',
+                },
+                backgroundColor: hoveredAnnotationIds.includes(annotation.id) ? 'action.hover' : '',
+                userSelect: 'text',
+              }}
+              key={annotation.id}
+              annotationid={annotation.id}
+              onClick={(e) => handleClick(e, annotation)}
+              onFocus={() => handleAnnotationHover(annotation)}
+              onBlur={handleAnnotationBlur}
+              onMouseEnter={() => handleAnnotationHover(annotation)}
+              onMouseLeave={handleAnnotationBlur}
+            >
+              <ListItemText
+                primary={<SanitizedHtml ruleSet={htmlSanitizationRuleSet} htmlString={annotation.content} />}
+                secondary={annotation.tags.map((tag) => (
+                  <Chip component="span" size="small" variant="outlined" label={tag} id={tag} key={tag.toString()} />
+                ))}
+                slotProps={{
+                  primary: { variant: 'body2' },
+                }}
+              />
+            </MenuItem>
+          </ScrollTo>
+        ))}
+      </MenuList>
+    </>
+  );
+}
+
+CanvasAnnotations.propTypes = {
+  annotations: PropTypes.arrayOf(
+    PropTypes.shape({
+      content: PropTypes.string.isRequired,
+      id: PropTypes.string.isRequired,
+    }),
+  ),
+  containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
+  deselectAnnotation: PropTypes.func.isRequired,
+  hoverAnnotation: PropTypes.func.isRequired,
+  hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
+  htmlSanitizationRuleSet: PropTypes.string,
+  index: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  listContainerComponent: PropTypes.elementType,
+  selectAnnotation: PropTypes.func.isRequired,
+  selectedAnnotationId: PropTypes.string,
+  totalSize: PropTypes.number.isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/CanvasInfo.jsx

@@ -0,0 +1,46 @@
+import { useId } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import CollapsibleSection from '../containers/CollapsibleSection';
+import SanitizedHtml from '../containers/SanitizedHtml';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
+import { PluginHook } from './PluginHook';
+
+/**
+ * CanvasInfo
+ */
+export function CanvasInfo({ canvasDescription = null, canvasLabel = null, canvasMetadata = [], index = 1, totalSize = 1 }) {
+  const { t } = useTranslation();
+  const id = useId();
+  const titleId = useId();
+  // eslint-disable-next-line prefer-rest-params
+  const pluginProps = arguments[0];
+
+  return (
+    <CollapsibleSection id={id} label={t('currentItem', { context: `${index + 1}/${totalSize}` })}>
+      {canvasLabel && (
+        <Typography aria-labelledby={`${id} ${titleId}`} id={titleId} variant="h4" component="h5">
+          {canvasLabel}
+        </Typography>
+      )}
+
+      {canvasDescription && (
+        <Typography variant="body1">
+          <SanitizedHtml htmlString={canvasDescription} ruleSet="iiif" />
+        </Typography>
+      )}
+
+      {canvasMetadata && canvasMetadata.length > 0 && <LabelValueMetadata labelValuePairs={canvasMetadata} />}
+      <PluginHook targetName="CanvasInfo" {...pluginProps} />
+    </CollapsibleSection>
+  );
+}
+
+CanvasInfo.propTypes = {
+  canvasDescription: PropTypes.string,
+  canvasLabel: PropTypes.string,
+  canvasMetadata: PropTypes.array,
+  index: PropTypes.number,
+  totalSize: PropTypes.number,
+};

package/src/components/CanvasLayers.jsx

@@ -0,0 +1,367 @@
+import { useCallback, useId } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Slider from '@mui/material/Slider';
+import Tooltip from '@mui/material/Tooltip';
+import DragHandleIcon from '@mui/icons-material/DragHandleSharp';
+import VerticalAlignTopSharp from '@mui/icons-material/VerticalAlignTopSharp';
+import VerticalAlignBottomSharp from '@mui/icons-material/VerticalAlignBottomSharp';
+import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
+import OpacityIcon from '@mui/icons-material/OpacitySharp';
+import Typography from '@mui/material/Typography';
+import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+import IIIFThumbnail from '../containers/IIIFThumbnail';
+import { IIIFResourceLabel } from './IIIFResourceLabel';
+
+const StyledDragHandle = styled('div')(({ theme }) => ({
+  alignItems: 'center',
+  borderRight: `0.5px solid ${theme.palette.divider}`,
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'row',
+  marginBottom: theme.spacing(-2),
+  marginRight: theme.spacing(1),
+  marginTop: theme.spacing(-2),
+  maxWidth: theme.spacing(3),
+  width: theme.spacing(3),
+}));
+
+/** */
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+
+  return result;
+};
+
+/** @private */
+function Layer({ resource, layerMetadata = {}, index, handleOpacityChange, setLayerVisibility, moveToBackground, moveToFront }) {
+  const { t } = useTranslation();
+  const { width, height } = { height: undefined, width: 40 };
+
+  const layer = {
+    opacity: 1,
+    visibility: !!resource.preferred,
+    ...(layerMetadata || {}),
+  };
+
+  return (
+    <div style={{ flex: 1 }}>
+      <div style={{ alignItems: 'flex-start', display: 'flex' }}>
+        <IIIFThumbnail maxHeight={height} maxWidth={width} resource={resource} border />
+        <Typography
+          sx={{
+            paddingLeft: 1,
+          }}
+          component="div"
+          variant="body1"
+        >
+          <IIIFResourceLabel resource={resource} fallback={index + 1} />
+          <div>
+            <MiradorMenuButton
+              aria-label={t(layer.visibility ? 'layer_hide' : 'layer_show')}
+              edge="start"
+              size="small"
+              onClick={() => {
+                setLayerVisibility(resource.id, !layer.visibility);
+              }}
+            >
+              {layer.visibility ? <VisibilityIcon /> : <VisibilityOffIcon />}
+            </MiradorMenuButton>
+            {layer.index !== 0 && (
+              <MiradorMenuButton
+                aria-label={t('layer_moveToBackground')}
+                size="small"
+                onClick={() => {
+                  moveToBackground(resource.id);
+                }}
+              >
+                <VerticalAlignTopSharp />
+              </MiradorMenuButton>
+            )}
+            {layer.index !== layerMetadata && (
+              <MiradorMenuButton
+                aria-label={t('layer_moveToFront')}
+                size="small"
+                onClick={() => {
+                  moveToFront(resource.id);
+                }}
+              >
+                <VerticalAlignBottomSharp />
+              </MiradorMenuButton>
+            )}
+          </div>
+        </Typography>
+      </div>
+      <div style={{ alignItems: 'center', display: 'flex' }}>
+        <Tooltip title={t('layer_opacity')}>
+          <OpacityIcon sx={{ marginRight: 0.5 }} color={layer.visibility ? 'inherit' : 'disabled'} fontSize="small" />
+        </Tooltip>
+        <Input
+          sx={{
+            'MuiInput-input': {
+              '&::-webkit-outer-spin-button,&::-webkit-inner-spin-button': {
+                margin: 0,
+                WebkitAppearance: 'none',
+              },
+              MozAppearance: 'textfield',
+              textAlign: 'right',
+              typography: 'caption',
+              width: '3ch',
+            },
+          }}
+          disabled={!layer.visibility}
+          value={Math.round(layer.opacity * 100)}
+          type="number"
+          min={0}
+          max={100}
+          onChange={(e) => handleOpacityChange(resource.id, e.target.value)}
+          endAdornment={
+            <InputAdornment disableTypography position="end">
+              <Typography variant="caption">%</Typography>
+            </InputAdornment>
+          }
+          inputProps={{
+            'aria-label': t('layer_opacity'),
+          }}
+        />
+        <Slider
+          sx={{
+            marginLeft: 2,
+            marginRight: 2,
+            maxWidth: 150,
+          }}
+          disabled={!layer.visibility}
+          value={layer.opacity * 100}
+          onChange={(e, value) => handleOpacityChange(resource.id, value)}
+        />
+      </div>
+    </div>
+  );
+}
+
+Layer.propTypes = {
+  handleOpacityChange: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  layerMetadata: PropTypes.objectOf(
+    PropTypes.shape({
+      opacity: PropTypes.number,
+      visibility: PropTypes.bool,
+    }),
+  ),
+  moveToBackground: PropTypes.func.isRequired,
+  moveToFront: PropTypes.func.isRequired,
+  resource: PropTypes.object.isRequired,
+  setLayerVisibility: PropTypes.func.isRequired,
+};
+
+/** @private */
+function DraggableLayer({ children, resource, index }) {
+  const { t } = useTranslation();
+  return (
+    <Draggable draggableId={resource.id} index={index}>
+      {(provided, snapshot) => (
+        <ListItem
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          component="li"
+          divider
+          sx={{
+            alignItems: 'stretch',
+            cursor: 'pointer',
+            paddingBottom: 2,
+            paddingRight: 2,
+            paddingTop: 2,
+            ...(snapshot.isDragging && {
+              backgroundColor: 'action.hover',
+            }),
+          }}
+          disableGutters
+          key={resource.id}
+        >
+          <StyledDragHandle
+            {...provided.dragHandleProps}
+            sx={{
+              '&:hover': {
+                backgroundColor: snapshot.isDragging ? 'action.selected' : 'action.hover',
+              },
+              backgroundColor: snapshot.isDragging ? 'action.selected' : 'shades.light',
+            }}
+          >
+            <Tooltip title={t('layer_move')}>
+              <DragHandleIcon />
+            </Tooltip>
+          </StyledDragHandle>
+          {children}
+        </ListItem>
+      )}
+    </Draggable>
+  );
+}
+
+DraggableLayer.propTypes = {
+  children: PropTypes.node.isRequired,
+  index: PropTypes.number.isRequired,
+  resource: PropTypes.object.isRequired,
+};
+
+/** */
+export function CanvasLayers({ canvasId, index, label, layers, layerMetadata = {}, totalSize, updateLayers, windowId }) {
+  const { t } = useTranslation();
+  const droppableId = useId();
+
+  const handleOpacityChange = useCallback(
+    (layerId, value) => {
+      const payload = {
+        [layerId]: { opacity: value / 100.0 },
+      };
+
+      updateLayers(windowId, canvasId, payload);
+    },
+    [canvasId, updateLayers, windowId],
+  );
+
+  /** */
+  const onDragEnd = useCallback(
+    (result) => {
+      if (!result.destination) return;
+      if (result.destination.droppableId !== droppableId) return;
+      if (result.source.droppableId !== droppableId) return;
+
+      const sortedLayers = reorder(
+        layers.map((l) => l.id),
+        result.source.index,
+        result.destination.index,
+      );
+
+      const payload = layers.reduce((acc, layer) => {
+        // eslint-disable-next-line no-param-reassign
+        acc[layer.id] = { index: sortedLayers.indexOf(layer.id) };
+        return acc;
+      }, {});
+
+      updateLayers(windowId, canvasId, payload);
+    },
+    [canvasId, droppableId, layers, updateLayers, windowId],
+  );
+
+  /** */
+  const setLayerVisibility = useCallback(
+    (layerId, value) => {
+      const payload = {
+        [layerId]: { visibility: value },
+      };
+
+      updateLayers(windowId, canvasId, payload);
+    },
+    [canvasId, updateLayers, windowId],
+  );
+
+  /** */
+  const moveToBackground = useCallback(
+    (layerId) => {
+      const sortedLayers = reorder(
+        layers.map((l) => l.id),
+        layers.findIndex((l) => l.id === layerId),
+        0,
+      );
+
+      const payload = layers.reduce((acc, layer) => {
+        // eslint-disable-next-line no-param-reassign
+        acc[layer.id] = { index: sortedLayers.indexOf(layer.id) };
+        return acc;
+      }, {});
+
+      updateLayers(windowId, canvasId, payload);
+    },
+    [canvasId, layers, updateLayers, windowId],
+  );
+
+  const moveToFront = useCallback(
+    (layerId) => {
+      const sortedLayers = reorder(
+        layers.map((l) => l.id),
+        layers.findIndex((l) => l.id === layerId),
+        layers.length - 1,
+      );
+
+      const payload = layers.reduce((acc, layer) => {
+        // eslint-disable-next-line no-param-reassign
+        acc[layer.id] = { index: sortedLayers.indexOf(layer.id) };
+        return acc;
+      }, {});
+
+      updateLayers(windowId, canvasId, payload);
+    },
+    [canvasId, layers, updateLayers, windowId],
+  );
+
+  return (
+    <>
+      {totalSize > 1 && (
+        <Typography
+          sx={{
+            paddingLeft: 1,
+            paddingRight: 1,
+            paddingTop: 2,
+          }}
+          variant="overline"
+        >
+          {t('annotationCanvasLabel', { context: `${index + 1}/${totalSize}`, label })}
+        </Typography>
+      )}
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId={droppableId}>
+          {(provided, snapshot) => (
+            <List
+              sx={{
+                paddingTop: 0,
+              }}
+              {...provided.droppableProps}
+              ref={provided.innerRef}
+            >
+              {layers &&
+                layers.map((r, i) => (
+                  <DraggableLayer key={r.id} resource={r} index={i}>
+                    <Layer
+                      resource={r}
+                      index={i}
+                      layerMetadata={(layerMetadata || {})[r.id] || {}}
+                      handleOpacityChange={handleOpacityChange}
+                      setLayerVisibility={setLayerVisibility}
+                      moveToBackground={moveToBackground}
+                      moveToFront={moveToFront}
+                    />
+                  </DraggableLayer>
+                ))}
+              {provided.placeholder}
+            </List>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </>
+  );
+}
+
+CanvasLayers.propTypes = {
+  canvasId: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  layerMetadata: PropTypes.objectOf(
+    PropTypes.shape({
+      opacity: PropTypes.number,
+    }),
+  ),
+  layers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  totalSize: PropTypes.number.isRequired,
+  updateLayers: PropTypes.func.isRequired,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/ChangeThemeDialog.jsx

@@ -0,0 +1,65 @@
+import { useCallback } from 'react';
+import { DialogTitle, ListItemIcon, ListItemText, MenuList, MenuItem, DialogContent } from '@mui/material';
+import PaletteIcon from '@mui/icons-material/PaletteSharp';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { WorkspaceDialog } from './WorkspaceDialog';
+
+const ThemeIcon = styled(PaletteIcon, { name: 'ThemeIcon', slot: 'icon' })(({ theme }) => ({
+  color: '#BDBDBD',
+}));
+
+/**
+ * a simple dialog providing the possibility to switch the theme
+ */
+export function ChangeThemeDialog({
+  container = null,
+  handleClose,
+  open = false,
+  selectedTheme,
+  setSelectedTheme,
+  themeIds = [],
+}) {
+  const { t } = useTranslation();
+  const handleThemeChange = useCallback(
+    (theme) => {
+      setSelectedTheme(theme);
+      handleClose();
+    },
+    [handleClose, setSelectedTheme],
+  );
+
+  return (
+    <WorkspaceDialog container={container} onClose={handleClose} open={open} variant="menu">
+      <DialogTitle>{t('changeTheme')}</DialogTitle>
+      <DialogContent>
+        <MenuList autoFocusItem>
+          {themeIds.map((value) => (
+            <MenuItem
+              key={value}
+              className="listitem"
+              onClick={() => handleThemeChange(value)}
+              selected={value === selectedTheme}
+              value={value}
+            >
+              <ListItemIcon>
+                <ThemeIcon ownerState={{ value }} />
+              </ListItemIcon>
+              <ListItemText>{t(value)}</ListItemText>
+            </MenuItem>
+          ))}
+        </MenuList>
+      </DialogContent>
+    </WorkspaceDialog>
+  );
+}
+
+ChangeThemeDialog.propTypes = {
+  container: PropTypes.object,
+  handleClose: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+  selectedTheme: PropTypes.string.isRequired,
+  setSelectedTheme: PropTypes.func.isRequired,
+  themeIds: PropTypes.arrayOf(PropTypes.string),
+};

package/src/components/CollapsibleSection.jsx

@@ -0,0 +1,53 @@
+import { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import Accordion from '@mui/material/Accordion';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * CollapsableSection ~
+ */
+export function CollapsibleSection({ children, id, label }) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(true);
+
+  const handleChange = useCallback(
+    (_event, isExpanded) => {
+      setOpen(isExpanded);
+    },
+    [setOpen],
+  );
+
+  return (
+    <Accordion
+      slotProps={{ heading: { component: 'h4' } }}
+      id={id}
+      elevation={0}
+      expanded={open}
+      onChange={handleChange}
+      disableGutters
+      square
+      variant="compact"
+    >
+      <AccordionSummary
+        id={`${id}-header`}
+        aria-controls={`${id}-content`}
+        aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })}
+        expandIcon={<ExpandMoreIcon />}
+      >
+        <Typography variant="overline">{label}</Typography>
+      </AccordionSummary>
+      <AccordionDetails>{children}</AccordionDetails>
+    </Accordion>
+  );
+}
+
+CollapsibleSection.propTypes = {
+  children: PropTypes.node.isRequired,
+
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+};