diff --git a/test/sandbox.html b/test/sandbox.html index 38171c6d3..674c2c187 100644 --- a/test/sandbox.html +++ b/test/sandbox.html @@ -43,8 +43,10 @@ x: 100, y: 150, radius: 50, - fill: 'red', draggable: true, + fillLinearGradientStartPoint: { x: -50, y: -50 }, + fillLinearGradientEndPoint: { x: 50, y: 50 }, + fillLinearGradientColorStops: [0, 'red', 1, 'yellow'], }); layer.add(circle); diff --git a/test/unit/Transformer-test.ts b/test/unit/Transformer-test.ts index 06a203870..90c1b40c6 100644 --- a/test/unit/Transformer-test.ts +++ b/test/unit/Transformer-test.ts @@ -2353,7 +2353,7 @@ describe('Transformer', function () { layer.add(rect); var tr = new Konva.Transformer({ - nodes: [rect] + nodes: [rect], }); layer.add(tr); layer.draw(); @@ -2385,7 +2385,7 @@ describe('Transformer', function () { var tr = new Konva.Transformer({ nodes: [rect], - rotateAnchorCursor: 'grab' + rotateAnchorCursor: 'grab', }); layer.add(tr); layer.draw(); @@ -4878,4 +4878,55 @@ describe('Transformer', function () { tr.anchorStyleFunc(null); assert.equal(handler.fill(), 'white'); }); + + it.only('flip rectangle', function () { + var stage = addStage(); + var layer = new Konva.Layer(); + stage.add(layer); + + var rect = new Konva.Rect({ + draggable: true, + x: 150, + y: 50, + width: 100, + height: 100, + fillLinearGradientStartPoint: { x: -50, y: -50 }, + fillLinearGradientEndPoint: { x: 50, y: 50 }, + fillLinearGradientColorStops: [0, 'red', 1, 'yellow'], + }); + layer.add(rect); + + var tr = new Konva.Transformer({ + nodes: [rect], + flipEnabled: false, + }); + layer.add(tr); + + layer.draw(); + + simulateMouseDown(tr, { + x: 150, + y: 50, + }); + simulateMouseMove(tr, { + x: 250, + y: 50, + }); + simulateMouseMove(tr, { + x: 350, + y: 50, + }); + + simulateMouseUp(tr, { + x: 350, + y: 50, + }); + + layer.draw(); + + assertAlmostEqual(rect.x(), 350); + assertAlmostEqual(rect.y(), 50); + assertAlmostEqual(rect.scaleX(), 1); + assertAlmostEqual(rect.scaleY(), -1); + }); });