dbf-mirador 4.2.3

package/src/components/WorkspaceSelectionDialog.jsx

@@ -0,0 +1,165 @@
+import DialogTitle from '@mui/material/DialogTitle';
+import { Card, CardContent, MenuList, MenuItem, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+import { useId } from 'react';
+import { WorkspaceDialog } from './WorkspaceDialog';
+import WorkspaceTypeElasticIcon from './icons/WorkspaceTypeElasticIcon';
+import WorkspaceTypeMosaicIcon from './icons/WorkspaceTypeMosaicIcon';
+import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
+
+const StyledDetails = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+/**
+ */
+export function WorkspaceSelectionDialog({
+  container = null,
+  handleClose,
+  open = false,
+  children = null,
+  updateWorkspace,
+  workspaceType,
+}) {
+  const { t } = useTranslation();
+  const dialogTitleId = useId();
+
+  /** */
+  const handleWorkspaceTypeChange = (newWorkspaceType) => {
+    updateWorkspace({
+      type: newWorkspaceType,
+    });
+    handleClose();
+  };
+
+  return (
+    <WorkspaceDialog aria-labelledby={dialogTitleId} container={container} onClose={handleClose} open={open}>
+      <DialogTitle id={dialogTitleId}>{t('workspaceSelectionTitle')}</DialogTitle>
+      <ScrollIndicatedDialogContent>
+        {children}
+        <MenuList
+          sx={{
+            '&active': {
+              outline: 'none',
+            },
+            '&focus': {
+              outline: 'none',
+            },
+            outline: 'none',
+          }}
+          selected={workspaceType}
+          autoFocusItem
+        >
+          <MenuItem
+            sx={{
+              height: 'auto',
+              overflow: 'auto',
+              whiteSpace: 'inherit',
+            }}
+            onClick={() => handleWorkspaceTypeChange('elastic')}
+            selected={workspaceType === 'elastic'}
+            value="elastic"
+          >
+            <Card
+              sx={{
+                backgroundColor: 'transparent',
+                borderRadius: '0',
+                boxShadow: '0 0 transparent',
+                display: 'flex',
+              }}
+            >
+              <WorkspaceTypeElasticIcon
+                sx={{
+                  flexShrink: 0,
+                  height: '90px',
+                  width: '120px',
+                }}
+                viewBox="0 0 120 90"
+              />
+              <StyledDetails>
+                <CardContent
+                  sx={{
+                    '&.MuiCardContent-root': {
+                      '&:last-child': {
+                        paddingBottom: '12px',
+                      },
+                      paddingBottom: 0,
+                      paddingTop: 0,
+                      textAlign: 'left',
+                    },
+                    flex: '1 0 auto',
+                  }}
+                >
+                  <Typography sx={{ paddingBottom: '6px' }} component="p" variant="h3">
+                    {t('elastic')}
+                  </Typography>
+                  <Typography variant="body1">{t('elasticDescription')}</Typography>
+                </CardContent>
+              </StyledDetails>
+            </Card>
+          </MenuItem>
+          <MenuItem
+            sx={{
+              height: 'auto',
+              overflow: 'auto',
+              whiteSpace: 'inherit',
+            }}
+            onClick={() => handleWorkspaceTypeChange('mosaic')}
+            selected={workspaceType === 'mosaic'}
+            value="mosaic"
+          >
+            <Card
+              sx={{
+                backgroundColor: 'transparent',
+                borderRadius: '0',
+                boxShadow: '0 0 transparent',
+                display: 'flex',
+              }}
+            >
+              <WorkspaceTypeMosaicIcon
+                sx={{
+                  flexShrink: 0,
+                  height: '90px',
+                  width: '120px',
+                }}
+                viewBox="0 0 120 90"
+              />
+              <StyledDetails>
+                <CardContent
+                  sx={{
+                    '&.MuiCardContent-root': {
+                      '&:last-child': {
+                        paddingBottom: '12px',
+                      },
+                      paddingBottom: 0,
+                      paddingTop: 0,
+                      textAlign: 'left',
+                    },
+                    flex: '1 0 auto',
+                  }}
+                >
+                  <Typography sx={{ paddingBottom: '6px' }} component="p" variant="h3">
+                    {t('mosaic')}
+                  </Typography>
+                  <Typography variant="body1">{t('mosaicDescription')}</Typography>
+                </CardContent>
+              </StyledDetails>
+            </Card>
+          </MenuItem>
+        </MenuList>
+      </ScrollIndicatedDialogContent>
+    </WorkspaceDialog>
+  );
+}
+
+WorkspaceSelectionDialog.propTypes = {
+  children: PropTypes.node,
+  container: PropTypes.object,
+  handleClose: PropTypes.func.isRequired,
+  open: PropTypes.bool,
+  updateWorkspace: PropTypes.func.isRequired,
+  workspaceType: PropTypes.string.isRequired,
+};

package/src/components/ZoomControls.jsx

@@ -0,0 +1,57 @@
+import AddCircleIcon from '@mui/icons-material/AddCircleOutlineSharp';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircleOutlineSharp';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import RestoreZoomIcon from './icons/RestoreZoomIcon';
+import MiradorMenuButton from '../containers/MiradorMenuButton';
+
+const StyledZoomControlsWrapper = styled('div')({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+});
+
+/**
+ */
+export function ZoomControls({ windowId = '', updateViewport = () => {}, viewer = {}, zoomToWorld }) {
+  const { t } = useTranslation();
+  /** */
+  const handleZoomInClick = () => {
+    updateViewport(windowId, {
+      zoom: viewer.zoom * 2,
+    });
+  };
+
+  /** */
+  const handleZoomOutClick = () => {
+    updateViewport(windowId, {
+      zoom: viewer.zoom / 2,
+    });
+  };
+
+  return (
+    <StyledZoomControlsWrapper>
+      <MiradorMenuButton aria-label={t('zoomIn')} onClick={handleZoomInClick}>
+        <AddCircleIcon />
+      </MiradorMenuButton>
+      <MiradorMenuButton aria-label={t('zoomOut')} onClick={handleZoomOutClick}>
+        <RemoveCircleIcon />
+      </MiradorMenuButton>
+      <MiradorMenuButton aria-label={t('zoomReset')} onClick={() => zoomToWorld(false)}>
+        <RestoreZoomIcon />
+      </MiradorMenuButton>
+    </StyledZoomControlsWrapper>
+  );
+}
+
+ZoomControls.propTypes = {
+  updateViewport: PropTypes.func,
+  viewer: PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number,
+    zoom: PropTypes.number,
+  }),
+  windowId: PropTypes.string,
+  zoomToWorld: PropTypes.func.isRequired,
+};

