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);
         }