Skip to content

Commit

Permalink
Merge pull request #12723 from MMP0/dev-resize-handle-fix
Browse files Browse the repository at this point in the history
Resize handle improvements and bug fixes
  • Loading branch information
AUTOMATIC1111 authored Aug 22, 2023
2 parents 0d90064 + ed49c7c commit 7fd0ccd
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 11 deletions.
32 changes: 30 additions & 2 deletions javascript/resizeHandle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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', () => {
Expand Down
41 changes: 32 additions & 9 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 */

Expand Down Expand Up @@ -1056,14 +1061,32 @@ div.accordions > div.input-accordion.input-accordion-open{
top: 0.5em;
}

body.resizing {
cursor: col-resize !important;
}

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: 16px !important;
max-width: 16px !important;
height: 100%;
}

.resize-handle{
cursor: col-resize;
grid-column: 2 / 3;
min-width: 8px !important;
max-width: 8px !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);
}

0 comments on commit 7fd0ccd

Please sign in to comment.