-
-
Notifications
You must be signed in to change notification settings - Fork 72
Toolbar
The toolbar is a list of buttons on the top of the graph.
![](img/tool-bar/button/show-relation-button.png)
![](img/tool-bar/button/reset-graph-button.png)
![](img/tool-bar/button/show-taxonomy-button.png)
![](img/tool-bar/button/recenter-graph-button.png)
![](img/tool-bar/button/full-screen-button.png)
![](img/tool-bar/button/save-button.png)
![](img/tool-bar/button/fit-text-button.png)
![](img/tool-bar/button/show-relation-button.png)
Show relation is an option to show or hide the relations available for a node.
![](img/tool-bar/gif/show-relation.gif)
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;
![](img/tool-bar/button/reset-graph-button.png)
Reset graph is an option to reset the graph in his initial state.
![](img/tool-bar/gif/reset-graph.gif)
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
![](img/tool-bar/button/show-taxonomy-button.png)
Show taxonomy is an option to show or hide the taxonomy panel from the HTML page.
![](img/tool-bar/gif/show-taxonomy.gif)
To add the option in the toolbar add :
popoto.tools.TOGGLE_TAXONOMY = true;
See the taxonomy example for details.
![](img/tool-bar/button/recenter-graph-button.png)
Center graph is an option to move the graph in the center of the screen and reset zoom to default.
![](img/tool-bar/gif/recenter-graph.gif)
The option is available in the toolbar by default.
To remove the option of the toolbar add
popoto.tools.CENTER_GRAPH = false;
![](img/tool-bar/button/full-screen-button.png)
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;
![](img/tool-bar/button/save-button.png)
Save is an option to save the current state of the graph.
![](img/tool-bar/gif/save.gif)
To add the option in the toolbar add
popoto.tools.SAVE_GRAPH = true;
See save example for details
![](img/tool-bar/button/fit-text-button.png)
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.
![](img/tool-bar/gif/fit-text.gif)
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