Example of Scrolling in Blazor Diagram Component
This example illustrates how to scroll a diagram using vertical and horizontal scrollbars. The ScrollLimit property helps limit the scrolling area. The auto-scroll feature automatically scrolls the diagram whenever the node or connector is moved beyond its boundaries. Auto-scroll is enabled during node dragging, node resizing, multiple-selection operations, connector dragging and end thumb dragging.
Properties
Scroll Limit
Scrollable Area
X
Y
Width
Height
Enable AutoScroll
AutoScrollPadding
Top
Bottom
Left
Right
ScrollPadding
Top
Bottom
Left
Right
The ScrollLimit property allows you to define the scrollable region of the diagram. You may scroll inside the designated region if the scroll limit mode is set to limited. When the limit mode is set to diagram, you can scroll within all the diagram content.
The EnableAutoScroll property controls whether the diagram will auto-scroll or not. Setting the AutoScrollPadding property will change the padding used to initiate auto-scrolling at the edge. When auto-scrolling is enabled, if a user drags a node or connector to the viewport's edge, the diagram viewport will automatically scroll in the direction of the mouse movement. The auto-scrolling region is limited by the ScrollLimit property of the ScrollSettings class.
The ScrollPadding property defines the spacing between diagram elements and the edges of the viewport. It extends the content area of the diagram to include the element's padding. For example, if the right padding is set to 50 pixels, the scroll padding start region will be 50 pixels from the inner edge of the right viewport edge.