From b1fab6ffcdf95162592279fa0f05db27ffbf4bbc Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Thu, 3 Mar 2022 19:58:43 +0100
Subject: [PATCH] Theming changes for base theme

---
 cypress/platform/gitgraph.html       |  6 +--
 src/diagrams/git/gitGraphAst.js      |  3 --
 src/diagrams/git/gitGraphRenderer.js | 39 ++++++++++++++--
 src/diagrams/git/styles.js           | 70 +++++++++++++++-------------
 src/themes/theme-base.js             | 29 ++++++++++++
 5 files changed, 104 insertions(+), 43 deletions(-)

diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html
index f7ade1acb..cf9339f45 100644
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -8,11 +8,11 @@
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
-        background: rgb(221, 208, 208);
+        /* background: rgb(221, 208, 208); */
         /*background:#333;*/
         font-family: 'Arial';
         }
-      h1 { color: white;}
+      /* h1 { color: white;} */
       .mermaid2 {
         display: none;
       }
@@ -102,7 +102,7 @@
         // console.error('Mermaid error: ', err);
       };
       mermaid.initialize({
-        theme: 'default',
+        theme: 'base',
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
         logLevel: 1,
diff --git a/src/diagrams/git/gitGraphAst.js b/src/diagrams/git/gitGraphAst.js
index 1bc4a83ee..a7996a973 100644
--- a/src/diagrams/git/gitGraphAst.js
+++ b/src/diagrams/git/gitGraphAst.js
@@ -7,9 +7,6 @@ let curBranch = 'master';
 let direction = 'LR';
 let seq = 0;
 
-/**
- *
- */
 function getId() {
   return random({ length: 7 });
 }
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 97fc00461..43c4c82c0 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -10,6 +10,8 @@ import { getConfig } from '../../config';
 let allCommitsDict = {};
 let branchNum;
 
+const commitType = db.commitType;
+
 let branchPos = {};
 let commitPos = {};
 let maxPos = 0;
@@ -111,13 +113,40 @@ const drawCommits = (svg, commits, modifyGraph) => {
     // log.debug('drawCommits (commit branchPos)', commit, branchPos);
     const y = branchPos[commit.branch].pos;
 
+    console.log(commit);
+
     // Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
     if (modifyGraph) {
-      const line = gBullets.append('circle');
-      line.attr('cx', pos + 10);
-      line.attr('cy', y);
-      line.attr('r', 10);
-      line.attr('class', 'commit commit-'+commit.type + ' ' + commit.id + ' commit' + branchPos[commit.branch].index);
+      let typeClass;
+      switch(commit.type) {
+        case commitType.NORMAL:
+          typeClass = 'commit-normal';
+          break;
+          case commitType.REVERSE:
+          typeClass = 'commit-reverse';
+          break;
+        case commitType.HIGHLIGHT:
+          typeClass = 'commit-highlight';
+          break;
+        case commitType.MERGE:
+          typeClass = 'commit-merge';
+          break;
+        default:
+          typeClass = 'commit-normal';
+      }
+
+      const circle = gBullets.append('circle');
+      circle.attr('cx', pos + 10);
+      circle.attr('cy', y);
+      circle.attr('r', commit.type === commitType.MERGE ? 9:10);
+      circle.attr('class', 'commit ' + commit.id  + ' commit' + branchPos[commit.branch].index);
+      if(commit.type === commitType.MERGE) {
+        const circle2 = gBullets.append('circle');
+        circle2.attr('cx', pos + 10);
+        circle2.attr('cy', y);
+        circle2.attr('r', 6);
+        circle2.attr('class', 'commit '+typeClass + ' ' + commit.id  + ' commit' + branchPos[commit.branch].index);
+      }
     }
     commitPos[commit.id] = {x: pos + 10, y: y};
 
diff --git a/src/diagrams/git/styles.js b/src/diagrams/git/styles.js
index 0845f6e5f..e248f8007 100644
--- a/src/diagrams/git/styles.js
+++ b/src/diagrams/git/styles.js
@@ -14,41 +14,47 @@ const getStyles = (options) =>
     stroke-dasharray: 2;
   }
   .commit-labels { font-size: 10px; }
-  .commit0 { stroke: ${options.fillType0}; fill: ${options.fillType0}; }
-  .commit1 { stroke: ${options.fillType1}; fill: ${options.fillType1}; }
-  .commit2 { stroke: ${options.fillType2}; fill: ${options.fillType2}; }
-  .commit3 { stroke: ${options.fillType3}; fill: ${options.fillType3}; }
-  .commit4 { stroke: ${options.fillType4}; fill: ${options.fillType4}; }
-  .commit5 { stroke: ${options.fillType5}; fill: ${options.fillType5}; }
-  .commit6 { stroke: ${options.fillType6}; fill: ${options.fillType6}; }
-  .commit7 { stroke: ${options.fillType7}; fill: ${options.fillType7}; }
-  // .branch0 { stroke: ${options.fillType0}; }
-  // .branch1 { stroke: ${options.fillType1}; }
-  // .branch2 { stroke: ${options.fillType2}; }
-  // .branch3 { stroke: ${options.fillType3}; }
-  // .branch4 { stroke: ${options.fillType4}; }
-  // .branch5 { stroke: ${options.fillType5}; }
-  // .branch6 { stroke: ${options.fillType6}; }
-  // .branch7 { stroke: ${options.fillType7}; }
-  .label0  { fill: ${options.fillType0}; }
-  .label1  { fill: ${options.fillType1}; }
-  .label2  { fill: ${options.fillType2}; }
-  .label3  { fill: ${options.fillType3}; }
-  .label4  { fill: ${options.fillType4}; }
-  .label5  { fill: ${options.fillType5}; }
-  .label6  { fill: ${options.fillType6}; }
-  .label7  { fill: ${options.fillType7}; }
+  .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-merge {
+    stroke: ${options.primaryColor};
+    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.fillType0}; }
-  .arrow1 { stroke: ${options.fillType1}; }
-  .arrow2 { stroke: ${options.fillType2}; }
-  .arrow3 { stroke: ${options.fillType3}; }
-  .arrow4 { stroke: ${options.fillType4}; }
-  .arrow5 { stroke: ${options.fillType5}; }
-  .arrow6 { stroke: ${options.fillType6}; }
-  .arrow7 { stroke: ${options.fillType7}; }
+  .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  { }
   }
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index 1054c7d24..e6a8a75f3 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -177,6 +177,35 @@ class Theme {
       this.relationLabelBackground ||
       (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
     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);
+    }
   }
   calculate(overrides) {
     if (typeof overrides !== 'object') {