aboutsummaryrefslogtreecommitdiff
path: root/extensions-builtin
diff options
context:
space:
mode:
authorAUTOMATIC1111 <16777216c@gmail.com>2023-08-21 08:48:22 +0300
committerAUTOMATIC1111 <16777216c@gmail.com>2023-08-21 08:48:46 +0300
commitdf595ae3135ef12c135f43ef2a0f792708aab4b3 (patch)
tree5f488f2f5cb5148b1ca1fbf050f71759824d657d /extensions-builtin
parentb4d21e7113384bbb592bbd79bca06aeb9e4d640a (diff)
make resize handle available to extensions
Diffstat (limited to 'extensions-builtin')
-rw-r--r--extensions-builtin/resize-handle/javascript/resize-handle.js106
-rw-r--r--extensions-builtin/resize-handle/style.css10
2 files changed, 0 insertions, 116 deletions
diff --git a/extensions-builtin/resize-handle/javascript/resize-handle.js b/extensions-builtin/resize-handle/javascript/resize-handle.js
deleted file mode 100644
index a07a01d2..00000000
--- a/extensions-builtin/resize-handle/javascript/resize-handle.js
+++ /dev/null
@@ -1,106 +0,0 @@
-onUiLoaded(async() => {
- 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;
-
- const leftCols = [
- gradioApp().querySelector('#txt2img_settings'),
- gradioApp().querySelector('#img2img_settings'),
- ];
-
- 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 setup() {
- for (const leftCol of leftCols) {
- const parent = leftCol.parentElement;
- const rightCol = parent.lastElementChild;
-
- if (!displayResizeHandle(parent)) {
- return;
- }
-
- 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;
- });
- }
- }
-
- 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(() => {
- 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;
- }
- }
- }, DEBOUNCE_TIME);
- });
-
- setup();
-});
diff --git a/extensions-builtin/resize-handle/style.css b/extensions-builtin/resize-handle/style.css
deleted file mode 100644
index 0e18267a..00000000
--- a/extensions-builtin/resize-handle/style.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.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