make resize handle available to extensions

.eslintrc.js

@@ -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

-.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

-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,35 +36,48 @@ 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]);
 
-            if (!displayResizeHandle(parent)) {
-                return;
-            }
+            const ratio = newParentWidth / oldParentWidth;
 
-            parent.style.display = 'grid';
-            parent.style.gap = '0';
-            parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
-
-            const resizeHandle = document.createElement('div');
-            resizeHandle.classList.add('resize-handle');
-            parent.insertBefore(resizeHandle, rightCol);
-
-            resizeHandle.addEventListener('mousedown', (evt) => {
-                R.tracking = true;
-                R.parent = parent;
-                R.parentWidth = parent.offsetWidth;
-                R.handle = resizeHandle;
-                R.leftCol = leftCol;
-                R.leftColStartWidth = leftCol.offsetWidth;
-                R.screenX = evt.screenX;
-            });
+            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;
+
+        const resizeHandle = document.createElement('div');
+        resizeHandle.classList.add('resize-handle');
+        parent.insertBefore(resizeHandle, rightCol);
+
+        resizeHandle.addEventListener('mousedown', (evt) => {
+            R.tracking = true;
+            R.parent = parent;
+            R.parentWidth = parent.offsetWidth;
+            R.handle = resizeHandle;
+            R.leftCol = leftCol;
+            R.leftColStartWidth = leftCol.offsetWidth;
+            R.screenX = evt.screenX;
+        });
+
+        afterResize(parent);
+    }
+
     window.addEventListener('mousemove', (evt) => {
         if (R.tracking) {
             const delta = R.screenX - evt.screenX;
@@ -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

@@ -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

@@ -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"""
 

style.css

@@ -1055,3 +1055,15 @@ div.accordions > div.input-accordion.input-accordion-open{
     position: sticky;
     top: 0.5em;
 }
+
+
+.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;
+}