Merge branch 'develop' into 3358-blocks-diagram

mermaid-js · Jan 31, 2024 · 13d0b61 · 13d0b61
2 parents cd7003e + 33d45f6
commit 13d0b61
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 33 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -63,6 +63,17 @@ module.exports = {
         minimumDescriptionLength: 10,
       },
     ],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'typeLike',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: false,
+        },
+      },
+    ],
     'json/*': ['error', 'allowComments'],
     '@cspell/spellchecker': [
       'error',

diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
@@ -375,6 +375,26 @@ context('Sequence diagram', () => {
         {}
       );
     });
+    it('should have actor-top and actor-bottom classes on top and bottom 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');
+      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/docs/syntax/sequenceDiagram.md b/docs/syntax/sequenceDiagram.md
@@ -740,20 +740,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ### Classes used
 
-| 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-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/diagrams/quadrant-chart/quadrantBuilder.ts b/packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
@@ -53,7 +53,7 @@ export interface QuadrantBuildType {
   borderLines?: QuadrantLineType[];
 }
 
-export interface quadrantBuilderData {
+export interface QuadrantBuilderData {
   titleText: string;
   quadrant1Text: string;
   quadrant2Text: string;
@@ -116,15 +116,15 @@ interface CalculateSpaceData {
 export class QuadrantBuilder {
   private config: QuadrantBuilderConfig;
   private themeConfig: QuadrantBuilderThemeConfig;
-  private data: quadrantBuilderData;
+  private data: QuadrantBuilderData;
 
   constructor() {
     this.config = this.getDefaultConfig();
     this.themeConfig = this.getDefaultThemeConfig();
     this.data = this.getDefaultData();
   }
 
-  getDefaultData(): quadrantBuilderData {
+  getDefaultData(): QuadrantBuilderData {
     return {
       titleText: '',
       quadrant1Text: '',
@@ -194,7 +194,7 @@ export class QuadrantBuilder {
     log.info('clear called');
   }
 
-  setData(data: Partial<quadrantBuilderData>) {
+  setData(data: Partial<QuadrantBuilderData>) {
     this.data = { ...this.data, ...data };
   }
 

diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js
@@ -5,6 +5,8 @@ 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';
+const BOTTOM_ACTOR_CLASS = 'actor-bottom';
 
 export const drawRect = function (elem, rectData) {
   return svgDrawCommon.drawRect(elem, rectData);
@@ -319,6 +321,11 @@ const drawActorTypeParticipant = function (elem, actor, conf, isFooter) {
   } else {
     rect.fill = '#eaeaea';
   }
+  if (isFooter) {
+    cssclass += ` ${BOTTOM_ACTOR_CLASS}`;
+  } else {
+    cssclass += ` ${TOP_ACTOR_CLASS}`;
+  }
   rect.x = actor.x;
   rect.y = actorY;
   rect.width = actor.width;
@@ -383,7 +390,13 @@ 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 += ` ${BOTTOM_ACTOR_CLASS}`;
+  } else {
+    cssClass += ` ${TOP_ACTOR_CLASS}`;
+  }
+  actElem.attr('class', cssClass);
 
   const rect = svgDrawCommon.getNoteRect();
   rect.x = actor.x;

diff --git a/packages/mermaid/src/docs/syntax/sequenceDiagram.md b/packages/mermaid/src/docs/syntax/sequenceDiagram.md
@@ -518,20 +518,22 @@ Styling of a sequence diagram is done by defining a number of css classes. Durin
 
 ### Classes used
 
-| 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-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