Syncfusion’s Blazor Diagram element continues to evolve, providing a strong toolkit for visualizing, creating, and modifying interactive diagrams. Whether or not designing flowcharts, organizational charts, thoughts maps, flooring plans, or BPMN charts, this feature-rich library empowers you to deliver your ideas to life programmatically and interactively.
On this weblog, we’ll discover the thrilling new options of the Blazor Diagram element, launched within the 2023 Quantity 2 launch.
Freehand drawing
The brand new freehand drawing characteristic lets customers create freeform curves (splines) instantly on the diagram web page. With this performance, customers can effortlessly sketch something from easy drawings to elaborate inventive creations.
To make the most of this characteristic, customers have to entry the DrawingObject property and choose the Freehand connector sort.
The next code instance illustrates the right way to initialize the freehand drawing device within the Blazor Diagram element.
@utilizing Syncfusion.Blazor.Diagram
<enter Kind="button" worth="Freehand" @onclick="Freehand" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Peak="600px">
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
//Reference the diagram.
SfDiagramComponent diagram;
//Outline the diagram's nodes assortment.
public DiagramObjectCollection<Node> nodes;
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
Node node = new Node()
{
ID = "group",
OffsetX = 200,
OffsetY = 200,
Width = 100,
Peak = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation()
{
Content material = "Node",
Fashion = new TextStyle()
{
Shade = "white",
}
}
},
Fashion = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
};
nodes.Add(node);
}
non-public void Freehand()
{
//Draw an object as soon as and activate the draw as soon as.
diagram.InteractionController = DiagramInteractions.DrawOnce;
//Initialize the drawing object to attract the freehand connector.
diagram.DrawingObject = new Connector()
{
ID = "connector1",
Kind = ConnectorSegmentType.Freehand,
};
}
}
Observe: Try the drawing instruments in Blazor Diagram element GitHub demos. for extra particulars
Auto-scroll assist
The brand new auto-scroll characteristic routinely scrolls the diagram each time a node or connector is moved past the diagram’s boundary. This manner, it’s at all times seen throughout dragging, resizing, and multiple-selection operations.
The auto-scroll characteristic is routinely triggered when any one of many following actions is finished on the edges of a diagram:
- Node dragging and resizing.
- Connector dragging and end-thumb dragging.
- Rubber band choice.
You may allow or disable the auto-scroll conduct within the diagram utilizing the EnableAutoScroll property. The default worth for this property is false.
The next code instance illustrates enabling the auto-scroll assist for nodes in a diagram.
@utilizing Syncfusion.Blazor.Diagram
<SfDiagramComponent Peak="400px" Width="400px" Nodes="@nodes" Connectors="@connectors">
@* Units the ScrollSettings for the diagram *@
<ScrollSettings EnableAutoScroll=true @bind-ScrollLimit="@scrollLimit">
</ScrollSettings>
</SfDiagramComponent>
@code
{
ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
//Defines diagram's node assortment.
DiagramObjectCollection<Node> nodes;
//Defines diagram's connector assortment.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();
// A node is created and saved within the nodes assortment.
Node node = new Node()
{
ID = "node1",
// Place of the node.
OffsetX = 250,
OffsetY = 250,
// Measurement of the node.
Width = 100,
Peak = 100,
Fashion = new ShapeStyle()
{
Fill = "#6495ED",
StrokeColor = "white"
}
};
// Add node.
nodes.Add(node);
Connector Connector = new Connector()
{
ID = "connector1",
// Set the supply and goal level of the connector.
SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
TargetPoint = new DiagramPoint() { X = 100, Y = 200 },
// Kind of the connector segments.
Kind = ConnectorSegmentType.Straight,
Fashion = new ShapeStyle()
{
StrokeColor = "#6495ED",
StrokeWidth = 1
},
};
connectors. Add(Connector);
}
}
You may set limits for the auto-scrolling area utilizing the ScrollLimit property of the ScrollSettings class. Please confer with the ScrollLimit web page for extra particulars.
The OnAutoScrollChange occasion is triggered when modifications are detected to the scroll place, extent, or viewport dimension because of auto-scrolling for diagram components. Please confer with the OnAutoScrollChange web page for extra particulars.
Observe: For extra particulars, confer with the Diagram auto-scrolling GitHub demos.
Conclusion
Thanks for studying! On this weblog, we’ve seen the thrilling new options added to the Syncfusion Blazor Diagram element for the 2023 Quantity 2 launch. Use them to create and visualize interactive diagrams and go away your suggestions within the feedback part under!
Try our Launch Notes and What’s New pages for different 2023 Quantity 2 launch updates.
The brand new model of Important Studio is on the market for current prospects within the License and Downloads web page. If you’re not a Syncfusion buyer, attempt our 30-day free trial to take a look at our accessible options.
It’s also possible to contact us by our assist discussion board, assist portal, or suggestions portal. We’re at all times joyful to help you!
