Skip to content

965225: Validate the UG documentation for all public property explanations in Diagramcomponent #6154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: development
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions blazor/diagram/annotations/appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -638,6 +638,59 @@ The following code illustrates how to define a template for a node's annotation.
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations/TemplateSupportforAnnotation)
![Blazor Diagram with Template Annotations](../images/TemplateSupportforAnnotation.png)

## How to Add Additional Information for an Annotation

The [AdditionalInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_AdditionalInfo) property of an annotation allows you to store extra information associated with the annotation in a flexible way. This can be useful for maintaining metadata or additional details that you may need to access programmatically.

The following code shows how to set the AdditionalInfo value.

```cshtml
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent Height="600px" Nodes="@nodes" />
@code
{
DiagramObjectCollection<Node> nodes;

protected override void OnInitialized()
{
nodes = new DiagramObjectCollection<Node>();

// Create a dictionary to store additional information for the annotation.
Dictionary<string, object> AnnotationInfo = new Dictionary<string, object>();
AnnotationInfo.Add("author", "John Doe");
AnnotationInfo.Add("modifiedDate", DateTime.Now);

// A node with an annotation containing additional information.
Node node = new Node()
{
OffsetX = 250,
OffsetY = 250,
Width = 100,
Height = 100,
Style = new ShapeStyle()
{
Fill = "#6BA5D7",
StrokeColor = "white"
},
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation
{
Content = "Annotated Node",
AdditionalInfo = AnnotationInfo
}
}
};

// Add the node to the collection.
nodes.Add(node);
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Annotations)

**Note:** You can set any type of value for the AdditionalInfo property.

## See also

* [How to add or remove annotation constraints](../constraints#annotation-constraints)
Expand Down
42 changes: 42 additions & 0 deletions blazor/diagram/annotations/interactions.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,48 @@ The [RotationReference](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/Annotations/Interactions/RotationReference)

## How to rotate a Annotation using the RotationAngle property

The [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_RotationAngle) property for an annotation gets or sets the rotation angle in degrees. This determines how much the annotation text is tilted from its normal position. The default value is 0.

The following code examples illustrate how to configure RotationAngle for an annotation.

```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
DiagramObjectCollection<Node> nodes = new DiagramObjectCollection<Node>();

protected override void OnInitialized()
{
Node node = new Node()
{
ID = "node1",
Height = 100,
Width = 100,
OffsetX = 100,
OffsetY = 100,
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
{
new ShapeAnnotation
{
Content = "Node",
ID = "Annotation",
RotationAngle = 30,
}
},
};
nodes.Add(node);
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize)

![Annotation Rotation in Blazor Diagram](../images/RotationAngleAnnotation.png)

## See also

