The DiagramView control implements scroll and zoom support. If diagram's size is larger than current viewport, scrollbars appear and let the user scroll to clipped parts of the diagram.
The diagram size is set through the bounds property. Its value is a Rect instance that specifies the origin of the diagram coordinate system and the diagram size. Scrollbar ranges also depend on the current zoomFactor.
The autoScroll property controls automatic scrolling. If it is enabled and the user drags an adjustment handle near the DiagramView edges while manipulating an item, the control will scroll the viewport towards the mouse position. The scrollZoneSize property defines the size of the area near the view borders that triggers automatic scrolling.
In order to scroll the document content programmatically, you can call the scrollTo method or set scrollX and scrollY properties. The latter can also be used to access the current scroll position in case you need it.
Zooming is controlled via the zoomFactor property. The zoom level is expressed as a percentage, 100% meaning no zoom. Higher than 100% makes the diagram items look closer and bigger on the screen - zooming in. Less than 100% makes items look further and smaller on screen - zooming out. To zoom and scroll the view to fit the diagram contents to the control's client area, call zoomToFit. To zoom and scroll the view so it fits a specified rectangular document area to the control's client area, call zoomToRect.
The control supports several ways to zoom using lasso tool:
The DiagramView provides an option for zooming in (or out) portions of the diagram through the Magnifier tool. The magnifier tool can be permanently activated by setting magnifierEnabled to true. Alternatively, on-demand magnification through the right mouse button or by pressing a modifier key can be enabled be setting the appropriate value to the rightButtonActions or modifierKeyActions properties respectively.
The magnification factor can be specified through the magnifierFactor property. The size of the tool and its border thickness can be set through the magnifierWidth, magnifierHeight and magnifierFrameThickness properties.
The diagram view can be panned by holding ALT while dragging the mouse with the left button down. Another modifier key can be used for panning by setting modifierKeyActions. The middleButtonActions and rightButtonActions properties let you use the middle or right mouse button to start panning. To let users pan the view with the left mouse button without using a modifier key, set the behavior property of DiagramView to Pan or PanAndModify.