@if (shapeTrees != null)
    {
<svg width="@ChartWidth" height="@ChartHeight" id="FlowChartContainer">
    <defs>
        <marker id="idArrow"
                viewBox="0 0 20 20" refX="0" refY="10"
                markerUnits="strokeWidth" markerWidth="5" markerHeight="10"
                orient="auto">
            <path d="M 0 0 L 20 10 L 0 20 z" fill="black" stroke="black" />
        </marker>

    </defs>

    <text x="@(ChartWidth/2)" y="@(TitleHeight/2)" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="30" font-weight="800">@workflow.Name</text>

    @{
        dynamic startLine = GetStartInitLine();
        <line x1="@startLine.x1" y1="@startLine.y1 " x2="@startLine.x2" y2="@startLine.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />

    }

    @for (int iLevel = 0; iLevel < LevelNodes.Count; iLevel++)
    {
        @foreach (var node in LevelNodes[iLevel])
        {
            if (node.Type == 0)
            {
                <circle cx="@(node.x)" cy="@node.y" r="@(node.width / 2) " stroke="black" stroke-width="2" fill="@(node.FillColor)" />
                <a>
                    <text x="@(node.x)" y="@node.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="14">
                        @if (node == startNode)
                        {
                            @("开始")
                        }
                        else
                        {
                            if (node == endNode)
                            {
                                @("结束")
                            }
                            else
                            {
                                if (node.NodeObject is entity.workflowDefine.Step)
                                {
                                    @(((entity.workflowDefine.Step)node.NodeObject).Name)
                                }
                            }
                        }
                    </text>
                </a>
            }

            if (node.Type == 1)
            {
                <rect x="@(node.x - node.width / 2)" y="@(node.y - node.height / 2)" rx="10" ry="10" width="@node.width" height="@node.height" style="fill:@(node.FillColor);stroke:black;stroke-width:3;opacity:0.5" />

                <a @ondblclick="() => DoubleClickNode(node)" @onclick="()=>ClickNode(node)">
                    <text x="@node.x" y="@node.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="@rectFontSize" font-weight="700">
                        @if (node.NodeObject is entity.workflowDefine.Action)
                        {
                            @((workflow.InitAction == null || string.IsNullOrEmpty(workflow.InitAction.Name)) ? $"启动{workflow.Name}" : workflow.InitAction.Name)
                        }
                        else
                        {
                            @(((entity.workflowDefine.Step)node.NodeObject).Name)
                        }
                    </text>
                </a>
                @if (SelectedShape == node)
                {
                    <circle cx="@(node.x - node.width / 2)" cy="@(node.y)" r="3" stroke="black" stroke-width="1" fill="white" />
                    <circle cx="@(node.x + node.width / 2)" cy="@(node.y)" r="3" stroke="black" stroke-width="1" fill="white" />
                    <circle cx="@(node.x)" cy="@(node.y - node.height / 2)" r="3" stroke="black" stroke-width="1" fill="white" />
                    <circle cx="@(node.x)" cy="@(node.y + node.height / 2)" r="3" stroke="black" stroke-width="1" fill="white" />
                }
            }
        }
    }

    @foreach (var t in Transfers)
    {
        dynamic ret = GetLineParater(t);
        <line x1="@ret.x1" y1="@ret.y1" x2="@ret.x2" y2="@ret.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />

        <circle cx="@((ret.x1 + ret.x2) / 2)" cy="@((ret.y1 + ret.y2) / 2)" r="7" stroke="black" stroke-width="1.5" fill="white" />
        <a @ondblclick="() => DoubleClickTrasfer(t)" @onclick ="()=>ClickTrasfer(t)">
            <text x="@((ret.x1 + ret.x2) / 2)" y="@((ret.y1 + ret.y2) / 2)" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="12">c</text>
        </a>

    }


    @{
        dynamic endLine = GetEndStepLine();
        <line x1="@endLine.x1" y1="@endLine.y1" x2="@endLine.x2" y2="@endLine.y2" stroke="black" stroke-width="2" marker-end="url(#idArrow)" />
    }

    @*<circle cx="@(endNode.x)" cy="@endNode.y" r="@(endNode.width/2) " stroke="black" stroke-width="2" fill="gray" />
        <a>
            <text x="@(endNode.x)" y="@endNode.y" fill="black" alignment-baseline="middle" text-anchor="middle" font-size="5">结束</text>
        </a>*@
</svg>
    }
    else
    {
        <Spin />
    }