diff --git a/cypress/platform/gitgraph.html b/cypress/platform/gitgraph.html index 69c110084..8453c97b8 100644 --- a/cypress/platform/gitgraph.html +++ b/cypress/platform/gitgraph.html @@ -26,7 +26,7 @@

info below

-
+
gitGraph: commit "Ashish" branch newbranch @@ -42,7 +42,7 @@ commit
-
+
gitGraph: commit branch hotfix @@ -87,7 +87,7 @@ merge release
-
+
gitGraph: commit commit diff --git a/cypress/platform/gitgraph2.html b/cypress/platform/gitgraph2.html new file mode 100644 index 000000000..318643785 --- /dev/null +++ b/cypress/platform/gitgraph2.html @@ -0,0 +1,138 @@ + + + + + + + + +

info below

+
+ 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 + +
+
+ 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 + +
+
+ gitGraph: + commit + commit + branch newbranch + commit + merge main +
+ + + + diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 0ecd9d9dc..92c395453 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -66,6 +66,7 @@ merge newbranch
sequenceDiagram + title: with colon: participant a as Alice participant j as John note right of a: Hello world! diff --git a/docs/Setup.md b/docs/Setup.md index 527bbb56a..ed981e680 100644 --- a/docs/Setup.md +++ b/docs/Setup.md @@ -1073,16 +1073,61 @@ To be removed ```html ``` diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js index ab97006bf..f4fe0ad6f 100644 --- 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) { diff --git a/src/diagrams/git/styles.js b/src/diagrams/git/styles.js index bd8f86d7e..8160bbe3b 100644 --- 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}; diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js index fecbb3461..43f1a6f73 100644 --- 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') {