Blazor Diagram - 高性能ダイアグラムコンポーネント

@using Syncfusion.Blazor.Diagram
@using DiagramSegments = Syncfusion.Blazor.Diagram.ConnectorSegmentType

<SfDiagramComponent Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection" NodeCreating="@NodeCreating" ConnectorCreating="@ConnectorCreating" />

@code
{
    int connectorCount = 0;
    // Define diagram's nodes collection
    public DiagramObjectCollection<Node> NodeCollection { get; set; } = new DiagramObjectCollection<Node>();
    // Define diagram's connector collection
    public DiagramObjectCollection<Connector> ConnectorCollection { get; set; } = new DiagramObjectCollection<Connector>();

    protected override void OnInitialized()
    {
        InitDiagramModel();
    }

    private void InitDiagramModel()
    {
        NodeCollection = new DiagramObjectCollection<Node>();
        ConnectorCollection = new DiagramObjectCollection<Connector>();
        CreateNode("Start", 50, NodeFlowShapes.Terminator, "Start");
        CreateNode("Init", 140, NodeFlowShapes.Process, "var i = 0;'");
        CreateNode("Condition", 230, NodeFlowShapes.Decision, "i < 10?");
        CreateNode("Print", 320, NodeFlowShapes.PreDefinedProcess, "print(\'Hello!!\');");
        CreateNode("Increment", 410, NodeFlowShapes.Process, "i++;");
        CreateNode("End", 500, NodeFlowShapes.Terminator, "End");
        OrthogonalSegment segment1 = new OrthogonalSegment()
            {
                Type = DiagramSegments.Orthogonal,
                Length = 30,
                Direction = Direction.Right
            };
        OrthogonalSegment segment2 = new OrthogonalSegment()
            {
                Type = DiagramSegments.Orthogonal,
                Length = 300,
                Direction = Direction.Bottom
            };
        OrthogonalSegment segment3 = new OrthogonalSegment()
            {
                Type = DiagramSegments.Orthogonal,
                Length = 30,
                Direction = Direction.Left
            };
        OrthogonalSegment segment4 = new OrthogonalSegment()
            {
                Type = DiagramSegments.Orthogonal,
                Length = 200,
                Direction = Direction.Top
            };
        CreateConnector("Start", "Init");
        CreateConnector("Init", "Condition");
        CreateConnector("Condition", "Print");
        CreateConnector("Condition", "End", "Yes", segment1, segment2);
        CreateConnector("Print", "Increment", "No");
        CreateConnector("Increment", "Condition", null, segment3, segment4);

    }
    private void CreateConnector(string sourceId, string targetId, string label = default(string), OrthogonalSegment segment1 = null, OrthogonalSegment segment2 = null)
    {
        Connector diagramConnector = new Connector()
            {
                ID = string.Format("connector{0}", ++connectorCount),
                SourceID = sourceId,
                TargetID = targetId
            };

        diagramConnector.Type = DiagramSegments.Orthogonal;
        if (segment1 != null)
        {
            diagramConnector.Segments = new DiagramObjectCollection<ConnectorSegment>() { segment1, segment2 };
        }
        if (label != default(string))
        {
            var annotation = new PathAnnotation()
                {
                    Content = label,
                    Style = new TextStyle() { Fill = "transparent" }
                };
            diagramConnector.Annotations = new DiagramObjectCollection<PathAnnotation>() { annotation };
        }

        ConnectorCollection.Add(diagramConnector);
    }

    private void NodeCreating(IDiagramObject obj)
    {
        if (obj != null && obj is Node node)
        {
            node.Width = 140;
            node.Height = 50;
            node.OffsetX = 300;
            node.Style = new ShapeStyle() { Fill = "#357BD2", StrokeColor = "white" };
        }
    }
    private void ConnectorCreating(IDiagramObject obj)
    {
        if (obj != null && obj is Connector connector)
        {
            connector.Type = DiagramSegments.Orthogonal;
            connector.TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.Arrow, Width = 10, Height = 10 };
        }
    }
    private void CreateNode(string id, double y, NodeFlowShapes shape, string label, bool positionLabel = false)
    {
        ShapeAnnotation annotation = new ShapeAnnotation()
            {
                Content = label,
                Style = new TextStyle()
                {
                    Color = "white",
                    Fill = "transparent"
                }
            };
        if (positionLabel)
        {
            annotation.Margin = new DiagramThickness() { Left = 25, Right = 25 };
        };

        Node diagramNode = new Node()
            {
                ID = id,
                OffsetY = y,
                Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = shape },
                Annotations = new DiagramObjectCollection<ShapeAnnotation>() { annotation }
            };
        NodeCollection.Add(diagramNode);
    }
}