Refactoring saving annotation + savning in jpeg

src/AnnotationCreationUtils.js

@@ -50,27 +50,27 @@ export function isShapesTool(activeTool) {
 }
 
 /** Save annotation in the storage adapter */
-export async function saveAnnotation(canvas, storageAdapter, receiveAnnotation, annotationToSaved, isNewAnnotation) {
-  if (isNewAnnotation) {
-    storageAdapter.update(annotationToSaved)
+export async function saveAnnotation(canvas, storageAdapter, receiveAnnotation, annotation, isNewAnnotation) {
+  if (!isNewAnnotation) {
+    storageAdapter.update(annotation)
       .then((annoPage) => {
         receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
       });
   } else {
-    storageAdapter.create(annotationToSaved)
+    storageAdapter.create(annotation)
       .then((annoPage) => {
         receiveAnnotation(canvas.id, storageAdapter.annotationPageId, annoPage);
       });
   }
 }
 
-export async function saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotationToSaved, target, isNewAnnotation) {
+export async function saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation) {
   canvases.forEach(async (canvas) => {
     // Adapt target to the canvas
     // eslint-disable-next-line no-param-reassign
-    annotationToSaved.target = `${canvas.id}#xywh=${target.xywh}&t=${target.t}`;
+    annotation.target = `${canvas.id}#xywh=${target.xywh}&t=${target.t}`;
     const storageAdapter = config.annotation.adapter(canvas.id);
-    saveAnnotation(canvas, storageAdapter, receiveAnnotation, annotationToSaved, isNewAnnotation);
+    saveAnnotation(canvas, storageAdapter, receiveAnnotation, annotation, isNewAnnotation);
   });
 }
 

src/annotationForm/AnnotationFormFooter.js

@@ -61,8 +61,7 @@ function AnnotationFormFooter({
     // const filename = await sendFile(drawingImageExport);
     // const annotationBodyImageId = fileReaderUrl + filename;
 
-    // Save jpg image of the drawing in a data url
-    const annotationBodyImageId = getKonvaAsDataURL(windowId);
+
 
     // Temporal target of the annotation
     const target = {
@@ -72,11 +71,9 @@ function AnnotationFormFooter({
 
     const annotationText = (!textBody.length && target.t) ? `${secondsToHMS(tstart)} -> ${secondsToHMS(tend)}` : textBody;
 
-    console.log('annotationBodyImageId:', annotationBodyImageId);
-
     const annotationToSaved = {
       body: {
-        id: annotationBodyImageId,
+        id: null, // Will be updated after
         type: 'Image',
         format: 'image/svg+xml',
         value: annotationText,
@@ -93,11 +90,15 @@ function AnnotationFormFooter({
 
     const isNewAnnotation = !annotation;
 
-    saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotationToSaved, target, isNewAnnotation);
-
+    // Save jpg image of the drawing in a data url
+    getKonvaAsDataURL(windowId).then((dataURL) => {
+      console.log('dataURL:', dataURL);
+      const annotation = { ...annotationToSaved };
+      annotation.body.id = dataURL
+      saveAnnotationInEachCanvas(canvases, config, receiveAnnotation, annotation, target, isNewAnnotation);
       closeFormCompanionWindow();
-
       resetStateAfterSave();
+    });
   };
 
   return (

src/annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils.js

@@ -14,7 +14,10 @@ export async function getSvg(windowId) {
 /** Export the stage as a JPG image in a data url */
 export async function getKonvaAsDataURL(windowId) {
   const stage = window.Konva.stages.find((s) => s.attrs.id === windowId);
-  const dataURL = await stage.toDataURL({ mimeType: 'image/png', quality: 1 });
+  const dataURL = stage.toDataURL({
+    mimeType: 'image/png',
+    quality: 1,
+  });
   console.log('dataURL:', dataURL);
   return dataURL;
 }