File size: 2,425 Bytes
db14b86 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
const MIN_WIDTH = 240;
const addDraggable = (tabId: string) => {
const settings = document.querySelector(`#${tabId}_settings`) as HTMLDivElement;
const checkDraggableLine = document.querySelector(
`#tab_${tabId} .draggable-line`,
) as HTMLDivElement;
if (!settings || checkDraggableLine) return;
settings.style.minWidth = `min(${MIN_WIDTH}px, 100%)`;
const lineWrapper = document.createElement('div');
lineWrapper.classList.add('draggable-line');
settings.after(lineWrapper);
const container: HTMLElement | any = settings.parentElement;
container.classList.add('draggable-container');
let results: HTMLDivElement = document.querySelector(`#${tabId}_results`) as HTMLDivElement;
if (!results) return;
if (tabId === 'extras') results = results.parentElement as HTMLDivElement;
results.style.minWidth = `${MIN_WIDTH}px`;
let linePosition = 50;
settings.style.flexBasis = `${linePosition}%`;
results.style.flexBasis = `${100 - linePosition}%`;
let isDragging = false;
lineWrapper.addEventListener('mousedown', (e) => {
isDragging = true;
e.preventDefault();
});
document.addEventListener('mousemove', (event) => {
if (!isDragging) return;
const tab = document.querySelector(`#tab_${tabId}`) as HTMLDivElement;
if (!tab) return;
let offsetX = tab.offsetLeft;
let parent = tab.offsetParent as HTMLDivElement;
while (parent) {
offsetX += parent.offsetLeft;
parent = parent.offsetParent as HTMLDivElement;
}
const containerWidth = container.offsetWidth;
const mouseX = event.clientX;
const linePosition = ((mouseX - offsetX) / containerWidth) * 100;
if (linePosition <= (MIN_WIDTH / containerWidth) * 100) return;
if (linePosition >= (1 - MIN_WIDTH / containerWidth) * 100) return;
settings.style.flexBasis = `${linePosition}%`;
results.style.flexBasis = `${100 - linePosition}%`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
};
export default () => {
console.time('🤯 [layout] inject - DraggablePanel');
addDraggable('txt2img');
addDraggable('img2img');
const extrasSetting = document.querySelector('#extras_results')?.parentElement
?.previousElementSibling as HTMLDivElement;
if (extrasSetting) {
extrasSetting.id = 'extras_settings';
addDraggable('extras');
}
console.timeEnd('🤯 [layout] inject - DraggablePanel');
};
|