CODEWITHSUNDEEP
zoomingdragshapeskonvajspan
Hichem CHTARA
Hichem CHTARA

Reputation: 25

KonvaJS Graph Editor Move Nodes

I am developing a Graph Editor with Nodes and Branches. With Pan/Zoom. I am starting with the (1) Pan/Zoom (done), (2) Add Nodes (done), (3) Select Nodes (done), (4) Move Nodes (disable the Pan). I am stuck here. I made the stage draggable for the Pan. When I want to move (drag) the nodes, I put draggable of the stage to false. But I don't see how to drag the nodes. The use of the Graph Editor is (+) Nodes to create the nodes. Thanks for any help.

Here is a jsbin https://jsbin.com/suqisak/4/edit?html,js,output

    function evtFct_OnMouseDragStart(event) {
    var realMousePos = getRelativePointerPosition(group);

    console.log('DragStart');
    if (Nodes_list.length > 0) {
        var SelectedNode = getSelected_Node(realMousePos);
        if (SelectedNode !== null) {
            SelectedNode.circle.draggable(true);
        }
    }

}

I dont see how to make the nodes (circles) draggable. the event DragStart Doesn't fire !!!

Then I created a group with the circle + label, and made the group draggable. 

    draw() {
    this.View = new Konva.Group({draggable: true});

    this.circle = new Konva.Circle({
        x: this.x,
        y: this.y,
        radius: nodeSize,
        fill: nodeColor,
        draggable: true,
        id: this.node_id
    });

  this.label = new Konva.Text({
        x: this.x - 20,
        y: this.y - 10,
        text: this.node_id,
        width: 40,
        height: 20,
        fontSize: 8,
        fontFamily: 'sans-serif',
        fill: 'blue',
        verticalAlign: 'middle',
        align: 'center'
  });

    this.View.add(this.circle);
    this.View.add(this.label);

    group.add(this.View);
}

And I could drag the nodes, BUT !!! I lost the node x, and y.
When I click on the node (near the node center), I knew near which node, I clicked. But Now !!! I lost the the x, and y of the new position !!!
Remark : In fact, I select the node by my own, I get the mouse click position. I loop through the nodes_list, to check if the position of the click and the circle center, have a distance less than the circle radius.

Finally, the question became, how to get the Node position coordinates (x,y) after the drag ?

Upvotes: 0

Views: 752

Answers (1)

lavrton
lavrton

Reputation: 20308

As you are making a group draggable, you just need to set position to it. Then for a circle and a text, you need to set position relative to the group:

        this.View = new Konva.Group({draggable: true, x: this.x, y: this.y });//added

        this.circle = new Konva.Circle({
            radius: nodeSize,
            fill: nodeColor,
            draggable: true,
            id: this.node_id
        });

      this.label = new Konva.Text({
            x: - 20,
            y: - 10,
            text: this.node_id,
            width: 40,
            height: 20,
            fontSize: 8,
            fontFamily: 'sans-serif',
            fill: 'blue',
            verticalAlign: 'middle',
            align: 'center'
      });

Then you just read the position from the group.

https://jsbin.com/yevozeyeza/1/edit?html,js,output

Upvotes: 0

Related Questions