lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 12:34:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

stage events can now be added without having a target node. i.e. you can bind mousedown, mouseup, click, dblclick, etc. to the stage directly

Browse Source
This commit is contained in:
Eric Rowell
2013-07-04 00:20:28 -07:00
parent f85c6b1392
commit 7c40333fc8
3 changed files with 123 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/Stage.js
View File

@@ -393,11 +393,14 @@
* if no shape was detected, clear target shape and try
* to run mouseout from previous target shape
*/
else if(this.targetShape && !go.isDragging()) {
else {
if(this.targetShape && !go.isDragging()) {
this.targetShape._fireAndBubble(MOUSEOUT, evt);
this.targetShape._fireAndBubble(MOUSELEAVE, evt);
this.targetShape = null;
}
this._fire(MOUSEMOVE, evt);
}
if(dd) {
dd._drag(evt);
@@ -407,29 +410,20 @@
this._setPointerPosition(evt);
var go = Kinetic.Global,
obj = this.getIntersection(this.getPointerPosition()),
shape;
shape = obj && obj.shape ? obj.shape : this;
if(obj && obj.shape) {
shape = obj.shape;
this.clickStart = true;
this.clickStartShape = shape;
shape._fireAndBubble(MOUSEDOWN, evt);
}
//init stage drag and drop
if(this.isDraggable() && !go.isDragReady()) {
this.startDrag(evt);
}
},
_mouseup: function(evt) {
this._setPointerPosition(evt);
var that = this,
go = Kinetic.Global,
obj = this.getIntersection(this.getPointerPosition()),
shape;
shape = obj && obj.shape ? obj.shape : this;
if(obj && obj.shape) {
shape = obj.shape;
shape._fireAndBubble(MOUSEUP, evt);
// detect if click or double click occurred
@@ -450,35 +444,27 @@
}, this.dblClickWindow);
}
}
}
this.clickStart = false;
},
_touchstart: function(evt) {
this._setPointerPosition(evt);
var go = Kinetic.Global,
obj = this.getIntersection(this.getPointerPosition()),
shape;
shape = obj && obj.shape ? obj.shape : this;
if(obj && obj.shape) {
shape = obj.shape;
this.tapStart = true;
this.tapStartShape = shape;
shape._fireAndBubble(TOUCHSTART, evt);
}
//init stage drag and drop
if(this.isDraggable() && !go.isDragReady()) {
this.startDrag(evt);
}
},
_touchend: function(evt) {
this._setPointerPosition(evt);
var that = this,
go = Kinetic.Global,
obj = this.getIntersection(this.getPointerPosition()),
shape;
shape = obj && obj.shape ? obj.shape : this;
if(obj && obj.shape) {
shape = obj.shape;
shape._fireAndBubble(TOUCHEND, evt);
@@ -500,7 +486,6 @@
}, this.dblClickWindow);
}
}
}
this.tapStart = false;
},
@@ -508,12 +493,10 @@
this._setPointerPosition(evt);
var dd = Kinetic.DD,
obj = this.getIntersection(this.getPointerPosition()),
shape;
shape = obj && obj.shape ? obj.shape : this;
if(obj && obj.shape) {
shape = obj.shape;
shape._fireAndBubble(TOUCHMOVE, evt);
}
// start drag and drop
if(dd) {

1
tests/html/functionalTests.html
View File

@@ -7,7 +7,6 @@
</style>
<link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-v0.0.0.js"></script>
<script src="../assets/functionalDataUrls.js"></script>
<script src="../js/Test.js"></script>
<script src="../js/functionalTests.js"></script>
<script>

70
tests/js/functionalTests.js
View File

@@ -1,5 +1,75 @@
Test.Modules.DD = {
'stage mouse handlers': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200,
draggable: true
});
var top = stage.content.getBoundingClientRect().top;
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
layer.add(circle);
stage.add(layer);
/*
stage.on('mousedown', function(evt) {
console.log('mousedown');
console.log(evt.targetNode);
console.log('-------');
});
stage.on('mouseup', function(evt) {
console.log('mouseup');
console.log(evt.targetNode);
console.log('-------');
});
stage.on('mousemove', function(evt) {
console.log('mousemove');
console.log(evt.targetNode);
console.log('-------');
});
stage.on('click', function(evt) {
console.log('click');
console.log(evt.targetNode);
console.log('-------');
});
stage.on('dblclick', function(evt) {
console.log('dblclick');
console.log(evt.targetNode);
console.log('-------');
});
*/
stage.on('dragstart', function(evt) {
console.log('dragstart');
console.log(evt.targetNode);
console.log('-------');
});
},
'remove shape with onclick': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,