persistent state for movingUI

This commit is contained in:
RossAscends
2023-06-27 13:08:02 +09:00
parent 847961861f
commit 9737fda9ae
2 changed files with 44 additions and 14 deletions

View File

@ -12,6 +12,7 @@ import {
getTokenCount,
menu_type,
max_context,
saveSettingsDebounced,
} from "../script.js";
@ -478,11 +479,12 @@ dragElement(document.getElementById("right-nav-panel"));
dragElement(document.getElementById("avatar_zoom_popup"));
dragElement(document.getElementById("WorldInfo"));
export function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
var draggableHeight, draggableWidth, draggableTop, draggableLeft;
var elmntName = $(elmnt).attr('id');
if (document.getElementById(elmnt.id + "header")) { //ex: id="sheldheader"
// if present, the header is where you move the DIV from, but this overrides everything else:
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
@ -506,17 +508,19 @@ export function dragElement(elmnt) {
function elementDrag(e) {
//disable scrollbars when dragging to prevent jitter
$("body").css("overflow", "hidden");
if (!power_user.movingUIState[elmntName]) {
power_user.movingUIState[elmntName] = {};
}
//get window size
let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
//get necessary data for calculating element footprint
let draggableHeight = parseInt(getComputedStyle(elmnt).getPropertyValue('height').slice(0, -2));
let draggableWidth = parseInt(getComputedStyle(elmnt).getPropertyValue('width').slice(0, -2));
let draggableTop = parseInt(getComputedStyle(elmnt).getPropertyValue('top').slice(0, -2));
let draggableLeft = parseInt(getComputedStyle(elmnt).getPropertyValue('left').slice(0, -2));
draggableHeight = parseInt(getComputedStyle(elmnt).getPropertyValue('height').slice(0, -2));
draggableWidth = parseInt(getComputedStyle(elmnt).getPropertyValue('width').slice(0, -2));
draggableTop = parseInt(getComputedStyle(elmnt).getPropertyValue('top').slice(0, -2));
draggableLeft = parseInt(getComputedStyle(elmnt).getPropertyValue('left').slice(0, -2));
let sheldWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--sheldWidth').slice(0, -2));
let topBarFirstX = (winWidth - sheldWidth) / 2;
let topBarLastX = topBarFirstX + sheldWidth;
@ -616,7 +620,15 @@ export function dragElement(elmnt) {
document.onmousemove = null;
//revert scrolling to normal after drag to allow recovery of vastly misplaced elements
$("body").css("overflow", "auto");
saveMovingUIState();
}
function saveMovingUIState() {
power_user.movingUIState[elmntName].top = draggableTop;
power_user.movingUIState[elmntName].left = draggableLeft;
power_user.movingUIState[elmntName].width = draggableWidth;
power_user.movingUIState[elmntName].height = draggableHeight;
saveSettingsDebounced();
}
}

View File

@ -127,6 +127,7 @@ let power_user = {
waifuMode: false,
movingUI: false,
movingUIState: {},
noShadows: false,
theme: 'Default (Dark) 1.7.1',
@ -630,6 +631,19 @@ function loadPowerUserSettings(settings, data) {
loadInstructMode();
loadMaxContextUnlocked();
switchWaifuMode();
loadMovingUIState();
console.log(power_user)
}
function loadMovingUIState() {
if (power_user.movingUIState) {
for (var elmntName of Object.keys(power_user.movingUIState)) {
var elmntState = power_user.movingUIState[elmntName];
var elmnt = $('#' + elmntName);
elmnt.css(elmntState);
}
}
}
function loadMaxContextUnlocked() {
@ -902,13 +916,15 @@ function resetMovablePanels() {
document.getElementById("right-nav-panel").style.width = '';
document.getElementById("right-nav-panel").style.margin = '';
document.getElementById("expression-holder").style.top = '';
document.getElementById("expression-holder").style.left = '';
document.getElementById("expression-holder").style.right = '';
document.getElementById("expression-holder").style.bottom = '';
document.getElementById("expression-holder").style.height = '';
document.getElementById("expression-holder").style.width = '';
document.getElementById("expression-holder").style.margin = '';
if ($("#expression-holder")) {
document.getElementById("expression-holder").style.top = '';
document.getElementById("expression-holder").style.left = '';
document.getElementById("expression-holder").style.right = '';
document.getElementById("expression-holder").style.bottom = '';
document.getElementById("expression-holder").style.height = '';
document.getElementById("expression-holder").style.width = '';
document.getElementById("expression-holder").style.margin = '';
}
document.getElementById("avatar_zoom_popup").style.top = '';
document.getElementById("avatar_zoom_popup").style.left = '';
@ -927,6 +943,8 @@ function resetMovablePanels() {
document.getElementById("WorldInfo").style.margin = '';
$('*[data-dragged="true"]').removeAttr('data-dragged');
power_user.movingUIState = {}
saveSettingsDebounced();
eventSource.emit(event_types.MOVABLE_PANELS_RESET);
}