Size issues on large diagrams

[johankson]

I created a quick and dirty fix for setting the height to 100% (instead of the calculated height). The issue was that large diagrams got a large height set to a specific number that made the rendering of the element to be pushed down a lot.

Did it on server side, but it could easily be moved to javascript if needed.

I reused my earlier hack :) with the SVG hook and simply applied a regex to replace the calculated height with 100%.

The questions are:

• Do you know of a better way to do this?
• If not, should it be imported somehow into the component or handled in a different way?

And since I suck at naming things, the attribute name is quite large. :)

<MermaidDiagram Definition="@diagramDefinition" 
                          SvgTransform="SvgTransform" 
                          OnClick="Click"
                          ForceHeightTo100Percent="true"/>

And the naive, hacky implementation.

[JSInvokable]
public async Task<string> OnSvgCreated(string svg)
{
    if (ForceHeightTo100Percent)
    {
        var regex = new Regex("<svg[^>]*?height=([\"\'])?((?:.(?!\\1|>))*.?)\\1?");
        var match = regex.Match(svg);
        var g = match.Groups[2];
        svg = svg.Substring(0, g.Index) + "100%" + svg.Substring(g.Index + g.Length);
    }

    if (SvgTransform != null)
    {

        svg = SvgTransform(svg);
    }

    return svg;
}