added functional tests. fixed line shadow bug

src/Context.js

@@ -544,6 +544,7 @@
                     this.setLineDash(dashArray);
                 }
                 if(!skipShadow && shape.hasShadow()) {
+                    this.save();
                     this._applyShadow(shape);
                 }
                 this.setAttr('lineWidth', strokeWidth || 2);
@@ -551,6 +552,7 @@
                 shape._strokeFunc(this);
                 
                 if(!skipShadow && shape.hasShadow()) {
+                    this.restore();
                     this._stroke(shape, true);
                 }
                 /////////////////////

test/functional/DragAndDropEvents-test.js

@@ -0,0 +1,399 @@
+suite('DragAndDropEvents', function() {
+    // ======================================================
+    test('test dragstart, dragmove, dragend', function() {
+        var stage = addStage();
+
+        var layer = new Kinetic.Layer();
+
+        var greenCircle = new Kinetic.Circle({
+            x: 40,
+            y: 40,
+            radius: 20,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            opacity: 0.5
+        });
+
+
+        var circle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            opacity: 0.5
+
+        });
+
+        circle.setDraggable(true);
+
+        layer.add(circle);
+        layer.add(greenCircle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        var dragStart = false;
+        var dragMove = false;
+        var dragEnd = false;
+        var mouseup = false;
+        var layerDragMove = false;
+        var events = [];
+
+        circle.on('dragstart', function() {
+            dragStart = true;
+        });
+
+
+        circle.on('dragmove', function() {
+            dragMove = true;
+        });
+
+
+        layer.on('dragmove', function() {
+            //console.log('move');
+        });
+
+        circle.on('dragend', function() {
+            dragEnd = true;
+            //console.log('dragend');
+            events.push('dragend');
+        });
+
+
+
+        circle.on('mouseup', function() {
+            //console.log('mouseup');
+            events.push('mouseup');
+        });
+
+
+        assert(!Kinetic.isDragging(), ' isDragging() should be false 1');
+        assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 2');
+
+        /*
+        * simulate drag and drop
+        */
+        //console.log(1)
+        stage._mousedown({
+            clientX: 380,
+            clientY: 98 + top
+        });
+        //console.log(2)
+        assert(!dragStart, 'dragstart event should not have been triggered 3');
+        //assert.equal(!dragMove, 'dragmove event should not have been triggered');
+        assert(!dragEnd, 'dragend event should not have been triggered 4');
+
+        assert(!Kinetic.isDragging(), ' isDragging() should be false 5');
+        assert(Kinetic.isDragReady(), ' isDragReady()) should be true 6');
+
+        stage._mousemove({
+            clientX: 100,
+            clientY: 98 + top
+        });
+
+        assert(Kinetic.isDragging(), ' isDragging() should be true 7');
+        assert(Kinetic.isDragReady(), ' isDragReady()) should be true 8');
+
+        assert(dragStart, 'dragstart event was not triggered 9');
+        //assert.equal(dragMove, 'dragmove event was not triggered');
+        assert(!dragEnd, 'dragend event should not have been triggered 10');
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 100,
+            clientY: 98 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:circle});
+
+        assert(dragStart, 'dragstart event was not triggered 11');
+        assert(dragMove, 'dragmove event was not triggered 12');
+        assert(dragEnd, 'dragend event was not triggered 13');
+
+        assert.equal(events.toString(), 'mouseup,dragend', 'mouseup should occur before dragend 14');
+
+
+        assert(!Kinetic.isDragging(), ' isDragging() should be false 15');
+        assert(!Kinetic.isDragReady(), ' isDragReady()) should be false 16');
+
+        //console.log(greenCircle.getPosition());
+        //console.log(circle.getPosition());
+
+
+
+        assert.equal(greenCircle.getX(), 40, 'green circle x should be 40');
+        assert.equal(greenCircle.getY(), 40, 'green circle y should be 40');
+        assert.equal(circle.getX(), 100, 'circle x should be 100');
+        assert.equal(circle.getY(), 100, 'circle y should be 100');
+
+        showHit(layer);
+
+    });
+
+    // ======================================================
+    test('destroy shape while dragging', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var greenCircle = new Kinetic.Circle({
+            x: 40,
+            y: 40,
+            radius: 20,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            opacity: 0.5
+        });
+
+
+        var circle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            opacity: 0.5
+
+        });
+
+        circle.setDraggable(true);
+
+        layer.add(circle);
+        layer.add(greenCircle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+
+        var dragEnd = false;
+
+
+        circle.on('dragend', function() {
+            dragEnd = true;
+
+        });
+
+
+
+        circle.on('mouseup', function() {
+            //console.log('mouseup');
+            events.push('mouseup');
+        });
+
+        assert(!Kinetic.isDragging(), ' isDragging() should be false');
+        assert(!Kinetic.isDragReady(), ' isDragReady()) should be false');
+
+
+        stage._mousedown({
+            clientX: 380,
+            clientY: 98 + top
+        });
+
+        assert(!circle.isDragging(), 'circle should not be dragging');
+
+        stage._mousemove({
+            clientX: 100,
+            clientY: 98 + top
+        });
+
+
+        assert(circle.isDragging(), 'circle should be dragging');
+        assert(!dragEnd, 'dragEnd should not have fired yet');
+
+        // at this point, we are in drag and drop mode
+
+
+        // removing or destroying the circle should trigger dragend
+        circle.destroy();
+        layer.draw();
+
+        assert(!circle.isDragging(), 'destroying circle should stop drag and drop');
+        assert(dragEnd, 'dragEnd should have fired');
+
+
+
+    });
+
+    // ======================================================
+    test('click should not occur after drag and drop', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: 40,
+            y: 40,
+            radius: 20,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            draggable: true
+        });
+
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top,
+            clicked = false;
+
+        circle.on('click', function() {
+            //console.log('click');
+            clicked = true;
+        });
+
+        circle.on('dblclick', function() {
+            //console.log('dblclick');
+        });
+
+        stage._mousedown({
+            clientX: 40,
+            clientY: 40 + top
+        });
+
+        stage._mousemove({
+            clientX: 100,
+            clientY: 100 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 100,
+            clientY: 100 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:circle});
+
+        assert(!clicked, 'click event should not have been fired');
+
+    });
+
+    // ======================================================
+    test('cancel drag and drop by setting draggable to false', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: 380,
+            y: 100,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            draggable: true
+        });
+
+        var dragStart = false;
+        var dragMove = false;
+        var dragEnd = false;
+
+        circle.on('dragstart', function() {
+            dragStart = true;
+        });
+
+        circle.on('dragmove', function() {
+            dragMove = true;
+        });
+
+        circle.on('dragend', function() {
+            dragEnd = true;
+        });
+
+        circle.on('mousedown', function() {
+            circle.setDraggable(false);
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        /*
+         * simulate drag and drop
+         */
+        stage._mousedown({
+            clientX: 380,
+            clientY: 100 + top
+        });
+
+        stage._mousemove({
+            clientX: 100,
+            clientY: 100 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 100,
+            clientY: 100 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:circle});
+
+        assert.equal(circle.getPosition().x, 380, 'circle x should be 380');
+        assert.equal(circle.getPosition().y, 100, 'circle y should be 100');
+    });
+
+    // ======================================================
+    test('drag and drop layer', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer({
+            drawFunc: function() {
+                var context = this.getContext();
+                context.beginPath();
+                context.moveTo(200, 50);
+                context.lineTo(420, 80);
+                context.quadraticCurveTo(300, 100, 260, 170);
+                context.closePath();
+                context.fillStyle = 'blue';
+                context.fill(context);
+            },
+            draggable: true
+        });
+
+        var circle1 = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red'
+        });
+
+        var circle2 = new Kinetic.Circle({
+            x: 400,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green'
+        });
+
+        layer.add(circle1);
+        layer.add(circle2);
+
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        /*
+         * simulate drag and drop
+         */
+        stage._mousedown({
+            clientX: 399,
+            clientY: 96 + top
+        });
+
+        stage._mousemove({
+            clientX: 210,
+            clientY: 109 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 210,
+            clientY: 109 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:circle2});
+
+        //console.log(layer.getPosition())
+
+        assert.equal(layer.getX(), -189, 'layer x should be -189');
+        assert.equal(layer.getY(), 13, 'layer y should be 13');
+
+    });
+});

