#1252 Adding background on commit labels

2025-09-19 15:30:03 +02:00 · 2022-03-25 08:56:22 +01:00
parent 3ee141ff9b
commit 22aca7b3ee
21 changed files with 6189 additions and 3619 deletions
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@@ -9,7 +9,7 @@
    <style>
      body {
        /* background: rgb(221, 208, 208); */
-        /* background:#111; */
+        background:#111;
        /* background:#333; */
        font-family: 'Arial';
        }
@@ -26,7 +26,7 @@
  </head>
  <body>
    <h1>info below</h1>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    <div class="mermaid2" style="width: 100%; height: 20%;">
       gitGraph:
       commit "Ashish"
       branch newbranch
@@ -43,14 +43,14 @@

    </div>
    <div class="mermaid" style="width: 100%; height: 20%;">
-      gitGraph:
+      gitGraph
      commit
      branch hotfix
      checkout hotfix
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
@@ -101,14 +101,13 @@
        // console.error('Mermaid error: ', err);
      };
      mermaid.initialize({
-        theme: 'base',
+        theme: 'dark',
        themeVariables: {
          // primaryColor: '#9400D3',
-          darkMode: false,
+          // darkMode: false,
          // background: '#222',
          // textColor: 'white',
          // primaryTextColor: '#f4f4f4',
-
          // nodeBkg: '#ff0000',
          // mainBkg: '#0000ff',
          // tertiaryColor: '#ffffcc',
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@@ -264,7 +264,7 @@ requirementDiagram
    test_req - contains -> test_req3
    test_req <- copies - test_entity2
      </div>
-    <div class="mermaid" class="width height">
+    <div class="mermaid" style="width: 100%; height: 20%;">
      gitGraph:
      commit
      branch hotfix
@@ -272,19 +272,18 @@ requirementDiagram
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
-      checkout master
-      branch hotfix
+      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
-      checkout master
+      checkout main
      merge hotfix
      checkout featureB
      commit
@@ -302,10 +301,10 @@ requirementDiagram
      branch release
      checkout release
      commit
-      checkout master
+      checkout main
      commit
      checkout release
-      merge master
+      merge main
      checkout develop
      merge release
   </div>
--- a/cypress/platform/showcase_base_dark.html
+++ b/cypress/platform/showcase_base_dark.html
@@ -259,27 +259,25 @@ requirementDiagram
    test_req <- copies - test_entity2
      </div>
    <div class="mermaid" class="width height">
-      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "darkMode":true}}}%%
-      gitGraph:
+gitGraph
      commit
      branch hotfix
      checkout hotfix
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
-      checkout master
-      branch hotfix
+      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
-      checkout master
+      checkout main
      merge hotfix
      checkout featureB
      commit
@@ -297,10 +295,10 @@ requirementDiagram
      branch release
      checkout release
      commit
-      checkout master
+      checkout main
      commit
      checkout release
-      merge master
+      merge main
      checkout develop
      merge release
   </div>
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -257,26 +257,25 @@ requirementDiagram
    test_req <- copies - test_entity2
      </div>
    <div class="mermaid" class="width height">
-      gitGraph:
+gitGraph
      commit
      branch hotfix
      checkout hotfix
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
-      checkout master
-      branch hotfix
+      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
-      checkout master
+      checkout main
      merge hotfix
      checkout featureB
      commit
@@ -294,10 +293,10 @@ requirementDiagram
      branch release
      checkout release
      commit
-      checkout master
+      checkout main
      commit
      checkout release
-      merge master
+      merge main
      checkout develop
      merge release
   </div>
--- a/cypress/platform/showcase_default.html
+++ b/cypress/platform/showcase_default.html
@@ -251,27 +251,26 @@ requirementDiagram
    test_req - contains -> test_req3
    test_req <- copies - test_entity2
      </div>
-    <div class="mermaid" class="width height">
-      gitGraph:
+    <div class="mermaid" style="width: 100%; height: 20%;">
+      gitGraph
      commit
      branch hotfix
      checkout hotfix
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
-      checkout master
-      branch hotfix
+      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
-      checkout master
+      checkout main
      merge hotfix
      checkout featureB
      commit
@@ -289,10 +288,10 @@ requirementDiagram
      branch release
      checkout release
      commit
