Merge pull request mermaid-js#5338 from ad1992/aakansha/line-name

feat: add name attribute and class "actor-line" to line
Yokozuna59 · Mar 8, 2024 · 648f779 · 648f779
2 parents 05f59f6 + 233944b
commit 648f779
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 14 deletions.
diff --git a/docs/config/theming.md b/docs/config/theming.md
@@ -250,7 +250,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | actorBkg              | mainBkg                        | Actor Background Color      |
 | actorBorder           | primaryBorderColor             | Actor Border Color          |
 | actorTextColor        | primaryTextColor               | Actor Text Color            |
-| actorLineColor        | grey                           | Actor Line Color            |
+| actorLineColor        | actorBorder                    | Actor Line Color            |
 | signalColor           | textColor                      | Signal Color                |
 | signalTextColor       | textColor                      | Signal Text Color           |
 | labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -343,10 +343,10 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
       .attr('y1', centerY)
       .attr('x2', center)
       .attr('y2', 2000)
-      .attr('class', 'actor-line')
-      .attr('class', '200')
+      .attr('class', 'actor-line 200')
       .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999');
+      .attr('stroke', '#999')
+      .attr('name', actor.name);
 
     g = boxplusLineGroup.append('g');
     actor.actorCnt = actorCnt;
@@ -425,10 +425,10 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
       .attr('y1', centerY)
       .attr('x2', center)
       .attr('y2', 2000)
-      .attr('class', 'actor-line')
-      .attr('class', '200')
+      .attr('class', 'actor-line 200')
       .attr('stroke-width', '0.5px')
-      .attr('stroke', '#999');
+      .attr('stroke', '#999')
+      .attr('name', actor.name);
 
     actor.actorCnt = actorCnt;
   }

diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
@@ -172,7 +172,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | actorBkg              | mainBkg                        | Actor Background Color      |
 | actorBorder           | primaryBorderColor             | Actor Border Color          |
 | actorTextColor        | primaryTextColor               | Actor Text Color            |
-| actorLineColor        | grey                           | Actor Line Color            |
+| actorLineColor        | actorBorder                    | Actor Line Color            |
 | signalColor           | textColor                      | Signal Color                |
 | signalTextColor       | textColor                      | Signal Text Color           |
 | labelBoxBkgColor      | actorBkg                       | Label Box Background Color  |

diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
@@ -70,7 +70,7 @@ class Theme {
     this.actorBorder = this.actorBorder || this.primaryBorderColor;
     this.actorBkg = this.actorBkg || this.mainBkg;
     this.actorTextColor = this.actorTextColor || this.primaryTextColor;
-    this.actorLineColor = this.actorLineColor || 'grey';
+    this.actorLineColor = this.actorLineColor || this.actorBorder;
     this.labelBoxBkgColor = this.labelBoxBkgColor || this.actorBkg;
     this.signalColor = this.signalColor || this.textColor;
     this.signalTextColor = this.signalTextColor || this.textColor;

diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
@@ -109,7 +109,7 @@ class Theme {
     this.actorBorder = this.border1;
     this.actorBkg = this.mainBkg;
     this.actorTextColor = this.mainContrastColor;
-    this.actorLineColor = this.mainContrastColor;
+    this.actorLineColor = this.actorBorder;
     this.signalColor = this.mainContrastColor;
     this.signalTextColor = this.mainContrastColor;
     this.labelBoxBkgColor = this.actorBkg;

diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
@@ -53,7 +53,7 @@ class Theme {
     this.actorBorder = 'calculated';
     this.actorBkg = 'calculated';
     this.actorTextColor = 'black';
-    this.actorLineColor = 'grey';
+    this.actorLineColor = 'calculated';
     this.signalColor = 'calculated';
     this.signalTextColor = 'calculated';
     this.labelBoxBkgColor = 'calculated';
@@ -187,6 +187,7 @@ class Theme {
     this.loopTextColor = this.actorTextColor;
     this.noteBorderColor = this.border2;
     this.noteTextColor = this.actorTextColor;
+    this.actorLineColor = this.actorBorder;
 
     /* Gantt chart variables */
 

diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
@@ -46,7 +46,7 @@ class Theme {
     this.actorBorder = 'calculated';
     this.actorBkg = 'calculated';
     this.actorTextColor = 'black';
-    this.actorLineColor = 'grey';
+    this.actorLineColor = 'calculated';
     this.signalColor = '#333';
     this.signalTextColor = '#333';
     this.labelBoxBkgColor = 'calculated';
@@ -101,6 +101,7 @@ class Theme {
     this.loopTextColor = this.actorTextColor;
     this.noteBorderColor = this.border2;
     this.noteTextColor = this.actorTextColor;
+    this.actorLineColor = this.actorBorder;
 
     /* Each color-set will have a background, a foreground and a border color */
     this.cScale0 = this.cScale0 || this.primaryColor;

diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
@@ -58,7 +58,7 @@ class Theme {
     this.actorBorder = 'calculated';
     this.actorBkg = 'calculated';
     this.actorTextColor = 'calculated';
-    this.actorLineColor = 'calculated';
+    this.actorLineColor = this.actorBorder;
     this.signalColor = 'calculated';
     this.signalTextColor = 'calculated';
     this.labelBoxBkgColor = 'calculated';
@@ -113,7 +113,7 @@ class Theme {
     this.actorBorder = lighten(this.border1, 23);
     this.actorBkg = this.mainBkg;
     this.actorTextColor = this.text;
-    this.actorLineColor = this.lineColor;
+    this.actorLineColor = this.actorBorder;
     this.signalColor = this.text;
     this.signalTextColor = this.text;
     this.labelBoxBkgColor = this.actorBkg;