From 8a00a2e9c7ef258067740826c5efb2f17b9fe04a Mon Sep 17 00:00:00 2001
From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr>
Date: Mon, 5 Feb 2024 11:39:42 +0100
Subject: [PATCH] WIP annotation svg saved on external tool

---
 src/AnnotationCreation.js                     |   7 +-
 src/AnnotationCreationUtils.js                | 127 +++++++++---------
 .../AnnotationFormOverlay/Accordion.js        |  19 ++-
 3 files changed, 74 insertions(+), 79 deletions(-)

diff --git a/src/AnnotationCreation.js b/src/AnnotationCreation.js
index 65e0758..fdf8747 100644
--- a/src/AnnotationCreation.js
+++ b/src/AnnotationCreation.js
@@ -65,8 +65,8 @@ function AnnotationCreation(props) {
           } else if (body.type === 'TextualBody') {
             annoState.textBody = body.value;
           } else if (body.type === 'Image') {
-            // annoState.textBody = body.value; // why text body here ???
-            annoState.image = body;
+            annoState.textBody = body.value; // why text body here ???
+            //annoState.image = body;
           } else if (body.type === 'AnnotationTitle') {
             annoState.title = body;
           }
@@ -74,7 +74,7 @@ function AnnotationCreation(props) {
       } else if (props.annotation.body.type === 'TextualBody') {
         annoState.textBody = props.annotation.body.value;
       } 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;
       }
       //
@@ -335,7 +335,6 @@ function AnnotationCreation(props) {
       tstart,
       tend,
       image,
-      konvaThing,
     } = state;
     // TODO rename variable for better comprenhension
     const svg = await getSvg(props.windowId);
diff --git a/src/AnnotationCreationUtils.js b/src/AnnotationCreationUtils.js
index 9cff8af..e92fd9d 100644
--- a/src/AnnotationCreationUtils.js
+++ b/src/AnnotationCreationUtils.js
@@ -1,7 +1,10 @@
-import {exportStageSVG} from "react-konva-to-svg";
-import WebAnnotation from "./WebAnnotation";
-import {v4 as uuid} from "uuid";
+import { exportStageSVG } from 'react-konva-to-svg';
+import { v4 as uuid } from 'uuid';
 import axios from 'axios';
