[canviz] r501 committed - handle landscape, orientation and rotate graph attributes

[can...@googlecode.com]

Revision: 501
Author: ryandesign.com
Date: Fri Sep 20 06:27:19 2013 UTC
Log: handle landscape, orientation and rotate graph attributes

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

Added:
/canviz/trunk/test/graphs/landscape-noop.gv
/canviz/trunk/test/graphs/landscape.gv
/canviz/trunk/test/graphs/landscape2.gv
/canviz/trunk/test/graphs/orientation.gv
/canviz/trunk/test/graphs/rotate.gv
Modified:
/canviz/trunk/HISTORY.md
/canviz/trunk/src/Canviz.js
/canviz/trunk/src/Entity.js

=======================================
--- /dev/null
+++ /canviz/trunk/test/graphs/landscape-noop.gv Fri Sep 20 06:27:19 2013 UTC
@@ -0,0 +1,4 @@
+graph {
+ landscape=foo
+ "not rotated"
+}
=======================================
--- /dev/null
+++ /canviz/trunk/test/graphs/landscape.gv Fri Sep 20 06:27:19 2013 UTC
@@ -0,0 +1,4 @@
+graph {
+ landscape=true
+ rotated
+}
=======================================
--- /dev/null
+++ /canviz/trunk/test/graphs/landscape2.gv Fri Sep 20 06:27:19 2013 UTC
@@ -0,0 +1,4 @@
+graph {
+ landscape=42
+ rotated
+}
=======================================
--- /dev/null
+++ /canviz/trunk/test/graphs/orientation.gv Fri Sep 20 06:27:19 2013 UTC
@@ -0,0 +1,4 @@
+graph {
+ orientation=landscape
+ rotated
+}
=======================================
--- /dev/null
+++ /canviz/trunk/test/graphs/rotate.gv Fri Sep 20 06:27:19 2013 UTC
@@ -0,0 +1,5 @@
+graph {
+ rotate=90
+ 1--two
+ three--four
+}
=======================================
--- /canviz/trunk/HISTORY.md Tue Sep 17 23:15:25 2013 UTC
+++ /canviz/trunk/HISTORY.md Fri Sep 20 06:27:19 2013 UTC
@@ -15,6 +15,7 @@
* Implement alternate text rendering using the canvas (instead of overlay
spans)
* Improve text positioning
* Handle the graph "margin", "pad" and "size" attributes correctly
+* Handle the graph "landscape", "orientation" and "rotate" attributes
correctly
* Handle graphs rendered with the Graphviz "-y" switch
* Handle xdotversion up to 1.6
* Handle gradients
=======================================
--- /canviz/trunk/src/Canviz.js Tue Sep 17 17:32:23 2013 UTC
+++ /canviz/trunk/src/Canviz.js Fri Sep 20 06:27:19 2013 UTC
@@ -102,7 +102,7 @@

