Group.getClientRect() returns unexpected results when the Group contains a Transformer #1891

whowrotethiscode · 2025-02-24T13:34:11Z

Hello,

Konva version: 9.3.18

Group.getClientRect({ relativeTo: stage }) returns unexpected results
when the Group contains a Transformer
and the Stage has been dragged.

Please see the code below which renders:

Stage (draggable)
Group which contains:
- Circle green
- Circle red (draggable)
- Transformer for the red Circle
Rect black which displays the result of Group.getClientRect({ relativeTo: stage })

Instructions:

Drag the red circle around
The black box tightly encloses both of the circles (expected)
Drag the stage around and then drag the red circle around
The black box does NOT tightly enclose both of the circles (unexpected)

If the Group does not contain the Transformer then this does not happen.

This seems like a bug... but maybe I am missing something?

Thanks!

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <style> body { margin:0; padding:0; overflow:hidden; background-color:#f0f0f0; } </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        draggable: true
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var rect = new Konva.Rect({
         stroke: 'black',
         strokeWidth: 1,
      });
      layer.add(rect);

      var group = new Konva.Group();
      layer.add(group);

      var greenCircle = new Konva.Circle({
        x: 200,
        y: 200,
        radius: 20,
        fill: 'green',
        draggable: false,
      });
      group.add(greenCircle);

      var redCircle = new Konva.Circle({
        x: 100,
        y: 100,
        radius: 40,
        fill: 'red',
        draggable: true,
      });
      group.add(redCircle); 

      var transformer = new Konva.Transformer({
        nodes: [redCircle],
      });
      group.add(transformer);

      redCircle.on('dragend transformend', function() {
         var clientRect = group.getClientRect({ relativeTo: stage });
         rect.x(clientRect.x);
         rect.y(clientRect.y);
         rect.width(clientRect.width);
         rect.height(clientRect.height);
      });
    </script>
  </body>
</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Group.getClientRect() returns unexpected results when the Group contains a Transformer #1891

Group.getClientRect() returns unexpected results when the Group contains a Transformer #1891

whowrotethiscode commented Feb 24, 2025

Group.getClientRect() returns unexpected results when the Group contains a Transformer #1891

Group.getClientRect() returns unexpected results when the Group contains a Transformer #1891

Comments

whowrotethiscode commented Feb 24, 2025