Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/5245 sequence diagram add classes to actors text #5272

Merged
merged 4 commits into from
Mar 23, 2024
Merged

Feature/5245 sequence diagram add classes to actors text #5272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f25c215
add actor-man and actor-box classes to text tag
Ronid1 Feb 6, 2024
f846e77
add tests
Ronid1 Feb 6, 2024
c3d9aa7
update docs
Ronid1 Feb 6, 2024
6c0be03
Merge branch 'develop' into feature/5245-sequence_diagrame_add_classe…
sidharthv96 Mar 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion cypress/integration/rendering/sequencediagram.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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(
Expand Down
34 changes: 18 additions & 16 deletions docs/syntax/sequenceDiagram.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 5 additions & 3 deletions packages/mermaid/src/diagrams/sequence/svgDraw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import * as configApi from '../../config.js';
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);
Expand Down Expand Up @@ -395,7 +397,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
rect.y,
rect.width,
rect.height,
{ class: 'actor' },
{ class: `actor ${ACTOR_BOX_CLASS}` },
conf
);

Expand Down Expand Up @@ -433,7 +435,7 @@ const drawActorTypeActor = async 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 {
Expand Down Expand Up @@ -497,7 +499,7 @@ const drawActorTypeActor = async function (elem, actor, conf, isFooter) {
rect.y + 35,
rect.width,
rect.height,
{ class: 'actor' },
{ class: `actor ${ACTOR_MAN_FIGURE_CLASS}` },
conf
);

Expand Down
34 changes: 18 additions & 16 deletions packages/mermaid/src/docs/syntax/sequenceDiagram.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading