make resize handle available to extensions (df595ae3) · Commits · github_fork / Stable Diffusion Webui

.eslintrc.js

+3 −1

Original line number	Diff line number	Diff line
		@@ -90,6 +90,8 @@ module.exports = {
		// localStorage.js
		localSet: "readonly",
		localGet: "readonly",
		localRemove: "readonly"
		localRemove: "readonly",
		// resizeHandle.js
		setupResizeHandle: "writable"
		}
		};

extensions-builtin/resize-handle/style.css

deleted100644 → 0

+0 −10

Original line number	Diff line number	Diff line
		.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;
		}
		No newline at end of file

extensions-builtin/resize-handle/javascript/resize-handle.js→javascript/resizeHandle.js

+109 −0

Original line number	Diff line number	Diff line
		onUiLoaded(async() => {
		(function() {
		const GRADIO_MIN_WIDTH = 320;
		const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr';
		const PAD = 16;
		@@ -14,11 +14,7 @@ onUiLoaded(async() => {
		};

		let resizeTimer;

		const leftCols = [
		gradioApp().querySelector('#txt2img_settings'),
		gradioApp().querySelector('#img2img_settings'),
		];
		let parents = [];

		function setLeftColGridTemplate(el, width) {
		el.style.gridTemplateColumns = `${width}px 16px 1fr`;
		@@ -40,15 +36,27 @@ onUiLoaded(async() => {
		}
		}

		function setup() {
		for (const leftCol of leftCols) {
		const parent = leftCol.parentElement;
		const rightCol = parent.lastElementChild;
		function afterResize(parent) {
		if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) {
		const oldParentWidth = R.parentWidth;
		const newParentWidth = parent.offsetWidth;
		const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);

		const ratio = newParentWidth / oldParentWidth;

		if (!displayResizeHandle(parent)) {
		return;
		const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
		setLeftColGridTemplate(parent, newWidthL);

		R.parentWidth = newParentWidth;
		}
		}

		function setup(parent) {
		const leftCol = parent.firstElementChild;
		const rightCol = parent.lastElementChild;

		parents.push(parent);

		parent.style.display = 'grid';
		parent.style.gap = '0';
		parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
		@@ -66,7 +74,8 @@ onUiLoaded(async() => {
		R.leftColStartWidth = leftCol.offsetWidth;
		R.screenX = evt.screenX;
		});
		}

		afterResize(parent);
		}

		window.addEventListener('mousemove', (evt) => {
		@@ -79,28 +88,22 @@ onUiLoaded(async() => {

		window.addEventListener('mouseup', () => R.tracking = false);


		window.addEventListener('resize', () => {
		clearTimeout(resizeTimer);

		resizeTimer = setTimeout(() => {
		for (const leftCol of leftCols) {
		const parent = leftCol.parentElement;

		if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) {
		const oldParentWidth = R.parentWidth;
		const newParentWidth = parent.offsetWidth;
		const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);

		const ratio = newParentWidth / oldParentWidth;

		const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
		setLeftColGridTemplate(parent, newWidthL);

		R.parentWidth = newParentWidth;
		}
		resizeTimer = setTimeout(function() {
		for (const parent of parents) {
		afterResize(parent);
		}
		}, DEBOUNCE_TIME);
		});

		setup();
		setupResizeHandle = setup;
		})();

		onUiLoaded(function() {
		for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
		setupResizeHandle(elem);
		}
		});

modules/ui.py

+3 −3

Original line number	Diff line number	Diff line
		@@ -13,7 +13,7 @@ from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_grad

		from modules import gradio_extensons # noqa: F401
		from modules import sd_hijack, sd_models, script_callbacks, ui_extensions, deepbooru, extra_networks, ui_common, ui_postprocessing, progress, ui_loadsave, shared_items, ui_settings, timer, sysinfo, ui_checkpoint_merger, ui_prompt_styles, scripts, sd_samplers, processing, ui_extra_networks
		from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion
		from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML, InputAccordion, ResizeHandleRow
		from modules.paths import script_path
		from modules.ui_common import create_refresh_button
		from modules.ui_gradio_extensions import reload_javascript
		@@ -333,7 +333,7 @@ def create_ui():
		extra_tabs = gr.Tabs(elem_id="txt2img_extra_tabs")
		extra_tabs.__enter__()

		with gr.Tab("Generation", id="txt2img_generation") as txt2img_generation_tab, gr.Row(equal_height=False):
		with gr.Tab("Generation", id="txt2img_generation") as txt2img_generation_tab, ResizeHandleRow(equal_height=False):
		with gr.Column(variant='compact', elem_id="txt2img_settings"):
		scripts.scripts_txt2img.prepare_ui()

		@@ -549,7 +549,7 @@ def create_ui():
		extra_tabs = gr.Tabs(elem_id="img2img_extra_tabs")
		extra_tabs.__enter__()

		with gr.Tab("Generation", id="img2img_generation") as img2img_generation_tab, FormRow(equal_height=False):
		with gr.Tab("Generation", id="img2img_generation") as img2img_generation_tab, ResizeHandleRow(equal_height=False):
		with gr.Column(variant='compact', elem_id="img2img_settings"):
		copy_image_buttons = []
		copy_image_destinations = {}

modules/ui_components.py

+12 −0

Original line number	Diff line number	Diff line
		@@ -20,6 +20,18 @@ class ToolButton(FormComponent, gr.Button):
		return "button"


		class ResizeHandleRow(gr.Row):
		"""Same as gr.Row but fits inside gradio forms"""

		def __init__(self, **kwargs):
		super().__init__(**kwargs)

		self.elem_classes.append("resize-handle-row")

		def get_block_name(self):
		return "row"


		class FormRow(FormComponent, gr.Row):
		"""Same as gr.Row but fits inside gradio forms"""

Admin message