export default {
  target: 'WindowTopMenu',
  mode: 'add',
  component: CopyWindowComponent,
  mapDispatchToProps: mapDispatchToProps,
  mapStateToProps: mapStateToProps,
}

`target`と`mode`

targetはコンポーネントを設置する場所を指定します。またmodeはコンポーネントの追加方法を指定します。modeについては、addやwrapという選択肢があるようでした。

以下、targetの値の例です。

WindowTopMenu

各ウインドウ上部のメニューの部分です。

WorkspaceControlPanelButtons

ワークスペースのパネル部分です。

AnnotationSettings

アノテーションの設定画面です。

最後のAnnotationSettingsおよびmodeにwrapが指定されているプラグインとして、以下のMiradorのアノテーション付与モジュールがありました。

https://github.com/ProjectMirador/mirador-annotations/blob/master/src/plugins/miradorAnnotationPlugin.js

`mapDispatchToProps`と`mapStateToProps`

これがはじめ理解しづらかった（そしてまだ適切に説明できるほど理解できていない）のですが、propsに渡すdispathとstateを定めた変数を指定します。

dispatchについては、以下の変数を与えてます。

const mapDispatchToProps = (dispatch, { windowId }) => ({
  copyWindow: () => dispatch(copyWindowAction(windowId)),
});

copyWindowActionの具体的な内容は以下です。既存のwindowを取得して（1）、不要な変数を削除した上でwindowをコピーして(2)、それをaddWindow（3）しています。

const copyWindowAction = (windowId) => (dispatch, getState) => {
  const window = getState().windows[windowId]; // 1
  const cleanedWindow = omit(window, [
    'id',
    'companionWindowIds',
    'thumbnailNavigationId',
  ]); // 2
  dispatch(mirador.actions.addWindow(cleanedWindow)); // 3
};

stateについては、以下の変数を与えています。以下の例は少し特殊で、stateをすべてpropsに渡す設定となっています。他のプラグインでは、必要な値のみをstateから抽出して、propsに渡しているようでした。

const mapStateToProps = (state) => ({
  state: state,
});

実際、本プラグインでは、mapStateToPropsでpropsに渡された値は使用されていないため、この記述はなくてもよいはずです。そのため、以下でもmapStateToPropsの記述は省略しています。

https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/MiradorCopyWindow.js

`component`

最後にcomponentです。以下のように、コンポーネントで表示する内容を記述しています。

class CopyWindowComponent extends Component {
  render() {
    const { copyWindow } = this.props; // 1
    return (
      <MenuItem onClick={() => copyWindow()}>
        <ListItemIcon>
          <OpenInNewIcon />
        </ListItemIcon>
        <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
          Copy Window
        </ListItemText>
      </MenuItem>
    );
  }
}

上記の(1)でコメントした部分は、先にmapDispatchToPropsでpropsに与えたdispatchを使用しています。メニューをクリックしたら、dispatchであるcopyWindowが実行されます。

合わせて、以下の部分で、copyWindowの型を与えています。mapDispatchToPropsやmapStateToPropsでpropsに渡した変数の方を定義するようです。

CopyWindowComponent.propTypes = {
  copyWindow: PropTypes.func,
};

CopyWindowComponent.defaultProps = {
  copyWindow: () => { },
};

まとめ

間違っている部分があるかもしれませんが、Mirador3のプラグイン開発に関するメモを紹介しました。引き続き、他のプラグイン開発を通じて、メモを共有したいと思います。

他の方の参考になりましたら幸いです。

概要#

開発メモ#

src/index.js#

src/MiradorCopyWindow.js#

targetとmode#

mapDispatchToPropsとmapStateToProps#

component#

まとめ#

概要

開発メモ

src/index.js

src/MiradorCopyWindow.js

`target`と`mode`

`mapDispatchToProps`と`mapStateToProps`

`component`

まとめ