Custom annotations (adrai#209)

serpent-charmer · web-flow · commit c0ee551775ea · 2020-08-14T14:58:44.000+02:00
* Custom annotations

* Update README.md
diff --git a/README.md b/README.md
@@ -218,6 +218,29 @@ If you want to emphasize a specific path in your flowchart, you can additionally
 st@>op1({"stroke":"Red"})@>cond({"stroke":"Red","stroke-width":6,"arrow-end":"classic-wide-long"})@>c2({"stroke":"Red"})@>op2({"stroke":"Red"})@>e({"stroke":"Red"})
 ```
 
+## Custom names for branches
+
+```
+st=>start: Start:>http://www.google.com[blank]
+e=>end:>http://www.google.com
+op1=>operation: My Operation
+sub1=>subroutine: My Subroutine
+cond=>condition: linear or polynomial :>http://www.google.com
+io=>inputoutput: catch something...
+
+st->op1->cond
+cond(true@linear)->io->e
+cond(false@polynomial)->sub1(right)
+sub1(right)->op1
+```
+<details>
+  
+  <summary>Demonstration</summary>
+  
+ ![img](https://user-images.githubusercontent.com/37659961/90231386-85a3ed80-de34-11ea-8265-976c36b2f0e2.png) 
+ 
+</details>
+
 ## Contributors
 
 via [GitHub](https://github.com/adrai/flowchart.js/graphs/contributors)
diff --git a/src/flowchart.parse.js b/src/flowchart.parse.js
@@ -192,6 +192,15 @@ function parse(input) {
     }
     return next;
   }
+  
+  function getAnnotation(s) {
+	var startIndex = s.indexOf("(") + 1, endIndex = s.indexOf(")");
+	var tmp = s.substring(startIndex, endIndex);
+	if(tmp.indexOf(",") > 0) { tmp = tmp.substring(0, tmp.indexOf(",")); }
+	var tmp_split = tmp.split("@");
+	if(tmp_split.length > 1)
+		return startIndex >= 0 && endIndex >= 0 ? tmp_split[1] : "";
+  }
 
   while (lines.length > 0) {
     var line = lines.splice(0, 1)[0].trim();
@@ -277,6 +286,11 @@ function parse(input) {
       chart.symbols[symbol.key] = symbol;
 
     } else if (line.indexOf('->') >= 0) {
+      
+      var ann = getAnnotation(line);
+      if(ann) {
+	      line = line.replace("@" + ann, ""); 
+      }
       // flow
       var flowSymbols = line.split('->');
       for (var iS = 0, lenS = flowSymbols.length; iS < lenS; iS++) {
@@ -290,6 +304,13 @@ function parse(input) {
         }
 
         var realSymb = getSymbol(flowSymb);
+	if(ann) {
+		if(symbVal == "yes" || symbVal == "true")
+			realSymb.yes_annotation = ann;
+		else
+			realSymb.no_annotation = ann;
+		ann = null;
+        }
         var next = getNextPath(flowSymb);
 
         var direction = null;
diff --git a/src/flowchart.symbol.condition.js b/src/flowchart.symbol.condition.js
@@ -6,6 +6,8 @@ var drawPath = drawAPI.drawPath;
 function Condition(chart, options) {
   options = options || {};
   Symbol.call(this, chart, options);
+  this.yes_annotation = options.yes_annotation;
+  this.no_annotation = options.no_annotation;
   this.textMargin = this.getAttr('text-margin');
   this.yes_direction = 'bottom';
   this.no_direction = 'right';
@@ -160,11 +162,11 @@ Condition.prototype.render = function() {
 
 Condition.prototype.renderLines = function() {
   if (this.yes_symbol) {
-    this.drawLineTo(this.yes_symbol, this.getAttr('yes-text'), this.yes_direction);
+    this.drawLineTo(this.yes_symbol, this.yes_annotation ? this.yes_annotation : this.getAttr('yes-text'), this.yes_direction);
   }
 
   if (this.no_symbol) {
-    this.drawLineTo(this.no_symbol, this.getAttr('no-text'), this.no_direction);
+    this.drawLineTo(this.no_symbol, this.no_annotation ? this.no_annotation : this.getAttr('no-text'), this.no_direction);
   }
 };
 