package/src/components/icons/BookViewIcon.jsx

@@ -0,0 +1,14 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * BookViewIcon ~
+ */
+export default function BookViewIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M1,4V21H22.853V4.1ZM3,19V6h8V19Zm18,0H13V6h8ZM14,9.5h6V11H14ZM14,12h6v1.5H14Zm0,2.5h6V16H14Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/CanvasIndexIcon.jsx

@@ -0,0 +1,14 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * Render the canvas index svg
+ */
+export default function CanvasIndexIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M6.924,21H21V19H6.924ZM3,17H21V15H3Zm3.924-4H21V11H6.924Zm0-4H21V7H6.924ZM3,3V5H21V3Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/GalleryViewIcon.jsx

@@ -0,0 +1,17 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * GalleryViewIcon ~
+ */
+export default function GalleryViewIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path
+          d="M19.974,2H2V19.974H19.974V2ZM7.392,18.177H3.8V14.582H7.392Zm0-5.392H3.8V9.19H7.392Zm0-5.392H3.8V3.8H7.392Zm5.392,10.785H9.19V14.582h3.595Zm0-5.392H9.19V9.19h3.595Zm0-5.392H9.19V3.8h3.595Zm5.392,10.785H14.582V14.582h3.595Zm0-5.392H14.582V9.19h3.595Zm0-5.392H14.582V3.8h3.595Z"
+          transform="translate(1 1)"
+        />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/MiradorIcon.jsx

@@ -0,0 +1,14 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * ThumbnailNavigationRightIcon ~
+ */
+export default function MiradorIcon(props) {
+  return (
+    <SvgIcon viewBox="0 0 60 55" {...props}>
+      <rect width="18" height="55" />
+      <rect width="18" height="55" transform="translate(42)" />
+      <rect width="18" height="34" transform="translate(21)" />
+    </SvgIcon>
+  );
+}

package/src/components/icons/RestoreZoomIcon.jsx

@@ -0,0 +1,15 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * RestoreZoomIcon ~
+ */
+export default function RestoreZoomIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M6,15H9v3h2V13H6Zm9-6V6H13v5h5V9Z" />
+        <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8,8,8,0,0,1-8,8Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/ThumbnailNavigationBottomIcon.jsx

@@ -0,0 +1,15 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * ThumbnailNavigationBottomIcon ~
+ */
+export default function ThumbnailNavigationBottomIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M3,3H21V5H3Z" transform="translate(0 16)" />
+        <path d="M21,5H3V19H21ZM19,17H5V7H19Z" transform="translate(0 -2)" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/ThumbnailNavigationRightIcon.jsx

@@ -0,0 +1,16 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * ThumbnailNavigationRightIcon ~
+ */
+export default function ThumbnailNavigationRightIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M0,0H24V24H0Z" transform="translate(24) rotate(90)" fill="none" />
+        <path d="M3,3H21V5H3Z" transform="translate(24) rotate(90)" />
+        <path d="M19,3H5V21H19ZM17,19H7V5H17Z" transform="translate(-2)" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/WindowMaxIcon.jsx

@@ -0,0 +1,15 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * WindowMaxIcon ~
+ */
+export default function WindowMaxIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M7,14H5v5h5V17H7Zm7-9V7h3v3h2V5Z" />
+        <path d="M22.517,1.524H1.736V22.37H22.517Zm-2,18.845H3.736V3.524H20.517Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/WindowMinIcon.jsx

@@ -0,0 +1,15 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * WindowMinIcon ~
+ */
+export default function WindowMinIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M5,16H8v3h2V14H5ZM16,8V5H14v5h5V8Z" />
+        <path d="M22.517,1.524H1.736V22.37H22.517Zm-2,18.845H3.736V3.524H20.517Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/WindowOptionsIcon.jsx

@@ -0,0 +1,16 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * WindowMinIcon ~
+ */
+export default function WindowOptionsIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M0,0H24V24H0Z" fill="none" />
+        <path d="M24.852,17.981,3,18V15.945l21.852-.019Z" transform="translate(-2 5)" />
+        <path d="M1,4V21H22.853V4.1ZM3,19V6h8V19Zm18,0H13V6h8Z" transform="translate(0 -2)" />
+      </svg>
+    </SvgIcon>
+  );
+}

package/src/components/icons/WorkspaceTypeElasticIcon.jsx

