Class SnapSettings

Represents the snap settings that customize and control the grid lines and snap behavior of the SfDiagramComponent.

Inheritance

System.Object

SnapSettings

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class SnapSettings : OwningComponentBase

Remarks

The SnapSettings class provides configuration options for snap functionality and grid line appearance.

It controls how objects snap to grid lines, other objects, and specific angles during drag operations.

Grid lines are displayed when ShowLines is enabled, and snapping behavior is controlled by SnapToLines.

Examples

The following example demonstrates how to configure snap settings with custom grid lines and snap constraints.

  <SfDiagramComponent>
    // Shows the horizontal grid lines
    <SnapSettings Constraints ="SnapConstraints.ShowLines" SnapAngle="10">
        <HorizontalGridLines LineColor = "blue" LineDashArray="2,2">
        </HorizontalGridLines>
        <VerticalGridLines LineColor = "blue" LineDashArray="2,2">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>

Constructors

SnapSettings()

Declaration

public SnapSettings()

Properties

ChildContent

Gets or sets the child content of the SnapSettings component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the nested child components and content within the SnapSettings. The default value is null.

Remarks

Contains nested configuration components for snap behavior such as grid lines and constraints.

Constraints

Gets or sets the constraints that enable or disable specific features of the SnapSettings.

Declaration

public SnapConstraints Constraints { get; set; }

Property Value

Type	Description
SnapConstraints	A SnapConstraints enumeration specifying which snap features are enabled. The default value is All.

Remarks

Controls snap features including grid lines, snapping behavior, and appearance. Constraints can be combined using bitwise operations.

Examples

This example demonstrates how to enable only the snap lines feature while disabling other snap constraints.

<SfDiagramComponent>
    <SnapSettings Constraints ="SnapConstraints.ShowLines" >
    </SnapSettings>
</SfDiagramComponent>

ConstraintsChanged

Gets or sets the callback that is triggered when the SnapConstraints value changes in the SnapSettings.

Declaration

public EventCallback<SnapConstraints> ConstraintsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SnapConstraints>	An Microsoft.AspNetCore.Components.EventCallback<> that represents the callback function to execute when snap constraints are modified. The default value is an empty callback.

Remarks

This callback is invoked when snap constraints are updated, receiving the new SnapConstraints value as a parameter.

Constraints can be combined using bitwise operations to enable multiple snap features simultaneously.

Examples

The following example demonstrates how to handle snap constraints changes:

<SfDiagramComponent>
    <SnapSettings ConstraintsChanged="@OnConstraintsChanged" />
</SfDiagramComponent>

@code {
    private void OnConstraintsChanged()
    {
        //Action to be performed
    }
}

GridType

Gets or sets the grid pattern type for the SfDiagramComponent.

Declaration

public GridType GridType { get; set; }

Property Value

Type	Description
GridType	A GridType specifying the visual pattern of the diagram grid. The default value is Lines.

Remarks

Determines whether the background grid appears as continuous lines or discrete dots. This affects only visual appearance and does not impact snapping functionality.

Examples

The following example demonstrates how to set the grid pattern type to Lines.

<SfDiagramComponent>
    <SnapSetting GridType = GridType.Lines >
    </SnapSettings>
</SfDiagramComponent>

GridTypeChanged

Gets or sets the callback to trigger when the GridType changes in the SnapSettings.

Declaration

public EventCallback<GridType> GridTypeChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<GridType>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the grid type is modified. The default value is an empty callback.

Remarks

This callback is triggered when the grid pattern changes between continuous lines and discrete dots, allowing components to respond with UI updates or related functionality.

Examples

The following example demonstrates how to handle grid type changes in a diagram component.

<SfDiagramComponent>
    <SnapSettings GridTypeChanged="@OnGridTypeChanged" />
</SfDiagramComponent>

@code {
    private void OnGridTypeChanged()
    {
       // Action to be performed
    }
}

HorizontalGridLines

Gets or sets the horizontal grid lines configuration for the SfDiagramComponent.

Declaration

public HorizontalGridLines HorizontalGridLines { get; set; }

Property Value

Type	Description
HorizontalGridLines	A HorizontalGridLines object that defines the pattern and appearance of horizontal grid lines. The default value is a new instance of HorizontalGridLines with default settings.

Remarks

Provides visual guidance for precise alignment of diagram elements along the horizontal axis. Works with VerticalGridLines to create a complete grid system.

Setting this property to null will disable horizontal grid line functionality entirely.

Examples

The following example demonstrates how to configure horizontal grid lines with custom styling.

