marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-11 18:19:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3902 from weedySeaDragon/bug/3858_state_named_state_container

Browse Source 
Bug/3858 [state] trailing whitespace in ids for named state container
This commit is contained in:
Sidharth Vinod
2023-01-25 22:51:34 +05:30
committed by GitHub
parent 0aa7da261f 521a30dcd7
commit c76728b423
5 changed files with 223 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
demos/state.html
View File

@@ -161,12 +161,19 @@
First --> Second First --> Second
First --> Third First --> Third
state First { state "the first composite" as First {
[*] --> 1st [*] --> 1st
1st --> [*] state innerFirst {
state "1 in innerFirst" as 1st1st
1st2nd: 2 in innerFirst
[*] --> 1st1st
1st1st --> 1st2nd
%% 1st2nd --> 1st
}
1st --> innerFirst
innerFirst --> 2nd
} }
state Second { state Second {
[*] --> 2nd
2nd --> [*] 2nd --> [*]
} }
state Third { state Third {

133
packages/mermaid/src/diagrams/state/parser/state-parser.spec.js Normal file
View File

@@ -0,0 +1,133 @@
import stateDb from '../stateDb';
import stateDiagram from './stateDiagram';
import { setConfig } from '../../../config';
setConfig({
securityLevel: 'strict',
});
describe('state parser can parse...', () => {
beforeEach(function () {
stateDiagram.parser.yy = stateDb;
stateDiagram.parser.yy.clear();
});
describe('states with id displayed as a (name)', () => {
describe('syntax 1: stateID as "name in quotes"', () => {
it('stateID as "some name"', () => {
const diagramText = `stateDiagram-v2
state "Small State 1" as namedState1`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['namedState1'].descriptions.join(' ')).toEqual('Small State 1');
});
});
describe('syntax 2: stateID: "name in quotes" [colon after the id]', () => {
it('space before and after the colon', () => {
const diagramText = `stateDiagram-v2
namedState1 : Small State 1`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['namedState1'].descriptions.join(' ')).toEqual('Small State 1');
});
it('no spaces before and after the colon', () => {
const diagramText = `stateDiagram-v2
namedState1:Small State 1`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['namedState1'].descriptions.join(' ')).toEqual('Small State 1');
});
});
});
describe('can handle "as" in a state name', () => {
it('assemble, assemblies, state assemble, state assemblies', function () {
const diagramText = `stateDiagram-v2
assemble
assemblies
state assemble
state assemblies
`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['assemble']).not.toBeUndefined();
expect(states['assemblies']).not.toBeUndefined();
});
it('state "as" as as', function () {
const diagramText = `stateDiagram-v2
state "as" as as
`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['as']).not.toBeUndefined();
expect(states['as'].descriptions.join(' ')).toEqual('as');
});
});
describe('groups (clusters/containers)', () => {
it('state "Group Name" as stateIdentifier', () => {
const diagramText = `stateDiagram-v2
state "Small State 1" as namedState1
%% Notice that this is named "Big State 1" with an "as"
state "Big State 1" as bigState1 {
bigState1InternalState
}
namedState1 --> bigState1: should point to \\nBig State 1 container
state "Small State 2" as namedState2
%% Notice that bigState2 does not have a name; no "as"
state bigState2 {
bigState2InternalState
}
namedState2 --> bigState2: should point to \\nbigState2 container`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['namedState1']).not.toBeUndefined();
expect(states['bigState1']).not.toBeUndefined();
expect(states['bigState1'].doc[0].id).toEqual('bigState1InternalState');
expect(states['namedState2']).not.toBeUndefined();
expect(states['bigState2']).not.toBeUndefined();
expect(states['bigState2'].doc[0].id).toEqual('bigState2InternalState');
const relationships = stateDiagram.parser.yy.getRelations();
expect(relationships[0].id1).toEqual('namedState1');
expect(relationships[0].id2).toEqual('bigState1');
expect(relationships[1].id1).toEqual('namedState2');
expect(relationships[1].id2).toEqual('bigState2');
});
it('group has a state with stateID AS "state name" and state2ID: "another state name"', () => {
const diagramText = `stateDiagram-v2
state "Big State 1" as bigState1 {
state "inner state 1" as inner1
inner2: inner state 2
inner1 --> inner2
}`;
stateDiagram.parser.parse(diagramText);
stateDiagram.parser.yy.extract(stateDiagram.parser.yy.getRootDocV2());
const states = stateDiagram.parser.yy.getStates();
expect(states['bigState1']).not.toBeUndefined();
expect(states['bigState1'].doc[0].id).toEqual('inner1');
expect(states['bigState1'].doc[0].description).toEqual('inner state 1');
expect(states['bigState1'].doc[1].id).toEqual('inner2');
expect(states['bigState1'].doc[1].description).toEqual('inner state 2');
});
});
});

