stage events can now be added without having a target node. i.e. you can bind mousedown, mouseup, click, dblclick, etc. to the stage directly

src/Stage.js

@@ -393,10 +393,13 @@
              * if no shape was detected, clear target shape and try
              * to run mouseout from previous target shape
              */
-            else if(this.targetShape && !go.isDragging()) {
+            else {
+              if(this.targetShape && !go.isDragging()) {
                 this.targetShape._fireAndBubble(MOUSEOUT, evt);
                 this.targetShape._fireAndBubble(MOUSELEAVE, evt);
                 this.targetShape = null;
+              }
+              this._fire(MOUSEMOVE, evt);
             }
 
             if(dd) {
@@ -406,99 +409,81 @@
         _mousedown: function(evt) {
             this._setPointerPosition(evt);
             var go = Kinetic.Global,
-                obj = this.getIntersection(this.getPointerPosition()), 
+                obj = this.getIntersection(this.getPointerPosition()),
-                shape;
+                shape = obj && obj.shape ? obj.shape : this;
 
-            if(obj && obj.shape) {
+            this.clickStart = true;
-                shape = obj.shape;
+            this.clickStartShape = shape;
-                this.clickStart = true;
+            shape._fireAndBubble(MOUSEDOWN, evt);
-                this.clickStartShape = shape;
-                shape._fireAndBubble(MOUSEDOWN, evt);
-            }
-
-            //init stage drag and drop
-            if(this.isDraggable() && !go.isDragReady()) {
-                this.startDrag(evt);
-            }
         },
         _mouseup: function(evt) {
             this._setPointerPosition(evt);
             var that = this, 
                 go = Kinetic.Global, 
                 obj = this.getIntersection(this.getPointerPosition()),
-                shape;
+                shape = obj && obj.shape ? obj.shape : this;
                 
-            if(obj && obj.shape) {
-                shape = obj.shape;
-                shape._fireAndBubble(MOUSEUP, evt);
 
-                // detect if click or double click occurred
+            shape._fireAndBubble(MOUSEUP, evt);
-                if(this.clickStart) {
-                    /*
-                     * if dragging and dropping, or if click doesn't map to 
-                     * the correct shape, don't fire click or dbl click event
-                     */
-                    if(!go.isDragging() && shape._id === this.clickStartShape._id) {
-                        shape._fireAndBubble(CLICK, evt);
 
-                        if(this.inDoubleClickWindow) {
+            // detect if click or double click occurred
-                            shape._fireAndBubble(DBL_CLICK, evt);
+            if(this.clickStart) {
-                        }
+                /*
-                        this.inDoubleClickWindow = true;
+                 * if dragging and dropping, or if click doesn't map to 
-                        setTimeout(function() {
+                 * the correct shape, don't fire click or dbl click event
-                            that.inDoubleClickWindow = false;
+                 */
-                        }, this.dblClickWindow);
+                if(!go.isDragging() && shape._id === this.clickStartShape._id) {
+                    shape._fireAndBubble(CLICK, evt);
+
+                    if(this.inDoubleClickWindow) {
+                        shape._fireAndBubble(DBL_CLICK, evt);
                     }
+                    this.inDoubleClickWindow = true;
+                    setTimeout(function() {
+                        that.inDoubleClickWindow = false;
+                    }, this.dblClickWindow);
                 }
             }
+            
             this.clickStart = false;
         },
         _touchstart: function(evt) {
             this._setPointerPosition(evt);
             var go = Kinetic.Global,
                 obj = this.getIntersection(this.getPointerPosition()),  
-                shape;
+                shape = obj && obj.shape ? obj.shape : this;
             
-            if(obj && obj.shape) {
+            shape = obj.shape;
-                shape = obj.shape;
+            this.tapStart = true;
-                this.tapStart = true;
+            this.tapStartShape = shape;
-                this.tapStartShape = shape;
+            shape._fireAndBubble(TOUCHSTART, evt);
-                shape._fireAndBubble(TOUCHSTART, evt);
-            }
-
-            //init stage drag and drop
-            if(this.isDraggable() && !go.isDragReady()) {
-                this.startDrag(evt);
-            }
         },
         _touchend: function(evt) {
             this._setPointerPosition(evt);
             var that = this, 
                 go = Kinetic.Global, 
                 obj = this.getIntersection(this.getPointerPosition()),
-                shape;
+                shape = obj && obj.shape ? obj.shape : this;
 
-            if(obj && obj.shape) {
+            shape = obj.shape;
-                shape = obj.shape;
+            shape._fireAndBubble(TOUCHEND, evt);
-                shape._fireAndBubble(TOUCHEND, evt);
 
-                // detect if tap or double tap occurred
+            // detect if tap or double tap occurred
-                if(this.tapStart) {
+            if(this.tapStart) {
-                    /*
+                /*
-                     * if dragging and dropping, don't fire tap or dbltap
+                 * if dragging and dropping, don't fire tap or dbltap
-                     * event
+                 * event
-                     */
+                 */
-                    if(!go.isDragging() && shape._id === this.tapStartShape._id) {
+                if(!go.isDragging() && shape._id === this.tapStartShape._id) {
-                        shape._fireAndBubble(TAP, evt);
+                    shape._fireAndBubble(TAP, evt);
 
-                        if(this.inDoubleClickWindow) {
+                    if(this.inDoubleClickWindow) {
-                            shape._fireAndBubble(DBL_TAP, evt);
+                        shape._fireAndBubble(DBL_TAP, evt);
-                        }
-                        this.inDoubleClickWindow = true;
-                        setTimeout(function() {
-                            that.inDoubleClickWindow = false;
-                        }, this.dblClickWindow);
                     }
+                    this.inDoubleClickWindow = true;
+                    setTimeout(function() {
+                        that.inDoubleClickWindow = false;
+                    }, this.dblClickWindow);
                 }
             }
 
@@ -508,13 +493,11 @@
             this._setPointerPosition(evt);
             var dd = Kinetic.DD,
                 obj = this.getIntersection(this.getPointerPosition()),
-                shape;
+                shape = obj && obj.shape ? obj.shape : this;
             
-            if(obj && obj.shape) {
+            shape = obj.shape;
-                shape = obj.shape;
+            shape._fireAndBubble(TOUCHMOVE, evt);
-                shape._fireAndBubble(TOUCHMOVE, evt);
+  
-            }
-
             // start drag and drop
             if(dd) {
                 dd._drag(evt);

tests/html/functionalTests.html

@@ -7,7 +7,6 @@
         </style>
         <link rel="stylesheet" type="text/css"href="../base.css">
         <script src="../../dist/kinetic-v0.0.0.js"></script>
-        <script src="../assets/functionalDataUrls.js"></script>
         <script src="../js/Test.js"></script>
         <script src="../js/functionalTests.js"></script>
         <script>

tests/js/functionalTests.js

@@ -1,5 +1,75 @@
 
 Test.Modules.DD = {
+    'stage mouse handlers': function(containerId) {
+        var stage = new Kinetic.Stage({
+            container: containerId,
+            width: 578,
+            height: 200,
+            draggable: true
+        });
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green',
+            stroke: 'black',
+            strokeWidth: 4,
+            name: 'myCircle',
+            draggable: true
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        /*
+        stage.on('mousedown', function(evt) {
+          console.log('mousedown');
+          console.log(evt.targetNode);
+          console.log('-------');
+        });
+
+        stage.on('mouseup', function(evt) {
+          console.log('mouseup');
+          console.log(evt.targetNode);
+          console.log('-------');
+        });
+        
+        stage.on('mousemove', function(evt) {
+          console.log('mousemove');
+          console.log(evt.targetNode);
+          console.log('-------');
+        });
+        
+        stage.on('click', function(evt) {
+          console.log('click');
+          console.log(evt.targetNode);
+          console.log('-------');
+        });
+        
+
+        stage.on('dblclick', function(evt) {
+          console.log('dblclick');
+          console.log(evt.targetNode);
+          console.log('-------');
+        });
+
+
+        */
+
+        stage.on('dragstart', function(evt) {
+          console.log('dragstart');
+          console.log(evt.targetNode);
+          console.log('-------');
+        });
+
+
+        
+    },
     'remove shape with onclick': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,