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

Arrow function: I've used an arrow function instead of a function declaration. Arrow functions are more concise and have simpler syntax. They also have lexical this binding, which can be useful in certain contexts. 

Destructuring assignment: I've used destructuring assignment to extract properties from objects. It's more concise and easier to read than accessing each property individually.

Combined conditions: I've combined the first two conditions into one if statement, as they both result in the same action (resetZoom()). This reduces redundancy and makes the code more concise.

Variable for repeated condition: I've created a variable isParentSmaller for the repeated condition parentElement.offsetWidth < targetElement.offsetWidth. This makes the code more readable and avoids unnecessary repeated calculations.
testing_refactoring
richrobber2 2024-06-12 03:50:07 -07:00
parent b26e9bc5bb
commit a6dbceec24
1 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
javascript/canvas-zoom.js
View File

@ -1307,22 +1307,23 @@ onUiLoaded(async () => {
}
}
// Checks for extension
function checkForOutBox() {
/**
* Checks if the target element is out of its parent's bounds and resets zoom if necessary.
*/
const checkForOutBox = () => {
const parentElement = targetElement.closest('[id^="component-"]');
if (parentElement.offsetWidth < targetElement.offsetWidth && !targetElement.isExpanded) {
const isParentSmaller = parentElement.offsetWidth < targetElement.offsetWidth;
const { zoomLevel } = elemData[elemId];
if (isParentSmaller && (!targetElement.isExpanded || zoomLevel === 1)) {
resetZoom();
targetElement.isExpanded = true;
if (!targetElement.isExpanded) targetElement.isExpanded = true;
}
if (parentElement.offsetWidth < targetElement.offsetWidth && elemData[elemId].zoomLevel == 1) {
if (isParentSmaller && targetElement.offsetWidth * zoomLevel > parentElement.offsetWidth && zoomLevel < 1 && !targetElement.isZoomed) {
resetZoom();
}
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);
@ -1355,32 +1356,32 @@ onUiLoaded(async () => {
applyZoomAndPan(elementIDs.inpaint, false);
applyZoomAndPan(elementIDs.inpaintSketch, false);
/**
* Adds event listeners to elements for enabling zoom and pan integration.
* @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.
*/
const applyZoomAndPanIntegration = async (id, elementIDs) => {
if (id.toLowerCase() === "none") {
for (const elementID of elementIDs) {
const el = await waitForElement(elementID);
if (!el) return;
applyZoomAndPan(elementID);
/**
* Adds event listeners to elements for enabling zoom and pan integration.
* @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.
*/
const applyZoomAndPanIntegration = async (id, elementIDs) => {
if (id.toLowerCase() === "none") {
for (const elementID of elementIDs) {
const el = await waitForElement(elementID);
if (!el) return;
applyZoomAndPan(elementID);
}
return;
}
return;
}
const mainEl = document.querySelector(id);
if (!mainEl) return;
const mainEl = document.querySelector(id);
if (!mainEl) return;
mainEl.addEventListener("click", async () => {
for (const elementID of elementIDs) {
const el = await waitForElement(elementID);
if (!el) return;
applyZoomAndPan(elementID);
}
}, { once: true });
};
mainEl.addEventListener("click", async () => {
for (const elementID of elementIDs) {
const el = await waitForElement(elementID);
if (!el) return;
applyZoomAndPan(elementID);
}
}, { once: true });
};
// Enable Extensions Integration
const integrateControlNet = hotkeysConfig.canvas_zoom_enable_integration;