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

Refactor fitToElement function for better readability and efficiency 

removed unused code (not sure what it was for but it has not been used for a long time im going to assume its not needed anymore)
testing_refactoring
richrobber2 2024-06-12 03:43:43 -07:00
parent a6ec26e03b
commit 842cf475c6
1 changed files with 15 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
javascript/canvas-zoom.js
View File

@ -741,59 +741,42 @@ onUiLoaded(async () => {
};
/**
* This function fits the target element to the screen by calculating
* the required scale and offsets. It also updates the global variables
* zoomLevel, panX, and panY to reflect the new state.
*/
* This function fits the target element to the screen by calculating
* the required scale and offsets. It also updates the global variables
* zoomLevel, panX, and panY to reflect the new state.
*/
function fitToElement() {
const fitToElement = () => {
//Reset Zoom
targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
targetElement.style.transform = `translate(0px, 0px) scale(1)`;
let parentElement;
if (isExtension) {
parentElement = targetElement.closest('[id^="component-"]');
} else {
parentElement = targetElement.parentElement;
}
const parentElement = isExtension
? targetElement.closest('[id^="component-"]')
: 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;
const { offsetWidth: elementWidth, offsetHeight: elementHeight } = targetElement;
const { clientWidth: screenWidth, clientHeight: screenHeight } = parentElement;
// 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
const scaleX = screenWidth / elementWidth;
const scaleY = screenHeight / elementHeight;
const scale = Math.min(scaleX, scaleY);
const transformOrigin =
window.getComputedStyle(targetElement).transformOrigin;
const [originX, originY] = transformOrigin.split(" ");
const [originX, originY] = window.getComputedStyle(targetElement).transformOrigin.split(" ");
const originXValue = parseFloat(originX);
const originYValue = parseFloat(originY);
const offsetX =
(screenWidth - elementWidth * scale) / 2 - originXValue * (1 - scale);
const offsetY =
(screenHeight - elementHeight * scale) / 2.5 -
originYValue * (1 - scale);
const offsetX = (screenWidth - elementWidth * scale) / 2 - originXValue * (1 - scale);
const offsetY = (screenHeight - elementHeight * scale) / 2.5 - originYValue * (1 - scale);
// Apply scale and offsets to the element
targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
// Update global variables
elemData[elemId].zoomLevel = scale;
elemData[elemId].panX = offsetX;
elemData[elemId].panY = offsetY;
elemData[elemId] = { zoomLevel: scale, panX: offsetX, panY: offsetY };
fullScreenMode = false;
toggleOverlap("off");