I am trying to implement quite a complex layout in Konva. I need the behavior similar to this codepen. I have multiple shapes, and whenever I start dragging any of them, all the underlying shapes should be dragged with it. In the codepen, though, for the sake of simplicity, this logic is only implemented for the topmost rectangle (red).
So here's how I thought it was gonna work.
mousedown event, dynamically create a draggable group, include all the needed shapesdragend event, ungroup elementsThe demo seems to work ok, but the problem is that group always has a position equal to (0, 0), wherever it was at the time I started dragging. You can drag the red rect around for some time, then open your console and see {x: 0, y: 0}. But how do I make it have coordinates relative to the layer?
I need it because sometimes when the dragging ends, I need to animate movement of the whole group to a specific location, and the fact that the initial position of the group is always (0, 0) makes it hard to calculate the destination position.
Positions of all nodes in Konva are relative. And by default, position of every node is {0, 0}.
When you create a group, you can set another position for it. But remember that you may need to adjust positions of all children (rectangles) because their positions will be relative to the moved group.
Also, you can initiate dragging of rectangles manually, without group.
r1.on('mousedown', () => {
r1.startDrag();
r2.startDrag();
r3.startDrag();
});