Components | Sankey: Zoom / Pan, Node selection, Better label rendering, and more

[rokotyan]

Screen.Recording.2025-10-13.at.2.04.58.PM.mp4

This PR implements several new Sankey features:

Interactive Zoom / Pan

Zoom happens by scaling the layout, not by rescaling the SVG elements.

• Mouse wheel zooming and drag panning support with customizable behavior
• Three zoom modes available: XY, X, and Y (via SankeyZoomMode enum)
• Configurable zoom scale extent (default: [1, 5])
• Smart pan constraints to prevent panning beyond the diagram boundaries

New configuration properties

• zoomScale: [number, number] - Horizontal and vertical scale factors applied to the layout
• zoomPan: [number, number] - Pan offset in pixels
• enableZoom: boolean - Toggle interactive zoom/pan behavior (default: true)
• zoomExtent: [number, number] - Allowed interactive zoom scale extent (default: [1, 5])
• zoomMode: SankeyZoomMode - Zoom interaction mode: XY, X, or Y (default: Y)
• onZoom - Zoom event callback

Automatic Label Sizing

Smart Label Width Calculation

• Labels can now automatically take the available space between nodes:
• labelMaxWidthTakeAvailableSpace: boolean - Enable automatic label width calculation (default: false)
• labelMaxWidthTakeAvailableSpaceTolerance: number - Tolerance for space calculation (defaults to label and sub-label font sizes)
• Works in conjunction with existing labelMaxWidth property (manual width takes precedence)

Node Selection State

• New selectedNodeIds: string[] config to programmatically set selected nodes
• Visual styling for selected nodes via CSS variables

Label Text Decoration

• labelTextDecoration: StringAccessor<SankeyNode<N, L>> - Custom text decoration for main labels (underline, line-through, etc.)
• subLabelTextDecoration: StringAccessor<SankeyNode<N, L>> - Custom text decoration for sub-labels

Misc

• Better link animation state management during zoom/pan operations
• Optimized label rendering with dynamic width calculations
• Cache bleed values for better performance

Todo:

• Update docs
• Generate new Angular wrapper
• Add selected state dev example

[rokotyan]

The initial Component | Sankey: Zoom / Pan implementation commit has been done with the help of AI, but the code was overly complex and not tidy so I did some significant refactors in the Component | Sankey: Zoom feature refactoring commit.

[lee00678]

Note: This update will go in 1.7 release.

[rokotyan]

Pushed another round of tweaks. Added a new dev example and generate new Angular wrapper

Bleed calculations now consider the actual label width so you won't have whitespace on the left and right anymore

Screen.Recording.2025-10-22.at.3.00.04.PM.mp4

Label background also takes only the needed space (previously it was stretching all the way to the max label width)

New doc secions: