fixed #357 and did a lot of event refactoring

This commit is contained in:
Eric Rowell
2013-07-23 11:39:44 -07:00
parent 06a8e42bee
commit 4f8bd0bd3f
5 changed files with 37 additions and 21 deletions

View File

@@ -40,6 +40,7 @@
}, },
_endDragBefore: function(evt) { _endDragBefore: function(evt) {
var dd = Kinetic.DD, var dd = Kinetic.DD,
go = Kinetic.Global,
node = dd.node, node = dd.node,
nodeType, layer; nodeType, layer;
@@ -52,6 +53,7 @@
// operation actually started. // operation actually started.
if(dd.isDragging) { if(dd.isDragging) {
dd.isDragging = false; dd.isDragging = false;
go.listenClickTap = false;
if (evt) { if (evt) {
evt.dragEndNode = node; evt.dragEndNode = node;

View File

@@ -160,6 +160,12 @@ var Kinetic = {};
//shapes hash. rgb keys and shape values //shapes hash. rgb keys and shape values
shapes: {}, shapes: {},
// event flags
listenClickTap: false,
inDblClickWindow: false,
dblClickWindow: 400,
/** /**
* returns whether or not drag and drop is currently active * returns whether or not drag and drop is currently active
* @method * @method

View File

@@ -41,7 +41,6 @@
// call super constructor // call super constructor
Kinetic.Container.call(this, config); Kinetic.Container.call(this, config);
this.nodeType = STAGE; this.nodeType = STAGE;
this.dblClickWindow = 400;
this._id = Kinetic.Global.idCounter++; this._id = Kinetic.Global.idCounter++;
this._buildDOM(); this._buildDOM();
this._bindContentEvents(); this._bindContentEvents();
@@ -426,7 +425,7 @@
obj = this.getIntersection(this.getPointerPosition()), obj = this.getIntersection(this.getPointerPosition()),
shape = obj && obj.shape ? obj.shape : this; shape = obj && obj.shape ? obj.shape : this;
this.clickStart = true; go.listenClickTap = true;
this.clickStartShape = shape; this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, evt); shape._fireAndBubble(MOUSEDOWN, evt);
@@ -446,26 +445,28 @@
shape._fireAndBubble(MOUSEUP, evt); shape._fireAndBubble(MOUSEUP, evt);
// detect if click or double click occurred // detect if click or double click occurred
if(this.clickStart) { if(go.listenClickTap) {
/* /*
* if dragging and dropping, or if click doesn't map to * if dragging and dropping, or if click doesn't map to
* the correct shape, don't fire click or dbl click event * the correct shape, don't fire click or dbl click event
*/ */
console.log(go.isDragging());
if(!go.isDragging() && shape._id === this.clickStartShape._id) { if(!go.isDragging() && shape._id === this.clickStartShape._id) {
shape._fireAndBubble(CLICK, evt); shape._fireAndBubble(CLICK, evt);
if(this.inDoubleClickWindow) { if(go.inDblClickWindow) {
shape._fireAndBubble(DBL_CLICK, evt); shape._fireAndBubble(DBL_CLICK, evt);
go.inDblClickWindow = false;
}
else {
go.inDblClickWindow = true;
} }
this.inDoubleClickWindow = true;
setTimeout(function() { setTimeout(function() {
that.inDoubleClickWindow = false; go.inDblClickWindow = false;
}, this.dblClickWindow); }, go.dblClickWindow);
} }
} }
this.clickStart = false; go.listenClickTap = false;
// always call preventDefault for desktop events because some browsers // always call preventDefault for desktop events because some browsers
// try to drag and drop the canvas element // try to drag and drop the canvas element
@@ -479,7 +480,7 @@
obj = this.getIntersection(this.getPointerPosition()), obj = this.getIntersection(this.getPointerPosition()),
shape = obj && obj.shape ? obj.shape : this; shape = obj && obj.shape ? obj.shape : this;
this.tapStart = true; go.listenClickTap = true;
this.tapStartShape = shape; this.tapStartShape = shape;
shape._fireAndBubble(TOUCHSTART, evt); shape._fireAndBubble(TOUCHSTART, evt);
@@ -498,7 +499,7 @@
shape._fireAndBubble(TOUCHEND, evt); shape._fireAndBubble(TOUCHEND, evt);
// detect if tap or double tap occurred // detect if tap or double tap occurred
if(this.tapStart) { if(go.listenClickTap) {
/* /*
* if dragging and dropping, don't fire tap or dbltap * if dragging and dropping, don't fire tap or dbltap
* event * event
@@ -506,17 +507,20 @@
if(!go.isDragging() && shape._id === this.tapStartShape._id) { if(!go.isDragging() && shape._id === this.tapStartShape._id) {
shape._fireAndBubble(TAP, evt); shape._fireAndBubble(TAP, evt);
if(this.inDoubleClickWindow) { if(go.inDblClickWindow) {
shape._fireAndBubble(DBL_TAP, evt); shape._fireAndBubble(DBL_TAP, evt);
go.inDblClickWindow = false;
}
else {
go.inDblClickWindow = true;
} }
this.inDoubleClickWindow = true;
setTimeout(function() { setTimeout(function() {
that.inDoubleClickWindow = false; go.inDblClickWindow = false;
}, this.dblClickWindow); }, go.dblClickWindow);
} }
} }
this.tapStart = false; go.listenClickTap = false;
// only call preventDefault if the shape is listening for events // only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) { if (shape.isListening() && evt.preventDefault) {

View File

@@ -351,7 +351,7 @@ Test.Modules.DD = {
}, },
'*click should not occur after drag and drop': function(containerId) { 'click should not occur after drag and drop': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -380,7 +380,11 @@ Test.Modules.DD = {
console.log('click'); console.log('click');
clicked = true; clicked = true;
}); });
/*
circle.on('dblclick', function() {
console.log('dblclick');
});
stage._mousedown({ stage._mousedown({
clientX: 40, clientX: 40,
clientY: 40 + top clientY: 40 + top
@@ -398,7 +402,7 @@ Test.Modules.DD = {
}); });
Kinetic.DD._endDragAfter({dragEndNode:circle}); Kinetic.DD._endDragAfter({dragEndNode:circle});
test(!clicked, 'click event should not have been fired');*/ test(!clicked, 'click event should not have been fired');
}, },
'cancel drag and drop by setting draggable to false': function(containerId) { 'cancel drag and drop by setting draggable to false': function(containerId) {
@@ -1009,7 +1013,7 @@ Test.Modules.EVENT = {
* mobile tests * mobile tests
*/ */
// reset inDoubleClickWindow // reset inDoubleClickWindow
stage.inDoubleClickWindow = false; Kinetic.Global.inDblClickWindow = false;
// touchstart circle // touchstart circle
stage._touchstart({ stage._touchstart({

View File

@@ -904,7 +904,7 @@ Test.Modules.EVENTS = {
}; };
Test.Modules.DRAG_AND_DROP = { Test.Modules.DRAG_AND_DROP = {
'*drag and drop layer with offset': function(containerId) { 'drag and drop layer with offset': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,