group disappears while being dragged react-konva

Question

currently working on a react-konva project with type script, trying to drag a group (it has a text and a rect shaped container..) , I created some functions for onDragMove,End and start , but whenever I start to drag the Item it dissappears, worked when I only dragged a text

tried to change parametesrs, put any parameters , change the values

the code for the dnd:

const handleDragStart = (draggedItem: KonvaEventObject<DragEvent>) => {
      if (draggedItem.target.isDragging() === true) {
        setStartingX(() => draggedItem.evt.clientX);
        setStartingY(() => draggedItem.evt.clientY);
      }

      draggedItem.target.scaleX(1.5);
      draggedItem.target.scaleY(1.5);
    };

    const handleDragMove = (draggedItem: KonvaEventObject<DragEvent>) => {
      const x = draggedItem.evt.clientX;
      const y = draggedItem.evt.clientY;

      if (x < 0) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else if (y > height - 50) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else if (y < 0) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else if (x > width - 200) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else {
        draggedItem.target.absolutePosition({
          x: Math.round(x / blockSnapWidthSize) * blockSnapWidthSize,
          y: Math.round(y / blockSnapHeightSize) * blockSnapHeightSize,
        });
      }

      draggedItem.target.scaleX(1.5);
      draggedItem.target.scaleY(1.5);
    };

    const handleDragEnd = (draggedItem: KonvaEventObject<DragEvent>) => {
      const x = draggedItem.evt.clientX;
      const y = draggedItem.evt.clientY;

      if (x < 0) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else if (y > height - 50) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else if (y < 0) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else if (x > width - 200) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else {
        draggedItem.target.position({
          x: Math.round(x / blockSnapWidthSize) * blockSnapWidthSize,
          y: Math.round(y / blockSnapHeightSize) * blockSnapHeightSize,
        });
      }

      draggedItem.target.scaleX(1);
      draggedItem.target.scaleY(1);
    };

Answer 1

I don't think you should use draggedItem.evt.clientX. evt.clientX is referencing to a native event on the position of the mouse relative to the page. That position may be very far from coordinates of the node, relative to konva stage.

It may be better to use konva methods to get positions, such as:

const handleDragMove = (event: KonvaEventObject<DragEvent>) => {
  const node = event.target;
  const pos = node.position();
  const absPos = node.absolutePosition();
  // reset of your code
};