Public/stable-diffusion-webui-ux
1
0
Fork 0
mirror of https://github.com/anapnoe/stable-diffusion-webui-ux.git synced 2026-09-18 16:55:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Split View Resizer Added

Browse Source
This commit is contained in:
anapnoe
2023-02-06 01:55:53 +02:00
parent 59b44f6b41
commit bd431065b4
3 changed files with 162 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/ui.js
+47 -54
View File
@@ -288,71 +288,64 @@ onUiUpdate(function(){
*/
gradioApp().querySelectorAll('[id *= "sub-group"]').forEach(function(elem){
elem.classList.add("sub-group");
//console.log(elem.id);
gradioApp().querySelectorAll('[id $= "sub-group"]').forEach(function(elem){
elem.classList.add("sub-group");
})
gradioApp().querySelectorAll('#img2img_prompt textarea, #txt2img_prompt textarea').forEach(function(elem){
/* resizable textarea */
gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function(elem){
elem.classList.add("input-text");
elem.classList.remove("gr-text-input", "gr-box");
})
/* coming soon split view resize
const resizer = gradioApp().getElementById('handler');
const leftSide = resizer.previousElementSibling;
const rightSide = resizer.nextElementSibling;
const container = gradioApp().getElementById('tab_txt2img');
/* split view resize */
var x = 0;
var y = 0;
var leftWidth = 0;
function mouseMoveHandler(e) {
resizer.style.cursor = 'col-resize';
container.style.cursor = 'col-resize';
const dx = e.clientX - x;
const dy = e.clientY - y;
const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
leftSide.style.flexBasis = `${newLeftWidth}%`;
leftSide.style.userSelect = 'none';
leftSide.style.pointerEvents = 'none';
rightSide.style.userSelect = 'none';
rightSide.style.pointerEvents = 'none';
console.log("Move");
gradioApp().querySelectorAll('#txt2img_splitter, #img2img_splitter').forEach((elem) => {
};
elem.addEventListener("mousedown", function(e) {
function mouseUpHandler() {
resizer.style.removeProperty('cursor');
container.style.removeProperty('cursor');
leftSide.style.removeProperty('user-select');
leftSide.style.removeProperty('pointer-events');
rightSide.style.removeProperty('user-select');
rightSide.style.removeProperty('pointer-events');
container.removeEventListener('mousemove', mouseMoveHandler);
container.removeEventListener('mouseup', mouseUpHandler);
console.log("Up");
};
let resizer = e.currentTarget;
let leftSide = resizer.previousElementSibling;
let rightSide = resizer.nextElementSibling;
let container = resizer.parentElement;
let x = e.clientX;
let y = e.clientY;
let leftWidth = leftSide.getBoundingClientRect().width;
function mouseMoveHandler(e) {
resizer.style.cursor = 'col-resize';
container.style.cursor = 'col-resize';
const dx = e.clientX - x;
const dy = e.clientY - y;
const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
leftSide.style.flexBasis = `${newLeftWidth}%`;
leftSide.style.userSelect = 'none';
leftSide.style.pointerEvents = 'none';
rightSide.style.userSelect = 'none';
rightSide.style.pointerEvents = 'none';
}
function mouseUpHandler() {
resizer.style.removeProperty('cursor');
container.style.removeProperty('cursor');
leftSide.style.removeProperty('user-select');
leftSide.style.removeProperty('pointer-events');
rightSide.style.removeProperty('user-select');
rightSide.style.removeProperty('pointer-events');
container.removeEventListener('mousemove', mouseMoveHandler);
container.removeEventListener('mouseup', mouseUpHandler);
}
container.addEventListener('mousemove', mouseMoveHandler);
container.addEventListener('mouseup', mouseUpHandler);
function mouseDownHandler(e) {
x = e.clientX;
y = e.clientY;
leftWidth = leftSide.getBoundingClientRect().width;
container.addEventListener('mousemove', mouseMoveHandler);
container.addEventListener('mouseup', mouseUpHandler);
console.log("Down");
};
// Attach the handler
resizer.addEventListener('mousedown', mouseDownHandler);
*/
})
})
})