I’m working on an Angular application that uses KonvaJS to manage a stage with multiple groups (nodes). I’ve implemented a multi-select feature that allows me to apply a transformer to these groups. However, I’m facing an issue when resizing the groups using the transformer.

The Problem:

When I resize a group using the transformer, the nodes inside the group not only resize but also change their positions. I want to prevent this behavior so that the nodes’ positions remain fixed during resizing, and only their sizes are adjusted.

What I’ve Tried:

I’ve added an event listener for the transform event on the Transformer to try and manually adjust the node positions. Here’s the code I’m using:

this.transformer.on('transform', () => {
  const scaleX = this.transformer.scaleX();
  const scaleY = this.transformer.scaleY();

  // Reset the transformer's scale to avoid cumulative scaling
  this.transformer.scaleX(1);
  this.transformer.scaleY(1);

  // Adjust the sizes of the nodes within the group while keeping their positions fixed
  this.transformer.nodes().forEach((node: any) => {
    // Keep the node's position the same
    const originalPosition = node.position();

    // Calculate the new width and height based on the transformer's scale
    const newWidth = node.width() * scaleX;
    const newHeight = node.height() * scaleY;

    // Apply the new width and height to the node
    node.width(newWidth);
    node.height(newHeight);

    // Reapply the original position
    node.position(originalPosition);
  });

  // Redraw the layer to apply changes
  this.transformerLayer.batchDraw();
});

Despite this, the nodes are still moving when I resize the group. The positions are not staying fixed as I would expect. I’ve tried different approaches, but none seem to work as intended.

Question:

How can I modify the Transformer or adjust the transform event handling so that the nodes within a group only resize but do not change their positions? I want the groups to stay in place during resizing. Any guidance or code examples would be greatly appreciated!