mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge branch '3358-blocks-diagram' of github.com:mermaid-js/mermaid into 3358-blocks-diagram

This commit is contained in:
Knut Sveidqvist 2024-02-01 10:41:11 +01:00
parent 16149abcc0 13d0b61757
commit d3c5b02008
6 changed files with 81 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.eslintrc.cjs
View File

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

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

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

30
docs/syntax/sequenceDiagram.md
View File

@ -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

8
packages/mermaid/src/diagrams/quadrant-chart/quadrantBuilder.ts
View File

@ -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 };
}

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

@ -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;

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

@ -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