-      checkout master
+      checkout main
      commit
      checkout release
-      merge master
+      merge main
      checkout develop
      merge release
   </div>
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -263,19 +263,18 @@ requirementDiagram
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
-      checkout master
-      branch hotfix
+      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
-      checkout master
+      checkout main
      merge hotfix
      checkout featureB
      commit
@@ -293,10 +292,10 @@ requirementDiagram
      branch release
      checkout release
      commit
-      checkout master
+      checkout main
      commit
      checkout release
-      merge master
+      merge main
      checkout develop
      merge release
   </div>
--- a/cypress/platform/showcase_neutral.html
+++ b/cypress/platform/showcase_neutral.html
@@ -263,19 +263,18 @@ requirementDiagram
      commit
      branch develop
      checkout develop
-      commit id:"ash" tag:"abc"
+      commit id:"An id" tag:"A tag"
      branch featureB
      checkout featureB
      commit type:HIGHLIGHT
-      checkout master
-      branch hotfix
+      checkout main
      checkout hotfix
      commit type:NORMAL
      checkout develop
      commit type:REVERSE
      checkout featureB
      commit
-      checkout master
+      checkout main
      merge hotfix
      checkout featureB
      commit
@@ -293,10 +292,10 @@ requirementDiagram
      branch release
      checkout release
      commit
-      checkout master
+      checkout main
      commit
      checkout release
-      merge master
+      merge main
      checkout develop
      merge release
   </div>
--- a/dist/mermaid.core.js
+++ b/dist/mermaid.core.js
--- a/dist/mermaid.core.js.map
+++ b/dist/mermaid.core.js.map
--- a/dist/mermaid.js
+++ b/dist/mermaid.js
--- a/dist/mermaid.js.map
+++ b/dist/mermaid.js.map
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -926,7 +926,7 @@ Default value: true
 **Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
 to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
 will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
-function \*Default value: At default, will mirror Global Config\*\*
+function _Default value: At default, will mirror Global Config_

 ### Parameters

--- a/docs/examples.md
+++ b/docs/examples.md
@@ -115,7 +115,7 @@ sequenceDiagram
    participant account as Account Service
    participant mail as Mail Service
    participant db as Storage
-    
+
    Note over web,db: The user must be logged in to submit blog posts
    web->>+account: Logs in using credentials
    account->>db: Query stored accounts
@@ -129,7 +129,7 @@ sequenceDiagram
        Note over web,db: When the user is authenticated, they can now submit new posts
        web->>+blog: Submit new post
        blog->>db: Store post data
-        
+
        par Notifications
            blog--)mail: Send mail to blog subscribers
            blog--)db: Store in-site notifications
