add shape as second argument for sceneFunc and hitFunc

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Fixed
 
 * Typescript fixes
+* add shape as second argument for `sceneFunc` and `hitFunc`
 
 ## [2.1.4][2018-06-15]
 

src/Shape.js

@@ -39,13 +39,14 @@
    *   y: 10,
    *   fill: 'red',
    *   // a Konva.Canvas renderer is passed into the sceneFunc function
-   *   sceneFunc: function(context) {
+   *   sceneFunc: function(context, shape) {
    *     context.beginPath();
    *     context.moveTo(200, 50);
    *     context.lineTo(420, 80);
    *     context.quadraticCurveTo(300, 100, 260, 170);
    *     context.closePath();
-   *     context.fillStrokeShape(this);
+   *     // Konva specific method
+   *     context.fillStrokeShape(shape);
    *   }
    *});
    */
@@ -340,7 +341,7 @@
           }
         }
 
-        drawFunc.call(this, bufferContext);
+        drawFunc.call(this, bufferContext, this);
         bufferContext.restore();
 
         var ratio = bufferCanvas.pixelRatio;
@@ -391,13 +392,13 @@
           }
           context._applyShadow(this);
 
-          drawFunc.call(this, context);
+          drawFunc.call(this, context, this);
           context.restore();
           // if shape has stroke we need to redraw shape
           // otherwise we will see a shadow under stroke (and over fill)
           // but I think this is unexpected behavior
           if (this.hasFill() && this.getShadowForStrokeEnabled()) {
-            drawFunc.call(this, context);
+            drawFunc.call(this, context, this);
           }
         } else if (hasShadow && !canvas.hitCanvas) {
           context.save();
@@ -406,14 +407,14 @@
             context._applyGlobalCompositeOperation(this);
           }
           context._applyShadow(this);
-          drawFunc.call(this, context);
+          drawFunc.call(this, context, this);
           context.restore();
         } else {
           if (!caching) {
             context._applyOpacity(this);
             context._applyGlobalCompositeOperation(this);
           }
-          drawFunc.call(this, context);
+          drawFunc.call(this, context, this);
         }
       }
       context.restore();
@@ -453,7 +454,7 @@
           context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
         }
       }
-      drawFunc.call(this, context);
+      drawFunc.call(this, context, this);
       context.restore();
       return this;
     },

test/unit/Shape-test.js

@@ -1444,4 +1444,35 @@ suite('Shape', function() {
       compareLayers(layer1, layer2, 30);
     }
   });
+
+  // ======================================================
+  test('sceneFunc and hitFunc should have shape as second argument', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    var shape = new Konva.Shape({
+      sceneFunc: function(context, shape) {
+        assert.equal(this, shape);
+        context.beginPath();
+        context.moveTo(0, 0);
+        context.lineTo(100, 0);
+        context.lineTo(100, 100);
+        context.closePath();
+        context.fillStrokeShape(shape);
+      },
+      x: 200,
+      y: 100,
+      fill: 'green',
+      stroke: 'blue',
+      strokeWidth: 5
+    });
+    layer.add(shape);
+
+    var rect = new Konva.Rect({
+      hitFunc: function(ctx, shape) {
+        assert.equal(this, shape);
+      }
+    });
+    layer.add(rect);
+    stage.add(layer);
+  });
 });