make resize handle available to extensions

2025-08-03 10:50:23 +00:00 · 2023-08-21 08:48:22 +03:00
parent b4d21e7113
commit df595ae313
7 changed files with 139 additions and 120 deletions
--- a/javascript/resizeHandle.js
+++ b/javascript/resizeHandle.js
@@ -0,0 +1,109 @@
+(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) => {
+            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;
+            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('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);
+    }
+});