title: KonvaJS: How to connect n shapes to one another with lines?
body: <p>I am trying to draw n boxes on the screen and connect them with lines to one another. I am able to draw the boxes and lines connecting them but the boxes are draggable. My issue is that when a box is moved, the line(s) connecting it to other boxes don't move with it. </p>
  
  <p>I already tried the other post here but that only worked with 2 boxes and one line. </p>
  
  <pre><code>let box2 = {x:500, y:20, width:150, height:100, color:'green', children:[]}
  let box3 = {x:300, y:300, width:150, height:100, color:'blue', children:[]}
  let box_1 = {x:20, y:20, width:150, height:100, color:'red', children:[box2, box3]};
  
  let boxes = [box_1, box2, box3];
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  var stage = new Konva.Stage({
    container: 'container',
    width: 600,
    height: 800
  });
  var layer = new Konva.Layer();
  
  function drawline(box1, box2){
      let startX = box1.getX();
      let startY = box1.getY();
      let endX = box2.getX()
      let endY = box2.getY();
  
      var line = new Konva.Line({
        points: [startX, startY, endX, endY],
        stroke: 'black',
        strokeWidth: 5,
        lineCap: 'round',
        lineJoin: 'round',
        draggable: true
      });
      layer.add(line);
  }
  
  function drawBoxes(listOfBoxes){
  
      for (var i = 0; i &lt; listOfBoxes.length; i++) {
          let rect = listOfBoxes[i];
  
          var box1 = new Konva.Rect({
              x: rect['x'],
              y: rect['y'],
              width: rect['width'],
              height: rect['height'],
              fill: rect['color'],
              stroke: 'black',
              strokeWidth: 4,
              draggable: true
          });
          layer.add(box1);
  
          for (var child = 0; child &lt; rect['children'].length; child++) {
              var box2 = new Konva.Rect({
              x: rect['children'][child]['x'],
              y: rect['children'][child]['y'],
              width: rect['children'][child]['width'],
              height: rect['children'][child]['height'],
              fill: rect['children'][child]['color'],
              stroke: 'black',
              strokeWidth: 4,
              draggable: true
          });
              drawline(box1, box2);
          }
      }
  }
  
  
  drawBoxes(boxes);
  stage.add(layer);
  
  </code></pre>