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

Merge remote-tracking branch 'upstream/master' into custom-dragBounds

Browse Source
This commit is contained in:
David Johansson 2012-09-24 00:16:43 +02:00
commit a8cacb28e3
24 changed files with 1247 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -1,5 +1,5 @@
#Building the KineticJS library
To build the library, you need to have Ruby and Rubygems installed. After that, install the dependencies by running `bundle install`.
To build the library, you need to have Ruby and Rubygems installed. After that, run `gem install thor`, `gem install json_pure`, and `gem install uglifier` to install the dependencies.
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"`).

4
Thorfile
View File

@ -4,9 +4,9 @@ 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/Global.js", "src/Transition.js", "src/filters/Grayscale.js",
"src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js",
"src/util/Type.js", "src/util/Canvas.js", "src/util/Tween.js", "src/util/Transform.js", "src/util/Collection.js",
"src/Animation.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/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"
"src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Ellipse.js", "src/shapes/Image.js", "src/shapes/Polygon.js", "src/shapes/Text.js", "src/shapes/Line.js", "src/shapes/Sprite.js", "src/shapes/Star.js", "src/shapes/RegularPolygon.js", "src/shapes/Path.js", "src/shapes/TextPath.js"
]
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."

307
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: Aug 23 2012
* Date: Sep 24 2012
*
* Copyright (C) 2011 - 2012 by Eric Rowell
*
@ -560,15 +560,6 @@ Kinetic.Canvas.prototype = {
this.setWidth(width);
this.setHeight(height);
},
/**
* strip away all functions that draw pixels onto the bitmap
* @name strip
* @methodOf Kinetic.Canvas.prototype
* @param {CanvasContext} context
*/
strip: function() {
var context = this.context;
},
/**
* toDataURL
*/
@ -1038,6 +1029,45 @@ Kinetic.Transform.prototype = {
}
};
/**
* Collection constructor. Collection extends
* Array. This class is used in conjunction with get()
* @constructor
*/
Kinetic.Collection = function() {
var args = [].slice.call( arguments ),
length = args.length, i = 0;
this.length = length;
for (; i < length; i++ ) {
this[ i ] = args[ i ];
}
return this;
}
Kinetic.Collection.prototype = new Array();
/**
* apply a method to all nodes in the array
* @name apply
* @methodOf Kinetic.Collection.prototype
* @param {String} method
* @param val
*/
Kinetic.Collection.prototype.apply = function(method, val) {
for (var n=0; n<this.length; n++) {
this[n][method](val);
}
};
/**
* iterate through node array
* @name each
* @methodOf Kinetic.Collection.prototype
* @param {Function} func
*/
Kinetic.Collection.prototype.each = function(func) {
for (var n=0; n<this.length; n++) {
func(this[n]);
}
};
///////////////////////////////////////////////////////////////////////
// Animation
///////////////////////////////////////////////////////////////////////
@ -1198,7 +1228,7 @@ requestAnimFrame = (function(callback) {
* @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
*/
Kinetic.Node = function(config) {
this._nodeInit(config);
this._nodeInit(config);
};
Kinetic.Node.prototype = {
@ -1228,7 +1258,7 @@ Kinetic.Node.prototype = {
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
@ -1414,6 +1444,16 @@ Kinetic.Node.prototype = {
else {
// handle special keys
switch (key) {
case 'radius':
if(Kinetic.Type._isNumber(val)) {
that._setAttr(obj, key, val);
}
else {
var xy = type._getXY(val);
that._setAttr(obj[key], 'x', xy.x);
that._setAttr(obj[key], 'y', xy.y);
}
break;
case 'rotationDeg':
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
// override key for change event
@ -1682,6 +1722,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.push(this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.appendChild(this.canvas.element);
}
}
},
/**
* move node up
@ -1690,9 +1738,25 @@ Kinetic.Node.prototype = {
*/
moveUp: function() {
var index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
if(index < this.parent.getChildren().length - 1) {
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
if(this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
}
else {
stage.content.appendChild(this.canvas.element);
}
}
}
}
},
/**
* move node down
@ -1705,6 +1769,15 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
var children = stage.getChildren();
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, children[this.index + 1].canvas.element);
}
}
}
},
/**
@ -1714,9 +1787,20 @@ Kinetic.Node.prototype = {
*/
moveToBottom: function() {
var index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.unshift(this);
this.parent._setChildrenIndices();
if(index > 0) {
this.parent.children.splice(index, 1);
this.parent.children.unshift(this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
var children = stage.getChildren();
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, children[1].canvas.element);
}
}
}
},
/**
* set zIndex
@ -2374,6 +2458,7 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
* @name getListening
* @methodOf Kinetic.Node.prototype
*/
///////////////////////////////////////////////////////////////////////
// Container
///////////////////////////////////////////////////////////////////////
@ -2498,8 +2583,8 @@ Kinetic.Container.prototype = {
}
// do extra stuff if needed
if(this._remove !== undefined) {
this._remove(child);
if(child._remove !== undefined) {
child._remove();
}
}
@ -2533,7 +2618,7 @@ Kinetic.Container.prototype = {
return false;
}
var retArr = [];
var retArr = new Kinetic.Collection();
for(var n = 0; n < arr.length; n++) {
var node = arr[n];
if(this.isAncestorOf(node)) {
@ -2565,6 +2650,22 @@ Kinetic.Container.prototype = {
return false;
},
/**
* clone node
* @name clone
* @methodOf Kinetic.Container.prototype
* @param {Object} attrs override attrs
*/
clone: function(obj) {
// call super method
var node = Kinetic.Node.prototype.clone.call(this, obj)
// perform deep clone on containers
for(var key in this.children) {
node.add(this.children[key].clone());
}
return node;
},
/**
* get shapes that intersect a point
* @name getIntersections
@ -2983,13 +3084,11 @@ Kinetic.Stage.prototype = {
*/
for(var n = layers.length - 1; n >= 0; n--) {
var layer = layers[n];
var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
// this indicates that a buffer pixel may have been found
if(p[3] === 255) {
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey];
var isDragging = Kinetic.Global.drag.moving;
return {
shape: shape,
pixel: p
@ -3023,21 +3122,6 @@ Kinetic.Stage.prototype = {
layer.draw();
}
},
/**
* remove layer from stage
* @param {Layer} layer
*/
_remove: function(layer) {
/*
* remove canvas DOM from the document if
* it exists
*/
try {
this.content.removeChild(layer.canvas.element);
}
catch(e) {
}
},
/**
* add layer to stage
* @param {Layer} layer
@ -3239,8 +3323,8 @@ Kinetic.Stage.prototype = {
* @param {Event} evt
*/
_setMousePosition: function(evt) {
var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
var mouseX = evt.clientX - this._getContentPosition().left;
var mouseY = evt.clientY - this._getContentPosition().top;
this.mousePos = {
x: mouseX,
y: mouseY
@ -3251,12 +3335,12 @@ Kinetic.Stage.prototype = {
* @param {Event} evt
*/
_setTouchPosition: function(evt) {
if(evt.touches !== undefined && evt.touches.length === 1) {// Only deal with
if(evt.touches !== undefined && evt.touches.length === 1) {
// one finger
var touch = evt.touches[0];
// Get the information for finger #1
var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
var touchX = touch.clientX - this._getContentPosition().left;
var touchY = touch.clientY - this._getContentPosition().top;
this.touchPos = {
x: touchX,
@ -3268,10 +3352,10 @@ Kinetic.Stage.prototype = {
* get container position
*/
_getContentPosition: function() {
var rect = this.content.getBoundingClientRect(), root = document.documentElement;
var rect = this.content.getBoundingClientRect();
return {
top: rect.top + root.scrollTop,
left: rect.left + root.scrollLeft
top: rect.top,
left: rect.left
};
},
/**
@ -3437,6 +3521,10 @@ Kinetic.Stage.prototype = {
this.touchPos = undefined;
this.tapStart = false;
/*
* ids and names hash needs to be stored at the stage level to prevent
* id and name collisions between multiple stages in the document
*/
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();
@ -3613,6 +3701,24 @@ Kinetic.Layer.prototype = {
clear: function() {
this.getCanvas().clear();
},
/**
* show layer
* @name show
* @methodOf Kinetic.Layer.prototype
*/
show: function() {
Kinetic.Node.prototype.show.call(this);
this.canvas.element.style.display = 'block';
},
/**
* hide layer. Hidden layers are no longer detectable
* @name hide
* @methodOf Kinetic.Layer.prototype
*/
hide: function() {
Kinetic.Node.prototype.hide.call(this);
this.canvas.element.style.display = 'none';
},
/**
* Creates a composite data URL. If MIME type is not
* specified, then "image/png" will result. For "image/jpeg", specify a quality
@ -3644,6 +3750,21 @@ Kinetic.Layer.prototype = {
}
return canvas.toDataURL(mimeType, quality);
},
/**
* remove layer from stage
*/
_remove: function() {
/*
* remove canvas DOM from the document if
* it exists
*/
try {
this.getStage().content.removeChild(this.canvas.element);
}
catch(e) {
Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
}
},
__draw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();
@ -4049,8 +4170,11 @@ Kinetic.Shape.prototype = {
var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear();
this._draw(bufferCanvas);
var obj = stage.getIntersection(pos);
return !!(obj && obj.pixel[3] > 0);
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0;
},
_remove: function() {
delete Kinetic.Global.shapes[this.colorKey];
},
__draw: function(canvas) {
if(this.attrs.drawFunc) {
@ -4333,6 +4457,56 @@ Kinetic.Node.addGettersSetters(Kinetic.Rect, ['width', 'height', 'cornerRadius']
* @methodOf Kinetic.Rect.prototype
*/
///////////////////////////////////////////////////////////////////////
// Circle
///////////////////////////////////////////////////////////////////////
/**
* Circle constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Circle = function(config) {
this._initCircle(config);
};
Kinetic.Circle.prototype = {
_initCircle: function(config) {
this.setDefaultAttrs({
radius: 0
});
this.shapeType = "Circle";
config.drawFunc = this.drawFunc;
// call super constructor
Kinetic.Shape.call(this, config);
},
drawFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
context.closePath();
this.fill(context);
this.stroke(context);
}
};
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
/**
* set radius
* @name setRadius
* @methodOf Kinetic.Circle.prototype
* @param {Number} radius
*/
/**
* get radius
* @name getRadius
* @methodOf Kinetic.Circle.prototype
*/
///////////////////////////////////////////////////////////////////////
// Ellipse
///////////////////////////////////////////////////////////////////////
/**
@ -4359,11 +4533,6 @@ Kinetic.Ellipse.prototype = {
// call super constructor
Kinetic.Shape.call(this, config);
this._convertRadius();
var that = this;
this.on('radiusChange.kinetic', function() {
that._convertRadius();
});
},
drawFunc: function(context) {
var r = this.getRadius();
@ -4377,30 +4546,10 @@ Kinetic.Ellipse.prototype = {
context.closePath();
this.fill(context);
this.stroke(context);
},
/**
* converts numeric radius into an object
*/
_convertRadius: function() {
var type = Kinetic.Type;
var radius = this.getRadius();
// if radius is already an object then return
if(type._isObject(radius)) {
return false;
}
/*
* directly set radius attr to avoid
* duplicate attr change event
*/
this.attrs.radius = type._getXY(radius);
}
};
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
// Circle backwards compatibility
Kinetic.Circle = Kinetic.Ellipse;
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
@ -4408,7 +4557,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
* set radius
* @name setRadius
* @methodOf Kinetic.Ellipse.prototype
* @param {Number|Object|Array} radius
* @param {Object|Array} radius
* radius can be a number, in which the ellipse becomes a circle,
* it can be an object with an x and y component, or it
* can be an array in which the first element is the x component
@ -4795,8 +4944,14 @@ Kinetic.Text.prototype = {
context.translate(0, p + this.getTextHeight() / 2);
// draw text lines
var appliedShadow = this.appliedShadow;
for(var n = 0; n < textArr.length; n++) {
var text = textArr[n];
/*
* need to reset appliedShadow flag so that shadows
* are appropriately applied to each line of text
*/
this.appliedShadow = appliedShadow;
// horizontal alignment
context.save();
@ -5323,6 +5478,8 @@ Kinetic.Sprite.prototype = {
that._updateIndex();
if(that.afterFrameFunc && index === that.afterFrameIndex) {
that.afterFrameFunc();
delete that.afterFrameFunc;
delete that.afterFrameIndex;
}
}, 1000 / this.attrs.frameRate);

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

File diff suppressed because one or more lines are too long

22
src/Container.js
View File

@ -122,8 +122,8 @@ Kinetic.Container.prototype = {
}
// do extra stuff if needed
if(this._remove !== undefined) {
this._remove(child);
if(child._remove !== undefined) {
child._remove();
}
}
@ -157,7 +157,7 @@ Kinetic.Container.prototype = {
return false;
}
var retArr = [];
var retArr = new Kinetic.Collection();
for(var n = 0; n < arr.length; n++) {
var node = arr[n];
if(this.isAncestorOf(node)) {
@ -189,6 +189,22 @@ Kinetic.Container.prototype = {
return false;
},
/**
* clone node
* @name clone
* @methodOf Kinetic.Container.prototype
* @param {Object} attrs override attrs
*/
clone: function(obj) {
// call super method
var node = Kinetic.Node.prototype.clone.call(this, obj)
// perform deep clone on containers
for(var key in this.children) {
node.add(this.children[key].clone());
}
return node;
},
/**
* get shapes that intersect a point
* @name getIntersections

33
src/Layer.js
View File

@ -139,6 +139,24 @@ Kinetic.Layer.prototype = {
clear: function() {
this.getCanvas().clear();
},
/**
* show layer
* @name show
* @methodOf Kinetic.Layer.prototype
*/
show: function() {
Kinetic.Node.prototype.show.call(this);
this.canvas.element.style.display = 'block';
},
/**
* hide layer. Hidden layers are no longer detectable
* @name hide
* @methodOf Kinetic.Layer.prototype
*/
hide: function() {
Kinetic.Node.prototype.hide.call(this);
this.canvas.element.style.display = 'none';
},
/**
* Creates a composite data URL. If MIME type is not
* specified, then "image/png" will result. For "image/jpeg", specify a quality
@ -170,6 +188,21 @@ Kinetic.Layer.prototype = {
}
return canvas.toDataURL(mimeType, quality);
},
/**
* remove layer from stage
*/
_remove: function() {
/*
* remove canvas DOM from the document if
* it exists
*/
try {
this.getStage().content.removeChild(this.canvas.element);
}
catch(e) {
Kinetic.Global.warn('unable to remove layer scene canvas element from the document');
}
},
__draw: function(canvas) {
if(this.attrs.clearBeforeDraw) {
canvas.clear();

72
src/Node.js
View File

@ -33,7 +33,7 @@
* @param {Function} [config.dragBoundFunc] dragBoundFunc(pos, evt) should return new position
*/
Kinetic.Node = function(config) {
this._nodeInit(config);
this._nodeInit(config);
};
Kinetic.Node.prototype = {
@ -63,7 +63,7 @@ Kinetic.Node.prototype = {
this.eventListeners = {};
this.transAnim = new Kinetic.Animation();
this.setAttrs(config);
// bind events
this.on('draggableChange.kinetic', function() {
this._onDraggableChange();
@ -249,6 +249,16 @@ Kinetic.Node.prototype = {
else {
// handle special keys
switch (key) {
case 'radius':
if(Kinetic.Type._isNumber(val)) {
that._setAttr(obj, key, val);
}
else {
var xy = type._getXY(val);
that._setAttr(obj[key], 'x', xy.x);
that._setAttr(obj[key], 'y', xy.y);
}
break;
case 'rotationDeg':
that._setAttr(obj, 'rotation', c[key] * Math.PI / 180);
// override key for change event
@ -517,6 +527,14 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.push(this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
stage.content.appendChild(this.canvas.element);
}
}
},
/**
* move node up
@ -525,9 +543,25 @@ Kinetic.Node.prototype = {
*/
moveUp: function() {
var index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
if(index < this.parent.getChildren().length - 1) {
this.parent.children.splice(index, 1);
this.parent.children.splice(index + 1, 0, this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
stage.content.removeChild(this.canvas.element);
if(this.index < stage.getChildren().length - 1) {
stage.content.insertBefore(this.canvas.element, stage.getChildren()[this.index + 1].canvas.element);
}
else {
stage.content.appendChild(this.canvas.element);
}
}
}
}
},
/**
* move node down
@ -540,6 +574,15 @@ Kinetic.Node.prototype = {
this.parent.children.splice(index, 1);
this.parent.children.splice(index - 1, 0, this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
var children = stage.getChildren();
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, children[this.index + 1].canvas.element);
}
}
}
},
/**
@ -549,9 +592,20 @@ Kinetic.Node.prototype = {
*/
moveToBottom: function() {
var index = this.index;
this.parent.children.splice(index, 1);
this.parent.children.unshift(this);
this.parent._setChildrenIndices();
if(index > 0) {
this.parent.children.splice(index, 1);
this.parent.children.unshift(this);
this.parent._setChildrenIndices();
if(this.nodeType === 'Layer') {
var stage = this.getStage();
if(stage) {
var children = stage.getChildren();
stage.content.removeChild(this.canvas.element);
stage.content.insertBefore(this.canvas.element, children[1].canvas.element);
}
}
}
},
/**
* set zIndex
@ -1208,4 +1262,4 @@ Kinetic.Node.addSetters(Kinetic.Node, ['rotationDeg']);
* determine if listening to events or not
* @name getListening
* @methodOf Kinetic.Node.prototype
*/
*/

7
src/Shape.js
View File

@ -332,8 +332,11 @@ Kinetic.Shape.prototype = {
var bufferCanvas = stage.bufferCanvas;
bufferCanvas.clear();
this._draw(bufferCanvas);
var obj = stage.getIntersection(pos);
return !!(obj && obj.pixel[3] > 0);
var p = bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
return p[3] > 0;
},
_remove: function() {
delete Kinetic.Global.shapes[this.colorKey];
},
__draw: function(canvas) {
if(this.attrs.drawFunc) {

39
src/Stage.js
View File

@ -364,13 +364,11 @@ Kinetic.Stage.prototype = {
*/
for(var n = layers.length - 1; n >= 0; n--) {
var layer = layers[n];
var p = layer.bufferCanvas.context.getImageData(pos.x, pos.y, 1, 1).data;
var p = layer.bufferCanvas.context.getImageData(Math.round(pos.x), Math.round(pos.y), 1, 1).data;
// this indicates that a buffer pixel may have been found
if(p[3] === 255) {
var colorKey = Kinetic.Type._rgbToHex(p[0], p[1], p[2]);
shape = Kinetic.Global.shapes[colorKey];
var isDragging = Kinetic.Global.drag.moving;
return {
shape: shape,
pixel: p
@ -404,21 +402,6 @@ Kinetic.Stage.prototype = {
layer.draw();
}
},
/**
* remove layer from stage
* @param {Layer} layer
*/
_remove: function(layer) {
/*
* remove canvas DOM from the document if
* it exists
*/
try {
this.content.removeChild(layer.canvas.element);
}
catch(e) {
}
},
/**
* add layer to stage
* @param {Layer} layer
@ -620,8 +603,8 @@ Kinetic.Stage.prototype = {
* @param {Event} evt
*/
_setMousePosition: function(evt) {
var mouseX = evt.offsetX || (evt.clientX - this._getContentPosition().left + window.pageXOffset);
var mouseY = evt.offsetY || (evt.clientY - this._getContentPosition().top + window.pageYOffset);
var mouseX = evt.clientX - this._getContentPosition().left;
var mouseY = evt.clientY - this._getContentPosition().top;
this.mousePos = {
x: mouseX,
y: mouseY
@ -632,12 +615,12 @@ Kinetic.Stage.prototype = {
* @param {Event} evt
*/
_setTouchPosition: function(evt) {
if(evt.touches !== undefined && evt.touches.length === 1) {// Only deal with
if(evt.touches !== undefined && evt.touches.length === 1) {
// one finger
var touch = evt.touches[0];
// Get the information for finger #1
var touchX = touch.clientX - this._getContentPosition().left + window.pageXOffset;
var touchY = touch.clientY - this._getContentPosition().top + window.pageYOffset;
var touchX = touch.clientX - this._getContentPosition().left;
var touchY = touch.clientY - this._getContentPosition().top;
this.touchPos = {
x: touchX,
@ -649,10 +632,10 @@ Kinetic.Stage.prototype = {
* get container position
*/
_getContentPosition: function() {
var rect = this.content.getBoundingClientRect(), root = document.documentElement;
var rect = this.content.getBoundingClientRect();
return {
top: rect.top + root.scrollTop,
left: rect.left + root.scrollLeft
top: rect.top,
left: rect.left
};
},
/**
@ -818,6 +801,10 @@ Kinetic.Stage.prototype = {
this.touchPos = undefined;
this.tapStart = false;
/*
* ids and names hash needs to be stored at the stage level to prevent
* id and name collisions between multiple stages in the document
*/
this.ids = {};
this.names = {};
this.dragAnim = new Kinetic.Animation();

50
src/shapes/Circle.js Normal file
View File

@ -0,0 +1,50 @@
///////////////////////////////////////////////////////////////////////
// Circle
///////////////////////////////////////////////////////////////////////
/**
* Circle constructor
* @constructor
* @augments Kinetic.Shape
* @param {Object} config
*/
Kinetic.Circle = function(config) {
this._initCircle(config);
};
Kinetic.Circle.prototype = {
_initCircle: function(config) {
this.setDefaultAttrs({
radius: 0
});
this.shapeType = "Circle";
config.drawFunc = this.drawFunc;
// call super constructor
Kinetic.Shape.call(this, config);
},
drawFunc: function(context) {
context.beginPath();
context.arc(0, 0, this.getRadius(), 0, Math.PI * 2, true);
context.closePath();
this.fill(context);
this.stroke(context);
}
};
Kinetic.Global.extend(Kinetic.Circle, Kinetic.Shape);
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Circle, ['radius']);
/**
* set radius
* @name setRadius
* @methodOf Kinetic.Circle.prototype
* @param {Number} radius
*/
/**
* get radius
* @name getRadius
* @methodOf Kinetic.Circle.prototype
*/

27
src/shapes/Ellipse.js
View File

@ -25,11 +25,6 @@ Kinetic.Ellipse.prototype = {
// call super constructor
Kinetic.Shape.call(this, config);
this._convertRadius();
var that = this;
this.on('radiusChange.kinetic', function() {
that._convertRadius();
});
},
drawFunc: function(context) {
var r = this.getRadius();
@ -43,30 +38,10 @@ Kinetic.Ellipse.prototype = {
context.closePath();
this.fill(context);
this.stroke(context);
},
/**
* converts numeric radius into an object
*/
_convertRadius: function() {
var type = Kinetic.Type;
var radius = this.getRadius();
// if radius is already an object then return
if(type._isObject(radius)) {
return false;
}
/*
* directly set radius attr to avoid
* duplicate attr change event
*/
this.attrs.radius = type._getXY(radius);
}
};
Kinetic.Global.extend(Kinetic.Ellipse, Kinetic.Shape);
// Circle backwards compatibility
Kinetic.Circle = Kinetic.Ellipse;
// add getters setters
Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
@ -74,7 +49,7 @@ Kinetic.Node.addGettersSetters(Kinetic.Ellipse, ['radius']);
* set radius
* @name setRadius
* @methodOf Kinetic.Ellipse.prototype
* @param {Number|Object|Array} radius
* @param {Object|Array} radius
* radius can be a number, in which the ellipse becomes a circle,
* it can be an object with an x and y component, or it
* can be an array in which the first element is the x component

2
src/shapes/Sprite.js
View File

@ -70,6 +70,8 @@ Kinetic.Sprite.prototype = {
that._updateIndex();
if(that.afterFrameFunc && index === that.afterFrameIndex) {
that.afterFrameFunc();
delete that.afterFrameFunc;
delete that.afterFrameIndex;
}
}, 1000 / this.attrs.frameRate);

6
src/shapes/Text.js
View File

@ -85,8 +85,14 @@ Kinetic.Text.prototype = {
context.translate(0, p + this.getTextHeight() / 2);
// draw text lines
var appliedShadow = this.appliedShadow;
for(var n = 0; n < textArr.length; n++) {
var text = textArr[n];
/*
* need to reset appliedShadow flag so that shadows
* are appropriately applied to each line of text
*/
this.appliedShadow = appliedShadow;
// horizontal alignment
context.save();

9
src/util/Canvas.js
View File

@ -84,15 +84,6 @@ Kinetic.Canvas.prototype = {
this.setWidth(width);
this.setHeight(height);
},
/**
* strip away all functions that draw pixels onto the bitmap
* @name strip
* @methodOf Kinetic.Canvas.prototype
* @param {CanvasContext} context
*/
strip: function() {
var context = this.context;
},
/**
* toDataURL
*/

62
src/util/Class.js
View File

@ -1,62 +0,0 @@
///////////////////////////////////////////////////////////////////////
// Class
///////////////////////////////////////////////////////////////////////
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function() {
var initializing = false;
// The base Class implementation (does nothing)
Kinetic.Class = function() {
};
// Create a new Class that inherits from this class
Kinetic.Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for(var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" ? (function(name, fn) {
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, arguments);
this._super = tmp;
return ret;
};
})(name, prop[name]) : prop[name];
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if(!initializing && this.init)
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();

39
src/util/Collection.js Normal file
View File

@ -0,0 +1,39 @@
/**
* Collection constructor. Collection extends
* Array. This class is used in conjunction with get()
* @constructor
*/
Kinetic.Collection = function() {
var args = [].slice.call( arguments ),
length = args.length, i = 0;
this.length = length;
for (; i < length; i++ ) {
this[ i ] = args[ i ];
}
return this;
}
Kinetic.Collection.prototype = new Array();
/**
* apply a method to all nodes in the array
* @name apply
* @methodOf Kinetic.Collection.prototype
* @param {String} method
* @param val
*/
Kinetic.Collection.prototype.apply = function(method, val) {
for (var n=0; n<this.length; n++) {
this[n][method](val);
}
};
/**
* iterate through node array
* @name each
* @methodOf Kinetic.Collection.prototype
* @param {Function} func
*/
Kinetic.Collection.prototype.each = function(func) {
for (var n=0; n<this.length; n++) {
func(this[n]);
}
};

11
tests/assets/unitDataUrls.js
View File

File diff suppressed because one or more lines are too long

85
tests/html/special/stageBelowFold.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
#container {
margin-top: 600px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../../../dist/kinetic-core.js"></script>
<script src="../../js/Test.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
circle.on('mousedown', function() {
log('mousedown');
});
circle.on('mouseup', function() {
log('mouseup');
});
circle.on('mouseover', function() {
log('mouseover');
});
circle.on('mouseout', function() {
log('mouseout');
});
circle.on('mousemove', function() {
log('mousemove');
});
circle.on('click', function() {
log('click');
});
circle.on('dblclick', function() {
log('dblclick');
});
/*
* mobile
*/
circle.on('touchstart', function() {
log('touchstart');
});
circle.on('touchend', function() {
log('touchend');
});
circle.on('touchmove', function() {
log('touchmove');
});
circle.on('tap', function(evt) {
log('tap');
});
circle.on('dbltap', function() {
log('dbltap');
});
layer.add(circle);
stage.add(layer);
</script>
</body>
</html>

83
tests/html/special/tallStage.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="container"></div>
<script src="../../../dist/kinetic-core.js"></script>
<script src="../../js/Test.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 2000
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: 1800,
radius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
circle.on('mousedown', function() {
log('mousedown');
});
circle.on('mouseup', function() {
log('mouseup');
});
circle.on('mouseover', function() {
log('mouseover');
});
circle.on('mouseout', function() {
log('mouseout');
});
circle.on('mousemove', function() {
log('mousemove');
});
circle.on('click', function() {
log('click');
});
circle.on('dblclick', function() {
log('dblclick');
});
/*
* mobile
*/
circle.on('touchstart', function() {
log('touchstart');
});
circle.on('touchend', function() {
log('touchend');
});
circle.on('touchmove', function() {
log('touchmove');
});
circle.on('tap', function(evt) {
log('tap');
});
circle.on('dbltap', function() {
log('dbltap');
});
layer.add(circle);
stage.add(layer);
</script>
</body>
</html>

4
tests/html/unitTests.html
View File

@ -13,6 +13,10 @@
window.onload = function() {
var test = new Test();
test.run();
document.getElementsByTagName('body')[0].addEventListener('mousemove', function(evt) {
//console.log(evt.clientX + ',' + evt.clientY);
}, false);
};
</script>
</head>

34
tests/js/functionalTests.js
View File

@ -9,7 +9,7 @@ Test.prototype.tests = {
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
@ -82,7 +82,7 @@ Test.prototype.tests = {
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: 380,
y: 100,
radius: 70,
@ -158,14 +158,14 @@ Test.prototype.tests = {
draggable: true
});
var circle1 = new Kinetic.Ellipse({
var circle1 = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
var circle2 = new Kinetic.Ellipse({
var circle2 = new Kinetic.Circle({
x: 400,
y: stage.getHeight() / 2,
radius: 70,
@ -213,7 +213,7 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer({
throttle: 999
});
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
@ -270,7 +270,7 @@ Test.prototype.tests = {
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -547,7 +547,7 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var redCircle = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
@ -557,7 +557,7 @@ Test.prototype.tests = {
name: 'red'
});
var greenCircle = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 40,
@ -635,7 +635,7 @@ Test.prototype.tests = {
var groupMouseovers = 0;
var groupMouseouts = 0;
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
@ -645,7 +645,7 @@ Test.prototype.tests = {
name: 'red'
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 40,
@ -665,28 +665,28 @@ Test.prototype.tests = {
console.log('group out')
});
redEllipse.on('mouseover', function() {
redCircle.on('mouseover', function() {
redMouseovers++;
console.log('red over')
});
redEllipse.on('mouseout', function() {
redCircle.on('mouseout', function() {
redMouseouts++;
console.log('red out')
});
greenEllipse.on('mouseover', function() {
greenCircle.on('mouseover', function() {
greenMouseovers++;
console.log('green over')
});
greenEllipse.on('mouseout', function() {
greenCircle.on('mouseout', function() {
greenMouseouts++;
console.log('green out')
});
group.add(redEllipse);
group.add(greenEllipse);
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
@ -777,7 +777,7 @@ Test.prototype.tests = {
throttle: 999
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,

266
tests/js/manualTests.js
View File

@ -6,7 +6,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Ellipse({
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -14,7 +14,7 @@ Test.prototype.tests = {
stroke: 'black',
strokeWidth: 4
});
circle.on('mousedown', function() {
log('mousedown');
});
@ -67,8 +67,6 @@ Test.prototype.tests = {
layer.add(circle);
stage.add(layer);
document.body.appendChild(layer.bufferCanvas.element)
},
'TRANSITION - transition position and rotation': function(containerId) {
var stage = new Kinetic.Stage({
@ -373,7 +371,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: 380,
y: stage.getHeight() / 2,
radius: 70,
@ -382,25 +380,25 @@ Test.prototype.tests = {
stroke: 'black'
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
Ellipse.on('dragstart', function() {
Circle.on('dragstart', function() {
log('dragstart');
});
Ellipse.on('dragmove', function() {
Circle.on('dragmove', function() {
log('dragmove');
});
Ellipse.on('dragend', function() {
Circle.on('dragend', function() {
log('dragend');
});
Ellipse.on('click', function() {
Circle.on('click', function() {
log('click');
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'EVENTS - move mouse from shape to another shape in same layer': function(containerId) {
@ -411,7 +409,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@ -420,13 +418,13 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mouseover', function() {
log('mouseover red Ellipse');
redCircle.on('mouseover', function() {
log('mouseover red Circle');
});
redEllipse.on('mouseout', function() {
log('mouseout red Ellipse');
redCircle.on('mouseout', function() {
log('mouseout red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@ -435,19 +433,19 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mouseover', function() {
log('mouseover green Ellipse');
greenCircle.on('mouseover', function() {
log('mouseover green Circle');
});
greenEllipse.on('mouseout', function() {
log('mouseout green Ellipse');
greenCircle.on('mouseout', function() {
log('mouseout green Circle');
});
layer.add(redEllipse);
layer.add(greenEllipse);
layer.add(redCircle);
layer.add(greenCircle);
stage.add(layer);
//greenEllipse.hide();
//greenCircle.hide();
layer.draw();
//document.body.appendChild(layer.bufferCanvas.element);
@ -462,7 +460,7 @@ Test.prototype.tests = {
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@ -471,13 +469,13 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mouseover', function() {
log('mouseover red Ellipse');
redCircle.on('mouseover', function() {
log('mouseover red Circle');
});
redEllipse.on('mouseout', function() {
log('mouseout red Ellipse');
redCircle.on('mouseout', function() {
log('mouseout red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@ -486,15 +484,15 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mouseover', function() {
log('mouseover green Ellipse');
greenCircle.on('mouseover', function() {
log('mouseover green Circle');
});
greenEllipse.on('mouseout', function() {
log('mouseout green Ellipse');
greenCircle.on('mouseout', function() {
log('mouseout green Circle');
});
redGroup.add(redEllipse);
greenGroup.add(greenEllipse);
redGroup.add(redCircle);
greenGroup.add(greenCircle);
layer.add(redGroup);
layer.add(greenGroup);
@ -510,7 +508,7 @@ Test.prototype.tests = {
var redLayer = new Kinetic.Layer();
var greenLayer = new Kinetic.Layer();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@ -519,13 +517,13 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mouseover', function() {
log('mouseover red Ellipse');
redCircle.on('mouseover', function() {
log('mouseover red Circle');
});
redEllipse.on('mouseout', function() {
log('mouseout red Ellipse');
redCircle.on('mouseout', function() {
log('mouseout red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@ -534,15 +532,15 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mouseover', function() {
log('mouseover green Ellipse');
greenCircle.on('mouseover', function() {
log('mouseover green Circle');
});
greenEllipse.on('mouseout', function() {
log('mouseout green Ellipse');
greenCircle.on('mouseout', function() {
log('mouseout green Circle');
});
redLayer.add(redEllipse);
greenLayer.add(greenEllipse);
redLayer.add(redCircle);
greenLayer.add(greenCircle);
stage.add(redLayer);
stage.add(greenLayer);
@ -557,7 +555,7 @@ Test.prototype.tests = {
var redGroup = new Kinetic.Group();
var greenGroup = new Kinetic.Group();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 200,
y: stage.getHeight() / 2,
radius: 70,
@ -566,10 +564,10 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('mousemove', function() {
log('mousemove red Ellipse');
redCircle.on('mousemove', function() {
log('mousemove red Circle');
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: 280,
y: stage.getHeight() / 2,
radius: 70,
@ -578,12 +576,12 @@ Test.prototype.tests = {
stroke: 'black'
});
greenEllipse.on('mousemove', function() {
log('mousemove green Ellipse');
greenCircle.on('mousemove', function() {
log('mousemove green Circle');
});
redGroup.add(redEllipse);
greenGroup.add(greenEllipse);
redGroup.add(redCircle);
greenGroup.add(greenCircle);
layer.add(redGroup);
layer.add(greenGroup);
@ -603,7 +601,7 @@ Test.prototype.tests = {
log('mousemove group');
//console.log(this);
});
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
@ -612,7 +610,7 @@ Test.prototype.tests = {
stroke: 'black'
});
var greenEllipse = new Kinetic.Ellipse({
var greenCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 40,
@ -621,13 +619,13 @@ Test.prototype.tests = {
stroke: 'black'
});
group.add(redEllipse);
group.add(greenEllipse);
group.add(redCircle);
group.add(greenCircle);
layer.add(group);
stage.add(layer);
},
'EVENTS - cancel event bubbling (only the red Ellipse should fire click event)': function(containerId) {
'EVENTS - cancel event bubbling (only the red Circle should fire click event)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -644,7 +642,7 @@ Test.prototype.tests = {
log('click group');
//console.log(this);
});
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
@ -653,12 +651,12 @@ Test.prototype.tests = {
stroke: 'black'
});
redEllipse.on('click', function(evt) {
log('click red Ellipse');
redCircle.on('click', function(evt) {
log('click red Circle');
evt.cancelBubble = true;
});
group.add(redEllipse);
group.add(redCircle);
layer.add(group);
stage.add(layer);
},
@ -675,17 +673,17 @@ Test.prototype.tests = {
log(evt.shape.getName());
});
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
name: 'Ellipse'
name: 'Circle'
});
group.add(redEllipse);
group.add(redCircle);
layer.add(group);
stage.add(layer);
},
@ -697,21 +695,21 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var redEllipse = new Kinetic.Ellipse({
var redCircle = new Kinetic.Circle({
x: 550,
y: stage.getHeight() / 2,
radius: 80,
strokeWidth: 4,
fill: 'red',
stroke: 'black',
name: 'Ellipse'
name: 'Circle'
});
redEllipse.on('mouseout', function() {
redCircle.on('mouseout', function() {
log('mouseout');
});
layer.add(redEllipse);
layer.add(redCircle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
@ -793,7 +791,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -802,9 +800,9 @@ Test.prototype.tests = {
strokeWidth: 4,
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
var Ellipse2 = new Kinetic.Ellipse({
var Circle2 = new Kinetic.Circle({
x: 350,
y: stage.getHeight() / 2,
radius: 70,
@ -815,15 +813,15 @@ Test.prototype.tests = {
});
/*
Ellipse.on('dragend', function() {
Ellipse.savePixels();
Circle.on('dragend', function() {
Circle.savePixels();
});
*/
layer.add(Ellipse).add(Ellipse2);
layer.add(Circle).add(Circle2);
stage.add(layer);
//Ellipse.savePixels();
//Circle.savePixels();
},
'DRAG AND DROP - drag and drop stage': function(containerId) {
var stage = new Kinetic.Stage({
@ -846,7 +844,7 @@ Test.prototype.tests = {
}
*/
});
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -876,7 +874,7 @@ Test.prototype.tests = {
});
*/
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - draggable true false': function(containerId) {
@ -886,7 +884,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -895,12 +893,12 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
Ellipse.setDraggable(false);
Circle.setDraggable(false);
},
'DRAG AND DROP - scale and rotate stage after add layer then drag and drop shape': function(containerId) {
var stage = new Kinetic.Stage({
@ -941,7 +939,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -950,10 +948,10 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
stage.setScale(0.5);
layer.add(Ellipse);
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) {
@ -963,7 +961,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -972,9 +970,9 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
stage.setScale(1.5);
@ -988,7 +986,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -997,21 +995,21 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.setDraggable(true);
Circle.setDraggable(true);
stage.setScale(1.5);
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - check that green events are ignored when dragging red Ellipse': function(containerId) {
'DRAG AND DROP - check that green events are ignored when dragging red Circle': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse1 = new Kinetic.Ellipse({
var Circle1 = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1020,7 +1018,7 @@ Test.prototype.tests = {
strokeWidth: 4
});
var Ellipse2 = new Kinetic.Ellipse({
var Circle2 = new Kinetic.Circle({
x: stage.getWidth() / 2 + 50,
y: stage.getHeight() / 2,
radius: 70,
@ -1029,14 +1027,14 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse1.setDraggable(true);
Circle1.setDraggable(true);
Ellipse2.on('mouseover', function() {
log('mouseover green Ellipse');
Circle2.on('mouseover', function() {
log('mouseover green Circle');
});
layer.add(Ellipse1);
layer.add(Ellipse2);
layer.add(Circle1);
layer.add(Circle2);
stage.add(layer);
},
'DRAG AND DROP - drag and drop constrianed horiztontally inside positioned group': function(containerId) {
@ -1050,7 +1048,7 @@ Test.prototype.tests = {
x: 0,
y: 10
});
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1061,7 +1059,7 @@ Test.prototype.tests = {
dragConstraint: 'horizontal'
});
group.add(Ellipse);
group.add(Circle);
layer.add(group);
stage.add(layer);
},
@ -1072,7 +1070,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1083,7 +1081,7 @@ Test.prototype.tests = {
dragConstraint: 'vertical'
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with explicit no constraint': function(containerId) {
@ -1093,7 +1091,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1104,7 +1102,7 @@ Test.prototype.tests = {
dragConstraint: 'none'
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with left bounds': function(containerId) {
@ -1114,7 +1112,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1127,7 +1125,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with right bounds': function(containerId) {
@ -1137,7 +1135,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1150,7 +1148,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with top bounds': function(containerId) {
@ -1160,7 +1158,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1173,7 +1171,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with bottom bounds': function(containerId) {
@ -1183,7 +1181,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1196,7 +1194,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop with full rect bounds': function(containerId) {
@ -1206,7 +1204,7 @@ Test.prototype.tests = {
height: 200
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1222,7 +1220,7 @@ Test.prototype.tests = {
}
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scrollable div': function(containerId) {
@ -1237,7 +1235,7 @@ Test.prototype.tests = {
container.style.overflow = 'auto';
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: 100,
radius: 50,
@ -1247,7 +1245,7 @@ Test.prototype.tests = {
draggable: true
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'DRAG AND DROP - drag and drop shape inside scaled group': function(containerId) {
@ -1264,7 +1262,7 @@ Test.prototype.tests = {
}
});
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: 40,
y: 40,
radius: 70,
@ -1274,7 +1272,7 @@ Test.prototype.tests = {
draggable: true
});
group.add(Ellipse);
group.add(Circle);
layer.add(group);
stage.add(layer);
},
@ -1446,7 +1444,7 @@ Test.prototype.tests = {
stage.draw();
},
'STAGE - save image as png (click on Ellipse to open new window)': function(containerId) {
'STAGE - save image as png (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1454,7 +1452,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1463,14 +1461,14 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.on('click', function() {
Circle.on('click', function() {
window.open(layer.toDataURL());
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'STAGE - save image as low quality jpg (click on Ellipse to open new window)': function(containerId) {
'STAGE - save image as low quality jpg (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1478,7 +1476,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1487,14 +1485,14 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.on('click', function() {
Circle.on('click', function() {
window.open(layer.toDataURL('image/jpeg', 0));
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
},
'STAGE - save image as high quality jpg (click on Ellipse to open new window)': function(containerId) {
'STAGE - save image as high quality jpg (click on Circle to open new window)': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
@ -1502,7 +1500,7 @@ Test.prototype.tests = {
});
var layer = new Kinetic.Layer();
var Ellipse = new Kinetic.Ellipse({
var Circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
@ -1511,11 +1509,11 @@ Test.prototype.tests = {
strokeWidth: 4
});
Ellipse.on('click', function() {
Circle.on('click', function() {
window.open(layer.toDataURL('image/jpeg', 1));
});
layer.add(Ellipse);
layer.add(Circle);
stage.add(layer);
}
};

2
tests/js/performanceTests.js
View File

@ -1,5 +1,5 @@
Test.prototype.tests = {
'*DRAWING - draw rect': function(containerId) {
'DRAWING - draw rect': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,

605
tests/js/unitTests.js
View File

File diff suppressed because it is too large Load Diff