Mouse wheel zooming effect in svg - to move to the center point and stop zooming when it reaches the limit

Question

Mouse wheel-zooming effect in svg - how to zoom to the center point of the work area , and how to stop the zoom level when it reaches the minimum and maximum zoom level. Where to set this min and max zoom values ?

Below is my code, I had reset the zoom level in the zoomChanged function of svgedit.compiled.js

           if (zoomlevel < 0.4) {                   
                 //changeZoom({value: 0.4});
                 var zoomlevel = 0.4;
                return;
            }

             if (zoomlevel > 9.5) {                 
                // changeZoom({value: 9.5});    
                var zoomlevel = 9.5;                    
                return;
            } 

and in ext-grid.js i had place the below code

zoomChanged: function(zoom) {
        if (showGrid)
        {           
            if(zoom > 0.4 & zoom < 9.5)
            {
                updateGrid(zoom);
            }           
        }
    },

When the mouse wheel is scrolled and when it reaches 0.4 or 9.5 the grid stop scaling but the zooming level still changes, and it zooms to the point where mouse is placed.

I need the work area should be zoomed to the center wherever the mouse is placed, and when it reaches minimum 0.4 or maximum 9.5 zooming should be stopped.

Can any one guide me, where have i had gone wrong?

Answer 1

In the svg-editor.js file there is this function:

var zoomChanged = svgCanvas.zoomChanged = function(win, bbox, autoCenter)

If you set the autoCenter variable to true you can impose to zoom to the center of the working area. So:

var zoomChanged = svgCanvas.zoomChanged = function(win, bbox, autoCenter) {
    autoCenter = true;
    var scrbar = 15,
    ....

To limit the zoom level, open svgcanvas.js and search for:

this.setZoom = function(zoomlevel)

Here you can set the min/max zoom level. For example, if you want to allow the 100% as minimum and a maximum of 400% you can write:

this.setZoom = function(zoomlevel) {
    if (zoomlevel<1) zoomlevel=1;
    if (zoomlevel>4) zoomlevel=4;
...

Answer 2

Notice that you are using Local Variable

 if (zoomlevel < 0.4) {                   
     //changeZoom({value: 0.4});
     var zoomlevel = 0.4;
     return;
 }

correct var zoomlevel = 0.4; to zoomlevel = 0.4;

then it may work