Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Optimize ar preview#17134

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.

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

Already on GitHub?Sign in to your account

Open
ProblemShooter wants to merge2 commits intoAUTOMATIC1111:master
base:master
Choose a base branch
Loading
fromProblemShooter:optimize-ar-preview
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
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
24 changes: 15 additions & 9 deletionsextensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -286,8 +286,9 @@ onUiLoaded(async() => {

targetElement.style.transformOrigin = "0 0";

// initialize element state — use `zoomLevel` consistently across the file
elemData[elemId] = {
zoom: 1,
zoomLevel: 1,
panX: 0,
panY: 0
};
Expand DownExpand Up@@ -333,9 +334,8 @@ onUiLoaded(async() => {
// Create hotkeys array with disabled property based on the config values
const hotkeys = hotkeysInfo.map(info => {
const configValue = hotkeysConfig[info.configKey];
const key = info.keySuffix ?
`${configValue}${info.keySuffix}` :
configValue.charAt(configValue.length - 1);
const displayKey = formatHotkeyForDisplay(String(configValue || ""));
const key = info.keySuffix ? `${displayKey}${info.keySuffix}` : displayKey;
return {
key,
action: info.action,
Expand DownExpand Up@@ -371,7 +371,8 @@ onUiLoaded(async() => {
const activeTab = getActiveTab(elements)?.textContent.trim();

if (activeTab && activeTab !== "img2img") {
const img = targetElement.querySelector(`${elemId} img`);
// look for an actual <img> inside the target element
const img = targetElement.querySelector('img');

if (img && img.style.display !== "none") {
img.style.display = "none";
Expand DownExpand Up@@ -481,10 +482,13 @@ onUiLoaded(async() => {
}

// Reset zoom when uploading a new image
// file input may be absent or the class may vary — guard the listener
const fileInput = gradioApp().querySelector(
`${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`
`${elemId} input[type="file"][accept="image/*"]`
);
fileInput.addEventListener("click", resetZoom);
if (fileInput) {
fileInput.addEventListener("click", resetZoom);
}

// Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables
function updateZoom(newZoomLevel, mouseX, mouseY) {
Expand DownExpand Up@@ -718,8 +722,10 @@ onUiLoaded(async() => {

// Get Mouse position
function getMousePosition(e) {
mouseX = e.offsetX;
mouseY = e.offsetY;
// compute mouse position relative to the target element
const rect = targetElement.getBoundingClientRect();
mouseX = e.clientX - rect.left;
mouseY = e.clientY - rect.top;
}

// Simulation of the function to put a long image into the screen.
Expand Down
151 changes: 58 additions & 93 deletionsjavascript/aspectRatioOverlay.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,113 +1,78 @@

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;
const gradio = gradioApp(); // cache gradioApp reference

// Cache AR preview div globally
let arPreviewRect = gradio.querySelector('#imageARPreview');
if (!arPreviewRect) {
arPreviewRect = document.createElement('div');
arPreviewRect.id = "imageARPreview";
gradio.appendChild(arPreviewRect);
}

var arPreviewRect = gradioApp().querySelector('#imageARPreview');
if (!arPreviewRect) {
arPreviewRect = document.createElement('div');
arPreviewRect.id = "imageARPreview";
gradioApp().appendChild(arPreviewRect);
}
function dimensionChange(e, isWidth, isHeight) {
if (isWidth) currentWidth = +e.target.value;
if (isHeight) currentHeight = +e.target.value;

if (gradio.querySelector("#tab_img2img").style.display !== "block") return;

const tabIndex = get_tab_index('mode_img2img');
const tabSelectors = [
'#img2img_image div[data-testid=image] img',
'#img2img_sketch div[data-testid=image] img',
'#img2maskimg div[data-testid=image] img',
'#inpaint_sketch div[data-testid=image] img'
];

var viewportOffset = targetElement.getBoundingClientRect();
const targetElement = gradio.querySelector(tabSelectors[tabIndex]);
if (!targetElement || !currentWidth || !currentHeight) return;

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

Check failure on line 33 in javascript/aspectRatioOverlay.js

View workflow job for this annotation

GitHub Actions/ eslint

Expected indentation of 8 spaces but found 35

var scaledx= targetElement.naturalWidth *viewportscale;
var scaledy= targetElement.naturalHeight *viewportscale;
const scaledX= targetElement.naturalWidth *viewportScale;
const scaledY= targetElement.naturalHeight *viewportScale;

var clientRectTop = (viewportOffset.top + window.scrollY);
var clientRectLeft = (viewportOffset.left + window.scrollX);
var clientRectCentreY = clientRectTop + (targetElement.clientHeight / 2);
var clientRectCentreX = clientRectLeft + (targetElement.clientWidth / 2);
const centreX = viewportRect.left + window.scrollX + targetElement.clientWidth / 2;
const centreY = viewportRect.top + window.scrollY + targetElement.clientHeight / 2;

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

var arRectTop = clientRectCentreY - (arscaledy / 2);
var arRectLeft = clientRectCentreX - (arscaledx / 2);
var arRectWidth = arscaledx;
var arRectHeight = arscaledy;
const arWidth = currentWidth * arScale;
const arHeight = currentHeight * arScale;

arPreviewRect.style.top = arRectTop + 'px';
arPreviewRect.style.left = arRectLeft + 'px';
arPreviewRect.style.width = arRectWidth + 'px';
arPreviewRect.style.height = arRectHeight + 'px';
arPreviewRect.style.top = (centreY - arHeight / 2) + 'px';
arPreviewRect.style.left = (centreX - arWidth / 2) + 'px';
arPreviewRect.style.width = arWidth + 'px';
arPreviewRect.style.height = arHeight + 'px';
arPreviewRect.style.display = 'block';

clearTimeout(arFrameTimeout);
arFrameTimeout = setTimeout(function() {
if (arFrameTimeout) cancelAnimationFrame(arFrameTimeout);
arFrameTimeout = requestAnimationFrame(() => {
setTimeout(() => {
arPreviewRect.style.display = 'none';
}, 2000);

arPreviewRect.style.display = 'block';

}

});
}


onAfterUiUpdate(function() {
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
if (arPreviewRect) {
arPreviewRect.style.display = 'none';
}
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;
}
});
}
arPreviewRect.style.display = 'none';

const tabImg2img = gradio.querySelector("#tab_img2img");
if (tabImg2img && tabImg2img.style.display === "block") {
gradio.querySelectorAll('input').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 = +input.value;
if (isHeight) currentHeight = +input.value;
});
}
});
Loading
[8]ページ先頭
©2009-2025 Movatter.jp