added new fire() method which fires synthetic events and custom events. Simulate() now simulates user events with event bubbling

dist/kinetic-Global-current.min.js

@@ -25,4 +25,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  * THE SOFTWARE.
  */
-var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUBBLE_WHITELIST:["mousedown","mousemove","mouseup","mouseover","mouseout","mouseenter","mouseleave","click","dblclick","touchstart","touchmove","touchend","tap","dbltap","dragstart","dragmove","dragend"],BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c in b){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this._removeTempNode(d))}},_addTempNode:function(a){this.tempNodes[a._id]=a},_removeTempNode:function(a){delete this.tempNodes[a._id]}};
+var Kinetic={};Kinetic.Filters={},Kinetic.Plugins={},Kinetic.Global={BUFFER_WHITELIST:["fill","stroke","textFill","textStroke"],BUFFER_BLACKLIST:["shadow"],stages:[],idCounter:0,tempNodes:{},shapes:{},warn:function(a){console&&console.warn&&console.warn("Kinetic warning: "+a)},extend:function(a,b){for(var c in b.prototype)c in a.prototype||(a.prototype[c]=b.prototype[c])},_pullNodes:function(a){var b=this.tempNodes;for(var c in b){var d=b[c];d.getStage()!==undefined&&d.getStage()._id===a._id&&(a._addId(d),a._addName(d),this._removeTempNode(d))}},_addTempNode:function(a){this.tempNodes[a._id]=a},_removeTempNode:function(a){delete this.tempNodes[a._id]}};

dist/kinetic-current.js

@@ -29,7 +29,6 @@ var Kinetic = {};
 Kinetic.Filters = {};
 Kinetic.Plugins = {};
 Kinetic.Global = {
-    BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
     BUFFER_BLACKLIST: ['shadow'],
     stages: [],
@@ -1680,15 +1679,25 @@ Kinetic.Node.prototype = {
         }
     },
     /**
-     * simulate event
+     * simulate event with event bubbling
      * @name simulate
      * @methodOf Kinetic.Node.prototype
      * @param {String} eventType
-     * @param {Object} event attribute
+     * @param {EventObject} evt event object
      */
     simulate: function(eventType, evt) {
         this._handleEvent(eventType, evt || {});
     },
+    /**
+     * synthetically fire an event.  The event object will not bubble up the Node tree.  You can also pass in custom properties
+     * @name fire
+     * @methodOf Kinetic.Node.prototype
+     * @param {String} eventType
+     * @param {Object} obj optional object which can be used to pass parameters
+     */
+    fire: function(eventType, obj) {
+        this._executeHandlers(eventType, obj || {});
+    },
     /**
      * get absolute transform of the node which takes into
      *  account its parent transforms
@@ -1993,14 +2002,11 @@ Kinetic.Node.prototype = {
 
         if(okayToRun) {
             if(el[eventType]) {
-                var events = el[eventType];
+                this.fire(eventType, evt);
-                for(var i = 0; i < events.length; i++) {
-                    events[i].handler.apply(this, [evt]);
-                }
             }
 
             // simulate event bubbling
-            if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
+            if(!evt.cancelBubble && this.parent) {
                 if(compareShape && compareShape.parent) {
                     this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
                 }
@@ -2010,6 +2016,12 @@ Kinetic.Node.prototype = {
             }
         }
     },
+    _executeHandlers: function(eventType, evt) {
+        var events = this.eventListeners[eventType];
+        for(var i = 0; i < events.length; i++) {
+            events[i].handler.apply(this, [evt]);
+        }
+    },
     _shouldDraw: function(canvas) {
         return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
     }

src/Global.js

@@ -29,7 +29,6 @@ var Kinetic = {};
 Kinetic.Filters = {};
 Kinetic.Plugins = {};
 Kinetic.Global = {
-    BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
     BUFFER_BLACKLIST: ['shadow'],
     stages: [],

src/Node.js

@@ -589,15 +589,25 @@ Kinetic.Node.prototype = {
         }
     },
     /**
-     * simulate event
+     * simulate event with event bubbling
      * @name simulate
      * @methodOf Kinetic.Node.prototype
      * @param {String} eventType
-     * @param {Object} event attribute
+     * @param {EventObject} evt event object
      */
     simulate: function(eventType, evt) {
         this._handleEvent(eventType, evt || {});
     },
