better context method. close #343

package.json

@@ -53,6 +53,7 @@
       "path": "./lib/index.js"
     },
     {
+      "limit": "26 KB",
       "path": "./lib/Core.js"
     },
     {

src/Container.ts

@@ -5,10 +5,11 @@ import { getNumberValidator } from './Validators';
 import { GetSet, IRect } from './types';
 import { Shape } from './Shape';
 import { HitCanvas, SceneCanvas } from './Canvas';
+import { SceneContext } from './Context';
 
 export interface ContainerConfig extends NodeConfig {
   clearBeforeDraw?: boolean;
-  clipFunc?: (ctx: CanvasRenderingContext2D) => void;
+  clipFunc?: (ctx: SceneContext) => void;
   clipX?: number;
   clipY?: number;
   clipWidth?: number;

src/Context.ts

@@ -390,9 +390,9 @@ export class Context {
     a7?: number,
     a8?: number
   ) {
+    // this._context.drawImage(...arguments);
     var a = arguments,
       _context = this._context;
-
     if (a.length === 3) {
       _context.drawImage(a0, a1, a2);
     } else if (a.length === 5) {
@@ -431,8 +431,12 @@ export class Context {
    * @method
    * @name Konva.Context#fill
    */
-  fill() {
+  fill(path2d?: Path2D) {
-    this._context.fill();
+    if (path2d) {
+      this._context.fill(path2d);
+    } else {
+      this._context.fill();
+    }
   }
   /**
    * fillRect function.
@@ -586,8 +590,12 @@ export class Context {
    * @method
    * @name Konva.Context#stroke
    */
-  stroke() {
+  stroke(path2d?: Path2D) {
-    this._context.stroke();
+    if (path2d) {
+      this._context.stroke(path2d);
+    } else {
+      this._context.stroke();
+    }
   }
   /**
    * strokeText function.
@@ -661,9 +669,10 @@ export class Context {
     };
   }
   _applyGlobalCompositeOperation(node) {
-    var globalCompositeOperation = node.getGlobalCompositeOperation();
+    const op = node.attrs.globalCompositeOperation;
-    if (globalCompositeOperation !== 'source-over') {
+    var def = !op || op === 'source-over';
-      this.setAttr('globalCompositeOperation', globalCompositeOperation);
+    if (!def) {
+      this.setAttr('globalCompositeOperation', op);
     }
   }
 }
@@ -680,7 +689,7 @@ CONTEXT_PROPERTIES.forEach(function (prop) {
 });
 
 export class SceneContext extends Context {
-  _fillColor(shape) {
+  _fillColor(shape: Shape) {
     var fill = shape.fill();
 
     this.setAttr('fillStyle', fill);

test/unit/Container-test.ts

@@ -69,6 +69,44 @@ describe('Container', function () {
     compareLayers(layer, clipedLayer, 150);
   });
 
+  // ======================================================
+  it('clip function', function () {
+    var stage = addStage();
+
+    // cliped by circle is the same as draw circle
+    var layer = new Konva.Layer();
+    stage.add(layer);
+    var circle = new Konva.Circle({
+      fill: 'black',
+      x: 50,
+      y: 50,
+      radius: 40,
+    });
+    layer.add(circle);
+
+    layer.draw();
+
+    var clipedLayer = new Konva.Layer({
+      clipFunc: function (ctx) {
+        const path2D = new Path2D();
+        path2D.arc(50, 50, 40, 0, Math.PI * 2, false);
+        ctx.fill(path2D);
+      },
+    });
+    stage.add(clipedLayer);
+    var rect = new Konva.Rect({
+      x: 10,
+      y: 10,
+      fill: 'black',
+      width: 200,
+      height: 200,
+    });
+    clipedLayer.add(rect);
+    stage.draw();
+
+    compareLayers(layer, clipedLayer, 150);
+  });
+
   // ======================================================
   it('adder validation', function () {
     var stage = addStage();

test/unit/Node-cache-test.ts

@@ -1203,8 +1203,6 @@ describe('Caching', function () {
     layer.draw();
 
     cloneAndCompareLayer(layer, 10);
-
-    // throw 1;
   });
 
   it('check caching with global composite operation', function () {