var NodePaddingW = 3;
var NodePaddingH = 3;
var NodeMarginW = 15;
var NodeMarginH = 3;
var NodeRadius = 5;
var NodeFontHeight = 15;
var NodeBGColor = "yellow";
var NodeTextColor = "black";
var RootNode = {"text":"hello html5", "child":[{"text":"html5 is gooooooood", "child":null}
, {"text":"this is true", "child":[{"text":"beonit", "child":null}
, {"text":"enoch", "child":[{"text":"beonit", "child":null}
, {"text":"loves", "child":null}]
}
, {"text":"loves", "child":null}]
}, {"text":"test", "child":null}]
};
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
if (stroke) {
ctx.stroke();
}
if (fill) {
ctx.fill();
}
}
function measureNode(node){
node["height"] = 0;
// no child
if( node.child == null ){
node.height = NodeFontHeight + NodePaddingH * 2 + NodeMarginH * 2;
console.log("text:" + node.text + " nodeHeight:", node.height);
return node.height;
}
// has child
var childLen = node.child.length;
for( var i in node.child ){
node.height += measureNode(node.child[i]);
}
console.log("text:" + node.text + " nodeHeight:", node.height);
return node.height;
}
function nodeDraw(ctx, x, y, node){
// calc rect
var calcRt = ctx.measureText(node.text);
// console.log("text:" + node.text + " pos:" + x + ", " + y + " width:" + calcRt.width + " height:" + node.height);
// draw rect
ctx.fillStyle = NodeBGColor;
roundRect(ctx, x-NodePaddingW, y-NodePaddingH, calcRt.width + NodePaddingW*2, NodeFontHeight + NodePaddingH*2, NodeRadius, true, true);
// draw text
ctx.fillStyle = NodeTextColor;
ctx.fillText(node.text, x, y);
// draw child
if( node.child == null )
return NodeFontHeight + NodePaddingH * 2 + NodeMarginH * 2;
var childLen = node.child.length;
var startY = y - node.height/2 + NodeMarginH * 2;
var childHeight = 0;
for( var i in node.child ){
childHeight = node.child[i].height;
console.log(node.text, "child", childLen, "startY", startY, "childHeight", childHeight);
nodeDraw(ctx, x + calcRt.width + NodePaddingW * 2 + NodeMarginW, startY + childHeight/2, node.child[i]);
startY += childHeight;
}
}
function main(){
var canvas = document.getElementById('canvas');
if (!canvas.getContext){
return;
}
var ctx = canvas.getContext('2d');
ctx.font = NodeFontHeight + "px sans-serif";
ctx.textBaseline = "top";
ctx.fillStyle = "yellow";
console.log("make node start");
console.log("measure node start");
measureNode(RootNode);
console.log("draw node start");
nodeDraw(ctx, 100, 100, RootNode);
}