diff --git a/test-old/js/functionalTests.js b/test-old/js/functionalTests.js index eb2fa0de..6d1f8981 100644 --- a/test-old/js/functionalTests.js +++ b/test-old/js/functionalTests.js @@ -203,8 +203,8 @@ Test.Modules.DD = { }); - test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false'); - test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false'); + test(!Kinetic.isDragging(), ' isDragging() should be false'); + test(!Kinetic.isDragReady(), ' isDragReady()) should be false'); /* * simulate drag and drop @@ -219,16 +219,16 @@ Test.Modules.DD = { //test(!dragMove, 'dragmove event should not have been triggered'); test(!dragEnd, 'dragend event should not have been triggered'); - test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false'); - test(Kinetic.Global.isDragReady(), 'Global isDragReady()) should be true'); + test(!Kinetic.isDragging(), ' isDragging() should be false'); + test(Kinetic.isDragReady(), ' isDragReady()) should be true'); stage._mousemove({ clientX: 100, clientY: 98 + top }); - test(Kinetic.Global.isDragging(), 'Global isDragging() should be true'); - test(Kinetic.Global.isDragReady(), 'Global isDragReady()) should be true'); + test(Kinetic.isDragging(), ' isDragging() should be true'); + test(Kinetic.isDragReady(), ' isDragReady()) should be true'); test(dragStart, 'dragstart event was not triggered'); //test(dragMove, 'dragmove event was not triggered'); @@ -248,8 +248,8 @@ Test.Modules.DD = { test(events.toString() === 'mouseup,dragend', 'mouseup should occur before dragend'); - test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false'); - test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false'); + test(!Kinetic.isDragging(), ' isDragging() should be false'); + test(!Kinetic.isDragReady(), ' isDragReady()) should be false'); //console.log(greenCircle.getPosition()); //console.log(circle.getPosition()); @@ -318,8 +318,8 @@ Test.Modules.DD = { events.push('mouseup'); }); - test(!Kinetic.Global.isDragging(), 'Global isDragging() should be false'); - test(!Kinetic.Global.isDragReady(), 'Global isDragReady()) should be false'); + test(!Kinetic.isDragging(), ' isDragging() should be false'); + test(!Kinetic.isDragReady(), ' isDragReady()) should be false'); stage._mousedown({ @@ -799,7 +799,6 @@ Test.Modules.EVENT = { container: containerId, width: 578, height: 200, - throttle: 999 }); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -1004,7 +1003,7 @@ Test.Modules.EVENT = { * mobile tests */ // reset inDoubleClickWindow - Kinetic.Global.inDblClickWindow = false; + Kinetic.inDblClickWindow = false; // touchstart circle stage._touchstart({ diff --git a/test/functional/DragAndDrop-Events-test.js b/test/functional/DragAndDrop-Events-test.js new file mode 100644 index 00000000..999f5013 --- /dev/null +++ b/test/functional/DragAndDrop-Events-test.js @@ -0,0 +1,420 @@ +suite('DragAndDrop Events', function() { + // ====================================================== + test('test dragstart, dragmove, dragend': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + 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.equal(!Kinetic.isDragging(), ' isDragging() should be false'); + assert.equal(!Kinetic.isDragReady(), ' isDragReady()) should be false'); + + /* + * simulate drag and drop + */ + //console.log(1) + stage._mousedown({ + clientX: 380, + clientY: 98 + top + }); + //console.log(2) + assert.equal(!dragStart, 'dragstart event should not have been triggered'); + //assert.equal(!dragMove, 'dragmove event should not have been triggered'); + assert.equal(!dragEnd, 'dragend event should not have been triggered'); + + assert.equal(!Kinetic.isDragging(), ' isDragging() should be false'); + assert.equal(Kinetic.isDragReady(), ' isDragReady()) should be true'); + + stage._mousemove({ + clientX: 100, + clientY: 98 + top + }); + + assert.equal(Kinetic.isDragging(), ' isDragging() should be true'); + assert.equal(Kinetic.isDragReady(), ' isDragReady()) should be true'); + + assert.equal(dragStart, 'dragstart event was not triggered'); + //assert.equal(dragMove, 'dragmove event was not triggered'); + assert.equal(!dragEnd, 'dragend event should not have been triggered'); + + Kinetic.DD._endDragBefore(); + stage._mouseup({ + clientX: 100, + clientY: 98 + top + }); + Kinetic.DD._endDragAfter({dragEndNode:circle}); + + assert.equal(dragStart, 'dragstart event was not triggered'); + assert.equal(dragMove, 'dragmove event was not triggered'); + assert.equal(dragEnd, 'dragend event was not triggered'); + + assert.equal(events.toString() === 'mouseup,dragend', 'mouseup should occur before dragend'); + + + assert.equal(!Kinetic.isDragging(), ' isDragging() should be false'); + assert.equal(!Kinetic.isDragReady(), ' isDragReady()) should be false'); + + //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(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + 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.equal(!Kinetic.isDragging(), ' isDragging() should be false'); + assert.equal(!Kinetic.isDragReady(), ' isDragReady()) should be false'); + + + stage._mousedown({ + clientX: 380, + clientY: 98 + top + }); + + assert.equal(!circle.isDragging(), 'circle should not be dragging'); + + stage._mousemove({ + clientX: 100, + clientY: 98 + top + }); + + + assert.equal(circle.isDragging(), 'circle should be dragging'); + assert.equal(!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.equal(!circle.isDragging(), 'destroying circle should stop drag and drop'); + assert.equal(dragEnd, 'dragEnd should have fired'); + + + + }); + + // ====================================================== + test('click should not occur after drag and drop': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200 + }); + 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.equal(!clicked, 'click event should not have been fired'); + + }); + + // ====================================================== + test('cancel drag and drop by setting draggable to false': function(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200, + throttle: 999 + }); + 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(containerId) { + var stage = new Kinetic.Stage({ + container: containerId, + width: 578, + height: 200, + throttle: 999 + }); + 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'); + + }); +}); \ No newline at end of file diff --git a/test/functional/Events-test.js b/test/functional/Events-test.js index fed7b2ae..70b12286 100644 --- a/test/functional/Events-test.js +++ b/test/functional/Events-test.js @@ -1,5 +1,7 @@ suite('Events', function() { - test('stage content mouse events', function() { + + // ====================================================== + test('stage content mouse events', function() { var stage = addStage(); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -131,7 +133,8 @@ suite('Events', function() { assert.equal(stageContentMouseover, 1); }); - test('stage content touch events', function() { + // ====================================================== + test('stage content touch events', function() { var stage = addStage(); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ @@ -228,4 +231,1096 @@ suite('Events', function() { assert.equal(stageContentTouchstart, 3, 8); assert.equal(stageContentTouchend, 3, 9); }); + + // ====================================================== + test('stage mouse handlers', 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); + + /* + 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('-------'); + }); + */ + + + stage.on('mouseover', function(evt) { + //console.log('mouseover'); + //console.log(evt.targetNode); + //console.log('-------'); + }); + + stage.on('mouseout', function(evt) { + //console.log('mouseout'); + //console.log(evt.targetNode); + //console.log('-------'); + }); + + + + }); + + // ====================================================== + 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('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('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; + + // reset inDoubleClickWindow + Kinetic.inDblClickWindow = 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('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('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'); + + }); }); \ No newline at end of file