More comfortable zooming on big canvas

I have a very big canvas where items can be located at “top: 6305px; left: 400px;” and even more, sometimes even 20 000 px. When items are so far off the 0,0, then zooming around is not very comfortable is items on canvas do not remain in view and zooming does not work intuitively. I tried to overwrite the zoom functions with trickery to manipulate the translate coordinates, such as:

editor.zoom_out = function(){
    if(this.zoom > this.zoom_min) {
      this.zoom-=0.1;
      this.canvas_y =this.canvas_y - (this.canvas_y/7/this.zoom); //That 7 is just a test
      this.zoom_refresh();
    }
  }

but no success. It requires some kind transformation of canvas coordinates based on zoom multiplier as well as current canvas location but i cannot figure out how. Any ideas on this?

[dsoiM]

Hey @jerosoler, works absolutely perfect, good job 👍

[jerosoler]

Update version to 0.0.30

Fix! 😉

And add a zoom_value https://github.com/jerosoler/Drawflow#editor Thanks!