The Display (object) Class

This is the code in my K.Display class

/**
 * ...
 * @author mi_kuncoro@yahoo.co.id
 * @include k.js
 * @include events.js
 * @include geom.js
*/
(function(){
if (!K) {
alert("You must include k.js");
K = {};
} else {
var s = ""
if (!K.Point)  s += "You must include geom.js";
if (!K.EventDispatcher)  s += "You must include events.js";
if (s.length > 0) console.log(s);
}
});
/*
 * Base class for display object
 * - by default has an EventDispatcher
*/
K.Display = function()
{
this.name = "instance_" + K.incrementCounter().toString();
this.x = 0;
this.y = 0;
this.rotation = 0;
this.matrix = new K.Matrix();
this.children = [];
this.eventDispatcher = new K.EventDispatcher(this);
this.order = 1;
};
K.Display.prototype = {
constructor:K.Display,
name:String="",
eventDispatcher:null,
data:null,
x:0,
y:0,
z:0,
width:1,
height:1,
rotation:0,
scaleX:1,
scaleY:1,
order:1,
orderLevel:1,
canvasX:0,
canvasY:0,
canvas:null,
context:null,
getContext:function() {
if (this.context == null) {
if (this.canvas == null) {
this.canvas = document.createElement("canvas");
this.canvas.width = this.width;
this.canvas.height = this.height;
}
else if (this.canvas.width <= 1) {
this.canvas.width = this.width;
this.canvas.height = this.height;
}
this.context = this.canvas.getContext("2d");
}
return this.context;
},
backgroundColor:null,
children:[],
addChild:function(o){
o.parent = this;
o.orderLevel = this.orderLevel + 1;
o.order = (this.children.length + 1) * o.orderLevel + this.order;
this.children.push(o);
},
removeChildAt:function(i) {
this.children.splice(i, 1);
},
removeChild:function(o) {
this.removeChildAt(this.chidren.indexOf(o));
},
sortByOrder:function(a, b) {
if (a.dispatcher.order < b.dispatcher.order) return -1;
if (a.dispatcher.order > b.dispatcher.order) return 1;
return 0;
},
arrangeChildOrder:function() {
for (var i = 0; i < this.children.length; i++) {
this.children[i].order = (i + 1) * o.orderLevel + this.order;
}
},
swapChildren:function(a, b) {
var ai = this.children.indexOf(a);
var bi = this.children.indexOf(b);
this.children[ai] = b;
this.children[bi] = a;
a.order = (bi + 1) * a.orderLevel + this.order;
b.order = (ai + 1) * b.orderLevel + this.order;
},
parent:null,
matrix:null,
setSize:function(ww, hh) {
this.width = ww;
this.height = hh;
if (this.canvas) {
//this.canvas = document.createElement("canvas");
this.canvas.width = ww;
this.canvas.height = hh;
this.context = this.canvas.getContext("2d");
}
},
globalToLocal:function(xx, yy) {
var m = this.matrix.clone().invert();
return m.transformPoint(xx, yy);
},
localToGlobal:function(xx, yy) {
return this.matrix.transformPoint(xx, yy);
},
hitTestPoint:function(xx, yy) {
if (this.canvas ) {
if (this.canvas.width > 1) {
var p = this.globalToLocal(xx, yy);
var d = this.context.getImageData(p.x-this.canvasX, p.y-this.canvasY, 1, 1).data;
if (d[3] >= 1) return true;
}
}
if (this.children.length > 0) {
var ret = false;
for (var i = 0; i < this.children.length; i++) {
if (this.children[i].hitTestPoint(xx, yy) == true) {
ret = true;
break;
}
}
return ret;
}
return false;
},
paint:function(c) {
var m = this.matrix;
m.identity();
if (this.scaleX != 1 || this.scaleY != 1) m.prependScale(this.scaleX, this.scaleY);
if (this.rotation != 0) m.prependRotation(this.rotation);
m.prependTranslation(this.x, this.y);
if (this.parent) m.multiply(this.parent.matrix);
var tc = this.canvas;
if (tc && tc.width > 1) {
c.save();
c.setTransform(m.a, m.b, m.c, m.d, m.e, m.f);
c.drawImage(tc, 0, 0, tc.width, tc.height, this.canvasX, this.canvasY, tc.width, tc.height);
c.restore();
}
if (this.children.length > 0) {
for (var i = 0; i < this.children.length; i++) {
this.children[i].paint(c);
}
}
}
};

/*
** Stage
*/
K.Stage = function() {
this.name = "stage";
this.x = 0;
this.y = 0;
this.rotation = 0;
this.matrix = new K.Matrix();
this.children = [];
this.eventDispatcher = new K.EventDispatcher(this);
this.order = 1;
this.level = 0;
};
K.Stage.prototype = K.cloneObject(K.Display.prototype);
K.Stage.prototype.constructor = K.Stage;
K.Stage.prototype.paint = function() {
var c = this.context;
c.fillStyle = this.backgroundColor;
c.fillRect(0, 0, this.canvas.width, this.canvas.height);
if (this.children.length > 0) {
for (var i = 0; i < this.children.length; i++) {
this.children[i].paint(c);
}
}
};

K.stage = new K.Stage();
K.getCanvas = function() {
return K.stage.canvas;
};
K.setCanvas = function(cvs) {
K.stage.canvas = cvs;
K.stage.context = cvs.getContext("2d");
K.stage.width = cvs.width;
K.stage.height = cvs.height;
};
K.getContext = function() {
return K.stage.getContext();
};
/*
 * class to hold SpriteSheet sheet data
*/
K.SpriteSheet = function()
{
this.animations = {};
this.frames = [];
this.image = null;
this.maxWidth = 100;
this.maxHeight = 100;
this.addAnimation = function(animName, start, end, loop, next) {
this.animations[animname] = {name:animName, start:start, end:end, loop:loop, next:next};
};
this.addFrame = function(xx, yy, ww, hh, offsetx, offsety) {
frames.push({x:xx, y:yy, width:ww, height:hh, offsetX:offsetx, offsety:offsety});
};
this.dispose = function() {
this.image = null;
this.animations = null;
this.frames.length = 0;
};
/*
* this drawing ignoring offset values.
* uses to draw frame at K.Display.context
*/
this.drawFrame = function(frameIndex, context) {
var f = this.frames[f];
context.clearRect(0, 0, this.maxWidth, this.maxHeight);
context.drawImage(this.image, f.x, f.y, f.width, f.height, 0, 0, f.width, f.height);
};
};