Styles not applied in CLI version

[rochecompaan]

First, thank you for an awesome package!

I installed a nightly build of rust and ran cargo build on a clone of master and I also tried the rewrite3-vectorize branch.

If I generate the diagram with the CLI version eg svgbob page.txt -o page.svg, none of the styles are applied. If I use the online editor at https://ivanceras.github.io/svgbob-editor/, it works fine. What could be wrong?

I use the following input:

o-> MTSF: Add First Priority
  
    +-------------------------------------------------------------------------------------------------------------------------------------+
    |                                                                                                                                     |
    |    LGMIM                                                                                                   Roche Compaan  LOGOUT    |
    |                                                                                                                                     |
    +-------------------------------------------------------------------------------------------------------------------------------------+
    |                                                                                                                                     |
    |    Dashboard    Trend Analysis   Assessment   Improvement Plan   Recent Activity                                  System Setup      |
    |                                                                                                                                     |
    +-------------------------------------------------------------------------------------------------------------------------------------+
    |                                                                                                                                     |
    |                                                                                                                                     |
    |    MTSF                            .------------------------------------------------------------.                                   |
    |                                    |  {em}                                                      |                                   |
    |                                    |  Add Priority                                              |                                   |
    |                                    |                                                            |                                   |
    |    .--------------------.          |  Title                                                     |                                   |
    |    | + Add Priority {b} |  ------> |                                                            |                                   |
    |    '--------------------'          |  +------------------------------------------------------+  |                                   |
    |                                    |  | PRIORITY 1: ECONOMIC TRANSFORMATION AND JOB CREATION |  |                                   |
    |                                    |  +------------------------------------------------------+  |                                   |
    |                                    |                                                            |                                   |
    |                                    |  Description                                               |                                   |
    |                                    |                                                            |                                   |
    |                                    |  +------------------------------------------------------+  |                                   |
    |                                    |  | 2024 Impact: Increase GDP between 2-3%; create 2     |  |                                   |
    |                                    |  | million new jobs especially for youth; increase      |  |                                   |
    |                                    |  | investment as a proportion of GDP to 23% (from       |  |                                   |
    |                                    |  | 18.7%).                                              |  |                                   |
    |                                    |  +------------------------------------------------------+  |                                   |
    |                                    |                                                            |                                   |
    |                                    | ---------------------------------------------------------- |                                   |
    |                                    |                                                            |                                   |
    |                                    |                                   [ Submit ]  [ Cancel ]   |                                   |
    |                                    |                                                            |                                   |
    |                                    '------------------------------------------------------------'                                   |
    |                                                                                                                                     |
    |                                                                                                                                     |
    |                                                                                                                                     |
    |                                                                                                                                     |
    +-------------------------------------------------------------------------------------------------------------------------------------+

# Legend:
b = {
    fill: lightblue;
}
em = {
    fill: yellow;
    stroke: black;
}

[Melandel]

I'd like to second this. I tried with the demo text for my part.

[ivanceras]

@rochecompaan @Melandel thanks, for reporting this issue. I'll take a look into this.

[ivanceras]

Unfortunately, I wasn't able to replicate this. I used the same test .bob, but it had styles on it.
Can you post the used cli commands and the generated svg image?

[ivanceras]

@rochecompaan @Melandel I've pushed in a new commit setting the exact version of svgbob from the cli. Perhaps it would solve the issue.

[Melandel]

:(

Still don't have styles.

Maybe I'm doing things wrong?

Here's what I did:

• cd svgbob_git_root
• rm -r target
• git checkout master
• git pull
• cargo +nightly build
• target/debug/svgbob.exe demo.txt -o demo.svg

Edit: I'm on Windows 10. Does that change anything?

[ivanceras]

Maybe the photo-viewer you are showing might now be rendering the svg correctly.
Try opening the svg image using firefox or chrome.

It would help if you could post your .bob input and a screenshot, or the generated svg text.
Here is what I've generated based the the input above.
https://imgur.com/a/aUoYhbw

[rochecompaan]

I first tried on Debian installed in WSL2 and got the following SVG output for the input text I posted originally:

svgbob-test.txt

I tried on Windows 10 as well and got the following output:

svgtest-win.txt

No styling appears in Edge, Firefox or Chrome for any of the platforms.

[Melandel]

I tried the input above and got this in firefox on Windows 10:

svg output

<svg height="848" width="1120" xmlns="http://www.w3.org/2000/svg">
    <style>line, path, circle,rect,polygon {
                          stroke: black;
                          stroke-width: 2;
                          stroke-opacity: 1;
                          fill-opacity: 1;
                          stroke-linecap: round;
                          stroke-linejoin: miter;
                        }

                    text {
                        fill: black;
                        }
                        rect.backdrop{
                            stroke: none;
                            fill: white;
                        }
                        .broken{
                            stroke-dasharray: 8;
                        }
                        .filled{
                            fill: black;
                        }
                        .bg_filled{
                            fill: white;
                        }
                        .nofill{
                            fill: white;
                        }

                        text {
                         font-family: monospace;
                         font-size: 14px;
                        }

                        .end_marked_arrow{
                            marker-end: url(#arrow);
                         }
                        .start_marked_arrow{
                            marker-start: url(#arrow);
                         }

                        .end_marked_diamond{
                            marker-end: url(#diamond);
                         }
                        .start_marked_diamond{
                            marker-start: url(#diamond);
                         }

                        .end_marked_circle{
                            marker-end: url(#circle);
                         }
                        .start_marked_circle{
                            marker-start: url(#circle);
                         }

                        .end_marked_open_circle{
                            marker-end: url(#open_circle);
                         }
                        .start_marked_open_circle{
                            marker-start: url(#open_circle);
                         }

                        .end_marked_big_open_circle{
                            marker-end: url(#big_open_circle);
                         }
                        .start_marked_big_open_circle{
                            marker-start: url(#big_open_circle);
                         }

                         
                        </style>
    <defs>
        <marker id="arrow" markerHeight="7" markerWidth="7" orient="auto-start-reverse" refX="4" refY="2" viewBox="-2 -2 8 8">
            <polygon points="0,0 0,4 4,2 0,0"></polygon>
        </marker>
        <marker id="diamond" markerHeight="7" markerWidth="7" orient="auto-start-reverse" refX="4" refY="2" viewBox="-2 -2 8 8">
            <polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
        </marker>
        <marker id="circle" markerHeight="7" markerWidth="7" orient="auto-start-reverse" refX="4" refY="4" viewBox="0 0 8 8">
            <circle class="filled" cx="4" cy="4" r="2"></circle>
        </marker>
        <marker id="open_circle" markerHeight="7" markerWidth="7" orient="auto-start-reverse" refX="4" refY="4" viewBox="0 0 8 8">
            <circle class="bg_filled" cx="4" cy="4" r="2"></circle>
        </marker>
        <marker id="big_open_circle" markerHeight="7" markerWidth="7" orient="auto-start-reverse" refX="4" refY="4" viewBox="0 0 8 8">
            <circle class="bg_filled" cx="4" cy="4" r="3"></circle>
        </marker>
    </defs>
    <rect class="backdrop" height="848" width="1120" x="0" y="0"></rect>
    <rect class="solid nofill em" height="368" rx="4" width="488" x="332" y="232"></rect>
    <rect class="solid nofill " height="32" rx="0" width="440" x="356" y="328"></rect>
    <text class="" x="370" y="348">PRIORITY</text>
    <text class="" x="442" y="348">1:</text>
    <text class="" x="466" y="348">ECONOMIC</text>
    <text class="" x="538" y="348">TRANSFORMATION</text>
    <text class="" x="658" y="348">AND</text>
    <text class="" x="690" y="348">JOB</text>
    <text class="" x="722" y="348">CREATION</text>
    <rect class="solid nofill " height="80" rx="0" width="440" x="356" y="424"></rect>
    <text class="" x="370" y="444">2024</text>
    <text class="" x="410" y="444">Impact:</text>
    <text class="" x="474" y="444">Increase</text>
    <text class="" x="546" y="444">GDP</text>
    <text class="" x="578" y="444">between</text>
    <text class="" x="642" y="444">2</text>
    <line class="solid " x1="648" x2="656" y1="440" y2="440"></line>
    <text class="" x="658" y="444">3%;</text>
    <text class="" x="690" y="444">create</text>
    <text class="" x="746" y="444">2</text>
    <text class="" x="370" y="460">million</text>
    <text class="" x="434" y="460">new</text>
    <text class="" x="466" y="460">jobs</text>
    <text class="" x="506" y="460">especially</text>
    <text class="" x="594" y="460">for</text>
    <text class="" x="626" y="460">youth;</text>
    <text class="" x="682" y="460">increase</text>
    <text class="" x="370" y="476">investment</text>
    <text class="" x="458" y="476">as</text>
    <text class="" x="482" y="476">a</text>
    <text class="" x="498" y="476">proportion</text>
    <text class="" x="586" y="476">of</text>
    <text class="" x="610" y="476">GDP</text>
    <text class="" x="642" y="476">to</text>
    <text class="" x="666" y="476">23%</text>
    <path class="nofill " d="M 704,464 A 16,16 0,0,0 704,480"></path>
    <text class="" x="706" y="476">from</text>
    <text class="" x="370" y="492">18.7%</text>
    <path class="nofill " d="M 408,480 A 16,16 0,0,1 408,496"></path>
    <text class="" x="418" y="492">.</text>
    <text class="" x="354" y="268">Add</text>
    <text class="" x="386" y="268">Priority</text>
    <text class="" x="354" y="300">Title</text>
    <text class="" x="354" y="396">Description</text>
    <line class="solid " x1="344" x2="808" y1="536" y2="536"></line>
    <text class="" x="618" y="572">[</text>
    <text class="" x="634" y="572">Submit</text>
    <text class="" x="690" y="572">]</text>
    <text class="" x="714" y="572">[</text>
    <text class="" x="730" y="572">Cancel</text>
    <text class="" x="786" y="572">]</text>
    <rect class="solid nofill b" height="32" rx="4" width="168" x="76" y="296"></rect>
    <text class="" x="90" y="316">+</text>
    <text class="" x="106" y="316">Add</text>
    <text class="" x="138" y="316">Priority</text>
    <circle class="nofill " cx="4" cy="24" r="2"></circle>
    <line class="solid end_marked_arrow " x1="4" x2="24" y1="24" y2="24"></line>
    <text class="" x="34" y="28">MTSF:</text>
    <text class="" x="82" y="28">Add</text>
    <text class="" x="114" y="28">First</text>
    <text class="" x="162" y="28">Priority</text>
    <text class="" x="74" y="92">LGMIM</text>
    <text class="" x="906" y="92">Roche</text>
    <text class="" x="954" y="92">Compaan</text>
    <text class="" x="1026" y="92">LOGOUT</text>
    <text class="" x="74" y="156">Dashboard</text>
    <text class="" x="178" y="156">Trend</text>
    <text class="" x="226" y="156">Analysis</text>
    <text class="" x="314" y="156">Assessment</text>
    <text class="" x="418" y="156">Improvement</text>
    <text class="" x="514" y="156">Plan</text>
    <text class="" x="570" y="156">Recent</text>
    <text class="" x="626" y="156">Activity</text>
    <text class="" x="962" y="156">System</text>
    <text class="" x="1018" y="156">Setup</text>
    <text class="" x="74" y="236">MTSF</text>
    <line class="solid end_marked_arrow " x1="264" x2="320" y1="312" y2="312"></line>
    <text class="" x="2" y="716">#</text>
    <text class="" x="2" y="732">b</text>
    <text class="" x="18" y="716">Legend:</text>
    <line class="solid " x1="16" x2="24" y1="726" y2="726"></line>
    <line class="solid " x1="16" x2="24" y1="730" y2="730"></line>
    <text class="" x="34" y="732">{</text>
    <text class="" x="34" y="748">fill:</text>
    <text class="" x="82" y="748">lightblue;</text>
    <text class="" x="2" y="764">}</text>
    <text class="" x="2" y="780">em</text>
    <line class="solid " x1="24" x2="32" y1="774" y2="774"></line>
    <line class="solid " x1="24" x2="32" y1="778" y2="778"></line>
    <text class="" x="42" y="780">{</text>
    <text class="" x="34" y="796">fill:</text>
    <text class="" x="82" y="796">yellow;</text>
    <text class="" x="34" y="812">stroke:</text>
    <text class="" x="98" y="812">black;</text>
    <text class="" x="2" y="828">}</text>
    <g>
        <line class="solid" x1="36" x2="1108" y1="56" y2="56"></line>
        <line class="solid" x1="36" x2="36" y1="56" y2="680"></line>
        <line class="solid" x1="1108" x2="1108" y1="56" y2="680"></line>
        <line class="solid" x1="36" x2="1108" y1="120" y2="120"></line>
        <line class="solid" x1="36" x2="1108" y1="184" y2="184"></line>
        <line class="solid" x1="36" x2="1108" y1="680" y2="680"></line>
    </g>
</svg>

[ivanceras]

@Melandel , try doing a cargo update on svgbob and in svgbob_cli. It looks like Cargo.lock is included in the repo. I'm going to delete Cargo.lock in the next commits.

[Melandel]

I tried a cargo update on the three folders (svgbob, svgbob/svgbob and svgbob/svgbob_cli) on a fresh clone of the repo.

The issue persists :(

[Melandel]

My knowledge of Rust is absolutely inexistant, but I managed to find out that the css parsing fails on my machine maybe because windows newline characters cause some trouble.

Substituting

    pub fn new_line<'a>() -> Parser<'a, char, ()> {
        one_of("\n").discard()
    }

with

    pub fn new_line<'a>() -> Parser<'a, char, ()> {
        one_of("\r\n").discard()
    }

allows

impl From<&str> for CellBuffer {
    fn from(input: &str) -> Self {
        let css_styles = if let Some(loc) = input.find("# Legend:") {
            if let Ok(css_styles) = parser::parse_css_legend(&input[loc..]) {
                Some((loc, css_styles))
            } else {
                None
            }
        } else {
            None
        };
        /// [...]
    }
}

to validate parser::parse_css_legend(&input[loc..]), whereas with no substitution the code goes directly into the None branch.

However, unless my println technique is flawed (because I don't really understand anything about the syntax I'm using for the moment haha), even after substitution the variable css_styles seems to be an empty array.

[Melandel]

I can confirm it's an issue linked to the end-of-line characters.

I got the colors (I got the colors !! 😹) when I switch the fileformat from dos to unix.

This is a nice workaround, but I still think it would be interesting to handle dos end of line characters.

What do you think?

[rochecompaan]

It's working for me once I switch to Unix line endings. +1 for adding support for CRLF as well.

[ivanceras]

Thank you all for filing the issue and finding the root cause.
I just published a new version of with support of carriage return \r . Please help me test it out.

[Melandel]

Hi,

I cannot confirm the fix works.

As stated above, the outcome of this code change seems to be an empty css_styles array.

Visual confirmation: