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

first phase of new attrs architecture to better represent Node states

Browse Source
This commit is contained in:
Eric Rowell 2012-04-05 23:48:58 -07:00
parent 15bd27562e
commit 6d618b97b5
15 changed files with 833 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

589
dist/kinetic-core.js vendored
View File

File diff suppressed because it is too large Load Diff

8
src/Container.js
View File

@ -44,8 +44,8 @@ Kinetic.Container.prototype = {
*/ */
_remove: function(child) { _remove: function(child) {
if(this.children[child.index].id == child.id) { if(this.children[child.index].id == child.id) {
if(child.name !== undefined) { if(child.attrs.name !== undefined) {
this.childrenNames[child.name] = undefined; this.childrenNames[child.attrs.name] = undefined;
} }
this.children.splice(child.index, 1); this.children.splice(child.index, 1);
@ -73,8 +73,8 @@ Kinetic.Container.prototype = {
* @param {Node} child * @param {Node} child
*/ */
_add: function(child) { _add: function(child) {
if(child.name) { if(child.attrs.name) {
this.childrenNames[child.name] = child; this.childrenNames[child.attrs.name] = child;
} }
child.id = Kinetic.GlobalObject.idCounter++; child.id = Kinetic.GlobalObject.idCounter++;
child.index = this.children.length; child.index = this.children.length;

7
src/Group.js
View File

@ -11,10 +11,7 @@
*/ */
Kinetic.Group = function(config) { Kinetic.Group = function(config) {
this.nodeType = 'Group'; this.nodeType = 'Group';
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, []);
// call super constructors // call super constructors
Kinetic.Container.apply(this, []); Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]); Kinetic.Node.apply(this, [config]);
@ -41,7 +38,7 @@ Kinetic.Group.prototype = {
* draw children * draw children
*/ */
_draw: function() { _draw: function() {
if(this.visible) { if(this.attrs.visible) {
this._drawChildren(); this._drawChildren();
} }
} }

5
src/Layer.js
View File

@ -15,9 +15,6 @@ Kinetic.Layer = function(config) {
this.context = this.canvas.getContext('2d'); this.context = this.canvas.getContext('2d');
this.canvas.style.position = 'absolute'; this.canvas.style.position = 'absolute';
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, []);
// call super constructors // call super constructors
Kinetic.Container.apply(this, []); Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]); Kinetic.Node.apply(this, [config]);
@ -76,7 +73,7 @@ Kinetic.Layer.prototype = {
*/ */
_draw: function() { _draw: function() {
this.clear(); this.clear();
if(this.visible) { if(this.attrs.visible) {
this._drawChildren(); this._drawChildren();
} }
} }

136
src/Node.js
View File

@ -9,25 +9,30 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Node = function(config) { Kinetic.Node = function(config) {
this.visible = true; // default attrs
this._listening = true; if(this.attrs === undefined) {
this.name = undefined; this.attrs = {};
this.alpha = 1; }
this.x = 0; this.attrs.visible = true;
this.y = 0; this.attrs.listening = true;
this.scale = { this.attrs.name = undefined;
this.attrs.alpha = 1;
this.attrs.x = 0;
this.attrs.y = 0;
this.attrs.scale = {
x: 1, x: 1,
y: 1 y: 1
}; };
this.rotation = 0; this.attrs.rotation = 0;
this.centerOffset = { this.attrs.centerOffset = {
x: 0, x: 0,
y: 0 y: 0
}; };
this.attrs.dragConstraint = 'none';
this.attrs.dragBounds = {};
this.attrs.draggable = false;
this.eventListeners = {}; this.eventListeners = {};
this.dragConstraint = 'none';
this.dragBounds = {};
this._draggable = false;
// set properties from config // set properties from config
if(config) { if(config) {
@ -41,25 +46,26 @@ Kinetic.Node = function(config) {
this.listen(config[key]); this.listen(config[key]);
break; break;
case 'rotationDeg': case 'rotationDeg':
this.rotation = config[key] * Math.PI / 180; this.attrs.rotation = config[key] * Math.PI / 180;
break;
case 'drawFunc':
break;
case 'image':
break; break;
default: default:
this[key] = config[key]; this.attrs[key] = config[key];
break; break;
} }
} }
} }
// overrides // overrides
if(this.centerOffset.x === undefined) { if(this.attrs.centerOffset.x === undefined) {
this.centerOffset.x = 0; this.attrs.centerOffset.x = 0;
} }
if(this.centerOffset.y === undefined) { if(this.attrs.centerOffset.y === undefined) {
this.centerOffset.y = 0; this.attrs.centerOffset.y = 0;
} }
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['alpha', 'centerOffset', 'dragBounds', 'dragConstraint', '_draggable', '_listening', 'name', 'nodeType', 'rotation', 'scale', 'visible', 'x', 'y']);
}; };
/* /*
* Node methods * Node methods
@ -138,13 +144,13 @@ Kinetic.Node.prototype = {
* show node * show node
*/ */
show: function() { show: function() {
this.visible = true; this.attrs.visible = true;
}, },
/** /**
* hide node * hide node
*/ */
hide: function() { hide: function() {
this.visible = false; this.attrs.visible = false;
}, },
/** /**
* get zIndex * get zIndex
@ -206,19 +212,19 @@ Kinetic.Node.prototype = {
*/ */
setScale: function(scaleX, scaleY) { setScale: function(scaleX, scaleY) {
if(scaleY) { if(scaleY) {
this.scale.x = scaleX; this.attrs.scale.x = scaleX;
this.scale.y = scaleY; this.attrs.scale.y = scaleY;
} }
else { else {
this.scale.x = scaleX; this.attrs.scale.x = scaleX;
this.scale.y = scaleX; this.attrs.scale.y = scaleX;
} }
}, },
/** /**
* get scale * get scale
*/ */
getScale: function() { getScale: function() {
return this.scale; return this.attrs.scale;
}, },
/** /**
* set node position * set node position
@ -226,16 +232,16 @@ Kinetic.Node.prototype = {
* @param {Number} y * @param {Number} y
*/ */
setPosition: function(x, y) { setPosition: function(x, y) {
this.x = x; this.attrs.x = x;
this.y = y; this.attrs.y = y;
}, },
/** /**
* get node position relative to container * get node position relative to container
*/ */
getPosition: function() { getPosition: function() {
return { return {
x: this.x, x: this.attrs.x,
y: this.y y: this.attrs.y
}; };
}, },
/** /**
@ -250,55 +256,55 @@ Kinetic.Node.prototype = {
* @param {Number} y * @param {Number} y
*/ */
move: function(x, y) { move: function(x, y) {
this.x += x; this.attrs.x += x;
this.y += y; this.attrs.y += y;
}, },
/** /**
* set node rotation in radians * set node rotation in radians
* @param {Number} theta * @param {Number} theta
*/ */
setRotation: function(theta) { setRotation: function(theta) {
this.rotation = theta; this.attrs.rotation = theta;
}, },
/** /**
* set node rotation in degrees * set node rotation in degrees
* @param {Number} deg * @param {Number} deg
*/ */
setRotationDeg: function(deg) { setRotationDeg: function(deg) {
this.rotation = (deg * Math.PI / 180); this.attrs.rotation = (deg * Math.PI / 180);
}, },
/** /**
* get rotation in radians * get rotation in radians
*/ */
getRotation: function() { getRotation: function() {
return this.rotation; return this.attrs.rotation;
}, },
/** /**
* get rotation in degrees * get rotation in degrees
*/ */
getRotationDeg: function() { getRotationDeg: function() {
return this.rotation * 180 / Math.PI; return this.attrs.rotation * 180 / Math.PI;
}, },
/** /**
* rotate node by an amount in radians * rotate node by an amount in radians
* @param {Number} theta * @param {Number} theta
*/ */
rotate: function(theta) { rotate: function(theta) {
this.rotation += theta; this.attrs.rotation += theta;
}, },
/** /**
* rotate node by an amount in degrees * rotate node by an amount in degrees
* @param {Number} deg * @param {Number} deg
*/ */
rotateDeg: function(deg) { rotateDeg: function(deg) {
this.rotation += (deg * Math.PI / 180); this.attrs.rotation += (deg * Math.PI / 180);
}, },
/** /**
* listen or don't listen to events * listen or don't listen to events
* @param {Boolean} listening * @param {Boolean} listening
*/ */
listen: function(listening) { listen: function(listening) {
this._listening = listening; this.attrs.listening = listening;
}, },
/** /**
* move node to top * move node to top
@ -355,7 +361,7 @@ Kinetic.Node.prototype = {
* @param {Object} alpha * @param {Object} alpha
*/ */
setAlpha: function(alpha) { setAlpha: function(alpha) {
this.alpha = alpha; this.attrs.alpha = alpha;
}, },
/** /**
* get alpha. Alpha values range from 0 to 1. * get alpha. Alpha values range from 0 to 1.
@ -363,7 +369,7 @@ Kinetic.Node.prototype = {
* with an alpha of 1 is fully opaque * with an alpha of 1 is fully opaque
*/ */
getAlpha: function() { getAlpha: function() {
return this.alpha; return this.attrs.alpha;
}, },
/** /**
* get absolute alpha * get absolute alpha
@ -373,7 +379,7 @@ Kinetic.Node.prototype = {
var node = this; var node = this;
// traverse upwards // traverse upwards
while(node.nodeType !== 'Stage') { while(node.nodeType !== 'Stage') {
absAlpha *= node.alpha; absAlpha *= node.attrs.alpha;
node = node.parent; node = node.parent;
} }
return absAlpha; return absAlpha;
@ -383,14 +389,14 @@ Kinetic.Node.prototype = {
* @param {Boolean} isDraggable * @param {Boolean} isDraggable
*/ */
draggable: function(isDraggable) { draggable: function(isDraggable) {
if(this.draggable !== isDraggable) { if(this.attrs.draggable !== isDraggable) {
if(isDraggable) { if(isDraggable) {
this._initDrag(); this._initDrag();
} }
else { else {
this._dragCleanup(); this._dragCleanup();
} }
this._draggable = isDraggable; this.attrs.draggable = isDraggable;
} }
}, },
/** /**
@ -417,9 +423,9 @@ Kinetic.Node.prototype = {
newContainer._setChildrenIndices(); newContainer._setChildrenIndices();
// update children hashes // update children hashes
if(this.name) { if(this.attrs.name) {
parent.childrenNames[this.name] = undefined; parent.childrenNames[this.attrs.name] = undefined;
newContainer.childrenNames[this.name] = this; newContainer.childrenNames[this.attrs.name] = this;
} }
}, },
/** /**
@ -454,7 +460,7 @@ Kinetic.Node.prototype = {
* get name * get name
*/ */
getName: function() { getName: function() {
return this.name; return this.attrs.name;
}, },
/** /**
* set center offset * set center offset
@ -462,14 +468,14 @@ Kinetic.Node.prototype = {
* @param {Number} y * @param {Number} y
*/ */
setCenterOffset: function(x, y) { setCenterOffset: function(x, y) {
this.centerOffset.x = x; this.attrs.centerOffset.x = x;
this.centerOffset.y = y; this.attrs.centerOffset.y = y;
}, },
/** /**
* get center offset * get center offset
*/ */
getCenterOffset: function() { getCenterOffset: function() {
return this.centerOffset; return this.attrs.centerOffset;
}, },
/** /**
* transition node to another state. Any property that can accept a real * transition node to another state. Any property that can accept a real
@ -522,13 +528,13 @@ Kinetic.Node.prototype = {
* @param {String} constraint * @param {String} constraint
*/ */
setDragConstraint: function(constraint) { setDragConstraint: function(constraint) {
this.dragConstraint = constraint; this.attrs.dragConstraint = constraint;
}, },
/** /**
* get drag constraint * get drag constraint
*/ */
getDragConstraint: function() { getDragConstraint: function() {
return this.dragConstraint; return this.attrs.dragConstraint;
}, },
/** /**
* set drag bounds * set drag bounds
@ -539,13 +545,13 @@ Kinetic.Node.prototype = {
* @config {Number} [bottom] bottom bounds position * @config {Number} [bottom] bottom bounds position
*/ */
setDragBounds: function(bounds) { setDragBounds: function(bounds) {
this.dragBounds = bounds; this.attrs.dragBounds = bounds;
}, },
/** /**
* get drag bounds * get drag bounds
*/ */
getDragBounds: function() { getDragBounds: function() {
return this.dragBounds; return this.attrs.dragBounds;
}, },
/** /**
* get transform of the node while taking into * get transform of the node while taking into
@ -579,17 +585,17 @@ Kinetic.Node.prototype = {
getTransform: function() { getTransform: function() {
var m = new Kinetic.Transform(); var m = new Kinetic.Transform();
if(this.x !== 0 || this.y !== 0) { if(this.attrs.x !== 0 || this.attrs.y !== 0) {
m.translate(this.x, this.y); m.translate(this.attrs.x, this.attrs.y);
} }
if(this.rotation !== 0) { if(this.attrs.rotation !== 0) {
m.rotate(this.rotation); m.rotate(this.attrs.rotation);
} }
if(this.scale.x !== 1 || this.scale.y !== 1) { if(this.attrs.scale.x !== 1 || this.attrs.scale.y !== 1) {
m.scale(this.scale.x, this.scale.y); m.scale(this.attrs.scale.x, this.attrs.scale.y);
} }
if(this.centerOffset.x !== 0 || this.centerOffset.y !== 0) { if(this.attrs.centerOffset.x !== 0 || this.attrs.centerOffset.y !== 0) {
m.translate(-1 * this.centerOffset.x, -1 * this.centerOffset.y); m.translate(-1 * this.attrs.centerOffset.x, -1 * this.attrs.centerOffset.y);
} }
return m; return m;

64
src/Shape.js
View File

@ -16,6 +16,20 @@
* The default is "path" because it performs better * The default is "path" because it performs better
*/ */
Kinetic.Shape = function(config) { Kinetic.Shape = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.fill = undefined;
this.attrs.stroke = undefined;
this.attrs.strokeWidth = undefined;
this.attrs.lineJoin = undefined;
this.attrs.detectionType = 'path';
this.attrs.drawFuncName = undefined;
// special
this.drawFunc = config.drawFunc;
this.nodeType = 'Shape'; this.nodeType = 'Shape';
this.data = []; this.data = [];
@ -29,14 +43,6 @@ Kinetic.Shape = function(config) {
} }
} }
this.detectionType = 'path';
// required
this.drawFunc = config.drawFunc;
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['fill', 'stroke', 'strokeWidth', 'detectionType', 'shapeType', 'drawFuncName']);
// call super constructor // call super constructor
Kinetic.Node.apply(this, [config]); Kinetic.Node.apply(this, [config]);
}; };
@ -67,13 +73,13 @@ Kinetic.Shape.prototype = {
fillStroke: function() { fillStroke: function() {
var context = this.getContext(); var context = this.getContext();
if(this.fill !== undefined) { if(this.attrs.fill !== undefined) {
context.fillStyle = this.fill; context.fillStyle = this.attrs.fill;
context.fill(); context.fill();
} }
if(this.stroke !== undefined) { if(this.attrs.stroke !== undefined) {
context.lineWidth = this.strokeWidth === undefined ? 1 : this.strokeWidth; context.lineWidth = this.attrs.strokeWidth === undefined ? 1 : this.attrs.strokeWidth;
context.strokeStyle = this.stroke; context.strokeStyle = this.attrs.stroke;
context.stroke(); context.stroke();
} }
}, },
@ -83,8 +89,8 @@ Kinetic.Shape.prototype = {
*/ */
applyLineJoin: function() { applyLineJoin: function() {
var context = this.getContext(); var context = this.getContext();
if(this.lineJoin !== undefined) { if(this.attrs.lineJoin !== undefined) {
context.lineJoin = this.lineJoin; context.lineJoin = this.attrs.lineJoin;
} }
}, },
/** /**
@ -93,26 +99,26 @@ Kinetic.Shape.prototype = {
* @param {String|CanvasGradient|CanvasPattern} fill * @param {String|CanvasGradient|CanvasPattern} fill
*/ */
setFill: function(fill) { setFill: function(fill) {
this.fill = fill; this.attrs.fill = fill;
}, },
/** /**
* get fill * get fill
*/ */
getFill: function() { getFill: function() {
return this.fill; return this.attrs.fill;
}, },
/** /**
* set stroke color * set stroke color
* @param {String} stroke * @param {String} stroke
*/ */
setStroke: function(stroke) { setStroke: function(stroke) {
this.stroke = stroke; this.attrs.stroke = stroke;
}, },
/** /**
* get stroke color * get stroke color
*/ */
getStroke: function() { getStroke: function() {
return this.stroke; return this.attrs.stroke;
}, },
/** /**
* set line join * set line join
@ -120,26 +126,26 @@ Kinetic.Shape.prototype = {
* default is "miter" * default is "miter"
*/ */
setLineJoin: function(lineJoin) { setLineJoin: function(lineJoin) {
this.lineJoin = lineJoin; this.attrs.lineJoin = lineJoin;
}, },
/** /**
* get line join * get line join
*/ */
getLineJoin: function() { getLineJoin: function() {
return this.lineJoin; return this.attrs.lineJoin;
}, },
/** /**
* set stroke width * set stroke width
* @param {Number} strokeWidth * @param {Number} strokeWidth
*/ */
setStrokeWidth: function(strokeWidth) { setStrokeWidth: function(strokeWidth) {
this.strokeWidth = strokeWidth; this.attrs.strokeWidth = strokeWidth;
}, },
/** /**
* get stroke width * get stroke width
*/ */
getStrokeWidth: function() { getStrokeWidth: function() {
return this.strokeWidth; return this.attrs.strokeWidth;
}, },
/** /**
* set draw function * set draw function
@ -153,8 +159,8 @@ Kinetic.Shape.prototype = {
*/ */
save: function() { save: function() {
var stage = this.getStage(); var stage = this.getStage();
var w = stage.width; var w = stage.attrs.width;
var h = stage.height; var h = stage.attrs.height;
var bufferLayer = stage.bufferLayer; var bufferLayer = stage.bufferLayer;
var bufferLayerContext = bufferLayer.getContext(); var bufferLayerContext = bufferLayer.getContext();
@ -170,7 +176,7 @@ Kinetic.Shape.prototype = {
* @param {Layer} layer Layer that the shape will be drawn on * @param {Layer} layer Layer that the shape will be drawn on
*/ */
_draw: function(layer) { _draw: function(layer) {
if(this.visible) { if(this.attrs.visible) {
var stage = layer.getStage(); var stage = layer.getStage();
var context = layer.getContext(); var context = layer.getContext();
var family = []; var family = [];
@ -198,7 +204,7 @@ Kinetic.Shape.prototype = {
} }
// clear shape data // clear shape data
if(this.detectionType === 'pixel') { if(this.attrs.detectionType === 'pixel') {
this.data = []; this.data = [];
} }
}, },
@ -209,7 +215,7 @@ Kinetic.Shape.prototype = {
_isPointInShape: function(pos) { _isPointInShape: function(pos) {
var stage = this.getStage(); var stage = this.getStage();
if(this.detectionType === 'path') { if(this.attrs.detectionType === 'path') {
var pathLayer = stage.pathLayer; var pathLayer = stage.pathLayer;
var pathLayerContext = pathLayer.getContext(); var pathLayerContext = pathLayer.getContext();
@ -218,7 +224,7 @@ Kinetic.Shape.prototype = {
return pathLayerContext.isPointInPath(pos.x, pos.y); return pathLayerContext.isPointInPath(pos.x, pos.y);
} }
else { else {
var w = stage.width; var w = stage.attrs.width;
var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3]; var alpha = this.data[((w * pos.y) + pos.x) * 4 + 3];
return (alpha !== undefined && alpha !== 0); return (alpha !== undefined && alpha !== 0);
} }

91
src/Stage.js
View File

@ -12,6 +12,13 @@
* @param {int} height * @param {int} height
*/ */
Kinetic.Stage = function(config) { Kinetic.Stage = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.width = 400;
this.attrs.height = 200;
/* /*
* if container is a string, assume it's an id for * if container is a string, assume it's an id for
* a DOM element * a DOM element
@ -23,13 +30,6 @@ Kinetic.Stage = function(config) {
this.nodeType = 'Stage'; this.nodeType = 'Stage';
this.container = config.container; this.container = config.container;
this.content = document.createElement('div'); this.content = document.createElement('div');
this.width = config.width;
this.height = config.height;
this.scale = {
x: 1,
y: 1
};
this.dblClickWindow = 400; this.dblClickWindow = 400;
this.clickStart = false; this.clickStart = false;
this.targetShape = undefined; this.targetShape = undefined;
@ -59,9 +59,6 @@ Kinetic.Stage = function(config) {
// add stage to global object // add stage to global object
Kinetic.GlobalObject.stages.push(this); Kinetic.GlobalObject.stages.push(this);
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['height', 'width']);
// call super constructors // call super constructors
Kinetic.Container.apply(this, []); Kinetic.Container.apply(this, []);
Kinetic.Node.apply(this, [config]); Kinetic.Node.apply(this, [config]);
@ -117,8 +114,8 @@ Kinetic.Stage.prototype = {
} }
// set stage dimensions // set stage dimensions
this.width = width; this.attrs.width = width;
this.height = height; this.attrs.height = height;
// set buffer layer and path layer sizes // set buffer layer and path layer sizes
this.bufferLayer.getCanvas().width = width; this.bufferLayer.getCanvas().width = width;
@ -131,8 +128,8 @@ Kinetic.Stage.prototype = {
*/ */
getSize: function() { getSize: function() {
return { return {
width: this.width, width: this.attrs.width,
height: this.height height: this.attrs.height
}; };
}, },
/** /**
@ -294,11 +291,11 @@ Kinetic.Stage.prototype = {
* @param {Layer} layer * @param {Layer} layer
*/ */
add: function(layer) { add: function(layer) {
if(layer.name) { if(layer.attrs.name) {
this.childrenNames[layer.name] = layer; this.childrenNames[layer.attrs.name] = layer;
} }
layer.canvas.width = this.width; layer.canvas.width = this.attrs.width;
layer.canvas.height = this.height; layer.canvas.height = this.attrs.height;
this._add(layer); this._add(layer);
// draw layer and append canvas to container // draw layer and append canvas to container
@ -344,6 +341,18 @@ Kinetic.Stage.prototype = {
getStage: function() { getStage: function() {
return this; return this;
}, },
/**
* get width
*/
getWidth: function() {
return this.attrs.width;
},
/**
* get height
*/
getHeight: function() {
return this.attrs.height;
},
/** /**
* detect event * detect event
* @param {Shape} shape * @param {Shape} shape
@ -358,7 +367,7 @@ Kinetic.Stage.prototype = {
this.targetFound = true; this.targetFound = true;
} }
if(shape.visible && pos !== undefined && shape._isPointInShape(pos)) { if(shape.attrs.visible && pos !== undefined && shape._isPointInShape(pos)) {
// handle onmousedown // handle onmousedown
if(!isDragging && this.mouseDown) { if(!isDragging && this.mouseDown) {
this.mouseDown = false; this.mouseDown = false;
@ -494,7 +503,7 @@ Kinetic.Stage.prototype = {
// propapgate backwards through children // propapgate backwards through children
for(var i = children.length - 1; i >= 0; i--) { for(var i = children.length - 1; i >= 0; i--) {
var child = children[i]; var child = children[i];
if(child._listening) { if(child.attrs.listening) {
if(child.nodeType === 'Shape') { if(child.nodeType === 'Shape') {
var exit = this._detectEvent(child, evt); var exit = this._detectEvent(child, evt);
if(exit) { if(exit) {
@ -535,7 +544,7 @@ Kinetic.Stage.prototype = {
var shapeDetected = false; var shapeDetected = false;
for(var n = this.children.length - 1; n >= 0; n--) { for(var n = this.children.length - 1; n >= 0; n--) {
var layer = this.children[n]; var layer = this.children[n];
if(layer.visible && n >= 0 && layer._listening) { if(layer.attrs.visible && n >= 0 && layer.attrs.listening) {
if(this._traverseChildren(layer, evt)) { if(this._traverseChildren(layer, evt)) {
n = -1; n = -1;
shapeDetected = true; shapeDetected = true;
@ -703,13 +712,13 @@ Kinetic.Stage.prototype = {
var node = go.drag.node; var node = go.drag.node;
if(node) { if(node) {
var pos = that.getUserPosition(); var pos = that.getUserPosition();
var dc = node.dragConstraint; var dc = node.attrs.dragConstraint;
var db = node.dragBounds; var db = node.attrs.dragBounds;
// default // default
var newNodePos = { var newNodePos = {
x: pos.x - go.drag.offset.x, x: pos.attrs.x - go.drag.offset.x,
y: pos.y - go.drag.offset.y y: pos.attrs.y - go.drag.offset.y
}; };
// bounds overrides // bounds overrides
@ -730,13 +739,13 @@ Kinetic.Stage.prototype = {
* save rotation and scale and then * save rotation and scale and then
* remove them from the transform * remove them from the transform
*/ */
var rot = node.rotation; var rot = node.attrs.rotation;
var scale = { var scale = {
x: node.scale.x, x: node.attrs.scale.x,
y: node.scale.y y: node.attrs.scale.y
}; };
node.rotation = 0; node.attrs.rotation = 0;
node.scale = { node.attrs.scale = {
x: 1, x: 1,
y: 1 y: 1
}; };
@ -746,23 +755,23 @@ Kinetic.Stage.prototype = {
it.invert(); it.invert();
it.translate(newNodePos.x, newNodePos.y); it.translate(newNodePos.x, newNodePos.y);
newNodePos = { newNodePos = {
x: node.x + it.getTranslation().x, x: node.attrs.x + it.getTranslation().x,
y: node.y + it.getTranslation().y y: node.attrs.y + it.getTranslation().y
}; };
// constraint overrides // constraint overrides
if(dc === 'horizontal') { if(dc === 'horizontal') {
newNodePos.y = node.y; newNodePos.y = node.attrs.y;
} }
else if(dc === 'vertical') { else if(dc === 'vertical') {
newNodePos.x = node.x; newNodePos.x = node.attrs.x;
} }
node.setPosition(newNodePos.x, newNodePos.y); node.setPosition(newNodePos.x, newNodePos.y);
// restore rotation and scale // restore rotation and scale
node.rotate(rot); node.rotate(rot);
node.scale = { node.attrs.scale = {
x: scale.x, x: scale.x,
y: scale.y y: scale.y
}; };
@ -789,8 +798,8 @@ Kinetic.Stage.prototype = {
*/ */
_buildDOM: function() { _buildDOM: function() {
// content // content
this.content.style.width = this.width + 'px'; this.content.style.width = this.attrs.width + 'px';
this.content.style.height = this.height + 'px'; this.content.style.height = this.attrs.height + 'px';
this.content.style.position = 'relative'; this.content.style.position = 'relative';
this.content.style.display = 'inline-block'; this.content.style.display = 'inline-block';
this.content.className = 'kineticjs-content'; this.content.className = 'kineticjs-content';
@ -816,14 +825,14 @@ Kinetic.Stage.prototype = {
this.pathLayer.getCanvas().style.display = 'none'; this.pathLayer.getCanvas().style.display = 'none';
// add buffer layer // add buffer layer
this.bufferLayer.canvas.width = this.width; this.bufferLayer.canvas.width = this.attrs.width;
this.bufferLayer.canvas.height = this.height; this.bufferLayer.canvas.height = this.attrs.height;
this.bufferLayer.canvas.className = 'kineticjs-buffer-layer'; this.bufferLayer.canvas.className = 'kineticjs-buffer-layer';
this.content.appendChild(this.bufferLayer.canvas); this.content.appendChild(this.bufferLayer.canvas);
// add path layer // add path layer
this.pathLayer.canvas.width = this.width; this.pathLayer.canvas.width = this.attrs.width;
this.pathLayer.canvas.height = this.height; this.pathLayer.canvas.height = this.attrs.height;
this.pathLayer.canvas.className = 'kineticjs-path-layer'; this.pathLayer.canvas.className = 'kineticjs-path-layer';
this.content.appendChild(this.pathLayer.canvas); this.content.appendChild(this.pathLayer.canvas);
} }

15
src/shapes/Circle.js
View File

@ -8,6 +8,12 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Circle = function(config) { Kinetic.Circle = function(config) {
// default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.radius = 0;
this.shapeType = "Circle"; this.shapeType = "Circle";
config.drawFunc = function() { config.drawFunc = function() {
@ -15,13 +21,10 @@ Kinetic.Circle = function(config) {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.arc(0, 0, this.radius, 0, Math.PI * 2, true); context.arc(0, 0, this.attrs.radius, 0, Math.PI * 2, true);
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
}; };
// used for serialization
Kinetic.GlobalObject.jsonProps.call(this, ['radius']);
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
}; };
@ -34,13 +37,13 @@ Kinetic.Circle.prototype = {
* @param {Number} radius * @param {Number} radius
*/ */
setRadius: function(radius) { setRadius: function(radius) {
this.radius = radius; this.attrs.radius = radius;
}, },
/** /**
* get radius * get radius
*/ */
getRadius: function() { getRadius: function() {
return this.radius; return this.attrs.radius;
} }
}; };

33
src/shapes/Image.js
View File

@ -8,8 +8,16 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Image = function(config) { Kinetic.Image = function(config) {
this.shapeType = "Image"; // default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.width = 0;
this.attrs.height = 0;
// special
this.image = config.image;
// defaults // defaults
if(config.width === undefined) { if(config.width === undefined) {
config.width = config.image.width; config.width = config.image.width;
@ -18,15 +26,16 @@ Kinetic.Image = function(config) {
config.height = config.image.height; config.height = config.image.height;
} }
this.shapeType = "Image";
config.drawFunc = function() { config.drawFunc = function() {
var canvas = this.getCanvas(); var canvas = this.getCanvas();
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.rect(0, 0, this.width, this.height); context.rect(0, 0, this.attrs.width, this.attrs.height);
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
context.drawImage(this.image, 0, 0, this.width, this.height); context.drawImage(this.image, 0, 0, this.attrs.width, this.attrs.height);
}; };
// call super constructor // call super constructor
Kinetic.Shape.apply(this, [config]); Kinetic.Shape.apply(this, [config]);
@ -53,26 +62,26 @@ Kinetic.Image.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.width = width; this.attrs.width = width;
}, },
/** /**
* get width * get width
*/ */
getWidth: function() { getWidth: function() {
return this.width; return this.attrs.width;
}, },
/** /**
* set height * set height
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
this.height = height; this.attrs.height = height;
}, },
/** /**
* get height * get height
*/ */
getHeight: function() { getHeight: function() {
return this.height; return this.attrs.height;
}, },
/** /**
* set width and height * set width and height
@ -80,16 +89,16 @@ Kinetic.Image.prototype = {
* @param {Number} height * @param {Number} height
*/ */
setSize: function(width, height) { setSize: function(width, height) {
this.width = width; this.attrs.width = width;
this.height = height; this.attrs.height = height;
}, },
/** /**
* return image size * return image size
*/ */
getSize: function() { getSize: function() {
return { return {
width: this.width, width: this.attrs.width,
height: this.height height: this.attrs.height
}; };
} }
}; };

20
src/shapes/Polygon.js
View File

@ -8,15 +8,21 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Polygon = function(config) { Kinetic.Polygon = function(config) {
this.shapeType = "Polygon"; // default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.points = {};
this.shapeType = "Polygon";
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.moveTo(this.points[0].x, this.points[0].y); context.moveTo(this.attrs.points[0].x, this.attrs.points[0].y);
for(var n = 1; n < this.points.length; n++) { for(var n = 1; n < this.attrs.points.length; n++) {
context.lineTo(this.points[n].x, this.points[n].y); context.lineTo(this.attrs.points[n].x, this.attrs.points[n].y);
} }
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
@ -33,13 +39,13 @@ Kinetic.Polygon.prototype = {
* @param {Array} points * @param {Array} points
*/ */
setPoints: function(points) { setPoints: function(points) {
this.points = points; this.attrs.points = points;
}, },
/** /**
* get points array * get points array
*/ */
getPoints: function() { getPoints: function() {
return this.points; return this.attrs.points;
} }
}; };

29
src/shapes/Rect.js
View File

@ -8,13 +8,20 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Rect = function(config) { Kinetic.Rect = function(config) {
this.shapeType = "Rect"; // default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.width = 0;
this.attrs.height = 0;
this.shapeType = "Rect";
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.rect(0, 0, this.width, this.height); context.rect(0, 0, this.attrs.width, this.attrs.height);
context.closePath(); context.closePath();
this.fillStroke(); this.fillStroke();
}; };
@ -30,26 +37,26 @@ Kinetic.Rect.prototype = {
* @param {Number} width * @param {Number} width
*/ */
setWidth: function(width) { setWidth: function(width) {
this.width = width; this.attrs.width = width;
}, },
/** /**
* get width * get width
*/ */
getWidth: function() { getWidth: function() {
return this.width; return this.attrs.width;
}, },
/** /**
* set height * set height
* @param {Number} height * @param {Number} height
*/ */
setHeight: function(height) { setHeight: function(height) {
this.height = height; this.attrs.height = height;
}, },
/** /**
* get height * get height
*/ */
getHeight: function() { getHeight: function() {
return this.height; return this.attrs.height;
}, },
/** /**
* set width and height * set width and height
@ -57,16 +64,16 @@ Kinetic.Rect.prototype = {
* @param {Number} height * @param {Number} height
*/ */
setSize: function(width, height) { setSize: function(width, height) {
this.width = width; this.attrs.width = width;
this.height = height; this.attrs.height = height;
}, },
/** /**
* return rect size * return rect size
*/ */
getSize: function() { getSize: function() {
return { return {
width: this.width, width: this.attrs.width,
height: this.height height: this.attrs.height
}; };
} }
}; };

40
src/shapes/RegularPolygon.js
View File

@ -8,17 +8,24 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.RegularPolygon = function(config) { Kinetic.RegularPolygon = function(config) {
this.shapeType = "RegularPolygon"; // default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.radius = 0;
this.attrs.sides = 0;
this.shapeType = "RegularPolygon";
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.moveTo(0, 0 - this.radius); context.moveTo(0, 0 - this.attrs.radius);
for(var n = 1; n < this.sides; n++) { for(var n = 1; n < this.attrs.sides; n++) {
var x = this.radius * Math.sin(n * 2 * Math.PI / this.sides); var x = this.attrs.radius * Math.sin(n * 2 * Math.PI / this.attrs.sides);
var y = -1 * this.radius * Math.cos(n * 2 * Math.PI / this.sides); var y = -1 * this.attrs.radius * Math.cos(n * 2 * Math.PI / this.attrs.sides);
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
@ -31,44 +38,31 @@ Kinetic.RegularPolygon = function(config) {
* RegularPolygon methods * RegularPolygon methods
*/ */
Kinetic.RegularPolygon.prototype = { Kinetic.RegularPolygon.prototype = {
/**
* set number of points
* @param {int} points
*/
setPoints: function(points) {
this.points = points;
},
/**
* get number of points
*/
getPoints: function() {
return this.points;
},
/** /**
* set radius * set radius
* @param {Number} radius * @param {Number} radius
*/ */
setRadius: function(radius) { setRadius: function(radius) {
this.radius = radius; this.attrs.radius = radius;
}, },
/** /**
* get radius * get radius
*/ */
getRadius: function() { getRadius: function() {
return this.radius; return this.attrs.radius;
}, },
/** /**
* set number of sides * set number of sides
* @param {int} sides * @param {int} sides
*/ */
setSides: function(sides) { setSides: function(sides) {
this.sides = sides; this.attrs.sides = sides;
}, },
/** /**
* get number of sides * get number of sides
*/ */
getSides: function() { getSides: function() {
return this.sides; return this.attrs.sides;
} }
}; };

33
src/shapes/Star.js
View File

@ -8,18 +8,25 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Star = function(config) { Kinetic.Star = function(config) {
this.shapeType = "Star"; // default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.points = [];
this.attrs.innerRadius = 0;
this.attrs.outerRadius = 0;
this.shapeType = "Star";
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.beginPath(); context.beginPath();
this.applyLineJoin(); this.applyLineJoin();
context.moveTo(0, 0 - this.outerRadius); context.moveTo(0, 0 - this.attrs.outerRadius);
for(var n = 1; n < this.points * 2; n++) { for(var n = 1; n < this.attrs.points * 2; n++) {
var radius = n % 2 === 0 ? this.outerRadius : this.innerRadius; var radius = n % 2 === 0 ? this.attrs.outerRadius : this.attrs.innerRadius;
var x = radius * Math.sin(n * Math.PI / this.points); var x = radius * Math.sin(n * Math.PI / this.attrs.points);
var y = -1 * radius * Math.cos(n * Math.PI / this.points); var y = -1 * radius * Math.cos(n * Math.PI / this.attrs.points);
context.lineTo(x, y); context.lineTo(x, y);
} }
context.closePath(); context.closePath();
@ -37,39 +44,39 @@ Kinetic.Star.prototype = {
* @param {Array} points * @param {Array} points
*/ */
setPoints: function(points) { setPoints: function(points) {
this.points = points; this.attrs.points = points;
}, },
/** /**
* get points array * get points array
*/ */
getPoints: function() { getPoints: function() {
return this.points; return this.attrs.points;
}, },
/** /**
* set outer radius * set outer radius
* @param {Number} radius * @param {Number} radius
*/ */
setOuterRadius: function(radius) { setOuterRadius: function(radius) {
this.outerRadius = radius; this.attrs.outerRadius = radius;
}, },
/** /**
* get outer radius * get outer radius
*/ */
getOuterRadius: function() { getOuterRadius: function() {
return this.outerRadius; return this.attrs.outerRadius;
}, },
/** /**
* set inner radius * set inner radius
* @param {Number} radius * @param {Number} radius
*/ */
setInnerRadius: function(radius) { setInnerRadius: function(radius) {
this.innerRadius = radius; this.attrs.innerRadius = radius;
}, },
/** /**
* get inner radius * get inner radius
*/ */
getInnerRadius: function() { getInnerRadius: function() {
return this.innerRadius; return this.attrs.innerRadius;
} }
}; };
// extend Shape // extend Shape

108
src/shapes/Text.js
View File

@ -8,10 +8,24 @@
* @param {Object} config * @param {Object} config
*/ */
Kinetic.Text = function(config) { Kinetic.Text = function(config) {
this.shapeType = "Text"; // default attrs
if(this.attrs === undefined) {
this.attrs = {};
}
this.attrs.fontFamily = '';
this.attrs.text = '';
this.attrs.fontSize = 12;
this.attrs.textStroke = undefined;
this.attrs.textStrokeWidth = undefined;
this.attrs.align = 'left';
this.attrs.verticalAlign = 'top';
this.attrs.padding = 0;
this.attrs.fontStyle = 'normal';
this.shapeType = "Text";
/* /*
* defaults * special defaults
*/ */
if(config.textStroke !== undefined || config.textStrokeWidth !== undefined) { if(config.textStroke !== undefined || config.textStrokeWidth !== undefined) {
if(config.textStroke === undefined) { if(config.textStroke === undefined) {
@ -21,30 +35,18 @@ Kinetic.Text = function(config) {
config.textStrokeWidth = 2; config.textStrokeWidth = 2;
} }
} }
if(config.align === undefined) {
config.align = 'left';
}
if(config.verticalAlign === undefined) {
config.verticalAlign = 'top';
}
if(config.padding === undefined) {
config.padding = 0;
}
if(config.fontStyle === undefined) {
config.fontStyle = 'normal';
}
config.drawFunc = function() { config.drawFunc = function() {
var context = this.getContext(); var context = this.getContext();
context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle'; context.textBaseline = 'middle';
var textHeight = this.getTextHeight(); var textHeight = this.getTextHeight();
var textWidth = this.getTextWidth(); var textWidth = this.getTextWidth();
var p = this.padding; var p = this.attrs.padding;
var x = 0; var x = 0;
var y = 0; var y = 0;
switch (this.align) { switch (this.attrs.align) {
case 'center': case 'center':
x = textWidth / -2 - p; x = textWidth / -2 - p;
break; break;
@ -53,7 +55,7 @@ Kinetic.Text = function(config) {
break; break;
} }
switch (this.verticalAlign) { switch (this.attrs.verticalAlign) {
case 'middle': case 'middle':
y = textHeight / -2 - p; y = textHeight / -2 - p;
break; break;
@ -75,21 +77,21 @@ Kinetic.Text = function(config) {
var ty = textHeight / 2 + p + y; var ty = textHeight / 2 + p + y;
// draw text // draw text
if(this.textFill !== undefined) { if(this.attrs.textFill !== undefined) {
context.fillStyle = this.textFill; context.fillStyle = this.attrs.textFill;
context.fillText(this.text, tx, ty); context.fillText(this.attrs.text, tx, ty);
} }
if(this.textStroke !== undefined || this.textStrokeWidth !== undefined) { if(this.attrs.textStroke !== undefined || this.attrs.textStrokeWidth !== undefined) {
// defaults // defaults
if(this.textStroke === undefined) { if(this.attrs.textStroke === undefined) {
this.textStroke = 'black'; this.attrs.textStroke = 'black';
} }
else if(this.textStrokeWidth === undefined) { else if(this.attrs.textStrokeWidth === undefined) {
this.textStrokeWidth = 2; this.attrs.textStrokeWidth = 2;
} }
context.lineWidth = this.textStrokeWidth; context.lineWidth = this.attrs.textStrokeWidth;
context.strokeStyle = this.textStroke; context.strokeStyle = this.attrs.textStroke;
context.strokeText(this.text, tx, ty); context.strokeText(this.attrs.text, tx, ty);
} }
}; };
// call super constructor // call super constructor
@ -104,130 +106,130 @@ Kinetic.Text.prototype = {
* @param {String} fontFamily * @param {String} fontFamily
*/ */
setFontFamily: function(fontFamily) { setFontFamily: function(fontFamily) {
this.fontFamily = fontFamily; this.attrs.fontFamily = fontFamily;
}, },
/** /**
* get font family * get font family
*/ */
getFontFamily: function() { getFontFamily: function() {
return this.fontFamily; return this.attrs.fontFamily;
}, },
/** /**
* set font size * set font size
* @param {int} fontSize * @param {int} fontSize
*/ */
setFontSize: function(fontSize) { setFontSize: function(fontSize) {
this.fontSize = fontSize; this.attrs.fontSize = fontSize;
}, },
/** /**
* get font size * get font size
*/ */
getFontSize: function() { getFontSize: function() {
return this.fontSize; return this.attrs.fontSize;
}, },
/** /**
* set font style. Can be "normal", "italic", or "bold". "normal" is the default. * set font style. Can be "normal", "italic", or "bold". "normal" is the default.
* @param {String} fontStyle * @param {String} fontStyle
*/ */
setFontStyle: function(fontStyle) { setFontStyle: function(fontStyle) {
this.fontStyle = fontStyle; this.attrs.fontStyle = fontStyle;
}, },
/** /**
* get font style * get font style
*/ */
getFontStyle: function() { getFontStyle: function() {
return this.fontStyle; return this.attrs.fontStyle;
}, },
/** /**
* set text fill color * set text fill color
* @param {String} textFill * @param {String} textFill
*/ */
setTextFill: function(textFill) { setTextFill: function(textFill) {
this.textFill = textFill; this.attrs.textFill = textFill;
}, },
/** /**
* get text fill color * get text fill color
*/ */
getTextFill: function() { getTextFill: function() {
return this.textFill; return this.attrs.textFill;
}, },
/** /**
* set text stroke color * set text stroke color
* @param {String} textStroke * @param {String} textStroke
*/ */
setTextStroke: function(textStroke) { setTextStroke: function(textStroke) {
this.textStroke = textStroke; this.attrs.textStroke = textStroke;
}, },
/** /**
* get text stroke color * get text stroke color
*/ */
getTextStroke: function() { getTextStroke: function() {
return this.textStroke; return this.attrs.textStroke;
}, },
/** /**
* set text stroke width * set text stroke width
* @param {int} textStrokeWidth * @param {int} textStrokeWidth
*/ */
setTextStrokeWidth: function(textStrokeWidth) { setTextStrokeWidth: function(textStrokeWidth) {
this.textStrokeWidth = textStrokeWidth; this.attrs.textStrokeWidth = textStrokeWidth;
}, },
/** /**
* get text stroke width * get text stroke width
*/ */
getTextStrokeWidth: function() { getTextStrokeWidth: function() {
return this.textStrokeWidth; return this.attrs.textStrokeWidth;
}, },
/** /**
* set padding * set padding
* @param {int} padding * @param {int} padding
*/ */
setPadding: function(padding) { setPadding: function(padding) {
this.padding = padding; this.attrs.padding = padding;
}, },
/** /**
* get padding * get padding
*/ */
getPadding: function() { getPadding: function() {
return this.padding; return this.attrs.padding;
}, },
/** /**
* set horizontal align of text * set horizontal align of text
* @param {String} align align can be 'left', 'center', or 'right' * @param {String} align align can be 'left', 'center', or 'right'
*/ */
setAlign: function(align) { setAlign: function(align) {
this.align = align; this.attrs.align = align;
}, },
/** /**
* get horizontal align * get horizontal align
*/ */
getAlign: function() { getAlign: function() {
return this.align; return this.attrs.align;
}, },
/** /**
* set vertical align of text * set vertical align of text
* @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" * @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom"
*/ */
setVerticalAlign: function(verticalAlign) { setVerticalAlign: function(verticalAlign) {
this.verticalAlign = verticalAlign; this.attrs.verticalAlign = verticalAlign;
}, },
/** /**
* get vertical align * get vertical align
*/ */
getVerticalAlign: function() { getVerticalAlign: function() {
return this.verticalAlign; return this.attrs.verticalAlign;
}, },
/** /**
* set text * set text
* @param {String} text * @param {String} text
*/ */
setText: function(text) { setText: function(text) {
this.text = text; this.attrs.text = text;
}, },
/** /**
* get text * get text
*/ */
getText: function() { getText: function() {
return this.text; return this.attrs.text;
}, },
/** /**
* get text width in pixels * get text width in pixels
@ -247,12 +249,12 @@ Kinetic.Text.prototype = {
getTextSize: function() { getTextSize: function() {
var context = this.getContext(); var context = this.getContext();
context.save(); context.save();
context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var metrics = context.measureText(this.text); var metrics = context.measureText(this.attrs.text);
context.restore(); context.restore();
return { return {
width: metrics.width, width: metrics.width,
height: parseInt(this.fontSize, 10) height: parseInt(this.attrs.fontSize, 10)
}; };
} }
}; };

419
tests/js/unitTests.js
View File

@ -27,8 +27,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -40,6 +40,7 @@ Test.prototype.tests = {
stage.add(layer); stage.add(layer);
layer.add(group); layer.add(group);
layer.draw(); layer.draw();
}, },
'STAGE - add layer then group then shape': function(containerId) { 'STAGE - add layer then group then shape': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -50,8 +51,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -64,108 +65,110 @@ Test.prototype.tests = {
group.add(circle); group.add(circle);
layer.draw(); layer.draw();
}, },
'STAGE - serialize stage': function(containerId) {
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({
x: stage.width / 2,
y: stage.height / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
stage.add(layer);
layer.add(group);
group.add(circle);
layer.draw();
console.log(stage.toJSON())
var expectedJson = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
test(stage.toJSON() === expectedJson, 'problem with serialization');
},
'STAGE - load stage with json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var json = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
stage.load(json);
test(stage.toJSON() === json, "serialized stage is incorrect");
},
/* /*
'STAGE - serialize stage with custom shape': function(containerId) { 'STAGE - serialize stage': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
height: 200 height: 200
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
name: 'myCircle',
draggable: true
});
var drawTriangle = function() { stage.add(layer);
var context = this.getContext(); layer.add(group);
context.beginPath(); group.add(circle);
context.moveTo(200, 50); layer.draw();
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
drawFuncName: 'drawTriangle',
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
stage.add(layer); console.log(stage.toJSON())
layer.add(group);
group.add(triangle);
layer.draw();
var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}'; var expectedJson = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
test(stage.toJSON() === expectedJson, "problem with serialization"); test(stage.toJSON() === expectedJson, 'problem with serialization');
},
'STAGE - load stage with json': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
console.log(stage.toJSON()); var json = '{"attrs":{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Layer","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"nodeType":"Group","visible":true,"listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":false},"children":[{"attrs":{"shapeType":"Circle","nodeType":"Shape","detectionType":"path","visible":true,"listening":true,"name":"myCircle","alpha":1,"x":289,"y":100,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"draggable":true,"radius":70,"fill":"green","stroke":"black","strokeWidth":4}}]}]}]}';
}, stage.load(json);
'STAGE - load stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var drawTriangle = function() { test(stage.toJSON() === json, "serialized stage is incorrect");
var context = this.getContext(); },
context.beginPath(); */
context.moveTo(200, 50); /*
context.lineTo(420, 80); 'STAGE - serialize stage with custom shape': function(containerId) {
context.quadraticCurveTo(300, 100, 260, 170); var stage = new Kinetic.Stage({
context.closePath(); container: containerId,
this.fillStroke(); width: 578,
}; height: 200
var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}'; });
stage.load(json, { var layer = new Kinetic.Layer();
drawTriangle: drawTriangle var group = new Kinetic.Group();
});
test(stage.toJSON() === json, "serialized stage is incorrect"); var drawTriangle = function() {
}, var context = this.getContext();
*/ context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
drawFuncName: 'drawTriangle',
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
stage.add(layer);
layer.add(group);
group.add(triangle);
layer.draw();
var expectedJson = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
test(stage.toJSON() === expectedJson, "problem with serialization");
console.log(stage.toJSON());
},
'STAGE - load stage with custom shape': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var drawTriangle = function() {
var context = this.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke();
};
var json = '{"nodeType":"Stage","width":578,"height":200,"scale":{"x":1,"y":1},"visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Layer","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Group","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"_children":[{"nodeType":"Shape","detectionType":"path","visible":true,"_listening":true,"alpha":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"centerOffset":{"x":0,"y":0},"dragConstraint":"none","dragBounds":{},"_draggable":false,"drawFuncName":"drawTriangle","fill":"#00D2FF","stroke":"black","strokeWidth":4}]}]}]}';
stage.load(json, {
drawTriangle: drawTriangle
});
test(stage.toJSON() === json, "serialized stage is incorrect");
},
*/
'STAGE - set stage size': function(containerId) { 'STAGE - set stage size': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
@ -174,8 +177,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -202,8 +205,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -225,8 +228,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -258,8 +261,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -384,8 +387,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle1 = new Kinetic.Circle({ var circle1 = new Kinetic.Circle({
x: stage.width / 2, x: 100,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -393,8 +396,8 @@ Test.prototype.tests = {
}); });
var circle2 = new Kinetic.Circle({ var circle2 = new Kinetic.Circle({
x: stage.width / 2, x: 300,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -402,12 +405,13 @@ Test.prototype.tests = {
}); });
layer.add(circle1); layer.add(circle1);
layer.add(circle1); layer.add(circle2);
stage.add(layer); stage.add(layer);
test(layer.children.length === 2, 'layer should have 2 children'); test(layer.children.length === 2, 'layer should have 2 children');
layer.removeChildren(); layer.removeChildren();
layer.draw();
test(layer.children.length === 0, 'layer should have 0 children'); test(layer.children.length === 0, 'layer should have 0 children');
}, },
@ -419,8 +423,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -447,8 +451,8 @@ Test.prototype.tests = {
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -468,8 +472,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -495,8 +499,8 @@ Test.prototype.tests = {
var blueGroup = new Kinetic.Group(); var blueGroup = new Kinetic.Group();
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: stage.width / 2 - 100, x: stage.getWidth() / 2 - 100,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -505,8 +509,8 @@ Test.prototype.tests = {
}); });
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: stage.width / 2 + 100, x: stage.getWidth() / 2 + 100,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -523,8 +527,8 @@ Test.prototype.tests = {
blueLayer.removeChildren(); blueLayer.removeChildren();
var blueGroup2 = new Kinetic.Group(); var blueGroup2 = new Kinetic.Group();
var blueCircle2 = new Kinetic.Circle({ var blueCircle2 = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -582,8 +586,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -614,8 +618,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -636,25 +640,21 @@ Test.prototype.tests = {
height: 200 height: 200
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var darth = new Kinetic.Image({ darth = new Kinetic.Image({
x: 10, x: 200,
y: 10, y: 60,
image: imageObj, image: imageObj,
width: 100, width: 100,
centerOffset: { centerOffset: {
x: this.width / 2, x: 50,
y: this.height / 2 y: imageObj.height / 2
} }
}); });
console.log(darth);
layer.add(darth); layer.add(darth);
stage.add(layer); stage.add(layer);
stage.onFrame(function() {
darth.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
}; };
imageObj.src = '../darth-vader.jpg'; imageObj.src = '../darth-vader.jpg';
}, },
@ -690,11 +690,7 @@ Test.prototype.tests = {
points: points, points: points,
fill: 'green', fill: 'green',
stroke: 'blue', stroke: 'blue',
strokeWidth: 5, strokeWidth: 5
centerOffset: {
x: 300,
y: 100
}
}); });
layer.add(poly); layer.add(poly);
@ -731,11 +727,6 @@ Test.prototype.tests = {
layer.add(poly); layer.add(poly);
stage.add(layer); stage.add(layer);
stage.onFrame(function() {
poly.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
}, },
'SHAPES - add regular polygon square': function(containerId) { 'SHAPES - add regular polygon square': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -832,12 +823,6 @@ Test.prototype.tests = {
layer.add(star); layer.add(star);
stage.add(layer); stage.add(layer);
stage.onFrame(function() {
star.rotate(Math.PI / 100);
layer.draw();
});
//stage.start();
}, },
'SHAPES - add five point star with line join': function(containerId) { 'SHAPES - add five point star with line join': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -905,7 +890,7 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
test(rect.stroke === 'black', 'stroke should be black'); test(rect.getStroke() === 'black', 'stroke should be black');
}, },
'SHAPES - use default stroke width': function(containerId) { 'SHAPES - use default stroke width': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -925,7 +910,7 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
test(rect.strokeWidth === 2, 'stroke width should be 2'); test(rect.getStrokeWidth() === 2, 'stroke width should be 2');
}, },
'SHAPES - set center offset after instantiation': function(containerId) { 'SHAPES - set center offset after instantiation': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
@ -949,13 +934,13 @@ Test.prototype.tests = {
layer.add(rect); layer.add(rect);
stage.add(layer); stage.add(layer);
test(rect.centerOffset.x === 20, 'center offset x should be 20'); test(rect.getCenterOffset().x === 20, 'center offset x should be 20');
test(rect.centerOffset.y === 20, 'center offset y should be 20'); test(rect.getCenterOffset().y === 20, 'center offset y should be 20');
rect.setCenterOffset(40, 40); rect.setCenterOffset(40, 40);
test(rect.centerOffset.x === 40, 'center offset x should be 40'); test(rect.getCenterOffset().x === 40, 'center offset x should be 40');
test(rect.centerOffset.y === 40, 'center offset y should be 40'); test(rect.getCenterOffset().y === 40, 'center offset y should be 40');
}, },
'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) { 'SHAPES - custom shape with fill, stroke, and strokeWidth': function(containerId) {
@ -1093,8 +1078,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var text = new Kinetic.Text({ var text = new Kinetic.Text({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
stroke: 'green', stroke: 'green',
strokeWidth: 5, strokeWidth: 5,
fill: '#ddd', fill: '#ddd',
@ -1159,8 +1144,8 @@ Test.prototype.tests = {
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var text = new Kinetic.Text({ var text = new Kinetic.Text({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
text: 'Hello World!', text: 'Hello World!',
fontSize: 60, fontSize: 60,
fontFamily: 'Calibri', fontFamily: 'Calibri',
@ -1174,8 +1159,6 @@ Test.prototype.tests = {
layer.add(text); layer.add(text);
stage.add(layer); stage.add(layer);
console.log(text.getTextSize());
test(text.getTextSize().width > 0, 'text width should have a value'); test(text.getTextSize().width > 0, 'text width should have a value');
test(text.getTextSize().height > 0, 'text height should have a value'); test(text.getTextSize().height > 0, 'text height should have a value');
test(text.getTextWidth() > 0, 'text width should have a value'); test(text.getTextWidth() > 0, 'text width should have a value');
@ -1189,8 +1172,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1211,8 +1194,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1240,8 +1223,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1254,12 +1237,12 @@ Test.prototype.tests = {
layer.draw(); layer.draw();
// test defaults // test defaults
test(circle._draggable === false, 'draggable should be false'); test(circle.attrs.draggable === false, 'draggable should be false');
test(circle.dragConstraint === 'none', 'drag constraint should be none'); test(circle.attrs.dragConstraint === 'none', 'drag constraint should be none');
test(circle.dragBounds.left === undefined, 'drag left should be undefined'); test(circle.attrs.dragBounds.left === undefined, 'drag left should be undefined');
test(circle.dragBounds.top === undefined, 'drag top should be undefined'); test(circle.attrs.dragBounds.top === undefined, 'drag top should be undefined');
test(circle.dragBounds.right === undefined, 'drag right should be undefined'); test(circle.attrs.dragBounds.right === undefined, 'drag right should be undefined');
test(circle.dragBounds.bottom === undefined, 'drag bottom should be undefined'); test(circle.attrs.dragBounds.bottom === undefined, 'drag bottom should be undefined');
test(circle.getDragConstraint() === 'none', 'drag constraint should be none'); test(circle.getDragConstraint() === 'none', 'drag constraint should be none');
test(circle.getDragBounds().bottom === undefined, 'drag bottom should be undefined'); test(circle.getDragBounds().bottom === undefined, 'drag bottom should be undefined');
@ -1274,12 +1257,12 @@ Test.prototype.tests = {
}); });
// test new properties // test new properties
test(circle._draggable === true, 'draggable should be true'); test(circle.attrs.draggable === true, 'draggable should be true');
test(circle.dragConstraint === 'vertical', 'drag constraint should be vertical'); test(circle.attrs.dragConstraint === 'vertical', 'drag constraint should be vertical');
test(circle.dragBounds.left === 50, 'drag left should be 50'); test(circle.attrs.dragBounds.left === 50, 'drag left should be 50');
test(circle.dragBounds.top === 100, 'drag top should be 100'); test(circle.attrs.dragBounds.top === 100, 'drag top should be 100');
test(circle.dragBounds.right === 150, 'drag right should be 150'); test(circle.attrs.dragBounds.right === 150, 'drag right should be 150');
test(circle.dragBounds.bottom === 200, 'drag bottom should be 200'); test(circle.attrs.dragBounds.bottom === 200, 'drag bottom should be 200');
test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical'); test(circle.getDragConstraint() === 'vertical', 'drag constraint should be vertical');
test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200'); test(circle.getDragBounds().bottom === 200, 'drag bottom should be 200');
}, },
@ -1327,8 +1310,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1350,8 +1333,8 @@ Test.prototype.tests = {
var group = new Kinetic.Group(); var group = new Kinetic.Group();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1424,8 +1407,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1446,8 +1429,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1471,8 +1454,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1491,8 +1474,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1518,8 +1501,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1542,8 +1525,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1562,8 +1545,8 @@ Test.prototype.tests = {
}); });
var layer = new Kinetic.Layer(); var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({ var circle = new Kinetic.Circle({
x: stage.width / 2, x: stage.getWidth() / 2,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1593,14 +1576,14 @@ Test.prototype.tests = {
var shape1 = new Kinetic.Circle({ var shape1 = new Kinetic.Circle({
x: 150, x: 150,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 40, radius: 40,
fill: 'green' fill: 'green'
}); });
var shape2 = new Kinetic.Circle({ var shape2 = new Kinetic.Circle({
x: 250, x: 250,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 40, radius: 40,
fill: 'green' fill: 'green'
}); });
@ -1650,7 +1633,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: 200, x: 200,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -1659,7 +1642,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: 280, x: 280,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1690,7 +1673,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: 200, x: 200,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -1699,7 +1682,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: 280, x: 280,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1732,7 +1715,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: 200, x: 200,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -1741,7 +1724,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: 280, x: 280,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1777,7 +1760,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: 200, x: 200,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -1786,7 +1769,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: 280, x: 280,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1821,7 +1804,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: 200, x: 200,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -1830,7 +1813,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: 280, x: 280,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1856,7 +1839,7 @@ Test.prototype.tests = {
var blueCircle = new Kinetic.Circle({ var blueCircle = new Kinetic.Circle({
x: 200, x: 200,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'blue', fill: 'blue',
stroke: 'black', stroke: 'black',
@ -1865,7 +1848,7 @@ Test.prototype.tests = {
var greenCircle = new Kinetic.Circle({ var greenCircle = new Kinetic.Circle({
x: 280, x: 280,
y: stage.height / 2, y: stage.getHeight() / 2,
radius: 70, radius: 70,
fill: 'green', fill: 'green',
stroke: 'black', stroke: 'black',
@ -1907,7 +1890,7 @@ Test.prototype.tests = {
var amplitude = 150; var amplitude = 150;
var period = 1000; var period = 1000;
// in ms // in ms
var centerX = stage.width / 2 - 100 / 2; var centerX = stage.getWidth() / 2 - 100 / 2;
stage.onFrame(function(frame) { stage.onFrame(function(frame) {
rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX; rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;