Class DiagramUserHandle

Represents a customizable handle that can be used to perform custom actions.

Inheritance
System.Object
SfDiagramBase
DiagramUserHandle
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramUserHandle : SfDiagramBase
Remarks

The user handles are icons that are placed around the selected node or connector to run the frequently used commands, and that icons can be the path, image, SVG content, or HTMLTemplate.

Examples
  
<SfDiagram Height="600px" Nodes="@NodeCollection" SelectedItems="@SelectedModel">
</SfDiagram>
@code{
   // Defines diagram's nodes collection
   public ObservableCollection<DiagramNode> NodeCollection { get; set; }
   // Defines diagram's SelectedItems
   public Syncfusion.Blazor.Diagrams.DiagramSelectedItems SelectedModel { get; set; }
   ObservableCollection<DiagramUserHandle> UserHandles { get; set; }
   protected override void OnInitialized()
   {
     //Creating the user handle for cloning the objects
     DiagramUserHandle CloneHandle = new DiagramUserHandle()
     {
         //Name of the user handle
          Name = "clone",
         //Set pathdata for userhandle
         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",
     };
     //Add user handle to the user handle collection
     UserHandles = new ObservableCollection<DiagramUserHandle>()
     {
         CloneHandle
     };
     SelectedModel = new Syncfusion.Blazor.Diagrams.DiagramSelectedItems()
     {
      //Enable user handle for selected items...
      Constraints = SelectorConstraints.UserHandle,
      UserHandles = this.UserHandles
     };
     NodeCollection = new ObservableCollection<DiagramNode>();
     DiagramNode DiagramNode = new DiagramNode()
     {
        Id = "node1",
        OffsetX = 100,
        OffsetY = 100,
        Width = 100,
        Height = 100,
        Style = new NodeShapeStyle() { Fill = "#659be5", StrokeColor = "none" },
      };
      NodeCollection.Add(DiagramNode);
     }
 }

Constructors

DiagramUserHandle()

Represents a customizable handle that can be used to perform custom actions.

Declaration
public DiagramUserHandle()

Properties

BackgroundColor

Defines the background color of the user handles. By default, it will be black.

Declaration
public string BackgroundColor { get; set; }
Property Value
Type Description
System.String

BorderColor

Defines the border color of the user handles.

Declaration
public string BorderColor { get; set; }
Property Value
Type Description
System.String

BorderWidth

Defines the border width of the user handles.

Declaration
public double BorderWidth { get; set; }
Property Value
Type Description
System.Double

Content

Defines the shape information of the user handle. This property is specific to the content.

Declaration
public string Content { get; set; }
Property Value
Type Description
System.String

DisableConnectors

Defines the visibility of the user handles to the Connectors.

Declaration
public bool DisableConnectors { get; set; }
Property Value
Type Description
System.Boolean
Remarks

By default, this property will be false. If set true, the user handles prevent rendering for the connectors.

DisableNodes

Defines the visibility of the user handles to the Nodes.

Declaration
public bool DisableNodes { get; set; }
Property Value
Type Description
System.Boolean
Remarks

By default, this property will be false. If set true, the user handles prevent rendering for the nodes.

Displacement

This property allows the user to dislocate the user handle from its original position by the given value. By default, it will be 10.

Declaration
public double Displacement { get; set; }
Property Value
Type Description
System.Double

HorizontalAlignment

Defines the horizontal alignment of the user handle

Declaration
public HorizontalAlignment HorizontalAlignment { get; set; }
Property Value
Type Description
HorizontalAlignment
Remarks
The list of following options is used to defining the HorizontalAlignment of the user handle,
1. Stretch - Stretches the diagram element throughout the selector.
2. Left - Aligns the diagram element at the left of the selector.
3. Right - Aligns the diagram element at the right of the selector.
4. Center - Aligns the diagram element at the center of the selector.
5. Auto - Aligns the diagram element based on the characteristics of the selector.
By default, the HorizontalAlignment of the user handle will be center.

Margin

Specifies the space around the user handles. By default, it will be 0 from all sides

Declaration
public DiagramUserHandleMargin Margin { get; set; }
Property Value
Type Description
DiagramUserHandleMargin
Examples
  
//set margin for the user handle
  Margin = new DiagramUserHandleMargin() { Top = 0, Bottom = 0, Left = 0, Right = 0 }

Name

Returns the unique name of the user handle.

Declaration
public string Name { get; set; }
Property Value
Type Description
System.String
Remarks

user handle Name needs to be unique to use. When creating a handle, the user should not provide the same Name to other handles.

Offset

Gets or sets the position for the user handle.

Declaration
public Nullable<double> Offset { get; set; }
Property Value
Type Description
System.Nullable<System.Double>
Remarks
Offset values range from 0 to 1.
1. 0 represents the top left corner of the node.
2. 0.5 represents half of the width or height.
3. 1 represents the bottom right corner of the node.
By default, the offset value is set to 0.

PathColor

Defines the path color of the user handle. By default, it will be white.

Declaration
public string PathColor { get; set; }
Property Value
Type Description
System.String

PathData

Defines the shape information of the user handle. This property is specific to the Path of the user handle.

Declaration
public string PathData { get; set; }
Property Value
Type Description
System.String
Examples
  
    DiagramUserHandle cloneHandle = new DiagramUserHandle()
{     
   //Set pathdata to userhandle
   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",
 }

Side

Gets or sets the side of the user handle based on the given offset

Declaration
public Side Side { get; set; }
Property Value
Type Description
Side
Remarks
Users can customize the side property of the user handle. This property has the following options
1. Top - Aligns the user handles at the top of an object.
2. Bottom - Aligns the user handles at the bottom of an object.
3. Left - Aligns the user handles at the left of an object
4. Right - Aligns the user handles at the right of an object
By default, the side property will be Top.

Size

Gets or sets the size of the user handle. By default, it will be 25

Declaration
public double Size { get; set; }
Property Value
Type Description
System.Double

Source

Defines the shape information of the user handle. This property is specific to the image source of the user handle.

Declaration
public string Source { get; set; }
Property Value
Type Description
System.String
Examples
  
DiagramUserHandle CloneHandle = new DiagramUserHandle()
  {  
      //Set image source to userhandle
      Source =  './download.png', 
  },

VerticalAlignment

Defines the vertical alignment of the user handle.

Declaration
public VerticalAlignment VerticalAlignment { get; set; }
Property Value
Type Description
VerticalAlignment
Remarks
///
The list of following options is used to defining the Horizontal Alignment of the user handle
1. Stretch - Stretches the diagram element throughout the selector.
2. Left - Aligns the diagram element at the left of the selector.
3. Right - Aligns the diagram element at the right of the selector.
4. Center - Aligns the diagram element at the center of the selector.
5. Auto - Aligns the diagram element based on the characteristics of the selector.
By default, the VerticalAlignment of the user handle will be center.

Visible

Specifies the visibility of the user handle. By default, it will be true.

Declaration
public bool Visible { get; set; }
Property Value
Type Description
System.Boolean