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

moved data type logic into new utility files Type.js and renamed GlobalObject to Global

Browse Source
This commit is contained in:
Eric Rowell 2012-07-03 22:08:59 -07:00
parent 17644fcb8f
commit 6126c73a84
13 changed files with 231 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Thorfile
View File

@ -3,7 +3,7 @@ require 'json/pure'
class Build < Thor 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. # 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 = [ FILES = [
"license.js", "src/GlobalObject.js", "src/util/Class.js", "src/Node.js", "src/Container.js", "src/Stage.js", "license.js", "src/Global.js", "src/util/Type.js", "src/util/Class.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/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Ellipse.js", "src/shapes/Image.js",
"src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js", "src/shapes/Sprite.js", "src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
"src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.js" "src/shapes/Line.js", "src/shapes/Path.js", "src/util/Transform.js", "src/Transition.js", "src/util/Tween.js"

114
dist/kinetic-core.js vendored
View File

@ -35,10 +35,10 @@
*/ */
var Kinetic = {}; var Kinetic = {};
/** /**
* Kinetic Global Object * Kinetic Global
* @property {Object} GlobalObjet * @property {Object} Global
*/ */
Kinetic.GlobalObject = { Kinetic.Global = {
stages: [], stages: [],
idCounter: 0, idCounter: 0,
tempNodes: [], tempNodes: [],
@ -138,7 +138,21 @@ Kinetic.GlobalObject = {
else { else {
this.frame.lastTime = 0; this.frame.lastTime = 0;
} }
}, }
};
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
/*
* utilities that determine data type and transform
* one type into another
*/
Kinetic.Type = {
/* /*
* cherry-picked utilities from underscore.js * cherry-picked utilities from underscore.js
*/ */
@ -152,7 +166,6 @@ Kinetic.GlobalObject = {
return Object.prototype.toString.call(obj) == '[object Array]'; return Object.prototype.toString.call(obj) == '[object Array]';
}, },
_isObject: function(obj) { _isObject: function(obj) {
//return obj === Object(obj);
return (!!obj && obj.constructor == Object); return (!!obj && obj.constructor == Object);
}, },
_isNumber: function(obj) { _isNumber: function(obj) {
@ -342,13 +355,6 @@ Kinetic.GlobalObject = {
} }
}; };
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
/* Simple JavaScript Inheritance /* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/ * By John Resig http://ejohn.org/
* MIT Licensed. * MIT Licensed.
@ -462,7 +468,7 @@ Kinetic.Node = Kinetic.Class.extend({
* drag and drop mode * drag and drop mode
*/ */
var stage = this.getStage(); var stage = this.getStage();
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
if(stage && go.drag.node && go.drag.node._id === this._id) { if(stage && go.drag.node && go.drag.node._id === this._id) {
stage._endDrag(); stage._endDrag();
} }
@ -582,7 +588,7 @@ Kinetic.Node = Kinetic.Class.extend({
* @param {Object} config * @param {Object} config
*/ */
setAttrs: function(config) { setAttrs: function(config) {
var go = Kinetic.GlobalObject; var type = Kinetic.Type;
var that = this; var that = this;
// set properties from config // set properties from config
if(config !== undefined) { if(config !== undefined) {
@ -599,14 +605,14 @@ Kinetic.Node = Kinetic.Class.extend({
* if property is a pure object (no methods), then add an empty object * if property is a pure object (no methods), then add an empty object
* to the node and then traverse * to the node and then traverse
*/ */
if(go._isObject(val) && !go._isArray(val) && !go._isElement(val) && !go._hasMethods(val)) { if(type._isObject(val) && !type._isArray(val) && !type._isElement(val) && !type._hasMethods(val)) {
/* /*
* since some properties can be strings or objects, e.g. * since some properties can be strings or objects, e.g.
* fill, we need to first check that obj is an object * fill, we need to first check that obj is an object
* before setting properties. If it's not an object, * before setting properties. If it's not an object,
* overwrite obj with an object literal * overwrite obj with an object literal
*/ */
if(!Kinetic.GlobalObject._isObject(obj[key])) { if(!Kinetic.Type._isObject(obj[key])) {
obj[key] = {}; obj[key] = {};
} }
@ -630,21 +636,21 @@ Kinetic.Node = Kinetic.Class.extend({
* - shadow offset * - shadow offset
*/ */
case 'offset': case 'offset':
var pos = go._getXY(val); var pos = type._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'scale': case 'scale':
var pos = go._getXY(val); var pos = type._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'points': case 'points':
that._setAttr(obj, key, go._getPoints(val)); that._setAttr(obj, key, type._getPoints(val));
break; break;
case 'crop': case 'crop':
var pos = go._getXY(val); var pos = type._getXY(val);
var size = go._getSize(val); var size = type._getSize(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'width', size.width);
@ -751,7 +757,7 @@ Kinetic.Node = Kinetic.Class.extend({
* @param {Object} point * @param {Object} point
*/ */
setPosition: function() { setPosition: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
this.setAttrs(pos); this.setAttrs(pos);
}, },
/** /**
@ -775,7 +781,7 @@ Kinetic.Node = Kinetic.Class.extend({
* y property * y property
*/ */
setAbsolutePosition: function() { setAbsolutePosition: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
/* /*
* save rotation and scale and * save rotation and scale and
* then remove them from the transform * then remove them from the transform
@ -818,7 +824,7 @@ Kinetic.Node = Kinetic.Class.extend({
* move node by an amount * move node by an amount
*/ */
move: function() { move: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var x = this.getX(); var x = this.getX();
var y = this.getY(); var y = this.getY();
@ -925,7 +931,7 @@ Kinetic.Node = Kinetic.Class.extend({
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
*/ */
isDragging: function() { isDragging: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving; return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving;
}, },
/** /**
@ -997,7 +1003,7 @@ Kinetic.Node = Kinetic.Class.extend({
* transition completes * transition completes
*/ */
transitionTo: function(config) { transitionTo: function(config) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
/* /*
* clear transition if one is currently running for this * clear transition if one is currently running for this
@ -1108,14 +1114,14 @@ Kinetic.Node = Kinetic.Class.extend({
}, },
_listenDrag: function() { _listenDrag: function() {
this._dragCleanup(); this._dragCleanup();
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var that = this; var that = this;
this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) { this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) {
that._initDrag(); that._initDrag();
}); });
}, },
_initDrag: function() { _initDrag: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var stage = this.getStage(); var stage = this.getStage();
var pos = stage.getUserPosition(); var pos = stage.getUserPosition();
@ -1421,7 +1427,7 @@ Kinetic.Container = Kinetic.Node.extend({
* @param {Node} child * @param {Node} child
*/ */
add: function(child) { add: function(child) {
child._id = Kinetic.GlobalObject.idCounter++; child._id = Kinetic.Global.idCounter++;
child.index = this.children.length; child.index = this.children.length;
child.parent = this; child.parent = this;
@ -1429,7 +1435,7 @@ Kinetic.Container = Kinetic.Node.extend({
var stage = child.getStage(); var stage = child.getStage();
if(stage === undefined) { if(stage === undefined) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go.tempNodes.push(child); go.tempNodes.push(child);
} }
else { else {
@ -1440,7 +1446,7 @@ Kinetic.Container = Kinetic.Node.extend({
* pull in other nodes that are now linked * pull in other nodes that are now linked
* to a stage * to a stage
*/ */
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go._pullNodes(stage); go._pullNodes(stage);
} }
@ -1464,7 +1470,7 @@ Kinetic.Container = Kinetic.Node.extend({
stage._removeName(child); stage._removeName(child);
} }
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
for(var n = 0; n < go.tempNodes.length; n++) { for(var n = 0; n < go.tempNodes.length; n++) {
var node = go.tempNodes[n]; var node = go.tempNodes[n];
if(node._id === child._id) { if(node._id === child._id) {
@ -1648,7 +1654,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._super(config); this._super(config);
this._setStageDefaultProperties(); this._setStageDefaultProperties();
this._id = Kinetic.GlobalObject.idCounter++; this._id = Kinetic.Global.idCounter++;
this._buildDOM(); this._buildDOM();
this._bindContentEvents(); this._bindContentEvents();
@ -1660,7 +1666,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this.on('heightChange.kinetic', function() { this.on('heightChange.kinetic', function() {
this._resizeDOM(); this._resizeDOM();
}); });
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go.stages.push(this); go.stages.push(this);
this._addId(this); this._addId(this);
this._addName(this); this._addName(this);
@ -1670,7 +1676,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {function} func * @param {function} func
*/ */
onFrame: function(func) { onFrame: function(func) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
this.anim = { this.anim = {
func: func func: func
}; };
@ -1680,7 +1686,7 @@ Kinetic.Stage = Kinetic.Container.extend({
*/ */
start: function() { start: function() {
if(!this.animRunning) { if(!this.animRunning) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go._addAnimation(this.anim); go._addAnimation(this.anim);
go._handleAnimation(); go._handleAnimation();
this.animRunning = true; this.animRunning = true;
@ -1690,7 +1696,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* stop animation * stop animation
*/ */
stop: function() { stop: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go._removeAnimation(this.anim); go._removeAnimation(this.anim);
this.animRunning = false; this.animRunning = false;
}, },
@ -1705,7 +1711,7 @@ Kinetic.Stage = Kinetic.Container.extend({
*/ */
setSize: function() { setSize: function() {
// set stage dimensions // set stage dimensions
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
this.setAttrs(size); this.setAttrs(size);
}, },
/** /**
@ -1770,7 +1776,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* serialize stage and children as a JSON object * serialize stage and children as a JSON object
*/ */
toJSON: function() { toJSON: function() {
var go = Kinetic.GlobalObject; var type = Kinetic.Type;
function addNode(node) { function addNode(node) {
var obj = {}; var obj = {};
@ -1780,7 +1786,7 @@ Kinetic.Stage = Kinetic.Container.extend({
// serialize only attributes that are not function, image, DOM, or objects with methods // serialize only attributes that are not function, image, DOM, or objects with methods
for(var key in node.attrs) { for(var key in node.attrs) {
var val = node.attrs[key]; var val = node.attrs[key];
if(!go._isFunction(val) && !go._isElement(val) && !go._hasMethods(val)) { if(!type._isFunction(val) && !type._isElement(val) && !type._hasMethods(val)) {
obj.attrs[key] = val; obj.attrs[key] = val;
} }
} }
@ -1905,7 +1911,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {Object} point * @param {Object} point
*/ */
getIntersections: function() { getIntersections: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var arr = []; var arr = [];
var shapes = this.get('Shape'); var shapes = this.get('Shape');
@ -1987,8 +1993,8 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {Shape} shape * @param {Shape} shape
*/ */
_detectEvent: function(shape, evt) { _detectEvent: function(shape, evt) {
var isDragging = Kinetic.GlobalObject.drag.moving; var isDragging = Kinetic.Global.drag.moving;
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var pos = this.getUserPosition(); var pos = this.getUserPosition();
var el = shape.eventListeners; var el = shape.eventListeners;
var that = this; var that = this;
@ -2169,7 +2175,7 @@ Kinetic.Stage = Kinetic.Container.extend({
var time = date.getTime(); var time = date.getTime();
this.lastEventTime = time; this.lastEventTime = time;
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
if(!evt) { if(!evt) {
evt = window.event; evt = window.event;
} }
@ -2208,7 +2214,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* to the container * to the container
*/ */
_bindContentEvents: function() { _bindContentEvents: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var that = this; var that = this;
var events = ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'touchstart', 'touchmove', 'touchend']; var events = ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'touchstart', 'touchmove', 'touchend'];
@ -2393,7 +2399,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* end drag and drop * end drag and drop
*/ */
_endDrag: function(evt) { _endDrag: function(evt) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
if(go.drag.node) { if(go.drag.node) {
// handle dragend // handle dragend
if(go.drag.moving) { if(go.drag.moving) {
@ -2408,7 +2414,7 @@ Kinetic.Stage = Kinetic.Container.extend({
*/ */
_startDrag: function(evt) { _startDrag: function(evt) {
var that = this; var that = this;
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var node = go.drag.node; var node = go.drag.node;
if(node) { if(node) {
@ -2876,7 +2882,7 @@ Kinetic.Shape = Kinetic.Node.extend({
* shadows if needed * shadows if needed
*/ */
stroke: function() { stroke: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var appliedShadow = false; var appliedShadow = false;
var context = this.getContext(); var context = this.getContext();
@ -3138,7 +3144,7 @@ Kinetic.Shape = Kinetic.Node.extend({
* element is the y component * element is the y component
*/ */
intersects: function() { intersects: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
if(this.attrs.detectionType === 'path') { if(this.attrs.detectionType === 'path') {
@ -3333,7 +3339,7 @@ Kinetic.Rect = Kinetic.Shape.extend({
* set width and height * set width and height
*/ */
setSize: function() { setSize: function() {
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
this.setAttrs(size); this.setAttrs(size);
}, },
/** /**
@ -3437,10 +3443,10 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
* converts numeric radius into an object * converts numeric radius into an object
*/ */
_convertRadius: function() { _convertRadius: function() {
var go = Kinetic.GlobalObject; var type = Kinetic.Type;
var radius = this.getRadius(); var radius = this.getRadius();
// if radius is already an object then return // if radius is already an object then return
if(go._isObject(radius)) { if(type._isObject(radius)) {
return false; return false;
} }
@ -3448,7 +3454,7 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
* directly set radius attr to avoid * directly set radius attr to avoid
* duplicate attr change event * duplicate attr change event
*/ */
this.attrs.radius = go._getXY(radius); this.attrs.radius = type._getXY(radius);
} }
}); });
@ -4920,7 +4926,7 @@ Kinetic.Transition = function(node, config) {
for(var key in c) { for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') { if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse // if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) { if(Kinetic.Type._isObject(c[key])) {
obj[key] = {}; obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj); addTween(c[key], attrs[key], obj[key], rootObj);
} }

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

File diff suppressed because one or more lines are too long

8
src/Container.js
View File

@ -29,7 +29,7 @@ Kinetic.Container = Kinetic.Node.extend({
* @param {Node} child * @param {Node} child
*/ */
add: function(child) { add: function(child) {
child._id = Kinetic.GlobalObject.idCounter++; child._id = Kinetic.Global.idCounter++;
child.index = this.children.length; child.index = this.children.length;
child.parent = this; child.parent = this;
@ -37,7 +37,7 @@ Kinetic.Container = Kinetic.Node.extend({
var stage = child.getStage(); var stage = child.getStage();
if(stage === undefined) { if(stage === undefined) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go.tempNodes.push(child); go.tempNodes.push(child);
} }
else { else {
@ -48,7 +48,7 @@ Kinetic.Container = Kinetic.Node.extend({
* pull in other nodes that are now linked * pull in other nodes that are now linked
* to a stage * to a stage
*/ */
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go._pullNodes(stage); go._pullNodes(stage);
} }
@ -72,7 +72,7 @@ Kinetic.Container = Kinetic.Node.extend({
stage._removeName(child); stage._removeName(child);
} }
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
for(var n = 0; n < go.tempNodes.length; n++) { for(var n = 0; n < go.tempNodes.length; n++) {
var node = go.tempNodes[n]; var node = go.tempNodes[n];
if(node._id === child._id) { if(node._id === child._id) {

121
src/Global.js Normal file
View File

@ -0,0 +1,121 @@
///////////////////////////////////////////////////////////////////////
// Global Object
///////////////////////////////////////////////////////////////////////
/**
* Kinetic Namespace
* @namespace
*/
var Kinetic = {};
/**
* Kinetic Global
* @property {Object} Global
*/
Kinetic.Global = {
stages: [],
idCounter: 0,
tempNodes: [],
animations: [],
animIdCounter: 0,
animRunning: false,
maxDragTimeInterval: 20,
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
},
drag: {
moving: false,
node: undefined,
offset: {
x: 0,
y: 0
},
lastDrawTime: 0
},
_pullNodes: function(stage) {
var tempNodes = this.tempNodes;
for(var n = 0; n < tempNodes.length; n++) {
var node = tempNodes[n];
if(node.getStage() !== undefined && node.getStage()._id === stage._id) {
stage._addId(node);
stage._addName(node);
this.tempNodes.splice(n, 1);
n -= 1;
}
}
},
/*
* animation support
*/
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
this.animations.push(anim);
},
_removeAnimation: function(anim) {
var id = anim.id;
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
if(animations[n].id === id) {
this.animations.splice(n, 1);
return false;
}
}
},
_runFrames: function() {
var nodes = {};
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
anim.func(this.frame);
}
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
},
_animationLoop: function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
that._animationLoop();
});
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
}
};
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

32
src/Node.js
View File

@ -51,7 +51,7 @@ Kinetic.Node = Kinetic.Class.extend({
* drag and drop mode * drag and drop mode
*/ */
var stage = this.getStage(); var stage = this.getStage();
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
if(stage && go.drag.node && go.drag.node._id === this._id) { if(stage && go.drag.node && go.drag.node._id === this._id) {
stage._endDrag(); stage._endDrag();
} }
@ -171,7 +171,7 @@ Kinetic.Node = Kinetic.Class.extend({
* @param {Object} config * @param {Object} config
*/ */
setAttrs: function(config) { setAttrs: function(config) {
var go = Kinetic.GlobalObject; var type = Kinetic.Type;
var that = this; var that = this;
// set properties from config // set properties from config
if(config !== undefined) { if(config !== undefined) {
@ -188,14 +188,14 @@ Kinetic.Node = Kinetic.Class.extend({
* if property is a pure object (no methods), then add an empty object * if property is a pure object (no methods), then add an empty object
* to the node and then traverse * to the node and then traverse
*/ */
if(go._isObject(val) && !go._isArray(val) && !go._isElement(val) && !go._hasMethods(val)) { if(type._isObject(val) && !type._isArray(val) && !type._isElement(val) && !type._hasMethods(val)) {
/* /*
* since some properties can be strings or objects, e.g. * since some properties can be strings or objects, e.g.
* fill, we need to first check that obj is an object * fill, we need to first check that obj is an object
* before setting properties. If it's not an object, * before setting properties. If it's not an object,
* overwrite obj with an object literal * overwrite obj with an object literal
*/ */
if(!Kinetic.GlobalObject._isObject(obj[key])) { if(!Kinetic.Type._isObject(obj[key])) {
obj[key] = {}; obj[key] = {};
} }
@ -219,21 +219,21 @@ Kinetic.Node = Kinetic.Class.extend({
* - shadow offset * - shadow offset
*/ */
case 'offset': case 'offset':
var pos = go._getXY(val); var pos = type._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'scale': case 'scale':
var pos = go._getXY(val); var pos = type._getXY(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
break; break;
case 'points': case 'points':
that._setAttr(obj, key, go._getPoints(val)); that._setAttr(obj, key, type._getPoints(val));
break; break;
case 'crop': case 'crop':
var pos = go._getXY(val); var pos = type._getXY(val);
var size = go._getSize(val); var size = type._getSize(val);
that._setAttr(obj[key], 'x', pos.x); that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y); that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width); that._setAttr(obj[key], 'width', size.width);
@ -340,7 +340,7 @@ Kinetic.Node = Kinetic.Class.extend({
* @param {Object} point * @param {Object} point
*/ */
setPosition: function() { setPosition: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
this.setAttrs(pos); this.setAttrs(pos);
}, },
/** /**
@ -364,7 +364,7 @@ Kinetic.Node = Kinetic.Class.extend({
* y property * y property
*/ */
setAbsolutePosition: function() { setAbsolutePosition: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
/* /*
* save rotation and scale and * save rotation and scale and
* then remove them from the transform * then remove them from the transform
@ -407,7 +407,7 @@ Kinetic.Node = Kinetic.Class.extend({
* move node by an amount * move node by an amount
*/ */
move: function() { move: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var x = this.getX(); var x = this.getX();
var y = this.getY(); var y = this.getY();
@ -514,7 +514,7 @@ Kinetic.Node = Kinetic.Class.extend({
* determine if node is currently in drag and drop mode * determine if node is currently in drag and drop mode
*/ */
isDragging: function() { isDragging: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving; return go.drag.node !== undefined && go.drag.node._id === this._id && go.drag.moving;
}, },
/** /**
@ -586,7 +586,7 @@ Kinetic.Node = Kinetic.Class.extend({
* transition completes * transition completes
*/ */
transitionTo: function(config) { transitionTo: function(config) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
/* /*
* clear transition if one is currently running for this * clear transition if one is currently running for this
@ -697,14 +697,14 @@ Kinetic.Node = Kinetic.Class.extend({
}, },
_listenDrag: function() { _listenDrag: function() {
this._dragCleanup(); this._dragCleanup();
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var that = this; var that = this;
this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) { this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) {
that._initDrag(); that._initDrag();
}); });
}, },
_initDrag: function() { _initDrag: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var stage = this.getStage(); var stage = this.getStage();
var pos = stage.getUserPosition(); var pos = stage.getUserPosition();

4
src/Shape.js
View File

@ -51,7 +51,7 @@ Kinetic.Shape = Kinetic.Node.extend({
* shadows if needed * shadows if needed
*/ */
stroke: function() { stroke: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var appliedShadow = false; var appliedShadow = false;
var context = this.getContext(); var context = this.getContext();
@ -313,7 +313,7 @@ Kinetic.Shape = Kinetic.Node.extend({
* element is the y component * element is the y component
*/ */
intersects: function() { intersects: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var stage = this.getStage(); var stage = this.getStage();
if(this.attrs.detectionType === 'path') { if(this.attrs.detectionType === 'path') {

30
src/Stage.js
View File

@ -31,7 +31,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this._super(config); this._super(config);
this._setStageDefaultProperties(); this._setStageDefaultProperties();
this._id = Kinetic.GlobalObject.idCounter++; this._id = Kinetic.Global.idCounter++;
this._buildDOM(); this._buildDOM();
this._bindContentEvents(); this._bindContentEvents();
@ -43,7 +43,7 @@ Kinetic.Stage = Kinetic.Container.extend({
this.on('heightChange.kinetic', function() { this.on('heightChange.kinetic', function() {
this._resizeDOM(); this._resizeDOM();
}); });
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go.stages.push(this); go.stages.push(this);
this._addId(this); this._addId(this);
this._addName(this); this._addName(this);
@ -53,7 +53,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {function} func * @param {function} func
*/ */
onFrame: function(func) { onFrame: function(func) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
this.anim = { this.anim = {
func: func func: func
}; };
@ -63,7 +63,7 @@ Kinetic.Stage = Kinetic.Container.extend({
*/ */
start: function() { start: function() {
if(!this.animRunning) { if(!this.animRunning) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go._addAnimation(this.anim); go._addAnimation(this.anim);
go._handleAnimation(); go._handleAnimation();
this.animRunning = true; this.animRunning = true;
@ -73,7 +73,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* stop animation * stop animation
*/ */
stop: function() { stop: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
go._removeAnimation(this.anim); go._removeAnimation(this.anim);
this.animRunning = false; this.animRunning = false;
}, },
@ -88,7 +88,7 @@ Kinetic.Stage = Kinetic.Container.extend({
*/ */
setSize: function() { setSize: function() {
// set stage dimensions // set stage dimensions
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
this.setAttrs(size); this.setAttrs(size);
}, },
/** /**
@ -153,7 +153,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* serialize stage and children as a JSON object * serialize stage and children as a JSON object
*/ */
toJSON: function() { toJSON: function() {
var go = Kinetic.GlobalObject; var type = Kinetic.Type;
function addNode(node) { function addNode(node) {
var obj = {}; var obj = {};
@ -163,7 +163,7 @@ Kinetic.Stage = Kinetic.Container.extend({
// serialize only attributes that are not function, image, DOM, or objects with methods // serialize only attributes that are not function, image, DOM, or objects with methods
for(var key in node.attrs) { for(var key in node.attrs) {
var val = node.attrs[key]; var val = node.attrs[key];
if(!go._isFunction(val) && !go._isElement(val) && !go._hasMethods(val)) { if(!type._isFunction(val) && !type._isElement(val) && !type._hasMethods(val)) {
obj.attrs[key] = val; obj.attrs[key] = val;
} }
} }
@ -288,7 +288,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {Object} point * @param {Object} point
*/ */
getIntersections: function() { getIntersections: function() {
var pos = Kinetic.GlobalObject._getXY(Array.prototype.slice.call(arguments)); var pos = Kinetic.Type._getXY(Array.prototype.slice.call(arguments));
var arr = []; var arr = [];
var shapes = this.get('Shape'); var shapes = this.get('Shape');
@ -370,8 +370,8 @@ Kinetic.Stage = Kinetic.Container.extend({
* @param {Shape} shape * @param {Shape} shape
*/ */
_detectEvent: function(shape, evt) { _detectEvent: function(shape, evt) {
var isDragging = Kinetic.GlobalObject.drag.moving; var isDragging = Kinetic.Global.drag.moving;
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var pos = this.getUserPosition(); var pos = this.getUserPosition();
var el = shape.eventListeners; var el = shape.eventListeners;
var that = this; var that = this;
@ -552,7 +552,7 @@ Kinetic.Stage = Kinetic.Container.extend({
var time = date.getTime(); var time = date.getTime();
this.lastEventTime = time; this.lastEventTime = time;
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
if(!evt) { if(!evt) {
evt = window.event; evt = window.event;
} }
@ -591,7 +591,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* to the container * to the container
*/ */
_bindContentEvents: function() { _bindContentEvents: function() {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var that = this; var that = this;
var events = ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'touchstart', 'touchmove', 'touchend']; var events = ['mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'touchstart', 'touchmove', 'touchend'];
@ -776,7 +776,7 @@ Kinetic.Stage = Kinetic.Container.extend({
* end drag and drop * end drag and drop
*/ */
_endDrag: function(evt) { _endDrag: function(evt) {
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
if(go.drag.node) { if(go.drag.node) {
// handle dragend // handle dragend
if(go.drag.moving) { if(go.drag.moving) {
@ -791,7 +791,7 @@ Kinetic.Stage = Kinetic.Container.extend({
*/ */
_startDrag: function(evt) { _startDrag: function(evt) {
var that = this; var that = this;
var go = Kinetic.GlobalObject; var go = Kinetic.Global;
var node = go.drag.node; var node = go.drag.node;
if(node) { if(node) {

2
src/Transition.js
View File

@ -15,7 +15,7 @@ Kinetic.Transition = function(node, config) {
for(var key in c) { for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') { if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse // if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) { if(Kinetic.Type._isObject(c[key])) {
obj[key] = {}; obj[key] = {};
addTween(c[key], attrs[key], obj[key], rootObj); addTween(c[key], attrs[key], obj[key], rootObj);
} }

6
src/shapes/Ellipse.js
View File

@ -47,10 +47,10 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
* converts numeric radius into an object * converts numeric radius into an object
*/ */
_convertRadius: function() { _convertRadius: function() {
var go = Kinetic.GlobalObject; var type = Kinetic.Type;
var radius = this.getRadius(); var radius = this.getRadius();
// if radius is already an object then return // if radius is already an object then return
if(go._isObject(radius)) { if(type._isObject(radius)) {
return false; return false;
} }
@ -58,7 +58,7 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
* directly set radius attr to avoid * directly set radius attr to avoid
* duplicate attr change event * duplicate attr change event
*/ */
this.attrs.radius = go._getXY(radius); this.attrs.radius = type._getXY(radius);
} }
}); });

2
src/shapes/Rect.js
View File

@ -48,7 +48,7 @@ Kinetic.Rect = Kinetic.Shape.extend({
* set width and height * set width and height
*/ */
setSize: function() { setSize: function() {
var size = Kinetic.GlobalObject._getSize(Array.prototype.slice.call(arguments)); var size = Kinetic.Type._getSize(Array.prototype.slice.call(arguments));
this.setAttrs(size); this.setAttrs(size);
}, },
/** /**

124
src/GlobalObject.js → src/util/Type.js
View File

@ -1,116 +1,8 @@
/////////////////////////////////////////////////////////////////////// /*
// Global Object * utilities that determine data type and transform
/////////////////////////////////////////////////////////////////////// * one type into another
/**
* Kinetic Namespace
* @namespace
*/ */
var Kinetic = {}; Kinetic.Type = {
/**
* Kinetic Global Object
* @property {Object} GlobalObjet
*/
Kinetic.GlobalObject = {
stages: [],
idCounter: 0,
tempNodes: [],
animations: [],
animIdCounter: 0,
animRunning: false,
maxDragTimeInterval: 20,
frame: {
time: 0,
timeDiff: 0,
lastTime: 0
},
drag: {
moving: false,
node: undefined,
offset: {
x: 0,
y: 0
},
lastDrawTime: 0
},
_pullNodes: function(stage) {
var tempNodes = this.tempNodes;
for(var n = 0; n < tempNodes.length; n++) {
var node = tempNodes[n];
if(node.getStage() !== undefined && node.getStage()._id === stage._id) {
stage._addId(node);
stage._addName(node);
this.tempNodes.splice(n, 1);
n -= 1;
}
}
},
/*
* animation support
*/
_addAnimation: function(anim) {
anim.id = this.animIdCounter++;
this.animations.push(anim);
},
_removeAnimation: function(anim) {
var id = anim.id;
var animations = this.animations;
for(var n = 0; n < animations.length; n++) {
if(animations[n].id === id) {
this.animations.splice(n, 1);
return false;
}
}
},
_runFrames: function() {
var nodes = {};
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
anim.func(this.frame);
}
for(var key in nodes) {
nodes[key].draw();
}
},
_updateFrameObject: function() {
var date = new Date();
var time = date.getTime();
if(this.frame.lastTime === 0) {
this.frame.lastTime = time;
}
else {
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
}
},
_animationLoop: function() {
if(this.animations.length > 0) {
this._updateFrameObject();
this._runFrames();
var that = this;
requestAnimFrame(function() {
that._animationLoop();
});
}
else {
this.animRunning = false;
this.frame.lastTime = 0;
}
},
_handleAnimation: function() {
var that = this;
if(!this.animRunning) {
this.animRunning = true;
that._animationLoop();
}
else {
this.frame.lastTime = 0;
}
},
/* /*
* cherry-picked utilities from underscore.js * cherry-picked utilities from underscore.js
*/ */
@ -124,7 +16,6 @@ Kinetic.GlobalObject = {
return Object.prototype.toString.call(obj) == '[object Array]'; return Object.prototype.toString.call(obj) == '[object Array]';
}, },
_isObject: function(obj) { _isObject: function(obj) {
//return obj === Object(obj);
return (!!obj && obj.constructor == Object); return (!!obj && obj.constructor == Object);
}, },
_isNumber: function(obj) { _isNumber: function(obj) {
@ -313,10 +204,3 @@ Kinetic.GlobalObject = {
} }
} }
}; };
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();

2
tests/js/unitTests.js
View File

@ -1840,7 +1840,7 @@ Test.prototype.tests = {
test(darth.getHeight() === 100, 'height should be 100'); test(darth.getHeight() === 100, 'height should be 100');
test(darth.getOffset().x === 50, 'center offset x should be 50'); test(darth.getOffset().x === 50, 'center offset x should be 50');
test(darth.getOffset().y === 30, 'center offset y should be 30'); test(darth.getOffset().y === 30, 'center offset y should be 30');
test(Kinetic.GlobalObject._isElement(darth.getImage()), 'darth image should be an element'); test(Kinetic.Type._isElement(darth.getImage()), 'darth image should be an element');
var crop = null; var crop = null;
crop = darth.getCrop(); crop = darth.getCrop();