<path d="@data" fill="none" stroke="Green" stroke-width="0.15" stroke-opacity="0.7" visibility="@(Show ? PathIsNot : "hidden")" marker-end="url(#target)" />
<defs>
    <marker id="target" markerWidth="8" markerHeight="8" refX="4" refY="4">
        <circle r="0.8" cx="4" cy="4" fill="red" />
        <circle r="3" cx="4" cy="4" stroke="red" stroke-width="0.2" fill="transparent" stroke-dasharray="0.2 0.2" />
        <line x1="0" y1="4" x2="2" y2="4" stroke="red" stroke-width="0.2" />
        <line x1="6" y1="4" x2="8" y2="4" stroke="red" stroke-width="0.2" />
        <line x1="4" y1="0" x2="4" y2="2" stroke="red" stroke-width="0.2" />
        <line x1="4" y1="6" x2="4" y2="8" stroke="red" stroke-width="0.2" />
    </marker>
</defs>

@code {
    [Parameter]
    public bool Show { get; set; }

    private string data = "";

    private string PathIsNot = "hidden";

    public void Clear()
    {
        data = "";
        PathIsNot = "hidden";
        StateHasChanged();
    }

    public void UpdatePath(List<NavigationPathEdge> path)
    {
        if (path.Count > 0)
        {
            var inPath = $"M {path[0].StartX} {path[0].StartY}";
            for (int i = 0; i < path.Count; i++)
            {
                if(path[i].Degree == 1) inPath = $"{inPath} L {path[i].EndX} {path[i].EndY}";
                else if (path[i].Degree == 2) inPath = $"{inPath} Q {path[i].ControlPoint1X} {path[i].ControlPoint1Y} {path[i].EndX} {path[i].EndY}";
                else inPath = $"{inPath} C {path[i].ControlPoint1X} {path[i].ControlPoint1Y}, {path[i].ControlPoint2X} {path[i].ControlPoint2Y}, {path[i].EndX} {path[i].EndY}";
            }
            data = inPath;
            PathIsNot = "visible";
        }
        else Clear();
        StateHasChanged();
    }
}
