Implementation:AUTOMATIC1111 Stable diffusion webui Resize Handle
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Layout, Responsive_Design |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Implements draggable resize handles for two-column layouts, allowing users to adjust the width ratio between left and right panels.
Description
This JavaScript module provides an IIFE-based resize handle system for elements with the "resize-handle-row" class. The setup function converts a flex-based two-column layout into a CSS Grid layout with a 16px handle column between the left and right panels. It creates a draggable handle div that responds to mouse and touch events. During drag operations, the left column width is calculated based on the cursor delta from the initial position, constrained by minimum widths (GRADIO_MIN_WIDTH of 320px for flexible columns, or half the flex-basis for fixed-width columns). The module handles responsive behavior: on narrow viewports (below 2x GRADIO_MIN_WIDTH + padding), it falls back to a flex layout and hides the resize handle. Window resize events trigger proportional recalculation of column widths. Double-click (or double-tap on touch devices, detected via DOUBLE_TAP_DELAY of 200ms) resets the columns to their original proportions. A debounced resize timer (DEBOUNCE_TIME of 100ms) prevents excessive recalculations. The tracking state is managed through a shared R object to coordinate mouse/touch event handlers across setup instances.
Usage
Resize handles appear automatically between two-column layouts in the web UI (such as the prompt/output split in txt2img and img2img tabs). Users drag the handle left or right to adjust column widths. Double-click the handle to reset to default proportions. On mobile or narrow viewports, the columns stack vertically and the handle is hidden.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/resizeHandle.js
- Lines: 1-205
Signature
// IIFE-scoped functions:
function setLeftColGridTemplate(el, width)
function displayResizeHandle(parent)
function afterResize(parent)
function setup(parent)
// Global functions:
function setupAllResizeHandles()
// setupResizeHandle (global, assigned from IIFE setup)
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// setupResizeHandle and setupAllResizeHandles are available globally
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| parent | HTMLElement | Yes | A container element with class "resize-handle-row" containing two child columns |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Converts flex layout to CSS Grid, inserts a .resize-handle div, and attaches drag event listeners |
Usage Examples
// Resize handles are set up automatically on UI load for all .resize-handle-row elements.
// To manually set up a resize handle on a new element:
setupResizeHandle(document.getElementById('my-two-column-layout'));
// To re-initialize all resize handles (e.g., after dynamic content changes):
setupAllResizeHandles();
// The handle supports:
// - Mouse drag to resize columns
// - Touch drag on mobile devices
// - Double-click to reset to original proportions
// - Double-tap on touch devices
// - Responsive fallback to stacked layout on narrow screens