further decoupled scene, hit, and buffer graph drawing. To define a custom hit draw function, you now need to set the drawHitFunc attr.

tests/js/Test.js

@@ -39,8 +39,8 @@ function log(message) {
     console.log('LOG: ' + message);
 }
 
-function showBuffer(layer) {
-	document.body.appendChild(layer.bufferCanvas.element);
+function showHit(layer) {
+	document.body.appendChild(layer.hitCanvas.element);
 }
 
 function Test() {

tests/js/functionalTests.js

@@ -859,8 +859,8 @@ Test.Modules.EVENT = {
     }
 };
 
-Test.Modules['BUFFER FUNCS'] = {
-    'test custom circle buffer function': function(containerId) {
+Test.Modules['HIT FUNCS'] = {
+    'test custom circle hit function': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -875,7 +875,7 @@ Test.Modules['BUFFER FUNCS'] = {
             strokeWidth: 4,
             fill: 'red',
             stroke: 'black',
-            drawBufferFunc: function(context) {
+            drawHitFunc: function(context) {
                 context.beginPath();
                 context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
                 context.closePath();
@@ -929,7 +929,7 @@ Test.Modules['BUFFER FUNCS'] = {
 
         // set drawBufferFunc with setter
 
-        circle.setDrawBufferFunc(function(context) {
+        circle.setDrawHitFunc(function(context) {
             context.beginPath();
             context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
             context.closePath();
@@ -937,7 +937,7 @@ Test.Modules['BUFFER FUNCS'] = {
             this.stroke(context);
         });
         
-        layer.drawBuffer();
+        layer.drawHit();
         
         // move mouse far outside circle
         stage._mousemove({

tests/js/manualTests.js

@@ -712,7 +712,7 @@ Test.Modules.MANUAL = {
         layer.add(redCircle);
         stage.add(layer);
     },
-    '*DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
+    'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
         var stage = new Kinetic.Stage({
             container: containerId,
             width: 578,
@@ -784,7 +784,7 @@ Test.Modules.MANUAL = {
             })
         });
         
-        showBuffer(layer);
+        showHit(layer);
     },
     'DRAG AND DROP - two draggable shapes': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -845,7 +845,7 @@ Test.Modules.MANUAL = {
         layer.add(Circle);
         stage.add(layer);
         
-        showBuffer(layer)
+        showHit(layer)
     },
     'DRAG AND DROP - draggable true false': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/unit/nodeTests.js

@@ -79,9 +79,9 @@ Test.Modules.NODE = {
         stage.add(layer);
 
 		rect.setListening(false);
-		layer.drawBuffer();
+		layer.drawHit();
 
-        showBuffer(layer);
+        showHit(layer);
     },
     'group to image': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -317,10 +317,23 @@ Test.Modules.NODE = {
         rect.on('tap', function() {
             taps.push(this.attrs.myAttr);
         });
+        
+        
         var clone = group.clone({
             x: 300,
             name: 'groupClone'
         });
+        
+        
+        showHit(layer);
+
+	
+
+		
+        layer.add(group);
+        layer.add(clone);
+        stage.add(layer);
+
 
         test(clone.getX() === 300, 'clone x should be 300');
         test(clone.getY() === 0, 'clone y should be 50');
@@ -331,11 +344,6 @@ Test.Modules.NODE = {
 
         test(group.getChildren().length === 2, 'group should have two children');
         test(clone.getChildren().length === 2, 'clone should have two children');
-
-        layer.add(group);
-        layer.add(clone);
-        stage.add(layer);
-
         test(group.get('.myText')[0].getTextFill() === 'blue', 'group text should be blue');
         test(clone.get('.myText')[0].getTextFill() === 'blue', 'clone text should be blue');
         clone.get('.myText')[0].setTextFill('black');
@@ -345,10 +353,10 @@ Test.Modules.NODE = {
             myAttr: 'clone rect'
         });
 
-        /*
-         * Make sure that when we change a clone object attr that the rect object
-         * attr isn't updated by reference
-         */
+        
+         // Make sure that when we change a clone object attr that the rect object
+         // attr isn't updated by reference
+         
 
         test(group.get('.myText')[0].getTextFill() === 'blue', 'group text should be blue');
         test(clone.get('.myText')[0].getTextFill() === 'black', 'clone text should be blue');
@@ -377,7 +385,10 @@ Test.Modules.NODE = {
         clone.get('.myRect')[0].simulate('tap');
         test(taps.toString() === 'group rect,clone rect', 'tap order should be group rect followed by clone rect');
 
+
         stage.draw();
+        
+        
     },
     'test on attr change': function(containerId) {
         var stage = new Kinetic.Stage({
@@ -752,20 +763,25 @@ Test.Modules.NODE = {
                 });
 
                 layer.add(cachedShape);
+                layer.draw();
 
                 //console.log(layer.toDataURL());
 
+				
                 cachedShape.createImageBuffer(function() {
                     layer.draw();
                     //console.log(layer.toDataURL());
                     warn(dataUrls['regular and cahced polygon'] === layer.toDataURL(), 'regular and cached polygon layer data url is incorrect');
 
-                    //document.body.appendChild(layer.bufferCanvas.element)
+                    
                 });
+                
             }
+            
+            
         });
 
-		
+		/*
         group.toImage({
             callback: function(imageObj) {
                 test(Kinetic.Type._isElement(imageObj), 'group toImage() should be an image object');
@@ -781,9 +797,9 @@ Test.Modules.NODE = {
                 test(Kinetic.Type._isElement(imageObj), 'stage toImage() should be an image object');
             }
         });
-     
+     	*/
 
-        //document.body.appendChild(layer.bufferCanvas.element)
+        showHit(layer);
     },
     'hide group': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/unit/shapes/circleTests.js

@@ -106,7 +106,6 @@ Test.Modules.CIRCLE = {
                 offset: [-200, -70]
             });
 
-            //document.body.appendChild(layer.bufferCanvas.element)
         };
         imageObj.src = '../assets/darth-vader.jpg';
 
@@ -160,7 +159,7 @@ Test.Modules.CIRCLE = {
 
         test(fill.colorStops.length === 6, 'fill colorStops length should be 6');
 
-        //document.body.appendChild(layer.bufferCanvas.element)
+      
 
     },
     'add circle': function(containerId) {
@@ -216,7 +215,7 @@ Test.Modules.CIRCLE = {
 
         test(circle.getName() === 'myCircle', 'circle name should be myCircle');
 
-        document.body.appendChild(layer.bufferCanvas.element)
+
     },
     'add circle with opacity': function(containerId) {
         var stage = new Kinetic.Stage({

tests/js/unit/shapes/textTests.js

@@ -115,7 +115,7 @@ Test.Modules.Text = {
         //document.body.appendChild(layer.bufferCanvas.element)
 
         //layer.setListening(false);
-        layer.drawBuffer();
+        layer.drawHit();
 
     },
     'test size setters and getters': function(containerId) {