KonvaJS Graph Editor Move Nodes - zooming

Question

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 ?

Answer 1

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