Skip to main content

Controls

The library comes with a system of controls, that helps you to control / interact with the graph, out of the box.

List of controls​

This is the list of available controls :

  • Fullscreen button (on which you can defined the html container)
  • Search control
  • Zoom control (in, out & reset)

ControlContainer​

A control component must be include into a ControlContainer component. This component takes a property called position which determinate where the controls will be displayed. Values are : top-right, top-left, bottom-right, bottom-left ;

Loading...

Custom render for controls​

Controls have pre-defined style and icon, but you can define your own one, by specifying children component.

On the FullScreenControl you must defined two children, the first one will be the JSX element for the "enter fullscreen" and the second for the "exit fullscreen".

On the ZoomControl you must defined three children :

  • zoom in
  • zoom out
  • zoom reset

On the Worker layout you must defined two children :

  • stop
  • start
Loading...

Custom labels for I18N​

Every component that display a label in a way accepts a property called labels, which is a map of key/value.

For example, you can change the labels of the zoom control like that :

<ZoomControl labels={{ zoomIn: "PLUS", zoomOut: "MINUS", reset: "RESET" }} />