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

refactored event bindings to expose content node events and enable true functional tests without a test framework like Selenium. Added new manualTests.html page for manual tests. One of the manual tests has already been converted to a functional test. Will add in image data url hashmaps soon so that I can compare screenshots before and after a series of actions in the functional tests

Browse Source
This commit is contained in:
Eric Rowell
2012-06-15 11:47:55 -07:00
parent 9b76f650f7
commit 9ec8c94701
7 changed files with 2300 additions and 2241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -6,7 +6,7 @@ To build a development version of the library, run `thor build:dev VERSION`, whe
If you add a file in the src directory, be sure to add the filename to the filename array in the Thorfile.
#Tests
To run unit tests, open the `unitTests.html` file in the `tests/html` directory. To run functional tests, open the `functionalTests.html` file. The tests output the results to the console via `console.log()` so be sure to have it open.
To run tests, open `unitTests.html`, `functionalTests.html`, or `manualTests.html` in the `tests/html` directory. Unit tests and functional tests output the results to the console via `console.log()` so be sure to have it open.
#Pull Requests
I'd be happy to review any pull requests that may better the KineticJS project, in particular if you have a bug fix or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the unit tests and functional tests pass.
I'd be happy to review any pull requests that may better the KineticJS project, in particular if you have a bug fix, enhancement, or a new shape (see `src/shapes` for examples). Before doing so, please first make sure that all of the unit tests and functional tests pass.

170
dist/kinetic-core.js vendored
View File

