[canviz] r491 committed - fix dom text Y-coordinate by measuring the actual baseline

[can...@googlecode.com]

Revision: 491
Author: ryandesign.com
Date: Tue Sep 17 18:46:18 2013 UTC
Log: fix dom text Y-coordinate by measuring the actual baseline

http://code.google.com/p/canviz/source/detail?r=491

Added:
/canviz/trunk/src/getBaseline.js
Modified:
/canviz/trunk/Jakefile
/canviz/trunk/src/Entity.js

=======================================
--- /dev/null
+++ /canviz/trunk/src/getBaseline.js Tue Sep 17 18:46:18 2013 UTC
@@ -0,0 +1,39 @@
+// Firefox (23) seems to cap the maximum font size at 1000px
+var SIZE = 500;
+
+var cache = {};
+
+function getBaseline(fontFamily, fontSize, fontWeight, fontStyle) {
+ fontWeight = fontWeight || 'normal';
+ fontStyle = fontStyle || 'normal';
+ cache[fontFamily] = cache[fontFamily] || {};
+ cache[fontFamily][fontWeight] = cache[fontFamily][fontWeight] || {};
+ var baseline = cache[fontFamily][fontWeight][fontStyle];
+ if (!baseline) {
+ var doc = document;
+ var body = doc.getElementsByTagName('body')[0];
+ var div = doc.createElement('div'), divStyle = div.style;
+ var span1 = div.appendChild(doc.createElement('span')), span1Style =
span1.style;
+ var span2 = div.appendChild(doc.createElement('span')), span2Style =
span2.style;
+ divStyle.left = 0;
+ divStyle.position = 'absolute';
+ divStyle.top = 0;
+ span1Style.fontFamily = span2Style.fontFamily = fontFamily;
+ span1Style.fontSize = 2 * SIZE + 'px';
+ span2Style.fontSize = SIZE + 'px';
+ span1Style.fontStyle = span2Style.fontStyle = fontStyle;
+ span1Style.fontWeight = span2Style.fontWeight = fontWeight;
+ span1Style.padding = span2Style.padding = 0;
+ span1Style.position = span2Style.position = 'relative';
+ span1Style.verticalAlign = span2Style.verticalAlign = 'baseline';
+ divStyle.visibility = span1Style.visibility = span2Style.visibility
= 'hidden';
+ span1.appendChild(doc.createTextNode('a'));
+ span2.appendChild(doc.createTextNode('a'));
+ body.appendChild(div);
+ baseline = cache[fontFamily][fontWeight][fontStyle] = (span2.offsetTop
- span1.offsetTop) / SIZE;
+ body.removeChild(div);
+ }
+ return baseline * fontSize;
+}
+
+module.exports = getBaseline;
=======================================
--- /canviz/trunk/Jakefile Tue Aug 27 12:37:23 2013 UTC
+++ /canviz/trunk/Jakefile Tue Sep 17 18:46:18 2013 UTC
@@ -29,6 +29,7 @@
'src/debug.js',
'src/Edge.js',
'src/Entity.js',
+ 'src/getBaseline.js',
'src/Graph.js',
'src/hsvToRgbColor.js',
'src/Image.js',
=======================================
--- /canviz/trunk/src/Entity.js Tue Sep 17 01:16:29 2013 UTC
+++ /canviz/trunk/src/Entity.js Tue Sep 17 18:46:18 2013 UTC
@@ -241,8 +241,6 @@
case 'dom':
if (!redrawCanvasOnly) {
str = escapeHtml(str).replace(/ /g, ' ');
- var left = this.canviz.marginX + bbScale *
(this.canviz.paddingX + x - textAlignIndex * textWidth);
- var top = this.canviz.marginY + bbScale *
(this.canviz.paddingY + (this.canviz.invertY ? this.canviz.height -
baseline : baseline) - fontSize);
var text;
var href = this.getAttr('URL', true) ||
this.getAttr('href', true);
if (href) {
@@ -270,11 +268,11 @@
style.fontSize = ctxScale * bbScale * fontSize
+ 'px';
style.fontStyle = textStyle &
TEXT_ITALIC ? 'italic' : 'normal';
style.fontWeight = textStyle &
TEXT_BOLD ? 'bold' : 'normal';
- style.left = ctxScale * left + 'px';
+ style.left = ctxScale * (this.canviz.marginX +
bbScale * (this.canviz.paddingX + x - textAlignIndex * textWidth)) + 'px';
style.position = 'absolute';
style.textAlign = textAlign;
style.textDecoration = textStyle &
TEXT_UNDERLINE ? 'underline' : 'none';
- style.top = ctxScale * top + 'px';
+ style.top = ctxScale * (this.canviz.marginY +
bbScale * (this.canviz.paddingY + (this.canviz.invertY ? this.canviz.height
- baseline : baseline) - getBaseline(fontFamily, fontSize,
style.fontWeight, style.fontStyle))) + 'px';
style.width = ctxScale * bbScale * 2 * textWidth
+ 'px';
if (strokeColor.opacity < 1) setOpacity(text,
strokeColor.opacity);
this.canviz.elements.appendChild(text);
@@ -455,6 +453,7 @@
var debug = require('./debug.js');
var Ellipse = require('./path/Ellipse.js');
var escapeHtml = require('escape-html');
+var getBaseline = require('./getBaseline.js');
var hsvToRgbColor = require('./hsvToRgbColor.js');
var objectKeys = require('./path/objectKeys.js');
var parseHexColor = require('./parseHexColor.js');