fix zoomedAvatar resize and movement

public/index.html

@@ -6275,11 +6275,11 @@
     </div>
     <div id="zoomed_avatar_template" class="template_element">
         <div class="zoomed_avatar">
-            <div class="zoomed_avatar_container">
             <div class="panelControlBar flex-container">
                 <div class="fa-fw fa-solid fa-grip drag-grabber"></div>
                 <div class="fa-fw fa-solid fa-circle-xmark dragClose" id="closeZoom"></div>
             </div>
+            <div class="zoomed_avatar_container">
                 <img class="zoomed_avatar_img" src="" data-izoomify-url="" data-izoomify-magnify="1.8" data-izoomify-duration="300" alt="">
             </div>
         </div>

public/script.js

@@ -10251,15 +10251,6 @@ jQuery(async function () {
                 $(`.zoomed_avatar[forChar="${charname}"] .dragClose`).hide();
             }
 
-            $('.zoomed_avatar').on('mouseup', (e) => {
-                if (e.target.closest('.drag-grabber') || e.button !== 0) {
-                    return;
-                }
-                $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {
-                    $(`.zoomed_avatar[forChar="${charname}"]`).remove();
-                });
-            });
-
             $('.zoomed_avatar, .zoomed_avatar .dragClose').on('click touchend', (e) => {
                 if (e.target.closest('.dragClose')) {
                     $(`.zoomed_avatar[forChar="${charname}"]`).fadeOut(animation_duration, () => {

public/scripts/RossAscends-mods.js

@@ -424,7 +424,7 @@ function restoreUserInput() {
 
     const userInput = LoadLocal('userInput');
     if (userInput) {
-        $('#send_textarea').val(userInput)[0].dispatchEvent(new Event('input', { bubbles:true }));
+        $('#send_textarea').val(userInput)[0].dispatchEvent(new Event('input', { bubbles: true }));
     }
 }
 
@@ -436,8 +436,6 @@ const saveUserInputDebounced = debounce(saveUserInput);
 
 // Make the DIV element draggable:
 
-// THIRD UPDATE, prevent resize window breaks and smartly handle saving
-
 export function dragElement(elmnt) {
     var hasBeenDraggedByUser = false;
     var isMouseDown = false;
@@ -479,8 +477,8 @@ export function dragElement(elmnt) {
         }
         //console.debug(left + width, winWidth, hasBeenDraggedByUser, isMouseDown)
         const style = getComputedStyle(target); //use computed values because not all CSS are set by default
-        height = target.offsetHeight;
+        height = parseInt(style.height) //target.offsetHeight;
-        width = target.offsetWidth;
+        width = parseInt(style.width) //target.offsetWidth;
         top = parseInt(style.top);
         left = parseInt(style.left);
         right = parseInt(style.right);
@@ -494,19 +492,20 @@ export function dragElement(elmnt) {
         const topbarstyle = getComputedStyle(topbar);
         topBarFirstX = parseInt(topbarstyle.marginInline);
         topBarLastY = parseInt(topbarstyle.height);
-
+        /*
-        /*console.log(`
+                console.log(`
+                Observer
                  winWidth: ${winWidth}, winHeight: ${winHeight}
-        sheldWidth: ${sheldWidth}
+                 sheldWidth: sheldWidth
                  X: ${$(elmnt).css('left')}
                  Y: ${$(elmnt).css('top')}
                  MaxX: ${maxX}, MaxY: ${maxY}
                  height: ${height}
                  width: ${width}
                  Topbar 1st X: ${topBarFirstX}
-        TopBar lastX: ${topBarLastX}
+                 TopBar lastX: topBarLastX
-        `);*/
+                 `);
-
+        */
 
         //prepare an empty poweruser object for the item being altered if we don't have one already
         if (!power_user.movingUIState[elmntName]) {
@@ -524,24 +523,38 @@ export function dragElement(elmnt) {
         }
 
         //handle resizing
-        if (!hasBeenDraggedByUser && isMouseDown) {
+        if (!hasBeenDraggedByUser && isMouseDown) { //if user is dragging the resize handle (not in header)
-            console.debug('saw resize, NOT header drag');
+            //console.debug('saw resize, NOT header drag');
+            let imgHeight, imgWidth, imageAspectRatio;
+            let containerAspectRatio = elmnt.height() / elmnt.width();
+
+            //force the zoomed avatar container to always be the same aspect ratio as the inner image
+            if ($(elmnt).attr('id').startsWith('zoomFor_')) {
+                let zoomedAvatarImage = $(elmnt).find('.zoomed_avatar_img');
+                imgHeight = zoomedAvatarImage.height();
+                imgWidth = zoomedAvatarImage.width();
+                imageAspectRatio = imgHeight / imgWidth;
+            }
+
+            if (containerAspectRatio !== imageAspectRatio) {
+                elmnt.css('height', imgHeight);
+            }
 
             //prevent resizing offscreen
             if (top + elmnt.height() >= winHeight) {
-                console.debug('resizing height to prevent offscreen');
+                //console.debug('resizing height to prevent offscreen');
                 elmnt.css('height', winHeight - top - 1 + 'px');
             }
 
             if (left + elmnt.width() >= winWidth) {
-                console.debug('resizing width to prevent offscreen');
+                //console.debug('resizing width to prevent offscreen');
                 elmnt.css('width', winWidth - left - 1 + 'px');
             }
 
             //prevent resizing from top left into the top bar
             if (top < topBarLastY && maxX >= topBarFirstX && left <= topBarFirstX
             ) {
-                console.debug('prevent topbar underlap resize');
+                //console.debug('prevent topbar underlap resize');
                 elmnt.css('width', width - 1 + 'px');
             }
 
@@ -647,19 +660,20 @@ export function dragElement(elmnt) {
         // and will defaults to shrink to min value of 100px set in CSS file
         elmnt.css('height', height);
         elmnt.css('width', width);
-        /*
+
-                console.log(`
+        /*console.log(`
-                             winWidth: ${winWidth}, winHeight: ${winHeight}
+elementDrag:
-                             sheldWidth: ${sheldWidth}
+winWidth: ${winWidth}, winHeight: ${winHeight}
-                             X: ${$(elmnt).css('left')}
+sheldWidth: sheldWidth
-                             Y: ${$(elmnt).css('top')}
+X: ${$(elmnt).css('left')}
-                             MaxX: ${maxX}, MaxY: ${maxY}
+Y: ${$(elmnt).css('top')}
-                             height: ${height}
+MaxX: ${maxX}, MaxY: ${maxY}
-                             width: ${width}
+height: ${height}
-                             Topbar 1st X: ${topBarFirstX}
+width: ${width}
-                             TopBar lastX: ${topBarLastX}
+Topbar 1st X: ${topBarFirstX}
-                             `);
+TopBar lastX: topBarLastX
-                             */
+`);*/
+
 
         return;
     }