@@ -3,7 +3,7 @@
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 14 2012
* Date: Jun 15 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -1583,7 +1583,6 @@ Kinetic.Stage = function(config) {
this._id = Kinetic.GlobalObject.idCounter++;
this._buildDOM();
this._bindContentEvents();
this._prepareDrag();
//change events
this.on('widthChange.kinetic_reserved', function() {
@@ -1971,7 +1970,7 @@ Kinetic.Stage.prototype = {
}
// handle touchstart
if(!isDragging && this.touchStart && !this.touchMove) {
else if(!isDragging && this.touchStart && !this.touchMove) {
this.touchStart = false;
this.tapStart = true;
shape._handleEvent('touchstart', evt);
@@ -2027,7 +2026,8 @@ Kinetic.Stage.prototype = {
}
// handle mousemove and touchmove
else if(!isDragging && this.mouseMove) {
else if(!isDragging && this.mouseMove) {
shape._handleEvent('mousemove', evt);
return true;
}
@@ -2158,17 +2158,17 @@ else if(!isDragging && this.touchMove) {
var pubEvent = events[n];
// induce scope
( function() {
var event = pubEvent;
var event = pubEvent;
that.content.addEventListener(event, function(evt) {
that['_on' + event](evt);
that['_' + event](evt);
}, false);
}());
}
},
_onmouseover: function(evt) {
_mouseover: function(evt) {
this._handleStageEvent(evt);
},
_onmouseout: function(evt) {
_mouseout: function(evt) {
// if there's a current target shape, run mouseout handlers
var targetShape = this.targetShape;
if(targetShape) {
@@ -2176,8 +2176,11 @@ else if(!isDragging && this.touchMove) {
this.targetShape = undefined;
}
this.mousePos = undefined;
// end drag and drop
this._endDrag(evt);
},
_onmousemove: function(evt) {
_mousemove: function(evt) {
//throttle mousemove
var throttle = this.attrs.throttle;
var date = new Date();
@@ -2190,8 +2193,11 @@ else if(!isDragging && this.touchMove) {
this.mouseUp = false;
this._handleStageEvent(evt);
}
// start drag and drop
this._startDrag(evt);
},
_onmousedown: function(evt) {
_mousedown: function(evt) {
this.mouseDown = true;
this.mouseUp = false;
this.mouseMove = false;
@@ -2202,14 +2208,17 @@ else if(!isDragging && this.touchMove) {
this._initDrag();
}
},
_onmouseup: function(evt) {
_mouseup: function(evt) {
this.mouseDown = false;
this.mouseUp = true;
this.mouseMove = false;
this._handleStageEvent(evt);
this.clickStart = false;
// end drag and drop
this._endDrag(evt);
},
_ontouchstart: function(evt) {
_touchstart: function(evt) {
evt.preventDefault();
this.touchStart = true;
this.touchEnd = false;
@@ -2222,14 +2231,17 @@ else if(!isDragging && this.touchMove) {
this._initDrag();
}
},
_ontouchend: function(evt) {
_touchend: function(evt) {
this.touchStart = false;
this.touchEnd = true;
this.touchMove = false;
this._handleStageEvent(evt);
this.tapStart = false;
// end drag and drop
this._endDrag(evt);
},
_ontouchmove: function(evt) {
_touchmove: function(evt) {
//throttle touchmove
var that = this;
var throttle = this.attrs.throttle;
@@ -2253,6 +2265,9 @@ else if(!isDragging && this.touchMove) {
that._handleStageEvent(evt);
}, 5);
}
// start drag and drop
this._startDrag(evt);
},
/**
* set mouse positon for desktop apps
@@ -2337,80 +2352,73 @@ else if(!isDragging && this.touchMove) {
go.drag.node = undefined;
},
/**
* prepare drag and drop
* start drag and drop
*/
_prepareDrag: function() {
_startDrag: function(evt) {
var that = this;
var go = Kinetic.GlobalObject;
var node = go.drag.node;
this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
var lastNodePos = {
x: node.attrs.x,
y: node.attrs.y
};
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
var lastNodePos = {
x: node.attrs.x,
y: node.attrs.y
};
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y
};
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y
};
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
}
if(db.right !== undefined && newNodePos.x > db.right) {
newNodePos.x = db.right;
}
if(db.top !== undefined && newNodePos.y < db.top) {
newNodePos.y = db.top;
}
if(db.bottom !== undefined && newNodePos.y > db.bottom) {
newNodePos.y = db.bottom;
}
node.setAbsolutePosition(newNodePos);
// constraint overrides
if(dc === 'horizontal') {
node.attrs.y = lastNodePos.y;
}
else if(dc === 'vertical') {
node.attrs.x = lastNodePos.x;
}
/*
* if dragging and dropping the stage,
* draw all of the layers
*/
if(go.drag.node.nodeType === 'Stage') {
go.drag.node.draw();
}
else {
go.drag.node.getLayer().draw();
}
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvent('dragmove', evt);
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
}
if(db.right !== undefined && newNodePos.x > db.right) {
newNodePos.x = db.right;
}
if(db.top !== undefined && newNodePos.y < db.top) {
newNodePos.y = db.top;
}
if(db.bottom !== undefined && newNodePos.y > db.bottom) {
newNodePos.y = db.bottom;
}
}, false);
this._onContent('mouseup touchend mouseout', function(evt) {
that._endDrag(evt);
});
node.setAbsolutePosition(newNodePos);
// constraint overrides
if(dc === 'horizontal') {
node.attrs.y = lastNodePos.y;
}
else if(dc === 'vertical') {
node.attrs.x = lastNodePos.x;
}
/*
* if dragging and dropping the stage,
* draw all of the layers
*/
if(go.drag.node.nodeType === 'Stage') {
go.drag.node.draw();
}
else {
go.drag.node.getLayer().draw();
}
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvent('dragmove', evt);
}
},
/**
* build dom

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

File diff suppressed because one or more lines are too long

168
src/Stage.js
View File

@@ -34,7 +34,6 @@ Kinetic.Stage = function(config) {
this._id = Kinetic.GlobalObject.idCounter++;
this._buildDOM();
this._bindContentEvents();
this._prepareDrag();
//change events
this.on('widthChange.kinetic_reserved', function() {
@@ -422,7 +421,7 @@ Kinetic.Stage.prototype = {
}
// handle touchstart
if(!isDragging && this.touchStart && !this.touchMove) {
else if(!isDragging && this.touchStart && !this.touchMove) {
this.touchStart = false;
this.tapStart = true;
shape._handleEvent('touchstart', evt);
@@ -478,7 +477,8 @@ Kinetic.Stage.prototype = {
}
// handle mousemove and touchmove
else if(!isDragging && this.mouseMove) {
else if(!isDragging && this.mouseMove) {
shape._handleEvent('mousemove', evt);
return true;
}
@@ -609,17 +609,17 @@ else if(!isDragging && this.touchMove) {
var pubEvent = events[n];
// induce scope
( function() {
var event = pubEvent;
var event = pubEvent;
that.content.addEventListener(event, function(evt) {
that['_on' + event](evt);
that['_' + event](evt);
}, false);
}());
}
},
_onmouseover: function(evt) {
_mouseover: function(evt) {
this._handleStageEvent(evt);
},
_onmouseout: function(evt) {
_mouseout: function(evt) {
// if there's a current target shape, run mouseout handlers
var targetShape = this.targetShape;
if(targetShape) {
@@ -627,8 +627,11 @@ else if(!isDragging && this.touchMove) {
this.targetShape = undefined;
}
this.mousePos = undefined;
// end drag and drop
this._endDrag(evt);
},
_onmousemove: function(evt) {
_mousemove: function(evt) {
//throttle mousemove
var throttle = this.attrs.throttle;
var date = new Date();
@@ -641,8 +644,11 @@ else if(!isDragging && this.touchMove) {
this.mouseUp = false;
this._handleStageEvent(evt);
}
// start drag and drop
this._startDrag(evt);
},
_onmousedown: function(evt) {
_mousedown: function(evt) {
this.mouseDown = true;
this.mouseUp = false;
this.mouseMove = false;
@@ -653,14 +659,17 @@ else if(!isDragging && this.touchMove) {
this._initDrag();
}
},
_onmouseup: function(evt) {
_mouseup: function(evt) {
this.mouseDown = false;
this.mouseUp = true;
this.mouseMove = false;
this._handleStageEvent(evt);
this.clickStart = false;
// end drag and drop
this._endDrag(evt);
},
_ontouchstart: function(evt) {
_touchstart: function(evt) {
evt.preventDefault();
this.touchStart = true;
this.touchEnd = false;
@@ -673,14 +682,17 @@ else if(!isDragging && this.touchMove) {
this._initDrag();
}
},
_ontouchend: function(evt) {
_touchend: function(evt) {
this.touchStart = false;
this.touchEnd = true;
this.touchMove = false;
this._handleStageEvent(evt);
this.tapStart = false;
// end drag and drop
this._endDrag(evt);
},
_ontouchmove: function(evt) {
_touchmove: function(evt) {
//throttle touchmove
var that = this;
var throttle = this.attrs.throttle;
@@ -704,6 +716,9 @@ else if(!isDragging && this.touchMove) {
that._handleStageEvent(evt);
}, 5);
}
// start drag and drop
this._startDrag(evt);
},
/**
* set mouse positon for desktop apps
@@ -788,80 +803,73 @@ else if(!isDragging && this.touchMove) {
go.drag.node = undefined;
},
/**
* prepare drag and drop
* start drag and drop
*/
_prepareDrag: function() {
_startDrag: function(evt) {
var that = this;
var go = Kinetic.GlobalObject;
var node = go.drag.node;
this._onContent('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
var lastNodePos = {
x: node.attrs.x,
y: node.attrs.y
};
if(node) {
var pos = that.getUserPosition();
var dc = node.attrs.dragConstraint;
var db = node.attrs.dragBounds;
var lastNodePos = {
x: node.attrs.x,
y: node.attrs.y
};
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y
};
// default
var newNodePos = {
x: pos.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y
};
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
}
if(db.right !== undefined && newNodePos.x > db.right) {
newNodePos.x = db.right;
}
if(db.top !== undefined && newNodePos.y < db.top) {
newNodePos.y = db.top;
}
if(db.bottom !== undefined && newNodePos.y > db.bottom) {
newNodePos.y = db.bottom;
}
node.setAbsolutePosition(newNodePos);
// constraint overrides
if(dc === 'horizontal') {
node.attrs.y = lastNodePos.y;
}
else if(dc === 'vertical') {
node.attrs.x = lastNodePos.x;
}
/*
* if dragging and dropping the stage,
* draw all of the layers
*/
if(go.drag.node.nodeType === 'Stage') {
go.drag.node.draw();
}
else {
go.drag.node.getLayer().draw();
}
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvent('dragmove', evt);
// bounds overrides
if(db.left !== undefined && newNodePos.x < db.left) {
newNodePos.x = db.left;
}
if(db.right !== undefined && newNodePos.x > db.right) {
newNodePos.x = db.right;
}
if(db.top !== undefined && newNodePos.y < db.top) {
newNodePos.y = db.top;
}
if(db.bottom !== undefined && newNodePos.y > db.bottom) {
newNodePos.y = db.bottom;
}
}, false);
this._onContent('mouseup touchend mouseout', function(evt) {
that._endDrag(evt);
});
node.setAbsolutePosition(newNodePos);
// constraint overrides
if(dc === 'horizontal') {
node.attrs.y = lastNodePos.y;
}
else if(dc === 'vertical') {
node.attrs.x = lastNodePos.x;
}
/*
* if dragging and dropping the stage,
* draw all of the layers
*/
if(go.drag.node.nodeType === 'Stage') {
go.drag.node.draw();
}
else {
go.drag.node.getLayer().draw();
}
if(!go.drag.moving) {
go.drag.moving = true;
// execute dragstart events if defined
go.drag.node._handleEvent('dragstart', evt);
}
// execute user defined ondragmove if defined
go.drag.node._handleEvent('dragmove', evt);
}
},
/**
* build dom

16
tests/html/manualTests.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css"href="../base.css">
<script src="../../dist/kinetic-core.js"></script>
<script src="../js/Test.js"></script>
<script src="../js/manualTests.js"></script>
<script>
window.onload = function() {
var test = new Test();
test.run();
};
</script>
</head>
<body onmousedown="return false;"></body>
</html>

2114
tests/js/functionalTests.js
View File

File diff suppressed because it is too large Load Diff

2063
tests/js/manualTests.js Normal file
View File

File diff suppressed because it is too large Load Diff