this.graphs = [];
this.images = {};
- this.width = this.height = this.maxWidth = this.maxHeight =
this.bbEnlarge = this.marginX = this.marginY = this.numImages =
this.numImagesFinished = 0;
+ this.width = this.height = this.maxWidth = this.maxHeight =
this.bbEnlarge = this.rotate = this.marginX = this.marginY = this.numImages
= this.numImagesFinished = 0;
this.paddingX = this.paddingY = XDOT_DPI * 0.0555;
this.dpi = 96;
this.bgcolor = {opacity: 1};
@@ -217,16 +217,25 @@
case 'dpi':
this.dpi = attrValue;
break;
+ case 'landscape':
+ this.rotate = 'true' == attrValue ||
Number(attrValue);
+ break;
case 'margin':
attrValue = attrValue.split(',');
this.marginX = XDOT_DPI * attrValue[0];
this.marginY = XDOT_DPI * attrValue[attrValue.length
- 1];
break;
+ case 'orientation':
+ this.rotate = 'l' == attrValue.substr(0,
1).toLowerCase();
+ break;
case 'pad':
attrValue = attrValue.split(',');
this.paddingX = XDOT_DPI * attrValue[0];
this.paddingY = XDOT_DPI *
attrValue[attrValue.length - 1];
break;
+ case 'rotate':
+ this.rotate = 90 == attrValue;
+ break;
case 'size':
if (attrValue.substr(attrValue.length - 1) == '!') {
this.bbEnlarge = 1; // true
@@ -263,18 +272,20 @@
var xdotVersion = this.graphs[0].attrs.xdotversion;
var bugs = this.bugs =
{gradAngle: !versionCompare(xdotVersion, '1.5')};
bugs.gradY = bugs.textY = versionCompare(xdotVersion, '1.5') < 0;
+ var bbScale = this.bbScale;
+ var bbScaledDrawingWidth = bbScale * (this.width + 2 * this.paddingX);
+ var bbScaledDrawingHeight = bbScale * (this.height + 2 *
this.paddingY);
var ctx = this.ctx;
var ctxScale = this.scale * this.dpi / XDOT_DPI;
- var bbScaledDrawingWidth = this.bbScale * (this.width + 2 *
this.paddingX);
- var bbScaledDrawingHeight = this.bbScale * (this.height + 2 *
this.paddingY);
- var pixelWidth = Math.round(ctxScale * (2 * this.marginX +
bbScaledDrawingWidth));
- var pixelHeight = Math.round(ctxScale * (2 * this.marginY +
bbScaledDrawingHeight));
+ var pixelWidth = this.pixelWidth = Math.round(ctxScale * (2 *
this.marginX + bbScaledDrawingWidth));
+ var pixelHeight = this.pixelHeight = Math.round(ctxScale * (2 *
this.marginY + bbScaledDrawingHeight));
+ var rotate = this.rotate;
if (!redrawCanvasOnly) {
- this.canvas.width = pixelWidth;
- this.canvas.height = pixelHeight;
+ var rotatedPixelWidth = this.canvas.width = rotate ? pixelHeight :
pixelWidth;
+ var rotatedPixelHeight = this.canvas.height = rotate ? pixelWidth :
pixelHeight;
if (IS_BROWSER) {
- this.canvas.style.width = this.container.style.width = pixelWidth
+ 'px';
- this.canvas.style.height = this.container.style.height =
pixelHeight + 'px';
+ this.canvas.style.width = this.container.style.width =
rotatedPixelWidth + 'px';
+ this.canvas.style.height = this.container.style.height =
rotatedPixelHeight + 'px';
while (this.elements.firstChild) {
this.elements.removeChild(this.elements.firstChild);
}
@@ -282,6 +293,10 @@
}
ctx.save();
ctx.lineCap = 'round';
+ if (rotate) {
+ ctx.translate(0, pixelWidth);
+ ctx.rotate(-Math.PI / 2);
+ }
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, pixelWidth, pixelHeight);
ctx.fillStyle = this.bgcolor.canvasColor;
@@ -292,7 +307,7 @@
ctx.translate(0, bbScaledDrawingHeight);
ctx.scale(1, -1);
}
- ctx.scale(this.bbScale, this.bbScale);
+ ctx.scale(bbScale, bbScale);
ctx.translate(this.paddingX, this.paddingY);
this.graphs[0].draw(ctx, ctxScale, redrawCanvasOnly);
ctx.restore();
=======================================
--- /canviz/trunk/src/Entity.js Wed Sep 18 01:53:47 2013 UTC
+++ /canviz/trunk/src/Entity.js Fri Sep 20 06:27:19 2013 UTC
@@ -9,6 +9,9 @@
var TEXT_SUBSCRIPT = 16;
var TEXT_SUPERSCRIPT = 8;
var TEXT_UNDERLINE = 4;
+// Use DXImageTransform on IE < 9 only.
+// http://tanalin.com/en/articles/ie-version-js/
+var USE_DXIMAGETRANSFORM = IS_BROWSER && document.all
&& !document.addEventListener;

// Constructor
function Entity(defaultAttrHashName, name, canviz, rootGraph, parentGraph,
immediateGraph) {
@@ -276,14 +279,27 @@
style.fontSize = ctxScale * bbScale * fontSize
+ 'px';
style.fontStyle = textStyle &
TEXT_ITALIC ? 'italic' : 'normal';
style.fontWeight = textStyle &
TEXT_BOLD ? 'bold' : 'normal';
- style.left = ctxScale * (this.canviz.marginX +
bbScale * (this.canviz.paddingX + x - textAlignIndex * textWidth)) + 'px';
style.lineHeight = 1;
style.position = 'absolute';
style.textAlign = textAlign;
style.textDecoration = decorations.length ?
decorations.join(' ') : 'none';
- 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) - yError)) + 'px';
- style.width = ctxScale * bbScale * 2 * textWidth
+ 'px';
if (strokeColor.opacity < 1) setOpacity(text,
strokeColor.opacity);
+ var left = ctxScale * (this.canviz.marginX + bbScale
* (this.canviz.paddingX + x - textAlignIndex * textWidth));
+ var top = ctxScale * (this.canviz.marginY + bbScale
* (this.canviz.paddingY + (this.canviz.invertY ? this.canviz.height -
baseline : baseline) - getBaseline(fontFamily, fontSize, style.fontWeight,
style.fontStyle) - yError));
+ var rotate = this.canviz.rotate;
+ var width = ctxScale * bbScale * 2 * textWidth;
+ if (rotate) {
+ if (USE_DXIMAGETRANSFORM) {
+ style.filter
= 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
+ left += width;
+ } else {
+ style.MozTransform = style.MsTransform =
style.OTransform = style.transform = style.WebkitTransform
= 'rotate(270deg)';
+ style.MozTransformOrigin =
style.MsTransformOrigin = style.OTransformOrigin = style.transformOrigin =
style.WebkitTransformOrigin = '0 0';
+ }
+ }
+ style.left = (rotate ? top : left) + 'px';
+ style.top = (rotate ? this.canviz.pixelWidth -
left : top) + 'px';
+ style.width = width + 'px';
this.canviz.elements.appendChild(text);
}
break;