React-konva move rectangle after rotating its div container

Question

I'm using react-konva library to draw a fixed size rectangle. The rectangle has mouse drag events onDragStart and onDragEnd to re-position the rectangle upon dragging it. The event is working fine when the parent div angle (id="parentDiv") is 0 degree. When I try to rotate the div using CSS rotate, the rectangle event doesn't fire and the rectangle doesn't move at all!. I'm totally new to react-konva library and I can't find any case similar to mine.

The full code for this case (codesandbox) can be found at this link .

If you have any questions let me know in the comments.

Answer 1

Currently Konva do not support containers transformed with CSS. It breaks event detection. You can try to rotate a stage or a layer to achieve a similar result.