* [How to add or remove annotation constraints](../constraints#annotation-constraints)
Expand Down
2 changes: 1 addition & 1 deletion blazor/diagram/bpmn-shapes/bpmn-event.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ The following table illustrates the type of event triggers.

| Escalation | ![Escalation Trigger Start Event BPMN Shape](../images/Bpmn-Event-Escalation-Start.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images//Bpmn-Event-Escalation-NonInterruptingStart.png) | ![Escalation Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Escalation-Intermediate.png) | ![Escalation Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Escalation-NonInterruptingIntermediate.png)| ![Escalation Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Escalation-ThrowingIntermediate.png) | ![Escalation Trigger End Event BPMN Shape](../images/Bpmn-Event-Escalation-End.png)|

| Termination |![Termination Trigger Start Event BPMN Shape](../images/Bpmn-Event-Terminate-Start.png) | ![Termination Trigger Non-Interrupting Event BPMN Shape](../images//Bpmn-Event-Terminate-NonInterruptingStart.png)|![Termination Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-Intermediate.png) | ![Termination Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Terminate-NonInterruptingIntermediate.png) |![Termination Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-ThrowingIntermediate.png) | ![Termination Trigger End Event BPMN Shape](../images/Bpmn-Event-Terminate-End.png)|
| Terminate |![Termination Trigger Start Event BPMN Shape](../images/Bpmn-Event-Terminate-Start.png) | ![Termination Trigger Non-Interrupting Event BPMN Shape](../images//Bpmn-Event-Terminate-NonInterruptingStart.png)|![Termination Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-Intermediate.png) | ![Termination Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Terminate-NonInterruptingIntermediate.png) |![Termination Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Terminate-ThrowingIntermediate.png) | ![Termination Trigger End Event BPMN Shape](../images/Bpmn-Event-Terminate-End.png)|

| Compensation |![Compensation Trigger Start Event BPMN Shape](../images/Bpmn-Event-Compensation-Start.png)|![Compensation Trigger Non-Interrupting Event BPMN Shape](../images//Bpmn-Event-Compensation-NonInterruptingStart.png) | ![Compensation Trigger Intermediate Event BPMN Shape](../images/Bpmn-Event-Compensation-Intermediate.png) |![Compensation Trigger Non-Interrupting Event BPMN Shape](../images/Bpmn-Event-Compensation-NonInterruptingIntermediate.png) | ![Compensation Trigger Throwing Intermediate Event BPMN Shape](../images/Bpmn-Event-Compensation-ThrowingIntermediate.png) |![Compensation Trigger End BPMN Event Shape](../images/Bpmn-Event-Compensation-End.png) |

Expand Down
260 changes: 260 additions & 0 deletions blazor/diagram/connectors/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,266 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Events/SegmentCollectionChangeEvent)

## CollectionChange Event

* The diagram provides specific events that are triggered when connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the connector collection undergoes changes.

|Event Name|Arguments|Description|
|------------|-----------|------------------------|
|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|


```cshtml
@using Syncfusion.Blazor.Diagram
@using System.Collections.ObjectModel

<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Connectors="@connectors"
CollectionChanged="OnCollectionChanged">
</SfDiagramComponent>

@code{
SfDiagramComponent Diagram;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
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 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight
};
connectors.Add(Connector);
}
// Notify the Collection Changed event while changing the collection of the connector at run time.
private void OnCollectionChanged(CollectionChangedEventArgs args)
{
//Action to be performed.
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)

## MouseEnter Event

The [MouseEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseEnter) event is triggered when the mouse pointer enters the boundary of a connector in the diagram. This event provides valuable information about the element being interacted with. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).


```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Connectors="@connectors"
MouseEnter="OnMouseEnter">
</SfDiagramComponent>

@code{
SfDiagramComponent Diagram;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
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 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight
};
connectors.Add(Connector);
}
private void OnMouseEnter(DiagramElementMouseEventArgs args)
{

}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseEnterEvent)

## MouseLeave Event

The [MouseLeave](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseLeave) event is triggered when the mouse pointer exits the boundaries of a connector in the diagram. This event provides valuable information about the element being left. For a comprehensive understanding of the event arguments and their properties, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).


```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Connectors="@connectors"
MouseLeave="OnMouseLeave">
</SfDiagramComponent>

@code{
SfDiagramComponent Diagram;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
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 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight
};
connectors.Add(Connector);
}
private void OnMouseLeave(DiagramElementMouseEventArgs args)
{

}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseLeaveEvent)

## MouseHover Event

The [MouseHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_MouseHover) event is triggered when the mouse pointer hovers over a connector in the diagram. This event provides valuable information about the element being hovered. For detailed information about the event arguments, refer to the [DiagramElementMouseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramElementMouseEventArgs.html).


```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Connectors="@connectors"
MouseHover="OnMouseHover">
</SfDiagramComponent>

@code{
SfDiagramComponent Diagram;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
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 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight
};
connectors.Add(Connector);
}
private void OnMouseHover(DiagramElementMouseEventArgs args)
{

}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/MouseHoverEvent)

## PropertyChanged Event

The [Property Changed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PropertyChanged) event is triggered when connector's property of the diagram component is modified at runtime. This event provides valuable information about the changes occurring in the diagram. For a detailed understanding of the event arguments, refer to the [PropertyChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PropertyChangedEventArgs.html).

```cshtml
@using Syncfusion.Blazor.Diagram
<SfDiagramComponent @ref="@diagram"
Width="100%"
Height="700px"
Connectors="@connectors"
PropertyChanged="OnNodePropertyChanged">
</SfDiagramComponent>

@code {
SfDiagramComponent diagram;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();

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 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight
};
connectors.Add(Connector);
}

// Method to handle Property Changed event
private void OnNodePropertyChanged(PropertyChangedEventArgs args)
{
if (args.Element is Connector changedNode)
{
// Logic to handle the property change for the specific connector
Console.WriteLine($"Node ID: {changedNode.ID} property changed.");
// Additional logic to handle updates
}
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/PropertyChangedEvent)

## CollectionChange Event

* The diagram provides specific events that are triggered when connectors are added to or removed from the diagram. These events offer opportunities for customization and are invoked whenever the connector collection undergoes changes.

|Event Name|Arguments|Description|
|------------|-----------|------------------------|
|[CollectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanging)|[CollectionChangingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangingEventArgs.html)|Triggers before the node or connector is added or removed from the diagram.|
|[CollectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_CollectionChanged)|[CollectionChangedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.CollectionChangedEventArgs.html)|Triggers after the node or connector is added or removed from the diagram|


```cshtml
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="@Diagram"
Width="100%"
Height="700px"
Connectors="@connectors"
CollectionChanged="OnCollectionChanged">
</SfDiagramComponent>

@code{
SfDiagramComponent Diagram;
//Defines diagram's connector collection.
DiagramObjectCollection<Connector> connectors = new DiagramObjectCollection<Connector>();
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 },
// Type of the connector segments.
Type = ConnectorSegmentType.Straight
};
connectors.Add(Connector);
}
// Notify the Collection Changed event while changing the collection of the connector at run time.
private void OnCollectionChanged(CollectionChangedEventArgs args)
{
//Action to be performed.
}
}
```
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Events/CollectionChangeEvent)



## See also

Expand Down
Loading