Class ScrollSettings

Sets the diagram's current zoom value, zoom factor, scroll state, and viewport size.

Inheritance

System.Object

ScrollSettings

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class ScrollSettings : OwningComponentBase

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings @bind-VerticalOffset="@verticalOffset" @bind-HorizontalOffset="@horizontalOffset" @bind-ScrollLimit="@scrollLimit" @bind-CurrentZoom="@currentZoom" @bind-MinZoom="minZoom" @bind-MaxZoom="@maxZoom">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double verticalOffset { get; set; } = 300;
    double horizontalOffset { get; set; } = -1000;
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
    double currentZoom { get; set; } = 1;
    double minZoom { get; set; } = 0.2;
    double maxZoom { get; set; } = 1.5;
}

Constructors

ScrollSettings()

Declaration

public ScrollSettings()

Properties

AutoScrollPadding

Gets or sets the padding used to define the region where automatic scrolling starts when a node is dragged to the edges of the viewport.

Declaration

public DiagramMargin AutoScrollPadding { get; set; }

Property Value

Type	Description
DiagramMargin	The automatic scrolling region is calculated as a distance from the edge of the viewport equal to the value of the padding. For example, if the right padding is set to 5 pixels, the auto-scroll start region will be 5 pixels from the inner edge of the right viewport edge. The default value will be 20 pixels.

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings EnableAutoScroll="true" AutoScrollPadding ="@autoScrollBorder">
    </ScrollSettings>
</SfDiagramComponent>
@code
{
   DiagramMargin autoScrollBorder = new DiagramMargin() { Left=100,Right=100,Top=100,Bottom=100};
}

ChildContent

Sets the child content for the ScrollSettings

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.RenderFragment

CurrentZoom

Gets or sets the diagram's currentZoom value.

Declaration

public double CurrentZoom { get; set; }

Property Value

Type	Description
System.Double	The default value is 1

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-CurrentZoom="@currentZoom" >
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double currentZoom { get; set; } = 1;
}

CurrentZoomChanged

Specifies the callback to trigger when the current zoom changes.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Double>

EnableAutoScroll

Gets or sets a value indicating whether the diagram automatically scrolls when the user drags a node to the edge of the viewport.

Declaration

public bool EnableAutoScroll { get; set; }

Property Value

Type	Description
System.Boolean	`true` if auto-scrolling is enabled; otherwise, `false`. The default value is `true`.

Remarks

When auto-scrolling is enabled, the diagram viewport will automatically scroll in the direction of the mouse movement when the user drags a node to the edge of the viewport. The padding to start the auto-scrolling at the edge can be controlled by setting the AutoScrollPadding property.

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings EnableAutoScroll="true">
    </ScrollSettings>
</SfDiagramComponent>

HorizontalOffset

Gets or sets the horizontal offset of the scroller.

Declaration

public double HorizontalOffset { get; set; }

Property Value

Type
System.Double

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-HorizontalOffset="@horizontalOffset">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double horizontalOffset { get; set; } = -1000;
}

HorizontalOffsetChanged

Specifies the callback to trigger when the horizontal offset changes.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Double>

MaxZoom

Gets or sets the scroller's maximum zoom value.

Declaration

public double MaxZoom { get; set; }

Property Value

Type	Description
System.Double	The default value is 30

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-MaxZoom="@maxZoom">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double maxZoom { get; set; } = 1.5;
}

MaxZoomChanged

Specifies the callback to trigger when the maximum zoom changes.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Double>

MinZoom

Gets or sets the scroller's minimum zoom value.

Declaration

public double MinZoom { get; set; }

Property Value

Type	Description
System.Double	The default value is 0.2

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-MinZoom="minZoom" >
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double minZoom { get; set; } = 0.2;
}

MinZoomChanged

Specifies the callback to trigger when the minimum zoom changes.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Double>

ScrollableArea

Get or sets the value rectangle area within the diagram to restrict scrolling beyond this rectangle area within the diagram. Its is applicable only if is set to

Declaration

public DiagramRect ScrollableArea { get; set; }

Property Value

Type	Description
DiagramRect	The value represents the width, height and position of a rectangle to be scrolled within the diagram region. The defult value is Null.

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  ScrollableArea ="@scrollableArea" ScrollLimit="ScrollLimitMode.Limited">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
   DiagramRect scrollableArea = new DiagramRect() { X = 0, Y = 0, Width = 300, Height = 300 };
}

ScrollableAreaChanged

Specifies the callback to trigger when the Scrollable Area changes.

Declaration

public EventCallback<DiagramRect> ScrollableAreaChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<DiagramRect>

ScrollLimit

Gets or sets the upper limit of values of the scrollable range.

Declaration

public ScrollLimitMode ScrollLimit { get; set; }

Property Value

Type	Description
ScrollLimitMode	The default value will be Diagram

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-ScrollLimit="@scrollLimit" >
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
}

ScrollLimitChanged

Specifies the callback to trigger when the scroll limit changes.

Declaration

public EventCallback<ScrollLimitMode> ScrollLimitChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<ScrollLimitMode>

ScrollPadding

Gets or sets the padding that defines the spacing between diagram elements and the edges of the viewport. This padding extends the content area of the diagram to include the element's padding.

Declaration

public DiagramMargin ScrollPadding { get; set; }

Property Value

Type	Description
DiagramMargin	The thickness of the padding is specified by the `Top`, `Right`, `Bottom`, and `Left` properties. For example, if the right padding is set to 5 pixels, the scroll padding start region will be 5 pixels from the inner edge of the right viewport edge. The default value is 0 pixels for all sides.

Examples

The following example demonstrates setting the scroll padding in Razor syntax:

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings ScrollPadding="@ScrollBorder">
    </ScrollSettings>
</SfDiagramComponent>
@code {
    DiagramMargin ScrollBorder = new DiagramMargin { Left = 100, Right = 100, Top = 100, Bottom = 100 };
}

ScrollPaddingChanged

Event callback that triggers when the scroll padding changes.

Declaration

public EventCallback<DiagramMargin> ScrollPaddingChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<DiagramMargin>

Remarks

This EventCallback is used to invoke a two-way binding event handler function.

VerticalOffset

Gets or sets the Vertical offset of the scroller.

Declaration

public double VerticalOffset { get; set; }

Property Value

Type
System.Double

Examples

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings @bind-VerticalOffset="@verticalOffset" />
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double verticalOffset { get; set; } = 300;
}

VerticalOffsetChanged

Specifies the callback to trigger when the vertical offset changes.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Double>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

Dispose()

This method releases all unmanaged resources.

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".