fix cliping with zero size. close #1723

konvajs · Mar 3, 2024 · eb4e2b4 · eb4e2b4
1 parent e767285
commit eb4e2b4
Show file tree

Hide file tree

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