Permalink
Browse files

New builds with latest patches.

  • Loading branch information...
borgar committed Jul 4, 2012
1 parent e259475 commit fd7e2580003e522514758152a88637fcb473c552
Showing with 144 additions and 66 deletions.
  1. +143 −65 protovis-msie.js
  2. +1 −1 protovis-msie.min.js
View
@@ -96,7 +96,7 @@ var vml = {
var t = /translate\((\d+(?:\.\d+)?)(?:,(\d+(?:\.\d+)?))?\)/.exec( attr.transform );
if ( t && t[1] ) { o.translate_x = parseFloat( t[1] ); }
if ( t && t[2] ) { o.translate_y = parseFloat( t[2] ); }
- var r = /rotate\((\d+\.\d+|\d+)\)/.exec( attr.transform );
+ var r = /rotate\((-?\d+\.\d+|-?\d+)\)/.exec( attr.transform );
if ( r ) { o.rotation = parseFloat( r[1] ) % 360; }
// var scale_x = 1, scale_y = 1,
// var s = /scale\((\d+)(?:,(\d+))?\)/i.exec( value );
@@ -177,6 +177,19 @@ var vml = {
vml.path( elm, attr.d );
vml.fill( elm, attr );
vml.stroke( elm, attr );
+ if ( d.rotation ) {
+ var r = (~~d.rotation % 360) * vml.d2r,
+ ct = Math.cos(r),
+ st = Math.sin(r);
+ vml.skew( elm, [
+ ct.toFixed( 8 ), -st.toFixed( 8 ),
+ st.toFixed( 8 ), ct.toFixed( 8 ),
+ 0, 0
+ ].join(','));
+ }
+ else {
+ vml.skew( elm, "" );
+ }
},
css: "top:0px;left:0px;width:1000px;height:1000px"
},
@@ -226,6 +239,8 @@ var vml = {
},
// this allows reuse of the createElement function for actual VML
+ "vml:textpath": { rewrite: 'textpath' },
+ "vml:skew": { rewrite: 'skew' },
"vml:path": { rewrite: 'path' },
"vml:stroke": { rewrite: 'stroke' },
"vml:fill": { rewrite: 'fill' }
@@ -315,6 +330,20 @@ var vml = {
return p;
},
+ skew: function ( elm, matrix ) {
+ var p = elm.getElementsByTagName( 'skew' )[0];
+ if ( !p ) {
+ p = elm.appendChild( vml.createElement( 'vml:skew' ) );
+ p.origin = "-0.5 -0.5";
+ p.on = true;
+ }
+ if ( arguments.length > 1 ) {
+ p.setAttribute('matrix', matrix);
+ }
+ return p;
+ },
+
+
init: function () {
if ( !vml.text_shim ) {
@@ -362,10 +391,11 @@ var vml = {
var bits = p.match( /([MLHVCSQTAZ][^MLHVCSQTAZ]*)/gi );
var np = [], lastcurve = [];
for ( var i=0,bl=bits.length; i<bl; i++ ) {
- var itm = bits[i],
- op = itm.charAt( 0 ),
- args = itm.substring( 1 ).split( /[, ]/ );
-
+ var itm = bits[i]
+ , op = itm.charAt( 0 )
+ , args = itm.substring( 1 ).split( /[, ]/ )
+ , argi = 0
+ ;
switch ( op ) {
case 'M': // moveto (absolute)
@@ -395,14 +425,18 @@ var vml = {
break;
case "L": // lineTo (absolute)
- op = 'l';
- args = [ (x = round( args[0] )),
- (y = round( args[1] )) ];
+ op = '';
+ while ( argi < args.length ) {
+ np.push( 'l', (x = round( args[argi++] )) + ',' +
+ (y = round( args[argi++] )) );
+ }
break;
case "l": // lineTo (relative)
- op = 'l';
- args = [ (x = x + round( args[0] )),
- (y = y + round( args[1] )) ];
+ op = '';
+ while ( argi < args.length ) {
+ np.push( 'l', (x = x + round( args[argi++] )) + ',' +
+ (y = y + round( args[argi++] )) );
+ }
break;
case "H": // horizontal lineto (absolute)
@@ -502,7 +536,9 @@ var vml = {
op = '';
args = [];
}
- np.push( op, args.join(',') );
+ if ( op ) {
+ np.push( op, args.join(',') );
+ }
}
return ( vml._pathcache[p] = (np.join('') + 'e') );
}
@@ -928,65 +964,107 @@ pv.VmlScene.label = function(scenes) {
if ( s.cursor ) { attr.cursor = s.cursor; }
// measure text
- var txt = s.text.replace( /\s+/g, '\xA0' );
- var label = vml.text_dims( txt, s.font );
+ var txt = s.text.replace( /\s+/g, '\xA0' )
+ , label = vml.text_dims( txt, s.font )
+ , dx1 = 0
+ , dx2 = 100
+ , dy = 0
+ , vTextAlign = 'left'
+ ;
+ ;
+
+ // rotated text
+ if ( s.textAngle ) {
+
+ if ( s.textBaseline === 'top' ) {
+ dy += s.textMargin + ( label.fontsize * 0.4 );
+ }
+ else if ( s.textBaseline === 'bottom' ) {
+ dy -= s.textMargin + ( label.fontsize * 0.33 );
+ }
- var dx = 0, dy = 0;
+ if ( s.textAlign === 'center' ) {
+ dx1 = -label.width / 2;
+ dx2 = label.width;
+ }
+ else if ( s.textAlign === 'right' ) {
+ dx1 = -s.textMargin;
+ dx2 = -( s.textMargin + label.width );
+ vTextAlign = 'right';
+ }
+ else if ( s.textAlign === 'left' ) {
+ dx1 = s.textMargin;
+ dx2 = s.textMargin + label.width;
+ }
- if ( s.textBaseline === 'middle' ) {
- dy -= label.fontsize / 2;
- }
- else if ( s.textBaseline === 'top' ) {
- dy += s.textMargin;
- }
- else if ( s.textBaseline === 'bottom' ) {
- dy -= s.textMargin + label.fontsize;
- }
+ // create element
+ var rot = ( s.textAngle ) ? " rotate(" + 180 * s.textAngle / Math.PI + ")" : "";
+ e = this.expect(e, "path", {
+ "pointer-events": s.events,
+ "cursor": s.cursor,
+ "transform": "translate(" + s.left + "," + s.top + ")" + rot,
+ "d": "M" + dx1 + "," + dy + " L" + dx2 + "," + dy + " Z",
+ "fill": fill.color,
+ "fill-rule": "evenodd",
+ "fill-opacity": fill.opacity || null,
+ });
- if ( s.textAlign === 'center' ) {
- dx -= label.width / 2;
- }
- else if ( s.textAlign === 'right' ) {
- dx -= label.width + s.textMargin;
- }
- else if ( s.textAlign === 'left' ) {
- dx += s.textMargin;
- }
+ // bind text to path
+ var p = e.getElementsByTagName( 'path' )[0];
+ if ( p ) {
+ p.textpathok = true;
+ var tp = e.getElementsByTagName( 'textpath' )[0];
+ if ( !tp ) {
+ tp = document.createElement( vml.pre + 'textpath' + vml.post );
+ e.appendChild( tp );
+ tp.on = true;
+ tp.style["v-text-kern"] = true;
+ }
+ tp.string = txt;
+ tp.style.font = s.font;
+ tp.style["v-text-align"] = vTextAlign;
+ }
- e = this.expect(e, "text", attr, {
- "font": s.font,
- // "text-shadow": s.textShadow,
- "textDecoration": s.textDecoration,
- 'top': Math.round( s.top + dy ) + 'px',
- 'left': Math.round( s.left + dx ) + 'px',
- 'position': 'absolute',
- 'display': 'block',
- 'lineHeight': 1,
- 'whiteSpace': 'nowrap',
- 'zoom': 1,
- 'cursor': 'default',
- 'color': vml.color( fill.color ) || 'black'
- });
- e.innerText = txt;
-
- // Rotation is broken in serveral different ways:
- // 1. it looks REALLY ugly
- // 2. it is incredibly slow
- // 3. rotated text is offset completely wrong and it takes a ton of math to correct it
- // when text is rotated we need to switch to a VML textpath solution
- var rotation = 180 * s.textAngle / Math.PI;
- if ( rotation ) {
- var r = (~~rotation % 360) * vml.d2r,
- ct = Math.cos(r),
- st = Math.sin(r);
- e.style.filter = ['progid:DXImageTransform.Microsoft.Matrix(',
- 'M11=', ct.toFixed( 8 ), ',',
- 'M12=', -st.toFixed( 8 ), ',',
- 'M21=', st.toFixed( 8 ), ',',
- 'M22=', ct.toFixed( 8 ), ',sizingMethod=\'auto expand\')";'].join('');
}
+ // non-rotated text
else {
- e.style.filter = '';
+
+ if ( s.textBaseline === 'middle' ) {
+ dy -= label.fontsize / 2;
+ }
+ else if ( s.textBaseline === 'top' ) {
+ dy += s.textMargin;
+ }
+ else if ( s.textBaseline === 'bottom' ) {
+ dy -= s.textMargin + label.fontsize;
+ }
+
+ if ( s.textAlign === 'center' ) {
+ dx1 -= label.width / 2;
+ }
+ else if ( s.textAlign === 'right' ) {
+ dx1 -= label.width + s.textMargin;
+ }
+ else if ( s.textAlign === 'left' ) {
+ dx1 += s.textMargin;
+ }
+
+ e = this.expect(e, "text", attr, {
+ "font": s.font,
+ // "text-shadow": s.textShadow,
+ "textDecoration": s.textDecoration,
+ 'top': Math.round( s.top + dy ) + 'px',
+ 'left': Math.round( s.left + dx1 ) + 'px',
+ 'position': 'absolute',
+ 'display': 'block',
+ 'lineHeight': 1,
+ 'whiteSpace': 'nowrap',
+ 'zoom': 1,
+ 'cursor': 'default',
+ 'color': vml.color( fill.color ) || 'black'
+ });
+ e.innerText = txt;
+
}
e = this.append(e, scenes, i);
Oops, something went wrong.

1 comment on commit fd7e258

@dbradicich

This comment has been minimized.

Show comment Hide comment
@dbradicich

dbradicich Jul 5, 2012

Thanks for getting the changeset in, this library is mucho appreciated :D

Thanks for getting the changeset in, this library is mucho appreciated :D

Please sign in to comment.