diff --git a/blazor/diagram-component/images/ResetZoom-Method.gif b/blazor/diagram-component/images/ResetZoom-Method.gif new file mode 100644 index 0000000000..a6529d4467 Binary files /dev/null and b/blazor/diagram-component/images/ResetZoom-Method.gif differ diff --git a/blazor/diagram-component/methods.md b/blazor/diagram-component/methods.md index 7eca3c7dfd..b26dc19b3a 100644 --- a/blazor/diagram-component/methods.md +++ b/blazor/diagram-component/methods.md @@ -213,4 +213,102 @@ To create a node, define the Node object and add it to the nodes collection of t } ``` -![Diagram Clear](images/Clear.gif) \ No newline at end of file +![Diagram Clear](images/Clear.gif) + +### ResetZoom +[ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_ResetZoom) method is used to reset the diagram when the diagram get zoomin or zoomout state. + +```cshtml +@using Syncfusion.Blazor.Diagram + + + +
+ + + + +
+ +
+ + + + +
+ +@code { + public SfDiagramComponent diagram; + DiagramObjectCollection nodes = new DiagramObjectCollection(); + DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + protected override void OnInitialized() + { + Node node = new Node() + { + ID = "node1", + Width = 50, + Height = 50, + OffsetX = 350, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Node node2 = new Node() + { + ID = "node2", + Width = 50, + Height = 50, + OffsetX = 450, + OffsetY = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }; + Connector Connector = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetDecorator = new DecoratorSettings() + { + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; + connectors.Add(Connector); + nodes.Add(node); + nodes.Add(node2); + + } + + public void ZoomIn() + { + diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 }); + } + public void ZoomOut() + { + diagram.Zoom(1/1.2, new DiagramPoint { X = 100, Y = 100 }); + } + private void ResetZoom() + { + diagram.ResetZoom(); + } +} +``` +![Diagram Reset](images/ResetZoom-Method.gif) \ No newline at end of file