lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-18 09:50:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

added mouseenter and mouseleave events. mouseover and mouseout were actually functioning like mouseenter and mouseleave. mouseover and mouseout now work similar to traditional DOM mouseover and mouseout. This change enables event delegation to work correctly

Browse Source
This commit is contained in:
ericdrowell
2012-10-03 10:53:09 -07:00
parent c6237b59e6
commit b6eb2cdf82
6 changed files with 68 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
dist/kinetic-core.js vendored
View File

@@ -37,7 +37,7 @@ var Kinetic = {};
Kinetic.Filters = {};
Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
stages: [],
@@ -2161,10 +2161,10 @@ Kinetic.Node.prototype = {
var el = this.eventListeners;
var okayToRun = true;
if(eventType === 'mouseover' && compareShape && this._id === compareShape._id) {
if(eventType === 'mouseenter' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}
else if(eventType === 'mouseout' && compareShape && this._id === compareShape._id) {
else if(eventType === 'mouseleave' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}
@@ -3086,6 +3086,7 @@ Kinetic.Stage.prototype = {
var targetShape = this.targetShape;
if(targetShape && !go.drag.moving) {
targetShape._handleEvent('mouseout', evt);
argetShape._handleEvent('mouseleave', evt);
this.targetShape = null;
}
this.mousePos = undefined;
@@ -3104,8 +3105,10 @@ Kinetic.Stage.prototype = {
if(!go.drag.moving && 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);
}
shape._handleEvent('mouseover', evt, this.targetShape);
shape._handleEvent('mouseenter', evt, this.targetShape);
this.targetShape = shape;
}
else {
@@ -3119,6 +3122,7 @@ Kinetic.Stage.prototype = {
*/
else if(this.targetShape && !go.drag.moving) {
this.targetShape._handleEvent('mouseout', evt);
this.targetShape._handleEvent('mouseleave', evt);
this.targetShape = null;
}

6
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/Global.js
View File

@@ -9,7 +9,7 @@ var Kinetic = {};
Kinetic.Filters = {};
Kinetic.Plugins = {};
Kinetic.Global = {
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUBBLE_WHITELIST: ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'click', 'dblclick', 'touchstart', 'touchmove', 'touchend', 'tap', 'dbltap', 'dragstart', 'dragmove', 'dragend'],
BUFFER_WHITELIST: ['fill', 'stroke', 'textFill', 'textStroke'],
BUFFER_BLACKLIST: ['shadow'],
stages: [],

4
src/Node.js
View File

@@ -938,10 +938,10 @@ Kinetic.Node.prototype = {
var el = this.eventListeners;
var okayToRun = true;
if(eventType === 'mouseover' && compareShape && this._id === compareShape._id) {
if(eventType === 'mouseenter' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}
else if(eventType === 'mouseout' && compareShape && this._id === compareShape._id) {
else if(eventType === 'mouseleave' && compareShape && this._id === compareShape._id) {
okayToRun = false;
}

4
src/Stage.js
View File

@@ -460,6 +460,7 @@ Kinetic.Stage.prototype = {
var targetShape = this.targetShape;
if(targetShape && !go.drag.moving) {
targetShape._handleEvent('mouseout', evt);
argetShape._handleEvent('mouseleave', evt);
this.targetShape = null;
}
this.mousePos = undefined;
@@ -478,8 +479,10 @@ Kinetic.Stage.prototype = {
if(!go.drag.moving && 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);
}
shape._handleEvent('mouseover', evt, this.targetShape);
shape._handleEvent('mouseenter', evt, this.targetShape);
this.targetShape = shape;
}
else {
@@ -493,6 +496,7 @@ Kinetic.Stage.prototype = {
*/
else if(this.targetShape && !go.drag.moving) {
this.targetShape._handleEvent('mouseout', evt);
this.targetShape._handleEvent('mouseleave', evt);
this.targetShape = null;
}

100
tests/js/functionalTests.js
View File

@@ -616,7 +616,7 @@ Test.prototype.tests = {
test(groupMousedowns === 4, 'groupMousedowns should be 4');
test(greenCircleMousedowns === 2, 'greenCircleMousedowns should be 2');
},
'EVENTS - group mouseover events': function(containerId) {
'*EVENTS - group mouseenter events': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@@ -628,12 +628,12 @@ Test.prototype.tests = {
name: 'group'
});
var redMouseovers = 0;
var redMouseouts = 0;
var greenMouseovers = 0;
var greenMouseouts = 0;
var groupMouseovers = 0;
var groupMouseouts = 0;
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,
@@ -655,33 +655,33 @@ Test.prototype.tests = {
name: 'green'
});
group.on('mouseover', function() {
groupMouseovers++;
group.on('mouseenter', function() {
groupMouseenters++;
console.log('group over')
});
group.on('mouseout', function() {
groupMouseouts++;
group.on('mouseleave', function() {
groupMouseleaves++;
console.log('group out')
});
redCircle.on('mouseover', function() {
redMouseovers++;
redCircle.on('mouseenter', function() {
redMouseenters++;
console.log('red over')
});
redCircle.on('mouseout', function() {
redMouseouts++;
redCircle.on('mouseleave', function() {
redMouseleaves++;
console.log('red out')
});
greenCircle.on('mouseover', function() {
greenMouseovers++;
greenCircle.on('mouseenter', function() {
greenMouseenters++;
console.log('green over')
});
greenCircle.on('mouseout', function() {
greenMouseouts++;
greenCircle.on('mouseleave', function() {
greenMouseleaves++;
console.log('green out')
});
@@ -697,12 +697,12 @@ Test.prototype.tests = {
clientY: 146
});
test(redMouseovers === 0, 'redMouseovers should be 0');
test(redMouseouts === 0, 'redMouseouts should be 0');
test(greenMouseovers === 0, 'greenMouseovers should be 0');
test(greenMouseouts === 0, 'greenMouseouts should be 0');
test(groupMouseovers === 0, 'groupMouseovers should be 0');
test(groupMouseouts === 0, 'groupMouseouts should be 0');
test(redMouseenters === 0, 'redMouseenters should be 0');
test(redMouseleaves === 0, 'redMouseleaves should be 0');
test(greenMouseenters === 0, 'greenMouseenters should be 0');
test(greenMouseleaves === 0, 'greenMouseleaves should be 0');
test(groupMouseenters === 0, 'groupMouseenters should be 0');
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
// move mouse inside of red circle
stage._mousemove({
@@ -710,12 +710,14 @@ Test.prototype.tests = {
clientY: 145
});
test(redMouseovers === 1, 'redMouseovers should be 1');
test(redMouseouts === 0, 'redMouseouts should be 0');
test(greenMouseovers === 0, 'greenMouseovers should be 0');
test(greenMouseouts === 0, 'greenMouseouts should be 0');
test(groupMouseovers === 1, 'groupMouseovers should be 1');
test(groupMouseouts === 0, 'groupMouseouts should be 0');
console.log('groupMouseenters=' + groupMouseenters);
test(redMouseenters === 1, 'redMouseenters should be 1');
test(redMouseleaves === 0, 'redMouseleaves should be 0');
test(greenMouseenters === 0, 'greenMouseenters should be 0');
test(greenMouseleaves === 0, 'greenMouseleaves should be 0');
test(groupMouseenters === 1, 'groupMouseenters should be 1');
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
// move mouse inside of green circle
stage._mousemove({
@@ -723,12 +725,12 @@ Test.prototype.tests = {
clientY: 118
});
test(redMouseovers === 1, 'redMouseovers should be 1');
test(redMouseouts === 1, 'redMouseouts should be 1');
test(greenMouseovers === 1, 'greenMouseovers should be 1');
test(greenMouseouts === 0, 'greenMouseouts should be 0');
test(groupMouseovers === 1, 'groupMouseovers should be 1');
test(groupMouseouts === 0, 'groupMouseouts should be 0');
test(redMouseenters === 1, 'redMouseenters should be 1');
test(redMouseleaves === 1, 'redMouseleaves should be 1');
test(greenMouseenters === 1, 'greenMouseenters should be 1');
test(greenMouseleaves === 0, 'greenMouseleaves should be 0');
test(groupMouseenters === 1, 'groupMouseenters should be 1');
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
// move mouse back to red circle
@@ -741,12 +743,12 @@ Test.prototype.tests = {
clientY: 105
});
test(redMouseovers === 2, 'redMouseovers should be 2');
test(redMouseouts === 1, 'redMouseouts should be 1');
test(greenMouseovers === 1, 'greenMouseovers should be 1');
test(greenMouseouts === 1, 'greenMouseouts should be 1');
test(groupMouseovers === 1, 'groupMouseovers should be 1');
test(groupMouseouts === 0, 'groupMouseouts should be 0');
test(redMouseenters === 2, 'redMouseenters should be 2');
test(redMouseleaves === 1, 'redMouseleaves should be 1');
test(greenMouseenters === 1, 'greenMouseenters should be 1');
test(greenMouseleaves === 1, 'greenMouseleaves should be 1');
test(groupMouseenters === 1, 'groupMouseenters should be 1');
test(groupMouseleaves === 0, 'groupMouseleaves should be 0');
// move mouse outside of circles
stage._mousemove({
@@ -757,12 +759,12 @@ Test.prototype.tests = {
clientX: 177,
clientY: 146
});
test(redMouseovers === 2, 'redMouseovers should be 2');
test(redMouseouts === 2, 'redMouseouts should be 2');
test(greenMouseovers === 1, 'greenMouseovers should be 1');
test(greenMouseouts === 1, 'greenMouseouts should be 1');
test(groupMouseovers === 1, 'groupMouseovers should be 1');
test(groupMouseouts === 1, 'groupMouseouts should be 1');
test(redMouseenters === 2, 'redMouseenters should be 2');
test(redMouseleaves === 2, 'redMouseleaves should be 2');
test(greenMouseenters === 1, 'greenMouseenters should be 1');
test(greenMouseleaves === 1, 'greenMouseleaves should be 1');
test(groupMouseenters === 1, 'groupMouseenters should be 1');
test(groupMouseleaves === 1, 'groupMouseleaves should be 1');
//document.body.appendChild(layer.bufferCanvas.element)