title: Drag Bound wiith Konva.Layer
body: <p>I am using <a href="https://konvajs.github.io/docs/" rel="nofollow">KonvaJs</a> in my project. I need to implement drag bound to <code>Konva.Layer</code>. My layer has so many other shapes and images. I need to restrict the movement of layer up to 50% of it's width and height. The way I have done in this <a href="http://plnkr.co/edit/xTfnZmGarb7sqgaSLrdU?p=preview" rel="nofollow">plunkr.</a> The problem arises when user zoom-in or zoom-out the layer using mouse wheel. After the zoom, I don't know why the drag bound is behaving differently. Seems like I am not able to do the Math correctly. I need to have the same behavior i.e. the way movement of layer is restricted when user does not perform zoom. This is what I am doing:</p>
  
  <pre><code>//... a helper object for 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') &gt; -1) {
              if (event.originalEvent.detail &gt; 0) {
                  //scroll down
                  delta = 0.2;
              } else {
                  //scroll up
                  delta = 0;
              }
          } else {
              if (event.originalEvent.wheelDelta &lt; 0) {
                  //scroll down
                  delta = 0.2;
              } else {
                  //scroll up
                  delta = 0;
              }
          }
          var evt = event.originalEvent,
              mx = evt.clientX - zoomHelper.stage.getX(),
              my = 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 = my / zoomHelper.scale + zoomHelper.origin
              .y - my / 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 &lt; minX) {
        X = minX;
      }
      if (X &gt; maxX) {
        X = maxX;
      }
      if (Y &lt; minY) {
        Y = minY;
      }
      if (Y &gt; maxY) {
        Y = maxY;
      }
      return ({
        x: X,
        y: Y
      });
    }
  });
  
  stage.add(layer);
  
  function preCalculation(){
    // pre-calc some bounds so dragBoundFunc has less calc's to do
  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);
  </code></pre>