/The PanZoom component is a critical element in NgDrawFlow. It provides an interactive "board" on which nodes are placed, allowing users to easily navigate the graph by moving (panning) and zooming the viewport to focus on different parts of the data set. The component enhances the user experience by making complex graphs readable and navigable, even when dealing with extensive data.
To configure the Panzoom component for your Angular application, you can set up the PanzoomOptions in your app.module.ts file as follows:
This example shows the most common non-default placement options: leftPosition and topPosition . They control initial and reset framing relative to the viewport edges. Deprecated options such as panSize are documented separately in the options reference below.
By default, the base node is positioned at the coordinates x: 0, y: 0 , which is centered on the screen.
However, the initial viewport can be shifted. Configure leftPosition in dfPanZoomOptionsProvider to place the left edge of the startNode at an exact offset from the left viewport edge. If there is no startNode , the left edge of all rendered content is used instead. leftPosition: 100 means the initial camera targets that left edge at 100px from the viewport.
Similarly, configure topPosition to place the top edge of the startNode or, if there is no startNode , the top edge of the rendered content at an exact offset from the top viewport edge.
The PanZoom component is highly customizable, offering several options to tailor the graph layout to your specific needs. Below is a detailed guide on the available DfPanZoomOptions :
panSize (default: 2000, deprecated): Previously defined the fixed size of the working area. Dynamic workspace sizing now ignores this option and derives bounds from rendered nodes instead. number still means square area ( width = height = value ). { width, height } still means rectangular area, but both forms are preserved only for backward compatibility and no longer affect runtime workspace sizing. topPosition (default: null): Initial and reset viewport padding from the top edge. If a startNode exists, its top edge is aligned to this offset; otherwise the top edge of the rendered node content is used. Null keeps default centered framing on Y. leftPosition (default: null): Initial and reset viewport padding from the left edge. If a startNode exists, its left edge is aligned to this offset; otherwise the left edge of the rendered node content is used. Null keeps default centered framing on X. This option does not redefine node world coordinates. minZoom (default: 0.25): The minimum zoom level allowed. This can prevent the graph from becoming too small to interact with. The default value 0.25 implies that the graph can be reduced to a quarter of its original size. maxZoom (default: 3): The maximum zoom level. It restricts how much the graph can be enlarged, thus avoiding excessive zoom-ins. A default value of 3 means that the graph can be magnified up to three times its normal size. zoomStep (default: 0.25): The incremental step for zooming in or out. Setting the zoomStep to 0.25 offers a comfortable gradual scaling at each zoom action, providing smooth transitions. zoomAnimationDuration (default: 300): The time, in milliseconds, it takes to animate the zoom action. A value of 300 represents a quick yet smooth transition that enhances the interactivity without causing disorientation. zoomWheelSensitivity (default: 0.01): Legacy fallback value for wheel zoom sensitivity. If wheelStep is set (it is by default), it has priority. touchSensitivity (default: 0.01): Adjusts the pan and zoom sensitivity on touch devices. A low value such as 0.01 is used to achieve a fine-tuned control over the touch interactions. wheelBehavior (default: 'zoom' ): Defines wheel behavior: 'zoom' for mouse wheel zoom, or 'scroll' for panning with the wheel. wheelSpeed (default: 1): Additional multiplier for wheel zoom speed. wheelStep (default: 0.008): Base wheel zoom step. This option has priority over zoomWheelSensitivity . pinchZoomSpeed (default: 1): Multiplier for trackpad pinch-to-zoom speed. backgroundCanvas.visible (default: true): Toggles the dedicated canvas background layer that renders the workspace fill, border, and point grid behind the scene. Deprecated pan size examples kept for backward compatibility: dfPanZoomOptionsProvider({ panSize: 6000 }) and dfPanZoomOptionsProvider({ panSize: { width: 8000, height: 4000 } })
The workspace is now dynamic rather than a fixed rectangle. Node coordinates are stored in world space, and the usable workspace bounds are recalculated from the rendered node bounds as nodes move or resize.
As a result, there is no longer a hard panSize border that blocks node dragging. Camera clamping and initial or reset framing are derived from the current rendered content instead.
Example for wheel scrolling mode: dfPanZoomOptionsProvider({ wheelBehavior: 'scroll' })
leftPosition / topPosition affect initial and reset framing only. They do not change the meaning of saved node coordinates, and new nodes are still created from the current viewport center.
NgDrawFlow 