<SfDiagramComponent>
    <SnapSettings >
        <HorizontalGridLines LineColor = "blue" LineDashArray="2,2">
        </HorizontalGridLines>
    </SnapSettings>
</SfDiagramComponent>

SnapAngle

Gets or sets the angle increment by which objects are rotated during snap operations in the SfDiagramComponent.

Declaration

public double SnapAngle { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the rotation angle in degrees for snap operations. The default value is 5.

Remarks

Objects snap to multiples of this angle value during rotation operations, working with other snap settings for precise alignment.

Examples

The following example demonstrates how to set a custom snap angle for diagram operations.

<SfDiagramComponent>
    <SnapSettings  SnapAngle="10">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>

SnapAngleChanged

Gets or sets the callback that is invoked when the SnapAngle property value changes in the SnapSettings.

Declaration

public EventCallback<double> SnapAngleChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Double that represents the callback function to execute when the snap angle changes. The default value is an empty callback.

Remarks

This callback is invoked when the snap angle value changes, providing the new angle value as a System.Double parameter.

Examples

The following example demonstrates how to handle snap angle changes in a diagram component:

<SfDiagramComponent>
    <SnapSettings SnapAngle="45" SnapAngleChanged="@OnSnapAngleChanged" />
</SfDiagramComponent>

@code {
    private void OnSnapAngleChanged()
    {
        // Action to be performed
    }
}

SnapDistance

Gets or sets the minimum distance between the selected object and the nearest object for snap alignment in the SfDiagramComponent.

Declaration

public double SnapDistance { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the snap distance in pixels. The default value is 5.

Remarks

Controls how close objects need to be before they snap together. Smaller values need objects to be closer, while larger values allow snapping from farther away.

Examples

The following example demonstrates how to set a custom snap distance for more precise object alignment.

<SfDiagramComponent>
    <SnapSettings SnapDistance="10">
    </SnapSettings>
</SfDiagramComponent>

SnapDistanceChanged

Gets or sets the callback to trigger when the SnapDistance changes.

Declaration

public EventCallback<double> SnapDistanceChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Double that is invoked when the snap distance value is modified. The default value is an empty callback.

Remarks

This callback is invoked when the snap distance value changes, providing the new distance value as a parameter.

Examples

The following example demonstrates how to handle snap distance changes:

<SfDiagramComponent>
    <SnapSettings SnapDistance="10" 
                  SnapDistanceChanged="@OnSnapDistanceChanged" />
</SfDiagramComponent>

@code {
    private void OnSnapDistanceChanged()
    {
        //Action to be performed
    }
}

SnapLineStyle

Gets or sets the style of the snapping lines used to indicate alignment when moving or resizing elements in the SfDiagramComponent.

Declaration

public ShapeStyle SnapLineStyle { get; set; }

Property Value

Type	Description
ShapeStyle	A ShapeStyle representing the visual appearance of snapping lines. The default value is a ShapeStyle with StrokeColor set to "#07EDE1".

Remarks

Snapping lines assist users in aligning elements precisely during movement or resizing operations.

By setting this property, users can customize the appearance of these snapping lines to enhance visibility or match specific aesthetic preferences.

Examples

This example demonstrates how to customize the snap line style with a green color and specific stroke properties.

<SfDiagramComponent>
    <SnapSettings SnapLineStyle ="snapLineStyle" >
    </SnapSettings>
</SfDiagramComponent>
@code{
ShapeStyle snapLineStyle = new ShapeStyle() { StrokeColor = "green" };
}

VerticalGridLines

Gets or sets the vertical grid lines configuration for the SnapSettings.

Declaration

public VerticalGridLines VerticalGridLines { get; set; }

Property Value

Type	Description
VerticalGridLines	A VerticalGridLines object that defines the appearance and behavior of vertical grid lines in the diagram. The default value is a new instance of VerticalGridLines with default settings.

Remarks

Provides visual guidance for precise alignment of diagram elements along the vertical axis.

Lines are displayed when ShowLines is enabled and support snapping when SnapToLines is configured.

Works with HorizontalGridLines to create a complete grid system. Setting to null disables vertical grid line functionality.

Examples

This example demonstrates how to configure vertical grid lines with custom styling.

<SfDiagramComponent>
    <SnapSettings >
        <VerticalGridLines LineColor = "blue" LineDashArray="2,2">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose()

Releases all unmanaged and managed resources used by the SnapSettings component.

Declaration

public void Dispose()

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

OnParametersSetAsync()

Method invoked when any changes in component state occur.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	="Task".