updates for vX.Y.Z

docs/graph3d/index.html

@@ -272,7 +272,7 @@ var options = {
     The following options are available.
   </p>
 
-  <table class="options">
+  <table class="options" id="optionTable">
     <tr>
       <th>Name</th>
       <th>Type</th>
@@ -311,69 +311,83 @@ var options = {
       <td>The color of the axis lines and the text along the axis.</td>
     </tr>
 
-    <tr>
-      <td>backgroundColor</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','backgroundColor', this);">
+      <td><span parent="backgroundColor" class="right-caret"></span> backgroundColor</td>
       <td>string or Object</td>
-      <td>{fill:&nbsp;'white', stroke:&nbsp;'gray', strokeWidth:&nbsp;1}</td>
+      <td>Object</td>
       <td>The background color for the main area of the chart.
         Can be either a simple HTML color string, for example: 'red' or '#00cc00',
         or an object with the following properties.</td>
     </tr>
-    <tr>
-      <td>backgroundColor.fill</td>
+    <tr parent="backgroundColor" class="hidden">
+      <td class="indent">backgroundColor.fill</td>
       <td>string</td>
       <td>'white'</td>
       <td>The chart fill color, as an HTML color string.</td>
     </tr>
-    <tr>
-      <td>backgroundColor.stroke</td>
+    <tr parent="backgroundColor" class="hidden">
+      <td class="indent">backgroundColor.stroke</td>
       <td>string</td>
       <td>'gray'</td>
       <td>The color of the chart border, as an HTML color string.</td>
     </tr>
     <tr>
-      <td>backgroundColor.strokeWidth</td>
+    <tr parent="backgroundColor" class="hidden">
+      <td class="indent">backgroundColor.strokeWidth</td>
       <td>number</td>
       <td>1</td>
       <td>The border width, in pixels.</td>
     </tr>
 
-    <tr>
-      <td>cameraPosition</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','cameraPosition', this);">
+      <td><span parent="cameraPosition" class="right-caret"></span> cameraPosition</td>
+      <td>Object</td>
       <td>Object</td>
-      <td>{horizontal:&nbsp;1.0, vertical:&nbsp;0.5, distance:&nbsp;1.7}</td>
       <td>Set the initial rotation and position of the camera.
-        The object <code>cameraPosition</code> contains three parameters:
-        <code>horizontal</code>, <code>vertical</code>, and <code>distance</code>.
-        Parameter <code>horizontal</code> is a value in radians and can have any
-        value (but normally in the range of 0 and 2*Pi).
-        Parameter <code>vertical</code> is a value in radians between 0 and 0.5*Pi.
-        Parameter <code>distance</code> is the (normalized) distance from the
-        camera to the center of the graph, in the range of 0.71 to 5.0. A
-        larger distance puts the graph further away, making it smaller.
         All parameters are optional.
     </tr>
+    <tr parent="cameraPosition" class="hidden">
+      <td class="indent">cameraPosition.horizontal</td>
+      <td>number</td>
+      <td>1.0</td>
+      <td>Value in radians. It can have any
+        value, but is normally in the range of 0 and 2*Pi.</td>
+    </tr>
+    <tr parent="cameraPosition" class="hidden">
+      <td class="indent">cameraPosition.vertical</td>
+      <td>number</td>
+      <td>0.5</td>
+      <td>Value in radians between 0 and 0.5*Pi.</td>
+    </tr>
+    <tr parent="cameraPosition" class="hidden">
+      <td class="indent">cameraPosition.distance</td>
+      <td>number</td>
+      <td>1.7</td>
+      <td>The (normalized) distance from the
+        camera to the center of the graph, in the range of 0.71 to 5.0. A
+        larger distance puts the graph further away, making it smaller.</p>
+    </tr>
 
-    <tr>
-      <td>dataColor</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','dataColor', this);">
+      <td><span parent="dataColor" class="right-caret"></span> dataColor</td>
       <td>string or object</td>
-      <td>{fill:&nbsp;'#7DC1FF', stroke:&nbsp;'#3267D2', strokeWidth:&nbsp;1}</td>
+      <td>Object</td>
       <td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
     </tr>
-    <tr>
-      <td>dataColor.fill</td>
+    <tr parent="dataColor" class="hidden">
+      <td class="indent">dataColor.fill</td>
       <td>string</td>
       <td>'#7DC1FF'</td>
       <td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>  
     </tr>
-    <tr>
-      <td>dataColor.stroke</td>
+    <tr parent="dataColor" class="hidden">
+      <td class="indent">dataColor.stroke</td>
       <td>string</td>
       <td>'#3267D2'</td>
       <td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
     </tr>
-    <tr>
-      <td>dataColor.strokeWidth</td>
+    <tr parent="dataColor" class="hidden">
+      <td class="indent">dataColor.strokeWidth</td>
       <td>number</td>
       <td>1</td>
       <td>The line width of dots, bars and lines. Applicable for all styles.</td>
@@ -516,37 +530,95 @@ var options = {
       </td>
     </tr>
 
-    <tr>
-      <td>tooltipStyle</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','tooltipStyle', this);">
+      <td><span parent="tooltipStyle" class="right-caret"></span> tooltipStyle</td>
+      <td>Object</td>
       <td>Object</td>
-      <td>
-<pre class="prettyprint lang-js">
-{ 
-  content: {
-    padding: '10px',
-    border: '1px solid #4d4d4d',
-    color: '#1a1a1a',
-    background: 'rgba(255,255,255,0.7)',
-    borderRadius: '2px',
-    boxShadow: '5px 5px 10px rgba(128,128,128,0.5)'
-  },
-  line: {
-    height: '40px',
-    width: '0',
-    borderLeft: '1px solid #4d4d4d'
-  },
-  dot: {
-    height: '0',
-    width: '0',
-    border: '5px solid #4d4d4d',
-    borderRadius: '5px'
-  }
-}</pre>
       </td>
       <td>Tooltip style properties.
         Provided properties will be merged with the default object.
       </td>
     </tr>
+    <!-- Can't define separate entries for content, line and dot objects here,
+         because toggleTable() can't handle multiple levels of collapsibles --> 
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.content.padding</td>
+      <td>string</td>
+      <td>'10px'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.content.border</td>
+      <td>string</td>
+      <td>'1px solid #4d4d4d'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.content.color</td>
+      <td>string</td>
+      <td>'#1a1a1a'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.content.background</td>
+      <td>string</td>
+      <td>'rgba(255,255,255,0.7)'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.content.borderRadius</td>
+      <td>string</td>
+      <td>'2px'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.content.boxShadow</td>
+      <td>string</td>
+      <td>'5px 5px 10px rgba(128,128,128,0.5)'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.line.height</td>
+      <td>string</td>
+      <td>'40px'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.line.width</td>
+      <td>string</td>
+      <td>'0'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.line.borderLeft</td>
+      <td>string</td>
+      <td>'1px solid #4d4d4d'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.dot.height</td>
+      <td>string</td>
+      <td>'0'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.dot.width</td>
+      <td>string</td>
+      <td>'0'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.dot.border</td>
+      <td>string</td>
+      <td>'5px solid #4d4d4d'</td>
+      <td></td>
+    </tr>
+    <tr parent="tooltipStyle" class="hidden">
+      <td class="indent">tooltipStyle.dot.borderRadius</td>
+      <td>string</td>
+      <td>'5px'</td>
+      <td></td>
+    </tr>
 
     <tr>
       <td>valueMax</td>

docs/network/index.html

@@ -611,13 +611,18 @@ var locales = {
             </tr>
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','findNode', this);">
                 <td colspan="2"><span parent="findNode" class="right-caret" id="method_findNode"></span> findNode(
-                    <code>String nodeId</code>)
+                    <code>String/Number nodeId</code>)
             </tr>
             <tr class="hidden" parent="findNode">
                 <td class="midMethods">Returns: Array</td>
                 <td>Nodes can be in clusters. Clusters can also be in clusters. This function returns and array of
-                    nodeIds
-                    showing where the node is. <br><br> Example:
+                    nodeIds showing where the node is.
+
+                    <br><br>
+                    If any nodeId in the chain, especially the first passed in as a parameter, is not present in
+                    the current nodes list, an empty array is returned.
+
+                    <br><br> Example:
                     cluster 'A' contains cluster 'B',
                     cluster 'B' contains cluster 'C',
                     cluster 'C' contains node 'fred'.
@@ -866,13 +871,19 @@ function releaseFunction (clusterPosition, containedNodesPositions) {
             </tr>
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedNodes', this);">
                 <td colspan="2"><span parent="getConnectedNodes" class="right-caret" id="method_getConnectedNodes"></span> getConnectedNodes(<code><i>String
-                    nodeId or edgeId</i></code>)
+                    nodeId or edgeId, [String direction]</i></code>)
                 </td>
             </tr>
             <tr class="hidden" parent="getConnectedNodes">
                 <td class="midMethods">Returns: Array</td>
-                <td>Returns an array of nodeIds of the all the nodes that are directly connected to this node. If you supply an edgeId,
-                vis will first match the id to nodes. If no match is found, it will search in the edgelist and return an array: <code>[fromId, toId]</code>.</td>
+                <td>Returns an array of nodeIds of all the nodes that are directly connected to this node or edge.<br><br>
+                For a node id, returns an array with the id's of the connected nodes.<br>
+                If optional parameter <code>direction</code> is set to string <i>'from'</i>, only parent nodes are returned.<br>
+                If <code>direction</code> is set to <i>'to'</i>, only child nodes are returned.<br>
+                Any other value or <code>undefined</code> returns both parent and child nodes.
+                <br><br>
+                For an edge id, returns an array: <code>[fromId, toId]</code>.
+                Parameter <i>direction</i> is ignored for edges.</td>
             </tr>
             <tr class="collapsible toggle" onclick="toggleTable('methodTable','getConnectedEdges', this);">
                 <td colspan="2"><span parent="getConnectedEdges" class="right-caret" id="method_getConnectedEdges"></span> getConnectedEdges(<code><i>String

docs/network/nodes.html

@@ -809,7 +809,10 @@ network.setOptions(options);
             <td>Number</td>
             <td><code>1</code></td>
             <td>The barnesHut physics model (which is enabled by default) is based on an inverted gravity model. By
-                increasing the mass of a node, you increase it's repulsion. Values lower than 1 are not recommended.
+                increasing the mass of a node, you increase it's repulsion.
+                <br><br>
+                Values between 0 and 1 are not recommended.<br>
+                Negative or zero values are not allowed. These will generate a console error and will be set to 1.
             </td>
         </tr>
         <tr>

docs/timeline/index.html

@@ -261,6 +261,13 @@ var items = new vis.DataSet([
         <a href="#Styles">Styles</a>.
       </td>
     </tr>
+    <tr>
+      <td>align</td>
+      <td>String</td>
+      <td>no</td>
+      <td>This field is optional. If set this overrides the global <code>align</code> configuration option for this item.
+      </td>
+    </tr>
     <tr>
       <td>content</td>
       <td>String</td>
@@ -729,12 +736,24 @@ function (option, path) {
       </td>
     </tr>
 
-    <tr>
-      <td>itemsAlwaysDraggable</td>
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','itemsAlwaysDraggable', this);">
+      <td><span parent="itemsAlwaysDraggable" class="right-caret"></span> itemsAlwaysDraggable</td>
+      <td>boolean or Object</td>
+      <td>Object</td>
+      <td>When a boolean, applies the value only to <code>itemsAlwaysDraggable.item</code>.</td>
+    </tr>
+    <tr parent="itemsAlwaysDraggable" class="hidden">
+      <td class="indent">itemsAlwaysDraggable.item</td>
       <td>boolean</td>
       <td><code>false</code></td>
       <td>If true, all items in the Timeline are draggable without being selected. If false, only the selected item(s) are draggable.</td>
     </tr>
+    <tr parent="itemsAlwaysDraggable" class="hidden">
+      <td class="indent">itemsAlwaysDraggable.range</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>If true, range of all items in the Timeline is draggable without being selected. If false, range is only draggable for the selected item(s). Only applicable when option <code>itemsAlwaysDraggable.item</code> is set <code>true</code>. </td>
+    </tr>
 
     <tr>
       <td>locale</td>

examples/timeline/editing/itemsAlwaysDraggable.html

@@ -0,0 +1,38 @@
+<html>
+    <head>
+        <title>Timeline | itemsAlwaysDraggable Option</title>
+        <meta charset="utf-8">
+        <script src="../../../dist/vis.js"></script>
+        <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    </head>
+    <body>
+        <p>The <code>itemsAlwaysDraggable</code> option allows to drag items around without first selecting them. When <code>itemsAlwaysDraggable.range</code> is set to <code>true</code>, the range can be changed without selection as well.</p>
+        <div id="mytimeline"></div>
+
+        <script>
+            var container = document.getElementById('mytimeline'),
+                items = new vis.DataSet();
+
+            for (var i = 10; i >= 0; i--) {
+                var start = new Date(new Date().getTime() + i * 100000);
+                items.add({
+                    id: i,
+                    content: "item " + i,
+                    start: start,
+                    end: new Date(start.getTime() + 100000)
+                });
+            }
+
+            var options = {
+                start: new Date(),
+                end: new Date(new Date().getTime() + 1000000),
+                editable: true,
+                itemsAlwaysDraggable: {
+                    item: true,
+                    range: true
+                }
+            };
+            var timeline = new vis.Timeline(container, items, null, options);
+        </script>
+    </body>
+</html>

examples/timeline/items/expectedVsActualTimesItems.html

@@ -85,13 +85,32 @@
             group:'group1', 
             subgroup:'sg_2'
         },
-         {
+        {
             id: 4, 
             content: 'item 2 (actual time)', 
             start: '2014-01-14T12:00:00',
             end: '2014-01-17T12:00:00',
             group:'group1', 
             subgroup:'sg_2'
+        },
+
+        // subgroup 3
+        {
+            id: 5, 
+            content: 'item 3 (expected time)', 
+            className: 'expected',
+            start: '2014-01-17T12:00:00',
+            end: '2014-01-19T12:00:00',
+            group:'group1', 
+            subgroup:'sg_3'
+        },
+        {
+            id: 6, 
+            content: 'item 3 (actual time)', 
+            start: '2014-01-17T12:00:00',
+            end: '2014-01-18T12:00:00',
+            group:'group1', 
+            subgroup:'sg_3'
         }
     ]);