DEV Community

Dung Nguyen Thi Thuy
Dung Nguyen Thi Thuy

Posted on

Zoom-in zoom-out a sticky point in canvas

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

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

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');

Enter fullscreen mode Exit fullscreen mode
parent.addEventListener('wheel', wheelEventHandler, {
  passive: false,
  capture: true,
});

Enter fullscreen mode Exit fullscreen mode

We will use WheelEvent 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`,
  });
};
Enter fullscreen mode Exit fullscreen mode

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,
  };
};
Enter fullscreen mode Exit fullscreen mode

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
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,
  };
};

Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay