From 8fd1558179913902bb43dd30f1270bb290f6ee83 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Wed, 23 Aug 2023 03:21:28 +0300 Subject: [PATCH 1/4] Removed the old code --- extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 0e17bb156..60057891e 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -677,9 +677,8 @@ onUiLoaded(async() => { targetElement.isExpanded = false; function autoExpand() { const canvas = document.querySelector(`${elemId} canvas[key="interface"]`); - const isMainTab = activeElement === elementIDs.inpaint || activeElement === elementIDs.inpaintSketch || activeElement === elementIDs.sketch; - - if (canvas && isMainTab) { + + if (canvas) { if (hasHorizontalScrollbar(targetElement) && targetElement.isExpanded === false) { targetElement.style.visibility = "hidden"; setTimeout(() => { From 6a87e35bef2be9dabf17e1f58cfc5b4a218dd487 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Wed, 23 Aug 2023 03:35:09 +0300 Subject: [PATCH 2/4] lint --- extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 60057891e..71a81af16 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -677,7 +677,6 @@ onUiLoaded(async() => { targetElement.isExpanded = false; function autoExpand() { const canvas = document.querySelector(`${elemId} canvas[key="interface"]`); - if (canvas) { if (hasHorizontalScrollbar(targetElement) && targetElement.isExpanded === false) { targetElement.style.visibility = "hidden"; From 32e790a47e135461e9d95eb00ff7f53d5b4367a8 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Thu, 24 Aug 2023 01:40:06 +0300 Subject: [PATCH 3/4] Fixing and improving integration --- .../canvas-zoom-and-pan/javascript/zoom.js | 58 ++++++++++++++++--- 1 file changed, 50 insertions(+), 8 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 71a81af16..ba10ff7ba 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -48,7 +48,7 @@ onUiLoaded(async() => { // Wait until opts loaded async function waitForOpts() { - for (;;) { + for (; ;) { if (window.opts && Object.keys(window.opts).length) { return window.opts; } @@ -269,7 +269,7 @@ onUiLoaded(async() => { input?.addEventListener("input", () => restoreImgRedMask(elements)); } - function applyZoomAndPan(elemId) { + function applyZoomAndPan(elemId, isExtension = true) { const targetElement = gradioApp().querySelector(elemId); if (!targetElement) { @@ -381,6 +381,10 @@ onUiLoaded(async() => { panY: 0 }; + if (isExtension) { + targetElement.style.overflow = "hidden"; + } + fixCanvas(); targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`; @@ -396,11 +400,26 @@ onUiLoaded(async() => { closeBtn.addEventListener("click", resetZoom); } + if (canvas && isExtension) { + const parentElement = targetElement.closest('[id^="component-"]'); + if ( + canvas && + parseFloat(canvas.style.width) > parentElement.offsetWidth && + parseFloat(targetElement.style.width) > parentElement.offsetWidth + ) { + fitToElement(); + return; + } + + } + if ( canvas && + !isExtension && parseFloat(canvas.style.width) > 865 && parseFloat(targetElement.style.width) > 865 ) { + console.log(parseFloat(canvas.style.width), parseFloat(targetElement.style.width)); fitToElement(); return; } @@ -472,6 +491,10 @@ onUiLoaded(async() => { targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`; toggleOverlap("on"); + if (isExtension) { + targetElement.style.overflow = "visible"; + } + return newZoomLevel; } @@ -494,7 +517,7 @@ onUiLoaded(async() => { fullScreenMode = false; elemData[elemId].zoomLevel = updateZoom( elemData[elemId].zoomLevel + - (operation === "+" ? delta : -delta), + (operation === "+" ? delta : -delta), zoomPosX - targetElement.getBoundingClientRect().left, zoomPosY - targetElement.getBoundingClientRect().top ); @@ -511,10 +534,19 @@ onUiLoaded(async() => { //Reset Zoom targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`; + let parentElement; + + if (isExtension) { + parentElement = targetElement.closest('[id^="component-"]'); + } else { + parentElement = targetElement.parentElement; + } + + // Get element and screen dimensions const elementWidth = targetElement.offsetWidth; const elementHeight = targetElement.offsetHeight; - const parentElement = targetElement.parentElement; + const screenWidth = parentElement.clientWidth; const screenHeight = parentElement.clientHeight; @@ -565,9 +597,14 @@ onUiLoaded(async() => { `${elemId} canvas[key="interface"]` ); + if (isExtension) { + targetElement.style.overflow = "visible"; + } + + if (!canvas) return; - if (canvas.offsetWidth > 862) { + if (canvas.offsetWidth > 862 || isExtension) { targetElement.style.width = (canvas.offsetWidth + 2) + "px"; } @@ -816,6 +853,11 @@ onUiLoaded(async() => { if (isMoving && elemId === activeElement) { updatePanPosition(e.movementX, e.movementY); targetElement.style.pointerEvents = "none"; + + if (isExtension) { + targetElement.style.overflow = "visible"; + } + } else { targetElement.style.pointerEvents = "auto"; } @@ -829,9 +871,9 @@ onUiLoaded(async() => { gradioApp().addEventListener("mousemove", handleMoveByKey); } - applyZoomAndPan(elementIDs.sketch); - applyZoomAndPan(elementIDs.inpaint); - applyZoomAndPan(elementIDs.inpaintSketch); + applyZoomAndPan(elementIDs.sketch, false); + applyZoomAndPan(elementIDs.inpaint, false); + applyZoomAndPan(elementIDs.inpaintSketch, false); // Make the function global so that other extensions can take advantage of this solution const applyZoomAndPanIntegration = async(id, elementIDs) => { From fa68d66c982436c066487b3bb82b3a2e6c329fe4 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Thu, 24 Aug 2023 01:42:37 +0300 Subject: [PATCH 4/4] remove console.log --- extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js | 1 - 1 file changed, 1 deletion(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index ba10ff7ba..234238910 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -419,7 +419,6 @@ onUiLoaded(async() => { parseFloat(canvas.style.width) > 865 && parseFloat(targetElement.style.width) > 865 ) { - console.log(parseFloat(canvas.style.width), parseFloat(targetElement.style.width)); fitToElement(); return; }