mermaid-js#1713, mermaid-js#1719, # 1720

Ronid1 · Oct 22, 2020 · 3f6296b · 3f6296b
1 parent f67a374
commit 3f6296b
Show file tree

Hide file tree

Showing 4 changed files with 336 additions and 7 deletions.
diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html
@@ -0,0 +1,77 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        background: rgb(221, 208, 208);
+        /*background:#333;*/
+        font-family: 'Arial';
+        }
+      h1 { color: white;}
+      .mermaid2 {
+        display: none;
+      }
+      .customCss > rect, .customCss{
+        fill:#FF0000 !important;
+        stroke:#FFFF00 !important;
+        stroke-width:4px !important;
+    }
+    </style>
+  </head>
+  <body>
+    <h1>info below</h1>
+    <div class="mermaid" style="width: 100%; height: 20%;">
+       gitGraph:
+       commit "Ashish"
+       branch newbranch
+       checkout newbranch
+       commit id:"1111"
+       commit tag:"test"
+       checkout master
+       commit type: HIGHLIGHT
+       commit
+       merge newbranch
+       commit
+       branch b2
+       commit
+
+    </div>
+    <div class="mermaid2" style="width: 100%; height: 20%;">
+      gitGraph:
+      commit
+      commit
+      branch newbranch
+      checkout newbranch
+      commit
+      reset master
+    </div>
+      <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        theme: 'default',
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { curve: 'linear', "htmlLabels": true },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50, showSequenceNumbers: true },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        // fontFamily: '"arial", sans-serif',
+        // themeVariables: {
+        //   fontFamily: '"arial", sans-serif',
+        // },
+        curve: 'linear',
+        securityLevel: 'loose'
+      });
+      function callback(){alert('It worked');}
+    </script>
+  </body>
+</html>
diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js
@@ -68,11 +68,13 @@ export const getOptions = function() {
   return options;
 };
 
-export const commit = function(msg) {
+export const commit = function(msg, id, type, tag) {
   const commit = {
-    id: getId(),
+    id: id ? id : getId(),
     message: msg,
     seq: seq++,
+    type: type ? type : commitType.NORMAL,
+    tag: tag ? tag : '',
     parent: head == null ? null : head.id
   };
   head = commit;
@@ -227,6 +229,12 @@ export const getHead = function() {
   return head;
 };
 
+export const commitType = {
+  NORMAL: 0,
+  REVERSE: 1,
+  HIGHLIGHT: 2
+};
+
 export default {
   setDirection,
   setOptions,
@@ -244,5 +252,6 @@ export default {
   getCommitsArray,
   getCurrentBranch,
   getDirection,
-  getHead
+  getHead,
+  commitType
 };
diff --git a/src/diagrams/git/gitGraphParserV2.spec.js b/src/diagrams/git/gitGraphParserV2.spec.js
@@ -0,0 +1,222 @@
+/* eslint-env jasmine */
+// Todo reintroduce without cryptoRandomString
+import gitGraphAst from './gitGraphAst';
+import { parser } from './parser/gitGraph';
+//import randomString from 'crypto-random-string';
+//import cryptoRandomString from 'crypto-random-string';
+import { logger } from '../../logger';
+
+//jest.mock('crypto-random-string');
+
+describe('when parsing a gitGraph', function() {
+  let randomNumber;
+  beforeEach(function() {
+    parser.yy = gitGraphAst;
+    parser.yy.clear();
+    randomNumber = 0;
+
+  });
+  // afterEach(function() {
+  //   cryptoRandomString.mockReset();
+  // });
+  it('should handle a gitGraph commit with NO pararms, get auto-genrated reandom ID', function() {
+    const str = `gitGraph:
+    commit
+    `;
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    //console.info(commits);
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('');
+    expect(commits[key].type).toBe(0);
+  });
+
+  it('should handle a gitGraph commit with custom commit id only', function() {
+    const str = `gitGraph:
+    commit id:"1111"
+    `;
+    //console.log(str);
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).toBe('1111');
+    expect(commits[key].tag).toBe('');
+    expect(commits[key].type).toBe(0);
+  });
+
+  it('should handle a gitGraph commit with custom commit tag only', function() {
+    const str = `gitGraph:
+    commit tag:"test"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('test');
+    expect(commits[key].type).toBe(0);
+  });
+
+  it('should handle a gitGraph commit with custom commit type HIGHLIGHT only', function() {
+    const str = `gitGraph:
+    commit type: HIGHLIGHT
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('');
+    expect(commits[key].type).toBe(2);
+  });
+
+  it('should handle a gitGraph commit with custom commit type REVERSE only', function() {
+    const str = `gitGraph:
+    commit type: REVERSE
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('');
+    expect(commits[key].type).toBe(1);
+  });
+
+  it('should handle a gitGraph commit with custom commit type NORMAL only', function() {
+    const str = `gitGraph:
+    commit type: NORMAL
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('');
+    expect(commits[key].type).toBe(0);
+  });
+
+  it('should handle a gitGraph commit with custom commit msg only', function() {
+    const str = `gitGraph:
+    commit "test commit"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('test commit');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('');
+    expect(commits[key].type).toBe(0);
+  });
+
+  it('should handle a gitGraph commit with custom commit id, tag  only', function() {
+    const str = `gitGraph:
+    commit id:"1111" tag: "test tag"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).toBe('1111');
+    expect(commits[key].tag).toBe('test tag');
+    expect(commits[key].type).toBe(0);
+  });
+
+  it('should handle a gitGraph commit with custom commit type, tag  only', function() {
+    const str = `gitGraph:
+    commit type:HIGHLIGHT tag: "test tag"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('test tag');
+    expect(commits[key].type).toBe(2);
+  });
+
+  it('should handle a gitGraph commit with custom commit tag and type only', function() {
+    const str = `gitGraph:
+    commit tag: "test tag" type:HIGHLIGHT
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).not.toBeNull();
+    expect(commits[key].tag).toBe('test tag');
+    expect(commits[key].type).toBe(2);
+  });
+
+  it('should handle a gitGraph commit with custom commit id, type and tag only', function() {
+    const str = `gitGraph:
+    commit id:"1111" type:REVERSE tag: "test tag"
+    `;
+
+    parser.parse(str);
+    const commits = parser.yy.getCommits();
+    expect(Object.keys(commits).length).toBe(1);
+    expect(parser.yy.getCurrentBranch()).toBe('master');
+    expect(parser.yy.getDirection()).toBe('LR');
+    expect(Object.keys(parser.yy.getBranches()).length).toBe(1);
+    const key = Object.keys(commits)[0];
+    expect(commits[key].message).toBe('');
+    expect(commits[key].id).toBe('1111');
+    expect(commits[key].tag).toBe('test tag');
+    expect(commits[key].type).toBe(1);
+  });
+
+
+
+});
diff --git a/src/diagrams/git/parser/gitGraph.jison b/src/diagrams/git/parser/gitGraph.jison
@@ -13,12 +13,18 @@
 
 %%
 
-(\r?\n)+                               return 'NL';
+(\r?\n)+                               /*{console.log('New line');return 'NL';}*/ return 'NL';
 \s+                                    /* skip all whitespace */
 \#[^\n]*                               /* skip comments */
 \%%[^\n]*                              /* skip comments */
 "gitGraph"                             return 'GG';
 "commit"                               return 'COMMIT';
+"id:"                                  return 'COMMIT_ID';
+"type:"                                return 'COMMIT_TYPE';
+"NORMAL"                               return 'NORMAL';
+"REVERSE"                              return 'REVERSE';
+"HIGHLIGHT"                            return 'HIGHLIGHT';                       
+"tag:"                                 return 'COMMIT_TAG';
 "branch"                               return 'BRANCH';
 "merge"                                return 'MERGE';
 "reset"                                return 'RESET';
@@ -69,18 +75,33 @@ line
     ;
 
 statement
-    : COMMIT commit_arg {yy.commit($2)}
+    : commitStatement
     | BRANCH ID {yy.branch($2)}
     | CHECKOUT ID {yy.checkout($2)}
     | MERGE ID {yy.merge($2)}
     | RESET reset_arg {yy.reset($2)}
     ;
-
+commitStatement
+    : COMMIT commit_arg {yy.commit($2)}
+    | COMMIT COMMIT_ID STR {yy.commit('',$3,yy.commitType.NORMAL,'')}
+    | COMMIT COMMIT_TYPE commitType {yy.commit('','',$3,'')}
+    | COMMIT COMMIT_TAG STR {yy.commit('','',yy.commitType.NORMAL,$3)}
+    | COMMIT COMMIT_TAG STR COMMIT_TYPE commitType {yy.commit('','',$5,$3)}
+    | COMMIT COMMIT_TYPE commitType COMMIT_TAG STR  {yy.commit('','',$3,$5)}
+    | COMMIT COMMIT_ID STR COMMIT_TYPE commitType {yy.commit('',$3,$5,'')}
+    | COMMIT COMMIT_ID STR COMMIT_TAG STR {yy.commit('',$3,yy.commitType.NORMAL,$5)}
+    | COMMIT COMMIT_ID STR COMMIT_TYPE commitType COMMIT_TAG STR {yy.commit('',$3,$5,$7)}
+    | COMMIT COMMIT_ID STR COMMIT_TAG STR COMMIT_TYPE commitType  {yy.commit('',$3,$7,$5)}
+    ;
 commit_arg
     : /* empty */ {$$ = ""}
     | STR {$$=$1}
     ;
-
+commitType
+    : NORMAL { $$=yy.commitType.NORMAL;}
+    | REVERSE   { $$=yy.commitType.REVERSE;}
+    | HIGHLIGHT { $$=yy.commitType.HIGHLIGHT;}
+    ;    
 reset_arg
     : 'HEAD' reset_parents{$$ = $1+ ":" + $2 }
     | ID reset_parents{$$ = $1+ ":"  + yy.count; yy.count = 0}