Merge branch 'develop' into 3358-blocks-diagram

.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',

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(
         `

docs/syntax/sequenceDiagram.md

@@ -741,9 +741,11 @@ 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.          |
+| actor        | Styles for the actor box.                                      |
-| text.actor   | Styles for text in the actor 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. |
+| 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.                            |

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,7 +116,7 @@ interface CalculateSpaceData {
 export class QuadrantBuilder {
   private config: QuadrantBuilderConfig;
   private themeConfig: QuadrantBuilderThemeConfig;
-  private data: quadrantBuilderData;
+  private data: QuadrantBuilderData;
 
   constructor() {
     this.config = this.getDefaultConfig();
@@ -124,7 +124,7 @@ export class QuadrantBuilder {
     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 };
   }
 

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;

packages/mermaid/src/docs/syntax/sequenceDiagram.md

@@ -519,9 +519,11 @@ 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.          |
+| actor        | Styles for the actor box.                                      |
-| text.actor   | Styles for text in the actor 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. |
+| 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.                            |