Skip to content
Browse files

Add the DIAGRAM_CLASS and TRANSLATE_HALF_PIXEL options.

  • Loading branch information...
1 parent bd0fc71 commit de70336fc12d6a723b972557b35ed9d0ffc5e2ea @SimonSapin SimonSapin committed Nov 10, 2012
Showing with 12 additions and 8 deletions.
  1. +5 −3 README.md
  2. +7 −5 railroad-diagrams.js
View
8 README.md
@@ -34,7 +34,7 @@ The containers:
* ZeroOrMore(child, repeat) - like * in a regex. A shorthand for `Optional(OneOrMore(child, repeat))`
For convenience, each component can be called with or without `new`.
-If called without `new`,
+If called without `new`,
the container components become n-ary;
that is, you can say either `new Sequence([A, B])` or just `Sequence(A,B)`.
@@ -45,10 +45,12 @@ The result can either be `.toString()`'d for the markup, or `.toSVG()`'d for an
Options
-------
-There are currently two options you can tweak, at the top of the file. Just tweak either until the diagram looks like what you want.
+There are a few options you can tweak, at the top of the file. Just tweak either until the diagram looks like what you want.
* VERTICAL_SEPARATION - sets the minimum amount of vertical separation between two items. Note that the stroke width isn't counted when computing the separation; this shouldn't be relevant unless you have a very small separation or very large stroke width.
* ARC_RADIUS - the radius of the arcs used in Choice and Repeat. This has a relatively large effect on the size of non-trivial diagrams. Both tight and loose values look good, depending on what you're going for.
+* DIAGRAM_CLASS - the class set on the root `<svg>` element of each diagram, for use in the CSS stylesheet.
+* TRANSLATE_HALF_PIXEL - the default stylesheet uses odd pixel lengths for 'stroke'. Due to rasterization artifacts, they look best when the item has been translated half a pixel in both directions. If you change the styling to use a stroke with even pixel lengths, you'll want to set this variable to `false`.
You can also tweak the overall CSS for the file. Each diagrams's CSS is inserted as a `<style>` block at the end of `Diagram.toSVG` - feel free to tweak to your heart's content.
(Note that, due to rasterization artifacts, odd pixel lengths for 'stroke' look best when the item has been translated half a pixel in both directions. If you change the styling to use a stroke with even pixel lengths, you'll want to remove the 'transform' attribute from the `<g>` element used in `Diagram.toSVG`.)
@@ -59,4 +61,4 @@ Caveats
At this early stage, the generator is feature-complete and works as intended, but still has several TODOs:
* The font-sizes are hard-coded right now, and the font handling in general is very dumb - I'm just guessing at some metrics that are probably "good enough" rather than measuring things properly.
-* I'd like to allow plain strings as children, and automatically upgrade them into Terminal objects.
+* I'd like to allow plain strings as children, and automatically upgrade them into Terminal objects.
View
12 railroad-diagrams.js
@@ -1,6 +1,8 @@
// Display constants
var VERTICAL_SEPARATION = 8;
var ARC_RADIUS = 10;
+var DIAGRAM_CLASS = 'railroad-diagram';
+var TRANSLATE_HALF_PIXEL = true;
function SVG(name, attrs, text) {
@@ -113,7 +115,7 @@ function unnull(/* children */) {
function Diagram(items) {
if(!(this instanceof Diagram)) return new Diagram([].slice.call(arguments));
- FakeSVG.call(this, 'svg', {class:'diagram'});
+ FakeSVG.call(this, 'svg', {class: DIAGRAM_CLASS});
this.items = items;
this.items.unshift(new Start);
this.items.push(new End);
@@ -130,7 +132,7 @@ Diagram.prototype.format = function(paddingt, paddingr, paddingb, paddingl) {
var x = paddingl;
var y = paddingt;
y += this.up;
- var g = FakeSVG('g',{transform:'translate(.5 .5)'});
+ var g = FakeSVG('g', TRANSLATE_HALF_PIXEL ? {transform:'translate(.5 .5)'} : {});
for(var i = 0; i < this.items.length; i++) {
var item = this.items[i];
if(item.needsSpace) {
@@ -214,7 +216,7 @@ Choice.prototype.format = function(x,y,width) {
// Do the elements that curve above
for(var i = this.normal - 1; i >= 0; i--) {
var item = this.items[i];
- if( i == this.normal - 1 ) {
+ if( i == this.normal - 1 ) {
var distanceFromY = Math.max(ARC_RADIUS*2, this.items[i+1].up + VERTICAL_SEPARATION + item.down);
}
Path(x,y).arc('se').up(distanceFromY - ARC_RADIUS*2).arc('wn').addTo(this);
@@ -239,7 +241,7 @@ Choice.prototype.format = function(x,y,width) {
Path(x+ARC_RADIUS*2+innerWidth, y+distanceFromY).arc('se').up(distanceFromY - ARC_RADIUS*2).arc('wn').addTo(this);
distanceFromY += Math.max(ARC_RADIUS, item.down + VERTICAL_SEPARATION + (i == last ? 0 : this.items[i+1].up));
}
-
+
return this;
}
@@ -377,4 +379,4 @@ Skip.prototype = Object.create(FakeSVG.prototype);
Skip.prototype.format = function(x, y, width) {
Path(x,y).right(width).addTo(this);
return this;
-}
+}

0 comments on commit de70336

Please sign in to comment.
Something went wrong with that request. Please try again.