From 3a903d6c7c904d632e405385f628ce6e5fbccc38 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Sat, 23 Mar 2013 23:19:24 -0700 Subject: [PATCH] minor refactoring. fixed bug related to click mapping --- src/Global.js | 2 +- src/Node.js | 3 +- src/Stage.js | 23 ++++++++------ tests/js/functionalTests.js | 62 +++++++++++++++++++++++++++++++++++-- 4 files changed, 75 insertions(+), 15 deletions(-) diff --git a/src/Global.js b/src/Global.js index 3b6c9027..752f3bef 100644 --- a/src/Global.js +++ b/src/Global.js @@ -44,7 +44,7 @@ var Kinetic = {}; shapes: {}, isDragging: function() { var dd = Kinetic.DD; - return (dd && dd.isDragging); + return (!dd || dd.isDragging); }, warn: function(str) { /* diff --git a/src/Node.js b/src/Node.js index 444e3539..c3dd8007 100644 --- a/src/Node.js +++ b/src/Node.js @@ -993,8 +993,7 @@ this.drawHit(); }, shouldDrawHit: function() { - var dd = Kinetic.DD; - return this.isVisible() && this.isListening() && (!dd || !dd.isDragging); + return this.isVisible() && this.isListening() && !Kinetic.Global.isDragging(); } }; diff --git a/src/Stage.js b/src/Stage.js index e3c2684d..a5fcfbf8 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -334,10 +334,10 @@ }, _mouseout: function(evt) { this._setPointerPosition(evt); - var dd = Kinetic.DD; + var go = Kinetic.Global; // if there's a current target shape, run mouseout handlers var targetShape = this.targetShape; - if(targetShape && (!dd || !dd.isDragging)) { + if(targetShape && !go.isDragging()) { targetShape._handleEvent('mouseout', evt); targetShape._handleEvent('mouseleave', evt); this.targetShape = null; @@ -346,13 +346,14 @@ }, _mousemove: function(evt) { this._setPointerPosition(evt); - var dd = Kinetic.DD; - var obj = this.getIntersection(this.getPointerPosition()); + var go = Kinetic.Global, + dd = Kinetic.DD, + obj = this.getIntersection(this.getPointerPosition()); if(obj) { var shape = obj.shape; if(shape) { - if((!dd || !dd.isDragging) && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { + if(!go.isDragging() && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { if(this.targetShape) { this.targetShape._handleEvent('mouseout', evt, shape); this.targetShape._handleEvent('mouseleave', evt, shape); @@ -370,7 +371,7 @@ * if no shape was detected, clear target shape and try * to run mouseout from previous target shape */ - else if(this.targetShape && (!dd || !dd.isDragging)) { + else if(this.targetShape && !go.isDragging()) { this.targetShape._handleEvent('mouseout', evt); this.targetShape._handleEvent('mouseleave', evt); this.targetShape = null; @@ -400,7 +401,7 @@ _mouseup: function(evt) { this._setPointerPosition(evt); var that = this, - dd = Kinetic.DD, + go = Kinetic.Global, obj = this.getIntersection(this.getPointerPosition()); if(obj && obj.shape) { @@ -413,7 +414,7 @@ * if dragging and dropping, or if click doesn't map to * the correct shape, don't fire click or dbl click event */ - if(!dd || !dd.isDragging || !dd.node) { + if(!go.isDragging() && shape._id === this.clickStartShape._id) { shape._handleEvent('click', evt); if(this.inDoubleClickWindow) { @@ -429,7 +430,9 @@ this.clickStart = false; }, _touchstart: function(evt) { - var obj, dd = Kinetic.DD; + var dd = Kinetic.DD, + go = Kinetic.Global, + obj; this._setPointerPosition(evt); evt.preventDefault(); @@ -442,7 +445,7 @@ } // init stage drag and drop - if(dd && this.attrs.draggable && !dd.node) { + if(dd && !go.isDragging() && this.isDraggable()) { this._startDrag(evt); } }, diff --git a/tests/js/functionalTests.js b/tests/js/functionalTests.js index 0ffcab14..67f99e22 100644 --- a/tests/js/functionalTests.js +++ b/tests/js/functionalTests.js @@ -1,3 +1,8 @@ + +function trigger(event, x, y) { + +} + Test.Modules.DD = { 'remove shape with onclick': function(containerId) { var stage = new Kinetic.Stage({ @@ -328,16 +333,20 @@ Test.Modules.EVENT = { x: 400, y: stage.getHeight() / 2, radius: 70, - fill: 'green', - draggable: true + 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++; }); @@ -345,9 +354,58 @@ Test.Modules.EVENT = { 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}); + + test(redClicks === 1, 'red circle should have 1 click'); + test(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}); + + test(redClicks === 1, 'red circle should have 1 click'); + test(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}); + + test(redClicks === 1, 'red circle should still have 1 click'); + test(greenClicks === 1, 'green circle should still have 1 click'); + }, 'text events': function(containerId) { var stage = new Kinetic.Stage({