@@ -0,0 +1,157 @@
+import SvgIcon from '@mui/material/SvgIcon';
+
+/**
+ * ElasticWorkspaceIcon ~
+ */
+export default function WorkspaceTypeElasticIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="120" height="90" viewBox="0 0 300 225">
+        <defs>
+          <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+            <stop offset="0" />
+            <stop offset="0.14" stopOpacity="0.631" />
+            <stop offset="1" stopOpacity="0" />
+          </linearGradient>
+          <linearGradient id="linear-gradient-2" x1="0.5" y1="1" x2="0.5" gradientUnits="objectBoundingBox">
+            <stop offset="0" stopColor="#fff" stopOpacity="0" />
+            <stop offset="0.23" stopColor="#fff" stopOpacity="0.012" />
+            <stop offset="0.36" stopColor="#fff" stopOpacity="0.039" />
+            <stop offset="0.47" stopColor="#fff" stopOpacity="0.102" />
+            <stop offset="0.57" stopColor="#fff" stopOpacity="0.18" />
+            <stop offset="0.67" stopColor="#fff" stopOpacity="0.278" />
+            <stop offset="0.75" stopColor="#fff" stopOpacity="0.412" />
+            <stop offset="0.83" stopColor="#fff" stopOpacity="0.561" />
+            <stop offset="0.91" stopColor="#fff" stopOpacity="0.741" />
+            <stop offset="0.98" stopColor="#fff" stopOpacity="0.929" />
+            <stop offset="1" stopColor="#fff" />
+          </linearGradient>
+          <clipPath id="clip-elastic_icon">
+            <rect width="300" height="225" />
+          </clipPath>
+        </defs>
+        <g id="elastic_icon" data-name="elastic icon" clipPath="url(#clip-elastic_icon)">
+          <rect width="300" height="225" fill="#fff" />
+          <g
+            id="Rectangle_278"
+            data-name="Rectangle 278"
+            transform="translate(232 159)"
+            fill="#88c6c3"
+            stroke="#707070"
+            strokeWidth="1"
+            opacity="0.747"
+          >
+            <rect width="54" height="54" stroke="none" />
+            <rect x="0.5" y="0.5" width="53" height="53" fill="none" />
+          </g>
+          <g
+            id="Rectangle_8"
+            data-name="Rectangle 8"
+            transform="translate(7 148)"
+            fill="#88c6c3"
+            stroke="#707070"
+            strokeWidth="1"
+            opacity="0.747"
+          >
+            <rect width="70" height="70" stroke="none" />
+            <rect x="0.5" y="0.5" width="69" height="69" fill="none" />
+          </g>
+          <g
+            id="Rectangle_258"
+            data-name="Rectangle 258"
+            transform="translate(224 6)"
+            fill="#88c6c3"
+            stroke="#707070"
+            strokeWidth="1"
+            opacity="0.747"
+          >
+            <rect width="70" height="100" stroke="none" />
+            <rect x="0.5" y="0.5" width="69" height="99" fill="none" />
+          </g>
+          <g
+            id="Rectangle_259"
+            data-name="Rectangle 259"
+            transform="translate(71 64)"
+            fill="#88c6c3"
+            stroke="#707070"
+            strokeWidth="1"
+            opacity="0.747"
+          >
+            <rect width="115" height="75" stroke="none" />
+            <rect x="0.5" y="0.5" width="114" height="74" fill="none" />
+          </g>
+          <g
+            id="Rectangle_260"
+            data-name="Rectangle 260"
+            transform="translate(99 87)"
+            fill="#88c6c3"
+            stroke="#707070"
+            strokeWidth="1"
+            opacity="0.747"
+          >
+            <rect width="115" height="75" stroke="none" />
+            <rect x="0.5" y="0.5" width="114" height="74" fill="none" />
+          </g>
+          <g id="Group_689" data-name="Group 689">
+            <g id="Group_687" data-name="Group 687" transform="translate(0 3)">
+              <path
+                id="checkbox"
+                d="M258.766,37.316v146.5H39.053V37.316Zm40.07-39.254h-300v225h300Z"
+                transform="translate(1.164 -1.063)"
+                fill="#010101"
+                fillRule="evenodd"
+                opacity="0.246"
+              />
+              <g id="Path_821" data-name="Path 821" transform="translate(40 36)" fill="none">
+                <path d="M0,0H220V147H0Z" stroke="none" />
+                <path
+                  d="M 2 2 L 2 145 L 218 145 L 218 2 L 172.9869689941406 2 L 2 2 M 0 0 L 172.9869689941406 0 L 220 0 L 220 147 L 0 147 L 0 0 Z"
+                  stroke="none"
+                  fill="#01579b"
+                />
+              </g>
+            </g>
+            <g
+              id="Rectangle_257"
+              data-name="Rectangle 257"
+              transform="translate(40 39)"
+              fill="#fff"
+              stroke="#01579b"
+              strokeWidth="2"
+            >
+              <rect width="20" height="147" stroke="none" />
+              <rect x="1" y="1" width="18" height="145" fill="none" />
+            </g>
+            <g id="Group_688" data-name="Group 688" transform="translate(-27.5 -126)">
+              <circle
+                id="teal_circle"
+                data-name="teal circle"
+                cx="7.5"
+                cy="7.5"
+                r="7.5"
+                transform="translate(70 171)"
+                fill="#009688"
+              />
+              <g id="Group_333" data-name="Group 333" transform="translate(70 171)" opacity="0.12">
+                <path
+                  id="gradient_border_2"
+                  data-name="gradient border 2"
+                  d="M3408,959.089A4.911,4.911,0,1,1,3403.09,964a4.911,4.911,0,0,1,4.911-4.911m0-.089a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"
+                  transform="translate(-3403 -959)"
+                  fill="url(#linear-gradient)"
+                />
+                <path
+                  id="gradient_border_1"
+                  data-name="gradient border 1"
+                  d="M3408,959.089A4.911,4.911,0,1,1,3403.09,964a4.911,4.911,0,0,1,4.911-4.911m0-.089a5,5,0,1,0,5,5,5,5,0,0,0-5-5Z"
+                  transform="translate(-3403 -959)"
+                  fill="url(#linear-gradient-2)"
+                />
+              </g>
+            </g>
+          </g>
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+}