{viewer.render()}
@@ -83,7 +85,8 @@ const setupMiradorViewer = async (config, plugins) => {
export const setupIntegrationTestViewer = (config, plugins) => {
beforeEach(async (context) => {
const miradorInstance = await setupMiradorViewer(config, plugins);
- context.miradorInstance = miradorInstance; // eslint-disable-line no-param-reassign
+ // eslint-disable-next-line no-param-reassign
+ context.miradorInstance = miradorInstance;
// Wait for the viewer to render
expect(await screen.findByTestId('mirador')).toBeInTheDocument();
diff --git a/eslint.config.js b/eslint.config.js
index c155a8610f..2f2486a8e9 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -10,14 +10,7 @@ import jestDomPlugin from 'eslint-plugin-jest-dom';
export default [
// Ignore patterns
{
- ignores: [
- '**/dist/**',
- '**/node_modules/**',
- '**/coverage/**',
- '**/config/**',
- '**/styles/**',
- '**/packages/**',
- ],
+ ignores: ['**/dist/**', '**/node_modules/**', '**/coverage/**', '**/config/**', '**/styles/**', '**/packages/**'],
},
// Base ESLint recommended rules
@@ -66,7 +59,7 @@ export default [
'consistent-return': 'error',
'default-case': ['error', { commentPattern: '^no default$' }],
'dot-notation': ['error', { allowKeywords: true }],
- 'eqeqeq': ['warn', 'smart'],
+ eqeqeq: ['warn', 'smart'],
'import/extensions': ['error', 'ignorePackages', { js: 'never', jsx: 'never' }],
'import/first': 'error',
'import/newline-after-import': ['error', { count: 1 }],
@@ -88,7 +81,7 @@ export default [
'no-lonely-if': 'error',
'no-nested-ternary': 'warn',
'no-new-func': 'error',
- 'no-param-reassign': ['error', { props: true}],
+ 'no-param-reassign': ['error', { props: true }],
'no-restricted-globals': [
'error',
{ name: 'isFinite', message: 'Use Number.isFinite instead' },
@@ -105,10 +98,16 @@ export default [
'no-useless-return': 'error',
'no-var': 'error',
'prefer-const': 'error',
- 'prefer-destructuring': ['warn', { VariableDeclarator: { array: false, object: true }, AssignmentExpression: { array: false, object: false } }],
+ 'prefer-destructuring': [
+ 'warn',
+ {
+ VariableDeclarator: { array: false, object: true },
+ AssignmentExpression: { array: false, object: false },
+ },
+ ],
'prefer-rest-params': 'error',
'prefer-template': 'warn',
- 'radix': 'error',
+ radix: 'error',
'react-hooks/exhaustive-deps': 'error',
'react/function-component-definition': 'off',
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
diff --git a/package.json b/package.json
index a2d71a1c0f..1eccad285a 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,14 @@
"scripts": {
"build": "vite build --config vite.config.js && vite build --config vite-umd.config.js",
"clean": "rm -rf ./dist",
+ "format": "prettier --write .",
+ "format:check": "prettier --check .",
"lint": "node_modules/.bin/eslint ./ && npm run lint:translations && npm run lint:containers",
"lint:containers": "node ./scripts/container-lint.js",
"lint:translations": "node ./scripts/i18n-lint.js",
"size": "bundlewatch --config bundlewatch.config.json",
"start": "vite",
- "test": "npm run build && npm run lint && npm run size && vitest run"
+ "test": "npm run build && npm run lint && npm run format:check && npm run size && vitest run"
},
"license": "Apache-2.0",
"contributors": [
@@ -106,6 +108,7 @@
"glob": "^13.0.6",
"globals": "^15.15.0",
"happy-dom": "^20.0",
+ "prettier": "^3.8.1",
"react": "^19.0.0",
"react-dnd-test-backend": "^16.0.1",
"react-dom": "^19.0.0",
diff --git a/scripts/i18n-lint.js b/scripts/i18n-lint.js
index b30981de87..1e1d46fb7b 100644
--- a/scripts/i18n-lint.js
+++ b/scripts/i18n-lint.js
@@ -13,7 +13,10 @@ const errors = {};
* Return a new copy of the array lowercased and sorted
*/
function lowerCaseSortedArray(arr) {
- return arr.slice().map(v => v.toLowerCase()).sort();
+ return arr
+ .slice()
+ .map((v) => v.toLowerCase())
+ .sort();
}
/**
@@ -49,17 +52,13 @@ Object.keys(normalizedFiles).forEach((fileName) => {
if (unsorted.length) {
errors[fileName] = errors[fileName] || [];
errors[fileName].push('Keys are not sorted properly');
- errors[fileName].push(
- `\tSorting starts to be incorrect around: ${unsorted[0]}`,
- );
+ errors[fileName].push(`\tSorting starts to be incorrect around: ${unsorted[0]}`);
}
if (missing.length) {
errors[fileName] = errors[fileName] || [];
errors[fileName].push('Some keys from the default locale file are missing');
- errors[fileName].push(
- `\tMissing keys: ${missing.join(', ')}`,
- );
+ errors[fileName].push(`\tMissing keys: ${missing.join(', ')}`);
}
});
diff --git a/setupTest.js b/setupTest.js
index da533e4411..fe8fe529f1 100644
--- a/setupTest.js
+++ b/setupTest.js
@@ -22,9 +22,7 @@ beforeEach((context) => {
});
/** */
-class Path2D {
-
-}
+class Path2D {}
global.Path2D = Path2D;
diff --git a/src/components/AccessTokenSender.jsx b/src/components/AccessTokenSender.jsx
index ade30b8c17..e78cec6e8c 100644
--- a/src/components/AccessTokenSender.jsx
+++ b/src/components/AccessTokenSender.jsx
@@ -6,9 +6,12 @@ import { IIIFIFrameCommunication } from './IIIFIFrameCommunication';
* Opens a new window for click
*/
export function AccessTokenSender({ handleAccessTokenMessage, url = undefined }) {
- const onReceiveAccessTokenMessage = useCallback((e) => {
- if (e.data && e.data.messageId && e.data.messageId === url) handleAccessTokenMessage(e.data);
- }, [handleAccessTokenMessage, url]);
+ const onReceiveAccessTokenMessage = useCallback(
+ (e) => {
+ if (e.data && e.data.messageId && e.data.messageId === url) handleAccessTokenMessage(e.data);
+ },
+ [handleAccessTokenMessage, url],
+ );
if (!url) return null;
@@ -21,11 +24,7 @@ export function AccessTokenSender({ handleAccessTokenMessage, url = undefined })
external, no-op
*/
return (
-
+
);
}
diff --git a/src/components/AnnotationSettings.jsx b/src/components/AnnotationSettings.jsx
index 8604a2f17d..3c3dfb992e 100644
--- a/src/components/AnnotationSettings.jsx
+++ b/src/components/AnnotationSettings.jsx
@@ -7,10 +7,8 @@ import MiradorMenuButton from '../containers/MiradorMenuButton';
/**
* AnnotationSettings is a component to handle various annotation
* display settings in the Annotation companion window
-*/
-export function AnnotationSettings({
- displayAll, displayAllDisabled, toggleAnnotationDisplay,
-}) {
+ */
+export function AnnotationSettings({ displayAll, displayAllDisabled, toggleAnnotationDisplay }) {
const { t } = useTranslation();
return (
- { displayAll ? : }
+ {displayAll ? : }
);
}
@@ -28,5 +26,6 @@ AnnotationSettings.propTypes = {
displayAll: PropTypes.bool.isRequired,
displayAllDisabled: PropTypes.bool.isRequired,
toggleAnnotationDisplay: PropTypes.func.isRequired,
- windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
+ // eslint-disable-next-line react/no-unused-prop-types
+ windowId: PropTypes.string.isRequired,
};
diff --git a/src/components/AnnotationsOverlay.jsx b/src/components/AnnotationsOverlay.jsx
index 152ddce6ad..a99762caec 100644
--- a/src/components/AnnotationsOverlay.jsx
+++ b/src/components/AnnotationsOverlay.jsx
@@ -1,6 +1,4 @@
-import {
- useRef, useEffect, useCallback, useMemo,
-} from 'react';
+import { useRef, useEffect, useCallback, useMemo } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { useDebouncedCallback } from 'use-debounce';
@@ -20,15 +18,12 @@ function isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, po
if (resource.svgSelector) {
const context = osdCanvasOverlay.context2d;
const { svgPaths } = new CanvasAnnotationDisplay({ resource });
- return [...svgPaths].some(path => (
- context.isPointInPath(new Path2D(path.attributes.d.nodeValue), relativeX, relativeY)
- ));
+ return [...svgPaths].some((path) => context.isPointInPath(new Path2D(path.attributes.d.nodeValue), relativeX, relativeY));
}
if (resource.fragmentSelector) {
const [x, y, w, h] = resource.fragmentSelector;
- return x <= relativeX && relativeX <= (x + w)
- && y <= relativeY && relativeY <= (y + h);
+ return x <= relativeX && relativeX <= x + w && y <= relativeY && relativeY <= y + h;
}
return false;
}
@@ -38,51 +33,67 @@ function isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, po
* 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,
+ 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]);
+ 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;
- const zoomRatio = viewer.viewport.getZoom(true) / viewer.viewport.getMaxZoom();
- renderedAnnotations.forEach((annotation) => {
- annotation.resources.forEach((resource) => {
- if (!canvasWorld.canvasIds.includes(resource.targetId)) return;
- const offset = canvasWorld.offsetByCanvas(resource.targetId);
- const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
- hovered: hoveredAnnotationIds.includes(resource.id),
- offset,
- palette: {
- ...currentPalette,
- default: {
- ...currentPalette.default,
- ...(!highlightAllAnnotations && currentPalette.hidden),
+ const annotationsToContext = useCallback(
+ (renderedAnnotations, currentPalette) => {
+ const context = osdCanvasOverlay.context2d;
+ const zoomRatio = viewer.viewport.getZoom(true) / viewer.viewport.getMaxZoom();
+ renderedAnnotations.forEach((annotation) => {
+ annotation.resources.forEach((resource) => {
+ if (!canvasWorld.canvasIds.includes(resource.targetId)) return;
+ const offset = canvasWorld.offsetByCanvas(resource.targetId);
+ const canvasAnnotationDisplay = new CanvasAnnotationDisplay({
+ hovered: hoveredAnnotationIds.includes(resource.id),
+ offset,
+ palette: {
+ ...currentPalette,
+ default: {
+ ...currentPalette.default,
+ ...(!highlightAllAnnotations && currentPalette.hidden),
+ },
},
- },
- resource,
- selected: selectedAnnotationId === resource.id,
- zoomRatio,
+ resource,
+ selected: selectedAnnotationId === resource.id,
+ zoomRatio,
+ });
+ canvasAnnotationDisplay.toContext(context);
});
- canvasAnnotationDisplay.toContext(context);
});
- });
- }, [osdCanvasOverlay, viewer, canvasWorld, highlightAllAnnotations, hoveredAnnotationIds, selectedAnnotationId]);
+ },
+ [osdCanvasOverlay, viewer, canvasWorld, highlightAllAnnotations, hoveredAnnotationIds, selectedAnnotationId],
+ );
const renderAnnotations = useCallback(() => {
if (drawSearchAnnotations) {
@@ -102,96 +113,116 @@ export function AnnotationsOverlay({
osdCanvasOverlay.canvasUpdate(renderAnnotations);
}, [osdCanvasOverlay, renderAnnotations]);
- const annotationsAtPoint = useCallback((canvas, point) => {
- const lists = [...annotations, ...searchAnnotations];
- const annos = flatten(lists.map(l => l.resources)).filter((resource) => {
- if (canvas.id !== resource.targetId) return false;
+ const annotationsAtPoint = useCallback(
+ (canvas, point) => {
+ const lists = [...annotations, ...searchAnnotations];
+ const annos = flatten(lists.map((l) => l.resources)).filter((resource) => {
+ if (canvas.id !== resource.targetId) return false;
- return isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, point);
- });
+ return isAnnotationAtPoint(canvasWorld, osdCanvasOverlay, resource, canvas, point);
+ });
- return annos;
- }, [annotations, canvasWorld, osdCanvasOverlay, searchAnnotations]);
+ return annos;
+ },
+ [annotations, canvasWorld, osdCanvasOverlay, searchAnnotations],
+ );
- const onCanvasClick = useCallback((event) => {
- const { position: webPosition, eventSource: { viewport } } = event;
- const point = viewport.pointFromPixel(webPosition);
+ const onCanvasClick = useCallback(
+ (event) => {
+ 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);
+ 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);
+ // 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 > 0) {
+ // eslint-disable-next-line no-param-reassign
+ event.preventDefaultAction = true;
+ }
- 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 };
+ 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 annosWithScore = [];
- let radius = 1;
- annosWithScore = sortBy(annos.map(annosWithClickScore(radius)), 'score');
- while (radius < Math.max(canvasWidth, canvasHeight)
- && annosWithScore[0].score === annosWithScore[1].score) {
- radius *= 2;
+ let annosWithScore = [];
+ let radius = 1;
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);
+ while (radius < Math.max(canvasWidth, canvasHeight) && annosWithScore[0].score === annosWithScore[1].score) {
+ radius *= 2;
+ annosWithScore = sortBy(annos.map(annosWithClickScore(radius)), 'score');
+ }
- const canvas = canvasWorld.canvasAtPoint(point);
- if (!canvas) {
- hoverAnnotation(windowId, []);
- return;
- }
-
- const annos = annotationsAtPoint(canvas, point);
+ toggleAnnotation(annosWithScore[0].anno.id);
+ }
+ },
+ [annotationsAtPoint, canvasWorld, osdCanvasOverlay, toggleAnnotation],
+ );
- 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 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
@@ -221,8 +252,16 @@ export function AnnotationsOverlay({
useEffect(() => {
if (viewer) viewer.forceRedraw();
- }, [annotations, drawAnnotations, drawSearchAnnotations, highlightAllAnnotations,
- hoveredAnnotationIds, searchAnnotations, selectedAnnotationId, viewer]);
+ }, [
+ annotations,
+ drawAnnotations,
+ drawSearchAnnotations,
+ highlightAllAnnotations,
+ hoveredAnnotationIds,
+ searchAnnotations,
+ selectedAnnotationId,
+ viewer,
+ ]);
useEffect(() => {
if (!ref.current) return;
@@ -237,16 +276,18 @@ export function AnnotationsOverlay({
if (!viewer) return null;
return ReactDOM.createPortal(
- (
-
-
-
- ),
+
+
+
,
viewer.canvas,
);
}
diff --git a/src/components/App.jsx b/src/components/App.jsx
index 0942feff93..591f404b50 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,6 +1,4 @@
-import {
- createRef, lazy, Suspense,
-} from 'react';
+import { createRef, lazy, Suspense } from 'react';
import PropTypes from 'prop-types';
import PluginProvider from '../extend/PluginProvider';
import AppProviders from '../containers/AppProviders';
@@ -19,9 +17,7 @@ export function App({ dndManager = undefined, plugins = [] }) {
- }
- >
+ }>
diff --git a/src/components/AppProviders.jsx b/src/components/AppProviders.jsx
index eb2e390fe6..d158a0d949 100644
--- a/src/components/AppProviders.jsx
+++ b/src/components/AppProviders.jsx
@@ -2,9 +2,7 @@ import { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { FullScreen, useFullScreenHandle } from 'react-full-screen';
import { I18nextProvider } from 'react-i18next';
-import {
- ThemeProvider, StyledEngineProvider, createTheme,
-} from '@mui/material/styles';
+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';
@@ -33,20 +31,12 @@ const MaybeDndProvider = ({ dndManager = undefined, children }) => {
);
}
- return (
-
- {children}
-
- );
+ return {children};
};
MaybeDndProvider.propTypes = {
children: PropTypes.node.isRequired,
- dndManager: PropTypes.oneOf([
- undefined,
- false,
- PropTypes.object,
- ]),
+ dndManager: PropTypes.oneOf([undefined, false, PropTypes.object]),
};
/**
@@ -57,9 +47,7 @@ const FullScreenShim = ({ children }) => {
return (
-
- {children}
-
+ {children}
);
};
@@ -84,7 +72,7 @@ const StoreAwareI18nextProvider = ({ children, language, translations }) => {
});
}, [i18n, translations]);
- return ({children});
+ return {children};
};
StoreAwareI18nextProvider.propTypes = {
@@ -112,23 +100,16 @@ const cacheDefault = createCache({
* This component adds viewer-specific providers.
* @prop {Object} manifests
*/
-export function AppProviders({
- children = null,
- language,
- theme, translations,
- dndManager = undefined,
-}) {
+export function AppProviders({ children = null, language, theme, translations, dndManager = undefined }) {
return (
-
+
-
- {children}
-
+ {children}
diff --git a/src/components/AttributionPanel.jsx b/src/components/AttributionPanel.jsx
index d15288a992..386673d35e 100644
--- a/src/components/AttributionPanel.jsx
+++ b/src/components/AttributionPanel.jsx
@@ -22,55 +22,41 @@ const StyledPlaceholder = styled(Skeleton)(({ theme }) => ({
/**
* WindowSideBarInfoPanel
*/
-export function AttributionPanel({
- manifestLogo = null,
- requiredStatement = null,
- rights = null,
- windowId,
- id,
-}) {
+export function AttributionPanel({ manifestLogo = null, requiredStatement = null, rights = null, windowId, id }) {
const { t } = useTranslation();
- const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
+ // eslint-disable-next-line prefer-rest-params
+ const pluginProps = arguments[0];
return (
-
+
- { requiredStatement && (
-
+ {requiredStatement && }
+ {rights && rights.length > 0 && (
+
+
+ {t('rights')}
+
+ {rights.map((v) => (
+
+
+ {v}
+
+
+ ))}
+
)}
- {
- rights && rights.length > 0 && (
-
- {t('rights')}
- { rights.map(v => (
-
-
- {v}
-
-
- )) }
-
- )
- }
- { manifestLogo && (
-
-
- }
- />
-
+ {manifestLogo && (
+
+ }
+ />
+
)}
@@ -81,10 +67,12 @@ export function AttributionPanel({
AttributionPanel.propTypes = {
id: PropTypes.string.isRequired,
manifestLogo: PropTypes.string,
- requiredStatement: PropTypes.arrayOf(PropTypes.shape({
- label: PropTypes.string,
- value: PropTypes.string,
- })),
+ requiredStatement: PropTypes.arrayOf(
+ PropTypes.shape({
+ label: PropTypes.string,
+ value: PropTypes.string,
+ }),
+ ),
rights: PropTypes.arrayOf(PropTypes.string),
windowId: PropTypes.string.isRequired,
};
diff --git a/src/components/Branding.jsx b/src/components/Branding.jsx
index 5fe5967344..095b5e7ce0 100644
--- a/src/components/Branding.jsx
+++ b/src/components/Branding.jsx
@@ -12,19 +12,15 @@ export function Branding({ variant = 'default', ...ContainerProps }) {
const { t } = useTranslation();
return (
- { variant === 'wide' && (
-
- {t('mirador')}
-
+ {variant === 'wide' && (
+
+
+ {t('mirador')}
+
+
)}
-
+
diff --git a/src/components/CanvasAnnotations.jsx b/src/components/CanvasAnnotations.jsx
index 3009ba4ff9..0cf6df47d2 100644
--- a/src/components/CanvasAnnotations.jsx
+++ b/src/components/CanvasAnnotations.jsx
@@ -11,24 +11,40 @@ 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,
+ 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 (selectedAnnotationId === annotation.id) {
- deselectAnnotation(windowId, annotation.id);
- } else {
- selectAnnotation(windowId, annotation.id);
- }
- }, [windowId, deselectAnnotation, selectAnnotation, selectedAnnotationId]);
+ const handleClick = useCallback(
+ (_event, annotation) => {
+ 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 handleAnnotationHover = useCallback(
+ (annotation) => {
+ hoverAnnotation(windowId, [annotation.id]);
+ },
+ [hoverAnnotation, windowId],
+ );
const handleAnnotationBlur = useCallback(() => {
hoverAnnotation(windowId, []);
@@ -70,14 +86,10 @@ export function CanvasAnnotations({
>
- }
- secondary={
- annotation.tags.map((tag) => (
-
- ))
- }
+ primary={}
+ secondary={annotation.tags.map((tag) => (
+
+ ))}
/>
@@ -94,10 +106,7 @@ CanvasAnnotations.propTypes = {
id: PropTypes.string.isRequired,
}),
),
- containerRef: PropTypes.oneOfType([
- PropTypes.func,
- PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
- ]),
+ containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
deselectAnnotation: PropTypes.func.isRequired,
hoverAnnotation: PropTypes.func.isRequired,
hoveredAnnotationIds: PropTypes.arrayOf(PropTypes.string),
diff --git a/src/components/CanvasInfo.jsx b/src/components/CanvasInfo.jsx
index 8cc9fbbdec..613312b81f 100644
--- a/src/components/CanvasInfo.jsx
+++ b/src/components/CanvasInfo.jsx
@@ -10,32 +10,17 @@ import { PluginHook } from './PluginHook';
/**
* CanvasInfo
*/
-export function CanvasInfo({
- canvasDescription = null,
- canvasLabel = null,
- canvasMetadata = [],
- index = 1,
- totalSize = 1,
-}) {
+export function CanvasInfo({ canvasDescription = null, canvasLabel = null, canvasMetadata = [], index = 1, totalSize = 1 }) {
const { t } = useTranslation();
const id = useId();
const titleId = useId();
- const pluginProps = arguments[0]; // eslint-disable-line prefer-rest-params
+ // eslint-disable-next-line prefer-rest-params
+ const pluginProps = arguments[0];
return (
-
+
{canvasLabel && (
-
+
{canvasLabel}
)}
@@ -46,9 +31,7 @@ export function CanvasInfo({
)}
- {canvasMetadata && canvasMetadata.length > 0 && (
-
- )}
+ {canvasMetadata && canvasMetadata.length > 0 && }
);
diff --git a/src/components/CanvasLayers.jsx b/src/components/CanvasLayers.jsx
index 19d45098e8..53431b27d0 100644
--- a/src/components/CanvasLayers.jsx
+++ b/src/components/CanvasLayers.jsx
@@ -43,9 +43,7 @@ const reorder = (list, startIndex, endIndex) => {
};
/** @private */
-function Layer({
- resource, layerMetadata = {}, index, handleOpacityChange, setLayerVisibility, moveToBackground, moveToFront,
-}) {
+function Layer({ resource, layerMetadata = {}, index, handleOpacityChange, setLayerVisibility, moveToBackground, moveToFront }) {
const { t } = useTranslation();
const { width, height } = { height: undefined, width: 40 };
@@ -58,12 +56,7 @@ function Layer({
return (
-
+
-
{ setLayerVisibility(resource.id, !layer.visibility); }}>
- { layer.visibility ? : }
+ {
+ setLayerVisibility(resource.id, !layer.visibility);
+ }}
+ >
+ {layer.visibility ? : }
- { layer.index !== 0 && (
- { moveToBackground(resource.id); }}>
+ {layer.index !== 0 && (
+ {
+ moveToBackground(resource.id);
+ }}
+ >
)}
- { layer.index !== layerMetadata && (
- { moveToFront(resource.id); }}>
+ {layer.index !== layerMetadata && (
+ {
+ moveToFront(resource.id);
+ }}
+ >
)}
@@ -111,8 +123,12 @@ function Layer({
type="number"
min={0}
max={100}
- onChange={e => handleOpacityChange(resource.id, e.target.value)}
- endAdornment={%}
+ onChange={(e) => handleOpacityChange(resource.id, e.target.value)}
+ endAdornment={
+
+ %
+
+ }
inputProps={{
'aria-label': t('layer_opacity'),
}}
@@ -135,10 +151,12 @@ function Layer({
Layer.propTypes = {
handleOpacityChange: PropTypes.func.isRequired,
index: PropTypes.number.isRequired,
- layerMetadata: PropTypes.objectOf(PropTypes.shape({
- opacity: PropTypes.number,
- visibility: PropTypes.bool,
- })),
+ layerMetadata: PropTypes.objectOf(
+ PropTypes.shape({
+ opacity: PropTypes.number,
+ visibility: PropTypes.bool,
+ }),
+ ),
moveToBackground: PropTypes.func.isRequired,
moveToFront: PropTypes.func.isRequired,
resource: PropTypes.object.isRequired,
@@ -146,9 +164,7 @@ Layer.propTypes = {
};
/** @private */
-function DraggableLayer({
- children, resource, index,
-}) {
+function DraggableLayer({ children, resource, index }) {
const { t } = useTranslation();
return (
@@ -184,7 +200,7 @@ function DraggableLayer({
- { children }
+ {children}
)}
@@ -198,75 +214,99 @@ DraggableLayer.propTypes = {
};
/** */
-export function CanvasLayers({
- canvasId, index, label, layers, layerMetadata = {}, totalSize, updateLayers, windowId,
-}) {
+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 },
- };
+ const handleOpacityChange = useCallback(
+ (layerId, value) => {
+ const payload = {
+ [layerId]: { opacity: value / 100.0 },
+ };
- updateLayers(windowId, canvasId, payload);
- }, [canvasId, updateLayers, windowId]);
+ 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 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 sortedLayers = reorder(
+ layers.map((l) => l.id),
+ result.source.index,
+ result.destination.index,
+ );
- const payload = layers.reduce((acc, layer) => {
- acc[layer.id] = { index: sortedLayers.indexOf(layer.id) }; // eslint-disable-line no-param-reassign
- return acc;
- }, {});
+ 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]);
+ updateLayers(windowId, canvasId, payload);
+ },
+ [canvasId, droppableId, layers, updateLayers, windowId],
+ );
/** */
- const setLayerVisibility = useCallback((layerId, value) => {
- const payload = {
- [layerId]: { visibility: value },
- };
+ const setLayerVisibility = useCallback(
+ (layerId, value) => {
+ const payload = {
+ [layerId]: { visibility: value },
+ };
- updateLayers(windowId, canvasId, payload);
- }, [canvasId, updateLayers, windowId]);
+ 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 moveToBackground = useCallback(
+ (layerId) => {
+ const sortedLayers = reorder(
+ layers.map((l) => l.id),
+ layers.findIndex((l) => l.id === layerId),
+ 0,
+ );
- const payload = layers.reduce((acc, layer) => {
- acc[layer.id] = { index: sortedLayers.indexOf(layer.id) }; // eslint-disable-line no-param-reassign
- return acc;
- }, {});
+ 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]);
+ 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 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) => {
- acc[layer.id] = { index: sortedLayers.indexOf(layer.id) }; // eslint-disable-line no-param-reassign
- return acc;
- }, {});
+ 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]);
+ updateLayers(windowId, canvasId, payload);
+ },
+ [canvasId, layers, updateLayers, windowId],
+ );
return (
<>
- { totalSize > 1 && (
+ {totalSize > 1 && (
- {
- layers && layers.map((r, i) => (
+ {layers &&
+ layers.map((r, i) => (
- ))
- }
+ ))}
{provided.placeholder}
)}
@@ -316,11 +355,12 @@ 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,
+ 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,
diff --git a/src/components/ChangeThemeDialog.jsx b/src/components/ChangeThemeDialog.jsx
index 10e90f26c6..fc14684514 100644
--- a/src/components/ChangeThemeDialog.jsx
+++ b/src/components/ChangeThemeDialog.jsx
@@ -1,12 +1,5 @@
import { useCallback } from 'react';
-import {
- DialogTitle,
- ListItemIcon,
- ListItemText,
- MenuList,
- MenuItem,
- DialogContent,
-} from '@mui/material';
+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';
@@ -21,19 +14,25 @@ const ThemeIcon = styled(PaletteIcon, { name: 'ThemeIcon', slot: 'icon' })(({ th
* a simple dialog providing the possibility to switch the theme
*/
export function ChangeThemeDialog({
- container = null, handleClose, open = false, selectedTheme, setSelectedTheme, themeIds = [],
+ container = null,
+ handleClose,
+ open = false,
+ selectedTheme,
+ setSelectedTheme,
+ themeIds = [],
}) {
const { t } = useTranslation();
- const handleThemeChange = useCallback((theme) => {
- setSelectedTheme(theme);
- handleClose();
- }, [handleClose, setSelectedTheme]);
+ const handleThemeChange = useCallback(
+ (theme) => {
+ setSelectedTheme(theme);
+ handleClose();
+ },
+ [handleClose, setSelectedTheme],
+ );
return (
-
- {t('changeTheme')}
-
+ {t('changeTheme')}
{themeIds.map((value) => (
diff --git a/src/components/CollapsibleSection.jsx b/src/components/CollapsibleSection.jsx
index cc64d350b4..483dbbcf19 100644
--- a/src/components/CollapsibleSection.jsx
+++ b/src/components/CollapsibleSection.jsx
@@ -9,27 +9,38 @@ import { useTranslation } from 'react-i18next';
/**
* CollapsableSection ~
-*/
-export function CollapsibleSection({
- children, id, label,
-}) {
+ */
+export function CollapsibleSection({ children, id, label }) {
const { t } = useTranslation();
const [open, setOpen] = useState(true);
- const handleChange = useCallback((_event, isExpanded) => {
- setOpen(isExpanded);
- }, [setOpen]);
+ const handleChange = useCallback(
+ (_event, isExpanded) => {
+ setOpen(isExpanded);
+ },
+ [setOpen],
+ );
return (
-
- }>
-
- {label}
-
+
+ }
+ >
+ {label}
-
- {children}
-
+ {children}
);
}
diff --git a/src/components/CollectionDialog.jsx b/src/components/CollectionDialog.jsx
index 022ccb1823..a8b10d5d95 100644
--- a/src/components/CollectionDialog.jsx
+++ b/src/components/CollectionDialog.jsx
@@ -1,16 +1,6 @@
import { useContext, useState } from 'react';
import PropTypes from 'prop-types';
-import {
- Button,
- Chip,
- Dialog,
- DialogActions,
- DialogTitle,
- Link,
- MenuList,
- MenuItem,
- Typography,
-} from '@mui/material';
+import { Button, Chip, Dialog, DialogActions, DialogTitle, Link, MenuList, MenuItem, Typography } from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBackSharp';
import Skeleton from '@mui/material/Skeleton';
import { styled } from '@mui/material/styles';
@@ -41,12 +31,7 @@ const StyledCollectionFilter = styled('div')(() => ({
/** */
const Placeholder = ({ onClose, container }) => (
-
-
- {t('pagination', { current: currentHitIndex + 1, total: lengthText })}
-
+ {t('pagination', { current: currentHitIndex + 1, total: lengthText })}
- { focused && (
+ {focused && (
)}
{noResultsState && (
-
{t('searchNoResults')}
@@ -110,7 +109,7 @@ export function SearchResults({
toggleFocus={toggleFocus}
/>
- { nextSearch && (
+ {nextSearch && (