Skip to content
Snippets Groups Projects
Commit 2681b842 authored by David Beniamine's avatar David Beniamine
Browse files

Merge branch '3-integrate-upstream-tests' into 'tetras-main'

Integrate upstream tests into gitlab ci

Closes #3

See merge request iiif/mirador-annotations!3
parents 2aa4e1b1 0201aaac
No related branches found
No related tags found
2 merge requests!3Integrate upstream tests into gitlab ci,!2Update plugin code from upstream
Pipeline #1162 failed
......@@ -26,6 +26,8 @@
"sort-keys": ["error", "asc", {
"caseSensitive": false,
"natural": false
}]
}],
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/no-static-element-interactions": "off"
}
}
......@@ -5,4 +5,3 @@
/node_modules
/umd
npm-debug.log*
package-lock.json
upstream_tests:
image: docker.io/node:current
before_script:
- npm ci
script:
- npm run test:ci
artifacts:
when: always
paths:
- junit.xml
reports:
junit: junit.xml
......@@ -10,7 +10,7 @@ function createWrapper(props) {
return shallow(
<AnnotationCreation
id="x"
config={{}}
config={{ annotation: {} }}
receiveAnnotation={jest.fn()}
windowId="abc"
{...props}
......
This diff is collapsed.
{
"name": "mirador-annotations",
"version": "0.4.0",
"version": "0.5.0",
"description": "mirador-annotations React component",
"main": "lib/index.js",
"module": "es/index.js",
......@@ -18,7 +18,8 @@
"start": "nwb serve-react-demo",
"test": "npm run lint && jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"
"test:watch": "jest --watch",
"test:ci": "jest --ci --reporters=default --reporters=jest-junit --watchAll=false"
},
"dependencies": {
"@psychobolt/react-paperjs": "< 1.0",
......@@ -35,10 +36,10 @@
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.52",
"lodash": "^4.17.11",
"mirador": "^3.0.0-rc.5",
"mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#annotation-on-video",
"prop-types": "^15.7.2",
"react": "^16.0",
"react-dom": "^16.0",
"react": "^16.8",
"react-dom": "^16.8",
"uuid": "^8.0.0"
},
"devDependencies": {
......@@ -52,22 +53,22 @@
"canvas": "^2.6.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^6.8.0",
"eslint": "^7.2",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-react-app": "^5.2.1",
"eslint-plugin-flowtype": "^4.7.0",
"eslint-plugin-flowtype": "^5.6.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jest": "^23.18.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.3",
"jest": "^26.1.0",
"jest-canvas-mock": "^2.2.0",
"jest-junit": "^15.0.0",
"jest-localstorage-mock": "^2.4.2",
"mirador": "^3.0.0-rc.5",
"mirador": "git+https://gitlab.tetras-libre.fr/iiif/mirador-video-annotation#annotation-on-video",
"nwb": "^0.24.7",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react": "^16.8",
"react-dom": "^16.8",
"uuid": "^8.2.0"
},
"author": "",
......
......@@ -95,21 +95,28 @@ class AnnotationCreation extends Component {
//
// start/end time
}
this.state = {
const toolState = {
activeTool: 'cursor',
annoBody: '',
closedMode: 'closed',
colorPopoverOpen: false,
currentColorType: false,
fillColor: null,
strokeColor: '#00BFFF',
strokeWidth: 3,
...(props.config.annotation.defaults || {}),
};
this.state = {
...toolState,
annoBody: '',
colorPopoverOpen: false,
lineWeightPopoverOpen: false,
popoverAnchorEl: null,
popoverLineWeightAnchorEl: null,
strokeColor: '#00BFFF',
strokeWidth: 1,
svg: null,
tend: '',
tstart: '',
textEditorStateBustingKey: 0,
xywh: null,
...annoState,
};
......@@ -184,10 +191,10 @@ class AnnotationCreation extends Component {
submitForm(e) {
e.preventDefault();
const {
annotation, canvases, closeCompanionWindow, receiveAnnotation, config,
annotation, canvases, receiveAnnotation, config,
} = this.props;
const {
annoBody, tags, xywh, svg, tstart, tend,
annoBody, tags, xywh, svg, tstart, tend, textEditorStateBustingKey,
} = this.state;
let fsel = xywh;
if (tstart && tend) {
......@@ -214,10 +221,13 @@ class AnnotationCreation extends Component {
});
}
});
this.setState({
activeTool: null,
annoBody: '',
svg: null,
textEditorStateBustingKey: textEditorStateBustingKey + 1,
xywh: null,
});
closeCompanionWindow();
}
/** */
......@@ -261,7 +271,7 @@ class AnnotationCreation extends Component {
const {
activeTool, colorPopoverOpen, currentColorType, fillColor, popoverAnchorEl, strokeColor,
popoverLineWeightAnchorEl, lineWeightPopoverOpen, strokeWidth, closedMode, annoBody, svg,
tstart, tend,
tstart, tend, textEditorStateBustingKey,
} = this.state;
return (
......@@ -280,7 +290,7 @@ class AnnotationCreation extends Component {
updateGeometry={this.updateGeometry}
windowId={windowId}
/>
<form onSubmit={this.submitForm}>
<form onSubmit={this.submitForm} className={classes.section}>
<Grid container>
<Grid item xs={12}>
<Typography variant="overline">
......@@ -405,6 +415,7 @@ class AnnotationCreation extends Component {
</Grid>
<Grid item xs={12}>
<TextEditor
key={textEditorStateBustingKey}
annoHtml={annoBody}
updateAnnotationBody={this.updateBody}
/>
......@@ -423,12 +434,15 @@ class AnnotationCreation extends Component {
>
<Paper>
<ClickAwayListener onClickAway={this.handleCloseLineWeight}>
<MenuList>
<MenuList autoFocus role="listbox">
{[1, 3, 5, 10, 50].map((option, index) => (
<MenuItem
key={option}
onClick={this.handleLineWeightSelect}
value={option}
selected={option == strokeWidth}
role="option"
aria-selected={option == strokeWidth}
>
{option}
</MenuItem>
......@@ -472,6 +486,12 @@ const styles = (theme) => ({
display: 'flex',
flexWrap: 'wrap',
},
section: {
paddingBottom: theme.spacing(1),
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
paddingTop: theme.spacing(2),
},
});
AnnotationCreation.propTypes = {
......@@ -485,6 +505,11 @@ AnnotationCreation.propTypes = {
config: PropTypes.shape({
annotation: PropTypes.shape({
adapter: PropTypes.func,
defaults: PropTypes.objectOf(
PropTypes.oneOfType(
[PropTypes.bool, PropTypes.func, PropTypes.number, PropTypes.string]
)
),
}),
}).isRequired,
id: PropTypes.string.isRequired,
......
......@@ -20,6 +20,16 @@ class TextEditor extends Component {
this.onChange = this.onChange.bind(this);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
this.handleFormating = this.handleFormating.bind(this);
this.handleFocus = this.handleFocus.bind(this);
this.editorRef = React.createRef();
}
/**
* This is a kinda silly hack (but apparently recommended approach) to
* making sure the whole visible editor area is clickable, not just the first line.
*/
handleFocus() {
if (this.editorRef.current) this.editorRef.current.focus();
}
/** */
......@@ -58,6 +68,7 @@ class TextEditor extends Component {
const { classes } = this.props;
const { editorState } = this.state;
const currentStyle = editorState.getCurrentInlineStyle();
return (
<div>
<ToggleButtonGroup
......@@ -77,11 +88,13 @@ class TextEditor extends Component {
<ItalicIcon />
</ToggleButton>
</ToggleButtonGroup>
<div className={classes.editorRoot}>
<div className={classes.editorRoot} onClick={this.handleFocus}>
<Editor
editorState={editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
ref={this.editorRef}
/>
</div>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment