a bit fixes events flow

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+## Changes
+
+* Fixed flow for `contextmenu` event. Not it will be triggered on shapes too
+
 ## [2.0.2][2018-03-15]
 
 ## Fixed

konva.js

@@ -2767,11 +2767,11 @@
     },
     /**
      * bind events to the node. KonvaJS supports mouseover, mousemove,
-     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, click, dblclick, touchstart, touchmove,
+     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
      *  touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
      *  contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu
      *  contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
-     *  and contentDblTap.  Pass in a string of events delimmited by a space to bind multiple events at once
+     *  and contentDblTap.  Pass in a string of events delimited by a space to bind multiple events at once
      *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
      *  event by name such as 'click.foobar'.
      * @method
@@ -10612,6 +10612,18 @@
       }
     },
     _contextmenu: function(evt) {
+      this._setPointerPosition(evt);
+      var shape = this.getIntersection(this.getPointerPosition());
+
+      if (shape && shape.isListening()) {
+        shape._fireAndBubble(CONTEXTMENU, { evt: evt });
+      } else {
+        this._fire(CONTEXTMENU, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
+      }
       this._fire(CONTENT_CONTEXTMENU, { evt: evt });
     },
     _touchstart: function(evt) {

src/Node.js

@@ -412,11 +412,11 @@
     },
     /**
      * bind events to the node. KonvaJS supports mouseover, mousemove,
-     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, click, dblclick, touchstart, touchmove,
+     *  mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,
      *  touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports
      *  contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu
      *  contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,
-     *  and contentDblTap.  Pass in a string of events delimmited by a space to bind multiple events at once
+     *  and contentDblTap.  Pass in a string of events delimited by a space to bind multiple events at once
      *  such as 'mousedown mouseup mousemove'. Include a namespace to bind an
      *  event by name such as 'click.foobar'.
      * @method

src/Stage.js

@@ -614,7 +614,17 @@
     _contextmenu: function(evt) {
       this._setPointerPosition(evt);
       var shape = this.getIntersection(this.getPointerPosition());
-      this._fire(CONTENT_CONTEXTMENU, { evt: evt, target: shape });
+
+      if (shape && shape.isListening()) {
+        shape._fireAndBubble(CONTEXTMENU, { evt: evt });
+      } else {
+        this._fire(CONTEXTMENU, {
+          evt: evt,
+          target: this,
+          currentTarget: this
+        });
+      }
+      this._fire(CONTENT_CONTEXTMENU, { evt: evt });
     },
     _touchstart: function(evt) {
       this._setPointerPosition(evt);

test/unit/Shape-test.js

@@ -999,7 +999,7 @@ suite('Shape', function() {
     );
   });
 
-  test('class inherince', function() {
+  test('class inherence', function() {
     var rect = new Konva.Rect();
     assert.equal(rect instanceof Konva.Rect, true);
     assert.equal(rect instanceof Konva.Shape, true);

test/unit/Stage-test.js

@@ -902,6 +902,78 @@ suite('Stage', function() {
     assert.equal(dbltaps, 1, 'dbltap registered');
   });
 
+  test('pass context and wheel events to shape', function() {
+    var stage = addStage();
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var rect = new Konva.Rect({
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      fill: 'red'
+    });
+    layer.add(rect);
+    layer.draw();
+
+    var contextmenus = 0;
+    var wheels = 0;
+
+    // test on empty
+    stage.on('contextmenu', function(e) {
+      contextmenus += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('wheel', function(e) {
+      wheels += 1;
+      assert.equal(e.target, stage);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    var top = stage.content.getBoundingClientRect().top;
+    stage._contextmenu({
+      clientX: 0,
+      clientY: top + 0
+    });
+    stage._wheel({
+      clientX: 0,
+      clientY: top + 0
+    });
+
+    assert.equal(contextmenus, 1, 'first contextment registered');
+    assert.equal(wheels, 1, 'first wheel registered');
+
+    stage.off('contextmenu');
+    stage.off('wheel');
+
+    // test on shape
+    stage.on('contextmenu', function(e) {
+      contextmenus += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+
+    stage.on('wheel', function(e) {
+      wheels += 1;
+      assert.equal(e.target, rect);
+      assert.equal(e.currentTarget, stage);
+    });
+    stage._contextmenu({
+      clientX: 60,
+      clientY: top + 60
+    });
+    stage._wheel({
+      clientX: 60,
+      clientY: top + 60
+    });
+
+    assert.equal(contextmenus, 2, 'second contextment registered');
+    assert.equal(wheels, 2, 'second wheel registered');
+  });
+
   test('make sure it does not trigger too many events', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
@@ -1027,7 +1099,7 @@ suite('Stage', function() {
     assert.equal(stage.toDataURL(), layer.toDataURL());
   });
 
-  test('check hit graph with stage listeting property', function() {
+  test('check hit graph with stage listening property', function() {
     var stage = addStage();
     var layer = new Konva.Layer();
     stage.add(layer);