GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

convert stateDb to class, added test case.

Browse Source
This commit is contained in:
saurabhg772244 2025-01-13 20:30:38 +05:30
parent bc2cc61240
commit fcb1de915b
10 changed files with 654 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/mermaid/src/diagrams/state/parser/state-parser.spec.js
View File

@ -1,4 +1,4 @@
import stateDb from '../stateDb.js'; import { StateDb } from '../stateDb.js';
import stateDiagram from './stateDiagram.jison'; import stateDiagram from './stateDiagram.jison';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@ -7,7 +7,9 @@ setConfig({
}); });
describe('state parser can parse...', () => { describe('state parser can parse...', () => {
let stateDb;
beforeEach(function () { beforeEach(function () {
stateDb = new StateDb();
stateDiagram.parser.yy = stateDb; stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear(); stateDiagram.parser.yy.clear();
}); });

4
packages/mermaid/src/diagrams/state/parser/state-style.spec.js
View File

@ -1,4 +1,4 @@
import stateDb from '../stateDb.js'; import { StateDb } from '../stateDb.js';
import stateDiagram from './stateDiagram.jison'; import stateDiagram from './stateDiagram.jison';
import { setConfig } from '../../../config.js'; import { setConfig } from '../../../config.js';
@ -7,7 +7,9 @@ setConfig({
}); });
describe('ClassDefs and classes when parsing a State diagram', () => { describe('ClassDefs and classes when parsing a State diagram', () => {
let stateDb;
beforeEach(function () { beforeEach(function () {
stateDb = new StateDb();
stateDiagram.parser.yy = stateDb; stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear(); stateDiagram.parser.yy.clear();
}); });

3
packages/mermaid/src/diagrams/state/shapes.js
View File

@ -1,6 +1,6 @@
import { line, curveBasis } from 'd3'; import { line, curveBasis } from 'd3';
import idCache from './id-cache.js'; import idCache from './id-cache.js';
import stateDb from './stateDb.js'; import { StateDb } from './stateDb.js';
import utils from '../../utils.js'; import utils from '../../utils.js';
import common from '../common/common.js'; import common from '../common/common.js';
import { getConfig } from '../../diagram-api/diagramAPI.js'; import { getConfig } from '../../diagram-api/diagramAPI.js';
@ -412,6 +412,7 @@ export const drawState = function (elem, stateDef) {
let edgeCount = 0; let edgeCount = 0;
export const drawEdge = function (elem, path, relation) { export const drawEdge = function (elem, path, relation) {
const stateDb = new StateDb();
const getRelationType = function (type) { const getRelationType = function (type) {
switch (type) { switch (type) {
case stateDb.relationType.AGGREGATION: case stateDb.relationType.AGGREGATION:

378
packages/mermaid/src/diagrams/state/stateDb.js
View File

@ -1,39 +1,40 @@
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { log } from '../../logger.js'; import { log } from '../../logger.js';
import { generateId } from '../../utils.js'; import { generateId } from '../../utils.js';
import common from '../common/common.js'; import common from '../common/common.js';
import { getConfig } from '../../diagram-api/diagramAPI.js';
import { import {
setAccTitle,
getAccTitle,
getAccDescription,
setAccDescription,
clear as commonClear, clear as commonClear,
setDiagramTitle, getAccDescription,
getAccTitle,
getDiagramTitle, getDiagramTitle,
setAccDescription,
setAccTitle,
setDiagramTitle,
} from '../common/commonDb.js'; } from '../common/commonDb.js';
import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js'; import { dataFetcher, reset as resetDataFetching } from './dataFetcher.js';
import { getDir } from './stateRenderer-v3-unified.js'; import { getDir } from './stateRenderer-v3-unified.js';
import { import {
DEFAULT_DIAGRAM_DIRECTION, DEFAULT_DIAGRAM_DIRECTION,
STMT_STATE,
STMT_RELATION,
STMT_CLASSDEF,
STMT_STYLEDEF,
STMT_APPLYCLASS,
DEFAULT_STATE_TYPE, DEFAULT_STATE_TYPE,
DIVIDER_TYPE, DIVIDER_TYPE,
STMT_APPLYCLASS,
STMT_CLASSDEF,
STMT_RELATION,
STMT_STATE,
STMT_STYLEDEF,
} from './stateCommon.js'; } from './stateCommon.js';
const START_NODE = '[*]'; export class StateDb {
const START_TYPE = 'start'; #START_NODE = '[*]';
const END_NODE = START_NODE; #START_TYPE = 'start';
const END_TYPE = 'end'; #END_NODE = this.#START_NODE;
#END_TYPE = 'end';
const COLOR_KEYWORD = 'color'; #COLOR_KEYWORD = 'color';
const FILL_KEYWORD = 'fill'; #FILL_KEYWORD = 'fill';
const BG_FILL = 'bgFill'; #BG_FILL = 'bgFill';
const STYLECLASS_SEP = ','; #STYLECLASS_SEP = ',';
/** /**
* Returns a new list of classes. * Returns a new list of classes.
@ -42,20 +43,24 @@ const STYLECLASS_SEP = ',';
* *
* @returns {Map<string, any>} * @returns {Map<string, any>}
*/ */
function newClassesList() { #newClassesList = () => {
return new Map(); return new Map();
};
#nodes = [];
#edges = [];
#direction = DEFAULT_DIAGRAM_DIRECTION;
#rootDoc = [];
#classes = this.#newClassesList(); // style classes defined by a classDef
constructor() {
this.clear();
} }
let nodes = [];
let edges = [];
let direction = DEFAULT_DIAGRAM_DIRECTION;
let rootDoc = [];
let classes = newClassesList(); // style classes defined by a classDef
// -------------------------------------- // --------------------------------------
const newDoc = () => { #newDoc = () => {
return { return {
/** @type {{ id1: string, id2: string, relationTitle: string }[]} */ /** @type {{ id1: string, id2: string, relationTitle: string }[]} */
relations: [], relations: [],
@ -63,40 +68,41 @@ const newDoc = () => {
documents: {}, documents: {},
}; };
}; };
let documents = {
root: newDoc(), #documents = {
root: this.#newDoc(),
}; };
let currentDocument = documents.root; #currentDocument = this.#documents.root;
let startEndCount = 0; #startEndCount = 0;
let dividerCnt = 0; #dividerCnt = 0;
export const lineType = { lineType = {
LINE: 0, LINE: 0,
DOTTED_LINE: 1, DOTTED_LINE: 1,
}; };
export const relationType = { relationType = {
AGGREGATION: 0, AGGREGATION: 0,
EXTENSION: 1, EXTENSION: 1,
COMPOSITION: 2, COMPOSITION: 2,
DEPENDENCY: 3, DEPENDENCY: 3,
}; };
const clone = (o) => JSON.parse(JSON.stringify(o)); #clone = (o) => JSON.parse(JSON.stringify(o));
const setRootDoc = (o) => { setRootDoc = (o) => {
log.info('Setting root doc', o); log.info('Setting root doc', o);
// rootDoc = { id: 'root', doc: o }; // rootDoc = { id: 'root', doc: o };
rootDoc = o; this.#rootDoc = o;
}; };
const getRootDoc = () => rootDoc; getRootDoc = () => this.#rootDoc;
const docTranslator = (parent, node, first) => { #docTranslator = (parent, node, first) => {
if (node.stmt === STMT_RELATION) { if (node.stmt === STMT_RELATION) {
docTranslator(parent, node.state1, true); this.#docTranslator(parent, node.state1, true);
docTranslator(parent, node.state2, false); this.#docTranslator(parent, node.state2, false);
} else { } else {
if (node.stmt === STMT_STATE) { if (node.stmt === STMT_STATE) {
if (node.id === '[*]') { if (node.id === '[*]') {
@ -115,9 +121,8 @@ const docTranslator = (parent, node, first) => {
let i; let i;
for (i = 0; i < node.doc.length; i++) { for (i = 0; i < node.doc.length; i++) {
if (node.doc[i].type === DIVIDER_TYPE) { if (node.doc[i].type === DIVIDER_TYPE) {
// debugger; const newNode = this.#clone(node.doc[i]);
const newNode = clone(node.doc[i]); newNode.doc = this.#clone(currentDoc);
newNode.doc = clone(currentDoc);
doc.push(newNode); doc.push(newNode);
currentDoc = []; currentDoc = [];
} else { } else {
@ -131,19 +136,19 @@ const docTranslator = (parent, node, first) => {
stmt: STMT_STATE, stmt: STMT_STATE,
id: generateId(), id: generateId(),
type: 'divider', type: 'divider',
doc: clone(currentDoc), doc: this.#clone(currentDoc),
}; };
doc.push(clone(newNode)); doc.push(this.#clone(newNode));
node.doc = doc; node.doc = doc;
} }
node.doc.forEach((docNode) => docTranslator(node, docNode, true)); node.doc.forEach((docNode) => this.#docTranslator(node, docNode, true));
} }
} }
}; };
const getRootDocV2 = () => { getRootDocV2 = () => {
docTranslator({ id: 'root' }, { id: 'root', doc: rootDoc }, true); this.#docTranslator({ id: 'root' }, { id: 'root', doc: this.#rootDoc }, true);
return { id: 'root', doc: rootDoc }; return { id: 'root', doc: this.#rootDoc };
// Here // Here
}; };
@ -158,7 +163,7 @@ const getRootDocV2 = () => {
* *
* @param _doc * @param _doc
*/ */
const extract = (_doc) => { extract = (_doc) => {
// const res = { states: [], relations: [] }; // const res = { states: [], relations: [] };
let doc; let doc;
if (_doc.doc) { if (_doc.doc) {
@ -171,7 +176,7 @@ const extract = (_doc) => {
// doc = root; // doc = root;
// } // }
log.info(doc); log.info(doc);
clear(true); this.clear(true);
log.info('Extract initial document:', doc); log.info('Extract initial document:', doc);
@ -179,7 +184,7 @@ const extract = (_doc) => {
log.warn('Statement', item.stmt); log.warn('Statement', item.stmt);
switch (item.stmt) { switch (item.stmt) {
case STMT_STATE: case STMT_STATE:
addState( this.addState(
item.id.trim(), item.id.trim(),
item.type, item.type,
item.doc, item.doc,
@ -191,38 +196,48 @@ const extract = (_doc) => {
); );
break; break;
case STMT_RELATION: case STMT_RELATION:
addRelation(item.state1, item.state2, item.description); this.addRelation(item.state1, item.state2, item.description);
break; break;
case STMT_CLASSDEF: case STMT_CLASSDEF:
addStyleClass(item.id.trim(), item.classes); this.addStyleClass(item.id.trim(), item.classes);
break; break;
case STMT_STYLEDEF: case STMT_STYLEDEF:
{ {
const ids = item.id.trim().split(','); const ids = item.id.trim().split(',');
const styles = item.styleClass.split(','); const styles = item.styleClass.split(',');
ids.forEach((id) => { ids.forEach((id) => {
let foundState = getState(id); let foundState = this.getState(id);
if (foundState === undefined) { if (foundState === undefined) {
const trimmedId = id.trim(); const trimmedId = id.trim();
addState(trimmedId); this.addState(trimmedId);
foundState = getState(trimmedId); foundState = this.getState(trimmedId);
} }
foundState.styles = styles.map((s) => s.replace(/;/g, '')?.trim()); foundState.styles = styles.map((s) => s.replace(/;/g, '')?.trim());
}); });
} }
break; break;
case STMT_APPLYCLASS: case STMT_APPLYCLASS:
setCssClass(item.id.trim(), item.styleClass); this.setCssClass(item.id.trim(), item.styleClass);
break; break;
} }
}); });
const diagramStates = getStates(); const diagramStates = this.getStates();
const config = getConfig(); const config = getConfig();
const look = config.look; const look = config.look;
resetDataFetching(); resetDataFetching();
dataFetcher(undefined, getRootDocV2(), diagramStates, nodes, edges, true, look, classes); dataFetcher(
nodes.forEach((node) => { undefined,
this.getRootDocV2(),
diagramStates,
this.#nodes,
this.#edges,
true,
look,
this.#classes
);
this.#nodes.forEach((node) => {
if (Array.isArray(node.label)) { if (Array.isArray(node.label)) {
// add the rest as description // add the rest as description
node.description = node.label.slice(1); node.description = node.label.slice(1);
@ -251,7 +266,7 @@ const extract = (_doc) => {
* @param {null | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style. * @param {null | string | string[]} styles - styles to apply to this state. Can be a string (1 style) or an array of styles. If it's just 1 style, convert it to an array of that 1 style.
* @param {null | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style. * @param {null | string | string[]} textStyles - text styles to apply to this state. Can be a string (1 text test) or an array of text styles. If it's just 1 text style, convert it to an array of that 1 text style.
*/ */
export const addState = function ( addState = (
id, id,
type = DEFAULT_STATE_TYPE, type = DEFAULT_STATE_TYPE,
doc = null, doc = null,
@ -260,12 +275,12 @@ export const addState = function (
classes = null, classes = null,
styles = null, styles = null,
textStyles = null textStyles = null
) { ) => {
const trimmedId = id?.trim(); const trimmedId = id?.trim();
// add the state if needed // add the state if needed
if (!currentDocument.states.has(trimmedId)) { if (!this.#currentDocument.states.has(trimmedId)) {
log.info('Adding state ', trimmedId, descr); log.info('Adding state ', trimmedId, descr);
currentDocument.states.set(trimmedId, { this.#currentDocument.states.set(trimmedId, {
id: trimmedId, id: trimmedId,
descriptions: [], descriptions: [],
type, type,
@ -276,27 +291,27 @@ export const addState = function (
textStyles: [], textStyles: [],
}); });
} else { } else {
if (!currentDocument.states.get(trimmedId).doc) { if (!this.#currentDocument.states.get(trimmedId).doc) {
currentDocument.states.get(trimmedId).doc = doc; this.#currentDocument.states.get(trimmedId).doc = doc;
} }
if (!currentDocument.states.get(trimmedId).type) { if (!this.#currentDocument.states.get(trimmedId).type) {
currentDocument.states.get(trimmedId).type = type; this.#currentDocument.states.get(trimmedId).type = type;
} }
} }
if (descr) { if (descr) {
log.info('Setting state description', trimmedId, descr); log.info('Setting state description', trimmedId, descr);
if (typeof descr === 'string') { if (typeof descr === 'string') {
addDescription(trimmedId, descr.trim()); this.addDescription(trimmedId, descr.trim());
} }
if (typeof descr === 'object') { if (typeof descr === 'object') {
descr.forEach((des) => addDescription(trimmedId, des.trim())); descr.forEach((des) => this.addDescription(trimmedId, des.trim()));
} }
} }
if (note) { if (note) {
const doc2 = currentDocument.states.get(trimmedId); const doc2 = this.#currentDocument.states.get(trimmedId);
doc2.note = note; doc2.note = note;
doc2.note.text = common.sanitizeText(doc2.note.text, getConfig()); doc2.note.text = common.sanitizeText(doc2.note.text, getConfig());
} }
@ -304,50 +319,49 @@ export const addState = function (
if (classes) { if (classes) {
log.info('Setting state classes', trimmedId, classes); log.info('Setting state classes', trimmedId, classes);
const classesList = typeof classes === 'string' ? [classes] : classes; const classesList = typeof classes === 'string' ? [classes] : classes;
classesList.forEach((cssClass) => setCssClass(trimmedId, cssClass.trim())); classesList.forEach((cssClass) => this.setCssClass(trimmedId, cssClass.trim()));
} }
if (styles) { if (styles) {
log.info('Setting state styles', trimmedId, styles); log.info('Setting state styles', trimmedId, styles);
const stylesList = typeof styles === 'string' ? [styles] : styles; const stylesList = typeof styles === 'string' ? [styles] : styles;
stylesList.forEach((style) => setStyle(trimmedId, style.trim())); stylesList.forEach((style) => this.setStyle(trimmedId, style.trim()));
} }
if (textStyles) { if (textStyles) {
log.info('Setting state styles', trimmedId, styles); log.info('Setting state styles', trimmedId, styles);
const textStylesList = typeof textStyles === 'string' ? [textStyles] : textStyles; const textStylesList = typeof textStyles === 'string' ? [textStyles] : textStyles;
textStylesList.forEach((textStyle) => setTextStyle(trimmedId, textStyle.trim())); textStylesList.forEach((textStyle) => this.setTextStyle(trimmedId, textStyle.trim()));
} }
}; };
export const clear = function (saveCommon) { clear = (saveCommon) => {
nodes = []; this.#nodes = [];
edges = []; this.#edges = [];
documents = { this.#documents = {
root: newDoc(), root: this.#newDoc(),
}; };
currentDocument = documents.root; this.#currentDocument = this.#documents.root;
// number of start and end nodes; used to construct ids // number of start and end nodes; used to construct ids
startEndCount = 0; this.#startEndCount = 0;
classes = newClassesList(); this.classes = this.#newClassesList();
if (!saveCommon) { if (!saveCommon) {
commonClear(); commonClear();
} }
}; };
export const getState = function (id) { getState = (id) => {
return currentDocument.states.get(id); return this.#currentDocument.states.get(id);
}; };
getStates = () => {
export const getStates = function () { return this.#currentDocument.states;
return currentDocument.states;
}; };
export const logDocuments = function () { logDocuments = () => {
log.info('Documents = ', documents); log.info('Documents = ', this.#documents);
}; };
export const getRelations = function () { getRelations = () => {
return currentDocument.relations; return this.#currentDocument.relations;
}; };
/** /**
@ -358,14 +372,14 @@ export const getRelations = function () {
* @param {string} id * @param {string} id
* @returns {string} - the id (original or constructed) * @returns {string} - the id (original or constructed)
*/ */
function startIdIfNeeded(id = '') { #startIdIfNeeded = (id = '') => {
let fixedId = id; let fixedId = id;
if (id === START_NODE) { if (id === this.#START_NODE) {
startEndCount++; this.#startEndCount++;
fixedId = `${START_TYPE}${startEndCount}`; fixedId = `${this.#START_TYPE}${this.#startEndCount}`;
} }
return fixedId; return fixedId;
} };
/** /**
* If the id is a start node ( [*] ), then return the start type ('start') * If the id is a start node ( [*] ), then return the start type ('start')
@ -375,9 +389,9 @@ function startIdIfNeeded(id = '') {
* @param {string} type * @param {string} type
* @returns {string} - the type that should be used * @returns {string} - the type that should be used
*/ */
function startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) { #startTypeIfNeeded = (id = '', type = DEFAULT_STATE_TYPE) => {
return id === START_NODE ? START_TYPE : type; return id === this.#START_NODE ? this.#START_TYPE : type;
} };
/** /**
* If the id is an end node ( [*] ), then return a new id constructed from * If the id is an end node ( [*] ), then return a new id constructed from
@ -387,14 +401,14 @@ function startTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
* @param {string} id * @param {string} id
* @returns {string} - the id (original or constructed) * @returns {string} - the id (original or constructed)
*/ */
function endIdIfNeeded(id = '') { #endIdIfNeeded = (id = '') => {
let fixedId = id; let fixedId = id;
if (id === END_NODE) { if (id === this.#END_NODE) {
startEndCount++; this.#startEndCount++;
fixedId = `${END_TYPE}${startEndCount}`; fixedId = `${this.#END_TYPE}${this.#startEndCount}`;
} }
return fixedId; return fixedId;
} };
/** /**
* If the id is an end node ( [*] ), then return the end type * If the id is an end node ( [*] ), then return the end type
@ -404,9 +418,9 @@ function endIdIfNeeded(id = '') {
* @param {string} type * @param {string} type
* @returns {string} - the type that should be used * @returns {string} - the type that should be used
*/ */
function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) { #endTypeIfNeeded = (id = '', type = DEFAULT_STATE_TYPE) => {
return id === END_NODE ? END_TYPE : type; return id === this.#END_NODE ? this.#END_TYPE : type;
} };
/** /**
* *
@ -414,13 +428,13 @@ function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
* @param item2 * @param item2
* @param relationTitle * @param relationTitle
*/ */
export function addRelationObjs(item1, item2, relationTitle) { addRelationObjs = (item1, item2, relationTitle) => {
let id1 = startIdIfNeeded(item1.id.trim()); let id1 = this.#startIdIfNeeded(item1.id.trim());
let type1 = startTypeIfNeeded(item1.id.trim(), item1.type); let type1 = this.#startTypeIfNeeded(item1.id.trim(), item1.type);
let id2 = startIdIfNeeded(item2.id.trim()); let id2 = this.#startIdIfNeeded(item2.id.trim());
let type2 = startTypeIfNeeded(item2.id.trim(), item2.type); let type2 = this.#startTypeIfNeeded(item2.id.trim(), item2.type);
addState( this.addState(
id1, id1,
type1, type1,
item1.doc, item1.doc,
@ -430,7 +444,7 @@ export function addRelationObjs(item1, item2, relationTitle) {
item1.styles, item1.styles,
item1.textStyles item1.textStyles
); );
addState( this.addState(
id2, id2,
type2, type2,
item2.doc, item2.doc,
@ -441,12 +455,12 @@ export function addRelationObjs(item1, item2, relationTitle) {
item2.textStyles item2.textStyles
); );
currentDocument.relations.push({ this.#currentDocument.relations.push({
id1, id1,
id2, id2,
relationTitle: common.sanitizeText(relationTitle, getConfig()), relationTitle: common.sanitizeText(relationTitle, getConfig()),
}); });
} };
/** /**
* Add a relation between two items. The items may be full objects or just the string id of a state. * Add a relation between two items. The items may be full objects or just the string id of a state.
@ -455,18 +469,18 @@ export function addRelationObjs(item1, item2, relationTitle) {
* @param {string | object} item2 * @param {string | object} item2
* @param {string} title * @param {string} title
*/ */
export const addRelation = function (item1, item2, title) { addRelation = (item1, item2, title) => {
if (typeof item1 === 'object') { if (typeof item1 === 'object') {
addRelationObjs(item1, item2, title); this.addRelationObjs(item1, item2, title);
} else { } else {
const id1 = startIdIfNeeded(item1.trim()); const id1 = this.#startIdIfNeeded(item1.trim());
const type1 = startTypeIfNeeded(item1); const type1 = this.#startTypeIfNeeded(item1);
const id2 = endIdIfNeeded(item2.trim()); const id2 = this.#endIdIfNeeded(item2.trim());
const type2 = endTypeIfNeeded(item2); const type2 = this.#endTypeIfNeeded(item2);
addState(id1, type1); this.addState(id1, type1);
addState(id2, type2); this.addState(id2, type2);
currentDocument.relations.push({ this.#currentDocument.relations.push({
id1, id1,
id2, id2,
title: common.sanitizeText(title, getConfig()), title: common.sanitizeText(title, getConfig()),
@ -474,13 +488,13 @@ export const addRelation = function (item1, item2, title) {
} }
}; };
export const addDescription = function (id, descr) { addDescription = (id, descr) => {
const theState = currentDocument.states.get(id); const theState = this.#currentDocument.states.get(id);
const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr; const _descr = descr.startsWith(':') ? descr.replace(':', '').trim() : descr;
theState.descriptions.push(common.sanitizeText(_descr, getConfig())); theState.descriptions.push(common.sanitizeText(_descr, getConfig()));
}; };
export const cleanupLabel = function (label) { cleanupLabel = (label) => {
if (label.substring(0, 1) === ':') { if (label.substring(0, 1) === ':') {
return label.substr(2).trim(); return label.substr(2).trim();
} else { } else {
@ -488,9 +502,9 @@ export const cleanupLabel = function (label) {
} }
}; };
const getDividerId = () => { getDividerId = () => {
dividerCnt++; this.#dividerCnt++;
return 'divider-id-' + dividerCnt; return 'divider-id-' + this.#dividerCnt;
}; };
/** /**
@ -500,21 +514,21 @@ const getDividerId = () => {
* @param {string} id - the id of this (style) class * @param {string} id - the id of this (style) class
* @param {string | null} styleAttributes - the string with 1 or more style attributes (each separated by a comma) * @param {string | null} styleAttributes - the string with 1 or more style attributes (each separated by a comma)
*/ */
export const addStyleClass = function (id, styleAttributes = '') { addStyleClass = (id, styleAttributes = '') => {
// create a new style class object with this id // create a new style class object with this id
if (!classes.has(id)) { if (!this.#classes.has(id)) {
classes.set(id, { id: id, styles: [], textStyles: [] }); // This is a classDef this.#classes.set(id, { id: id, styles: [], textStyles: [] }); // This is a classDef
} }
const foundClass = classes.get(id); const foundClass = this.#classes.get(id);
if (styleAttributes !== undefined && styleAttributes !== null) { if (styleAttributes !== undefined && styleAttributes !== null) {
styleAttributes.split(STYLECLASS_SEP).forEach((attrib) => { styleAttributes.split(this.#STYLECLASS_SEP).forEach((attrib) => {
// remove any trailing ; // remove any trailing ;
const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim(); const fixedAttrib = attrib.replace(/([^;]*);/, '$1').trim();
// replace some style keywords // replace some style keywords
if (RegExp(COLOR_KEYWORD).exec(attrib)) { if (RegExp(this.#COLOR_KEYWORD).exec(attrib)) {
const newStyle1 = fixedAttrib.replace(FILL_KEYWORD, BG_FILL); const newStyle1 = fixedAttrib.replace(this.#FILL_KEYWORD, this.#BG_FILL);
const newStyle2 = newStyle1.replace(COLOR_KEYWORD, FILL_KEYWORD); const newStyle2 = newStyle1.replace(this.#COLOR_KEYWORD, this.#FILL_KEYWORD);
foundClass.textStyles.push(newStyle2); foundClass.textStyles.push(newStyle2);
} }
foundClass.styles.push(fixedAttrib); foundClass.styles.push(fixedAttrib);
@ -526,8 +540,8 @@ export const addStyleClass = function (id, styleAttributes = '') {
* Return all of the style classes * Return all of the style classes
* @returns {{} | any | classes} * @returns {{} | any | classes}
*/ */
export const getClasses = function () { getClasses = () => {
return classes; return this.#classes;
}; };
/** /**
@ -538,13 +552,13 @@ export const getClasses = function () {
* @param {string | string[]} itemIds The id or a list of ids of the item(s) to apply the css class to * @param {string | string[]} itemIds The id or a list of ids of the item(s) to apply the css class to
* @param {string} cssClassName CSS class name * @param {string} cssClassName CSS class name
*/ */
export const setCssClass = function (itemIds, cssClassName) { setCssClass = (itemIds, cssClassName) => {
itemIds.split(',').forEach(function (id) { itemIds.split(',').forEach((id) => {
let foundState = getState(id); let foundState = this.getState(id);
if (foundState === undefined) { if (foundState === undefined) {
const trimmedId = id.trim(); const trimmedId = id.trim();
addState(trimmedId); this.addState(trimmedId);
foundState = getState(trimmedId); foundState = this.getState(trimmedId);
} }
foundState.classes.push(cssClassName); foundState.classes.push(cssClassName);
}); });
@ -560,8 +574,8 @@ export const setCssClass = function (itemIds, cssClassName) {
* @param itemId The id of item to apply the style to * @param itemId The id of item to apply the style to
* @param styleText - the text of the attributes for the style * @param styleText - the text of the attributes for the style
*/ */
export const setStyle = function (itemId, styleText) { setStyle = (itemId, styleText) => {
const item = getState(itemId); const item = this.getState(itemId);
if (item !== undefined) { if (item !== undefined) {
item.styles.push(styleText); item.styles.push(styleText);
} }
@ -573,54 +587,36 @@ export const setStyle = function (itemId, styleText) {
* @param itemId The id of item to apply the css class to * @param itemId The id of item to apply the css class to
* @param cssClassName CSS class name * @param cssClassName CSS class name
*/ */
export const setTextStyle = function (itemId, cssClassName) { setTextStyle = (itemId, cssClassName) => {
const item = getState(itemId); const item = this.getState(itemId);
if (item !== undefined) { if (item !== undefined) {
item.textStyles.push(cssClassName); item.textStyles.push(cssClassName);
} }
}; };
const getDirection = () => direction; getDirection = () => this.#direction;
const setDirection = (dir) => { setDirection = (dir) => {
direction = dir; this.#direction = dir;
}; };
const trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim()); trimColon = (str) => (str && str[0] === ':' ? str.substr(1).trim() : str.trim());
export const getData = () => { getData = () => {
const config = getConfig(); const config = getConfig();
return { nodes, edges, other: {}, config, direction: getDir(getRootDocV2()) }; return {
nodes: this.#nodes,
edges: this.#edges,
other: {},
config,
direction: getDir(this.getRootDocV2()),
};
}; };
export default { getConfig = () => getConfig().state;
getConfig: () => getConfig().state, getAccTitle = getAccTitle;
getData, setAccTitle = setAccTitle;
addState, getAccDescription = getAccDescription;
clear, setAccDescription = setAccDescription;
getState, setDiagramTitle = setDiagramTitle;
getStates, getDiagramTitle = getDiagramTitle;
getRelations, }
getClasses,
getDirection,
addRelation,
getDividerId,
setDirection,
cleanupLabel,
lineType,
relationType,
logDocuments,
getRootDoc,
setRootDoc,
getRootDocV2,
extract,
trimColon,
getAccTitle,
setAccTitle,
getAccDescription,
setAccDescription,
addStyleClass,
setCssClass,
addDescription,
setDiagramTitle,
getDiagramTitle,
};

30
packages/mermaid/src/diagrams/state/stateDb.spec.js
View File

@ -1,8 +1,9 @@
import stateDb from './stateDb.js'; import { StateDb } from './stateDb.js';
describe('State Diagram stateDb', () => { describe('State Diagram stateDb', () => {
let stateDb;
beforeEach(() => { beforeEach(() => {
stateDb.clear(); stateDb = new StateDb();
}); });
describe('addStyleClass', () => { describe('addStyleClass', () => {
@ -20,8 +21,9 @@ describe('State Diagram stateDb', () => {
}); });
describe('addDescription to a state', () => { describe('addDescription to a state', () => {
let stateDb;
beforeEach(() => { beforeEach(() => {
stateDb.clear(); stateDb = new StateDb();
stateDb.addState('state1'); stateDb.addState('state1');
}); });
@ -73,3 +75,25 @@ describe('State Diagram stateDb', () => {
}); });
}); });
}); });
describe('state db class', () => {
let stateDb;
beforeEach(() => {
stateDb = new StateDb();
});
// This is to ensure that functions used in flow JISON are exposed as function from FlowDb
it('should have functions used in flow JISON as own property', () => {
const functionsUsedInParser = [
'setRootDoc',
'trimColon',
'getDividerId',
'setAccTitle',
'setAccDescription',
'setDirection',
];
for (const fun of functionsUsedInParser) {
expect(Object.hasOwn(stateDb, fun)).toBe(true);
}
});
});

4
packages/mermaid/src/diagrams/state/stateDiagram-v2.spec.js
View File

@ -1,11 +1,13 @@
import { parser } from './parser/stateDiagram.jison'; import { parser } from './parser/stateDiagram.jison';
import stateDb from './stateDb.js'; import { StateDb } from './stateDb.js';
import stateDiagram from './parser/stateDiagram.jison'; import stateDiagram from './parser/stateDiagram.jison';
describe('state diagram V2, ', function () { describe('state diagram V2, ', function () {
// TODO - these examples should be put into ./parser/stateDiagram.spec.js // TODO - these examples should be put into ./parser/stateDiagram.spec.js
describe('when parsing an info graph it', function () { describe('when parsing an info graph it', function () {
let stateDb;
beforeEach(function () { beforeEach(function () {
stateDb = new StateDb();
parser.yy = stateDb; parser.yy = stateDb;
stateDiagram.parser.yy = stateDb; stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear(); stateDiagram.parser.yy.clear();

7
packages/mermaid/src/diagrams/state/stateDiagram-v2.ts
View File

@ -1,13 +1,15 @@
import type { DiagramDefinition } from '../../diagram-api/types.js'; import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types // @ts-ignore: JISON doesn't support types
import parser from './parser/stateDiagram.jison'; import parser from './parser/stateDiagram.jison';
import db from './stateDb.js'; import { StateDb } from './stateDb.js';
import styles from './styles.js'; import styles from './styles.js';
import renderer from './stateRenderer-v3-unified.js'; import renderer from './stateRenderer-v3-unified.js';
export const diagram: DiagramDefinition = { export const diagram: DiagramDefinition = {
parser, parser,
db, get db() {
return new StateDb();
},
renderer, renderer,
styles, styles,
init: (cnf) => { init: (cnf) => {
@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
cnf.state = {}; cnf.state = {};
} }
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
}, },
}; };

4
packages/mermaid/src/diagrams/state/stateDiagram.spec.js
View File

@ -1,9 +1,11 @@
import { parser } from './parser/stateDiagram.jison'; import { parser } from './parser/stateDiagram.jison';
import stateDb from './stateDb.js'; import { StateDb } from './stateDb.js';
describe('state diagram, ', function () { describe('state diagram, ', function () {
describe('when parsing an info graph it', function () { describe('when parsing an info graph it', function () {
let stateDb;
beforeEach(function () { beforeEach(function () {
stateDb = new StateDb();
parser.yy = stateDb; parser.yy = stateDb;
}); });

7
packages/mermaid/src/diagrams/state/stateDiagram.ts
View File

@ -1,13 +1,15 @@
import type { DiagramDefinition } from '../../diagram-api/types.js'; import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types // @ts-ignore: JISON doesn't support types
import parser from './parser/stateDiagram.jison'; import parser from './parser/stateDiagram.jison';
import db from './stateDb.js'; import { StateDb } from './stateDb.js';
import styles from './styles.js'; import styles from './styles.js';
import renderer from './stateRenderer.js'; import renderer from './stateRenderer.js';
export const diagram: DiagramDefinition = { export const diagram: DiagramDefinition = {
parser, parser,
db, get db() {
return new StateDb();
},
renderer, renderer,
styles, styles,
init: (cnf) => { init: (cnf) => {
@ -15,6 +17,5 @@ export const diagram: DiagramDefinition = {
cnf.state = {}; cnf.state = {};
} }
cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
db.clear();
}, },
}; };

43
packages/mermaid/src/mermaidAPI.spec.ts
View File

@ -1,4 +1,5 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'; import { beforeEach, describe, expect, it, vi } from 'vitest';
import assert from 'node:assert';
// ------------------------------------- // -------------------------------------
// Mocks and mocking // Mocks and mocking
@ -69,6 +70,7 @@ import { compile, serialize } from 'stylis';
import { Diagram } from './Diagram.js'; import { Diagram } from './Diagram.js';
import { decodeEntities, encodeEntities } from './utils.js'; import { decodeEntities, encodeEntities } from './utils.js';
import { toBase64 } from './utils/base64.js'; import { toBase64 } from './utils/base64.js';
import { StateDb } from './diagrams/state/stateDb.js';
/** /**
* @see https://vitest.dev/guide/mocking.html Mock part of a module * @see https://vitest.dev/guide/mocking.html Mock part of a module
@ -832,5 +834,46 @@ graph TD;A--x|text including URL space|B;`)
expect(diagram).toBeInstanceOf(Diagram); expect(diagram).toBeInstanceOf(Diagram);
expect(diagram.type).toBe('flowchart-v2'); expect(diagram.type).toBe('flowchart-v2');
}); });
it('should not modify db when rendering different diagrams', async () => {
const classDiagram1 = await mermaidAPI.getDiagramFromText(
`stateDiagram
direction LR
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
);
const classDiagram2 = await mermaidAPI.getDiagramFromText(
`stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]`
);
expect(classDiagram1.db).not.toBe(classDiagram2.db);
assert(classDiagram1.db instanceof StateDb);
assert(classDiagram2.db instanceof StateDb);
expect(classDiagram2.db.getDirection()).not.toEqual(classDiagram2.db.getDirection());
});
});
// Sequence Diagram currently uses a singleton DB, so this test will fail
it.fails('should not modify db when rendering different sequence diagrams', async () => {
const sequenceDiagram1 = await mermaidAPI.getDiagramFromText(
`sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>John: How about you John?`
);
const sequenceDiagram2 = await mermaidAPI.getDiagramFromText(
`sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
Bob-->>John: How about you John?`
);
expect(sequenceDiagram1.db).not.toBe(sequenceDiagram2.db);
}); });
}); });