resizeHandle.js

(function() {
    const GRADIO_MIN_WIDTH = 320;
    const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr';
    const PAD = 16;
    const DEBOUNCE_TIME = 100;

    const R = {
        tracking: false,
        parent: null,
        parentWidth: null,
        leftCol: null,
        leftColStartWidth: null,
        screenX: null,
    };

    let resizeTimer;
    let parents = [];

    function setLeftColGridTemplate(el, width) {
        el.style.gridTemplateColumns = `${width}px 16px 1fr`;
    }

    function displayResizeHandle(parent) {
        if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
            parent.style.display = 'flex';
            if (R.handle != null) {
                R.handle.style.opacity = '0';
            }
            return false;
        } else {
            parent.style.display = 'grid';
            if (R.handle != null) {
                R.handle.style.opacity = '100';
            }
            return true;
        }
    }

    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;

            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) => {
            evt.preventDefault();
            evt.stopPropagation();

            document.body.classList.add('resizing');

            R.tracking = true;
            R.parent = parent;
            R.parentWidth = parent.offsetWidth;
            R.handle = resizeHandle;
            R.leftCol = leftCol;
            R.leftColStartWidth = leftCol.offsetWidth;
            R.screenX = evt.screenX;
        });

        resizeHandle.addEventListener('dblclick', (evt) => {
            evt.preventDefault();
            evt.stopPropagation();

            parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
        });

        afterResize(parent);
    }

    window.addEventListener('mousemove', (evt) => {
        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', (evt) => {
        if (R.tracking) {
            evt.preventDefault();
            evt.stopPropagation();

            R.tracking = false;

            document.body.classList.remove('resizing');
        }
    });


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

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

    setupResizeHandle = setup;
})();

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