📖

ズーム操作を無効化するMirador 3（4）向けプラグインの開発

2024/06/23に公開

iiif

Mirador

tech

概要

Mirador 3（実際には、Mirador 4）向けに、ズーム操作を無効化するプラグインを作成しました。

以下が動作デモです。

https://youtu.be/RN2V4b7IYoI

以下のURLからお試しいただけます。

本プラグインは、UCLA LibraryによってMirador 2向けに作成された以下のプラグインを参考にしています。

今回は、本プラグインの開発によって気がついた点をメモします。

targetの指定

targetによって、プラグインのボタンを設置する場所を指定することができました。今回は、WindowTopBarPluginAreaを指定することで、ウインドウ毎のバーに直接アイコンを表示することができました。

/src/index.js

import * as actions from 'mirador/dist/es/src/state/actions';
import { getWindowConfig } from 'mirador/dist/es/src/state/selectors';
import MiradorDisableZoom from './plugins/MiradorDisableZoom';
import MiradorDisableZoomMenuItem from './plugins/MiradorDisableZoomMenuItem';
import translations from './translations';

export const miradorDisableZoomPlugin = [
  {
    target: 'OpenSeadragonViewer',
    mode: 'add',
    component: MiradorDisableZoom,
    mapStateToProps: (state, { windowId }) => ({
      enabled: getWindowConfig(state, { windowId }).disableZoomEnabled || false,
    })
  },
  {
    target: 'WindowTopBarPluginArea',
    component: MiradorDisableZoomMenuItem,
    mode: 'add',
    mapDispatchToProps: {
      updateWindow: actions.updateWindow,
    },
    mapStateToProps: (state, { windowId }) => ({
      enabled: getWindowConfig(state, { windowId }).disableZoomEnabled || false,
    }),
    config: {
      translations,
    },
  },
];

一方、以下の記事で紹介したプラグインでは、WindowTopBarPluginMenuを指定しています。

この場合には、以下のように、3点ドットのメニューが表示され、その中にプラグイン毎のアイコンなどを表示できました。

用途に応じて、targetを使い分けることができそうです。

これらのtargetは以下で指定されているコンポーネントを使用できるようでした。

translations

上記のコードにおいて、config属性のtranslationsを指定しています。

{
    target: 'WindowTopBarPluginArea',
    component: MiradorDisableZoomMenuItem,
    mode: 'add',
    mapDispatchToProps: {
      updateWindow: actions.updateWindow,
    },
    mapStateToProps: (state, { windowId }) => ({
      enabled: getWindowConfig(state, { windowId }).disableZoomEnabled || false,
    }),
    config: {
      translations,
    },
  },

上記を指定しないと、同フォルダ内のtranslations.jsで指定した翻訳データが反映されませんでした。

まとめ

プラグインの利用および開発にあたり、参考になりましたら幸いです。

概要

targetの指定

translations

まとめ

Discussion