<tr><td>initiallyActive</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>initiallyActive</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle whether the toolbar is visible initially or if only the edit button is visible initially.</td></tr>
<tr><td>locale</td><tdclass="mid">String</td><tdclass="mid"><code>'en'</code></td><td>Select the locale. By default, the language is English. If you want to use another language, you will need to define your own locale and refer to it here.</td></tr>
<tr><td>locale</td><tdclass="mid">String</td><tdclass="mid"><code>'en'</code></td><td>Select the locale. By default, the language is English. If you want to use another language, you will need to define your own locale and refer to it here.</td></tr>
<tr><td>locales</td><tdclass="mid">Object</td><tdclass="mid">defaultLocales</td><td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look at the <ahref="#locales"data-scroll=""data-options="{ "easing": "easeInCubic" }">locales section below</a> for more explaination on how to customize this.</td></tr>
<tr><td>locales</td><tdclass="mid">Object</td><tdclass="mid">defaultLocales</td><td>Locales object. By default only <code>'en'</code> and <code>'nl'</code> are supported. Take a look at the <ahref="#locales"data-scroll=""data-options="{ "easing": "easeInCubic" }">locales section below</a> for more explaination on how to customize this.</td></tr>
<tr><td>functionality</td><tdclass="mid">Object</td><tdclass="mid">Object</td><td>You can use this object to switch certain functionalities on or off. By default they are all on.</td></tr>
<tr><td>functionality.addNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the adding of nodes.</td></tr>
<tr><td>functionality.addEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the adding of edges.</td></tr>
<tr><td>functionality.editNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the editing of nodes. Even if this is enabled, it will only be shown if a handler function is set for <code>editNode</code>.</td></tr>
<tr><td>functionality.editEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the editing of edges.</td></tr>
<tr><td>functionality.deleteNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the deletion of nodes.</td></tr>
<tr><td>functionality.deleteEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the deletion of edges.</td></tr>
<tr><td>handlerFunctions</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>These functions are inserted before the action is performed. If a node is going to be added through the manipulation system, the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do.</td></tr>
<tr><td>handlerFunctions.addNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when the user clicks the canvas in 'addNode' mode. This function will receive two variables: the properties of the node that can be created and a callback function. If you call the callback function with the properties of the new node, the node will be added. <br><br> Example:
<trclass='toggle collapsible'onclick="toggleTable('optionTable','functionality', this);"><td><spanparent="functionality"class="right-caret"></span>functionality</td><tdclass="mid">Object</td><tdclass="mid">Object</td><td>You can use this object to switch certain functionalities on or off. By default they are all on.</td></tr>
<trparent="functionality"class="hidden"><tdclass="indent">functionality.addNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the adding of nodes.</td></tr>
<trparent="functionality"class="hidden"><tdclass="indent">functionality.addEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the adding of edges.</td></tr>
<trparent="functionality"class="hidden"><tdclass="indent">functionality.editNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the editing of nodes. Even if this is enabled, it will only be shown if a handler function is set for <code>editNode</code>.</td></tr>
<trparent="functionality"class="hidden"><tdclass="indent">functionality.editEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the editing of edges.</td></tr>
<trparent="functionality"class="hidden"><tdclass="indent">functionality.deleteNode</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the deletion of nodes.</td></tr>
<trparent="functionality"class="hidden"><tdclass="indent">functionality.deleteEdge</td><tdclass="mid">Boolean</td><tdclass="mid"><code>true</code></td><td>Toggle the deletion of edges.</td></tr>
<trclass='toggle collapsible'onclick="toggleTable('optionTable','handlerFunctions', this);"><td><spanparent="handlerFunctions"class="right-caret"></span>handlerFunctions</td><tdclass="mid">Object</td><tdclass="mid"><code>Object</code></td><td>These functions are inserted before the action is performed. If a node is going to be added through the manipulation system, the addNode function will be called first. With this, you can provide a gui for your users, abort the process or anything else you want to do.</td></tr>
<trparent="handlerFunctions"class="hidden"><tdclass="indent">handlerFunctions.addNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when the user clicks the canvas in 'addNode' mode. This function will receive two variables: the properties of the node that can be created and a callback function. If you call the callback function with the properties of the new node, the node will be added. <br><br> Example:
<preclass="code">
<preclass="code">
var options = {
var options = {
handlerFunctions: {
handlerFunctions: {
@ -93,9 +93,9 @@ var options = {
}
}
}
}
</pre>
</pre>
If you do not want the node created, do not call the callback function or call the callback function <pre>null</pre> or no argument.
If you do not want the node created, do not call the callback function or call the callback function <code>null</code> or no argument.
</td></tr>
</td></tr>
<tr><td>handlerFunctions.addEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example:
<trparent="handlerFunctions"class="hidden"><tdclass="indent">handlerFunctions.addEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when the user drags the new edge from one node to the next in 'addEdge' mode. This function will receive two variables: the properties of the edge that can be created and a callback function. If you call the callback function with the properties of the new edge, the edge will be added. <br><br> Example:
<preclass="code">
<preclass="code">
var options = {
var options = {
handlerFunctions: {
handlerFunctions: {
@ -113,11 +113,11 @@ var options = {
}
}
}
}
</pre>
</pre>
This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <pre>null</pre> or no argument.</td></tr>
<tr><td>handlerFunctions.editNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<tr><td>handlerFunctions.editEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. To cancel, call the callback function with <pre>null</pre> as argument or without arguments.</pre></td></tr>
<tr><td>handlerFunctions.deleteNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>handlerFunctions.deleteEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr>
<trparent="handlerFunctions"class="hidden"><tdclass="indent">handlerFunctions.editNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
<trparent="handlerFunctions"class="hidden"><tdclass="indent">handlerFunctions.editEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when an edge is selcted and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. To cancel, call the callback function with <code>null</code> as argument or without arguments.</pre></td></tr>
<trparent="handlerFunctions"class="hidden"><tdclass="indent">handlerFunctions.deleteNode</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when a node is selected and the 'Delete selected' button is pressed.</td></tr>
<trparent="handlerFunctions"class="hidden"><tdclass="indent">handlerFunctions.deleteEdge</td><tdclass="mid">Function</td><tdclass="mid"><code>undefined</code></td><td>Called when an edge is selected and the 'Delete selected' button is pressed.</td></tr>
<tr><td>controlNodeStyle</td><tdclass="mid">Object</td><tdclass="mid">Object</td><td>You can supply any styling information you'd like here. All fields described in <ahref="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
<tr><td>controlNodeStyle</td><tdclass="mid">Object</td><tdclass="mid">Object</td><td>You can supply any styling information you'd like here. All fields described in <ahref="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
Alex de Mulder
9 years ago