There is an image with a "ruler" made of basic divs positioned absolutely on top of the image to measure its ends. The concept is that if you long press one end of the ruler (the draggable dots at the line's end), the background image would zoom in at that point and move along with the dot if it's dragged. Although I'm able to detect the long press, I'm struggling to make the image zoom and follow the dot once detected. Below is the code where detection is done but applying the styling to move the image seems challenging. I considered using the transition property, but couldn't get the desired zoom effect on the dot. Any assistance is welcomed...
See this codesandbox for a demonstration of how the ruler functions: Link
Relevant code snippet:
const x = get('x', varToUse); //Returns x coordinate of ruler end
const y = get('y', varToUse); //Returns y coordinate of ruler end
const image = ruler.current.parentElement.parentElement.childNodes[1].childNodes[1];
if (zoom) {
image.style.transform = `translate(${x * 2}px, ${y * 2}px) scale(2.0)`;
} else {
image.style.transform = `scale(1.0)`;
}
For reference, here's what the ruler looks like: https://i.sstatic.net/gYe9w.png