From 7698e0d935ad928aa7136074148acba681ea5108 Mon Sep 17 00:00:00 2001 From: Anthony Geourjon <anthony.geourjon@tetras-libre.fr> Date: Mon, 5 Feb 2024 21:24:03 +0100 Subject: [PATCH] Refactoring saving annotation + savning in jpeg --- src/AnnotationCreationUtils.js | 14 ++++++------- src/annotationForm/AnnotationFormFooter.js | 21 ++++++++++--------- .../KonvaDrawing/KonvaUtils.js | 5 ++++- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/AnnotationCreationUtils.js b/src/AnnotationCreationUtils.js index ba25f0e..1020ca8 100644 --- a/src/AnnotationCreationUtils.js +++ b/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); }); } diff --git a/src/annotationForm/AnnotationFormFooter.js b/src/annotationForm/AnnotationFormFooter.js index 67d33a2..a72142a 100644 --- a/src/annotationForm/AnnotationFormFooter.js +++ b/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); - - closeFormCompanionWindow(); - - resetStateAfterSave(); + // 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 ( diff --git a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils.js b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils.js index 649f08c..4937b8c 100644 --- a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/KonvaUtils.js +++ b/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; } -- GitLab