Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modularity: Extracted key functionalities (getImageTargetElement, get… #55

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Modularity: Extracted key functionalities (getImageTargetElement, get… #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions html/extra-networks-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<div class='card' style={style} onclick={card_clicked} data-name="{name}" {sort_keys}>
{background_image}
<div class="button-row">
{metadata_button}
{edit_button}
</div>
<div class='actions'>
<div class='additional'>
<span style="display:none" class='search_term{search_only}'>{search_term}</span>
</div>
<span class='name'>{name}</span>
<span class='description'>{description}</span>
</div>
<div class="card" style="{style}" onclick="{card_clicked}" data-name="{name}" {sort_keys}>
{background_image}
<div class="button-row">
{metadata_button}
{edit_button}
</div>
<div class="actions">
<div class="additional">
<span style="display:none" class="search_term {search_only}">{search_term}</span>
</div>
<span class="name">{name}</span>
<span class="description">{description}</span>
</div>
</div>
180 changes: 81 additions & 99 deletions javascript/aspectRatioOverlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,95 @@

let currentWidth = null;
let currentHeight = null;
let arFrameTimeout = setTimeout(function() {}, 0);

function dimensionChange(e, is_width, is_height) {

if (is_width) {
currentWidth = e.target.value * 1.0;
}
if (is_height) {
currentHeight = e.target.value * 1.0;
}

var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";

if (!inImg2img) {
return;
}

var targetElement = null;

var tabIndex = get_tab_index('mode_img2img');
if (tabIndex == 0) { // img2img
targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
} else if (tabIndex == 1) { //Sketch
targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
} else if (tabIndex == 2) { // Inpaint
targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
} else if (tabIndex == 3) { // Inpaint sketch
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
}


if (targetElement) {
let arFrameTimeout = null;

var arPreviewRect = gradioApp().querySelector('#imageARPreview');
if (!arPreviewRect) {
arPreviewRect = document.createElement('div');
arPreviewRect.id = "imageARPreview";
gradioApp().appendChild(arPreviewRect);
}
// Handle changes in dimensions and update preview rectangle accordingly
function dimensionChange(event, isWidth, isHeight) {
// Update current dimensions
if (isWidth) currentWidth = parseFloat(event.target.value);
if (isHeight) currentHeight = parseFloat(event.target.value);

// Check if in the "img2img" tab
const inImg2img = gradioApp().querySelector("#tab_img2img")?.style.display === "block";
if (!inImg2img || !currentWidth || !currentHeight) return;

const targetElement = getImageTargetElement();
if (!targetElement) return;

var viewportOffset = targetElement.getBoundingClientRect();

var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);

var scaledx = targetElement.naturalWidth * viewportscale;
var scaledy = targetElement.naturalHeight * viewportscale;

var cleintRectTop = (viewportOffset.top + window.scrollY);
var cleintRectLeft = (viewportOffset.left + window.scrollX);
var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight / 2);
var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth / 2);

var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
var arscaledx = currentWidth * arscale;
var arscaledy = currentHeight * arscale;

var arRectTop = cleintRectCentreY - (arscaledy / 2);
var arRectLeft = cleintRectCentreX - (arscaledx / 2);
var arRectWidth = arscaledx;
var arRectHeight = arscaledy;

arPreviewRect.style.top = arRectTop + 'px';
arPreviewRect.style.left = arRectLeft + 'px';
arPreviewRect.style.width = arRectWidth + 'px';
arPreviewRect.style.height = arRectHeight + 'px';

clearTimeout(arFrameTimeout);
arFrameTimeout = setTimeout(function() {
arPreviewRect.style.display = 'none';
}, 2000);
const arPreviewRect = getOrCreatePreviewRect();
updatePreviewRectangle(targetElement, arPreviewRect);
}

arPreviewRect.style.display = 'block';
// Get target element based on current tab index
function getImageTargetElement() {
const tabIndex = get_tab_index('mode_img2img');
const selectors = [
'#img2img_image div[data-testid=image] img', // img2img
'#img2img_sketch div[data-testid=image] img', // Sketch
'#img2maskimg div[data-testid=image] img', // Inpaint
'#inpaint_sketch div[data-testid=image] img' // Inpaint sketch
];
return gradioApp().querySelector(selectors[tabIndex]);
}

// Get or create the AR preview rectangle
function getOrCreatePreviewRect() {
let arPreviewRect = gradioApp().querySelector('#imageARPreview');
if (!arPreviewRect) {
arPreviewRect = document.createElement('div');
arPreviewRect.id = "imageARPreview";
gradioApp().appendChild(arPreviewRect);
}

return arPreviewRect;
}

// Update position and size of the AR preview rectangle
function updatePreviewRectangle(targetElement, arPreviewRect) {
const { top, left, width, height } = targetElement.getBoundingClientRect();
const viewportScale = Math.min(width / targetElement.naturalWidth, height / targetElement.naturalHeight);

// Calculate AR rectangle dimensions and position
const arScale = Math.min((targetElement.naturalWidth * viewportScale) / currentWidth, (targetElement.naturalHeight * viewportScale) / currentHeight);
const arRectWidth = currentWidth * arScale;
const arRectHeight = currentHeight * arScale;
const arRectTop = top + window.scrollY + (height / 2) - (arRectHeight / 2);
const arRectLeft = left + window.scrollX + (width / 2) - (arRectWidth / 2);

// Apply styles to preview rectangle
Object.assign(arPreviewRect.style, {
display: 'block',
top: `${arRectTop}px`,
left: `${arRectLeft}px`,
width: `${arRectWidth}px`,
height: `${arRectHeight}px`
});

// Hide the preview rectangle after a delay
clearTimeout(arFrameTimeout);
arFrameTimeout = setTimeout(() => arPreviewRect.style.display = 'none', 2000);
}

onAfterUiUpdate(function() {
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
if (arPreviewRect) {
arPreviewRect.style.display = 'none';
// Initialize input watchers after UI updates
function initializeInputWatchers() {
const arPreviewRect = gradioApp().querySelector('#imageARPreview');
if (arPreviewRect) arPreviewRect.style.display = 'none';

const tabImg2img = gradioApp().querySelector("#tab_img2img");
if (tabImg2img && tabImg2img.style.display === "block") {
const inputs = gradioApp().querySelectorAll('input');
inputs.forEach(input => {
const isWidth = input.parentElement.id === "img2img_width";
const isHeight = input.parentElement.id === "img2img_height";

if ((isWidth || isHeight) && !input.classList.contains('scrollwatch')) {
input.addEventListener('input', e => dimensionChange(e, isWidth, isHeight));
input.classList.add('scrollwatch');
}

if (isWidth) currentWidth = parseFloat(input.value);
if (isHeight) currentHeight = parseFloat(input.value);
});
}
var tabImg2img = gradioApp().querySelector("#tab_img2img");
if (tabImg2img) {
var inImg2img = tabImg2img.style.display == "block";
if (inImg2img) {
let inputs = gradioApp().querySelectorAll('input');
inputs.forEach(function(e) {
var is_width = e.parentElement.id == "img2img_width";
var is_height = e.parentElement.id == "img2img_height";
}

if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
e.addEventListener('input', function(e) {
dimensionChange(e, is_width, is_height);
});
e.classList.add('scrollwatch');
}
if (is_width) {
currentWidth = e.value * 1.0;
}
if (is_height) {
currentHeight = e.value * 1.0;
}
});
}
}
});
// Call `initializeInputWatchers` after UI updates
onAfterUiUpdate(initializeInputWatchers);