dbf-mirador 4.2.3

package/src/components/MiradorMenuButton.jsx

@@ -0,0 +1,71 @@
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+
+const Root = styled(IconButton, { name: 'MiradorMenuButton', slot: 'root' })(({ selected, theme }) => ({
+  fill: 'currentcolor',
+  ...(selected && {
+    backgroundColor: theme.palette.action.selected,
+  }),
+}));
+
+/**
+ * MiradorMenuButton ~ Wrap the given icon prop in an IconButton and a Tooltip.
+ * This shares the passed in aria-label w/ the Tooltip (as title) and the IconButton
+ * All props besides icon are spread to the IconButton component
+ */
+export function MiradorMenuButton({
+  'aria-label': ariaLabel,
+  badge = false,
+  children,
+  dispatch = () => {},
+  selected = false,
+  BadgeProps = {},
+  TooltipProps = {},
+  sx = {},
+  ...iconButtonProps
+}) {
+  const container = useContext(WorkspaceContext);
+  const button = (
+    <Root selected={selected} aria-label={ariaLabel} {...iconButtonProps} sx={sx} size="large">
+      {badge ? (
+        <Badge overlap="rectangular" {...BadgeProps}>
+          {children}
+        </Badge>
+      ) : (
+        children
+      )}
+    </Root>
+  );
+
+  if (iconButtonProps.disabled) return button;
+
+  return (
+    <Tooltip
+      title={ariaLabel}
+      {...TooltipProps}
+      slotProps={{
+        popper: {
+          container: container?.current,
+        },
+      }}
+    >
+      {button}
+    </Tooltip>
+  );
+}
+
+MiradorMenuButton.propTypes = {
+  'aria-label': PropTypes.string.isRequired,
+  badge: PropTypes.bool,
+  BadgeProps: PropTypes.object,
+  children: PropTypes.element.isRequired,
+  dispatch: PropTypes.func,
+  selected: PropTypes.bool,
+  sx: PropTypes.object,
+  TooltipProps: PropTypes.object,
+};

