diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js index a2940d7d54dd8f93b35f69ff0bd814f8f64175aa..c1c59417161942a6c4ef39ef3a91d02ca54e5c97 100644 --- a/capsule-prototype/js/online-script.js +++ b/capsule-prototype/js/online-script.js @@ -1041,39 +1041,60 @@ function closePasteModal() { $('#paste_modal').hide(); $('#paste_modal_content') function openImageEdition(message, tag) { $('#edit_pic_modal').show(); let keyDoc = tag.document.key; + let annotationEdit = $('#annotation_img_edit')[0]; $('#annotation_img_edit').attr('src', tag.getDownloadLink(true)); - let markerArea = new markerjs2.MarkerArea($('#annotation_img_edit')[0]); - let imageState; - if (tag.getMetadata("Rekall->MarkerjsState") && tag.getMetadata("Rekall->MarkerjsState").trim().length){ - imageState = JSON.parse(atob(tag.getMetadata("Rekall->MarkerjsState"))); + function loadImage(url, elem) { + return new Promise((resolve, reject) => { + elem.onload = () => resolve(elem); + elem.onerror = reject; + elem.src = url; + }); } + function openMakerArea() { + // eslint-disable-next-line no-empty + let markerArea = new markerjs2.MarkerArea($('#annotation_img_edit')[0]); + let imageState; - markerArea.targetRoot = document.getElementById('edit_pic_modal'); - markerArea.addEventListener('render', (event) => { - imageState = markerArea.getState(); - markerArea.close(true); - tag.setMetadata("Rekall->MarkerjsState", btoa(JSON.stringify(imageState))); - - let b64img = event.dataUrl; - let data = b64img.match(/data:([a-z]+)\/([a-z]+);base64,(.*)/); - let type = data[1], subtype = data[2], b64data = data[3]; - let bin_str = atob(b64data); - let n = b64data.length; - let uar = new Uint8Array(n); - while (n--) uar[n] = bin_str.charCodeAt(n); - let file = new File([uar], keyDoc.substr(1), {type: type+'/'+subtype}); - $('#left_menu_item_btn_addfile').files = [file]; - uploadFiles([file], {'edited': 1}, function(){$('#popupImg').attr('src', tag.getDownloadLink());}); - setMetaFromDom(tag.document.key, "Rekall->MarkerjsState", tag.getMetadata('Rekall->MarkerjsState')); - }); + if (tag.getMetadata("Rekall->MarkerjsState") && tag.getMetadata("Rekall->MarkerjsState").trim().length) { + imageState = JSON.parse(atob(tag.getMetadata("Rekall->MarkerjsState"))); + } - markerArea.addEventListener('close', () => { - $('#edit_pic_modal').hide(); - }); - markerArea.renderAtNaturalSize = true; - markerArea.show(); - if (imageState) - markerArea.restoreState(imageState); + markerArea.targetRoot = document.getElementById('edit_pic_modal'); + markerArea.addEventListener('render', (event) => { + imageState = markerArea.getState(); + markerArea.close(true); + tag.setMetadata("Rekall->MarkerjsState", btoa(JSON.stringify(imageState))); + + let b64img = event.dataUrl; + let data = b64img.match(/data:([a-z]+)\/([a-z]+);base64,(.*)/); + let type = data[1], subtype = data[2], b64data = data[3]; + let bin_str = atob(b64data); + let n = b64data.length; + let uar = new Uint8Array(n); + while (n--) uar[n] = bin_str.charCodeAt(n); + let file = new File([uar], keyDoc.substr(1), {type: type + '/' + subtype}); + $('#left_menu_item_btn_addfile').files = [file]; + uploadFiles([file], {'edited': 1}, function () { + $('#popupImg').attr('src', tag.getDownloadLink()); + }); + setMetaFromDom(tag.document.key, "Rekall->MarkerjsState", tag.getMetadata('Rekall->MarkerjsState')); + }); + + markerArea.addEventListener('close', () => { + $('#edit_pic_modal').hide(); + }); + markerArea.renderAtNaturalSize = true; + markerArea.show(); + if (imageState) + markerArea.restoreState(imageState); + } + + async function changeImageSrc() { + await loadImage(tag.getDownloadLink(true), annotationEdit); + openMakerArea(); + } + // noinspection JSIgnoredPromiseFromCall + changeImageSrc(); }