diff --git a/src/Container.ts b/src/Container.ts index 167831be..efd4c2f5 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 f0cc602a..c2ec769f 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();' + ); }); });