test/functional/KineticEvents-test.js

@@ -0,0 +1,34 @@
+suite('KineticEvents', function() {
+
+    // ======================================================
+    test('draw events', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red'
+        });
+
+        var events = [];
+
+        layer.on('draw', function(evt) {
+            events.push('layer-draw');
+        });
+
+        layer.on('beforeDraw', function(evt) {
+            events.push('layer-beforeDraw');
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        //console.log(events.toString())
+
+        assert.equal(events.toString(), 'layer-beforeDraw,layer-draw', 'draw event order is incorrect');
+
+
+    });
+});

test/functional/MouseEvents-test.js

@@ -0,0 +1,974 @@
+suite('MouseEvents', function() {
+    
+    // ======================================================
+    test('stage content mouse events', function() {
+
+    var stage = addStage();
+    var layer = new Kinetic.Layer();
+    var circle = new Kinetic.Circle({
+        x: 100,
+        y: 100,
+        radius: 70,
+        fill: 'green',
+        stroke: 'black',
+        strokeWidth: 4,
+        name: 'myCircle'
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    var circleMousedown =
+        circleMouseup =
+        stageContentMousedown =
+        stageContentMouseup =
+        stageContentMousemove =
+        stageContentMouseout =
+        stageContentMouseover =
+        stageContentClick =
+        stageContentDblClick =
+        0;
+
+    var top = stage.content.getBoundingClientRect().top;
+
+
+    circle.on('mousedown', function() {
+      circleMousedown++;
+    });
+
+    circle.on('mouseup', function() {
+      circleMouseup++;
+    });
+
+    stage.on('contentMousedown', function() {
+      stageContentMousedown++;
+    });
+
+    stage.on('contentMouseup', function() {
+      stageContentMouseup++;
+    });
+
+    stage.on('contentMousemove', function() {
+      stageContentMousemove++;
+    });
+
+    stage.on('contentMouseout', function() {
+      stageContentMouseout++;
+    });
+
+    stage.on('contentMouseover', function() {
+      stageContentMouseover++;
+    });
+
+    stage.on('contentClick', function() {
+      //console.log('click');
+      stageContentClick++;
+    });
+
+    stage.on('contentDblclick', function() {
+      //console.log('dbl click');
+      stageContentDblClick++;
+    });
+
+    stage._mousedown({
+        clientX: 100,
+        clientY: 100 + top
+    });
+
+    stage._mouseup({
+        clientX: 100,
+        clientY: 100 + top
+    });
+
+    assert.equal(circleMousedown, 1);
+    assert.equal(circleMouseup, 1);
+    assert.equal(stageContentMousedown, 1);
+    assert.equal(stageContentMouseup, 1);
+    assert.equal(stageContentClick, 1);
+
+    stage._mousedown({
+        clientX: 1,
+        clientY: 1 + top
+    });
+    stage._mouseup({
+        clientX: 1,
+        clientY: 1 + top
+    });
+
+    assert.equal(stageContentMousedown, 2);
+    assert.equal(stageContentMouseup, 2);
+
+    // trigger double click
+    stage._mousedown({
+        clientX: 1,
+        clientY: 1 + top
+    });
+    stage._mouseup({
+        clientX: 1,
+        clientY: 1 + top
+    });
+
+    assert.equal(stageContentMousedown, 3);
+    assert.equal(stageContentMouseup, 3);
+    //assert.equal(stageContentDblClick, 1);
+
+    stage._mousemove({
+        clientX: 200,
+        clientY: 1 + top
+    });
+
+    assert.equal(stageContentMousemove, 1);
+
+    stage._mouseout({
+        clientX: 0,
+        clientY: 0
+    });
+
+    assert.equal(stageContentMouseout, 1);
+
+    stage._mouseover({
+        clientX: 0,
+        clientY: 0
+    });
+
+    assert.equal(stageContentMouseover, 1);
+  });
+
+
+
+    // ======================================================
+    test('remove shape with onclick', function() {
+        var stage = addStage();
+
+        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);
+
+        function remove() {
+            circle.remove();
+            layer.draw();
+        }
+
+        circle.on('click', function() {
+            setTimeout(remove, 0);
+        });
+
+        stage._mousedown({
+            clientX: 291,
+            clientY: 112 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 291,
+            clientY: 112 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:circle});
+    });
+
+    // ======================================================
+    test('click mapping', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer({
+            drawFunc: function() {
+                var context = this.getContext();
+                context.beginPath();
+                context.moveTo(200, 50);
+                context.lineTo(420, 80);
+                context.quadraticCurveTo(300, 100, 260, 170);
+                context.closePath();
+                context.fillStyle = 'blue';
+                context.fill(context);
+            }
+        });
+
+        var redCircle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red'
+        });
+
+        var greenCircle = new Kinetic.Circle({
+            x: 400,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'green'
+        });
+
+        var redClicks = 0;
+        var greenClicks = 0;
+
+        redCircle.on('click', function() {
+            //console.log('clicked redCircle');
+            redClicks++;
+        });
+
+        greenCircle.on('click', function() {
+            //console.log('clicked greenCircle');
+            greenClicks++;
+        });
+
+
+        layer.add(redCircle);
+        layer.add(greenCircle);
+
+        stage.add(layer);
+        var top = stage.content.getBoundingClientRect().top;
+
+        showHit(layer);
+
+        // mousedown and mouseup on red circle
+        stage._mousedown({
+            clientX: 284,
+            clientY: 113 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 284,
+            clientY: 113 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:redCircle});
+
+        assert.equal(redClicks, 1, 'red circle should have 1 click');
+        assert.equal(greenClicks, 0, 'green circle should have 0 clicks');
+
+        // mousedown and mouseup on green circle
+        stage._mousedown({
+            clientX: 397,
+            clientY: 108 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 397,
+            clientY: 108 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:redCircle});
+
+        assert.equal(redClicks, 1, 'red circle should have 1 click');
+        assert.equal(greenClicks, 1, 'green circle should have 1 click');
+
+        // mousedown red circle and mouseup on green circle
+        stage._mousedown({
+            clientX: 284,
+            clientY: 113 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 397,
+            clientY: 108 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:redCircle});
+
+        assert.equal(redClicks, 1, 'red circle should still have 1 click');
+        assert.equal(greenClicks, 1, 'green circle should still have 1 click');
+
+    });
+
+    // ======================================================
+    test('text events', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var text = new Kinetic.Text({
+            x: 290,
+            y: 111,
+            fontFamily: 'Calibri',
+            fontSize: 30,
+            fill: 'red',
+            text: 'Testing 123',
+            draggable: true
+        });
+
+        var click = false
+
+        text.on('click', function() {
+            //console.log('text click');
+            click = true;
+        });
+
+        layer.add(text);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        showHit(layer);
+
+        stage._mousedown({
+            clientX: 300,
+            clientY: 120 + top
+        });
+
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 300,
+            clientY: 120 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:text});
+
+        //TODO: can't get this to pass
+        assert.equal(click, true, 'click event should have been fired when mousing down and then up on text');
+
+    });
+
+    // ======================================================
+    test('modify fill stroke and stroke width on hover with circle', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer({
+            throttle: 999
+        });
+        var circle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black'
+        });
+
+        circle.on('mouseover', function() {
+            this.setFill('yellow');
+            this.setStroke('purple');
+            this.setStrokeWidth(20);
+            //console.log('mouseover')
+            layer.draw();
+        });
+
+        circle.on('mouseout', function() {
+            this.setFill('red');
+            this.setStroke('black');
+            this.setStrokeWidth(4);
+            //console.log('mouseout')
+            layer.draw();
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        assert.equal(circle.getFill(), 'red', 'circle fill should be red');
+        assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
+
+        stage._mousemove({
+            clientX: 377,
+            clientY: 101 + top
+        });
+
+        assert.equal(circle.getFill(), 'yellow', 'circle fill should be yellow');
+        assert.equal(circle.getStroke(), 'purple', 'circle stroke should be purple');
+
+        // move mouse back out of circle
+        stage._mousemove({
+            clientX: 157,
+            clientY: 138 + top
+        });
+        stage._mousemove({
+            clientX: 157,
+            clientY: 138 + top
+        });
+
+        assert.equal(circle.getFill(), 'red', 'circle fill should be red');
+        assert.equal(circle.getStroke(), 'black', 'circle stroke should be black');
+    });
+
+    // ======================================================
+    test('mousedown mouseup mouseover mouseout mousemove click dblclick', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+        // desktop events
+        var mousedown = false;
+        var mouseup = false;
+        var click = false;
+        var dblclick = false;
+        var mouseover = false;
+        var mouseout = false;
+        var mousemove = 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');
+        });
+
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        // move mouse to center of circle to trigger mouseover
+        stage._mousemove({
+            clientX: 290,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '1) mouseover should be true');
+        assert(!mousemove, '1) mousemove should be true');
+        assert(!mousedown, '1) mousedown should be false');
+        assert(!mouseup, '1) mouseup should be false');
+        assert(!click, '1) click should be false');
+        assert(!dblclick, '1) dblclick should be false');
+        assert(!mouseout, '1) mouseout should be false');
+
+        // move mouse again inside circle to trigger mousemove
+        stage._mousemove({
+            clientX: 290,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '2) mouseover should be true');
+        assert(mousemove, '2) mousemove should be true');
+        assert(!mousedown, '2) mousedown should be false');
+        assert(!mouseup, '2) mouseup should be false');
+        assert(!click, '2) click should be false');
+        assert(!dblclick, '2) dblclick should be false');
+        assert(!mouseout, '2) mouseout should be false');
+
+        // mousedown inside circle
+        stage._mousedown({
+            clientX: 290,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '3) mouseover should be true');
+        assert(mousemove, '3) mousemove should be true');
+        assert(mousedown, '3) mousedown should be true');
+        assert(!mouseup, '3) mouseup should be false');
+        assert(!click, '3) click should be false');
+        assert(!dblclick, '3) dblclick should be false');
+        assert(!mouseout, '3) mouseout should be false');
+
+        // mouseup inside circle
+        stage._mouseup({
+            clientX: 290,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '4) mouseover should be true');
+        assert(mousemove, '4) mousemove should be true');
+        assert(mousedown, '4) mousedown should be true');
+        assert(mouseup, '4) mouseup should be true');
+        assert(click, '4) click should be true');
+        assert(!dblclick, '4) dblclick should be false');
+        assert(!mouseout, '4) mouseout should be false');
+
+        // mousedown inside circle
+        stage._mousedown({
+            clientX: 290,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '5) mouseover should be true');
+        assert(mousemove, '5) mousemove should be true');
+        assert(mousedown, '5) mousedown should be true');
+        assert(mouseup, '5) mouseup should be true');
+        assert(click, '5) click should be true');
+        assert(!dblclick, '5) dblclick should be false');
+        assert(!mouseout, '5) mouseout should be false');
+
+        // mouseup inside circle to trigger double click
+        stage._mouseup({
+            clientX: 290,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '6) mouseover should be true');
+        assert(mousemove, '6) mousemove should be true');
+        assert(mousedown, '6) mousedown should be true');
+        assert(mouseup, '6) mouseup should be true');
+        assert(click, '6) click should be true');
+        assert(dblclick, '6) dblclick should be true');
+        assert(!mouseout, '6) mouseout should be false');
+
+        // move mouse outside of circle to trigger mouseout
+        stage._mousemove({
+            clientX: 0,
+            clientY: 100 + top
+        });
+        stage._mousemove({
+            clientX: 0,
+            clientY: 100 + top
+        });
+
+        assert(mouseover, '7) mouseover should be true');
+        assert(mousemove, '7) mousemove should be true');
+        assert(mousedown, '7) mousedown should be true');
+        assert(mouseup, '7) mouseup should be true');
+        assert(click, '7) click should be true');
+        assert(dblclick, '7) dblclick should be true');
+        assert(mouseout, '7) mouseout should be true');
+    });
+
+    // ======================================================
+    test('test group mousedown events', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group();
+
+        var redCircle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 80,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            name: 'red'
+        });
+
+        var greenCircle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 40,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            name: 'green'
+        });
+
+        group.add(redCircle);
+        group.add(greenCircle);
+
+        layer.add(group);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        var groupMousedowns = 0;
+        var greenCircleMousedowns = 0;
+
+        group.on('mousedown', function() {
+            groupMousedowns++;
+        });
+
+        greenCircle.on('mousedown', function() {
+            greenCircleMousedowns++;
+        });
+
+        stage._mousedown({
+            clientX: 285,
+            clientY: 100 + top
+        });
+
+        assert.equal(groupMousedowns, 1, 'groupMousedowns should be 1');
+        assert.equal(greenCircleMousedowns, 1, 'greenCircleMousedowns should be 1');
+
+        stage._mousedown({
+            clientX: 332,
+            clientY: 139 + top
+        });
+
+        assert.equal(groupMousedowns, 2, 'groupMousedowns should be 2');
+        assert.equal(greenCircleMousedowns, 1, 'greenCircleMousedowns should be 1');
+
+        stage._mousedown({
+            clientX: 285,
+            clientY: 92 + top
+        });
+
+        assert.equal(groupMousedowns, 3, 'groupMousedowns should be 3');
+        assert.equal(greenCircleMousedowns, 2, 'greenCircleMousedowns should be 2');
+
+        stage._mousedown({
+            clientX: 221,
+            clientY: 146 + top
+        });
+
+        //assert.equal(groupMousedowns, 4, 'groupMousedowns should be 4');
+        assert.equal(greenCircleMousedowns, 2, 'greenCircleMousedowns should be 2');
+    });
+
+    // ======================================================
+    test('group mouseenter events', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var group = new Kinetic.Group({
+            name: 'group'
+        });
+
+        var redMouseenters = 0;
+        var redMouseleaves = 0;
+        var greenMouseenters = 0;
+        var greenMouseleaves = 0;
+        var groupMouseenters = 0;
+        var groupMouseleaves = 0;
+
+        var redCircle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 80,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            name: 'red'
+        });
+
+        var greenCircle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 40,
+            strokeWidth: 4,
+            fill: 'green',
+            stroke: 'black',
+            name: 'green'
+        });
+
+        group.on('mouseenter', function() {
+            groupMouseenters++;
+            //console.log('group over')
+        });
+
+        group.on('mouseleave', function() {
+            groupMouseleaves++;
+            //console.log('group out')
+        });
+
+        redCircle.on('mouseenter', function() {
+            redMouseenters++;
+            //console.log('red over')
+        });
+
+        redCircle.on('mouseleave', function() {
+            redMouseleaves++;
+            //console.log('red out')
+        });
+
+        greenCircle.on('mouseenter', function() {
+            greenMouseenters++;
+            //console.log('green over')
+        });
+
+        greenCircle.on('mouseleave', function() {
+            greenMouseleaves++;
+            //console.log('green out')
+        });
+
+        group.add(redCircle);
+        group.add(greenCircle);
+
+        layer.add(group);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        // move mouse outside of circles
+        stage._mousemove({
+            clientX: 177,
+            clientY: 146 + top
+        });
+
+        assert.equal(redMouseenters, 0, 'redMouseenters should be 0');
+        assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
+        assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
+        assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
+        assert.equal(groupMouseenters, 0, 'groupMouseenters should be 0');
+        assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
+
+        // move mouse inside of red circle
+        stage._mousemove({
+            clientX: 236,
+            clientY: 145 + top
+        });
+
+        //console.log('groupMouseenters=' + groupMouseenters);
+
+        assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
+        assert.equal(redMouseleaves, 0, 'redMouseleaves should be 0');
+        assert.equal(greenMouseenters, 0, 'greenMouseenters should be 0');
+        assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
+        assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
+        assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
+
+        // move mouse inside of green circle
+        stage._mousemove({
+            clientX: 284,
+            clientY: 118 + top
+        });
+
+        assert.equal(redMouseenters, 1, 'redMouseenters should be 1');
+        assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
+        assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
+        assert.equal(greenMouseleaves, 0, 'greenMouseleaves should be 0');
+        assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
+        assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
+
+        // move mouse back to red circle
+
+        stage._mousemove({
+            clientX: 345,
+            clientY: 105 + top
+        });
+        stage._mousemove({
+            clientX: 345,
+            clientY: 105 + top
+        });
+
+        assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
+        assert.equal(redMouseleaves, 1, 'redMouseleaves should be 1');
+        assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
+        assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
+        assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
+        assert.equal(groupMouseleaves, 0, 'groupMouseleaves should be 0');
+
+        // move mouse outside of circles
+        stage._mousemove({
+            clientX: 177,
+            clientY: 146 + top
+        });
+        stage._mousemove({
+            clientX: 177,
+            clientY: 146 + top
+        });
+        assert.equal(redMouseenters, 2, 'redMouseenters should be 2');
+        assert.equal(redMouseleaves, 2, 'redMouseleaves should be 2');
+        assert.equal(greenMouseenters, 1, 'greenMouseenters should be 1');
+        assert.equal(greenMouseleaves, 1, 'greenMouseleaves should be 1');
+        assert.equal(groupMouseenters, 1, 'groupMouseenters should be 1');
+        assert.equal(groupMouseleaves, 1, 'groupMouseleaves should be 1');
+
+        //document.body.appendChild(layer.bufferCanvas.element)
+
+        //layer.bufferCanvas.element.style.marginTop = '220px';
+
+    });
+
+    // ======================================================
+    test('test event bubbling', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black'
+        });
+
+        var group1 = new Kinetic.Group();
+        var group2 = new Kinetic.Group();
+
+        /*
+         *   stage
+         *     |
+         *   layer
+         *     |
+         *  group2
+         *     |
+         *  group1
+         *     |
+         *  circle
+         */
+
+        group1.add(circle);
+        group2.add(group1);
+        layer.add(group2);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        // events array
+        var e = [];
+
+        circle.on('click', function() {
+            e.push('circle');
+        });
+        group1.on('click', function() {
+            e.push('group1');
+        });
+        group2.on('click', function() {
+            e.push('group2');
+        });
+        layer.on('click', function() {
+            e.push('layer');
+        });
+        stage.on('click', function() {
+            e.push('stage');
+        });
+        // click on circle
+        stage._mousedown({
+            clientX: 374,
+            clientY: 114 + top
+        });
+        Kinetic.DD._endDragBefore();
+        stage._mouseup({
+            clientX: 374,
+            clientY: 114 + top
+        });
+        Kinetic.DD._endDragAfter({dragEndNode:circle});
+
+        assert.equal(e.toString(), 'circle,group1,group2,layer,stage', 'problem with event bubbling');
+  
+    });
+
+    // ======================================================
+    test('test custom circle hit function', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: 380,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            strokeWidth: 4,
+            fill: 'red',
+            stroke: 'black',
+            drawHitFunc: function(context) {
+                var _context = context._context;
+
+                _context.beginPath();
+                _context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
+                _context.closePath();
+                context.fillStrokeShape(this);
+            }
+        });
+
+        circle.setDraggable(true);
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        var mouseovers = 0;
+        var mouseouts = 0;
+
+        circle.on('mouseover', function() {
+            mouseovers++;
+        });
+
+        circle.on('mouseout', function() {
+            mouseouts++;
+        });
+        // move mouse far outside circle
+        stage._mousemove({
+            clientX: 113,
+            clientY: 112 + top
+        });
+
+        assert.equal(mouseovers, 0, '1) mouseovers should be 0');
+        assert.equal(mouseouts, 0, '1) mouseouts should be 0');
+
+        stage._mousemove({
+            clientX: 286,
+            clientY: 118 + top
+        });
+
+        assert.equal(mouseovers, 1, '2) mouseovers should be 1');
+        assert.equal(mouseouts, 0, '2)mouseouts should be 0');
+
+        stage._mousemove({
+            clientX: 113,
+            clientY: 112 + top
+        });
+
+        assert.equal(mouseovers, 1, '3) mouseovers should be 1');
+        assert.equal(mouseouts, 1, '3) mouseouts should be 1');
+
+        showHit(layer);
+
+
+        // set drawBufferFunc with setter
+
+        circle.setDrawHitFunc(function(context) {
+            var _context = context._context;
+            _context.beginPath();
+            _context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
+            _context.closePath();
+            context.fillStrokeShape(this);
+
+        });
+
+        layer.getHitCanvas().getContext().clear();
+        layer.drawHit();
+
+
+        // move mouse far outside circle
+        stage._mousemove({
+            clientX: 113,
+            clientY: 112 + top
+        });
+
+        assert.equal(mouseovers, 1, '4) mouseovers should be 1');
+        assert.equal(mouseouts, 1, '4) mouseouts should be 1');
+
+        stage._mousemove({
+            clientX: 286,
+            clientY: 118 + top
+        });
+
+        assert.equal(mouseovers, 1, '5) mouseovers should be 1');
+        assert.equal(mouseouts, 1, '5) mouseouts should be 1');
+
+        stage._mousemove({
+            clientX: 321,
+            clientY: 112 + top
+        });
+
+        assert.equal(mouseovers, 1, '6) mouseovers should be 1');
+        assert.equal(mouseouts, 1, '6) mouseouts should be 1');
+
+        // move to center of circle
+        stage._mousemove({
+            clientX: 375,
+            clientY: 112 + top
+        });
+
+        assert.equal(mouseovers, 2, '7) mouseovers should be 2');
+        assert.equal(mouseouts, 1, '7) mouseouts should be 1');
+
+    });
+});

