From 60a484f1e4b36e65fca876f229e3f0c5d4c8b25e Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 27 Feb 2024 18:20:03 +0530 Subject: [PATCH 1/5] feat: add name attribute to line --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 17842b092..160477637 100644 --- 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; } From 099a239207105a382a50ec459e43cca849b1e438 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Wed, 6 Mar 2024 17:13:33 +0530 Subject: [PATCH 2/5] revert styling changes --- docs/config/theming.md | 2 +- packages/mermaid/src/docs/config/theming.md | 2 +- packages/mermaid/src/themes/theme-base.js | 2 +- packages/mermaid/src/themes/theme-dark.js | 2 +- packages/mermaid/src/themes/theme-default.js | 2 +- packages/mermaid/src/themes/theme-forest.js | 2 +- packages/mermaid/src/themes/theme-neutral.js | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/config/theming.md b/docs/config/theming.md index f8614b44b..5abccc7e4 100644 --- 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/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md index 590301d70..3863202b4 100644 --- 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 index d1a6eae2a..dde3b9ecf 100644 --- 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 index c56625109..ae264e9e9 100644 --- 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 index 6aa18fcc7..c149b43f3 100644 --- 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'; diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js index 0270f51ff..8ebe78ec8 100644 --- 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'; diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 446a9189d..032ed43c6 100644 --- 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'; From b156c1ab255fa9ff7b64fd6066f8c1291d5016a5 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Wed, 6 Mar 2024 19:14:56 +0530 Subject: [PATCH 3/5] assign actorLineColor --- packages/mermaid/src/themes/theme-default.js | 1 + packages/mermaid/src/themes/theme-forest.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index c149b43f3..d95ccf59e 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -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 index 077e07f9e..4bb7d2441 100644 --- a/packages/mermaid/src/themes/theme-forest.js +++ b/packages/mermaid/src/themes/theme-forest.js @@ -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; From 233944bf2469859d3164dbdc6d0ede5baee95050 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Fri, 8 Mar 2024 11:20:25 +0530 Subject: [PATCH 5/5] use actorBorderColor for actorLineColor in theme-neutral --- packages/mermaid/src/themes/theme-neutral.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js index 032ed43c6..4134a985b 100644 --- a/packages/mermaid/src/themes/theme-neutral.js +++ b/packages/mermaid/src/themes/theme-neutral.js @@ -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;