diff --git a/blazor/diagram/annotations/appearance.md b/blazor/diagram/annotations/appearance.md index 24f1c833d6..ebb9132169 100644 --- a/blazor/diagram/annotations/appearance.md +++ b/blazor/diagram/annotations/appearance.md @@ -15,11 +15,13 @@ The annotation size can be customized using the [Height](https://help.syncfusion ```cshtml @using Syncfusion.Blazor.Diagram + + @code { // Defines diagram's connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { connectors = new DiagramObjectCollection(); @@ -31,13 +33,13 @@ The annotation size can be customized using the [Height](https://help.syncfusion Style = new TextStyle() { StrokeColor = "#6495ED" }, Annotations = new DiagramObjectCollection() { - new PathAnnotation - { - Content = "Annotation length will be varied", - // Sets the size of the annotation. - Width = 50, - Height = 50 - }, + new PathAnnotation + { + Content = "Annotation length will be varied", + // Sets the size of the annotation. + Width = 50, + Height = 50 + }, } }; connectors.Add(connector); @@ -62,7 +64,7 @@ A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.An @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -78,12 +80,12 @@ A [Hyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.An Annotations = new DiagramObjectCollection() { // Add text as hyperlink. - new ShapeAnnotation - { + new ShapeAnnotation + { Hyperlink = new HyperlinkSettings - { + { Url = "https://www.syncfusion.com" - } + } } }, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, @@ -110,7 +112,7 @@ The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.An @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -126,13 +128,13 @@ The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.An Annotations = new DiagramObjectCollection() { // Add text as hyperlink. - new ShapeAnnotation - { + new ShapeAnnotation + { Hyperlink = new HyperlinkSettings - { - Content = "Syncfusion", - Url = "https://www.syncfusion.com" - } + { + Content = "Syncfusion", + Url = "https://www.syncfusion.com" + } } }, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, @@ -159,7 +161,7 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -174,14 +176,14 @@ The [TextWrapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr // Sets the annotation for the node. Annotations = new DiagramObjectCollection() { - new ShapeAnnotation + new ShapeAnnotation { Content = "Annotation Text Wrapping", Style = new TextStyle() - { + { // Sets the text wrapping of the annotation as Wrap. TextWrapping = TextWrap.Wrap - } + } } }, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, @@ -218,7 +220,7 @@ The following code sample demonstrates how the `TextOverflow` property works wit @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -237,10 +239,10 @@ The following code sample demonstrates how the `TextOverflow` property works wit { Content = "The text element with property of overflow as Wrap and wrapping as NoWrap", Style = new TextStyle() - { + { // Sets the text overflow of the annotation as Wrap. TextOverflow = TextOverflow.Wrap, - TextWrapping = TextWrap.NoWrap + TextWrapping = TextWrap.NoWrap } }, }, @@ -290,7 +292,7 @@ The following code explains how to customize the visual appearance of an annotat @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -305,10 +307,10 @@ The following code explains how to customize the visual appearance of an annotat // Sets the annotation for the node. Annotations = new DiagramObjectCollection() { - new ShapeAnnotation + new ShapeAnnotation { Content = "Annotation Text", - Style = new TextStyle() + Style = new TextStyle() { // Sets the style for the annotation. Color="black", @@ -316,8 +318,8 @@ The following code explains how to customize the visual appearance of an annotat Italic = true, TextDecoration = TextDecoration.Underline, FontSize = 12, - FontFamily = "TimesNewRoman" - } + FontFamily = "TimesNewRoman" + } } }, Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, @@ -340,18 +342,15 @@ The font style of annotations can be changed dynamically at runtime by modifying @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - - @code { // Reference of the diagram. - SfDiagramComponent Diagram; - + private SfDiagramComponent Diagram; // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -369,13 +368,13 @@ The font style of annotations can be changed dynamically at runtime by modifying new ShapeAnnotation { Content = "Annotation Text", - Style = new TextStyle() + Style = new TextStyle() { Color = "black", Bold = true, Italic = true, TextDecoration = TextDecoration.Underline, - FontSize = 12, + FontSize = 12, FontFamily = "TimesNewRoman" } } @@ -385,7 +384,7 @@ The font style of annotations can be changed dynamically at runtime by modifying nodes.Add(node); } - public void UpdateStyle() + private void UpdateStyle() { // Change the style of the annotation. Diagram.BeginUpdate(); @@ -423,7 +422,7 @@ Annotations can be set to read-only mode by configuring their [Constraints](http @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -437,10 +436,10 @@ Annotations can be set to read-only mode by configuring their [Constraints](http OffsetY = 100, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation + new ShapeAnnotation { Content = "Annotation Text", - // Sets the constraints as Read only. + // Sets the constraints as Read only. Constraints = AnnotationConstraints.ReadOnly } }, @@ -466,10 +465,9 @@ Multiple annotations can be added to a single node or connector. The following c @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; - + private DiagramObjectCollection nodes; // Defines diagram's connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -485,17 +483,17 @@ Multiple annotations can be added to a single node or connector. The following c // Sets the multiple annotation for the node. Annotations = new DiagramObjectCollection() { - new ShapeAnnotation + new ShapeAnnotation { Content = "Left", Offset = new DiagramPoint(){ X = .12,Y = .1} }, - new ShapeAnnotation + new ShapeAnnotation { Content = "Center", Offset = new DiagramPoint(){ X = .5,Y = .5} }, - new ShapeAnnotation + new ShapeAnnotation { Content = "Right", Offset = new DiagramPoint(){ X = .82,Y = .9} @@ -512,20 +510,20 @@ Multiple annotations can be added to a single node or connector. The following c Style = new TextStyle() { StrokeColor = "#6495ED" }, Annotations = new DiagramObjectCollection() { - new PathAnnotation - { + new PathAnnotation + { Content = "Offset as 0", - Offset = 0 + Offset = 0 }, - new PathAnnotation - { + new PathAnnotation + { Content = "Offset as 0.5", Offset = 0.5 }, - new PathAnnotation + new PathAnnotation { Content = "Offset as 1", - Offset = 1 + Offset = 1 }, } }; @@ -581,7 +579,8 @@ The following code illustrates how to define a template for both a node's and a - +
Nicolas
@@ -594,7 +593,8 @@ The following code illustrates how to define a template for both a node's and a - +
Nicolas
@@ -606,8 +606,8 @@ The following code illustrates how to define a template for both a node's and a @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -621,18 +621,16 @@ The following code illustrates how to define a template for both a node's and a Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "black", Opacity = 1 }, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation() - { - ID = "NodeAnnotation1", - UseTemplate = true, - Height = 75, - Width = 75, - - }, + new ShapeAnnotation() + { + ID = "NodeAnnotation1", + UseTemplate = true, + Height = 75, + Width = 75, + }, }, }; nodes.Add(node); - Connector connector = new Connector() { ID = "connector1", @@ -641,17 +639,16 @@ The following code illustrates how to define a template for both a node's and a Type = ConnectorSegmentType.Orthogonal, Annotations = new DiagramObjectCollection() { - new PathAnnotation() - { - ID = "ConnectorAnnotation1", - UseTemplate = true, - Height = 50, - Width = 75, - Alignment = AnnotationAlignment.Before, - Offset = 0.3, - Displacement = new DiagramPoint(){X = 0, Y = -0.5} - - }, + new PathAnnotation() + { + ID = "ConnectorAnnotation1", + UseTemplate = true, + Height = 50, + Width = 75, + Alignment = AnnotationAlignment.Before, + Offset = 0.3, + Displacement = new DiagramPoint(){X = 0, Y = -0.5} + }, }, }; connectors.Add(connector); @@ -671,10 +668,13 @@ The following code demonstrates how to set a value for the `AdditionalInfo` prop ```cshtml @using Syncfusion.Blazor.Diagram + + @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); diff --git a/blazor/diagram/annotations/connector-annotation.md b/blazor/diagram/annotations/connector-annotation.md index a974684ff0..1c121e3fea 100644 --- a/blazor/diagram/annotations/connector-annotation.md +++ b/blazor/diagram/annotations/connector-annotation.md @@ -31,7 +31,7 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -44,23 +44,23 @@ The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Pat Style = new TextStyle() { StrokeColor = "#6495ED" }, Annotations = new DiagramObjectCollection() { - new PathAnnotation - { + new PathAnnotation + { Content = "Offset as 0", // Sets the offset of the annotation as 0. - Offset = 0 + Offset = 0 }, - new PathAnnotation - { + new PathAnnotation + { Content = "Offset as 0.5", // Sets the offset of the annotation as 0.5. - Offset = 0.5 + Offset = 0.5 }, - new PathAnnotation - { + new PathAnnotation + { Content = "Offset as 1", // Sets the offset of the annotation as 1. - Offset = 1 + Offset = 1 }, } }; @@ -92,7 +92,7 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -105,17 +105,17 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. Style = new TextStyle() { StrokeColor = "#6495ED" }, Annotations = new DiagramObjectCollection() { - new PathAnnotation - { + new PathAnnotation + { Content = "Before", // Sets the alignment of the annotation as Before. - Alignment = AnnotationAlignment.Before + Alignment = AnnotationAlignment.Before }, - new PathAnnotation - { + new PathAnnotation + { Content = "After", // Sets the alignment of the annotation as After. - Alignment = AnnotationAlignment.After + Alignment = AnnotationAlignment.After }, } }; @@ -140,13 +140,12 @@ The [Displacement](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Defines diagram's connector collection. - public DiagramObjectCollection connectors { get; set; } + private DiagramObjectCollection connectors { get; set; } protected override void OnInitialized() { @@ -193,7 +192,7 @@ The following code example shows how the connector annotation rotated in its pat @code { // Defines diagram's connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -206,12 +205,12 @@ The following code example shows how the connector annotation rotated in its pat Style = new TextStyle() { StrokeColor = "#6495ED" }, Annotations = new DiagramObjectCollection() { - new PathAnnotation - { - Content = "Annotation", + new PathAnnotation + { + Content = "Annotation", // Set the segment angle for the connector's annotation. SegmentAngle = true, - Offset = 0.7 + Offset = 0.7 }, } }; diff --git a/blazor/diagram/annotations/events.md b/blazor/diagram/annotations/events.md index a4a6bd9347..b9f329401f 100644 --- a/blazor/diagram/annotations/events.md +++ b/blazor/diagram/annotations/events.md @@ -29,12 +29,14 @@ The following code example shows how to register and get notifications from the @code { // Defines diagram's nodes collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; + // Triggered when the node and connector's labels change in the diagram. - private void OnLabelTextChanging(TextChangeEventArgs args) - { - args.Cancel = true; - } + private void OnLabelTextChanging(TextChangeEventArgs args) + { + args.Cancel = true; + } + // Triggered this event when complete the editing for Annotation and update the old text and new text values. private void OnTextChanged(TextChangeEventArgs args) { diff --git a/blazor/diagram/annotations/interactions.md b/blazor/diagram/annotations/interactions.md index 819909b43a..a77978021f 100644 --- a/blazor/diagram/annotations/interactions.md +++ b/blazor/diagram/annotations/interactions.md @@ -23,7 +23,7 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -37,15 +37,14 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. OffsetY = 100, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { + new ShapeAnnotation + { Content = "Node1", RotationReference = AnnotationRotationReference.Parent, } }, - }; - Node node2 = new Node() + Node node2 = new Node() { ID = "node2", Width = 100, @@ -54,13 +53,12 @@ The [RotationReference](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. OffsetY = 100, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { + new ShapeAnnotation + { Content = "Node2", RotationReference = AnnotationRotationReference.Page, } }, - }; nodes.Add(node1); nodes.Add(node2); @@ -85,10 +83,13 @@ The following code examples illustrate how to configure `RotationAngle` for an a ```cshtml @using Syncfusion.Blazor.Diagram + + @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -98,15 +99,15 @@ The following code examples illustrate how to configure `RotationAngle` for an a Width = 100, OffsetX = 100, OffsetY = 100, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation - { - Content = "Node", - ID = "Annotation", - RotationAngle = 30, - } - }, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation + { + Content = "Node", + ID = "Annotation", + RotationAngle = 30, + } + }, }; nodes.Add(node); } diff --git a/blazor/diagram/annotations/labels.md b/blazor/diagram/annotations/labels.md index bea1f635a3..724b014fe4 100644 --- a/blazor/diagram/annotations/labels.md +++ b/blazor/diagram/annotations/labels.md @@ -30,10 +30,9 @@ The following code example demonstrates how to create an annotation for a node a @code { // Defines diagram's connector collection. - DiagramObjectCollection connectors; - + private DiagramObjectCollection connectors; // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -91,16 +90,14 @@ The following code explains how to add an annotation to a node at runtime by usi @using Syncfusion.Blazor.Buttons - - + @code { // Reference to diagram. - SfDiagramComponent diagram; - + private SfDiagramComponent diagram; // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -117,7 +114,7 @@ The following code explains how to add an annotation to a node at runtime by usi } // Method to add annotation at runtime. - public void AddLabel() + private void AddLabel() { ShapeAnnotation annotation = new ShapeAnnotation { Content = "Annotation" }; (diagram.Nodes[0].Annotations as DiagramObjectCollection).Add(annotation); @@ -134,7 +131,7 @@ The following code explains how to add an annotation to a node at runtime by usi ```csharp //Method to add annotation at runtime. -public async void AddLabel() +private async void AddLabel() { ShapeAnnotation annotation = new ShapeAnnotation { Content = "Annotation" }; await(diagram.Nodes[0].Annotations as DiagramObjectCollection).AddAsync(annotation); @@ -152,18 +149,15 @@ An annotation can be removed from a node or connector's `Annotations` collection @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - - @code { // Reference to diagram. - SfDiagramComponent diagram; - + private SfDiagramComponent diagram; // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -184,7 +178,7 @@ An annotation can be removed from a node or connector's `Annotations` collection } // Method to remove annotation at runtime. - public void RemoveLabel() + private void RemoveLabel() { (diagram.Nodes[0].Annotations as DiagramObjectCollection).RemoveAt(0); } @@ -198,7 +192,7 @@ Also, The `Remove` method can also be used to remove a specific annotation objec ```cshtml // Method to remove annotation at runtime using Remove method. - public void RemoveLabel() + private void RemoveLabel() { ShapeAnnotation annotation = (diagram.Nodes[0].Annotations[0]) as ShapeAnnotation; (diagram.Nodes[0].Annotations as DiagramObjectCollection).Remove(annotation); @@ -218,18 +212,15 @@ The following code sample shows how to change the content of a node's annotation @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - - @code { // Reference to diagram. - SfDiagramComponent diagram; - + private SfDiagramComponent diagram; // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -239,9 +230,9 @@ The following code sample shows how to change the content of a node's annotation Width = 100, Height = 100, OffsetX = 100, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation { Content = "Node" } + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation { Content = "Node" } }, OffsetY = 100, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, @@ -250,7 +241,7 @@ The following code sample shows how to change the content of a node's annotation } // Method to update the annotation at runtime. - public void UpdateLabel() + private void UpdateLabel() { diagram.Nodes[0].Annotations[0].Content = "Updated Annotation"; } diff --git a/blazor/diagram/annotations/node-annotation.md b/blazor/diagram/annotations/node-annotation.md index 711045f60f..b2c998c98a 100644 --- a/blazor/diagram/annotations/node-annotation.md +++ b/blazor/diagram/annotations/node-annotation.md @@ -32,7 +32,7 @@ The following code demonstrates how to set an annotation's `Offset`. @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -44,11 +44,11 @@ The following code demonstrates how to set an annotation's `Offset`. OffsetX = 100, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { - Content = "Offset(0,0)", + new ShapeAnnotation + { + Content = "Offset(0,0)", // Sets the offset for an annotation's content. - Offset = new DiagramPoint() { X = 0, Y = 0 } + Offset = new DiagramPoint() { X = 0, Y = 0 } } }, OffsetY = 100, @@ -109,7 +109,7 @@ The following code demonstrates how to align an annotation. @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -123,8 +123,8 @@ The following code demonstrates how to align an annotation. OffsetY = 250, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { + new ShapeAnnotation + { Content = "Annotation", // Sets the HorizontalAlignment and VerticalAlignment for the content. HorizontalAlignment = HorizontalAlignment.Center, @@ -158,7 +158,7 @@ The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ann @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -172,8 +172,8 @@ The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ann OffsetY = 100, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { + new ShapeAnnotation + { Content = "Task1", // Sets the margin for the content. Margin = new DiagramThickness() { Top = 10}, @@ -205,7 +205,7 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. @code { // Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -219,14 +219,14 @@ The [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. OffsetY = 100, Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { + new ShapeAnnotation + { Content = "Text align is set as Left", Style = new TextStyle() - { + { // Sets the textAlign as left for the content. TextAlign = TextAlign.Left - } + } } }, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, diff --git a/blazor/diagram/bpmn-shapes/bpmn-activity.md b/blazor/diagram/bpmn-shapes/bpmn-activity.md index 499069bb25..3131f69333 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-activity.md +++ b/blazor/diagram/bpmn-shapes/bpmn-activity.md @@ -9,14 +9,14 @@ documentation: ug # BPMN Activity in Diagram Component -The [Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. +The [BpmnActivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) is the task that is performed in a business process. It is represented by a rounded rectangle. There are two types of activities. They are listed as follows: -* [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task): It occurs within a process and is not broken down to a finer level of detail. -* [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess): It occurs within a process and is broken down to a finer level of detail. +* **Task**: It occurs within a process and is not broken down to a finer level of detail. +* **CollapsedSubProcess**: It occurs within a process and is broken down to a finer level of detail. -You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +You can specify the any one of the above activity type using the [ActivityType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_ActivityType) property of `BpmnActivity`. ```cshtml @using Syncfusion.Blazor.Diagram @@ -27,7 +27,7 @@ You can specify the any one of the above activity type using the [ActivityType]( @code { // Initialize the diagram's nodes collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -43,16 +43,18 @@ You can specify the any one of the above activity type using the [ActivityType]( // Unique Id of the node. ID = "node1", // Sets the shape to activity. - Shape = new BpmnActivity() - { - ActivityType = BpmnActivityType.Task + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task }, }; nodes.Add(node); } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhesZWRLnepOhzI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivity) ![Send Task BPMN Shape](../images/Task.png) @@ -64,16 +66,17 @@ The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.B @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); + Node node = new Node() { // Position of the node. OffsetX = 100, @@ -92,11 +95,12 @@ The [TaskType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.B }, }; nodes.Add(node); - } + } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhesDWxBQAoPeWJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityTask) ![Send Task BPMN Shape](../images/Send.png) @@ -115,18 +119,18 @@ The various types of BPMN tasks are tabulated as follows. ## How to Create a BPMN Activity Collapsed Sub-Process -A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess). +A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a `CollapsedSubProcess`. ```cshtml @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -152,14 +156,15 @@ A [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiXCRLGIKdEWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/BpmnActivityCollapsedSubProcess) ![Collapsed Subprocess BPMN Shape](../images/Bpmn-CollapsedSub-Process-Loop-None.png) ### How to Set Loop Type -[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for [Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is **None**. +[Loop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_Loop) is a task that is internally being looped. The `Loop` property of [BpmnActivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html) allows you to define the type of loop. The default value for `Loop` is **None**. You can define the `Loop` property in BPMN Activity, as shown in the following code. @@ -167,12 +172,12 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code -{ +{ // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -198,8 +203,9 @@ You can define the `Loop` property in BPMN Activity, as shown in the following c } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrSsjMdhwcsdzZJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Loop) ![Standard Task BPMN Shape](../images/Bpmn-Task-Loop-Standard.png) @@ -214,7 +220,7 @@ The following table contains various types of BPMN loops. ### How to Enable Compensation -[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the [IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) property is set to false. +[IsCompensation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCompensation) is triggered when the operation is partially failed and enabled it with the `IsCompensation` property of the [BpmnActivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). By default, the `IsCompensation` property is set to **false**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -225,7 +231,7 @@ The following table contains various types of BPMN loops. @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -248,32 +254,33 @@ The following table contains various types of BPMN loops. IsCompensation = true, } }; - nodes.Add(node1); + nodes.Add(node); } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhSMZWRrGvOqeGm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Compensation) ![IsCompensationActivity Task BPMN Shape](../images/Bpmn-Task-Compensation.png) ### How to Enable Call -A Call activity is a global sub-process that is reused at various points of the business flow. To create a call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +A Call activity is a global sub-process that is reused at various points of the business flow. To create a call activity, enable the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property of the [BpmnActivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). -N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsCall) property is false. -
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) Type Activity. +N>* By default, the `IsCall` property is **false**. +
* This Property is only applicable for [Task](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_Task) type activity. ```cshtml @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -287,7 +294,7 @@ N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl Width = 100, Height = 100, // Unique Id of the node. - ID = "node1", + ID = "node1", // Defines the shape to activity. Shape = new BpmnActivity() { @@ -300,17 +307,19 @@ N>* By default, the [IsCall](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtreiNMHLlXGZvMi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Call) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-Task-Call.png) ### How to Enable Ad-Hoc -An Ad-Hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [Bpmn Activity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). +An Ad-Hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property of [BpmnActivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html). -N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_IsAdhoc) property is false. -
* This Property is only applicable for [Collapsed Sub-Process](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) Type Activity. +N>* By default, the `IsAdhoc` property is **false**. +
* This Property is only applicable for [CollapsedSubProcess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivityType.html#Syncfusion_Blazor_Diagram_BpmnActivityType_CollapsedSubProcess) type activity. ```cshtml @using Syncfusion.Blazor.Diagram @@ -321,7 +330,7 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -338,8 +347,8 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B ID = "node1", // Defines shape to activity Shape = new BpmnActivity() - { - ActivityType = BpmnActivityType.CollapsedSubProcess, + { + ActivityType = BpmnActivityType.CollapsedSubProcess, IsAdhoc = true } }; @@ -347,14 +356,15 @@ N>* By default, the [IsAdhoc](https://help.syncfusion.com/cr/blazor/Syncfusion.B } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htByCXidBlUAmjKf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/Adhoc) ![IsAdHocActivity CollapsedSub-Process BPMN Shape](../images/Bpmn-CollapsedSub-Process-AdHocpng.png) ### How to Set Sub-Process Type -SubProcessType represents the type of task that is being processed. The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) property of subprocess allows you to define the type of SubProcessType. By default, it is set to [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnSubProcessType.html#Syncfusion_Blazor_Diagram_BpmnSubProcessType_Default). +[SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnActivity.html#Syncfusion_Blazor_Diagram_BpmnActivity_SubProcessType) represents the type of task that is being processed. The `SubProcessType` property of subprocess allows you to define the type of `SubProcessType`. By default, it is set to **Default**. ```cshtml @using Syncfusion.Blazor.Diagram @@ -365,7 +375,7 @@ SubProcessType represents the type of task that is being processed. The [SubProc @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -381,9 +391,9 @@ SubProcessType represents the type of task that is being processed. The [SubProc // Unique Id of the node. ID = "node1", // Sets shape to Activity. - Shape = new BpmnActivity() - { - ActivityType = BpmnActivityType.CollapsedSubProcess, + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.CollapsedSubProcess, SubProcessType = BpmnSubProcessType.Event, } }; @@ -391,7 +401,9 @@ SubProcessType represents the type of task that is being processed. The [SubProc } } ``` -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLoCDsnhleIlIxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnActivity/SubProcessType) ![Event Boundary BPMN Shape](../images/Bpmn-CollapsedSub-Process-Event.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-connectors.md b/blazor/diagram/bpmn-shapes/bpmn-connectors.md index b4dc525754..a03ce0d29e 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-connectors.md +++ b/blazor/diagram/bpmn-shapes/bpmn-connectors.md @@ -33,12 +33,12 @@ The following code example explains how to create an association. @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Create connector and store it in the connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -48,8 +48,8 @@ The following code example explains how to create an association. // Unique Id of the connector. ID = "connector1", // Start and end point of the connector - SourcePoint = new DiagramPoint () { X = 100, Y = 200 }, - TargetPoint = new DiagramPoint () { X = 300, Y = 300 }, + SourcePoint = new DiagramPoint() { X = 100, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, // Sets the type to Bpmn, flow to AssociationFlow. Shape = new BpmnFlow() { @@ -90,12 +90,12 @@ The following code example explains how to create a sequence flow. @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Create connector and store it in the connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -149,12 +149,12 @@ The following code example explains how to define a message flow. @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Create connector and store it in the connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-object.md b/blazor/diagram/bpmn-shapes/bpmn-data-object.md index c57cb5258f..a36e2b8555 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-object.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-object.md @@ -20,7 +20,7 @@ A [BpmnDataObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { diff --git a/blazor/diagram/bpmn-shapes/bpmn-data-store.md b/blazor/diagram/bpmn-shapes/bpmn-data-store.md index 514f4a688f..cb21f9dd41 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-data-store.md +++ b/blazor/diagram/bpmn-shapes/bpmn-data-store.md @@ -15,12 +15,12 @@ A data store is used to store or access data associated with a business process. @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { diff --git a/blazor/diagram/bpmn-shapes/bpmn-event.md b/blazor/diagram/bpmn-shapes/bpmn-event.md index b0a094e042..3f8991bb69 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-event.md +++ b/blazor/diagram/bpmn-shapes/bpmn-event.md @@ -26,7 +26,7 @@ The [EventType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -63,7 +63,6 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn Event triggers are notated as icons inside the circle and they represent the specific details of the process. The [Trigger](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEvent.html#Syncfusion_Blazor_Diagram_BpmnEvent_Trigger) property of the node allows you to set the type of trigger and by default, it is set to [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BpmnEventTrigger.html#Syncfusion_Blazor_Diagram_BpmnEventTrigger_None). The following code example explains how to create a BPMN trigger. ```cshtml - @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ @@ -72,7 +71,7 @@ Event triggers are notated as icons inside the circle and they represent the spe @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -101,7 +100,7 @@ Event triggers are notated as icons inside the circle and they represent the spe ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtresttdBOFpnepH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventType) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/BpmnEditor/BpmnEvent/BpmnEventTrigger) ![Message Trigger Start Event BPMN Shape](../images/Bpmn-Event-Message-Start.png) diff --git a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md index 40ffc61c14..4f41b2d8df 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md +++ b/blazor/diagram/bpmn-shapes/bpmn-expanded-sub-process.md @@ -25,7 +25,7 @@ The following code example explains how to create a BPMN Expanded Sub-Process. @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -68,34 +68,34 @@ The following code example explains how to add a BPMN node to an BPMN Expanded S @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); Node node1 = new Node() - { - ID = "node1", - OffsetX = 300, - OffsetY = 300, - Width = 70, - Height = 70, - Shape = new BpmnActivity() { ActivityType = BpmnActivityType.Task } - }; + { + ID = "node1", + OffsetX = 300, + OffsetY = 300, + Width = 70, + Height = 70, + Shape = new BpmnActivity() { ActivityType = BpmnActivityType.Task } + }; nodes.Add(node1); Node node2 = new Node() + { + ID = "node2", + Width = 300, + OffsetX = 500, + OffsetY = 300, + Height = 300, + Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop, + Shape = new BpmnExpandedSubProcess() { - ID = "node2", - Width = 300, - OffsetX = 500, - OffsetY = 300, - Height = 300, - Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop, - Shape = new BpmnExpandedSubProcess() - { - Children = new DiagramObjectCollection() { "node1" } - } - }; + Children = new DiagramObjectCollection() { "node1" } + } + }; nodes.Add(node2); } } @@ -128,12 +128,12 @@ The following image shows how to add BPMN node into the BPMN ExpandedSubProcess @using Syncfusion.Blazor.Diagram @* Initialize Diagram *@ - + @code -{ +{ // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -187,7 +187,7 @@ The following table describes the available loop types for an Expanded Sub-Proce @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -232,7 +232,7 @@ An Ad-Hoc Expanded Sub-Process is a group of tasks that are executed in any orde @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -277,7 +277,7 @@ The [SubProcessType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia @code { // Initialize the node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { diff --git a/blazor/diagram/bpmn-shapes/bpmn-gateway.md b/blazor/diagram/bpmn-shapes/bpmn-gateway.md index 9c6867d3a1..cce09f5911 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-gateway.md +++ b/blazor/diagram/bpmn-shapes/bpmn-gateway.md @@ -20,7 +20,7 @@ A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -38,7 +38,7 @@ A [BpmnGateway](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. Shape = new BpmnGateway() { //Sets gateway type to None. - GatewayType = BpmnGatewayType.None + GatewayType = BpmnGatewayType.None } }; nodes.Add(node); diff --git a/blazor/diagram/bpmn-shapes/bpmn-shapes.md b/blazor/diagram/bpmn-shapes/bpmn-shapes.md index bcfb0455f4..af81b67cdb 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-shapes.md +++ b/blazor/diagram/bpmn-shapes/bpmn-shapes.md @@ -22,7 +22,7 @@ The following code example demonstrates how to create a simple BPMN Task shape. @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -38,9 +38,9 @@ The following code example demonstrates how to create a simple BPMN Task shape. // Unique Id of the node. ID = "node1", // Sets the shape to activity. - Shape = new BpmnActivity() - { - ActivityType = BpmnActivityType.Task + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task }, }; nodes.Add(node); diff --git a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md index 05ab547859..26563156db 100644 --- a/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md +++ b/blazor/diagram/bpmn-shapes/bpmn-text-annotation.md @@ -36,7 +36,7 @@ documentation: ug @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -85,7 +85,7 @@ The following code example represents how to create a TextAnnotation and connect @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -101,9 +101,9 @@ The following code example represents how to create a TextAnnotation and connect // Unique Id of the node. ID = "node1", // Sets the type of shape to Bpmn and shape to activity. - Shape = new BpmnActivity() - { - ActivityType = BpmnActivityType.Task + Shape = new BpmnActivity() + { + ActivityType = BpmnActivityType.Task }, }; nodes.Add(node1); @@ -134,7 +134,6 @@ The following code example represents how to create a TextAnnotation and connect nodes.Add(node2); } } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIWNXnKpTiBXyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/diagram/commands.md b/blazor/diagram/commands.md index 66242dd9e4..91a2cb6bef 100644 --- a/blazor/diagram/commands.md +++ b/blazor/diagram/commands.md @@ -32,7 +32,6 @@ The following example shows how to align selected objects. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @@ -40,43 +39,44 @@ The following example shows how to align selected objects. @code { //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; // Initialize diagram's node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() - { - ID = "node1", - Width = 50, - Height = 30, - OffsetX = 500, - OffsetY = 100, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; nodes.Add(node1); Node node2 = new Node() - { - ID = "node2", - Width = 60, - Height = 40, - OffsetX = 500, - OffsetY = 300, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; nodes.Add(node2); Node node3 = new Node() - { - ID = "node3", - Width = 70, - Height = 50, - OffsetX = 500, - OffsetY = 500, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 500, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; nodes.Add(node3); } + //Method to align selected objects at left of the selection boundary. private void OnAlignLeft() { @@ -95,16 +95,15 @@ The following code example illustrates how to align all the selected objects at @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -158,16 +157,15 @@ The following code example illustrates how to align all the selected objects at @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -221,16 +219,15 @@ The following code example illustrates how to align all the selected objects at @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -284,16 +281,14 @@ The following code example illustrates how to align all the selected objects at @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -347,16 +342,15 @@ The following code example illustrates how to align all the selected objects at @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -436,41 +430,41 @@ The following code example illustrates how to execute the space commands. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() - { - ID = "node1", - Width = 50, - Height = 30, - OffsetX = 500, - OffsetY = 100, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + ID = "node1", + Width = 50, + Height = 30, + OffsetX = 500, + OffsetY = 100, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; nodes.Add(node1); Node node2 = new Node() - { - ID = "node2", - Width = 60, - Height = 40, - OffsetX = 400, - OffsetY = 200, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + ID = "node2", + Width = 60, + Height = 40, + OffsetX = 400, + OffsetY = 200, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; nodes.Add(node2); Node node3 = new Node() - { - ID = "node3", - Width = 70, - Height = 50, - OffsetX = 500, - OffsetY = 300, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + ID = "node3", + Width = 70, + Height = 50, + OffsetX = 500, + OffsetY = 300, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; nodes.Add(node3); } @@ -551,9 +545,9 @@ The following code example illustrates how to execute the size commands. @code { //Reference to diagram. - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -630,7 +624,6 @@ The following code illustrates the clipboard commands. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @@ -641,9 +634,9 @@ The following code illustrates the clipboard commands. @code { //Reference to diagram. - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -727,9 +720,9 @@ The following example demonstrates the grouping commands. @code { //Reference to diagram. - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -795,11 +788,14 @@ The following code illustrates how to execute the BringToFront command. @using Syncfusion.Blazor.Buttons - - -@code{ - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -836,6 +832,7 @@ The following code illustrates how to execute the BringToFront command. }; nodes.Add(node3); } + private void bringToFront() { diagram.Select(new ObservableCollection() { diagram.Nodes[0] }); @@ -860,11 +857,14 @@ The following code illustrates how to execute the SendToBack command. @using Syncfusion.Blazor.Buttons - - -@code{ - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -901,6 +901,7 @@ The following code illustrates how to execute the SendToBack command. }; nodes.Add(node3); } + private void sendToBack() { diagram.Select(new ObservableCollection() { diagram.Nodes[2] }); @@ -924,11 +925,14 @@ The following code illustrates how to execute the BringForward command. @using Syncfusion.Blazor.Buttons - - -@code{ - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -965,6 +969,7 @@ The following code illustrates how to execute the BringForward command. }; nodes.Add(node3); } + private void bringForward() { diagram.Select(new ObservableCollection() { diagram.Nodes[1] }); @@ -988,11 +993,14 @@ The following code illustrates how to execute the SendBackward command. @using Syncfusion.Blazor.Buttons - - -@code{ - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -1029,6 +1037,7 @@ The following code illustrates how to execute the SendBackward command. }; nodes.Add(node3); } + private void sendBackward() { diagram.Select(new ObservableCollection() { diagram.Nodes[2] }); @@ -1061,9 +1070,9 @@ The following code illustrates how to zoom-in/zoom out the diagram. @code { //Reference to diagram. - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -1113,11 +1122,12 @@ The following code illustrates how to execute nudge command. @using Syncfusion.Blazor.Buttons + @code { - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private void NudgeLeft() { @@ -1153,13 +1163,13 @@ These commands enhance user experience by offering flexibility in diagram editin - - + + @code { //Reference to diagram. - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private void Undo() { @@ -1188,28 +1198,35 @@ The [BringIntoView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag @using Syncfusion.Blazor.Buttons - - + + + @code { -SfDiagramComponent diagram; -DiagramObjectCollection nodes; -DiagramObjectCollection connectors; -protected override void OnInitialized() + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; + private DiagramObjectCollection connectors; + + protected override void OnInitialized() { nodes = new DiagramObjectCollection() { - new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() { Content = "Node1" } } }, + new Node + { + ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node1" } + } + }, }; } + //Brings the specified bounds into the view port of the diagram private void BringIntoView() { - DiagramRect bound = new DiagramRect(950,650,500,500); - diagram.BringIntoView(bound); + DiagramRect bound = new DiagramRect(950,650,500,500); + diagram.BringIntoView(bound); } } ``` @@ -1226,28 +1243,35 @@ The [BringIntoCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di @using Syncfusion.Blazor.Buttons - - + + + @code { -SfDiagramComponent diagram; -DiagramObjectCollection nodes; -DiagramObjectCollection connectors; -protected override void OnInitialized() + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; + private DiagramObjectCollection connectors; + + protected override void OnInitialized() { nodes = new DiagramObjectCollection() { - new Node { ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() { Content = "Node1" } } }, + new Node + { + ID = "node1", Width = 150, Height = 100, OffsetX = 1100, OffsetY = 900, + Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() { Content = "Node1" } + } + }, }; } + //Brings the specified bounds into the center of the view port of the diagram private void BringIntoCenter() { - DiagramRect bound = new DiagramRect(950,650,500,500); - diagram.BringIntoCenter(bound); + DiagramRect bound = new DiagramRect(950,650,500,500); + diagram.BringIntoCenter(bound); } } ``` @@ -1267,63 +1291,65 @@ The following code illustrates how to execute the FitToPage method. @using Syncfusion.Blazor.Buttons - - -@code { - //Initialize of all the variables, methods and classes. - public SfDiagramComponent diagram; - FitOptions options = new FitOptions() {Mode = FitMode.Both, Region = DiagramRegion.Content }; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - string selectedMode; - string selectedRegion; - - protected override void OnInitialized() - { - Node node1 = new Node() - { - ID = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - }; - Node node2 = new Node() - { - ID = "node2", - OffsetX = 500, - OffsetY = 700, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - }; - Node node3 = new Node() - { - ID = "node3", - OffsetX = 500, - OffsetY = 500, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - }; - Node node4 = new Node() - { - ID = "node4", - OffsetX = 1000, - OffsetY = 700, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - }; - Node node5 = new Node() - { - ID = "node5", - OffsetX = 1150, - OffsetY = 400, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + + + +@code +{ + //Initialize of all the variables, methods and classes. + private SfDiagramComponent diagram; + private FitOptions options = new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content }; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private string selectedMode; + private string selectedRegion; + + protected override void OnInitialized() + { + Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node2 = new Node() + { + ID = "node2", + OffsetX = 500, + OffsetY = 700, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node3 = new Node() + { + ID = "node3", + OffsetX = 500, + OffsetY = 500, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node4 = new Node() + { + ID = "node4", + OffsetX = 1000, + OffsetY = 700, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + }; + Node node5 = new Node() + { + ID = "node5", + OffsetX = 1150, + OffsetY = 400, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, }; Node node6 = new Node() { @@ -1341,7 +1367,8 @@ The following code illustrates how to execute the FitToPage method. nodes.Add(node5); nodes.Add(node6); } - private void Mode(ChangeEventArgs e) + + private void Mode(ChangeEventArgs e) { if (e.Value != null) { @@ -1385,10 +1412,10 @@ The following code illustrates how to execute the FitToPage method. } //fit the diagram to the page with respect to mode and region. - private void FitToPage() - { - diagram.FitToPage(options); - } + private void FitToPage() + { + diagram.FitToPage(options); + } } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLosXtmfLaNhXqr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -1436,110 +1463,88 @@ The following code illustrates how to execute the CanZoomIn command.
- - - +
@code { - public SfDiagramComponent diagram; - - DiagramObjectCollection nodes = new DiagramObjectCollection(); - - DiagramObjectCollection connectors = new DiagramObjectCollection(); - - FitOptions Options = new FitOptions() - - { - - Mode = FitMode.Height, - - Region = DiagramRegion.Content, - - CanZoomIn = true - - }; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private FitOptions Options = new FitOptions() + { + Mode = FitMode.Height, + Region = DiagramRegion.Content, + CanZoomIn = true + }; protected override void OnInitialized() - { - Node node1 = new Node() + { + ID = "node1", + OffsetX = 250, + OffsetY = 100, + Width = 100, + Height = 50, + Style = new ShapeStyle() { - ID = "node1", - OffsetX = 250, - OffsetY = 100, - Width = 100, - Height = 50, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; - + Fill = "#6495ED", + StrokeColor = "white" + } + }; nodes.Add(node1); - Node node2 = new Node() + { + ID = "node2", + OffsetX = 250, + OffsetY = 180, + Width = 100, + Height = 50, + Style = new ShapeStyle() { - ID = "node2", - OffsetX = 250, - OffsetY = 180, - Width = 100, - Height = 50, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; - + Fill = "#6495ED", + StrokeColor = "white" + } + }; nodes.Add(node2); - Node node3 = new Node() - + { + ID = "node3", + OffsetX = 250, + OffsetY = 260, + Width = 100, + Height = 50, + Style = new ShapeStyle() { - ID = "node3", - OffsetX = 250, - OffsetY = 260, - Width = 100, - Height=50, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; nodes.Add(node3); - Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - Type = ConnectorSegmentType.Straight - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight + }; connectors.Add(connector1); - Connector connector2 = new Connector() - { - ID = "connector2", - SourceID = "node2", - TargetID = "node3", - Type = ConnectorSegmentType.Straight - }; + { + ID = "connector2", + SourceID = "node2", + TargetID = "node3", + Type = ConnectorSegmentType.Straight + }; connectors.Add(connector2); - } - public void CanZoom() + + private void CanZoom() { diagram.FitToPage(Options); } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoMDXQThuHMAcI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -1584,8 +1589,8 @@ The following code example shows how to define a custom command. @code { // Reference to diagram. - SfDiagramComponent diagram; - DiagramObjectCollection command = new DiagramObjectCollection() + private SfDiagramComponent diagram; + private DiagramObjectCollection command = new DiagramObjectCollection() { new KeyboardCommand() { @@ -1597,9 +1602,9 @@ The following code example shows how to define a custom command. Name = "CustomUngroup", Gesture = new KeyGesture() { Key = DiagramKeys.U, Modifiers = ModifierKeys.Control } }, - }; + }; // Defines diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -1633,7 +1638,7 @@ The following code example shows how to define a custom command. nodes.Add(node2); } - public void CanExe(CommandKeyArgs args) + private void CanExe(CommandKeyArgs args) { args.CanExecute = true; } @@ -1641,7 +1646,7 @@ The following code example shows how to define a custom command. /// /// Custom command execution. /// - public void CommandExecute(CommandKeyArgs args) + private void CommandExecute(CommandKeyArgs args) { if (args.Gesture.Modifiers == ModifierKeys.Control && args.Gesture.Key == DiagramKeys.G) { @@ -1687,10 +1692,10 @@ The following code example shows how to disable a command and how to modify the @code { // Reference to diagram. - SfDiagramComponent diagram; + private SfDiagramComponent diagram; // Defines diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection commands = new DiagramObjectCollection() + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection commands = new DiagramObjectCollection() { new KeyboardCommand() { @@ -1736,7 +1741,7 @@ The following code example shows how to disable a command and how to modify the nodes.Add(node2); } - public void CanExe(CommandKeyArgs args) + private void CanExe(CommandKeyArgs args) { args.CanExecute = true; } @@ -1744,7 +1749,7 @@ The following code example shows how to disable a command and how to modify the /// /// Custom command execution event. /// - public void CommandExecute(CommandKeyArgs args) + private void CommandExecute(CommandKeyArgs args) { if (args.Gesture.Modifiers == ModifierKeys.Control && args.Gesture.Key == DiagramKeys.A) { diff --git a/blazor/diagram/connectors/connectors.md b/blazor/diagram/connectors/connectors.md index 684b830cac..90d9ba37aa 100644 --- a/blazor/diagram/connectors/connectors.md +++ b/blazor/diagram/connectors/connectors.md @@ -34,9 +34,9 @@ The following code example illustrates how to add a connector through the connec @code { - SnapConstraints snapConstraints = SnapConstraints.None; + private SnapConstraints snapConstraints = SnapConstraints.None; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -71,20 +71,18 @@ Add a connector at runtime by adding it to the connectors collection in the Diag @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - - + @code { - //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Connector Connector = new Connector() - { + { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, @@ -93,10 +91,10 @@ Add a connector at runtime by adding it to the connectors collection in the Diag connectors.Add(Connector); } - public void AddConnector() + private void AddConnector() { Connector NewConnector = new Connector() - { + { ID = "connector2", SourcePoint = new DiagramPoint() { X = 300, Y = 300 }, TargetPoint = new DiagramPoint() { X = 400, Y = 400 }, @@ -120,27 +118,28 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @inject IJSRuntime js - + @functions { + private SfDiagramComponent diagram; + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); - SfDiagramComponent diagram; - public DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Connector connector1 = new Connector() { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 10 }, TargetPoint = new DiagramPoint() { X = 200, Y = 100 }, Type = ConnectorSegmentType.Straight }; Connectors.Add(connector1); } - public async Task CloneConnector() + + private async Task CloneConnector() { Connector connector = Connectors[0].Clone() as Connector; connector.ID = RandomId(); connector.SourcePoint = new DiagramPoint { X = 100, Y = 100 }; connector.TargetPoint = new DiagramPoint { X = 200, Y = 100 }; await diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { connector }); - } + internal string RandomId() { Random random = new Random(); @@ -150,7 +149,6 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn .Select(s => s[random.Next(s.Length)]).ToArray()); #pragma warning restore CA5394 // Do not use insecure randomness } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LjVSCZtHgnwMnRkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -168,22 +166,20 @@ The following code explains how to add a connector with annotation at runtime b @using Syncfusion.Blazor.Buttons - + @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - - DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); - + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); private SfDiagramComponent Diagram; protected override void OnInitialized() { Connector Connector = new Connector() - { + { ID = "connector1", SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, @@ -192,15 +188,15 @@ The following code explains how to add a connector with annotation at runtime b connectors.Add(Connector); } - public async void AddConnector() + private async void AddConnector() { Connector NewConnector = new Connector() - { + { ID = "connector2", SourcePoint = new DiagramPoint() { X = 300, Y = 300 }, TargetPoint = new DiagramPoint() { X = 400, Y = 400 }, Type = ConnectorSegmentType.Straight, - Annotations=new DiagramObjectCollection() + Annotations = new DiagramObjectCollection() { new PathAnnotation() { @@ -209,7 +205,7 @@ The following code explains how to add a connector with annotation at runtime b }, }; NodeCollection.Add(NewConnector); - await Diagram.AddDiagramElementsAsync(NodeCollection); + await Diagram.AddDiagramElementsAsync(NodeCollection); } } ``` @@ -228,15 +224,16 @@ Connectors can be predefined and added to the symbol palette. Then, drag and dro - + @code { - SfSymbolPaletteComponent PaletteInstance; - SfDiagramComponent DiagramInstance; + private SfSymbolPaletteComponent PaletteInstance; + private SfDiagramComponent DiagramInstance; //Defines Symbol palette's PaletteConnector collection. - DiagramObjectCollection PaletteConnector = new DiagramObjectCollection(); - DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection PaletteConnector = new DiagramObjectCollection(); + private DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override async Task OnAfterRenderAsync(bool firstRender) { @@ -244,8 +241,6 @@ Connectors can be predefined and added to the symbol palette. Then, drag and dro PaletteInstance.Targets.Add(DiagramInstance); } - DiagramObjectCollection connectors = new DiagramObjectCollection(); - protected override void OnInitialized() { Connector Connector = new Connector() @@ -264,7 +259,7 @@ Connectors can be predefined and added to the symbol palette. Then, drag and dro ID = "Link1", Type = ConnectorSegmentType.Straight, SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, - TargetPoint = new DiagramPoint() { X = 60, Y = 60 } + TargetPoint = new DiagramPoint() { X = 60, Y = 60 } }; PaletteConnector.Add(connector as NodeBase); Connector connector2 = new Connector @@ -274,7 +269,7 @@ Connectors can be predefined and added to the symbol palette. Then, drag and dro SourcePoint = new DiagramPoint() { X = 0, Y = 0 }, TargetPoint = new DiagramPoint() { X = 60, Y = 60 }, TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.OpenArrow }, - Style = new ShapeStyle() { StrokeWidth =1} + Style = new ShapeStyle() { StrokeWidth = 1 } }; PaletteConnector.Add(connector2 as NodeBase); Connector connector3 = new Connector @@ -315,37 +310,40 @@ The following code shows how to remove a connector at runtime. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - -@code { + +@code +{ //Defines snap consttraints - SnapConstraints snapConstraints = SnapConstraints.None; + private SnapConstraints snapConstraints = SnapConstraints.None; //Defines diagram's connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { 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 = 200, Y = 200 }, + TargetDecorator = new DecoratorSettings() { - ID = "connector1", - // Set the source and target point of the connector - SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, - TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, - TargetDecorator = new DecoratorSettings() - { - Shape = DecoratorShape.Arrow, - // Style of the connector segment - Style = new ShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 } - }, - Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, - // Type of the connector - Type = ConnectorSegmentType.Straight, - }; + Shape = DecoratorShape.Arrow, + // Style of the connector segment + Style = new ShapeStyle() { Fill = "#6f409f", StrokeColor = "#6f409f", StrokeWidth = 1 } + }, + Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); } - public void RemoveConnector() + + private void RemoveConnector() { // Remove connector at runtime connectors.Remove(connectors[0]); @@ -359,7 +357,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn A connector can also be removed from the diagram by using the native `RemoveAt` method. Refer to the following example that shows how to remove the connector at runtime. ```cshtml -public void RemoveConnector() +private void RemoveConnector() { connectors.RemoveAt(0); } @@ -375,18 +373,20 @@ The following code example explains how to change the connector properties. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - -@code { + +@code +{ //Reference the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Defines the snap constraints - SnapConstraints snapConstraints = SnapConstraints.None; + private SnapConstraints snapConstraints = SnapConstraints.None; //Defines diagram's connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Connector Connector = new Connector() @@ -401,6 +401,7 @@ The following code example explains how to change the connector properties. }; connectors.Add(Connector); } + //Method to update connector at runtime. public void UpdateConnector() { @@ -430,20 +431,19 @@ The following code example illustrates how to connect two nodes. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { nodes = new DiagramObjectCollection() { - new Node() + new Node() { OffsetX = 100, OffsetY = 100, @@ -510,18 +510,17 @@ The following code example illustrates how to create port to port connections. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes = new DiagramObjectCollection() + nodes = new DiagramObjectCollection() { new Node() { @@ -564,7 +563,7 @@ The following code example illustrates how to create port to port connections. }, Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED" }, Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - } + } }; Connector Connector = new Connector() { diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md index f5c2894be5..55f4b15b18 100644 --- a/blazor/diagram/connectors/customization.md +++ b/blazor/diagram/connectors/customization.md @@ -28,13 +28,12 @@ To learn more about connector customization, watch the following video: ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -87,12 +86,11 @@ The following code example illustrates how to customize the decorator appearance ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -135,7 +133,6 @@ The following code example illustrates how to customize the decorator appearance StrokeWidth = 3 } } - }; connectors.Add(Connector); } @@ -160,22 +157,21 @@ Padding adds space between the connector’s end point and the object to where i ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Defines diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes = new DiagramObjectCollection() + nodes = new DiagramObjectCollection() { - new Node() - { + new Node() + { OffsetX = 100, OffsetY = 100, Height = 50, @@ -183,9 +179,9 @@ Padding adds space between the connector’s end point and the object to where i ID = "node1", Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }, Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }, - new Node() - { + }, + new Node() + { OffsetX = 300, OffsetY = 300, Height = 50, @@ -193,7 +189,7 @@ Padding adds space between the connector’s end point and the object to where i ID = "node2", Style = new ShapeStyle(){ Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }, Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - } + } }; Connector Connector = new Connector() { @@ -238,13 +234,12 @@ The following code example illustrates how to enable line bridging. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -261,7 +256,8 @@ The following code example illustrates how to enable line bridging. }, SourcePoint = new DiagramPoint() { - X = 200 , Y = 200 + X = 200, + Y = 200 }, TargetPoint = new DiagramPoint() { @@ -271,7 +267,7 @@ The following code example illustrates how to enable line bridging. Type = ConnectorSegmentType.Orthogonal, TargetDecorator = new DecoratorSettings() { - Shape = DecoratorShape.Arrow , + Shape = DecoratorShape.Arrow, Style = new ShapeStyle() { Fill = "#6495ED", @@ -335,12 +331,11 @@ Corner radius rounds the corners of connectors. Set the radius using the [Corner ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -404,12 +399,11 @@ The following code example illustrates how to customize the segment appearance. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -463,12 +457,11 @@ The following code illustrates how to disable selection. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -519,12 +512,11 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -587,9 +579,9 @@ The following code illustrates how to render a connector based on stack order. @code { - SnapConstraints snapConstraints = SnapConstraints.None; + private SnapConstraints snapConstraints = SnapConstraints.None; //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -632,9 +624,9 @@ The following code illustrates how to set hit padding for a connector. @code { - SnapConstraints snapConstraints = SnapConstraints.None; + private SnapConstraints snapConstraints = SnapConstraints.None; //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -670,8 +662,8 @@ The following code example illustrates how to leave space between the connection @code { - DiagramObjectCollection nodes= new DiagramObjectCollection(); - DiagramObjectCollection connectors= new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -682,7 +674,7 @@ The following code example illustrates how to leave space between the connection Height = 100, OffsetX = 300, OffsetY = 300, - + }; nodes.Add(node1); Node node2 = new Node() @@ -700,7 +692,7 @@ The following code example illustrates how to leave space between the connection SourceID = "node1", TargetID = "node2", TargetPadding = 10, - SourcePadding = 10, + SourcePadding = 10, }; connectors.Add(connector1); } @@ -723,8 +715,8 @@ The following code example illustrates how to set connection padding for a conne @code { - DiagramObjectCollection nodes= new DiagramObjectCollection(); - DiagramObjectCollection connectors= new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -735,7 +727,7 @@ The following code example illustrates how to set connection padding for a conne Height = 100, OffsetX = 300, OffsetY = 300, - + }; nodes.Add(node1); Node node2 = new Node() @@ -752,7 +744,7 @@ The following code example illustrates how to set connection padding for a conne ID = "connector1", SourceID = "node1", TargetID = "node2", - ConnectionPadding = 50, + ConnectionPadding = 50, }; connectors.Add(connector1); } @@ -770,71 +762,77 @@ When a node is dropped on a point-to-point connection, it connects as the source The following code illustrates how to enable connector splitting and create connections with a new node. ```cshtml @using Syncfusion.Blazor.Diagram - - -@code { + + +@code +{ //Reference the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; // Initialize diagram's connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); // Initialize diagram's node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { - nodes = new DiagramObjectCollection() { - new Node() { OffsetX = 100, - OffsetY = 100, - Height = 50, - Width = 100, - ID = "node1", - Style = new ShapeStyle(){ Fill = "#6495ED", - StrokeColor = "#6495ED",}, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }, - new Node() { OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - ID = "node2", - Style = new ShapeStyle(){ Fill = "#6495ED", - StrokeColor = "#6495ED",}, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }, - new Node() { OffsetX = 300, - OffsetY = 100, - Height = 50, - Width = 100, - ID = "node3", - Style = new ShapeStyle(){ Fill = "#6495ED", - StrokeColor = "#6495ED",}, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - } + nodes = new DiagramObjectCollection() + { + new Node() + { + OffsetX = 100, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node1", + Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() + { + OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }, + new Node() + { + OffsetX = 300, + OffsetY = 100, + Height = 50, + Width = 100, + ID = "node3", + Style = new ShapeStyle(){ Fill = "#6495ED", StrokeColor = "#6495ED",}, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + } }; Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + TargetDecorator = new DecoratorSettings() { - ID = "connector1", - //Source node id of the connector. - SourceID = "node1", - TargetDecorator = new DecoratorSettings() - { - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "#6495ED", - } - }, - //Target node id of the connector. - TargetID = "node2", Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", - }, - // Type of the connector - Type = ConnectorSegmentType.Straight, - Constraints = ConnectorConstraints.Default | ConnectorConstraints.AllowDrop, - }; + } + }, + //Target node id of the connector. + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.AllowDrop, + }; connectors.Add(Connector); } } @@ -854,13 +852,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - - + -@code { +@code +{ private SfDiagramComponent? diagram; private DiagramObjectCollection connectors = new DiagramObjectCollection(); - + protected override void OnInitialized() { // Create orthogonal connector with custom segments and styling. @@ -915,17 +913,17 @@ The following example demonstrates how to update the `MaxSegmentThumbs` value at
- +
- - + -@code { +@code +{ private SfDiagramComponent? diagram; private DiagramObjectCollection connectors = new DiagramObjectCollection(); - + protected override void OnInitialized() { // Create orthogonal connector with custom segments and styling. @@ -963,7 +961,7 @@ The following example demonstrates how to update the `MaxSegmentThumbs` value at }; connectors.Add(orthogonalConnector); } - + // Updates MaxSegmentThumbs to 5 for all currently selected connectors at runtime. private void UpdateSelectedConnectorThumbs() { @@ -976,7 +974,7 @@ The following example demonstrates how to update the `MaxSegmentThumbs` value at } } } - + // Updates MaxSegmentThumbs to 6 for all connectors in the diagram at runtime. private void UpdateAllConnectorThumbs() { @@ -990,7 +988,6 @@ The following example demonstrates how to update the `MaxSegmentThumbs` value at } } } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoCDtRUlyaTMHD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/diagram/connectors/events.md b/blazor/diagram/connectors/events.md index 2571ecb860..0a5a3402ad 100644 --- a/blazor/diagram/connectors/events.md +++ b/blazor/diagram/connectors/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Syncfusion Blazor Diagram Component | Syncfusion +title: Event in Syncfusion Blazor Diagram Component | Syncfusion description: Checkout and learn here all about Connector Events in Syncfusion Blazor Diagram component and much more details. platform: Blazor control: Diagram Component documentation: ug --- -# Events in Diagram Component +# Connector Events in Diagram Component ## How to Handle Selection Change Event @@ -24,15 +24,14 @@ The following code example explains how to get the selection change event in the ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Reference the diagram. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -70,10 +69,10 @@ The following code example explains how to get the selection change event in the } // To notify the selection changing event before selecting/unselecting the diagram elements. - public void OnSelectionChanging(SelectionChangingEventArgs args) + private void OnSelectionChanging(SelectionChangingEventArgs args) { - //Sets true to cancel the selection. - args.Cancel = true; + //Sets true to cancel the selection. + args.Cancel = true; } // To notify the selection is changed in the diagram. @@ -99,15 +98,14 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Reference the diagram. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -145,10 +143,10 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn } // To notify the position changing event before dragging the diagram elements. - public void OnPositionChanging(PositionChangingEventArgs args) + private void OnPositionChanging(PositionChangingEventArgs args) { - //Sets true to cancel the dragging. - args.Cancel = true; + //Sets true to cancel the dragging. + args.Cancel = true; } // To notify the position changed event after dragging the diagram elements. @@ -174,30 +172,29 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Reference the diagram. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Initialize the diagram's nodes collection + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { nodes = new DiagramObjectCollection() - { - new Node() - { + { + new Node() + { OffsetX = 100, OffsetY = 100, Height = 50, Width = 100, ID = "node1", - }, + } }; Connector Connector = new Connector() { @@ -257,17 +254,16 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Reference the diagram. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -318,43 +314,42 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Reference the diagram. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Connector Connector = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { - ID = "connector1", - SourcePoint = new DiagramPoint() - { - X = 200, - Y = 200 - }, - TargetPoint = new DiagramPoint() - { - X = 300, - Y = 400, - } - }; + X = 200, + Y = 200 + }, + TargetPoint = new DiagramPoint() + { + X = 300, + Y = 400, + } + }; connectors.Add(Connector); } - // Notify the target point changed event before the target point has changed. private void OnTargetPointChanging(EndPointChangingEventArgs args) { //Action to be performed. } + // Notify the target point changed event after the target point has changed. private void OnTargetPointChanged(EndPointChangedEventArgs args) { @@ -374,14 +369,12 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - + @code { // Define the connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -404,8 +397,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn connectors.Add(Connector); } - public void OnConnectorCreating(IDiagramObject args) - { + private void OnConnectorCreating(IDiagramObject args) + { Connector connector = args as Connector; connector.Style.Fill = "black"; connector.Style.StrokeColor = "black"; @@ -426,14 +419,12 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - + @code { // Define the connector collection. - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -456,9 +447,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn connectors.Add(Connector); } - public void SegmentCollectionChange(SegmentCollectionChangeEventArgs args) - { - + private void SegmentCollectionChange(SegmentCollectionChangeEventArgs args) + { + } } ``` @@ -479,19 +470,18 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - -@code{ - SfDiagramComponent Diagram; + + + +@code +{ + private SfDiagramComponent Diagram; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { - Connector Connector = new Connector() + Connector Connector = new Connector() { ID = "connector1", // Set the source and target point of the connector. @@ -502,7 +492,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn }; connectors.Add(Connector); } - // Notify the Collection Changed event while changing the collection of the connector at run time. + + // Notify the Collection Changed event while changing the collection of the connector at run time. private void OnCollectionChanged(CollectionChangedEventArgs args) { //Action to be performed. @@ -520,19 +511,18 @@ The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram ```cshtml @using Syncfusion.Blazor.Diagram - - -@code{ - SfDiagramComponent Diagram; + + + +@code +{ + private SfDiagramComponent Diagram; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { - Connector Connector = new Connector() + Connector Connector = new Connector() { ID = "connector1", // Set the source and target point of the connector. @@ -543,6 +533,7 @@ The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram }; connectors.Add(Connector); } + private void OnMouseEnter(DiagramElementMouseEventArgs args) { } @@ -559,19 +550,18 @@ The [MouseLeave](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/t ```cshtml @using Syncfusion.Blazor.Diagram - - -@code{ - SfDiagramComponent Diagram; + + + +@code +{ + private SfDiagramComponent Diagram; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { - Connector Connector = new Connector() + Connector Connector = new Connector() { ID = "connector1", // Set the source and target point of the connector. @@ -582,6 +572,7 @@ The [MouseLeave](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/t }; connectors.Add(Connector); } + private void OnMouseLeave(DiagramElementMouseEventArgs args) { } @@ -598,19 +589,18 @@ The [MouseHover](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/t ```cshtml @using Syncfusion.Blazor.Diagram - - -@code{ - SfDiagramComponent Diagram; + + + +@code +{ + private SfDiagramComponent Diagram; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { - Connector Connector = new Connector() + Connector Connector = new Connector() { ID = "connector1", // Set the source and target point of the connector. @@ -621,6 +611,7 @@ The [MouseHover](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/t }; connectors.Add(Connector); } + private void OnMouseHover(DiagramElementMouseEventArgs args) { } @@ -636,19 +627,18 @@ The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D ```cshtml @using Syncfusion.Blazor.Diagram - - -@code { - SfDiagramComponent diagram; + + + +@code +{ + private SfDiagramComponent diagram; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { - Connector Connector = new Connector() + Connector Connector = new Connector() { ID = "connector1", // Set the source and target point of the connector. @@ -659,6 +649,7 @@ The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.D }; connectors.Add(Connector); } + // Method to handle Property Changed event private void OnNodePropertyChanged(PropertyChangedEventArgs args) { diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md index 2d0daa2e74..2fb115e7fa 100644 --- a/blazor/diagram/connectors/interactions.md +++ b/blazor/diagram/connectors/interactions.md @@ -1,6 +1,6 @@ --- layout: post -title: Interaction in Syncfusion Blazor Diagram Component | Syncfusion +title: Interactions in Syncfusion Blazor Diagram Component | Syncfusion description: Checkout and learn here all about connector interaction in Blazor Diagram component and much more details. platform: Blazor control: Diagram Component @@ -22,13 +22,12 @@ At runtime, a connector can be selected by using the [Select](https://help.syncf - - + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -68,13 +67,13 @@ At runtime, a connector can be selected by using the [Select](https://help.syncf connectors.Add(Connector); } - public void OnSelect() + private void OnSelect() { // Select the Connector. Diagram.Select(new ObservableCollection { Diagram.GetObject(Diagram.Connectors[0].ID) as IDiagramObject }); } - public void UnSelect() + private void UnSelect() { // Clear selection in the diagram. Diagram.ClearSelection(); @@ -99,13 +98,12 @@ A connector can be programmatically moved at runtime by using the [Drag](https:/ @using Syncfusion.Blazor.Buttons - - + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -145,7 +143,7 @@ A connector can be programmatically moved at runtime by using the [Drag](https:/ connectors.Add(Connector); } - public void OnDrag() + private void OnDrag() { // Drag the connector. Diagram.Drag(Diagram.Connectors[0], 10, 10); @@ -170,13 +168,12 @@ The connector can be selected by clicking it. When the connector is selected, ci ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -232,17 +229,17 @@ Routing is the process of adjusting the geometry of connectors to prevent them f ```cshtml @using Syncfusion.Blazor.Diagram - - -@code -{ + + +@code +{ // Enable routing constraints for diagram. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; // Intialize the node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); // Intialize the connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection() @@ -283,19 +280,20 @@ The [Classic](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ro @using Syncfusion.Blazor.Diagram - + -@code + +@code { // Set the type of the routing - RoutingTypes routingTypes = RoutingTypes.Classic; + private RoutingTypes routingTypes = RoutingTypes.Classic; // Enable routing constraints for diagram. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; // Intialize the node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); // Intialize the connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection() @@ -327,21 +325,22 @@ The [Advanced](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.R @using Syncfusion.Blazor.Diagram - + -@code + +@code { // Set the type of the routing - RoutingTypes routingTypes = RoutingTypes.Advanced; + private RoutingTypes routingTypes = RoutingTypes.Advanced; // Set the padding for the obstable - double padding = 20; + private double padding = 20; // Enable routing constraints for diagram. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; // Intialize the node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); // Intialize the connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection() @@ -377,14 +376,16 @@ By default, connectors treat all nodes as obstacles, causing connections to navi + @code { // Enable routing constraints for the diagram. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; // Intialize the node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); // Intialize the connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection() @@ -403,6 +404,7 @@ By default, connectors treat all nodes as obstacles, causing connections to navi } }; } + private void OnNodeCreating(IDiagramObject obj) { if (obj is Node node) @@ -410,16 +412,17 @@ By default, connectors treat all nodes as obstacles, causing connections to navi node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; } } + private void OnConnectorCreating(IDiagramObject obj) { if (obj is Connector connector) { connector.Style = new ShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 }; connector.TargetDecorator = new DecoratorSettings() - { - Shape = DecoratorShape.Arrow, - Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } - }; + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } + }; } } } @@ -440,14 +443,16 @@ By default, connector routing behavior is inherited based on the value of the di + @code { // Enable routing constraints for the diagram. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; //Intialize the node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Intialize the connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection() @@ -458,7 +463,8 @@ By default, connector routing behavior is inherited based on the value of the di new Node() { ID = "Target2", OffsetX = 490, OffsetY = 250, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Target2" } } }, new Node() { ID = "Obstacle", OffsetX = 291, OffsetY = 300, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Obstacle" } }, }, }; - connectors = new DiagramObjectCollection(){ + connectors = new DiagramObjectCollection() + { new Connector() { ID = "connector1", @@ -479,6 +485,7 @@ By default, connector routing behavior is inherited based on the value of the di } }; } + private void OnNodeCreating(IDiagramObject obj) { if (obj is Node node) @@ -486,16 +493,17 @@ By default, connector routing behavior is inherited based on the value of the di node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7" }; } } + private void OnConnectorCreating(IDiagramObject obj) { if (obj is Connector connector) { connector.Style = new ShapeStyle() { StrokeColor = "#6BA5D7", StrokeWidth = 1 }; connector.TargetDecorator = new DecoratorSettings() - { - Shape = DecoratorShape.Arrow, - Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } - }; + { + Shape = DecoratorShape.Arrow, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "#6BA5D7", StrokeWidth = 1 } + }; } } } @@ -514,21 +522,22 @@ The [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di @using Syncfusion.Blazor.Diagram - + -@code + +@code { // Set the type of the routing - RoutingTypes routingTypes = RoutingTypes.Advanced; + private RoutingTypes routingTypes = RoutingTypes.Advanced; // Set the padding for the obstable - double padding = 20; + private double padding = 20; // Enable routing constraints for diagram. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing; // Intialize the node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); // Intialize the connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection() @@ -537,9 +546,9 @@ The [ObstaclePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di new Node() { ID = "node2", OffsetX = 430, OffsetY = 130, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Target" } } }, new Node() { ID = "node3", OffsetX = 430, OffsetY = 250, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Obstacle 1" } } }, new Node() { ID = "node4", OffsetX = 150, OffsetY = 90, Width = 100, Height = 100, Annotations= new DiagramObjectCollection(){ new ShapeAnnotation() { Content="Obstacle 2" } } } - }; - connectors = new DiagramObjectCollection(){ + connectors = new DiagramObjectCollection() + { new Connector() { ID = "connector1", @@ -571,20 +580,19 @@ Enable this behavior by adding the [AvoidLineOverlapping](https://help.syncfusio ```cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Diagram + -@code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - SnapConstraints snapConstraints = SnapConstraints.All; - DiagramInteractions DiagramInteractions = DiagramInteractions.ZoomPan; - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing | DiagramConstraints.AvoidLineOverlapping; - LineRoutingSettings LineRoutingSettings = new LineRoutingSettings() - { - RoutingType = RoutingTypes.Classic - }; +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SnapConstraints snapConstraints = SnapConstraints.All; + private DiagramInteractions DiagramInteractions = DiagramInteractions.ZoomPan; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing | DiagramConstraints.AvoidLineOverlapping; + private LineRoutingSettings LineRoutingSettings = new LineRoutingSettings(){ RoutingType = RoutingTypes.Classic }; } ``` ![Blazor Diagram Avoid Line Overlapping](../images/AvoidLineOverlapGif.gif) @@ -599,22 +607,19 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i ```cshtml - @using Syncfusion.Blazor @using Syncfusion.Blazor.Diagram - - + -@code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing | DiagramConstraints.AvoidLineOverlapping; - LineRoutingSettings LineRoutingSettings = new LineRoutingSettings() - { - RoutingType = RoutingTypes.Classic - }; +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Routing | DiagramConstraints.AvoidLineOverlapping; + private LineRoutingSettings LineRoutingSettings = new LineRoutingSettings(){ RoutingType = RoutingTypes.Classic }; + protected override void OnInitialized() { InitDiagramModel(); @@ -642,13 +647,11 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i CreateConnector("connector06", "node3", "node5", 4, 8); CreateConnector("connector07", "node5", "node4", 4, 8, "lightGreen"); CreateConnector("connector08", "node4", "node6", 4, 8); - CreateConnector("connector1", "node1", "node3", 0, 0); CreateConnector("connector2", "node1", "node3", 1, 1); CreateConnector("connector3", "node1", "node3", 2, 2); CreateConnector("connector4", "node1", "node3", 3, 3); CreateConnector("connector5", "node1", "node5", 4, 0, "lightGreen"); - CreateConnector("connector6", "node1", "node5", 5, 1); CreateConnector("connector7", "node1", "node5", 6, 2); CreateConnector("connector8", "node1", "node5", 7, 3, "lightGreen"); @@ -656,7 +659,6 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i CreateConnector("connector10", "node1", "node4", 9, 1, "lightGreen"); CreateConnector("connector11", "node1", "node4", 10, 2); CreateConnector("connector12", "node1", "node4", 11, 3, "lightGreen"); - CreateConnector("connector13", "node1", "node6", 12, 0); CreateConnector("connector14", "node1", "node6", 13, 1, "lightGreen"); CreateConnector("connector15", "node1", "node6", 14, 2, "lightGreen"); @@ -695,27 +697,29 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i CreateConnector("connector48", "node6", "node7", 3, 15, "lightGreen"); } - public void Create1to16Node(string id, double x, double y, double width, double height) + private void Create1to16Node(string id, double x, double y, double width, double height) { Node node = CreateNode(id, x, y, width, height); AddShape(node, 1, 16); - var inPorts = AddPorts(node, 1, "in"); - var outPorts = AddPorts(node, 16, "out"); + + DiagramObjectCollection inPorts = AddPorts(node, 1, "in"); + DiagramObjectCollection outPorts = AddPorts(node, 16, "out"); + AddPortsLabels(node, 16, "out"); } - public void Create16to1Node(string id, double x, double y, double width, double height) + private void Create16to1Node(string id, double x, double y, double width, double height) { Node node = CreateNode(id, x, y, width, height); AddShape(node, 16, 1); - var inPorts = AddPorts(node, 16, "in"); - var outPorts = AddPorts(node, 1, "out"); + DiagramObjectCollection inPorts = AddPorts(node, 16, "in"); + DiagramObjectCollection outPorts = AddPorts(node, 1, "out"); AddPortsLabels(node, 16, "in"); } - public void Create9to5Node(string id, double x, double y, double width, double height) + private void Create9to5Node(string id, double x, double y, double width, double height) { List leftLabels = new List { "A_0", "A_1", "A_2", "A_3", "B_0", "B_1", "B_2", "B_3", "Cin" }; List rightLabels = new List { "S_0", "S_1", "S_2", "S_3", "Cout" }; @@ -723,24 +727,23 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i Node node = CreateNode(id, x, y, width, height, "4 Bit\nRCA"); AddShape(node, 9, 5); - var inPorts = AddPorts(node, 9, "in"); - var outPorts = AddPorts(node, 5, "out", 9); - + DiagramObjectCollection inPorts = AddPorts(node, 9, "in"); + DiagramObjectCollection outPorts = AddPorts(node, 5, "out", 9); AddPortsLabels(node, 9, "in", leftLabels); AddPortsLabels(node, 5, "out", rightLabels, 9); } - public void CreateInputNode(string id, double x, double y, double width, double height, string label) + private void CreateInputNode(string id, double x, double y, double width, double height, string label) { Node node = CreateNode(id, x, y, width, height, label); AddShape(node, 0, 1); - var outPorts = AddPorts(node, 1, "out"); + DiagramObjectCollection outPorts = AddPorts(node, 1, "out"); if (node.Annotations.Count > 0) { - var annotation = node.Annotations[0]; + ShapeAnnotation annotation = node.Annotations[0]; annotation.Offset = new DiagramPoint { X = (width - 25) / (2 * width), @@ -749,16 +752,16 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i } } - public void CreateOutputNode(string id, double x, double y, double width, double height, string label) + private void CreateOutputNode(string id, double x, double y, double width, double height, string label) { Node node = CreateNode(id, x, y, width, height, label); AddShape(node, 1, 0); - var inPorts = AddPorts(node, 1, "in"); + DiagramObjectCollection inPorts = AddPorts(node, 1, "in"); if (node.Annotations.Count > 0) { - var annotation = node.Annotations[0]; + ShapeAnnotation annotation = node.Annotations[0]; annotation.Offset = new DiagramPoint { X = 1 - ((width - 25) / (2 * width)), @@ -767,7 +770,7 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i } } - public void AddShape(Node node, int inCount, int outCount) + private void AddShape(Node node, int inCount, int outCount) { int maxCount = Math.Max(inCount, outCount); double? rightX = outCount == 0 ? node.Width : node.Width - 25; @@ -804,24 +807,22 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i pathData += $"L {leftX} 0 Z"; node.Shape = new PathShape { Type = NodeShapes.Path, Data = pathData }; - } - public DiagramObjectCollection AddPorts(Node node, int count, string side, double factor = 0) + private DiagramObjectCollection AddPorts(Node node, int count, string side, double factor = 0) { - if (factor == 0) { factor = count; } + DiagramObjectCollection Ports = new DiagramObjectCollection(); - if (count > 1) { for (int i = 1; i <= count; i++) { - var port = new PointPort + PointPort port = new PointPort { ID = $"{node.ID}{side}{i - 1}", Offset = new DiagramPoint @@ -840,7 +841,7 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i } else { - var port = new PointPort + PointPort port = new PointPort { ID = $"{node.ID}{side}0", Offset = new DiagramPoint @@ -853,28 +854,26 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i Style = new ShapeStyle { Fill = "black" }, Width = 8, Height = 8, - }; node.Ports.Add(port); } - return Ports; } - public void AddPortsLabels(Node node, int count, string side, List labels = null, double factor = 0) + private void AddPortsLabels(Node node, int count, string side, List labels = null, double factor = 0) { if (factor == 0) { factor = count; } - DiagramObjectCollection Annotations = new DiagramObjectCollection(); + DiagramObjectCollection Annotations = new DiagramObjectCollection(); double width = node.Width ?? 0.0; // Provide a default value to avoid null double x = side == "out" ? (width - 25 * 0.5) / width : (25 * 0.5) / width; for (int i = 1; i <= count; i++) { - var label = new ShapeAnnotation + ShapeAnnotation label = new ShapeAnnotation { Content = labels != null ? labels[i - 1] : $"{i - 1}", Offset = new DiagramPoint @@ -884,17 +883,17 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i }, Style = new TextStyle { FontSize = 7 }, VerticalAlignment = VerticalAlignment.Bottom, - Margin = new DiagramThickness { Bottom = 2 } + Margin = new DiagramThickness { Bottom = 2 } }; node.Annotations.Add(label); } } - public Node CreateNode(string id, double x, double y, double width, double height, string label = null) + private Node CreateNode(string id, double x, double y, double width, double height, string label = null) { - var shapeStyle = new ShapeStyle { StrokeColor = "black", StrokeWidth = 2 }; + ShapeStyle shapeStyle = new ShapeStyle { StrokeColor = "black", StrokeWidth = 2 }; - var diagramNode = new Node + Node diagramNode = new Node { ID = id, OffsetX = x, @@ -907,7 +906,7 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i if (!string.IsNullOrEmpty(label)) { - var annotation = new ShapeAnnotation + ShapeAnnotation annotation = new ShapeAnnotation { Content = label, Style = new TextStyle { FontSize = 14 } @@ -919,9 +918,10 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i return diagramNode; } - public void CreateConnector(string id, string sourceId, string targetId, int sourcePortIndex, int targetPortIndex, string strokeColor = null) + private void CreateConnector(string id, string sourceId, string targetId, int sourcePortIndex, int targetPortIndex, string strokeColor = null) { string color = !string.IsNullOrEmpty(strokeColor) ? strokeColor : "green"; + if (color == "lightGreen") { color = "#1AD81A"; @@ -931,7 +931,7 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i color = "#005100"; } - var diagramConnector = new Connector + Connector diagramConnector = new Connector { ID = id, CornerRadius = 5, @@ -945,7 +945,6 @@ The following example demonstrates enabling the `AvoidLineOverlapping` feature i }; connectors.Add(diagramConnector); } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSsjjxpKTfTUFP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/diagram/connectors/segments/bezier/bezier.md b/blazor/diagram/connectors/segments/bezier/bezier.md index 1c5b351beb..c69508f71b 100644 --- a/blazor/diagram/connectors/segments/bezier/bezier.md +++ b/blazor/diagram/connectors/segments/bezier/bezier.md @@ -16,13 +16,12 @@ Bezier segments are used to create curved connectors. The curve can be configure ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Defines diagram's connector collection. + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -55,7 +54,7 @@ Bezier segments are used to create curved connectors. The curve can be configure ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreiNjHgpdAoFCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/Bezier). ![Connector with Bezier Segment in Blazor Diagram](../../../images/blazor-diagram-connector-with-bezier.png) @@ -94,8 +93,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn }; //Add the connector into connectors's collection. connectors.Add(Connector1); - Connector Connector2 = new Connector() - { + Connector Connector2 = new Connector() + { ID = "Connector2", Type = ConnectorSegmentType.Bezier, SourcePoint = new DiagramPoint { X = 200, Y = 100 }, @@ -138,57 +137,56 @@ By default, when there are no segments defined for a bezier connector, the bezie @code { //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Define the diagram's node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes.Add( - new Node() + nodes.Add(new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() { - ID = "node1", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() - { - new PointPort() - { - ID="Port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 1, Y = 0.5 }, - }, - } - }); + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + }, + } + }); nodes.Add(new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 350, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() { - ID = "node2", - OffsetX = 300, - OffsetY = 350, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() + new PointPort() { - new PointPort() - { - ID="Port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 0, Y = 0.5 }, - }, - } - }); + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + }, + } + }); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - SourcePortID = "Port1", - TargetPortID = "Port1", - Type = ConnectorSegmentType.Bezier, - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + SourcePortID = "Port1", + TargetPortID = "Port1", + Type = ConnectorSegmentType.Bezier, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb + }; connectors.Add(connector1); } } @@ -203,71 +201,71 @@ Also, if you provide segments during the initial rendering, the segment collecti ```cshtml @using Syncfusion.Blazor.Diagram - + -@code { +@code +{ //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Define the diagram's node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes.Add( - new Node() + nodes.Add(new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() { - ID = "node1", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() - { - new PointPort() - { - ID="Port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 1, Y = 0.5 }, - }, - } - }); + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + }, + } + }); nodes.Add(new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 350, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() { - ID = "node2", - OffsetX = 300, - OffsetY = 350, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() + new PointPort() { - new PointPort() - { - ID="Port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 0, Y = 0.5 }, - }, - } - }); + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + }, + } + }); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - SourcePortID = "Port1", - TargetPortID = "Port1", - Type = ConnectorSegmentType.Bezier, - Segments = new DiagramObjectCollection(){new BezierSegment(){Type = ConnectorSegmentType.Bezier}}, - //Define whether to reset the current segments collection in response to change in the connector ends. - BezierConnectorSettings = new BezierConnectorSettings() { AllowSegmentsReset = false }, - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + SourcePortID = "Port1", + TargetPortID = "Port1", + Type = ConnectorSegmentType.Bezier, + Segments = new DiagramObjectCollection() { new BezierSegment() { Type = ConnectorSegmentType.Bezier } }, + //Define whether to reset the current segments collection in response to change in the connector ends. + BezierConnectorSettings = new BezierConnectorSettings() { AllowSegmentsReset = false }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb + }; connectors.Add(connector1); } } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZBSCDNnASCfNrtt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/BezierAllowSegmentsReset/BezierAllowSegmentsReset). ![Avoid overlapping with bezier](../../../images/bezierOverlap.png) @@ -301,35 +299,36 @@ The following code example illustrates how to create a customized bezier segment ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.Internal - -@code { + + + +@code +{ //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - //Define the segment shape - SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle }; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + //Define the segment shape + private SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle }; + protected override void OnInitialized() { Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, + SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond }, + Segments = new DiagramObjectCollection() { - ID = "connector", - SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, - TargetPoint = new DiagramPoint() { X = 300, Y =300 }, - SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond }, - Segments = new DiagramObjectCollection() - { - new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100} - , - }, - new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}} - }, - Type = ConnectorSegmentType.Bezier, - BezierConnectorSettings = new BezierConnectorSettings() - { - ControlPointsVisibility = ControlPointsVisibility.All - }, - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, - - }; + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100}}, + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}} + }, + Type = ConnectorSegmentType.Bezier, + BezierConnectorSettings = new BezierConnectorSettings() + { + ControlPointsVisibility = ControlPointsVisibility.All + }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, + }; connectors.Add(connector); } } @@ -345,33 +344,35 @@ The following code example illustrates how to create a customized bezier segment ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.Internal - -@code { + + + +@code +{ //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Connector connector = new Connector() + { + ID = "connector", + SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 300, Y = 300 }, + SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond }, + Segments = new DiagramObjectCollection() { - ID = "connector", - SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, - TargetPoint = new DiagramPoint() { X = 300, Y =300 }, - SourceDecorator = new DecoratorSettings() { Shape = DecoratorShape.Diamond }, - Segments = new DiagramObjectCollection() - { - new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100} - , - }, + new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 200, Y = 100}}, new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 260, Y = 150}} - }, - Type = ConnectorSegmentType.Bezier, - BezierConnectorSettings = new BezierConnectorSettings() - { - ControlPointsVisibility = ControlPointsVisibility.All - }, - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, - SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square}, - }; + }, + Type = ConnectorSegmentType.Bezier, + BezierConnectorSettings = new BezierConnectorSettings() + { + ControlPointsVisibility = ControlPointsVisibility.All + }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square }, + }; connectors.Add(connector); } } diff --git a/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md b/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md index d051ffbc6c..440f7eb3de 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md +++ b/blazor/diagram/connectors/segments/bezier/settings/controlpointinteraction.md @@ -36,10 +36,14 @@ The visibility of the Bezier segment's control points can be enabled or disabled ```cshtml @using Syncfusion.Blazor.Diagram + -@code { + +@code +{ //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Connector connector1 = new Connector() @@ -53,10 +57,10 @@ The visibility of the Bezier segment's control points can be enabled or disabled new BezierSegment(){Type = ConnectorSegmentType.Bezier, Point = new DiagramPoint(){X = 900, Y = 350}} }, Type = ConnectorSegmentType.Bezier, - BezierConnectorSettings = new BezierConnectorSettings() + BezierConnectorSettings = new BezierConnectorSettings() { - //Define the visibility of the control points. - ControlPointsVisibility = ControlPointsVisibility.Intermediate + //Define the visibility of the control points. + ControlPointsVisibility = ControlPointsVisibility.Intermediate }, }; connectors.Add(connector1); @@ -65,4 +69,4 @@ The visibility of the Bezier segment's control points can be enabled or disabled ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LtreMjDxKTeXVpUc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments). +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/BezierControlPointsVisibility). diff --git a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md index fe72efe2cd..58f5dadd73 100644 --- a/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md +++ b/blazor/diagram/connectors/segments/bezier/settings/segmenteditorientation.md @@ -23,68 +23,68 @@ The following code illustrates how to interact with Bezier efficiently by using ```cshtml @using Syncfusion.Blazor.Diagram - + -@code { +@code +{ //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Define the diagram's node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes.Add( - new Node() + nodes.Add(new Node() + { + ID = "node1", + OffsetX = 300, + OffsetY = 100, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() + { + new PointPort() { - ID = "node1", - OffsetX = 300, - OffsetY = 100, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() - { - new PointPort() - { - ID="Port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 1, Y = 0.5 }, - }, - } - }); + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + }, + } + }); nodes.Add(new Node() + { + ID = "node2", + OffsetX = 300, + OffsetY = 350, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() { - ID = "node2", - OffsetX = 300, - OffsetY = 350, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() + new PointPort() { - new PointPort() - { - ID="Port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 0, Y = 0.5 }, - }, - } - }); + ID="Port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + }, + } + }); Connector connector1 = new Connector() + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + SourcePortID = "Port1", + TargetPortID = "Port1", + Type = ConnectorSegmentType.Bezier, + BezierConnectorSettings = new BezierConnectorSettings() { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - SourcePortID = "Port1", - TargetPortID = "Port1", - Type = ConnectorSegmentType.Bezier, - BezierConnectorSettings = new BezierConnectorSettings() - { - //Define the smoothness for a bezier connector. - Smoothness = BezierSmoothness.SymmetricAngle, - //Define the orientation of the segment editing controls. - SegmentEditOrientation = BezierSegmentEditOrientation.FreeForm - }, - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb - }; + //Define the smoothness for a bezier connector. + Smoothness = BezierSmoothness.SymmetricAngle, + //Define the orientation of the segment editing controls. + SegmentEditOrientation = BezierSegmentEditOrientation.FreeForm + }, + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb + }; connectors.Add(connector1); } } diff --git a/blazor/diagram/connectors/segments/multiplesegments.md b/blazor/diagram/connectors/segments/multiplesegments.md index 4458c608af..7272dec3b9 100644 --- a/blazor/diagram/connectors/segments/multiplesegments.md +++ b/blazor/diagram/connectors/segments/multiplesegments.md @@ -23,7 +23,7 @@ Connectors can include a sequence of segment objects. To create a connector with @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { diff --git a/blazor/diagram/connectors/segments/orthogonal.md b/blazor/diagram/connectors/segments/orthogonal.md index 0b1f4881dd..3359335592 100644 --- a/blazor/diagram/connectors/segments/orthogonal.md +++ b/blazor/diagram/connectors/segments/orthogonal.md @@ -22,7 +22,7 @@ documentation: ug @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -36,7 +36,7 @@ documentation: ug }, Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, - //Specify the segments type as Orthogonal. + //Specify the segments type as Orthogonal. Type = ConnectorSegmentType.Orthogonal, TargetDecorator = new DecoratorSettings() { @@ -70,7 +70,7 @@ The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ort @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -88,18 +88,18 @@ The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Ort //Create a new segment with length and direction. Segments = new DiagramObjectCollection() { - new OrthogonalSegment + new OrthogonalSegment { Length = 100, Type = ConnectorSegmentType.Orthogonal, Direction = Direction.Right }, - new OrthogonalSegment + new OrthogonalSegment { Length = 100, Type = ConnectorSegmentType.Orthogonal, Direction = Direction.Bottom, - } + } }, TargetDecorator = new DecoratorSettings() { @@ -130,20 +130,20 @@ N> Ensure the connector type and each segment type are both set to **Orthogonal* ```cshtml @using Syncfusion.Blazor.Diagram - + @code { //Reference the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's node collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { - Connector Connector = new Connector() // Enable the segment editing. + Connector Connector = new Connector() { ID = "Connector2", Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, @@ -191,12 +191,15 @@ The following code example illustrates how to customize the orthogonal segment t ```cshtml @using Syncfusion.Blazor.Diagram - + + + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Connector Connector = new Connector() @@ -206,7 +209,7 @@ The following code example illustrates how to customize the orthogonal segment t Type = ConnectorSegmentType.Orthogonal, SourcePoint = new DiagramPoint { X = 400, Y = 100 }, TargetPoint = new DiagramPoint { X = 500, Y = 200 }, - SegmentThumbSettings = new SegmentThumbSettings() {Shape = SegmentThumbShapes.IndentedArrow} + SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.IndentedArrow } }; connectors.Add(Connector); } @@ -224,13 +227,15 @@ The following code example illustrates how to customize the orthogonal segment t ```cshtml @using Syncfusion.Blazor.Diagram - + + + @code { - SfDiagramComponent Diagram; - DiagramObjectCollection connectors = new DiagramObjectCollection(); - SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings(){Shape = SegmentThumbShapes.Fletch}; + private SfDiagramComponent Diagram; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SegmentThumbSettings segmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Fletch }; protected override void OnInitialized() { Connector Connector = new Connector() diff --git a/blazor/diagram/connectors/segments/straight.md b/blazor/diagram/connectors/segments/straight.md index 951dea63f9..ff8fdf7e94 100644 --- a/blazor/diagram/connectors/segments/straight.md +++ b/blazor/diagram/connectors/segments/straight.md @@ -16,13 +16,12 @@ To create a straight line, set the connector [Type](https://help.syncfusion.com/ ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -36,7 +35,7 @@ To create a straight line, set the connector [Type](https://help.syncfusion.com/ }, Style = new ShapeStyle() { StrokeColor = "#6f409f", StrokeWidth = 1 }, TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, - //Specify the segment type as straight. + //Specify the segment type as straight. Type = ConnectorSegmentType.Straight, TargetDecorator = new DecoratorSettings() { @@ -72,14 +71,14 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @code { //Reference the diagram. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Connector Connector = new Connector() - { + { ID = "Connector1", Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, SourcePoint = new DiagramPoint { X = 200, Y = 100 }, @@ -135,31 +134,34 @@ The following code example illustrates how to create a customized straight segme ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.Internal - + + + + @code { - + //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Define the segment shape - SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle }; + private SegmentThumbSettings connectorSegmentThumb = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Rectangle }; + protected override void OnInitialized() { Connector Connector = new Connector() + { + ID = "Connector", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, + SourcePoint = new DiagramPoint { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint { X = 250, Y = 250 }, + Segments = new DiagramObjectCollection { - ID = "Connector", - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb | ConnectorConstraints.InheritSegmentThumbShape, - SourcePoint = new DiagramPoint { X = 100, Y = 100 }, - TargetPoint = new DiagramPoint { X = 250, Y = 250 }, - - Segments = new DiagramObjectCollection + new StraightSegment() { - new StraightSegment() - { - Type = ConnectorSegmentType.Straight, - Point = new DiagramPoint { X = 180, Y = 180 } - } - }, - }; + Type = ConnectorSegmentType.Straight, + Point = new DiagramPoint { X = 180, Y = 180 } + } + }, + }; connectors.Add(Connector); } } @@ -175,32 +177,32 @@ The following code example illustrates how to create a customized straight segme ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.Internal - -@code { - + + + +@code +{ //Define the diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Connector Connector = new Connector() + { + ID = "Connector", + Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, + SourcePoint = new DiagramPoint { X = 100, Y = 100 }, + TargetPoint = new DiagramPoint { X = 250, Y = 250 }, + Segments = new DiagramObjectCollection { - ID = "Connector", - Constraints = ConnectorConstraints.Default | ConnectorConstraints.DragSegmentThumb, - SourcePoint = new DiagramPoint { X = 100, Y = 100 }, - TargetPoint = new DiagramPoint { X = 250, Y = 250 }, - - Segments = new DiagramObjectCollection + new StraightSegment() { - new StraightSegment() - { - Type = ConnectorSegmentType.Straight, - Point = new DiagramPoint { X = 180, Y = 180 } - } - }, - SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square }, - - }; + Type = ConnectorSegmentType.Straight, + Point = new DiagramPoint { X = 180, Y = 180 } + } + }, + SegmentThumbSettings = new SegmentThumbSettings() { Shape = SegmentThumbShapes.Square }, + }; connectors.Add(Connector); } } diff --git a/blazor/diagram/constraints.md b/blazor/diagram/constraints.md index 9597c75fa8..5375f28962 100644 --- a/blazor/diagram/constraints.md +++ b/blazor/diagram/constraints.md @@ -47,15 +47,14 @@ The following example shows how to disable the `PageEditable` constraint from th @using Syncfusion.Blazor.Diagram @* Initialize the diagram with constraints *@ - + @code { //Sets the Diagram constraints. - DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; + private DiagramConstraints DiagramConstraints = DiagramConstraints.Default & ~DiagramConstraints.PageEditable; //Initialize the Nodes Collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -152,7 +151,7 @@ The following example shows how to disable the `Rotate` constraint from the defa @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -265,7 +264,7 @@ The following code shows how to disable the `Select` constraint from the default @code { - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -420,7 +419,7 @@ The following code shows how to enable read-only mode for annotations. @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -500,8 +499,8 @@ The following code shows how to hide the rotator. @code { - DiagramObjectCollection nodes; - public DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings() + private DiagramObjectCollection nodes; + private DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings() { Constraints = SelectorConstraints.All & ~SelectorConstraints.Rotate }; @@ -533,17 +532,21 @@ The following code illustrates how to show or hide the tooltip for drag, resize, ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Popups +

Selector Constraints

- Tooltip +Tooltip + + @code { - DiagramObjectCollection nodes; - bool selector=true; - public DiagramSelectionSettings selection = new DiagramSelectionSettings() + private DiagramObjectCollection nodes; + private bool selector=true; + private DiagramSelectionSettings selection = new DiagramSelectionSettings() { Constraints = SelectorConstraints.All }; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -564,7 +567,8 @@ The following code illustrates how to show or hide the tooltip for drag, resize, }; nodes.Add(node); } - private void constraintschange(object value) + + private void constraintschange(object value) { var obj = value as ChangeEventArgs; @@ -578,7 +582,6 @@ The following code illustrates how to show or hide the tooltip for drag, resize, selection.Constraints &= ~SelectorConstraints.Tooltip; selector = false; } - } } ``` @@ -646,7 +649,7 @@ The following code shows how to display only horizontal gridlines. @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -712,7 +715,7 @@ The following code shows how to limit interaction within a page. @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -749,16 +752,13 @@ The following code example shows how to inherit line bridging behavior from the @using Syncfusion.Blazor.Diagram @* Initialize the diagram with constraints *@ - - + @code { //Sets the diagram constraints. - DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; - DiagramObjectCollection connectors; + private DiagramConstraints diagramConstraints = DiagramConstraints.Default | DiagramConstraints.Bridging; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -804,7 +804,7 @@ The following code shows how to add bridging constraints into the default diagra @code { //To add line routing constraint with default contraints. - DiagramConstraints diagramConstraint = DiagramConstraints.Default | DiagramConstraints.Bridging; + private DiagramConstraints diagramConstraint = DiagramConstraints.Default | DiagramConstraints.Bridging; } ``` @@ -823,7 +823,7 @@ The following code shows to remove zoom and pan constraints from the default con { //To remove zoom and panning constraints from the default constraints. //It has disabled zoom and panning functionality for the diagram. - DiagramConstraints diagramConstraint = DiagramConstraints.Default &~ (DiagramConstraints.Zoom | DiagramConstraints.Pan); + private DiagramConstraints diagramConstraint = DiagramConstraints.Default &~ (DiagramConstraints.Zoom | DiagramConstraints.Pan); } ``` diff --git a/blazor/diagram/container.md b/blazor/diagram/container.md index a17865f2d2..076eeab3a7 100644 --- a/blazor/diagram/container.md +++ b/blazor/diagram/container.md @@ -21,14 +21,13 @@ To create a container, define a [Container](https://help.syncfusion.com/cr/blazo ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -56,41 +55,40 @@ To add child elements to a container, define the child nodes and assign their ID ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + Height = 60, + Width = 100, + OffsetX = 400, + OffsetY = 300, + Annotations = new DiagramObjectCollection() { - ID = "node1", - Height = 60, - Width = 100, - OffsetX = 400, - OffsetY = 300, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation(){ Content = "Process"} - } - }; + new ShapeAnnotation(){ Content = "Process"} + } + }; Node node2 = new Node() + { + ID = "node2", + Height = 60, + Width = 100, + OffsetX = 600, + OffsetY = 300, + Annotations = new DiagramObjectCollection() { - ID = "node2", - Height = 60, - Width = 100, - OffsetX = 600, - OffsetY = 300, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation(){ Content = "Process"} - } - }; + new ShapeAnnotation(){ Content = "Process"} + } + }; Container container = new Container() { ID = "container", @@ -116,64 +114,63 @@ The following example shows how to define a container header and customize its a ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the node collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + Height = 60, + Width = 100, + OffsetX = 400, + OffsetY = 300, + Style = new ShapeStyle() { - ID = "node1", - Height = 60, - Width = 100, - OffsetX = 400, - OffsetY = 300, - Style = new ShapeStyle() - { - Fill = "CornflowerBlue", - } - }; + Fill = "CornflowerBlue", + } + }; Node node2 = new Node() + { + ID = "node2", + Height = 60, + Width = 100, + OffsetX = 600, + OffsetY = 300, + Style = new ShapeStyle() { - ID = "node2", - Height = 60, - Width = 100, - OffsetX = 600, - OffsetY = 300, - Style = new ShapeStyle() - { - Fill = "CornflowerBlue", - } - }; + Fill = "CornflowerBlue", + } + }; Container container = new Container() + { + ID = "container", + Header = new ContainerHeader() { - ID = "container", - Header = new ContainerHeader() + ID = "containerHeader", + Height = 40, + Annotation = new ShapeAnnotation() { - ID = "containerHeader", - Height = 40, - Annotation = new ShapeAnnotation() - { - Content = "Container Title", - Style = new TextStyle() { FontSize = 18, Bold = true, Color = "#343434" } - }, - Style = new TextStyle() - { - Fill = "CornflowerBlue" - } + Content = "Container Title", + Style = new TextStyle() { FontSize = 18, Bold = true, Color = "#343434" } }, - Height = 300, - Width = 500, - OffsetX = 500, - OffsetY = 300, - Children = new string[] { "node1", "node2" } - }; + Style = new TextStyle() + { + Fill = "CornflowerBlue" + } + }, + Height = 300, + Width = 500, + OffsetX = 500, + OffsetY = 300, + Children = new string[] { "node1", "node2" } + }; nodes.Add(node1); nodes.Add(node2); nodes.Add(container); @@ -201,8 +198,8 @@ The following code example shows how to define containers and add them to the sy
- +
@@ -210,13 +207,13 @@ The following code example shows how to define containers and add them to the sy @code { - SfSymbolPaletteComponent symbolpalette; + private SfSymbolPaletteComponent symbolpalette; //Define symbol margin. - SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; + private SymbolMargin SymbolMargin = new SymbolMargin { Left = 15, Right = 15, Top = 15, Bottom = 15 }; //Define palattes collection. - DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection Palettes = new DiagramObjectCollection(); // Defines palette's container-shape collection. - DiagramObjectCollection ContainerNodes = new DiagramObjectCollection(); + private DiagramObjectCollection ContainerNodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -226,7 +223,6 @@ The following code example shows how to define containers and add them to the sy private void InitPaletteModel() { Palettes = new DiagramObjectCollection(); - ContainerNodes = new DiagramObjectCollection(); // Create container with header @@ -273,7 +269,7 @@ The following code example shows how to define containers and add them to the sy { new Palette(){Symbols = ContainerNodes, Title="Container Shapes", ID="ContainerShapes" }, }; - } + } } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtreMNtcpzlVcyaI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/diagram/context-menu.md b/blazor/diagram/context-menu.md index 04ae09283f..112b2932a5 100644 --- a/blazor/diagram/context-menu.md +++ b/blazor/diagram/context-menu.md @@ -69,17 +69,16 @@ The following code example shows how to add custom context menu items along with @using System.Collections.ObjectModel - + -@code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; - DiagramObjectCollection connectors; - List Items; +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; + private DiagramObjectCollection connectors; + private List Items; protected override void OnInitialized() { @@ -88,20 +87,19 @@ The following code example shows how to add custom context menu items along with Items = new List() { - new ContextMenuItem() - { - Text = "Save As...", - ID = "save", - IconCss = "e-save", - }, - new ContextMenuItem() - { - Text = "Delete", - ID = "delete", - IconCss = "e-delete" - } + new ContextMenuItem() + { + Text = "Save As...", + ID = "save", + IconCss = "e-save", + }, + new ContextMenuItem() + { + Text = "Delete", + ID = "delete", + IconCss = "e-delete" + } }; - Node node1 = new Node() { ID = "node1", @@ -178,39 +176,36 @@ Diagram provides template support for the context menu. The context menu items c @using System.Collections.ObjectModel - - - - @context.Text - @((@context.Text == "Save As...") ? "Ctrl + S" : "") - + + + + @context.Text + @((@context.Text == "Save As...") ? "Ctrl + S" : "") + -@code { +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Define diagram nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; //Define diagram connectors collection - DiagramObjectCollection connectors; - - List Items; - bool customMenuOnly = false; - bool show = true; + private DiagramObjectCollection connectors; + private List Items; + private bool customMenuOnly = false; + private bool show = true; protected override void OnInitialized() { - //Initialize diagram nodes collection - nodes = new DiagramObjectCollection(); - //Initialize diagram connectors collection - connectors = new DiagramObjectCollection(); + //Initialize diagram nodes collection + nodes = new DiagramObjectCollection(); + //Initialize diagram connectors collection + connectors = new DiagramObjectCollection(); - Items = new List() - { + Items = new List() + { new ContextMenuItem() { Text = "Save As...", @@ -223,9 +218,9 @@ Diagram provides template support for the context menu. The context menu items c ID = "delete", IconCss = "e-delete" } - }; + }; - Node node1 = new Node() + Node node1 = new Node() { ID = "node1", Height = 100, @@ -239,7 +234,7 @@ Diagram provides template support for the context menu. The context menu items c StrokeWidth = 1 } }; - Node node2 = new Node() + Node node2 = new Node() { ID = "node2", Height = 100, @@ -253,10 +248,10 @@ Diagram provides template support for the context menu. The context menu items c StrokeWidth = 1 } }; - nodes.Add(node1); - nodes.Add(node2); + nodes.Add(node1); + nodes.Add(node2); - Connector connector1 = new Connector() + Connector connector1 = new Connector() { ID = "connector1", SourceID = "node1", @@ -268,7 +263,7 @@ Diagram provides template support for the context menu. The context menu items c StrokeWidth = 2 } }; - connectors.Add(connector1); + connectors.Add(connector1); } } ``` @@ -295,7 +290,7 @@ The Diagram control triggers the event [ContextMenuOpening](https://help.syncfus @code { - public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg) + private void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg) { //Action to be performed } @@ -318,7 +313,7 @@ The Diagram control triggers the event [ContextMenuItemClicked](https://help.syn @code { - public void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg) + private void ContextMenuItemClickHandler(DiagramMenuClickEventArgs arg) { //Action to be performed } @@ -330,10 +325,7 @@ The following code example shows how to add separate custom context menu items f ```cshtml @using Syncfusion.Blazor.Diagram - - + @@ -341,11 +333,11 @@ The following code example shows how to add separate custom context menu items f @code { //Reference to diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Defines diagram's nodes collection - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); //Defines diagram's connector collection - public DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + private DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -365,19 +357,19 @@ The following code example shows how to add separate custom context menu items f } }; Node node2 = new Node() + { + ID = "node2", + Height = 100, + Width = 100, + OffsetX = 300, + OffsetY = 100, + Style = new ShapeStyle() { - ID = "node2", - Height = 100, - Width = 100, - OffsetX = 300, - OffsetY = 100, - Style = new ShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white", - StrokeWidth = 1 - } - }; + Fill = "#6BA5D7", + StrokeColor = "white", + StrokeWidth = 1 + } + }; //Add node into node's collection NodeCollection.Add(node1); NodeCollection.Add(node2); @@ -396,7 +388,8 @@ The following code example shows how to add separate custom context menu items f }; ConnectorCollection.Add(connector1); } - List contextMenuItemModels = new List() + + private List contextMenuItemModels = new List() { new ContextMenuItem() { @@ -422,7 +415,7 @@ The following code example shows how to add separate custom context menu items f }, }; - public void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg) + private void OnContextMenuOpen(DiagramMenuOpeningEventArgs arg) { if (diagram.SelectionSettings.Nodes.Count > 0) { diff --git a/blazor/diagram/data-binding.md b/blazor/diagram/data-binding.md index 750699b6ce..1255235cbd 100644 --- a/blazor/diagram/data-binding.md +++ b/blazor/diagram/data-binding.md @@ -36,8 +36,8 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou @using Syncfusion.Blazor.Diagram - - + + @@ -47,14 +47,14 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou -@code +@code { - int left = 40; - int top = 50; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int left = 40; + private int top = 50; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -70,7 +70,7 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou (connector as Connector).Type = ConnectorSegmentType.Orthogonal; } - public class HierarchicalDetails + private class HierarchicalDetails { public string Id { get; set; } public string Role { get; set; } @@ -78,7 +78,8 @@ The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DataSou public string ChartType { get; set; } public string Color { get; set; } } - public List DataSource = new List() + + private List DataSource = new List() { new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, new HierarchicalDetails() { Id= "1", Role= "General Manager", ParentId= "parent", ChartType= "right", Color= "#71AF17" }, @@ -99,34 +100,34 @@ To map the user defined JSON data with diagram, configure the fields of `DataSou ```cshtml @using Syncfusion.Blazor.Diagram - - - + - + @code { - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; // Specify the layout type. - LayoutType type = LayoutType.HierarchicalTree; + private LayoutType type = LayoutType.HierarchicalTree; // Specify the orientation of the layout. - LayoutOrientation orientation = LayoutOrientation.TopToBottom; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; + private LayoutOrientation orientation = LayoutOrientation.TopToBottom; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; // Defines the connector's default values. private void ConnectorDefaults(IDiagramObject connector) @@ -172,7 +173,7 @@ To map the user defined JSON data with diagram, configure the fields of `DataSou } // Create the hierarchical details with needed properties. - public class HierarchicalDetails + private class HierarchicalDetails { public string Name { get; set; } public string FillColor { get; set; } @@ -180,7 +181,7 @@ To map the user defined JSON data with diagram, configure the fields of `DataSou } // Create the data source with node name and fill color values. - public List DataSource = new List() + private List DataSource = new List() { new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, @@ -218,42 +219,37 @@ The following code example illustrates how to bind ExpandoObject data with the d ```cshtml @using Syncfusion.Blazor.Diagram - - - - + + + + @code { - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; // Specify the layout type. - LayoutType type = LayoutType.HierarchicalTree; + private LayoutType type = LayoutType.HierarchicalTree; // Specify the orientation of the layout. - LayoutOrientation orientation = LayoutOrientation.TopToBottom; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; - public List DataSource { get; set; } - public List ExpandoData = new List(); + private LayoutOrientation orientation = LayoutOrientation.TopToBottom; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; + private List DataSource { get; set; } + private List ExpandoData = new List(); + public class ExpandoObject - { + { public string Name { get; set; } public string Category { get; set; } public string FillColor { get; set; } } + // Defines the connector's default values. private void ConnectorDefaults(IDiagramObject connector) { @@ -294,14 +290,15 @@ The following code example illustrates how to bind ExpandoObject data with the d Content = hierarchicalData.Name, Style =new TextStyle(){Color = "white"} } - }; + }; } - protected override void OnInitialized() + protected override void OnInitialized() { this.DataSource = GetData(); } - public List GetData() + + private List GetData() { ExpandoData.Clear(); dynamic Member1 = new ExpandoObject(); @@ -406,36 +403,29 @@ The following code example illustrates how to bind DynamicObject data with the d @using Syncfusion.Blazor.Diagram @using System.Dynamic - - - - + + + + @code { - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; // Specify the layout type. - LayoutType type = LayoutType.HierarchicalTree; + private LayoutType type = LayoutType.HierarchicalTree; // Specify the orientation of the layout. - LayoutOrientation orientation = LayoutOrientation.TopToBottom; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; - public List DataSource { get; set; } - public List ExpandoData = new List(); + private LayoutOrientation orientation = LayoutOrientation.TopToBottom; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; + private List DataSource { get; set; } + private List ExpandoData = new List(); // Defines the connector's default values. private void ConnectorDefaults(IDiagramObject connector) @@ -477,10 +467,10 @@ The following code example illustrates how to bind DynamicObject data with the d Content = hierarchicalData.Name, Style =new TextStyle(){Color = "white"} } - }; + }; } - public class HierarchicalDetails:DynamicObject + public class HierarchicalDetails : DynamicObject { Dictionary dictionary = new Dictionary(); @@ -489,6 +479,7 @@ The following code example illustrates how to bind DynamicObject data with the d string name = binder.Name; return dictionary.TryGetValue(name, out result); } + public override bool TrySetMember(SetMemberBinder binder, object value) { dictionary[binder.Name] = value; @@ -499,31 +490,30 @@ The following code example illustrates how to bind DynamicObject data with the d { return this.dictionary?.Keys; } - } + protected override void OnInitialized() { this.DataSource = GetData(); } - public List GetData() + + private List GetData() { ExpandoData.Clear(); - dynamic Member1 = new HierarchicalDetails(); + dynamic Member1 = new HierarchicalDetails(); Member1.Name = "Diagram"; Member1.Category = ""; Member1.FillColor = "#71AF17"; ExpandoData.Add(Member1); dynamic Member2 = new HierarchicalDetails(); - Member2.Name = "Layout"; Member2.Category = "Diagram"; Member2.FillColor = "#659be5"; ExpandoData.Add(Member2); dynamic Member3 = new HierarchicalDetails(); - Member3.Name = "Tree layout"; Member3.Category = "Layout"; Member3.FillColor = "#659be5"; @@ -537,49 +527,42 @@ The following code example illustrates how to bind DynamicObject data with the d ExpandoData.Add(Member7); dynamic Member8 = new HierarchicalDetails(); - Member8.Name = "Hierarchical tree"; Member8.Category = "Tree layout"; Member8.FillColor = "#659be5"; ExpandoData.Add(Member8); dynamic Member14 = new HierarchicalDetails(); - Member14.Name = "Radial tree"; Member14.Category = "Tree layout"; Member14.FillColor = "#659be5"; ExpandoData.Add(Member14); dynamic Member9 = new HierarchicalDetails(); - Member9.Name = "Mind map"; Member9.Category = "Hierarchical tree"; Member9.FillColor = "#659be5"; ExpandoData.Add(Member9); dynamic Member10 = new HierarchicalDetails(); - Member10.Name = "Family tree"; Member10.Category = "Hierarchical tree"; Member10.FillColor = "#659be5"; ExpandoData.Add(Member10); dynamic Member4 = new HierarchicalDetails(); - Member4.Name = "Management"; Member4.Category = "Organizational chart"; Member4.FillColor = "#659be5"; ExpandoData.Add(Member4); dynamic Member11 = new HierarchicalDetails(); - Member11.Name = "Human resources"; Member11.Category = "Management"; Member11.FillColor = "#659be5"; ExpandoData.Add(Member11); dynamic Member12 = new HierarchicalDetails(); - Member12.Name = "University"; Member12.Category = "Management"; Member12.FillColor = "#659be5"; @@ -603,8 +586,7 @@ The following sample code demonstrates binding local data through SfDataManager @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Data - + @@ -613,13 +595,13 @@ The following sample code demonstrates binding local data through SfDataManager @code { - SfDiagramComponent Diagram; - float x = 100; - float y = 100; - Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); + private SfDiagramComponent Diagram; + private float x = 100; + private float y = 100; + private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); // Create the hierarchical details with needed properties. - public class HierarchicalDetails + private class HierarchicalDetails { public string Name { get; set; } public string FillColor { get; set; } @@ -627,7 +609,7 @@ The following sample code demonstrates binding local data through SfDataManager } // Create the data source with node name and fill color values. - public HierarchicalDetails[] DataSource = new HierarchicalDetails[] + private HierarchicalDetails[] DataSource = new HierarchicalDetails[] { new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, @@ -635,7 +617,7 @@ The following sample code demonstrates binding local data through SfDataManager new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, }; - + // Defines the node's default values. private void NodeDefaults(IDiagramObject obj) { @@ -679,23 +661,25 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming @using Syncfusion.Blazor.Data @inject HttpClient Http -
- + +
-@code { - SfDiagramComponent Diagrams; +@code +{ + private SfDiagramComponent Diagrams; private float x = 100; private float y = 100; - public class Employee { + private class Employee + { public int? EmployeeID { get; set; } public string FirstName { get; set; } public int? ReportsTo { get; set; } @@ -703,7 +687,8 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); - private void OnNodeCreating(IDiagramObject obj) { + private void OnNodeCreating(IDiagramObject obj) + { Node node = obj as Node; node.OffsetX = x; node.OffsetY = y; @@ -712,16 +697,18 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; x += 100; - Dictionary data = node.Data as Dictionary; - node.Annotations = new DiagramObjectCollection() { - new ShapeAnnotation() { + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { Content = data["FirstName"].ToString(), Style = new TextStyle() { Color = "white" } } }; - switch (data["FirstName"].ToString()) { + switch (data["FirstName"].ToString()) + { case "Andrew": node.Style.Fill = "#3A4857"; break; @@ -746,7 +733,8 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming } } - private void OnConnectorCreating(IDiagramObject obj) { + private void OnConnectorCreating(IDiagramObject obj) + { Connector connector = obj as Connector; connector.Style.StrokeColor = "#048785"; connector.Type = ConnectorSegmentType.Orthogonal; @@ -754,7 +742,6 @@ OData (Open Data Protocol) is a standardized protocol for building and consuming connector.SourceDecorator.Shape = DecoratorShape.None; connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeWZNQpRDIabQI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -770,23 +757,25 @@ OData V4 is an updated version of the OData protocols, and the `SfDataManager` c @using Syncfusion.Blazor.Data @inject HttpClient Http -
- + +
-@code { - SfDiagramComponent Diagrams; +@code +{ + private SfDiagramComponent Diagrams; private float x = 100; private float y = 100; - public class Employee { + private class Employee + { public int? EmployeeID { get; set; } public string FirstName { get; set; } public int? ReportsTo { get; set; } @@ -794,7 +783,8 @@ OData V4 is an updated version of the OData protocols, and the `SfDataManager` c private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); - private void OnNodeCreating(IDiagramObject obj) { + private void OnNodeCreating(IDiagramObject obj) + { Node node = obj as Node; node.OffsetX = x; node.OffsetY = y; @@ -803,16 +793,18 @@ OData V4 is an updated version of the OData protocols, and the `SfDataManager` c node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; x += 100; - Dictionary data = node.Data as Dictionary; - node.Annotations = new DiagramObjectCollection() { - new ShapeAnnotation() { + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { Content = data["FirstName"].ToString(), Style = new TextStyle() { Color = "white" } } }; - switch (data["FirstName"].ToString()) { + switch (data["FirstName"].ToString()) + { case "Andrew": node.Style.Fill = "#3A4857"; break; @@ -837,7 +829,8 @@ OData V4 is an updated version of the OData protocols, and the `SfDataManager` c } } - private void OnConnectorCreating(IDiagramObject obj) { + private void OnConnectorCreating(IDiagramObject obj) + { Connector connector = obj as Connector; connector.Style.StrokeColor = "#048785"; connector.Type = ConnectorSegmentType.Orthogonal; @@ -845,7 +838,6 @@ OData V4 is an updated version of the OData protocols, and the `SfDataManager` c connector.SourceDecorator.Shape = DecoratorShape.None; connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LXreWtNmTdMAJWbU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -865,23 +857,25 @@ The following sample code demonstrates how to bind remote data to the Diagram co @using Syncfusion.Blazor.Data @inject HttpClient Http -
- + +
-@code { - SfDiagramComponent Diagrams; +@code +{ + private SfDiagramComponent Diagrams; private float x = 100; private float y = 100; - public class Employee { + private class Employee + { public int? EmployeeID { get; set; } public string FirstName { get; set; } public int? ReportsTo { get; set; } @@ -889,7 +883,8 @@ The following sample code demonstrates how to bind remote data to the Diagram co private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); - private void OnNodeCreating(IDiagramObject obj) { + private void OnNodeCreating(IDiagramObject obj) + { Node node = obj as Node; node.OffsetX = x; node.OffsetY = y; @@ -898,16 +893,18 @@ The following sample code demonstrates how to bind remote data to the Diagram co node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; x += 100; - Dictionary data = node.Data as Dictionary; - node.Annotations = new DiagramObjectCollection() { - new ShapeAnnotation() { + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { Content = data["FirstName"].ToString(), Style = new TextStyle() { Color = "white" } } }; - switch (data["FirstName"].ToString()) { + switch (data["FirstName"].ToString()) + { case "Andrew": node.Style.Fill = "#3A4857"; break; @@ -932,7 +929,8 @@ The following sample code demonstrates how to bind remote data to the Diagram co } } - private void OnConnectorCreating(IDiagramObject obj) { + private void OnConnectorCreating(IDiagramObject obj) + { Connector connector = obj as Connector; connector.Style.StrokeColor = "#048785"; connector.Type = ConnectorSegmentType.Orthogonal; @@ -940,7 +938,6 @@ The following sample code demonstrates how to bind remote data to the Diagram co connector.SourceDecorator.Shape = DecoratorShape.None; connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSsDXwpHLVLxIu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -961,19 +958,22 @@ The following sample code demonstrates how to bind data to the Diagram component
- + +
-@code { - SfDiagramComponent Diagrams; +@code +{ + private SfDiagramComponent Diagrams; private float x = 100; private float y = 100; - public class Employee { + private class Employee + { public int? EmployeeID { get; set; } public string FirstName { get; set; } public int? ReportsTo { get; set; } @@ -981,7 +981,8 @@ The following sample code demonstrates how to bind data to the Diagram component private Query Query = new Query().Select(new List() { "EmployeeID", "ReportsTo", "FirstName" }).Take(9); - private void OnNodeCreating(IDiagramObject obj) { + private void OnNodeCreating(IDiagramObject obj) + { Node node = obj as Node; node.OffsetX = x; node.OffsetY = y; @@ -990,7 +991,6 @@ The following sample code demonstrates how to bind data to the Diagram component node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle, CornerRadius = 8 }; node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "" }; x += 100; - Dictionary data = node.Data as Dictionary; node.Annotations = new DiagramObjectCollection() { new ShapeAnnotation() { @@ -999,7 +999,8 @@ The following sample code demonstrates how to bind data to the Diagram component } }; - switch (data["FirstName"].ToString()) { + switch (data["FirstName"].ToString()) + { case "Andrew": node.Style.Fill = "#3A4857"; break; @@ -1024,7 +1025,8 @@ The following sample code demonstrates how to bind data to the Diagram component } } - private void OnConnectorCreating(IDiagramObject obj) { + private void OnConnectorCreating(IDiagramObject obj) + { Connector connector = obj as Connector; connector.Style.StrokeColor = "#048785"; connector.Type = ConnectorSegmentType.Orthogonal; @@ -1032,7 +1034,6 @@ The following sample code demonstrates how to bind data to the Diagram component connector.SourceDecorator.Shape = DecoratorShape.None; connector.Style = new ShapeStyle() { StrokeColor = "#3A4857", Fill = "#3A4857", StrokeWidth = 1, StrokeDashArray = "3,3" }; } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSMZjmfnrvrKJB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -1061,16 +1062,20 @@ The following sample code demonstrates implementing custom data binding using cu
-@functions{ - SfDiagramComponent? diagram; - public static List employeeDetails { get; set; } - Layout LayoutValue = new Layout() { }; + +@functions +{ + private SfDiagramComponent? diagram; + private static List employeeDetails { get; set; } + private Layout LayoutValue = new Layout() { }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) { options.EnableSubTree = true; options.Orientation = Orientation.Horizontal; return options; } + private void NodeCreating(IDiagramObject obj) { Node? node = obj as Node; @@ -1094,6 +1099,7 @@ The following sample code demonstrates implementing custom data binding using cu node.Style = new ShapeStyle() { Fill = data.Color, StrokeColor = "none", StrokeWidth = 2, }; } } + private void ConnectorCreating(IDiagramObject connector) { Connector? newConnector = connector as Connector; @@ -1120,24 +1126,18 @@ The following sample code demonstrates implementing custom data binding using cu }; } - public class EmployeeDetails + private class EmployeeDetails { public string EmployeeID { get; set; } - public string ReportsTo { get; set; } - public string FirstName { get; set; } - public string Designation { get; set; } - public string Country { get; set; } - public string Color { get; set; } } - // Implementing custom adaptor by extending the DataAdaptor class - public class CustomAdaptor : DataAdaptor + private class CustomAdaptor : DataAdaptor { // Performs data Read operation public override object Read(DataManagerRequest dm, string key = null) @@ -1209,6 +1209,7 @@ The following sample code demonstrates implementing CRUD operations for custom b +
@@ -1221,18 +1222,21 @@ The following sample code demonstrates implementing CRUD operations for custom b
-@functions{ - SfDiagramComponent? diagram; - public static List employeeDetails { get; set; } - public static List Details { get; set; } = new List(); - Layout LayoutValue = new Layout() { }; +@functions +{ + private SfDiagramComponent? diagram; + private static List employeeDetails { get; set; } + private static List Details { get; set; } = new List(); + private Layout LayoutValue = new Layout() { }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) { options.EnableSubTree = true; options.Orientation = Orientation.Horizontal; return options; } + private void NodeCreating(IDiagramObject obj) { Node? node = obj as Node; @@ -1256,6 +1260,7 @@ The following sample code demonstrates implementing CRUD operations for custom b node.Style = new ShapeStyle() { Fill = data.Color, StrokeColor = "none", StrokeWidth = 2, }; } } + private void ConnectorCreating(IDiagramObject connector) { Connector? newConnector = connector as Connector; @@ -1282,24 +1287,18 @@ The following sample code demonstrates implementing CRUD operations for custom b }; } - public class EmployeeDetails + private class EmployeeDetails { public string EmployeeID { get; set; } - public string ReportsTo { get; set; } - public string FirstName { get; set; } - public string Designation { get; set; } - public string Country { get; set; } - public string Color { get; set; } } - // Implementing custom adaptor by extending the DataAdaptor class - public class CustomAdaptor : DataAdaptor + private class CustomAdaptor : DataAdaptor { // Performs data Read operation public override object Read(DataManagerRequest dm, string key = null) @@ -1364,19 +1363,19 @@ The following sample code demonstrates implementing CRUD operations for custom b } } - public void Read() + private void Read() { Details = new List(); Details = diagram.ReadDataAsync().Result as List; } - public async void Update() + private async void Update() { EmployeeDetails employeeDetails = new EmployeeDetails { EmployeeID = "1", FirstName = "AndrewSimonds", Designation = "CEO", Country = "Australia", ReportsTo = "", Color = "Red" }; await diagram.UpdateDataAsync("EmployeeID", employeeDetails); } - public async void Insert() + private async void Insert() { EmployeeDetails employeeDetails = new EmployeeDetails() { @@ -1388,10 +1387,9 @@ The following sample code demonstrates implementing CRUD operations for custom b Color = "Purple" }; await diagram.InsertDataAsync(employeeDetails); - } - public async void Delete() + private async void Delete() { await diagram.DeleteDataAsync("EmployeeID", "6"); } @@ -1412,43 +1410,46 @@ GraphQL is a query language for APIs that allows you to can get exactly what you
- + - + - +
-@code{ - public SfDiagramComponent diagram; + +@code +{ + private SfDiagramComponent diagram; private float x = 100; private float y = 100; private GraphQLAdaptorOptions adaptorOptions { get; set; } = new GraphQLAdaptorOptions - { - Query = @" - query ordersData($dataManager: DataManagerRequestInput!){ - ordersData(dataManager: $dataManager) { - count, result { OrderID, CustomerID, EmployeeID, } , aggregates - } - }", - ResolverName = "OrdersData" - }; + { + Query = @" + query ordersData($dataManager: DataManagerRequestInput!){ + ordersData(dataManager: $dataManager) { + count, result { OrderID, CustomerID, EmployeeID, } , aggregates + } + }", + ResolverName = "OrdersData" + }; - public class Order + private class Order { public int? OrderID { get; set; } public string CustomerID { get; set; } - public string EmployeeID { get; set; } + public string EmployeeID { get; set; } } + private void OnNodeCreating(IDiagramObject obj) { Node node = obj as Node; - node.Width = 80; - node.Height = 45; + node.Height = 45; node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }; node.Style = new ShapeStyle() { StrokeWidth = 0, Fill = "#2084c4" }; Dictionary data = node.Data as Dictionary; @@ -1459,27 +1460,27 @@ GraphQL is a query language for APIs that allows you to can get exactly what you { if (kvp.Key == "EmployeeID") { - content = kvp.Value.ToString(); + content = kvp.Value.ToString(); } } } node.Annotations = new DiagramObjectCollection() + { + // Annotation is created and stored in the Annotations collection of Node. + new ShapeAnnotation { - // Annotation is created and stored in the Annotations collection of Node. - new ShapeAnnotation + Content = content, + Style = new TextStyle() { - Content = content, - Style = new TextStyle() - { - Color = "White", - Bold = true, - FontSize = 12, - FontFamily = "TimesNewRoman" - } + Color = "White", + Bold = true, + FontSize = 12, + FontFamily = "TimesNewRoman" } - }; - + } + }; } + @*End:Hidden*@ private void OnConnectorCreating(IDiagramObject obj) { @@ -1567,41 +1568,44 @@ The following variables are passed as a parameter to the mutation method written -@code{ - public SfDiagramComponent diagram; + +@code +{ + private SfDiagramComponent diagram; private float x = 100; private float y = 100; + private GraphQLAdaptorOptions adaptorOptions { get; set; } = new GraphQLAdaptorOptions - { - Query = @" - query ordersData($dataManager: DataManagerRequestInput!){ - ordersData(dataManager: $dataManager) { - count, result { OrderID, CustomerID, EmployeeID, } , aggregates - } - }", - Mutation = new GraphQLMutation { - Insert = @" + Query = @" + query ordersData($dataManager: DataManagerRequestInput!){ + ordersData(dataManager: $dataManager) { + count, result { OrderID, CustomerID, EmployeeID, } , aggregates + } + }", + Mutation = new GraphQLMutation + { + Insert = @" mutation create($record: OrderInput!, $index: Int!, $action: String!, $additionalParameters: Any) { createOrder(order: $record, index: $index, action: $action, additionalParameters: $additionalParameters) { OrderID, CustomerID, EmployeeID } }", - Update = @" + Update = @" mutation update($record: OrderInput!, $action: String!, $primaryColumnName: String! , $primaryColumnValue: Int!, $additionalParameters: Any) { updateOrder(order: $record, action: $action, primaryColumnName: $primaryColumnName, primaryColumnValue: $primaryColumnValue, additionalParameters: $additionalParameters) { OrderID, CustomerID, EmployeeID } }", - Delete = @" + Delete = @" mutation delete($primaryColumnValue: Int!, $action: String!, $primaryColumnName: String!, $additionalParameters: Any) { deleteOrder(primaryColumnValue: $primaryColumnValue, action: $action, primaryColumnName: $primaryColumnName, additionalParameters: $additionalParameters) { OrderID, CustomerID, EmployeeID } }" - }, - ResolverName = "OrdersData" - }; + }, + ResolverName = "OrdersData" + }; public class Order { @@ -1610,10 +1614,10 @@ The following variables are passed as a parameter to the mutation method written public string EmployeeID { get; set; } } + private void OnNodeCreating(IDiagramObject obj) { Node node = obj as Node; - node.Width = 80; node.Height = 45; node.Shape = new BasicShape() { Type = Syncfusion.Blazor.Diagram.NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle }; @@ -1633,20 +1637,20 @@ The following variables are passed as a parameter to the mutation method written node.Annotations = new DiagramObjectCollection() { // Annotation is created and stored in Annotations collection of Node. - new ShapeAnnotation + new ShapeAnnotation + { + Content = content, + Style = new TextStyle() { - Content = content, - Style = new TextStyle() - { - Color = "White", - Bold = true, - FontSize = 12, - FontFamily = "TimesNewRoman" - } + Color = "White", + Bold = true, + FontSize = 12, + FontFamily = "TimesNewRoman" } - }; - + } + }; } + @*End:Hidden*@ private void OnConnectorCreating(IDiagramObject obj) { @@ -1660,25 +1664,28 @@ The following variables are passed as a parameter to the mutation method written //CRUD operations //To fetch data from the remote service - public async void Read() + private async void Read() { var data = await diagram.ReadDataAsync(); } + //To update data in the remote service - public async void Update() + private async void Update() { Order employeeDetails = new Order() { OrderID = 9, EmployeeID = "Craft updated", CustomerID = "5" }; await diagram.UpdateDataAsync("OrderID", employeeDetails); } + //To push data to the remote service - public async void Insert() + private async void Insert() { Order employeeDetails = new Order() { OrderID = 10, EmployeeID = "Craft new ", CustomerID = "5" }; await diagram.InsertDataAsync(employeeDetails); } + //To delete data in the remote service - public async void Delete() + private async void Delete() { await diagram.DeleteDataAsync("OrderID", 5); } @@ -1700,6 +1707,7 @@ namespace ASPNetCoreGraphQlServer.GraphQl GraphQLQuery.Orders.Insert(index, order); return order; } + public Order UpdateOrder(Order order, string action, string primaryColumnName, int primaryColumnValue, [GraphQLType(typeof(AnyType))] IDictionary additionalParameters) { @@ -1711,6 +1719,7 @@ namespace ASPNetCoreGraphQlServer.GraphQl updatedOrder.OrderDate = order.OrderDate; return updatedOrder; } + public Order DeleteOrder(int primaryColumnValue, string action, string primaryColumnName, [GraphQLType(typeof(AnyType))] IDictionary additionalParameters) { @@ -1718,6 +1727,7 @@ namespace ASPNetCoreGraphQlServer.GraphQl GraphQLQuery.Orders.Remove(deletedOrder); return deletedOrder; } + public List BatchUpdate(List? changed, List? added, List? deleted, string action, String primaryColumnName, [GraphQLType(typeof(AnyType))] IDictionary additionalParameters, int? dropIndex) @@ -1755,10 +1765,8 @@ namespace ASPNetCoreGraphQlServer.GraphQl } return GraphQLQuery.Orders; } - } } - ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DataBinding/GraphQLAdaptorCRUD) @@ -1927,18 +1935,21 @@ Configure the Diagram using the 'SfDataManager' to interact with the created Web - -@functions{ - SfDiagramComponent? diagram; - public static List employeeDetails { get; set; } - Layout LayoutValue = new Layout() { }; + +@functions +{ + private SfDiagramComponent? diagram; + private static List employeeDetails { get; set; } + private Layout LayoutValue = new Layout() { }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) { options.EnableSubTree = true; options.Orientation = Orientation.Horizontal; return options; } + private void NodeCreating(IDiagramObject obj) { Node? node = obj as Node; @@ -1956,6 +1967,7 @@ Configure the Diagram using the 'SfDataManager' to interact with the created Web }; } } + private void ConnectorCreating(IDiagramObject connector) { Connector? newConnector = connector as Connector; @@ -1969,13 +1981,9 @@ Configure the Diagram using the 'SfDataManager' to interact with the created Web public class EmployeeDetails { public int EmployeeID { get; set; } - public string ReportsTo { get; set; } - public string Name { get; set; } - public string Designation { get; set; } - public string Colour { get; set; } } } @@ -1988,7 +1996,7 @@ The SfDiagramComponent supports CRUD (Create, Read, Update, Delete) operations u The SfDiagramComponent can fetch and display data from remote sources using the ReadDataAsync method. This method retrieves data from the server, which is then visualized as nodes and connectors in the diagram. This method is invoked when the user wants to load the raw data from the server. ```csharp //To fetch data from the remote service - public async void Read() + private async void Read() { var data = await diagram.ReadDataAsync(); } @@ -1998,7 +2006,7 @@ The SfDiagramComponent can fetch and display data from remote sources using the The UpdateDataAsync method updates the data on the remote server through an API call. Once the data is updated, the diagram automatically refreshes and displays the latest data from the server. ```csharp //To update data in the remote service - public async void Update() + private async void Update() { EmployeeDetails employeeDetails = new EmployeeDetails() { @@ -2016,7 +2024,7 @@ The UpdateDataAsync method updates the data on the remote server through an API The InsertDataAsync method adds new data to the remote server via an API. Once the data is inserted, the diagram updates itself to include the new nodes and connectors. ```csharp //To push data to the remote service - public async void Insert() + private async void Insert() { EmployeeDetails employeeDetails = new EmployeeDetails() { @@ -2034,7 +2042,7 @@ The InsertDataAsync method adds new data to the remote server via an API. Once t The DeleteDataAsync method removes data from the remote server. Once the data is deleted, the diagram refreshes itself to reflect the removal of nodes and connectors. ```csharp //To delete data in the remote service - public async void Delete() + private async void Delete() { await diagram.DeleteDataAsync("EmployeeID", 5); } diff --git a/blazor/diagram/events.md b/blazor/diagram/events.md index fc227a7f3d..333bd9c9f1 100644 --- a/blazor/diagram/events.md +++ b/blazor/diagram/events.md @@ -17,16 +17,13 @@ The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node = new Node() @@ -38,9 +35,9 @@ The [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf }; nodes.Add(node); } + private void OnCreated(object args) { - Diagram.Select(new ObservableCollection() { Diagram.Nodes[0] }); } } @@ -57,16 +54,13 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node = new Node() @@ -78,9 +72,10 @@ The [Click](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi }; nodes.Add(node); } + private void OnClick(ClickEventArgs args) { - + // Actions to be performed } } ``` @@ -97,16 +92,13 @@ The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node = new Node() @@ -118,9 +110,10 @@ The [KeyDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Sf }; nodes.Add(node); } + private void OnKeyDown(KeyEventArgs args) { - + // Actions to be performed } } ``` @@ -136,16 +129,13 @@ The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - + -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -157,9 +147,10 @@ The [KeyUp](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi }; nodes.Add(node); } + private void OnKeyUp(KeyEventArgs args) { - + // Actions to be performed } } ``` @@ -174,47 +165,48 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette @using System.Collections.ObjectModel - - - - -@code{ - SfDiagramComponent Diagram; - SfSymbolPaletteComponent PaletteInstance; - DiagramObjectCollection Palettes = new DiagramObjectCollection(); - DiagramObjectCollection TNodes = new DiagramObjectCollection(); - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + + +@code +{ + private SfDiagramComponent Diagram; + private SfSymbolPaletteComponent PaletteInstance; + private DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection TNodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) { - SymbolInfo SymbolInfo = new SymbolInfo(); - SymbolInfo.Fit = true; - return SymbolInfo; - } + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() { - TNodes = new DiagramObjectCollection(); - Node TNode2 = new Node() - { - ID = "node1", - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } - }; - TNodes.Add(TNode2); - Palettes = new DiagramObjectCollection() - { - new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, - }; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; } + protected override async Task OnAfterRenderAsync(bool firstRender) { PaletteInstance.Targets = new DiagramObjectCollection() { }; PaletteInstance.Targets.Add(Diagram); } - //Notify the drag start event. + + //Notify the drag start event. private void DragStart(DragStartEventArgs args) { //Action to be performed. @@ -234,41 +226,41 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Diagram.SymbolPalette @using System.Collections.ObjectModel - - - - -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection Palettes = new DiagramObjectCollection(); - DiagramObjectCollection TNodes = new DiagramObjectCollection(); - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection TNodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) { - SymbolInfo SymbolInfo = new SymbolInfo(); - SymbolInfo.Fit = true; - return SymbolInfo; - } + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() { - TNodes = new DiagramObjectCollection(); - Node TNode2 = new Node() - { - ID = "node1", - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } - }; - TNodes.Add(TNode2); - Palettes = new DiagramObjectCollection() - { - new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, - }; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; } - // Notify the dragging event. + + // Notify the dragging event. private void Dragging(DraggingEventArgs args) { //Action to be performed. @@ -287,45 +279,45 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel @using Syncfusion.Blazor.Diagram.SymbolPalette - - - - -@code{ - SfDiagramComponent Diagram; - DiagramSize SymbolPreview; - DiagramObjectCollection Palettes = new DiagramObjectCollection(); - DiagramObjectCollection TNodes = new DiagramObjectCollection(); - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramSize SymbolPreview; + private DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection TNodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) { - SymbolInfo SymbolInfo = new SymbolInfo(); - SymbolInfo.Fit = true; - return SymbolInfo; - } + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() { - SymbolPreview = new DiagramSize(); - SymbolPreview.Width = 80; - SymbolPreview.Height = 80; - TNodes = new DiagramObjectCollection(); - Node TNode2 = new Node() - { - ID = "node1", - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision} - }; - TNodes.Add(TNode2); - Palettes = new DiagramObjectCollection() - { - new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, - }; + SymbolPreview = new DiagramSize(); + SymbolPreview.Width = 80; + SymbolPreview.Height = 80; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; } - // Notify the DragLeave event. + + // Notify the DragLeave event. private void DragLeave(DragLeaveEventArgs args) { //Action to be performed. @@ -344,45 +336,44 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @using System.Collections.ObjectModel @using Syncfusion.Blazor.Diagram.SymbolPalette - - - - + + + -@code{ - SfDiagramComponent Diagram; - DiagramSize SymbolPreview; - DiagramObjectCollection Palettes = new DiagramObjectCollection(); - DiagramObjectCollection TNodes = new DiagramObjectCollection(); - DiagramObjectCollection nodes = new DiagramObjectCollection(); +@code +{ + private SfDiagramComponent Diagram; + private DiagramSize SymbolPreview; + private DiagramObjectCollection Palettes = new DiagramObjectCollection(); + private DiagramObjectCollection TNodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SymbolInfo GetSymbolInfo(IDiagramObject symbol) { - SymbolInfo SymbolInfo = new SymbolInfo(); - SymbolInfo.Fit = true; - return SymbolInfo; - } + SymbolInfo SymbolInfo = new SymbolInfo(); + SymbolInfo.Fit = true; + return SymbolInfo; + } + protected override void OnInitialized() { - SymbolPreview = new DiagramSize(); - SymbolPreview.Width = 80; - SymbolPreview.Height = 80; - TNodes = new DiagramObjectCollection(); - Node TNode2 = new Node() - { - ID = "node1", - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } - }; - TNodes.Add(TNode2); - Palettes = new DiagramObjectCollection() - { - new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, - }; + SymbolPreview = new DiagramSize(); + SymbolPreview.Width = 80; + SymbolPreview.Height = 80; + TNodes = new DiagramObjectCollection(); + Node TNode2 = new Node() + { + ID = "node1", + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } + }; + TNodes.Add(TNode2); + Palettes = new DiagramObjectCollection() + { + new Palette(){Symbols =TNodes,Title="Flow Shapes",ID="Flow Shapes" }, + }; } - // Notify the DragDrop event. + + // Notify the DragDrop event. private void DragDrop(DropEventArgs args) { //Action to be performed. @@ -406,55 +397,59 @@ These properties allow for fine-tuned control over the auto-scrolling behavior i ```cshtml @using Syncfusion.Blazor.Diagram + @* Sets the ScrollSettings for the diagram *@ + @code { - ScrollLimitMode ScrollLimit { get; set; } = ScrollLimitMode.Infinity; - DiagramObjectCollection nodes; + private ScrollLimitMode ScrollLimit { get; set; } = ScrollLimitMode.Infinity; + private DiagramObjectCollection nodes; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 }; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 }; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // 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() { - 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" - } - }; + 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() { - 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 - }, - }; + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + }; connectors.Add(Connector); } + private void AutoScrollChange(AutoScrollChangeEventArgs args) { args.Cancel = false; diff --git a/blazor/diagram/export.md b/blazor/diagram/export.md index f35af8e315..ef6c821935 100644 --- a/blazor/diagram/export.md +++ b/blazor/diagram/export.md @@ -26,11 +26,11 @@ Diagram provides support to export the diagram as image or SVG files. The follow - - + -@code { - SfDiagramComponent diagram; +@code +{ + private SfDiagramComponent diagram; //To export the diagram as base64 string. private async Task ExportBase64() @@ -68,12 +68,12 @@ Diagram provides support to export the desired region of the diagram to the desi @using Syncfusion.Blazor.Buttons - - + -@code { +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private async Task Export() { @@ -96,12 +96,12 @@ Diagram provides support to change the page size. The page size can be adjusted @using Syncfusion.Blazor.Buttons - - + -@code { +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private async Task Export() { @@ -131,9 +131,10 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn -@code { +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private async Task Export() { @@ -172,9 +173,10 @@ The following code example illustrates how to export the diagram based on page s -@code { +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private async Task Export() { @@ -203,23 +205,23 @@ The following code example illustrates how to export the region specified in the @using Syncfusion.Blazor.Buttons - - + -@code{ - SfDiagramComponent diagram; - - private async Task Export() - { - DiagramExportSettings export = new DiagramExportSettings(); - export.Region = DiagramPrintExportRegion.PageSettings; - export.PageWidth = 816; - export.PageHeight = 1054; - export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; - export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; - //To export the diagram - await diagram.ExportAsync("diagram",DiagramExportFormat.PNG, export); - } +@code +{ + private SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; + //To export the diagram + await diagram.ExportAsync("diagram",DiagramExportFormat.PNG, export); + } } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZresXjFUwYAvcER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -244,9 +246,10 @@ The following code example illustrates how to export the diagram to a single pag -@code { +@code +{ //Reference the diagram. - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private async Task Export() { @@ -276,26 +279,26 @@ The diagram component supports switching between [Portrait](https://help.syncfus @using Syncfusion.Blazor.Buttons - - + -@code{ - SfDiagramComponent diagram; - - private async Task Export() - { - DiagramExportSettings export = new DiagramExportSettings(); - export.Region = DiagramPrintExportRegion.PageSettings; - export.PageWidth = 816; - export.PageHeight = 1054; - //To export the diagram in single page. - export.FitToPage = true; - export.Orientation = PageOrientation.Landscape; - export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; - export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; - //To export the diagram - await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export); - } +@code +{ + private SfDiagramComponent diagram; + + private async Task Export() + { + DiagramExportSettings export = new DiagramExportSettings(); + export.Region = DiagramPrintExportRegion.PageSettings; + export.PageWidth = 816; + export.PageHeight = 1054; + //To export the diagram in single page. + export.FitToPage = true; + export.Orientation = PageOrientation.Landscape; + export.Margin = new DiagramThickness() { Left = 10, Top = 10, Right = 10, Bottom = 10 }; + export.ClipBounds = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; + //To export the diagram + await diagram.ExportAsync("diagram", DiagramExportFormat.PNG, export); + } } ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOrientation) @@ -308,18 +311,17 @@ The following code illustrates how to export the diagram as PDF file. ```cshtml @using Syncfusion.PdfExport; - @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons @inject IJSRuntime JS; - - + -@code{ +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private async void ExportPDF() { @@ -336,7 +338,8 @@ The following code illustrates how to export the diagram as PDF file. var pdforientation = PageOrientation.Portrait == PageOrientation.Landscape ? PdfPageOrientation.Landscape : PdfPageOrientation.Portrait; await ExportToPdf("diagram", pdforientation, true, images); } - // + + private async Task ExportToPdf(string fileName, PdfPageOrientation orientation, bool allowDownload, string[] images) { PdfDocument document = new PdfDocument(); @@ -377,10 +380,11 @@ The following code illustrates how to export the diagram as PDF file. return base64String; } - } +} - // Javascript methods to download file - function downloadPdf(base64String, fileName) { +// Javascript methods to download file +function downloadPdf(base64String, fileName) +{ var sliceSize = 512; var byteCharacters = atob(base64String); var byteArrays = []; @@ -396,13 +400,14 @@ The following code illustrates how to export the diagram as PDF file. byteArrays.push(byteArray); } var blob = new Blob(byteArrays, - { - type: 'application/pdf' - } + { + type: 'application/pdf' + } ); var blobUrl = window.URL.createObjectURL(blob); this.triggerDownload("PDF", fileName, blobUrl); } + triggerDownload: function triggerDownload(type, fileName, url) { var anchorElement = document.createElement('a'); diff --git a/blazor/diagram/flip.md b/blazor/diagram/flip.md index 4913df6b7a..d4a97ccbac 100644 --- a/blazor/diagram/flip.md +++ b/blazor/diagram/flip.md @@ -51,86 +51,82 @@ The following code example shows how to flip the node. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.DropDowns - - + + + - - + + - - + + @code { //Initialize the diagram connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Define diagram nodes collection - DiagramObjectCollection NodeCollection; - public class FlipOption - { - public string Name { get; set; } - public string Value { get; set; } // Bound value - } - - List FlipDirections = new() - { - new FlipOption { Name = "None", Value = "None" }, - new FlipOption { Name = "Horizontal", Value = "Horizontal" }, - new FlipOption { Name = "Vertical", Value = "Vertical" }, - new FlipOption { Name = "Both", Value = "Both" } - }; - - List FlipModes = new() - { - new FlipOption { Name = "None", Value = "None" }, - new FlipOption { Name = "Content", Value = "Content" }, - new FlipOption { Name = "Port", Value = "Port" }, - new FlipOption { Name = "Text", Value = "Text" }, - new FlipOption { Name = "PortAndLabelOnly", Value = "LabelOnly" }, - new FlipOption { Name = "PortWithLabelText", Value = "PortWithLabelText" }, - new FlipOption { Name = "LabelOnly", Value = "LabelOnly" }, - new FlipOption { Name = "All", Value = "All" } - }; + private DiagramObjectCollection NodeCollection; + private class FlipOption + { + public string Name { get; set; } + public string Value { get; set; } // Bound value + } + + List FlipDirections = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Horizontal", Value = "Horizontal" }, + new FlipOption { Name = "Vertical", Value = "Vertical" }, + new FlipOption { Name = "Both", Value = "Both" } + }; + + List FlipModes = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Content", Value = "Content" }, + new FlipOption { Name = "Port", Value = "Port" }, + new FlipOption { Name = "Text", Value = "Text" }, + new FlipOption { Name = "PortAndLabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "PortWithLabelText", Value = "PortWithLabelText" }, + new FlipOption { Name = "LabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "All", Value = "All" } + }; + protected override void OnInitialized() { Node node1 = new Node() - { - ID = "node1", - Width = 100, - Height = 100, - OffsetX = 200, - OffsetY = 100, - Flip = FlipDirection.Horizontal, - Annotations = new DiagramObjectCollection() + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 200, + OffsetY = 100, + Flip = FlipDirection.Horizontal, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { - ID="node1annotation", - Content = "Offset(0,0)", - Offset = new DiagramPoint() { X = 0, Y = 0 } + ID="node1annotation", + Content = "Offset(0,0)", + Offset = new DiagramPoint() { X = 0, Y = 0 } } }, - Style = new ShapeStyle() - { - Fill = "#6495ED", - }, - Shape = new FlowShape() - { - Type = NodeShapes.Flow, - Shape = NodeFlowShapes.Card - }, - Ports = new DiagramObjectCollection() + Style = new ShapeStyle() + { + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Ports = new DiagramObjectCollection() { new PointPort() { @@ -140,26 +136,26 @@ The following code example shows how to flip the node. Visibility = PortVisibility.Visible, } } - }; + }; Node node2 = new Node() + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 400, + OffsetY = 100, + Flip = FlipDirection.Horizontal, + FlipMode = DiagramFlipMode.Port, + Style = new ShapeStyle() { - ID = "node2", - Width = 100, - Height = 100, - OffsetX = 400, - OffsetY = 100, - Flip = FlipDirection.Horizontal, - FlipMode = DiagramFlipMode.Port, - Style = new ShapeStyle() - { - Fill = "#6495ED", - }, - Shape = new FlowShape() - { - Type = NodeShapes.Flow, - Shape = NodeFlowShapes.Card - }, - Annotations = new DiagramObjectCollection() + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { @@ -167,55 +163,53 @@ The following code example shows how to flip the node. Offset = new DiagramPoint() { X = 0, Y = 0.5 } } }, - Ports = new DiagramObjectCollection() + Ports = new DiagramObjectCollection() { - new PointPort() - { - Style = new ShapeStyle(){ Fill = "gray" }, - Offset = new DiagramPoint() { X = 0, Y = 0 }, - Visibility = PortVisibility.Visible - } + new PointPort() + { + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Visibility = PortVisibility.Visible + } } - }; + }; NodeCollection = new DiagramObjectCollection() { node1, node2 }; } - // This method applys flipDirection to the selected node's - public void FlipDirectionChange(ChangeEventArgs args) - { - diagram.StartGroupAction(); - - if (diagram.SelectionSettings.Nodes.Count > 0) - { - for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) - { - diagram.SelectionSettings.Nodes[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); - } - } - for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) - { - diagram.SelectionSettings.Connectors[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); - } - diagram.EndGroupAction(); - - } - - //This method apply's diagramFLipMode to the selected node's - public void FlipModeChange(ChangeEventArgs args) - { - diagram.StartGroupAction(); - - if (diagram.SelectionSettings.Nodes.Count > 0) - { - for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) - { - diagram.SelectionSettings.Nodes[i].FlipMode = (DiagramFlipMode)Enum.Parse(typeof(DiagramFlipMode), args.Value.ToString()); - } - } - - diagram.EndGroupAction(); - - } + // This method applys flipDirection to the selected node's + private void FlipDirectionChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + } + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + { + diagram.SelectionSettings.Connectors[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + diagram.EndGroupAction(); + } + + //This method apply's diagramFLipMode to the selected node's + private void FlipModeChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].FlipMode = (DiagramFlipMode)Enum.Parse(typeof(DiagramFlipMode), args.Value.ToString()); + } + } + + diagram.EndGroupAction(); + } } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrysNtlgEhFRKGy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -275,67 +269,65 @@ The following code example shows how to flip the group. ```cshtml @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.DropDowns - - + + + - - + + + + @code { //Initialize the diagram's connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Define diagram's nodes collection - DiagramObjectCollection NodeCollection; - public class FlipOption - { - public string Name { get; set; } - public string Value { get; set; } // Bound value - } - - List FlipDirections = new() - { - new FlipOption { Name = "None", Value = "None" }, - new FlipOption { Name = "Horizontal", Value = "Horizontal" }, - new FlipOption { Name = "Vertical", Value = "Vertical" }, - new FlipOption { Name = "Both", Value = "Both" } - }; - - List FlipModes = new() - { - new FlipOption { Name = "None", Value = "None" }, - new FlipOption { Name = "Content", Value = "Content" }, - new FlipOption { Name = "Port", Value = "Port" }, - new FlipOption { Name = "Text", Value = "Text" }, - new FlipOption { Name = "PortAndLabelOnly", Value = "LabelOnly" }, - new FlipOption { Name = "PortWithLabelText", Value = "PortWithLabelText" }, - new FlipOption { Name = "LabelOnly", Value = "LabelOnly" }, - new FlipOption { Name = "All", Value = "All" } - }; + private DiagramObjectCollection NodeCollection; + private class FlipOption + { + public string Name { get; set; } + public string Value { get; set; } // Bound value + } + + List FlipDirections = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Horizontal", Value = "Horizontal" }, + new FlipOption { Name = "Vertical", Value = "Vertical" }, + new FlipOption { Name = "Both", Value = "Both" } + }; + + List FlipModes = new() + { + new FlipOption { Name = "None", Value = "None" }, + new FlipOption { Name = "Content", Value = "Content" }, + new FlipOption { Name = "Port", Value = "Port" }, + new FlipOption { Name = "Text", Value = "Text" }, + new FlipOption { Name = "PortAndLabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "PortWithLabelText", Value = "PortWithLabelText" }, + new FlipOption { Name = "LabelOnly", Value = "LabelOnly" }, + new FlipOption { Name = "All", Value = "All" } + }; + protected override void OnInitialized() { Node node3 = new Node() - { - ID = "node3", - Width = 100, - Height = 60, - OffsetX = 200, - OffsetY = 300, - Annotations = new DiagramObjectCollection() + { + ID = "node3", + Width = 100, + Height = 60, + OffsetX = 200, + OffsetY = 300, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { @@ -344,43 +336,43 @@ The following code example shows how to flip the group. Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } } }, - Style = new ShapeStyle() - { - Fill = "#6495ED", - }, - Shape = new FlowShape() - { - Type = NodeShapes.Flow, - Shape = NodeFlowShapes.Card - }, - Ports = new DiagramObjectCollection() + Style = new ShapeStyle() + { + Fill = "#6495ED", + }, + Shape = new FlowShape() { - new PointPort() - { ID="port3", - Style = new ShapeStyle(){ Fill = "gray" }, - Offset = new DiagramPoint() { X = 0, Y = 0 }, - Width=14,Height=14, - Visibility = PortVisibility.Visible - } + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card }, - }; + Ports = new DiagramObjectCollection() + { + new PointPort() + { ID="port3", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Width=14,Height=14, + Visibility = PortVisibility.Visible + } + }, + }; Node node4 = new Node() + { + ID = "node4", + Width = 100, + Height = 60, + OffsetX = 400, + OffsetY = 400, + Style = new ShapeStyle() { - ID = "node4", - Width = 100, - Height = 60, - OffsetX = 400, - OffsetY = 400, - Style = new ShapeStyle() - { - Fill = "#6495ED", - }, - Shape = new FlowShape() - { - Type = NodeShapes.Flow, - Shape = NodeFlowShapes.Card - }, - Annotations = new DiagramObjectCollection() + Fill = "#6495ED", + }, + Shape = new FlowShape() + { + Type = NodeShapes.Flow, + Shape = NodeFlowShapes.Card + }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { @@ -389,80 +381,76 @@ The following code example shows how to flip the group. Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } } }, - Ports = new DiagramObjectCollection() + Ports = new DiagramObjectCollection() { - new PointPort() - { ID="port4", - Style = new ShapeStyle(){ Fill = "gray" }, - Offset = new DiagramPoint() { X = 0, Y = 0 }, - Width=14,Height=14, - Visibility = PortVisibility.Visible - } + new PointPort() + { ID="port4", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Width=14,Height=14, + Visibility = PortVisibility.Visible + } }, - }; + }; NodeCollection = new DiagramObjectCollection() { node3, node4 }; NodeGroup groupNode = new NodeGroup() + { + ID = "group", + Children = new string[] { "node3", "node4" }, + Annotations = new DiagramObjectCollection() { - ID = "group", - Children = new string[] { "node3", "node4" }, - Annotations = new DiagramObjectCollection() + new ShapeAnnotation { - new ShapeAnnotation - { - ID="anno4", - Content = "GroupNode", - Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } - } - }, - Ports = new DiagramObjectCollection() + ID="anno4", + Content = "GroupNode", + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 } + } + }, + Ports = new DiagramObjectCollection() { - new PointPort() - { ID="port4", - Style = new ShapeStyle(){ Fill = "gray" }, - Offset = new DiagramPoint() { X = 0, Y = 0}, + new PointPort() + { ID="port4", + Style = new ShapeStyle(){ Fill = "gray" }, + Offset = new DiagramPoint() { X = 0, Y = 0}, Width=14,Height=14, - Visibility = PortVisibility.Visible - } + Visibility = PortVisibility.Visible + } }, - }; + }; NodeCollection.Add(groupNode); } - // This method applys flipDirection to the selected node's - public void FlipDirectionChange(ChangeEventArgs args) - { - diagram.StartGroupAction(); - - if (diagram.SelectionSettings.Nodes.Count > 0) - { - for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) - { - diagram.SelectionSettings.Nodes[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); - } - } - for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) - { - diagram.SelectionSettings.Connectors[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); - } - diagram.EndGroupAction(); - - } - - //This method apply's diagramFLipMode to the selected node's - public void FlipModeChange(ChangeEventArgs args) - { - diagram.StartGroupAction(); - - if (diagram.SelectionSettings.Nodes.Count > 0) - { - for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) - { - diagram.SelectionSettings.Nodes[i].FlipMode = (DiagramFlipMode)Enum.Parse(typeof(DiagramFlipMode), args.Value.ToString()); - } - } - - diagram.EndGroupAction(); - - } + + // This method applys flipDirection to the selected node's + private void FlipDirectionChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + } + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + { + diagram.SelectionSettings.Connectors[i].Flip = (FlipDirection)Enum.Parse(typeof(FlipDirection), args.Value.ToString()); + } + diagram.EndGroupAction(); + } + + //This method apply's diagramFLipMode to the selected node's + private void FlipModeChange(ChangeEventArgs args) + { + diagram.StartGroupAction(); + if (diagram.SelectionSettings.Nodes.Count > 0) + { + for (int i = 0; i < diagram.SelectionSettings.Nodes.Count; i++) + { + diagram.SelectionSettings.Nodes[i].FlipMode = (DiagramFlipMode)Enum.Parse(typeof(DiagramFlipMode), args.Value.ToString()); + } + } + diagram.EndGroupAction(); + } } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VZBeiZDvgaptrZdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -492,65 +480,71 @@ The [Flip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeB The following code example shows how to flip the connector. ```cshtml - @using Syncfusion.Blazor.Diagram + - - + + + + @code { - DiagramObjectCollection connectors = new DiagramObjectCollection(); - public SfDiagramComponent diagram; - DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() - { + { Connector Connector = new Connector() { ID = "connector2", Annotations = new DiagramObjectCollection() { - new PathAnnotation - { + new PathAnnotation + { Content = "Offset as 0.5", - Offset = 0.5 + Offset = 0.5 }, - }, + }, SourcePoint = new DiagramPoint() { X = 100, Y = 100 }, - TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, + TargetPoint = new DiagramPoint() { X = 200, Y = 200 }, Type = ConnectorSegmentType.Straight }; - connectors.Add(Connector); + connectors.Add(Connector); } - public void Horizontal() - { + + private void Horizontal() + { if (diagram.SelectionSettings.Connectors.Count > 0) { - for(int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) { diagram.SelectionSettings.Connectors[i].Flip = FlipDirection.Horizontal; } - } + } } - public void Vertical() + + private void Vertical() { if (diagram.SelectionSettings.Connectors.Count > 0) { - for(int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) { diagram.SelectionSettings.Connectors[i].Flip = FlipDirection.Vertical; } } } - public void Both() - { + + private void Both() + { if (diagram.SelectionSettings.Connectors.Count > 0) { - for(int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) + for (int i = 0; i < diagram.SelectionSettings.Connectors.Count; i++) { - diagram.SelectionSettings.Connectors[i].Flip = FlipDirection.Both; + diagram.SelectionSettings.Connectors[i].Flip = FlipDirection.Both; } } } diff --git a/blazor/diagram/getting-started-with-maui-app.md b/blazor/diagram/getting-started-with-maui-app.md index 3aefc33a4a..d7dc43e9c3 100644 --- a/blazor/diagram/getting-started-with-maui-app.md +++ b/blazor/diagram/getting-started-with-maui-app.md @@ -87,7 +87,6 @@ namespace MauiBlazorWindow; builder.Services.AddBlazorWebViewDeveloperTools(); builder.Logging.AddDebug(); #endif - return builder.Build(); } } @@ -131,12 +130,12 @@ Add the Syncfusion® Diagram component in th @code { - SfDiagramComponent diagram; - int connectorCount = 0; + private SfDiagramComponent diagram; + private int connectorCount = 0; //Defines Diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Defines Diagram's connectors collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -349,7 +348,6 @@ namespace MauiBlazorWindow; builder.Services.AddBlazorWebViewDeveloperTools(); builder.Logging.AddDebug(); #endif - return builder.Build(); } } @@ -393,12 +391,12 @@ Add the Syncfusion® Diagram component in th @code { - SfDiagramComponent diagram; - int connectorCount = 0; + private SfDiagramComponent diagram; + private int connectorCount = 0; //Defines Diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Defines Diagram's connectors collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { diff --git a/blazor/diagram/getting-started-with-wasm-app.md b/blazor/diagram/getting-started-with-wasm-app.md index d26343f5e0..8b51fb5ea5 100644 --- a/blazor/diagram/getting-started-with-wasm-app.md +++ b/blazor/diagram/getting-started-with-wasm-app.md @@ -349,12 +349,12 @@ Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { - SfDiagramComponent diagram; - int connectorCount = 0; + private SfDiagramComponent diagram; + private int connectorCount = 0; //Defines Diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Defines Diagram's connectors collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + privateDiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -498,8 +498,8 @@ A built-in automatic layout algorithm is designed specifically for organizationa @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //To configure every subtree of the organizational chart. private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) @@ -537,6 +537,7 @@ A built-in automatic layout algorithm is designed specifically for organizationa public string Team { get; set; } public string Role { get; set; } } + public object DataSource = new List() { new OrgChartDataModel() { Id= "1", Role= "General Manager" }, diff --git a/blazor/diagram/getting-started-with-web-app.md b/blazor/diagram/getting-started-with-web-app.md index f39a598438..0b55da03e7 100644 --- a/blazor/diagram/getting-started-with-web-app.md +++ b/blazor/diagram/getting-started-with-web-app.md @@ -475,12 +475,12 @@ Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { - SfDiagramComponent diagram; - int connectorCount = 0; + private SfDiagramComponent diagram; + private int connectorCount = 0; //Defines Diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Defines Diagram's connectors collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -624,8 +624,8 @@ A built-in automatic layout algorithm is designed specifically for organizationa @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //To configure every subtree of the organizational chart. private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) @@ -663,6 +663,7 @@ A built-in automatic layout algorithm is designed specifically for organizationa public string Team { get; set; } public string Role { get; set; } } + public object DataSource = new List() { new OrgChartDataModel() { Id= "1", Role= "General Manager" }, diff --git a/blazor/diagram/getting-started.md b/blazor/diagram/getting-started.md index 0a1358d994..fefbf35f23 100644 --- a/blazor/diagram/getting-started.md +++ b/blazor/diagram/getting-started.md @@ -338,9 +338,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A .... - - //Blazor Diagram Component script reference. - + //Blazor Diagram Component script reference. ``` @@ -392,12 +390,12 @@ Create and add a [Node](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. @code { - SfDiagramComponent diagram; - int connectorCount = 0; + private SfDiagramComponent diagram; + private int connectorCount = 0; //Defines Diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Defines Diagram's connectors collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -541,8 +539,8 @@ A built-in automatic layout algorithm is designed specifically for organizationa @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //To configure every subtree of the organizational chart. private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) @@ -580,6 +578,7 @@ A built-in automatic layout algorithm is designed specifically for organizationa public string Team { get; set; } public string Role { get; set; } } + public object DataSource = new List() { new OrgChartDataModel() { Id= "1", Role= "General Manager" }, @@ -593,7 +592,7 @@ A built-in automatic layout algorithm is designed specifically for organizationa {% endhighlight %} {% endtabs %} -You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout2) +A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout2) {% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDsrYqBZBcmEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Organization Diagram ChildNode in Vertical Right](images/blazor-diagram-childnode-at-vertical-right.png)" %} diff --git a/blazor/diagram/grid-lines.md b/blazor/diagram/grid-lines.md index 8eff476a12..10f176f625 100644 --- a/blazor/diagram/grid-lines.md +++ b/blazor/diagram/grid-lines.md @@ -31,11 +31,11 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra @code { //Sets the snap interval. - public double[] SnapInterval { get; set; } = new double[] + private double[] SnapInterval { get; set; } = new double[] { 10 }; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -107,10 +107,10 @@ The appearance of the grid lines can be changed into dots by using the [GridType @code { - public double[] HDotInterval { get; set; } = new double[] { 3, 20, 1, 20, 1, 20 }; - public double[] VDotInterval { get; set; } = new double[] { 3, 20, 1, 20, 1, 20, 1, 20, 1, 20 }; - public double[] HInterval { get; set; } = new double[] { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }; - public double[] VInterval { get; set; } = new double[] { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }; + private double[] HDotInterval { get; set; } = new double[] { 3, 20, 1, 20, 1, 20 }; + private double[] VDotInterval { get; set; } = new double[] { 3, 20, 1, 20, 1, 20, 1, 20, 1, 20 }; + private double[] HInterval { get; set; } = new double[] { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }; + private double[] VInterval { get; set; } = new double[] { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }; } ``` @@ -143,7 +143,7 @@ The following code example illustrates how to customize the thickness of lines a @code { //Sets the line intervals for the gridlines. - public double[] LineInterval { get; set; } = new double[] + private double[] LineInterval { get; set; } = new double[] { 1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15 }; @@ -174,8 +174,8 @@ Snapping to gridlines can be enabled or disabled with the [SnapConstraints](http @code { //Sets the snap constraints. - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToLines; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -220,11 +220,11 @@ By default, objects snapped towards the nearest gridline. The gridline or positi @code { //Sets the snap interval. - public double[] SnapInterval { get; set; } = new double[] + private double[] SnapInterval { get; set; } = new double[] { 10 }; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -266,8 +266,8 @@ The snap to object provides visual cues to assist with aligning and spacing diag @code { //Sets the Snap to objects constraints. - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -307,18 +307,20 @@ The following code example illustrates how to customize the snap line style. ```cshtml -@page "/" @using Syncfusion.Blazor.Diagram + + @code { //Sets the Snap to objects constraints. - public SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject | SnapConstraints.SnapToLines; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - ShapeStyle snapLineStyle = new ShapeStyle() { StrokeColor = "green", StrokeWidth = 3 }; + private SnapConstraints snapConstraints = SnapConstraints.ShowLines | SnapConstraints.SnapToObject | SnapConstraints.SnapToLines; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private ShapeStyle snapLineStyle = new ShapeStyle() { StrokeColor = "green", StrokeWidth = 3 }; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); diff --git a/blazor/diagram/group.md b/blazor/diagram/group.md index 31a79ed893..df8a7a6733 100644 --- a/blazor/diagram/group.md +++ b/blazor/diagram/group.md @@ -42,8 +42,8 @@ To create a group using Nodes and Connectors in the Blazor Diagram, refer to the @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -115,8 +115,9 @@ The following code illustrates how to ungroup at runtime. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = createNode("node1", 100, 100, "Node1"); @@ -129,7 +130,7 @@ The following code illustrates how to ungroup at runtime. nodes.Add(groupNode); } - public Node createNode(string id, double offsetX, double offsetY, string content) + private Node createNode(string id, double offsetX, double offsetY, string content) { Node node = new Node() { @@ -185,54 +186,55 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @inject IJSRuntime js @using Syncfusion.Blazor.Buttons - @functions { - SfDiagramComponent diagram; - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() - { - OffsetX = 100, - OffsetY = 150, - Height = 100, - Width = 100, - ID = "node1", + { + OffsetX = 100, + OffsetY = 150, + Height = 100, + Width = 100, + ID = "node1", - }; + }; NodeCollection.Add(node1); Node node2 = new Node() - { - OffsetX = 400, - OffsetY = 200, - Height = 100, - Width = 100, - ID = "node2", - - }; + { + OffsetX = 400, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node2", + + }; NodeCollection.Add(node2); NodeGroup group1 = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" }, + OffsetX = 300, + OffsetY = 300, + Annotations = new DiagramObjectCollection() { - ID = "group1", - Children = new string[] { "node1", "node2" }, - OffsetX = 300, - OffsetY = 300, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "Group1" - } - }, - }; + new ShapeAnnotation() + { + Content = "Group1" + } + }, + }; NodeCollection.Add(group1); } - public async Task CloneGroup() + + private async Task CloneGroup() { Node node2 = NodeCollection[0].Clone() as Node; node2.ID = RandomId(); @@ -256,7 +258,6 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn .Select(s => s[random.Next(s.Length)]).ToArray()); #pragma warning restore CA5394 // Do not use insecure randomness } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVeCDNPfjyioMFP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -279,8 +280,8 @@ The following code illustrates how to add padding to a node group. @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); - NodeGroup groupNode = new NodeGroup(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private NodeGroup groupNode = new NodeGroup(); protected override void OnInitialized() { @@ -294,7 +295,7 @@ The following code illustrates how to add padding to a node group. nodes.Add(groupNode); } - public Node createNode(string id, double offsetX, double offsetY, string content) + private Node createNode(string id, double offsetX, double offsetY, string content) { Node node = new Node() { @@ -340,15 +341,14 @@ The following code illustrates how a node group is added at runtime. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @* Initialize the diagram with NodeCollection *@ @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); - NodeGroup groupNode = new NodeGroup(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private NodeGroup groupNode = new NodeGroup(); protected override void OnInitialized() { @@ -360,7 +360,7 @@ The following code illustrates how a node group is added at runtime. nodes.Add(node2); } - public Node createNode(string id, double offsetX, double offsetY, string content) + private Node createNode(string id, double offsetX, double offsetY, string content) { Node node = new Node() { @@ -403,16 +403,15 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @* Initialize the diagram with nodes *@ @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - NodeGroup groupNode = new NodeGroup(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private NodeGroup groupNode = new NodeGroup(); protected override void OnInitialized() { @@ -425,7 +424,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn nodes.Add(groupNode); } - public Node createNode(string id, double offsetX, double offsetY, string content) + private Node createNode(string id, double offsetX, double offsetY, string content) { Node node = new Node() { @@ -495,15 +494,14 @@ Change the position of the node group similar to a node. For more information ab @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @* Initialize the diagram with NodeCollection *@ @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); - NodeGroup groupNode = new NodeGroup(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private NodeGroup groupNode = new NodeGroup(); protected override void OnInitialized() { @@ -517,7 +515,7 @@ Change the position of the node group similar to a node. For more information ab nodes.Add(groupNode); } - public Node createNode(string id, double offsetX, double offsetY, string content) + private Node createNode(string id, double offsetX, double offsetY, string content) { Node node = new Node() { diff --git a/blazor/diagram/how-to.md b/blazor/diagram/how-to.md index f1f9b47978..79fcc15b2c 100644 --- a/blazor/diagram/how-to.md +++ b/blazor/diagram/how-to.md @@ -22,7 +22,7 @@ Create a node in a Blazor diagram, define a Node object and add it to the diagra @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -64,46 +64,45 @@ The [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B - - + @code { //Reference the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; public async void AddDiagramElementMethod() { Node node1 = new Node() + { + OffsetX = 100, + OffsetY = 100, + Height = 50, + Ports = new DiagramObjectCollection() { - OffsetX = 100, - OffsetY = 100, - Height = 50, - Ports = new DiagramObjectCollection() + new PointPort() { - new PointPort() - { - ID="port1", - Visibility = PortVisibility.Visible, - Offset = new DiagramPoint() { X = 1, Y = 0.5}, - Height = 10, Width = 10, - Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} - } - }, - Width = 100, - ID = "node1", - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + ID="port1", + Visibility = PortVisibility.Visible, + Offset = new DiagramPoint() { X = 1, Y = 0.5}, + Height = 10, Width = 10, + Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} + } + }, + Width = 100, + ID = "node1", + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; Node node2 = new Node() - { - OffsetX = 300, - OffsetY = 300, - Height = 50, - Width = 100, - ID = "node2", - Ports = new DiagramObjectCollection() + { + OffsetX = 300, + OffsetY = 300, + Height = 50, + Width = 100, + ID = "node2", + Ports = new DiagramObjectCollection() { new PointPort() { @@ -112,39 +111,39 @@ The [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.B Offset = new DiagramPoint() { X = 0, Y = 0.5}, Height = 10, Width = 10, Style = new ShapeStyle(){Fill = "yellow", StrokeColor = "yellow"} - } + } }, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" }, + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; Connector Connector = new Connector() + { + ID = "connector1", + //Source node id of the connector. + SourceID = "node1", + //source node port id. + SourcePortID = "port1", + //Target node id of the connector. + TargetID = "node2", + //Target node port id. + TargetPortID = "port2", + TargetDecorator = new DecoratorSettings() { - ID = "connector1", - //Source node id of the connector. - SourceID = "node1", - //source node port id. - SourcePortID = "port1", - //Target node id of the connector. - TargetID = "node2", - //Target node port id. - TargetPortID = "port2", - TargetDecorator = new DecoratorSettings() - { - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "#6495ED", - } - }, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED", - }, - // Type of the connector - Type = ConnectorSegmentType.Straight, - }; + } + }, + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + // Type of the connector + Type = ConnectorSegmentType.Straight, + }; DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); NodeCollection.Add(node1); NodeCollection.Add(node2); @@ -166,58 +165,59 @@ The [Clear](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi @using Syncfusion.Blazor.Buttons - + @code { //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection Nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Nodes.Add(new Node() - { - ID = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } - }); + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }); Nodes.Add(new Node() - { - ID = "node2", - OffsetX = 270, - OffsetY = 70, - Width = 50, - Height = 50, - }); + { + ID = "node2", + OffsetX = 270, + OffsetY = 70, + Width = 50, + Height = 50, + }); Nodes.Add(new Node() - { - ID = "node3", - OffsetX = 330, - OffsetY = 130, - Width = 50, - Height = 50, - }); + { + ID = "node3", + OffsetX = 330, + OffsetY = 130, + Width = 50, + Height = 50, + }); Nodes.Add(new NodeGroup() - { - ID = "group", - Children = new string[] { "node2", "node3" }, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } - }); + { + ID = "group", + Children = new string[] { "node2", "node3" }, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } + }); Connectors.Add(new Connector() - { - SourceID = "node1", - TargetID = "group", - Style = new ShapeStyle() { StrokeColor = "#6495ED" }, - TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } } - }); + { + SourceID = "node1", + TargetID = "group", + Style = new ShapeStyle() { StrokeColor = "#6495ED" }, + TargetDecorator = new DecoratorSettings() { Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" } } + }); } + private void Clear() { diagram.Clear(); @@ -244,85 +244,90 @@ The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfD -@code { + +@code +{ //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection Nodes = new DiagramObjectCollection(); + private DiagramObjectCollection Nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); //Initialize the diagram's nodebase collection - DiagramObjectCollection DiagramElements = new DiagramObjectCollection(); + private DiagramObjectCollection DiagramElements = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + OffsetX = 200, + OffsetY = 100, + Height = 50, + Width = 100, + Style = new ShapeStyle() { - ID = "node1", - OffsetX = 200, - OffsetY = 100, - Height = 50, - Width = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; Nodes.Add(node1); Node node2 = new Node() + { + ID = "node2", + OffsetX = 200, + OffsetY = 200, + Height = 50, + Width = 100, + Style = new ShapeStyle() { - ID = "node2", - OffsetX = 200, - OffsetY = 200, - Height = 50, - Width = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; Nodes.Add(node2); Node node3 = new Node() + { + ID = "node3", + OffsetX = 200, + OffsetY = 300, + Height = 50, + Width = 100, + Style = new ShapeStyle() { - ID = "node3", - OffsetX = 200, - OffsetY = 300, - Height = 50, - Width = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; Nodes.Add(node3); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - Type = ConnectorSegmentType.Straight, - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + Type = ConnectorSegmentType.Straight, + }; Connectors.Add(connector1); Connector connector2 = new Connector() - { - ID = "connector2", - SourceID = "node2", - TargetID = "node3", - Type = ConnectorSegmentType.Straight, - }; + { + ID = "connector2", + SourceID = "node2", + TargetID = "node3", + Type = ConnectorSegmentType.Straight, + }; Connectors.Add(connector2); NodeGroup groupNode = new NodeGroup(); groupNode.Children = new string[] { "node2", "node3" }; Nodes.Add(groupNode); } + //Deletes DiagramElements with null parameter - public void Delete() + private void Delete() { diagram.Delete(); } + //Deletes DiagramElements with parameter private void DeletewithArgument() { @@ -330,7 +335,6 @@ The [Delete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfD DiagramElements.Add(diagram.Nodes[1]); diagram.Delete(DiagramElements); } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLyMZNwplRtkZvS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -362,74 +366,74 @@ The [ResetZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } - public void ZoomIn() + private void ZoomIn() { diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 }); } - public void ZoomOut() + + private void ZoomOut() { diagram.Zoom(1 / 1.2, new DiagramPoint { X = 100, Y = 100 }); } + private void ResetZoom() { diagram.ResetZoom(); @@ -465,67 +469,66 @@ The [ClearSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } + //Method to clear the selected nodes/connectors. - public void ClearSelection() + private void ClearSelection() { diagram.ClearSelection(); } @@ -558,67 +561,67 @@ The [GetObject](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); } + //Method to get object - public void GetObjectMethod() + private void GetObjectMethod() { Node node = diagram.GetObject("node1") as Node; diagram.Select(new System.Collections.ObjectModel.ObservableCollection (){node}); @@ -652,67 +655,66 @@ The [GetPageBounds](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } + //Method to get pagebounds value - public void GetPageBounds() + private void GetPageBounds() { DiagramRect diagramRect = diagram.GetPageBounds(); } @@ -745,67 +747,66 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } + //Method to select all objects in the diagram - public void SelectAllMethod() + private void SelectAllMethod() { diagram.SelectAll(); } @@ -838,67 +839,66 @@ The [Scale](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } + //Method to scale the selected objects in the diagram - public void ScaleMethod() + private void ScaleMethod() { diagram.Scale(diagram.SelectionSettings.Nodes[0], 10, 10, new DiagramPoint(0.5, 0.5)); } @@ -913,73 +913,72 @@ The [GetCustomCursor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di ```cshtml @using Syncfusion.Blazor.Diagram - - - - -@code { - public SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); - protected override void OnInitialized() + 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } - - public string cursor(DiagramElementAction action, bool active, string handle) - { - string cursors = null; + + private string cursor(DiagramElementAction action, bool active, string handle) + { + string cursors = null; if (action == DiagramElementAction.Select) { cursors = "crosshair"; } return cursors; - } - } + } +} ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVICjNmfaRXpFsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -992,74 +991,72 @@ The [BeginUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - + - - - - + + + -@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } - public void PropertyUpdate() + + private void PropertyUpdate() { diagram.BeginUpdate(); diagram.Nodes[0].Height = 150; diagram.Nodes[0].Width = 150; diagram.EndUpdateAsync(); - } } ``` @@ -1090,67 +1087,66 @@ The [UnSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.S
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } + //Method to unselect the selected objects - public void UnSelectMethod() + private void UnSelectMethod() { diagram.UnSelect(diagram.SelectionSettings.Nodes[0] as IDiagramObject); } @@ -1184,67 +1180,66 @@ The [Clone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDi
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); - } + //Method to clone the diagram - public void CloneMethod() + private void CloneMethod() { diagram.Clone(); } @@ -1260,23 +1255,24 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - + + @code { //Reference the diagram - public SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Intialize diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); - NodeGroup groupNode = new NodeGroup(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private NodeGroup groupNode = new NodeGroup(); //Intialize diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Initialize diagram's selectionsettings. - DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); - //Initialize the diagram's userhandle. - DiagramObjectCollection UserHandles = new DiagramObjectCollection(); - public string cursor(DiagramElementAction action, bool active, string handle) + private DiagramSelectionSettings SelectedModel = new DiagramSelectionSettings(); + //Initialize the diagram's userhandle. + private DiagramObjectCollection UserHandles = new DiagramObjectCollection(); + + private string cursor(DiagramElementAction action, bool active, string handle) { string cursors = null; if (handle == "changeCursor") @@ -1285,7 +1281,8 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } return cursors; } - public InteractionControllerBase tools(DiagramElementAction action, string id) + + private InteractionControllerBase tools(DiagramElementAction action, string id) { InteractionControllerBase tool = null; if (id == "clone") @@ -1298,13 +1295,16 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } return tool; } + public class AddDeleteTool : DragController { - SfDiagramComponent sfDiagram; + private SfDiagramComponent sfDiagram; + public AddDeleteTool(SfDiagramComponent Diagram) : base(Diagram) { sfDiagram = Diagram; } + public override void OnMouseUp(DiagramMouseEventArgs args) { bool GroupAction = false; @@ -1343,13 +1343,16 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag this.InAction = true; } } + public class CloneTool : DragController { - SfDiagramComponent sfDiagram; + private SfDiagramComponent sfDiagram; + public CloneTool(SfDiagramComponent Diagram) : base(Diagram) { sfDiagram = Diagram; } + public override void OnMouseDown(DiagramMouseEventArgs args) { NodeBase newObject; @@ -1370,50 +1373,51 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag this.InAction = true; } } + protected override void OnInitialized() { UserHandle cloneHandle = new UserHandle() - { - Name = "clone", - PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", - Offset = 0, - Visible = true, - Side = Direction.Top, - Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, - Size = 30, - PathColor = "yellow", - BorderColor = "red", - BackgroundColor = "green", - BorderWidth = 3, - }; + { + Name = "clone", + PathData = "M60.3,18H27.5c-3,0-5.5,2.4-5.5,5.5v38.2h5.5V23.5h32.7V18z M68.5,28.9h-30c-3,0-5.5,2.4-5.5,5.5v38.2c0,3,2.4,5.5,5.5,5.5h30c3,0,5.5-2.4,5.5-5.5V34.4C73.9,31.4,71.5,28.9,68.5,28.9z M68.5,72.5h-30V34.4h30V72.5z", + Offset = 0, + Visible = true, + Side = Direction.Top, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; UserHandle nodeDelete = new UserHandle() - { - Name = "nodeDelete", - PathData = "M 33.986328 15 A 1.0001 1.0001 0 0 0 33 16 L 33 71.613281 A 1.0001 1.0001 0 0 0 34.568359 72.435547 L 47.451172 63.53125 L 56.355469 85.328125 A 1.0001 1.0001 0 0 0 57.667969 85.871094 L 66.191406 82.298828 A 1.0001 1.0001 0 0 0 66.730469 80.998047 L 57.814453 59.171875 L 73.195312 56.115234 A 1.0001 1.0001 0 0 0 73.708984 54.429688 L 34.708984 15.294922 A 1.0001 1.0001 0 0 0 33.986328 15 z M 35 18.419922 L 70.972656 54.517578 L 56.234375 57.447266 A 1.0001 1.0001 0 0 0 55.503906 58.806641 L 64.503906 80.835938 L 57.826172 83.636719 L 48.832031 61.623047 A 1.0001 1.0001 0 0 0 47.337891 61.177734 L 35 69.707031 L 35 18.419922 z M 37.494141 23.970703 A 0.50005 0.50005 0 0 0 37 24.470703 L 37 58.5 A 0.50005 0.50005 0 1 0 38 58.5 L 38 25.679688 L 51.123047 38.849609 A 0.50005 0.50005 0 1 0 51.832031 38.144531 L 37.853516 24.117188 A 0.50005 0.50005 0 0 0 37.494141 23.970703 z M 53.496094 40.021484 A 0.50005 0.50005 0 0 0 53.146484 40.878906 L 64.898438 52.671875 L 61.359375 53.373047 A 0.50005 0.50005 0 1 0 61.552734 54.353516 L 66.007812 53.470703 A 0.50005 0.50005 0 0 0 66.263672 52.626953 L 53.853516 40.173828 A 0.50005 0.50005 0 0 0 53.496094 40.021484 z M 58.521484 53.941406 A 0.50005 0.50005 0 0 0 58.4375 53.951172 L 51.482422 55.330078 A 0.50005 0.50005 0 0 0 51.117188 56.009766 L 51.794922 57.666016 A 0.50016022 0.50016022 0 1 0 52.720703 57.287109 L 52.273438 56.193359 L 58.632812 54.931641 A 0.50005 0.50005 0 0 0 58.521484 53.941406 z M 53.089844 59.017578 A 0.50005 0.50005 0 0 0 52.630859 59.714844 L 53.037109 60.708984 A 0.50005 0.50005 0 1 0 53.962891 60.332031 L 53.556641 59.335938 A 0.50005 0.50005 0 0 0 53.089844 59.017578 z M 54.300781 61.984375 A 0.50005 0.50005 0 0 0 53.841797 62.679688 L 60.787109 79.679688 A 0.50016068 0.50016068 0 0 0 61.712891 79.300781 L 54.767578 62.302734 A 0.50005 0.50005 0 0 0 54.300781 61.984375 z", - Offset = 1, - Visible = true, - Side = Direction.Left, - Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, - Size = 30, - PathColor = "yellow", - BorderColor = "red", - BackgroundColor = "green", - BorderWidth = 3, - }; + { + Name = "nodeDelete", + PathData = "M 33.986328 15 A 1.0001 1.0001 0 0 0 33 16 L 33 71.613281 A 1.0001 1.0001 0 0 0 34.568359 72.435547 L 47.451172 63.53125 L 56.355469 85.328125 A 1.0001 1.0001 0 0 0 57.667969 85.871094 L 66.191406 82.298828 A 1.0001 1.0001 0 0 0 66.730469 80.998047 L 57.814453 59.171875 L 73.195312 56.115234 A 1.0001 1.0001 0 0 0 73.708984 54.429688 L 34.708984 15.294922 A 1.0001 1.0001 0 0 0 33.986328 15 z M 35 18.419922 L 70.972656 54.517578 L 56.234375 57.447266 A 1.0001 1.0001 0 0 0 55.503906 58.806641 L 64.503906 80.835938 L 57.826172 83.636719 L 48.832031 61.623047 A 1.0001 1.0001 0 0 0 47.337891 61.177734 L 35 69.707031 L 35 18.419922 z M 37.494141 23.970703 A 0.50005 0.50005 0 0 0 37 24.470703 L 37 58.5 A 0.50005 0.50005 0 1 0 38 58.5 L 38 25.679688 L 51.123047 38.849609 A 0.50005 0.50005 0 1 0 51.832031 38.144531 L 37.853516 24.117188 A 0.50005 0.50005 0 0 0 37.494141 23.970703 z M 53.496094 40.021484 A 0.50005 0.50005 0 0 0 53.146484 40.878906 L 64.898438 52.671875 L 61.359375 53.373047 A 0.50005 0.50005 0 1 0 61.552734 54.353516 L 66.007812 53.470703 A 0.50005 0.50005 0 0 0 66.263672 52.626953 L 53.853516 40.173828 A 0.50005 0.50005 0 0 0 53.496094 40.021484 z M 58.521484 53.941406 A 0.50005 0.50005 0 0 0 58.4375 53.951172 L 51.482422 55.330078 A 0.50005 0.50005 0 0 0 51.117188 56.009766 L 51.794922 57.666016 A 0.50016022 0.50016022 0 1 0 52.720703 57.287109 L 52.273438 56.193359 L 58.632812 54.931641 A 0.50005 0.50005 0 0 0 58.521484 53.941406 z M 53.089844 59.017578 A 0.50005 0.50005 0 0 0 52.630859 59.714844 L 53.037109 60.708984 A 0.50005 0.50005 0 1 0 53.962891 60.332031 L 53.556641 59.335938 A 0.50005 0.50005 0 0 0 53.089844 59.017578 z M 54.300781 61.984375 A 0.50005 0.50005 0 0 0 53.841797 62.679688 L 60.787109 79.679688 A 0.50016068 0.50016068 0 0 0 61.712891 79.300781 L 54.767578 62.302734 A 0.50005 0.50005 0 0 0 54.300781 61.984375 z", + Offset = 1, + Visible = true, + Side = Direction.Left, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; UserHandle changeCursor = new UserHandle() - { - Name = "changeCursor", - Offset = 0.5, - ImageUrl = "https://www.w3schools.com/images/w3schools_green.jpg", - Visible = true, - Side = Direction.Bottom, - Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, - Size = 30, - PathColor = "yellow", - BorderColor = "red", - BackgroundColor = "green", - BorderWidth = 3, - }; + { + Name = "changeCursor", + Offset = 0.5, + ImageUrl = "https://www.w3schools.com/images/w3schools_green.jpg", + Visible = true, + Side = Direction.Bottom, + Margin = new DiagramThickness { Top = 0, Bottom = 0, Left = 0, Right = 0 }, + Size = 30, + PathColor = "yellow", + BorderColor = "red", + BackgroundColor = "green", + BorderWidth = 3, + }; UserHandles = new DiagramObjectCollection() { cloneHandle,nodeDelete,changeCursor @@ -1421,34 +1425,34 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag SelectedModel.UserHandles = UserHandles; nodes = new DiagramObjectCollection(); Node DiagramNode = new Node() - { - ID = "node1", - OffsetX = 100, - OffsetY = 100, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }, - Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } - }; + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "black" }, + Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Node" } } + }; connectors = new DiagramObjectCollection(); Connector Connector1 = new Connector() + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, + Annotations = new DiagramObjectCollection() { - ID = "connector1", - SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, - TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, - Annotations = new DiagramObjectCollection() - { - new PathAnnotation() - { - ID = "connector1", - Offset = 0, - Visibility = true, - Style = new TextStyle(){ Color ="red", FontSize =12, TextAlign = TextAlign.Right, - }, - } + new PathAnnotation() + { + ID = "connector1", + Offset = 0, + Visibility = true, + Style = new TextStyle(){ Color ="red", FontSize =12, TextAlign = TextAlign.Right, + }, + } }, - Type = ConnectorSegmentType.Bezier - }; + Type = ConnectorSegmentType.Bezier + }; nodes.Add(DiagramNode); connectors.Add(Connector1); } @@ -1479,7 +1483,6 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
-
@@ -1487,58 +1490,57 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag
-
-@code { +@code +{ //Reference the diagram - public SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - + private 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" } - }; + { + 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" } - }; + { + 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() { - 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, - }; + } + }, + TargetID = "node2", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "#6495ED", + }, + Type = ConnectorSegmentType.Straight, + }; connectors.Add(Connector); nodes.Add(node); nodes.Add(node2); @@ -1546,12 +1548,13 @@ The [GetCustomTool](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diag } //Method to zoom the diagram - public void Zoom() + private void Zoom() { diagram.Zoom(1.2, new DiagramPoint { X = 100, Y = 100 }); } + //Method to pan the diagram - public void Pan() + private void Pan() { diagram.Pan(100, 200, new DiagramPoint { X = 100, Y = 100 }); } @@ -1579,7 +1582,8 @@ The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl @code { //Reference the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; + //Creates nodes with some default values. private void OnNodeCreating(IDiagramObject obj) { @@ -1598,9 +1602,9 @@ The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl connectors.Type = ConnectorSegmentType.Bezier; connectors.Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }; connectors.TargetDecorator = new DecoratorSettings - { - Shape = DecoratorShape.None, - }; + { + Shape = DecoratorShape.None, + }; } public class MindMapDetails @@ -1626,15 +1630,16 @@ The [RefreshDataSourceAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl new MindMapDetails() { Id= "10", Label= "Ideas", ParentId ="5", Branch = "subRight" }, new MindMapDetails() { Id= "11", Label= "Engagement", ParentId ="5", Branch = "subRight" }, }; + private async Task RefreshDataSource() { DataSource = new List() - { - new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, - new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, - new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, - new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, - new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, + { + new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, + new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, + new MindMapDetails() { Id= "3", Label="Complementing", ParentId ="1", Branch = "Left" }, + new MindMapDetails() { Id= "4", Label="Sessions", ParentId ="2", Branch = "subRight" }, + new MindMapDetails() { Id= "5", Label="Complementing", ParentId ="2", Branch = "subRight" }, }; await Diagram.RefreshDataSourceAsync(); } @@ -1659,8 +1664,8 @@ The following code illustrates how to set background color for node. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -1675,17 +1680,18 @@ The following code illustrates how to set background color for node. // Size of the node. Width = 100, Height = 100, - BackgroundColor = "red", - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" + BackgroundColor = "red", + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" }, // Pivot of the node. Pivot = new DiagramPoint() { X = 0, Y = 0 } }; nodes.Add(node); } + private void GetParent() { IDiagramObject parent = diagram.Nodes[0].GetParent(); @@ -1709,36 +1715,36 @@ Here is an example demonstrating how to use the [EnableChunkMessages](https://he ```cshtml @using Syncfusion.Blazor.Diagram - + @code { //Initialize the Nodes Collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { int offsetX = 100; int offsetY = 100; double count = 1; - for(int i=1; i<=200; i++) + for (int i = 1; i <= 200; i++) { Node node = new Node() - { - ID = "node" + i, - OffsetX = count * offsetX, - OffsetY = offsetY, - Width = 100, - Height = 100, - Annotations = new DiagramObjectCollection() { - new ShapeAnnotation() { Content = "Annotation for the Node" + i.ToString() } - } - }; - count += 1.5; - if (i % 5 == 0) - { - count = 1; - offsetX = 100; - offsetY = offsetY + 200; + { + ID = "node" + i, + OffsetX = count * offsetX, + OffsetY = offsetY, + Width = 100, + Height = 100, + Annotations = new DiagramObjectCollection() { + new ShapeAnnotation() { Content = "Annotation for the Node" + i.ToString() } } + }; + count += 1.5; + if (i % 5 == 0) + { + count = 1; + offsetX = 100; + offsetY = offsetY + 200; + } nodes.Add(node); } } diff --git a/blazor/diagram/interaction.md b/blazor/diagram/interaction.md index ba96e062c7..23bea741a4 100644 --- a/blazor/diagram/interaction.md +++ b/blazor/diagram/interaction.md @@ -30,13 +30,12 @@ Select an element by clicking it. A single click clears any previous selection a ```csharp @using Syncfusion.Blazor.Diagram - - + + @code { - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -48,13 +47,15 @@ Select an element by clicking it. A single click clears any previous selection a ID = "node", }; NodeCollection.Add(node); - } + } + //To notify selection changing event, before selecting the nodes/connectors in the diagram. private void OnSelectionChanging(SelectionChangingEventArgs args) { //Sets true to cancel the element's selection. args.Cancel = true; } + //To notify selection changed event, after selecting the nodes/connectors in the diagram. private void OnSelectionChanged(SelectionChangedEventArgs args) { @@ -114,23 +115,22 @@ In the following example, the node can be selected with the first click and unse @code { - DiagramObjectCollection nodes; - DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings() { CanToggleSelection = true }; + private DiagramObjectCollection nodes; + private DiagramSelectionSettings selectionSettings = new DiagramSelectionSettings() { CanToggleSelection = true }; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); Node node = new Node() - { - ID = "node1", - OffsetX = 250, - OffsetY = 250, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } - }; - nodes.Add(node); - + { + ID = "node1", + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } + }; + nodes.Add(node); } } ``` @@ -172,15 +172,17 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio @using System.Collections.ObjectModel @using Syncfusion.Blazor.Buttons - + + @functions { - public string ID = "diagram"; - SfDiagramComponent diagram; - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); - public DiagramObjectCollection Connectors = new DiagramObjectCollection(); - DiagramSelectionSettings select; + private string ID = "diagram"; + private SfDiagramComponent diagram; + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private DiagramSelectionSettings select; + protected override void OnInitialized() { select = new DiagramSelectionSettings() @@ -199,12 +201,12 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio Height = 100, Width = 100, Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node1" - }, - }, + { + new ShapeAnnotation() + { + Content = "node1" + }, + }, }; NodeCollection.Add(node1); Node node2 = new Node() @@ -215,12 +217,12 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio Height = 100, Width = 100, Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node2" - }, - }, + { + new ShapeAnnotation() + { + Content = "node2" + }, + }, }; NodeCollection.Add(node2); NodeGroup group1 = new NodeGroup() @@ -228,12 +230,12 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio ID = "group1", Children = new string[] { "node1", "node2" }, Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "Group1" - } - }, + { + new ShapeAnnotation() + { + Content = "Group1" + } + }, }; NodeCollection.Add(group1); Node node3 = new Node() @@ -244,12 +246,12 @@ When RubberBandSelectionMode is set to [PartialIntersect](https://help.syncfusio Height = 100, Width = 100, Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node3" - }, - }, + { + new ShapeAnnotation() + { + Content = "node3" + }, + }, }; NodeCollection.Add(node3); Connector connector = new Connector() @@ -288,20 +290,21 @@ The DiagramSelectionSettings provides access to: * [Pivot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramSelectionSettings.html#Syncfusion_Blazor_Diagram_DiagramSelectionSettings_Pivot) - Pivot point for rotation operations ```cshtml -@page "/" @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons @using SelectionChangedEventArgs = Syncfusion.Blazor.Diagram.SelectionChangedEventArgs - - -@code { - SfDiagramComponent diagram; + + +@code +{ + private SfDiagramComponent diagram; //Initailize the diagram's nodes collection - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); //Initailize the diagram's connector collection - public DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + private DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -322,7 +325,8 @@ The DiagramSelectionSettings provides access to: }; ConnectorCollection.Add(connector1); } - //Event to notify selection changing event after selected the nodes/conenctors in diagram. + + //Event to notify selection changed event after selected the nodes/conenctors in diagram. private void OnSelectionChanged(SelectionChangedEventArgs args) { if (diagram.SelectionSettings.Nodes.Count > 0) @@ -341,8 +345,7 @@ The DiagramSelectionSettings provides access to: private void GetSelectionInfo() { // Get selected nodes - var selectedNodes = diagram.SelectionSettings.Nodes; - foreach (var node in selectedNodes) + foreach (Node node in diagram.SelectionSettings.Nodes) { Console.WriteLine($"Selected Node ID: {node.ID}"); Console.WriteLine($"Node OffsetX: {node.OffsetX}"); @@ -353,8 +356,7 @@ The DiagramSelectionSettings provides access to: } // Get selected connectors - var selectedConnectors = diagram.SelectionSettings.Connectors; - foreach (var connector in selectedConnectors) + foreach (Connector connector in diagram.SelectionSettings.Connectors) { Console.WriteLine($"Selected Connector ID: {connector.ID}"); Console.WriteLine($"Connector SourcePoint: X={connector.SourcePoint.X}, Y={connector.SourcePoint.Y}"); @@ -384,101 +386,103 @@ Clone is a virtual method of the node used to create a copy of a diagram object. @inject IJSRuntime js @using Syncfusion.Blazor.Buttons - - + + @functions { - public string ID = "diagram"; - SfDiagramComponent diagram; - public string Height { get; set; } = "700px"; - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); - public DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private string ID = "diagram"; + private SfDiagramComponent diagram; + private string Height { get; set; } = "700px"; + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 100, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() { - ID = "node1", - OffsetX = 100, - OffsetY = 100, - Height = 100, - Width = 100, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node1" - }, - }, - }; + new ShapeAnnotation() + { + Content = "node1" + }, + }, + }; NodeCollection.Add(node1); Node node2 = new Node() + { + ID = "node2", + OffsetX = 100, + OffsetY = 300, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() { - ID = "node2", - OffsetX = 100, - OffsetY = 300, - Height = 100, - Width = 100, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node2" - }, - }, - }; + new ShapeAnnotation() + { + Content = "node2" + }, + }, + }; NodeCollection.Add(node2); NodeGroup group1 = new NodeGroup() + { + ID = "group1", + Children = new string[] { "node1", "node2" }, + Annotations = new DiagramObjectCollection() { - ID = "group1", - Children = new string[] { "node1", "node2" }, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "Group1" - } - }, - }; + new ShapeAnnotation() + { + Content = "Group1" + } + }, + }; NodeCollection.Add(group1); Node node3 = new Node() + { + ID = "node3", + OffsetX = 300, + OffsetY = 100, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() { - ID = "node3", - OffsetX = 300, - OffsetY = 100, - Height = 100, - Width = 100, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node3" - }, - }, - }; + new ShapeAnnotation() + { + Content = "node3" + }, + }, + }; NodeCollection.Add(node3); Connector connector = new Connector() - { - ID = "connector1", - SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, - TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, - }; + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 250, Y = 250 }, + TargetPoint = new DiagramPoint() { X = 350, Y = 350 }, + }; Connectors.Add(connector); NodeGroup group2 = new NodeGroup() + { + ID = "group2", + Children = new string[] { "node3", "connector1", "group1" }, + Annotations = new DiagramObjectCollection() { - ID = "group2", - Children = new string[] { "node3", "connector1", "group1" }, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "Group2" - } - }, - }; + new ShapeAnnotation() + { + Content = "Group2" + } + }, + }; NodeCollection.Add(group2); } - public void Clone() + + private void Clone() { diagram.StartGroupAction(); if (diagram.SelectionSettings.Nodes.Count > 0) @@ -504,7 +508,8 @@ Clone is a virtual method of the node used to create a copy of a diagram object. diagram.ClearSelection(); diagram.EndGroupAction(); } - public string CloneGroup(NodeGroup gNode, bool isChild) + + private string CloneGroup(NodeGroup gNode, bool isChild) { NodeGroup groupNode = gNode.Clone() as NodeGroup; groupNode.ID = RandomId(); @@ -539,7 +544,8 @@ Clone is a virtual method of the node used to create a copy of a diagram object. diagram.AddDiagramElementsAsync(new DiagramObjectCollection() { groupNode }); return groupNode.ID; } - public string CloneNode(Node node, bool isChild) + + private string CloneNode(Node node, bool isChild) { diagram.StartGroupAction(); Node nodeChild = node.Clone() as Node; @@ -553,7 +559,8 @@ Clone is a virtual method of the node used to create a copy of a diagram object. diagram.EndGroupAction(); return nodeChild.ID; } - public string CloneConnector(Connector connector, bool isChild) + + private string CloneConnector(Connector connector, bool isChild) { diagram.StartGroupAction(); Connector connectorChild = connector.Clone() as Connector; @@ -587,38 +594,40 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ### How to Access and Modify Selected Nodes and Connectors at Runtime Access and update the properties of selected nodes and connectors using the [SelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionSettings) API in Syncfusion® Blazor's [SfDiagramComponent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html). This allows to respond to user selections and dynamically modify diagram elements at runtime. The following code demonstrates how to access and modify the selected Node and selected connector during runtime. ``` -@page "/" @using Syncfusion.Blazor.Diagram - -@code { - SfDiagramComponent diagram; +SelectionChanged="OnSelectionChanged" /> + +@code +{ + private SfDiagramComponent diagram; //Initailize the diagram's nodes collection - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); //Initailize the diagram's connector collection - public DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + private DiagramObjectCollection ConnectorCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() - { - OffsetX = 100, - OffsetY = 200, - Height = 100, - Width = 100, - ID = "node1", - }; + { + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + ID = "node1", + }; NodeCollection.Add(node1); Connector connector1 = new Connector() - { - ID = "connector1", - SourcePoint = new DiagramPoint() { X = 300, Y = 100 }, - TargetPoint = new DiagramPoint() { X = 400, Y = 300 }, - Type = ConnectorSegmentType.Orthogonal - }; + { + ID = "connector1", + SourcePoint = new DiagramPoint() { X = 300, Y = 100 }, + TargetPoint = new DiagramPoint() { X = 400, Y = 300 }, + Type = ConnectorSegmentType.Orthogonal + }; ConnectorCollection.Add(connector1); } + //Event to notify selection changing event after selected the nodes/conenctors in diagram. private void OnSelectionChanged(SelectionChangedEventArgs args) { @@ -652,13 +661,12 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```csharp @using Syncfusion.Blazor.Diagram - - -@code + + +@code { - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -670,13 +678,15 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ID = "node", }; NodeCollection.Add(node); - } + } + //Event to notify while dragging the elements in the diagram. private void OnPositionChanging(PositionChangingEventArgs args) { //sets true to cancel the element's dragging args.Cancel = true; } + //Event to notify once element's position has changed in the diagram. private void OnPositionChanged(PositionChangedEventArgs args) { @@ -703,14 +713,12 @@ For more information about dragging, refer [Node Drag](./nodes/interaction#how-t ```csharp @using Syncfusion.Blazor.Diagram - - + -@code +@code { - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -722,13 +730,15 @@ For more information about dragging, refer [Node Drag](./nodes/interaction#how-t ID = "node", }; NodeCollection.Add(node); - } + } + //Event to notify while resizing the elements in the diagram. private void OnSizeChanging(SizeChangingEventArgs args) { //sets true to cancel the element's resizing args.Cancel = true; } + //Event to notify once element's size has changed in the diagram. private void OnSizeChanged(SizeChangedEventArgs args) { @@ -759,14 +769,12 @@ N> While dragging and resizing, the objects are snapped towards the nearest obje ```csharp @using Syncfusion.Blazor.Diagram - - + -@code +@code { - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -778,13 +786,15 @@ N> While dragging and resizing, the objects are snapped towards the nearest obje ID = "node", }; NodeCollection.Add(node); - } + } + //Event to notify while rotating the elements in the diagram. private void OnRotationChanging(RotationChangingEventArgs args) { //sets true to cancel the element's rotation args.Cancel = true; } + //Event to notify once element's rotate angle has changed in the diagram. private void OnRotationChanged(RotationChangedEventArgs args) { @@ -819,15 +829,14 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p ```csharp @using Syncfusion.Blazor.Diagram - - + -@code +@code { - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); - public DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -839,7 +848,6 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p ID = "node1", }; NodeCollection.Add(node1); - Node node2 = new Node() { OffsetX = 300, @@ -849,7 +857,6 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p ID = "node2", }; NodeCollection.Add(node2); - Connector Connector = new Connector() { ID = "connector1", @@ -874,13 +881,15 @@ For more information, refer [End Point Dragging](./connectors/interactions#end-p Type = ConnectorSegmentType.Straight, }; Connectors.Add(Connector); - } + } + //Event to notify while creating the connection between the nodes in the diagram. private void OnConnectionChanging(ConnectionChangingEventArgs args) { //Sets true to cancel the element's resizing. args.Cancel = true; } + //Event to notify once created the connection between the nodes in the diagram. private void OnConnectionChanged(ConnectionChangedEventArgs args) { @@ -913,11 +922,13 @@ For more information about straight segment editing, refer [Straight Segment Edi ```csharp @using Syncfusion.Blazor.Diagram - - -@code{ + + +@code +{ //Defines diagram's connector collection. - DiagramObjectCollection Connectors = new DiagramObjectCollection(); + private DiagramObjectCollection Connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { @@ -961,10 +972,10 @@ For more information about straight segment editing, refer [Straight Segment Edi StrokeWidth = 1 } } - }; Connectors.Add(connector); } + //Event to notify while modifying the segment collection for the connector. private void OnSegmentChange(SegmentCollectionChangeEventArgs args) { @@ -1020,7 +1031,7 @@ The diagram component notifies the mouse button clicked. For example, whenever t @code { - public DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -1040,6 +1051,7 @@ The diagram component notifies the mouse button clicked. For example, whenever t nodes.Add(node); } + //Event to notify when a mouse button is clicked on the diagram. private void OnClick(ClickEventArgs args) { Console.WriteLine("Button", args.Button); diff --git a/blazor/diagram/layout/automatic-layout.md b/blazor/diagram/layout/automatic-layout.md index c171a38a47..5718d47ebc 100644 --- a/blazor/diagram/layout/automatic-layout.md +++ b/blazor/diagram/layout/automatic-layout.md @@ -41,12 +41,12 @@ The following code illustrates how to configure an automatic layout: @code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Defines diagram's node collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); - LayoutType type = LayoutType.ComplexHierarchicalTree; - int HorizontalSpacing = 50; - int VerticalSpacing = 50; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private LayoutType type = LayoutType.ComplexHierarchicalTree; + private int HorizontalSpacing = 50; + private int VerticalSpacing = 50; private void OnNodeCreating(IDiagramObject obj) { @@ -120,6 +120,8 @@ The [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. Default values: `HorizontalSpacing` is **30** and `VerticalSpacing` is **30**. Modify these to achieve the required layout density. ```csharp +@using Syncfusion.Blazor.Diagram + @@ -127,16 +129,17 @@ Default values: `HorizontalSpacing` is **30** and `VerticalSpacing` is **30**. M @code { // Initializing the Horizontal and Vertical value. - int HorizontalSpacing = 60; - int VerticalSpacing = 70; + private int HorizontalSpacing = 60; + private int VerticalSpacing = 70; + private SfDiagramComponent diagram; // Update the spacing. - public void UpdateSpacing() + private void UpdateSpacing() { - Diagram.BeginUpdate(); + diagram.BeginUpdate(); HorizontalSpacing += 10; VerticalSpacing += 10; - Diagram.EndUpdateAsync(); + diagram.EndUpdateAsync(); } } ``` @@ -155,14 +158,17 @@ Default values: `HorizontalSpacing` is **30** and `VerticalSpacing` is **30**. M | [RightToLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.LayoutOrientation.html#Syncfusion_Blazor_Diagram_LayoutOrientation_RightToLeft) | Aligns the layout from right to left. The root node is placed on the right side of the diagram. | ```csharp +@using Syncfusion.Blazor.Diagram + @code { + private SfDiagramComponent diagram; // Initializing the orientation value. - LayoutOrientation orientation = LayoutOrientation.LeftToRight; + private LayoutOrientation orientation = LayoutOrientation.LeftToRight; } ``` @@ -187,16 +193,19 @@ The possible values for HorizontalAlignment are: | [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.HorizontalAlignment.html#Syncfusion_Blazor_Diagram_HorizontalAlignment_Auto) | Aligns the diagram element based on its immediate parent’s horizontal alignment property (default behavior). | ```csharp +@using Syncfusion.Blazor.Diagram + @code { - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; // Initializing the HorizontalAlignment value. - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Center; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Center; + private SfDiagramComponent diagram; } ``` ![Blazor Diagram layout horizontal alignment centered](../images/LayoutAlignmentCenter.png) @@ -214,16 +223,19 @@ The possible values for VerticalAlignment are: | [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.VerticalAlignment.html#Syncfusion_Blazor_Diagram_VerticalAlignment_Auto) | Aligns the diagram element based on its immediate parent’s vertical alignment property (default behavior). | ```csharp +@using Syncfusion.Blazor.Diagram + @code { - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; // Initializing the VerticalAlignment value. - VerticalAlignment verticalAlignment = VerticalAlignment.Bottom; + private VerticalAlignment verticalAlignment = VerticalAlignment.Bottom; + private SfDiagramComponent diagram; } ``` ![Blazor Complex Hierarchical Diagram](../images/LayoutVerticalAlignmentBottom.png) @@ -234,6 +246,8 @@ The [LayoutMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagr You can customize the margin for each side (top, right, bottom, left) using the `LayoutMargin` object: ```csharp +@using Syncfusion.Blazor.Diagram + @@ -259,6 +273,8 @@ The [SamePoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram. Here’s an example of how to use this property: ```csharp +@using Syncfusion.Blazor.Diagram + diff --git a/blazor/diagram/layout/complex-hierarchical-layout.md b/blazor/diagram/layout/complex-hierarchical-layout.md index b43adff391..ac171b1d2d 100644 --- a/blazor/diagram/layout/complex-hierarchical-layout.md +++ b/blazor/diagram/layout/complex-hierarchical-layout.md @@ -25,16 +25,16 @@ The complex hierarchical tree layout arranges nodes in a tree-like structure in -@code +@code { - int left = 40; - int top = 50; + private int left = 40; + private int top = 50; //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -43,7 +43,7 @@ The complex hierarchical tree layout arranges nodes in a tree-like structure in node.Width = 50; //Initializing the default node's shape style. node.Style = new ShapeStyle() { Fill = "#6CA0DC", StrokeColor = "#6CA0DC" }; - node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; + node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; } private void OnConnectorCreating(IDiagramObject connector) @@ -71,7 +71,6 @@ The complex hierarchical tree layout arranges nodes in a tree-like structure in }; } } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LjheCZtRzgdyOSbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -86,7 +85,6 @@ Line distribution arranges connectors without overlapping in automatic layout. I The following code example shows how to create a complex hierarchical tree with line distribution. ```csharp - @using Syncfusion.Blazor.Diagram @@ -98,8 +96,8 @@ The following code example shows how to create a complex hierarchical tree with @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //Creates node with some default values. private void OnNodeCreating(IDiagramObject obj) @@ -113,7 +111,7 @@ The following code example shows how to create a complex hierarchical tree with //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject connector) { - (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; (connector as Connector).CornerRadius = 7; (connector as Connector).Style.StrokeWidth = 1; (connector as Connector).TargetDecorator.Height = 7; @@ -124,29 +122,29 @@ The following code example shows how to create a complex hierarchical tree with (connector as Connector).TargetDecorator.Style.StrokeColor = "#6BA5D7"; } - public class ComplexHierarchical + private class ComplexHierarchical { public string Id { get; set; } - public ListReportingPerson { get; set; } + public List ReportingPerson { get; set; } } - public object DataSource = new List() + + private object DataSource = new List() { new ComplexHierarchical() { Id= "node11" }, new ComplexHierarchical() { Id= "node12", ReportingPerson= new List(){"node114" }}, new ComplexHierarchical() { Id= "node13", ReportingPerson=new List() {"node12" }}, new ComplexHierarchical() { Id= "node14", ReportingPerson=new List() {"node12"}}, new ComplexHierarchical() { Id= "node15", ReportingPerson=new List() {"node12" }}, - new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, + new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, new ComplexHierarchical() { Id= "node21"}, new ComplexHierarchical() { Id= "node22", ReportingPerson=new List() {"node114" }}, new ComplexHierarchical() { Id= "node23", ReportingPerson=new List() {"node22" }}, new ComplexHierarchical() { Id= "node24", ReportingPerson=new List() {"node22"}}, - new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, + new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, new ComplexHierarchical() { Id= "node31"}, new ComplexHierarchical() { Id= "node114", ReportingPerson=new List() {"node11","node21","node31" }} }; } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLIWNtHfKwJNZDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -163,7 +161,7 @@ The following code illustrates how to arrange the nodes in a non linear manner. ```csharp @using Syncfusion.Blazor.Diagram - + @@ -172,8 +170,8 @@ The following code illustrates how to arrange the nodes in a non linear manner. @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //Creates node with some default values. private void OnNodeCreating(IDiagramObject obj) @@ -187,7 +185,7 @@ The following code illustrates how to arrange the nodes in a non linear manner. //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject connector) { - (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; (connector as Connector).CornerRadius = 7; (connector as Connector).Style.StrokeWidth = 1; (connector as Connector).TargetDecorator.Height = 7; @@ -198,24 +196,25 @@ The following code illustrates how to arrange the nodes in a non linear manner. (connector as Connector).TargetDecorator.Style.StrokeColor = "#6BA5D7"; } - public class ComplexHierarchical + private class ComplexHierarchical { public string Id { get; set; } - public ListReportingPerson { get; set; } + public List ReportingPerson { get; set; } } - public object DataSource = new List() + + private object DataSource = new List() { new ComplexHierarchical() { Id= "node11" }, new ComplexHierarchical() { Id= "node12", ReportingPerson= new List(){"node114" }}, new ComplexHierarchical() { Id= "node13", ReportingPerson=new List() {"node12" }}, new ComplexHierarchical() { Id= "node14", ReportingPerson=new List() {"node12"}}, new ComplexHierarchical() { Id= "node15", ReportingPerson=new List() {"node12" }}, - new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, + new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, new ComplexHierarchical() { Id= "node21"}, new ComplexHierarchical() { Id= "node22", ReportingPerson=new List() {"node114" }}, new ComplexHierarchical() { Id= "node23", ReportingPerson=new List() {"node22" }}, new ComplexHierarchical() { Id= "node24", ReportingPerson=new List() {"node22"}}, - new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, + new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, new ComplexHierarchical() { Id= "node31"}, new ComplexHierarchical() { Id= "node114", ReportingPerson=new List() {"node11","node21","node31" }} }; @@ -231,7 +230,8 @@ The following code illustrates how to arrange the nodes in linear manner by ena ```csharp @using Syncfusion.Blazor.Diagram - + + @@ -240,8 +240,8 @@ The following code illustrates how to arrange the nodes in linear manner by ena @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //Creates node with some default values. private void OnNodeCreating(IDiagramObject obj) @@ -255,7 +255,7 @@ The following code illustrates how to arrange the nodes in linear manner by ena //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject connector) { - (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; (connector as Connector).CornerRadius = 7; (connector as Connector).Style.StrokeWidth = 1; (connector as Connector).TargetDecorator.Height = 7; @@ -266,24 +266,25 @@ The following code illustrates how to arrange the nodes in linear manner by ena (connector as Connector).TargetDecorator.Style.StrokeColor = "#6BA5D7"; } - public class ComplexHierarchical + private class ComplexHierarchical { public string Id { get; set; } - public ListReportingPerson { get; set; } + public List ReportingPerson { get; set; } } - public object DataSource = new List() + + private object DataSource = new List() { new ComplexHierarchical() { Id= "node11" }, new ComplexHierarchical() { Id= "node12", ReportingPerson= new List(){"node114" }}, new ComplexHierarchical() { Id= "node13", ReportingPerson=new List() {"node12" }}, new ComplexHierarchical() { Id= "node14", ReportingPerson=new List() {"node12"}}, new ComplexHierarchical() { Id= "node15", ReportingPerson=new List() {"node12" }}, - new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, + new ComplexHierarchical() { Id= "node116", ReportingPerson=new List() {"node22","node12" }}, new ComplexHierarchical() { Id= "node21"}, new ComplexHierarchical() { Id= "node22", ReportingPerson=new List() {"node114" }}, new ComplexHierarchical() { Id= "node23", ReportingPerson=new List() {"node22" }}, new ComplexHierarchical() { Id= "node24", ReportingPerson=new List() {"node22"}}, - new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, + new ComplexHierarchical() { Id= "node25", ReportingPerson=new List() {"node22"} }, new ComplexHierarchical() { Id= "node31"}, new ComplexHierarchical() { Id= "node114", ReportingPerson=new List() {"node11","node21","node31" }} }; diff --git a/blazor/diagram/layout/events.md b/blazor/diagram/layout/events.md index 6f6256ef51..041d2dd8ed 100644 --- a/blazor/diagram/layout/events.md +++ b/blazor/diagram/layout/events.md @@ -28,19 +28,20 @@ The following code example demonstrates handling the `DataLoaded` event in the d @code { - public SfDiagramComponent diagram; - double top = 50; - double bottom = 50; - double right = 50; - double left = 50; - LayoutType type = LayoutType.OrganizationalChart; - LayoutOrientation oreintation = LayoutOrientation.TopToBottom; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; + private SfDiagramComponent diagram; + private double top = 50; + private double bottom = 50; + private double right = 50; + private double left = 50; + private LayoutType type = LayoutType.OrganizationalChart; + private LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; private string FixedNode = null; - public class HierarchicalDetails + + private class HierarchicalDetails { public string Id { get; set; } public string Role { get; set; } @@ -48,29 +49,31 @@ The following code example demonstrates handling the `DataLoaded` event in the d public string ChartType { get; set; } public string Color { get; set; } } - public List DataSource = new List() + + private List DataSource = new List() { - new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, - new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, - new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, - new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } }; + private void NodeCreating(IDiagramObject obj) { Node node = obj as Node; @@ -92,11 +95,13 @@ The following code example demonstrates handling the `DataLoaded` event in the d } }; } + private void ConnectorCreating(IDiagramObject connector) { (connector as Connector).Type = ConnectorSegmentType.Orthogonal; (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; } + private void DataLoaded(object args) { //Action to be performed. diff --git a/blazor/diagram/layout/flowchart-layout.md b/blazor/diagram/layout/flowchart-layout.md index cf2ca92092..0d3a54aedd 100644 --- a/blazor/diagram/layout/flowchart-layout.md +++ b/blazor/diagram/layout/flowchart-layout.md @@ -44,9 +44,9 @@ Different flowchart symbols have different meanings that are used to represent v @code { //Initialize diagram component. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize flowchart layout settings. - FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() + private FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() { YesBranchDirection = BranchDirection.LeftInFlow, NoBranchDirection = BranchDirection.RightInFlow @@ -65,7 +65,7 @@ Different flowchart symbols have different meanings that are used to represent v { if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1) { - var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); + int parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); if (itemInfo.Label.Count > parentIndex) { connector.Annotations = new DiagramObjectCollection() @@ -78,6 +78,7 @@ Different flowchart symbols have different meanings that are used to represent v } } } + //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject obj) { @@ -86,6 +87,7 @@ Different flowchart symbols have different meanings that are used to represent v connector.Type = ConnectorSegmentType.Orthogonal; } } + //Creates nodes with some default values. private void OnNodeCreating(IDiagramObject obj) { @@ -109,8 +111,10 @@ Different flowchart symbols have different meanings that are used to represent v }; } } + //Initialize data source collection. - public List DataSource = new List(){ + private List DataSource = new List() + { new ItemInfo() { Id = "1", @@ -193,7 +197,8 @@ Different flowchart symbols have different meanings that are used to represent v _Color = "#6CA0DC" }, }; - public class ItemInfo + + private class ItemInfo { public string Name { get; set; } public string Id { get; set; } @@ -288,9 +293,9 @@ Any text value can be given as a connector text to describe the flow. Also, any @code { //Initialize diagram component. - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Initialize flowchart layout settings. - FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() + private FlowchartLayoutSettings flowchartSettings = new FlowchartLayoutSettings() { YesBranchValues = new List { "Accept", "Yes" }, NoBranchValues = new List { "Reject", "No" }, @@ -309,7 +314,7 @@ Any text value can be given as a connector text to describe the flow. Also, any { if (itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id) != -1) { - var parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); + int parentIndex = itemInfo.ParentId.IndexOf((srcNode.Data as ItemInfo).Id); if (itemInfo.Label.Count > parentIndex) { connector.Annotations = new DiagramObjectCollection() @@ -322,6 +327,7 @@ Any text value can be given as a connector text to describe the flow. Also, any } } } + //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject obj) { @@ -330,6 +336,7 @@ Any text value can be given as a connector text to describe the flow. Also, any connector.Type = ConnectorSegmentType.Orthogonal; } } + //Creates nodes with some default values. private void OnNodeCreating(IDiagramObject obj) { @@ -353,8 +360,10 @@ Any text value can be given as a connector text to describe the flow. Also, any }; } } + //Initialize data source collection. - public List DataSource = new List(){ + private List DataSource = new List() + { new ItemInfo() { Id = "1", @@ -407,7 +416,8 @@ Any text value can be given as a connector text to describe the flow. Also, any _Color = "#6CA0DC" }, }; - public class ItemInfo + + private class ItemInfo { public string Name { get; set; } public string Id { get; set; } diff --git a/blazor/diagram/layout/hierarchical-layout.md b/blazor/diagram/layout/hierarchical-layout.md index f3ec7631c0..66d2ec628d 100644 --- a/blazor/diagram/layout/hierarchical-layout.md +++ b/blazor/diagram/layout/hierarchical-layout.md @@ -25,14 +25,14 @@ The hierarchical tree layout arranges nodes in a tree-like structure, where the -@code +@code { - int left = 40; - int top = 50; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int left = 40; + private int top = 50; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -41,7 +41,7 @@ The hierarchical tree layout arranges nodes in a tree-like structure, where the node.Width = 100; //Initializing the default node's shape style. node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; - node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; + node.Annotations[0].Style = new TextStyle() { Color = "white", Bold = true }; } private void OnConnectorCreating(IDiagramObject connector) @@ -54,26 +54,25 @@ The hierarchical tree layout arranges nodes in a tree-like structure, where the //Initializing node and connectors. nodes = new DiagramObjectCollection() { - new Node() { ID="node1", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Steve-Ceo"} } }, - new Node() { ID="node2", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Kevin-Manager"} } }, - new Node() { ID="node3", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Peter-Manager"} } }, - new Node() { ID="node4", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Jim-CSE"} } }, - new Node() { ID="node5", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Martin-CSE"} } }, - new Node() { ID="node6", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="John-Manager"} } }, - new Node() { ID="node7", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content="Mary-CSE"} } }, + new Node() { ID = "node1", Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Steve-Ceo" } } }, + new Node() { ID = "node2", Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Kevin-Manager" } } }, + new Node() { ID = "node3", Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Peter-Manager" } } }, + new Node() { ID = "node4", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content = "Jim-CSE" } } }, + new Node() { ID = "node5", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content = "Martin-CSE" } } }, + new Node() { ID = "node6", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content = "John-Manager" } } }, + new Node() { ID = "node7", Annotations = new DiagramObjectCollection() { new ShapeAnnotation{Content = "Mary-CSE" } } }, }; connectors = new DiagramObjectCollection() { - new Connector() { ID="connector1", SourceID="node1", TargetID="node2" }, - new Connector() { ID="connector2", SourceID="node1", TargetID="node3" }, - new Connector() { ID="connector3", SourceID="node2", TargetID="node4" }, - new Connector() { ID="connector4", SourceID="node2", TargetID="node5" }, - new Connector() { ID="connector5", SourceID="node3", TargetID="node6" }, - new Connector() { ID="connector6", SourceID="node3", TargetID="node7" }, + new Connector() { ID = "connector1", SourceID = "node1", TargetID = "node2" }, + new Connector() { ID = "connector2", SourceID = "node1", TargetID = "node3" }, + new Connector() { ID = "connector3", SourceID = "node2", TargetID = "node4" }, + new Connector() { ID = "connector4", SourceID = "node2", TargetID = "node5" }, + new Connector() { ID = "connector5", SourceID = "node3", TargetID = "node6" }, + new Connector() { ID = "connector6", SourceID = "node3", TargetID = "node7" }, }; } } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDBICjDdzpLQdEPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -88,8 +87,8 @@ A hierarchical layout can also be created from a data source. The following exam @using Syncfusion.Blazor.Diagram - - + + @@ -99,14 +98,14 @@ A hierarchical layout can also be created from a data source. The following exam -@code +@code { - int left = 40; - int top = 50; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int left = 40; + private int top = 50; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -122,7 +121,7 @@ A hierarchical layout can also be created from a data source. The following exam (connector as Connector).Type = ConnectorSegmentType.Orthogonal; } - public class HierarchicalDetails + private class HierarchicalDetails { public string Id { get; set; } public string Role { get; set; } @@ -130,7 +129,8 @@ A hierarchical layout can also be created from a data source. The following exam public string ChartType { get; set; } public string Color { get; set; } } - public List DataSource = new List() + + private List DataSource = new List() { new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, @@ -167,17 +167,22 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn Use the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Orientation) property to change the orientation at runtime. The following code shows how to change the layout. ```csharp - +@using Syncfusion.Blazor.Diagram + + -// Initializing the orientation value. -LayoutOrientation orientation = LayoutOrientation.TopToBottom; - -public void UpdateOrientation() +@code { - // Update LayoutOrientation in runtime. - orientation = LayoutOrientation.BottomToTop; + // Initializing the orientation value. + LayoutOrientation orientation = LayoutOrientation.TopToBottom; + + private void UpdateOrientation() + { + // Update LayoutOrientation in runtime. + orientation = LayoutOrientation.BottomToTop; + } } ``` @@ -186,21 +191,27 @@ public void UpdateOrientation() Adjust the horizontal and vertical spacing for the diagram layout using the [HorizontalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_HorizontalSpacing) and [VerticalSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_VerticalSpacing) properties of the layout. ```csharp +@using Syncfusion.Blazor.Diagram + -// Initializing the Horizontal and Vertical value. -int HorizontalSpacing = 40; -int VerticalSpacing = 50; - -// Update the spacing. -public void UpdateSpacing() +@code { - Diagram.BeginUpdate(); - HorizontalSpacing += 10; - VerticalSpacing += 10; - Diagram.EndUpdateAsync(); + // Initializing the Horizontal and Vertical value. + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; + private SfDiagramComponent diagram; + + // Update the spacing. + private void UpdateSpacing() + { + diagram.BeginUpdate(); + HorizontalSpacing += 10; + VerticalSpacing += 10; + diagram.EndUpdateAsync(); + } } ``` @@ -209,23 +220,29 @@ public void UpdateSpacing() Use the [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin) property to create padding around the layout within the viewport. This is useful to keep the tree away from the edges of the diagram. ```csharp - - - - - +@using Syncfusion.Blazor.Diagram -// Initializing the Margin Top and Left value. -int left = 40; -int top = 50; + + + + + -// Update the margin values. -public void UpdateMargin() +@code { - Diagram.BeginUpdate(); - left += 10; - top += 10; - Diagram.EndUpdateAsync(); + // Initializing the Margin Top and Left value. + private int left = 40; + private int top = 50; + private SfDiagramComponent diagram; + + // Update the margin values. + private void UpdateMargin() + { + diagram.BeginUpdate(); + left += 10; + top += 10; + diagram.EndUpdateAsync(); + } } ``` diff --git a/blazor/diagram/layout/mind-map.md b/blazor/diagram/layout/mind-map.md index 0b422e3ad2..8e9cc0f593 100644 --- a/blazor/diagram/layout/mind-map.md +++ b/blazor/diagram/layout/mind-map.md @@ -27,8 +27,8 @@ The following code example illustrates how to create a mind map layout using a d -@code -{ +@code +{ //Creates nodes with some default values. private void OnNodeCreating(IDiagramObject obj) { @@ -39,7 +39,7 @@ The following code example illustrates how to create a mind map layout using a d node.Style = new ShapeStyle() { Fill = "#6495ED", StrokeWidth = 1, StrokeColor = "white" }; node.Shape = new BasicShape() { Type = NodeShapes.Basic }; ; } - + //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject connector) { @@ -52,7 +52,7 @@ The following code example illustrates how to create a mind map layout using a d }; } - public class MindMapDetails + private class MindMapDetails { public string Id { get; set; } public string Label { get; set; } @@ -61,7 +61,7 @@ The following code example illustrates how to create a mind map layout using a d public string Fill { get; set; } } - public object DataSource = new List() + private object DataSource = new List() { new MindMapDetails() { Id= "1",Label="Creativity", ParentId ="", Branch = "Root"}, new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1", Branch = "Right" }, @@ -95,7 +95,7 @@ You can also control the branch for a mind map using the [GetBranch](https://hel -@code +@code { //Set all branches on the right side for mind map layout. private BranchType GetBranch(IDiagramObject obj) @@ -106,7 +106,7 @@ You can also control the branch for a mind map using the [GetBranch](https://hel } return BranchType.Right; } - + //Creates connectors with some default values. private void OnNodeCreating(IDiagramObject obj) { @@ -124,7 +124,7 @@ You can also control the branch for a mind map using the [GetBranch](https://hel } }; } - + //Creates node with some default values. private void OnConnectorCreating(IDiagramObject connector) { @@ -137,7 +137,7 @@ You can also control the branch for a mind map using the [GetBranch](https://hel }; } - public class MindMapDetails + private class MindMapDetails { public string Id { get; set; } public string Label { get; set; } @@ -146,7 +146,7 @@ You can also control the branch for a mind map using the [GetBranch](https://hel public string Fill { get; set; } } - public object DataSource = new List() + private object DataSource = new List() { new MindMapDetails() { Id= "1",Label="Creativity", ParentId =""}, new MindMapDetails() { Id= "2", Label="Brainstorming", ParentId ="1"}, @@ -184,11 +184,12 @@ Also, you can render a mind map layout without using a Datasource. The following @code { //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); - string root = "node4"; - //Creates connectors with some default values. + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private string root = "node4"; + + //Creates node with some default values. private void OnNodeCreating(IDiagramObject obj) { Node node = obj as Node; @@ -198,182 +199,181 @@ Also, you can render a mind map layout without using a Datasource. The following node.Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse }; } - //Creates node with some default values. + //Creates connector with some default values. private void OnConnectorCreating(IDiagramObject connector) { Connector connectors = connector as Connector; connectors.Type = ConnectorSegmentType.Bezier; connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 }; connectors.TargetDecorator = new DecoratorSettings - { - Shape = DecoratorShape.None, - }; + { + Shape = DecoratorShape.None, + }; } protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + Width = 70, + Height = 70, + Ports = new DiagramObjectCollection() { - ID = "node1", - Width = 70, - Height = 70, - Ports = new DiagramObjectCollection() -{ new PointPort() { ID="left", Offset = new DiagramPoint() { X = 1, Y = 0.5}, - },new PointPort() + }, + new PointPort() { ID="right", Offset = new DiagramPoint() { X = 0, Y = 0.5}, } }, - }; + }; nodes.Add(node1); Node node2 = new Node() + { + ID = "node2", + Width = 70, + Ports = new DiagramObjectCollection() { - ID = "node2", - Width = 70, - Ports = new DiagramObjectCollection() -{ new PointPort() { ID="left", Offset = new DiagramPoint() { X = 0, Y = 0.5}, } }, - Height = 70 - }; + Height = 70 + }; nodes.Add(node2); Node node3 = new Node() + { + ID = "node3", + Width = 70, + Ports = new DiagramObjectCollection() { - ID = "node3", - Width = 70, - Ports = new DiagramObjectCollection() -{ new PointPort() { ID="right", Offset = new DiagramPoint() { X = 1, Y = 0.5}, } }, - Height = 70 - }; + Height = 70 + }; nodes.Add(node3); Node node4 = new Node() - { - ID = "node4", - Width = 70, - Height = 70 - }; + { + ID = "node4", + Width = 70, + Height = 70 + }; nodes.Add(node4); Node node5 = new Node() - { - ID = "node5", - Width = 70, - Height = 70 - }; + { + ID = "node5", + Width = 70, + Height = 70 + }; nodes.Add(node5); Node node6 = new Node() - { - ID = "node6", - Width = 70, - Height = 70 - }; + { + ID = "node6", + Width = 70, + Height = 70 + }; nodes.Add(node6); Node node7 = new Node() - { - ID = "node7", - Width = 70, - Height = 70 - }; + { + ID = "node7", + Width = 70, + Height = 70 + }; nodes.Add(node7); Node node8 = new Node() - { - ID = "node8", - Width = 70, - Height = 70 - }; + { + ID = "node8", + Width = 70, + Height = 70 + }; nodes.Add(node8); Node node9 = new Node() - { - ID = "node9", - Width = 70, - Height = 70 - }; + { + ID = "node9", + Width = 70, + Height = 70 + }; nodes.Add(node9); Node node10 = new Node() - { - ID = "node10", - Width = 70, - Height = 70 - }; + { + ID = "node10", + Width = 70, + Height = 70 + }; nodes.Add(node10); Node node11 = new Node() - { - ID = "node11", - Width = 70, - Height = 70, - }; + { + ID = "node11", + Width = 70, + Height = 70, + }; nodes.Add(node11); Node node12 = new Node() - { - ID = "node12", - Width = 70, - Height = 70 - }; + { + ID = "node12", + Width = 70, + Height = 70 + }; nodes.Add(node12); Node node13 = new Node() - { - ID = "node13", - Width = 70, - Height = 70 - }; + { + ID = "node13", + Width = 70, + Height = 70 + }; nodes.Add(node13); Node node14 = new Node() - { - ID = "node14", - Width = 70, - Height = 70 - }; + { + ID = "node14", + Width = 70, + Height = 70 + }; Node node15 = new Node() - { - ID = "node15", - Width = 70, - Height = 70 - }; + { + ID = "node15", + Width = 70, + Height = 70 + }; Node node16 = new Node() - { - ID = "node16", - Width = 70, - Height = 70 - }; + { + ID = "node16", + Width = 70, + Height = 70 + }; nodes.Add(node14); Node node17 = new Node() + { + ID = "node17", + Ports = new DiagramObjectCollection() { - ID = "node17", - Ports = new DiagramObjectCollection() -{ new PointPort() { ID="right", Offset = new DiagramPoint() { X = 1, Y = 0.5}, } }, - Width = 70, - Height = 70, - }; + Width = 70, + Height = 70, + }; nodes.Add(node15); nodes.Add(node16); nodes.Add(node17); Connector connector1 = new Connector() { ID = "connector1", SourceID = "node1", SourcePortID = "left", TargetID = "node2", TargetPortID = "left", Type = ConnectorSegmentType.Straight }; connectors.Add(connector1); - Connector connector2 = new Connector() { ID = "connector2", SourceID = "node1", SourcePortID = "right", TargetID = "node3", TargetPortID = "right", Type = ConnectorSegmentType.Straight }; connectors.Add(connector2); - Connector connector3 = new Connector() { ID = "connector3", SourceID = "node2", TargetID = "node4", Type = ConnectorSegmentType.Straight }; connectors.Add(connector3); Connector connector4 = new Connector() { ID = "connector4", SourceID = "node2", TargetID = "node5", Type = ConnectorSegmentType.Straight }; @@ -402,7 +402,6 @@ Also, you can render a mind map layout without using a Datasource. The following connectors.Add(connector15); Connector connector16 = new Connector() { ID = "connector16", SourceID = "node8", TargetID = "node17", Type = ConnectorSegmentType.Straight }; connectors.Add(connector16); - } } ``` @@ -431,10 +430,12 @@ The following example demonstrates configuring the mind map layout with a vertic -@code { +@code +{ private SfDiagramComponent? diagram; - public LayoutOrientation SelectedOrientation { get; set; } = LayoutOrientation.Vertical; - public List LayoutOrientationOptions { get; set; } = new() + private LayoutOrientation SelectedOrientation { get; set; } = LayoutOrientation.Vertical; + + private List LayoutOrientationOptions { get; set; } = new() { new OrientationItem { Text = "Vertical", Value = LayoutOrientation.Vertical }, new OrientationItem { Text = "Horizontal", Value = LayoutOrientation.Horizontal }, @@ -442,7 +443,7 @@ The following example demonstrates configuring the mind map layout with a vertic new OrientationItem { Text = "Right to Left", Value = LayoutOrientation.RightToLeft } }; - public List DataSource { get; set; } = new() + private List DataSource { get; set; } = new() { new MindMapDetails { Id = "1", Label = "Project Planning", ParentId = "", Branch = "Root" }, new MindMapDetails { Id = "2", Label = "Requirements", ParentId = "1", Branch = "Right" }, @@ -459,30 +460,28 @@ The following example demonstrates configuring the mind map layout with a vertic return BranchType.Left; if (node.Data is not MindMapDetails mindMapData || string.IsNullOrWhiteSpace(mindMapData.Branch)) return BranchType.Left; - return Enum.TryParse(mindMapData.Branch, out BranchType branchType) - ? branchType - : BranchType.SubLeft; + return Enum.TryParse(mindMapData.Branch, out BranchType branchType)? branchType: BranchType.SubLeft; } // Method triggered by button click at runtime to set diagram orientation to vertical. private void ChangeLayoutOrientation() { - diagram.Layout.Orientation = LayoutOrientation.Vertical; + diagram.Layout.Orientation = LayoutOrientation.Vertical; } private void OnNodeCreating(IDiagramObject obj) { - if (obj is not Node node) + if (obj is not Node node) return; // Apply default node styling. node.Height = 100; node.Width = 100; node.BackgroundColor = "#6BA5D7"; - node.Style = new ShapeStyle - { - Fill = "#6495ED", - StrokeWidth = 1, - StrokeColor = "white" + node.Style = new ShapeStyle + { + Fill = "#6495ED", + StrokeWidth = 1, + StrokeColor = "white" }; node.Shape = new BasicShape { Type = NodeShapes.Basic }; // Add annotation with label from data. @@ -497,13 +496,13 @@ The following example demonstrates configuring the mind map layout with a vertic private void OnConnectorCreating(IDiagramObject obj) { - if (obj is not Connector connector) + if (obj is not Connector connector) return; connector.Type = ConnectorSegmentType.Bezier; - connector.Style = new ShapeStyle - { - StrokeColor = "#6495ED", - StrokeWidth = 2 + connector.Style = new ShapeStyle + { + StrokeColor = "#6495ED", + StrokeWidth = 2 }; connector.TargetDecorator = new DecoratorSettings { @@ -511,13 +510,13 @@ The following example demonstrates configuring the mind map layout with a vertic }; } - public class OrientationItem + private class OrientationItem { public string Text { get; set; } = string.Empty; public LayoutOrientation Value { get; set; } } - public class MindMapDetails + private class MindMapDetails { public string Id { get; set; } = string.Empty; public string Label { get; set; } = string.Empty; @@ -562,13 +561,13 @@ The following example demonstrates how to update the layout orientation dynamica -@code { +@code +{ private SfDiagramComponent? diagram; - // Property bound to dropdown and diagram layout, updated at runtime by user interaction. - public LayoutOrientation SelectedOrientation { get; set; } = LayoutOrientation.Vertical; + private LayoutOrientation SelectedOrientation { get; set; } = LayoutOrientation.Vertical; - public List LayoutOrientationOptions { get; set; } = new() + private List LayoutOrientationOptions { get; set; } = new() { new OrientationItem { Text = "Vertical", Value = LayoutOrientation.Vertical }, new OrientationItem { Text = "Horizontal", Value = LayoutOrientation.Horizontal }, @@ -576,7 +575,7 @@ The following example demonstrates how to update the layout orientation dynamica new OrientationItem { Text = "Right to Left", Value = LayoutOrientation.RightToLeft } }; - public List DataSource { get; set; } = new() + private List DataSource { get; set; } = new() { new MindMapDetails { Id = "1", Label = "Project Planning", ParentId = "", Branch = "Root" }, new MindMapDetails { Id = "2", Label = "Requirements", ParentId = "1", Branch = "Right" }, @@ -593,9 +592,7 @@ The following example demonstrates how to update the layout orientation dynamica return BranchType.Left; if (node.Data is not MindMapDetails mindMapData || string.IsNullOrWhiteSpace(mindMapData.Branch)) return BranchType.Left; - return Enum.TryParse(mindMapData.Branch, out BranchType branchType) - ? branchType - : BranchType.SubLeft; + return Enum.TryParse(mindMapData.Branch, out BranchType branchType) ? branchType : BranchType.SubLeft; } // Method triggered by button click at runtime to set diagram orientation to vertical. @@ -645,13 +642,13 @@ The following example demonstrates how to update the layout orientation dynamica }; } - public class OrientationItem + private class OrientationItem { public string Text { get; set; } = string.Empty; public LayoutOrientation Value { get; set; } } - public class MindMapDetails + private class MindMapDetails { public string Id { get; set; } = string.Empty; public string Label { get; set; } = string.Empty; diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md index 8bf47a687b..5bee11e10d 100644 --- a/blazor/diagram/layout/organizational-chart.md +++ b/blazor/diagram/layout/organizational-chart.md @@ -26,15 +26,15 @@ The following code example illustrates how to create an organizational chart. -@code +@code { //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); //Defines diagram's node collection. - DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -75,7 +75,7 @@ The following code example illustrates how to create an organizational chart. new Node() { ID = "node18",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Customer Interaction" } } }, new Node() { ID = "node19",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Support and Maintenance" } } }, new Node() { ID = "node20",Annotations = new DiagramObjectCollection() { new ShapeAnnotation { Content = "Task Coordination" } } } - }; + }; connectors = new DiagramObjectCollection() { new Connector() { ID = "connector1", SourceID = "node1", TargetID = "node2" }, @@ -134,13 +134,19 @@ The layout can be aligned anywhere within the layout bounds or viewport using th The following code illustrates how to align the layout at the bottom within the layout bounds. ```csharp +@using Syncfusion.Blazor.Diagram + -int HorizontalSpacing = 40; -int VerticalSpacing = 40; -VerticalAlignment verticalAlignment = VerticalAlignment.Bottom; +@code +{ + private SfDiagramComponent diagram; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; + private VerticalAlignment verticalAlignment = VerticalAlignment.Bottom; +} ``` The following table illustrates the different chart orientations and chart types. @@ -176,8 +182,8 @@ The following code example illustrates how to set the vertical right arrangement @code { //Initializing layout. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; //To configure every subtree of the organizational chart. private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) @@ -209,13 +215,14 @@ The following code example illustrates how to set the vertical right arrangement }; } - public class OrgChartDataModel + private class OrgChartDataModel { public string Id { get; set; } public string Team { get; set; } public string Role { get; set; } } - public object DataSource = new List() + + private object DataSource = new List() { new OrgChartDataModel() { Id= "1", Role= "General Manager" }, new OrgChartDataModel() { Id= "2", Role= "Human Resource Manager", Team= "1" }, @@ -240,17 +247,21 @@ The layout supports adding space horizontally and vertically between nodes. Use The layout supports adding some blank space between the layout bounds (or viewport) and the layout. The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_Margin) property of the layout allows you to set the blank space. ```csharp +@using Syncfusion.Blazor.Diagram + //Initialize the organizational chart layout with Margin. - - - + + + + @code { //Initializing the Margin Top and Left value. - int left = 40; - int top = 50; + private int left = 40; + private int top = 50; + private SfDiagramComponent diagram; } ``` @@ -261,14 +272,17 @@ The layout supports customizing the `Orientation`. Set the desired orientation u The following code illustrates arranging nodes in a **TopToBottom** orientation. ```csharp +@using Syncfusion.Blazor.Diagram + //Initialize the layout with layout orientation as BottomToTop in page. + @code { //Initializing the orientation value. - LayoutOrientation orientation = LayoutOrientation.TopToBottom; + private LayoutOrientation orientation = LayoutOrientation.TopToBottom; } ``` @@ -277,19 +291,21 @@ The following code illustrates arranging nodes in a **TopToBottom** orientation. The layout supports arranging nodes with reference to the position of a fixed node and set it to the [FixedNode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_FixedNode) of the layout property. This is helpful when you try to expand/collapse a node. It might be expected that the position of the double-clicked node should not be changed. ```csharp +@using Syncfusion.Blazor.Diagram + //Initialize the organizational chart layout with FixedNode. + @code { //Initializing the orientation value. - LayoutOrientation orientation = LayoutOrientation.TopToBottom; + private LayoutOrientation orientation = LayoutOrientation.TopToBottom; //Initializing the Horizontal and Vertical value. - int HorizontalSpacing = 40; - int VerticalSpacing = 50; + private int HorizontalSpacing = 40; + private int VerticalSpacing = 50; } - ``` ## How to Add Assistant @@ -304,32 +320,32 @@ The following code example illustrates how to add assistants to the layout. @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - + - - - - + + + + @code { - SfDiagramComponent diagram; - double top = 50; - double bottom = 50; - double right = 50; - double left = 50; - LayoutType type = LayoutType.OrganizationalChart; - LayoutOrientation oreintation = LayoutOrientation.BottomToTop; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; + private SfDiagramComponent diagram; + private double top = 50; + private double bottom = 50; + private double right = 50; + private double left = 50; + private LayoutType type = LayoutType.OrganizationalChart; + private LayoutOrientation oreintation = LayoutOrientation.BottomToTop; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; private string pattern; - Orientation subTreeOrientation = Orientation .Vertical; - SubTreeAlignmentType subTreeAlignment= SubTreeAlignmentType.Left; + private Orientation subTreeOrientation = Orientation.Vertical; + private SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Left; private string FixedNode = null; - public class HierarchicalDetails + private class HierarchicalDetails { public string Id { get; set; } public string Role { get; set; } @@ -337,6 +353,7 @@ The following code example illustrates how to add assistants to the layout. public string ChartType { get; set; } public string Color { get; set; } } + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) { Node node = obj as Node; @@ -347,7 +364,8 @@ The following code example illustrates how to add assistants to the layout. } return options; } - public List DataSource = new List() + + private List DataSource = new List() { new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, diff --git a/blazor/diagram/layout/radial-tree.md b/blazor/diagram/layout/radial-tree.md index 8d2c420c42..b096667397 100644 --- a/blazor/diagram/layout/radial-tree.md +++ b/blazor/diagram/layout/radial-tree.md @@ -30,9 +30,10 @@ Create a radial tree layout with a `DataSource`. The following code example illu -@code -{ - SfDiagramComponent diagram; +@code +{ + private SfDiagramComponent diagram; + //Creates nodes with some default values. private void OnNodeCreating(IDiagramObject obj) { @@ -43,14 +44,14 @@ Create a radial tree layout with a `DataSource`. The following code example illu if (radialData.Id == "parent") { size = 20; - color="white"; + color = "white"; } else { size = 10; color = "black"; } - ShapeAnnotation annotation = new ShapeAnnotation() { Content = radialData.Name, Style = new TextStyle() { Color = color, FontSize=size } }; + ShapeAnnotation annotation = new ShapeAnnotation() { Content = radialData.Name, Style = new TextStyle() { Color = color, FontSize = size } }; node.Annotations = new DiagramObjectCollection() { annotation }; if (radialData.Designation == "Managing Director") @@ -74,24 +75,24 @@ Create a radial tree layout with a `DataSource`. The following code example illu else { node.Shape = new BasicShape() - { - Type = NodeShapes.Basic, - Shape = NodeBasicShapes.Ellipse, - CornerRadius = 10 - }; + { + Type = NodeShapes.Basic, + Shape = NodeBasicShapes.Ellipse, + CornerRadius = 10 + }; node.Style.Fill = "#afeeee"; node.Width = 50; node.Height = 50; } } - + //Creates connectors with some default values. private void OnConnectorCreating(IDiagramObject connector) { (connector as Connector).Type = ConnectorSegmentType.Straight; } - public class RadialTreeDetails + private class RadialTreeDetails { public string Id { get; set; } public string Name { get; set; } @@ -99,7 +100,7 @@ Create a radial tree layout with a `DataSource`. The following code example illu public string ReportingPerson { get; set; } } - public List RadialSource = new List() + private List RadialSource = new List() { new RadialTreeDetails() { Id = "parent", Name = "Maria Anders", Designation = "Managing Director" }, new RadialTreeDetails() { Id = "1", Name = "Ana Trujillo", Designation = "Project Manager", @@ -163,13 +164,12 @@ Render a radial tree layout without using a `Datasource`. The following example @code { - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Initialize the diagram's nodes collection. - DiagramObjectCollection nodes = new DiagramObjectCollection(); - + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); - string root = "node1"; + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private string root = "node1"; //Creates nodes with some default values. private void OnNodeCreating(IDiagramObject obj) @@ -185,19 +185,19 @@ Render a radial tree layout without using a `Datasource`. The following example private void OnConnectorCreating(IDiagramObject connector) { (connector as Connector).Type = ConnectorSegmentType.Straight; - (connector as Connector).TargetDecorator=new DecoratorSettings - { + (connector as Connector).TargetDecorator = new DecoratorSettings + { Shape = DecoratorShape.None, }; } protected override void OnInitialized() { - for(int i = 1;i < 18;i++) + for (int i = 1; i < 18; i++) { Node node1 = new Node() { - ID = "node"+i, + ID = "node" + i, Width = 70, Height = 70, }; @@ -206,25 +206,18 @@ Render a radial tree layout without using a `Datasource`. The following example Connector connector1 = new Connector() { ID = "connector1", SourceID = "node1", TargetID = "node2", }; connectors.Add(connector1); - Connector connector2 = new Connector() { ID = "connector2", SourceID = "node1", TargetID = "node3", }; connectors.Add(connector2); - Connector connector3 = new Connector() { ID = "connector3", SourceID = "node1", TargetID = "node4", }; connectors.Add(connector3); - Connector connector4 = new Connector() { ID = "connector4", SourceID = "node2", TargetID = "node5", }; connectors.Add(connector4); - Connector connector5 = new Connector() { ID = "connector5", SourceID = "node3", TargetID = "node6", }; connectors.Add(connector5); - Connector connector6 = new Connector() { ID = "connector6", SourceID = "node4", TargetID = "node7", }; connectors.Add(connector6); - Connector connector7 = new Connector() { ID = "connector7", SourceID = "node1", TargetID = "node8", }; connectors.Add(connector7); - Connector connector8 = new Connector() { ID = "connector8", SourceID = "node8", TargetID = "node9", }; connectors.Add(connector8); Connector connector9 = new Connector() { ID = "connector9", SourceID = "node2", TargetID = "node10", }; @@ -243,7 +236,6 @@ Render a radial tree layout without using a `Datasource`. The following example connectors.Add(connector15); Connector connector16 = new Connector() { ID = "connector16", SourceID = "node8", TargetID = "node17", }; connectors.Add(connector16); - } } ``` diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md index dcf3feef2a..0cbe888db2 100644 --- a/blazor/diagram/nodes/customization.md +++ b/blazor/diagram/nodes/customization.md @@ -25,23 +25,23 @@ The following code shows how to customize the appearance of a shape. @code { //Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes array. Node node = new Node() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - //Sets the style for the node - Style = new ShapeStyle() { Fill = "Green", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 }, - }; + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + //Sets the style for the node + Style = new ShapeStyle() { Fill = "Green", StrokeDashArray = "5,5", StrokeColor = "red", StrokeWidth = 2 }, + }; // Add node nodes.Add(node); } @@ -69,33 +69,34 @@ The following code shows how to customize the appearance of a shape. @code { //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes array. Node node1 = new Node() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Shape of the Node - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } - }; + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Shape of the Node + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Rectangle } + }; Node node2 = new Node() - { - // Position of the node - OffsetX = 100, - OffsetY = 100, - // Shape of the Node - Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse } - }; + { + // Position of the node + OffsetX = 100, + OffsetY = 100, + // Shape of the Node + Shape = new BasicShape() { Type = NodeShapes.Basic, Shape = NodeBasicShapes.Ellipse } + }; nodes.Add(node1); nodes.Add(node2); } + //Method to define nodecreating event private void NodeCreating(IDiagramObject obj) { @@ -158,15 +159,15 @@ Define node style using a template in [NodeTemplate](https://help.syncfusion.com - } + } @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -183,7 +184,7 @@ Define node style using a template in [NodeTemplate](https://help.syncfusion.com nodes.Add(node); } - public void OnClick() + private void OnClick() { nodes[0].BackgroundColor = "cornflowerblue"; StateHasChanged(); @@ -212,7 +213,7 @@ The diagram's [SetNodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion @code { // Initialize node collection with node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -282,17 +283,17 @@ The diagram's [SetNodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion } else { - (node as Node).Style = new ShapeStyle() - { - Fill = "#6F409F", - StrokeColor = "#6F409F", - StrokeWidth = 2 + (node as Node).Style = new ShapeStyle() + { + Fill = "#6F409F", + StrokeColor = "#6F409F", + StrokeWidth = 2 }; - (node as Node).Shape = new BasicShape() - { - Type = NodeShapes.Basic, - Shape = NodeBasicShapes.Rectangle, - CornerRadius = 10 + (node as Node).Shape = new BasicShape() + { + Type = NodeShapes.Basic, + Shape = NodeBasicShapes.Rectangle, + CornerRadius = 10 }; } return null; @@ -321,11 +322,14 @@ The diagram provides the ability to customize the border color of a node using t ```cshtml @using Syncfusion.Blazor.Diagram + + @code { // Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -360,11 +364,13 @@ The diagram allows customizing the border width of a node using the [BorderWidth ```cshtml @using Syncfusion.Blazor.Diagram + + @code { // Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -403,30 +409,30 @@ Diagram supports adding a [Shadow](https://help.syncfusion.com/cr/blazor/Syncfus @code { //Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes array. Node node = new Node() + { + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Constraints = NodeConstraints.Default | NodeConstraints.Shadow, + Shadow = new Shadow() { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, - Constraints = NodeConstraints.Default | NodeConstraints.Shadow, - Shadow = new Shadow() - { - Angle = 50, - Color = "gray", - Opacity = 0.8, - Distance = 10 - } - }; + Angle = 50, + Color = "gray", + Opacity = 0.8, + Distance = 10 + } + }; nodes.Add(node); } } @@ -448,7 +454,7 @@ The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shad @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -462,10 +468,10 @@ The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shad // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" }, Constraints = NodeConstraints.Default | NodeConstraints.Shadow, // Custom Shadow of the node. @@ -508,7 +514,7 @@ There are two types of gradients: @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -537,7 +543,7 @@ There are two types of gradients: { new GradientStop(){ Color = "white", Offset = 0}, new GradientStop(){ Color = "#6495ED", Offset = 100} - }, + }, } }, }; @@ -562,7 +568,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -575,10 +581,10 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn // Size of the node. Width = 100, Height = 100, - Shape = new BasicShape() - { - Type = NodeShapes.Basic, - Shape = NodeBasicShapes.Ellipse + Shape = new BasicShape() + { + Type = NodeShapes.Basic, + Shape = NodeBasicShapes.Ellipse }, Style = new ShapeStyle() { @@ -596,7 +602,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn { new GradientStop() { Color = "#00555b", Offset = 45 }, new GradientStop() { Color= "#37909A", Offset= 90 } - }, + } } }, }; @@ -624,7 +630,7 @@ The following code shows how to set the `AdditionalInfo` value. @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -640,9 +646,9 @@ The following code shows how to set the `AdditionalInfo` value. // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6BA5D7", + Style = new ShapeStyle() + { + Fill = "#6BA5D7", StrokeColor = "white" }, AdditionalInfo = NodeInfo @@ -673,47 +679,47 @@ The following code illustrates how to render nodes based on the stack order. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // nodes are created and stored in nodes array. Node node1 = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + ZIndex = 2, + Style = new ShapeStyle() { - ID = "node1", - // Position of the node. - OffsetX = 250, - OffsetY = 250, - // Size of the node. - Width = 100, - Height = 100, - ZIndex = 2, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - }, - }; + Fill = "#6495ED", + StrokeColor = "white" + }, + }; nodes.Add(node1); Node node2 = new Node() + { + ID = "node2", + // Position of the node. + OffsetX = 300, + OffsetY = 300, + // Size of the node. + Width = 100, + Height = 100, + ZIndex = 1, + Style = new ShapeStyle() { - ID = "node2", - // Position of the node. - OffsetX = 300, - OffsetY = 300, - // Size of the node. - Width = 100, - Height = 100, - ZIndex = 1, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - }, - }; + Fill = "#6495ED", + StrokeColor = "white" + }, + }; nodes.Add(node2); } } @@ -737,31 +743,31 @@ The following code illustrates how to set the Pivot value. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes array. Node node = new Node() + { + ID = "node", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + ZIndex = 2, + Style = new ShapeStyle() { - ID = "node", - // Position of the node. - OffsetX = 250, - OffsetY = 250, - // Size of the node. - Width = 100, - Height = 100, - ZIndex = 2, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - }, - // Pivot of the node. - Pivot = new DiagramPoint() { X = 0, Y = 0 } - }; + Fill = "#6495ED", + StrokeColor = "white" + }, + // Pivot of the node. + Pivot = new DiagramPoint() { X = 0, Y = 0 } + }; nodes.Add(node); } } @@ -785,25 +791,25 @@ The following code illustrates how to set the background color for the node. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes array. Node node = new Node() - { - ID = "node", - // Position of the node. - OffsetX = 250, - OffsetY = 250, - // Size of the node. - Width = 100, - Height = 100, - BackgroundColor = "red", - Shape = new BasicShape(){Shape = NodeBasicShapes.Star} - }; + { + ID = "node", + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + BackgroundColor = "red", + Shape = new BasicShape() { Shape = NodeBasicShapes.Star } + }; nodes.Add(node); } } @@ -822,7 +828,7 @@ The following code illustrates how to set the auto layout property for nodes. ```cshtml @using Syncfusion.Blazor.Diagram - + @@ -833,14 +839,14 @@ The following code illustrates how to set the auto layout property for nodes. -@code +@code { - int left = 40; - int top = 50; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int left = 40; + private int top = 50; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -851,10 +857,10 @@ The following code illustrates how to set the auto layout property for nodes. node.Style = new ShapeStyle() { Fill = "darkcyan", StrokeWidth = 3, StrokeColor = "Black" }; node.Annotations = new DiagramObjectCollection() { - new ShapeAnnotation - { + new ShapeAnnotation + { Content = node.Annotations[0].Content, - Style = new TextStyle() { Color = "white", Bold = true }, + Style = new TextStyle() { Color = "white", Bold = true }, } }; } @@ -905,39 +911,40 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() - { - ID = "node1", - Width = 100, - Height = 100, - OffsetX = 300, - OffsetY = 300, + { + ID = "node1", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 300, - }; + }; nodes.Add(node1); Node node2 = new Node() - { - ID = "node2", - Width = 100, - Height = 100, - OffsetX = 300, - OffsetY = 500, - }; + { + ID = "node2", + Width = 100, + Height = 100, + OffsetX = 300, + OffsetY = 500, + }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } + private void GetInEdges() { List Inedges = new List(); @@ -963,8 +970,8 @@ The following code illustrates how to get data source settings details. @using Syncfusion.Blazor.Diagram - - + + @@ -974,14 +981,14 @@ The following code illustrates how to get data source settings details. -@code +@code { - int left = 40; - int top = 50; - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); - int HorizontalSpacing = 40; - int VerticalSpacing = 40; + private int left = 40; + private int top = 50; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + private int HorizontalSpacing = 40; + private int VerticalSpacing = 40; private void OnNodeCreating(IDiagramObject obj) { @@ -1005,7 +1012,7 @@ The following code illustrates how to get data source settings details. (connector as Connector).Type = ConnectorSegmentType.Orthogonal; } - public class HierarchicalDetails + private class HierarchicalDetails { public string Id { get; set; } public string Role { get; set; } @@ -1013,7 +1020,8 @@ The following code illustrates how to get data source settings details. public string ChartType { get; set; } public string Color { get; set; } } - public List DataSource = new List() + + private List DataSource = new List() { new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, diff --git a/blazor/diagram/nodes/events.md b/blazor/diagram/nodes/events.md index e6b0626b99..2fbd85ea26 100644 --- a/blazor/diagram/nodes/events.md +++ b/blazor/diagram/nodes/events.md @@ -28,15 +28,13 @@ The following code example demonstrates how to get the selection change event in ```cshtml @using Syncfusion.Blazor.Diagram - @code { // To define node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -51,10 +49,10 @@ The following code example demonstrates how to get the selection change event in Width = 100, Height = 100, // Appearance of the node - Style = new ShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" } }; // Add node. @@ -62,14 +60,14 @@ The following code example demonstrates how to get the selection change event in } // Event to notify the selection changing event before selecting/unselecting the diagram elements. - public void OnSelectionChanging(SelectionChangingEventArgs args) + private void OnSelectionChanging(SelectionChangingEventArgs args) { // Sets true to cancel the selection. args.Cancel = true; } // Event to notify the selection changed event after selecting/unselecting the diagram elements. - public void OnSelectionChanged(SelectionChangedEventArgs args) + private void OnSelectionChanged(SelectionChangedEventArgs args) { // Action to be performed. } @@ -92,15 +90,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - @code { // To define node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -114,26 +110,26 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" }, - Shape = new Shape() { Type = NodeShapes.Basic} + Shape = new Shape() { Type = NodeShapes.Basic } }; // Add node. nodes.Add(node); } // Event to notify the position changing event while dragging the elements in diagram. - public void OnPositionChanging(PositionChangingEventArgs args) + private void OnPositionChanging(PositionChangingEventArgs args) { // Sets true to cancel the action. args.Cancel = true; } //Event to notify the position changed event when the node's or connector's position is changed. - public void OnPositionChanged(PositionChangedEventArgs args) + private void OnPositionChanged(PositionChangedEventArgs args) { // Action to be performed. } @@ -156,15 +152,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - + @code { // To define node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -178,10 +172,10 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" } }; // Add node. @@ -189,14 +183,14 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn } // Event to notify the Size changing event before the diagram elements size is changed. - public void OnSizeChanging(SizeChangingEventArgs args) + private void OnSizeChanging(SizeChangingEventArgs args) { // Sets true to cancel the resize action args.Cancel = true; } // Event to notify the Size change event after the diagram elements size is changed. - public void OnSizeChanged(SizeChangedEventArgs args) + private void OnSizeChanged(SizeChangedEventArgs args) { // Action to be performed. } @@ -219,15 +213,13 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - @code { // To define node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -241,10 +233,10 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" } }; // Add node. @@ -252,14 +244,14 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn } // Event to notify the rotation changing event before the node is rotated. - public void OnRotateChanging(RotationChangingEventArgs args) + private void OnRotateChanging(RotationChangingEventArgs args) { // Sets true to cancel the rotation args.Cancel = true; } // Event to notify the rotation changed event after the node is rotated. - public void OnRotateChanged(RotationChangedEventArgs args) + private void OnRotateChanged(RotationChangedEventArgs args) { // Action to be performed. } @@ -276,9 +268,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram - + @code { @@ -297,18 +287,18 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6BA5D7", + StrokeColor = "white" } }; // Add node. nodes.Add(node); } - public void OnNodeCreating(IDiagramObject obj) - { + private void OnNodeCreating(IDiagramObject obj) + { Node node = obj as Node; node.Style.Fill = "#357BD2"; node.Style.StrokeColor = "White"; @@ -326,15 +316,15 @@ The [PropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di ```cshtml @using Syncfusion.Blazor.Diagram - - -@code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -348,6 +338,7 @@ The [PropertyChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di }; nodes.Add(node); } + // Method to handle Node Property Changed event private void OnNodePropertyChanged(PropertyChangedEventArgs args) { @@ -377,15 +368,14 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node = new Node() @@ -397,7 +387,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn }; nodes.Add(node); } - // Notify the Collection Changed event while changing the collection of the node at run time. + + // Notify the Collection Changed event while changing the collection of the node at run time. private void OnCollectionChanged(CollectionChangedEventArgs args) { //Action to be performed. @@ -416,15 +407,14 @@ The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -436,8 +426,11 @@ The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram }; nodes.Add(node); } + + //Notify the mouse enter event. private void OnMouseEnter(DiagramElementMouseEventArgs args) { + // Actions to be performed } } ``` @@ -453,15 +446,14 @@ The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -473,8 +465,11 @@ The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram }; nodes.Add(node); } + + //Notify the mouse leave event. private void OnMouseLeave(DiagramElementMouseEventArgs args) { + // Actions to be performed } } ``` @@ -490,15 +485,14 @@ The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel - - -@code{ - SfDiagramComponent Diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + + + +@code +{ + private SfDiagramComponent Diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -510,8 +504,11 @@ The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram }; nodes.Add(node); } + + //Notify the mouse hover event. private void OnMouseHover(DiagramElementMouseEventArgs args) { + // Actions to be performed } } ``` diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md index a5a4aca0fe..ebc4749446 100644 --- a/blazor/diagram/nodes/expand-and-collapse.md +++ b/blazor/diagram/nodes/expand-and-collapse.md @@ -26,8 +26,8 @@ The following code example illustrates how to create icons of various shapes on @code { - DiagramObjectCollection nodes= new DiagramObjectCollection(); - DiagramObjectCollection connectors= new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -76,7 +76,7 @@ The following code example illustrates how to create icons of various shapes on Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new DiagramObjectCollection() + Annotations = new DiagramObjectCollection() { new ShapeAnnotation() { @@ -126,24 +126,26 @@ The following code example illustrates how to create an icon of various shapes i -@code { - - SfDiagramComponent diagram; - double top = 50; - double bottom = 50; - double right = 50; - double left = 50; - LayoutType type = LayoutType.OrganizationalChart; - LayoutOrientation oreintation = LayoutOrientation.TopToBottom; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; - Orientation subTreeOrientation = Orientation.Vertical; - SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Left; + +@code +{ + private SfDiagramComponent diagram; + private double top = 50; + private double bottom = 50; + private double right = 50; + private double left = 50; + private LayoutType type = LayoutType.OrganizationalChart; + private LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; + private Orientation subTreeOrientation = Orientation.Vertical; + private SubTreeAlignmentType subTreeAlignment = SubTreeAlignmentType.Left; private string FixedNode = null; + //private DiagramRect bounds = new Rect(200, 200, 500, 500); - public class HierarchicalDetails + private class HierarchicalDetails { public string Id { get; set; } public string Role { get; set; } @@ -151,7 +153,8 @@ The following code example illustrates how to create an icon of various shapes i public string ChartType { get; set; } public string Color { get; set; } } - public List DataSource = new List() + + private List DataSource = new List() { new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, @@ -173,6 +176,7 @@ The following code example illustrates how to create an icon of various shapes i new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } }; + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) { if (rows == 0) @@ -205,7 +209,9 @@ The following code example illustrates how to create an icon of various shapes i } return options; } + private int rows = 0; + private void NodeCreating(IDiagramObject obj) { Node node = obj as Node; @@ -226,18 +232,19 @@ The following code example illustrates how to create an icon of various shapes i } }; node.ExpandIcon = new DiagramExpandIcon() - { - Shape = DiagramExpandIcons.Minus, - Height = 20, - Width = 20, - }; + { + Shape = DiagramExpandIcons.Minus, + Height = 20, + Width = 20, + }; node.CollapseIcon = new DiagramCollapseIcon() - { - Shape = DiagramCollapseIcons.Plus, - Height = 20, - Width = 20, - }; + { + Shape = DiagramCollapseIcons.Plus, + Height = 20, + Width = 20, + }; } + private void ConnectorCreating(IDiagramObject connector) { (connector as Connector).Type = ConnectorSegmentType.Orthogonal; @@ -274,9 +281,9 @@ The following code explains how to initialize the icon with a path shape. @code { //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -337,11 +344,11 @@ The following code explains how to initialize the icon with a path shape. }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } } @@ -366,9 +373,9 @@ The following code explains how to change the appearance of the Icon using `Fill @code { //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -398,7 +405,7 @@ The following code explains how to change the appearance of the Icon using `Fill Width = 20, PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z", CornerRadius = 10, - Fill = "Gray", + Fill = "Gray", }, CollapseIcon = new DiagramCollapseIcon() { @@ -444,11 +451,11 @@ The following code explains how to change the appearance of the Icon using `Fill }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } } @@ -468,8 +475,9 @@ The following code explains how to change the icon appearance using the `CornerR @code { - DiagramObjectCollection nodes= new DiagramObjectCollection(); - DiagramObjectCollection connectors= new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -520,7 +528,7 @@ The following code explains how to change the icon appearance using the `CornerR Fill = "#6BA5D7", StrokeColor = "white" }, - Annotations = new DiagramObjectCollection() + Annotations = new DiagramObjectCollection() { new ShapeAnnotation() { @@ -595,9 +603,10 @@ The following table shows the relationship between the Icon position and Icon Of @code { //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -674,11 +683,11 @@ The following table shows the relationship between the Icon position and Icon Of }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } } @@ -698,30 +707,31 @@ To implement a custom template for expand and collapse icons, please refer to th - - @{ -
- -
- } - - - @{ -
- -
- } - - - - - @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); + + @{ +
+ +
+ } + + + @{ +
+ +
+ } + + + + +@code +{ + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { - nodes = new DiagramObjectCollection(){}; + nodes = new DiagramObjectCollection() { }; Node node1 = new Node() { ID = "node1", @@ -775,8 +785,8 @@ To implement a custom template for expand and collapse icons, please refer to th } }, ExpandIcon = new DiagramExpandIcon() - { - + { + Shape = DiagramExpandIcons.Template, Height = 20, Width = 20, @@ -790,11 +800,11 @@ To implement a custom template for expand and collapse icons, please refer to th }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } } @@ -819,9 +829,10 @@ The following code shows how to set the `Padding` property of expand or collapse @code { //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -850,12 +861,13 @@ The following code shows how to set the `Padding` property of expand or collapse Height = 20, Width = 20, Fill = "Gray", - Padding = new DiagramThickness(){ - Top = 1, - Bottom = 1, - Left = 1, - Right = 1, - }, + Padding = new DiagramThickness() + { + Top = 1, + Bottom = 1, + Left = 1, + Right = 1, + }, BorderColor = "Blue", BorderWidth = 3, }, @@ -866,12 +878,13 @@ The following code shows how to set the `Padding` property of expand or collapse Width = 20, Fill = "Gray", BorderColor = "Blue", - Padding = new DiagramThickness(){ - Top = 1, - Bottom = 1, - Left = 1, - Right = 1, - }, + Padding = new DiagramThickness() + { + Top = 1, + Bottom = 1, + Left = 1, + Right = 1, + }, BorderWidth = 3, }, }; @@ -910,11 +923,11 @@ The following code shows how to set the `Padding` property of expand or collapse }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } } @@ -935,9 +948,10 @@ The Blazor Diagram component includes a [Margin](https://help.syncfusion.com/cr/ @code { //Initialize the diagram's nodes collection - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); //Initialize the diagram's connectors collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node1 = new Node() @@ -966,13 +980,13 @@ The Blazor Diagram component includes a [Margin](https://help.syncfusion.com/cr/ Height = 20, Width = 20, Fill = "Gray", - Margin = new DiagramThickness() + Margin = new DiagramThickness() { Top = 5, Bottom = 5, Left = 5, Right = 5, - }, + }, BorderColor = "Blue", BorderWidth = 3, }, @@ -983,13 +997,13 @@ The Blazor Diagram component includes a [Margin](https://help.syncfusion.com/cr/ Width = 20, Fill = "Gray", BorderColor = "Blue", - Margin = new DiagramThickness() + Margin = new DiagramThickness() { Top = 5, Bottom = 5, Left = 5, Right = 5, - }, + }, BorderWidth = 3, }, }; @@ -1028,11 +1042,11 @@ The Blazor Diagram component includes a [Margin](https://help.syncfusion.com/cr/ }; nodes.Add(node2); Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - TargetID = "node2", - }; + { + ID = "connector1", + SourceID = "node1", + TargetID = "node2", + }; connectors.Add(connector1); } } diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md index 7c6edbb117..08d7e84fb7 100644 --- a/blazor/diagram/nodes/interaction.md +++ b/blazor/diagram/nodes/interaction.md @@ -20,7 +20,6 @@ A node can be selected at runtime by using the [Select](https://help.syncfusion. @using System.Collections.ObjectModel @using Syncfusion.Blazor.Buttons - @@ -28,35 +27,35 @@ A node can be selected at runtime by using the [Select](https://help.syncfusion. @code { // Reference of the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; // To define node collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes collection. Node node = new Node() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } - }; + { + // 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); } - public void OnSelect() + private void OnSelect() { // Select the node diagram.Select(new ObservableCollection { diagram.Nodes[0] }); } - public void UnSelect() + private void UnSelect() { // clear selection in the diagram diagram.ClearSelection(); @@ -83,36 +82,35 @@ A node can be dragged at runtime by using the [Drag](https://help.syncfusion.com @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { // Reference of the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; // To define node collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes collection. Node node = new Node() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } - }; + { + // 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); } - public void OnDrag() + private void OnDrag() { // Drag the node Diagram.Drag(Diagram.Nodes[0], 10, 10); @@ -138,36 +136,35 @@ A node can be resized at runtime by using the [Scale](https://help.syncfusion.co @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { // Reference of the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; // To define node collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // A node is created and stored in nodes collection. Node node = new Node() - { - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" } - }; + { + // 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); } - public void OnResize() + private void OnResize() { // Resize the node diagram.Scale(diagram.Nodes[0], 0.5, 0.5, new DiagramPoint() { X = 0, Y = 0 }); @@ -194,16 +191,15 @@ A node can be rotated at runtime by using the [Rotate](https://help.syncfusion.c @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { // Reference of the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; // To define node collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -223,7 +219,7 @@ A node can be rotated at runtime by using the [Rotate](https://help.syncfusion.c nodes.Add(node); } - public void OnRotate() + private void OnRotate() { // Rotate the node diagram.Rotate(diagram.Nodes[0], diagram.Nodes[0].RotationAngle + 10); @@ -251,10 +247,13 @@ Use this property when you want to specify the node’s rotation at the time of ```cshtml @using Syncfusion.Blazor.Diagram + + @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md index 4e661c66d0..58a925be4a 100644 --- a/blazor/diagram/nodes/nodes.md +++ b/blazor/diagram/nodes/nodes.md @@ -33,23 +33,23 @@ To create a node, define the [Node](https://help.syncfusion.com/cr/blazor/Syncfu @code { //Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // 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" } - }; + { + 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); } @@ -71,45 +71,45 @@ A node can be added at runtime by adding it to the `Nodes` collection of the Dia @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { //Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); 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" } - }; + { + ID = "node1", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; nodes.Add(node); } + //Method to add node at runtime - public void AddNode() + private void AddNode() { Node NewNode = new Node() - { - ID = "node2", - // Position of the node - OffsetX = 450, - OffsetY = 450, - // Size of the node - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED" } - }; + { + ID = "node2", + // Position of the node + OffsetX = 450, + OffsetY = 450, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED" } + }; nodes.Add(NewNode); } } @@ -128,20 +128,16 @@ The following code explains how to add a node with an annotation at runtime by u @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - - - + @code { // Reference to diagram. - SfDiagramComponent diagram; - + private SfDiagramComponent diagram; // Defines diagram's node collection. - DiagramObjectCollection nodes; - - DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection nodes; + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -158,9 +154,9 @@ The following code explains how to add a node with an annotation at runtime by u } // Method to add node with annotation at runtime. - public async void AddLabel() + private async void AddLabel() { - Node NewNode = new Node() + Node NewNode = new Node() { ID = "node2", // Position of the node. @@ -170,7 +166,7 @@ The following code explains how to add a node with an annotation at runtime by u Width = 100, Height = 100, Style = new ShapeStyle() { Fill = "#6495ED" }, - Annotations= new DiagramObjectCollection() + Annotations = new DiagramObjectCollection() { new ShapeAnnotation() { @@ -179,7 +175,7 @@ The following code explains how to add a node with an annotation at runtime by u }, }; NodeCollection.Add(NewNode); - await diagram.AddDiagramElementsAsync(NodeCollection); + await diagram.AddDiagramElementsAsync(NodeCollection); } } ``` @@ -220,33 +216,32 @@ The following code shows how to remove a node at runtime. @using Syncfusion.Blazor.Buttons - @code { //Defines diagram's Node collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); 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" } - }; + { + 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); } - public void RemoveNodes() + private void RemoveNodes() { // Remove Node at runtime nodes.Remove(nodes[0]); @@ -260,7 +255,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn A node can also be removed from the diagram by using the native `RemoveAt` method. Refer to the following example to see how to remove the node at runtime. ```csharp -public void RemoveNodes() +private void RemoveNodes() { nodes.RemoveAt(0); } @@ -279,30 +274,31 @@ public void RemoveNodes() @functions { + private SfDiagramComponent diagram; + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); - SfDiagramComponent diagram; - public DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + OffsetX = 100, + OffsetY = 200, + Height = 100, + Width = 100, + Annotations = new DiagramObjectCollection() { - ID = "node1", - OffsetX = 100, - OffsetY = 200, - Height = 100, - Width = 100, - Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() - { - Content = "node1" - }, - }, - Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process } - }; + new ShapeAnnotation() + { + Content = "node1" + }, + }, + Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Process } + }; NodeCollection.Add(node1); } - public async Task CloneNode() + + private async Task CloneNode() { Node node = NodeCollection[0].Clone() as Node; node.ID = RandomId(); @@ -318,7 +314,6 @@ public void RemoveNodes() return new string(Enumerable.Repeat(chars, 5) .Select(s => s[random.Next(s.Length)]).ToArray()); } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyWXZchiOJEKsq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -336,34 +331,34 @@ The following code example explains how to change node properties. @using Syncfusion.Blazor.Buttons - @code { //Reference the diagram - SfDiagramComponent Diagram; + private SfDiagramComponent Diagram; //Defines diagram's node collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { nodes = new DiagramObjectCollection(); 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" } - }; + { + 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" } + }; nodes.Add(node); } + //Method to Update node's width and height at runtime - public async void UpdateNodes() + private async void UpdateNodes() { Diagram.BeginUpdate(); Diagram.Nodes[0].Width = 50; diff --git a/blazor/diagram/nodes/positioning.md b/blazor/diagram/nodes/positioning.md index 14a5d38b8a..648e923d73 100644 --- a/blazor/diagram/nodes/positioning.md +++ b/blazor/diagram/nodes/positioning.md @@ -36,29 +36,28 @@ The following code shows how to change the pivot value. @code { //Reference the diagram - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Define diagram's nodes collection - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { //Intialize diagram's nodes collection - nodes = new DiagramObjectCollection(); // A node is created and stored in nodes array. Node node = new Node() - { - ID = "node", - // Position of the node - OffsetX = 250, - OffsetY = 250, - // Size of the node - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, - // Pivot of the node - Pivot = new DiagramPoint() { X = 0, Y = 0 } - }; + { + ID = "node", + // Position of the node + OffsetX = 250, + OffsetY = 250, + // Size of the node + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + // Pivot of the node + Pivot = new DiagramPoint() { X = 0, Y = 0 } + }; nodes.Add(node); } @@ -88,8 +87,8 @@ Rotation of a node is controlled by the [RotationAngle](https://help.syncfusion. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -104,9 +103,9 @@ Rotation of a node is controlled by the [RotationAngle](https://help.syncfusion. // Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", + Style = new ShapeStyle() + { + Fill = "#6495ED", StrokeColor = "white" }, // RotationAngle of the node. @@ -132,9 +131,9 @@ The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.N @code - { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -155,10 +154,10 @@ The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.N //Maximum Size of the node. MaxHeight = 200, MaxWidth = 200, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" }, }; nodes.Add(node); diff --git a/blazor/diagram/overview-component.md b/blazor/diagram/overview-component.md index 3c60d4ebc9..eca640886f 100644 --- a/blazor/diagram/overview-component.md +++ b/blazor/diagram/overview-component.md @@ -34,69 +34,76 @@ The following code illustrates how to create an overview. - + -@code { -SfDiagramComponent Diagram; -private void ConnectorCreating(IDiagramObject connector) -{ - (connector as Connector).Type = ConnectorSegmentType.Orthogonal; - (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; - (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; - (connector as Connector).Constraints = 0; - (connector as Connector).CornerRadius = 5; -} -private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) -{ - options.EnableSubTree = true; - options.Orientation = Orientation.Horizontal; - return options; -} -private void NodeCreating(IDiagramObject obj) + +@code { - Node node = obj as Node; - if (node.Data is System.Text.Json.JsonElement) + private SfDiagramComponent Diagram; + + private void ConnectorCreating(IDiagramObject connector) { - node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); + (connector as Connector).Type = ConnectorSegmentType.Orthogonal; + (connector as Connector).TargetDecorator.Shape = DecoratorShape.None; + (connector as Connector).Style = new ShapeStyle() { StrokeColor = "#6d6d6d" }; + (connector as Connector).Constraints = 0; + (connector as Connector).CornerRadius = 5; } - HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; - node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; - node.BackgroundColor = "#659be5"; - node.Width = 150; - node.Height = 50; - node.Annotations = new DiagramObjectCollection() + + private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options) { - new ShapeAnnotation() + options.EnableSubTree = true; + options.Orientation = Orientation.Horizontal; + return options; + } + + private void NodeCreating(IDiagramObject obj) + { + Node node = obj as Node; + if (node.Data is System.Text.Json.JsonElement) { - Content = hierarchicalData.Name, - Style =new TextStyle(){Color = "white"} + node.Data = System.Text.Json.JsonSerializer.Deserialize(node.Data.ToString()); } + HierarchicalDetails hierarchicalData = node.Data as HierarchicalDetails; + node.Style = new ShapeStyle() { Fill = "#659be5", StrokeColor = "none", StrokeWidth = 2, }; + node.BackgroundColor = "#659be5"; + node.Width = 150; + node.Height = 50; + node.Annotations = new DiagramObjectCollection() + { + new ShapeAnnotation() + { + Content = hierarchicalData.Name, + Style =new TextStyle(){Color = "white"} + } + }; + } + + //Create the hierarchical details with needed properties. + public class HierarchicalDetails + { + public string Name { get; set; } + public string FillColor { get; set; } + public string Category { get; set; } + } + + //Create the data source with node name and fill color values. + public List DataSource = new List() + { + new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, + new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} }; -} - //Create the hierarchical details with needed properties. -public class HierarchicalDetails -{ - public string Name { get; set; } - public string FillColor { get; set; } - public string Category { get; set; } -} -//Create the data source with node name and fill color values. -public List DataSource = new List() -{ - new HierarchicalDetails(){ Name ="Diagram", Category="",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Layout", Category="Diagram",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Tree layout", Category="Layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Organizational chart", Category="Layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Hierarchical tree", Category="Tree layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Radial tree", Category="Tree layout",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Mind map", Category="Hierarchical tree",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Family tree", Category="Hierarchical tree",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Management", Category="Organizational chart",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Human resources", Category="Management",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="University", Category="Management",FillColor="#659be5"}, - new HierarchicalDetails(){ Name ="Business", Category="#Management",FillColor="#659be5"} -}; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVoitXvqgxOfTzQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -148,8 +155,13 @@ The following example shows how to disable the zoom constraint from the default -@code { - SfDiagramComponent diagram; DiagramObjectCollection nodes; DiagramObjectCollection connectors; + +@code +{ + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; + private DiagramObjectCollection connectors; + protected override void OnInitialized() { //Initialize the node and connector collections diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md index ae6e1babc2..2ebaa591c3 100644 --- a/blazor/diagram/page-settings.md +++ b/blazor/diagram/page-settings.md @@ -41,26 +41,27 @@ To learn more about customization of diagram page, refer to the below video link @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Set the page orientation as landscape. + private PageOrientation orientation = PageOrientation.Landscape; + protected override void OnInitialized() { Node node = new Node() + { + ID = "node6", + Width = 50, + Height = 50, + OffsetX = 150, + OffsetY = 100, + Style = new ShapeStyle() { - ID = "node6", - Width = 50, - Height = 50, - OffsetX = 150, - OffsetY = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; nodes.Add(node); } - //Set the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtVyCZNFzDEIdtnt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -93,8 +94,9 @@ Based on the diagramming element position, the size of the page dynamically incr @code { //Sets the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private PageOrientation orientation = PageOrientation.Landscape; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + protected override void OnInitialized() { Node node = new Node() @@ -149,7 +151,10 @@ Customize page appearance using the `PageSettings` properties: @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + //Set the page orientation as landscape. + private PageOrientation orientation = PageOrientation.Landscape; + protected override void OnInitialized() { Node node = new Node() @@ -167,8 +172,6 @@ Customize page appearance using the `PageSettings` properties: }; nodes.Add(node); } - //Set the page orientation as landscape. - public PageOrientation orientation = PageOrientation.Landscape; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSCXXlzWrgqfQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -198,11 +201,8 @@ Refer to the following code example on how to change the stroke, stroke-dasharra @*Initialize the page settings with page orientation and break lines*@ - - + + ``` @@ -221,12 +221,9 @@ The area between the maintain content of a page and the page edges can be change @*Initialize the page settings with page margin*@ - - - + + + ``` @@ -245,30 +242,25 @@ The following code example illustrates how to define boundary constraints with r - - + + @*Initialize the page settings with page orientation and break lines*@ - - - + + @code { //Reference to diagram. - SfDiagramComponent diagram; - public PageOrientation orientation = PageOrientation.Landscape; - public BoundaryConstraints boundaryConstraints = BoundaryConstraints.Page; + private SfDiagramComponent diagram; + private PageOrientation orientation = PageOrientation.Landscape; + private BoundaryConstraints boundaryConstraints = BoundaryConstraints.Page; //Define diagram's nodes collection. - public DiagramObjectCollection - NodeCollection = new DiagramObjectCollection(); + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -290,10 +282,10 @@ The following code example illustrates how to define boundary constraints with r } } }, - Style = new ShapeStyle() - { - Fill = "cornflowerblue", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "cornflowerblue", + StrokeColor = "white" } }; NodeCollection.Add(node); @@ -314,13 +306,16 @@ The following code example illustrates how to set width and height in percentage ```cshtml @using Syncfusion.Blazor.Diagram @using System.Collections.ObjectModel +
- +
+ @code { - DiagramObjectCollection nodes = new DiagramObjectCollection(); - SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + protected override void OnInitialized() { nodes.Add(new Node() diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md index 3d2ea09069..faa93a0935 100644 --- a/blazor/diagram/ports/appearance.md +++ b/blazor/diagram/ports/appearance.md @@ -28,7 +28,7 @@ The following code shows how to change the appearance of the port. @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -53,9 +53,9 @@ The following code shows how to change the appearance of the port. Visibility = PortVisibility.Visible, //Set the style for the port. Style = new ShapeStyle() - { - Fill = "red", - StrokeColor = "black", + { + Fill = "red", + StrokeColor = "black", StrokeWidth = 2 }, Width = 12, @@ -106,7 +106,7 @@ We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -131,7 +131,7 @@ We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr Visibility = PortVisibility.Visible, //Set the style for the port. Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" }, - Width = 12, + Width = 12, Height = 12, // Sets the shape of the port as Custom . Shape = PortShapes.Custom, @@ -171,10 +171,13 @@ The following code shows how to set the `AdditionalInfo` value for a port. ```cshtml @using Syncfusion.Blazor.Diagram + + @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -183,25 +186,25 @@ The following code shows how to set the `AdditionalInfo` value for a port. PortInfo.Add("portInfo", "Port A"); // Create a port with additional info. PointPort port = new PointPort() - { - Offset = new DiagramPoint { X = 0.5, Y = 0.5 }, - Visibility=PortVisibility.Visible, - AdditionalInfo = PortInfo - }; + { + Offset = new DiagramPoint { X = 0.5, Y = 0.5 }, + Visibility = PortVisibility.Visible, + AdditionalInfo = PortInfo + }; // A node is created and stored in nodes collection. Node node = new Node() + { + OffsetX = 250, + OffsetY = 250, + Width = 100, + Height = 100, + Style = new ShapeStyle() { - OffsetX = 250, - OffsetY = 250, - Width = 100, - Height = 100, - Style = new ShapeStyle() - { - Fill = "#6BA5D7", - StrokeColor = "white" - }, - Ports = new DiagramObjectCollection { port } - }; + Fill = "#6BA5D7", + StrokeColor = "white" + }, + Ports = new DiagramObjectCollection { port } + }; // Add node. nodes.Add(node); } diff --git a/blazor/diagram/ports/interaction.md b/blazor/diagram/ports/interaction.md index 4daf798015..34788e54c2 100644 --- a/blazor/diagram/ports/interaction.md +++ b/blazor/diagram/ports/interaction.md @@ -23,7 +23,7 @@ The following code explains how to draw a connector by using port constraints. @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -48,12 +48,12 @@ The following code explains how to draw a connector by using port constraints. Visibility = PortVisibility.Visible, //Set the style for the port. Style = new ShapeStyle() - { - Fill = "gray", + { + Fill = "gray", StrokeColor = "black" - }, - Width = 12, - Height = 12, + }, + Width = 12, + Height = 12, // Sets the shape of the port as Square. Shape = PortShapes.Square, // Enable draw operation for Port. @@ -79,13 +79,12 @@ The following code explains how to draw a connector by using port constraints. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Define diagram's connector collection - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -135,13 +134,14 @@ The following code explains how to draw the connector by using port constraints. ```cshtml @using Syncfusion.Blazor.Diagram - + @code { - DiagramObjectCollection nodes; - public SfDiagramComponent diagram; - IDiagramObject DrawingObject; + private DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private IDiagramObject DrawingObject; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); @@ -203,7 +203,7 @@ The following code explains how to draw the connector by using port constraints. DrawingObject = new Connector() { ID = "connector1", - Type = ConnectorSegmentType.Bezier, + Type = ConnectorSegmentType.Bezier, }; } } diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md index 207a9518db..5da09b0bb7 100644 --- a/blazor/diagram/ports/ports.md +++ b/blazor/diagram/ports/ports.md @@ -40,7 +40,7 @@ To learn more about creating and customizing ports in the Blazor Diagram, watch @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -58,13 +58,13 @@ To learn more about creating and customizing ports in the Blazor Diagram, watch // Initialize port collection. Ports = new DiagramObjectCollection() { - new PointPort() - { - Style = new ShapeStyle(){ Fill = "gray" }, - // Sets the position for the port. - Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, - Visibility = PortVisibility.Visible - } + new PointPort() + { + Style = new ShapeStyle(){ Fill = "gray" }, + // Sets the position for the port. + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, + Visibility = PortVisibility.Visible + } } }; nodes.Add(node); @@ -88,26 +88,25 @@ The following code example demonstrates how to connect connectors to ports on no ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { // Initialize node and connector collections - DiagramObjectCollection nodes = new DiagramObjectCollection(); - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { Node node1 = new Node() - { - ID = "node1", - OffsetX = 200, - OffsetY = 200, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, - Ports = new DiagramObjectCollection() + { + ID = "node1", + OffsetX = 200, + OffsetY = 200, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Ports = new DiagramObjectCollection() { new PointPort() { @@ -117,17 +116,16 @@ The following code example demonstrates how to connect connectors to ports on no Shape = PortShapes.Circle, } } - }; - + }; Node node2 = new Node() - { - ID = "node2", - OffsetX = 400, - OffsetY = 200, - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, - Ports = new DiagramObjectCollection() + { + ID = "node2", + OffsetX = 400, + OffsetY = 200, + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, + Ports = new DiagramObjectCollection() { new PointPort() { @@ -137,20 +135,18 @@ The following code example demonstrates how to connect connectors to ports on no Shape = PortShapes.Circle, } } - }; - + }; // Connector connecting node1's port1 to node2's port1 Connector connector1 = new Connector() - { - ID = "connector1", - SourceID = "node1", - SourcePortID = "port1", - TargetID = "node2", - TargetPortID = "port1", - Type = ConnectorSegmentType.Straight, - Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 } - }; - + { + ID = "connector1", + SourceID = "node1", + SourcePortID = "port1", + TargetID = "node2", + TargetPortID = "port1", + Type = ConnectorSegmentType.Straight, + Style = new ShapeStyle() { StrokeColor = "#6495ED", StrokeWidth = 2 } + }; nodes.Add(node1); nodes.Add(node2); connectors.Add(connector1); @@ -170,13 +166,12 @@ The following code example demonstrates how to create a connector port. ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Define diagram's connector collection - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -217,13 +212,12 @@ The following code example demonstrates how to connect one connector to a port o ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { // Initialize connector collection - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -243,7 +237,6 @@ The following code example demonstrates how to connect one connector to a port o } } }; - Connector connector2 = new Connector() { ID = "connector2", @@ -290,13 +283,12 @@ If an `ID` is not set, then default `ID` is assigned automatically. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -315,12 +307,12 @@ If an `ID` is not set, then default `ID` is assigned automatically. nodes.Add(node); } - public void AddPorts() + private void AddPorts() { PointPort port = new PointPort() { ID = "port", - Style = new ShapeStyle(){ Fill = "gray" }, + Style = new ShapeStyle() { Fill = "gray" }, Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible }; @@ -328,7 +320,6 @@ If an `ID` is not set, then default `ID` is assigned automatically. nodes[0].Ports.Add(port); } } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VjBSCjtcVJmUjDyF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -340,7 +331,7 @@ The following code explains how to add ports to a node at runtime by using the ` ```csharp //Method to add port at runtime -public async void AddPorts() +private async void AddPorts() { PointPort port = new PointPort() { @@ -370,7 +361,7 @@ The port [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Po @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -384,42 +375,43 @@ The port [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Po //Size of the node. Width = 100, Height = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" + Style = new ShapeStyle() + { + Fill = "#6495ED", + StrokeColor = "white" }, }; nodes.Add(node); } - public void AddPorts() + private void AddPorts() { - PointPort port1 = new PointPort() - { - ID = "port1", - Offset = new DiagramPoint() { X = 0, Y = 0.5 }, + PointPort port1 = new PointPort() + { + ID = "port1", + Offset = new DiagramPoint() { X = 0, Y = 0.5 }, Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; - PointPort port2 = new PointPort() - { - ID = "port2", - Offset = new DiagramPoint() { X = 1, Y = 0.5 }, - Visibility = PortVisibility.Visible, + PointPort port2 = new PointPort() + { + ID = "port2", + Offset = new DiagramPoint() { X = 1, Y = 0.5 }, + Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; PointPort port3 = new PointPort() - { - ID = "port3", - Offset = new DiagramPoint() { X = 0.5, Y = 0 }, - Visibility = PortVisibility.Visible, + { + ID = "port3", + Offset = new DiagramPoint() { X = 0.5, Y = 0 }, + Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; - PointPort port4 = new PointPort() - { - ID = "port4", Offset = new DiagramPoint() { X = 0.5, Y = 1 }, - Visibility = PortVisibility.Visible, + PointPort port4 = new PointPort() + { + ID = "port4", + Offset = new DiagramPoint() { X = 0.5, Y = 1 }, + Visibility = PortVisibility.Visible, Style = new ShapeStyle() { Fill = "gray" } }; // Add multiple ports in the port collection. @@ -449,7 +441,7 @@ A port can be removed from a node by using the native `RemoveAt` method. The fol @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -474,12 +466,12 @@ A port can be removed from a node by using the native `RemoveAt` method. The fol Visibility = PortVisibility.Visible, //Set the style for the port. Style= new ShapeStyle() - { + { Fill = "red", - StrokeColor = "black", + StrokeColor = "black", StrokeWidth = 2 }, - Width = 12, + Width = 12, Height = 12, // Sets the shape of the port as Circle . Shape = PortShapes.Circle @@ -489,7 +481,7 @@ A port can be removed from a node by using the native `RemoveAt` method. The fol nodes.Add(node); } - public void RemovePorts() + private void RemovePorts() { (nodes[0].Ports as DiagramObjectCollection).RemoveAt(0); } @@ -509,46 +501,45 @@ The following code example explains how to change port properties at runtime. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes; + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes; -protected override void OnInitialized() -{ - // Initialize port collection. - DiagramObjectCollection ports = new DiagramObjectCollection(); - ports.Add(new PointPort() - { - ID = "port", - Offset = new DiagramPoint() - { - X = 0, - Y = 0.5 - }, - Visibility = PortVisibility.Visible - }); - // A node is created and stored in nodes array. - nodes = new DiagramObjectCollection(); - Node node = new Node() + protected override void OnInitialized() { - // Position of the node. - OffsetX = 250, - OffsetY = 250, - // Size of the node. - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, - Ports = ports - }; - nodes.Add(node); -} + // Initialize port collection. + DiagramObjectCollection ports = new DiagramObjectCollection(); + ports.Add(new PointPort() + { + ID = "port", + Offset = new DiagramPoint() + { + X = 0, + Y = 0.5 + }, + Visibility = PortVisibility.Visible + }); + // A node is created and stored in nodes array. + nodes = new DiagramObjectCollection(); + Node node = new Node() + { + // Position of the node. + OffsetX = 250, + OffsetY = 250, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeColor = "white" }, + Ports = ports + }; + nodes.Add(node); + } - public async void UpdatePort() + private async void UpdatePort() { //Update ports at run time. diagram.BeginUpdate(); @@ -570,10 +561,7 @@ The following code example shows how to set the connection direction for a port. ```cshtml @using Syncfusion.Blazor.Diagram - - - - + @code { @@ -585,59 +573,61 @@ The following code example shows how to set the connection direction for a port. protected override void OnInitialized() { Node node1 = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 450, + OffsetY = 200, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { Fill = "#6BA5D7" }, + Ports = new DiagramObjectCollection() { - ID = "node1", - // Position of the node. - OffsetX = 450, - OffsetY = 200, - // Size of the node. - Width = 100, - Height = 100, - Style = new ShapeStyle() { Fill = "#6BA5D7" }, - Ports = new DiagramObjectCollection() - { - new PointPort() - { ID="port1", - Offset = new DiagramPoint() { X = 0, Y = 0 }, - Visibility = PortVisibility.Visible, - } + new PointPort() + { + ID="port1", + Offset = new DiagramPoint() { X = 0, Y = 0 }, + Visibility = PortVisibility.Visible, } - }; + } + }; nodes.Add(node1); Node node2 = new Node() + { + ID = "node2", + // Position of the node. + OffsetX = 270, + OffsetY = 300, + // Size of the node. + Style = new ShapeStyle() { Fill = "#6BA5D7" }, + Width = 100, + Height = 100, + Ports = new DiagramObjectCollection() { - ID = "node2", - // Position of the node. - OffsetX = 270, - OffsetY = 300, - // Size of the node. - Style = new ShapeStyle() { Fill = "#6BA5D7" }, - Width = 100, - Height = 100, - Ports = new DiagramObjectCollection() - { - new PointPort() - { ID="port2", - Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, - Visibility = PortVisibility.Visible, - //Sets the connection direction as Left - ConnectionDirection = PortConnectionDirection.Left - } + new PointPort() + { + ID="port2", + Offset = new DiagramPoint() { X = 0.5, Y = 0.5 }, + Visibility = PortVisibility.Visible, + //Sets the connection direction as Left + ConnectionDirection = PortConnectionDirection.Left } - }; + } + }; // Add node. nodes.Add(node2); Connector Connector1 = new Connector() - { - ID = "connector1", - // Set the source and target point of the connector. - SourceID = "node2", - TargetID = "node1", - SourcePortID = "port2", - TargetPortID = "port1", - // Type of the connector segments. - Type = ConnectorSegmentType.Orthogonal - }; + { + ID = "connector1", + // Set the source and target point of the connector. + SourceID = "node2", + TargetID = "node1", + SourcePortID = "port2", + TargetPortID = "port1", + // Type of the connector segments. + Type = ConnectorSegmentType.Orthogonal + }; connectors.Add(Connector1); } } @@ -657,15 +647,14 @@ The following code example shows how to get `InEdges` and `OutEdges` of a port. @using Syncfusion.Blazor.Diagram @using Syncfusion.Blazor.Buttons - @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes= new DiagramObjectCollection(); - DiagramObjectCollection connectors= new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -676,7 +665,7 @@ The following code example shows how to get `InEdges` and `OutEdges` of a port. Height = 100, OffsetX = 300, OffsetY = 300, - // Initialize port collection. + // Initialize port collection. Ports = new DiagramObjectCollection() { new PointPort() @@ -686,18 +675,17 @@ The following code example shows how to get `InEdges` and `OutEdges` of a port. Visibility = PortVisibility.Visible, //Set the style for the port. Style= new ShapeStyle() - { + { Fill = "red", - StrokeColor = "black", + StrokeColor = "black", StrokeWidth = 2 }, - Width = 12, + Width = 12, Height = 12, - // Sets the shape of the port as a Circle. + // Sets the shape of the port as a Circle. Shape = PortShapes.Circle } }, - }; nodes.Add(node1); Node node2 = new Node() @@ -707,7 +695,7 @@ The following code example shows how to get `InEdges` and `OutEdges` of a port. Height = 100, OffsetX = 300, OffsetY = 500, - // Initialize port collection. + // Initialize port collection. Ports = new DiagramObjectCollection() { new PointPort() @@ -717,12 +705,12 @@ The following code example shows how to get `InEdges` and `OutEdges` of a port. Visibility = PortVisibility.Visible, //Set the style for the port. Style= new ShapeStyle() - { + { Fill = "red", - StrokeColor = "black", + StrokeColor = "black", StrokeWidth = 2 }, - Width = 12, + Width = 12, Height = 12, // Sets the shape of the port as Circle . Shape = PortShapes.Circle @@ -734,15 +722,16 @@ The following code example shows how to get `InEdges` and `OutEdges` of a port. { ID = "connector1", SourceID = "node1", - SourcePortID="port1", - TargetPortID="port1", + SourcePortID = "port1", + TargetPortID = "port1", TargetID = "node2", }; connectors.Add(connector1); } + private void GetInEdges() { - List Inedges= new List(); + List Inedges = new List(); foreach (string inedge in diagram.Nodes[1].Ports[0].InEdges) { Inedges.Add(inedge); diff --git a/blazor/diagram/ports/positioning.md b/blazor/diagram/ports/positioning.md index fb14a3a9ba..7ebee7115d 100644 --- a/blazor/diagram/ports/positioning.md +++ b/blazor/diagram/ports/positioning.md @@ -27,7 +27,7 @@ Use [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Poi @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -104,13 +104,12 @@ The following code example demonstrates how to set path position for a connector ```cshtml @using Syncfusion.Blazor.Diagram - - + @code { //Define diagram's connector collection - DiagramObjectCollection connectors; + private DiagramObjectCollection connectors; protected override void OnInitialized() { @@ -166,11 +165,11 @@ The following code shows how to align ports. ```cshtml @using Syncfusion.Blazor.Diagram - + @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -186,18 +185,18 @@ The following code shows how to align ports. Height = 100, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, // Initialize port collection. - Ports = new DiagramObjectCollection() + Ports = new DiagramObjectCollection() { - new PointPort() + new PointPort() { ID = "port1", Offset = new DiagramPoint() { X = 0, Y = 0 }, Visibility = PortVisibility.Visible, //Set the style for the port. Style = new ShapeStyle(){ Fill="gray", StrokeColor="black"}, - Width = 12, - Height = 12, - // Sets the shape of the port as Square. + Width = 12, + Height = 12, + // Sets the shape of the port as Square. Shape = PortShapes.Square, HorizontalAlignment = HorizontalAlignment.Center, VerticalAlignment = VerticalAlignment.Center @@ -224,11 +223,11 @@ N> The default values for `HorizontalAlignment` and `VerticalAlignment` are `Cen ```cshtml @using Syncfusion.Blazor.Diagram - + @code { - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; protected override void OnInitialized() { @@ -244,9 +243,9 @@ N> The default values for `HorizontalAlignment` and `VerticalAlignment` are `Cen Height = 100, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" }, // Initialize port collection. - Ports = new DiagramObjectCollection() + Ports = new DiagramObjectCollection() { - new PointPort() + new PointPort() { ID = "port1", Offset = new DiagramPoint() { X = 0.5, Y = 1 }, @@ -254,7 +253,7 @@ N> The default values for `HorizontalAlignment` and `VerticalAlignment` are `Cen //Set the style for the port. Style= new ShapeStyle() { Fill = "gray", StrokeColor = "black" }, Width = 12, - Height = 12, + Height = 12, // Sets the shape of the port as Square. Shape = PortShapes.Square, HorizontalAlignment = HorizontalAlignment.Left, diff --git a/blazor/diagram/print.md b/blazor/diagram/print.md index f6b55b8ba9..6268228dae 100644 --- a/blazor/diagram/print.md +++ b/blazor/diagram/print.md @@ -49,20 +49,21 @@ The following code example illustrates how to print the region occupied by the d -@code { - +@code +{ //Reference the diagram - SfDiagramComponent diagram; - double left = 10; - double top = 10; - double right = 10; - double bottom = 10; - double width = 410; - double height = 550; - bool multiplePage = true; - bool showPageBreak = true; - DiagramPrintExportRegion region = DiagramPrintExportRegion.PageSettings; - PageOrientation orientation = PageOrientation.Portrait; + private SfDiagramComponent diagram; + private double left = 10; + private double top = 10; + private double right = 10; + private double bottom = 10; + private double width = 410; + private double height = 550; + private bool multiplePage = true; + private bool showPageBreak = true; + private DiagramPrintExportRegion region = DiagramPrintExportRegion.PageSettings; + private PageOrientation orientation = PageOrientation.Portrait; + //Method to prin the diagram private async Task OnPrint() { @@ -99,21 +100,32 @@ The following code example illustrates how to print a selected region in the dia -@code { - +@code +{ //Reference the diagram - SfDiagramComponent diagram; - double left = 10; - double top = 10; - double right = 10; - double bottom = 10; - double width = 410; - double height = 550; - - bool multiplePage = true; - bool showPageBreak = true; - DiagramPrintExportRegion region = DiagramPrintExportRegion.ClipBounds; - PageOrientation orientation = PageOrientation.Landscape; + private SfDiagramComponent diagram; + private double left = 10; + private double top = 10; + private double right = 10; + private double bottom = 10; + private double width = 410; + private double height = 550; + private bool multiplePage = true; + private bool showPageBreak = true; + private DiagramPrintExportRegion region = DiagramPrintExportRegion.ClipBounds; + private PageOrientation orientation = PageOrientation.Landscape; + private double lTop = 50; + private double lBottom = 50; + private double lRight = 50; + private double lLeft = 50; + private LayoutType type = LayoutType.OrganizationalChart; + private LayoutOrientation oreintation = LayoutOrientation.TopToBottom; + private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; + private VerticalAlignment verticalAlignment = VerticalAlignment.Auto; + private int HorizontalSpacing = 30; + private int VerticalSpacing = 30; + private string FixedNode = null; + //Method to prin the diagram private async Task OnPrint() { @@ -125,17 +137,6 @@ The following code example illustrates how to print a selected region in the dia await diagram.PrintAsync(print); } - double lTop = 50; - double lBottom = 50; - double lRight = 50; - double lLeft = 50; - LayoutType type = LayoutType.OrganizationalChart; - LayoutOrientation oreintation = LayoutOrientation.TopToBottom; - HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto; - VerticalAlignment verticalAlignment = VerticalAlignment.Auto; - int HorizontalSpacing = 30; - int VerticalSpacing = 30; - private string FixedNode = null; public class HierarchicalDetails { public string Id { get; set; } @@ -144,28 +145,28 @@ The following code example illustrates how to print a selected region in the dia public string ChartType { get; set; } public string Color { get; set; } } + public List DataSource = new List() { - new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, - new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, - new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, - new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, - new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, - new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } - + new HierarchicalDetails() { Id= "parent", Role= "Board", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "1", Role= "General Manager", Manager= "parent", ChartType= "right", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "11", Role= "Assistant Manager", Manager= "1", Color= "#71AF17" }, + new HierarchicalDetails() { Id= "2", Role= "Human Resource Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "3", Role= "Trainers", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "4", Role= "Recruiting Team", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "5", Role= "Finance Asst. Manager", Manager= "2", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "6", Role= "Design Manager", Manager= "1",ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "7", Role= "Design Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "8", Role= "Development Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "9", Role= "Drafting Supervisor", Manager= "6", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "10", Role= "Operation Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "11", Role= "Statistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "12", Role= "Logistic Department", Manager= "10", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "16", Role= "Marketing Manager", Manager= "1", ChartType= "right", Color= "#1859B7" }, + new HierarchicalDetails() { Id= "17", Role= "Oversea sales Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "18", Role= "Petroleum Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "20", Role= "Service Dept. Manager", Manager= "16", Color= "#2E95D8" }, + new HierarchicalDetails() { Id= "21", Role= "Quality Department", Manager= "16", Color= "#2E95D8" } }; private void NodeCreating(IDiagramObject obj) @@ -181,14 +182,15 @@ The following code example illustrates how to print a selected region in the dia node.Style.Fill = hierarchicalData.Color; // node.IsVisible = false; node.Annotations = new DiagramObjectCollection() - { - new ShapeAnnotation() { - Content = hierarchicalData.Role, - Style =new TextStyle(){Color = "white"} - } - }; + new ShapeAnnotation() + { + Content = hierarchicalData.Role, + Style =new TextStyle(){Color = "white"} + } + }; } + private void ConnectorCreating(IDiagramObject connector) { (connector as Connector).Type = ConnectorSegmentType.Orthogonal; diff --git a/blazor/diagram/rulers.md b/blazor/diagram/rulers.md index 01c18e5832..3f6b0ae8d7 100644 --- a/blazor/diagram/rulers.md +++ b/blazor/diagram/rulers.md @@ -48,13 +48,13 @@ The code below demonstrates how the diagram ruler can be customized. ```cshtml @using Syncfusion.Blazor.Diagram - - - - - + + + + + @@ -62,16 +62,14 @@ The code below demonstrates how the diagram ruler can be customized. @code { //Reference to diagram. - SfDiagramComponent diagram; + private SfDiagramComponent diagram; //Defining Ruler Interval of Rulers - public int RulerInterval = 20; + private int RulerInterval = 20; //Defining Tick Alignment of Rulers - public TickAlignment RulerTickAlignment = TickAlignment.RightAndBottom; + private TickAlignment RulerTickAlignment = TickAlignment.RightAndBottom; //Defining Marker color of Rulers - public string RulerMarkerColor = "green"; - + private string RulerMarkerColor = "green"; } - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBostNPTCvJUslQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md index ba9a1799a0..9e8d887213 100644 --- a/blazor/diagram/scroll-settings.md +++ b/blazor/diagram/scroll-settings.md @@ -54,11 +54,12 @@ Programmatically change the scroll offsets at runtime by using the external butt -@code { - public double horizontalOffset { get; set; } = 100; - public double verticalOffset { get; set; } = 100; +@code +{ + private double horizontalOffset { get; set; } = 100; + private double verticalOffset { get; set; } = 100; - public void updateScrollValues() + private void updateScrollValues() { //Update scroll settings. verticalOffset = 400; @@ -90,21 +91,22 @@ The Diagram control provides the following event for scroll settings. -@code{ - public double horizontalOffset { get; set; } = 100; - public double verticalOffset { get; set; } = 100; +@code +{ + private double horizontalOffset { get; set; } = 100; + private double verticalOffset { get; set; } = 100; - public void updateScrollValues() + private void updateScrollValues() { //Update the scroll settings. verticalOffset = 400; horizontalOffset = 200; } + private void ScrollChanged(ScrollChangedEventArgs args) { } - } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LthesDXvffnSfzKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -126,48 +128,50 @@ The auto-scroll behavior in the diagram can be enabled or disabled by using the + @code { - ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity; + private ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity; //Defines diagram's node collection. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; //Defines diagram's connector collection. - DiagramObjectCollection connectors = new DiagramObjectCollection(); + private DiagramObjectCollection connectors = new DiagramObjectCollection(); + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // 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() { - 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" - } - }; + 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() { - 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 - }, - }; + StrokeColor = "#6495ED", + StrokeWidth = 1 + }, + }; connectors.Add(Connector); } } @@ -192,34 +196,37 @@ The following example illustrates how to set auto scroll padding. ```cshtml @using Syncfusion.Blazor.Diagram + @* Sets the ScrollSettings for the diagram *@ + @code { - DiagramObjectCollection nodes; - DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 }; + private DiagramObjectCollection nodes; + private DiagramMargin autoScrollBorder = new DiagramMargin() { Left = 30, Right = 30, Top = 30, Bottom = 30 }; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // 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() { - 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" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; // Add node. nodes.Add(node); } @@ -250,7 +257,8 @@ The following example illustrates how to specify the scroll limit. -@code{ +@code +{ ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity; } @@ -275,34 +283,37 @@ The following example illustrates how to sets scroll padding. ```cshtml @using Syncfusion.Blazor.Diagram + @* Sets the ScrollSettings for the diagram *@ + @code { - DiagramMargin ScrollBorder = new DiagramMargin() { Left = 100, Right = 100, Top = 100, Bottom = 100 }; - DiagramObjectCollection nodes; + private DiagramMargin ScrollBorder = new DiagramMargin() { Left = 100, Right = 100, Top = 100, Bottom = 100 }; + private DiagramObjectCollection nodes; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); // 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() { - 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" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; // Add node. nodes.Add(node); } @@ -319,32 +330,35 @@ Scrolling beyond any particular rectangular area can be restricted using the [Sc ```cshtml @using Syncfusion.Blazor.Diagram + + @code { - DiagramRect scrollableArea = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; - DiagramObjectCollection nodes; + private DiagramRect scrollableArea = new DiagramRect() { X = 0, Y = 0, Width = 500, Height = 500 }; + private DiagramObjectCollection nodes; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); Node node = new Node() + { + ID = "node1", + // Position of the node. + OffsetX = 300, + OffsetY = 50, + // Size of the node. + Width = 100, + Height = 100, + Style = new ShapeStyle() { - ID = "node1", - // Position of the node. - OffsetX = 300, - OffsetY = 50, - // Size of the node. - Width = 100, - Height = 100, - Style = new ShapeStyle() - { - Fill = "#6495ED", - StrokeColor = "white" - } - }; + Fill = "#6495ED", + StrokeColor = "white" + } + }; // Add node. nodes.Add(node); } diff --git a/blazor/diagram/serialization.md b/blazor/diagram/serialization.md index 1075dd314a..bcfed84b37 100644 --- a/blazor/diagram/serialization.md +++ b/blazor/diagram/serialization.md @@ -18,7 +18,7 @@ Serialization is the process of saving and loading the persistent state of a dia When saving and loading the diagram, we must use two-way binding (such as @bind) for nodes and connectors. ```cshtml - + ``` ## How to Save the Diagram as String @@ -50,11 +50,11 @@ Load the [SfDiagram](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dia The following code illustrates how to load the SfDiagramComponent from SfDiagram serialized string data. ```cshtml -SfDiagram ClassicDiagram; +private SfDiagram ClassicDiagram; //returns the serialized string of the SfDiagram -string data = ClassicDiagram.SaveDiagram(); +private string data = ClassicDiagram.SaveDiagram(); -SfDiagramComponent Diagram; +private SfDiagramComponent Diagram; //Loads the SfDiagramComponent from saved data of the SfDiagram await Diagram.LoadDiagramAsync(data, true); ``` @@ -64,26 +64,26 @@ await Diagram.LoadDiagramAsync(data, true); The diagram support to save and load the diagram using a file stream. The below code illustrates how to download the saved diagram as a file. ```cshtml - SfDiagramComponent diagram; + private SfDiagramComponent diagram; private string fileName; private string ExtensionType = ".json"; //Method to save the diagram - public async Task SaveDiagram() + private async Task SaveDiagram() { fileName = await jsRuntime.InvokeAsync("getDiagramFileName", ""); await DownloadDiagram(fileName); } //Method to download the diagram - public async Task DownloadDiagram(string fileName) + private async Task DownloadDiagram(string fileName) { string data = diagram.SaveDiagram(); await FileUtil.SaveAs(jsRuntime, data, fileName); } //Method to load the diagram - public async Task LoadDiagram() + private async Task LoadDiagram() { diagram.BeginUpdate(); ExtensionType = ".json"; @@ -91,7 +91,7 @@ The diagram support to save and load the diagram using a file stream. The below await diagram.EndUpdateAsync(); } - public async static Task SaveAs(IJSRuntime js, string data, string fileName) + private async static Task SaveAs(IJSRuntime js, string data, string fileName) { await js.InvokeAsync( "saveDiagram", @@ -100,7 +100,7 @@ The diagram support to save and load the diagram using a file stream. The below // Specify IFormatProvider } - public async static Task Click(IJSRuntime js) + private async static Task Click(IJSRuntime js) { await js.InvokeAsync( "click").ConfigureAwait(true); @@ -117,22 +117,26 @@ The diagram support to save and load the diagram using a file stream. The below } function saveDiagram(data, filename) { - if (window.navigator.msSaveBlob) { - let blob = new Blob([data], { type: 'data:text/json;charset=utf-8,' }); - window.navigator.msSaveOrOpenBlob(blob, filename + '.json'); - } else { - let dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(data); - let a = document.createElement('a'); - a.href = dataStr; - a.download = filename + '.json'; - document.body.appendChild(a); - a.click(); - a.remove(); - } + if (window.navigator.msSaveBlob) + { + let blob = new Blob([data], { type: 'data:text/json;charset=utf-8,' }); + window.navigator.msSaveOrOpenBlob(blob, filename + '.json'); + } + else + { + let dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(data); + let a = document.createElement('a'); + a.href = dataStr; + a.download = filename + '.json'; + document.body.appendChild(a); + a.click(); + a.remove(); + } } - function click() { - document.getElementById('UploadFiles').click(); + function click() + { + document.getElementById('UploadFiles').click(); } ``` diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md index e9d15dd4fe..b5244b6b94 100644 --- a/blazor/diagram/shapes.md +++ b/blazor/diagram/shapes.md @@ -33,8 +33,8 @@ The following code illustrates how to create a text node. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -78,8 +78,8 @@ The following code illustrates how an image node is created. @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -122,27 +122,27 @@ The following code illustrates how to add a Base64 image to the image node. @code { //Initialize node collection with node - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { Node node = new Node() + { + ID = "node1", + //Size of the node + Height = 100, + Width = 100, + //Position of the node + OffsetX = 100, + OffsetY = 100, + //Sets type of the shape as image + Shape = new ImageShape() { - ID = "node1", - //Size of the node - Height = 100, - Width = 100, - //Position of the node - OffsetX = 100, - OffsetY = 100, - //Sets type of the shape as image - Shape = new ImageShape() - { - Type = NodeShapes.Image, - Source = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" - }, - Style = new ShapeStyle() { StrokeColor = "White" } - }; + Type = NodeShapes.Image, + Source = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==" + }, + Style = new ShapeStyle() { StrokeColor = "White" } + }; nodes.Add(node); } } @@ -167,8 +167,8 @@ Stretch and align the image content anywhere but within the node boundary. The [ @code { - SfDiagramComponent diagram; - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private SfDiagramComponent diagram; + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -279,7 +279,7 @@ HTML elements can be embedded in the diagram by setting the node Shape type to [ @code { //Initialize node collection with node - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -325,7 +325,7 @@ The following code example illustrates how to create a basic shape. @code { //Initialize node collection with node. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -376,31 +376,32 @@ To create a path node, set the shape as **Path**. The [Data](https://help.syncfu + @code { //Initialize node collection with node - DiagramObjectCollection NodeCollection = new DiagramObjectCollection() - { - // Creates a path node - new Node() - { - ID="node1", - //Size of the node - Height=100, - Width=100, - //Position of the node - OffsetX=100, - OffsetY=100, - //Sets the type of the shape as path - Shape=new PathShape() - { - Type=NodeShapes.Path, - Data="M 355.31 12.07 C 352.11 5.95 345.35 -1.14 331.41 0.15 C 290.33 3.93 209.61 81.48 190.42 111.69 C 189.66 107.76 187.9 101.49 184.12 98.05 C 189.5 87.75 198.01 69.64 201.57 52.48 C 202.4 52.26 203.12 51.68 203.34 50.44 C 203.72 48.34 204 46.22 204.39 44.13 C 205.01 40.62 199.99 39.43 199.42 42.91 C 199.06 45.06 198.69 47.15 198.35 49.31 C 198.16 50.6 198.69 51.62 199.54 52.14 C 196.08 68.87 187.75 86.63 182.43 96.81 C 181.52 96.29 180.53 95.87 179.41 95.7 C 179.09 95.65 178.8 95.72 178.5 95.71 C 178.19 95.72 177.91 95.65 177.59 95.7 C 176.46 95.87 175.48 96.29 174.56 96.81 C 169.24 86.63 160.92 68.87 157.46 52.14 C 158.3 51.62 158.83 50.6 158.65 49.31 C 158.3 47.15 157.93 45.06 157.58 42.91 C 157.01 39.43 151.99 40.62 152.61 44.13 C 152.99 46.22 153.28 48.34 153.66 50.44 C 153.87 51.68 154.6 52.27 155.42 52.48 C 158.98 69.63 167.49 87.75 172.87 98.05 C 169.09 101.49 167.33 107.76 166.57 111.69 C 147.39 81.48 66.67 3.93 25.59 0.15 C 11.65 -1.14 4.89 5.95 1.69 12.07 C -2.05 19.07 0.84 33.48 6.24 58.46 C 8.66 69.55 11.16 80.96 12.94 92.2 C 13.89 98.36 14.79 104.49 15.64 110.36 C 19.39 136.89 22.52 158.97 32.64 166.04 C 35.41 167.98 38.65 168.78 42.61 168.24 C 52.26 165.95 63.79 164.03 75.99 162.67 C 64.03 171.47 49.08 185.81 44.17 204.84 C 40.38 219.72 43.37 234.86 53.01 250.05 C 64.37 267.81 76.02 279.48 86.91 287.09 C 108.68 302.31 127.52 301.24 135.48 300.78 C 136.3 300.77 136.94 300.71 137.56 300.69 C 143.62 300.61 147.76 291.39 156.6 270.51 C 160.94 260.34 167.39 245.19 172.83 237.47 C 173.97 240.31 177.22 242.31 178.92 242.87 C 178.78 242.94 178.62 243.07 178.49 243.12 C 178.65 243.08 178.83 242.97 179 242.91 C 179.1 242.94 179.25 243.02 179.34 243.04 C 179.26 243.01 179.13 242.93 179.04 242.89 C 180.83 242.24 183.05 240.25 184.16 237.48 C 189.6 245.19 196.05 260.34 200.39 270.52 C 209.23 291.4 213.38 300.61 219.43 300.7 C 220.05 300.72 220.69 300.77 221.51 300.78 C 229.47 301.25 248.31 302.31 270.08 287.1 C 280.97 279.49 292.62 267.81 303.98 250.05 C 313.62 234.86 316.6 219.72 312.82 204.84 C 307.91 185.82 292.96 171.48 281 162.67 C 293.2 164.03 304.73 165.95 314.38 168.24 C 318.34 168.78 321.58 167.98 324.35 166.04 C 334.47 158.97 337.6 136.89 341.35 110.37 C 342.19 104.49 343.1 98.37 344.05 92.2 C 345.83 80.96 348.33 69.55 350.75 58.46 C 356.16 33.48 359.05 19.07 355.31 12.07 z M 183.92 237.56 C 182.35 240.3 180.35 242.13 178.97 242.86 C 177.49 242.19 174.7 240.38 173.08 237.56 C 173.08 237.56 166.19 138.22 166.91 113.58 C 166.91 113.58 169.24 97.92 178.5 97.81 C 187.76 97.92 190.09 113.58 190.09 113.58 C 190.81 138.22 183.92 237.56 183.92 237.56 z" - }, - Style=new ShapeStyle() - { - Fill="Orange" - } + private DiagramObjectCollection NodeCollection = new DiagramObjectCollection() + { + // Creates a path node + new Node() + { + ID="node1", + //Size of the node + Height=100, + Width=100, + //Position of the node + OffsetX=100, + OffsetY=100, + //Sets the type of the shape as path + Shape=new PathShape() + { + Type=NodeShapes.Path, + Data="M 355.31 12.07 C 352.11 5.95 345.35 -1.14 331.41 0.15 C 290.33 3.93 209.61 81.48 190.42 111.69 C 189.66 107.76 187.9 101.49 184.12 98.05 C 189.5 87.75 198.01 69.64 201.57 52.48 C 202.4 52.26 203.12 51.68 203.34 50.44 C 203.72 48.34 204 46.22 204.39 44.13 C 205.01 40.62 199.99 39.43 199.42 42.91 C 199.06 45.06 198.69 47.15 198.35 49.31 C 198.16 50.6 198.69 51.62 199.54 52.14 C 196.08 68.87 187.75 86.63 182.43 96.81 C 181.52 96.29 180.53 95.87 179.41 95.7 C 179.09 95.65 178.8 95.72 178.5 95.71 C 178.19 95.72 177.91 95.65 177.59 95.7 C 176.46 95.87 175.48 96.29 174.56 96.81 C 169.24 86.63 160.92 68.87 157.46 52.14 C 158.3 51.62 158.83 50.6 158.65 49.31 C 158.3 47.15 157.93 45.06 157.58 42.91 C 157.01 39.43 151.99 40.62 152.61 44.13 C 152.99 46.22 153.28 48.34 153.66 50.44 C 153.87 51.68 154.6 52.27 155.42 52.48 C 158.98 69.63 167.49 87.75 172.87 98.05 C 169.09 101.49 167.33 107.76 166.57 111.69 C 147.39 81.48 66.67 3.93 25.59 0.15 C 11.65 -1.14 4.89 5.95 1.69 12.07 C -2.05 19.07 0.84 33.48 6.24 58.46 C 8.66 69.55 11.16 80.96 12.94 92.2 C 13.89 98.36 14.79 104.49 15.64 110.36 C 19.39 136.89 22.52 158.97 32.64 166.04 C 35.41 167.98 38.65 168.78 42.61 168.24 C 52.26 165.95 63.79 164.03 75.99 162.67 C 64.03 171.47 49.08 185.81 44.17 204.84 C 40.38 219.72 43.37 234.86 53.01 250.05 C 64.37 267.81 76.02 279.48 86.91 287.09 C 108.68 302.31 127.52 301.24 135.48 300.78 C 136.3 300.77 136.94 300.71 137.56 300.69 C 143.62 300.61 147.76 291.39 156.6 270.51 C 160.94 260.34 167.39 245.19 172.83 237.47 C 173.97 240.31 177.22 242.31 178.92 242.87 C 178.78 242.94 178.62 243.07 178.49 243.12 C 178.65 243.08 178.83 242.97 179 242.91 C 179.1 242.94 179.25 243.02 179.34 243.04 C 179.26 243.01 179.13 242.93 179.04 242.89 C 180.83 242.24 183.05 240.25 184.16 237.48 C 189.6 245.19 196.05 260.34 200.39 270.52 C 209.23 291.4 213.38 300.61 219.43 300.7 C 220.05 300.72 220.69 300.77 221.51 300.78 C 229.47 301.25 248.31 302.31 270.08 287.1 C 280.97 279.49 292.62 267.81 303.98 250.05 C 313.62 234.86 316.6 219.72 312.82 204.84 C 307.91 185.82 292.96 171.48 281 162.67 C 293.2 164.03 304.73 165.95 314.38 168.24 C 318.34 168.78 321.58 167.98 324.35 166.04 C 334.47 158.97 337.6 136.89 341.35 110.37 C 342.19 104.49 343.1 98.37 344.05 92.2 C 345.83 80.96 348.33 69.55 350.75 58.46 C 356.16 33.48 359.05 19.07 355.31 12.07 z M 183.92 237.56 C 182.35 240.3 180.35 242.13 178.97 242.86 C 177.49 242.19 174.7 240.38 173.08 237.56 C 173.08 237.56 166.19 138.22 166.91 113.58 C 166.91 113.58 169.24 97.92 178.5 97.81 C 187.76 97.92 190.09 113.58 190.09 113.58 C 190.81 138.22 183.92 237.56 183.92 237.56 z" + }, + Style=new ShapeStyle() + { + Fill="Orange" + } } }; } @@ -424,7 +425,7 @@ The [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowS @code { //Initialize node collection with node. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -487,7 +488,7 @@ The diagram provides support to embed SVG element into a node. The Shape propert @code { //Initialize node collection with node. - DiagramObjectCollection nodes = new DiagramObjectCollection(); + private DiagramObjectCollection nodes = new DiagramObjectCollection(); protected override void OnInitialized() { @@ -526,12 +527,15 @@ The following code example illustrates how to create a BPMN shape. ```cshtml @using Syncfusion.Blazor.Diagram + @* Initialize Diagram *@ + @code { // Initialize node collection with Node. - DiagramObjectCollection nodes; + private DiagramObjectCollection nodes; + protected override void OnInitialized() { nodes = new DiagramObjectCollection(); diff --git a/blazor/diagram/style.md b/blazor/diagram/style.md index 5fa302faf3..fd44ace29b 100644 --- a/blazor/diagram/style.md +++ b/blazor/diagram/style.md @@ -15,9 +15,10 @@ To customize the visual appearance of the connector endpoint handle in a diagram ```cshtml ``` @@ -31,10 +32,11 @@ To customize the visual appearance of the connector endpoint handle in a connect ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -47,10 +49,11 @@ To customize the visual appearance of the connector endpoint handle when it is i ```cshtml ``` @@ -64,7 +67,8 @@ To customize the appearance of the Bezier connector handle, apply the following ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -95,10 +100,11 @@ To customize the appearance of the resize handle, apply the following CSS code t ```cshtml ``` @@ -112,7 +118,8 @@ To customize the appearance of the selector pivot line, apply the following CSS ```cshtml @@ -127,9 +134,10 @@ To customize the appearance of the selector border, apply the following CSS styl ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -142,10 +150,12 @@ To customize the appearance of the highlighter for selected diagram elements, ap ```cshtml @@ -160,7 +170,8 @@ To customize the appearance of the rotation handle, apply the following CSS code ```cshtml @@ -191,7 +203,8 @@ To customize the visual appearance of the symbol palette when a symbol is select ```cshtml @@ -206,7 +219,8 @@ To customize the visual appearance of ruler properties, apply the following CSS ```cshtml @@ -237,7 +252,8 @@ To customize the appearance of the text edit properties, apply the following CSS ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -290,8 +308,9 @@ To customize the background color of the diagram, apply the following CSS rule: ```cshtml ``` @@ -305,10 +324,10 @@ To customize the appearance of the overview resize handle, apply the following C ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -321,11 +340,11 @@ To customize the appearance of the helper element, apply the following CSS rules ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -338,10 +357,10 @@ To customize the visual appearance of the diagram grid, apply the following CSS ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -352,10 +371,10 @@ To customize the appearance of the thick grid lines in the diagram, apply the fo ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -368,10 +387,10 @@ To customize the background color of symbols in the symbol palette, apply the fo ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples) @@ -386,11 +405,12 @@ To customize the visual appearance of the orthogonal segment thumb, apply the fo ```cshtml ``` A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Style/OrthogonalThumbStyle) @@ -402,7 +422,8 @@ To customize the visual appearance of Bezier and Straight connector segments, ap ```cshtml