#1252 Adding support for tags

2025-09-18 06:49:47 +02:00 · 2022-03-24 20:25:22 +01:00
parent 2ab275b5b5
commit c0335cf5fb
7 changed files with 245 additions and 17 deletions
--- a/cypress/platform/gitgraph.html
+++ b/cypress/platform/gitgraph.html
@@ -26,7 +26,7 @@
  </head>
  <body>
    <h1>info below</h1>
-    <div class="mermaid2" style="width: 100%; height: 20%;">
+    <div class="mermaid" style="width: 100%; height: 20%;">
       gitGraph:
       commit "Ashish"
       branch newbranch
@@ -42,7 +42,7 @@
       commit

    </div>
-    <div class="mermaid2" style="width: 100%; height: 20%;">
+    <div class="mermaid" style="width: 100%; height: 20%;">
      gitGraph:
      commit
      branch hotfix
@@ -87,7 +87,7 @@
      merge release

   </div>
-    <div class="mermaid" style="width: 100%; height: 20%;">
+    <div class="mermaid2" style="width: 100%; height: 20%;">
      gitGraph:
      commit
      commit
--- a/cypress/platform/gitgraph2.html
+++ b/cypress/platform/gitgraph2.html
@@ -0,0 +1,138 @@
+<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:#111; */
+        /* 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 main
+       commit type: HIGHLIGHT
+       commit
+       merge newbranch
+       commit
+       branch b2
+       commit
+
+    </div>
+    <div class="mermaid" style="width: 100%; height: 20%;">
+      gitGraph:
+      commit
+      branch hotfix
+      checkout hotfix
+      commit
+      branch develop
+      checkout develop
+      commit id:"ash" tag:"abc"
+      branch featureB
+      checkout featureB
+      commit type:HIGHLIGHT
+      checkout main
+      checkout hotfix
+      commit type:NORMAL
+      checkout develop
+      commit type:REVERSE
+      checkout featureB
+      commit
+      checkout main
+      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 main
+      commit
+      checkout release
+      merge main
+      checkout develop
+      merge release
+
+   </div>
+    <div class="mermaid2" style="width: 100%; height: 20%;">
+      gitGraph:
+      commit
+      commit
+      branch newbranch
+      commit
+      merge main
+    </div>
+      <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+        // console.error('Mermaid error: ', err);
+      };
+      mermaid.initialize({
+        theme: 'base',
+        themeVariables: {
+          // primaryColor: '#9400D3',
+          darkMode: false,
+          // 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,
+        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>
--- a/cypress/platform/knsv.html
+++ b/cypress/platform/knsv.html
@@ -66,6 +66,7 @@ merge newbranch
      </div>
      <div class="mermaid" style="width: 50%;">
 sequenceDiagram
+        title: with colon:
        participant a as Alice
        participant j as John
        note right of a: Hello world!
--- a/docs/Setup.md
+++ b/docs/Setup.md
@@ -1073,16 +1073,61 @@ To be removed

 ```html
 <script>
-  var config = { theme: 'default', logLevel: 'fatal', securityLevel: 'strict', startOnLoad: true,
-  arrowMarkerAbsolute: false, er: { diagramPadding: 20, layoutDirection: 'TB', minEntityWidth: 100,
-  minEntityHeight: 75, entityPadding: 15, stroke: 'gray', fill: 'honeydew', fontSize: 12, useMaxWidth:
-true, }, flowchart: { diagramPadding: 8, htmlLabels: true, curve: 'basis', }, sequence: {
-  diagramMarginX: 50, diagramMarginY: 10, actorMargin: 50, width: 150, height: 65, boxMargin: 10,
-  boxTextMargin: 5, noteMargin: 10, messageMargin: 35, messageAlign: 'center', mirrorActors: true,
-  bottomMarginAdj: 1, useMaxWidth: true, rightAngles: false, showSequenceNumbers: false, }, gantt: {
-  titleTopMargin: 25, barHeight: 20, barGap: 4, topPadding: 50, leftPadding: 75, gridLineStartPadding:
-35, fontSize: 11, fontFamily: '"Open Sans", sans-serif', numberSectionStyles: 4, axisFormat:
-'%Y-%m-%d', topAxis: false, }, }; mermaid.initialize(config);
+  var config = {
+    theme: 'default',
+    logLevel: 'fatal',
+    securityLevel: 'strict',
+    startOnLoad: true,
+    arrowMarkerAbsolute: false,
+
+    er: {
+      diagramPadding: 20,
+      layoutDirection: 'TB',
+      minEntityWidth: 100,
+      minEntityHeight: 75,
+      entityPadding: 15,
+      stroke: 'gray',
+      fill: 'honeydew',
+      fontSize: 12,
+      useMaxWidth: true,
+    },
+    flowchart: {
+      diagramPadding: 8,
+      htmlLabels: true,
+      curve: 'basis',
+    },
+    sequence: {
+      diagramMarginX: 50,
+      diagramMarginY: 10,
+      actorMargin: 50,
+      width: 150,
+      height: 65,
+      boxMargin: 10,
+      boxTextMargin: 5,
+      noteMargin: 10,
+      messageMargin: 35,
+      messageAlign: 'center',
+      mirrorActors: true,
+      bottomMarginAdj: 1,
+      useMaxWidth: true,
+      rightAngles: false,
+      showSequenceNumbers: false,
+    },
+    gantt: {
+      titleTopMargin: 25,
+      barHeight: 20,
+      barGap: 4,
+      topPadding: 50,
+      leftPadding: 75,
+      gridLineStartPadding: 35,
+      fontSize: 11,
+      fontFamily: '"Open Sans", sans-serif',
+      numberSectionStyles: 4,
+      axisFormat: '%Y-%m-%d',
+      topAxis: false,
+    },
+  };
+  mermaid.initialize(config);
 </script>
 ```

--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -115,7 +115,6 @@ const drawCommits = (svg, commits, modifyGraph) => {
  sortedKeys.forEach((key, index) => {
    const commit = commits[key];

-    // log.debug('drawCommits (commit branchPos)', commit, branchPos);
    const y = branchPos[commit.branch].pos;
    const x  = pos + 10;
    // Don't draw the commits now but calculate the positioning which is used by the branmch lines etc.
@@ -176,12 +175,51 @@ const drawCommits = (svg, commits, modifyGraph) => {

    if (modifyGraph) {
      const text = gLabels.append('text')
-        // .attr('x', pos + 10)
+        .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);
+        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);
+
+          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}`);
+
+          hole
+            .attr('cx', pos - tagBbox.width / 2)
+            .attr('cy', ly)
+            .attr('r', 1.5)
+            .attr('class', 'tag-hole');
+
+      }
    }
    pos +=50;
    if(pos>maxPos) {
--- a/src/diagrams/git/styles.js
+++ b/src/diagrams/git/styles.js
@@ -27,6 +27,9 @@ const getStyles = (options) =>
    stroke-dasharray: 2;
  }
  .commit-labels { font-size: 10px; fill: ${options.textColor};}
+  .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;}

  .commit-merge {
    stroke: ${options.primaryColor};
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -224,6 +224,9 @@ class Theme {
    this.gitBranchLabel5 = this.gitBranchLabel5 || this.branchLabelColor;
    this.gitBranchLabel6 = this.gitBranchLabel6 || this.branchLabelColor;
    this.gitBranchLabel7 = this.gitBranchLabel7 || this.branchLabelColor;
+
+    this.tagLabelColor = this.tagLabelColor || this.darkMode ? this.branchLabelColor : 'white';
+    this.tagLabelBackground = this.tagLabelBackground || this.primaryColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {