Merge pull request #12723 from MMP0/dev-resize-handle-fix

Resize handle improvements and bug fixes
This commit is contained in:
AUTOMATIC1111 2023-08-22 15:25:28 +03:00 committed by GitHub
commit 7fd0ccdffc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 12 deletions

View File

@ -66,6 +66,13 @@
parent.insertBefore(resizeHandle, rightCol);
resizeHandle.addEventListener('mousedown', (evt) => {
if (evt.button !== 0) return;
evt.preventDefault();
evt.stopPropagation();
document.body.classList.add('resizing');
R.tracking = true;
R.parent = parent;
R.parentWidth = parent.offsetWidth;
@ -75,20 +82,41 @@
R.screenX = evt.screenX;
});
resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS);
resizeHandle.addEventListener('dblclick', (evt) => {
evt.preventDefault();
evt.stopPropagation();
parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
});
afterResize(parent);
}
window.addEventListener('mousemove', (evt) => {
if (evt.button !== 0) return;
if (R.tracking) {
evt.preventDefault();
evt.stopPropagation();
const delta = R.screenX - evt.screenX;
const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
setLeftColGridTemplate(R.parent, leftColWidth);
}
});
window.addEventListener('mouseup', () => R.tracking = false);
window.addEventListener('mouseup', (evt) => {
if (evt.button !== 0) return;
if (R.tracking) {
evt.preventDefault();
evt.stopPropagation();
R.tracking = false;
document.body.classList.remove('resizing');
}
});
window.addEventListener('resize', () => {

View File

@ -142,6 +142,11 @@ div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdo
overflow: visible !important;
}
/* align-items isn't enough and elements may overflow in Safari. */
.unequal-height {
align-content: flex-start;
}
/* general styled components */
@ -1056,14 +1061,32 @@ div.accordions > div.input-accordion.input-accordion-open{
top: 0.5em;
}
body.resizing {
cursor: col-resize !important;
}
.resize-handle{
body.resizing * {
pointer-events: none !important;
}
body.resizing .resize-handle {
pointer-events: initial !important;
}
.resize-handle {
position: relative;
cursor: col-resize;
grid-column: 2 / 3;
min-width: 8px !important;
max-width: 8px !important;
min-width: 16px !important;
max-width: 16px !important;
height: 100%;
border-left: 1px dashed var(--border-color-primary);
user-select: none;
margin-left: 8px;
}
.resize-handle::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 7.5px;
border-left: 1px dashed var(--border-color-primary);
}