rendering box too

bgrins · May 15, 2011 · 6d1c616 · 6d1c616
1 parent a16227f
commit 6d1c616
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 25 deletions.
diff --git a/server/scripts/h2.js b/server/scripts/h2.js
@@ -112,9 +112,36 @@ function getLetterCoords(el, offset) {
 	return rect;
 }
 
-function el(dom) {	
+function el(dom, onready) {	
+
+	this.dom = dom;	
+	this.initializeDOM();
+
+	var textNodes = this.textNodes = [];
+	var childNodes = dom.childNodes;
+	for (var j = 0, l = childNodes.length; j < l; j++) {
+		if (childNodes[j].nodeType == 3) {
+			textNodes.push(childNodes[j]);
+		}
+	}
+
+	log("inited el", this);
+
+	// TODO: order children by z index for rendering
+	this.children = $(dom).children().map(function() {
+		return new el(this);
+	});
+
+
+	if (onready) {
+		onready(this);
+	}
+}
+
+el.prototype.initializeDOM = function() {
+	var dom = this.dom;
+	var $dom = $(this.dom);
 	var css = this.css = { };
-	this.dom = dom;
 
 	var computedStyleNormal = computedStyle(dom, styleAttributes);
 	for (var i in computedStyleNormal) {
@@ -137,25 +164,43 @@ function el(dom) {
 		css.fontSize + "px " + css.fontFamily
 	);
 
-	var textNodes = this.textNodes = [];
-	var childNodes = dom.childNodes;
-	for (var j = 0, l = childNodes.length; j < l; j++) {
-		if (childNodes[j].nodeType == 3) {
-			textNodes.push(childNodes[j]);
-		}
-	}
+	this.offset = $dom.offset();
+	this.height = $dom.height();
+	this.width = $dom.width();
 
-	log("inited el", this, css, this.children);
-	this.children = $(dom).children().map(function() {
-		return new el(this);
-	});
+	// outerHeight: Full height, but without the margins
+	css.outerHeight = 
+		this.height + 
+		css.paddingTop +
+		css.paddingBottom +
+		css.borderTopWidth +
+		css.borderBottomWidth;
 
-	// TODO: order children by z index for rendering
-}
+	// outerHeightMargins: The total bounding height of the object
+	css.outerHeightMargins = 
+		css.outerHeight + 
+		css.marginTop + 
+		css.marginBottom;
+
+	// outerWidth: Full width, but without the margins
+	css.outerWidth = 
+		this.width + 
+		css.paddingLeft +
+		css.paddingRight +
+		css.borderLeftWidth + 
+		css.borderRightWidth;
+
+	// outerWidthMargins: The total bounding width of the object
+	css.outerWidthMargins = 
+		css.outerWidth + 
+		css.marginLeft +
+		css.marginRight;		
+};
 
 el.prototype.render = function(ctx) {
 
 	this.renderBox(ctx);
+	this.renderBorders(ctx);
 	this.renderText(ctx);
 
 	var children = this.children;
@@ -167,7 +212,14 @@ el.prototype.render = function(ctx) {
 el.prototype.renderBox = function(ctx) {
 
 	// Render borders and background
-
+
+	var css = this.css;
+
+
+	log(css.backgroundColor);
+	ctx.fillStyle = css.backgroundColor;
+
+	ctx.fillRect(this.offset.left, this.offset.top, css.outerWidth, css.outerHeight);
 };
 
 el.prototype.renderText = function(ctx) {
@@ -197,8 +249,44 @@ el.prototype.renderText = function(ctx) {
 	}
 };
 
-function initialize(doc, cb) {
+el.prototype.renderBorders = function(ctx) {
+	var offsetLeft = this.offset.left;
+	var offsetTop = this.offset.top;
+	var css = this.css;
+	var borderLeftWidth = css.borderLeftWidth;
+	if (borderLeftWidth) {
+		ctx.fillStyle = css.borderLeftColor;
+		ctx.fillRect(
+			offsetLeft, offsetTop, 
+			borderLeftWidth, css.outerHeight);
+	}
+
+	var borderTopWidth = css.borderTopWidth;
+	if (borderTopWidth) {		
+		ctx.fillStyle = css.borderTopColor;
+		ctx.fillRect(
+			offsetLeft, offsetTop, 
+			css.outerWidth, borderTopWidth);
+	}
+
+	var borderBottomWidth = css.borderBottomWidth;
+	if (borderBottomWidth) {		
+		ctx.fillStyle = css.borderBottomColor;
+		ctx.fillRect(
+			offsetLeft, offsetTop + css.outerHeight - borderBottomWidth, 
+			css.outerWidth, borderBottomWidth);
+	}
+
+	var borderRightWidth = css.borderRightWidth;
+	if (borderRightWidth) {		
+		ctx.fillStyle = css.borderRightColor;
+		ctx.fillRect(
+			offsetLeft + css.outerWidth - borderRightWidth, 
+			offsetTop, borderRightWidth, css.outerHeight);
+	}
+};
 
+function initialize(doc, cb) {
 	var body = doc.body;
 	var canvas = doc.createElement("canvas");
 	var ctx = canvas.getContext("2d");
@@ -213,10 +301,10 @@ function initialize(doc, cb) {
 	ctx.fillStyle = "rgba(255,0,0,.2)";
 	ctx.fillRect(0, 0, width, height);
 
-	var bodyElement = new el(body);
-	bodyElement.render(ctx);
-
-	cb(canvas);
+	new el(body, function(bodyElement) {
+		bodyElement.render(ctx);
+		cb(canvas);
+	});
 }
 
 function render(doc) {
@@ -247,8 +335,9 @@ if (window.parent != window) {
 
 	var container = window.frameElement.parentNode;
 	var parentDoc = window.parent.document;
-
-	render(parentDoc);
+	$(document).ready(function() {
+		render(parentDoc);
+	});
 }
 
 })();
diff --git a/server/scripts/loader.js b/server/scripts/loader.js
@@ -1,13 +1,14 @@
 window.h2c = {
 	key: '_adf2',
 	domain: null,
+	cache: false,
 	frameHTML: function() {
 		var html = [];
 		var scriptPath = "192.168.0.169/~brian/html2canvas/server/scripts/";
 		var host = (("https:" == document.location.protocol) ? "https://" : "http://");
 		var src = host + scriptPath + "compiled.js";
 		var src1 = host + scriptPath + "jquery-1.6.1.min.js";
-		var src2 = host + scriptPath + "h2.js";
+		var src2 = host + scriptPath + "h2.js" + (h2c.cache ? "" : "?dt=" + (new Date()).getTime());
 		var flashcanvas = host + scriptPath + "flashcanvaspro/flashcanvas.js";
 
 

diff --git a/server/tests/font.html b/server/tests/font.html
@@ -14,6 +14,7 @@
   #el1 { z-index:10; top:20px; left:20px; background:red;}
   #el2 { z-index:11; background:blue; }
   #background {z-index:-1; position:absolute; top:0; left:0;}
+  .message { background-color: orange; padding:10px; margin:50px; border: dashed 4px #000; }
   </style>
 </head>
 
@@ -32,7 +33,9 @@ <h2>Better CSS Font Stacks</h2>
 
       <li><a href="#comments">304 Comments</a></li>
     </ul>
-
+	<p class='message'>
+		Hey, this is a message;
+	</p>
     <p id='ptag' style='text-align:right;border-top:solid 10px; margin-left:5px; padding-top:6px; margin-top:3px; '>One aspec