test/functional/TouchEvents-test.js

@@ -0,0 +1,226 @@
+suite('TouchEvents', function() {
+
+    // ======================================================
+    test('stage content touch events', function() {
+    var stage = addStage();
+    var layer = new Kinetic.Layer();
+    var circle = new Kinetic.Circle({
+        x: 100,
+        y: 100,
+        radius: 70,
+        fill: 'green',
+        stroke: 'black',
+        strokeWidth: 4,
+        name: 'myCircle'
+    });
+
+    layer.add(circle);
+    stage.add(layer);
+
+    var circleTouchstart =
+        circleTouchend =
+        stageContentTouchstart =
+        stageContentTouchend =
+        stageContentTouchmove =
+        stageContentTap =
+        stageContentDbltap =
+        0;
+
+    var top = stage.content.getBoundingClientRect().top;
+
+
+    circle.on('touchstart', function() {
+      circleTouchstart++;
+    });
+
+    circle.on('touchend', function() {
+      circleTouchend++;
+    });
+
+    stage.on('contentTouchstart', function() {
+      stageContentTouchstart++;
+    });
+
+    stage.on('contentTouchend', function() {
+      stageContentTouchend++;
+    });
+
+    stage.on('contentTouchmove', function() {
+      stageContentTouchmove++;
+    });
+
+    stage.on('contentTap', function() {
+      stageContentTap++;
+    });
+
+    stage.on('contentDbltap', function() {
+      stageContentDbltap++;
+    });
+
+    stage._touchstart({
+        clientX: 100,
+        clientY: 100 + top
+    });
+
+    stage._touchend({
+        clientX: 100,
+        clientY: 100 + top
+    });
+
+    assert.equal(circleTouchstart, 1, 1);
+    assert.equal(circleTouchend, 1, 2);
+    assert.equal(stageContentTouchstart, 1, 3);
+    assert.equal(stageContentTouchend, 1, 4);
+    assert.equal(stageContentDbltap, 0, 5);
+
+    stage._touchstart({
+        clientX: 1,
+        clientY: 1 + top
+    });
+    stage._touchend({
+        clientX: 1,
+        clientY: 1 + top
+    });
+
+    assert.equal(stageContentTouchstart, 2, 6);
+    assert.equal(stageContentTouchend, 2, 7);
+    assert.equal(stageContentDbltap, 1, 8);
+
+  });
+
+
+    // ======================================================
+    test('touchstart touchend touchmove tap dbltap', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+        var circle = new Kinetic.Circle({
+            x: stage.getWidth() / 2,
+            y: stage.getHeight() / 2,
+            radius: 70,
+            fill: 'red',
+            stroke: 'black',
+            strokeWidth: 4
+        });
+
+
+        // mobile events
+        var touchstart = false;
+        var touchend = false;
+        var tap = false;
+        var touchmove = false;
+        var dbltap = false;
+
+
+        /*
+         * 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);
+
+        var top = stage.content.getBoundingClientRect().top;
+
+        // reset inDoubleClickWindow
+        Kinetic.inDblClickWindow = false;
+
+        // touchstart circle
+        stage._touchstart({
+            clientX: 289,
+            clientY: 100 + top,
+            preventDefault: function() {
+            }
+        });
+
+        assert(touchstart, '8) touchstart should be true');
+        assert(!touchmove, '8) touchmove should be false');
+        assert(!touchend, '8) touchend should be false');
+        assert(!tap, '8) tap should be false');
+        assert(!dbltap, '8) dbltap should be false');
+
+        // touchend circle
+        stage._touchend({
+            clientX: 289,
+            clientY: 100 + top,
+            preventDefault: function() {
+            }
+        });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        //Kinetic.DD._endDrag();
+
+        assert(touchstart, '9) touchstart should be true');
+        assert(!touchmove, '9) touchmove should be false');
+        assert(touchend, '9) touchend should be true');
+        assert(tap, '9) tap should be true');
+        assert(!dbltap, '9) dbltap should be false');
+
+        // touchstart circle
+        stage._touchstart({
+            clientX: 289,
+            clientY: 100 + top,
+            preventDefault: function() {
+            }
+        });
+
+        assert(touchstart, '10) touchstart should be true');
+        assert(!touchmove, '10) touchmove should be false');
+        assert(touchend, '10) touchend should be true');
+        assert(tap, '10) tap should be true');
+        assert(!dbltap, '10) dbltap should be false');
+
+        // touchend circle to triger dbltap
+        stage._touchend({
+            clientX: 289,
+            clientY: 100 + top,
+            preventDefault: function() {
+            }
+        });
+        // end drag is tied to document mouseup and touchend event
+        // which can't be simulated.  call _endDrag manually
+        //Kinetic.DD._endDrag();
+
+        assert(touchstart, '11) touchstart should be true');
+        assert(!touchmove, '11) touchmove should be false');
+        assert(touchend, '11) touchend should be true');
+        assert(tap, '11) tap should be true');
+        assert(dbltap, '11) dbltap should be true');
+
+        // touchmove circle
+        stage._touchmove({
+            clientX: 290,
+            clientY: 100 + top,
+            preventDefault: function() {
+            }
+        });
+
+        assert(touchstart, '12) touchstart should be true');
+        assert(touchmove, '12) touchmove should be true');
+        assert(touchend, '12) touchend should be true');
+        assert(tap, '12) tap should be true');
+        assert(dbltap, '12) dbltap should be true');
+    });
+});

test/unit/shapes/Line-test.js

@@ -124,4 +124,40 @@ suite('Line', function() {
         assert.equal(line.getPoints().length, 4);
 
     });
+
+   // ======================================================
+    test('add line with shadow', function() {
+        var stage = addStage();
+        var layer = new Kinetic.Layer();
+
+        var points = [{
+            x: 73,
+            y: 160
+        }, {
+            x: 340,
+            y: 23
+        }];
+
+        var line = new Kinetic.Line({
+            points: points,
+            stroke: 'blue',
+            strokeWidth: 20,
+            lineCap: 'round',
+            lineJoin: 'round',
+            shadowColor: 'black',
+            shadowBlur: 20,
+            shadowOffset: 10,
+            shadowOpacity: 0.3
+        });
+
+        layer.add(line);
+        stage.add(layer);
+
+        
+
+        var trace = layer.getContext().getTrace();
+        //console.log(trace);
+        assert.equal(trace, 'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,0,0);beginPath();moveTo(73,160);lineTo(340,23);lineCap=round;save();globalAlpha=0.3;shadowColor=black;shadowBlur=20;shadowOffsetX=10;shadowOffsetY=10;lineWidth=20;strokeStyle=blue;stroke();restore();lineCap=round;lineWidth=20;strokeStyle=blue;stroke();restore();');
+
+    });
 });