From 3f06e377003d0ec994196565373e66b80c0a2a21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerd=20M=C3=BCller?= <gerdesque@users.noreply.github.com>
Date: Tue, 25 Jun 2024 15:30:44 +0200
Subject: [PATCH] Add slider for free rotate

---
 __tests__/MiradorImageTools.test.js |  3 +--
 src/plugins/ImageRotation.js        | 24 --------------------
 src/plugins/MiradorImageTools.js    | 34 ++++++++++++-----------------
 src/translations.js                 | 24 +++++++-------------
 4 files changed, 23 insertions(+), 62 deletions(-)
 delete mode 100644 src/plugins/ImageRotation.js

diff --git a/__tests__/MiradorImageTools.test.js b/__tests__/MiradorImageTools.test.js
index 6a7ca16..2561261 100644
--- a/__tests__/MiradorImageTools.test.js
+++ b/__tests__/MiradorImageTools.test.js
@@ -39,8 +39,7 @@ describe('MiradorImageTools', () => {
   it('renders ImageRotation', () => {
     createWrapper();
 
-    expect(screen.getByRole('button', { name: 'rotateLeft' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'rotateRight' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'rotation' })).toBeInTheDocument();
   });
   it('renders ImageFlip', () => {
     createWrapper();
diff --git a/src/plugins/ImageRotation.js b/src/plugins/ImageRotation.js
deleted file mode 100644
index df8d18b..0000000
--- a/src/plugins/ImageRotation.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import MiradorMenuButton from 'mirador/dist/es/src/containers/MiradorMenuButton';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-
-export default class ImageRotation extends Component {
-  render() {
-    const { label, variant, ...otherProps } = this.props;
-    return (
-      <MiradorMenuButton
-        aria-label={label}
-        {...otherProps}
-      >
-        { variant === 'left' ? <RotateLeftIcon /> : <RotateRightIcon /> }
-      </MiradorMenuButton>
-    );
-  }
-}
-
-ImageRotation.propTypes = {
-  label: PropTypes.string.isRequired,
-  variant: PropTypes.string.isRequired,
-};
diff --git a/src/plugins/MiradorImageTools.js b/src/plugins/MiradorImageTools.js
index 323e941..7c18c0c 100644
--- a/src/plugins/MiradorImageTools.js
+++ b/src/plugins/MiradorImageTools.js
@@ -10,10 +10,10 @@ import InvertColorsIcon from '@mui/icons-material/InvertColors';
 import TuneSharpIcon from '@mui/icons-material/TuneSharp';
 import CloseSharpIcon from '@mui/icons-material/CloseSharp';
 import ReplaySharpIcon from '@mui/icons-material/ReplaySharp';
+import LinearScaleIcon from '@mui/icons-material/LinearScale';
 import { styled, alpha } from '@mui/material/styles';
 import MiradorMenuButton from 'mirador/dist/es/src/containers/MiradorMenuButton';
 import ImageTool from './ImageTool';
-import ImageRotation from './ImageRotation';
 import ImageFlip from './ImageFlip';
 
 const SizeContainer = styled('div')(() => ({
@@ -78,7 +78,6 @@ class MiradorImageTools extends Component {
   constructor(props) {
     super(props);
     this.toggleState = this.toggleState.bind(this);
-    this.toggleRotate = this.toggleRotate.bind(this);
     this.toggleFlip = this.toggleFlip.bind(this);
     this.handleChange = this.handleChange.bind(this);
     this.handleReset = this.handleReset.bind(this);
@@ -148,14 +147,6 @@ class MiradorImageTools extends Component {
     updateWindow(windowId, { imageToolsOpen: !open });
   }
 
-  toggleRotate(value) {
-    const { updateViewport, viewConfig: { flip = false, rotation = 0 }, windowId } = this.props;
-
-    const offset = flip ? -1 * value : value;
-
-    updateViewport(windowId, { rotation: (rotation + offset) % 360 });
-  }
-
   toggleFlip() {
     const { updateViewport, viewConfig: { flip = false }, windowId } = this.props;
 
@@ -166,6 +157,7 @@ class MiradorImageTools extends Component {
     const {
       enabled, open, viewer, windowId,
       viewConfig: {
+        rotation = 0,
         flip = false,
         brightness = 100,
         contrast = 100,
@@ -201,16 +193,18 @@ class MiradorImageTools extends Component {
           && (
           <React.Fragment>
             <ToolContainer>
-              <ImageRotation
-                label={t('rotateRight')}
-                onClick={() => this.toggleRotate(90)}
-                variant="right"
-              />
-              <ImageRotation
-                label={t('rotateLeft')}
-                onClick={() => this.toggleRotate(-90)}
-                variant="left"
-              />
+              <ImageTool
+                type="rotation"
+                label={t('rotation')}
+                min={-180}
+                max={180}
+                windowId={windowId}
+                value={rotation}
+                onChange={this.handleChange('rotation')}
+                small={isSmallDisplay}
+              >
+                <LinearScaleIcon />
+              </ImageTool>
               <ImageFlip
                 label={t('flip')}
                 onClick={this.toggleFlip}
diff --git a/src/translations.js b/src/translations.js
index 7ba92fe..54d58d7 100644
--- a/src/translations.js
+++ b/src/translations.js
@@ -9,8 +9,7 @@ const translations = {
     hide: 'Bildbearbeitung verbergen',
     invert: 'Umkehrung der Farben',
     revert: 'Einstellungen zurücksetzen',
-    rotateLeft: 'Rotation links',
-    rotateRight: 'Rotation rechts',
+    rotation: 'Rotation',
     saturation: 'Sättigung',
     show: 'Bildbearbeitung anzeigen',
   },
@@ -24,8 +23,7 @@ const translations = {
     hide: 'Hide image tools',
     invert: 'Invert colors',
     revert: 'Revert image',
-    rotateLeft: 'Rotate left',
-    rotateRight: 'Rotate right',
+    rotation: 'Rotate',
     saturation: 'Saturation',
     show: 'Show image tools',
   },
@@ -39,8 +37,7 @@ const translations = {
     hide: 'Nascondi gli strumenti dell\'immagine',
     invert: 'Inverti colori',
     revert: 'Ripristinare l\'immagine',
-    rotateLeft: 'Ruota a sinistra',
-    rotateRight: 'Ruota a destra',
+    rotation: 'Ruota',
     saturation: 'Saturazione',
     show: 'Mostra gli strumenti dell\'immagine',
   },
@@ -54,8 +51,7 @@ const translations = {
     hide: 'Masquer les outils d\'image',
     invert: 'Inverser les couleurs',
     revert: 'Réinitialiser les réglages',
-    rotateLeft: 'Rotation vers la gauche',
-    rotateRight: 'Rotation vers la droite',
+    rotation: 'Rotation',
     saturation: 'Saturation',
     show: 'Afficher les outils d\'image',
   },
@@ -69,8 +65,7 @@ const translations = {
     hide: '画像ツールを隠す',
     invert: '色を反転',
     revert: '元に戻す',
-    rotateLeft: '左回転',
-    rotateRight: '右回転',
+    rotation: '旋回',
     saturation: '彩度',
     show: '画像ツールを表示',
   },
@@ -84,8 +79,7 @@ const translations = {
     hide: 'Сакријте алат',
     invert: 'Инверзија боја',
     revert: 'Поништи подешавања',
-    rotateLeft: 'Ротирај лево',
-    rotateRight: 'Ротирај десно',
+    rotation: 'Ротирај',
     saturation: 'Сатурација',
     show: 'Прикажите алат',
   },
@@ -99,8 +93,7 @@ const translations = {
     hide: '隐藏图像工具',
     invert: '反转颜色',
     revert: '还原图像',
-    rotateLeft: '向左旋转',
-    rotateRight: '向右旋转',
+    rotation: '向左旋转',
     saturation: '饱和度',
     show: '显示图像工具',
   },
@@ -114,8 +107,7 @@ const translations = {
     hide: '隱藏圖像工具',
     invert: '反轉顏色',
     revert: '還原圖像',
-    rotateLeft: '向左旋轉',
-    rotateRight: '向右旋轉',
+    rotation: '向左旋轉',
     saturation: '飽和度',
     show: '顯示圖像工具',
   },