Zoom-in zoom-out a sticky point in canvas
Tags: javascript, css, html, canvas
Published: 2024-06-24 14:45:15

Zoom-in zoom-out with stick point is a regular use case we meet on design or builder tools such as Figma. In this blog, I will present a basic algorithm to handle it by javascript, HTML and CSS.

## Demo
[Demonstration](https://vitejsvitecsvymd-3npc--5173--9e2d28a3.local-credentialless.webcontainer.io/)

## Code step-by-step

**1. Create a container and a scalable item**

```
<div id="app">
      <div class="parent">
        <div class="scalable-child"></div>
      </div>
</div>
```

```
.scalable-child {
  width: 300px;
  height: 300px;
  position: relative;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: left top;
  background-image: url('https://cdn4.vectorstock.com/i/1000x1000/17/58/caro-pattern-background-vector-2261758.jpg');
  background-size: contain;
}
.parent {
  position: relative;
  background-color: white;
  width: 100vw;
  height: 100vh;
}
```

In this example, I use an div as a scalable item with class “scalable-child” and its container is a div with class “parent”.
Please note for some properties: 

- Top, left: 0  is the default position

- Pointer-event: none, because we will add event to parent, if pointer-event !== none the algorithm will be failed.

- Transform-origin: left top, that makes coordinate origin to calculate the position

**2. Add wheel event listener**

```
const parent = document.querySelector('.parent');
const child = document.querySelector('.scalable-child');

```
```
parent.addEventListener('wheel', wheelEventHandler, {
  passive: false,
  capture: true,
});

```
We will use [WheelEvent](https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event) to handle zoom-in, zoom-out, and moving child

Note: this example demonstrates only for the trackpad. You need to handle events for hotkeys such as (Ctrl +, Ctr -) or mouse as well.

```
let left = 0;
let top = 0;
let scale = 1;

const wheelEventHandler = (e) => {
  e.preventDefault();
  // Handle zoom with touch pad and hot key.
  const isZooming = e.ctrlKey || e.metaKey;
  let newValues = {};
  if (isZooming) {
    newValues = calculateOnZooming(e, scale, left, top);
  } else {
    newValues = calculateOnMoving(e, scale, left, top);
  }

  left = newValues.newLeft;
  top = newValues.newTop;
  scale = newValues.newScale;

  Object.assign(child.style, {
    transform: `scale(${scale})`,
    left: `${left}px`,
    top: `${top}px`,
  });
};
```
Firstly, we have isZooming variable to check if zooming or moving the child element. 

Then we calculate the new position and scale for the child element. Left, top, and scale are being used as temperate variables.

And it’s time to focus the algorithm on 2 calculate functions:

**3. Calculate on Zooming**

```
const calculateOnZooming = (e, oldScale, oldLeft, oldTop) => {
  let newScale = oldScale - e.deltaY * oldScale * 0.01;
  newScale = Math.max(newScale, 0.1);
  const newLeft = oldLeft - (e.offsetX - oldLeft) * (newScale / scale - 1);
  const newTop = oldTop - (e.offsetY - oldTop) * (newScale / scale - 1);
  return {
    newScale,
    newLeft,
    newTop,
  };
};
```

On zooming, wheelEvent will return the deltaY as a scale ratio and we can use it to calculate newScale

- deltaY > 0 => zoom-out

- deltaY < 0 => zoom-in
The detalScale = e.deltaY * oldScale * 0.01 to control scaling speed

Let’s see the below image to more understand how to calculate the newLeft and newTop variables:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmnech48fyuz0pvjijkm.png)
Start zooming-in child when mouse is in A point. At that time, we can get some values:

- e.offsetX: distance between mouse to parent’s left edge

- e.offsetY: distance between mouse to parent’s top edge

- left: current child’s left style value

- top: current child’s top style value

Child is scaled from scale ratio to scale’ ratio, and point A go to A’.
So to make A point sticky (with parent), we need to calculate deltaX and deltaY then move child revert with exactly px.

detalX = x’ - x
	= x * (scale’ / scale) - x
	= x * (scale’ / scale - 1)
	= (e.offsetX - left) * (scale’ / scale - 1)

detalY = y’ - y
	= y * (scale’ / scale) - y
	= y * (scale’ / scale - 1)
	= (e.offsetY - top) * (scale’ / scale - 1)


newLeft = left - detalX
newTop = top - detalY

**4. Calculate on Moving**

```
const calculateOnMoving = (e, oldScale, oldLeft, oldTop) => {
  return {
    newLeft: oldLeft - e.deltaX * 2,
    newTop: oldTop - e.deltaY * 2,
    newScale: oldScale,
  };
};

```

On moving event, we need to calculate only newLeft and newTop values. And we *2  each delta value to increase speed as well.

That’s all we need to handle. I hope it’s helpful. Thank you for watching!
You can view the full source code [here](https://stackblitz.com/edit/vitejs-vite-csvymd?file=index.html).