From ef0ff6b04a2ca677fd39194b890829c2372cb3dd Mon Sep 17 00:00:00 2001
From: Sebastien Curt <sebastien.curt@tetras-libre.fr>
Date: Wed, 4 May 2022 12:32:11 +0200
Subject: [PATCH] Fix don't open image edition until image is loaded
---
capsule-prototype/js/online-script.js | 79 +++++++++++++++++----------
1 file changed, 50 insertions(+), 29 deletions(-)
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index a2940d7..c1c5941 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();
}
--
GitLab