javascript - Drag Bound wiith Konva.Layer -

i using konvajs in project. need implement drag bound konva.layer. layer has many other shapes , images. need restrict movement of layer 50% of it's width , height. way have done in plunkr. problem arises when user zoom-in or zoom-out layer using mouse wheel. after zoom, don't know why drag bound behaving differently. seems not able math correctly. need have same behavior i.e. way movement of layer restricted when user not perform zoom. doing:

//... helper object zooming var zoomhelper = {     stage: null,     scale: 1,     zoomfactor: 1.1,     origin: {         x: 0,         y: 0     },     zoom: function(event) {         event.preventdefault();         var delta;         if (navigator.useragent.tolowercase().indexof('firefox') > -1) {             if (event.originalevent.detail > 0) {                 //scroll down                 delta = 0.2;             } else {                 //scroll                 delta = 0;             }         } else {             if (event.originalevent.wheeldelta < 0) {                 //scroll down                 delta = 0.2;             } else {                 //scroll                 delta = 0;             }         }         var evt = event.originalevent,             mx = evt.clientx - zoomhelper.stage.getx(),             = evt.clienty - zoomhelper.stage.gety(),             zoom = (zoomhelper.zoomfactor - delta),             newscale = zoomhelper.scale * zoom;         zoomhelper.origin.x = mx / zoomhelper.scale + zoomhelper.origin             .x - mx / newscale;         zoomhelper.origin.y = / zoomhelper.scale + zoomhelper.origin             .y - / newscale;         zoomhelper.stage.setoffset({             x: zoomhelper.origin.x,             y: zoomhelper.origin.y         });         zoomhelper.stage.setscale({             x: newscale,             y: newscale         });         zoomhelper.stage.draw();         zoomhelper.scale *= zoom;         precalculation();     } };   // code goes here var w = window.innerwidth; var h = window.innerheight; var height, minx, miny, maxx, maxy; var stage = new konva.stage({   container: 'container',   width: w,   height: h }); zoomhelper.stage =stage; var layer = new konva.layer({   draggable: true,   dragboundfunc: function(pos) {     console.log('called');     var x = pos.x;     var y = pos.y;     if (x < minx) {       x = minx;     }     if (x > maxx) {       x = maxx;     }     if (y < miny) {       y = miny;     }     if (y > maxy) {       y = maxy;     }     return ({       x: x,       y: y     });   } });  stage.add(layer);  function precalculation(){   // pre-calc bounds dragboundfunc has less calc's height = layer.getheight(); minx = stage.getx() - layer.getwidth() / 2; maxx = stage.getx() + stage.getwidth() - layer.getwidth() / 2; miny = stage.gety() - layer.getheight() / 2; maxy = stage.gety() + stage.getheight() - layer.getheight() / 2; console.log(height, minx, miny, maxx, maxy); } precalculation();  var img = new image(); img.onload = function() {   var floorimage = new konva.image({     image: img,     width: w,     height: h   });   layer.add(floorimage);   layer.draw(); }; img.src = 'https://s.yimg.com/pw/images/coverphoto02_h.jpg.v3';  $(stage.container).on('mousewheel dommousescroll', zoomhelper.zoom); 

while using dragboundfunc have return absolute position of layer. changing attributes of top node (stage) can hard maintain absolute position. can try set bound function inside 'dragmove' event:

layer.on('dragmove', function() {   var x = math.max(minx, math.min(maxx, layer.x()));   var y = math.max(miny, math.min(maxy, layer.y()));   layer.x(x);   layer.y(y); }); 

http://plnkr.co/edit/31mumojxbuvuahvjsl3c?p=preview