Finalizing GitGraph with directives, theming & docs

src/diagrams/git/gitGraphAst.js

@@ -1,5 +1,7 @@
 import { log } from '../../logger';
 import { random } from '../../utils';
+import mermaidAPI from '../../mermaidAPI';
+import * as configApi from '../../config';
 let commits = {};
 let head = null;
 let branches = { main: head };
@@ -11,6 +13,10 @@ function getId() {
   return random({ length: 7 });
 }
 
+export const parseDirective = function (statement, context, type) {
+  mermaidAPI.parseDirective(this, statement, context, type);
+};
+
 // /**
 //  * @param currentCommit
 //  * @param otherCommit
@@ -354,6 +360,8 @@ export const commitType = {
 };
 
 export default {
+  parseDirective,
+  getConfig: () => configApi.getConfig().gitGraph,
   setDirection,
   setOptions,
   getOptions,

src/diagrams/git/gitGraphRenderer.js

@@ -7,9 +7,11 @@ import gitGraphParser from './parser/gitGraph';
 import { log } from '../../logger';
 /* eslint-disable */
 import { getConfig } from '../../config';
+//import * as configApi from '../../config';
 let allCommitsDict = {};
 let branchNum;
 
+//let conf = configApi.getConfig();
 const commitType = db.commitType;
 
 let branchPos = {};
@@ -416,8 +418,8 @@ const drawBranches = (svg, branches) => {
  */
 export const draw = function (txt, id, ver) {
   clear();
-  const config = getConfig().gitGraph;
-
+  const conf = getConfig();
+  const config = conf.gitGraph;
   // try {
   const parser = gitGraphParser.parser;
   parser.yy = db;
@@ -471,7 +473,7 @@ export const draw = function (txt, id, ver) {
   const width = svgBounds.width + padding * 2;
   const height = svgBounds.height + padding * 2;
 
-  configureSvgSize(diagram, height, width, config.useMaxWidth);
+  configureSvgSize(diagram, height, width, conf.useMaxWidth);
   const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
  // logger.debug(`viewBox ${vBox}`);
   diagram.attr('viewBox', vBox);

src/diagrams/git/parser/gitGraph.jison

@@ -9,10 +9,19 @@
 
 %x string
 %x options
+%x open_directive
+%x type_directive
+%x arg_directive
+%x close_directive
 %options case-insensitive
 
-%%
 
+%%
+\%\%\{                                                          { this.begin('open_directive'); return 'open_directive'; }
+<open_directive>((?:(?!\}\%\%)[^:.])*)                          { this.begin('type_directive'); return 'type_directive'; }
+<type_directive>":"                                             { this.popState(); this.begin('arg_directive'); return ':'; }
+<type_directive,arg_directive>\}\%\%                            { this.popState(); this.popState(); return 'close_directive'; }
+<arg_directive>((?:(?!\}\%\%).|\n)*)                            return 'arg_directive';
 (\r?\n)+                               /*{console.log('New line');return 'NL';}*/ return 'NL';
 \s+                                    /* skip all whitespace */
 \#[^\n]*                               /* skip comments */
@@ -24,7 +33,7 @@
 "msg:"                                 return 'COMMIT_MSG';
 "NORMAL"                               return 'NORMAL';
 "REVERSE"                              return 'REVERSE';
-"HIGHLIGHT"                            return 'HIGHLIGHT';                       
+"HIGHLIGHT"                            return 'HIGHLIGHT';
 "tag:"                                 return 'COMMIT_TAG';
 "branch"                               return 'BRANCH';
 "merge"                                return 'MERGE';
@@ -52,7 +61,9 @@
 %% /* language grammar */
 
 start
-    : GG document EOF{ return $3; }
+   : eol start
+    | directive start
+    | GG document EOF{ return $3; }
     | GG ':' document EOF{ return $3; }
     | GG DIR ':' document EOF {yy.setDirection($2); return $4;}
     ;
@@ -72,7 +83,7 @@ body
     | body line {$1.push($2); $$=$1;}
     ;
 line
-    : statement {$$ =$1}
+    : statement eol {$$ =$1}
     | NL
     ;
 
@@ -107,7 +118,7 @@ commitStatement
     | COMMIT COMMIT_TYPE commitType COMMIT_MSG STR  {yy.commit($5,'',$3,'')}
     | COMMIT COMMIT_ID STR COMMIT_MSG STR {yy.commit($5,$3,yy.commitType.NORMAL,'')}
     | COMMIT COMMIT_MSG STR COMMIT_ID STR {yy.commit($3,$5,yy.commitType.NORMAL,'')}
-    
+
     | COMMIT COMMIT_MSG STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.commit($3,'',$5,$7)}
     | COMMIT COMMIT_MSG STR COMMIT_TAG STR COMMIT_TYPE commitType {yy.commit($3,'',$7,$5)}
     | COMMIT COMMIT_TYPE commitType COMMIT_MSG STR COMMIT_TAG STR {yy.commit($5,'',$3,$7)}
@@ -177,7 +188,34 @@ commitType
     : NORMAL { $$=yy.commitType.NORMAL;}
     | REVERSE   { $$=yy.commitType.REVERSE;}
     | HIGHLIGHT { $$=yy.commitType.HIGHLIGHT;}
-    ;    
+    ;
+
+directive
+  : openDirective typeDirective closeDirective
+  | openDirective typeDirective ':' argDirective closeDirective
+  ;
+
+openDirective
+  : open_directive { yy.parseDirective('%%{', 'open_directive'); }
+  ;
+
+typeDirective
+  : type_directive { yy.parseDirective($1, 'type_directive'); }
+  ;
+
+argDirective
+  : arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
+  ;
+
+closeDirective
+  : close_directive { yy.parseDirective('}%%', 'close_directive', 'gitGraph'); }
+  ;
+
+eol
+  : NL
+  | ';'
+  | EOF
+  ;
 // reset_arg
 //     : 'HEAD' reset_parents{$$ = $1+ ":" + $2 }
 //     | ID reset_parents{$$ = $1+ ":"  + yy.count; yy.count = 0}

src/diagrams/git/styles.js

@@ -23,7 +23,7 @@ const getStyles = (options) =>
 
   .branch {
     stroke-width: 1;
-    stroke: black;
+    stroke: ${options.lineColor};
     stroke-dasharray: 2;
   }
   .commit-label { font-size: 10px; fill: ${options.commitLabelColor};}