diff --git a/src/AnnotationCreationUtils.js b/src/AnnotationCreationUtils.js index ba25f0e6d8b245234ae4512f15b3f569982d6d53..1020ca8d3e3f673019cc7246045da037784b9c26 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 67d33a24556b03d84bcd8a1c9ce109f89479cdeb..a72142a748a07cbe3c9f45b380365b8ec343e9f0 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 649f08c97584324793049994cb5d3678b5f68a85..4937b8cdab5afcb1a30e748e72857b0409eb62df 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; }