dbf-mirador 4.2.3

package/src/components/AnnotationsOverlay.jsx

@@ -0,0 +1,328 @@
+import { useRef, useEffect, useCallback, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { useDebouncedCallback } from 'use-debounce';
+import sortBy from 'lodash/sortBy';
+import xor from 'lodash/xor';
+import OpenSeadragonCanvasOverlay from '../lib/OpenSeadragonCanvasOverlay';
+import CanvasWorld from '../lib/CanvasWorld';
+import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';
+import { buildPath2D } from '../lib/svgShapesToPath';
+
+/** @private */
+function isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, point) {
+  const [canvasX, canvasY] = canvasWorld.canvasToWorldCoordinates(canvas.id);
+  const relativeX = point.x - canvasX;
+  const relativeY = point.y - canvasY;
+
+  if (resource.svgSelector) {
+    const context = osdCanvasOverlay.context2d;
+    const { svgPaths } = new CanvasAnnotationDisplay({ resource });
+    return [...svgPaths].some((path) => context.isPointInPath(buildPath2D(path), relativeX, relativeY));
+  }
+
+  if (resource.fragmentSelector) {
+    const [x, y, w, h] = resource.fragmentSelector;
+    return x <= relativeX && relativeX <= x + w && y <= relativeY && relativeY <= y + h;
+  }
+  return false;
+}
+
+/**
+ * See: https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#.event:canvas-click
+ * Gestures returned from this method are likely viewer interactions such as pan and zoom,
+ * not taps and clicks targeted to an annotation.
+ * In deciding whether to change the display of the annotation overlay,
+ * we want to ignore these irrelevant gestures.
+ * @private
+ */
+function isIgnoredGesture(event) {
+  const pointerType = event.originalEvent?.pointerType;
+  return (pointerType === 'touch' || pointerType === 'pen') && event.quick === false;
+}
+
+/**
+ * Represents a OpenSeadragonViewer in the mirador workspace. Responsible for mounting
+ * and rendering OSD.
+ */
+export function AnnotationsOverlay({
+  annotations = [],
+  canvasWorld,
+  deselectAnnotation = () => {},
+  drawAnnotations = true,
+  drawSearchAnnotations = true,
+  highlightAllAnnotations = false,
+  hoverAnnotation = () => {},
+  hoveredAnnotationIds = [],
+  palette = {},
+  searchAnnotations = [],
+  selectAnnotation = () => {},
+  selectedAnnotationId = null,
+  viewer = null,
+  windowId,
+}) {
+  const ref = useRef();
+
+  const osdCanvasOverlay = useMemo(() => new OpenSeadragonCanvasOverlay(viewer, ref), [ref, viewer]);
+
+  const toggleAnnotation = useCallback(
+    (id) => {
+      if (selectedAnnotationId === id) {
+        deselectAnnotation(windowId, id);
+      } else {
+        selectAnnotation(windowId, id);
+      }
+    },
+    [selectedAnnotationId, deselectAnnotation, selectAnnotation, windowId],
+  );
+
+  /**
+   * annotationsToContext - converts anontations to a canvas context
+   */
+  const annotationsToContext = useCallback(
+    (renderedAnnotations, currentPalette) => {
+      const context = osdCanvasOverlay.context2d;
+      renderedAnnotations.forEach((annotation) => {
+        annotation.resources.forEach((resource) => {
+          const osdCanvasIndex = canvasWorld.canvases.findIndex((canvas) => canvas.id === resource.targetId);
+          if (osdCanvasIndex === -1) return;
+          const viewportCanvas = viewer.world.getItemAt(osdCanvasIndex);
+          if (!viewportCanvas) return;
+          const offset = canvasWorld.offsetByCanvas(resource.targetId);
+          const zoomRatio = viewportCanvas.viewportToImageZoom(viewer.viewport.getZoom(true));
+          const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
+            hovered: hoveredAnnotationIds.includes(resource.id),
+            offset,
+            palette: {
+              ...currentPalette,
+              default: {
+                ...currentPalette.default,
+                ...(!highlightAllAnnotations && currentPalette.hidden),
+              },
+            },
+            resource,
+            selected: selectedAnnotationId === resource.id,
+            zoomRatio,
+          });
+          canvasAnnotationDisplay.toContext(context);
+        });
+      });
+    },
+    [osdCanvasOverlay, viewer, canvasWorld, highlightAllAnnotations, hoveredAnnotationIds, selectedAnnotationId],
+  );
+
+  const renderAnnotations = useCallback(() => {
+    if (drawSearchAnnotations) {
+      annotationsToContext(searchAnnotations, palette.search);
+    }
+
+    if (drawAnnotations) {
+      annotationsToContext(annotations, palette.annotations);
+    }
+  }, [annotations, annotationsToContext, drawAnnotations, drawSearchAnnotations, palette, searchAnnotations]);
+
+  const updateCanvas = useCallback(() => {
+    if (!osdCanvasOverlay) return;
+
+    osdCanvasOverlay.clear();
+    osdCanvasOverlay.resize();
+    osdCanvasOverlay.canvasUpdate(renderAnnotations);
+  }, [osdCanvasOverlay, renderAnnotations]);
+
+  const annotationsAtPoint = useCallback(
+    (canvas, point) => {
+      const lists = [...annotations, ...searchAnnotations];
+      const annos = lists
+        .flatMap((l) => l.resources)
+        .filter((resource) => {
+          if (canvas.id !== resource.targetId) return false;
+
+          return isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, point);
+        });
+
+      return annos;
+    },
+    [annotations, canvasWorld, osdCanvasOverlay, searchAnnotations],
+  );
+
+  const onCanvasClick = useCallback(
+    (event) => {
+      if (isIgnoredGesture(event)) return;
+
+      const {
+        position: webPosition,
+        eventSource: { viewport },
+      } = event;
+      const point = viewport.pointFromPixel(webPosition);
+
+      const canvas = canvasWorld.canvasAtPoint(point);
+      if (!canvas) return;
+      const [_canvasX, _canvasY, canvasWidth, canvasHeight] = canvasWorld.canvasToWorldCoordinates(canvas.id);
+
+      // get all the annotations that contain the click
+      const annos = annotationsAtPoint(canvas, point);
+
+      if (annos.length > 0) {
+        event.preventDefaultAction = true; // eslint-disable-line no-param-reassign
+      }
+
+      if (annos.length === 1) {
+        toggleAnnotation(annos[0].id);
+      } else if (annos.length > 0) {
+        /**
+         * Try to find the "right" annotation to select after a click.
+         *
+         * This is perhaps a naive method, but seems to deal with rectangles and SVG shapes:
+         *
+         * - figure out how many points around a circle are inside the annotation shape
+         * - if there's a shape with the fewest interior points, it's probably the one
+         *       with the closest boundary?
+         * - if there's a tie, make the circle bigger and try again.
+         */
+        const annosWithClickScore = (radius) => {
+          const degreesToRadians = Math.PI / 180;
+
+          return (anno) => {
+            let score = 0;
+            for (let degrees = 0; degrees < 360; degrees += 1) {
+              const x = Math.cos(degrees * degreesToRadians) * radius + point.x;
+              const y = Math.sin(degrees * degreesToRadians) * radius + point.y;
+
+              if (isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, anno, canvas, { x, y })) score += 1;
+            }
+
+            return { anno, score };
+          };
+        };
+
+        let radius = 1;
+        let annosWithScore = sortBy(annos.map(annosWithClickScore(radius)), 'score');
+
+        while (radius < Math.max(canvasWidth, canvasHeight) && annosWithScore[0].score === annosWithScore[1].score) {
+          radius *= 2;
+          annosWithScore = sortBy(annos.map(annosWithClickScore(radius)), 'score');
+        }
+
+        toggleAnnotation(annosWithScore[0].anno.id);
+      }
+    },
+    [annotationsAtPoint, canvasWorld, osdCanvasOverlay, toggleAnnotation],
+  );
+
+  const onCanvasMouseMove = useDebouncedCallback(
+    useCallback(
+      (event) => {
+        if (annotations.length === 0 && searchAnnotations.length === 0) return;
+
+        const { position: webPosition } = event;
+        const point = viewer.viewport.pointFromPixel(webPosition);
+
+        const canvas = canvasWorld.canvasAtPoint(point);
+        if (!canvas) {
+          hoverAnnotation(windowId, []);
+          return;
+        }
+
+        const annos = annotationsAtPoint(canvas, point);
+
+        if (
+          xor(
+            hoveredAnnotationIds,
+            annos.map((a) => a.id),
+          ).length > 0
+        ) {
+          hoverAnnotation(
+            windowId,
+            annos.map((a) => a.id),
+          );
+        }
+      },
+      [annotations, annotationsAtPoint, canvasWorld, hoverAnnotation, hoveredAnnotationIds, searchAnnotations, viewer, windowId],
+    ),
+    10,
+  );
+
+  const onCanvasExit = useCallback(() => {
+    // a move event may be queued up by the debouncer
+    onCanvasMouseMove.cancel();
+    hoverAnnotation(windowId, []);
+  }, [hoverAnnotation, onCanvasMouseMove, windowId]);
+
+  const onUpdateViewport = useCallback(() => {
+    updateCanvas();
+  }, [updateCanvas]);
+
+  useEffect(() => {
+    if (!viewer) return undefined;
+
+    viewer.addHandler('canvas-click', onCanvasClick);
+    viewer.addHandler('canvas-exit', onCanvasExit);
+    viewer.addHandler('mouse-move', onCanvasMouseMove);
+    viewer.addHandler('update-viewport', onUpdateViewport);
+
+    return () => {
+      viewer.removeHandler('canvas-click', onCanvasClick);
+      viewer.removeHandler('canvas-exit', onCanvasExit);
+      viewer.removeHandler('mouse-move', onCanvasMouseMove);
+      viewer.removeHandler('update-viewport', onUpdateViewport);
+    };
+  }, [onCanvasClick, onCanvasExit, onCanvasMouseMove, onUpdateViewport, viewer]);
+
+  useEffect(() => {
+    if (viewer) viewer.forceRedraw();
+  }, [
+    annotations,
+    drawAnnotations,
+    drawSearchAnnotations,
+    highlightAllAnnotations,
+    hoveredAnnotationIds,
+    searchAnnotations,
+    selectedAnnotationId,
+    viewer,
+  ]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (hoveredAnnotationIds.length > 0) {
+      ref.current.style.cursor = 'pointer';
+    } else {
+      ref.current.style.cursor = '';
+    }
+  }, [hoveredAnnotationIds, ref]);
+
+  if (!viewer) return null;
+
+  return ReactDOM.createPortal(
+    <div
+      ref={ref}
+      style={{
+        height: '100%',
+        left: 0,
+        position: 'absolute',
+        top: 0,
+        width: '100%',
+      }}
+    >
+      <canvas />
+    </div>,
+    viewer.canvas,
+  );
+}
+
+AnnotationsOverlay.propTypes = {
+  annotations: PropTypes.arrayOf(PropTypes.object),
+  canvasWorld: PropTypes.instanceOf(CanvasWorld).isRequired,
+  deselectAnnotation: PropTypes.func,
+  drawAnnotations: PropTypes.bool,
+  drawSearchAnnotations: PropTypes.bool,
+  highlightAllAnnotations: PropTypes.bool,
+  hoverAnnotation: PropTypes.func,
+  hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
+  palette: PropTypes.object,
+  searchAnnotations: PropTypes.arrayOf(PropTypes.object),
+  selectAnnotation: PropTypes.func,
+  selectedAnnotationId: PropTypes.string,
+  viewer: PropTypes.object,
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/App.jsx

@@ -0,0 +1,34 @@
+import { createRef, lazy, Suspense } from 'react';
+import PropTypes from 'prop-types';
+import PluginProvider from '../extend/PluginProvider';
+import AppProviders from '../containers/AppProviders';
+import WorkspaceContext from '../contexts/WorkspaceContext';
+
+const WorkspaceArea = lazy(() => import('../containers/WorkspaceArea'));
+
+/**
+ * This is the top level Mirador component.
+ * @prop {Object} manifests
+ */
+export function App({ dndManager = undefined, plugins = [] }) {
+  const areaRef = createRef();
+
+  return (
+    <PluginProvider plugins={plugins}>
+      <AppProviders dndManager={dndManager}>
+        <WorkspaceContext.Provider value={areaRef}>
+          <Suspense fallback={<div />}>
+            <WorkspaceArea areaRef={areaRef} />
+          </Suspense>
+        </WorkspaceContext.Provider>
+      </AppProviders>
+    </PluginProvider>
+  );
+}
+
+App.propTypes = {
+  dndManager: PropTypes.object,
+  plugins: PropTypes.array,
+};
+
+export default App;

package/src/components/AppProviders.jsx

@@ -0,0 +1,129 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { I18nextProvider } from 'react-i18next';
+import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material/styles';
+import { DndContext, DndProvider } from 'react-dnd';
+import { MultiBackend } from 'react-dnd-multi-backend';
+import { HTML5toTouch } from 'rdndmb-html5-to-touch';
+import rtlPlugin from 'stylis-plugin-rtl';
+import { prefixer } from 'stylis';
+import { CacheProvider } from '@emotion/react';
+import createCache from '@emotion/cache';
+import createI18nInstance from '../i18n';
+import FailedImageProvider from '../contexts/FailedImageProvider';
+import { FullScreen, useFullScreenHandle } from '../lib/FullScreenHandle';
+import FullScreenContext from '../contexts/FullScreenContext';
+import LocaleContext from '../contexts/LocaleContext';
+
+/**
+ * Allow applications to opt-out of (or provide their own) drag and drop context
+ */
+const MaybeDndProvider = ({ dndManager = undefined, children }) => {
+  if (dndManager === false) {
+    return children;
+  }
+
+  if (dndManager === undefined) {
+    return (
+      <DndProvider backend={MultiBackend} options={HTML5toTouch}>
+        {children}
+      </DndProvider>
+    );
+  }
+
+  return <DndContext.Provider value={dndManager}>{children}</DndContext.Provider>;
+};
+
+MaybeDndProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  dndManager: PropTypes.oneOf([undefined, false, PropTypes.object]),
+};
+
+/**
+ * Shim to inject the full screen handle into a context
+ */
+const FullScreenShim = ({ children }) => {
+  const handle = useFullScreenHandle();
+
+  return (
+    <FullScreen handle={handle}>
+      <FullScreenContext.Provider value={handle}>{children}</FullScreenContext.Provider>
+    </FullScreen>
+  );
+};
+
+FullScreenShim.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+/**
+ * Hook up the I18next provider to the configuration in redux to allow
+ * plugins + config to inject additional translations.
+ */
+const StoreAwareI18nextProvider = ({ children, language, translations }) => {
+  const [i18n] = useState(createI18nInstance({ lng: language }));
+  useEffect(() => {
+    if (i18n && i18n.language !== language) i18n.changeLanguage(language);
+  }, [i18n, language]);
+
+  useEffect(() => {
+    Object.keys(translations).forEach((lng) => {
+      i18n.addResourceBundle(lng, 'translation', translations[lng], true, true);
+    });
+  }, [i18n, translations]);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+};
+
+StoreAwareI18nextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  language: PropTypes.string.isRequired,
+  translations: PropTypes.object.isRequired,
+};
+
+/**
+ * Create rtl emotion cache
+ */
+const cacheRtl = createCache({
+  key: 'muirtl',
+  stylisPlugins: [prefixer, rtlPlugin],
+});
+
+/**
+ * Create default emotion cache
+ */
+const cacheDefault = createCache({
+  key: 'mui',
+});
+
+/**
+ * This component adds viewer-specific providers.
+ * @prop {Object} manifests
+ */
+export function AppProviders({ children = null, language, theme, translations, dndManager = undefined }) {
+  return (
+    <FullScreenShim>
+      <StoreAwareI18nextProvider language={language} translations={translations}>
+        <LocaleContext.Provider value={language}>
+          <StyledEngineProvider injectFirst>
+            <CacheProvider value={theme.direction === 'rtl' ? cacheRtl : cacheDefault}>
+              <ThemeProvider theme={createTheme(theme)}>
+                <MaybeDndProvider dndManager={dndManager}>
+                  <FailedImageProvider>{children}</FailedImageProvider>
+                </MaybeDndProvider>
+              </ThemeProvider>
+            </CacheProvider>
+          </StyledEngineProvider>
+        </LocaleContext.Provider>
+      </StoreAwareI18nextProvider>
+    </FullScreenShim>
+  );
+}
+
+AppProviders.propTypes = {
+  children: PropTypes.node,
+  dndManager: PropTypes.object,
+  language: PropTypes.string.isRequired,
+  theme: PropTypes.object.isRequired,
+  translations: PropTypes.object.isRequired,
+};

