Skip to content
Snippets Groups Projects
Commit 384ce381 authored by Anthony's avatar Anthony
Browse files

Reorganize code

parent 43153747
No related branches found
No related tags found
1 merge request!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1797 failed
Showing
with 228 additions and 162 deletions
import React, {
Component, useEffect, useLayoutEffect, useState,
} from 'react';
import React, { useEffect, useLayoutEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
Button, Paper, Grid, Popover, Divider,
MenuList, MenuItem, ClickAwayListener,
Button, ClickAwayListener, Divider, Grid, MenuItem, MenuList, Paper, Popover,
} from '@mui/material';
import { Alarm, LastPage } from '@mui/icons-material';
import Typography from '@mui/material/Typography';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import RectangleIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CircleIcon from '@mui/icons-material/RadioButtonUnchecked';
import PolygonIcon from '@mui/icons-material/Timeline';
import AddPhotoAlternateIcon from '@mui/icons-material/AddPhotoAlternate';
import GestureIcon from '@mui/icons-material/Gesture';
import ClosedPolygonIcon from '@mui/icons-material/ChangeHistory';
import OpenPolygonIcon from '@mui/icons-material/ShowChart';
......@@ -26,21 +23,18 @@ import TitleIcon from '@mui/icons-material/Title';
import { SketchPicker } from 'react-color';
import { styled } from '@mui/material/styles';
import { v4 as uuid, v4 as uuidv4 } from 'uuid';
import Slider from '@mui/material/Slider';
import TextField from '@mui/material/TextField';
import { exportStageSVG } from 'react-konva-to-svg';
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 ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import { set } from 'lodash';
import AnnotationDrawing from './AnnotationDrawing';
import TextEditor from './TextEditor';
import WebAnnotation from './WebAnnotation';
import CursorIcon from './icons/Cursor';
import HMSInput from './HMSInput';
import ImageFormField from './ImageFormField';
import { secondsToHMS } from './utils';
import AnnotationFormContent from './AnnotationForm/AnnotationFormContent';
import AnnotationFormTime from './AnnotationForm/AnnotationFormTime';
/** Extract time information from annotation target */
function timeFromAnnoTarget(annotarget) {
......@@ -581,160 +575,40 @@ function AnnotationCreation(props) {
<StyledForm
onSubmit={submitForm}
>
<div>
<Grid item xs={12}>
<TextField
id="outlined-basic"
label="Title"
variant="outlined"
<AnnotationFormContent
onChange={updateTitle}
textBody={textBody}
textEditorStateBustingKey={textEditorStateBustingKey}
updateTextBody={updateTextBody}
/>
</Grid>
</div>
<Grid>
<TextEditor
key={textEditorStateBustingKey}
annoHtml={textBody}
updateAnnotationBody={updateTextBody}
/>
</Grid>
<div>
{ mediaIsVideo && (
<>
<Grid
item
xs={12}
>
<Typography id="range-slider" variant="overline">
Display period
</Typography>
<div>
<Typography>
{videoDuration}
</Typography>
<Slider
<AnnotationFormTime
mediaIsVideo={mediaIsVideo}
videoDuration={videoDuration}
value={valueTime}
onChange={handleChangeTime}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
max={Math.round(videoDuration)}
color="secondary"
handleChangeTime={handleChangeTime}
windowid={windowId}
sx={{
color: 'rgba(1, 0, 0, 0.38)',
}}
/>
</div>
</Grid>
<div style={{
alignContent: 'center',
display: 'flex',
flexDirection: 'column',
gap: '5px',
padding: '5px',
}}
>
<div style={{
border: '1px solid rgba(0, 0, 0, 0.12)',
borderRadius: '4px',
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'center',
padding: '5px',
}}
>
<div style={{
display: 'flex',
flexDirection: 'column',
}}
>
<div>
<p style={{
fontSize: '15px',
margin: 0,
minWidth: '40px',
}}
>
Start
</p>
</div>
<ToggleButton
value="true"
title="Set current time"
size="small"
onClick={setTstartNow}
style={{
border: 'none',
height: '30px',
margin: 'auto',
marginLeft: '0',
marginRight: '5px',
}}
>
<Alarm fontSize="small" />
</ToggleButton>
</div>
<HMSInput seconds={tstart} onChange={updateTstart} />
</div>
<div style={{
border: '1px solid rgba(0, 0, 0, 0.12)',
borderRadius: '4px',
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'center',
padding: '5px',
}}
>
<div style={{
display: 'flex',
flexDirection: 'column',
}}
>
<div>
<p style={{
fontSize: '15px',
margin: 0,
minWidth: '40px',
}}
>
End
</p>
</div>
<ToggleButton
value="true"
title="Set current time"
size="small"
onClick={setTendNow}
style={{
border: 'none',
height: '30px',
margin: 'auto',
marginLeft: '0',
marginRight: '5px',
}}
>
<Alarm fontSize="small" />
</ToggleButton>
</div>
<HMSInput seconds={tend} onChange={updateTend} />
</div>
</div>
</>
)}
</div>
setTstartNow={setTstartNow}
tstart={tstart}
updateTstart={updateTstart}
setTendNow={setTendNow}
tend={tend}
updateTend={updateTend}
/>)}
<div>
<Grid container>
<Button onClick={addImage}>
Add Image
</Button>
<Grid item xs={12}>
<Typography variant="overline">
Image Content
</Typography>
</Grid>
<Grid item xs={12} style={{ marginBottom: 10 }}>
<ImageFormField value={image} onChange={handleImgChange} />
<Grid item xs={8} style={{ marginBottom: 10 }}>
<ImageFormField xs={8} value={image} onChange={handleImgChange} />
</Grid>
<Grid item xs={4} style={{ marginBottom: 10 }}>
<Button variant="contained" onClick={addImage}>
<AddPhotoAlternateIcon />
</Button>
</Grid>
</Grid>
</div>
......
......@@ -348,9 +348,9 @@ function AnnotationDrawing(props) {
updateCurrentShapeInShapes();
break;
case 'arrow':
// update points
// TODO improve
const arrowShape = {};
// update points
arrowShape.points = [currentShape.points[0], currentShape.points[1], pos.x, pos.y];
arrowShape.id = currentShape.id;
arrowShape.type = currentShape.type;
......
import React from 'react';
import { Grid, TextField, Typography } from '@mui/material';
import PropTypes from 'prop-types';
import TextEditor from '../TextEditor';
/** Form part for edit annotation content and body */
function AnnotationFormContent({
onChange, textBody, updateTextBody, textEditorStateBustingKey,
}) {
return (
<div>
<Typography variant="overline">
Annotation content
</Typography>
<Grid item xs={12}>
<TextField
id="outlined-basic"
label="Title"
variant="outlined"
onChange={onChange}
/>
</Grid>
<Grid>
<TextEditor
key={textEditorStateBustingKey}
annoHtml={textBody}
updateAnnotationBody={updateTextBody}
/>
</Grid>
</div>
);
}
AnnotationFormContent.propTypes = {
onChange: PropTypes.func,
textBody: PropTypes.string,
textEditorStateBustingKey: PropTypes.string,
updateTextBody: PropTypes.func,
};
export default AnnotationFormContent;
import { Grid } from '@mui/material';
import Typography from '@mui/material/Typography';
import Slider from '@mui/material/Slider';
import ToggleButton from '@mui/material/ToggleButton';
import { Alarm } from '@mui/icons-material';
import React from 'react';
import PropTypes from 'prop-types';
import HMSInput from '../HMSInput';
function AnnotationFormTime({
videoDuration, value, handleChangeTime, windowid, setTstartNow, tstart, updateTstart, setTendNow, tend, updateTend, ...props
}) {
return (
<>
<Grid
item
xs={12}
>
<Typography id="range-slider" variant="overline">
Display period
</Typography>
<div>
<Typography>
{videoDuration}
</Typography>
<Slider
value={value}
onChange={handleChangeTime}
valueLabelDisplay="auto"
aria-labelledby="range-slider"
max={Math.round(videoDuration)}
color="secondary"
windowid={windowid}
sx={{
color: 'rgba(1, 0, 0, 0.38)',
}}
/>
</div>
</Grid>
<div style={{
alignContent: 'center',
display: 'flex',
flexDirection: 'column',
gap: '5px',
padding: '5px',
}}
>
<div style={{
border: '1px solid rgba(0, 0, 0, 0.12)',
borderRadius: '4px',
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'center',
padding: '5px',
}}
>
<div style={{
display: 'flex',
flexDirection: 'column',
}}
>
<div>
<p style={{
fontSize: '15px',
margin: 0,
minWidth: '40px',
}}
>
Start
</p>
</div>
<ToggleButton
value="true"
title="Set current time"
size="small"
onClick={setTstartNow}
style={{
border: 'none',
height: '30px',
margin: 'auto',
marginLeft: '0',
marginRight: '5px',
}}
>
<Alarm fontSize="small" />
</ToggleButton>
</div>
<HMSInput seconds={tstart} onChange={updateTstart} />
</div>
<div style={{
border: '1px solid rgba(0, 0, 0, 0.12)',
borderRadius: '4px',
display: 'flex',
flexWrap: 'nowrap',
justifyContent: 'center',
padding: '5px',
}}
>
<div style={{
display: 'flex',
flexDirection: 'column',
}}
>
<div>
<p style={{
fontSize: '15px',
margin: 0,
minWidth: '40px',
}}
>
End
</p>
</div>
<ToggleButton
value="true"
title="Set current time"
size="small"
onClick={setTendNow}
style={{
border: 'none',
height: '30px',
margin: 'auto',
marginLeft: '0',
marginRight: '5px',
}}
>
<Alarm fontSize="small" />
</ToggleButton>
</div>
<HMSInput seconds={tend} onChange={updateTend} />
</div>
</div>
</>
);
}
AnnotationFormTime.propTypes = {
handleChangeTime: PropTypes.func,
mediaIsVideo: PropTypes.bool,
setTendNow: PropTypes.func,
setTstartNow: PropTypes.func,
tend: PropTypes.any,
tstart: PropTypes.number,
updateTend: PropTypes.func,
updateTstart: PropTypes.func,
value: PropTypes.arrayOf(PropTypes.number),
videoDuration: PropTypes.any,
windowid: PropTypes.any,
};
export default AnnotationFormTime;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment