marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-04 14:49:46 +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 --> Third
state First {
state "the first composite" as First {
[*] --> 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 {
[*] --> 2nd
2nd --> [*]
}
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');
});
});
});

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

@@ -65,14 +65,14 @@
\%%[^\n]* /* skip comments */
"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
<SCALE>\d+ return 'WIDTH';
<SCALE>\s+"width" {this.popState();}
<SCALE>\s+"width" { this.popState(); }
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
<acc_descr_multiline>[\}] { this.popState(); }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline"); }
<acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
<INITIAL,struct>"classDef"\s+ { this.pushState('CLASSDEF'); return 'classDef'; }
@@ -81,57 +81,60 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
<CLASSDEFID>[^\n]* { this.popState(); return 'CLASSDEF_STYLEOPTS' }
<INITIAL,struct>"class"\s+ { this.pushState('CLASS'); return 'class'; }
<CLASS>(\w+)+((","\s*\w+)*) { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
<CLASS>(\w+)+((","\s*\w+)*) { this.popState(); this.pushState('CLASS_STYLE'); return 'CLASSENTITY_IDS' }
<CLASS_STYLE>[^\n]* { this.popState(); return 'STYLECLASS' }
"scale"\s+ { this.pushState('SCALE'); /* console.log('Got scale', yytext);*/ return 'scale'; }
<SCALE>\d+ return 'WIDTH';
<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>.*"<<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>.*"[[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+BT[^\n]* { return 'direction_bt';}
<struct>.*direction\s+RL[^\n]* { return 'direction_rl';}
<struct>.*direction\s+LR[^\n]* { return 'direction_lr';}
<STATE>["] { /*console.log('Starting STATE_STRING zxzx');*/this.begin("STATE_STRING");}
<STATE>\s*"as"\s+ {this.popState();this.pushState('STATE_ID');return "AS";}
<STATE_ID>[^\n\{]* {this.popState();/* console.log('STATE_ID', yytext);*/return "ID";}
<STATE_STRING>["] this.popState();
<STATE_STRING>[^"]* { /*console.log('Long description:', yytext);*/return "STATE_DESCR";}
<STATE>[^\n\s\{]+ {/*console.log('COMPOSIT_STATE', yytext);*/return 'COMPOSIT_STATE';}
<STATE>\n {this.popState();}
<INITIAL,STATE>\{ {this.popState();this.pushState('struct'); /*console.log('begin struct', yytext);*/return 'STRUCT_START';}
<struct>\%\%(?!\{)[^\n]* /* skip comments inside state*/
<struct>\} { /*console.log('Ending struct');*/ this.popState(); return 'STRUCT_STOP';}}
<struct>[\n] /* nothing */
<STATE>["] { /* console.log('Starting STATE_STRING'); */ this.pushState("STATE_STRING"); }
<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_STRING>["] { this.popState(); }
<STATE_STRING>[^"]* { /* console.log('Long description:', yytext); */ return "STATE_DESCR"; }
<STATE>[^\n\s\{]+ { /* console.log('COMPOSIT_STATE', yytext); */ return 'COMPOSIT_STATE'; }
<STATE>\n { this.popState(); }
<INITIAL,STATE>\{ { this.popState(); this.pushState('struct'); /* console.log('begin struct', yytext); */ return 'STRUCT_START'; }
<struct>\%\%(?!\{)[^\n]* /* skip comments inside state*/
<struct>\} { /*console.log('Ending struct');*/ this.popState(); return 'STRUCT_STOP';} }
<struct>[\n] /* nothing */
<INITIAL,struct>"note"\s+ { this.begin('NOTE'); return 'note'; }
<NOTE>"left of" { this.popState();this.pushState('NOTE_ID');return 'left_of';}
<NOTE>"right of" { this.popState();this.pushState('NOTE_ID');return 'right_of';}
<NOTE>\" { this.popState();this.pushState('FLOATING_NOTE');}
<FLOATING_NOTE>\s*"as"\s* {this.popState();this.pushState('FLOATING_NOTE_ID');return "AS";}
<FLOATING_NOTE>["] /**/
<FLOATING_NOTE>[^"]* { /*console.log('Floating note text: ', yytext);*/return "NOTE_TEXT";}
<FLOATING_NOTE_ID>[^\n]* {this.popState();/*console.log('Floating note ID', yytext);*/return "ID";}
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState();this.pushState('NOTE_TEXT');/*console.log('Got ID for note', yytext);*/return 'ID';}
<NOTE_TEXT>\s*":"[^:\n;]+ { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.substr(2).trim();return 'NOTE_TEXT';}
<NOTE_TEXT>[\s\S]*?"end note" { this.popState();/*console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim();return 'NOTE_TEXT';}
<NOTE>"left of" { this.popState(); this.pushState('NOTE_ID'); return 'left_of'; }
<NOTE>"right of" { this.popState(); this.pushState('NOTE_ID'); return 'right_of'; }
<NOTE>\" { this.popState(); this.pushState('FLOATING_NOTE'); }
<FLOATING_NOTE>\s*"as"\s* { this.popState(); this.pushState('FLOATING_NOTE_ID'); return "AS"; }
<FLOATING_NOTE>["] /**/
<FLOATING_NOTE>[^"]* { /* console.log('Floating note text: ', yytext); */ return "NOTE_TEXT"; }
<FLOATING_NOTE_ID>[^\n]* { this.popState(); /* console.log('Floating note ID', yytext);*/ return "ID"; }
<NOTE_ID>\s*[^:\n\s\-]+ { this.popState(); this.pushState('NOTE_TEXT'); /*console.log('Got ID for note', yytext);*/ return 'ID'; }
<NOTE_TEXT>\s*":"[^:\n;]+ { this.popState(); /* console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.substr(2).trim(); return 'NOTE_TEXT'; }
<NOTE_TEXT>[\s\S]*?"end note" { this.popState(); /* console.log('Got NOTE_TEXT for note',yytext);*/yytext = yytext.slice(0,-8).trim(); return 'NOTE_TEXT'; }
"stateDiagram"\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'; }
<INITIAL,struct>"[*]" { /*console.log('EDGE_STATE=',yytext);*/ return 'EDGE_STATE';}
<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'; }
"stateDiagram"\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'; }
<INITIAL,struct>"[*]" { /* console.log('EDGE_STATE=',yytext); */ return 'EDGE_STATE'; }
<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'; }
<INITIAL,struct>"-->" return '-->';
<struct>"--" return 'CONCURRENT';
@@ -201,7 +204,7 @@ statement
| COMPOSIT_STATE
| 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 }
}
| STATE_DESCR AS ID {
@@ -217,7 +220,7 @@ statement
}
| 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 }
}
| FORK {

70
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.state2, false);
} else {
if (node.stmt === STMT_STATE && node.id === '[*]') {
node.id = first ? parent.id + '_start' : parent.id + '_end';
node.start = first;
if (node.stmt === STMT_STATE) {
if (node.id === '[*]') {
node.id = first ? parent.id + '_start' : parent.id + '_end';
node.start = first;
} else {
// This is just a plain state, not a start or end
node.id = node.id.trim();
}
}
if (node.doc) {
@@ -170,7 +175,7 @@ const extract = (_doc) => {
switch (item.stmt) {
case STMT_STATE:
addState(
item.id,
item.id.trim(),
item.type,
item.doc,
item.description,
@@ -184,10 +189,10 @@ const extract = (_doc) => {
addRelation(item.state1, item.state2, item.description);
break;
case STMT_CLASSDEF:
addStyleClass(item.id, item.classes);
addStyleClass(item.id.trim(), item.classes);
break;
case STMT_APPLYCLASS:
setCssClass(item.id, item.styleClass);
setCssClass(item.id.trim(), item.styleClass);
break;
}
});
@@ -215,11 +220,12 @@ export const addState = function (
styles = null,
textStyles = null
) {
const trimmedId = id?.trim();
// add the state if needed
if (currentDocument.states[id] === undefined) {
log.info('Adding state ', id, descr);
currentDocument.states[id] = {
id: id,
if (currentDocument.states[trimmedId] === undefined) {
log.info('Adding state ', trimmedId, descr);
currentDocument.states[trimmedId] = {
id: trimmedId,
descriptions: [],
type,
doc,
@@ -229,49 +235,49 @@ export const addState = function (
textStyles: [],
};
} else {
if (!currentDocument.states[id].doc) {
currentDocument.states[id].doc = doc;
if (!currentDocument.states[trimmedId].doc) {
currentDocument.states[trimmedId].doc = doc;
}
if (!currentDocument.states[id].type) {
currentDocument.states[id].type = type;
if (!currentDocument.states[trimmedId].type) {
currentDocument.states[trimmedId].type = type;
}
}
if (descr) {
log.info('Setting state description', id, descr);
log.info('Setting state description', trimmedId, descr);
if (typeof descr === 'string') {
addDescription(id, descr.trim());
addDescription(trimmedId, descr.trim());
}
if (typeof descr === 'object') {
descr.forEach((des) => addDescription(id, des.trim()));
descr.forEach((des) => addDescription(trimmedId, des.trim()));
}
}
if (note) {
currentDocument.states[id].note = note;
currentDocument.states[id].note.text = common.sanitizeText(
currentDocument.states[id].note.text,
currentDocument.states[trimmedId].note = note;
currentDocument.states[trimmedId].note.text = common.sanitizeText(
currentDocument.states[trimmedId].note.text,
configApi.getConfig()
);
}
if (classes) {
log.info('Setting state classes', id, classes);
log.info('Setting state classes', trimmedId, classes);
const classesList = typeof classes === 'string' ? [classes] : classes;
classesList.forEach((klass) => setCssClass(id, klass.trim()));
classesList.forEach((klass) => setCssClass(trimmedId, klass.trim()));
}
if (styles) {
log.info('Setting state styles', id, styles);
log.info('Setting state styles', trimmedId, styles);
const stylesList = typeof styles === 'string' ? [styles] : styles;
stylesList.forEach((style) => setStyle(id, style.trim()));
stylesList.forEach((style) => setStyle(trimmedId, style.trim()));
}
if (textStyles) {
log.info('Setting state styles', id, styles);
log.info('Setting state styles', trimmedId, styles);
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
*/
export function addRelationObjs(item1, item2, relationTitle) {
let id1 = startIdIfNeeded(item1.id);
let type1 = startTypeIfNeeded(item1.id, item1.type);
let id2 = startIdIfNeeded(item2.id);
let type2 = startTypeIfNeeded(item2.id, item2.type);
let id1 = startIdIfNeeded(item1.id.trim());
let type1 = startTypeIfNeeded(item1.id.trim(), item1.type);
let id2 = startIdIfNeeded(item2.id.trim());
let type2 = startTypeIfNeeded(item2.id.trim(), item2.type);
addState(
id1,
@@ -412,9 +418,9 @@ export const addRelation = function (item1, item2, title) {
if (typeof item1 === 'object') {
addRelationObjs(item1, item2, title);
} else {
const id1 = startIdIfNeeded(item1);
const id1 = startIdIfNeeded(item1.trim());
const type1 = startTypeIfNeeded(item1);
const id2 = endIdIfNeeded(item2);
const id2 = endIdIfNeeded(item2.trim());
const type2 = endTypeIfNeeded(item2);
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 parentParsedItem - parsed Item that is the parent of this document (doc)
* @param doc - the document to set up
* @param {object} diagramStates - the list of all known states for the diagram
* @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 diagramDb
* @param {boolean} altFlag
* @todo This duplicates some of what is done in stateDb.js extract method