wip-wip-positionement-annot

src/AnnotationCreation.js

@@ -74,11 +74,13 @@ function AnnotationCreation(props) {
         if (Array.isArray(props.annotation.target.selector)) {
           props.annotation.target.selector.forEach((selector) => {
             if (selector.type === 'SvgSelector') {
+              console.log('SVG SELECTOR ', selector.value);
               annoState.svg = selector.value;
             } else if (selector.type === 'FragmentSelector') {
               // TODO proper fragment selector extraction
               annoState.xywh = geomFromAnnoTarget(selector.value);
               [tstart, tend] = timeFromAnnoTarget(selector.value);
+              console.log('FRAGMENT SELECTOR', selector.value);
             }
           });
         } else {
@@ -86,9 +88,13 @@ function AnnotationCreation(props) {
           // TODO does this happen ? when ? where are fragments selectors ?
         }
       } else if (typeof props.annotation.target === 'string') {
+        console.log('props.annotation.target', props.annotation.target);
         annoState.xywh = geomFromAnnoTarget(props.annotation.target);
         [tstart, tend] = timeFromAnnoTarget(props.annotation.target);
       }
+      console.log('props.annotation.target', props.annotation.target);
+
+      console.log('ANNOSTATE', annoState);
     }
 
     // If we don't have tstart setted, we are creating a new annotation.
@@ -231,12 +237,10 @@ function AnnotationCreation(props) {
   };
 
   /** */
-  const updateGeometry = ({ svg, xywh }) => {
-    setState((prevState) => ({
-      ...prevState,
-      svg,
-      xywh,
-    }));
+  const updateGeometry = ({ xywh }) => {
+    console.log(xywh)
+    setState({...state, xywh: xywh})
+    console.log(xywh)
   };
 
   /** */
@@ -269,8 +273,11 @@ function AnnotationCreation(props) {
      * This image will be put in overlay of the iiif media
      */
   const getSvg = async () => {
+    console.log('ENTER GET SVG');
     const stage = window.Konva.stages.find((s) => s.attrs.id === props.windowId);
+    console.log('STAGE', stage);
     const svg = await exportStageSVG(stage, false); // TODO clean
+    console.log('svg', svg);
     return svg;
   };
 
@@ -300,6 +307,8 @@ function AnnotationCreation(props) {
      */
   const submitForm = async (e) => {
     e.preventDefault();
+
+    console.log('ENTER SUBMIT FORM');
     // TODO Possibly problem of syncing
     // TODO Improve this code
     // If we are in edit mode, we have the transformer on the stage saved in the annotation
@@ -308,7 +317,6 @@ function AnnotationCreation(props) {
         ...prevState,
         activeTool: 'cursor',
       }));
-      return;
     }
 
     const {
@@ -353,6 +361,7 @@ function AnnotationCreation(props) {
       konvaThing,
     } = state;
     // TODO rename variable for better comprenhension
+    console.log('CALL GET SVG INTO SUBMIT FORM');
     const svg = await getSvg();
     const t = (tstart && tend) ? `${tstart},${tend}` : null;
     const body = { value: (!textBody.length && t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody };
@@ -373,7 +382,7 @@ function AnnotationCreation(props) {
         tags,
         konvaThing,
       }).toJson();
-
+      console.log('anno', anno);
       if (annotation) {
         storageAdapter.update(anno)
           .then((annoPage) => {

src/AnnotationCreationUtils.js

@@ -12,10 +12,13 @@ export function timeFromAnnoTarget(annotarget) {
 /** Extract xywh from annotation target */
 export 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) {
+    console.log('QUE DALLE')
     return '';
   }
+  console.log(r[1])
   return r[1];
 }
 

src/WebAnnotation.js

@@ -23,7 +23,7 @@ export default class WebAnnotation {
       motivation: 'commenting',
       target: this.target(),
       type: 'Annotation',
-      konvaThing: this.konvaThing
+      konvaThing: this.konvaThing,
     };
   }
 

src/annotationForm/AnnotationDrawing.js

@@ -217,6 +217,10 @@ function AnnotationDrawing(props) {
           setIsDrawing(true);
           setShapes([...shapes, shape]);
           setCurrentShape(shape);
+          console.log('UPDATE GEO')
+            const xywh = {x: shape.x, y: shape.y, w: shape.width, h: shape.height}
+            console.log(xywh)
+          props.updateGeometry(xywh)
           break;
         case SHAPES_TOOL.ELLIPSE:
           shape = {

src/annotationForm/AnnotationFormOverlay/AnnotationFormOverlayToolOptions.js

@@ -62,9 +62,6 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
     popoverLineWeightAnchorEl: null,
   });
 
-  useEffect(()=>{
-    //TODO: This useEffect fix the bug on konva to svg but may be useless
-  },[])
   // Set unused default color to avoid error on render
   const currentColor = toolOptions.currentColorType ? rgbaToObj(toolState[toolOptions.currentColorType]) : 'rgba(255, 0, 0, 0.5)';
 
@@ -131,6 +128,9 @@ function AnnotationFormOverlayToolOptions({ updateToolState, toolState }) {
 
   /** Update color : fillColor or strokeColor */
   const updateColor = (color) => {
+    console.log('color', color)
+    console.log('color.rgb', color.rgb)
+    console.log(window.Konva.stages)
     updateToolState({
       ...toolState,
       [toolOptions.currentColorType]: objToRgba(color.rgb),