@@ -139,3 +139,20 @@ sequenceDiagram
    end

 ```
+
+A commit flow diagram.
+```mermaid
+gitGraph:
+    commit "Ashish"
+    branch newbranch
+    checkout newbranch
+    commit id:"1111"
+    commit tag:"test"
+    checkout main
+    commit type: HIGHLIGHT
+    commit
+    merge newbranch
+    commit
+    branch b2
+    commit
+```
--- a/docs/index.html
+++ b/docs/index.html
@@ -17,8 +17,8 @@
    />
    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
    <link rel="stylesheet" href="theme.css" />
-    <script src="//cdn.jsdelivr.net/npm/mermaid@8.14.0/dist/mermaid.min.js"></script>
-    <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.14.0/dist/mermaid.min.js"></script> -->
+    <script src="http://localhost:9000/mermaid.js"></script>
    <script>
      // prettier-ignore
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -173,51 +173,57 @@ const drawCommits = (svg, commits, modifyGraph) => {
    }
    commitPos[commit.id] = {x: pos + 10, y: y};

+    // The first iteration over the commits are for positioning purposes, this
+    // is required for drawing the lines. The circles and labels is drawn after the labels
+    // placing them on top of the lines.
    if (modifyGraph) {
+      const px=4;
+      const py=2;
+      const labelBkg = gLabels.insert('rect')
+        .attr('class', 'commit-label-bkg');
+
      const text = gLabels.append('text')
        .attr('x', pos)
        .attr('y', y + 25)
        .attr('class', 'commit-label')
        .text(commit.id);
-        let bbox = text.node().getBBox();
-        text.attr('x', pos + 10 - bbox.width / 2);
-        console.log('commit', commit.id, 'tag', commit.tag);
-        if(commit.tag) {
-          const rect = gLabels.insert('polygon');
-          const hole = gLabels.append('circle');
-          const tag = gLabels.append('text')
-          // .attr('x', pos )
-          .attr('y', y - 16)
-          .attr('class', 'tag-label')
-          .text(commit.tag);
-          let tagBbox = tag.node().getBBox();
-          tag.attr('x', pos + 10 - tagBbox.width / 2);
+      let bbox = text.node().getBBox();
+      console.log(bbox);
+      // Now we have the label, lets position the background
+      labelBkg
+        .attr('x', pos + 10 - bbox.width / 2 - py)
+        .attr('y', y + 13.5)
+        .attr('width', bbox.width + 2 * py)
+        .attr('height', bbox.height + 2 * py);
+      text.attr('x', pos + 10 - bbox.width / 2);
+      if(commit.tag) {
+        const rect = gLabels.insert('polygon');
+        const hole = gLabels.append('circle');
+        const tag = gLabels.append('text')
+        // Note that we are delaying setting the x position until we know the width of the text
+        .attr('y', y - 16)
+        .attr('class', 'tag-label')
+        .text(commit.tag);
+        let tagBbox = tag.node().getBBox();
+        tag.attr('x', pos + 10 - tagBbox.width / 2);

-          const px=4;
-          const py=2;
-          const h2 = tagBbox.height/2
-          const ly = y - 19.2  ;
-          rect
-            .attr('class', 'tag-label-bkg')
-            // .attr('rx', 2)
-            // .attr('ry', 2)
-            // .attr('x', pos + 10 - tagBbox.width / 2 - 4)
-            // .attr('y', y - 15 - tagBbox.height/2 - 7)
-            // .attr('width', tagBbox.width + 8)
-            // .attr('height', tagBbox.height + 4);
-            .attr('points', `
-            ${pos - tagBbox.width / 2 - px},${ly +py}
-            ${pos - tagBbox.width / 2 - px},${ly -py}
-            ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
-            ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
-            ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py }
-            ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`);
+        const h2 = tagBbox.height/2
+        const ly = y - 19.2  ;
+        rect
+          .attr('class', 'tag-label-bkg')
+          .attr('points', `
+          ${pos - tagBbox.width / 2 - px/2},${ly + py}
+          ${pos - tagBbox.width / 2 - px/2},${ly - py}
+          ${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
+          ${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
+          ${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py }
+          ${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`);

-          hole
-            .attr('cx', pos - tagBbox.width / 2)
-            .attr('cy', ly)
-            .attr('r', 1.5)
-            .attr('class', 'tag-hole');
+        hole
+          .attr('cx', pos - tagBbox.width / 2 + px/2)
+          .attr('cy', ly)
+          .attr('r', 1.5)
+          .attr('class', 'tag-hole');

      }
    }
@@ -237,24 +243,13 @@ const drawCommits = (svg, commits, modifyGraph) => {
 const hasOverlappingCommits = (commit1, commit2, allCommits) => {
  const commit1Pos = commitPos[commit2.id];
  const commit2Pos = commitPos[commit1.id];
-    // if(commit1.id.match('4-')) {
-    //   log.info('Ugge 1', commit1, commit2);
-    // }

  // Find commits on the same branch as commit2
  const keys = Object.keys(allCommits);
  const overlappingComits = keys.filter((key) => {
-    // if(commit1.id.match('4-') && allCommits[key].branch === commit2.branch) {
-    //   log.info('Ugge seq of the commit', allCommits[key].seq, ' commit 1 seq', commit1.seq ,' commit2 seq' ,commit2.seq);
-    // }
    return allCommits[key].branch === commit2.branch && allCommits[key].seq > commit1.seq && allCommits[key].seq < commit2.seq
  });

-
-
-  // if (commit1Pos.x === commit2Pos.x) {
-  //   return commit1Pos.y === commit2Pos.y;
-  // }
  return overlappingComits.length > 0;
 }
 /**
@@ -330,7 +325,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
      arc = 'A 20 20, 0, 0, 0,';
      radius = 20;
      offset = 20;
-    // Figure out the color of the arrow,arrows going down take the color from the destination branch
+
+      // Figure out the color of the arrow,arrows going down take the color from the destination branch
      colorClassNum = branchPos[commit2.branch].index;

      lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y-radius} ${arc} ${p1.x + offset} ${p2.y} L ${p2.x} ${p2.y}`;
@@ -339,7 +335,8 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
      arc = 'A 20 20, 0, 0, 0,';
      radius = 20;
      offset = 20;
-    // Arrows going up take the color from the source branch
+
+      // Arrows going up take the color from the source branch
      colorClassNum = branchPos[commit1.branch].index;
      lineDef = `M ${p1.x} ${p1.y} L ${p2.x-radius} ${p1.y} ${arc} ${p2.x} ${p1.y-offset} L ${p2.x} ${p2.y}`;
    }
@@ -351,7 +348,6 @@ const drawArrow = (svg, commit1, commit2, allCommits) => {
  }
  const arrow = svg.append('path').attr('d', lineDef)
      .attr('class', 'arrow arrow' +  colorClassNum)
-      // .attr('marker-end', 'url(' + url + '#arrowhead)');
 }

 const drawArrows = (svg, commits) => {
@@ -359,7 +355,6 @@ const drawArrows = (svg, commits) => {
  let pos = 0;

  const k = Object.keys(commits);
-  console.log('drawArrows', k);
  k.forEach((key, index) => {
    const commit = commits[key];
    if(commit.parents && commit.parents.length>0) {
--- a/src/diagrams/git/styles.js
+++ b/src/diagrams/git/styles.js
@@ -26,10 +26,11 @@ const getStyles = (options) =>
    stroke: black;
    stroke-dasharray: 2;
  }
-  .commit-labels { font-size: 10px; fill: ${options.textColor};}
+  .commit-label { font-size: 10px; fill: ${options.commitLabelColor};}
+  .commit-label-bkg { font-size: 10px; fill: ${options.commitLabelBackground}; opacity: 0.5; }
  .tag-label { font-size: 10px; fill: ${options.tagLabelColor};}
-  .tag-label-bkg { fill: ${options.tagLabelBkg}; }
-  .tag-hole { fill: ${options.tagLabelColor}; opacity: 0.5; stroke-linejoin: round;}
+  .tag-label-bkg { fill: ${options.tagLabelBackground}; stroke: ${options.tagLabelBorder}; }
+  .tag-hole { fill: ${options.textColor}; }

  .commit-merge {
    stroke: ${options.primaryColor};
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -225,8 +225,11 @@ class Theme {
    this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
    this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;

-    this.tagLabelColor = this.tagLabelColor || this.darkMode ? this.branchLabelColor : 'white';
+    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
+    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
+    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -7,7 +7,7 @@ class Theme {
    this.secondaryColor = lighten(this.primaryColor, 16);

    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
-    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.primaryBorderColor = invert(this.background);
    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
    this.primaryTextColor = invert(this.primaryColor);
@@ -205,6 +205,12 @@ class Theme {
    this.gitInv5 = invert(this.git5);
    this.gitInv6 = invert(this.git6);
    this.gitInv7 = invert(this.git7);
+
+    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
+    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
+    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
+    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -244,6 +244,12 @@ class Theme {
    this.gitBranchLabel5 = this.labelTextColor;
    this.gitBranchLabel6 = this.labelTextColor;
    this.gitBranchLabel7 = this.labelTextColor;
+
+    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
+    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
+    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
+    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -206,6 +206,12 @@ class Theme {
    this.gitInv5 = invert(this.git5);
    this.gitInv6 = invert(this.git6);
    this.gitInv7 = invert(this.git7);
+
+    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
+    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
+    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
+    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -248,6 +248,12 @@ class Theme {
    this.gitBranchLabel5 = this.branchLabelColor;
    this.gitBranchLabel6 = this.branchLabelColor;
    this.gitBranchLabel7 = this.branchLabelColor;
+
+    this.tagLabelColor = this.tagLabelColor || this.primaryTextColor;
+    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
+    this.tagLabelBorder = this.tagBorder || this.primaryBorderColor;
+    this.commitLabelColor = this.commitLabelColor || this.secondaryTextColor;
+    this.commitLabelBackground = this.commitLabelBackground || this.secondaryColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {