From eb4e2b4fef506e6250692cd6fd528e4a54569381 Mon Sep 17 00:00:00 2001
From: Anton Lavrenov <lavrton@gmail.com>
Date: Sun, 3 Mar 2024 10:42:25 +0700
Subject: [PATCH] fix cliping with zero size. close #1723

---
 src/Container.ts        |  6 ++++--
 test/unit/Group-test.ts | 41 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/Container.ts b/src/Container.ts
index 167831bec..efd4c2f53 100644
--- a/src/Container.ts
+++ b/src/Container.ts
@@ -392,7 +392,9 @@ export abstract class Container<
       clipWidth = this.clipWidth(),
       clipHeight = this.clipHeight(),
       clipFunc = this.clipFunc(),
-      hasClip = (clipWidth && clipHeight) || clipFunc;
+      hasClip =
+        (typeof clipWidth === 'number' && typeof clipHeight === 'number') ||
+        clipFunc;
 
     const selfCache = top === this;
 
@@ -408,7 +410,7 @@ export abstract class Container<
       } else {
         var clipX = this.clipX();
         var clipY = this.clipY();
-        context.rect(clipX, clipY, clipWidth, clipHeight);
+        context.rect(clipX || 0, clipY || 0, clipWidth, clipHeight);
       }
       context.clip.apply(context, clipArgs);
       m = transform.copy().invert().getMatrix();
diff --git a/test/unit/Group-test.ts b/test/unit/Group-test.ts
index f0cc602a0..c2ec769ff 100644
--- a/test/unit/Group-test.ts
+++ b/test/unit/Group-test.ts
@@ -55,15 +55,43 @@ describe('Group', function () {
     var path = new Konva.Group({
       width: 100,
       height: 100,
-      clipFunc: () => [new Path2D('M0 0v50h50Z')]
+      clipFunc: () => [new Path2D('M0 0v50h50Z')],
     });
 
     layer.add(path);
     stage.add(layer);
 
-    const trace = layer.getContext().getTrace()
+    const trace = layer.getContext().getTrace();
 
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();clip([object Path2D]);transform(1,0,0,1,0,0);restore();');
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();clip([object Path2D]);transform(1,0,0,1,0,0);restore();'
+    );
+  });
+
+  it('clip group with by zero size', function () {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+
+    var group = new Konva.Group({
+      width: 100,
+      height: 100,
+      clipWidth: 0,
+      clipHeight: 0,
+    });
+
+    layer.add(group);
+    stage.add(layer);
+
+    const trace = layer.getContext().getTrace();
+
+    console.log(trace);
+
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();rect(0,0,0,0);clip();transform(1,0,0,1,0,0);restore();'
+    );
   });
 
   it('clip group with a Path2D and clipRule', function () {
@@ -80,8 +108,11 @@ describe('Group', function () {
     layer.add(path);
     stage.add(layer);
 
-    const trace = layer.getContext().getTrace()
+    const trace = layer.getContext().getTrace();
 
-    assert.equal(trace, 'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();clip([object Path2D],evenodd);transform(1,0,0,1,0,0);restore();');
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);save();transform(1,0,0,1,0,0);beginPath();clip([object Path2D],evenodd);transform(1,0,0,1,0,0);restore();'
+    );
   });
 });