lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 15:23:44 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

implemented stage content mobile events and added functional tests

Browse Source
This commit is contained in:
ericdrowell 2013-09-20 16:45:59 -07:00
parent 068cb1efc8
commit a389fbc6f0
2 changed files with 131 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/Stage.js
View File

@ -405,9 +405,12 @@
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
this._fire(CONTENT_MOUSEMOVE, evt);
}
// content event
this._fire(CONTENT_MOUSEMOVE, evt);
if(dd) {
dd._drag(evt);
}
@ -430,6 +433,7 @@
shape._fireAndBubble(MOUSEDOWN, evt);
}
// content event
this._fire(CONTENT_MOUSEDOWN);
// always call preventDefault for desktop events because some browsers
@ -469,6 +473,7 @@
}
}
}
// content events
this._fire(CONTENT_MOUSEUP);
if (Kinetic.listenClickTap) {
this._fire(CONTENT_CLICK, evt);
@ -495,12 +500,14 @@
if (shape) {
this.tapStartShape = shape;
shape._fireAndBubble(TOUCHSTART, evt);
}
// only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) {
evt.preventDefault();
// only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) {
evt.preventDefault();
}
}
// content event
this._fire(CONTENT_TOUCHSTART, evt);
},
_touchend: function(evt) {
this._setPointerPosition(evt);
@ -532,32 +539,41 @@
shape._fireAndBubble(DBL_TAP, evt);
}
}
// only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) {
evt.preventDefault();
}
}
// content events
if (Kinetic.listenClickTap) {
this._fire(CONTENT_TOUCHEND, evt);
if(fireDblClick) {
this._fire(CONTENT_DBL_TAP, evt);
}
}
Kinetic.listenClickTap = false;
// only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) {
evt.preventDefault();
}
},
_touchmove: function(evt) {
this._setPointerPosition(evt);
var dd = Kinetic.DD,
obj = this.getIntersection(this.getPointerPosition()),
shape = obj && obj.shape ? obj.shape : this;
shape = obj && obj.shape ? obj.shape : undefined;
shape._fireAndBubble(TOUCHMOVE, evt);
if (shape) {
shape._fireAndBubble(TOUCHMOVE, evt);
// only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) {
evt.preventDefault();
}
}
this._fire(CONTENT_TOUCHMOVE, evt);
// start drag and drop
if(dd) {
dd._drag(evt);
}
// only call preventDefault if the shape is listening for events
if (shape.isListening() && evt.preventDefault) {
evt.preventDefault();
}
},
_setMousePosition: function(evt) {

98
test/functional/Events-test.js
View File

@ -130,4 +130,102 @@ suite('Events', function() {
assert.equal(stageContentMouseover, 1);
});
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, 1, 5);
stage._touchstart({
clientX: 1,
clientY: 1 + top
});
stage._touchend({
clientX: 1,
clientY: 1 + top
});
assert.equal(stageContentTouchstart, 2, 6);
assert.equal(stageContentTouchend, 2, 6);
// trigger double tap
stage._touchstart({
clientX: 1,
clientY: 1 + top
});
stage._touchend({
clientX: 1,
clientY: 1 + top
});
assert.equal(stageContentTouchstart, 3, 8);
assert.equal(stageContentTouchend, 3, 9);
});
});