Zooming and Focusing
Large, complex diagrams often exceed the visible viewport, making it difficult for users to explore the entire structure at once. Zoom and focus capabilities solve this challenge by enabling intuitive navigation.
Zoom the Diagram using the mouse wheel, pinch gestures, or programmatic settings. Set the zoom input to change the zoom level, and call bringIntoView to center a shape, connection, or area in the viewport.
Zooming the Diagram
Set the following inputs to control Diagram zoom:
zoom—Sets the Diagram scale. A value of1displays the default size. Higher values enlarge the Diagram, and lower values reduce it.zoomMin—Sets the smallest permitted zoom value.zoomMax—Sets the largest permitted zoom value.
The zoomMin and zoomMax limits apply to both programmatic zoom operations and user-initiated zoom with the mouse wheel or pinch gestures.
<kendo-diagram [zoom]="1.3" [zoomMin]="0.5" [zoomMax]="2"></kendo-diagram>Focusing Diagram Shapes, Connections, and Areas
Pass the target to bringIntoView. The method pans the Diagram until the target appears in the viewport. You can pass the following target types:
Shape—Centers a single Diagram node, such as a selected workflow step.Connection—Centers the link between two Diagram nodes, such as a workflow transition.Rect—Centers a specific Diagram area, including multiple shapes and connections.
When you focus the same shape or connection repeatedly, pass a cloned bounds() result as the Rect target. The cloned bounds remain in Diagram coordinates while the viewport changes.
The align option controls where the target appears in the viewport. By default, bringIntoView centers the target. Set animate to true to animate the pan.
The following example demonstrates how to zoom to and center a shape, connection, or area.