package/src/components/MosaicRenderPreview.jsx

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import MinimalWindow from '../containers/MinimalWindow';
+
+/**
+ * MosaicRenderPreview is used for the preview when dragging a mosaic window/tile
+ */
+export function MosaicRenderPreview({ title = '', windowId }) {
+  const { t } = useTranslation();
+  return <MinimalWindow windowId={`${windowId}-preview`} label={t('previewWindowTitle', { title })} ariaLabel={false} />;
+}
+
+MosaicRenderPreview.propTypes = {
+  title: PropTypes.string,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/NestedMenu.jsx

@@ -0,0 +1,42 @@
+import { useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import ExpandLess from '@mui/icons-material/ExpandLessSharp';
+import ExpandMore from '@mui/icons-material/ExpandMoreSharp';
+
+/**
+ * NestedMenu ~ A presentation component to render a menu item and have
+ * it control the visibility of the MUI List passed in as the children
+ */
+export function NestedMenu({ children, icon = null, label, ...otherProps }) {
+  const [nestedMenuIsOpen, setNestedMenuIsOpen] = useState(false);
+
+  const handleMenuClick = useCallback(() => {
+    setNestedMenuIsOpen(!nestedMenuIsOpen);
+  }, [nestedMenuIsOpen, setNestedMenuIsOpen]);
+
+  return (
+    <>
+      <MenuItem aria-expanded={nestedMenuIsOpen} onClick={handleMenuClick} divider={nestedMenuIsOpen} {...otherProps}>
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        <ListItemText
+          slotProps={{
+            primary: { variant: 'body1' },
+          }}
+        >
+          {label}
+        </ListItemText>
+        {nestedMenuIsOpen ? <ExpandLess /> : <ExpandMore />}
+      </MenuItem>
+      {nestedMenuIsOpen && children}
+    </>
+  );
+}
+
+NestedMenu.propTypes = {
+  children: PropTypes.element.isRequired,
+  icon: PropTypes.element,
+  label: PropTypes.string.isRequired,
+};

package/src/components/NewBrowserWindow.jsx

@@ -0,0 +1,34 @@
+import { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+/** */
+export function NewBrowserWindow({ depWindow = undefined, features = undefined, name = undefined, onClose, url }) {
+  const released = useRef(false);
+
+  useEffect(() => {
+    const newWindow = (depWindow || window).open(url, name, features);
+
+    const checkIfWindowClosed = setInterval(() => {
+      if (!released.current && (!newWindow || newWindow.closed)) {
+        released.current = true;
+        clearInterval(checkIfWindowClosed);
+        onClose(url);
+      }
+    }, 250);
+
+    return () => {
+      clearInterval(checkIfWindowClosed);
+      newWindow.close();
+    };
+  });
+
+  return null;
+}
+
+NewBrowserWindow.propTypes = {
+  depWindow: PropTypes.object,
+  features: PropTypes.string,
+  name: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  url: PropTypes.string.isRequired,
+};

package/src/components/OpenSeadragonComponent.jsx

@@ -0,0 +1,258 @@
+import Openseadragon from 'openseadragon';
+import PropTypes from 'prop-types';
+import { useEffect, useId, useRef, useReducer, useState, useCallback } from 'react';
+import { useDebouncedCallback } from 'use-debounce';
+import { useTranslation } from 'react-i18next';
+import OpenSeadragonViewerContext from '../contexts/OpenSeadragonViewerContext';
+
+/** Handle setting up OSD for use in mirador + react */
+function OpenSeadragonComponent({
+  children = undefined,
+  Container = 'div',
+  osdConfig = {},
+  viewerConfig = {},
+  onUpdateViewport = () => {},
+  setViewer = () => {},
+  style = {},
+  ...passThruProps
+}) {
+  const id = useId();
+  const ref = useRef();
+  const [grabbing, setGrabbing] = useState(false);
+  const viewerRef = useRef(undefined);
+  const initialViewportSet = useRef(false);
+  const lastAppliedBounds = useRef(null);
+  const isResettingViewport = useRef(false);
+  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+
+  const moveHandler = useDebouncedCallback(
+    useCallback(
+      (event) => {
+        /** Shim to provide a mouse-move event coming from the viewer */
+        viewerRef.current?.raiseEvent('mouse-move', event);
+      },
+      [viewerRef],
+    ),
+    10,
+  );
+
+  const onViewportChange = useCallback(
+    (event) => {
+      const { viewport } = event.eventSource;
+
+      if (!initialViewportSet.current) return;
+
+      // Don't save viewport changes during automatic recentering
+      if (isResettingViewport.current) return;
+
+      onUpdateViewport({
+        bounds: viewport.getBounds(),
+        flip: viewport.getFlip(),
+        rotation: viewport.getRotation(),
+        x: Math.round(viewport.centerSpringX.target.value),
+        y: Math.round(viewport.centerSpringY.target.value),
+        zoom: viewport.zoomSpring.target.value,
+      });
+    },
+    [onUpdateViewport, initialViewportSet],
+  );
+
+  const setInitialBounds = useCallback(
+    ({ viewport }) => {
+      if (initialViewportSet.current) return;
+      initialViewportSet.current = true;
+
+      if (viewerConfig.x != null && viewerConfig.y != null) {
+        viewport.panTo(new Openseadragon.Point(viewerConfig.x, viewerConfig.y), true);
+      }
+
+      if (viewerConfig.zoom != null) {
+        viewport.zoomTo(viewerConfig.zoom, new Openseadragon.Point(viewerConfig.x, viewerConfig.y), true);
+      }
+
+      if (viewerConfig.rotation != null && viewerConfig.rotation !== viewport.getRotation()) {
+        viewport.setRotation(viewerConfig.rotation);
+      }
+
+      if (viewerConfig.flip != null && (viewerConfig.flip || false) !== viewport.getFlip()) {
+        viewport.setFlip(viewerConfig.flip);
+      }
+
+      if (!viewerConfig.x && !viewerConfig.y && !viewerConfig.zoom) {
+        if (viewerConfig.bounds) {
+          viewport.fitBounds(new Openseadragon.Rect(...viewerConfig.bounds), true);
+          lastAppliedBounds.current = viewerConfig.bounds;
+        } else {
+          viewport.goHome(true);
+        }
+      }
+    },
+    [initialViewportSet, viewerConfig],
+  );
+
+  useEffect(() => {
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+
+    const { viewport } = viewer;
+
+    if (!initialViewportSet.current) {
+      setInitialBounds(viewer);
+      return;
+    }
+
+    // Check if bounds changed - always recenter when bounds change)
+    if (viewerConfig.bounds) {
+      const boundsChanged =
+        !lastAppliedBounds.current ||
+        viewerConfig.bounds.length !== lastAppliedBounds.current.length ||
+        viewerConfig.bounds.some((val, idx) => val !== lastAppliedBounds.current[idx]);
+
+      // Bounds changed - recenter regardless of whether x/y/zoom exist
+      if (boundsChanged) {
+        isResettingViewport.current = true;
+        lastAppliedBounds.current = viewerConfig.bounds;
+
+        // Wait for the tiles to be fully loaded before recentering
+        const handleTilesLoaded = () => {
+          const rect = new Openseadragon.Rect(...viewerConfig.bounds);
+          viewport.fitBoundsWithConstraints(rect, true);
+          isResettingViewport.current = false;
+        };
+
+        viewer.addOnceHandler('tile-loaded', handleTilesLoaded);
+        return;
+      }
+    }
+
+    // Apply preserved viewport only if bounds haven't changed
+    // Don't apply x/y/zoom if we don't have them (rely on bounds instead)
+    if (!viewerConfig.x || !viewerConfig.y || !viewerConfig.zoom) {
+      return;
+    }
+
+    // @ts-expect-error
+    if (
+      viewerConfig.x != null &&
+      viewerConfig.y != null &&
+      (Math.round(viewerConfig.x) !== Math.round(viewport.centerSpringX.target.value) ||
+        // @ts-expect-error
+        Math.round(viewerConfig.y) !== Math.round(viewport.centerSpringY.target.value))
+    ) {
+      viewport.panTo(new Openseadragon.Point(viewerConfig.x, viewerConfig.y), false);
+    }
+
+    // @ts-expect-error
+    if (viewerConfig.zoom != null && viewerConfig.zoom !== viewport.zoomSpring.target.value) {
+      viewport.zoomTo(viewerConfig.zoom, new Openseadragon.Point(viewerConfig.x, viewerConfig.y), false);
+    }
+
+    if (viewerConfig.rotation != null && viewerConfig.rotation !== viewport.getRotation()) {
+      viewport.setRotation(viewerConfig.rotation);
+    }
+
+    if (viewerConfig.flip != null && (viewerConfig.flip || false) !== viewport.getFlip()) {
+      viewport.setFlip(viewerConfig.flip);
+    }
+  }, [initialViewportSet, setInitialBounds, viewerConfig, viewerRef]);
+
+  // initialize OSD stuff when this component is mounted
+  useEffect(() => {
+    const viewer = Openseadragon({
+      element: ref.current,
+      ...osdConfig,
+    });
+
+    viewer.addHandler('canvas-drag', () => {
+      setGrabbing(true);
+    });
+
+    viewer.addHandler('canvas-drag-end', () => {
+      setGrabbing(false);
+    });
+
+    viewer.addHandler('canvas-double-click', ({ position, shift }) => {
+      if (!osdConfig.zoomPerDoubleClick) return;
+
+      const currentZoom = viewer.viewport.getZoom();
+      const zoomRatio = shift ? 1.0 / osdConfig.zoomPerDoubleClick : osdConfig.zoomPerDoubleClick;
+      viewer.viewport.zoomTo(currentZoom * zoomRatio, viewer.viewport.pointFromPixel(position), false);
+    });
+
+    viewer.addHandler('animation-finish', onViewportChange);
+    // @ts-expect-error
+    viewer.innerTracker.moveHandler = moveHandler;
+
+    viewerRef.current = viewer;
+    setViewer(viewer);
+
+    viewer.addOnceHandler('tile-loaded', () => {
+      initialViewportSet.current = false;
+      setInitialBounds(viewer);
+    });
+
+    forceUpdate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref]);
+
+  // cleanup OSD viewer cruft when this component is unmounted
+  useEffect(
+    () => () => {
+      const viewer = viewerRef.current;
+
+      if (!viewer) return;
+
+      // @ts-expect-error
+      if (viewer.innerTracker?.moveHandler === moveHandler) {
+        // @ts-expect-error
+        viewer.innerTracker.moveHandler = () => {};
+      }
+      // @ts-expect-error
+      viewer.removeAllHandlers();
+
+      viewer.destroy();
+      viewerRef.current = undefined;
+      setViewer(null);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const canvas = viewerRef?.current?.canvas?.firstElementChild;
+    if (canvas) {
+      canvas.setAttribute('role', 'img');
+      canvas.setAttribute('aria-label', t('digitizedView'));
+      canvas.setAttribute('aria-describedby', id);
+    }
+  }, [viewerRef?.current?.canvas?.firstElementChild, id, t]);
+
+  return (
+    <OpenSeadragonViewerContext.Provider value={viewerRef}>
+      <Container id={id} ref={ref} style={{ ...style, cursor: grabbing ? 'grabbing' : 'grab' }} {...passThruProps}>
+        {children}
+      </Container>
+    </OpenSeadragonViewerContext.Provider>
+  );
+}
+
+OpenSeadragonComponent.propTypes = {
+  children: PropTypes.node,
+  Container: PropTypes.elementType,
+  onUpdateViewport: PropTypes.func,
+  osdConfig: PropTypes.object,
+  setViewer: PropTypes.func,
+  style: PropTypes.object,
+  viewerConfig: PropTypes.shape({
+    bounds: PropTypes.arrayOf(PropTypes.number),
+    flip: PropTypes.bool,
+    rotation: PropTypes.number,
+    x: PropTypes.number,
+    y: PropTypes.number,
+    zoom: PropTypes.number,
+  }),
+};
+
+export default OpenSeadragonComponent;

package/src/components/OpenSeadragonTileSource.jsx

@@ -0,0 +1,105 @@
+import Openseadragon from 'openseadragon';
+import PropTypes from 'prop-types';
+import { useContext, useEffect, useRef } from 'react';
+import OpenSeadragonViewerContext from '../contexts/OpenSeadragonViewerContext';
+import FailedImageContext from '../contexts/FailedImageContext';
+
+/** OSD tile source shim that adds + updates its tile source data */
+export default function OpenSeadragonTileSource({
+  index = undefined,
+  opacity = undefined,
+  fitBounds = undefined,
+  tileSource = {},
+  url = undefined,
+}) {
+  const viewer = useContext(OpenSeadragonViewerContext);
+  const { notifyFailure, fallbackImage } = useContext(FailedImageContext);
+  const tiledImage = useRef(undefined);
+
+  useEffect(() => {
+    if (opacity == null) return;
+
+    tiledImage.current?.setOpacity(opacity);
+  }, [opacity]);
+
+  useEffect(() => {
+    if (!fitBounds) return;
+
+    tiledImage.current?.fitBounds(new Openseadragon.Rect(...fitBounds));
+  }, [fitBounds]);
+
+  useEffect(() => {
+    if (!tiledImage.current || !viewer?.current || index == null) return;
+
+    viewer.current.world.setItemIndex(tiledImage.current, index);
+  }, [index, viewer]);
+
+  useEffect(() => {
+    if (!viewer?.current) return undefined;
+
+    const loadFallback = () => {
+      if (!fallbackImage) {
+        return;
+      }
+
+      viewer.current.addTiledImage({
+        tileSource: { type: 'image', url: fallbackImage },
+        index,
+        opacity,
+        fitBounds: fitBounds ? new Openseadragon.Rect(...fitBounds) : undefined,
+        success: (ev) => {
+          tiledImage.current = ev.item;
+        },
+      });
+    };
+
+    const promise = new Promise((resolve, reject) => {
+      const localTileSource = (url && { type: 'image', url }) ||
+        ((typeof tileSource === 'string' || tileSource instanceof String) && tileSource) ||
+          // OSD mutates this object, so we give it a shallow copy
+          { ...tileSource };
+
+      viewer.current?.addTiledImage({
+        tileSource: localTileSource,
+        index,
+        opacity,
+        fitBounds: fitBounds ? new Openseadragon.Rect(...fitBounds) : undefined,
+
+        success: (event) => resolve(event),
+
+        error: (event) => {
+          const imageUrl = url || (typeof tileSource === 'string' ? tileSource : tileSource?.['@id']);
+          if (imageUrl) notifyFailure(imageUrl);
+          loadFallback();
+
+          reject(event);
+        },
+      });
+    })
+      .then((event) => {
+        tiledImage.current = event.item;
+      })
+      .catch((err) => {
+        console.warn('[Mirador: OSD tile image load failed]', err);
+      });
+
+    const osd = viewer.current;
+    return () =>
+      promise.finally(() => {
+        if (osd && tiledImage.current) {
+          osd.world.removeItem(tiledImage.current);
+        }
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewer?.current, url]);
+
+  return null;
+}
+
+OpenSeadragonTileSource.propTypes = {
+  fitBounds: PropTypes.arrayOf(PropTypes.number),
+  index: PropTypes.number,
+  opacity: PropTypes.number,
+  tileSource: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  url: PropTypes.string,
+};

package/src/components/OpenSeadragonViewer.jsx

@@ -0,0 +1,161 @@
+import { useRef, Children, cloneElement, useCallback, useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import OpenSeadragon from 'openseadragon';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import ns from '../config/css-ns';
+import AnnotationsOverlay from '../containers/AnnotationsOverlay';
+import CanvasWorld from '../lib/CanvasWorld';
+import { PluginHook } from './PluginHook';
+import { OSDReferences } from '../plugins/OSDReferences';
+import OpenSeadragonComponent from './OpenSeadragonComponent';
+import TileSource from './OpenSeadragonTileSource';
+import { ImageFailureMessage } from './ImageFailureMessage';
+
+const StyledSection = styled('section')({
+  cursor: 'grab',
+  flex: 1,
+  position: 'relative',
+});
+
+/**
+ * Represents a OpenSeadragonViewer in the mirador workspace. Responsible for mounting
+ * and rendering OSD.
+ */
+export function OpenSeadragonViewer({
+  children = null,
+  label = null,
+  windowId,
+  osdConfig = {},
+  viewerConfig = null,
+  drawAnnotations = false,
+  infoResponses = [],
+  canvasWorld,
+  nonTiledImages = [],
+  updateViewport,
+  ...rest
+}) {
+  const { t } = useTranslation();
+  const apiRef = useRef();
+  const [viewer, setViewer] = useState(null);
+  const onViewportChange = useCallback(
+    ({ flip, rotation, x, y, zoom }) => {
+      updateViewport(windowId, {
+        flip,
+        rotation,
+        x,
+        y,
+        zoom,
+      });
+    },
+    [updateViewport, windowId],
+  );
+
+  const zoomToWorld = useCallback(
+    (immediately = true) => {
+      if (!apiRef.current?.viewport) return;
+
+      apiRef.current.viewport.fitBounds(new OpenSeadragon.Rect(...canvasWorld.worldBounds()), immediately);
+    },
+    [canvasWorld, apiRef],
+  );
+
+  useEffect(() => {
+    OSDReferences.set(windowId, apiRef);
+    return () => OSDReferences.remove(windowId);
+  }, [apiRef, windowId]);
+
+  useEffect(() => {
+    apiRef.current = viewer;
+  }, [apiRef, viewer]);
+
+  const enhancedChildren = Children.map(children, (child) =>
+    cloneElement(child, {
+      zoomToWorld,
+    }),
+  );
+
+  const pluginProps = {
+    canvasWorld,
+    drawAnnotations,
+    infoResponses,
+    label,
+    nonTiledImages,
+    osdConfig,
+    t,
+    updateViewport,
+    viewerConfig,
+    windowId,
+    ...rest,
+  };
+
+  const imageUrls = useMemo(
+    () => [...infoResponses.map((info) => info.id), ...nonTiledImages.map((img) => img.id)],
+    [infoResponses, nonTiledImages],
+  );
+
+  return (
+    <OpenSeadragonComponent
+      className={classNames(ns('osd-container'))}
+      Container={StyledSection}
+      osdConfig={osdConfig}
+      viewerConfig={viewerConfig || (canvasWorld.hasDimensions() ? { bounds: canvasWorld.worldBounds() } : undefined)}
+      onUpdateViewport={onViewportChange}
+      setViewer={setViewer}
+      aria-label={t('item', { label })}
+      aria-live="polite"
+    >
+      {infoResponses.map((infoResponse) => {
+        const contentResource = canvasWorld.contentResource(infoResponse.id);
+
+        if (!contentResource) return null;
+
+        const fitBounds = canvasWorld.contentResourceToWorldCoordinates(contentResource);
+        const index = canvasWorld.layerIndexOfImageResource(contentResource);
+        const opacity = canvasWorld.layerOpacityOfImageResource(contentResource);
+
+        return (
+          <TileSource
+            key={infoResponse.id}
+            tileSource={infoResponse.json}
+            fitBounds={fitBounds}
+            index={index}
+            opacity={opacity}
+          />
+        );
+      })}
+      {nonTiledImages.map((contentResource) => {
+        const type = contentResource.getProperty('type');
+        const format = contentResource.getProperty('format') || '';
+
+        if (!(type === 'Image' || type === 'dctypes:Image' || format.startsWith('image/'))) return null;
+
+        const fitBounds = canvasWorld.contentResourceToWorldCoordinates(contentResource);
+        const index = canvasWorld.layerIndexOfImageResource(contentResource);
+        const opacity = canvasWorld.layerOpacityOfImageResource(contentResource);
+
+        return (
+          <TileSource key={contentResource.id} url={contentResource.id} fitBounds={fitBounds} index={index} opacity={opacity} />
+        );
+      })}
+      {drawAnnotations && <AnnotationsOverlay viewer={viewer} windowId={windowId} />}
+      {enhancedChildren}
+      <ImageFailureMessage imageUrls={imageUrls} />
+      <PluginHook targetName="OpenSeadragonViewer" viewer={viewer} {...pluginProps} />
+    </OpenSeadragonComponent>
+  );
+}
+
+OpenSeadragonViewer.propTypes = {
+  canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired,
+  children: PropTypes.node,
+  drawAnnotations: PropTypes.bool,
+  infoResponses: PropTypes.arrayOf(PropTypes.object),
+  label: PropTypes.string,
+  nonTiledImages: PropTypes.array,
+  osdConfig: PropTypes.object,
+  updateViewport: PropTypes.func.isRequired,
+  viewerConfig: PropTypes.object,
+  windowId: PropTypes.string.isRequired,
+};