Change the zoom ratio on button click

[jadhavsuraj2207]

Hi, I want to zoom-in or zoom out on two buttons (+ / -). When zoom-in or out, the structure is moving to the right and upper side because of x and y translate values. I want to implement the same zoom-in or out effect like when I zoom-in by keeping mouse in the center of editor.So, how to maintain the values of x,y,k ? Any solution for this ? Thanks.

[azhirov]

@Ni55aN , its doesn't work.

My worked code for all who need programmatically zoom:

zoomAt(k) {
  const { area } = this.editor.view; // read from Vue component data;
  const rect = area.el.getBoundingClientRect();
  const ox = (rect.left - window.innerWidth / 2) * k;
  const oy = (rect.top - window.innerHeight / 2) * k;

  area.zoom(area.transform.k + k, ox, oy);
},

where k -- intensity of zoom. Normal values for me: 0.1 and -0.1.

And for change intensity of zoom when source == 'wheel' (mouse event):

this.editor.on('zoom', (e) => {
  let k = e.transform.k; // current zoom level
  if (e.zoom > k) { // e.zoom is new zoom level
    e.zoom = k + 0.1;
  } else if (e.zoom < k) {
    e.zoom = k - 0.1;
  }
  e.zoom = +e.zoom.toFixed(2);
  return e.source !== 'dblclick'; // disable zoom by double click
});

PS. Thanks for great lib, but the docs is realy poor :(

[Ni55aN]

@azhirov for containers that don't fill up the entire window:

zoomAt(k) {
  const { area, container } = this.editor.view; // read from Vue component data;
  const rect = area.el.getBoundingClientRect();
  const ox = (rect.left - container.clientWidth / 2) * k;
  const oy = (rect.top - container.clientHeight / 2) * k;

  area.zoom(area.transform.k + k, ox, oy);
}

[Ni55aN]

but the docs is realy poor :(

Yes, I cannot spend my free time on this as I have another tasks

[nandlalatalea]

@Ni55aN I am able to Zoom out but not Zoom in Please give me code for that also thanks

[nandlalatalea]

Hey Found Solution for this Zoom in and Zoom Out Functionality With (+ / -) buttons Zoom out function (+)

handleAdd:() => { const rect = area.area.container.getBoundingClientRect(); const k = area.area.transform.k; const delta = 0.2;

  const ox = Math.max(0, (rect.left - area.area.container.clientWidth / 2) * k);
  const oy = Math.max(0, (rect.top - area.area.container.clientHeight / 2) * k); 
  area.area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta);
},
Zoom In function (-)
handleless:() => {
  // console.info("Editor", editor);
  const rect = area.area.container.getBoundingClientRect();
  const k = area.area.transform.k; 
  const delta = -0.2; 

  const ox = Math.max(0, (rect.left - area.area.container.clientWidth / 2) * k);
  const oy = Math.max(0, (rect.top - area.area.container.clientHeight / 2) * k); 
  area.area.zoom(Math.max(0.1, k * (1 + delta)), ox * delta, oy * delta); // Minimum zoom of 0.1

}