1580158
/
canvas-zoom
mirror of https://github.com/richrobber2/canvas-zoom.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert

testing_refactoring
Danil Boldyrev 2024-06-17 13:05:47 +03:00 committed by GitHub
parent 5e5e36cb39
commit 63ca81ef1d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 255 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

429
javascript/canvas-zoom.js
View File

@ -42,10 +42,10 @@ onUiLoaded(async () => {
* @param {string} sign - "+" or "-" sign to determine the zoom direction. * @param {string} sign - "+" or "-" sign to determine the zoom direction.
* @param {Event} oldEvent - The original event. * @param {Event} oldEvent - The original event.
*/ */
const zoomFakeWheelEvent = (targetElement, sign, { ctrlKey, altKey, shiftKey }) => { const zoomFakeWheelEvent = (targetElement, sign, oldEvent) => {
const { left, top, width, height } = targetElement.getBoundingClientRect(); const rect = targetElement.getBoundingClientRect();
const centerX = left + width / 2; const centerX = rect.left + rect.width / 2;
const centerY = top + height / 2; const centerY = rect.top + rect.height / 2;
const detailValue = sign === "-" ? 1 : -1; const detailValue = sign === "-" ? 1 : -1;
const event = new WheelEvent("wheel", { const event = new WheelEvent("wheel", {
@ -57,10 +57,10 @@ onUiLoaded(async () => {
screenY: centerY, screenY: centerY,
clientX: centerX, clientX: centerX,
clientY: centerY, clientY: centerY,
ctrlKey, ctrlKey: oldEvent.ctrlKey,
altKey, altKey: oldEvent.altKey,
shiftKey, shiftKey: oldEvent.shiftKey,
metaKey: ctrlKey, metaKey: oldEvent.ctrlKey,
button: 0, button: 0,
buttons: 0, buttons: 0,
relatedTarget: null, relatedTarget: null,
@ -95,8 +95,8 @@ onUiLoaded(async () => {
* @return {Element} The active tab element. * @return {Element} The active tab element.
*/ */
const getActiveTab = (elements, all = false) => { const getActiveTab = (elements, all = false) => {
const tabs = elements?.img2imgTabs?.querySelectorAll("button"); const tabs = elements.img2imgTabs.querySelectorAll("button");
return all ? tabs : Array.from(tabs ?? []).find(tab => tab.classList.contains("selected")); return all ? tabs : Array.from(tabs).find(tab => tab.classList.contains("selected"));
}; };
/** /**
@ -160,16 +160,23 @@ onUiLoaded(async () => {
* @return {Object} The resulting hotkey configuration. * @return {Object} The resulting hotkey configuration.
*/ */
const createHotkeyConfig = (defaultHotkeysConfig, hotkeysConfigOpts) => { const createHotkeyConfig = (defaultHotkeysConfig, hotkeysConfigOpts) => {
const result = {};
const usedKeys = new Set(); const usedKeys = new Set();
const invalidTypes = new Set(["boolean", "object", "number"]); const invalidTypes = new Set(["boolean", "object", "number"]);
return Object.entries(defaultHotkeysConfig).reduce((result, [key, defaultValue]) => { for (const key in defaultHotkeysConfig) {
const userValue = hotkeysConfigOpts[key]; const userValue = hotkeysConfigOpts[key];
const defaultValue = defaultHotkeysConfig[key];
if (["canvas_zoom_undo_extra_key", "canvas_zoom_inc_brush_size", "canvas_zoom_dec_brush_size"].includes(key)) { if (key === "canvas_zoom_undo_extra_key") {
result[key] = userValue; result[key] = userValue
} else if (userValue === undefined || invalidTypes.has(typeof userValue) || userValue.startsWith("#") || userValue === "disable") { continue
result[key] = userValue ?? defaultValue; }
// if(key === "canvas_zoom_inc_brush_size" || key === "canvas_zoom_dec_brush_size")
if (userValue === undefined || invalidTypes.has(typeof userValue) || userValue.startsWith("#") || userValue === "disable") {
result[key] = userValue === undefined ? defaultValue : userValue;
} else if (isValidHotkey(userValue)) { } else if (isValidHotkey(userValue)) {
const normalizedUserValue = normalizeHotkey(userValue); const normalizedUserValue = normalizeHotkey(userValue);
@ -181,13 +188,18 @@ onUiLoaded(async () => {
result[key] = defaultValue; result[key] = defaultValue;
} }
} else { } else {
console.error(`Hotkey: ${formatHotkeyForDisplay(userValue)} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(defaultValue)}`); if (key === "canvas_zoom_inc_brush_size" || key === "canvas_zoom_dec_brush_size") {
result[key] = defaultValue; result[key] = defaultValue;
} else {
console.error(`Hotkey: ${formatHotkeyForDisplay(userValue)} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(defaultValue)}`);
result[key] = defaultValue;
}
} }
}
return result; return result;
}, {});
}; };
/** /**
* Disables specified functions in the configuration. * Disables specified functions in the configuration.
* @param {Object} config - The configuration object. * @param {Object} config - The configuration object.
@ -267,7 +279,7 @@ onUiLoaded(async () => {
imageARPreview.style.transform = ""; imageARPreview.style.transform = "";
if (parseFloat(mainTab.style.width) > 865) { if (parseFloat(mainTab.style.width) > 865) {
const scaleMatch = mainTab.style.transform.match(/scale\(([-+]?[0-9]*\.?[0-9]+)\)/); const scaleMatch = mainTab.style.transform.match(/scale\(([-+]?[0-9]*\.?[0-9]+)\)/);
const zoom = scaleMatch?.[1] ? Number(scaleMatch[1]) : 1; // default zoom const zoom = scaleMatch && scaleMatch[1] ? Number(scaleMatch[1]) : 1; // default zoom
imageARPreview.style.transformOrigin = "0 0"; imageARPreview.style.transformOrigin = "0 0";
imageARPreview.style.transform = `scale(${zoom})`; imageARPreview.style.transform = `scale(${zoom})`;
} }
@ -278,6 +290,7 @@ onUiLoaded(async () => {
setTimeout(() => { img.style.display = "none"; }, 400); setTimeout(() => { img.style.display = "none"; }, 400);
}; };
const hotkeysConfigOpts = await waitForOpts(); const hotkeysConfigOpts = await waitForOpts();
// Default config // Default config
@ -356,23 +369,16 @@ onUiLoaded(async () => {
// Apply functionality to the range inputs, restore redmask and correct for long images // Apply functionality to the range inputs, restore redmask and correct for long images
const rangeInputs = elements.rangeGroup ? Array.from(elements.rangeGroup.querySelectorAll("input")) : [gradioApp().querySelector("#img2img_width input[type='range']"), gradioApp().querySelector("#img2img_height input[type='range']")]; const rangeInputs = elements.rangeGroup ? Array.from(elements.rangeGroup.querySelectorAll("input")) : [gradioApp().querySelector("#img2img_width input[type='range']"), gradioApp().querySelector("#img2img_height input[type='range']")];
rangeInputs.forEach(input => input?.addEventListener("input", () => restoreImgRedMask(elements))); rangeInputs.forEach(input => input?.addEventListener("input", () => restoreImgRedMask(elements)));
function getTabElFromText(tabName) {
/**
* Returns the element ID for a given tab name.
* @param {string} tabName - The name of the tab.
* @return {string} The element ID.
*/
const getTabElFromText = tabName => {
const tabMap = { const tabMap = {
inpaint: elementIDs.inpaint, inpaint: elementIDs.inpaint,
sketch: elementIDs.sketch, sketch: elementIDs.sketch,
"inpaint sketch": elementIDs.inpaintSketch, "inpaint sketch": elementIDs.inpaintSketch,
}; };
return tabMap[tabName.trim().toLowerCase()]; return tabMap[tabName.trim().toLowerCase()];
}; }
const getSendButtons = (elemId) => { function getSendButtons(elemId) {
const tabMap = { const tabMap = {
[elementIDs.inpaint]: "inpaint", [elementIDs.inpaint]: "inpaint",
[elementIDs.sketch]: "sketch", [elementIDs.sketch]: "sketch",
@ -381,9 +387,9 @@ onUiLoaded(async () => {
}; };
const tabString = tabMap[elemId]; const tabString = tabMap[elemId];
return document.querySelectorAll(`#img2img_copy_to_${tabString} button`); return document.querySelectorAll(`#img2img_copy_to_${tabString} button`);
}; }
const isGetSizeImgBtnExists = Boolean(document.querySelector("#img2img_detect_image_size_btn")); const isGetSizeImgBtnExists = !!document.querySelector("#img2img_detect_image_size_btn");
let getImgDataBtn, clonedDiv; let getImgDataBtn, clonedDiv;
if (!isGetSizeImgBtnExists) { if (!isGetSizeImgBtnExists) {
@ -399,10 +405,23 @@ onUiLoaded(async () => {
} }
const canvasColor = await waitForOpts(); const canvasColor = await waitForOpts();
// Initialize localStorage variables
localStorage.setItem("brushOutline", hotkeysConfig.canvas_zoom_brush_outline); localStorage.setItem("brushOutline", hotkeysConfig.canvas_zoom_brush_outline);
localStorage.setItem("brush_color", canvasColor.img2img_inpaint_mask_brush_color || hotkeysConfig.canvas_zoom_inpaint_brushcolor); // console.log(canvasColor.img2img_inpaint_mask_brush_color,canvasColor.img2img_sketch_default_brush_color,canvasColor.canvas_zoom_inpaint_brushcolor)
localStorage.setItem("sketch_brush_color", canvasColor.img2img_sketch_default_brush_color);
// img2img_sketch_default_brush_color, img2img_inpaint_mask_brush_color.
if (canvasColor.img2img_inpaint_mask_brush_color) {
localStorage.setItem("brush_color", canvasColor.img2img_inpaint_mask_brush_color);
} else {
localStorage.setItem("brush_color", hotkeysConfig.canvas_zoom_inpaint_brushcolor);
}
if (canvasColor.img2img_sketch_default_brush_color) {
localStorage.setItem("sketch_brush_color", canvasColor.img2img_sketch_default_brush_color);
}
function applyZoomAndPan(elemId, isExtension = true) { function applyZoomAndPan(elemId, isExtension = true) {
const targetElement = gradioApp().querySelector(elemId); const targetElement = gradioApp().querySelector(elemId);
@ -422,68 +441,74 @@ onUiLoaded(async () => {
let fullScreenMode = false; let fullScreenMode = false;
/** //Fix white canvas when change width
* Sets the display style of the image in the target element to "none". function setImgDisplayToNone() {
*/
const setImgDisplayToNone = () => {
const img = targetElement.querySelector(`${elemId} img`); const img = targetElement.querySelector(`${elemId} img`);
img?.style.setProperty('display', 'none'); if (img) img.style.display = "none";
}; }
if (hotkeysConfig.canvas_zoom_mask_clear) { if (hotkeysConfig.canvas_zoom_mask_clear) {
allButtons.forEach(button => { allButtons.forEach((button) => {
if (button.innerText !== "img2img") { if (button.innerText !== "img2img") {
button.addEventListener("click", () => { button.addEventListener("click", () => {
const sendToTabName = getTabElFromText(button.innerText); const sendToTabName = getTabElFromText(button.innerText);
if (!sendToTabName) return;
const closeBtn = document.querySelector( if (sendToTabName) {
`${sendToTabName} button[aria-label='Remove Image']` const closeBtn = document.querySelector(
) || document.querySelector( `${sendToTabName} button[aria-label='Remove Image']`
`${sendToTabName} button[aria-label='Clear']` ) || document.querySelector(
); `${sendToTabName} button[aria-label='Clear']`
);
closeBtn?.click(); closeBtn?.click();
}
}); });
} }
}); });
const sendToInpainBtn = elements.sendToInpainBtn || elements.sendToInpainBtnNew; if (elements.sendToInpainBtn) {
const sendToInpainBtnT2I = elements.sendToInpainBtnT2I || elements.sendToInpainBtnT2INew; elements.sendToInpainBtn.addEventListener("click", clearMask);
elements.sendToInpainBtnT2I.addEventListener("click", clearMask);
sendToInpainBtn?.addEventListener("click", clearMask); }
sendToInpainBtnT2I?.addEventListener("click", clearMask); else {
elements.sendToInpainBtnNew.addEventListener("click", clearMask);
elements.sendToInpainBtnT2INew.addEventListener("click", clearMask);
}
} }
if (!isGetSizeImgBtnExists) { if (!isGetSizeImgBtnExists) {
getImgDataBtn.addEventListener("click", () => { getImgDataBtn.addEventListener("click", () => {
const tabID = getTabId(elements); const tabID = getTabId(elements);
const [canvas, img, imgUpload] = [`${tabID} canvas`, "#img2img_image img", "#img_inpaint_base img"].map(selector => document.querySelector(selector)); const canvas = document.querySelector(`${tabID} canvas`);
const img = document.querySelector("#img2img_image img");
const imgUpload = document.querySelector("#img_inpaint_base img");
const rightWidth = img?.naturalWidth || canvas?.width || imgUpload?.naturalWidth; const rightWidth = img?.naturalWidth || canvas?.width || imgUpload?.naturalWidth;
const rightHeight = img?.naturalHeight || canvas?.height || imgUpload?.naturalHeight; const rightHeight = img?.naturalHeight || canvas?.height || imgUpload?.naturalHeight;
if (rightWidth && rightHeight) { if (rightWidth && rightHeight) {
const [rangeWidth, rangeHeight, inputWidth, inputHeight] = [ const [rangeWidth, rangeHeight] = document.querySelectorAll(
...document.querySelectorAll("#img2img_width input[type='range'], #img2img_height input[type='range']"), "#img2img_width input[type='range'], #img2img_height input[type='range']"
...document.querySelectorAll("#img2img_width input[type='number'], #img2img_height input[type='number']") );
]; const [inputWidth, inputHeight] = document.querySelectorAll(
"#img2img_width input[type='number'], #img2img_height input[type='number']"
);
[rangeWidth.value, inputWidth.value] = [rightWidth, rightWidth]; rangeWidth.value = inputWidth.value = rightWidth;
[rangeHeight.value, inputHeight.value] = [rightHeight, rightHeight]; rangeHeight.value = inputHeight.value = rightHeight;
const changeEvent = new Event("change"); const changeEvent = new Event("change");
const inputEvent = new Event("input"); const inputEvent = new Event("input");
[rangeWidth, rangeHeight, inputWidth, inputHeight].forEach(el => { for (const el of [rangeWidth, rangeHeight, inputWidth, inputHeight]) {
el.dispatchEvent(changeEvent); el.dispatchEvent(changeEvent);
el.dispatchEvent(inputEvent); el.dispatchEvent(inputEvent);
}); }
} }
}); });
} }
const createTooltip = () => { function createTooltip() {
const toolTipElemnt = targetElement.querySelector(".image-container") || targetElement.querySelector("div[data-testid='image']"); const toolTipElemnt = targetElement.querySelector(".image-container") || targetElement.querySelector("div[data-testid='image']");
const tooltip = document.createElement("div"); const tooltip = document.createElement("div");
@ -510,57 +535,57 @@ onUiLoaded(async () => {
{ configKey: "canvas_zoom_hotkey_transparency", action: "Transparency mode" }, { configKey: "canvas_zoom_hotkey_transparency", action: "Transparency mode" },
]; ];
const hotkeys = hotkeysInfo.map(({ configKey, action, keySuffix, keyPrefix }) => { const hotkeys = hotkeysInfo.map((info) => {
const configValue = hotkeysConfig[configKey]; const configValue = hotkeysConfig[info.configKey];
let key = configValue.slice(-1); let key = configValue.slice(-1);
if (keySuffix) { if (info.keySuffix) {
key = `${configValue}${keySuffix}`; key = `${configValue}${info.keySuffix}`;
} }
if (keyPrefix && keyPrefix !== "None + ") { if (info.keyPrefix && info.keyPrefix !== "None + ") {
key = `${keyPrefix}${configValue[3]}`; key = `${info.keyPrefix}${configValue[3]}`;
} }
return { return {
key, key,
action, action: info.action,
disabled: configValue === "disable", disabled: configValue === "disable",
}; };
}); });
hotkeys hotkeys
.filter(({ disabled }) => !disabled) .filter(hotkey => !hotkey.disabled)
.forEach(({ key, action }) => { .forEach(hotkey => {
const p = document.createElement("p"); const p = document.createElement("p");
p.innerHTML = `<b>${key}</b> - ${action}`; p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
tooltipContent.appendChild(p); tooltipContent.appendChild(p);
}); });
tooltip.append(info, tooltipContent); tooltip.append(info, tooltipContent);
toolTipElemnt.appendChild(tooltip); toolTipElemnt.appendChild(tooltip);
}; }
/** /**
* Function to create fullscreen and dropper buttons and attach them to the target element * Function to create fullscreen and dropper buttons and attach them to the target element
* @returns {void} * @returns {void}
*/ */
const createFuncButtons = () => { function createFuncButtons() {
const buttonContainer = targetElement.querySelector(".image-container") || targetElement.querySelector("div[data-testid='image']"); const buttonContainer = targetElement.querySelector(".image-container") || targetElement.querySelector("div[data-testid='image']");
const createButton = (className, innerHTML, clickHandler) => { const fullscreenBtn = document.createElement("button");
const button = document.createElement("button"); fullscreenBtn.className = "fullscreen-btn-main";
button.className = `${className}-main`; fullscreenBtn.innerHTML = `<p class="fullscreen-btn">F</p>`;
button.innerHTML = `<p class="${className}">${innerHTML}</p>`; fullscreenBtn.addEventListener("click", () => fitToScreen(true));
button.addEventListener("click", clickHandler);
return button;
};
const fullscreenBtn = createButton("fullscreen-btn", "F", () => fitToScreen(true)); const dropperBtn = document.createElement("button");
const dropperBtn = createButton("dropper-btn", "P", toggleDropper); dropperBtn.className = "dropper-btn-main";
dropperBtn.innerHTML = `<p class="dropper-btn">P</p>`;
dropperBtn.addEventListener("click", toggleDropper);
buttonContainer.append(fullscreenBtn, dropperBtn); buttonContainer.append(fullscreenBtn, dropperBtn);
}; }
if (hotkeysConfig.canvas_show_tooltip) { if (hotkeysConfig.canvas_show_tooltip) {
createTooltip(); createTooltip();
@ -574,25 +599,26 @@ onUiLoaded(async () => {
* Function to fix canvas display issues by hiding image when not in "img2img" mode * Function to fix canvas display issues by hiding image when not in "img2img" mode
* @returns {void} * @returns {void}
*/ */
const fixCanvas = () => { function fixCanvas() {
const activeTab = getActiveTab(elements).textContent.trim(); const activeTab = getActiveTab(elements).textContent.trim();
if (activeTab !== "img2img") { if (activeTab !== "img2img") {
const img = targetElement.querySelector(`${elemId} img`); const img = targetElement.querySelector(`${elemId} img`);
if (img?.style.display !== "none") { if (img && img.style.display !== "none") {
img.style.display = "none"; img.style.display = "none";
img.style.visibility = "hidden"; img.style.visibility = "hidden";
} }
} }
}; }
/** /**
* Function to reset the zoom level and pan position of the target element to their initial values * Function to reset the zoom level and pan position of the target element to their initial values
* @param {string} _ - ignored parameter
* @param {boolean} isMobile - indicates whether the application is running on a mobile device * @param {boolean} isMobile - indicates whether the application is running on a mobile device
* @returns {void} * @returns {void}
*/ */
const resetZoom = (isMobile = false) => { function resetZoom(_ = "", isMobile = false) {
elemData[elemId] = { elemData[elemId] = {
zoomLevel: 1, zoomLevel: 1,
panX: 0, panX: 0,
@ -604,6 +630,7 @@ onUiLoaded(async () => {
} }
targetElement.isZoomed = false; targetElement.isZoomed = false;
fixCanvas(); fixCanvas();
targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`; targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`;
@ -614,24 +641,44 @@ onUiLoaded(async () => {
fullScreenMode = false; fullScreenMode = false;
const closeBtn = targetElement.querySelector("button[aria-label='Remove Image']"); const closeBtn = targetElement.querySelector("button[aria-label='Remove Image']");
closeBtn?.addEventListener("click", resetZoom); if (closeBtn) {
closeBtn.addEventListener("click", resetZoom);
}
const parentElement = targetElement.closest('[id^="component-"]'); if (canvas && isExtension) {
const canvasWidth = canvas ? parseFloat(canvas.style.width) : 0; const parentElement = targetElement.closest('[id^="component-"]');
const targetElementWidth = parseFloat(targetElement.style.width); if (
canvas &&
parseFloat(canvas.style.width) > parentElement.offsetWidth &&
parseFloat(targetElement.style.width) > parentElement.offsetWidth
) {
fitToElement();
return;
}
if ((canvas && isExtension && canvasWidth > parentElement.offsetWidth && targetElementWidth > parentElement.offsetWidth) || }
(canvas && !isExtension && canvasWidth > 865 && targetElementWidth > 865) ||
isMobile) { if (
canvas &&
!isExtension &&
parseFloat(canvas.style.width) > 865 &&
parseFloat(targetElement.style.width) > 865
) {
fitToElement();
return;
}
if (isMobile) {
fitToElement(); fitToElement();
return; return;
} }
targetElement.style.width = ""; targetElement.style.width = "";
// if (canvas) { if (canvas) {
// targetElement.style.height = canvas.style.height; // targetElement.style.height = canvas.style.height;
// } }
}; }
// Toggle the zIndex of the target element between two values, allowing it to overlap or be overlapped by other elements // Toggle the zIndex of the target element between two values, allowing it to overlap or be overlapped by other elements
function toggleOverlap(forced = "") { function toggleOverlap(forced = "") {
const zIndex1 = "0"; const zIndex1 = "0";
@ -647,34 +694,37 @@ onUiLoaded(async () => {
} }
} }
/** // Adjust the brush size based on the deltaY value from a mouse wheel event
* Function to adjust the brush size based on the deltaY value from a mouse wheel event function adjustBrushSize(
* @param {string} elemId - the id of the element elemId,
* @param {number} deltaY - the deltaY value from the mouse wheel event deltaY,
* @param {boolean} withoutValue - indicates whether to adjust the brush size without a value withoutValue = false,
* @param {number} percentage - the percentage to adjust the brush size by percentage = 5
* @returns {void} ) {
*/ const input =
const adjustBrushSize = (elemId, deltaY, withoutValue = false, percentage = 5) => { gradioApp().querySelector(
const input = gradioApp().querySelector(`${elemId} input[aria-label='Brush radius']`) || `${elemId} input[aria-label='Brush radius']`
) ||
gradioApp().querySelector(`${elemId} button[aria-label="Use brush"]`); gradioApp().querySelector(`${elemId} button[aria-label="Use brush"]`);
if (input) { if (input) {
input.click(); input.click();
if (!withoutValue) { if (!withoutValue) {
const maxValue = parseFloat(input.getAttribute("max")) || 100; const maxValue = parseFloat(input.getAttribute("max")) || 100;
const changeAmount = maxValue * (percentage / 100); const changeAmount = maxValue * (percentage / 100);
const newValue = parseFloat(input.value) + (deltaY > 0 ? -changeAmount : changeAmount); const newValue =
parseFloat(input.value) +
(deltaY > 0 ? -changeAmount : changeAmount);
input.value = Math.min(Math.max(newValue, 0), maxValue); input.value = Math.min(Math.max(newValue, 0), maxValue);
input.dispatchEvent(new Event("change")); input.dispatchEvent(new Event("change"));
} }
} }
}; }
// Reset zoom when uploading a new image // Reset zoom when uploading a new image
const fileInput = gradioApp().querySelector(`${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`); const fileInput = gradioApp().querySelector(
`${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`
);
fileInput.addEventListener("click", resetZoom); fileInput.addEventListener("click", resetZoom);
/** /**
@ -694,8 +744,10 @@ onUiLoaded(async () => {
panY: panY + y - (y * clampedLevel) / zoomLevel, panY: panY + y - (y * clampedLevel) / zoomLevel,
}); });
targetElement.style.transformOrigin = "0 0"; Object.assign(targetElement.style, {
targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${clampedLevel})`; transformOrigin: "0 0",
transform: `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${clampedLevel})`,
});
toggleOverlap("on"); toggleOverlap("on");
setImgDisplayToNone(); setImgDisplayToNone();
@ -718,8 +770,12 @@ onUiLoaded(async () => {
e.preventDefault(); e.preventDefault();
const { zoomLevel = 1 } = elemData[elemId]; let { zoomLevel } = elemData[elemId];
elemData[elemId].zoomLevel = zoomLevel;
if (!zoomLevel) {
zoomLevel = 1;
elemData[elemId].zoomLevel = zoomLevel;
}
const delta = zoomLevel > 7 ? 0.9 : zoomLevel > 2 ? 0.6 : 0.2; const delta = zoomLevel > 7 ? 0.9 : zoomLevel > 2 ? 0.6 : 0.2;
@ -741,42 +797,59 @@ onUiLoaded(async () => {
}; };
/** /**
* This function fits the target element to the screen by calculating * This function fits the target element to the screen by calculating
* the required scale and offsets. It also updates the global variables * the required scale and offsets. It also updates the global variables
* zoomLevel, panX, and panY to reflect the new state. * zoomLevel, panX, and panY to reflect the new state.
*/ */
const fitToElement = () => { function fitToElement() {
//Reset Zoom //Reset Zoom
targetElement.style.transform = `translate(0px, 0px) scale(1)`; targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
const parentElement = isExtension let parentElement;
? targetElement.closest('[id^="component-"]')
: targetElement.parentElement; if (isExtension) {
parentElement = targetElement.closest('[id^="component-"]');
} else {
parentElement = targetElement.parentElement;
}
// Get element and screen dimensions // Get element and screen dimensions
const { offsetWidth: elementWidth, offsetHeight: elementHeight } = targetElement; const elementWidth = targetElement.offsetWidth;
const { clientWidth: screenWidth, clientHeight: screenHeight } = parentElement; const elementHeight = targetElement.offsetHeight;
// const parentElement = targetElement.parentElement;
const screenWidth = parentElement.clientWidth;
const screenHeight = parentElement.clientHeight;
// Get element's coordinates relative to the parent element // Get element's coordinates relative to the parent element
const elementRect = targetElement.getBoundingClientRect();
const parentRect = parentElement.getBoundingClientRect();
const elementX = elementRect.x - parentRect.x;
// Calculate scale and offsets // Calculate scale and offsets
const scaleX = screenWidth / elementWidth; const scaleX = screenWidth / elementWidth;
const scaleY = screenHeight / elementHeight; const scaleY = screenHeight / elementHeight;
const scale = Math.min(scaleX, scaleY); const scale = Math.min(scaleX, scaleY);
const [originX, originY] = window.getComputedStyle(targetElement).transformOrigin.split(" "); const transformOrigin =
window.getComputedStyle(targetElement).transformOrigin;
const [originX, originY] = transformOrigin.split(" ");
const originXValue = parseFloat(originX); const originXValue = parseFloat(originX);
const originYValue = parseFloat(originY); const originYValue = parseFloat(originY);
const offsetX = (screenWidth - elementWidth * scale) / 2 - originXValue * (1 - scale); const offsetX =
const offsetY = (screenHeight - elementHeight * scale) / 2.5 - originYValue * (1 - scale); (screenWidth - elementWidth * scale) / 2 - originXValue * (1 - scale);
const offsetY =
(screenHeight - elementHeight * scale) / 2.5 -
originYValue * (1 - scale);
// Apply scale and offsets to the element // Apply scale and offsets to the element
targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`; targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
// Update global variables // Update global variables
elemData[elemId] = { zoomLevel: scale, panX: offsetX, panY: offsetY }; elemData[elemId].zoomLevel = scale;
elemData[elemId].panX = offsetX;
elemData[elemId].panY = offsetY;
fullScreenMode = false; fullScreenMode = false;
toggleOverlap("off"); toggleOverlap("off");
@ -1032,8 +1105,8 @@ onUiLoaded(async () => {
[hotkeysConfig.canvas_zoom_hotkey_fill]: fillCanvasWithColor, [hotkeysConfig.canvas_zoom_hotkey_fill]: fillCanvasWithColor,
[hotkeysConfig.canvas_zoom_hotkey_transparency]: toggleOpacityMode, [hotkeysConfig.canvas_zoom_hotkey_transparency]: toggleOpacityMode,
[hotkeysConfig.canvas_zoom_hotkey_undo]: undoLastAction, [hotkeysConfig.canvas_zoom_hotkey_undo]: undoLastAction,
[hotkeysConfig.canvas_zoom_dec_brush_size]: () => adjustBrushSize(elemId, 100, false, hotkeysConfig.canvas_zoom_brush_size_change), [hotkeysConfig.canvas_zoom_dec_brush_size]: () => adjustBrushSize(elemId, 100, false,hotkeysConfig.canvas_zoom_brush_size_change),
[hotkeysConfig.canvas_zoom_inc_brush_size]: () => adjustBrushSize(elemId, -100, false, hotkeysConfig.canvas_zoom_brush_size_change), [hotkeysConfig.canvas_zoom_inc_brush_size]: () => adjustBrushSize(elemId, -100, false,hotkeysConfig.canvas_zoom_brush_size_change),
}; };
const action = hotkeyActions[event.code]; const action = hotkeyActions[event.code];
@ -1175,41 +1248,43 @@ onUiLoaded(async () => {
}); });
/** /**
* Event listener for wheel event on the target element to handle zoom and brush size adjustment. * Event listener for wheel event on the target element to handle zoom and brush size adjustment.
*/ */
targetElement.addEventListener("wheel", ({ deltaY }) => { targetElement.addEventListener("wheel", (e) => {
const isDefaultCanvas = checkIsDefault(elementIDs, elemId); const isDefaultCanvas = checkIsDefault(elementIDs, elemId);
if (!isDefaultCanvas || !window.applyZoomAndPan) { if (!isDefaultCanvas || !window.applyZoomAndPan) {
changeZoomLevel(deltaY > 0 ? "-" : "+", deltaY); const operation = e.deltaY > 0 ? "-" : "+";
changeZoomLevel(operation, e);
} }
if (!isModifierKey(deltaY, hotkeysConfig.canvas_hotkey_adjust)) return; if (!isModifierKey(e, hotkeysConfig.canvas_hotkey_adjust)) return;
adjustBrushSize(elemId, deltaY, false, hotkeysConfig.canvas_zoom_brush_size_change); e.preventDefault();
return false; adjustBrushSize(elemId, e.deltaY, false, hotkeysConfig.canvas_zoom_brush_size_change);
}); });
/** /**
* Handles key down events to trigger moving operations on the canvas. * Handles key down events to trigger moving operations on the canvas.
* @param {KeyboardEvent} event - The keyboard event object. * @param {KeyboardEvent} event - The keyboard event object.
*/ */
const handleMoveKeyDown = ({ ctrlKey, metaKey, target, code }) => { const handleMoveKeyDown = (e) => {
const allowedKeys = ['KeyV', 'KeyC', 'F5']; const allowedKeys = ['KeyV', 'KeyC', 'F5'];
const isCtrlPressed = ctrlKey || metaKey; // Combine Ctrl and Meta (Cmd) keys const isCtrlPressed = e.ctrlKey || e.metaKey; // Combine Ctrl and Meta (Cmd) keys
const isTyping = ['TEXTAREA', 'INPUT'].includes(target.nodeName); const isTyping = ['TEXTAREA', 'INPUT'].includes(e.target.nodeName);
const shouldPreventDefault = const shouldPreventDefault =
(isTyping && !hotkeysConfig.canvas_blur_prompt) || (isCtrlPressed && allowedKeys.includes(code)); (isTyping && !hotkeysConfig.canvas_blur_prompt) || (isCtrlPressed && allowedKeys.includes(e.code));
if (shouldPreventDefault || code !== hotkeysConfig.canvas_hotkey_move || !isKeyDownHandlerAttached) { if (shouldPreventDefault || e.code !== hotkeysConfig.canvas_hotkey_move || !isKeyDownHandlerAttached) {
return; return;
} }
event.preventDefault(); e.preventDefault();
document.activeElement.blur(); document.activeElement.blur();
isMoving = true; isMoving = true;
}; };
/** /**
* Handles key up events to stop moving operations on the canvas. * Handles key up events to stop moving operations on the canvas.
* @param {KeyboardEvent} event - The keyboard event object. * @param {KeyboardEvent} event - The keyboard event object.
@ -1305,25 +1380,26 @@ onUiLoaded(async () => {
} }
} }
/** // Checks for extension
* Checks if the target element is out of its parent's bounds and resets zoom if necessary. function checkForOutBox() {
*/
const checkForOutBox = () => {
const parentElement = targetElement.closest('[id^="component-"]'); const parentElement = targetElement.closest('[id^="component-"]');
const isParentSmaller = parentElement.offsetWidth < targetElement.offsetWidth; if (parentElement.offsetWidth < targetElement.offsetWidth && !targetElement.isExpanded) {
const { zoomLevel } = elemData[elemId];
if (isParentSmaller && (!targetElement.isExpanded || zoomLevel === 1)) {
resetZoom(); resetZoom();
if (!targetElement.isExpanded) targetElement.isExpanded = true; targetElement.isExpanded = true;
} }
if (isParentSmaller && targetElement.offsetWidth * zoomLevel > parentElement.offsetWidth && zoomLevel < 1 && !targetElement.isZoomed) { if (parentElement.offsetWidth < targetElement.offsetWidth && elemData[elemId].zoomLevel == 1) {
resetZoom(); resetZoom();
} }
};
isExtension && targetElement.addEventListener("mousemove", checkForOutBox); if (parentElement.offsetWidth < targetElement.offsetWidth && targetElement.offsetWidth * elemData[elemId].zoomLevel > parentElement.offsetWidth && elemData[elemId].zoomLevel < 1 && !targetElement.isZoomed) {
resetZoom();
}
}
if (isExtension) {
targetElement.addEventListener("mousemove", checkForOutBox);
}
// Prevents sticking to the mouse // Prevents sticking to the mouse
window.onblur = function () { window.onblur = function () {
@ -1352,33 +1428,41 @@ onUiLoaded(async () => {
applyZoomAndPan(elementIDs.inpaint, false); applyZoomAndPan(elementIDs.inpaint, false);
applyZoomAndPan(elementIDs.inpaintSketch, false); applyZoomAndPan(elementIDs.inpaintSketch, false);
// Make Canvas zoom func global, like in build in extension
// Temp disable have bugs :(
// if (!window.applyZoomAndPan) {
// window.applyZoomAndPan = applyZoomAndPan
// }
/** /**
* Adds event listeners to elements for enabling zoom and pan integration. * Adds event listeners to elements for enabling zoom and pan integration.
* @param {string} id - The id of the main element. * @param {string} id - The id of the main element.
* @param {Array} elementIDs - An array of element IDs to which the event listeners should be added. * @param {Array} elementIDs - An array of element IDs to which the event listeners should be added.
*/ */
// Make the function global so that other extensions can take advantage of this solution
const applyZoomAndPanIntegration = async (id, elementIDs) => { const applyZoomAndPanIntegration = async (id, elementIDs) => {
if (id.toLowerCase() === "none") { const mainEl = document.querySelector(id);
if (id.toLocaleLowerCase() === "none") {
for (const elementID of elementIDs) { for (const elementID of elementIDs) {
const el = await waitForElement(elementID); const el = await waitForElement(elementID);
if (!el) return; if (!el) break;
applyZoomAndPan(elementID); applyZoomAndPan(elementID);
} }
return; return;
} }
const mainEl = document.querySelector(id);
if (!mainEl) return; if (!mainEl) return;
mainEl.addEventListener("click", async () => { mainEl.addEventListener("click", async () => {
for (const elementID of elementIDs) { for (const elementID of elementIDs) {
const el = await waitForElement(elementID); const el = await waitForElement(elementID);
if (!el) return; if (!el) break;
applyZoomAndPan(elementID); applyZoomAndPan(elementID);
} }
}, { once: true }); }, { once: true });
}; };
// Enable Extensions Integration // Enable Extensions Integration
const integrateControlNet = hotkeysConfig.canvas_zoom_enable_integration; const integrateControlNet = hotkeysConfig.canvas_zoom_enable_integration;
if (integrateControlNet) { if (integrateControlNet) {
@ -1419,7 +1503,4 @@ onUiLoaded(async () => {
// if(window.applyZoomAndPanIntegration){ // if(window.applyZoomAndPanIntegration){
window.applyZoomAndPanIntegration = applyZoomAndPanIntegration window.applyZoomAndPanIntegration = applyZoomAndPanIntegration
// } // }
});
});