title: Tips to Handle Collisions
body: <p>I am trying to create a konva canvas where shapes are draggable, are kept within the bounds of the canvas and also don't overlap, so if a collision is detected then I need to handle this somehow. I've managed to get the first 2 working but can't handle collision detection properly.</p>
  
  <p>I am able to detect collisions fine in realtime and 50% of the time handle this as I wish, get them to bounce back on x or y axis -20 or +20 depending on the direction of the drag but the other 50% of the time I am getting my shapes laying on top of each other which is what I am trying to avoid and then the shapes seem to stop receiving events altogether (they no longer highlight even which is in mouseover and mouseout).</p>
  
  <p>I will add my code but I suppose I am looking for a little advice on how I should handle the collision as I don't think my approach is the best (I still have to think about what if there is another shape colliding when bumped over) but should I be bumping over x or y +20/-20 when I detect a collision? It does seem nice behaviour when it works and also how best to work out which axis I should be adjusting - can my approach to detecting drag direction be improved? (as I really think this is what is causing the shapes to sometimes overlap and become unresponsive)</p>
  
  <p>Thank you for any advice you can offer. I have only provided the relevant code (as that's enough!) which is part of the dragFunc for the shape and then the function to detect collisions.</p>
  
  <pre><code>function intersectRect( a,  b) {
   if (a.x() &lt; b.x + b.width  &amp;&amp; a.x() + a.width()  &gt; b.x &amp;&amp;
      a.y() &lt; b.y + b.height &amp;&amp; a.y() + a.height() &gt; b.y) {
          console.log("COLLISION!!!");
          return true;
  }
  else{
      console.log("NO COLLISION!!!");
      return false;
  }
      }
  
  function theDragFunc(pos) {
  var thisRect;
  if(parseInt(this.getClientRect().width) != parseInt(this.width())){
  if(userRotation == 90 || userRotation == 270)
  thisRect = {x: this.x(), y: this.y(), width: this.getClientRect().height, height: this.getClientRect().width};
  else
  thisRect = {x: this.x(), y: this.y(), width: this.getClientRect().width, height: this.getClientRect().height};
  console.log("must have changed userRotation="+userRotation);
  }
  else{
  thisRect = {x: this.x(), y: this.y(), width: this.width(), height: this.height()};
  //console.log("must not have changed userRotation="+userRotation);
  }
  
  var isCollision = false;
  for(var i=0; i &lt; shapes.length; i++) {
  
  
      var a = shapes[i];
      var b = thisRect;
      if((a.x() === thisRect.x) &amp;&amp; (a.y() === thisRect.y) &amp;&amp; (a.width() === thisRect.width) &amp;&amp; (a.height() === thisRect.height))
      {
          console.log("this is the same item");
  
      }
      else
      {
      isCollision =intersectRect(shapes[i], thisRect);
      if(isCollision)
      break;
      }
  }
  
  
      if(isCollision)
      {
      var newX = 0;
      var newY = 0
      console.log("pointer x was "+startPointX + " and is now" + stage.getPointerPosition().x);
      console.log("pointer y was"+startPointY + " and is now " + stage.getPointerPosition().y);
      var threshold = 5;
      var restraint = 5;
     var distX =  startPointX  &gt;  stage.getPointerPosition().x  ? startPointX  -  stage.getPointerPosition().x :     stage.getPointerPosition().x - startPointX;// get horizontal dist traveled by finger while in contact with surface
      var distY =  startPointY  &gt;  stage.getPointerPosition().y  ? startPointY  -  stage.getPointerPosition().y :     stage.getPointerPosition().y - startPointY;// get horizontal dist traveled by finger while in contact with surface
       var swipedir = "nodirection";
      if (distX &gt; distY &amp;&amp; distX &gt; 1){ // 2nd condition for horizontal swipe met
              swipedir = stage.getPointerPosition().x  &lt; startPointX ? 'left' : 'right' ;// if dist traveled is negative, it indicates left swipe
          }
          else if (distY &gt; distX &amp;&amp; distY &gt; 1){ // 2nd condition for vertical swipe met
              swipedir = stage.getPointerPosition().y  &lt; startPointY ? 'up' : 'down'; // if dist traveled is negative, it indicates up swipe
          }
  
  console.log("swipedir = "+ swipedir);
  if(swipedir == "left")
  {
      newX = thisRect.x +10;
      startPointX = newX;
      newY = thisRect.y;
      startPointY = newY;
  }
  else if(swipedir == "right")
  {
      newX = thisRect.x -10;
          startPointX = newX;
      newY = thisRect.y;
          startPointY = newY;
  }
  else if(swipedir == "up")
  {
      newX = thisRect.x ;
          startPointX = newX;
      newY = thisRect.y + 10; 
      startPointY = newY;
  }
  else if(swipedir == "down")
  {
      newX = thisRect.x ;
          startPointX = newX;
      newY = thisRect.y - 10;
          startPointY = newY;
  }
  else
  {
          newX = thisRect.x ;
              startPointX = newX;
      newY = thisRect.y;
          startPointY = newY;
  }
  
  this.setDraggable(false);
  this.setX(newX);
  this.setY(newY);
  layer.draw();
  this.setDraggable(true);
   return {
  
  x: newX,
  y: newY
  }   
  }
  </code></pre>