diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 6466ef89a..4afa5b6d6 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -11,6 +11,7 @@ import { api_server_textgenerationwebui, is_send_press, getTokenCount, + max_context, } from "../script.js"; @@ -331,6 +332,12 @@ function dragElement(elmnt) { } function elementDrag(e) { + let winWidth = window.innerWidth; + let winHeight = window.innerHeight; + 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)); e = e || window.event; e.preventDefault(); // calculate the new cursor position: @@ -338,9 +345,21 @@ function dragElement(elmnt) { pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; + let maxX = (draggableWidth + draggableLeft); + let maxY = (draggableHeight + draggableTop); // set the element's new position: + elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; + + //fix over/underflows: + if (elmnt.offsetTop - pos2 <= 42) { elmnt.style.top = "42px" } //42px barrier for TopBar + if (elmnt.offsetLeft - pos1 <= 0) { elmnt.style.left = "0px" } + if (maxX >= winWidth - 10) { elmnt.style.left = ((elmnt.offsetLeft - pos2) - 10 + "px") } + if (maxY >= winHeight - 10) { elmnt.style.top = ((elmnt.offsetTop - pos1) - 10 + "px") } + + //console.log("left/top: " + (elmnt.offsetLeft - pos1) + "/" + (elmnt.offsetTop - pos2) + ", win: " + winWidth + "/" + winHeight + ", max X/Y: " + maxX + "/" + maxY); + } function closeDragElement() { diff --git a/public/style.css b/public/style.css index a264bf41a..63c2d5765 100644 --- a/public/style.css +++ b/public/style.css @@ -211,6 +211,8 @@ code { /* margin: 0 auto; */ z-index: 2; resize: both; + min-height: 100px; + min-width: 100px; } #sheldheader {