Merge pull request #6295 from mermaid-js/omkar/fix-state-diagram-default-direction

Fix: state diagram default direction update

.changeset/weak-trees-perform.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: `getDirection` and `setDirection` in `stateDb` refactored to return and set actual direction

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

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) {

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');
+    });
   });
 });