diff --git a/src/Node.js b/src/Node.js index 72c50b2f..6ecb902e 100644 --- a/src/Node.js +++ b/src/Node.js @@ -619,16 +619,17 @@ * @methodOf Kinetic.Node.prototype * @param {String} eventType event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent * @param {EventObject} evt event object - * @param {Boolean} preventBubble setting the value to false, or leaving it undefined, will result in the event bubbling. Setting the value to true will result in the event not bubbling. + * @param {Boolean} bubble setting the value to false, or leaving it undefined, will result in the event + * not bubbling. Setting the value to true will result in the event bubbling. */ - fire: function(eventType, evt, preventBubble) { - // no bubble - if (preventBubble) { - this._executeHandlers(eventType, evt || {}); - } + fire: function(eventType, evt, bubble) { // bubble + if (bubble) { + this._fireAndBubble(eventType, evt || {}); + } + // no bubble else { - this._executeAndBubble(eventType, evt || {}); + this._fire(eventType, evt || {}); } }, /** @@ -890,16 +891,16 @@ this.cachedTransform = null; }, _fireBeforeChangeEvent: function(attr, oldVal, newVal) { - this.fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, { + this._fire(BEFORE + Kinetic.Util._capitalize(attr) + CHANGE, { oldVal: oldVal, newVal: newVal - }, true); + }); }, _fireChangeEvent: function(attr, oldVal, newVal) { - this.fire(attr + CHANGE, { + this._fire(attr + CHANGE, { oldVal: oldVal, newVal: newVal - }, true); + }); }, /** * set id @@ -948,7 +949,7 @@ this._fireChangeEvent(key, oldVal, val); } }, - _executeAndBubble: function(eventType, evt, compareShape) { + _fireAndBubble: function(eventType, evt, compareShape) { if(evt && this.nodeType === SHAPE) { evt.targetNode = this; } @@ -964,20 +965,20 @@ } if(okayToRun) { - this._executeHandlers(eventType, evt); + this._fire(eventType, evt); // simulate event bubbling if(evt && !evt.cancelBubble && this.parent) { if(compareShape && compareShape.parent) { - this._executeAndBubble.call(this.parent, eventType, evt, compareShape.parent); + this._fireAndBubble.call(this.parent, eventType, evt, compareShape.parent); } else { - this._executeAndBubble.call(this.parent, eventType, evt); + this._fireAndBubble.call(this.parent, eventType, evt); } } } }, - _executeHandlers: function(eventType, evt) { + _fire: function(eventType, evt) { var events = this.eventListeners[eventType], len, i; @@ -999,10 +1000,10 @@ node: this }; - this.fire(BEFORE_DRAW, evt); + this._fire(BEFORE_DRAW, evt); this.drawScene(); this.drawHit(); - this.fire(DRAW, evt); + this._fire(DRAW, evt); }, shouldDrawHit: function() { return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging(); diff --git a/src/Stage.js b/src/Stage.js index 6576cdb0..7a6b8027 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -348,8 +348,8 @@ targetShape = this.targetShape; if(targetShape && !go.isDragging()) { - targetShape.fire(MOUSEOUT, evt); - targetShape.fire(MOUSELEAVE, evt); + targetShape._fireAndBubble(MOUSEOUT, evt); + targetShape._fireAndBubble(MOUSELEAVE, evt); this.targetShape = null; } this.mousePos = undefined; @@ -366,15 +366,15 @@ if(shape) { if(!go.isDragging() && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { if(this.targetShape) { - this.targetShape.fire(MOUSEOUT, evt, shape); - this.targetShape.fire(MOUSELEAVE, evt, shape); + this.targetShape._fireAndBubble(MOUSEOUT, evt, shape); + this.targetShape._fireAndBubble(MOUSELEAVE, evt, shape); } - shape.fire(MOUSEOVER, evt, this.targetShape); - shape.fire(MOUSEENTER, evt, this.targetShape); + shape._fireAndBubble(MOUSEOVER, evt, this.targetShape); + shape._fireAndBubble(MOUSEENTER, evt, this.targetShape); this.targetShape = shape; } else { - shape.fire(MOUSEMOVE, evt); + shape._fireAndBubble(MOUSEMOVE, evt); } } } @@ -383,8 +383,8 @@ * to run mouseout from previous target shape */ else if(this.targetShape && !go.isDragging()) { - this.targetShape.fire(MOUSEOUT, evt); - this.targetShape.fire(MOUSELEAVE, evt); + this.targetShape._fireAndBubble(MOUSEOUT, evt); + this.targetShape._fireAndBubble(MOUSELEAVE, evt); this.targetShape = null; } @@ -402,7 +402,7 @@ shape = obj.shape; this.clickStart = true; this.clickStartShape = shape; - shape.fire(MOUSEDOWN, evt); + shape._fireAndBubble(MOUSEDOWN, evt); } //init stage drag and drop @@ -419,7 +419,7 @@ if(obj && obj.shape) { shape = obj.shape; - shape.fire(MOUSEUP, evt); + shape._fireAndBubble(MOUSEUP, evt); // detect if click or double click occurred if(this.clickStart) { @@ -428,10 +428,10 @@ * the correct shape, don't fire click or dbl click event */ if(!go.isDragging() && shape._id === this.clickStartShape._id) { - shape.fire(CLICK, evt); + shape._fireAndBubble(CLICK, evt); if(this.inDoubleClickWindow) { - shape.fire(DBL_CLICK, evt); + shape._fireAndBubble(DBL_CLICK, evt); } this.inDoubleClickWindow = true; setTimeout(function() { @@ -454,7 +454,7 @@ shape = obj.shape; this.tapStart = true; this.tapStartShape = shape; - shape.fire(TOUCHSTART, evt); + shape._fireAndBubble(TOUCHSTART, evt); } //init stage drag and drop @@ -471,7 +471,7 @@ if(obj && obj.shape) { shape = obj.shape; - shape.fire(TOUCHEND, evt); + shape._fireAndBubble(TOUCHEND, evt); // detect if tap or double tap occurred if(this.tapStart) { @@ -480,10 +480,10 @@ * event */ if(!go.isDragging() && shape._id === this.tapStartShape._id) { - shape.fire(TAP, evt); + shape._fireAndBubble(TAP, evt); if(this.inDoubleClickWindow) { - shape.fire(DBL_TAP, evt); + shape._fireAndBubble(DBL_TAP, evt); } this.inDoubleClickWindow = true; setTimeout(function() { @@ -505,7 +505,7 @@ if(obj && obj.shape) { shape = obj.shape; - shape.fire(TOUCHMOVE, evt); + shape._fireAndBubble(TOUCHMOVE, evt); } // start drag and drop diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 0fedfc84..712ce9ba 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -444,12 +444,12 @@ Test.Modules.EVENT = { layer.add(circle); stage.add(layer); - - test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event'); + // Note: draw events no longer bubble + //test(eventNodes.toString() === 'Layer,Stage', 'layer draw event should have fired followed by stage draw event'); test(savedEvt.node.getNodeType() === 'Layer', 'event object should contain a node property which is Layer'); - test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw'); + //test(order.toString() === 'layer beforeDraw,stage beforeDraw,layer draw,stage draw', 'order should be: layer beforeDraw,stage beforeDraw,layer draw,stage draw'); }, 'click mapping': function(containerId) {