lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-10-15 04:14:52 +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
Download Patch File Download Diff File Expand all files Collapse all files

8
src/Container.js
View File

@@ -29,7 +29,7 @@ Kinetic.Container = Kinetic.Node.extend({
* @param {Node} child
*/
add: function(child) {
child._id = Kinetic.GlobalObject.idCounter++;
child._id = Kinetic.Global.idCounter++;
child.index = this.children.length;
child.parent = this;
@@ -37,7 +37,7 @@ Kinetic.Container = Kinetic.Node.extend({
var stage = child.getStage();
if(stage === undefined) {
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
go.tempNodes.push(child);
}
else {
@@ -48,7 +48,7 @@ Kinetic.Container = Kinetic.Node.extend({
* pull in other nodes that are now linked
* to a stage
*/
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
go._pullNodes(stage);
}
@@ -72,7 +72,7 @@ Kinetic.Container = Kinetic.Node.extend({
stage._removeName(child);
}
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
for(var n = 0; n < go.tempNodes.length; n++) {
var node = go.tempNodes[n];
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
*/
var stage = this.getStage();
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
if(stage && go.drag.node && go.drag.node._id === this._id) {
stage._endDrag();
}
@@ -171,7 +171,7 @@ Kinetic.Node = Kinetic.Class.extend({
* @param {Object} config
*/
setAttrs: function(config) {
var go = Kinetic.GlobalObject;
var type = Kinetic.Type;
var that = this;
// set properties from config
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
* 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.
* fill, we need to first check that obj is an object
* before setting properties. If it's not an object,
* overwrite obj with an object literal
*/
if(!Kinetic.GlobalObject._isObject(obj[key])) {
if(!Kinetic.Type._isObject(obj[key])) {
obj[key] = {};
}
@@ -219,21 +219,21 @@ Kinetic.Node = Kinetic.Class.extend({
* - shadow offset
*/
case 'offset':
var pos = go._getXY(val);
var pos = type._getXY(val);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'scale':
var pos = go._getXY(val);
var pos = type._getXY(val);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
break;
case 'points':
that._setAttr(obj, key, go._getPoints(val));
that._setAttr(obj, key, type._getPoints(val));
break;
case 'crop':
var pos = go._getXY(val);
var size = go._getSize(val);
var pos = type._getXY(val);
var size = type._getSize(val);
that._setAttr(obj[key], 'x', pos.x);
that._setAttr(obj[key], 'y', pos.y);
that._setAttr(obj[key], 'width', size.width);
@@ -340,7 +340,7 @@ Kinetic.Node = Kinetic.Class.extend({
* @param {Object} point
*/
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);
},
/**
@@ -364,7 +364,7 @@ Kinetic.Node = Kinetic.Class.extend({
* y property
*/
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
* then remove them from the transform
@@ -407,7 +407,7 @@ Kinetic.Node = Kinetic.Class.extend({
* move node by an amount
*/
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 y = this.getY();
@@ -514,7 +514,7 @@ Kinetic.Node = Kinetic.Class.extend({
* determine if node is currently in drag and drop mode
*/
isDragging: function() {
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
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
*/
transitionTo: function(config) {
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
/*
* clear transition if one is currently running for this
@@ -697,14 +697,14 @@ Kinetic.Node = Kinetic.Class.extend({
},
_listenDrag: function() {
this._dragCleanup();
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
var that = this;
this.on('mousedown.kinetic_initdrag touchstart.kinetic_initdrag', function(evt) {
that._initDrag();
});
},
_initDrag: function() {
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
var stage = this.getStage();
var pos = stage.getUserPosition();

4
src/Shape.js
View File

@@ -51,7 +51,7 @@ Kinetic.Shape = Kinetic.Node.extend({
* shadows if needed
*/
stroke: function() {
var go = Kinetic.GlobalObject;
var go = Kinetic.Global;
var appliedShadow = false;
var context = this.getContext();
@@ -313,7 +313,7 @@ Kinetic.Shape = Kinetic.Node.extend({
* element is the y component
*/
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();
if(this.attrs.detectionType === 'path') {

30
src/Stage.js
View File

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

2
src/Transition.js
View File

@@ -15,7 +15,7 @@ Kinetic.Transition = function(node, config) {
for(var key in c) {
if(key !== 'duration' && key !== 'easing' && key !== 'callback') {
// if val is an object then traverse
if(Kinetic.GlobalObject._isObject(c[key])) {
if(Kinetic.Type._isObject(c[key])) {
obj[key] = {};
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
*/
_convertRadius: function() {
var go = Kinetic.GlobalObject;
var type = Kinetic.Type;
var radius = this.getRadius();
// if radius is already an object then return
if(go._isObject(radius)) {
if(type._isObject(radius)) {
return false;
}
@@ -58,7 +58,7 @@ Kinetic.Ellipse = Kinetic.Shape.extend({
* directly set radius attr to avoid
* 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
*/
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);
},
/**

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

@@ -1,116 +1,8 @@
///////////////////////////////////////////////////////////////////////
// Global Object
///////////////////////////////////////////////////////////////////////
/**
* Kinetic Namespace
* @namespace
/*
* utilities that determine data type and transform
* one type into another
*/
var Kinetic = {};
/**
* 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;
}
},
Kinetic.Type = {
/*
* cherry-picked utilities from underscore.js
*/
@@ -124,7 +16,6 @@ Kinetic.GlobalObject = {
return Object.prototype.toString.call(obj) == '[object Array]';
},
_isObject: function(obj) {
//return obj === Object(obj);
return (!!obj && obj.constructor == Object);
},
_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);
};
})();