15
packages/mermaid/src/diagrams/state/parser/stateDiagram.jison
View File

@@ -88,23 +88,24 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<SCALE>\d+ return 'WIDTH'; <SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();} <SCALE>\s+"width" {this.popState();}
<INITIAL,struct>"state"\s+ { /* console.log('Starting STATE '); */ this.pushState('STATE'); }
<INITIAL,struct>"state"\s+ { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }
<STATE>.*"<<fork>>" {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';} <STATE>.*"<<fork>>" {this.popState();yytext=yytext.slice(0,-8).trim(); /*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
<STATE>.*"<<join>>" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';} <STATE>.*"<<join>>" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
<STATE>.*"<<choice>>" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';} <STATE>.*"<<choice>>" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
<STATE>.*"[[fork]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Fork: ',yytext);*/return 'FORK';} <STATE>.*"[[fork]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Fork: ',yytext);*/return 'FORK';}
<STATE>.*"[[join]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';} <STATE>.*"[[join]]" {this.popState();yytext=yytext.slice(0,-8).trim();/*console.warn('Fork Join: ',yytext);*/return 'JOIN';}
<STATE>.*"[[choice]]" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';} <STATE>.*"[[choice]]" {this.popState();yytext=yytext.slice(0,-10).trim();/*console.warn('Fork Join: ',yytext);*/return 'CHOICE';}
<struct>.*direction\s+TB[^\n]* { return 'direction_tb';} <struct>.*direction\s+TB[^\n]* { return 'direction_tb';}
<struct>.*direction\s+BT[^\n]* { return 'direction_bt';} <struct>.*direction\s+BT[^\n]* { return 'direction_bt';}
<struct>.*direction\s+RL[^\n]* { return 'direction_rl';} <struct>.*direction\s+RL[^\n]* { return 'direction_rl';}
<struct>.*direction\s+LR[^\n]* { return 'direction_lr';} <struct>.*direction\s+LR[^\n]* { return 'direction_lr';}
<STATE>["] { /*console.log('Starting STATE_STRING zxzx');*/this.begin("STATE_STRING");} <STATE>["] { /* console.log('Starting STATE_STRING'); */ this.pushState("STATE_STRING"); }
<STATE>\s*"as"\s+ {this.popState();this.pushState('STATE_ID');return "AS";} <STATE>\s*"as"\s+ { this.pushState('STATE_ID'); /* console.log('pushState(STATE_ID)'); */ return "AS"; }
<STATE_ID>[^\n\{]* { this.popState(); /* console.log('STATE_ID', yytext); */ return "ID"; } <STATE_ID>[^\n\{]* { this.popState(); /* console.log('STATE_ID', yytext); */ return "ID"; }
<STATE_STRING>["] this.popState(); <STATE_STRING>["] { this.popState(); }
<STATE_STRING>[^"]* { /* console.log('Long description:', yytext); */ return "STATE_DESCR"; } <STATE_STRING>[^"]* { /* console.log('Long description:', yytext); */ return "STATE_DESCR"; }
<STATE>[^\n\s\{]+ { /* console.log('COMPOSIT_STATE', yytext); */ return 'COMPOSIT_STATE'; } <STATE>[^\n\s\{]+ { /* console.log('COMPOSIT_STATE', yytext); */ return 'COMPOSIT_STATE'; }
<STATE>\n { this.popState(); } <STATE>\n { this.popState(); }
@@ -127,7 +128,9 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
"stateDiagram"\s+ { /* console.log('Got state diagram', yytext,'#'); */ return 'SD'; } "stateDiagram"\s+ { /* console.log('Got state diagram', yytext,'#'); */ return 'SD'; }
"stateDiagram-v2"\s+ { /* console.log('Got state diagram', yytext,'#'); */ return 'SD'; } "stateDiagram-v2"\s+ { /* console.log('Got state diagram', yytext,'#'); */ return 'SD'; }
"hide empty description" { /* console.log('HIDE_EMPTY', yytext,'#'); */ return 'HIDE_EMPTY'; } "hide empty description" { /* console.log('HIDE_EMPTY', yytext,'#'); */ return 'HIDE_EMPTY'; }
<INITIAL,struct>"[*]" { /* console.log('EDGE_STATE=',yytext); */ return 'EDGE_STATE'; } <INITIAL,struct>"[*]" { /* console.log('EDGE_STATE=',yytext); */ return 'EDGE_STATE'; }
<INITIAL,struct>[^:\n\s\-\{]+ { /* console.log('=>ID=',yytext); */ return 'ID'; } <INITIAL,struct>[^:\n\s\-\{]+ { /* console.log('=>ID=',yytext); */ return 'ID'; }
// <INITIAL,struct>\s*":"[^\+\->:\n;]+ { yytext = yytext.trim(); /* console.log('Descr = ', yytext); */ return 'DESCR'; } // <INITIAL,struct>\s*":"[^\+\->:\n;]+ { yytext = yytext.trim(); /* console.log('Descr = ', yytext); */ return 'DESCR'; }
@@ -201,7 +204,7 @@ statement
| COMPOSIT_STATE | COMPOSIT_STATE
| COMPOSIT_STATE STRUCT_START document STRUCT_STOP | COMPOSIT_STATE STRUCT_START document STRUCT_STOP
{ {
/* console.log('Adding document for state without id ', $1); */ // console.log('Adding document for state without id ', $1);
$$={ stmt: 'state', id: $1, type: 'default', description: '', doc: $3 } $$={ stmt: 'state', id: $1, type: 'default', description: '', doc: $3 }
} }
| STATE_DESCR AS ID { | STATE_DESCR AS ID {
@@ -217,7 +220,7 @@ statement
} }
| STATE_DESCR AS ID STRUCT_START document STRUCT_STOP | STATE_DESCR AS ID STRUCT_START document STRUCT_STOP
{ {
/* console.log('Adding document for state with id zxzx', $3, $4, yy.getDirection()); yy.addDocument($3);*/ // console.log('state with id ', $3,' document = ', $5, );
$$={ stmt: 'state', id: $3, type: 'default', description: $1, doc: $5 } $$={ stmt: 'state', id: $3, type: 'default', description: $1, doc: $5 }
} }
| FORK { | FORK {

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

@@ -94,9 +94,14 @@ const docTranslator = (parent, node, first) => {
docTranslator(parent, node.state1, true); docTranslator(parent, node.state1, true);
docTranslator(parent, node.state2, false); docTranslator(parent, node.state2, false);
} else { } else {
if (node.stmt === STMT_STATE && node.id === '[*]') { if (node.stmt === STMT_STATE) {
if (node.id === '[*]') {
node.id = first ? parent.id + '_start' : parent.id + '_end'; node.id = first ? parent.id + '_start' : parent.id + '_end';
node.start = first; node.start = first;
} else {
// This is just a plain state, not a start or end
node.id = node.id.trim();
}
} }
if (node.doc) { if (node.doc) {
@@ -170,7 +175,7 @@ const extract = (_doc) => {
switch (item.stmt) { switch (item.stmt) {
case STMT_STATE: case STMT_STATE:
addState( addState(
item.id, item.id.trim(),
item.type, item.type,
item.doc, item.doc,
item.description, item.description,
@@ -184,10 +189,10 @@ const extract = (_doc) => {
addRelation(item.state1, item.state2, item.description); addRelation(item.state1, item.state2, item.description);
break; break;
case STMT_CLASSDEF: case STMT_CLASSDEF:
addStyleClass(item.id, item.classes); addStyleClass(item.id.trim(), item.classes);
break; break;
case STMT_APPLYCLASS: case STMT_APPLYCLASS:
setCssClass(item.id, item.styleClass); setCssClass(item.id.trim(), item.styleClass);
break; break;
} }
}); });
@@ -215,11 +220,12 @@ export const addState = function (
styles = null, styles = null,
textStyles = null textStyles = null
) { ) {
const trimmedId = id?.trim();
// add the state if needed // add the state if needed
if (currentDocument.states[id] === undefined) { if (currentDocument.states[trimmedId] === undefined) {
log.info('Adding state ', id, descr); log.info('Adding state ', trimmedId, descr);
currentDocument.states[id] = { currentDocument.states[trimmedId] = {
id: id, id: trimmedId,
descriptions: [], descriptions: [],
type, type,
doc, doc,
@@ -229,49 +235,49 @@ export const addState = function (
textStyles: [], textStyles: [],
}; };
} else { } else {
if (!currentDocument.states[id].doc) { if (!currentDocument.states[trimmedId].doc) {
currentDocument.states[id].doc = doc; currentDocument.states[trimmedId].doc = doc;
} }
if (!currentDocument.states[id].type) { if (!currentDocument.states[trimmedId].type) {
currentDocument.states[id].type = type; currentDocument.states[trimmedId].type = type;
} }
} }
if (descr) { if (descr) {
log.info('Setting state description', id, descr); log.info('Setting state description', trimmedId, descr);
if (typeof descr === 'string') { if (typeof descr === 'string') {
addDescription(id, descr.trim()); addDescription(trimmedId, descr.trim());
} }
if (typeof descr === 'object') { if (typeof descr === 'object') {
descr.forEach((des) => addDescription(id, des.trim())); descr.forEach((des) => addDescription(trimmedId, des.trim()));
} }
} }
if (note) { if (note) {
currentDocument.states[id].note = note; currentDocument.states[trimmedId].note = note;
currentDocument.states[id].note.text = common.sanitizeText( currentDocument.states[trimmedId].note.text = common.sanitizeText(
currentDocument.states[id].note.text, currentDocument.states[trimmedId].note.text,
configApi.getConfig() configApi.getConfig()
); );
} }
if (classes) { if (classes) {
log.info('Setting state classes', id, classes); log.info('Setting state classes', trimmedId, classes);
const classesList = typeof classes === 'string' ? [classes] : classes; const classesList = typeof classes === 'string' ? [classes] : classes;
classesList.forEach((klass) => setCssClass(id, klass.trim())); classesList.forEach((klass) => setCssClass(trimmedId, klass.trim()));
} }
if (styles) { if (styles) {
log.info('Setting state styles', id, 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(id, style.trim())); stylesList.forEach((style) => setStyle(trimmedId, style.trim()));
} }
if (textStyles) { if (textStyles) {
log.info('Setting state styles', id, 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(id, textStyle.trim())); textStylesList.forEach((textStyle) => setTextStyle(trimmedId, textStyle.trim()));
} }
}; };
@@ -368,10 +374,10 @@ function endTypeIfNeeded(id = '', type = DEFAULT_STATE_TYPE) {
* @param relationTitle * @param relationTitle
*/ */
export function addRelationObjs(item1, item2, relationTitle) { export function addRelationObjs(item1, item2, relationTitle) {
let id1 = startIdIfNeeded(item1.id); let id1 = startIdIfNeeded(item1.id.trim());
let type1 = startTypeIfNeeded(item1.id, item1.type); let type1 = startTypeIfNeeded(item1.id.trim(), item1.type);
let id2 = startIdIfNeeded(item2.id); let id2 = startIdIfNeeded(item2.id.trim());
let type2 = startTypeIfNeeded(item2.id, item2.type); let type2 = startTypeIfNeeded(item2.id.trim(), item2.type);
addState( addState(
id1, id1,
@@ -412,9 +418,9 @@ export const addRelation = function (item1, item2, title) {
if (typeof item1 === 'object') { if (typeof item1 === 'object') {
addRelationObjs(item1, item2, title); addRelationObjs(item1, item2, title);
} else { } else {
const id1 = startIdIfNeeded(item1); const id1 = startIdIfNeeded(item1.trim());
const type1 = startTypeIfNeeded(item1); const type1 = startTypeIfNeeded(item1);
const id2 = endIdIfNeeded(item2); const id2 = endIdIfNeeded(item2.trim());
const type2 = endTypeIfNeeded(item2); const type2 = endTypeIfNeeded(item2);
addState(id1, type1); addState(id1, type1);

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

@@ -307,8 +307,8 @@ const setupNode = (g, parent, parsedItem, diagramStates, diagramDb, altFlag) =>
* *
* @param g * @param g
* @param parentParsedItem - parsed Item that is the parent of this document (doc) * @param parentParsedItem - parsed Item that is the parent of this document (doc)
* @param doc - the document to set up * @param doc - the document to set up; it is a list of parsed statements
* @param {object} diagramStates - the list of all known states for the diagram * @param {object[]} diagramStates - the list of all known states for the diagram
* @param diagramDb * @param diagramDb
* @param {boolean} altFlag * @param {boolean} altFlag
* @todo This duplicates some of what is done in stateDb.js extract method * @todo This duplicates some of what is done in stateDb.js extract method