Introduce arrow option on railroad widget

plugins/tiddlywiki/railroad/components.js

@@ -177,10 +177,11 @@ Optional.prototype.toSvg = function() {
 	return railroad.Optional(this.child.toSvg(), this.normal ? undefined : "skip");
 }
 
-var OptionalRepeated = function(content,separator,normal) {
+var OptionalRepeated = function(content,separator,normal,wantArrow) {
 	this.initialiseWithChild("OptionalRepeated",content);
 	this.separator = toSingleChild(separator);
 	this.normal = normal;
+	this.wantArrow = wantArrow;
 };
 
 OptionalRepeated.prototype = new Component();
@@ -189,12 +190,13 @@ OptionalRepeated.prototype.toSvg = function() {
 	// Call ZeroOrMore(component,separator,"skip")
 	var separatorSvg = this.separator ? this.separator.toSvg() : null;
 	var skip = this.normal ? undefined : "skip";
-	return railroad.ZeroOrMore(this.child.toSvg(),separatorSvg,skip);
+	return railroad.ZeroOrMore(this.child.toSvg(),separatorSvg,skip,this.wantArrow);
 }
 
-var Repeated = function(content,separator) {
+var Repeated = function(content,separator,wantArrow) {
 	this.initialiseWithChild("Repeated",content);
 	this.separator = toSingleChild(separator);
+	this.wantArrow = wantArrow;
 };
 
 Repeated.prototype = new Component();
@@ -202,7 +204,7 @@ Repeated.prototype = new Component();
 Repeated.prototype.toSvg = function() {
 	// Call OneOrMore(component,separator)
 	var separatorSvg = this.separator ? this.separator.toSvg() : null;
-	return railroad.OneOrMore(this.child.toSvg(),separatorSvg);
+	return railroad.OneOrMore(this.child.toSvg(),separatorSvg,this.wantArrow);
 }
 
 var Link = function(content,options) {

plugins/tiddlywiki/railroad/doc/readme.tid

@@ -8,6 +8,7 @@ The content of the `<$railroad>` widget is ignored.
 
 |!Attribute |!Description |
 |text |Text in a special syntax that defines the diagram's layout |
+|arrow |If set to `no`, repeat paths do not have an arrow on them. The default is `yes` |
 |mode |If set to `debug`, the diagram will display its internal tree structure. The default mode is `svg` |
 
 The entire `text` can be transcluded from another tiddler:

plugins/tiddlywiki/railroad/files/railroad-diagrams.css

@@ -20,4 +20,9 @@ svg.railroad-diagram rect {
     stroke-width: 3;
     stroke: black;
     fill: hsl(120,100%,90%);
+}
+
+/* TiddlyWiki extensions */
+svg.railroad-diagram path.arrow {
+    stroke-width: 1;
 }

plugins/tiddlywiki/railroad/files/railroad-diagrams.js

@@ -111,9 +111,9 @@ var temp = (function(options) {
 		return str;
 	}
 
-	function Path(x,y) {
+	function Path(x,y,attrs) {
-		if(!(this instanceof Path)) return new Path(x,y);
+		if(!(this instanceof Path)) return new Path(x,y,attrs);
-		FakeSVG.call(this, 'path');
+		FakeSVG.call(this, 'path', attrs);
 		this.attrs.d = "M"+x+' '+y;
 	}
 	subclassOf(Path, FakeSVG);
@@ -156,6 +156,11 @@ var temp = (function(options) {
 		this.attrs.d += 'h.5';
 		return this;
 	}
+/* TiddlyWiki: added support for arbitrary straight lines */
+	Path.prototype.line = function(dx,dy) {
+		this.attrs.d += "l"+dx+" "+dy;
+		return this;
+	}
 
 	function Diagram(items) {
 		if(!(this instanceof Diagram)) return new Diagram([].slice.call(arguments));
@@ -325,15 +330,27 @@ var temp = (function(options) {
 			throw "Unknown value for Optional()'s 'skip' argument.";
 	}
 
-	function OneOrMore(item, rep) {
+/* TiddlyWiki: added wantArrow */
-		if(!(this instanceof OneOrMore)) return new OneOrMore(item, rep);
+	function OneOrMore(item, rep, wantArrow) {
+		if(!(this instanceof OneOrMore)) return new OneOrMore(item, rep, wantArrow);
 		FakeSVG.call(this, 'g');
+
+/* TiddlyWiki: code added */
+		this.wantArrow = wantArrow;
+
 		rep = rep || (new Skip);
 		this.item = wrapString(item);
 		this.rep = wrapString(rep);
 		this.width = Math.max(this.item.width, this.rep.width) + Diagram.ARC_RADIUS*2;
 		this.up = this.item.up;
 		this.down = Math.max(Diagram.ARC_RADIUS*2, this.item.down + Diagram.VERTICAL_SEPARATION + this.rep.up + this.rep.down);
+
+/* TiddlyWiki: code added, including moving calculation of distanceFromY (of the repeat arc) to here */
+		this.distanceFromY = Math.max(Diagram.ARC_RADIUS*2, this.item.down+Diagram.VERTICAL_SEPARATION+this.rep.up);
+		if(this.wantArrow && this.distanceFromY < Diagram.ARC_RADIUS*3) {
+			this.distanceFromY += Diagram.ARC_RADIUS/2;
+			this.down += Diagram.ARC_RADIUS/2;
+		}
 	}
 	subclassOf(OneOrMore, FakeSVG);
 	OneOrMore.prototype.needsSpace = true;
@@ -350,16 +367,25 @@ var temp = (function(options) {
 		Path(x+this.width-Diagram.ARC_RADIUS,y).right(Diagram.ARC_RADIUS).addTo(this);
 
 		// Draw repeat arc
-		var distanceFromY = Math.max(Diagram.ARC_RADIUS*2, this.item.down+Diagram.VERTICAL_SEPARATION+this.rep.up);
+/* TiddlyWiki: moved calculation of distanceFromY from here to constructor */
+		var distanceFromY = this.distanceFromY;
+		
 		Path(x+Diagram.ARC_RADIUS,y).arc('nw').down(distanceFromY-Diagram.ARC_RADIUS*2).arc('ws').addTo(this);
 		this.rep.format(x+Diagram.ARC_RADIUS, y+distanceFromY, this.width - Diagram.ARC_RADIUS*2).addTo(this);
 		Path(x+this.width-Diagram.ARC_RADIUS, y+distanceFromY).arc('se').up(distanceFromY-Diagram.ARC_RADIUS*2).arc('en').addTo(this);
+		
+/* TiddlyWiki: code added */
+		if(this.wantArrow) {
+			var arrowSize = 2/3 * Diagram.ARC_RADIUS;
+			Path(x-arrowSize, y+distanceFromY/2 + arrowSize/2, {class:"arrow"}).
+				line(arrowSize, -arrowSize).line(arrowSize, arrowSize).addTo(this);
+		}
 
 		return this;
 	}
 
-	function ZeroOrMore(item, rep, skip) {
+	function ZeroOrMore(item, rep, skip, wantArrow) {
-		return Optional(OneOrMore(item, rep), skip);
+		return Optional(OneOrMore(item, rep, wantArrow), skip);
 	}
 
 	function Start() {

plugins/tiddlywiki/railroad/parser.js

@@ -35,9 +35,10 @@ x y z			sequence
 
 var components = require("$:/plugins/tiddlywiki/railroad/components.js").components;
 
-var Parser = function(widget,source) {
+var Parser = function(widget,source,wantArrow) {
 	this.widget = widget;
 	this.source = source;
+	this.wantArrow = wantArrow;
 	this.tokens = this.tokenise(source);
 	this.tokenPos = 0;
 	this.advance();
@@ -201,7 +202,8 @@ Parser.prototype.parseOptional = function() {
 	}
 	this.close("]");
 	// Create a component
-	return repeated ? new components.OptionalRepeated(content,separator,normal) : new components.Optional(content,normal);
+	return repeated ? new components.OptionalRepeated(content,separator,normal,this.wantArrow)
+		: new components.Optional(content,normal);
 };
 
 Parser.prototype.parseRepeated = function() {
@@ -217,7 +219,7 @@ Parser.prototype.parseRepeated = function() {
 	// Consume the closing bracket
 	this.close("}");
 	// Create a component
-	return new components.Repeated(content,separator);
+	return new components.Repeated(content,separator,this.wantArrow);
 };
 
 Parser.prototype.parseSequence = function() {

plugins/tiddlywiki/railroad/wrapper.js

@@ -38,7 +38,7 @@ RailroadWidget.prototype.render = function(parent,nextSibling) {
 	var div = this.document.createElement("div");
 	try {
 		// Parse the source
-		var parser = new Parser(this,source);
+		var parser = new Parser(this,source,this.getAttribute("arrow","yes") === "yes");
 		// Generate content into the div
 		if(this.getAttribute("mode","svg") === "debug") {
 			this.renderDebug(parser,div);
@@ -107,7 +107,7 @@ RailroadWidget.prototype.patchLinks = function(node) {
 
 RailroadWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.text) {
+	if(changedAttributes.text || changedAttributes.mode || changedAttributes.arrow) {
 		this.refreshSelf();
 		return true;
 	}