+    /**
+     * synthetically fire an event.  The event object will not bubble up the Node tree.  You can also pass in custom properties
+     * @name fire
+     * @methodOf Kinetic.Node.prototype
+     * @param {String} eventType
+     * @param {Object} obj optional object which can be used to pass parameters
+     */
+    fire: function(eventType, obj) {
+        this._executeHandlers(eventType, obj || {});
+    },
     /**
      * get absolute transform of the node which takes into
      *  account its parent transforms
@@ -902,14 +912,11 @@ Kinetic.Node.prototype = {
 
         if(okayToRun) {
             if(el[eventType]) {
-                var events = el[eventType];
+                this.fire(eventType, evt);
-                for(var i = 0; i < events.length; i++) {
-                    events[i].handler.apply(this, [evt]);
-                }
             }
 
             // simulate event bubbling
-            if(Kinetic.Global.BUBBLE_WHITELIST.indexOf(eventType) >= 0 && !evt.cancelBubble && this.parent) {
+            if(!evt.cancelBubble && this.parent) {
                 if(compareShape && compareShape.parent) {
                     this._handleEvent.call(this.parent, eventType, evt, compareShape.parent);
                 }
@@ -919,6 +926,12 @@ Kinetic.Node.prototype = {
             }
         }
     },
+    _executeHandlers: function(eventType, evt) {
+        var events = this.eventListeners[eventType];
+        for(var i = 0; i < events.length; i++) {
+            events[i].handler.apply(this, [evt]);
+        }
+    },
     _shouldDraw: function(canvas) {
         return (this.isVisible() && (!canvas || canvas.name !== 'buffer' || this.getListening()));
     }

tests/js/functionalTests.js

@@ -616,7 +616,7 @@ Test.prototype.tests = {
         test(groupMousedowns === 4, 'groupMousedowns should be 4');
         test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
     },
-    '*EVENTS - group mouseenter events': function(containerId) {
+    'EVENTS - group mouseenter events': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,

tests/js/unitTests.js

@@ -937,8 +937,8 @@ Test.prototype.tests = {
         test(!layer2.isVisible(), 'layer2 should be invisible');
         test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
 
-		//console.log(layer1.toDataURL());
+        //console.log(layer1.toDataURL());
-		
+
         stage.toDataURL({
             callback: function(dataUrl) {
                 //console.log(dataUrl);
@@ -948,8 +948,7 @@ Test.prototype.tests = {
                 test(layer2.canvas.element.style.display === 'block', 'layer canvas element display should be block');
             }
         });
-        
+
-        
     },
     'LAYER - beforeDraw and afterDraw': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -2863,7 +2862,7 @@ Test.prototype.tests = {
         //layer.setListening(false);
         layer.drawBuffer();
     },
-	'SHAPE - test size setters and getters': function(containerId) {
+    'SHAPE - test size setters and getters': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2877,59 +2876,59 @@ Test.prototype.tests = {
             radius: 50,
             fill: 'red'
         });
-        
+
         var ellipse = new Kinetic.Ellipse({
             x: stage.getWidth() / 2,
             y: stage.getHeight() / 2,
             radius: {
-            	x: 100,
+                x: 100,
-            	y: 50
+                y: 50
             },
             fill: 'yellow'
         });
 
-		layer.add(ellipse);
+        layer.add(ellipse);
-		layer.add(circle);
+        layer.add(circle);
-		stage.add(layer);
+        stage.add(layer);
-		
+
-		// circle tests
+        // circle tests
-		test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
+        test(circle.attrs.width === undefined, 'circle.attrs.width should be undefined');
-		test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
+        test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
-		test(circle.getWidth() === 100, 'circle width should be 100');
+        test(circle.getWidth() === 100, 'circle width should be 100');
-		test(circle.getHeight() === 100, 'circle height should be 100');
+        test(circle.getHeight() === 100, 'circle height should be 100');
-		test(circle.getSize().width === 100, 'circle width should be 100');
+        test(circle.getSize().width === 100, 'circle width should be 100');
-		test(circle.getSize().height === 100, 'circle height should be 100');
+        test(circle.getSize().height === 100, 'circle height should be 100');
-		test(circle.getRadius() === 50, 'circle radius should be 50');
+        test(circle.getRadius() === 50, 'circle radius should be 50');
-		
+
-		circle.setWidth(200);
+        circle.setWidth(200);
-		
+
-		test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
+        test(circle.attrs.width === 200, 'circle.attrs.width should be 200');
-		test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
+        test(circle.attrs.height === undefined, 'circle.attrs.height should be undefined');
-		test(circle.getWidth() === 200, 'circle width should be 200');
+        test(circle.getWidth() === 200, 'circle width should be 200');
-		test(circle.getHeight() === 200, 'circle height should be 200');
+        test(circle.getHeight() === 200, 'circle height should be 200');
-		test(circle.getSize().width === 200, 'circle width should be 200');
+        test(circle.getSize().width === 200, 'circle width should be 200');
-		test(circle.getSize().height === 200, 'circle height should be 200');
+        test(circle.getSize().height === 200, 'circle height should be 200');
-		test(circle.getRadius() === 100, 'circle radius should be 100');
+        test(circle.getRadius() === 100, 'circle radius should be 100');
-		
+
-		// ellipse tests
+        // ellipse tests
-		test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
+        test(ellipse.attrs.width === undefined, 'ellipse.attrs.width should be undefined');
-		test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
+        test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
-		test(ellipse.getWidth() === 200, 'ellipse width should be 200');
+        test(ellipse.getWidth() === 200, 'ellipse width should be 200');
-		test(ellipse.getHeight() === 100, 'ellipse height should be 100');
+        test(ellipse.getHeight() === 100, 'ellipse height should be 100');
-		test(ellipse.getSize().width === 200, 'ellipse width should be 200');
+        test(ellipse.getSize().width === 200, 'ellipse width should be 200');
-		test(ellipse.getSize().height === 100, 'ellipse height should be 100');
+        test(ellipse.getSize().height === 100, 'ellipse height should be 100');
-		test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
+        test(ellipse.getRadius().x === 100, 'ellipse radius x should be 100');
-		
+
-		ellipse.setWidth(400);
+        ellipse.setWidth(400);
-		
+
-		test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
+        test(ellipse.attrs.width === 400, 'ellipse.attrs.width should be 400');
-		test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
+        test(ellipse.attrs.height === undefined, 'ellipse.attrs.height should be undefined');
-		test(ellipse.getWidth() === 400, 'ellipse width should be 400');
+        test(ellipse.getWidth() === 400, 'ellipse width should be 400');
-		test(ellipse.getHeight() === 100, 'ellipse height should be 100');
+        test(ellipse.getHeight() === 100, 'ellipse height should be 100');
-		test(ellipse.getSize().width === 400, 'ellipse width should be 400');
+        test(ellipse.getSize().width === 400, 'ellipse width should be 400');
-		test(ellipse.getSize().height === 100, 'ellipse height should be 100');
+        test(ellipse.getSize().height === 100, 'ellipse height should be 100');
-		test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
+        test(ellipse.getRadius().x === 200, 'ellipse radius x should be 200');
-		
+
     },
     'SHAPE - text multi line': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -4113,7 +4112,7 @@ Test.prototype.tests = {
         layer.add(circle);
         stage.add(layer);
     },
-    'NODE - simulate event': function(containerId) {
+    'NODE - test simulate and fire event': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -4134,10 +4133,10 @@ Test.prototype.tests = {
         layer.add(circle);
         layer.draw();
 
-        var foo = '';
+        var clicks = [];
 
         circle.on('click', function() {
-            foo = 'bar';
+            clicks.push('circle');
 
             /*
              var evt = window.event;
@@ -4146,9 +4145,18 @@ Test.prototype.tests = {
              */
         });
 
+        layer.on('click', function() {
+            clicks.push('layer');
+        });
+        // simulated event
         circle.simulate('click');
 
-        test(foo === 'bar', 'foo should equal bar');
+        test(clicks.toString() == 'circle,layer', 'problem with simulate');
+
+        // synthetic event
+        circle.fire('click');
+
+        test(clicks.toString() == 'circle,layer,circle', 'problem with fire');
     },
     'EVENTS - add remove event': function(containerId) {
         var stage = new Kinetic.Stage({