Question: onDragEnd group children coordinates

Thank you for perfect library. I have some troubles with group with Rect children in it. I want to update coordinates of rects in onDragEnd group function:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Stage, Layer, Group, Rect } from "react-konva";

import "./styles.css";

const RECTS = [
  { x: 190, y: 220 },
  { x: 200, y: 130 },
  { x: 260, y: 130 },
  { x: 260, y: 220 }
];

const DOT_LENGTH = 15;

function App() {
  const [rects, setRects] = useState(RECTS);
  const [group, setGroup] = useState({ x: 0, y: 0 });

  const onDragEnd = e => {
    const group = e.target;

    const newRects = [...rects].map((item, index) => {
      const rect = group.findOne(node => {
        return node.className === "Rect" && node.name() === `${index}`;
      });
      const { x, y } = rect.getAbsolutePosition();
      // let x = rect.x(); let y = rect.y();
      // console.log(rect.getAbsolutePosition())

      return { x, y };
    });

    setRects(newRects);
    setGroup({ x: group.x(), y: group.y() });
  };

  return (
    <div className="App">
      <Stage width={1000} height={1000}>
        <Layer>
          <Group x={group.x} y={group.y} onDragEnd={onDragEnd} draggable>
            {rects.map((item, index) => (
              <Rect
                offsetX={DOT_LENGTH / 2}
                offsetY={DOT_LENGTH / 2}
                x={item.x}
                y={item.y}
                key={index}
                name={`${index}`}
                stroke="#000"
                fill="#000"
                strokeWidth={0}
                width={DOT_LENGTH}
                height={DOT_LENGTH}
              />
            ))}
          </Group>
        </Layer>
      </Stage>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

But I see some jumping after it. Where is a problem?

[lavrton]

Sure. It really depends how you store you data and how you structure your components.

You can use node.getAbsolutePosition() to know where a node is after parent drag. Or just calculate it manually.

[lavrton]

You can just use e.target inside dragend to get access to Konva nodes.