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

bug fixes and enhancements. also updated the README

Browse Source
This commit is contained in:
Eric Rowell 2012-03-10 16:52:16 -08:00
parent 0f49f12024
commit 07860a7dbd
14 changed files with 2741 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.project

11
README.md
View File

@ -12,7 +12,12 @@ Check out the official [KineticJS Tutorials](http://www.html5canvastutorials.com
# Building the library
To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`.
To build a development version of the library, run `thor build:dev VERSION`, where VERSION is in the format MAJOR.MINOR.PATCH. To build a minify version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012`).
To build a development version of the library, run `thor build:dev VERSION`, where VERSION is a string that can be anything you like. For example, using `thor build:dev core` will produce `kinetic-core.js`. To build a minified version of the library, run `thor build:prod VERSION`. If you want to add a release date other than the current day, use `-d="DATE"` (e.g. `-d="Mar 07 2012`).
# Adding a new file in the src directory
If you add a file in the src directory, add into the array in the Thorfile.
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` 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.
#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 geometry (see `src/geometries` for examples). Before doing so, please first make sure that all of the unit tests and functional tests pass.

14
Thorfile
View File

@ -4,18 +4,18 @@ class Build < Thor
# This is the list of files to concatenate. The first file will appear at the top of the final file. All files are relative to the lib directory.
FILES = [
"license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"src/Layer.js", "src/Group.js", "src/geometries/Shape.js", "src/geometries/Rect.js", "src/geometries/Circle.js", "src/geometries/Image.js",
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/geometries/Rect.js", "src/geometries/Circle.js", "src/geometries/Image.js",
"src/geometries/Polygon.js", "src/geometries/RegularPolygon.js", "src/geometries/Star.js", "src/geometries/Text.js"
]
desc "dev", "Concatenate all the js files into /dist/kinetic-vVERSION.js."
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."
method_option :date, aliases: "-d", required: false, type: :string, desc: "The release date"
def dev(version)
file_name = "dist/kinetic-v#{version}.js"
file_name = "dist/kinetic-#{version}.js"
puts ":: Deleting other development files..."
Dir.foreach("dist") do |file|
if file.match(/kinetic-v.+\.(\d|\.)+\.js/)
if file.match(/kinetic-.+\.(\d|\.)+\.js/)
File.delete("dist/" + file)
end
end
@ -28,14 +28,14 @@ class Build < Thor
puts " -> Done!"
end
desc "prod", "Concatenate all the js files in into /dist/kinetic-vVERSION.min.js and minify it."
desc "prod", "Concatenate all the js files in into /dist/kinetic-VERSION.min.js and minify it."
method_option :date, aliases: "-d", required: false, type: :string, desc: "The release date"
def prod(version)
file_name = "dist/kinetic-v#{version}.min.js"
file_name = "dist/kinetic-#{version}.min.js"
puts ":: Deleting other development files..."
Dir.foreach("dist") do |file|
if file.match(/kinetic-v.+\.min\.js/)
if file.match(/kinetic-.+\.min\.js/)
File.delete("dist/" + file)
end
end

2270
dist/kinetic-core.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

28
dist/kinetic-core.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
license.js
View File

@ -1,5 +1,5 @@
/**
* KineticJS JavaScript Library v@version
* KineticJS JavaScript Library @version
* http://www.kineticjs.com/
* Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses.

6
src/GlobalObject.js
View File

@ -29,7 +29,7 @@ Kinetic.GlobalObject = {
},
extend: function(obj1, obj2) {
for(var key in obj2.prototype) {
if(obj2.prototype.hasOwnProperty(key)) {
if(obj2.prototype.hasOwnProperty(key) && obj1.prototype[key] === undefined) {
obj1.prototype[key] = obj2.prototype[key];
}
}
@ -77,6 +77,7 @@ Kinetic.GlobalObject = {
that._animationLoop();
} else if(this.isAnimating && !this._isaCanvasAnimating()) {
this.isAnimating = false;
this.frame.lastTime = 0;
}
}
};
@ -86,4 +87,5 @@ window.requestAnimFrame = (function(callback) {
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
})();

0
src/geometries/Shape.js → src/Shape.js
View File

291
src/Stage.js
View File

@ -21,6 +21,7 @@ Kinetic.Stage = function(cont, width, height) {
this.dblClickWindow = 400;
this.targetShape = undefined;
this.clickStart = false;
this.targetFound = false;
// desktop flags
this.mousePos = undefined;
@ -285,6 +286,147 @@ Kinetic.Stage.prototype = {
getStage: function() {
return this;
},
/**
* detect event
* @param {Shape} shape
*/
_detectEvent: function(shape, evt) {
var isDragging = Kinetic.GlobalObject.drag.moving;
var backstageLayer = this.backstageLayer;
var backstageLayerContext = backstageLayer.getContext();
var go = Kinetic.GlobalObject;
var pos = this.getUserPosition();
var el = shape.eventListeners;
shape._draw(backstageLayer);
if(this.targetShape && shape.id === this.targetShape.id) {
this.targetFound = true;
}
if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
// handle onmousedown
if(!isDragging && this.mouseDown) {
this.mouseDown = false;
this.clickStart = true;
shape._handleEvents("onmousedown", evt);
return true;
}
// handle onmouseup & onclick
else if(this.mouseUp) {
this.mouseUp = false;
shape._handleEvents("onmouseup", evt);
// detect if click or double click occurred
if(this.clickStart) {
/*
* if dragging and dropping, don't fire click or dbl click
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents("onclick", evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents("ondblclick", evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
shape.inDoubleClickWindow = false;
}, this.dblClickWindow);
}
}
return true;
}
// handle touchstart
else if(this.touchStart) {
this.touchStart = false;
shape._handleEvents("touchstart", evt);
if(el.ondbltap && shape.inDoubleClickWindow) {
var events = el.ondbltap;
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(shape, [evt]);
}
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
shape.inDoubleClickWindow = false;
}, this.dblClickWindow);
return true;
}
// handle touchend
else if(this.touchEnd) {
this.touchEnd = false;
shape._handleEvents("touchend", evt);
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;
// handle onmouseover
shape._handleEvents("onmouseover", evt);
return true;
}
// handle onmousemove
else if(!isDragging) {
shape._handleEvents("onmousemove", evt);
return true;
}
}
// handle mouseout condition
else if(!isDragging && this.targetShape && this.targetShape.id === shape.id) {
this.targetShape = undefined;
shape._handleEvents("onmouseout", evt);
return true;
}
return false;
},
/**
* traverse container children
* @param {Container} obj
*/
_traverseChildren: function(obj, evt) {
var children = obj.children;
// propapgate backwards through children
for(var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if(child.className === "Shape") {
var exit = this._detectEvent(child, evt);
if(exit) {
return true;
}
} else {
this._traverseChildren(child);
}
}
return false;
},
/**
* handle incoming event
* @param {Event} evt
@ -299,9 +441,6 @@ Kinetic.Stage.prototype = {
this._setTouchPosition(evt);
var backstageLayer = this.backstageLayer;
var backstageLayerContext = backstageLayer.getContext();
var that = this;
backstageLayer.clear();
/*
@ -309,145 +448,13 @@ Kinetic.Stage.prototype = {
* is triggered, n is set to -1 which will break out of the
* three nested loops
*/
var targetFound = false;
this.targetFound = false;
function detectEvent(shape) {
shape._draw(backstageLayer);
var pos = that.getUserPosition();
var el = shape.eventListeners;
if(that.targetShape && shape.id === that.targetShape.id) {
targetFound = true;
}
if(shape.visible && pos !== undefined && backstageLayerContext.isPointInPath(pos.x, pos.y)) {
// handle onmousedown
if(that.mouseDown) {
that.mouseDown = false;
that.clickStart = true;
shape._handleEvents("onmousedown", evt);
return true;
}
// handle onmouseup & onclick
else if(that.mouseUp) {
that.mouseUp = false;
shape._handleEvents("onmouseup", evt);
// detect if click or double click occurred
if(that.clickStart) {
/*
* if dragging and dropping, don't fire click or dbl click
* event
*/
if((!go.drag.moving) || !go.drag.node) {
shape._handleEvents("onclick", evt);
if(shape.inDoubleClickWindow) {
shape._handleEvents("ondblclick", evt);
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
shape.inDoubleClickWindow = false;
}, that.dblClickWindow);
}
}
return true;
}
// handle touchstart
else if(that.touchStart) {
that.touchStart = false;
shape._handleEvents("touchstart", evt);
if(el.ondbltap && shape.inDoubleClickWindow) {
var events = el.ondbltap;
for(var i = 0; i < events.length; i++) {
events[i].handler.apply(shape, [evt]);
}
}
shape.inDoubleClickWindow = true;
setTimeout(function() {
shape.inDoubleClickWindow = false;
}, that.dblClickWindow);
return true;
}
// handle touchend
else if(that.touchEnd) {
that.touchEnd = false;
shape._handleEvents("touchend", evt);
return true;
}
// handle touchmove
else if(el.touchmove) {
shape._handleEvents("touchmove", evt);
return true;
}
//this condition is used to identify a new target shape.
else if(!that.targetShape || (!targetFound && shape.id !== that.targetShape.id)) {
/*
* check if old target has an onmouseout event listener
*/
if(that.targetShape) {
var oldEl = that.targetShape.eventListeners;
if(oldEl) {
that.targetShape._handleEvents("onmouseout", evt);
}
}
// set new target shape
that.targetShape = shape;
// handle onmouseover
shape._handleEvents("onmouseover", evt);
return true;
}
// handle onmousemove
else {
shape._handleEvents("onmousemove", evt);
return true;
}
}
// handle mouseout condition
else if(that.targetShape && that.targetShape.id === shape.id) {
that.targetShape = undefined;
shape._handleEvents("onmouseout", evt);
return true;
}
return false;
}
function traverseChildren(obj) {
var children = obj.children;
// propapgate backwards through children
for(var i = children.length - 1; i >= 0; i--) {
var child = children[i];
if(child.className === "Shape") {
var exit = detectEvent(child);
if(exit) {
return true;
}
} else {
traverseChildren(child);
}
}
return false;
}
if(go.drag.node === undefined) {
for(var n = this.children.length - 1; n >= 0; n--) {
var layer = this.children[n];
if(layer.visible && n >= 0 && layer.isListening) {
if(traverseChildren(layer)) {
n = -1;
}
for(var n = this.children.length - 1; n >= 0; n--) {
var layer = this.children[n];
if(layer.visible && n >= 0 && layer.isListening) {
if(this._traverseChildren(layer, evt)) {
n = -1;
}
}
}
@ -620,4 +627,4 @@ Kinetic.Stage.prototype = {
}
};
// extend Container
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);

2
src/geometries/Circle.js
View File

@ -39,4 +39,4 @@ Kinetic.Circle.prototype = {
};
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);
Kinetic.GlobalObject.extend(Kinetic.Circle, Kinetic.Shape);

2
tests/functionalTests.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel="stylesheet" type="text/css"href="base.css">
<script src="../dist/kinetic-v3.8.3.js"></script>
<script src="../dist/kinetic-core.js"></script>
<script src="functionalTests.js"></script>
<script src="testMethods.js"></script>
<script>

500
tests/functionalTests.js
View File

@ -1,154 +1,8 @@
function Test(){
function Test() {
this.testOnly = "";
this.counter = 0;
this.tests = {
"DRAG AND DROP - draggable true": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - draggable true false": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
circle.draggable(false);
},
"DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(0.5);
stage.draw();
},
"DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(0.5);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(1.5);
stage.draw();
},
"DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(1.5);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - check that other events are disabled": function(containerId){
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: stage.width / 2 + 50,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4
});
circle1.draggable(true);
circle2.on("mouseover", function(){
log("mouseover green circle");
});
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
},
"EVENTS - mousedown mouseup mouseover mouseout click dblclick": function(containerId){
"EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -160,35 +14,47 @@ function Test(){
strokeWidth: 4,
draggable: true
});
circle.on('mousedown', function(){
circle.on('mousedown', function() {
log('mousedown');
});
circle.on('mouseup', function(){
circle.on('mouseup', function() {
log('mouseup');
});
circle.on('mouseover', function(){
circle.on('touchstart', function() {
log('touchstart');
});
circle.on('touchend', function() {
log('touchend');
});
circle.on('mouseover', function() {
log('mouseover');
});
circle.on('mouseout', function(){
circle.on('mouseout', function() {
log('mouseout');
});
circle.on('click', function(){
circle.on('click', function() {
log('click');
});
circle.on('dblclick', function(){
circle.on('dblclick', function() {
log('dblclick');
});
circle.on('dbltap', function() {
log('dbltap');
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - modify fill stroke and stroke width": function(containerId){
"EVENTS - modify fill stroke and stroke width on hover with circle": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -199,28 +65,28 @@ function Test(){
fill: "red",
stroke: "black"
});
circle.on("mouseover", function(){
circle.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
this.setStrokeWidth(20);
layer.draw();
});
circle.on("mouseout", function(){
circle.on("mouseout", function() {
this.setFill("red");
this.setStroke("black");
this.setStrokeWidth(4);
layer.draw();
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - 10 point star geometry modify stroke fill and stroke width": function(containerId){
"EVENTS - modify fill stroke and stroke width on hover with circle with star": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
x: 200,
y: 100,
@ -232,27 +98,27 @@ function Test(){
strokeWidth: 5,
name: "foobar"
});
star.on("mouseover", function(){
star.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
this.setStrokeWidth(20);
layer.draw();
});
star.on("mouseout", function(){
star.on("mouseout", function() {
this.setFill("green");
this.setStroke("blue");
this.setStrokeWidth(5);
layer.draw();
});
layer.add(star);
stage.add(layer);
},
"EVENTS - image geometry modify fill stroke and stroke width": function(containerId){
"EVENTS - modify fill stroke and stroke width on hover with circle with image": function(containerId) {
var imageObj = new Image();
imageObj.onload = function(){
imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
@ -260,27 +126,27 @@ function Test(){
y: 60,
image: imageObj
});
darth.on("mouseover", function(){
darth.on("mouseover", function() {
this.setFill("yellow");
this.setStroke("purple");
this.setStrokeWidth(20);
layer.draw();
});
darth.on("mouseout", function(){
this.setFill("");
this.setStroke("");
darth.on("mouseout", function() {
this.setFill(undefined);
this.setStroke(undefined);
this.setStrokeWidth(0);
layer.draw();
});
layer.add(darth);
stage.add(layer);
};
imageObj.src = "darth-vader.jpg";
},
"EVENTS - drag events click": function(containerId){
"EVENTS - drag events click": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -291,31 +157,29 @@ function Test(){
fill: "red",
stroke: "black"
});
circle.draggable(true);
circle.on('dragstart', function(){
circle.on('dragstart', function() {
log('dragstart');
});
circle.on('dragmove', function(){
circle.on('dragmove', function() {
log('dragmove');
});
circle.on('dragend', function(){
circle.on('dragend', function() {
log('dragend');
});
circle.on('click', function(){
circle.on('click', function() {
log('click');
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - isDragging": function(containerId){
"EVENTS - isDragging": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
@ -326,37 +190,37 @@ function Test(){
fill: "red",
stroke: "black"
});
//log('not dragging yet before draggable, isDragging: ' + circle.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
circle.draggable(true);
//log('not dragging yet after draggable, isDragging: ' + circle.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
circle.on('dragstart', function(){
circle.on('dragstart', function() {
log('dragstart, isDragging: ' + this.isDragging());
test(circle.isDragging() === true, "isDragging() should be true");
});
circle.on('dragmove', function(){
circle.on('dragmove', function() {
log('dragmove, isDragging: ' + this.isDragging());
test(circle.isDragging() === true, "isDragging() should be true");
});
circle.on('dragend', function(){
circle.on('dragend', function() {
log('dragend, isDragging: ' + this.isDragging());
test(circle.isDragging() === false, "isDragging() should be false");
});
layer.add(circle);
stage.add(layer);
},
"EVENTS - mousemove from shape to another shape in same layer": function(containerId){
"EVENTS - mousemove from shape to another shape in same layer": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
@ -365,14 +229,13 @@ function Test(){
fill: "red",
stroke: "black"
});
redCircle.on("mouseover", function(){
redCircle.on("mouseover", function() {
log('mouseover red circle');
});
redCircle.on("mouseout", function(){
redCircle.on("mouseout", function() {
log('mouseout red circle');
});
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
@ -381,24 +244,24 @@ function Test(){
fill: "green",
stroke: "black"
});
greenCircle.on("mouseover", function(){
greenCircle.on("mouseover", function() {
log('mouseover green circle');
});
greenCircle.on("mouseout", function(){
greenCircle.on("mouseout", function() {
log('mouseout green circle');
});
layer.add(redCircle);
layer.add(greenCircle);
stage.add(layer);
},
"EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId){
"EVENTS - mousemove 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();
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.height / 2,
@ -407,14 +270,13 @@ function Test(){
fill: "red",
stroke: "black"
});
redCircle.on("mouseover", function(){
redCircle.on("mouseover", function() {
log('mouseover red circle');
});
redCircle.on("mouseout", function(){
redCircle.on("mouseout", function() {
log('mouseout red circle');
});
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.height / 2,
@ -423,43 +285,42 @@ function Test(){
fill: "green",
stroke: "black"
});
greenCircle.on("mouseover", function(){
greenCircle.on("mouseover", function() {
log('mouseover green circle');
});
greenCircle.on("mouseout", function(){
greenCircle.on("mouseout", function() {
log('mouseout green circle');
});
redLayer.add(redCircle);
greenLayer.add(greenCircle);
stage.add(redLayer);
stage.add(greenLayer);
},
"EVENTS - event bubbling": function(containerId){
"EVENTS - event bubbling": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
layer.on("mouseover", function(){
layer.on("mouseover", function() {
log('mouseover layer');
//console.log(this);
});
layer.on("mouseout", function(){
layer.on("mouseout", function() {
log('mouseout layer');
//console.log(this);
});
group.on("mouseover", function(){
group.on("mouseover", function() {
log('mouseover group');
//console.log(this);
});
group.on("mouseout", function(){
group.on("mouseout", function() {
log('mouseout group');
//console.log(this);
});
var redCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
@ -468,16 +329,15 @@ function Test(){
fill: "red",
stroke: "black"
});
redCircle.on("mouseover", function(){
redCircle.on("mouseover", function() {
log('mouseover red circle');
//console.log(this);
});
redCircle.on("mouseout", function(){
redCircle.on("mouseout", function() {
log('mouseout red circle');
//console.log(this);
});
var greenCircle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
@ -486,21 +346,167 @@ function Test(){
fill: "green",
stroke: "black"
});
greenCircle.on("mouseover", function(){
greenCircle.on("mouseover", function() {
log('mouseover green circle');
//console.log(this);
});
greenCircle.on("mouseout", function(){
greenCircle.on("mouseout", function() {
log('mouseout green circle');
//console.log(this);
});
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
},
"DRAG AND DROP - draggable true": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - draggable true false": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
circle.draggable(false);
},
"DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(0.5);
stage.draw();
},
"DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(0.5);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
layer.add(circle);
stage.add(layer);
stage.setScale(1.5);
stage.draw();
},
"DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
circle.draggable(true);
stage.setScale(1.5);
layer.add(circle);
stage.add(layer);
},
"DRAG AND DROP - check that green events are ignored when dragging red circle": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "red",
stroke: "black",
strokeWidth: 4
});
var circle2 = new Kinetic.Circle({
x: stage.width / 2 + 50,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4
});
circle1.draggable(true);
circle2.on("mouseover", function() {
log("mouseover green circle");
});
layer.add(circle1);
layer.add(circle2);
stage.add(layer);
}
};
}
}

2
tests/unitTests.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<link rel="stylesheet" type="text/css"href="base.css">
<script src="../dist/kinetic-v3.8.3.js"></script>
<script src="../dist/kinetic-core.js"></script>
<script src="unitTests.js"></script>
<script src="testMethods.js"></script>
<script>

18
tests/unitTests.js
View File

@ -258,6 +258,23 @@ function Test() {
});
//stage.start();
},
"SHAPES - set fill after instantiation": function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: "green",
stroke: "black",
strokeWidth: 4
});
layer.add(circle);
circle.setFill("blue");
stage.add(layer);
},
"SHAPES - add image": function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
@ -1184,7 +1201,6 @@ function Test() {
});
stage.start();
}
};
}