From d33e1269d44c550619e49aee9ed5a71e1bfa5e8f Mon Sep 17 00:00:00 2001
From: Antoine <antoine.roy@tetras-libre.fr>
Date: Wed, 20 Dec 2023 15:52:29 +0100
Subject: [PATCH] Tentative de rendre compatible le plugin annotation avec
Mirador qui fonctionne avec React 17
---
.eslintrc | 4 ++
package.json | 3 +-
src/AnnotationCreation.js | 95 ++++++++++++++------------
src/AnnotationExportDialog.js | 23 ++++---
src/CanvasListItem.js | 8 +--
src/HMSInput.js | 5 +-
src/ImageFormField.js | 4 +-
src/SingleCanvasDialog.js | 14 ++--
src/TextEditor.js | 10 +--
src/icons/Cursor.js | 2 +-
src/plugins/miradorAnnotationPlugin.js | 4 +-
11 files changed, 93 insertions(+), 79 deletions(-)
diff --git a/.eslintrc b/.eslintrc
index b7539c7..9a432f4 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -10,6 +10,10 @@
"parser": "@babel/eslint-parser",
"plugins": ["jest"],
"rules": {
+ "import/no-extraneous-dependencies": [
+ "error",
+{"devDependencies": true}
+],
"import/prefer-default-export": "off",
"no-console": "off",
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
diff --git a/package.json b/package.json
index 81fee8b..a6c75e3 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"test:ci": "jest --ci --reporters=default --reporters=jest-junit --watchAll=false"
},
"dependencies": {
+ "@mui/system": "^5.15.1",
"@psychobolt/react-paperjs": "^1.0.3",
"@psychobolt/react-paperjs-editor": "0.0.11",
"draft-js": "^0.11.6",
@@ -43,9 +44,9 @@
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/eslint-parser": "^7.19.1",
+ "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
- "@babel/plugin-proposal-private-property-in-object":"^7.21.11" ,
"@mui/icons-material": "^5.11.16",
"@mui/lab": "^5.0.0-alpha.134",
"@mui/material": "^5.13.5",
diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index a383aa1..95af50e 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -3,29 +3,29 @@ import PropTypes from 'prop-types';
import {
Button, Paper, Grid, Popover, Divider,
MenuList, MenuItem, ClickAwayListener,
-} from '@material-ui/core';
-import { Alarm, LastPage } from '@material-ui/icons';
-import Typography from '@material-ui/core/Typography';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import RectangleIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import CircleIcon from '@material-ui/icons/RadioButtonUnchecked';
-import PolygonIcon from '@material-ui/icons/Timeline';
-import GestureIcon from '@material-ui/icons/Gesture';
-import ClosedPolygonIcon from '@material-ui/icons/ChangeHistory';
-import OpenPolygonIcon from '@material-ui/icons/ShowChart';
-import FormatColorFillIcon from '@material-ui/icons/FormatColorFill';
-import StrokeColorIcon from '@material-ui/icons/BorderColor';
-import LineWeightIcon from '@material-ui/icons/LineWeight';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import FormatShapesIcon from '@material-ui/icons/FormatShapes';
+} from '@mui/material';
+import { Alarm, LastPage } from '@mui/icons-material';
+import Typography from '@mui/material/Typography';
+import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
+import RectangleIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CircleIcon from '@mui/icons-material/RadioButtonUnchecked';
+import PolygonIcon from '@mui/icons-material/Timeline';
+import GestureIcon from '@mui/icons-material/Gesture';
+import ClosedPolygonIcon from '@mui/icons-material/ChangeHistory';
+import OpenPolygonIcon from '@mui/icons-material/ShowChart';
+import FormatColorFillIcon from '@mui/icons-material/FormatColorFill';
+import StrokeColorIcon from '@mui/icons-material/BorderColor';
+import LineWeightIcon from '@mui/icons-material/LineWeight';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import FormatShapesIcon from '@mui/icons-material/FormatShapes';
import { SketchPicker } from 'react-color';
import { v4 as uuid } from 'uuid';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/system';
import CompanionWindow from 'mirador/dist/es/src/containers/CompanionWindow';
import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
-import Slider from '@material-ui/core/Slider';
+import Slider from '@mui/material/Slider';
import AnnotationDrawing from './AnnotationDrawing';
import TextEditor from './TextEditor';
import WebAnnotation from './WebAnnotation';
@@ -33,6 +33,7 @@ import CursorIcon from './icons/Cursor';
import HMSInput from './HMSInput';
import ImageFormField from './ImageFormField';
import { secondsToHMS } from './utils';
+
/** Extract time information from annotation target */
function timeFromAnnoTarget(annotarget) {
console.info('TODO proper time extraction from: ', annotarget);
@@ -211,10 +212,14 @@ class AnnotationCreation extends Component {
};
/** update annotation start time */
- updateTstart(value) { this.setState({ tstart: value }); }
+ updateTstart(value) {
+ this.setState({ tstart: value });
+ }
/** update annotation end time */
- updateTend(value) { this.setState({ tend: value }); }
+ updateTend(value) {
+ this.setState({ tend: value });
+ }
/** seekTo/goto annotation start time */
@@ -408,7 +413,7 @@ class AnnotationCreation extends Component {
</div>
<div>
- { mediaIsVideo && (
+ {mediaIsVideo && (
<>
<Grid item xs={12} className={classes.paper}>
<Typography id="range-slider" variant="overline">
@@ -570,23 +575,23 @@ class AnnotationCreation extends Component {
<Divider flexItem orientation="vertical" className={classes.divider} />
{ /* close / open polygon mode only for freehand drawing mode. */
- activeTool === 'freehand'
- ? (
- <ToggleButtonGroup
- size="small"
- value={closedMode}
- onChange={this.changeClosedMode}
- >
- <ToggleButton value="closed">
- <ClosedPolygonIcon />
- </ToggleButton>
- <ToggleButton value="open">
- <OpenPolygonIcon />
- </ToggleButton>
- </ToggleButtonGroup>
- )
- : null
- }
+ activeTool === 'freehand'
+ ? (
+ <ToggleButtonGroup
+ size="small"
+ value={closedMode}
+ onChange={this.changeClosedMode}
+ >
+ <ToggleButton value="closed">
+ <ClosedPolygonIcon />
+ </ToggleButton>
+ <ToggleButton value="open">
+ <OpenPolygonIcon />
+ </ToggleButton>
+ </ToggleButtonGroup>
+ )
+ : null
+ }
</Grid>
</Grid>
</div>
@@ -628,7 +633,7 @@ class AnnotationCreation extends Component {
onClose={this.closeChooseColor}
>
<SketchPicker
- // eslint-disable-next-line react/destructuring-assignment
+ // eslint-disable-next-line react/destructuring-assignment
color={this.state[currentColorType] || {}}
onChangeComplete={this.updateStrokeColor}
/>
@@ -637,6 +642,7 @@ class AnnotationCreation extends Component {
);
}
}
+
/** */
const styles = (theme) => ({
buttonTimeContainer: {
@@ -731,11 +737,14 @@ AnnotationCreation.propTypes = {
AnnotationCreation.defaultProps = {
annotation: null,
canvases: [],
- closeCompanionWindow: () => {},
+ closeCompanionWindow: () => {
+ },
currentTime: null,
paused: true,
- setCurrentTime: () => {},
- setSeekTo: () => {},
+ setCurrentTime: () => {
+ },
+ setSeekTo: () => {
+ },
};
-export default withStyles(styles)(AnnotationCreation);
+export default styled(styles)(AnnotationCreation);
diff --git a/src/AnnotationExportDialog.js b/src/AnnotationExportDialog.js
index 9202209..bfa897c 100644
--- a/src/AnnotationExportDialog.js
+++ b/src/AnnotationExportDialog.js
@@ -1,15 +1,16 @@
import React, { Component } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import GetAppIcon from '@mui/icons-material/GetApp';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
import PropTypes, { bool } from 'prop-types';
-import { withStyles } from '@material-ui/core';
+import { styled } from '@mui/system';
+
/** */
const styles = (theme) => ({
@@ -137,4 +138,4 @@ AnnotationExportDialog.defaultProps = {
classes: {},
};
-export default withStyles(styles)(AnnotationExportDialog);
+export default styled(styles)(AnnotationExportDialog);
diff --git a/src/CanvasListItem.js b/src/CanvasListItem.js
index f3a6526..07824c5 100644
--- a/src/CanvasListItem.js
+++ b/src/CanvasListItem.js
@@ -1,9 +1,9 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import DeleteIcon from '@material-ui/icons/DeleteForever';
-import EditIcon from '@material-ui/icons/Edit';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
+import DeleteIcon from '@mui/icons-material/DeleteForever';
+import EditIcon from '@mui/icons-material/Edit';
+import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
import flatten from 'lodash/flatten';
import AnnotationActionsContext from './AnnotationActionsContext';
diff --git a/src/HMSInput.js b/src/HMSInput.js
index 06d7d46..1803c23 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -1,8 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { IconButton, Input, TextField } from '@material-ui/core';
-import { ArrowDownward, ArrowUpward } from '@material-ui/icons';
+import { withStyles } from '@mui/material/styles';
+import { Input } from '@mui/material';
import { secondsToHMSarray } from './utils';
/** hh:mm:ss input which behave like a single input for parent */
diff --git a/src/ImageFormField.js b/src/ImageFormField.js
index b7162a4..09aaa85 100644
--- a/src/ImageFormField.js
+++ b/src/ImageFormField.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import { TextField } from '@material-ui/core';
+import { withStyles } from '@mui/material/styles';
+import { TextField } from '@mui/material';
/** URL input with an <img> preview */
class ImageFormField extends Component {
diff --git a/src/SingleCanvasDialog.js b/src/SingleCanvasDialog.js
index 75fe392..9e3ad9f 100644
--- a/src/SingleCanvasDialog.js
+++ b/src/SingleCanvasDialog.js
@@ -1,11 +1,11 @@
import React, { Component } from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Typography from '@mui/material/Typography';
import PropTypes from 'prop-types';
/**
diff --git a/src/TextEditor.js b/src/TextEditor.js
index 5f24d6d..925f655 100644
--- a/src/TextEditor.js
+++ b/src/TextEditor.js
@@ -1,11 +1,11 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Editor, EditorState, RichUtils } from 'draft-js';
-import ToggleButton from '@material-ui/lab/ToggleButton';
-import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
-import BoldIcon from '@material-ui/icons/FormatBold';
-import ItalicIcon from '@material-ui/icons/FormatItalic';
-import { withStyles } from '@material-ui/core/styles';
+import ToggleButton from '@mui/lab/ToggleButton';
+import ToggleButtonGroup from '@mui/lab/ToggleButtonGroup';
+import BoldIcon from '@mui/icons-material/FormatBold';
+import ItalicIcon from '@mui/icons-material/FormatItalic';
+import { withStyles } from '@mui/material/styles';
import { stateToHTML } from 'draft-js-export-html';
import { stateFromHTML } from 'draft-js-import-html';
diff --git a/src/icons/Cursor.js b/src/icons/Cursor.js
index 5eee80d..85b7420 100644
--- a/src/icons/Cursor.js
+++ b/src/icons/Cursor.js
@@ -1,5 +1,5 @@
import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
/**
* CursorIcon ~
diff --git a/src/plugins/miradorAnnotationPlugin.js b/src/plugins/miradorAnnotationPlugin.js
index e3a06fc..f8f01aa 100644
--- a/src/plugins/miradorAnnotationPlugin.js
+++ b/src/plugins/miradorAnnotationPlugin.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import * as actions from 'mirador/dist/es/src/state/actions';
import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
-import AddBoxIcon from '@material-ui/icons/AddBox';
-import GetAppIcon from '@material-ui/icons/GetApp';
+import AddBoxIcon from '@mui/icons-material/AddBox';
+import GetAppIcon from '@mui/icons-material/GetApp';
import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
import SingleCanvasDialog from '../SingleCanvasDialog';
--
GitLab