From df595ae3135ef12c135f43ef2a0f792708aab4b3 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Mon, 21 Aug 2023 08:48:22 +0300 Subject: make resize handle available to extensions --- javascript/resizeHandle.js | 109 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 javascript/resizeHandle.js (limited to 'javascript/resizeHandle.js') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js new file mode 100644 index 00000000..71023f9f --- /dev/null +++ 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); + } +}); -- cgit v1.2.1 From aed52d163245649edb36feb1b2699b9d25e8672d Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Mon, 21 Aug 2023 12:40:27 -0400 Subject: Reset columns on resize handle dblclick --- javascript/resizeHandle.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'javascript/resizeHandle.js') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 71023f9f..5edecfcc 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -75,6 +75,8 @@ R.screenX = evt.screenX; }); + resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS); + afterResize(parent); } -- cgit v1.2.1 From 0998256fc5e040fa1c1d5826bd858ab3838a3f26 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:45:34 +0900 Subject: Prevent text selection and cursor changes --- javascript/resizeHandle.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) (limited to 'javascript/resizeHandle.js') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 5edecfcc..c0c8cbff 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -66,6 +66,11 @@ 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; @@ -75,20 +80,37 @@ R.screenX = evt.screenX; }); - resizeHandle.addEventListener('dblclick', () => parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS); + 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', () => R.tracking = false); + window.addEventListener('mouseup', (evt) => { + if (R.tracking) { + evt.preventDefault(); + evt.stopPropagation(); + + R.tracking = false; + + document.body.classList.remove('resizing'); + } + }); window.addEventListener('resize', () => { -- cgit v1.2.1 From 96edfb560b32af2abcf4398d277e92a2d2b1032c Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 17:19:26 +0900 Subject: Limit mouse detection to primary button only --- javascript/resizeHandle.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'javascript/resizeHandle.js') diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index c0c8cbff..2fd3c4d2 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -66,6 +66,8 @@ parent.insertBefore(resizeHandle, rightCol); resizeHandle.addEventListener('mousedown', (evt) => { + if (evt.button !== 0) return; + evt.preventDefault(); evt.stopPropagation(); @@ -91,6 +93,8 @@ } window.addEventListener('mousemove', (evt) => { + if (evt.button !== 0) return; + if (R.tracking) { evt.preventDefault(); evt.stopPropagation(); @@ -102,6 +106,8 @@ }); window.addEventListener('mouseup', (evt) => { + if (evt.button !== 0) return; + if (R.tracking) { evt.preventDefault(); evt.stopPropagation(); -- cgit v1.2.1