Skip to content

Toolbar

Popoto.js edited this page May 9, 2018 · 18 revisions

The toolbar is a list of buttons on the top of the graph.

Show relation

Show relation is an option to show or hide the relations available for a node.

The option is available in the toolbar by default. To remove the option of the toolbar add :

 popoto.tools.TOGGLE_VIEW_RELATION = false;

To hide the relation by default add :

 popoto.graph.DISABLE_RELATION = false;

Reset graph

Reset graph is an option to reset the graph in his initial state.

The option is available in the toolbar by default

To remove the option of the toolbar add

popoto.tools.RESET_GRAPH = false;

To customize the reset graph action see this example

Show taxonomy

Show taxonomy is an option to show or hide the taxonomy panel from the HTML page.

To add the option in the toolbar add :

 popoto.tools.TOGGLE_TAXONOMY = true;

See the taxonomy example for details.

Center graph

Center graph is an option to move the graph in the center of the screen and reset zoom to default.

The option is available in the toolbar by default.

To remove the option of the toolbar add

popoto.tools.CENTER_GRAPH = false;

Full screen

Full screen is an option to display the graph in full screen, only the graph is shown on the page.

To add the option in the toolbar add

popoto.tools.TOGGLE_FULL_SCREEN = true;

Save

Save is an option to save the current state of the graph.

To add the option in the toolbar add

popoto.tools.SAVE_GRAPH = true;

See save example for details

Fit text

Fit text is an option to wrap and fit the text inside a node. The font will be resized to fit entirely in the node.

To add the option in the toolbar add

popoto.tools.TOGGLE_FIT_TEXT = true;

To activate by default the option add

popoto.graph.USE_FIT_TEXT = true;

see fit text example for details.

The code to fit the text is inspired by a Mike Bostock example available here