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

fixed mousemove bug for overlapped shapes in different groups

Browse Source
This commit is contained in:
Eric Rowell 2012-03-17 19:48:54 -07:00
parent 9e28a9010a
commit 9a61e149df
5 changed files with 155 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
dist/kinetic-core.js vendored
View File

@ -1198,36 +1198,20 @@ Kinetic.Stage.prototype = {
return true;
}
// handle touchmove
else if(!isDragging && el.touchmove) {
shape._handleEvents('touchmove', evt);
return true;
}
//this condition is used to identify a new target shape.
else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
/*
* check if old target has an onmouseout event listener
*/
if(this.targetShape) {
var oldEl = this.targetShape.eventListeners;
if(oldEl) {
this.targetShape._handleEvents('onmouseout', evt);
}
}
// set new target shape
this.targetShape = shape;
this.targetFound = true;
/*
* NOTE: these event handlers require target shape
* handling
*/
else if(!isDragging && this._isNewTarget(shape, evt)) {
// handle onmouseover
shape._handleEvents('onmouseover', evt);
return true;
}
// handle onmousemove
// handle mousemove and touchmove
else if(!isDragging) {
shape._handleEvents('onmousemove', evt);
shape._handleEvents('touchmove', evt);
return true;
}
}
@ -1240,6 +1224,28 @@ Kinetic.Stage.prototype = {
return false;
},
_isNewTarget: function(shape, evt) {
if(!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id)) {
/*
* check if old target has an onmouseout event listener
*/
if(this.targetShape) {
var oldEl = this.targetShape.eventListeners;
if(oldEl) {
this.targetShape._handleEvents('onmouseout', evt);
}
}
// set new target shape
this.targetShape = shape;
this.targetFound = true;
return true;
}
else {
return false;
}
},
/**
* traverse container children
* @param {Container} obj
@ -1256,7 +1262,10 @@ Kinetic.Stage.prototype = {
}
}
else {
this._traverseChildren(child, evt);
var exit = this._traverseChildren(child, evt);
if(exit) {
return true;
}
}
}
@ -2232,7 +2241,7 @@ Kinetic.Text = function(config) {
context.font = this.fontSize + 'pt ' + this.fontFamily;
context.textBaseline = 'middle';
var metrics = context.measureText(this.text);
var textHeight = this.fontSize;
var textHeight = textHeight = parseInt(this.fontSize, 10);
var textWidth = metrics.width;
var p = this.padding;
var x = 0;

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

File diff suppressed because one or more lines are too long

57
src/Stage.js
View File

@ -337,36 +337,20 @@ Kinetic.Stage.prototype = {
return true;
}
// handle touchmove
else if(!isDragging && el.touchmove) {
shape._handleEvents('touchmove', evt);
return true;
}
//this condition is used to identify a new target shape.
else if(!isDragging && (!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id))) {
/*
* check if old target has an onmouseout event listener
*/
if(this.targetShape) {
var oldEl = this.targetShape.eventListeners;
if(oldEl) {
this.targetShape._handleEvents('onmouseout', evt);
}
}
// set new target shape
this.targetShape = shape;
this.targetFound = true;
/*
* NOTE: these event handlers require target shape
* handling
*/
else if(!isDragging && this._isNewTarget(shape, evt)) {
// handle onmouseover
shape._handleEvents('onmouseover', evt);
return true;
}
// handle onmousemove
// handle mousemove and touchmove
else if(!isDragging) {
shape._handleEvents('onmousemove', evt);
shape._handleEvents('touchmove', evt);
return true;
}
}
@ -379,6 +363,28 @@ Kinetic.Stage.prototype = {
return false;
},
_isNewTarget: function(shape, evt) {
if(!this.targetShape || (!this.targetFound && shape.id !== this.targetShape.id)) {
/*
* check if old target has an onmouseout event listener
*/
if(this.targetShape) {
var oldEl = this.targetShape.eventListeners;
if(oldEl) {
this.targetShape._handleEvents('onmouseout', evt);
}
}
// set new target shape
this.targetShape = shape;
this.targetFound = true;
return true;
}
else {
return false;
}
},
/**
* traverse container children
* @param {Container} obj
@ -395,7 +401,10 @@ Kinetic.Stage.prototype = {
}
}
else {
this._traverseChildren(child, evt);
var exit = this._traverseChildren(child, evt);
if(exit) {
return true;
}
}
}

2
src/shapes/Text.js
View File

@ -34,7 +34,7 @@ Kinetic.Text = function(config) {
context.font = this.fontSize + 'pt ' + this.fontFamily;
context.textBaseline = 'middle';
var metrics = context.measureText(this.text);
var textHeight = this.fontSize;
var textHeight = textHeight = parseInt(this.fontSize, 10);
var textWidth = metrics.width;
var p = this.padding;
var x = 0;

89
tests/js/functionalTests.js
View File

@ -292,7 +292,7 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
'EVENTS - mousemove from shape to another shape in same layer': function(containerId) {
'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
@ -332,7 +332,52 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - mousemove from shape in one layer to shape in another layer': function(containerId) {
'EVENTS - move mouse from shape in one group to shape in another group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black'
});
redCircle.on('mouseover', function() {
log('mouseover red circle');
});
redCircle.on('mouseout', function() {
log('mouseout red circle');
});
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: 'green',
stroke: 'black'
});
greenCircle.on('mouseover', function() {
log('mouseover green circle');
});
greenCircle.on('mouseout', function() {
log('mouseout green circle');
});
redGroup.add(redCircle);
greenGroup.add(greenCircle);
layer.add(redGroup);
layer.add(greenGroup);
stage.add(layer);
},
'EVENTS - move mouse from shape in one layer to shape in another layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@ -374,6 +419,45 @@ Test.prototype.tests = {
stage.add(redLayer);
stage.add(greenLayer);
},
'EVENTS - mousemove from shape in one group to shape in another group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: 'red',
stroke: 'black'
});
redCircle.on('mousemove', function() {
log('mousemove red circle');
});
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
radius: 70,
strokeWidth: 4,
fill: 'green',
stroke: 'black'
});
greenCircle.on('mousemove', function() {
log('mousemove green circle');
});
redGroup.add(redCircle);
greenGroup.add(greenCircle);
layer.add(redGroup);
layer.add(greenGroup);
stage.add(layer);
},
'EVENTS - event bubbling': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
@ -450,7 +534,6 @@ Test.prototype.tests = {
log('click group');
//console.log(this);
});
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,