Merge branch 'master' into MadeByMike-fix/1433/position-jitter-when-f…

…lip-enabled-is-false
konvajs · Oct 31, 2023 · a458582 · a458582
2 parents 92d9c6d + 56ce8a8
commit a458582
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 3 deletions.
diff --git 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
@@ -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);
+  });
 });