Il y a 389 articles et 19 utilisateurs inscrits (ce bandeau est défini dans MediaWiki:Sitenotice)
Installation de Mirador3 en tant que composant Reactjs
Aller à la navigation
Aller à la recherche
Intro et contexte : TODO
Création d'une app de test react-js basique
[modifier | modifier le wikicode]Se placer dans le répertoire où l'on souhaite travailler et lancer les commandes :
$ npx create-react-app mirador3
En cas d'échec, voir les solutions en infra.
Installation de mirador et des plugins "mirador image tools"
[modifier | modifier le wikicode]$ cd mirador3
Installation des sources de Mirador3 en tant que composant de notre app React
[modifier | modifier le wikicode]$ npm install --legacy-peer-deps mirador
Installation du composant "mirador-image-tools"
[modifier | modifier le wikicode]$ npm install --save --legacy-peer-deps mirador-image-tools
Configuration
[modifier | modifier le wikicode]Paramétrage et chargement des composants "mirador" et "mirador-image-tools"
[modifier | modifier le wikicode]Importation du plugin "mirador-mage-tools"
[modifier | modifier le wikicode]Important :
Le plugin "mirador-mage-tools", n'exporte pas un composant "default" !.
Le plugin "mirador-mage-tools" est importé dans src/index.js d'une façon différente de la méthode utilisée pour importer le composant Mirador.
- Modifiez le fichier src/index.js en remplaçant la totalité de son contenu par le code suivant :
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
const config = window.miradorInstance || {};
const miradorViewer = Mirador.viewer(config, [
miradorImageToolsPlugin
]);
export default miradorViewer;
Importation des autres plugins mirador 3
[modifier | modifier le wikicode]installation des plugins
[modifier | modifier le wikicode]$ npm install --legacy-peer-deps mirador-textoverlay
$ npm install --legacy-peer-deps mirador-canvasnavigation
$ npm install --legacy-peer-deps mirador-canvaslink
$ npm install --legacy-peer-deps mirador-keyboardshortcuts
$ npm install --legacy-peer-deps mirador-share-plugin
$ npm install --legacy-peer-deps mirador-downloaddialog
$ npm install --legacy-peer-deps mirador-dl-plugin
$ npm install --legacy-peer-deps mirador-imagecropper
Important :
Au 20/09/2023 - Les plugins suivants utilisent explicitement : cf. leur package.json ; Node inférieur ou égal à v17.0.0.. et npm inférieur ou égal à v9.0.0..
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: 'mirador-canvasnavigation@0.1.1',
npm WARN EBADENGINE package: 'mirador-downloaddialog@0.3.0',
npm WARN EBADENGINE package: 'mirador-imagecropper@0.1.7',
npm WARN EBADENGINE package: 'mirador-canvaslink@0.2.3',
npm WARN EBADENGINE required: { node: '>=16.0.0 <17.0.0', npm: '>=8.0.0 <9.0.0' },
npm WARN EBADENGINE current: { node: 'v18.17.1', npm: '10.1.0' }
Supprimer l'appel "engines" dans le fichier package.json de chaque plugin.
Importation des plugins
[modifier | modifier le wikicode]import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';
import textOverlayPlugin from 'mirador-textoverlay/es';
import canvasNavigationPlugin from 'mirador-canvasnavigation/es';
import canvasLinkPlugin from 'mirador-canvaslink/es';
import keyboardShortcutsPlugin from 'mirador-keyboardshortcuts/es';
import miradorSharePlugins from 'mirador-share-plugin';
import downloadDialogPlugin from 'mirador-downloaddialog/es';
import miradorDownloadPlugin from 'mirador-dl-plugin';
import imageCropperPlugin from 'mirador-imagecropper/es';
const config = window.miradorInstance || {
workspaceControlPanel: {
enabled: false,
},
keyboardShortcuts: {
shortcutMapping: {
"navigate-to-first-canvas": "home",
"toggle-fullscreen": "f",
},
},
miradorSharePlugin: {
dragAndDropInfoLink: 'https://iiif.io',
embedOption: {
enabled: true,
embedUrlReplacePattern: [
/.*\.edu\/(\w+)\/iiif\/manifest/,
'https://embed.stanford.edu/iframe?url=https://purl.stanford.edu/$1',
],
syncIframeDimensions: {
height: { param: 'maxheight' },
},
},
shareLink: {
enabled: true,
manifestIdReplacePattern: [
/\/iiif\/manifest/,
'',
],
},
},
};
const miradorViewer = Mirador.viewer(config, [
miradorImageToolsPlugin,
textOverlayPlugin,
canvasNavigationPlugin,
canvasLinkPlugin,
keyboardShortcutsPlugin,
miradorSharePlugins,
miradorDownloadPlugin,
imageCropperPlugin,
downloadDialogPlugin
]);
export default miradorViewer;
Paramétrages Mirador
[modifier | modifier le wikicode]- Modifiez le contenu du fichier public/index.html en remplaçant la totalité par le HTML suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user s mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- Define a global JavaScript variable with your custom configuration -->
<script>
window.miradorInstance = {
id: 'root',
windows: [
{
// Si defaultView:'single', vue image par image. Ici on peut forcer l affichage par livre car views ne fonctionne pas pour l instant : defaultView:'book'
defaultView: 'single',
imageToolsEnabled: true,
sideBarOpen: false,
sideBarPanel: "canvas",
imageToolsOpen: false,
hideSearchPanel: false,
hideWindowTitle: false,
hideAnnotationsPanel: false,
allowClose: false,
allowMaximize: false,
allowFullscreen: true,
// Plugin imageCropper : https://www.npmjs.com/package/mirador-imagecropper
// Actif uniquement en mode view:'single'
imageCropper: {
active: true,
enabled: true,
},
// Plugin textOverlay : https://www.npmjs.com/package/@nakamura196/mirador-textoverlay
textOverlay: {
enabled: true,
selectable: true,
visible: false,
},
// Plugin canvasNavigation : https://www.npmjs.com/package/mirador-canvasnavigation
canvasNavigation: {
handleCanvasLabel: (canvasLabel) => `${canvasLabel}...`,
},
// Plugin downloadDialog : https://www.npmjs.com/package/mirador-downloaddialog
downloadDialog: {
// dialogOpen: If the share dialog is open. Boolean, defaults to false.
// enabled: If the plugin is enabled. Boolean, defaults to true.
// Global config for all windows, see available settings below
},
// Plugin canvasLink : https://www.npmjs.com/package/mirador-canvaslink
canvasLink: {
active: true,
enabled: true,
singleCanvasOnly: false,
// A adapter pour renvoyer la bonne url
getCanvasLink: (manifestId, canvases) => {
const objectId = manifestId.split("/").slice(-2)[0];
const canvasIndices = canvases.map(
(canvas) => canvas.id.split("/").slice(-1)[0],
);
return `https://stacks.stanford.edu/image/iiif/${objectId}?page=${canvasIndices.join(
",",
)}`;
},
},
manifestId: 'https://pandor.u-bourgogne.fr/archives-en-ligne/iiif/ark:/62246/r21893zqlg4wpk/f1/manifest.json',
// views: behaviors a renseigner si appelé depuis le manifest, sinon, pour l affichage, ne pas renseigner.
views: [
{ key: 'single'},
{ key: 'book'},
{ key: 'scroll', behaviors: ['continuous'] },
{ key: 'gallery' }
]
},
],
// Plugin keyboardShortcuts
keyboardShortcuts: {
// Global config, see available settings below
shortcutMapping: {
"toggle-fullscreen": "f",
},
},
view: "catalogueView",
workspace: {
// Masque l'ajout d'un manifest
isWorkspaceAddVisible: false,
// Masque les boutons de zoom "+" et "-"
showZoomControls: false,
},
// Masque la colonne de gauche : workspace
workspaceControlPanel: {
enabled: true,
},
language: 'fr',
theme: {
palette: {
primary: {
main: '#FF5733',
},
},
},
};
</script>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Composant "url"
[modifier | modifier le wikicode]Permet de résoudre l'erreur "Module not found: Error: Can't resolve 'url' in webpack 5/Angular 14".
- Pour charger le composant "url", modifiez le fichier node_modules/react-scripts/config/webpack.config.js en ajoutant le code suivant devant "// This is the production and development configuration..." :
module.exports = {
resolve: {
fallback: { "url": require.resolve("url/") }
}
};
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
- Exécutez de la commande spéciale :
$ npm i url for - install 'url' --legacy-peer-deps
Déploiement en "local"
[modifier | modifier le wikicode]$ npm install --legacy-peer-deps
Placez-vous à la racine du projet "mirador3" et lancez la commande suivante :
$ npm start
Le navigateur s'ouvre avec la visionneuse Mirador 3 de test, ainsi que le module de manipulation d'image actif.
Développement
[modifier | modifier le wikicode]Les développements en Reactjs peuvent commencer dans le répertoire src/
Pour générer le code à envoyer en production, lancer la commande :
$ npm run build
Le code minifié pour la production se trouve dans le répertoire build/
Résolution d'erreurs
[modifier | modifier le wikicode]Les résolutions ci-dessous concernent les commandes suivantes
npx create-react-app mirador3
[modifier | modifier le wikicode]Lors de la création d'une app de test react-js basique dans le répertoire mirador3, le terminal renvoie :
command not found
[modifier | modifier le wikicode]% npx create-react-app mirador3
zsh: command not found: npx
cf. https://stackoverflow.com/questions/49894620/npx-command-not-found (URL vérifiée 12/09/2023)
Solution : Installation de npx globalement
[modifier | modifier le wikicode]npm i -g npx
Pour Linux ou Mac OS, si il y a des erreurs de permissions, lancez :
$ sudo npm i -g npx
Create React App requires Node 14 or higher
[modifier | modifier le wikicode]% npx create-react-app mirador3
npx : 67 installé(s) en 7.694s
You are running Node 7.5.0.
Create React App requires Node 14 or higher.
Please update your version of Node.
cf. https://stackoverflow.com/questions/11284634/upgrade-node-js-to-the-latest-version-on-mac-os (URL vérifiée 12/09/2023)
Solution : Mise à jour de Node
[modifier | modifier le wikicode]1 - Vider le cache de npm
$ sudo npm cache clean -f
npm WARN using --force I sure hope you know what you are doing.
2 - Affiche la version actuelle de npm
$ node -v
v7.5.0
$ sudo npm install -g n install n
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
├── install@0.13.0
└── n@9.1.0
3 - Installation de la dernière version stable de Node
$ sudo n stable
installing : node-v18.17.1
mkdir : /usr/local/n/versions/node/18.17.1
fetch : https://nodejs.org/dist/v18.17.1/node-v18.17.1-darwin-x64.tar.xz
copying : node/18.17.1
installed : v18.17.1 (with npm 9.6.7)
4 - Upgrade de npm vers une version spécifique, par exemple "10.1.0" :
$ sudo npm install -g npm@10.1.0