state diagram: cannot put comments in composite states

Describe the bug Cannot put a comment within a composite state. It’s not recognized as a comment.

To Reproduce

stateDiagram-v2
    [*] --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
    %% comment here is fine but not within the composite state Moving below   
    state Moving {
       %% this comment is not recognized as a comment
        slow  --> fast
    }        

Here is a link to the live editor.

Expected behavior Any statement starting with %% within a composite state should be recognized (parsed) as a comment.

[weedySeaDragon]

Glad it helped! Yes - let’s get it into the documentation if you think it’ll be helpful.

Glancing at the .jison file again… This line is suspicious to me:

<INITIAL,ID,STATE,struct,LINE,open_directive,type_directive,arg_directive,close_directive>\#[^\n]*  /* skip comments */

That has a comment starting with a # (and skipping everything from that to the end.

That line can be applied if the lexer is in a struct state (among others). I wonder if that is somehow taking precedence over \%%[^\n]* or \%\%(?!\{)[^\n]* or \%\%(?!\{)[^\n]* And do the % really need a \ before them? If so, then maybe there is one missing in \%%[^\n]*

I think the jison documentation talks a bit about states. Don’t know if something interesting is in there.

You can debug by putting debugging breaks in the code (depends on what tools you’re using; I use a full IDE (JetBrains WebStorm). YMMV). (Good old “manual” debugging with lots of console.log() statements is always helpful!) If you’re not already, look at what yytext is at different times. (That’s the text that was most recently matched.) That + some console.log statements should tell you what pattern (regular expression) it is matching.

I don’t know if other diagrams also have similar syntax (using { and }). You might take a look at the .jison files for class diagrams or flowcharts to see if they’re able to do it successfully.

[weedySeaDragon]

jison grammar and parsing Lexing (breaking up things into tokens) is generally the top part of the file. It uses regular expressions (with a very few changes). The result are then fed into the parser – which uses them to evaluate the entire strings with the grammar rules – the lower half of the .jison file.

(Not sure if you already know that ^, so there it is.)

Hope you’ve found the general jison doc: https://gerhobbelt.github.io/jison/docs/ jison is based on bison so you can search for that, too.

Here are 2 statements that deal with comments:

\%\%(?!\{)[^\n]*                                                /* skip comments */
[^\}]\%\%[^\n]*                                                 /* skip comments */{ /*console.log('Crap after close');*/ }

They use regular expressions to match them, and then they do nothing with them. (No value is returned == no token is set; no method is called.).

There are other statements that deal with comments. It looks to me like comments are only skipped in certain states. (“states” = jison definition per the jison documentation). I’d definitely look at that.

There are commented out console.log files; you can definitely uncomment those.

TL;DR Something that is glossed over in the jison doc is that you can access methods in the stateDb.js module. It’s referenced as yy. ..... – you can see methods being called in the .jison file. As information is processed, it is recorded/stored using methods in stateDb

You can write (temporary) methods in stateDB.js to help you debug & learn, too.

Ex: In the commented-out console.log statement below…

<INITIAL,struct>"state"\s+            { /*console.log('Starting STATE zxzx'+yy.getDirection());*/this.pushState('STATE'); }

you can see that yy.getDirection() is called to output what is the current direction for the diagram.

Testing, local version
You should write spec tests that will test your changes (and also serve as examples of how it should and shouldn’t work). You can look at srs/diagrams/state/parser/state-style.spec.js for examples. You can run a local version of the server by running the dev script in the top level package.json scripts section. (Ex: npnm dev) Then you can try web pages with diagrams in them (like the demos pages) by using http://localhost:9000/ [your test .html file] to hit the server

---

HTH. Let me know how I can help more. 😃