From 0e0bd0d3d941ce1b273f5d7bc0aa020fc9f71e81 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Tue, 25 Jun 2024 02:25:38 +0300
Subject: [PATCH] Update char avatar crop. Remove old cropper

---
 public/script.js | 46 +++++++++-------------------------------------
 public/style.css | 10 ++--------
 2 files changed, 11 insertions(+), 45 deletions(-)

diff --git a/public/script.js b/public/script.js
index e276d0af2..03be886e3 100644
--- a/public/script.js
+++ b/public/script.js
@@ -228,7 +228,7 @@ import { appendFileContent, hasPendingFileAttachment, populateFileAttachment, de
 import { initPresetManager } from './scripts/preset-manager.js';
 import { evaluateMacros } from './scripts/macros.js';
 import { currentUser, setUserControls } from './scripts/user.js';
-import { POPUP_TYPE, callGenericPopup, fixToastrForDialogs } from './scripts/popup.js';
+import { POPUP_TYPE, Popup, callGenericPopup, fixToastrForDialogs } from './scripts/popup.js';
 import { renderTemplate, renderTemplateAsync } from './scripts/templates.js';
 import { ScraperManager } from './scripts/scrapers.js';
 import { SlashCommandParser } from './scripts/slash-commands/SlashCommandParser.js';
@@ -525,7 +525,7 @@ let dialogueResolve = null;
 let dialogueCloseStop = false;
 export let chat_metadata = {};
 export let streamingProcessor = null;
-export let crop_data = undefined;
+let crop_data = undefined;
 let is_delete_mode = false;
 let fav_ch_checked = false;
 let scrollLock = false;
@@ -5754,17 +5754,20 @@ async function read_avatar_load(input) {
             create_save.avatar = input.files;
         }
 
+        crop_data = undefined;
         const file = input.files[0];
         const fileData = await getBase64Async(file);
 
         if (!power_user.never_resize_avatars) {
-            $('#dialogue_popup').addClass('large_dialogue_popup wide_dialogue_popup');
-            const croppedImage = await callPopup(getCropPopup(fileData), 'avatarToCrop');
+            const dlg = new Popup('Set the crop position of the avatar image', POPUP_TYPE.CROP, '', { cropImage: fileData });
+            const croppedImage = await dlg.show();
+
             if (!croppedImage) {
                 return;
             }
 
-            $('#avatar_load_preview').attr('src', croppedImage);
+            crop_data = dlg.cropData;
+            $('#avatar_load_preview').attr('src', String(croppedImage));
         } else {
             $('#avatar_load_preview').attr('src', fileData);
         }
@@ -5807,13 +5810,6 @@ async function read_avatar_load(input) {
     }
 }
 
-export function getCropPopup(src) {
-    return `<h3>Set the crop position of the avatar image and click Accept to confirm.</h3>
-            <div id='avatarCropWrap'>
-                <img id='avatarToCrop' src='${src}'>
-            </div>`;
-}
-
 export function getThumbnailUrl(type, file) {
     return `/thumbnail?type=${type}&file=${encodeURIComponent(file)}`;
 }
@@ -7122,9 +7118,7 @@ function onScenarioOverrideRemoveClick() {
  */
 export function callPopup(text, type, inputValue = '', { okButton, rows, wide, wider, large, allowHorizontalScrolling, allowVerticalScrolling, cropAspect } = {}) {
     function getOkButtonText() {
-        if (['avatarToCrop'].includes(popup_type)) {
-            return okButton ?? 'Accept';
-        } else if (['text', 'alternate_greeting', 'char_not_selected'].includes(popup_type)) {
+        if (['text', 'alternate_greeting', 'char_not_selected'].includes(popup_type)) {
             $dialoguePopupCancel.css('display', 'none');
             return okButton ?? 'Ok';
         } else if (['delete_extension'].includes(popup_type)) {
@@ -7165,22 +7159,6 @@ export function callPopup(text, type, inputValue = '', { okButton, rows, wide, w
         $dialoguePopupInput.trigger('focus');
     }
 
-    if (popup_type == 'avatarToCrop') {
-        // unset existing data
-        crop_data = undefined;
-
-        $('#avatarToCrop').cropper({
-            aspectRatio: cropAspect ?? 2 / 3,
-            autoCropArea: 1,
-            viewMode: 2,
-            rotatable: false,
-            crop: function (event) {
-                crop_data = event.detail;
-                crop_data.want_resize = !power_user.never_resize_avatars;
-            },
-        });
-    }
-
     $shadowPopup.transition({
         opacity: 1,
         duration: animation_duration,
@@ -9179,12 +9157,6 @@ jQuery(async function () {
             $('#dialogue_popup').removeClass('wide_dialogue_popup');
         }, animation_duration);
 
-        //      $("#shadow_popup").css("opacity:", 0.0);
-
-        if (popup_type == 'avatarToCrop') {
-            dialogueResolve($('#avatarToCrop').data('cropper').getCroppedCanvas().toDataURL('image/jpeg'));
-        }
-
         if (popup_type == 'del_chat') {
             //close past chat popup
             $('#select_chat_cross').trigger('click');
diff --git a/public/style.css b/public/style.css
index b87f32077..da3b29c9f 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4154,19 +4154,13 @@ h5 {
     grid-template-columns: 340px auto;
 }
 
-#avatarCropWrap,
 .popup-crop-wrap {
     margin: 10px auto;
-    max-height: 90%;
+    max-height: 75vh;
+    max-height: 75svh;
     max-width: 100%;
 }
 
-.popup-crop-wrap {
-    max-height: 75vh;
-    max-height: 75svh;
-}
-
-#avatarToCrop,
 .popup-crop-wrap img {
     max-width: 100%;
     /* This rule is very important, please do not ignore this! */