setup filters. saveImageData can now work for any nodes, including shapes, groups, layers, and the stage. images can now take image data as a parameter. This enables shape caching. New beforeAttrChange event which fires before an attr is changed

dist/kinetic-core.js

@@ -34,6 +34,7 @@
  * @namespace
  */
 var Kinetic = {};
+Kinetic.Filters = {};
 Kinetic.Global = {
     BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     stages: [],
@@ -269,6 +270,31 @@ Kinetic.Type = {
 
             return arr;
         }
+    },
+    /*
+     * arg can be an image object or image data
+     */
+    _getImage: function(arg) {
+        // if arg is already an image object, just return it
+        if(this._isElement(arg)) {
+            return arg;
+        }
+
+        //if arg is image data, then convert it
+        if(arg.data) {
+            var canvas = document.createElement('canvas');
+            canvas.width = arg.width;
+            canvas.height = arg.height;
+            var context = canvas.getContext('2d');
+            context.putImageData(arg, 0, 0);
+            var dataUrl = canvas.toDataURL();
+			var imageObj = new Image();
+			imageObj.src = dataUrl;
+			return imageObj;
+        }
+
+        // default
+        return null;
     }
 };
 
@@ -467,24 +493,7 @@ Kinetic.Node = Kinetic.Class.extend({
 
         // bind events
         this.on('draggableChange.kinetic', function() {
-            if(this.attrs.draggable) {
+            this._onDraggableChange();
-                this._listenDrag();
-            }
-            else {
-                // remove event listeners
-                this._dragCleanup();
-
-                /*
-                 * force drag and drop to end
-                 * if this node is currently in
-                 * drag and drop mode
-                 */
-                var stage = this.getStage();
-                var go = Kinetic.Global;
-                if(stage && go.drag.node && go.drag.node._id === this._id) {
-                    stage._endDrag();
-                }
-            }
         });
         var that = this;
         this.on('idChange.kinetic', function(evt) {
@@ -501,12 +510,8 @@ Kinetic.Node = Kinetic.Class.extend({
                 stage._addName(that);
             }
         });
-        /*
+
-         * simulate draggable change event
+        this._onDraggableChange();
-         * to init drag and drop logic from the
-         * above event binder
-         */
-        this.simulate('draggableChange');
     },
     /**
      * bind events to the node.  KineticJS supports mouseover, mousemove,
@@ -634,6 +639,14 @@ Kinetic.Node = Kinetic.Class.extend({
                     var val = c[key];
                     var oldVal = obj[key];
 
+                    /*
+                     * only fire change event for root
+                     * level attrs
+                     */
+                    if(level === 0) {
+                        that._fireBeforeChangeEvent(key, oldVal, val);
+                    }
+
                     // if obj doesn't have the val property, then create it
                     if(obj[key] === undefined && val !== undefined) {
                         obj[key] = {};
@@ -694,6 +707,10 @@ Kinetic.Node = Kinetic.Class.extend({
                                 that._setAttr(obj[key], 'width', size.width);
                                 that._setAttr(obj[key], 'height', size.height);
                                 break;
+                            case 'image':
+                                var img = type._getImage(val);
+                                that._setAttr(obj, key, img);
+                                break;
                             default:
                                 that._setAttr(obj, key, val);
                                 break;
@@ -1238,6 +1255,46 @@ Kinetic.Node = Kinetic.Class.extend({
         node.setAttrs(obj);
         return node;
     },
+    /**
+     * save image data
+     */
+    saveImageData: function() {
+        var stage = this.getStage();
+        var w = stage.attrs.width;
+        var h = stage.attrs.height;
+
+        var bufferLayer = stage.bufferLayer;
+        var bufferLayerContext = bufferLayer.getContext();
+
+        bufferLayer.clear();
+        this._draw(bufferLayer);
+
+        var imageData = bufferLayerContext.getImageData(0, 0, w, h);
+        this.imageData = imageData;
+    },
+    /**
+     * clear image data
+     */
+    clearImageData: function() {
+        delete this.imageData;
+    },
+    /**
+     * get image data
+     */
+    getImageData: function() {
+        return this.imageData;
+    },
+    _setImageData: function(imageData) {
+        if(imageData && imageData.data) {
+            this.imageData = imageData;
+        }
+    },
+    _fireBeforeChangeEvent: function(attr, oldVal, newVal) {
+        this._handleEvent('before' + attr.toUpperCase() + 'Change', {
+            oldVal: oldVal,
+            newVal: newVal
+        });
+    },
     _fireChangeEvent: function(attr, oldVal, newVal) {
         this._handleEvent(attr + 'Change', {
             oldVal: oldVal,
@@ -1273,6 +1330,26 @@ Kinetic.Node = Kinetic.Class.extend({
             go.drag.offset.y = pos.y - this.getAbsoluteTransform().getTranslation().y;
         }
     },
+    _onDraggableChange: function() {
+        if(this.attrs.draggable) {
+            this._listenDrag();
+        }
+        else {
+            // remove event listeners
+            this._dragCleanup();
+
+            /*
+             * force drag and drop to end
+             * if this node is currently in
+             * drag and drop mode
+             */
+            var stage = this.getStage();
+            var go = Kinetic.Global;
+            if(stage && go.drag.node && go.drag.node._id === this._id) {
+                stage._endDrag();
+            }
+        }
+    },
     /**
      * remove drag and drop event listener
      */
@@ -1752,18 +1829,18 @@ Kinetic.Container = Kinetic.Node.extend({
     /**
      * draw children
      */
-    _drawChildren: function() {
+    _drawChildren: function(layer) {
         var stage = this.getStage();
         var children = this.children;
         for(var n = 0; n < children.length; n++) {
             var child = children[n];
             if(child.nodeType === 'Shape') {
                 if(child.isVisible() && stage.isVisible()) {
-                    child._draw(child.getLayer());
+                    child._draw(layer ? layer : child.getLayer());
                 }
             }
             else {
-                child.draw();
+                child.draw(layer);
             }
         }
     },
@@ -1883,8 +1960,8 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function() {
+    draw: function(layer) {
-        this._drawChildren();
+        this._draw(layer);
     },
     /**
      * set stage size
@@ -2778,6 +2855,9 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.names = {};
         this.anim = undefined;
         this.animRunning = false;
+    },
+    _draw: function(layer) {
+        this._drawChildren(layer);
     }
 });
 
@@ -2860,7 +2940,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Layer.prototype
      */
-    draw: function() {
+    draw: function(layer) {
         var throttle = this.attrs.throttle;
         var date = new Date();
         var time = date.getTime();
@@ -2868,7 +2948,7 @@ Kinetic.Layer = Kinetic.Container.extend({
         var tt = 1000 / throttle;
 
         if(timeDiff >= tt || throttle > 200) {
-            this._draw();
+            this._draw(layer);
 
             if(this.drawTimeout !== undefined) {
                 clearTimeout(this.drawTimeout);
@@ -2885,7 +2965,7 @@ Kinetic.Layer = Kinetic.Container.extend({
              * wait 17ms before trying again (60fps)
              */
             this.drawTimeout = setTimeout(function() {
-                that.draw();
+                that.draw(layer);
             }, 17);
         }
     },
@@ -2937,7 +3017,7 @@ Kinetic.Layer = Kinetic.Container.extend({
     /**
      * private draw children
      */
-    _draw: function() {
+    _draw: function(layer) {
         var date = new Date();
         var time = date.getTime();
         this.lastDrawTime = time;
@@ -2958,7 +3038,7 @@ Kinetic.Layer = Kinetic.Container.extend({
             }
 
             // draw children
-            this._drawChildren();
+            this._drawChildren(layer);
         }
 
         // after draw  handler
@@ -3014,9 +3094,12 @@ Kinetic.Group = Kinetic.Container.extend({
         // call super constructor
         this._super(config);
     },
-    draw: function() {
+    draw: function(layer) {
+        this._draw(layer);
+    },
+    _draw: function(layer) {
         if(this.attrs.visible) {
-            this._drawChildren();
+            this._drawChildren(layer);
         }
     }
 });
@@ -3046,7 +3129,6 @@ Kinetic.Shape = Kinetic.Node.extend({
             detectionType: 'path'
         });
 
-        this.data = [];
         this.nodeType = 'Shape';
         this.appliedShadow = false;
 
@@ -3319,29 +3401,6 @@ Kinetic.Shape = Kinetic.Node.extend({
 
         return false;
     },
-    /**
-     * save shape data when using pixel detection.
-     */
-    saveData: function() {
-        var stage = this.getStage();
-        var w = stage.attrs.width;
-        var h = stage.attrs.height;
-
-        var bufferLayer = stage.bufferLayer;
-        var bufferLayerContext = bufferLayer.getContext();
-
-        bufferLayer.clear();
-        this._draw(bufferLayer);
-
-        var imageData = bufferLayerContext.getImageData(0, 0, w, h);
-        this.data = imageData.data;
-    },
-    /**
-     * clear shape data
-     */
-    clearData: function() {
-        this.data = [];
-    },
     /**
      * determines if point is in the shape
      * @param {Object|Array} point point can be an object containing
@@ -3363,7 +3422,7 @@ Kinetic.Shape = Kinetic.Node.extend({
         }
         else {
             var w = stage.attrs.width;
-            var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
+            var alpha = this.imageData.data[((w * pos.y) + pos.x) * 4 + 3];
             return (!!alpha);
         }
     },
@@ -3409,7 +3468,7 @@ Kinetic.Shape = Kinetic.Node.extend({
 });
 
 // add getters and setters
-Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
+Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc', 'filter']);
 
 /**
  * set fill which can be a color, linear gradient object,
@@ -3695,6 +3754,10 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
  * @constructor
  * @augments Kinetic.Shape
  * @param {Object} config
+ * @param {ImageObject} config.image
+ * @param {Number} [config.width]
+ * @param {Number} [config.height]
+ * @param {Object} [config.crop]
  */
 Kinetic.Image = Kinetic.Shape.extend({
     init: function(config) {
@@ -3728,6 +3791,20 @@ Kinetic.Image = Kinetic.Shape.extend({
         };
         // call super constructor
         this._super(config);
+
+        /*
+         * if image property is ever changed, check and see
+         * if it was set to image data, and if it was, go ahead
+         * and save it
+         */
+        this.on('beforeImageChange.kinetic', function(evt) {
+            this._setImageData(evt.newVal);
+        });
+        /*
+         * if image property was set with image data,
+         * go ahead and save it
+         */
+        this._setImageData(config.image);
     },
     /**
      * set width and height

src/Container.js

@@ -211,18 +211,18 @@ Kinetic.Container = Kinetic.Node.extend({
     /**
      * draw children
      */
-    _drawChildren: function() {
+    _drawChildren: function(layer) {
         var stage = this.getStage();
         var children = this.children;
         for(var n = 0; n < children.length; n++) {
             var child = children[n];
             if(child.nodeType === 'Shape') {
                 if(child.isVisible() && stage.isVisible()) {
-                    child._draw(child.getLayer());
+                    child._draw(layer ? layer : child.getLayer());
                 }
             }
             else {
-                child.draw();
+                child.draw(layer);
             }
         }
     },

src/Global.js

@@ -6,6 +6,7 @@
  * @namespace
  */
 var Kinetic = {};
+Kinetic.Filters = {};
 Kinetic.Global = {
     BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
     stages: [],

src/Group.js

@@ -14,9 +14,12 @@ Kinetic.Group = Kinetic.Container.extend({
         // call super constructor
         this._super(config);
     },
-    draw: function() {
+    draw: function(layer) {
+        this._draw(layer);
+    },
+    _draw: function(layer) {
         if(this.attrs.visible) {
-            this._drawChildren();
+            this._drawChildren(layer);
         }
     }
 });

src/Layer.js

@@ -33,7 +33,7 @@ Kinetic.Layer = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Layer.prototype
      */
-    draw: function() {
+    draw: function(layer) {
         var throttle = this.attrs.throttle;
         var date = new Date();
         var time = date.getTime();
@@ -41,7 +41,7 @@ Kinetic.Layer = Kinetic.Container.extend({
         var tt = 1000 / throttle;
 
         if(timeDiff >= tt || throttle > 200) {
-            this._draw();
+            this._draw(layer);
 
             if(this.drawTimeout !== undefined) {
                 clearTimeout(this.drawTimeout);
@@ -58,7 +58,7 @@ Kinetic.Layer = Kinetic.Container.extend({
              * wait 17ms before trying again (60fps)
              */
             this.drawTimeout = setTimeout(function() {
-                that.draw();
+                that.draw(layer);
             }, 17);
         }
     },
@@ -110,7 +110,7 @@ Kinetic.Layer = Kinetic.Container.extend({
     /**
      * private draw children
      */
-    _draw: function() {
+    _draw: function(layer) {
         var date = new Date();
         var time = date.getTime();
         this.lastDrawTime = time;
@@ -131,7 +131,7 @@ Kinetic.Layer = Kinetic.Container.extend({
             }
 
             // draw children
-            this._drawChildren();
+            this._drawChildren(layer);
         }
 
         // after draw  handler

src/Node.js

@@ -37,24 +37,7 @@ Kinetic.Node = Kinetic.Class.extend({
 
         // bind events
         this.on('draggableChange.kinetic', function() {
-            if(this.attrs.draggable) {
+            this._onDraggableChange();
-                this._listenDrag();
-            }
-            else {
-                // remove event listeners
-                this._dragCleanup();
-
-                /*
-                 * force drag and drop to end
-                 * if this node is currently in
-                 * drag and drop mode
-                 */
-                var stage = this.getStage();
-                var go = Kinetic.Global;
-                if(stage && go.drag.node && go.drag.node._id === this._id) {
-                    stage._endDrag();
-                }
-            }
         });
         var that = this;
         this.on('idChange.kinetic', function(evt) {
@@ -71,12 +54,8 @@ Kinetic.Node = Kinetic.Class.extend({
                 stage._addName(that);
             }
         });
-        /*
+
-         * simulate draggable change event
+        this._onDraggableChange();
-         * to init drag and drop logic from the
-         * above event binder
-         */
-        this.simulate('draggableChange');
     },
     /**
      * bind events to the node.  KineticJS supports mouseover, mousemove,
@@ -204,6 +183,14 @@ Kinetic.Node = Kinetic.Class.extend({
                     var val = c[key];
                     var oldVal = obj[key];
 
+                    /*
+                     * only fire change event for root
+                     * level attrs
+                     */
+                    if(level === 0) {
+                        that._fireBeforeChangeEvent(key, oldVal, val);
+                    }
+
                     // if obj doesn't have the val property, then create it
                     if(obj[key] === undefined && val !== undefined) {
                         obj[key] = {};
@@ -264,6 +251,10 @@ Kinetic.Node = Kinetic.Class.extend({
                                 that._setAttr(obj[key], 'width', size.width);
                                 that._setAttr(obj[key], 'height', size.height);
                                 break;
+                            case 'image':
+                                var img = type._getImage(val);
+                                that._setAttr(obj, key, img);
+                                break;
                             default:
                                 that._setAttr(obj, key, val);
                                 break;
@@ -808,6 +799,46 @@ Kinetic.Node = Kinetic.Class.extend({
         node.setAttrs(obj);
         return node;
     },
+    /**
+     * save image data
+     */
+    saveImageData: function() {
+        var stage = this.getStage();
+        var w = stage.attrs.width;
+        var h = stage.attrs.height;
+
+        var bufferLayer = stage.bufferLayer;
+        var bufferLayerContext = bufferLayer.getContext();
+
+        bufferLayer.clear();
+        this._draw(bufferLayer);
+
+        var imageData = bufferLayerContext.getImageData(0, 0, w, h);
+        this.imageData = imageData;
+    },
+    /**
+     * clear image data
+     */
+    clearImageData: function() {
+        delete this.imageData;
+    },
+    /**
+     * get image data
+     */
+    getImageData: function() {
+        return this.imageData;
+    },
+    _setImageData: function(imageData) {
+        if(imageData && imageData.data) {
+            this.imageData = imageData;
+        }
+    },
+    _fireBeforeChangeEvent: function(attr, oldVal, newVal) {
+        this._handleEvent('before' + attr.toUpperCase() + 'Change', {
+            oldVal: oldVal,
+            newVal: newVal
+        });
+    },
     _fireChangeEvent: function(attr, oldVal, newVal) {
         this._handleEvent(attr + 'Change', {
             oldVal: oldVal,
@@ -843,6 +874,26 @@ Kinetic.Node = Kinetic.Class.extend({
             go.drag.offset.y = pos.y - this.getAbsoluteTransform().getTranslation().y;
         }
     },
+    _onDraggableChange: function() {
+        if(this.attrs.draggable) {
+            this._listenDrag();
+        }
+        else {
+            // remove event listeners
+            this._dragCleanup();
+
+            /*
+             * force drag and drop to end
+             * if this node is currently in
+             * drag and drop mode
+             */
+            var stage = this.getStage();
+            var go = Kinetic.Global;
+            if(stage && go.drag.node && go.drag.node._id === this._id) {
+                stage._endDrag();
+            }
+        }
+    },
     /**
      * remove drag and drop event listener
      */

src/Shape.js

@@ -23,7 +23,6 @@ Kinetic.Shape = Kinetic.Node.extend({
             detectionType: 'path'
         });
 
-        this.data = [];
         this.nodeType = 'Shape';
         this.appliedShadow = false;
 
@@ -296,29 +295,6 @@ Kinetic.Shape = Kinetic.Node.extend({
 
         return false;
     },
-    /**
-     * save shape data when using pixel detection.
-     */
-    saveData: function() {
-        var stage = this.getStage();
-        var w = stage.attrs.width;
-        var h = stage.attrs.height;
-
-        var bufferLayer = stage.bufferLayer;
-        var bufferLayerContext = bufferLayer.getContext();
-
-        bufferLayer.clear();
-        this._draw(bufferLayer);
-
-        var imageData = bufferLayerContext.getImageData(0, 0, w, h);
-        this.data = imageData.data;
-    },
-    /**
-     * clear shape data
-     */
-    clearData: function() {
-        this.data = [];
-    },
     /**
      * determines if point is in the shape
      * @param {Object|Array} point point can be an object containing
@@ -340,7 +316,7 @@ Kinetic.Shape = Kinetic.Node.extend({
         }
         else {
             var w = stage.attrs.width;
-            var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
+            var alpha = this.imageData.data[((w * pos.y) + pos.x) * 4 + 3];
             return (!!alpha);
         }
     },
@@ -386,7 +362,7 @@ Kinetic.Shape = Kinetic.Node.extend({
 });
 
 // add getters and setters
-Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc']);
+Kinetic.Node.addGettersSetters(Kinetic.Shape, ['fill', 'stroke', 'lineJoin', 'strokeWidth', 'shadow', 'drawFunc', 'filter']);
 
 /**
  * set fill which can be a color, linear gradient object,

src/Stage.js

@@ -85,8 +85,8 @@ Kinetic.Stage = Kinetic.Container.extend({
      * @name draw
      * @methodOf Kinetic.Stage.prototype
      */
-    draw: function() {
+    draw: function(layer) {
-        this._drawChildren();
+        this._draw(layer);
     },
     /**
      * set stage size
@@ -980,6 +980,9 @@ Kinetic.Stage = Kinetic.Container.extend({
         this.names = {};
         this.anim = undefined;
         this.animRunning = false;
+    },
+    _draw: function(layer) {
+        this._drawChildren(layer);
     }
 });
 

src/filters/Grayscale.js

@@ -0,0 +1,14 @@
+Kinetic.Filters.Grayscale = function(config) {
+    var data = config.data;
+    for(var i = 0; i < data.length; i += 4) {
+        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+        // red
+        data[i] = brightness;
+        // green
+        data[i + 1] = brightness;
+        // blue
+        data[i + 2] = brightness;
+        // i+3 is alpha (the fourth element)
+    }
+    return data;
+};

src/shapes/Image.js

@@ -6,6 +6,10 @@
  * @constructor
  * @augments Kinetic.Shape
  * @param {Object} config
+ * @param {ImageObject} config.image
+ * @param {Number} [config.width]
+ * @param {Number} [config.height]
+ * @param {Object} [config.crop]
  */
 Kinetic.Image = Kinetic.Shape.extend({
     init: function(config) {
@@ -39,6 +43,20 @@ Kinetic.Image = Kinetic.Shape.extend({
         };
         // call super constructor
         this._super(config);
+
+        /*
+         * if image property is ever changed, check and see
+         * if it was set to image data, and if it was, go ahead
+         * and save it
+         */
+        this.on('beforeImageChange.kinetic', function(evt) {
+            this._setImageData(evt.newVal);
+        });
+        /*
+         * if image property was set with image data,
+         * go ahead and save it
+         */
+        this._setImageData(config.image);
     },
     /**
      * set width and height

src/util/Type.js

@@ -205,5 +205,30 @@ Kinetic.Type = {
 
             return arr;
         }
+    },
+    /*
+     * arg can be an image object or image data
+     */
+    _getImage: function(arg) {
+        // if arg is already an image object, just return it
+        if(this._isElement(arg)) {
+            return arg;
+        }
+
+        //if arg is image data, then convert it
+        if(arg.data) {
+            var canvas = document.createElement('canvas');
+            canvas.width = arg.width;
+            canvas.height = arg.height;
+            var context = canvas.getContext('2d');
+            context.putImageData(arg, 0, 0);
+            var dataUrl = canvas.toDataURL();
+			var imageObj = new Image();
+			imageObj.src = dataUrl;
+			return imageObj;
+        }
+
+        // default
+        return null;
     }
 };

tests/js/functionalTests.js

@@ -252,7 +252,7 @@ Test.prototype.tests = {
             });
         });
     },
-    'EVENTS - mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
+    'EVENTS - path detection mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -528,6 +528,285 @@ Test.prototype.tests = {
         test(tap, '12) tap should be true');
         test(dbltap, '12) dbltap should be true');
     },
+    'EVENTS - pixel detection mousedown mouseup mouseover mouseout mousemove click dblclick / touchstart touchend touchmove tap dbltap': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200,
+            throttle: 999
+        });
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Ellipse({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4,
+            detectionType: 'pixel'
+        });
+
+        // desktop events
+        var mousedown = false;
+        var mouseup = false;
+        var click = false;
+        var dblclick = false;
+        var mouseover = false;
+        var mouseout = false;
+        var mousemove = false;
+
+        // mobile events
+        var touchstart = false;
+        var touchend = false;
+        var tap = false;
+        var touchmove = false;
+        var dbltap = false;
+
+        circle.on('mousedown', function() {
+            mousedown = true;
+            //log('mousedown');
+        });
+
+        circle.on('mouseup', function() {
+            mouseup = true;
+            //log('mouseup');
+        });
+
+        circle.on('mouseover', function() {
+            mouseover = true;
+            //log('mouseover');
+        });
+
+        circle.on('mouseout', function() {
+            mouseout = true;
+            //log('mouseout');
+        });
+
+        circle.on('mousemove', function() {
+            mousemove = true;
+            //log('mousemove');
+        });
+
+        circle.on('click', function() {
+            click = true;
+            //log('click');
+        });
+
+        circle.on('dblclick', function() {
+            dblclick = true;
+            //log('dblclick');
+        });
+        /*
+         * mobile
+         */
+        circle.on('touchstart', function() {
+            touchstart = true;
+            //log('touchstart');
+        });
+
+        circle.on('touchend', function() {
+            touchend = true;
+            //log('touchend');
+        });
+
+        circle.on('touchmove', function() {
+            touchmove = true;
+            //log('touchmove');
+        });
+
+        circle.on('tap', function(evt) {
+            tap = true;
+            //log('tap');
+        });
+
+        circle.on('dbltap', function() {
+            dbltap = true;
+            //log('dbltap');
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        circle.saveImageData();
+
+        // move mouse to center of circle to trigger mouseover
+        stage._mousemove({
+            clientX: 290,
+            clientY: 100
+        });
+
+        test(mouseover, '1) mouseover should be true');
+        test(!mousemove, '1) mousemove should be false');
+        test(!mousedown, '1) mousedown should be false');
+        test(!mouseup, '1) mouseup should be false');
+        test(!click, '1) click should be false');
+        test(!dblclick, '1) dblclick should be false');
+        test(!mouseout, '1) mouseout should be false');
+
+        // move mouse again inside circle to trigger mousemove
+        stage._mousemove({
+            clientX: 290,
+            clientY: 100
+        });
+
+        test(mouseover, '2) mouseover should be true');
+        test(mousemove, '2) mousemove should be true');
+        test(!mousedown, '2) mousedown should be false');
+        test(!mouseup, '2) mouseup should be false');
+        test(!click, '2) click should be false');
+        test(!dblclick, '2) dblclick should be false');
+        test(!mouseout, '2) mouseout should be false');
+
+        // mousedown inside circle
+        stage._mousedown({
+            clientX: 290,
+            clientY: 100
+        });
+
+        test(mouseover, '3) mouseover should be true');
+        test(mousemove, '3) mousemove should be true');
+        test(mousedown, '3) mousedown should be true');
+        test(!mouseup, '3) mouseup should be false');
+        test(!click, '3) click should be false');
+        test(!dblclick, '3) dblclick should be false');
+        test(!mouseout, '3) mouseout should be false');
+
+        // mouseup inside circle
+        stage._mouseup({
+            clientX: 290,
+            clientY: 100
+        });
+
+        test(mouseover, '4) mouseover should be true');
+        test(mousemove, '4) mousemove should be true');
+        test(mousedown, '4) mousedown should be true');
+        test(mouseup, '4) mouseup should be true');
+        test(click, '4) click should be true');
+        test(!dblclick, '4) dblclick should be false');
+        test(!mouseout, '4) mouseout should be false');
+
+        // mousedown inside circle
+        stage._mousedown({
+            clientX: 290,
+            clientY: 100
+        });
+
+        test(mouseover, '5) mouseover should be true');
+        test(mousemove, '5) mousemove should be true');
+        test(mousedown, '5) mousedown should be true');
+        test(mouseup, '5) mouseup should be true');
+        test(click, '5) click should be true');
+        test(!dblclick, '5) dblclick should be false');
+        test(!mouseout, '5) mouseout should be false');
+
+        // mouseup inside circle to trigger double click
+        stage._mouseup({
+            clientX: 290,
+            clientY: 100
+        });
+
+        test(mouseover, '6) mouseover should be true');
+        test(mousemove, '6) mousemove should be true');
+        test(mousedown, '6) mousedown should be true');
+        test(mouseup, '6) mouseup should be true');
+        test(click, '6) click should be true');
+        test(dblclick, '6) dblclick should be true');
+        test(!mouseout, '6) mouseout should be false');
+
+        // move mouse outside of circle to trigger mouseout
+        stage._mousemove({
+            clientX: 0,
+            clientY: 100
+        });
+        stage._mousemove({
+            clientX: 0,
+            clientY: 100
+        });
+
+        test(mouseover, '7) mouseover should be true');
+        test(mousemove, '7) mousemove should be true');
+        test(mousedown, '7) mousedown should be true');
+        test(mouseup, '7) mouseup should be true');
+        test(click, '7) click should be true');
+        test(dblclick, '7) dblclick should be true');
+        test(mouseout, '7) mouseout should be true');
+
+        /*
+        * mobile tests
+        */
+        // reset inDoubleClickWindow
+        stage.inDoubleClickWindow = false;
+
+        // touchstart circle
+        stage._touchstart({
+            clientX: 289,
+            clientY: 100,
+            preventDefault: function() {
+            }
+        });
+
+        test(touchstart, '8) touchstart should be true');
+        test(!touchmove, '8) touchmove should be false');
+        test(!touchend, '8) touchend should be false');
+        test(!tap, '8) tap should be false');
+        test(!dbltap, '8) dbltap should be false');
+
+        // touchend circle
+        stage._touchend({
+            clientX: 289,
+            clientY: 100,
+            preventDefault: function() {
+            }
+        });
+
+        test(touchstart, '9) touchstart should be true');
+        test(!touchmove, '9) touchmove should be false');
+        test(touchend, '9) touchend should be true');
+        test(tap, '9) tap should be true');
+        test(!dbltap, '9) dbltap should be false');
+
+        // touchstart circle
+        stage._touchstart({
+            clientX: 289,
+            clientY: 100,
+            preventDefault: function() {
+            }
+        });
+
+        test(touchstart, '10) touchstart should be true');
+        test(!touchmove, '10) touchmove should be false');
+        test(touchend, '10) touchend should be true');
+        test(tap, '10) tap should be true');
+        test(!dbltap, '10) dbltap should be false');
+
+        // touchend circle to triger dbltap
+        stage._touchend({
+            clientX: 289,
+            clientY: 100,
+            preventDefault: function() {
+            }
+        });
+
+        test(touchstart, '11) touchstart should be true');
+        test(!touchmove, '11) touchmove should be false');
+        test(touchend, '11) touchend should be true');
+        test(tap, '11) tap should be true');
+        test(dbltap, '11) dbltap should be true');
+
+        // touchmove circle
+        stage._touchmove({
+            clientX: 290,
+            clientY: 100,
+            preventDefault: function() {
+            }
+        });
+
+        test(touchstart, '12) touchstart should be true');
+        test(touchmove, '12) touchmove should be true');
+        test(touchend, '12) touchend should be true');
+        test(tap, '12) tap should be true');
+        test(dbltap, '12) dbltap should be true');
+    },
     'EVENTS - test group mousedown events': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,

tests/js/manualTests.js

@@ -359,12 +359,12 @@ Test.prototype.tests = {
         });
 
         star.on('dragend', function() {
-            this.saveData();
+            this.saveImageData();
         });
 
         layer.add(star);
         stage.add(layer);
-        star.saveData();
+        star.saveImageData();
     },
     'EVENTS - drag events click': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -821,14 +821,14 @@ Test.prototype.tests = {
 
         /*
          Ellipse.on('dragend', function() {
-         Ellipse.saveData();
+         Ellipse.savePixels();
          });
          */
 
         layer.add(Ellipse).add(Ellipse2);
         stage.add(layer);
 
-        //Ellipse.saveData();
+        //Ellipse.savePixels();
     },
     'DRAG AND DROP - drag and drop stage': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/unitTests.js

@@ -1988,6 +1988,50 @@ Test.prototype.tests = {
         };
         imageObj.src = '../darth-vader.jpg';
     },
+    'SHAPE - add image with image data': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200
+        });
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+
+        var circle = new Kinetic.Ellipse({
+            x: 100,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        var circle2 = new Kinetic.Ellipse({
+            x: 150,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'yellow',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        group.add(circle);
+        group.add(circle2);
+        layer.add(group);
+        stage.add(layer);
+
+        group.saveImageData();
+        
+        var image = new Kinetic.Image({
+            image: group.getImageData(),
+            x: 200,
+            y: 0,
+            draggable: true
+        });
+        
+        layer.add(image);
+        layer.draw(); 
+    },
     'SHAPE - set image fill to color then image': function(containerId) {
         var imageObj = new Image();
         imageObj.onload = function() {
@@ -2220,10 +2264,10 @@ Test.prototype.tests = {
         layer.add(line);
         stage.add(layer);
 
-        line.saveData();
+        line.saveImageData();
 
         line.on('dragend', function() {
-            line.saveData();
+            line.saveImageData();
         });
 
         line.setPoints([1, 2, 3, 4]);
@@ -2752,8 +2796,7 @@ Test.prototype.tests = {
         layer.add(rect);
         stage.add(layer);
     },
-    'SHAPE - test pixel detection setter and getter': function(containerId) {
+    'NODE - test pixel detection setter and getter': function(containerId) {
-
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -2785,13 +2828,13 @@ Test.prototype.tests = {
         });
 
         star.on('dragend', function() {
-            this.saveData();
+            this.saveImageData();
         });
 
         layer.add(star);
         stage.add(layer);
 
-        star.saveData();
+        star.saveImageData();
 
         test(star.getDetectionType() === 'pixel', 'detection type should be pixel');
         star.setDetectionType('path');