+import WebAnnotation from './WebAnnotation';
+
+//const fileUploaderUrl = 'https://scene-uploads.tetras-libre.fr/upload';
+const fileUploaderUrl = 'http://localhost:3000/upload';
 
 /** Extract time information from annotation target */
 export function timeFromAnnoTarget(annotarget) {
@@ -44,7 +47,7 @@ export const SHAPES_TOOL = {
 
 export function isShapesTool(activeTool) {
   // Find if active tool in the list of overlay tools. I want a boolean in return
-  return Object.values(SHAPES_TOOL).find((tool) => tool === activeTool) ;
+  return Object.values(SHAPES_TOOL).find((tool) => tool === activeTool);
 }
 
 /**
@@ -56,77 +59,71 @@ export async function getSvg(windowId) {
   const svg = await exportStageSVG(stage, false); // TODO clean
   console.log('SVG:', svg);
   return svg;
-};
-
-
-const dumbAnnotation = {
-      "id": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas/annotation/1",
-      "type": "Annotation",
-      "motivation": "commenting",
-      "body": {
-        "id": "https://files.tetras-libre.fr/dev/Hakanai/media/02_HKN-couv.jpg",
-        "type": "Image",
-        "format": "image/jpg",
-        "value": "Test image annotation"
-      },
-      "target": "https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,301,400&t=0,1000"
-    }
-  ;
-
-export function saveAnnotation(canvases, config, receiveAnnotation, annotation, body, t, xywh, image, drawingStateSerialized, svg, tags){
-  // TODO promises not handled. Use promiseAll ?
-
+}
 
-    canvases.forEach(async (canvas) => {
+export function saveAnnotation(canvases, config, receiveAnnotation, annotation, body, t, xywh, image, drawingStateSerialized, svg, tags) {
+  const dumbAnnotation = {
+    type: 'Annotation',
+    motivation: 'commenting',
+    body: {
+      id: 'https://files.tetras-libre.fr/dev/Hakanai/media/02_HKN-couv.jpg',
+      type: 'Image',
+      format: 'image/jpg',
+    },
+    target: 'https://preview.iiif.io/cookbook/master/recipe/0003-mvm-video/canvas#xywh=0,0,301,400&t=0,1000',
+  };
+  console.log('Send file :', svg);
+  const filename = sendFile(svg);
+
+  canvases.forEach(async (canvas) => {
     const storageAdapter = config.annotation.adapter(canvas.id);
-    // const anno = new WebAnnotation({
-    //   body,
-    //   canvasId: canvas.id,
-    //   fragsel: {
-    //     t,
-    //     xywh,
-    //   },
-    //   id: (annotation && annotation.id) || `${uuid()}`,
-    //   image,
-    //   drawingStateSerialized,
-    //   manifestId: canvas.options.resource.id,
-    //   svg,
-    //   tags,
-    // }).toJson();
-
-    const anno = dumbAnnotation;
-    anno.drawingState = drawingStateSerialized;
-    anno.body.value = body.value;
+    const anno = {
+      body: {
+        id: filename,
+        type: 'Image',
+        format: 'image/jpg',
+        value: body.value,
+      },
+      drawingState: drawingStateSerialized,
+      id: (annotation && annotation.id) || `${uuid()}`,
+      motivation: 'commenting',
+      type: 'Annotation',
+    };
 
     if (annotation) {
       storageAdapter.update(anno)
-          .then((annoPage) => {
-            receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
-          });
+        .then((annoPage) => {
+          receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
+        });
     } else {
       storageAdapter.create(anno)
-          .then((annoPage) => {
-            receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
-          });
+        .then((annoPage) => {
+          receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
+        });
     }
   });
 }
 
-const sendFile = async () => {
-    const fileContent = 'Hello, this is a test file';
-    const blob = new Blob([fileContent], { type: 'text/plain' });
+const sendFile = async (fileContent) => {
+  const blob = new Blob([fileContent], {type: 'image/svg+xml'});
 
-    const formData = new FormData();
-    formData.append('file', blob);
+  const formData = new FormData();
+  formData.append('file', blob);
+  formData.append('filename', filename);
 
-    try {
-        const response = await axios.post('http://localhost:3001/upload', formData, {
-            headers: {
-                'Content-Type': 'multipart/form-data',
-            },
-        });
-        console.log('File Uploaded', response.data);
-    } catch (error) {
-        console.error('Error uploading file:', error);
-    }
-}
+
+
+  try {
+    const response = await axios.post(fileUploaderUrl, formData, {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Cache-Control': 'no-cache',
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+    console.log('File Uploaded', response.data);
+    return response.data.file.filename;
+  } catch (error) {
+    console.error('Error uploading file:', error);
+  }
+};
diff --git a/src/annotationForm/AnnotationFormOverlay/Accordion.js b/src/annotationForm/AnnotationFormOverlay/Accordion.js
index 4bbc08b..27f4f4e 100644
--- a/src/annotationForm/AnnotationFormOverlay/Accordion.js
+++ b/src/annotationForm/AnnotationFormOverlay/Accordion.js
@@ -22,17 +22,16 @@ function AccordionShapes({ shapes, deleteShape, currentShapeId }) {
           </AccordionSummary>
           <AccordionDetails>
             <ul>
-              {console.log(shape)}
               {Object.keys(shape).sort().map((key) => (
-                  <>
-                    { key !== 'lines' && key !== 'image'  && (
-                      <li key={key}>
-                        {key}
-                        :
-                        {shape[key]}
-                      </li>
-                    )}
-                  </>
+                <>
+                  { key !== 'lines' && key !== 'image' && (
+                  <li key={key}>
+                    {key}
+                    :
+                    {shape[key]}
+                  </li>
+                  )}
+                </>
               ))}
             </ul>
             <Button
-- 
GitLab