Création de plugin pour Mirador

Contexte

Ici nous allons chercher à créer un plugin pour Mirador ainsi que l'intégrer.

Création d'un plugin

Conventions

Dans un premier temps, il faut savoir que pour créer un plugin il faut respecter une certaine convention. Il faut tout d'abord que le plugin possède au moins ces 3 propriétés :

{
  name: 'Demo',
  target: 'WindowTopBarPluginMenu',
  mode: 'add',
}

- name: Tout simplement le nom du plugin

- target: Le composant de Mirador qui est ciblé par le plugin à savoir que seul les composants suivant peuvent être ciblés :

• Window
• BackgroundPluginArea
• WindowTopBarPluginMenu
• WorkspaceControlPanelButtons
• WorkspaceMenu
• WorkspaceOptionsMenu

- mode: Ce que fait le plugin donc ici "add" pour le faite qu'il ajoute une fonction

Ensuite, les propriétés s'accompagnent aussi d'habitude de ceci :

{
  component: DemoComponent,
}

- component: La fonction, constante ou encore classe qui va indiquer ce que fait notre plugin.

Exemple

Le tout est montré dans l'exemple ci-dessous:

const DemoComponent = props => {
  console.log(props);
  return <div id="add-plugin-component-anything">Hello World!</div>;
};

export default {
  name: "Demo",
  target: "WindowTopBarPluginMenu",
  mode: "add",
  component: DemoComponent
};

On a donc toutes les propriétés qui se retrouvent dans la partie "export default" et l'action qu'effectue notre plugin dans "const DemoComponent", qui ici affiche donc juste un "Hello World!" dans le composant "WindowTopBarPluginMenu" de Mirador.

Intégration d'un plugin

Plugin créé

Pour intégrer le plugin à notre configuration de mirador, il faut dans un premier temps l'ajouter dans les exports :

import plugin from "./demo-plugin";

Et ensuite on l’intègre à notre configuration de cette manière :

const config = {
  // Ici on place notre config
};

var miradorInstance = mirador.viewer(config, [plugin]);

A savoir qu'il est évidemment possible d'intégrer plusieurs plugins en même temps, en les séparant par une virgule entre les crochets.

Plugin déjà existant

On prends bien en compte ici le faite que l'installation a été faite en suivant la doc et on va prendre l'exemple du plugin "mirador-image-tools".

• Installation de la dépendance

npm install mirador-image-tools

• Vérification

Après avoir installé la dépendance, elle est censée apparaître dans le fichier "package.json" qui regroupe les différentes dépendances de node utilisées :

"dependencies": {
    "css-loader": "^3.6.0",
    "mirador": "^3.3.0",
    "mirador-image-tools": "^0.11.0",
    "parcel-bundler": "^1.12.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  }

• Intégration

Après avoir vérifié que la dépendance est bien présente, on peut donc l'utiliser en l'intégrant au mirador via le fichier "index.js". Donc dans un premier temps, on import le plugin :

import { miradorImageToolsPlugin } from 'mirador-image-tools';

On peut ensuite l'intégrer à la config :

Mirador.viewer(config, [
  ...miradorImageToolsPlugin,
]);