From f25c215f6aed34b100877874ae656b9069eb66c2 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Tue, 6 Feb 2024 14:34:09 -0800 Subject: [PATCH 1/3] add actor-man and actor-box classes to text tag --- packages/mermaid/src/diagrams/sequence/svgDraw.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index e2f1ffa6a..52e17abdb 100644 --- a/packages/mermaid/src/diagrams/sequence/svgDraw.js +++ b/packages/mermaid/src/diagrams/sequence/svgDraw.js @@ -7,6 +7,8 @@ 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'; +const ACTOR_BOX_CLASS = 'actor-box'; +const ACTOR_MAN_FIGURE_CLASS = 'actor-man'; export const drawRect = function (elem, rectData) { return svgDrawCommon.drawRect(elem, rectData); @@ -352,7 +354,7 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) { rect.y, rect.width, rect.height, - { class: 'actor' }, + { class: `actor ${ACTOR_BOX_CLASS}` }, conf ); @@ -390,7 +392,7 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { actor.actorCnt = actorCnt; } const actElem = elem.append('g'); - let cssClass = 'actor-man'; + let cssClass = ACTOR_MAN_FIGURE_CLASS; if (isFooter) { cssClass += ` ${BOTTOM_ACTOR_CLASS}`; } else { @@ -453,7 +455,7 @@ const drawActorTypeActor = function (elem, actor, conf, isFooter) { rect.y + 35, rect.width, rect.height, - { class: 'actor' }, + { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` }, conf ); From f846e7719e1ca195268c9b7136b4d72de88b5090 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Tue, 6 Feb 2024 15:12:13 -0800 Subject: [PATCH 2/3] add tests --- cypress/integration/rendering/sequencediagram.spec.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js index 306b6c79f..a81f18a2d 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 and actor-bottom classes on top and bottom actor box and symbol', () => { + it('should have actor-top and actor-bottom classes on top and bottom actor box and symbol and actor-box and actor-man classes for text tags', () => { imgSnapshotTest( ` sequenceDiagram @@ -394,6 +394,9 @@ context('Sequence diagram', () => { 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'); + + cy.get('text.actor-box').should('include.text', 'Alice'); + cy.get('text.actor-man').should('include.text', 'Bob'); }); it('should render long notes left of actor', () => { imgSnapshotTest( From c3d9aa791a6996b505fdae5fa61e950040ab3114 Mon Sep 17 00:00:00 2001 From: Ronid1 Date: Tue, 6 Feb 2024 15:17:15 -0800 Subject: [PATCH 3/3] update docs --- docs/syntax/sequenceDiagram.md | 34 ++++++++++--------- .../src/docs/syntax/sequenceDiagram.md | 34 ++++++++++--------- 2 files changed, 36 insertions(+), 32 deletions(-) diff --git a/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md index eb2f7ad23..7ff601009 100644 --- a/docs/syntax/sequenceDiagram.md +++ b/docs/syntax/sequenceDiagram.md @@ -740,22 +740,24 @@ 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. | -| 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. | +| 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 of all of the actors. | +| text.actor-box | Styles for text of the actor box. | +| text.actor-man | Styles for text of the actor figure. | +| 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 091e8b783..6d63e22cd 100644 --- a/packages/mermaid/src/docs/syntax/sequenceDiagram.md +++ b/packages/mermaid/src/docs/syntax/sequenceDiagram.md @@ -518,22 +518,24 @@ 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. | -| 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. | +| 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 of all of the actors. | +| text.actor-box | Styles for text of the actor box. | +| text.actor-man | Styles for text of the actor figure. | +| 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