Browse Source

updates for v4.21.0 (#3560)

gh-pages
Yotam Berkowitz 7 years ago
committed by GitHub
parent
commit
58d5dae5f5
31 changed files with 52892 additions and 45440 deletions
  1. +8
    -12
      dist/vis-graph3d.min.js
  2. +8
    -20
      dist/vis-network.min.js
  3. +8
    -18
      dist/vis-timeline-graph2d.min.js
  4. +52053
    -45230
      dist/vis.js
  5. +1
    -1
      dist/vis.map
  6. +24
    -23
      dist/vis.min.js
  7. +1
    -1
      docs/data/dataset.html
  8. +1
    -1
      docs/graph2d/index.html
  9. +18
    -0
      docs/graph3d/index.html
  10. +2
    -2
      docs/network/edges.html
  11. +38
    -4
      docs/network/index.html
  12. +3
    -3
      docs/network/nodes.html
  13. +64
    -20
      docs/timeline/index.html
  14. +1
    -2
      examples/graph3d/04_animation.html
  15. +1
    -1
      examples/graph3d/10_styling.html
  16. +11
    -9
      examples/graph3d/playground/playground.js
  17. +197
    -0
      examples/network/data/dotLanguage/dotEdgeStyles.html
  18. +27
    -5
      examples/network/edgeStyles/arrowTypes.html
  19. +13
    -2
      examples/network/events/interactionEvents.html
  20. +2
    -45
      examples/network/exampleApplications/disassemblerExample.html
  21. +53
    -0
      examples/network/exampleApplications/disassemblerExample.js
  22. +11
    -2
      examples/network/labels/labelAlignment.html
  23. +3
    -3
      examples/network/other/changingClusteredEdgesNodes.html
  24. +5
    -4
      examples/network/other/manipulationEditEdgeNoDrag.html
  25. +87
    -7
      examples/timeline/groups/subgroups.html
  26. +2
    -1
      examples/timeline/interaction/eventListeners.html
  27. +108
    -0
      examples/timeline/interaction/setSelection.html
  28. +71
    -19
      examples/timeline/other/drag&drop.html
  29. +66
    -0
      examples/timeline/other/stressPerformance.html
  30. +5
    -5
      index.html
  31. +0
    -0
      npm-debug.log.2959790586

+ 8
- 12
dist/vis-graph3d.min.js
File diff suppressed because it is too large
View File


+ 8
- 20
dist/vis-network.min.js
File diff suppressed because it is too large
View File


+ 8
- 18
dist/vis-timeline-graph2d.min.js
File diff suppressed because it is too large
View File


+ 52053
- 45230
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 24
- 23
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
docs/data/dataset.html View File

@ -312,7 +312,7 @@ var data = new vis.DataSet([data] [, options])
<td>Object | Array</td> <td>Object | Array</td>
<td> <td>
Get a single item, multiple items, or all items from the DataSet. Get a single item, multiple items, or all items from the DataSet.
Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>, and the available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. When no item is found, <code>null</code> is returned when a single item was requested, and and empty Array is returned in case of multiple id's.
Usage examples can be found in section <a href="#Getting_Data">Getting Data</a>. The available <code>options</code> are described in section <a href="#Data_Selection">Data Selection</a>. When a single id is requested and not found <code>null</code> is returned. When multiple ids are requested and not found an Array containing <code>null</code>s is returned.
</td> </td>
</tr> </tr>

+ 1
- 1
docs/graph2d/index.html View File

@ -1200,7 +1200,7 @@ function (option, path) {
<td>none</td> <td>none</td>
<td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options: <td>Move the window such that given time is centered on screen. Parameter <code>time</code> can be a <code>Date</code>, <code>Number</code>, or <code>String</code>. Available options:
<ul> <ul>
<li><code>animate: boolean or number</code><br>If true (default), the range is animated smoothly to the new window. If a number, the number is taken as duration for the animation. Default duration is 500 ms.</li>
<li><code>animation: boolean | {duration: number, easingFunction: string}</code><br>If true (default), the range is animated smoothly to the new window. An object can be provided to specify duration and easing function. Default duration is 500 ms, and default easing function is 'easeInOutQuad'.</li>
</ul> </ul>
</td> </td>
</tr> </tr>

+ 18
- 0
docs/graph3d/index.html View File

@ -441,6 +441,24 @@ var options = {
both have the same, maximum with.</td> both have the same, maximum with.</td>
</tr> </tr>
<tr>
<td>onclick</td>
<td>function</td>
<td>none</td>
<td>Event handler for a click event with signature <code>function onclick(point)</code>.<br>
Parameter <code>point</code> contains data for the nearest graph element relative to the click in
the line of sight. It is an object with the fields:
<ul>
<li><code>id </code> - id of nearest node to the click</li>
<li><code>x </code> - x-coordinate in graph units</li>
<li><code>y </code> - y-coordinate in graph units</li>
<li><code>z </code> - z-coordinate in graph units</li>
<li><code>style</code> - if present, the data value for this point</li>
</ul>
</td>
</tr>
<tr> <tr>
<td>showAnimationControls</td> <td>showAnimationControls</td>
<td>boolean</td> <td>boolean</td>

+ 2
- 2
docs/network/edges.html View File

@ -279,13 +279,13 @@ network.setOptions(options);
<td class="indent2">arrows.to.type</td> <td class="indent2">arrows.to.type</td>
<td>String</td> <td>String</td>
<td><code>arrow</code></td> <td><code>arrow</code></td>
<td>The type of endpoint. Default is <code>arrow</code>. Also possible is <code>circle</code>.</td>
<td>The type of endpoint. Possible values are: <code>arrow</code>, <code>bar</code>, <code>circle</code>. The default is <code>arrow</code>.
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.middle</td> <td class="indent">arrows.middle</td>
<td>Object or Boolean</td> <td>Object or Boolean</td>
<td><code>Object</code></td> <td><code>Object</code></td>
<td>Exactly the same as the to object but with an arrowhead in the center of the edge.</td>
<td>Similar to the 'to' object, but with an arrowhead in the center of the edge. The direction of the arrow can be flipped by using a negative value for <code>arrows.middle.scaleFactor</code>.</td>
</tr> </tr>
<tr parent="arrows" class="hidden"> <tr parent="arrows" class="hidden">
<td class="indent">arrows.from</td> <td class="indent">arrows.from</td>

+ 38
- 4
docs/network/index.html View File

@ -645,7 +645,20 @@ var locales = {
<tr class="hidden" parent="getBaseEdge"> <tr class="hidden" parent="getBaseEdge">
<td class="midMethods">Returns: Value</td> <td class="midMethods">Returns: Value</td>
<td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/> <td>When a clusteredEdgeId is available, this method will return the original baseEdgeId provided in <code>data.edges</code><br/>
ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.
ie. After clustering the 'SelectEdge' event is fired but provides only the clustered edge. This method can then be used to return the baseEdgeId.<br><br>
<b>This method is deprecated. Please use <code>getBaseEdges()</code> instead.</b>
</td>
</tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','getBaseEdges', this);">
<td colspan="2"><span parent="getBaseEdges" class="right-caret" id="method_getBaseEdges"></span>
getBaseEdges(<code>String clusteredEdgeId</code>)
</td>
</tr>
<tr class="hidden" parent="getBaseEdges">
<td class="midMethods">Returns: Array</td>
<td>For the given <code>clusteredEdgeId</code>, this method will return all the original base edge id's provided in <code>data.edges</code>.
For a non-clustered (i.e. 'base') edge, <code>clusteredEdgeId</code> is returned.<br/><br/>
Only the base edge id's are returned. All clustered edges id's under <code>clusteredEdgeId</code> are skipped, but scanned recursively to return their base id's.<br/>
</td> </td>
</tr> </tr>
<tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);"> <tr class="collapsible toggle" onclick="toggleTable('methodTable','updateEdge', this);">
@ -1180,9 +1193,11 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr><td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)</td>
<tr><td>joinCondition(<br>&nbsp;&nbsp;<code>nodeOptions:&nbsp;Object</code><br>)<br>or<br>joinCondition(<br>&nbsp;&nbsp;<code>parentNodeOptions:&nbsp;Object,</code><br>&nbsp;&nbsp;<code>childNodeOptions:&nbsp;Object</code><br>)</td>
<td>Function</td> <td>Function</td>
<td><i>Optional for all but the cluster method. </i> The cluster module loops over all nodes that are
<td><i>Optional for all but the cluster method. </i> <br>
<code>clusterByConnection</code> is the only function that will pass 2 nodeOptions objects as arguments to the joinCondition callback.<br>
The cluster module loops over all nodes that are
selected to be in the cluster and calls this function with their data as argument. selected to be in the cluster and calls this function with their data as argument.
If this function returns true, this node will be added to the cluster. You have access to all If this function returns true, this node will be added to the cluster. You have access to all
options options
@ -1206,6 +1221,7 @@ var options = {
network.clustering.cluster(options); network.clustering.cluster(options);
</pre> </pre>
<code>clusterByConnection</code><b> will pass 2 nodeOptions objects as arguments to the joinCondition callback.</b>
</td> </td>
</tr> </tr>
<tr><td>processProperties(<br>&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br> <tr><td>processProperties(<br>&nbsp;&nbsp;<code>clusterOptions:&nbsp;Object</code>,<br>
@ -1297,7 +1313,7 @@ var options = {
</td> </td>
<td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as: <td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as:
<pre class="prettyprint lang-js">{
<pre class="prettyprint lang-js">{
nodes: [Array of selected nodeIds], nodes: [Array of selected nodeIds],
edges: [Array of selected edgeIds], edges: [Array of selected edgeIds],
event: [Object] original click event, event: [Object] original click event,
@ -1307,6 +1323,24 @@ var options = {
} }
} }
</pre> </pre>
This is the structure common to all events. Specifically for the click event, the following property is added:
<pre class="prettyprint lang-js">{
...
items: [Array of click items],
}</pre>
Where the click items can be:
<pre class="prettyprint lang-js">
{nodeId:NodeId} // node with given id clicked on
{nodeId:NodeId labelId:0} // label of node with given id clicked on
{edgeId:EdgeId} // edge with given id clicked on
{edge:EdgeId, labelId:0} // label of edge with given id clicked on
</pre>
The order of the <code>items</code> array is descending in z-order.
Thus, to get the topmost item, get the value at index 0.
</td> </td>
</tr> </tr>
<tr><td id="event_doubleClick">doubleClick</td> <tr><td id="event_doubleClick">doubleClick</td>

+ 3
- 3
docs/network/nodes.html View File

@ -834,7 +834,7 @@ network.setOptions(options);
<code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
Always scalable are: Always scalable are:
<code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and
<code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected. <code>icon</code>. Keep in mind that when using scaling, the <code>size</code> option is neglected.
</td> </td>
</tr> </tr>
@ -975,7 +975,7 @@ mySize = minSize + diff * scale;
<code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>. <code>ellipse</code>, <code>circle</code>, <code>database</code>, <code>box</code>, <code>text</code>.
The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>, The ones with the label outside of it are: <code>image</code>, <code>circularImage</code>,
<code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>, <code>diamond</code>, <code>dot</code>, <code>star</code>, <code>triangle</code>,
<code>triangleDown</code>, <code>square</code> and <code>icon</code>.
<code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and <code>icon</code>.
</td> </td>
</tr> </tr>
<tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);"> <tr class='toggle collapsible' onclick="toggleTable('optionTable','shapeProperties', this);">
@ -1031,7 +1031,7 @@ mySize = minSize + diff * scale;
<td><code>25</code></td> <td><code>25</code></td>
<td>The size is used to determine the size of node shapes that do not have the label inside of them. These <td>The size is used to determine the size of node shapes that do not have the label inside of them. These
shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>, shapes are: <code>image</code>, <code>circularImage</code>, <code>diamond</code>, <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>square</code> and
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, <code>hexagon</code>, <code>square</code> and
<code>icon</code></td> <code>icon</code></td>
</tr> </tr>
<tr> <tr>

+ 64
- 20
docs/timeline/index.html View File

@ -342,6 +342,14 @@ var items = new vis.DataSet([
Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date. Types 'box' and 'point' need a start date, the types 'range' and 'background' needs both a start and end date.
</td> </td>
</tr> </tr>
<tr>
<td>limitSize</td>
<td>Boolean</td>
<td>no</td>
<td>Some browsers cannot handle very large DIVs so by default range DIVs can be truncated outside the visible area.
Setting this to <code>false</code> will cause the creation of full-size DIVs.
</td>
</tr>
<tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);"> <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
<td><span parent="itemEditable" class="right-caret"></span> editable</td> <td><span parent="itemEditable" class="right-caret"></span> editable</td>
<td>Boolean or Object</td> <td>Boolean or Object</td>
@ -454,6 +462,16 @@ var groups = [
By default, groups are ordered by first-come, first-show. By default, groups are ordered by first-come, first-show.
</td> </td>
</tr> </tr>
<tr>
<td>subgroupStack</td>
<td>Object or Boolean</td>
<td>none</td>
<td>Enables stacking within individual subgroups. Example: <code>{'subgroup0': true, 'subgroup1': false, 'subgroup2': true}</code>
For each subgroup where stacking is enabled, items will be stacked on top of each other within that subgroup such that they do no overlap.
If set to <code>true</code> all subgroups will be stacked.
If a value was specified for the <code>order</code> parameter in the options, that ordering will be used when stacking the items.
</td>
</tr>
<tr> <tr>
<td>title</td> <td>title</td>
<td>String</td> <td>String</td>
@ -561,7 +579,7 @@ function (option, path) {
<td><span parent="editable" class="right-caret"></span> editable</td> <td><span parent="editable" class="right-caret"></span> editable</td>
<td>boolean or Object</td> <td>boolean or Object</td>
<td><code>false</code></td> <td><code>false</code></td>
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code><code>true</code></code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
<td>If true, the items in the timeline can be manipulated. Only applicable when option <code>selectable</code> is <code>true</code>. See also the callbacks <code>onAdd</code>, <code>onUpdate</code>, <code>onMove</code>, and <code>onRemove</code>. When <code>editable</code> is an object, one can enable or disable individual manipulation actions.
See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.
</td> </td>
</tr> </tr>
@ -732,7 +750,7 @@ function (option, path) {
<td>Boolean</td> <td>Boolean</td>
<td>false</td> <td>false</td>
<td>This option allows you to scroll horizontally to move backwards and forwards in the time range. <td>This option allows you to scroll horizontally to move backwards and forwards in the time range.
Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>. Notice that defining this option as <code>true</code> will override <code>verticalScroll</code> scroll event but not eliminate the vertical scrollbar.
Only applicable when option <code>zoomCtrl</code> is defined or <code>zoomable</code> is <code>false</code>.
</td> </td>
</tr> </tr>
@ -883,10 +901,10 @@ function (option, path) {
<td>onAdd</td> <td>onAdd</td>
<td>function</td> <td>function</td>
<td>none</td> <td>none</td>
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item is about to be added: when the user double taps an empty space in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.add</code> are set <code>true</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onAddGroup</td> <td>onAddGroup</td>
<td>function</td> <td>function</td>
@ -894,23 +912,31 @@ function (option, path) {
<td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>. <td>Callback function triggered when a group is about to be added. The signature and semantics are the same as for <code>onAdd</code>.
</td> </td>
</tr> </tr>
<tr>
<td>onDropObjectOnItem</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an object containing <code>target:'item'</code> in its drag data is dropped in to a timeline item.
</td>
</tr>
<tr> <tr>
<td>onUpdate</td>
<td>onInitialDrawComplete</td>
<td>function</td> <td>function</td>
<td>none</td> <td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered when the timeline is initially drawn. This function fires once per timeline creation.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onMove</td> <td>onMove</td>
<td>function</td> <td>function</td>
<td>none</td> <td>none</td>
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item has been moved: after the user has dragged the item to an other position. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onMoveGroup</td> <td>onMoveGroup</td>
<td>function</td> <td>function</td>
@ -918,23 +944,23 @@ function (option, path) {
<td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>. <td>Callback function triggered when a group has been moved: after the user has dragged the group to an other position. The signature and semantics are the same as for <code>onMove</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onMoving</td> <td>onMoving</td>
<td>function</td> <td>function</td>
<td>none</td> <td>none</td>
<td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code><code>true</code></code>.
<td>Callback function triggered repeatedly when an item is being moved. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onRemove</td> <td>onRemove</td>
<td>function</td> <td>function</td>
<td>none</td> <td>none</td>
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code><code>true</code></code>.
<td>Callback function triggered when an item is about to be removed: when the user tapped the delete button on the top right of a selected item. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.remove</code> are set <code>true</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td>onRemoveGroup</td> <td>onRemoveGroup</td>
<td>function</td> <td>function</td>
@ -942,7 +968,15 @@ function (option, path) {
<td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>. <td>Callback function triggered when a group is about to be removed. The signature and semantics are the same as for <code>onRemove</code>.
</td> </td>
</tr> </tr>
<tr>
<td>onUpdate</td>
<td>function</td>
<td>none</td>
<td>Callback function triggered when an item is about to be updated, when the user double taps an item in the Timeline. See section <a href="#Editing_Items">Editing Items</a> for more information. Only applicable when both options <code>selectable</code> and <code>editable.updateTime</code> or <code>editable.updateGroup</code> are set <code>true</code>.
</td>
</tr>
<tr> <tr>
<td>order</td> <td>order</td>
<td>function</td> <td>function</td>
@ -1028,7 +1062,7 @@ function (option, path) {
<td>By default, the timeline shows both minor and major date labels on the <td>By default, the timeline shows both minor and major date labels on the
time axis. time axis.
For example the minor labels show minutes and the major labels show hours. For example the minor labels show minutes and the major labels show hours.
When <code>showMajorLabels</code> is <code><code>false</code></code>, no major labels
When <code>showMajorLabels</code> is <code>false</code>, no major labels
are shown.</td> are shown.</td>
</tr> </tr>
@ -1039,7 +1073,7 @@ function (option, path) {
<td>By default, the timeline shows both minor and major date labels on the <td>By default, the timeline shows both minor and major date labels on the
time axis. time axis.
For example the minor labels show minutes and the major labels show hours. For example the minor labels show minutes and the major labels show hours.
When <code>showMinorLabels</code> is <code><code>false</code></code>, no minor labels
When <code>showMinorLabels</code> is <code>false</code>, no minor labels
are shown. When both <code>showMajorLabels</code> and are shown. When both <code>showMajorLabels</code> and
<code>showMinorLabels</code> are false, no horizontal axis will be <code>showMinorLabels</code> are false, no horizontal axis will be
visible.</td> visible.</td>
@ -1199,7 +1233,7 @@ function (option, path) {
<td><code>true</code></td> <td><code>true</code></td>
<td> <td>
Specifies whether the Timeline can be zoomed by pinching or scrolling in the window. Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td> </td>
</tr> </tr>
@ -1209,7 +1243,7 @@ function (option, path) {
<td><code>''</code></td> <td><code>''</code></td>
<td>Specifies whether the Timeline is only zoomed when an additional key is down. <td>Specifies whether the Timeline is only zoomed when an additional key is down.
Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'. Available values are '' (does not apply), 'altKey', 'ctrlKey', or 'metaKey'.
Only applicable when option <code>moveable</code> is set <code><code>true</code></code>.
Only applicable when option <code>moveable</code> is set <code>true</code>.
</td> </td>
</tr> </tr>
@ -1750,7 +1784,7 @@ timeline.off('select', onSelect);
<h2 id="Editing_Items">Editing Items</h2> <h2 id="Editing_Items">Editing Items</h2>
<p> <p>
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code><code>true</code></code>), the user can:
When the Timeline is configured to be editable (both options <code>selectable</code> and <code>editable</code> are <code>true</code>), the user can:
</p> </p>
<ul> <ul>
<li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li> <li>Select an item by clicking it, and use ctrl+click to or shift+click to select multiple items (when <code>multiselect: true</code>).</li>
@ -1805,6 +1839,7 @@ var items = new vis.DataSet([
<ul> <ul>
<li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li> <li><code>onAdd(item, callback)</code> Fired when a new item is about to be added. If not implemented, the item will be added with default text contents.</li>
<li><code>onUpdate(item, callback)</code> Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.</li> <li><code>onUpdate(item, callback)</code> Fired when an item is about to be updated. This function typically has to show a dialog where the user change the item. If not implemented, nothing happens.</li>
<li><code>onDropObjectOnItem(objectData, item)</code> Fired when an object is dropped in to an existing timeline item.</li>
<li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li> <li><code>onMove(item, callback)</code> Fired when an item has been moved. If not implemented, the move action will be accepted.</li>
<li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li> <li><code>onMoving(item, callback)</code> Fired repeatedly while an item is being moved (dragged). Can be used to adjust the items start, end, and/or group to allowed regions.</li>
<li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li> <li><code>onRemove(item, callback)</code> Fired when an item is about to be deleted. If not implemented, the item will be always removed.</li>
@ -2113,6 +2148,15 @@ var options = {
&lt;/style&gt; &lt;/style&gt;
</pre> </pre>
<h3 id="Performance_Tips">Performance Tips</h3>
<p>Defining a timeline with many items and/or groups might affect initial loading time and general performance.
Here are some tips to improve performance and avoid slow loading time:</p>
<ul>
<li>Define items and group with <code>DataSets</code></li>
<li>Avoid applying heavy CSS on items (such as <code>box-shadow</code>, gradient background colors, etc.)</li>
<li>Defining a <code>start</code> and an <code>end</code> in the timeline options.
This will improve initial loading time.</li>
</ul>
</div> </div>
<!-- Bootstrap core JavaScript <!-- Bootstrap core JavaScript

+ 1
- 2
examples/graph3d/04_animation.html View File

@ -51,8 +51,7 @@
keepAspectRatio: true, keepAspectRatio: true,
verticalRatio: 0.5, verticalRatio: 0.5,
animationInterval: 100, // milliseconds animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: 'time'
animationPreload: true
}; };
// create our graph // create our graph

+ 1
- 1
examples/graph3d/10_styling.html View File

@ -58,7 +58,7 @@
keepAspectRatio: true, keepAspectRatio: true,
verticalRatio: 0.5 verticalRatio: 0.5
}; };
var camera = graph ? graph.getCameraPosition() : null; var camera = graph ? graph.getCameraPosition() : null;
// create our graph // create our graph

+ 11
- 9
examples/graph3d/playground/playground.js View File

@ -304,7 +304,7 @@ function getDataType() {
/** /**
* Retrieve the datatable from the entered contents of the csv text * Retrieve the datatable from the entered contents of the csv text
* @param {boolean} [skipValue] | if true, the 4th element is a filter value * @param {boolean} [skipValue] | if true, the 4th element is a filter value
* @return {vis DataSet}
* @return {vis.DataSet}
*/ */
function getDataCsv() { function getDataCsv() {
var csv = document.getElementById("csvTextarea").value; var csv = document.getElementById("csvTextarea").value;
@ -366,7 +366,7 @@ function trim(text) {
/** /**
* Retrieve the datatable from the entered contents of the javascript text * Retrieve the datatable from the entered contents of the javascript text
* @return {vis Dataset}
* @return {vis.DataSet}
*/ */
function getDataJson() { function getDataJson() {
var json = document.getElementById("jsonTextarea").value; var json = document.getElementById("jsonTextarea").value;
@ -378,7 +378,7 @@ function getDataJson() {
/** /**
* Retrieve the datatable from the entered contents of the javascript text * Retrieve the datatable from the entered contents of the javascript text
* @return {vis Dataset}
* @return {vis.DataSet}
*/ */
function getDataJavascript() { function getDataJavascript() {
var js = document.getElementById("javascriptTextarea").value; var js = document.getElementById("javascriptTextarea").value;
@ -391,7 +391,7 @@ function getDataJavascript() {
/** /**
* Retrieve the datatable from the entered contents of the datasource text * Retrieve the datatable from the entered contents of the datasource text
* @return {vis Dataset}
* @return {vis.DataSet}
*/ */
function getDataDatasource() { function getDataDatasource() {
} }
@ -400,7 +400,7 @@ function getDataDatasource() {
* Retrieve a JSON object with all options * Retrieve a JSON object with all options
*/ */
function getOptions() { function getOptions() {
return {
var options = {
width: document.getElementById("width").value, width: document.getElementById("width").value,
height: document.getElementById("height").value, height: document.getElementById("height").value,
style: document.getElementById("style").value, style: document.getElementById("style").value,
@ -413,8 +413,8 @@ function getOptions() {
showLegend: (document.getElementById("showLegend").checked != false), showLegend: (document.getElementById("showLegend").checked != false),
showShadow: (document.getElementById("showShadow").checked != false), showShadow: (document.getElementById("showShadow").checked != false),
keepAspectRatio: (document.getElementById("keepAspectRatio").checked != false), keepAspectRatio: (document.getElementById("keepAspectRatio").checked != false),
verticalRatio: document.getElementById("verticalRatio").value,
animationInterval: document.getElementById("animationInterval").value,
verticalRatio: Number(document.getElementById("verticalRatio").value) || undefined,
animationInterval: Number(document.getElementById("animationInterval").value) || undefined,
xLabel: document.getElementById("xLabel").value, xLabel: document.getElementById("xLabel").value,
yLabel: document.getElementById("yLabel").value, yLabel: document.getElementById("yLabel").value,
zLabel: document.getElementById("zLabel").value, zLabel: document.getElementById("zLabel").value,
@ -423,8 +423,8 @@ function getOptions() {
animationPreload: (document.getElementById("animationPreload").checked != false), animationPreload: (document.getElementById("animationPreload").checked != false),
animationAutoStart:(document.getElementById("animationAutoStart").checked != false), animationAutoStart:(document.getElementById("animationAutoStart").checked != false),
xCenter: Number(document.getElementById("xCenter").value) || undefined,
yCenter: Number(document.getElementById("yCenter").value) || undefined,
xCenter: document.getElementById("xCenter").value,
yCenter: document.getElementById("yCenter").value,
xMin: Number(document.getElementById("xMin").value) || undefined, xMin: Number(document.getElementById("xMin").value) || undefined,
xMax: Number(document.getElementById("xMax").value) || undefined, xMax: Number(document.getElementById("xMax").value) || undefined,
@ -442,6 +442,8 @@ function getOptions() {
xBarWidth: Number(document.getElementById("xBarWidth").value) || undefined, xBarWidth: Number(document.getElementById("xBarWidth").value) || undefined,
yBarWidth: Number(document.getElementById("yBarWidth").value) || undefined yBarWidth: Number(document.getElementById("yBarWidth").value) || undefined
}; };
return options;
} }
/** /**

+ 197
- 0
examples/network/data/dotLanguage/dotEdgeStyles.html View File

@ -0,0 +1,197 @@
<!doctype html>
<html>
<head>
<title>Network | DOT edge styles</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../../../../dist/vis.js"></script>
<link href="../../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font: 10pt sans;
line-height: 1.5em;;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
color: #4d4d4d;
box-sizing: border-box;
overflow: hidden;
}
#header {
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#contents {
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
#left, #right {
position: absolute;
width: 50%;
height: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
display: inline-block;
}
#left {
top: 0;
left: 0;
}
#right {
top: 0;
right: 0;
}
#error {
color: red;
}
#data {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
resize: none;
}
#draw, #reset {
padding: 5px 15px;
}
#mynetwork {
width: 100%;
height: 100%;
border: 1px solid #d3d3d3;
box-sizing: border-box;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<div id="header">
<h1>DOT edge styles</h1>
<div>
<p>
Example of edge styles support
</p>
<ul>
<li> label: text displayed on the edge</li>
<li> color: edge color</li>
<li> style: edge style is solid(default), dashed or dotted</li>
</ul>
</div>
<div>
<button id="draw" title="Draw the DOT graph (Ctrl+Enter)">Draw</button>
<button id="reset" title="Reset the DOT graph">Reset</button>
<span id="error"></span>
</div>
</div>
<div id="contents">
<div id="left">
<textarea id="data">
</textarea>
</div>
<div id="right">
<div id="mynetwork"></div>
</div>
</div>
<script type="text/javascript">
var dotDefault = "digraph {\n" +
" Parent -> C1[label=\"default\"]; // Default style is solid \n" +
" Parent -> C2[label=\"solid pink\", color=\"pink\"];\n" +
" Parent -> C3[label=\"dashed green\", style=\"dashed\", color=\"green\"];\n" +
" Parent -> C4[label=\"dotted purple\", style=\"dotted\", color=\"purple\"];\n" +
"}";
// create a network
var container = document.getElementById('mynetwork');
var options = {
physics: {
stabilization: false,
barnesHut: {
springLength: 200
}
}
};
var data = {};
var network = new vis.Network(container, data, options);
$('#draw').click(draw);
$('#reset').click(reset);
$(window).resize(resize);
$(window).load(draw);
$('#data').keydown(function (event) {
if (event.ctrlKey && event.keyCode === 13) { // Ctrl+Enter
draw();
event.stopPropagation();
event.preventDefault();
}
});
function resize() {
$('#contents').height($('body').height() - $('#header').height() - 30);
}
function draw () {
try {
resize();
$('#error').html('');
// Provide a string with data in DOT language
data = vis.network.convertDot($('#data').val());
network.setData(data);
}
catch (err) {
// set the cursor at the position where the error occurred
var match = /\(char (.*)\)/.exec(err);
if (match) {
var pos = Number(match[1]);
var textarea = $('#data')[0];
if(textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(pos, pos);
}
}
// show an error message
$('#error').html(err.toString());
}
}
function reset() {
$('#data').val(dotDefault);
draw();
}
window.onload = function() {
reset();
}
</script>
</body>
</html>

+ 27
- 5
examples/network/edgeStyles/arrowTypes.html View File

@ -17,7 +17,8 @@
<body> <body>
<p> <p>
There two type of liner endings. The classical "arrow" (default) and "circle".
The types of endpoints are: <code>'arrow' 'circle' 'bar'</code>.
The default is <code>'arrow'</code>.
</p> </p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
@ -25,9 +26,10 @@
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
var nodes = new vis.DataSet([ var nodes = new vis.DataSet([
{id: 1, label: 'X'},
{id: 2, label: 'Y'},
{id: 3, label: 'Z'}
{id: 1, label: 'A'},
{id: 2, label: 'B'},
{id: 3, label: 'C'},
{id: 4, label: 'D'}
]); ]);
// create an array with edges // create an array with edges
@ -35,9 +37,16 @@
{from: 1, to: 2, arrows:'to'}, {from: 1, to: 2, arrows:'to'},
{from: 2, to: 3, arrows:{ {from: 2, to: 3, arrows:{
to: { to: {
enabled: true,
type: 'circle' type: 'circle'
} }
}}, }},
{from: 3, to: 4, arrows:{
to: {
enabled: true,
type: 'bar'
}
}},
]); ]);
// create a network // create a network
@ -46,7 +55,20 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {};
var options = {
/*
// Enable this to make the endpoints smaller/larger
edges: {
arrows: {
to: {
scaleFactor: 5
}
}
}
*/
};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
</script> </script>

+ 13
- 2
examples/network/events/interactionEvents.html View File

@ -48,7 +48,14 @@
nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {interaction:{hover:true}};
var options = {
interaction:{hover:true},
manipulation: {
enabled: true
}
};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
network.on("click", function (params) { network.on("click", function (params) {
@ -65,8 +72,10 @@
document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4); document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
}); });
network.on("dragStart", function (params) { network.on("dragStart", function (params) {
// There's no point in displaying this event on screen, it gets immediately overwritten
params.event = "[original event]"; params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>dragStart event:</h2>' + JSON.stringify(params, null, 4);
console.log('dragStart Event:', params);
console.log('dragStart event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
}); });
network.on("dragging", function (params) { network.on("dragging", function (params) {
params.event = "[original event]"; params.event = "[original event]";
@ -75,6 +84,8 @@
network.on("dragEnd", function (params) { network.on("dragEnd", function (params) {
params.event = "[original event]"; params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4); document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
console.log('dragEnd Event:', params);
console.log('dragEnd event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
}); });
network.on("zoom", function (params) { network.on("zoom", function (params) {
document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4); document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);

+ 2
- 45
examples/network/exampleApplications/disassemblerExample.html View File

@ -9,59 +9,16 @@
</style> </style>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" /> <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<script src="../../../dist/vis.js"></script> <script src="../../../dist/vis.js"></script>
<script src="disassemblerExample.js"></script>
</head> </head>
<body> <body>
<p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from <p>Use VisJS to diagram the Control-Flow-Graph (CFG) of a function from
a program you wish to analyze.</p> a program you wish to analyze.</p>
<p><div id="mynetwork"></div><br /></p> <p><div id="mynetwork"></div><br /></p>
<script type="text/javascript"> <script type="text/javascript">
var opts = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
]
edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
]
var container = document.getElementById('mynetwork'); var container = document.getElementById('mynetwork');
var data = {'nodes': nodes, 'edges': edges} var data = {'nodes': nodes, 'edges': edges}
var gph = new vis.Network(container, data, opts);
var gph = new vis.Network(container, data, options);
</script> </script>
</body> </body>
</html> </html>

+ 53
- 0
examples/network/exampleApplications/disassemblerExample.js View File

@ -0,0 +1,53 @@
var options = {
manipulation: false,
height: '90%',
layout: {
hierarchical: {
enabled: true,
levelSeparation: 300
}
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 300
}
}
};
var nodes = [
{'id': 'cfg_0x00405a2e', 'size': 150, 'label': "0x00405a2e:\nmov DWORD PTR ss:[esp + 0x000000b0], 0x00000002\nmov DWORD PTR ss:[ebp + 0x00], esi\ntest bl, 0x02\nje 0x00405a49<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a49', 'size': 150, 'label': "0x00405a49:\ntest bl, 0x01\nje 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a55', 'size': 150, 'label': "0x00405a55:\nmov ecx, DWORD PTR ss:[esp + 0x1c]\npush ecx\ncall 0x004095c6<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a62', 'size': 150, 'label': "0x00405a62:\nmov eax, 0x00000002\nmov ecx, DWORD PTR ss:[esp + 0x000000a8]\nmov DWORD PTR fs:[0x00000000], ecx\npop ecx\npop esi\npop ebp\npop ebx\nadd esp, 0x000000a4\nret\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x004095c6', 'size': 150, 'label': "0x004095c6:\nmov edi, edi\npush ebp\nmov ebp, esp\npop ebp\njmp 0x00417563<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a39', 'size': 150, 'label': "0x00405a39:\nand ebx, 0xfd<-0x03>\nlea ecx, [esp + 0x34]\nmov DWORD PTR ss:[esp + 0x10], ebx\ncall 0x00403450<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00403450', 'size': 150, 'label': "0x00403450:\npush 0xff<-0x01>\npush 0x0042fa64\nmov eax, DWORD PTR fs:[0x00000000]\npush eax\npush ecx\npush ebx\npush ebp\npush esi\npush edi\nmov eax, DWORD PTR ds:[0x0043dff0<.data+0x0ff0>]\nxor eax, esp\npush eax\nlea eax, [esp + 0x18]\nmov DWORD PTR fs:[0x00000000], eax\nmov esi, ecx\nmov DWORD PTR ss:[esp + 0x14], esi\npush esi\nmov DWORD PTR ss:[esp + 0x24], 0x00000004\ncall 0x0042f03f<<Func>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a4e', 'size': 150, 'label': "0x00405a4e:\ncmp DWORD PTR ss:[esp + 0x30], 0x10\njb 0x00405a62<<Insn>>\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
{'id': 'cfg_0x00405a5f', 'size': 150, 'label': "0x00405a5f:\nadd esp, 0x04\n", 'color': "#FFCFCF", 'shape': 'box', 'font': {'face': 'monospace', 'align': 'left'}},
];
//
// Note: there are a couple of node id's present here which do not exist
// - cfg_0x00417563
// - cfg_0x00403489
// - cfg_0x0042f03f
//
// The edges with these id's will not load into the Network instance.
//
var edges = [
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a39", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a2e", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a4e", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a49", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x00405a5f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a55", 'to': "cfg_0x004095c6", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x004095c6", 'to': "cfg_0x00417563", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00403450", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a39", 'to': "cfg_0x00405a49", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x00403489", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00403450", 'to': "cfg_0x0042f03f", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a55", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a4e", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
{'from': "cfg_0x00405a5f", 'to': "cfg_0x00405a62", 'arrows': 'to', 'physics': false, 'smooth': {'type': 'cubicBezier'}},
];

+ 11
- 2
examples/network/labels/labelAlignment.html View File

@ -9,7 +9,7 @@
<style type="text/css"> <style type="text/css">
#mynetwork { #mynetwork {
width: 600px; width: 600px;
height: 600px;
height: 400px;
border: 1px solid lightgray; border: 1px solid lightgray;
} }
p { p {
@ -25,8 +25,12 @@
<p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p> <p>Text-alignment within node labels can be 'left' or 'center', other font alignments not implemented.</p>
<p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is <p>Label alignment (placement of label &quot;box&quot;) for nodes (top, bottom, left, right, inside) is
planned but not in vis yet.</p> planned but not in vis yet.</p>
<p>The click event is captured and displayed to illustrate how the clicking on labels works.
You can drag the nodes over each other to see how this influences the click event values.
</p>
<div id="mynetwork"></div> <div id="mynetwork"></div>
<pre id="eventSpan"></pre>
<script type="text/javascript"> <script type="text/javascript">
// create an array with nodes // create an array with nodes
@ -53,8 +57,13 @@ planned but not in vis yet.

nodes: nodes, nodes: nodes,
edges: edges edges: edges
}; };
var options = {};
var options = {physics:false};
var network = new vis.Network(container, data, options); var network = new vis.Network(container, data, options);
network.on("click", function (params) {
params.event = "[original event]";
document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
});
</script> </script>
</body> </body>

+ 3
- 3
examples/network/other/changingClusteredEdgesNodes.html View File

@ -27,9 +27,9 @@
<p> <p>
Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
Demonstrating getBaseEdges, getClusteredEdges updateEdge and updateClusteredNode. <br/><ul><li>Clicking on the cluster will change it to a star (updateClusteredNode).</li>
<li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li> <li>Clicking on an edge will make it red regardless of whether it is a clusteredEdge or not (updateEdge)</li>
<li>Clicking on an edge will also show the results of getBaseEdge and getClusteredEdge</li>
<li>Clicking on an edge will also show the results of getBaseEdges and getClusteredEdge</li>
</ul> </ul>
</p> </p>
@ -94,7 +94,7 @@ Demonstrating getBaseEdge, getClusteredEdges updateEdge and updateClusteredNode.
var obj = {}; var obj = {};
obj.clicked_id = params.edges[0]; obj.clicked_id = params.edges[0];
network.clustering.updateEdge(params.edges[0], {color : '#aa0000'}); network.clustering.updateEdge(params.edges[0], {color : '#aa0000'});
obj.base_edge = network.clustering.getBaseEdge(params.edges[0]);
obj.base_edges = network.clustering.getBaseEdges(params.edges[0]);
obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]); obj.all_clustered_edges = network.clustering.getClusteredEdges(params.edges[0]);
document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4); document.getElementById('eventSpan').innerHTML = '<h2>selectEdge event:</h2>' + JSON.stringify(obj, null, 4);
} }

+ 5
- 4
examples/network/other/manipulationEditEdgeNoDrag.html View File

@ -113,12 +113,12 @@
addNode: function (data, callback) { addNode: function (data, callback) {
// filling in the popup DOM elements // filling in the popup DOM elements
document.getElementById('node-operation').innerHTML = "Add Node"; document.getElementById('node-operation').innerHTML = "Add Node";
editNode(data, callback);
editNode(data, clearNodePopUp, callback);
}, },
editNode: function (data, callback) { editNode: function (data, callback) {
// filling in the popup DOM elements // filling in the popup DOM elements
document.getElementById('node-operation').innerHTML = "Edit Node"; document.getElementById('node-operation').innerHTML = "Edit Node";
editNode(data, callback);
editNode(data, cancelNodeEdit, callback);
}, },
addEdge: function (data, callback) { addEdge: function (data, callback) {
if (data.from == data.to) { if (data.from == data.to) {
@ -142,13 +142,14 @@
network = new vis.Network(container, data, options); network = new vis.Network(container, data, options);
} }
function editNode(data, callback) {
function editNode(data, cancelAction, callback) {
document.getElementById('node-label').value = data.label; document.getElementById('node-label').value = data.label;
document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback); document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);
document.getElementById('node-cancelButton').onclick = clearNodePopUp.bind();
document.getElementById('node-cancelButton').onclick = cancelAction.bind(this, callback);
document.getElementById('node-popUp').style.display = 'block'; document.getElementById('node-popUp').style.display = 'block';
} }
// Callback passed as parameter is ignored
function clearNodePopUp() { function clearNodePopUp() {
document.getElementById('node-saveButton').onclick = null; document.getElementById('node-saveButton').onclick = null;
document.getElementById('node-cancelButton').onclick = null; document.getElementById('node-cancelButton').onclick = null;

+ 87
- 7
examples/timeline/groups/subgroups.html View File

@ -21,12 +21,68 @@
.vis-item.vis-background.marker { .vis-item.vis-background.marker {
border-left: 2px solid green; border-left: 2px solid green;
} }
table {
border: 1px solid gray;
}
td {
text-align: center
}
code {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
}
</style> </style>
</head> </head>
<body> <body>
<p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>
<button onclick="toggleStackSubgroups()">Toggle stackSubgroups</button>
<p>This example shows the workings of the subgroups. Subgroups can be stacked on each other, and the items within each subgroup can be stacked.</p>
<p>When stacking is on for the whole timeline, all items in the timeline will be stacked with respect to each other <em>unless</em> the <code>stackSubgroups</code> option is set to <code>true</code>
and at least one subgroup has stacking enabled. In that case the subgroups will be stacked with respect to each other and the elements in each subgroup will be stacked based on the individual
stacking settings for each subgroup.
</p>
<table>
<thead>
<tr>
<th>Option</th>
<th>Status</th>
<th>Toggle</th>
</tr>
</thead>
<tbody>
<tr >
<td>Stacking</td>
<td id="stackingStatus">false</td>
<td><button onclick="toggleStacking()">Toggle</button></td>
</tr>
<tr>
<td>stackSubgroups</td>
<td id="stackSubgroupsStatus">true</td>
<td><button onclick="toggleStackSubgroups()">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 0</td>
<td id="stacksg_1">false</td>
<td><button onclick="toggleSubgroupStack('sg_1')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 1</td>
<td id="stacksg_2">false</td>
<td><button onclick="toggleSubgroupStack('sg_2')">Toggle</button></td>
</tr>
<tr>
<td>Stack Subgroup 2</td>
<td id="stacksg_3">false</td>
<td><button onclick="toggleSubgroupStack('sg_3')">Toggle</button></td>
</tr>
</tbody>
</table>
<br/>
<div id="visualization"></div> <div id="visualization"></div>
@ -39,7 +95,7 @@
type: { start: 'ISODate', end: 'ISODate' } type: { start: 'ISODate', end: 'ISODate' }
}); });
var groups = new vis.DataSet([{ var groups = new vis.DataSet([{
id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}
id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}, subgroupStack: {'sg_1': false, 'sg_2': false, 'sg_3': false }
},{ },{
id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting. id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
}]); }]);
@ -51,16 +107,26 @@
{id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0}, {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0}, {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 1, content: 'subgroup0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 1, content: 'subgroup0_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 2, content: 'subgroup0_2', start: '2014-01-22T12:00:01', end: '2014-01-25T12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
{id: 'SG_2_1', start: '2014-02-01', end: '2014-02-02', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_2_2', start: '2014-02-2', end: '2014-02-03', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 3, content: 'subgroup1_1', start: '2014-01-27T02:00:00', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 4, content: 'subgroup1_2', start: '2014-01-28', end: '2014-02-02',group:'bar', subgroup:'sg_2', subgroupOrder:1},
{id: 'SG_3_1',start: '2014-01-23', end: '2014-01-25', type: 'background', group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"a"},
{id: 'SG_3_2', start: '2014-01-26', end: '2014-01-28', type: 'background', className: 'positive',group:'bar', subgroup:'sg_3', subgroupOrder:2, content:"b"},
{id: 5, content: 'subgroup2_1', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
{id: 6, content: 'subgroup2_2', start: '2014-01-26T12:00:01', end: '2014-01-29T12:00:00',group:'bar', subgroup:'sg_3', subgroupOrder:2},
{id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'}, {id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
{id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'}, {id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'},
]); ]);
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var stackingStatus = document.getElementById('stackingStatus');
var stackSubgroupsStatus = document.getElementById('stackSubgroupsStatus');
var options = { var options = {
// orientation:'top' // orientation:'top'
start: '2014-01-10', start: '2014-01-10',
@ -72,10 +138,24 @@
var timeline = new vis.Timeline(container, items, groups, options); var timeline = new vis.Timeline(container, items, groups, options);
function toggleStacking() {
options.stack = !options.stack;
stackingStatus.innerHTML = options.stack.toString();
timeline.setOptions(options);
}
function toggleStackSubgroups() { function toggleStackSubgroups() {
options.stackSubgroups = !options.stackSubgroups; options.stackSubgroups = !options.stackSubgroups;
stackSubgroupsStatus.innerHTML = options.stackSubgroups.toString();
timeline.setOptions(options); timeline.setOptions(options);
} }
function toggleSubgroupStack(subgroup) {
groups.get("bar").subgroupStack[subgroup] = !groups.get("bar").subgroupStack[subgroup];
document.getElementById('stack' + subgroup).innerHTML = groups.get("bar").subgroupStack[subgroup].toString();
timeline.setGroups(groups);
}
</script> </script>
</body> </body>
</html> </html>

+ 2
- 1
examples/timeline/interaction/eventListeners.html View File

@ -34,7 +34,8 @@
var container = document.getElementById('visualization'); var container = document.getElementById('visualization');
var options = { var options = {
editable: true
editable: true,
onInitialDrawComplete: function() { logEvent('Timeline initial draw completed', {}); },
}; };
var timeline = new vis.Timeline(container, items, options); var timeline = new vis.Timeline(container, items, options);

+ 108
- 0
examples/timeline/interaction/setSelection.html View File

@ -26,6 +26,21 @@
</p> </p>
<div id="visualization"></div> <div id="visualization"></div>
<br/>
<p>If the height of the timeline is limited some items may be vertically offscreen. This demo uses <code>Timeline.setSelection(ids, {focus: true})</code> and demonstrates that focusing on an item will
cause the timeline to scroll vertically to the item that is being focused on. You can use the buttons below select a random item either above or below the currently selected item.
</p>
<button id="prevFocus">Select Item Above</button>
<button id="nextFocus">Select Item Below</button>
<br/>
<p>If focusing on multiple items only the first item will be scrolled to. Try entering several ids and hitting <em>select</em>.</p>
<p>
Select item(s): <input type="text" id="selectionVertical" value="g1_5, g2_3"><input type="button" id="selectVertical" value="Select"><br>
</p>
<div id="vertical-visualization"></div>
<script> <script>
// create a dataset with items // create a dataset with items
// we specify the type of the fields `start` and `end` here to be strings // we specify the type of the fields `start` and `end` here to be strings
@ -61,6 +76,99 @@
}); });
timeline.setSelection(ids, {focus: focus.checked}); timeline.setSelection(ids, {focus: focus.checked});
}; };
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
};
// Vertical scroll example
var groups = [];
var items = [];
var groupItems = {};
for (var g = 0; g < 10; g++) {
groups.push({
id: g,
content: "Group " + g
});
groupItems[g] = [];
for (var i = 0; i < 30; i++) {
items.push({
id: "g" + g + "_" + i,
content: "g" + g + "_" + i,
group: g,
start: "2014-" + (g + 1) + "-" + getRandomInt(1, 20)
});
groupItems[g].push(items[items.length - 1]);
}
}
var container2 = document.getElementById('vertical-visualization');
var options = {
editable: false,
stack: true,
height: 300,
verticalScroll: true,
groupOrder: 'id'
};
var timeline2 = new vis.Timeline(container2, items, groups, options);
var groupIndex = 0;
var itemIndex = 0;
var moveToItem = function(direction) {
itemIndex += direction;
groupIndex += direction;
if (groupIndex < 0) {
groupIndex = groups.length - 1;
} else if (groupIndex >= groups.length) {
groupIndex = 0;
}
var items = groupItems[groupIndex];
if (itemIndex < 0) {
itemIndex = items.length - 1;
} else if (itemIndex >= items.length) {
itemIndex = 0;
}
var id = items[itemIndex].id;
timeline2.setSelection(id, {focus: true});
}
var nextFocus = document.getElementById('nextFocus');
var prevFocus = document.getElementById('prevFocus');
var selectionVertical = document.getElementById('selectionVertical');
var selectVertical = document.getElementById('selectVertical');
selectVertical.onclick = function () {
var ids = selectionVertical.value.split(',').map(function (value) {
return value.trim();
});
timeline2.setSelection(ids, {focus: focus.checked});
};
nextFocus.onclick = function() {
moveToItem(1);
};
prevFocus.onclick = function() {
moveToItem(-1);
};
// Set the initial focus
setTimeout(function() {
moveToItem(0);
}, 500);
</script> </script>
</body> </body>
</html> </html>

+ 71
- 19
examples/timeline/other/drag&drop.html View File

@ -27,6 +27,27 @@
font-size: inherit; font-size: inherit;
cursor: move; cursor: move;
} }
li.object-item {
list-style: none;
width: 150px;
color: #1A1A1A;
background-color: #D5DDF6;
border: 1px solid #97B0F8;
border-radius: 2px;
margin-bottom: 5px;
padding: 5px 12px;
}
li.object-item:before {
content: "≣";
font-family: Arial, sans-serif;
display: inline-block;
font-size: inherit;
cursor: move;
}
.items-panel {
display: flex;
justify-content: space-around;
}
</style> </style>
</head> </head>
@ -37,23 +58,33 @@
<p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p> <p>For this to work, you will have to define your own <code>'dragstart'</code> eventListener on each item in your list of items (make sure that any new item added to the list is attached to this eventListener 'dragstart' handler). This 'dragstart' handler must set <code>dataTransfer</code> - notice you can set the item's information as you want this way.</p>
<div id="mytimeline" ></div> <div id="mytimeline" ></div>
<div>
<h3>Items:</h3>
<ul class="items">
<li draggable="true" class="item">
item 1 - box
</li>
<li draggable="true" class="item">
item 2 - point
</li>
<li draggable="true" class="item">
item 3 - range
</li>
<li draggable="true" class="item">
item 3 - range - fixed times - <br>
(start: now, end: now + 10 min)
<div class='items-panel'>
<div class='side'>
<h3>Items:</h3>
<ul class="items">
<li draggable="true" class="item">
item 1 - box
</li>
<li draggable="true" class="item">
item 2 - point
</li>
<li draggable="true" class="item">
item 3 - range
</li>
<li draggable="true" class="item">
item 3 - range - fixed times - <br>
(start: now, end: now + 10 min)
</li>
</ul>
</div>
<div class='side'>
<h3>Object with "target:'item'":</h3>
<li draggable="true" class="object-item">
object with target:'item'
</li> </li>
</ul>
</div>
</div> </div>
<script> <script>
@ -99,7 +130,11 @@
start: new Date(), start: new Date(),
end: new Date(1000*60*60*24 + (new Date()).valueOf()), end: new Date(1000*60*60*24 + (new Date()).valueOf()),
editable: true, editable: true,
orientation: 'top'
orientation: 'top',
onDropObjectOnItem: function(objectData, item, callback) {
if (!item) { return; }
alert('dropped object with content: "' + objectData.content + '" to item: "' + item.content + '"');
}
}; };
// create a Timeline // create a Timeline
@ -107,7 +142,7 @@
timeline1 = new vis.Timeline(container, items, groups, options); timeline1 = new vis.Timeline(container, items, groups, options);
function handleDragStart(event) { function handleDragStart(event) {
dragSrcEl = event.target;
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.effectAllowed = 'move';
var itemType = event.target.innerHTML.split('-')[1].trim(); var itemType = event.target.innerHTML.split('-')[1].trim();
@ -122,17 +157,34 @@
item.start = new Date(); item.start = new Date();
item.end = new Date(1000*60*10 + (new Date()).valueOf()); item.end = new Date(1000*60*10 + (new Date()).valueOf());
} }
event.dataTransfer.setData("text", JSON.stringify(item)); event.dataTransfer.setData("text", JSON.stringify(item));
} }
function handleObjectItemDragStart(event) {
var dragSrcEl = event.target;
event.dataTransfer.effectAllowed = 'move';
var objectItem = {
content: 'objectItemData',
target: 'item'
};
event.dataTransfer.setData("text", JSON.stringify(objectItem));
}
var items = document.querySelectorAll('.items .item'); var items = document.querySelectorAll('.items .item');
var objectItems = document.querySelectorAll('.object-item');
for (var i = items.length - 1; i >= 0; i--) { for (var i = items.length - 1; i >= 0; i--) {
var item = items[i]; var item = items[i];
item.addEventListener('dragstart', handleDragStart.bind(this), false); item.addEventListener('dragstart', handleDragStart.bind(this), false);
} }
for (var i = objectItems.length - 1; i >= 0; i--) {
var objectItem = objectItems[i];
objectItem.addEventListener('dragstart', handleObjectItemDragStart.bind(this), false);
}
</script> </script>
</body> </body>

+ 66
- 0
examples/timeline/other/stressPerformance.html View File

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<!--
This example is used mainly for developers to test performance issues by controlling number of groups,
number of items and their types.
-->
<html>
<head>
<title>Timeline | Stress Performance example</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="visualization"></div>
</body>
<script>
var now = moment();
var groupCount = 20;
var itemCount = 400;
// create a data set with groups
var groups = new vis.DataSet();
for (var g = 0; g < groupCount; g++) {
groups.add({
id: g,
content: "group " + g
});
}
var types = ['point', 'range', 'box', 'background']
// create a dataset with items
var items = new vis.DataSet();
for (var i = 0; i < itemCount; i++) {
var start = now.clone().add(Math.random() * 180, 'days');
var end = start.clone().add(Math.random() * 30, 'days');
var group = Math.floor(Math.random() * groupCount);
items.add({
id: i,
type: types[Math.floor(Math.random() * types.length)],
group: group,
content: '' + i,
start: start,
end: end
});
}
// create visualization
var container = document.getElementById('visualization');
var options = {
width: '100%',
showCurrentTime: false,
stack: true,
selectable: true,
editable: true,
};
var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
</script>
</html>

+ 5
- 5
index.html View File

@ -29,7 +29,7 @@
<script src="./js/smooth-scroll.min.js"></script> <script src="./js/smooth-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<script language="JavaScript"> <script language="JavaScript">
smoothScroll.init(); smoothScroll.init();
@ -37,7 +37,7 @@
function evalLinks() { function evalLinks() {
if (typeof vis === 'undefined') { if (typeof vis === 'undefined') {
console.log(document.getElementById("linkStatus")); console.log(document.getElementById("linkStatus"));
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.20.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.21.0) is not yet available on cdnjs, <a href='https://cdnjs.com/libraries/vis'>click here</a> to to pick the latest available version.<br />";
document.getElementById("cdn_vis").style.color = "rgb(150,150,150)"; document.getElementById("cdn_vis").style.color = "rgb(150,150,150)";
document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)"; document.getElementById("cdn_vis_css").style.color = "rgb(150,150,150)";
} }
@ -205,13 +205,13 @@
<pre class="prettyprint">bower install vis</pre> <pre class="prettyprint">bower install vis</pre>
<h3>link from cdnjs.com</h3> <h3>link from cdnjs.com</h3>
<p> <p>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js" target="_blank">vis.min.js</a> <br>
<a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" target="_blank">vis.min.css</a> <br>
<a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" target="_blank">vis.min.js</a> <br>
<a id="cdn_vis_css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" target="_blank">vis.min.css</a> <br>
<span id="linkStatus"></span> <span id="linkStatus"></span>
</p> </p>
<h3>download</h3> <h3>download</h3>
<p> <p>
<a href="https://github.com/almende/vis/archive/v4.20.0.zip">v4.20.0.zip</a>
<a href="https://github.com/almende/vis/archive/v4.21.0.zip">v4.21.0.zip</a>
</p> </p>
</div> </div>
</div> </div>

+ 0
- 0
npm-debug.log.2959790586 View File


Loading…
Cancel
Save