qwc2/utils/ImageEditor.js

QGIS Web Client

/**
 * Copyright 2024 Sourcepole AG
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree.
 */

import Painterro from 'painterro';
import LocaleUtils from '../utils/LocaleUtils';
import '../components/widgets/style/ModalDialog.css';
export function showImageEditor(imageData, imageDataCallback) {
  // Do old-school JS rather than react portal as portal event bubbling messes up Painterro
  var modalDialogContainer = document.createElement("div");
  modalDialogContainer.className = "modal-dialog-container";
  var modalDialog = document.createElement("div");
  modalDialog.className = "modal-dialog";
  modalDialog.style.width = '80%';
  var modalDialogTitle = document.createElement("div");
  modalDialogTitle.className = "modal-dialog-title";
  var titleIcon = document.createElement("span");
  titleIcon.className = "icon icon-paint";
  modalDialogTitle.appendChild(titleIcon);
  var titleLabel = document.createElement("span");
  titleLabel.innerText = LocaleUtils.tr("imageeditor.title");
  modalDialogTitle.appendChild(titleLabel);
  var closeIcon = document.createElement("span");
  closeIcon.className = "icon icon_clickable icon-remove";
  modalDialogTitle.appendChild(closeIcon);
  modalDialog.appendChild(modalDialogTitle);
  var modalDialogBody = document.createElement("div");
  modalDialogBody.className = "modal-dialog-body";
  modalDialogBody.id = 'painterro';
  modalDialogBody.addEventListener('keypress', function (ev) {
    // Prevent i.e. +/- from triggering map zoom
    ev.stopPropagation();
  });
  modalDialog.appendChild(modalDialogBody);
  modalDialogContainer.appendChild(modalDialog);
  document.body.appendChild(modalDialogContainer);

  // eslint-disable-next-line
  window.ptro = Painterro({
    id: 'painterro',
    hiddenTools: ['open'],
    language: LocaleUtils.lang().slice(0, 2).toLowerCase(),
    onBeforeClose: function onBeforeClose(hasUnsaved, doClose) {
      if (hasUnsaved) {
        // eslint-disable-next-line
        if (confirm(LocaleUtils.tr("imageeditor.confirmclose"))) {
          doClose();
        }
      }
    },
    onClose: function onClose() {
      window.ptro.hide();
      delete window.ptro;
      // Delay to next iteration to ensure ptro event handlers have executed
      setTimeout(function () {
        document.body.removeChild(modalDialogContainer);
      }, 0);
    },
    saveHandler: function saveHandler(image, done) {
      imageDataCallback(image.asDataURL('image/jpeg'));
      done(true);
      window.ptro.hide();
      delete window.ptro;
      // Delay to next iteration to ensure ptro event handlers have executed
      setTimeout(function () {
        document.body.removeChild(modalDialogContainer);
      }, 0);
    }
  }).show(imageData);
  closeIcon.addEventListener('click', function () {
    // eslint-disable-next-line
    if (confirm(LocaleUtils.tr("imageeditor.confirmclose"))) {
      window.ptro.hide();
      delete window.ptro;
      // Delay to next iteration to ensure ptro event handlers have executed
      setTimeout(function () {
        document.body.removeChild(modalDialogContainer);
      }, 0);
    }
  });
}