Added theming support for gitgraph

cypress/platform/gitgraph.html

@@ -9,7 +9,8 @@
     <style>
       body {
         /* background: rgb(221, 208, 208); */
-        /*background:#333;*/
+        background:#111;
+        /* background:#333; */
         font-family: 'Arial';
         }
       /* h1 { color: white;} */
@@ -103,6 +104,20 @@
       };
       mermaid.initialize({
         theme: 'base',
+        themeVariables: {
+          primaryColor: '#9400D3',
+          darkMode: true,
+          // background: '#222',
+          textColor: 'white',
+          primaryTextColor: '#f4f4f4',
+
+          // nodeBkg: '#ff0000',
+          // mainBkg: '#0000ff',
+          // tertiaryColor: '#ffffcc',
+        },
+        // theme: 'forest',
+        // theme: 'neutral',
+        // theme: 'dark',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 1,

cypress/platform/showcase_base.html

@@ -264,6 +264,51 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
       </div>
+    <div class="mermaid" class="width height">
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout master
+      branch hotfix
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout master
+      merge hotfix
+      checkout featureB
+      commit
+      checkout develop
+      branch featureA
+      commit
+      checkout develop
+      merge hotfix
+      checkout featureA
+      commit
+      checkout featureB
+      commit
+      checkout develop
+      merge featureA
+      branch release
+      checkout release
+      commit
+      checkout master
+      commit
+      checkout release
+      merge master
+      checkout develop
+      merge release
+   </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

cypress/platform/showcase_base_dark.html

@@ -258,8 +258,53 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
       </div>
-
+    <div class="mermaid" class="width height">
-  <script src="./mermaid.js"></script>
+      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "darkMode":true}}}%%
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout master
+      branch hotfix
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout master
+      merge hotfix
+      checkout featureB
+      commit
+      checkout develop
+      branch featureA
+      commit
+      checkout develop
+      merge hotfix
+      checkout featureA
+      commit
+      checkout featureB
+      commit
+      checkout develop
+      merge featureA
+      branch release
+      checkout release
+      commit
+      checkout master
+      commit
+      checkout release
+      merge master
+      checkout develop
+      merge release
+   </div>
+    <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);
@@ -267,15 +312,15 @@ requirementDiagram
       mermaid.initialize({
         theme: 'base',
         themeVariables: {
-    primaryColor: '#9400D3',
+          primaryColor: '#9400D3',
-    darkMode: true,
+          darkMode: true,
-    background: '#222',
+          background: '#222',
-    textColor: 'white',
+          textColor: 'white',
-    primaryTextColor: '#f4f4f4',
+          primaryTextColor: '#f4f4f4',
-    nodeBkg: '#ff0000',
+          nodeBkg: '#ff0000',
-    mainBkg: '#0000ff',
+          mainBkg: '#0000ff',
-    tertiaryColor: '#ffffcc',
+          tertiaryColor: '#ffffcc',
-  },
+        },
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 0,

cypress/platform/showcase_dark.html

@@ -256,6 +256,51 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
       </div>
+    <div class="mermaid" class="width height">
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout master
+      branch hotfix
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout master
+      merge hotfix
+      checkout featureB
+      commit
+      checkout develop
+      branch featureA
+      commit
+      checkout develop
+      merge hotfix
+      checkout featureA
+      commit
+      checkout featureB
+      commit
+      checkout develop
+      merge featureA
+      branch release
+      checkout release
+      commit
+      checkout master
+      commit
+      checkout release
+      merge master
+      checkout develop
+      merge release
+   </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

cypress/platform/showcase_default.html

@@ -251,7 +251,52 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
       </div>
-  <script src="./mermaid.js"></script>
+    <div class="mermaid" class="width height">
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout master
+      branch hotfix
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout master
+      merge hotfix
+      checkout featureB
+      commit
+      checkout develop
+      branch featureA
+      commit
+      checkout develop
+      merge hotfix
+      checkout featureA
+      commit
+      checkout featureB
+      commit
+      checkout develop
+      merge featureA
+      branch release
+      checkout release
+      commit
+      checkout master
+      commit
+      checkout release
+      merge master
+      checkout develop
+      merge release
+   </div>
+     <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/showcase_forest.html

@@ -255,6 +255,51 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
       </div>
+    <div class="mermaid" class="width height">
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout master
+      branch hotfix
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout master
+      merge hotfix
+      checkout featureB
+      commit
+      checkout develop
+      branch featureA
+      commit
+      checkout develop
+      merge hotfix
+      checkout featureA
+      commit
+      checkout featureB
+      commit
+      checkout develop
+      merge featureA
+      branch release
+      checkout release
+      commit
+      checkout master
+      commit
+      checkout release
+      merge master
+      checkout develop
+      merge release
+   </div>
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

cypress/platform/showcase_neutral.html

@@ -254,6 +254,53 @@ requirementDiagram
     test_req - contains -> test_req3
     test_req <- copies - test_entity2
       </div>
+
+    <div class="mermaid" class="width height">
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout master
+      branch hotfix
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout master
+      merge hotfix
+      checkout featureB
+      commit
+      checkout develop
+      branch featureA
+      commit
+      checkout develop
+      merge hotfix
+      checkout featureA
+      commit
+      checkout featureB
+      commit
+      checkout develop
+      merge featureA
+      branch release
+      checkout release
+      commit
+      checkout master
+      commit
+      checkout release
+      merge master
+      checkout develop
+      merge release
+   </div>
+
   <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {

src/diagrams/git/gitGraphRenderer.js

@@ -358,7 +358,7 @@ const drawBranches = (svg, branches) => {
       const branchLabel = g.insert('g').attr('class', 'branchLabel');
 
       // Create inner g, label, this will be positioned now for centering the text
-      const label = branchLabel.insert('g').attr('class', 'label');
+      const label = branchLabel.insert('g').attr('class', 'label branch-label'+index);
       label.node().appendChild(labelElement);
       let bbox = labelElement.getBBox();
       bkg.attr('class', 'branchLabelBkg label' + index)

src/diagrams/git/styles.js

@@ -8,28 +8,25 @@ const getStyles = (options) =>
     font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
   }
+  ${[0, 1, 2, 3, 4, 5, 6, 7]
+    .map(
+      (i) =>
+        `
+        .branch-label${i} { fill: ${options['gitBranchLabel' + i]}; }
+        .commit${i} { stroke: ${options['git' + i]}; fill: ${options['git' + i]}; }
+        .commit-highlight${i} { stroke: ${options['gitInv' + i]}; fill: ${options['gitInv' + i]}; }
+        .label${i}  { fill: ${options['git' + i]}; }
+        .arrow${i} { stroke: ${options['git' + i]}; }
+        `
+    )
+    .join('\n')}
+
   .branch {
     stroke-width: 1;
     stroke: black;
     stroke-dasharray: 2;
   }
-  .commit-labels { font-size: 10px; }
+  .commit-labels { font-size: 10px; fill: ${options.textColor};}
-  .commit0 { stroke: ${options.git0}; fill: ${options.git0}; }
-  .commit1 { stroke: ${options.git1}; fill: ${options.git1}; }
-  .commit2 { stroke: ${options.git2}; fill: ${options.git2}; }
-  .commit3 { stroke: ${options.git3}; fill: ${options.git3}; }
-  .commit4 { stroke: ${options.git4}; fill: ${options.git4}; }
-  .commit5 { stroke: ${options.git5}; fill: ${options.git5}; }
-  .commit6 { stroke: ${options.git6}; fill: ${options.git6}; }
-  .commit7 { stroke: ${options.git7}; fill: ${options.git7}; }
-  .commit-highlight0 { stroke: ${options.gitInv0}; fill: ${options.gitInv0}; }
-  .commit-highlight1 { stroke: ${options.gitInv1}; fill: ${options.gitInv1}; }
-  .commit-highlight2 { stroke: ${options.gitInv2}; fill: ${options.gitInv2}; }
-  .commit-highlight3 { stroke: ${options.gitInv3}; fill: ${options.gitInv3}; }
-  .commit-highlight4 { stroke: ${options.gitInv4}; fill: ${options.gitInv4}; }
-  .commit-highlight5 { stroke: ${options.gitInv5}; fill: ${options.gitInv5}; }
-  .commit-highlight6 { stroke: ${options.gitInv6}; fill: ${options.gitInv6}; }
-  .commit-highlight7 { stroke: ${options.gitInv7}; fill: ${options.gitInv7}; }
 
   .commit-merge {
     stroke: ${options.primaryColor};
@@ -47,35 +44,7 @@ const getStyles = (options) =>
     fill: ${options.primaryColor};
   }
 
-  // .branch0 { stroke: ${options.git0}; }
-  // .branch1 { stroke: ${options.git1}; }
-  // .branch2 { stroke: ${options.git2}; }
-  // .branch3 { stroke: ${options.git3}; }
-  // .branch4 { stroke: ${options.git4}; }
-  // .branch5 { stroke: ${options.git5}; }
-  // .branch6 { stroke: ${options.git6}; }
-  // .branch7 { stroke: ${options.git7}; }
-  .label0  { fill: ${options.git0}; }
-  .label1  { fill: ${options.git1}; }
-  .label2  { fill: ${options.git2}; }
-  .label3  { fill: ${options.git3}; }
-  .label4  { fill: ${options.git4}; }
-  .label5  { fill: ${options.git5}; }
-  .label6  { fill: ${options.git6}; }
-  .label7  { fill: ${options.git7}; }
-
-  // .arrow { stroke : ${options.tertiaryColor}; stroke-width: 8; stroke-linecap: round; }
   .arrow { stroke-width: 8; stroke-linecap: round; fill: none}
-  .arrow0 { stroke: ${options.git0}; }
-  .arrow1 { stroke: ${options.git1}; }
-  .arrow2 { stroke: ${options.git2}; }
-  .arrow3 { stroke: ${options.git3}; }
-  .arrow4 { stroke: ${options.git4}; }
-  .arrow5 { stroke: ${options.git5}; }
-  .arrow6 { stroke: ${options.git6}; }
-  .arrow7 { stroke: ${options.git7}; }
-  #arrowhead { fill: #990099;}
-  .branchLabel  { }
   }
 `;
 

src/themes/theme-base.js

@@ -42,7 +42,7 @@ class Theme {
     // The || is to make sure that if the variable has been defiend by a user override that value is to be used
 
     /* Main */
-    this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#ddd' : '#333'); // invert(this.primaryColor);
+    this.primaryTextColor = this.primaryTextColor || (this.darkMode ? '#eee' : '#333'); // invert(this.primaryColor);
     this.secondaryColor = this.secondaryColor || adjust(this.primaryColor, { h: -120 });
     this.tertiaryColor = this.tertiaryColor || adjust(this.primaryColor, { h: 180, l: 5 });
 
@@ -214,6 +214,16 @@ class Theme {
     this.gitInv5 = invert(this.git5);
     this.gitInv6 = invert(this.git6);
     this.gitInv7 = invert(this.git7);
+    this.branchLabelColor =
+      this.branchLabelColor || (this.darkMode ? 'black' : this.labelTextColor);
+    this.gitBranchLabel0 = this.gitBranchLabel0 || this.branchLabelColor;
+    this.gitBranchLabel1 = this.gitBranchLabel1 || this.branchLabelColor;
+    this.gitBranchLabel2 = this.gitBranchLabel2 || this.branchLabelColor;
+    this.gitBranchLabel3 = this.gitBranchLabel3 || this.branchLabelColor;
+    this.gitBranchLabel4 = this.gitBranchLabel4 || this.branchLabelColor;
+    this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
+    this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
+    this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-dark.js

@@ -187,6 +187,24 @@ class Theme {
       this.relationLabelBackground ||
       (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
     this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
+
+    /* git */
+    this.git0 = lighten(this.secondaryColor, 20);
+    this.git1 = lighten(this.pie2 || this.secondaryColor, 20);
+    this.git2 = lighten(this.pie3 || this.tertiaryColor, 20);
+    this.git3 = lighten(this.pie4 || adjust(this.primaryColor, { h: -30 }), 20);
+    this.git4 = lighten(this.pie5 || adjust(this.primaryColor, { h: -60 }), 20);
+    this.git5 = lighten(this.pie6 || adjust(this.primaryColor, { h: -90 }), 10);
+    this.git6 = lighten(this.pie7 || adjust(this.primaryColor, { h: +60 }), 10);
+    this.git7 = lighten(this.pie8 || adjust(this.primaryColor, { h: +120 }), 20);
+    this.gitInv0 = invert(this.git0);
+    this.gitInv1 = invert(this.git1);
+    this.gitInv2 = invert(this.git2);
+    this.gitInv3 = invert(this.git3);
+    this.gitInv4 = invert(this.git4);
+    this.gitInv5 = invert(this.git5);
+    this.gitInv6 = invert(this.git6);
+    this.gitInv7 = invert(this.git7);
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-default.js

@@ -1,4 +1,4 @@
-import { invert, lighten, rgba, adjust } from 'khroma';
+import { invert, lighten, rgba, adjust, darken } from 'khroma';
 import { mkBorder } from './theme-helpers';
 
 class Theme {
@@ -199,6 +199,51 @@ class Theme {
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground = this.relationLabelBackground || this.labelBackground;
     this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
+
+    /* git */
+    this.git0 = this.git0 || this.primaryColor;
+    this.git1 = this.git1 || this.secondaryColor;
+    this.git2 = this.git2 || this.tertiaryColor;
+    this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
+    this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
+    this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
+    this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
+    this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
+    if (this.darkMode) {
+      this.git0 = lighten(this.git0, 25);
+      this.git1 = lighten(this.git1, 25);
+      this.git2 = lighten(this.git2, 25);
+      this.git3 = lighten(this.git3, 25);
+      this.git4 = lighten(this.git4, 25);
+      this.git5 = lighten(this.git5, 25);
+      this.git6 = lighten(this.git6, 25);
+      this.git7 = lighten(this.git7, 25);
+    } else {
+      this.git0 = darken(this.git0, 25);
+      this.git1 = darken(this.git1, 25);
+      this.git2 = darken(this.git2, 25);
+      this.git3 = darken(this.git3, 25);
+      this.git4 = darken(this.git4, 25);
+      this.git5 = darken(this.git5, 25);
+      this.git6 = darken(this.git6, 25);
+      this.git7 = darken(this.git7, 25);
+    }
+    this.gitInv0 = invert(this.git0);
+    this.gitInv1 = invert(this.git1);
+    this.gitInv2 = invert(this.git2);
+    this.gitInv3 = invert(this.git3);
+    this.gitInv4 = invert(this.git4);
+    this.gitInv5 = invert(this.git5);
+    this.gitInv6 = invert(this.git6);
+    this.gitInv7 = invert(this.git7);
+    this.gitBranchLabel0 = invert(this.labelTextColor);
+    this.gitBranchLabel1 = this.labelTextColor;
+    this.gitBranchLabel2 = this.labelTextColor;
+    this.gitBranchLabel3 = invert(this.labelTextColor);
+    this.gitBranchLabel4 = this.labelTextColor;
+    this.gitBranchLabel5 = this.labelTextColor;
+    this.gitBranchLabel6 = this.labelTextColor;
+    this.gitBranchLabel7 = this.labelTextColor;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-forest.js

@@ -169,6 +169,43 @@ class Theme {
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
     this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
+
+    /* git */
+    this.git0 = this.git0 || this.primaryColor;
+    this.git1 = this.git1 || this.secondaryColor;
+    this.git2 = this.git2 || this.tertiaryColor;
+    this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
+    this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
+    this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
+    this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
+    this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
+    if (this.darkMode) {
+      this.git0 = lighten(this.git0, 25);
+      this.git1 = lighten(this.git1, 25);
+      this.git2 = lighten(this.git2, 25);
+      this.git3 = lighten(this.git3, 25);
+      this.git4 = lighten(this.git4, 25);
+      this.git5 = lighten(this.git5, 25);
+      this.git6 = lighten(this.git6, 25);
+      this.git7 = lighten(this.git7, 25);
+    } else {
+      this.git0 = darken(this.git0, 25);
+      this.git1 = darken(this.git1, 25);
+      this.git2 = darken(this.git2, 25);
+      this.git3 = darken(this.git3, 25);
+      this.git4 = darken(this.git4, 25);
+      this.git5 = darken(this.git5, 25);
+      this.git6 = darken(this.git6, 25);
+      this.git7 = darken(this.git7, 25);
+    }
+    this.gitInv0 = invert(this.git0);
+    this.gitInv1 = invert(this.git1);
+    this.gitInv2 = invert(this.git2);
+    this.gitInv3 = invert(this.git3);
+    this.gitInv4 = invert(this.git4);
+    this.gitInv5 = invert(this.git5);
+    this.gitInv6 = invert(this.git6);
+    this.gitInv7 = invert(this.git7);
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {

src/themes/theme-neutral.js

@@ -219,6 +219,35 @@ class Theme {
     this.relationColor = this.relationColor || this.lineColor;
     this.relationLabelBackground = this.relationLabelBackground || this.edgeLabelBackground;
     this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
+
+    /* git */
+    this.git0 = darken(this.pie1, 25) || this.primaryColor;
+    this.git1 = this.pie2 || this.secondaryColor;
+    this.git2 = this.pie3 || this.tertiaryColor;
+    this.git3 = this.pie4 || adjust(this.primaryColor, { h: -30 });
+    this.git4 = this.pie5 || adjust(this.primaryColor, { h: -60 });
+    this.git5 = this.pie6 || adjust(this.primaryColor, { h: -90 });
+    this.git6 = this.pie7 || adjust(this.primaryColor, { h: +60 });
+    this.git7 = this.pie8 || adjust(this.primaryColor, { h: +120 });
+
+    this.gitInv0 = invert(this.git0);
+    this.gitInv1 = invert(this.git1);
+    this.gitInv2 = invert(this.git2);
+    this.gitInv3 = invert(this.git3);
+    this.gitInv4 = invert(this.git4);
+    this.gitInv5 = invert(this.git5);
+    this.gitInv6 = invert(this.git6);
+    this.gitInv7 = invert(this.git7);
+
+    this.branchLabelColor = this.branchLabelColor || this.labelTextColor;
+    this.gitBranchLabel0 = this.branchLabelColor;
+    this.gitBranchLabel1 = 'white';
+    this.gitBranchLabel2 = this.branchLabelColor;
+    this.gitBranchLabel3 = 'white';
+    this.gitBranchLabel4 = this.branchLabelColor;
+    this.gitBranchLabel5 = this.branchLabelColor;
+    this.gitBranchLabel6 = this.branchLabelColor;
+    this.gitBranchLabel7 = this.branchLabelColor;
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {