diff --git a/CHANGELOG.md b/CHANGELOG.md index 571532a7..21fa306e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,10 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## 10.0.7 (2025-10-22) + +- Fixed image element size re-calculation when change is changed with transformer is used. + ## 10.0.6 (2025-10-22) - Better `Image.getClientRect()` calculation if an instance has no image attached yet diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index 9423eb11..d9b026a1 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -193,6 +193,7 @@ export class Image extends Shape { } Image.prototype.className = 'Image'; +Image.prototype._attrsAffectingSize = ['image']; _registerNode(Image); /** diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts index 5e93aeab..c2bed6e4 100644 --- a/test/unit/Transformer-test.ts +++ b/test/unit/Transformer-test.ts @@ -3742,6 +3742,48 @@ describe('Transformer', function () { (assert.deepEqual(shape.getClientRect(), rect), 'change data'); }); + it('attrs change - image', function () { + var stage = addStage(); + var layer = new Konva.Layer(); + stage.add(layer); + + // Create a small canvas to use as an image + var canvas1 = Konva.Util.createCanvasElement(); + canvas1.width = 100; + canvas1.height = 100; + + var shape = new Konva.Image({ + x: 50, + y: 50, + image: canvas1, + }); + layer.add(shape); + + var tr = new Konva.Transformer({ + nodes: [shape], + }); + layer.add(tr); + + // Check initial size + var rect = Konva.Util._assign({}, tr._getNodeRect()); + delete rect.rotation; + assert.deepEqual(shape.getClientRect(), rect, 'initial image'); + assert.equal(tr.width(), 100, 'initial width'); + assert.equal(tr.height(), 100, 'initial height'); + + // Change to a larger image + var canvas2 = Konva.Util.createCanvasElement(); + canvas2.width = 200; + canvas2.height = 150; + shape.image(canvas2); + + var rect = Konva.Util._assign({}, tr._getNodeRect()); + delete rect.rotation; + assert.deepEqual(shape.getClientRect(), rect, 'change image size'); + assert.equal(tr.width(), 200, 'new width'); + assert.equal(tr.height(), 150, 'new height'); + }); + it('make sure transformer events are not cloned', function () { var stage = addStage(); var layer = new Konva.Layer();