marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-01 14:46:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5272 from Ronid1/feature/5245-sequence_diagrame_add_classes_to_actors_text

Browse Source 
Feature/5245 sequence diagram add classes to actors text
This commit is contained in:
Sidharth Vinod
2024-03-23 13:31:54 +05:30
committed by GitHub
parent 7ddea1270f 6c0be03e62
commit d5b1028732
4 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/integration/rendering/sequencediagram.spec.js
View File

@@ -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( imgSnapshotTest(
` `
sequenceDiagram sequenceDiagram
@@ -394,6 +394,9 @@ context('Sequence diagram', () => {
cy.get('.actor-man').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.actor-bottom').should('not.have.class', 'actor-top');
cy.get('.actor-man.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', () => { it('should render long notes left of actor', () => {
imgSnapshotTest( imgSnapshotTest(

6
docs/syntax/sequenceDiagram.md
View File

@@ -741,11 +741,13 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
### Classes used ### Classes used
| Class | Description | | Class | Description |
| ------------ | -------------------------------------------------------------- | | -------------- | -------------------------------------------------------------- |
| actor | Styles for the actor box. | | actor | Styles for the actor box. |
| actor-top | Styles for the actor figure/ box at the top of the diagram. | | 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. | | actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
| text.actor | Styles for text in the actor box. | | 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. | | actor-line | The vertical line for an actor. |
| messageLine0 | Styles for the solid message line. | | messageLine0 | Styles for the solid message line. |
| messageLine1 | Styles for the dotted message line. | | messageLine1 | Styles for the dotted message line. |

8
packages/mermaid/src/diagrams/sequence/svgDraw.js
View File

@@ -8,6 +8,8 @@ import * as configApi from '../../config.js';
export const ACTOR_TYPE_WIDTH = 18 * 2; export const ACTOR_TYPE_WIDTH = 18 * 2;
const TOP_ACTOR_CLASS = 'actor-top'; const TOP_ACTOR_CLASS = 'actor-top';
const BOTTOM_ACTOR_CLASS = 'actor-bottom'; 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) { export const drawRect = function (elem, rectData) {
return svgDrawCommon.drawRect(elem, rectData); return svgDrawCommon.drawRect(elem, rectData);
@@ -395,7 +397,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
rect.y, rect.y,
rect.width, rect.width,
rect.height, rect.height,
{ class: 'actor' }, { class: `actor ${ACTOR_BOX_CLASS}` },
conf conf
); );
@@ -433,7 +435,7 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
actor.actorCnt = actorCnt; actor.actorCnt = actorCnt;
} }
const actElem = elem.append('g'); const actElem = elem.append('g');
let cssClass = 'actor-man'; let cssClass = ACTOR_MAN_FIGURE_CLASS;
if (isFooter) { if (isFooter) {
cssClass += ` ${BOTTOM_ACTOR_CLASS}`; cssClass += ` ${BOTTOM_ACTOR_CLASS}`;
} else { } else {
@@ -497,7 +499,7 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
rect.y + 35, rect.y + 35,
rect.width, rect.width,
rect.height, rect.height,
{ class: 'actor' }, { class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
conf conf
); );

6
packages/mermaid/src/docs/syntax/sequenceDiagram.md
View File

@@ -519,11 +519,13 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
### Classes used ### Classes used
| Class | Description | | Class | Description |
| ------------ | -------------------------------------------------------------- | | -------------- | -------------------------------------------------------------- |
| actor | Styles for the actor box. | | actor | Styles for the actor box. |
| actor-top | Styles for the actor figure/ box at the top of the diagram. | | 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. | | actor-bottom | Styles for the actor figure/ box at the bottom of the diagram. |
| text.actor | Styles for text in the actor box. | | 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. | | actor-line | The vertical line for an actor. |
| messageLine0 | Styles for the solid message line. | | messageLine0 | Styles for the solid message line. |
| messageLine1 | Styles for the dotted message line. | | messageLine1 | Styles for the dotted message line. |