Draggable VN sprites. Fix layering

public/script.js

@@ -427,6 +427,7 @@ export const event_types = {
     GENERATION_STOPPED: 'generation_stopped',
     SETTINGS_UPDATED: 'settings_updated',
     GROUP_UPDATED: 'group_updated',
+    MOVABLE_PANELS_RESET: 'movable_panels_reset',
 }
 
 export const eventSource = new EventEmitter();

public/scripts/RossAscends-mods.js

@@ -450,7 +450,7 @@ dragElement(document.getElementById("WorldInfo"));
 
 
 
-function dragElement(elmnt) {
+export function dragElement(elmnt) {
 
     var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
     if (document.getElementById(elmnt.id + "header")) { //ex: id="sheldheader"
@@ -504,7 +504,7 @@ function dragElement(elmnt) {
         pos3 = e.clientX;   //new mouse X
         pos4 = e.clientY;   //new mouse Y
 
-
+        elmnt.setAttribute('data-dragged', 'true');
 
         //fix over/underflows:
 

public/scripts/extensions/expressions/index.js

@@ -1,5 +1,5 @@
 import { callPopup, eventSource, event_types, getRequestHeaders, saveSettingsDebounced } from "../../../script.js";
-import { deviceInfo } from "../../RossAscends-mods.js";
+import { deviceInfo, dragElement } from "../../RossAscends-mods.js";
 import { getContext, getApiUrl, modules, extension_settings, ModuleWorkerWrapper, doExtrasFetch } from "../../extensions.js";
 import { power_user } from "../../power-user.js";
 import { onlyUnique, debounce } from "../../utils.js";
@@ -143,8 +143,11 @@ async function visualNovelSetCharacterSprites(container, name, expression) {
             expressionImage.toggleClass('hidden', noSprites);
         } else {
             const template = $('#expression-holder').clone();
+            template.attr('id',  `expression-${avatar}`);
             template.attr('data-avatar', avatar);
+            template.find('.drag-grabber').attr('id', `expression-${avatar}header`);
             $('#visual-novel-wrapper').append(template);
+            dragElement(template[0]);
             template.toggleClass('hidden', noSprites);
             setImage(template.find('img'), defaultSpritePath || '');
             const fadeInPromise = new Promise(resolve => {
@@ -164,9 +167,9 @@ async function visualNovelUpdateLayers(container) {
     const context = getContext();
     const group = context.groups.find(x => x.id == context.groupId);
     const members = group.members;
-    const recentMessages = context.chat.map(x => x.original_avatar).filter(onlyUnique);
+    const recentMessages = context.chat.map(x => x.original_avatar).filter(x => x).reverse().filter(onlyUnique);
     const filteredMembers = members.filter(x => !group.disabled_members.includes(x));
-    const layerIndices = filteredMembers.slice().sort((a, b) => recentMessages.indexOf(a) - recentMessages.indexOf(b));
+    const layerIndices = filteredMembers.slice().sort((a, b) => recentMessages.indexOf(b) - recentMessages.indexOf(a));
 
     const setLayerIndicesPromises = [];
 
@@ -201,6 +204,13 @@ async function visualNovelUpdateLayers(container) {
 
     images.sort(sortFunction).each((index, current) => {
         const element = $(current);
+
+        // skip repositioning of dragged elements
+        if (element.data('dragged')) {
+            currentPosition += imagesWidth[index];
+            return;
+        }
+
         const avatar = element.data('avatar');
         const layerIndex = layerIndices.indexOf(avatar);
         element.css('z-index', layerIndex);
@@ -765,5 +775,6 @@ async function onClickExpressionDelete(event) {
             $('#visual-novel-wrapper').empty();
         }
     });
+    eventSource.on(event_types.MOVABLE_PANELS_RESET, updateVisualNovelModeDebounced);
     eventSource.on(event_types.GROUP_UPDATED, updateVisualNovelModeDebounced);
 })();

public/scripts/extensions/expressions/style.css

@@ -27,9 +27,9 @@
     visibility: hidden !important;
 }
 
-#visual-novel-wrapper img.expression {
+/*#visual-novel-wrapper img.expression {
     object-fit: cover;
-}
+}*/
 
 .expression-holder {
     min-width: 100px;

public/scripts/power-user.js

@@ -9,6 +9,8 @@ import {
     getRequestHeaders,
     substituteParams,
     updateVisibleDivs,
+    eventSource,
+    event_types,
 } from "../script.js";
 import { favsToHotswap } from "./RossAscends-mods.js";
 import {
@@ -836,6 +838,9 @@ function resetMovablePanels() {
     document.getElementById("WorldInfo").style.height = '';
     document.getElementById("WorldInfo").style.width = '';
     document.getElementById("WorldInfo").style.margin = '';
+
+    $('*[data-dragged="true"]').removeAttr('data-dragged');
+    eventSource.emit(event_types.MOVABLE_PANELS_RESET);
 }
 
 $(document).ready(() => {