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

Merge branch 'matrix'

Browse Source
This commit is contained in:
Eric Rowell
2012-03-23 23:46:13 -07:00
parent fa76527c55 68f9688575
commit c8a6371ab5
11 changed files with 946 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Thorfile
View File

@@ -5,7 +5,8 @@ class Build < Thor
FILES = [
"license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Image.js",
"src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js"
"src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/Matrix.js"
]
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

324
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: Mar 21 2012
* Date: Mar 23 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@@ -52,6 +52,10 @@ Kinetic.GlobalObject = {
offset: {
x: 0,
y: 0
},
start: {
x: 0,
y: 0
}
},
extend: function(obj1, obj2) {
@@ -296,14 +300,6 @@ Kinetic.Node = function(config) {
}
}
}
// overrides
if(this.centerOffset.x === undefined) {
this.centerOffset.x = 0;
}
if(this.centerOffset.y === undefined) {
this.centerOffset.y = 0;
}
};
/*
* Node methods
@@ -762,6 +758,53 @@ Kinetic.Node.prototype = {
getDragBounds: function() {
return this.dragBounds;
},
/**
* get matrix transform of the node while taking into
* account the matrix transforms of its parents
*/
getAbsoluteMatrix: function() {
// absolute matrix
var am = new Kinetic.Matrix();
var family = [];
var parent = this.parent;
family.unshift(this);
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
for(var n = 0; n < family.length; n++) {
var node = family[n];
var m = node.getMatrix();
am.multiply(m);
}
return am;
},
/**
* get matrix transform of the node while not taking
* into account the matrix transforms of its parents
*/
getMatrix: function() {
var m = new Kinetic.Matrix();
if(this.x !== 0 || this.y !== 0) {
m.translate(this.x, this.y);
}
if(this.rotation !== 0) {
m.rotate(this.rotation);
}
if(this.scale.x !== 1 || this.scale.y !== 1) {
m.scale(this.scale.x, this.scale.y);
}
if(this.centerOffset.x !== 0 || this.centerOffset.y !== 0) {
m.translate(-1 * this.centerOffset.x, -1 * this.centerOffset.y);
}
return m;
},
/**
* initialize drag and drop
*/
@@ -773,9 +816,13 @@ Kinetic.Node.prototype = {
var pos = stage.getUserPosition();
if(pos) {
var m = that.getMatrix().getTranslation();
var am = that.getAbsoluteMatrix().getTranslation();
go.drag.node = that;
go.drag.offset.x = pos.x - that.x;
go.drag.offset.y = pos.y - that.y;
go.drag.start.x = m.x - am.x;
go.drag.start.y = m.y - am.y;
}
});
},
@@ -945,17 +992,26 @@ Kinetic.Container.prototype = {
* animations
* @constructor
* @augments Kinetic.Container
* @augments Kinetic.Node
* @param {String|DomElement} cont Container id or DOM element
* @param {int} width
* @param {int} height
*/
Kinetic.Stage = function(cont, width, height) {
Kinetic.Stage = function(config) {
/*
* if container is a string, assume it's an id for
* a DOM element
*/
if( typeof config.container === 'string') {
config.container = document.getElementById(config.container);
}
this.className = 'Stage';
this.container = typeof cont === 'string' ? document.getElementById(cont) : cont;
this.container = config.container;
this.content = document.createElement('div');
this.width = width;
this.height = height;
this.width = config.width;
this.height = config.height;
this.scale = {
x: 1,
y: 1
@@ -991,8 +1047,9 @@ Kinetic.Stage = function(cont, width, height) {
// add stage to global object
Kinetic.GlobalObject.stages.push(this);
// call super constructor
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
};
/*
* Stage methods
@@ -1049,48 +1106,6 @@ Kinetic.Stage.prototype = {
this.backstageLayer.getCanvas().width = width;
this.backstageLayer.getCanvas().height = height;
},
/**
* set stage scale. If only one parameter is passed in, then
* both scaleX and scaleY are set to the parameter
* @param {int} scaleX
* @param {int} scaleY
*/
setScale: function(scaleX, scaleY) {
var oldScaleX = this.scale.x;
var oldScaleY = this.scale.y;
if(scaleY) {
this.scale.x = scaleX;
this.scale.y = scaleY;
}
else {
this.scale.x = scaleX;
this.scale.y = scaleX;
}
/*
* scale all shape positions
*/
var layers = this.children;
var that = this;
function scaleChildren(children) {
for(var i = 0; i < children.length; i++) {
var child = children[i];
child.x *= that.scale.x / oldScaleX;
child.y *= that.scale.y / oldScaleY;
if(child.children) {
scaleChildren(child.children);
}
}
}
scaleChildren(layers);
},
/**
* get scale
*/
getScale: function() {
return this.scale;
},
/**
* clear all layers
*/
@@ -1135,16 +1150,14 @@ Kinetic.Stage.prototype = {
remove: function(layer) {
// remove layer canvas from dom
this.content.removeChild(layer.canvas);
this._remove(layer);
},
/**
* bind event listener to stage (which is essentially
* the container DOM)
* bind event listener to container DOM element
* @param {String} typesStr
* @param {function} handler
*/
on: function(typesStr, handler) {
onContainer: function(typesStr, handler) {
var types = typesStr.split(' ');
for(var n = 0; n < types.length; n++) {
var baseEvent = types[n];
@@ -1376,7 +1389,7 @@ Kinetic.Stage.prototype = {
* handle incoming event
* @param {Event} evt
*/
_handleEvent: function(evt) {
_handleStageEvent: function(evt) {
var go = Kinetic.GlobalObject;
if(!evt) {
evt = window.event;
@@ -1425,25 +1438,25 @@ Kinetic.Stage.prototype = {
// desktop events
this.container.addEventListener('mousedown', function(evt) {
that.mouseDown = true;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mousemove', function(evt) {
that.mouseUp = false;
that.mouseDown = false;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mouseup', function(evt) {
that.mouseUp = true;
that.mouseDown = false;
that._handleEvent(evt);
that._handleStageEvent(evt);
that.clickStart = false;
}, false);
this.container.addEventListener('mouseover', function(evt) {
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mouseout', function(evt) {
@@ -1453,18 +1466,18 @@ Kinetic.Stage.prototype = {
this.container.addEventListener('touchstart', function(evt) {
evt.preventDefault();
that.touchStart = true;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('touchmove', function(evt) {
evt.preventDefault();
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('touchend', function(evt) {
evt.preventDefault();
that.touchEnd = true;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
},
/**
@@ -1555,23 +1568,26 @@ Kinetic.Stage.prototype = {
_prepareDrag: function() {
var that = this;
this.on('mousemove touchmove', function(evt) {
this.onContainer('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var ds = node.dragConstraint;
var dc = node.dragConstraint;
var db = node.dragBounds;
if(ds === 'none' || ds === 'horizontal') {
var m = node.getMatrix().getTranslation();
var am = node.getAbsoluteMatrix().getTranslation();
if(dc === 'none' || dc === 'horizontal') {
var newX = pos.x - go.drag.offset.x;
if((db.left === undefined || db.left < newX) && (db.right === undefined || db.right > newX)) {
node.x = newX;
node.x = newX + m.x - (am.x + go.drag.start.x);
}
}
if(ds === 'none' || ds === 'vertical') {
if(dc === 'none' || dc === 'vertical') {
var newY = pos.y - go.drag.offset.y;
if((db.top === undefined || db.top < newY) && (db.bottom === undefined || db.bottom > newY)) {
node.y = newY;
node.y = newY + m.y - (am.y + go.drag.start.y);
}
}
go.drag.node.getLayer().draw();
@@ -1586,7 +1602,7 @@ Kinetic.Stage.prototype = {
}
}, false);
this.on('mouseup touchend mouseout', function(evt) {
this.onContainer('mouseup touchend mouseout', function(evt) {
that._endDrag(evt);
});
},
@@ -1626,8 +1642,9 @@ Kinetic.Stage.prototype = {
this.content.appendChild(this.backstageLayer.canvas);
}
};
// extend Container
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);
///////////////////////////////////////////////////////////////////////
// Layer
@@ -1657,13 +1674,17 @@ Kinetic.Layer = function(config) {
*/
Kinetic.Layer.prototype = {
/**
* public draw children
* draw children nodes. this includes any groups
* or shapes
*/
draw: function() {
this._draw();
},
/**
* clear layer
* clears the canvas context tied to the layer. Clearing
* a layer does not remove its children. The nodes within
* the layer will be redrawn whenever the .draw() method
* is used again.
*/
clear: function() {
var context = this.getContext();
@@ -1683,7 +1704,8 @@ Kinetic.Layer.prototype = {
return this.context;
},
/**
* add node to layer
* add a node to the layer. New nodes are always
* placed at the top.
* @param {Node} node
*/
add: function(child) {
@@ -1874,56 +1896,27 @@ Kinetic.Shape.prototype = {
if(this.visible) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];
var parent = this.parent;
family.unshift(this);
var parent = this.parent;
while(parent.className !== 'Stage') {
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
// children transforms
context.save();
for(var n = 0; n < family.length; n++) {
var obj = family[n];
var node = family[n];
var m = node.getMatrix().toArray();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
context.save();
if(obj.x !== 0 || obj.y !== 0) {
context.translate(obj.x, obj.y);
}
if(obj.centerOffset.x !== 0 || obj.centerOffset.y !== 0) {
context.translate(obj.centerOffset.x, obj.centerOffset.y);
}
if(obj.rotation !== 0) {
context.rotate(obj.rotation);
}
if(obj.scale.x !== 1 || obj.scale.y !== 1) {
context.scale(obj.scale.x, obj.scale.y);
}
if(obj.centerOffset.x !== 0 || obj.centerOffset.y !== 0) {
context.translate(-1 * obj.centerOffset.x, -1 * obj.centerOffset.y);
}
if(obj.getAbsoluteAlpha() !== 1) {
context.globalAlpha = obj.getAbsoluteAlpha();
if(node.getAbsoluteAlpha() !== 1) {
context.globalAlpha = node.getAbsoluteAlpha();
}
}
// stage transform
context.save();
if(stage && (stage.scale.x !== 1 || stage.scale.y !== 1)) {
context.scale(stage.scale.x, stage.scale.y);
}
this.tempLayer = layer;
this.drawFunc.call(this);
// children restore
for(var i = 0; i < family.length; i++) {
context.restore();
}
// stage restore
context.restore();
}
}
@@ -2534,3 +2527,102 @@ Kinetic.Text.prototype = {
// extend Shape
Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Shape);
/*
* Last updated November 2011
* By Simon Sarris
* www.simonsarris.com
* sarris@acm.org
*
* Free to use and distribute at will
* So long as you are nice to people, etc
*/
/*
* The usage of this class was inspired by some of the work done by a forked
* project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
* class.
*/
/**
* Matrix object
*/
Kinetic.Matrix = function() {
this.m = [1, 0, 0, 1, 0, 0];
}
Kinetic.Matrix.prototype = {
/**
* Apply translation
* @param {Number} x
* @param {Number} y
*/
translate: function(x, y) {
this.m[4] += this.m[0] * x + this.m[2] * y;
this.m[5] += this.m[1] * x + this.m[3] * y;
},
/**
* Apply scale
* @param {Number} sx
* @param {Number} sy
*/
scale: function(sx, sy) {
this.m[0] *= sx;
this.m[1] *= sx;
this.m[2] *= sy;
this.m[3] *= sy;
},
/**
* Apply rotation
* @param {Number} rad Angle in radians
*/
rotate: function(rad) {
var c = Math.cos(rad);
var s = Math.sin(rad);
var m11 = this.m[0] * c + this.m[2] * s;
var m12 = this.m[1] * c + this.m[3] * s;
var m21 = this.m[0] * -s + this.m[2] * c;
var m22 = this.m[1] * -s + this.m[3] * c;
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
this.m[3] = m22;
},
/**
* Returns the translation
* @returns {Object} 2D point(x, y)
*/
getTranslation: function() {
return {
x: this.m[4],
y: this.m[5]
};
},
/**
* Transform multiplication
* @param {Kinetic.Matrix} matrix
*/
multiply: function(matrix) {
var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
this.m[3] = m22;
this.m[4] = dx;
this.m[5] = dy;
},
/**
* return matrix as array
*/
toArray: function() {
return this.m;
}
};

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

File diff suppressed because one or more lines are too long

4
src/GlobalObject.js
View File

@@ -24,6 +24,10 @@ Kinetic.GlobalObject = {
offset: {
x: 0,
y: 0
},
start: {
x: 0,
y: 0
}
},
extend: function(obj1, obj2) {

11
src/Layer.js
View File

@@ -26,13 +26,17 @@ Kinetic.Layer = function(config) {
*/
Kinetic.Layer.prototype = {
/**
* public draw children
* draw children nodes. this includes any groups
* or shapes
*/
draw: function() {
this._draw();
},
/**
* clear layer
* clears the canvas context tied to the layer. Clearing
* a layer does not remove its children. The nodes within
* the layer will be redrawn whenever the .draw() method
* is used again.
*/
clear: function() {
var context = this.getContext();
@@ -52,7 +56,8 @@ Kinetic.Layer.prototype = {
return this.context;
},
/**
* add node to layer
* add a node to the layer. New nodes are always
* placed at the top.
* @param {Node} node
*/
add: function(child) {

98
src/Matrix.js Normal file
View File

@@ -0,0 +1,98 @@
/*
* Last updated November 2011
* By Simon Sarris
* www.simonsarris.com
* sarris@acm.org
*
* Free to use and distribute at will
* So long as you are nice to people, etc
*/
/*
* The usage of this class was inspired by some of the work done by a forked
* project, KineticJS-Ext by Wappworks, which is based on Simon's Transform
* class.
*/
/**
* Matrix object
*/
Kinetic.Matrix = function() {
this.m = [1, 0, 0, 1, 0, 0];
}
Kinetic.Matrix.prototype = {
/**
* Apply translation
* @param {Number} x
* @param {Number} y
*/
translate: function(x, y) {
this.m[4] += this.m[0] * x + this.m[2] * y;
this.m[5] += this.m[1] * x + this.m[3] * y;
},
/**
* Apply scale
* @param {Number} sx
* @param {Number} sy
*/
scale: function(sx, sy) {
this.m[0] *= sx;
this.m[1] *= sx;
this.m[2] *= sy;
this.m[3] *= sy;
},
/**
* Apply rotation
* @param {Number} rad Angle in radians
*/
rotate: function(rad) {
var c = Math.cos(rad);
var s = Math.sin(rad);
var m11 = this.m[0] * c + this.m[2] * s;
var m12 = this.m[1] * c + this.m[3] * s;
var m21 = this.m[0] * -s + this.m[2] * c;
var m22 = this.m[1] * -s + this.m[3] * c;
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
this.m[3] = m22;
},
/**
* Returns the translation
* @returns {Object} 2D point(x, y)
*/
getTranslation: function() {
return {
x: this.m[4],
y: this.m[5]
};
},
/**
* Transform multiplication
* @param {Kinetic.Matrix} matrix
*/
multiply: function(matrix) {
var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];
var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];
var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];
var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];
var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];
var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];
this.m[0] = m11;
this.m[1] = m12;
this.m[2] = m21;
this.m[3] = m22;
this.m[4] = dx;
this.m[5] = dy;
},
/**
* return matrix as array
*/
toArray: function() {
return this.m;
}
};

59
src/Node.js
View File

@@ -49,14 +49,6 @@ Kinetic.Node = function(config) {
}
}
}
// overrides
if(this.centerOffset.x === undefined) {
this.centerOffset.x = 0;
}
if(this.centerOffset.y === undefined) {
this.centerOffset.y = 0;
}
};
/*
* Node methods
@@ -515,6 +507,53 @@ Kinetic.Node.prototype = {
getDragBounds: function() {
return this.dragBounds;
},
/**
* get matrix transform of the node while taking into
* account the matrix transforms of its parents
*/
getAbsoluteMatrix: function() {
// absolute matrix
var am = new Kinetic.Matrix();
var family = [];
var parent = this.parent;
family.unshift(this);
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
for(var n = 0; n < family.length; n++) {
var node = family[n];
var m = node.getMatrix();
am.multiply(m);
}
return am;
},
/**
* get matrix transform of the node while not taking
* into account the matrix transforms of its parents
*/
getMatrix: function() {
var m = new Kinetic.Matrix();
if(this.x !== 0 || this.y !== 0) {
m.translate(this.x, this.y);
}
if(this.rotation !== 0) {
m.rotate(this.rotation);
}
if(this.scale.x !== 1 || this.scale.y !== 1) {
m.scale(this.scale.x, this.scale.y);
}
if(this.centerOffset.x !== 0 || this.centerOffset.y !== 0) {
m.translate(-1 * this.centerOffset.x, -1 * this.centerOffset.y);
}
return m;
},
/**
* initialize drag and drop
*/
@@ -526,9 +565,13 @@ Kinetic.Node.prototype = {
var pos = stage.getUserPosition();
if(pos) {
var m = that.getMatrix().getTranslation();
var am = that.getAbsoluteMatrix().getTranslation();
go.drag.node = that;
go.drag.offset.x = pos.x - that.x;
go.drag.offset.y = pos.y - that.y;
go.drag.start.x = m.x - am.x;
go.drag.start.y = m.y - am.y;
}
});
},

45
src/Shape.js
View File

@@ -112,56 +112,27 @@ Kinetic.Shape.prototype = {
if(this.visible) {
var stage = layer.getStage();
var context = layer.getContext();
var family = [];
var parent = this.parent;
family.unshift(this);
var parent = this.parent;
while(parent.className !== 'Stage') {
while(parent) {
family.unshift(parent);
parent = parent.parent;
}
// children transforms
context.save();
for(var n = 0; n < family.length; n++) {
var obj = family[n];
var node = family[n];
var m = node.getMatrix().toArray();
context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
context.save();
if(obj.x !== 0 || obj.y !== 0) {
context.translate(obj.x, obj.y);
}
if(obj.centerOffset.x !== 0 || obj.centerOffset.y !== 0) {
context.translate(obj.centerOffset.x, obj.centerOffset.y);
}
if(obj.rotation !== 0) {
context.rotate(obj.rotation);
}
if(obj.scale.x !== 1 || obj.scale.y !== 1) {
context.scale(obj.scale.x, obj.scale.y);
}
if(obj.centerOffset.x !== 0 || obj.centerOffset.y !== 0) {
context.translate(-1 * obj.centerOffset.x, -1 * obj.centerOffset.y);
}
if(obj.getAbsoluteAlpha() !== 1) {
context.globalAlpha = obj.getAbsoluteAlpha();
if(node.getAbsoluteAlpha() !== 1) {
context.globalAlpha = node.getAbsoluteAlpha();
}
}
// stage transform
context.save();
if(stage && (stage.scale.x !== 1 || stage.scale.y !== 1)) {
context.scale(stage.scale.x, stage.scale.y);
}
this.tempLayer = layer;
this.drawFunc.call(this);
// children restore
for(var i = 0; i < family.length; i++) {
context.restore();
}
// stage restore
context.restore();
}
}

104
src/Stage.js
View File

@@ -6,17 +6,26 @@
* animations
* @constructor
* @augments Kinetic.Container
* @augments Kinetic.Node
* @param {String|DomElement} cont Container id or DOM element
* @param {int} width
* @param {int} height
*/
Kinetic.Stage = function(cont, width, height) {
Kinetic.Stage = function(config) {
/*
* if container is a string, assume it's an id for
* a DOM element
*/
if( typeof config.container === 'string') {
config.container = document.getElementById(config.container);
}
this.className = 'Stage';
this.container = typeof cont === 'string' ? document.getElementById(cont) : cont;
this.container = config.container;
this.content = document.createElement('div');
this.width = width;
this.height = height;
this.width = config.width;
this.height = config.height;
this.scale = {
x: 1,
y: 1
@@ -52,8 +61,9 @@ Kinetic.Stage = function(cont, width, height) {
// add stage to global object
Kinetic.GlobalObject.stages.push(this);
// call super constructor
// call super constructors
Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]);
};
/*
* Stage methods
@@ -110,48 +120,6 @@ Kinetic.Stage.prototype = {
this.backstageLayer.getCanvas().width = width;
this.backstageLayer.getCanvas().height = height;
},
/**
* set stage scale. If only one parameter is passed in, then
* both scaleX and scaleY are set to the parameter
* @param {int} scaleX
* @param {int} scaleY
*/
setScale: function(scaleX, scaleY) {
var oldScaleX = this.scale.x;
var oldScaleY = this.scale.y;
if(scaleY) {
this.scale.x = scaleX;
this.scale.y = scaleY;
}
else {
this.scale.x = scaleX;
this.scale.y = scaleX;
}
/*
* scale all shape positions
*/
var layers = this.children;
var that = this;
function scaleChildren(children) {
for(var i = 0; i < children.length; i++) {
var child = children[i];
child.x *= that.scale.x / oldScaleX;
child.y *= that.scale.y / oldScaleY;
if(child.children) {
scaleChildren(child.children);
}
}
}
scaleChildren(layers);
},
/**
* get scale
*/
getScale: function() {
return this.scale;
},
/**
* clear all layers
*/
@@ -200,16 +168,14 @@ Kinetic.Stage.prototype = {
remove: function(layer) {
// remove layer canvas from dom
this.content.removeChild(layer.canvas);
this._remove(layer);
},
/**
* bind event listener to stage (which is essentially
* the container DOM)
* bind event listener to container DOM element
* @param {String} typesStr
* @param {function} handler
*/
on: function(typesStr, handler) {
onContainer: function(typesStr, handler) {
var types = typesStr.split(' ');
for(var n = 0; n < types.length; n++) {
var baseEvent = types[n];
@@ -443,7 +409,7 @@ Kinetic.Stage.prototype = {
* handle incoming event
* @param {Event} evt
*/
_handleEvent: function(evt) {
_handleStageEvent: function(evt) {
var go = Kinetic.GlobalObject;
if(!evt) {
evt = window.event;
@@ -492,25 +458,25 @@ Kinetic.Stage.prototype = {
// desktop events
this.container.addEventListener('mousedown', function(evt) {
that.mouseDown = true;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mousemove', function(evt) {
that.mouseUp = false;
that.mouseDown = false;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mouseup', function(evt) {
that.mouseUp = true;
that.mouseDown = false;
that._handleEvent(evt);
that._handleStageEvent(evt);
that.clickStart = false;
}, false);
this.container.addEventListener('mouseover', function(evt) {
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('mouseout', function(evt) {
@@ -520,18 +486,18 @@ Kinetic.Stage.prototype = {
this.container.addEventListener('touchstart', function(evt) {
evt.preventDefault();
that.touchStart = true;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('touchmove', function(evt) {
evt.preventDefault();
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
this.container.addEventListener('touchend', function(evt) {
evt.preventDefault();
that.touchEnd = true;
that._handleEvent(evt);
that._handleStageEvent(evt);
}, false);
},
/**
@@ -622,23 +588,26 @@ Kinetic.Stage.prototype = {
_prepareDrag: function() {
var that = this;
this.on('mousemove touchmove', function(evt) {
this.onContainer('mousemove touchmove', function(evt) {
var go = Kinetic.GlobalObject;
var node = go.drag.node;
if(node) {
var pos = that.getUserPosition();
var ds = node.dragConstraint;
var dc = node.dragConstraint;
var db = node.dragBounds;
if(ds === 'none' || ds === 'horizontal') {
var m = node.getMatrix().getTranslation();
var am = node.getAbsoluteMatrix().getTranslation();
if(dc === 'none' || dc === 'horizontal') {
var newX = pos.x - go.drag.offset.x;
if((db.left === undefined || db.left < newX) && (db.right === undefined || db.right > newX)) {
node.x = newX;
node.x = newX + m.x - (am.x + go.drag.start.x);
}
}
if(ds === 'none' || ds === 'vertical') {
if(dc === 'none' || dc === 'vertical') {
var newY = pos.y - go.drag.offset.y;
if((db.top === undefined || db.top < newY) && (db.bottom === undefined || db.bottom > newY)) {
node.y = newY;
node.y = newY + m.y - (am.y + go.drag.start.y);
}
}
go.drag.node.getLayer().draw();
@@ -653,7 +622,7 @@ Kinetic.Stage.prototype = {
}
}, false);
this.on('mouseup touchend mouseout', function(evt) {
this.onContainer('mouseup touchend mouseout', function(evt) {
that._endDrag(evt);
});
},
@@ -693,5 +662,6 @@ Kinetic.Stage.prototype = {
this.content.appendChild(this.backstageLayer.canvas);
}
};
// extend Container
// Extend Container and Node
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Container);
Kinetic.GlobalObject.extend(Kinetic.Stage, Kinetic.Node);

275
tests/js/functionalTests.js
View File

@@ -1,6 +1,10 @@
Test.prototype.tests = {
'TRANSITION - transition position and rotation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
@@ -23,7 +27,11 @@ Test.prototype.tests = {
});
},
'TRANSITION - transition position and rotation with two transitions': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 100,
@@ -50,7 +58,11 @@ Test.prototype.tests = {
});
},
'ANIMATION - run animation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -82,7 +94,11 @@ Test.prototype.tests = {
}, 3000);
},
'TRANSITION - hover linear transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -123,7 +139,11 @@ Test.prototype.tests = {
},
'TRANSITION - hover ease-in transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -166,7 +186,11 @@ Test.prototype.tests = {
},
'TRANSITION - hover ease-out transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -209,7 +233,11 @@ Test.prototype.tests = {
},
'TRANSITION - hover ease-in-out transition': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: stage.width / 2 - 50,
@@ -274,7 +302,11 @@ Test.prototype.tests = {
});
});
}
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenBox = new Kinetic.Rect({
x: 50,
@@ -328,7 +360,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -380,7 +416,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - modify fill stroke and stroke width on hover with circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
@@ -409,7 +449,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - modify fill stroke and stroke width on hover with circle with star': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
@@ -444,7 +488,11 @@ Test.prototype.tests = {
'EVENTS - modify fill stroke and stroke width on hover with circle with image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
x: 60,
@@ -472,7 +520,11 @@ Test.prototype.tests = {
imageObj.src = '../darth-vader.jpg';
},
'EVENTS - drag events click': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
@@ -505,7 +557,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - isDragging': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: 380,
@@ -543,7 +599,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redCircle = new Kinetic.Circle({
@@ -583,7 +643,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - move mouse from shape in one group to shape in another group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
@@ -628,7 +692,11 @@ Test.prototype.tests = {
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 stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@@ -670,7 +738,11 @@ Test.prototype.tests = {
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 stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
@@ -709,7 +781,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - group click events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -744,7 +820,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - group mousemove events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -777,7 +857,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - group mouseover events': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
name: 'group'
@@ -817,7 +901,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'EVENTS - cancel event bubbling (only the red circle should fire click event)': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -848,7 +936,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - draggable true': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -865,7 +957,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - draggable true false': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -883,29 +979,38 @@ Test.prototype.tests = {
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);
'DRAG AND DROP - scale and rotate stage after add layer then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
var rect = new Kinetic.Rect({
x: 200,
y: 80,
width: 100,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
strokeWidth: 4,
draggable: true
});
circle.draggable(true);
layer.add(circle);
layer.add(rect);
stage.add(layer);
stage.rotateDeg(20);
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 stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -923,7 +1028,11 @@ Test.prototype.tests = {
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 stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -944,7 +1053,11 @@ Test.prototype.tests = {
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 stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -963,7 +1076,11 @@ Test.prototype.tests = {
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 stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
@@ -994,7 +1111,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop constrianed horiztonally': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1011,7 +1132,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop constrianed vertically': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1028,7 +1153,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1045,7 +1174,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1064,7 +1197,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1083,7 +1220,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1102,7 +1243,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1121,7 +1266,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1143,7 +1292,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 400);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 400
});
// make container scrollable
var container = stage.getContainer();
@@ -1163,4 +1316,32 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scaled group': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
scale: {
x: 1.5,
y: 1.5
}
});
var circle = new Kinetic.Circle({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
group.add(circle);
layer.add(group);
stage.add(layer);
},
};

348
tests/js/unitTests.js
View File

@@ -4,14 +4,26 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'STAGE - instantiate stage with id': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
},
'STAGE - instantiate stage with dom element': function(containerId) {
var containerDom = document.getElementById(containerId);
var stage = new Kinetic.Stage(containerDom, 578, 200);
var stage = new Kinetic.Stage({
container: containerDom,
width: 578,
height: 200
});
},
'STAGE - add shape then stage then layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -30,7 +42,11 @@ Test.prototype.tests = {
layer.draw();
},
'STAGE - add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -49,7 +65,11 @@ Test.prototype.tests = {
layer.draw();
},
'STAGE - scale stage after add layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -68,7 +88,11 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - scale stage before add shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -84,7 +108,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'STAGE - scale stage with no shapes': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
@@ -93,7 +121,11 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - remove layer with shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -115,7 +147,11 @@ Test.prototype.tests = {
test(stage.children.length === 0, 'stage should have 0 children');
},
'STAGE - remove layer with no shapes': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
stage.remove(layer);
@@ -125,12 +161,20 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'LAYERS - add layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
stage.add(layer);
},
'LAYERS - remove all children from layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({
x: stage.width / 2,
@@ -161,7 +205,11 @@ Test.prototype.tests = {
test(layer.children.length === 0, 'layer should have 0 children');
},
'LAYERS - hide layer': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -183,7 +231,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'GROUPS - add group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -201,7 +253,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'GROUPS - hide group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
@@ -221,7 +277,11 @@ Test.prototype.tests = {
layer.draw();
},
'GROUPS - create two groups, move first group': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var greenLayer = new Kinetic.Layer();
var blueLayer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
@@ -275,7 +335,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'SHAPES - add rect': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -304,7 +368,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -332,7 +400,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - set fill after instantiation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -351,7 +423,11 @@ Test.prototype.tests = {
'SHAPES - add image': function(containerId) {
var imageObj = new Image();
imageObj.onload = function() {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({
x: 10,
@@ -376,7 +452,11 @@ Test.prototype.tests = {
imageObj.src = '../darth-vader.jpg';
},
'SHAPES - add polygon': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var points = [{
@@ -420,7 +500,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add regular polygon triangle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -447,7 +531,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add regular polygon square': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -465,7 +553,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add regular polygon pentagon': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -483,7 +575,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add regular polygon octogon': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var poly = new Kinetic.RegularPolygon({
@@ -501,7 +597,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add 5 point star': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var star = new Kinetic.Star({
@@ -533,7 +633,11 @@ Test.prototype.tests = {
//stage.start();
},
'SHAPES - add stroke rect': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -548,7 +652,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - use default stroke': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -564,7 +672,11 @@ Test.prototype.tests = {
test(rect.stroke === 'black', 'stroke should be black');
},
'SHAPES - use default stroke width': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -580,7 +692,11 @@ Test.prototype.tests = {
test(rect.strokeWidth === 2, 'stroke width should be 2');
},
'SHAPES - set center offset after instantiation': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -607,7 +723,11 @@ Test.prototype.tests = {
},
'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function() {
@@ -630,7 +750,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - init with position, scale, rotation, then change scale': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -661,7 +785,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - rotation in degrees': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,
@@ -684,7 +812,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - add text': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
@@ -741,7 +873,11 @@ Test.prototype.tests = {
test(text.getTextStrokeWidth() === 10, 'test stroke width should be 10');
},
'SHAPES - get shape name': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -759,7 +895,11 @@ Test.prototype.tests = {
test(circle.getName() == 'myCircle', 'name should be myCircle');
},
'SHAPES - remove shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -784,7 +924,11 @@ Test.prototype.tests = {
layer.draw();
},
'NODE - test drag and drop properties and methods': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -830,8 +974,48 @@ Test.prototype.tests = {
test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical');
test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200');
},
'NODE - translate, rotate, scale shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Rect({
x: 100,
y: 100,
rotationDeg: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
scale: {
x: 2,
y: 1
},
centerOffset: {
x: 50,
y: 25
}
});
layer.add(circle);
stage.add(layer);
stage.onFrame(function(frame) {
circle.rotation += .1;
layer.draw();
});
//stage.start();
},
'STAGE - add layer then shape': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -848,7 +1032,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - move shape, group, and layer, and then get absolute position': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
@@ -882,7 +1070,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - hide circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -900,7 +1092,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - hide show circle': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -921,7 +1117,11 @@ Test.prototype.tests = {
layer.draw();
},
'SHAPES - set shape alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -937,7 +1137,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - set shape alpha to 0.5 then back to 1': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -960,7 +1164,11 @@ Test.prototype.tests = {
test(circle.getAbsoluteAlpha() === 1, 'abs alpha should be 1');
},
'STAGE - set shape and layer alpha to 0.5': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -980,7 +1188,11 @@ Test.prototype.tests = {
test(layer.getAbsoluteAlpha() === 0.5, 'abs alpha should be 0.5');
},
'SHAPES - scale shape by half': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -996,7 +1208,11 @@ Test.prototype.tests = {
stage.add(layer);
},
'SHAPES - scale shape by half then back to 1': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.width / 2,
@@ -1017,7 +1233,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'LAYERING - move blue circle on top of green circle with moveToTop': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueCircle = new Kinetic.Circle({
@@ -1053,7 +1273,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move green circle below blue circle with moveDown': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var blueCircle = new Kinetic.Circle({
@@ -1089,7 +1313,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move blue group on top of green group with moveToTop': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
var blueGroup = new Kinetic.Group();
@@ -1130,7 +1358,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move blue group on top of green group with moveUp': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenGroup = new Kinetic.Group();
var blueGroup = new Kinetic.Group();
@@ -1171,7 +1403,11 @@ Test.prototype.tests = {
layer.draw();
},
'LAYERING - move blue layer on top of green layer with moveToTop': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var blueLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@@ -1202,7 +1438,11 @@ Test.prototype.tests = {
blueLayer.moveToTop();
},
'LAYERING - move green layer below blue layer with moveToBottom': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var blueLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
@@ -1237,7 +1477,11 @@ Test.prototype.tests = {
////////////////////////////////////////////////////////////////////////
'ANIMATION - stage and global object animation properties': function(containerId) {
var stage = new Kinetic.Stage(containerId, 578, 200);
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 200,