Merge pull request #12723 from MMP0/dev-resize-handle-fix (7fd0ccdf) · Commits · github_fork / Stable Diffusion Webui

javascript/resizeHandle.js

+30 −2

Original line number	Diff line number	Diff line
		@@ -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', () => {

+32 −9

Original line number	Diff line number	Diff line
		@@ -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;
		}

		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%;
		}

		.resize-handle::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 7.5px;
		border-left: 1px dashed var(--border-color-primary);
		user-select: none;
		margin-left: 8px;
		}