diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 49e1aaaa6..9b3426ce8 100644 --- 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 index 10432f057..306b6c79f 100644 --- 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 index 6e419fbc5..eb2f7ad23 100644 --- 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 index 380a79f19..9f5e3933a 100644 --- 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,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) { + setData(data: Partial) { this.data = { ...this.data, ...data }; } diff --git a/packages/mermaid/src/diagrams/sequence/svgDraw.js b/packages/mermaid/src/diagrams/sequence/svgDraw.js index ef8ed6f00..e2f1ffa6a 100644 --- 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 index 5e4731eed..091e8b783 100644 --- 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