package/src/components/AttributionPanel.jsx

@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Skeleton from '@mui/material/Skeleton';
+import { useTranslation } from 'react-i18next';
+import { Img } from 'react-image';
+import CompanionWindow from '../containers/CompanionWindow';
+import { CompanionWindowSection } from './CompanionWindowSection';
+import LabelValueMetadata from '../containers/LabelValueMetadata';
+import ns from '../config/css-ns';
+import { PluginHook } from './PluginHook';
+
+const StyledLogo = styled(Img)(() => ({
+  maxWidth: '100%',
+}));
+
+const StyledPlaceholder = styled(Skeleton)(({ theme }) => ({
+  backgroundColor: theme.palette.grey[300],
+}));
+
+/**
+ * WindowSideBarInfoPanel
+ */
+export function AttributionPanel({ manifestLogo = null, requiredStatement = null, rights = null, windowId, id }) {
+  const { t } = useTranslation();
+
+  // eslint-disable-next-line prefer-rest-params
+  const pluginProps = arguments[0];
+
+  return (
+    <CompanionWindow title={t('attributionTitle')} paperClassName={ns('attribution-panel')} windowId={windowId} id={id}>
+      <CompanionWindowSection>
+        {requiredStatement && <LabelValueMetadata labelValuePairs={requiredStatement} defaultLabel={t('attribution')} />}
+        {rights && rights.length > 0 && (
+          <dl className={ns('label-value-metadata')}>
+            <Typography variant="subtitle2" component="dt">
+              {t('rights')}
+            </Typography>
+            {rights.map((v) => (
+              <Typography variant="body1" component="dd" key={v.toString()}>
+                <Link target="_blank" rel="noopener noreferrer" href={v}>
+                  {v}
+                </Link>
+              </Typography>
+            ))}
+          </dl>
+        )}
+      </CompanionWindowSection>
+
+      {manifestLogo && (
+        <CompanionWindowSection>
+          <StyledLogo
+            src={[manifestLogo]}
+            alt=""
+            role="presentation"
+            unloader={<StyledPlaceholder variant="rectangular" height={60} width={60} />}
+          />
+        </CompanionWindowSection>
+      )}
+
+      <PluginHook targetName="AttributionPanel" {...pluginProps} />
+    </CompanionWindow>
+  );
+}
+
+AttributionPanel.propTypes = {
+  id: PropTypes.string.isRequired,
+  manifestLogo: PropTypes.string,
+  requiredStatement: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.string,
+    }),
+  ),
+  rights: PropTypes.arrayOf(PropTypes.string),
+  windowId: PropTypes.string.isRequired,
+};

package/src/components/AudioViewer.jsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledContainer = styled('div')({
+  alignItems: 'center',
+  display: 'flex',
+  width: '100%',
+});
+
+const StyledAudio = styled('audio')({
+  width: '100%',
+});
+
+/** */
+export function AudioViewer({ audioOptions = {}, audioResources = [], captions = [] }) {
+  return (
+    <StyledContainer>
+      <StyledAudio {...audioOptions}>
+        {audioResources.map((audio) => (
+          <Fragment key={audio.id}>
+            <source src={audio.id} type={audio.getFormat()} />
+          </Fragment>
+        ))}
+        {captions.map((caption) => (
+          <Fragment key={caption.id}>
+            <track src={caption.id} label={caption.getDefaultLabel()} srcLang={caption.getProperty('language')} />
+          </Fragment>
+        ))}
+      </StyledAudio>
+    </StyledContainer>
+  );
+}
+
+AudioViewer.propTypes = {
+  audioOptions: PropTypes.object,
+  audioResources: PropTypes.arrayOf(PropTypes.object),
+  captions: PropTypes.arrayOf(PropTypes.object),
+};

package/src/components/BackgroundPluginArea.jsx

@@ -0,0 +1,9 @@
+import ns from '../config/css-ns';
+import { PluginHook } from './PluginHook';
+
+/** invisible area where background plugins can add to */
+export const BackgroundPluginArea = ({ ...props }) => (
+  <div className={ns('background-plugin-area')} style={{ display: 'none' }}>
+    <PluginHook targetName="BackgroundPluginArea" {...props} />
+  </div>
+);

package/src/components/Branding.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import { useTranslation } from 'react-i18next';
+import MiradorIcon from './icons/MiradorIcon';
+
+/**
+ * Display a branding icon
+ */
+export function Branding({ variant = 'default', ...ContainerProps }) {
+  const { t } = useTranslation();
+  return (
+    <Stack sx={{ alignItems: 'center' }} {...ContainerProps}>
+      {variant === 'wide' && (
+        <div>
+          <Typography align="center" component="p" variant="h3">
+            {t('mirador')}
+          </Typography>
+        </div>
+      )}
+      <Typography align="center">
+        <IconButton component="a" href="https://projectmirador.org" target="_blank" rel="noopener" size="large">
+          <MiradorIcon aria-label={t('aboutMirador')} titleAccess={t('aboutMirador')} fontSize="large" />
+        </IconButton>
+      </Typography>
+    </Stack>
+  );
+}
+
+Branding.propTypes = {
+  variant: PropTypes.oneOf(['default', 'wide']),
+};