Overview

I created a plugin for Mirador 3 that copies a window.

Note that this functionality is already provided by the following plugin.

https://github.com/ProjectMirador/mirador-plugin-demos

Therefore, this plugin was created to learn the plugin development process. I hope this plugin serves as a useful reference from that perspective.

Here is a screenshot.

The source code is available here.

https://github.com/nakamura196/mirador-copy-window-plugin

The demo site is available here.

https://nakamura196.github.io/mirador-copy-window-plugin/

Development Notes

For developing this plugin, I first cloned the following repository and made modifications to it.

https://github.com/ProjectMirador/mirador-dl-plugin

src/index.js

First, I renamed miradorDownload to MiradorCopyWindow in the following file.

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

src/MiradorCopyWindow.js

The following file is the main file to edit.

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

This file was initially copied from the following file.

https://github.com/ProjectMirador/mirador-plugin-demos/blob/master/src/plugins/copy-window.js

Let me first explain the section at the end of the file.

target and mode

target specifies where to place the component. mode specifies how to add the component. For mode, options such as add and wrap appear to be available.

Here are some examples of target values.

• WindowTopMenu

This is the menu area at the top of each window.

• WorkspaceControlPanelButtons

This is the workspace panel area.

• AnnotationSettings

This is the annotation settings screen.

An example of a plugin using AnnotationSettings with mode set to wrap is the Mirador annotation module below.

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

mapDispatchToProps and mapStateToProps

This was initially difficult to understand (and I still cannot explain it properly), but you specify variables that define the dispatch and state to pass to props.

For dispatch, the following variable is provided.

The specific content of copyWindowAction is as follows. It retrieves the existing window (1), removes unnecessary variables to copy the window (2), and then uses addWindow (3) to add it.

For state, the following variable is provided. This example is somewhat special, as it passes all of state to props. In other plugins, it appears that only the necessary values are extracted from state and passed to props.

In practice, since the values passed to props via mapStateToProps are not used in this plugin, this statement is not necessary. Therefore, the mapStateToProps statement is also omitted in the following.

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

component

Finally, the component. The content to be displayed by the component is described as follows.

The part commented as (1) above uses the dispatch that was passed to props via mapDispatchToProps. When the menu is clicked, the dispatch function copyWindow is executed.

Additionally, in the following section, the types for copyWindow are defined. It appears that the types for variables passed to props via mapDispatchToProps and mapStateToProps need to be defined.

Summary

There may be some inaccuracies, but I have shared my notes on Mirador 3 plugin development. I plan to continue sharing notes through the development of other plugins.

I hope this serves as a useful reference for others.