Overview
The following features have been added to mirador-rotation-plugin:
- 90-degree rotation buttons
- Manifest and rotation angle specification via URL parameters
- UI improvements (reset button icon change)
- Help feature (dialog explaining how to use)
New Feature Details
1. 90-Degree Rotation Buttons
Previously only a 1-degree increment slider was available, but buttons for quick 90-degree rotation have been added.
Implementation Details
The following changes were made to src/plugins/MiradorRotation.js:
import RotateLeftIcon from '@mui/icons-material/RotateLeft';
import RotateRightIcon from '@mui/icons-material/RotateRight';
// 90度回転のハンドラー
const handleRotate90 = (direction) => {
const newRotation = rotation + (direction * 90);
updateViewport(windowId, { rotation: newRotation });
};
Two buttons were added to the UI:
- Left rotation button: Rotate 90 degrees counter-clockwise
- Right rotation button: Rotate 90 degrees clockwise
Translation Support
English and Japanese translations were added to src/translations.js:
{
en: {
rotateLeft: 'Rotate 90° left',
rotateRight: 'Rotate 90° right',
},
ja: {
rotateLeft: '左に90度回転',
rotateRight: '右に90度回転',
},
}
2. URL Parameter Support
The demo page now supports specifying manifests and rotation angles via URL parameters.
Supported Parameters
| Parameter | Description | Separator |
|---|---|---|
manifest | IIIF manifest URL | ; (semicolon) |
rotation | Initial rotation angle (degrees) | ; (semicolon) |
Demo Page URL
https://nakamura196.github.io/mirador-rotation-plugin/
Usage Examples
# 単一マニフェスト
https://nakamura196.github.io/mirador-rotation-plugin/?manifest=https://example.com/manifest.json&rotation=180
# 複数マニフェスト（同じ回転角度）
https://nakamura196.github.io/mirador-rotation-plugin/?manifest=url1;url2&rotation=90
# 複数マニフェスト（異なる回転角度）
https://nakamura196.github.io/mirador-rotation-plugin/?manifest=url1;url2&rotation=90;180
Implementation Details
Key changes in demo/src/index.js:
const params = new URLSearchParams(window.location.search);
const manifestParam = params.get('manifest');
const rotationParam = params.get('rotation');
const rotations = rotationParam ? rotationParam.split(';').map(Number) : [];
const createWindows = () => {
if (manifestParam) {
const manifestUrls = manifestParam.split(';');
return manifestUrls.map((url, index) => ({
manifestId: url,
rotationEnabled: true,
rotationOpen: true,
initialViewerConfig: {
// 対応するインデックスの回転角度、なければ最初の値、それもなければ0
rotation: rotations[index] ?? rotations[0] ?? 0,
},
}));
}
// デフォルトの処理...
};
3. Reset Button Icon Change
To distinguish it from the rotation buttons, the reset button icon was changed.
| Before | After |
|---|---|
ReplaySharpIcon | RestartAltIcon |
ReplaySharpIcon had a design that evoked rotation, so it was changed to RestartAltIcon, which more clearly indicates “reset.”
4. Help Feature
A “?” button was added within the plugin, which displays a dialog explaining how to use it when clicked.
Implementation Details
MUI’s Dialog component is used to display descriptions of each control in a table format.
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
// ヘルプダイアログの状態管理
const [helpOpen, setHelpOpen] = useState(false);
// ヘルプボタン
<MiradorMenuButton
aria-label={t('help')}
onClick={() => setHelpOpen(true)}
>
<HelpOutlineIcon />
</MiradorMenuButton>
Dialog Content
| Icon | Description |
|---|---|
| RotateLeftIcon | Rotate 90 degrees counter-clockwise |
| RotateRightIcon | Rotate 90 degrees clockwise |
| LinearScaleIcon | Fine-tune rotation angle (-180 to 180 degrees) |
| RestartAltIcon | Reset rotation to 0 degrees |
Translation Support
{
en: {
help: 'Help',
helpTitle: 'Rotation Controls',
helpRotateLeft: 'Rotate 90° counter-clockwise',
helpRotateRight: 'Rotate 90° clockwise',
helpSlider: 'Fine-tune rotation angle (-180° to 180°)',
helpReset: 'Reset rotation to 0°',
},
ja: {
help: 'ヘルプ',
helpTitle: '回転コントロール',
helpRotateLeft: '反時計回りに90度回転',
helpRotateRight: '時計回りに90度回転',
helpSlider: '回転角度を微調整（-180°〜180°）',
helpReset: '回転を0°にリセット',
},
}
Controls List
The current plugin provides the following controls:
| Control | Icon | Function |
|---|---|---|
| Rotate 90 degrees left | RotateLeftIcon | Rotate 90 degrees counter-clockwise |
| Rotate 90 degrees right | RotateRightIcon | Rotate 90 degrees clockwise |
| Angle slider | LinearScaleIcon | Adjustment in 1-degree increments from -180 to 180 degrees |
| Reset | RestartAltIcon | Reset rotation to 0 degrees |
| Help | HelpOutlineIcon | Display usage dialog |
Configuration Options
| Option | Type | Default | Description |
|---|---|---|---|
rotationEnabled | boolean | false | Enable plugin display |
rotationOpen | boolean | false | Open rotation controls by default |
initialViewerConfig.rotation | number | 0 | Initial rotation angle |
Summary
These feature enhancements have improved the usability of mirador-rotation-plugin:
- 90-degree rotation buttons: Quickly correct the orientation of books and documents
- URL parameters: Easy external invocation and sharing
- UI improvements: Changed to more intuitive icons
- Help feature: First-time users can immediately understand how to use it
These features enable more efficient rotation operations on IIIF images.