bug fixes and enhancements. also updated the README

.gitignore

@@ -0,0 +1 @@
+.project

README.md

@@ -12,7 +12,12 @@ Check out the official [KineticJS Tutorials](http://www.html5canvastutorials.com
 # Building the library
 To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`.
 
-To build a development version of the library, run `thor build:dev VERSION`, where VERSION is in the format MAJOR.MINOR.PATCH. To build a minify version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012`).
+To build a development version of the library, run `thor build:dev VERSION`, where VERSION is a string that can be anything you like. For example, using `thor build:dev core` will produce `kinetic-core.js`. To build a minified version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012`).  
 
-# Adding a new file in the src directory
+If you add a file in the src directory, be sure to add the filename to the filename array in the Thorfile.
-If you add a file in the src directory, add into the array in the Thorfile.
+
+#Tests
+To run unit tests, open the `unitTests.html` file in the `tests` directory.  To run functional tests, open the `functionalTests.html` file.  The tests output the results to the console via `console.log()` so be sure to have it open.
+
+#Pull Requests
+I'd be happy to review any pull requests that may better the KineticJS project, in particular if you have a bug fix or a new geometry (see `src/geometries` for examples).  Before doing so, please first make sure that all of the unit tests and functional tests pass.

Thorfile

@@ -4,18 +4,18 @@ class Build < Thor
   # This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
   FILES = [
     "license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
-    "src/Layer.js", "src/Group.js", "src/geometries/Shape.js", "src/geometries/Rect.js", "src/geometries/Circle.js", "src/geometries/Image.js",
+    "src/Layer.js", "src/Group.js", "src/Shape.js", "src/geometries/Rect.js", "src/geometries/Circle.js", "src/geometries/Image.js",
     "src/geometries/Polygon.js", "src/geometries/RegularPolygon.js", "src/geometries/Star.js", "src/geometries/Text.js"
   ]
   
-  desc "dev", "Concatenate all the js files into /dist/kinetic-vVERSION.js."
+  desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."
   method_option :date, aliases: "-d", required: false, type: :string, desc: "The release date"
   def dev(version)
-    file_name = "dist/kinetic-v#{version}.js"
+    file_name = "dist/kinetic-#{version}.js"
     
     puts ":: Deleting other development files..."
     Dir.foreach("dist") do |file|
-      if file.match(/kinetic-v.+\.(\d|\.)+\.js/)
+      if file.match(/kinetic-.+\.(\d|\.)+\.js/)
         File.delete("dist/" + file)
       end
     end
@@ -28,14 +28,14 @@ class Build < Thor
     puts "   -> Done!"
   end
   
-  desc "prod", "Concatenate all the js files in into /dist/kinetic-vVERSION.min.js and minify it."
+  desc "prod", "Concatenate all the js files in into /dist/kinetic-VERSION.min.js and minify it."
   method_option :date, aliases: "-d", required: false, type: :string, desc: "The release date"
   def prod(version)
-    file_name = "dist/kinetic-v#{version}.min.js"
+    file_name = "dist/kinetic-#{version}.min.js"
     
     puts ":: Deleting other development files..."
     Dir.foreach("dist") do |file|
-      if file.match(/kinetic-v.+\.min\.js/)
+      if file.match(/kinetic-.+\.min\.js/)
         File.delete("dist/" + file)
       end
     end

license.js

@@ -1,5 +1,5 @@
 /**
- * KineticJS JavaScript Library v@version
+ * KineticJS JavaScript Library @version
  * http://www.kineticjs.com/
  * Copyright 2012, Eric Rowell
  * Licensed under the MIT or GPL Version 2 licenses.

src/GlobalObject.js

@@ -29,7 +29,7 @@ Kinetic.GlobalObject = {
     },
     extend: function(obj1, obj2) {
         for(var key in obj2.prototype) {
-            if(obj2.prototype.hasOwnProperty(key)) {
+            if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
                 obj1.prototype[key] = obj2.prototype[key];
             }
         }
@@ -77,6 +77,7 @@ Kinetic.GlobalObject = {
             that._animationLoop();
         } else if(this.isAnimating && !this._isaCanvasAnimating()) {
             this.isAnimating = false;
+            this.frame.lastTime = 0;
         }
     }
 };
@@ -86,4 +87,5 @@ window.requestAnimFrame = (function(callback) {
     function(callback) {
         window.setTimeout(callback, 1000 / 60);
     };
-})();
+
+})();

src/Stage.js

@@ -21,6 +21,7 @@ Kinetic.Stage = function(cont, width, height) {
     this.dblClickWindow = 400;
     this.targetShape = undefined;
     this.clickStart = false;
+    this.targetFound = false;
 
     // desktop flags
     this.mousePos = undefined;
@@ -285,6 +286,147 @@ Kinetic.Stage.prototype = {
     getStage: function() {
         return this;
     },
+    /**
+     * detect event
+     * @param {Shape} shape
+     */
+    _detectEvent: function(shape, evt) {
+        var isDragging = Kinetic.GlobalObject.drag.moving;
+        var backstageLayer = this.backstageLayer;
+        var backstageLayerContext = backstageLayer.getContext();
+        var go = Kinetic.GlobalObject;
+        var pos = this.getUserPosition();
+        var el = shape.eventListeners;
+
+        shape._draw(backstageLayer);
+
+        if(this.targetShape && shape.id === this.targetShape.id) {
+            this.targetFound = true;
+        }
+
+        if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
+            // handle onmousedown
+            if(!isDragging && this.mouseDown) {
+                this.mouseDown = false;
+                this.clickStart = true;
+                shape._handleEvents("onmousedown", evt);
+                return true;
+            }
+            // handle onmouseup & onclick
+            else if(this.mouseUp) {
+                this.mouseUp = false;
+                shape._handleEvents("onmouseup", evt);
+
+                // detect if click or double click occurred
+                if(this.clickStart) {
+                    /*
+                     * if dragging and dropping, don't fire click or dbl click
+                     * event
+                     */
+                    if((!go.drag.moving) || !go.drag.node) {
+                        shape._handleEvents("onclick", evt);
+
+                        if(shape.inDoubleClickWindow) {
+                            shape._handleEvents("ondblclick", evt);
+                        }
+                        shape.inDoubleClickWindow = true;
+                        setTimeout(function() {
+                            shape.inDoubleClickWindow = false;
+                        }, this.dblClickWindow);
+                    }
+                }
+                return true;
+            }
+
+            // handle touchstart
+            else if(this.touchStart) {
+                this.touchStart = false;
+                shape._handleEvents("touchstart", evt);
+
+                if(el.ondbltap && shape.inDoubleClickWindow) {
+                    var events = el.ondbltap;
+                    for(var i = 0; i < events.length; i++) {
+                        events[i].handler.apply(shape, [evt]);
+                    }
+                }
+
+                shape.inDoubleClickWindow = true;
+
+                setTimeout(function() {
+                    shape.inDoubleClickWindow = false;
+                }, this.dblClickWindow);
+                return true;
+            }
+
+            // handle touchend
+            else if(this.touchEnd) {
+                this.touchEnd = false;
+                shape._handleEvents("touchend", evt);
+                return true;
+            }
+
+            // handle touchmove
+            else if(!isDragging && el.touchmove) {
+                shape._handleEvents("touchmove", evt);
+                return true;
+            }
+
+            //this condition is used to identify a new target shape.
+            else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
+                /*
+                 * check if old target has an onmouseout event listener
+                 */
+                if(this.targetShape) {
+                    var oldEl = this.targetShape.eventListeners;
+                    if(oldEl) {
+                        this.targetShape._handleEvents("onmouseout", evt);
+                    }
+                }
+
+                // set new target shape
+                this.targetShape = shape;
+
+                // handle onmouseover
+                shape._handleEvents("onmouseover", evt);
+                return true;
+            }
+
+            // handle onmousemove
+            else if(!isDragging) {
+                shape._handleEvents("onmousemove", evt);
+                return true;
+            }
+        }
+        // handle mouseout condition
+        else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
+            this.targetShape = undefined;
+            shape._handleEvents("onmouseout", evt);
+            return true;
+        }
+
+        return false;
+    },
+    /**
+     * traverse container children
+     * @param {Container} obj
+     */
+    _traverseChildren: function(obj, evt) {
+        var children = obj.children;
+        // propapgate backwards through children
+        for(var i = children.length - 1; i >= 0; i--) {
+            var child = children[i];
+            if(child.className === "Shape") {
+                var exit = this._detectEvent(child, evt);
+                if(exit) {
+                    return true;
+                }
+            } else {
+                this._traverseChildren(child);
+            }
+        }
+
+        return false;
+    },
     /**
      * handle incoming event
      * @param {Event} evt
@@ -299,9 +441,6 @@ Kinetic.Stage.prototype = {
         this._setTouchPosition(evt);
 
         var backstageLayer = this.backstageLayer;
-        var backstageLayerContext = backstageLayer.getContext();
-        var that = this;
-
         backstageLayer.clear();
 
         /*
@@ -309,145 +448,13 @@ Kinetic.Stage.prototype = {
          * is triggered, n is set to -1 which will break out of the
          * three nested loops
          */
-        var targetFound = false;
+        this.targetFound = false;
 
-        function detectEvent(shape) {
+        for(var n = this.children.length - 1; n >= 0; n--) {
-            shape._draw(backstageLayer);
+            var layer = this.children[n];
-            var pos = that.getUserPosition();
+            if(layer.visible && n >= 0 && layer.isListening) {
-            var el = shape.eventListeners;
+                if(this._traverseChildren(layer, evt)) {
-
+                    n = -1;
-            if(that.targetShape && shape.id === that.targetShape.id) {
-                targetFound = true;
-            }
-
-            if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
-                // handle onmousedown
-                if(that.mouseDown) {
-                    that.mouseDown = false;
-                    that.clickStart = true;
-                    shape._handleEvents("onmousedown", evt);
-                    return true;
-                }
-                // handle onmouseup & onclick
-                else if(that.mouseUp) {
-                    that.mouseUp = false;
-                    shape._handleEvents("onmouseup", evt);
-
-                    // detect if click or double click occurred
-                    if(that.clickStart) {
-                        /*
-                         * if dragging and dropping, don't fire click or dbl click
-                         * event
-                         */
-                        if((!go.drag.moving) || !go.drag.node) {
-                            shape._handleEvents("onclick", evt);
-
-                            if(shape.inDoubleClickWindow) {
-                                shape._handleEvents("ondblclick", evt);
-                            }
-                            shape.inDoubleClickWindow = true;
-                            setTimeout(function() {
-                                shape.inDoubleClickWindow = false;
-                            }, that.dblClickWindow);
-                        }
-                    }
-                    return true;
-                }
-
-                // handle touchstart
-                else if(that.touchStart) {
-                    that.touchStart = false;
-                    shape._handleEvents("touchstart", evt);
-
-                    if(el.ondbltap && shape.inDoubleClickWindow) {
-                        var events = el.ondbltap;
-                        for(var i = 0; i < events.length; i++) {
-                            events[i].handler.apply(shape, [evt]);
-                        }
-                    }
-
-                    shape.inDoubleClickWindow = true;
-
-                    setTimeout(function() {
-                        shape.inDoubleClickWindow = false;
-                    }, that.dblClickWindow);
-                    return true;
-                }
-
-                // handle touchend
-                else if(that.touchEnd) {
-                    that.touchEnd = false;
-                    shape._handleEvents("touchend", evt);
-                    return true;
-                }
-
-                // handle touchmove
-                else if(el.touchmove) {
-                    shape._handleEvents("touchmove", evt);
-                    return true;
-                }
-
-                //this condition is used to identify a new target shape.
-                else if(!that.targetShape || (!targetFound && shape.id !== that.targetShape.id)) {
-                    /*
-                     * check if old target has an onmouseout event listener
-                     */
-                    if(that.targetShape) {
-                        var oldEl = that.targetShape.eventListeners;
-                        if(oldEl) {
-                            that.targetShape._handleEvents("onmouseout", evt);
-                        }
-                    }
-
-                    // set new target shape
-                    that.targetShape = shape;
-
-                    // handle onmouseover
-                    shape._handleEvents("onmouseover", evt);
-                    return true;
-                }
-
-                // handle onmousemove
-                else {
-                    shape._handleEvents("onmousemove", evt);
-                    return true;
-                }
-            }
-            // handle mouseout condition
-            else if(that.targetShape && that.targetShape.id === shape.id) {
-                that.targetShape = undefined;
-                shape._handleEvents("onmouseout", evt);
-                return true;
-            }
-
-            return false;
-        }
-
-        function traverseChildren(obj) {
-            var children = obj.children;
-            // propapgate backwards through children
-            for(var i = children.length - 1; i >= 0; i--) {
-                var child = children[i];
-                if(child.className === "Shape") {
-                    var exit = detectEvent(child);
-                    if(exit) {
-                        return true;
-                    }
-                } else {
-                    traverseChildren(child);
-                }
-            }
-
-            return false;
-        }
-
-        if(go.drag.node === undefined) {
-            for(var n = this.children.length - 1; n >= 0; n--) {
-                var layer = this.children[n];
-                if(layer.visible && n >= 0 && layer.isListening) {
-                    if(traverseChildren(layer)) {
-                        n = -1;
-                    }
                 }
             }
         }
@@ -620,4 +627,4 @@ Kinetic.Stage.prototype = {
     }
 };
 // extend Container
-Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
+Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);

src/geometries/Circle.js

@@ -39,4 +39,4 @@ Kinetic.Circle.prototype = {
 };
 
 // extend Shape
-Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);
+Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);

tests/functionalTests.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css"href="base.css">
-		<script src="../dist/kinetic-v3.8.3.js"></script>
+		<script src="../dist/kinetic-core.js"></script>
 		<script src="functionalTests.js"></script>
 		<script src="testMethods.js"></script>
 		<script>

tests/functionalTests.js

@@ -1,154 +1,8 @@
-function Test(){
+function Test() {
     this.testOnly = "";
     this.counter = 0;
     this.tests = {
-        "DRAG AND DROP - draggable true": function(containerId){
+        "EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": function(containerId) {
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle.draggable(true);
-            
-            layer.add(circle);
-            stage.add(layer);
-        },
-        "DRAG AND DROP - draggable true false": function(containerId){
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle.draggable(true);
-            
-            layer.add(circle);
-            stage.add(layer);
-            
-            circle.draggable(false);
-        },
-        "DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId){
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle.draggable(true);
-            
-            layer.add(circle);
-            stage.add(layer);
-            
-            stage.setScale(0.5);
-            
-            stage.draw();
-        },
-        "DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId){
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle.draggable(true);
-            
-            stage.setScale(0.5);
-            layer.add(circle);
-            stage.add(layer);
-        },
-        "DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape": function(containerId){
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle.draggable(true);
-            
-            layer.add(circle);
-            stage.add(layer);
-            
-            stage.setScale(1.5);
-            
-            stage.draw();
-        },
-        "DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId){
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle.draggable(true);
-            
-            stage.setScale(1.5);
-            
-            layer.add(circle);
-            stage.add(layer);
-        },
-        "DRAG AND DROP - check that other events are disabled": function(containerId){
-            var stage = new Kinetic.Stage(containerId, 578, 200);
-            var layer = new Kinetic.Layer();
-            var circle1 = new Kinetic.Circle({
-                x: stage.width / 2,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "red",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            var circle2 = new Kinetic.Circle({
-                x: stage.width / 2 + 50,
-                y: stage.height / 2,
-                radius: 70,
-                fill: "green",
-                stroke: "black",
-                strokeWidth: 4
-            });
-            
-            circle1.draggable(true);
-            
-            circle2.on("mouseover", function(){
-                log("mouseover green circle");
-            });
-            
-            layer.add(circle1);
-            layer.add(circle2);
-            stage.add(layer);
-        },
-        "EVENTS - mousedown mouseup mouseover mouseout click dblclick": function(containerId){
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
             var circle = new Kinetic.Circle({
@@ -160,35 +14,47 @@ function Test(){
                 strokeWidth: 4,
                 draggable: true
             });
-            
+
-            circle.on('mousedown', function(){
+            circle.on('mousedown', function() {
                 log('mousedown');
             });
-            
+
-            circle.on('mouseup', function(){
+            circle.on('mouseup', function() {
                 log('mouseup');
             });
-            
+
-            circle.on('mouseover', function(){
+            circle.on('touchstart', function() {
+                log('touchstart');
+            });
+
+            circle.on('touchend', function() {
+                log('touchend');
+            });
+
+            circle.on('mouseover', function() {
                 log('mouseover');
             });
-            
+
-            circle.on('mouseout', function(){
+            circle.on('mouseout', function() {
                 log('mouseout');
             });
-            
+
-            circle.on('click', function(){
+            circle.on('click', function() {
                 log('click');
             });
-            
+
-            circle.on('dblclick', function(){
+            circle.on('dblclick', function() {
                 log('dblclick');
             });
-            
+
+            circle.on('dbltap', function() {
+                log('dbltap');
+            });
+
             layer.add(circle);
             stage.add(layer);
         },
-        "EVENTS - modify fill stroke and stroke width": function(containerId){
+        "EVENTS - modify fill stroke and stroke width on hover with circle": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
             var circle = new Kinetic.Circle({
@@ -199,28 +65,28 @@ function Test(){
                 fill: "red",
                 stroke: "black"
             });
-            
+
-            circle.on("mouseover", function(){
+            circle.on("mouseover", function() {
                 this.setFill("yellow");
                 this.setStroke("purple");
                 this.setStrokeWidth(20);
                 layer.draw();
             });
-            
+
-            circle.on("mouseout", function(){
+            circle.on("mouseout", function() {
                 this.setFill("red");
                 this.setStroke("black");
                 this.setStrokeWidth(4);
                 layer.draw();
             });
-            
+
             layer.add(circle);
             stage.add(layer);
         },
-        "EVENTS - 10 point star geometry modify stroke fill and stroke width": function(containerId){
+        "EVENTS - modify fill stroke and stroke width on hover with circle with star": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
-            
+
             var star = new Kinetic.Star({
                 x: 200,
                 y: 100,
@@ -232,27 +98,27 @@ function Test(){
                 strokeWidth: 5,
                 name: "foobar"
             });
-            
+
-            star.on("mouseover", function(){
+            star.on("mouseover", function() {
                 this.setFill("yellow");
                 this.setStroke("purple");
                 this.setStrokeWidth(20);
                 layer.draw();
             });
-            
+
-            star.on("mouseout", function(){
+            star.on("mouseout", function() {
                 this.setFill("green");
                 this.setStroke("blue");
                 this.setStrokeWidth(5);
                 layer.draw();
             });
-            
+
             layer.add(star);
             stage.add(layer);
         },
-        "EVENTS - image geometry modify fill stroke and stroke width": function(containerId){
+        "EVENTS - modify fill stroke and stroke width on hover with circle with image": function(containerId) {
             var imageObj = new Image();
-            imageObj.onload = function(){
+            imageObj.onload = function() {
                 var stage = new Kinetic.Stage(containerId, 578, 200);
                 var layer = new Kinetic.Layer();
                 var darth = new Kinetic.Image({
@@ -260,27 +126,27 @@ function Test(){
                     y: 60,
                     image: imageObj
                 });
-                
+
-                darth.on("mouseover", function(){
+                darth.on("mouseover", function() {
                     this.setFill("yellow");
                     this.setStroke("purple");
                     this.setStrokeWidth(20);
                     layer.draw();
                 });
-                
+
-                darth.on("mouseout", function(){
+                darth.on("mouseout", function() {
-                    this.setFill("");
+                    this.setFill(undefined);
-                    this.setStroke("");
+                    this.setStroke(undefined);
                     this.setStrokeWidth(0);
                     layer.draw();
                 });
-                
+
                 layer.add(darth);
                 stage.add(layer);
             };
             imageObj.src = "darth-vader.jpg";
         },
-        "EVENTS - drag events click": function(containerId){
+        "EVENTS - drag events click": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
             var circle = new Kinetic.Circle({
@@ -291,31 +157,29 @@ function Test(){
                 fill: "red",
                 stroke: "black"
             });
-            
+
             circle.draggable(true);
-            
+
-            
+            circle.on('dragstart', function() {
-            
-            circle.on('dragstart', function(){
                 log('dragstart');
             });
-            
+
-            circle.on('dragmove', function(){
+            circle.on('dragmove', function() {
                 log('dragmove');
             });
-            
+
-            circle.on('dragend', function(){
+            circle.on('dragend', function() {
                 log('dragend');
             });
-            
+
-            circle.on('click', function(){
+            circle.on('click', function() {
                 log('click');
             });
-            
+
             layer.add(circle);
             stage.add(layer);
         },
-        "EVENTS - isDragging": function(containerId){
+        "EVENTS - isDragging": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
             var circle = new Kinetic.Circle({
@@ -326,37 +190,37 @@ function Test(){
                 fill: "red",
                 stroke: "black"
             });
-            
+
             //log('not dragging yet before draggable, isDragging: ' + circle.isDragging());
             test(circle.isDragging() === false, "isDragging() should be false");
-            
+
             circle.draggable(true);
-            
+
             //log('not dragging yet after draggable, isDragging: ' + circle.isDragging());
             test(circle.isDragging() === false, "isDragging() should be false");
-            
+
-            circle.on('dragstart', function(){
+            circle.on('dragstart', function() {
                 log('dragstart, isDragging: ' + this.isDragging());
                 test(circle.isDragging() === true, "isDragging() should be true");
             });
-            
+
-            circle.on('dragmove', function(){
+            circle.on('dragmove', function() {
                 log('dragmove, isDragging: ' + this.isDragging());
                 test(circle.isDragging() === true, "isDragging() should be true");
             });
-            
+
-            circle.on('dragend', function(){
+            circle.on('dragend', function() {
                 log('dragend, isDragging: ' + this.isDragging());
                 test(circle.isDragging() === false, "isDragging() should be false");
             });
-            
+
             layer.add(circle);
             stage.add(layer);
         },
-        "EVENTS - mousemove from shape to another shape in same layer": function(containerId){
+        "EVENTS - mousemove from shape to another shape in same layer": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
-            
+
             var redCircle = new Kinetic.Circle({
                 x: 200,
                 y: stage.height / 2,
@@ -365,14 +229,13 @@ function Test(){
                 fill: "red",
                 stroke: "black"
             });
-            
+
-            redCircle.on("mouseover", function(){
+            redCircle.on("mouseover", function() {
                 log('mouseover red circle');
             });
-            redCircle.on("mouseout", function(){
+            redCircle.on("mouseout", function() {
                 log('mouseout red circle');
             });
-            
             var greenCircle = new Kinetic.Circle({
                 x: 280,
                 y: stage.height / 2,
@@ -381,24 +244,24 @@ function Test(){
                 fill: "green",
                 stroke: "black"
             });
-            
+
-            greenCircle.on("mouseover", function(){
+            greenCircle.on("mouseover", function() {
                 log('mouseover green circle');
             });
-            greenCircle.on("mouseout", function(){
+            greenCircle.on("mouseout", function() {
                 log('mouseout green circle');
             });
-            
+
             layer.add(redCircle);
             layer.add(greenCircle);
-            
+
             stage.add(layer);
         },
-        "EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId){
+        "EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var redLayer = new Kinetic.Layer();
             var greenLayer = new Kinetic.Layer();
-            
+
             var redCircle = new Kinetic.Circle({
                 x: 200,
                 y: stage.height / 2,
@@ -407,14 +270,13 @@ function Test(){
                 fill: "red",
                 stroke: "black"
             });
-            
+
-            redCircle.on("mouseover", function(){
+            redCircle.on("mouseover", function() {
                 log('mouseover red circle');
             });
-            redCircle.on("mouseout", function(){
+            redCircle.on("mouseout", function() {
                 log('mouseout red circle');
             });
-            
             var greenCircle = new Kinetic.Circle({
                 x: 280,
                 y: stage.height / 2,
@@ -423,43 +285,42 @@ function Test(){
                 fill: "green",
                 stroke: "black"
             });
-            
+
-            greenCircle.on("mouseover", function(){
+            greenCircle.on("mouseover", function() {
                 log('mouseover green circle');
             });
-            greenCircle.on("mouseout", function(){
+            greenCircle.on("mouseout", function() {
                 log('mouseout green circle');
             });
-            
+
             redLayer.add(redCircle);
             greenLayer.add(greenCircle);
-            
+
             stage.add(redLayer);
             stage.add(greenLayer);
         },
-        "EVENTS - event bubbling": function(containerId){
+        "EVENTS - event bubbling": function(containerId) {
             var stage = new Kinetic.Stage(containerId, 578, 200);
             var layer = new Kinetic.Layer();
             var group = new Kinetic.Group();
-            
+
-            layer.on("mouseover", function(){
+            layer.on("mouseover", function() {
                 log('mouseover layer');
                 //console.log(this);
             });
-            layer.on("mouseout", function(){
+            layer.on("mouseout", function() {
                 log('mouseout layer');
                 //console.log(this);
             });
-            
+
-            group.on("mouseover", function(){
+            group.on("mouseover", function() {
                 log('mouseover group');
                 //console.log(this);
             });
-            group.on("mouseout", function(){
+            group.on("mouseout", function() {
                 log('mouseout group');
                 //console.log(this);
             });
-            
             var redCircle = new Kinetic.Circle({
                 x: stage.width / 2,
                 y: stage.height / 2,
@@ -468,16 +329,15 @@ function Test(){
                 fill: "red",
                 stroke: "black"
             });
-            
+
-            redCircle.on("mouseover", function(){
+            redCircle.on("mouseover", function() {
                 log('mouseover red circle');
                 //console.log(this);
             });
-            redCircle.on("mouseout", function(){
+            redCircle.on("mouseout", function() {
                 log('mouseout red circle');
                 //console.log(this);
             });
-            
             var greenCircle = new Kinetic.Circle({
                 x: stage.width / 2,
                 y: stage.height / 2,
@@ -486,21 +346,167 @@ function Test(){
                 fill: "green",
                 stroke: "black"
             });
-            
+
-            greenCircle.on("mouseover", function(){
+            greenCircle.on("mouseover", function() {
                 log('mouseover green circle');
                 //console.log(this);
             });
-            greenCircle.on("mouseout", function(){
+            greenCircle.on("mouseout", function() {
                 log('mouseout green circle');
                 //console.log(this);
             });
-            
+
             group.add(redCircle);
             group.add(greenCircle);
-            
+
             layer.add(group);
             stage.add(layer);
+        },
+        "DRAG AND DROP - draggable true": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle.draggable(true);
+
+            layer.add(circle);
+            stage.add(layer);
+        },
+        "DRAG AND DROP - draggable true false": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle.draggable(true);
+
+            layer.add(circle);
+            stage.add(layer);
+
+            circle.draggable(false);
+        },
+        "DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle.draggable(true);
+
+            layer.add(circle);
+            stage.add(layer);
+
+            stage.setScale(0.5);
+
+            stage.draw();
+        },
+        "DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle.draggable(true);
+
+            stage.setScale(0.5);
+            layer.add(circle);
+            stage.add(layer);
+        },
+        "DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle.draggable(true);
+
+            layer.add(circle);
+            stage.add(layer);
+
+            stage.setScale(1.5);
+
+            stage.draw();
+        },
+        "DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle.draggable(true);
+
+            stage.setScale(1.5);
+
+            layer.add(circle);
+            stage.add(layer);
+        },
+        "DRAG AND DROP - check that green events are ignored when dragging red circle": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle1 = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "red",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            var circle2 = new Kinetic.Circle({
+                x: stage.width / 2 + 50,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "green",
+                stroke: "black",
+                strokeWidth: 4
+            });
+
+            circle1.draggable(true);
+
+            circle2.on("mouseover", function() {
+                log("mouseover green circle");
+            });
+
+            layer.add(circle1);
+            layer.add(circle2);
+            stage.add(layer);
         }
     };
-}
+}

tests/unitTests.html

@@ -2,7 +2,7 @@
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css"href="base.css">
-		<script src="../dist/kinetic-v3.8.3.js"></script>
+		<script src="../dist/kinetic-core.js"></script>
 		<script src="unitTests.js"></script>
 		<script src="testMethods.js"></script>
 		<script>

tests/unitTests.js

@@ -258,6 +258,23 @@ function Test() {
             });
             //stage.start();
         },
+        "SHAPES - set fill after instantiation": function(containerId) {
+            var stage = new Kinetic.Stage(containerId, 578, 200);
+            var layer = new Kinetic.Layer();
+            var circle = new Kinetic.Circle({
+                x: stage.width / 2,
+                y: stage.height / 2,
+                radius: 70,
+                fill: "green",
+                stroke: "black",
+                strokeWidth: 4
+            });
+            layer.add(circle);
+
+            circle.setFill("blue");
+
+            stage.add(layer);
+        },
         "SHAPES - add image": function(containerId) {
             var imageObj = new Image();
             imageObj.onload = function() {
@@ -1184,7 +1201,6 @@ function Test() {
             });
 
             stage.start();
-
         }
     };
 }