A Bottom part of big digram can be hidden.

[satabol]

Proposal.

Problem:

Windows 11, vscode 1.86.0, vscode-antlr4 2.4.6.

Long rule:

ANTLR-BUG-hide-button.mp4

If append this css code then all looks good:

#container svg:last-child {
    width: 100%;
    margin-bottom: 50px;
}

ANTLR-BUG-hide-button.fixed.mp4

[mike-lischke]

IIRC this is not only a problem for the last rule. I have seen this also for rules in the middle somewhere. Last time I looked it was so that the railroad library did not correctly compute the total height of the diagram. Needs investigation, but your proposal would only fix a part of the problem.

[satabol]

Do you have an example about rules in the middle somewhere? If not can you put them later?

[satabol]

I found something interesting. You build tab with next structure.

1. semitransparent header with g4 info:
   

2. You have a container with rail structure:
   

In 2 you use a property with name "padding" that has a parameter "60px". This has incorrect influence to "height:100vh" (100vh do not enlarge on 60px):
(example: https://css-tricks.com/almanac/properties/p/padding/#aa-padding-and-element-width-calculations)

To fix this I found a property "box-sizing: border-box":

Now all looks good: first element is not under a header and a last element is not hidden. What do you think?

info of a box-sizing:

• https://www.w3.org/TR/css-sizing-3/#box-sizing
• https://caniuse.com/css3-boxsizing

[satabol]

that the railroad library did not correctly compute the total height of the diagram

Now I think that this railroad issue is another issue.

[mike-lischke]

My assumption was that the missing space at the end is the same problem like missing space in the middle of the document:

But you might have a point in your analysis of other spacing and the boxing model. I'll have to investigate.

[satabol]

Can you give me this example? Or send it by email satabolxyz@gmail.com ? I promise not to show anyone.

[mike-lischke]

It's open source like everything I do on Github 😄

Note also the other display problems like in alterListItem:

[satabol]

I'm sorry I found MySQLParser.g4 file with another syntax. Now I use your grammar. Can you show your extension settings?

[mike-lischke]

It probably doesn't make a difference, but here they are:

    "antlr4.rrd.saveDir": "/Users/Mike/Desktop/rrd",
    "antlr4.atn.saveDir": "",
    "antlr4.atn.maxLabelCount": 10,
    "antlr4.call-graph.saveDir": "/tmp/",
    "antlr4.debug": {
        "visualParseTreeHorizontal": true,
        "visualParseTreeClustered": true
    },
    "antlr4.generation": {
        "mode": "internal",
        "listeners": true,
        "visitors": false,
        "outputDir": "./generated"
    },
    "antlr4.format": {
        "disabled": false,
        "alignTrailingComments": true,
        "allowShortBlocksOnASingleLine": true,
        "breakBeforeBraces": false,
        "columnLimit": 150,
        "continuationIndentWidth": 4,
        "indentWidth": 4,
        "keepEmptyLinesAtTheStartOfBlocks": false,
        "maxEmptyLinesToKeep": 1,
        "reflowComments": false,
        "spaceBeforeAssignmentOperators": true,
        "tabWidth": 4,
        "useTab": false,
        "alignColons": "none",
        "singleLineOverrulesHangingColon": false,
        "allowShortRulesOnASingleLine": false,
        "alignSemicolons": "ownLine",
        "breakBeforeParens": false,
        "ruleInternalsOnSingleLine": false,
        "minEmptyLines": 1,
        "groupedAlignments": true,
        "alignFirstTokens": true,
        "alignLexerCommands": false,
        "alignActions": false,
        "alignLabels": true,
        "alignTrailers": false
    },

[satabol]

At last I got these errors after settings:

Nice:

)))

[mike-lischke]

Yes, that's the setting for wrapping long sequence lines in the diagram. Of course, if no wrapping occurs then the display is fine. IMO the RRD script does not fully cover some of the cases we use in these diagrams.

[satabol]

I found something - version of railroad.js file in this repo is too old. I try last (newest) version and all look good:

https://github.com/tabatkins/railroad-diagrams/blob/gh-pages/railroad.js

and all look good

I use setting "wrapAfter"=60.

[mike-lischke]

That would be great news! This (just fixed) issue looks very much like the problems here. Unfortunately, this project neither releases packages nor bundles, so it's tricky to know when a new release comes out (if they even make releases).

[satabol]

Happy to help you. I just compare count of lines of code. Intuition. ))) Are you planning to update this library?

[mike-lischke]

Yes, I will update the library, but I'm pretty busy with other stuff. Need to find some time for it...