Skip to content
Snippets Groups Projects
Commit 1bfba478 authored by Antoine Roy's avatar Antoine Roy
Browse files

merge handle title and error resolution with konvas

parent b3824ca8
No related branches found
No related tags found
No related merge requests found
Pipeline #1716 failed
Stage: test
Expand all Show whitespace changes
Inline Side-by-side
mirador @ 39561392
Subproject commit 1a9ef869f8868c6983ba5e465da63598b14d2d8e Subproject commit 3956139233904c4666e611a2b3aa09143cb67b57
package-lock.json
+ 37
− 155
View file @ 1bfba478
This diff is collapsed.
package.json
+ 1
− 0
View file @ 1bfba478
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
"paper": "^0.12.11", "paper": "^0.12.11",
"react-color": "^2.18.1", "react-color": "^2.18.1",
"react-konva": ">=17.0.1-3 <18.0.0", "react-konva": ">=17.0.1-3 <18.0.0",
"react-konva-to-svg": "^1.0.2",
"react-resize-observer": "^1.1.1" "react-resize-observer": "^1.1.1"
}, },
"peerDependencies": { "peerDependencies": {
......
src/AnnotationCreation.js
+ 47
− 17
View file @ 1bfba478
...@@ -88,6 +88,9 @@ class AnnotationCreation extends Component { ...@@ -88,6 +88,9 @@ class AnnotationCreation extends Component {
} else if (props.annotation.body.type === 'Image') { } else if (props.annotation.body.type === 'Image') {
// annoState.textBody = props.annotation.body.value; // why text body here ??? // annoState.textBody = props.annotation.body.value; // why text body here ???
annoState.image = props.annotation.body; annoState.image = props.annotation.body;
}else if(props.annotation.body.type === 'KonvasInformations'){
annoState.shapes = props.annotation.body
console.log(annoState.shapes)
} }
// //
// drawing position // drawing position
...@@ -110,6 +113,7 @@ class AnnotationCreation extends Component { ...@@ -110,6 +113,7 @@ class AnnotationCreation extends Component {
annoState.xywh = geomFromAnnoTarget(props.annotation.target); annoState.xywh = geomFromAnnoTarget(props.annotation.target);
[annoState.tstart, annoState.tend] = timeFromAnnoTarget(props.annotation.target); [annoState.tstart, annoState.tend] = timeFromAnnoTarget(props.annotation.target);
} }
console.log('annoState',annoState)
} }
const toolState = { const toolState = {
...@@ -145,6 +149,7 @@ class AnnotationCreation extends Component { ...@@ -145,6 +149,7 @@ class AnnotationCreation extends Component {
...annoState, ...annoState,
valuetextTime: '', valuetextTime: '',
mediaVideo: null, mediaVideo: null,
konvasInformations: {},
}; };
this.submitForm = this.submitForm.bind(this); this.submitForm = this.submitForm.bind(this);
...@@ -169,6 +174,7 @@ class AnnotationCreation extends Component { ...@@ -169,6 +174,7 @@ class AnnotationCreation extends Component {
this.handleChangeTime = this.handleChangeTime.bind(this); this.handleChangeTime = this.handleChangeTime.bind(this);
this.valuetextTime = this.valuetextTime.bind(this); this.valuetextTime = this.valuetextTime.bind(this);
this.updateTitle = this.updateTitle.bind(this); this.updateTitle = this.updateTitle.bind(this);
this.addPath = this.addPath.bind(this);
} }
componentDidMount() { componentDidMount() {
...@@ -306,22 +312,41 @@ class AnnotationCreation extends Component { ...@@ -306,22 +312,41 @@ class AnnotationCreation extends Component {
} }
childRef = React.createRef();
async addPath(svg){
const{ xywh } = this.props;
const thisSvg = svg;
const { shapes } = await this.childRef.getData();
const konvasInformations = {
shapes: shapes,
svg: thisSvg,
xywh: xywh,
}
this.updateGeometry({svg, xywh, konvasInformations})
console.log("konvasinformation", konvasInformations)
}
getSvg = async () => { getSvg = async () => {
const stage = window.Konva.stages.find((stage) => stage.attrs.id === this.props.windowId); const stage = window.Konva.stages.find((stage) => stage.attrs.id === this.props.windowId);
const svg = await exportStageSVG(stage); const svg = await exportStageSVG(stage);
return svg; return svg;
} }
/** */ /** */
async submitForm(e) { async submitForm(e) {
e.preventDefault(); e.preventDefault();
if(!this.state.svg){
this.setState({svg: await this.getSvg()})
}
console.log('svg', this.state.svg);
await this.addPath(this.state.svg);
const { const {
annotation, annotation,
canvases, canvases,
...@@ -330,30 +355,33 @@ class AnnotationCreation extends Component { ...@@ -330,30 +355,33 @@ class AnnotationCreation extends Component {
} = this.props; } = this.props;
const { const {
title, title,
textBody, textBody,
image, image,
tags, tags,
xywh, xywh,
// svg, svg,
tstart, tstart,
tend, tend,
textEditorStateBustingKey, textEditorStateBustingKey,
konvasInformations
} = this.state; } = this.state;
console.log('submitting form', this.state); if(!this.state.svg){
this.setState({svg: await this.getSvg()}, ()=>{
this.addPath(this.state.svg);
})
}
const svg = await this.getSvg(); console.log('svg', this.state.svg);
await this.addPath(this.state.svg);
console.log('svg', svg);
const t = (tstart && tend) ? `${tstart},${tend}` : null; const t = (tstart && tend) ? `${tstart},${tend}` : null;
const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody }; const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody };
canvases.forEach(async (canvas) => { canvases.forEach((canvas) => {
const storageAdapter = config.annotation.adapter(canvas.id); const storageAdapter = config.annotation.adapter(canvas.id);
const anno = new WebAnnotation({ const anno = new WebAnnotation({
...@@ -367,8 +395,9 @@ class AnnotationCreation extends Component { ...@@ -367,8 +395,9 @@ class AnnotationCreation extends Component {
id: (annotation && annotation.id) || `${uuid()}`, id: (annotation && annotation.id) || `${uuid()}`,
image, image,
manifestId: canvas.options.resource.id, manifestId: canvas.options.resource.id,
svg,//<------ svg,
tags, tags,
konvasInformations,
}).toJson(); }).toJson();
console.log(anno); console.log(anno);
...@@ -421,10 +450,12 @@ class AnnotationCreation extends Component { ...@@ -421,10 +450,12 @@ class AnnotationCreation extends Component {
updateGeometry({ updateGeometry({
svg, svg,
xywh, xywh,
konvasInformations
}) { }) {
this.setState({ this.setState({
svg, svg,
xywh, xywh,
konvasInformations
}); });
} }
...@@ -449,7 +480,7 @@ class AnnotationCreation extends Component { ...@@ -449,7 +480,7 @@ class AnnotationCreation extends Component {
strokeWidth, strokeWidth,
closedMode, closedMode,
textBody, textBody,
shapes,
tstart, tstart,
tend, tend,
textEditorStateBustingKey, textEditorStateBustingKey,
...@@ -479,16 +510,15 @@ class AnnotationCreation extends Component { ...@@ -479,16 +510,15 @@ class AnnotationCreation extends Component {
strokeColor={strokeColor} strokeColor={strokeColor}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
closed={closedMode === 'closed'} closed={closedMode === 'closed'}
updateGeometry={this.updateGeometry} updateGeometry={this.updateGeometry}
addPath={this.addPath}
windowId={windowId} windowId={windowId}
shapes={shapes}
player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)} player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
ref={(childRef) => (this.childRef = childRef)}
/// we need to pass the width and height of the image to the annotation drawing component /// we need to pass the width and height of the image to the annotation drawing component
width={1920} width={1920}
height={1080} height={1080}
/> />
<StyledForm <StyledForm
onSubmit={this.submitForm} onSubmit={this.submitForm}
......
src/AnnotationDrawing.js
+ 9
− 87
View file @ 1bfba478
...@@ -4,72 +4,37 @@ import PropTypes from 'prop-types'; ...@@ -4,72 +4,37 @@ import PropTypes from 'prop-types';
import { OSDReferences } from '../mirador/dist/es/src/plugins/OSDReferences'; import { OSDReferences } from '../mirador/dist/es/src/plugins/OSDReferences';
import { VideosReferences } from '../mirador/dist/es/src/plugins/VideosReferences'; import { VideosReferences } from '../mirador/dist/es/src/plugins/VideosReferences';
import { v4 as uuidv4 } from 'uuid'; import { v4 as uuidv4 } from 'uuid';
import { import {
Stage, Layer, Star, Text, Circle, Rect Stage, Layer, Star, Text, Circle, Rect
, Ellipse, Transformer,Shape , Ellipse, Transformer,Shape
} from 'react-konva'; } from 'react-konva';
import { exportStageSVG } from 'react-konva-to-svg'; import { exportStageSVG } from 'react-konva-to-svg';
import ParentComponent from './shapes/ParentComponent'; import ParentComponent from './shapes/ParentComponent';
/** Create a portal with a drawing canvas and a form to fill annotations details */ /** Create a portal with a drawing canvas and a form to fill annotations details */
class AnnotationDrawing extends Component { class AnnotationDrawing extends Component {
/** */ /** */
constructor(props) { constructor(props) {
super(props); super(props);
this.paper = null; this.paper = null;
// this.addPath = this.addPath.bind(this);
this.drawKonvas = this.drawKonvas.bind(this); this.drawKonvas = this.drawKonvas.bind(this);
this.state = { this.state = {
shapes: [], shapes: [],
newShape: null, newShape: null,
currentShape: null, currentShape: null,
isDrawing: false, isDrawing: false,
svg: async () => {
// stage is the one with same windowId
const stage = window.Konva.stages.find((stage) => stage.attrs.id === this.props.windowId);
const svg = await exportStageSVG(stage);
console.log('svg',svg);
return svg;
},
}; };
this.shapeRefs = {}; this.shapeRefs = {};
this.transformerRefs = {}; this.transformerRefs = {};
} }
getData() {
const { shapes } = this.state
console.log('getData', shapes)
return {
shapes : shapes
} ;
}
onShapeClick = (shape) => { onShapeClick = (shape) => {
...@@ -82,7 +47,6 @@ class AnnotationDrawing extends Component { ...@@ -82,7 +47,6 @@ class AnnotationDrawing extends Component {
}; };
handleKeyPress = (e) => { handleKeyPress = (e) => {
...@@ -123,23 +87,14 @@ class AnnotationDrawing extends Component { ...@@ -123,23 +87,14 @@ class AnnotationDrawing extends Component {
if (unnalowedKeys.includes(e.key)) { if (unnalowedKeys.includes(e.key)) {
return; return;
} }
selectedShape.text += e.key; selectedShape.text += e.key;
// update state // update state
} }
const index = shapes.findIndex((shape) => shape.id === selectedShapeId); const index = shapes.findIndex((shape) => shape.id === selectedShapeId);
shapes[index] = selectedShape; shapes[index] = selectedShape;
this.setState({ shapes: shapes }); this.setState({ shapes: shapes });
} }
}; };
componentDidUpdate(prevProps) { componentDidUpdate(prevProps) {
...@@ -152,12 +107,7 @@ class AnnotationDrawing extends Component { ...@@ -152,12 +107,7 @@ class AnnotationDrawing extends Component {
//on dbl click //on dbl click
handleKonvasDblClick = (e) => { handleKonvasDblClick = (e) => {
const pos = e.target.getStage().getPointerPosition(); const pos = e.target.getStage().getPointerPosition();
let shape = null; let shape = null;
console.log('dbl click', this.props.activeTool); console.log('dbl click', this.props.activeTool);
switch (this.props.activeTool) { switch (this.props.activeTool) {
...@@ -261,9 +211,7 @@ class AnnotationDrawing extends Component { ...@@ -261,9 +211,7 @@ class AnnotationDrawing extends Component {
default: default:
break; break;
} }
const { newShape, shapes, currentShape } = this.state; const { newShape, shapes, currentShape } = this.state;
if (newShape) { if (newShape) {
this.setState({ this.setState({
shapes: [...shapes, newShape], shapes: [...shapes, newShape],
...@@ -272,11 +220,8 @@ class AnnotationDrawing extends Component { ...@@ -272,11 +220,8 @@ class AnnotationDrawing extends Component {
}); });
} }
}; };
handleMouseDown = (e) => { handleMouseDown = (e) => {
// Check if the current shape is a freehand object // Check if the current shape is a freehand object
if (this.state.selectedShapeId && this.state.currentShape.type === 'freehand') { if (this.state.selectedShapeId && this.state.currentShape.type === 'freehand') {
...@@ -307,21 +252,11 @@ class AnnotationDrawing extends Component { ...@@ -307,21 +252,11 @@ class AnnotationDrawing extends Component {
this.setState({ isDrawing: false }); this.setState({ isDrawing: false });
}; };
drawKonvas() { drawKonvas() {
const { shapes, newShape } = this.state; const { shapes, newShape } = this.state;
const { windowId } = this.props; const { windowId } = this.props;
// potentiellement videoRef et windowId // potentiellement videoRef et windowId
console.log('shapes', shapes)
return ( return (
<Stage <Stage
width={this.props.width || 1920} width={this.props.width || 1920}
...@@ -335,29 +270,15 @@ class AnnotationDrawing extends Component { ...@@ -335,29 +270,15 @@ class AnnotationDrawing extends Component {
onDblClick={this.handleKonvasDblClick} onDblClick={this.handleKonvasDblClick}
id={windowId} id={windowId}
> >
<ParentComponent shapes={shapes} <ParentComponent shapes={shapes}
onShapeClick={this.onShapeClick} onShapeClick={this.onShapeClick}
activeTool={this.props.activeTool} activeTool={this.props.activeTool}
selectedShapeId={this.state.selectedShapeId} selectedShapeId={this.state.selectedShapeId}
/> />
</Stage> </Stage>
); );
} }
/** */ /** */
render() { render() {
const { windowId } = this.props; const { windowId } = this.props;
...@@ -387,6 +308,7 @@ AnnotationDrawing.propTypes = { ...@@ -387,6 +308,7 @@ AnnotationDrawing.propTypes = {
strokeWidth: PropTypes.number, strokeWidth: PropTypes.number,
svg: PropTypes.func.isRequired, svg: PropTypes.func.isRequired,
updateGeometry: PropTypes.func.isRequired, updateGeometry: PropTypes.func.isRequired,
addPath: PropTypes.func.isRequired,
windowId: PropTypes.string.isRequired, windowId: PropTypes.string.isRequired,
}; };
......
src/WebAnnotation.js
+ 12
− 2
View file @ 1bfba478
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
export default class WebAnnotation { export default class WebAnnotation {
/** */ /** */
constructor({ constructor({
canvasId, id, fragsel, image, body, tags, svg, manifestId, title canvasId, id, fragsel, image, body, tags, svg, manifestId, title, konvasInformations
}) { }) {
this.title = title, this.title = title,
this.id = id; this.id = id;
...@@ -13,6 +13,7 @@ export default class WebAnnotation { ...@@ -13,6 +13,7 @@ export default class WebAnnotation {
this.svg = svg; this.svg = svg;
this.image = image; this.image = image;
this.manifestId = manifestId; this.manifestId = manifestId;
this.konvasInformations = konvasInformations
} }
/** */ /** */
...@@ -36,7 +37,14 @@ export default class WebAnnotation { ...@@ -36,7 +37,14 @@ export default class WebAnnotation {
}; };
bodies.push(textBody); bodies.push(textBody);
} }
console.log('BODY kanvasInfor',this.konvasInformations)
if(this.konvasInformations){
const konvasInformationsBody = {
konvasInformations : this.konvasInformations,
type: 'KonvasInformations'
}
bodies.push(konvasInformationsBody)
}
if (this.image) { if (this.image) {
const imgBody = { const imgBody = {
...@@ -63,6 +71,8 @@ export default class WebAnnotation { ...@@ -63,6 +71,8 @@ export default class WebAnnotation {
if (bodies.length === 1) { if (bodies.length === 1) {
return bodies[0]; return bodies[0];
} }
console.log(bodies)
return bodies; return bodies;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment