KonvaJS: How to connect n shapes to one another with lines?

Question

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.

I already tried the other post here but that only worked with 2 boxes and one line.

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 < 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 < 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);

lavrton lavrton · Accepted Answer · 2019-02-19T18:59:12

You have to update a line's position manually when a box is moving. You can use dragmove event for that case.

function updateLinePosition(line, box1, box2) {
    let startX = box1.getX();
    let startY = box1.getY();
    let endX = box2.getX()
    let endY = box2.getY();

    line.points([startX, startY, endX, endY]);
}
function drawline(box1, box2){
    var line = new Konva.Line({
      stroke: 'black',
      strokeWidth: 5,
      lineCap: 'round',
      lineJoin: 'round',
      draggable: true
    });
    updateLinePosition(line, box1, box2);
    layer.add(line);

    box1.on('dragmove', () => {
      updateLinePosition(line, box1, box2);
    })
    box2.on('dragmove', () => {
      updateLinePosition(line, box1, box2);
    })
}

KonvaJS: How to connect n shapes to one another with lines?

1 Answers