diff --git a/.changeset/weak-trees-perform.md b/.changeset/weak-trees-perform.md new file mode 100644 index 000000000..17175301d --- /dev/null +++ b/.changeset/weak-trees-perform.md @@ -0,0 +1,5 @@ +--- +'mermaid': patch +--- + +fix: `getDirection` and `setDirection` in `stateDb` refactored to return and set actual direction diff --git a/packages/mermaid/src/diagrams/state/stateCommon.ts b/packages/mermaid/src/diagrams/state/stateCommon.ts index 17a1bd24a..2902ce6b0 100644 --- a/packages/mermaid/src/diagrams/state/stateCommon.ts +++ b/packages/mermaid/src/diagrams/state/stateCommon.ts @@ -3,11 +3,14 @@ */ // default diagram direction -export const DEFAULT_DIAGRAM_DIRECTION = 'LR'; +export const DEFAULT_DIAGRAM_DIRECTION = 'TB'; // default direction for any nested documents (composites) export const DEFAULT_NESTED_DOC_DIR = 'TB'; +// parsed statement type for a direction +export const STMT_DIRECTION = 'dir'; + // parsed statement type for a state export const STMT_STATE = 'state'; // parsed statement type for a relation diff --git a/packages/mermaid/src/diagrams/state/stateDb.js b/packages/mermaid/src/diagrams/state/stateDb.js index f83506827..029db9c6f 100644 --- a/packages/mermaid/src/diagrams/state/stateDb.js +++ b/packages/mermaid/src/diagrams/state/stateDb.js @@ -20,6 +20,7 @@ import { DIVIDER_TYPE, STMT_APPLYCLASS, STMT_CLASSDEF, + STMT_DIRECTION, STMT_RELATION, STMT_STATE, STMT_STYLEDEF, @@ -90,11 +91,6 @@ export class StateDB { */ edges = []; - /** - * @private - * @type {string} - */ - direction = DEFAULT_DIAGRAM_DIRECTION; /** * @private * @type {Array} @@ -661,11 +657,26 @@ export class StateDB { } } - getDirection() { - return this.direction; + /** + * Finds the direction statement in the root document. + * @private + * @returns {{ value: string } | undefined} - the direction statement if present + */ + getDirectionStatement() { + return this.rootDoc.find((doc) => doc.stmt === STMT_DIRECTION); } + + getDirection() { + return this.getDirectionStatement()?.value ?? DEFAULT_DIAGRAM_DIRECTION; + } + setDirection(dir) { - this.direction = dir; + const doc = this.getDirectionStatement(); + if (doc) { + doc.value = dir; + } else { + this.rootDoc.unshift({ stmt: STMT_DIRECTION, value: dir }); + } } trimColon(str) { diff --git a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js index d5dc96f58..a79e44d5d 100644 --- a/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js +++ b/packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js @@ -1,4 +1,5 @@ import stateDiagram, { parser } from './parser/stateDiagram.jison'; +import { DEFAULT_DIAGRAM_DIRECTION } from './stateCommon.js'; import { StateDB } from './stateDb.js'; describe('state diagram V2, ', function () { @@ -412,5 +413,34 @@ describe('state diagram V2, ', function () { const rel_Active_Active = rels.find((rel) => rel.id1 === 'Active' && rel.id2 === 'Active'); expect(rel_Active_Active.relationTitle).toEqual('LOG'); }); + + it('should check default diagram direction', () => { + const diagram = ` + stateDiagram + [*] --> Still + Still --> [*] + `; + + parser.parse(diagram); + + // checking default direction if no direction is specified + const defaultDir = stateDb.getDirection(); + expect(defaultDir).toEqual(DEFAULT_DIAGRAM_DIRECTION); + }); + + it('retrieve the diagram direction correctly', () => { + const diagram = ` + stateDiagram + direction LR + [*] --> Still + Still --> [*] + `; + + parser.parse(diagram); + + //retrieve the diagram direction + const currentDirection = stateDb.getDirection(); + expect(currentDirection).toEqual('LR'); + }); }); });