diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js index 71bfb08943de105de53996891ebed5da21ce00d4..26ee301eb5dfbaf22be817d5fb1afee51dedf981 100644 --- a/src/AnnotationCreation.js +++ b/src/AnnotationCreation.js @@ -52,6 +52,7 @@ function timeFromAnnoTarget(annotarget) { /** Extract xywh from annotation target */ function geomFromAnnoTarget(annotarget) { console.info('TODO proper xywh extraction from: ', annotarget); + console.log(annotarget) const r = /xywh=((-?[0-9]+,?)+)/.exec(annotarget); if (!r || r.length !== 3) { return ''; @@ -66,6 +67,7 @@ class AnnotationCreation extends Component { super(props); const annoState = {}; + console.log(props) if (props.annotation) { // // annotation body @@ -89,6 +91,7 @@ class AnnotationCreation extends Component { // annoState.textBody = props.annotation.body.value; // why text body here ??? annoState.image = props.annotation.body; }else if(props.annotation.body.type === 'KonvasInformations'){ + console.log('ENTERING KONVAS INFO') annoState.shapes = props.annotation.body console.log(annoState.shapes) } @@ -113,6 +116,7 @@ class AnnotationCreation extends Component { annoState.xywh = geomFromAnnoTarget(props.annotation.target); [annoState.tstart, annoState.tend] = timeFromAnnoTarget(props.annotation.target); } + console.log('props', this.props.annotation) console.log('annoState',annoState) } @@ -313,11 +317,33 @@ class AnnotationCreation extends Component { childRef = React.createRef(); + //TODO: Renommer correctement cette fonction + //Cette fonction récupère les information spaciale et de forme des shapes konvas en vu de les sauvegarder async addPath(svg){ const{ xywh } = this.props; + console.log('wywh',xywh); const thisSvg = svg; const { shapes } = await this.childRef.getData(); + const x = 0 + const y = 0 + const width = 0 + const height = 0 +//TODO: Ne fonctionne que s'il n'y a qu'une seule shape + if(shapes[0]){ + const width = shapes[0].x + const height = shapes[0].y + } + + console.log('xywh', x, y , width, height) + this.setState({xywh: [ + Math.floor(x), + Math.floor(y), + Math.floor(width), + Math.floor(height), + ].join(','),}) + console.log('state xywh', this.state.xywh) + const konvasInformations = { shapes: shapes, svg: thisSvg, @@ -344,7 +370,7 @@ async addPath(svg){ } console.log('svg', this.state.svg); - +//Cette fonction DOIT être situé avant les props et les states afin de fonctionné correctement await this.addPath(this.state.svg); const { @@ -376,8 +402,6 @@ async addPath(svg){ console.log('svg', this.state.svg); - await this.addPath(this.state.svg); - const t = (tstart && tend) ? `${tstart},${tend}` : null; const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody }; @@ -450,7 +474,7 @@ async addPath(svg){ updateGeometry({ svg, xywh, - konvasInformations + konvasInformations }) { this.setState({ svg, diff --git a/src/AnnotationDrawing.js b/src/AnnotationDrawing.js index 97ce00714959768bb582bf00b97e4805cdd4f4bc..7bd882c47047b67f60f6bc700b94fa311a97d613 100644 --- a/src/AnnotationDrawing.js +++ b/src/AnnotationDrawing.js @@ -29,6 +29,7 @@ class AnnotationDrawing extends Component { } getData() { + console.log('props annotation drawing',this.props.shapes) const { shapes } = this.state console.log('getData', shapes) return { @@ -104,6 +105,14 @@ class AnnotationDrawing extends Component { } } + componentDidMount() { + // console.log('ENTER COMPONENT DID MOUNT') + // console.log(this.state.shapes) + // console.log(this.props.shapes) + // this.state.shapes = this.props.shapes; + // console.log(this.state.shapes) + } + //on dbl click handleKonvasDblClick = (e) => { diff --git a/src/WebAnnotation.js b/src/WebAnnotation.js index d66e27b186ae015d2cc3e2e456e56c427ce81400..d6f65e99edae0e683cb9bc29c3e2bf4bc7c54ab4 100644 --- a/src/WebAnnotation.js +++ b/src/WebAnnotation.js @@ -7,9 +7,12 @@ export default class WebAnnotation { this.title = title, this.id = id; this.canvasId = canvasId; + // temps et spacialisation de l'annotation this.fragsel = fragsel; + //infos sur l'annotation image ? Durée ? Spacialisation ? Titre ? Texte ? this.body = body; this.tags = tags; + //shapes de présentation Konvas au format svg this.svg = svg; this.image = image; this.manifestId = manifestId; @@ -40,8 +43,8 @@ export default class WebAnnotation { console.log('BODY kanvasInfor',this.konvasInformations) if(this.konvasInformations){ const konvasInformationsBody = { + type: 'KonvasInformations', konvasInformations : this.konvasInformations, - type: 'KonvasInformations' } bodies.push(konvasInformationsBody) } @@ -100,12 +103,14 @@ export default class WebAnnotation { }); } target.selector = selectors.length === 1 ? selectors[0] : selectors; + console.log('target',target) return target; } /** */ source() { let source = this.canvasId; + console.log('source:', source) if (this.manifest) { source = { id: this.canvasId, diff --git a/src/shapes/ParentComponent.js b/src/shapes/ParentComponent.js index a57324b5fbe4d6105a4b3f14cf13d092959912dc..9f0dc1cab4f1f7e4cc57cd379f4b45e8ba19dbf3 100644 --- a/src/shapes/ParentComponent.js +++ b/src/shapes/ParentComponent.js @@ -50,6 +50,7 @@ class ParentComponent extends React.Component { let selectedShape = null; //if length is 1 and selected shape is null + if (shapes.length === 1 && !selectedShapeId) { selected = true; selid = shapes[0].id; @@ -127,7 +128,7 @@ class ParentComponent extends React.Component { ); break; case 'ellipse': - + return ( <EllipseNode @@ -179,7 +180,7 @@ class ParentComponent extends React.Component { onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null} // onDragEnd={this.handleDragEnd(shape.id)} // Add this line onDblClick={this.handleShapeDblClick} - + /> ); break; diff --git a/src/shapes/TextNode.js b/src/shapes/TextNode.js index f7c7250a84d2940c01b12855a5be2d3cf304669a..7f88841be6d82729acdd778a19fab3e63a45f66a 100644 --- a/src/shapes/TextNode.js +++ b/src/shapes/TextNode.js @@ -27,7 +27,6 @@ class TextNode extends React.Component { if (this.trRef.current) { this.trRef.current.nodes([this.shapeRef.current]); this.trRef.current.getLayer().batchDraw(); - // add event listener for key down // this.shapeRef.current.addEventListener('keydown', this.handleKeyDown); }