From f2f8d89a2870ec28b1a84afcfc3ce907816c71d3 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Thu, 25 Jan 2024 17:16:09 -0800 Subject: [PATCH 1/6] add actor-top class to rectangle actor and man actor --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index f81147c10c..953e5b0833 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -356,6 +356,9 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { } else { rect.fill = '#eaeaea'; } + if (!isFooter) { + cssclass += ' actor-top'; + } rect.x = actor.x; rect.y = actorY; rect.width = actor.width; @@ -420,7 +423,11 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { actor.actorCnt = actorCnt; } const actElem = elem.append('g'); - actElem.attr('class', 'actor-man'); + let cssClass = 'actor-man'; + if (!isFooter) { + cssClass += ' actor-top'; + } + actElem.attr('class', cssClass); const rect = svgDrawCommon.getNoteRect(); rect.x = actor.x; From b253cd65d436e40e6fd7f1301a3db2a27112ef5d Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Thu, 25 Jan 2024 13:32:03 -0800 Subject: [PATCH 2/6] update docs --- docs/syntax/sequenceDiagram.md | 5 +++-- packages/mermaid/src/docs/syntax/sequenceDiagram.md | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 6e419fbc5c..7557fef671 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -742,8 +742,9 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin | Class | Description | | ------------ | ----------------------------------------------------------- | -| actor | Style for the actor box at the top of the diagram. | -| text.actor | Styles for text in the actor box at the top of the diagram. | +| actor | Styles for the actor box. | +| actor-top | Styles for the actor figure/ box at the top of the diagram. | +| text.actor | Styles for text in the actor box. | | actor-line | The vertical line for an actor. | | messageLine0 | Styles for the solid message line. | | messageLine1 | Styles for the dotted message line. | diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index 5e4731eede..ed36906204 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -520,8 +520,9 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin | Class | Description | | ------------ | ----------------------------------------------------------- | -| actor | Style for the actor box at the top of the diagram. | -| text.actor | Styles for text in the actor box at the top of the diagram. | +| actor | Styles for the actor box. | +| actor-top | Styles for the actor figure/ box at the top of the diagram. | +| text.actor | Styles for text in the actor box. | | actor-line | The vertical line for an actor. | | messageLine0 | Styles for the solid message line. | | messageLine1 | Styles for the dotted message line. | From 70d9f50fc9fc3fc5d8e65f3be8812851799b7cf7 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Thu, 25 Jan 2024 17:59:46 -0800 Subject: [PATCH 3/6] add const for class name --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index 953e5b0833..c319501607 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -5,6 +5,7 @@ import { ZERO_WIDTH_SPACE, parseFontSize } from '../../utils.js'; import { sanitizeUrl } from '@braintree/sanitize-url'; export const ACTOR_TYPE_WIDTH = 18 * 2; +const TOP_ACTOR_CLASS = 'actor-top'; export const drawRect = function (elem, rectData) { return svgDrawCommon.drawRect(elem, rectData); @@ -357,7 +358,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { rect.fill = '#eaeaea'; } if (!isFooter) { - cssclass += ' actor-top'; + cssclass += ` ${TOP_ACTOR_CLASS}`; } rect.x = actor.x; rect.y = actorY; @@ -425,7 +426,7 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { const actElem = elem.append('g'); let cssClass = 'actor-man'; if (!isFooter) { - cssClass += ' actor-top'; + cssClass += ` ${TOP_ACTOR_CLASS}`; } actElem.attr('class', cssClass); From 36c196e80b2cf386ba5a560de30848b7cbc0f104 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Fri, 26 Jan 2024 14:07:12 -0800 Subject: [PATCH 4/6] add test --- .../integration/rendering/sequencediagram.spec.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 27e03da9c0..d5f352b3a1 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -375,6 +375,19 @@ context('Sequence diagram', () => { {} ); }); + it('should have actor-top class on top actor box and symbol', () => { + imgSnapshotTest( + ` + sequenceDiagram + actor Bob + Alice->>Bob: Hi Bob + Bob->>Alice: Hi Alice + `, + {} + ); + cy.get('.actor').should('have.class', 'actor-top'); + cy.get('.actor-man').should('have.class', 'actor-top'); + }); it('should render long notes left of actor', () => { imgSnapshotTest( ` From f737c9f6f907d14b1852e2412bfb10018a923760 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Mon, 29 Jan 2024 11:42:23 -0800 Subject: [PATCH 5/6] add actor-bottom class --- cypress/integration/rendering/sequencediagram.spec.js | 9 ++++++++- packages/mermaid/src/diagrams/sequence/svgDraw.js | 9 +++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 73e9eded09..306b6c79f0 100644 --- a/cypress/integration/rendering/sequencediagram.spec.js +++ b/cypress/integration/rendering/sequencediagram.spec.js @@ -375,7 +375,7 @@ context('Sequence diagram', () => { {} ); }); - it('should have actor-top class on top actor box and symbol', () => { + it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol', () => { imgSnapshotTest( ` sequenceDiagram @@ -387,6 +387,13 @@ context('Sequence diagram', () => { ); cy.get('.actor').should('have.class', 'actor-top'); cy.get('.actor-man').should('have.class', 'actor-top'); + cy.get('.actor.actor-top').should('not.have.class', 'actor-bottom'); + cy.get('.actor-man.actor-top').should('not.have.class', 'actor-bottom'); + + cy.get('.actor').should('have.class', 'actor-bottom'); + cy.get('.actor-man').should('have.class', 'actor-bottom'); + cy.get('.actor.actor-bottom').should('not.have.class', 'actor-top'); + cy.get('.actor-man.actor-bottom').should('not.have.class', 'actor-top'); }); it('should render long notes left of actor', () => { imgSnapshotTest( diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index c407034069..e2f1ffa6a6 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -6,6 +6,7 @@ import { sanitizeUrl } from '@braintree/sanitize-url'; export const ACTOR_TYPE_WIDTH = 18 * 2; const TOP_ACTOR_CLASS = 'actor-top'; +const BOTTOM_ACTOR_CLASS = 'actor-bottom'; export const drawRect = function (elem, rectData) { return svgDrawCommon.drawRect(elem, rectData); @@ -320,7 +321,9 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { } else { rect.fill = '#eaeaea'; } - if (!isFooter) { + if (isFooter) { + cssclass += ` ${BOTTOM_ACTOR_CLASS}`; + } else { cssclass += ` ${TOP_ACTOR_CLASS}`; } rect.x = actor.x; @@ -388,7 +391,9 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { } const actElem = elem.append('g'); let cssClass = 'actor-man'; - if (!isFooter) { + if (isFooter) { + cssClass += ` ${BOTTOM_ACTOR_CLASS}`; + } else { cssClass += ` ${TOP_ACTOR_CLASS}`; } actElem.attr('class', cssClass); From cddca04885f6a7ae4d585cb4d1a4277c55069c79 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Mon, 29 Jan 2024 12:39:39 -0800 Subject: [PATCH 6/6] add actor-bottom to docs --- docs/syntax/sequenceDiagram.md | 31 ++++++++++--------- .../src/docs/syntax/sequenceDiagram.md | 31 ++++++++++--------- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index 7557fef671..eb2f7ad23e 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -740,21 +740,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin ### Classes used -| Class | Description | -| ------------ | ----------------------------------------------------------- | -| actor | Styles for the actor box. | -| actor-top | Styles for the actor figure/ box at the top of the diagram. | -| text.actor | Styles for text in the actor box. | -| actor-line | The vertical line for an actor. | -| messageLine0 | Styles for the solid message line. | -| messageLine1 | Styles for the dotted message line. | -| messageText | Defines styles for the text on the message arrows. | -| labelBox | Defines styles label to left in a loop. | -| labelText | Styles for the text in label for loops. | -| loopText | Styles for the text in the loop box. | -| loopLine | Defines styles for the lines in the loop box. | -| note | Styles for the note box. | -| noteText | Styles for the text on in the note boxes. | +| Class | Description | +| ------------ | -------------------------------------------------------------- | +| actor | Styles for the actor box. | +| actor-top | Styles for the actor figure/ box at the top of the diagram. | +| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. | +| text.actor | Styles for text in the actor box. | +| actor-line | The vertical line for an actor. | +| messageLine0 | Styles for the solid message line. | +| messageLine1 | Styles for the dotted message line. | +| messageText | Defines styles for the text on the message arrows. | +| labelBox | Defines styles label to left in a loop. | +| labelText | Styles for the text in label for loops. | +| loopText | Styles for the text in the loop box. | +| loopLine | Defines styles for the lines in the loop box. | +| note | Styles for the note box. | +| noteText | Styles for the text on in the note boxes. | ### Sample stylesheet diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md index ed36906204..091e8b7830 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -518,21 +518,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin ### Classes used -| Class | Description | -| ------------ | ----------------------------------------------------------- | -| actor | Styles for the actor box. | -| actor-top | Styles for the actor figure/ box at the top of the diagram. | -| text.actor | Styles for text in the actor box. | -| actor-line | The vertical line for an actor. | -| messageLine0 | Styles for the solid message line. | -| messageLine1 | Styles for the dotted message line. | -| messageText | Defines styles for the text on the message arrows. | -| labelBox | Defines styles label to left in a loop. | -| labelText | Styles for the text in label for loops. | -| loopText | Styles for the text in the loop box. | -| loopLine | Defines styles for the lines in the loop box. | -| note | Styles for the note box. | -| noteText | Styles for the text on in the note boxes. | +| Class | Description | +| ------------ | -------------------------------------------------------------- | +| actor | Styles for the actor box. | +| actor-top | Styles for the actor figure/ box at the top of the diagram. | +| actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. | +| text.actor | Styles for text in the actor box. | +| actor-line | The vertical line for an actor. | +| messageLine0 | Styles for the solid message line. | +| messageLine1 | Styles for the dotted message line. | +| messageText | Defines styles for the text on the message arrows. | +| labelBox | Defines styles label to left in a loop. | +| labelText | Styles for the text in label for loops. | +| loopText | Styles for the text in the loop box. | +| loopLine | Defines styles for the lines in the loop box. | +| note | Styles for the note box. | +| noteText | Styles for the text on in the note boxes. | ### Sample stylesheet