BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
@*create diagram*@
<EjsDiagram Width="100%" Height="800px">
@*create nodes collection*@
<DiagramNodes>
@*create node*@
<DiagramNode Id="nodeA" Height="100" Width="400" OffsetX="500" OffsetY="300">
@*set node style*@
<NodeShapeStyle StrokeWidth="5"></NodeShapeStyle>
@*create node annotations*@
<DiagramNodeAnnotations>
@*set annotation content*@
<DiagramNodeAnnotation Content="Cluster Node B">
@*change annotation style*@
<NodeAnnotationStyle Bold="true"></NodeAnnotationStyle>
@*change annotation offset*@
<NodeAnnotationOffset X="0.5" Y="0.5"></NodeAnnotationOffset>
</DiagramNodeAnnotation>
</DiagramNodeAnnotations>
</DiagramNode>
<DiagramNode Id="nodeB" Height="100" Width="100" OffsetX="350" OffsetY="200">
. . .
. . .
</DiagramNode>
<DiagramNode Id="nodeC" Height="100" Width="300" OffsetX="550" OffsetY="200">
. . .
. . .
</DiagramNode>
@*create group node*@
<DiagramNode Id="firstGroup" Children="@firstGroupChildren">
</DiagramNode>
</DiagramNodes>
</EjsDiagram>
@functions{
@*set children for group node*@
private string[] firstGroupChildren { get; set; } = new string[] { "nodeA", "nodeB", "nodeC" };
} |
In blazor, we can render static diagram with basic interaction such as zooming and panning. We have planned to provide interaction support in the diagram for our volume 4, release which is scheduled to release by the month of December, 2019.
|