What's New in Blazor Diagram: 2023 Volume 2 | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (29).NET MAUI  (214)Angular  (110)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (41)Black Friday Deal  (1)Blazor  (225)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (68)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (81)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (938)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (162)Xamarin  (161)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (157)Chart  (139)Chart of the week  (53)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (68)Development  (654)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (22)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (512)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (611)What's new  (333)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
What's New in Blazor Diagram: 2023 Volume 2

What’s New in Blazor Diagram: 2023 Volume 2

Syncfusion’s Blazor Diagram component continues to evolve, offering a powerful toolkit for visualizing, creating, and editing interactive diagrams. Whether designing flowcharts, organizational charts, mind maps, floor plans, or BPMN charts, this feature-rich library empowers you to bring your concepts to life programmatically and interactively.

In this blog, we’ll explore the exciting new features of the Blazor Diagram component, introduced in the 2023 Volume 2 release.

Freehand drawing

The new freehand drawing feature lets users create freeform curves (splines) directly on the diagram page. With this functionality, users can effortlessly sketch anything from simple drawings to elaborate artistic creations.

To utilize this feature, users need to access the DrawingObject property and select the Freehand connector type.

The following code example illustrates how to initialize the freehand drawing tool in the Blazor Diagram component.

@using Syncfusion.Blazor.Diagram
<input Type="button" value="Freehand" @onclick="Freehand" />
<SfDiagramComponent @ref="diagram" Nodes="@nodes" Height="600px">
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>
@code
{
    //Reference the diagram.
    SfDiagramComponent diagram;
    //Define the diagram's nodes collection.
    public DiagramObjectCollection<Node> nodes;
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            ID = "group",
            OffsetX = 200,
            OffsetY = 200,
            Width = 100,
            Height = 100,
            Annotations = new DiagramObjectCollection<ShapeAnnotation>()
            {
                new ShapeAnnotation()
                {
                    Content = "Node",
                    Style = new TextStyle()
                    {
                        Color = "white",
                    }
                }
            },
            Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }
        };
        nodes.Add(node);
    }
    private void Freehand()
    {
        //Draw an object once and activate the draw once.
        diagram.InteractionController = DiagramInteractions.DrawOnce;
        //Initialize the drawing object to draw the freehand connector.
        diagram.DrawingObject = new Connector()
        {
            ID = "connector1",
            Type = ConnectorSegmentType.Freehand,            
        };
    }
}
Freehand drawing feature in Blazor Diagram component
Freehand drawing feature in Blazor Diagram component

Note: Check out the drawing tools in the Blazor Diagram component GitHub demos for more details.

Auto-scroll support

The new auto-scroll feature automatically scrolls the diagram whenever a node or connector is moved beyond the diagram’s boundary. This way, it is always visible during dragging, resizing, and multiple-selection operations.

The auto-scroll feature is automatically triggered when any one of the following actions is done at the edges of a diagram:

  • Node dragging and resizing.
  • Connector dragging and end-thumb dragging.
  • Rubber band selection.

You can enable or disable the auto-scroll behavior in the diagram using the EnableAutoScroll property. The default value for this property is false.

The following code example illustrates enabling the auto-scroll support for nodes in a diagram.

@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="400px" Width="400px" Nodes="@nodes" Connectors="@connectors">
    @* Sets the ScrollSettings for the diagram *@
    <ScrollSettings EnableAutoScroll=true @bind-ScrollLimit="@scrollLimit">
    </ScrollSettings>
</SfDiagramComponent>
@code
{
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
    //Defines diagram's node collection.
    DiagramObjectCollection<Node> nodes;
    //Defines diagram's connector collection.
    DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        // A node is created and stored in the nodes collection.
        Node node = new Node()
            {
                ID = "node1",
                // Position of the node.
                OffsetX = 250,
                OffsetY = 250,
                // Size of the node.
                Width = 100,
                Height = 100,
                Style = new ShapeStyle()
                {
                    Fill = "#6495ED",
                    StrokeColor = "white"
                }
            };
        // Add node.
        nodes.Add(node);
        Connector Connector = new Connector()
            {
                ID = "connector1",
                // Set the source and target point of the connector.
                SourcePoint = new DiagramPoint() { X = 100, Y = 100 },
                TargetPoint = new DiagramPoint() { X = 100, Y = 200 },
                // Type of the connector segments.
                Type = ConnectorSegmentType.Straight,
                Style = new ShapeStyle()
                {
                    StrokeColor = "#6495ED",
                    StrokeWidth = 1
                },
            };
        connectors. Add(Connector);
    }
}

You can set limits for the auto-scrolling region using the ScrollLimit property of the ScrollSettings class. Please refer to the ScrollLimit page for more details.

The OnAutoScrollChange event is triggered when changes are detected to the scroll position, extent, or viewport size as a result of auto-scrolling for diagram elements. Please refer to the OnAutoScrollChange page for more details.

Auto-scroll support in the Blazor Diagram component
Auto-scroll support in the Blazor Diagram component

Note: For more details, refer to the Diagram auto-scrolling GitHub demos.

Tooltip support for symbols in the symbol palette

The symbol palette can show tooltips when the mouse hovers over any node or connector. We can customize the tooltip for each symbol in the symbol palette.

Default tooltip for symbols

By default, the symbol’s ID will be displayed as the tooltip for each symbol in the palette. The following image illustrates how the tooltip will be displayed when the mouse hovers over the symbols.

Default tooltips for symbols in the symbol palette
Default tooltips for symbols in the symbol palette

Custom tooltips for symbols

You can also provide custom tooltips for the symbols in the symbol palette. Refer to the following image.

Custom tooltips for symbols in the symbol palette
Custom tooltips for symbols in the symbol palette

Note: For more details, refer to the symbol palette tooltip GitHub demos and documentation.

Padding support for node group

Now, you can define the spacing between a group node’s edges and its children using the Padding property.

Padding support for node groups in the Blazor Diagram component
Padding support for node groups in the Blazor Diagram component

Note: For more details, refer to the padding support for group nodes GitHub demos and documentation.

Template support for fixed user handle

You can define a fixed user handle style at the tag level using a template in the FixedUserHandleTemplate property. You can define separate templates for each node and connector by differentiating them based on their ID property. A defined template will be rendered when the PathData properties of the fixeduserhandle are not defined. However, if both path data and template are defined, the path data will take precedence, and the template will not be rendered.

Template support for fixed user handles in the Blazor Diagram component
Template support for fixed user handles in the Blazor Diagram component

Note: For more details, refer to the fixed user handles GitHub demos and documentation.

Support to enlarge smaller diagrams while calling the FitToPage command

The FitToPage command is used to bring an entire diagram (large diagram) into the viewport. You can customize the behavior of the FitToPage command by passing the FitOptions class as a parameter. The CanZoomIn property of the FitOptions class is used to enable or disable zooming to fit smaller content into a larger viewport.

Zooming a smaller image to fit the entire viewport in the Blazor Diagram component
Zooming a smaller image to fit the entire viewport in the Blazor Diagram component

Note: For more details, refer to the FitToPage command GitHub demos and documentation

Conclusion

Thanks for reading! In this blog, we’ve seen the exciting new features added to the Syncfusion Blazor Diagram component for the 2023 Volume 2 release. Use them to create and visualize interactive diagrams and leave your feedback in the comments section below!

Check out our Release Notes and What’s New pages for other 2023 Volume 2 release updates.

The new version of Essential Studio is available for existing customers in the License and Downloads page. If you are not a Syncfusion customer, try our 30-day free trial to check out our available features.

You can also contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed