diff --git a/public/script.js b/public/script.js index 21cd67744..09ca5ec24 100644 --- a/public/script.js +++ b/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(); diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index c8188bdf3..6bb378939 100644 --- a/public/scripts/RossAscends-mods.js +++ b/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: diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index 9be0bbd12..e4f01e326 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/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); })(); diff --git a/public/scripts/extensions/expressions/style.css b/public/scripts/extensions/expressions/style.css index 51b330f21..f0b8ed3c7 100644 --- a/public/scripts/extensions/expressions/style.css +++ b/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; diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js index d8ad93162..f2c701c5c 100644 --- a/public/scripts/power-user.js +++ b/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(() => {