updated docs, examples and dist to v4.18.0

dist/vis.css

@@ -308,6 +308,28 @@ input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
     border-width: 12px;
     margin-top: -12px;
 }
+div.vis-tooltip {
+  position: absolute;
+  visibility: hidden;
+  padding: 5px;
+  white-space: nowrap;
+
+  font-family: verdana;
+  font-size:14px;
+  color:#000000;
+  background-color: #f5f4ed;
+
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid #808074;
+
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+  pointer-events: none;
+
+  z-index: 5;
+}
+
 
 div.vis-color-picker {
   position:absolute;
@@ -696,25 +718,6 @@ div.vis-network div.vis-navigation div.vis-button.vis-zoomExtends {
     bottom:50px;
     right:15px;
 }
-div.vis-network-tooltip {
-  position: absolute;
-  visibility: hidden;
-  padding: 5px;
-  white-space: nowrap;
-
-  font-family: verdana;
-  font-size:14px;
-  color:#000000;
-  background-color: #f5f4ed;
-
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  border: 1px solid #808074;
-
-  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
-  pointer-events: none;
-}
 .vis-timeline {
   /*
   -webkit-transition: height .4s ease-in-out;
@@ -752,6 +755,30 @@ div.vis-network-tooltip {
   background-color: #FF7F6E;
   width: 2px;
   z-index: 1;
+  pointer-events: none;
+}
+
+.vis-rolling-mode-btn {
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  top: 7px;
+  right: 20px;
+  border-radius: 50%;
+  font-size: 28px;
+  cursor: pointer;
+  opacity: 0.8;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+  background: #3876c2;
+}
+.vis-rolling-mode-btn:before {
+  content: "\26F6";
+}
+
+.vis-rolling-mode-btn:hover {
+  opacity: 1;
 }
 .vis-custom-time {
   background-color: #6E94FF;
@@ -930,6 +957,10 @@ div.vis-network-tooltip {
   overflow: hidden;
 }
 
+.vis-item-visible-frame {
+  white-space: nowrap;
+}
+
 .vis-item.vis-range .vis-item-content {
   position: relative;
   display: inline-block;
@@ -1084,6 +1115,26 @@ div.vis-network-tooltip {
   border-bottom: none;
 }
 
+.vis-nesting-group {
+  cursor: pointer;
+}
+
+.vis-nested-group {
+  background: #f5f5f5;
+}
+
+.vis-label.vis-nesting-group.expanded:before {
+  content: "\25BC";
+}
+
+.vis-label.vis-nesting-group.collapsed-rtl:before {
+  content: "\25C0";
+}
+
+.vis-label.vis-nesting-group.collapsed:before {
+  content: "\25B6";
+}
+
 .vis-overlay {
   position: absolute;
   top: 0;

docs/css/style.css

@@ -128,6 +128,13 @@ tr.visible {
     fadeIn 250ms ease-in;
 }
 
+tr.depricated td {
+    color: #AAA;
+    text-decoration: line-through;
+}
+tr.depricated td:last-child {
+    text-decoration: none;
+}
 
 @-webkit-keyframes fadeIn {
     0% {

docs/data/dataset.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -601,7 +602,7 @@ function (event, properties, senderId) {
         field <code>oldData</code> containing the original data of the items in the
         dataset before the items were updated or removed. The <code>update</code>
         event also contains a field <code>data</code> containing the changes:
-        the properties of the items that are being updated.
+        the properties of the items that are being updated. 
       </td>
     </tr>
     <tr>

docs/data/dataview.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -409,4 +410,4 @@ view.on('*', function (event, properties, senderId) {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/data/index.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -134,4 +135,4 @@
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/graph2d/index.html

@@ -96,6 +96,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -568,7 +569,7 @@ function (value) {
             <pre class="prettyprint lang-js">
 drawPoints: true // or false
             </pre>
-
+            
             2. <code>Object</code> (the 'rendering' options): If an object is provided it may contain following properties which all can be optional: <code>onRender</code>, <code>className</code><code>size</code> and/or <code>style</code>. For more information check the property's documentation.<br />
             <pre class="prettyprint lang-js">
 drawPoints: {
@@ -576,7 +577,7 @@ drawPoints: {
   style: 'square'
 }
             </pre>
-
+            
             3. <code>Function</code>: If a function is provided it will be used as a callback. The function may return values from listing 1 or 2.<br />
             <pre class="prettyprint lang-js">
 drawPoints: function(item, group) {
@@ -1161,7 +1162,7 @@ function (option, path) {
                     <li><code>x</code> (Number): relative horizontal position of the click event.</li>
                     <li><code>y</code> (Number): relative vertical position of the click event.</li>
                     <li><code>time</code> (Date): Date of the clicked event.</li>
-                    <li><code>value</code> (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.</li>
+                    <li><code>value</code> (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes. It is empty when no data is provided.</li>
                     <li><code>what</code> (String or null): name of the clicked thing: <code>background</code>, <code>axis</code>, <code>dat-axis</code>, <code>custom-time</code>, or <code>current-time</code>, <code>legend</code>.</li>
                     <li><code>event</code> (Object): the original click event.</li>
                 </ul>

docs/graph3d/index.html

@@ -12,7 +12,7 @@
   <link href="../css/bootstrap.css" rel="stylesheet">
   <!-- Tipue vendor css -->
   <link href="../css/tipuesearch.css" rel="stylesheet">
-
+  
   <link href="../css/style.css" rel="stylesheet">
 
 
@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -183,7 +184,7 @@
   <p>
     The class name of the Graph3d is <code>vis.Graph3d</code>.
     When constructing a Graph3d, an HTML DOM container must be provided to attach
-    the graph to. Optionally, data an options can be provided.
+    the graph to. Optionally, data and options can be provided.
     Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
     section <a href="#Data_Format">Data Format</a>.
     Options is a name-value map in the JSON format. The available options
@@ -363,13 +364,13 @@ var options = {
       <td>dataColor.fill</td>
       <td>string</td>
       <td>'#7DC1FF'</td>
-      <td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</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>
       <td>string</td>
       <td>'#3267D2'</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>
+      <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>
@@ -438,8 +439,8 @@ var options = {
       <td>showLegend</td>
       <td>boolean</td>
       <td>none</td>
-      <td>If true, a legend is drawn for the graph (if the graph type supports it).
-          By default a legend is drawn for dot and dot-color style graphs.
+      <td>If true, a legend is drawn for the graph (if the graph type supports it). 
+          By default a legend is drawn for dot and dot-color style graphs. 
       </td>
     </tr>
     <tr>

docs/network/configure.html

@@ -59,6 +59,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>

docs/network/edges.html

@@ -59,6 +59,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -119,6 +120,7 @@ var options = {
       from:   {enabled: false, scaleFactor:1, type:'arrow'}
     },
     arrowStrikethrough: true,
+    chosen: true,
     color: {
       color:'#848484',
       highlight:'#848484',
@@ -134,7 +136,37 @@ var options = {
       background: 'none',
       strokeWidth: 2, // px
       strokeColor: '#ffffff',
-      align:'horizontal'
+      align: 'horizontal',
+      multi: false,
+      vadjust: 0,
+      bold: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        vadjust: 0,
+        mod: 'bold'
+      },
+      ital: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        vadjust: 0,
+        mod: 'italic',
+      },
+      boldital: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        vadjust: 0,
+        mod: 'bold italic'
+      },
+      mono: {
+        color: '#343434',
+        size: 15, // px
+        face: 'courier new',
+        vadjust: 2,
+        mod: ''
+      }
     },
     hidden: false,
     hoverWidth: 1.5,
@@ -177,8 +209,9 @@ var options = {
       roundness: 0.5
     },
     title:undefined,
+    value: undefined,
     width: 1,
-    value: undefined
+    widthConstraint: false
   }
 }
 
@@ -266,6 +299,101 @@ network.setOptions(options);
             <td><code>true</code></td>
             <td>When false, the edge stops at the arrow. This can be useful if you have thick lines and you want the arrow to end in a point. Middle arrows are not affected by this.</td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','chosen', this);">
+            <td><span parent="chosen" class="right-caret"></span> chosen</td>
+            <td>Object or Boolean</td>
+            <td><code>true</code></td>
+            <td>
+              When true, selecting or hovering on an edge will change it and its label's characteristics according the default.
+              When false, no change to the edge or its label will occur when the edge is chosen.
+              If an object is supplied, finer-grained adjustment of edge and label characteristics is available when an edge is chosen.
+            </td>
+        </tr>
+        <tr parent="chosen" class="hidden">
+            <td class="indent">chosen.edge</td>
+            <td>Function or Boolean</td>
+            <td>undefined</td>
+            <td>
+              When true, selecting or hovering on an edge will change its characteristics according the default.
+              When false, no change to the edge will occur when the edge is chosen.
+              <p>
+                If a function is supplied, it is called when the edge is chosen.
+                <pre class="code">
+  function(values, id, selected, hovering) {
+    values.<i>property</i> = <i>chosenValue</i>;
+  }</pre>
+              </p>
+              <p>
+                Any of the incoming arguments may be used to determine characteristic changes.
+                If a property is not specifically assigned by the supplied function, it will be left unchanged.
+                A specific function may be assigned to each particular edge in its options, or to all in the network's <code>edges</code> options.
+              </p>
+              <p>
+                The properties define the characteristics that can be changed as follows:
+              </p>
+              <table>
+                <tr><th>Property</th><th>Edge Reference</th></tr>
+                <tr><td>dashes</td><td>see dashes</td></tr>
+                <tr><td>toArrow</td><td>see arrows.to.enabled</td></tr>
+                <tr><td>toArrowScale</td><td>see arrows.to.scaleFactor</td></tr>
+                <tr><td>toArrowType</td><td>see arrows.to.type</td></tr>
+                <tr><td>middleArrow</td><td>see arrows.middle.enabled</td></tr>
+                <tr><td>middleArrowScale</td><td>see arrows.middle.scaleFactor</td></tr>
+                <tr><td>middleArrowType</td><td>see arrows.middle.type</td></tr>
+                <tr><td>fromArrow</td><td>see arrows.from.enabled</td></tr>
+                <tr><td>fromArrowScale</td><td>see arrows.from.scaleFactor</td></tr>
+                <tr><td>fromArrowType</td><td>see arrows.from.type</td></tr>
+                <tr><td>arrowStrikethrough</td><td>see arrowStrikethrough</td></tr>
+                <tr><td>color</td><td>see color.color</td></tr>
+                <tr><td>inheritsColor</td><td>see color.inherit</td></tr>
+                <tr><td>opacity</td><td>see color.opacity</td></tr>
+                <tr><td>hidden</td><td>see hidden</td></tr>
+                <tr><td>length</td><td>see length</td></tr>
+                <tr><td>shadow</td><td>see shadow.enabled</td></tr>
+                <tr><td>shadowColor</td><td>see shadow.color</td></tr>
+                <tr><td>shadowSize</td><td>see shadow.size</td></tr>
+                <tr><td>shadowX</td><td>see shadow.x</td></tr>
+                <tr><td>shadowY</td><td>see shadow.y</td></tr>
+                <tr><td>width</td><td>see width</td></tr>
+              </table>
+              <br/>
+            </td>
+        </tr>
+        <tr parent="chosen" class="hidden">
+            <td class="indent">chosen.label</td>
+            <td>Function or Boolean</td>
+            <td>undefined</td>
+            <td>
+              When true, selecting or hovering on an edge will change its label's characteristics according the default.
+              When false, no change to the edge's label will occur when the edge is chosen.
+              <p>
+                If a function is supplied, it is called when the edge is chosen.
+                <pre class="code">
+  function(values, id, selected, hovering) {
+    values.<i>property</i> = <i>chosenValue</i>;
+  }</pre>
+              </p>
+              <p>
+                Any of the incoming arguments may be used to determine characteristic changes.
+                If a property is not specifically assigned by the supplied function, it will be left unchanged.
+                A specific function may be assigned to each particular edge in its options, or to all in the network's <code>edges</code> options.
+              </p>
+              <p>
+                The properties define the characteristics that can be changed as follows:
+              </p>
+              <table>
+                <tr><th>Property</th><th>Edge Reference</th></tr>
+                <tr><td>color</td><td>see font.color</td></tr>
+                <tr><td>size</td><td>see font.size</td></tr>
+                <tr><td>face</td><td>see font.face</td></tr>
+                <tr><td>mod</td><td>font modifier ('bold', 'italic', etc.)</td></tr>
+                <tr><td>vadjust</td><td>see font.vadjust</td></tr>
+                <tr><td>strokeWidth</td><td>see font.strokeWidth</td></tr>
+                <tr><td>strokeColor</td><td>see font.strokeColor</td></tr>
+              </table>
+              <br/>
+            </td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
             <td><span parent="color" class="right-caret"></span> color</td>
             <td>Object or String</td>
@@ -279,7 +407,7 @@ network.setOptions(options);
             <td class="indent">color.color</td>
             <td>String</td>
             <td><code>'#848484'</code></td>
-            <td>The color of the border of the node when it is not selected or hovered over <i>(assuming hover is
+            <td>The color of the edge when it is not selected or hovered over <i>(assuming hover is
                 enabled in the interaction module)</i>.
             </td>
         </tr>
@@ -389,6 +517,171 @@ network.setOptions(options);
                 the label will align itself according to the edge.
             </td>
         </tr>
+        <tr parent="font" class="hidden">
+            <td class="indent">font.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the base font in the label text. (Positive is down.)</td>
+        </tr>
+        <tr parent="font" class="hidden">
+            <td class="indent">font.multi</td>
+            <td>Boolean or String</td>
+            <td><code>false</code></td>
+            <td>If <code>false</code>, the label is treated as pure text drawn with the base font. If <code>true</code> or <code>'html'</code> the label may be multifonted, with bold, italic and code markup, interpreted as html. If the value is <code>'markdown'</code> or <code>'md'</code> the label may be multifonted, with bold, italic and code markup, interpreted as markdown.
+              The bold, italic, bold-italic and monospaced fonts may be set up under in the font.bold, font.ital, font.boldital and font.mono properties, respectively.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','bold', this);">
+            <td><span parent="bold" class="right-caret"></span> font.bold</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the bold font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'14px arial red'</code>.
+            </td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the bold font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.size</td>
+            <td>Number</td>
+            <td><code>14</code></td>
+            <td>Size of the bold font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.face</td>
+            <td>String</td>
+            <td><code>'arial'</code></td>
+            <td>Font face (or font family) of the bold font in the label text. Defaults to the base font's face.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.mod</td>
+            <td>String</td>
+            <td><code>'bold'</code></td>
+            <td>A string added to the face and size when determining the bold font in the label text.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the bold italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','ital', this);">
+            <td><span parent="ital" class="right-caret"></span> font.ital</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the italic font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'14px arial red'</code>.
+            </td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the italic font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.size</td>
+            <td>Number</td>
+            <td><code>14</code></td>
+            <td>Size of the italic font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.face</td>
+            <td>String</td>
+            <td><code>'arial'</code></td>
+            <td>Font face (or font family) of the italic font in the label text. Defaults to the base font's face.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.mod</td>
+            <td>String</td>
+            <td><code>'italic'</code></td>
+            <td>A string added to the face and size when determining the italic font in the label text.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','boldital', this);">
+            <td><span parent="boldital" class="right-caret"></span> font.boldital</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the bold italic font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'14px arial red'</code>.
+            </td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the bold italic font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.size</td>
+            <td>Number</td>
+            <td><code>14</code></td>
+            <td>Size of the bold italic font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.face</td>
+            <td>String</td>
+            <td><code>'arial'</code></td>
+            <td>Font face (or font family) of the bold italic font in the label text. Defaults to the base font's face.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.mod</td>
+            <td>String</td>
+            <td><code>'bold'</code></td>
+            <td>A string added to the face and size when determining the bold italic font in the label text.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the bold italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','mono', this);">
+            <td><span parent="mono" class="right-caret"></span> font.mono</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the monospaced font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'15px courier red'</code>.
+            </td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the monospaced font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.size</td>
+            <td>Number</td>
+            <td><code>15</code></td>
+            <td>Size of the monospaced font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.face</td>
+            <td>String</td>
+            <td><code>'courier new'</code></td>
+            <td>Font face (or font family) of the monospaced font in the label text.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.mod</td>
+            <td>String</td>
+            <td><code>''</code></td>
+            <td>A string added to the face and size when determining the monospaced font in the label text.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.vadjust</td>
+            <td>String</td>
+            <td><code>2</code></td>
+            <td>A font-specific correction to the vertical positioning of the monospaced font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
         <tr>
             <td>from</td>
             <td>Number or String</td>
@@ -690,6 +983,18 @@ var options: {
             <td><code>1</code></td>
             <td>The width of the edge. If value is set, this is not used.</td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','widthConstraint', this);">
+            <td><span parent="widthConstraint" class="right-caret"></span> widthConstraint</td>
+            <td>Number, Boolean or Object</td>
+            <td><code>false</code></td>
+            <td>If false, no widthConstraint is applied. If a number is specified, the maximum width of the edge's label is set to the value. The edge's label's lines will be broken on spaces to stay below the maximum.</td>
+        </tr>
+        <tr parent="widthConstraint" class="hidden">
+            <td class="indent">widthConstraint.maximum</td>
+            <td>Number</td>
+            <td><code>undefined</code></td>
+            <td>If a number is specified, the maximum width of the edge's label is set to the value. The edge's label's lines will be broken on spaces to stay below the maximum.</td>
+        </tr>
     </table>
 
 </div>

docs/network/groups.html

@@ -57,6 +57,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -173,4 +174,4 @@ var options = {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/index.html

@@ -88,6 +88,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -340,7 +341,7 @@ network.setOptions(options);
                   <code>'it'</code>,
                   <code>'nl'</code>
                   <code>'pt-br'</code>,
-                  <code>'ru'</code>
+                  <code>'ru'</code> 
                   are supported. Take a look at the
                   <a href="#locales" data-scroll="" data-options="{ &quot;easing&quot;: &quot;easeInCubic&quot; }">locales section below</a>
                   for more explaination on how to customize this.
@@ -1399,8 +1400,14 @@ var options = {
                 <td>Fired if the option <code>interaction:{hover:true}</code> is enabled and the mouse moved away from an edge it was hovering over before.</td>
             </tr>
             <tr><td id="event_zoom">zoom</td>
-                <td><code>{direction:'+'/'-', scale: Number}</code></td>
-                <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale().</td>
+                <td>Object</td>
+                <td>Fired when the user zooms in or out. The properties tell you which direction the zoom is in. The scale is a number greater than 0, which is the same that you get with network.getScale(), Passes an object with properties structured as:
+<pre class="prettyprint lang-js">{
+  direction: '+'/'-',
+  scale: Number,
+  pointer: {x:pointer_x, y:pointer_y}
+}
+</pre></td>
             </tr>
             <tr><td id="event_showPopup">showPopup</td>
                 <td><code>id of item corresponding to popup</code></td>

docs/network/interaction.html

@@ -52,6 +52,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -168,4 +169,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/layout.html

@@ -28,10 +28,10 @@
     <script language="JavaScript">
         smoothScroll.init();
     </script>
-
+    
     <!-- Tipue vendor css -->
     <link href="../css/tipuesearch.css" rel="stylesheet">
-
+    
     <script type="text/javascript" src="../js/toggleTable.js"></script>
 </head>
 <body onload="prettyPrint();">
@@ -56,6 +56,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -165,4 +166,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/manipulation.html

@@ -52,6 +52,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -163,7 +164,7 @@ var options = {
 </pre>
             This example code will show a popup if you connect a node to itself to ask you if that was what you wanted. If you do not want the edge created, do not call the callback function or call the callback function <code>null</code> or no argument.</td></tr>
         <tr><td>editNode</td>                   <td>Function</td>               <td><code>undefined</code></td> <td>Editing of nodes is only possible when a handling function is supplied. If this is not the case, editing of nodes will be disabled. The function will be called when a node is selected and the 'Edit Node' button on the toolbar is pressed. This function will be called like the <code>addNode</code> function with the node's data and a callback function.</td></tr>
-        <tr><td>editEdge</td>                   <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the editing of edges in the GUI. When a function is supplied, it will be called when an edge is selected and the 'Edit Edge' button on the toolbar is pressed. This function will be called in the same way the <code>addEdge</code> function was called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
+        <tr><td>editEdge</td>                   <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the editing of edges in the GUI. If a function is supplied, it will be called when an edge is selected and the 'Edit Edge' button on the toolbar is pressed. Initially, the endpoints of the edge may be dragged to connect to a different node, then the function will be called in the same way the <code>addEdge</code> function is called. If an object, if a function is given for the <code>'editWithoutDrag'</code> property, the function will be called immediately (without dragging any endpoints) in the same way the <code>addEdge</code> function is called. If the callback is not performed, the edge will remain hanging where it was released. <b>To cancel, call the callback function with <code>null</code> as argument or without arguments</b>.</td></tr>
         <tr><td>deleteNode</td>                 <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the deletion of nodes in the GUI. If function, it will be called when a node is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds and an array of selected edges Ids. These are the items that will be deleted if the callback is performed.</td></tr>
         <tr><td>deleteEdge</td>                 <td>Boolean or Function</td>    <td><code>true</code></td>      <td>If boolean, toggle the deletion of edges in the GUI. If function, it will be called when an edge is selected and the 'Delete selected' button is pressed. When using a function, it will receive a callback and an object with an array of selected nodeIds (empty) and an array of selected edges Ids. These are the items that will be deleted if the callback is performed.</td></tr>
         <tr><td>controlNodeStyle</td>           <td>Object</td>     <td>Object</td><td>You can supply any styling information you'd like here. All fields described in <a href="./nodes.html">the nodes module</a> are allowed except obviously for id, x, y and fixed. <br><br>Default:
@@ -200,4 +201,4 @@ var options = {
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/network/nodes.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -109,6 +110,7 @@ var options = {
     borderWidth: 1,
     borderWidthSelected: 2,
     brokenImage:undefined,
+    chosen: true,
     color: {
       border: '#2B7CE9',
       background: '#97C2FC',
@@ -132,9 +134,40 @@ var options = {
       background: 'none',
       strokeWidth: 0, // px
       strokeColor: '#ffffff',
-      align: 'center'
+      align: 'center',
+      multi: false,
+      vadjust: 0,
+      bold: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        vadjust: 0,
+        mod: 'bold'
+      },
+      ital: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        vadjust: 0,
+        mod: 'italic',
+      },
+      boldital: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        vadjust: 0,
+        mod: 'bold italic'
+      },
+      mono: {
+        color: '#343434',
+        size: 15, // px
+        face: 'courier new',
+        vadjust: 2,
+        mod: ''
+      }
     },
     group: undefined,
+    heightConstraint: false,
     hidden: false,
     icon: {
       face: 'FontAwesome',
@@ -186,6 +219,7 @@ var options = {
     size: 25,
     title: undefined,
     value: undefined,
+    widthConstraint: false,
     x: undefined,
     y: undefined
   }
@@ -238,6 +272,90 @@ network.setOptions(options);
                 a backup image in case the URL supplied in the image option cannot be resolved.
             </td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','chosen', this);">
+            <td><span parent="chosen" class="right-caret"></span> chosen</td>
+            <td>Object or Boolean</td>
+            <td><code>true</code></td>
+            <td>
+              When true, selecting or hovering on a node will change it and its label's characteristics according the default.
+              When false, no change to the node or its label will occur when the node is chosen.
+              If an object is supplied, finer-grained adjustment of node and label characteristics is available when a node is chosen.
+            </td>
+        </tr>
+        <tr parent="chosen" class="hidden">
+            <td class="indent">chosen.node</td>
+            <td>Function or Boolean</td>
+            <td>undefined</td>
+            <td>
+              When true, selecting or hovering on a node will change its characteristics according the default.
+              When false, no change to the node will occur when the node is chosen.
+              <p>
+                If a function is supplied, it is called when the node is chosen.
+                <pre class="code">
+  function(values, id, selected, hovering) {
+    values.<i>property</i> = <i>chosenValue</i>;
+  }</pre>
+              </p>
+              <p>
+                Any of the incoming arguments may be used to determine characteristic changes.
+                If a property is not specifically assigned by the supplied function, it will be left unchanged.
+                A specific function may be assigned to each particular node in its options, or to all in the network's <code>nodes</code> options.
+              </p>
+              <p>
+                The properties define the characteristics that can be changed as follows:
+              </p>
+              <table>
+                <tr><th>Property</th><th>Node Reference</th></tr>
+                <tr><td>color</td><td>see color.background</td></tr>
+                <tr><td>borderWidth</td><td>see borderWidth</td></tr>
+                <tr><td>borderColor</td><td>see color.border</td></tr>
+                <tr><td>size</td><td>see size</td></tr>
+                <tr><td>borderDashes</td><td>see shapeProperties.borderDashes</td></tr>
+                <tr><td>borderRadius</td><td>see shapeProperties.borderRadius</td></tr>
+                <tr><td>shadow</td><td>see shadow.enabled</td></tr>
+                <tr><td>shadowColor</td><td>see shadow.color</td></tr>
+                <tr><td>shadowSize</td><td>see shadow.size</td></tr>
+                <tr><td>shadowX</td><td>see shadow.x</td></tr>
+                <tr><td>shadowY</td><td>see shadow.y</td></tr>
+              </table>
+              <br/>
+            </td>
+        </tr>
+        <tr parent="chosen" class="hidden">
+            <td class="indent">chosen.label</td>
+            <td>Function or Boolean</td>
+            <td>undefined</td>
+            <td>
+              When true, selecting or hovering on a node will change its label's characteristics according the default.
+              When false, no change to the node's label will occur when the node is chosen.
+              <p>
+                If a function is supplied, it is called when the node is chosen.
+                <pre class="code">
+  function(values, id, selected, hovering) {
+    values.<i>property</i> = <i>chosenValue</i>;
+  }</pre>
+              </p>
+              <p>
+                Any of the incoming arguments may be used to determine characteristic changes.
+                If a property is not specifically assigned by the supplied function, it will be left unchanged.
+                A specific function may be assigned to each particular node in its options, or to all in the network's <code>nodes</code> options.
+              </p>
+              <p>
+                The properties define the characteristics that can be changed as follows:
+              </p>
+              <table>
+                <tr><th>Property</th><th>Node Reference</th></tr>
+                <tr><td>color</td><td>see font.color</td></tr>
+                <tr><td>size</td><td>see font.size</td></tr>
+                <tr><td>face</td><td>see font.face</td></tr>
+                <tr><td>mod</td><td>font modifier ('bold', 'italic', etc.)</td></tr>
+                <tr><td>vadjust</td><td>see font.vadjust</td></tr>
+                <tr><td>strokeWidth</td><td>see font.strokeWidth</td></tr>
+                <tr><td>strokeColor</td><td>see font.strokeColor</td></tr>
+              </table>
+              <br/>
+            </td>
+        </tr>
         <tr class='toggle collapsible' onclick="toggleTable('optionTable','color', this);">
             <td><span parent="color" class="right-caret"></span> color</td>
             <td>Object or String</td>
@@ -380,6 +498,171 @@ network.setOptions(options);
             <td>This can be set to 'left' to make the label left-aligned. Otherwise,
                 defaults to 'center'.</td>
         </tr>
+        <tr parent="font" class="hidden">
+            <td class="indent">font.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the base font in the label text. (Positive is down.)</td>
+        </tr>
+        <tr parent="font" class="hidden">
+            <td class="indent">font.multi</td>
+            <td>Boolean or String</td>
+            <td><code>false</code></td>
+            <td>If <code>false</code>, the label is treated as pure text drawn with the base font. If <code>true</code> or <code>'html'</code> the label may be multifonted, with bold, italic and code markup, interpreted as html. If the value is <code>'markdown'</code> or <code>'md'</code> the label may be multifonted, with bold, italic and code markup, interpreted as markdown.
+              The bold, italic, bold-italic and monospaced fonts may be set up under in the font.bold, font.ital, font.boldital and font.mono properties, respectively.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','bold', this);">
+            <td><span parent="bold" class="right-caret"></span> font.bold</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the bold font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'14px arial red'</code>.
+            </td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the bold font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.size</td>
+            <td>Number</td>
+            <td><code>14</code></td>
+            <td>Size of the bold font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.face</td>
+            <td>String</td>
+            <td><code>'arial'</code></td>
+            <td>Font face (or font family) of the bold font in the label text. Defaults to the base font's face.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.mod</td>
+            <td>String</td>
+            <td><code>'bold'</code></td>
+            <td>A string added to the face and size when determining the bold font in the label text.</td>
+        </tr>
+        <tr parent="bold" class="hidden">
+            <td class="indent">font.bold.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the bold italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','ital', this);">
+            <td><span parent="ital" class="right-caret"></span> font.ital</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the italic font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'14px arial red'</code>.
+            </td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the italic font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.size</td>
+            <td>Number</td>
+            <td><code>14</code></td>
+            <td>Size of the italic font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.face</td>
+            <td>String</td>
+            <td><code>'arial'</code></td>
+            <td>Font face (or font family) of the italic font in the label text. Defaults to the base font's face.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.mod</td>
+            <td>String</td>
+            <td><code>'italic'</code></td>
+            <td>A string added to the face and size when determining the italic font in the label text.</td>
+        </tr>
+        <tr parent="ital" class="hidden">
+            <td class="indent">font.ital.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','boldital', this);">
+            <td><span parent="boldital" class="right-caret"></span> font.boldital</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the bold italic font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'14px arial red'</code>.
+            </td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the bold italic font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.size</td>
+            <td>Number</td>
+            <td><code>14</code></td>
+            <td>Size of the bold italic font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.face</td>
+            <td>String</td>
+            <td><code>'arial'</code></td>
+            <td>Font face (or font family) of the bold italic font in the label text. Defaults to the base font's face.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.mod</td>
+            <td>String</td>
+            <td><code>'bold'</code></td>
+            <td>A string added to the face and size when determining the bold italic font in the label text.</td>
+        </tr>
+        <tr parent="boldital" class="hidden">
+            <td class="indent">font.boldital.vadjust</td>
+            <td>String</td>
+            <td><code>0</code></td>
+            <td>A font-specific correction to the vertical positioning of the bold italic font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
+        <tr parent="font" class='hidden toggle collapsible' onclick="toggleTable('optionTable','mono', this);">
+            <td><span parent="mono" class="right-caret"></span> font.mono</td>
+            <td>Object or String</td>
+            <td><code>false</code></td>
+            <td>This object defines the details of the monospaced font in the label. A shorthand is also supported in the form <code>'size face
+                color'</code> for example: <code>'15px courier red'</code>.
+            </td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.color</td>
+            <td>String</td>
+            <td><code>'#343434'</code></td>
+            <td>Color of the monospaced font in the label text. Defaults to the base font's color.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.size</td>
+            <td>Number</td>
+            <td><code>15</code></td>
+            <td>Size of the monospaced font in the label text. Defaults to the base font's size.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.face</td>
+            <td>String</td>
+            <td><code>'courier new'</code></td>
+            <td>Font face (or font family) of the monospaced font in the label text.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.mod</td>
+            <td>String</td>
+            <td><code>''</code></td>
+            <td>A string added to the face and size when determining the monospaced font in the label text.</td>
+        </tr>
+        <tr parent="mono" class="hidden">
+            <td class="indent">font.mono.vadjust</td>
+            <td>String</td>
+            <td><code>2</code></td>
+            <td>A font-specific correction to the vertical positioning of the monospaced font in the label text. (Positive is down.) Defaults to the base font's valign.</td>
+        </tr>
         <tr>
             <td>group</td>
             <td>String</td>
@@ -388,6 +671,25 @@ network.setOptions(options);
                 that group will apply to this node. Node specific styling overrides group styling.
             </td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','heightConstraint', this);">
+            <td><span parent="heightConstraint" class="right-caret"></span> heightConstraint</td>
+            <td>Number, Boolean or Object</td>
+            <td><code>false</code></td>
+            <td>If false, no heightConstraint is applied. If a number is specified, the value is used as the minimum height of the node. The node's height will be be set to the minimum if less than the value.</td>
+        </tr>
+        <tr parent="heightConstraint" class="hidden">
+            <td class="indent">heightConstraint.minimum</td>
+            <td>Number</td>
+            <td><code>undefined</code></td>
+            <td>If a number is specified, the value is used as the minimum height of the node. The node's height will be be set to the minimum if less than the value.</td>
+        </tr>
+        <tr parent="heightConstraint" class="hidden">
+            <td class="indent">heightConstraint.valign</td>
+            <td>String</td>
+            <td><code>'middle'</code></td>
+            <td>Valid values are <code>'top'</code>, <code>'middle'</code>, and <code>'bottom'</code>.
+               When specified, if the height of the label text is less than the minimum (including any top or bottom margins), it will be offset vertically to the designated position.</td>
+        </tr>
         <tr>
             <td>hidden</td>
             <td>Boolean</td>
@@ -458,6 +760,36 @@ network.setOptions(options);
             <td><code>undefined</code></td>
             <td>When using the hierarchical layout, the level determines where the node is going to be positioned.</td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','margin', this);">
+            <td><span parent="margin" class="right-caret"></span> margin</td>
+            <td>Object or Number</td>
+            <td><code>5</code></td>
+            <td>If a number is specified, the margins of the label are set to that value on all sides. These options are only used when the shape is set to <code>box</code>, <code>circle</code>, <code>database</code>, <code>icon</code> or <code>text</code>.</td>
+        </tr>
+        <tr parent="margin" class="hidden">
+            <td class="indent">margin.top</td>
+            <td>Number</td>
+            <td><code>5</code></td>
+            <td>The top margin of the label is set to this value.</td>
+        </tr>
+        <tr parent="margin" class="hidden">
+            <td class="indent">margin.right</td>
+            <td>Number</td>
+            <td><code>5</code></td>
+            <td>The right margin of the label is set to this value.</td>
+        </tr>
+        <tr parent="margin" class="hidden">
+            <td class="indent">margin.bottom</td>
+            <td>Number</td>
+            <td><code>5</code></td>
+            <td>The bottom margin of the label is set to this value.</td>
+        </tr>
+        <tr parent="margin" class="hidden">
+            <td class="indent">margin.left</td>
+            <td>Number</td>
+            <td><code>5</code></td>
+            <td>The left margin of the label is set to this value.</td>
+        </tr>
         <tr>
             <td>mass</td>
             <td>Number</td>
@@ -700,6 +1032,24 @@ mySize = minSize + diff * scale;
             <td>When a value is set, the nodes will be scaled using the options in the scaling object defined above.
             </td>
         </tr>
+        <tr class='toggle collapsible' onclick="toggleTable('optionTable','widthConstraint', this);">
+            <td><span parent="widthConstraint" class="right-caret"></span> widthConstraint</td>
+            <td>Number, Boolean or Object</td>
+            <td><code>false</code></td>
+            <td>If false, no widthConstraint is applied. If a number is specified, the minimum and maximum widths of the node are set to the value. The node's label's lines will be broken on spaces to stay below the maximum and the node's width will be set to the minimum if less than the value.</td>
+        </tr>
+        <tr parent="widthConstraint" class="hidden">
+            <td class="indent">widthConstraint.minimum</td>
+            <td>Number</td>
+            <td><code>undefined</code></td>
+            <td>If a number is specified, the minimum width of the node is set to the value. The node's width will be set to the minimum if less than the value.</td>
+        </tr>
+        <tr parent="widthConstraint" class="hidden">
+            <td class="indent">widthConstraint.maximum</td>
+            <td>Number</td>
+            <td><code>undefined</code></td>
+            <td>If a number is specified, the maximum width of the node is set to the value. The node's label's lines will be broken on spaces to stay below the maximum.</td>
+        </tr>
         <tr>
             <td>x</td>
             <td>Number</td>

docs/network/physics.html

@@ -53,6 +53,7 @@
                 <div id="navbar" class="navbar-collapse collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+                        <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
                         <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
                         <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
                         <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -220,4 +221,4 @@ network.setOptions(options);
 <script src="../js/tipuesearch.config.js"></script>
 <script src="../js/tipuesearch.js"></script>
 <!-- controller -->
-<script src="../js/main.js"></script>
+<script src="../js/main.js"></script>

docs/timeline/index.html

@@ -60,6 +60,7 @@
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li><a href="http://www.visjs.org/index.html#modules">Modules</a></li>
+            <li><a href="http://www.visjs.org/blog.html">Blog</a></li>
             <li><a href="http://www.visjs.org/index.html#download_install">Download</a></li>
             <li><a href="http://www.visjs.org/showcase/index.html">Showcase</a></li>
             <li><a href="http://www.visjs.org/index.html#contribute">Contribute</a></li>
@@ -236,7 +237,7 @@ var items = new vis.DataSet([
     The item properties are defined as:
   </p>
 
-  <table class="properties">
+  <table class="properties" id="itemOptionTable">
     <tr>
       <th>Name</th>
       <th>Type</th>
@@ -323,7 +324,7 @@ var items = new vis.DataSet([
       <td>String</td>
       <td>none</td>
       <td>Add a title for the item, displayed when holding the mouse on the item.
-        The title can only contain plain text.
+        The title can be an HTML element or a string containing plain text or HTML.
       </td>
     </tr>
     <tr>
@@ -334,11 +335,30 @@ 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.
       </td>
     </tr>
-    <tr>
-      <td>editable</td>
-      <td>Boolean</td>
+    <tr class='toggle collapsible' onclick="toggleTable('itemOptionTable', 'itemEditable', this);">
+      <td><span parent="itemEditable" class="right-caret"></span> editable</td>
+      <td>Boolean or Object</td>
+      <td>no</td>
+      <td>Override the editable option of the timeline for a specific item (assuming <code>timeline.editable.overrideItems</code> is false).</td>
+    </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.remove</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>If true, item can be deleted by first selecting it, and then clicking the delete button on the top right of the item. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.updateGroup</td>
+      <td>boolean</td>
       <td>no</td>
-      <td>Override the editable option of the timeline for a specific item.</td>
+      <td>If true, item can be dragged from one group to another. Only applicable when the Timeline has groups. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
+    <tr parent="itemEditable" class="hidden">
+      <td class="indent">editable.updateTime</td>
+      <td>boolean</td>
+      <td>no</td>
+      <td>If true, items can be dragged to another moment int time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
+    </tr>
   </table>
 
   <h3 id="groups">Groups</h3>
@@ -362,7 +382,7 @@ var groups = [
   {
     id: 1,
     content: 'Group 1'
-    // Optional: a field 'className', 'style'
+    // Optional: a field 'className', 'style', 'order', [properties]
   }
   // more groups...
 ]);
@@ -398,9 +418,9 @@ var groups = [
     </tr>
     <tr>
       <td>content</td>
-      <td>String</td>
+      <td>String or Element</td>
       <td>yes</td>
-      <td>The contents of the group. This can be plain text or html code.</td>
+      <td>The contents of the group. This can be plain text, html code or an html element.</td>
     </tr>
     <tr>
       <td>id</td>
@@ -435,6 +455,24 @@ var groups = [
         The title can only contain plain text.
       </td>
     </tr>
+    <tr>
+      <td>visible</td>
+      <td>Boolean</td>
+      <td>no</td>
+      <td>Provides a means to toggle the whether a group is displayed or not. Defaults to <code>true</code>.</td>
+    </tr>
+    <tr>
+      <td>nestedGroups</td>
+      <td>Array</td>
+      <td>no</td>
+      <td>Array of group ids nested in the group. Nested groups will appear under this nesting group.</td>
+    </tr>
+     <tr>
+      <td>showNestedGroups</td>
+      <td>Boolean</td>
+      <td>no</td>
+      <td>Assuming the group has nested groups, this will set the initial state of the group - shown or collapsed. The <code>showNestedGroups</code> is defaulted to <code>true</code>.</td>
+    </tr>
   </table>
 
 
@@ -544,6 +582,12 @@ function (option, path) {
       <td><code>false</code></td>
       <td>If true, items can be dragged to another moment in time. See section <a href="#Editing_Items">Editing Items</a> for a detailed explanation.</td>
     </tr>
+    <tr parent="editable" class="hidden">
+      <td class="indent">editable.overrideItems</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>If true, item specific editable properties are overridden by timeline settings</td>
+    </tr>
 
     <tr>
       <td>end</td>
@@ -647,7 +691,7 @@ function (option, path) {
       <td>groupTemplate</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the groups. The function is called by the Timeline with a groups data as the first argument and the group element as the second, and must return HTML code, a string or a template as result. When the option groupTemplate is specified, the groups do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
     </tr>
 
     <tr>
@@ -911,7 +955,14 @@ function (option, path) {
       <td>Orientation of the timeline items: 'top' or 'bottom' (default). Determines whether items are aligned to the top or bottom of the Timeline.</td>
     </tr>
 
-     <tr>
+    <tr>
+      <td>rollingMode</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>If true, the timeline will initial in a rolling mode - the current time will always be centered. I the user drags the timeline, the timeline will go out of rolling mode and a toggle button will appear. Clicking that button will go back to rolling mode. Zooming in rolling mode will zoom in to the center without consideration of the mouse position.</td>
+    </tr>
+
+    <tr>
       <td>rtl</td>
       <td>boolean</td>
       <td><code>false</code></td>
@@ -964,6 +1015,13 @@ function (option, path) {
       <td>If true (default), items will be stacked on top of each other such that they do not overlap.</td>
     </tr>
 
+    <tr>
+      <td>stackSubgroups</td>
+      <td>boolean</td>
+      <td><code>true</code></td>
+      <td>If true (default), subgroups will be stacked on top of each other such that they do not overlap.</td>
+    </tr>
+
     <tr>
       <td>snap</td>
       <td>function or null</td>
@@ -986,7 +1044,22 @@ function (option, path) {
       <td>template</td>
       <td>function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items data as the first argument and the item element as the second, and must return HTML code as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+      <td>A template function used to generate the contents of the items. The function is called by the Timeline with an items' data as the first argument and the item element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.</td>
+    </tr>
+
+    <tr>
+      <td>visibleFrameTemplate</td>
+      <td>function</td>
+      <td>none</td>
+      <td>A template function used to generate the visible frame of the items. The function is called by the Timeline with an items' data as the first argument and the item frame element as the second, and must return HTML code, a string or a template as result. When the option template is specified, the items do not need to have a field <code>content</code>. See section <a href="#Templates">Templates</a> for a detailed explanation.
+      This would be used as an additional way to add content that is constant in size with the visible frame of the item and does not get visibly hidden with the item's internal container: <code>vis-item-overflow</code> which is <code>overflow:hidden</code>.</td>
+    </tr>
+
+    <tr class='depricated'>
+      <td>throttleRedraw</td>
+      <td>number</td>
+      <td><code>0</code></td>
+      <td>This option is <b>DEPRICATED</b> and no longer supported. It will be removed in the next MAJOR release.</td>
     </tr>
 
     <tr class='toggle collapsible' onclick="toggleTable('optionTable','timeAxis', this);">
@@ -1023,6 +1096,30 @@ function (option, path) {
       </td>
     </tr>
 
+    <tr class='toggle collapsible' onclick="toggleTable('optionTable','tooltip', this);">
+      <td><span parent="tooltip" class="right-caret"></span> tooltip</td>
+      <td>Object</td>
+      <td><code>Object</code></td>
+      <td>Specify how the tooltip is positioned.</td>
+    </tr>
+    <tr parent="tooltip" class="hidden">
+      <td class="indent">tooltip.followMouse</td>
+      <td>boolean</td>
+      <td><code>false</code></td>
+      <td>If true, tooltips will follow the mouse as they move around in the item.</td>
+    </tr>
+
+    <tr parent="tooltip" class="hidden">
+      <td class="indent">tooltip.overflowMethod</td>
+      <td>String</td>
+      <td><code>'flip'</code></td>
+      <td>
+        Set how the tooltip should act if it is about to overflow out of the timeline.<br />
+        Choose from <code>'cap'</code> and <code>'flip'</code>. <br />
+        If it is set to <code>'cap'</code>, the tooltip will just cap its position to inside to timeline. <br />
+        While if it is set to <code>'flip'</code>, the position of the tooltip will flip around the cursor so that a corner is at the cursor, and the rest of it is visible. <br />
+    </tr>
+
     <tr class='toggle collapsible' onclick="toggleTable('optionTable','tooltipOnItemUpdateTime', this);">
       <td><span parent="tooltipOnItemUpdateTime" class="right-caret"></span> tooltipOnItemUpdateTime</td>
       <td>Object/Boolean</td>
@@ -1033,7 +1130,7 @@ function (option, path) {
       <td class="indent">template</td>
       <td>Function</td>
       <td>none</td>
-      <td>A template function used to generate the contents of the tooltip. The function is called by the Timeline with an item data as the first argument, and must return HTML code as result. See section <a href="#Templates">Templates</a> for a detailed explanation.
+      <td>A template function used to generate the contents of the tooltip. The function is called by the Timeline with an item data as the first argument, and must return HTML code, a string or a template as result. See section <a href="#Templates">Templates</a> for a detailed explanation.
       </td>
     </tr>
     <tr>
@@ -1432,6 +1529,15 @@ timeline.off('select', onSelect);
       </td>
     </tr>
 
+    <tr>
+      <td>mouseOver</td>
+      <td>
+        Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+      </td>
+      <td>Fired when the mouse hovers over a timeline element.
+      </td>
+    </tr>
+
     <tr>
       <td>groupDragged</td>
       <td>
@@ -1456,6 +1562,7 @@ timeline.off('select', onSelect);
           <li><code>start</code> (Number): timestamp of the current start of the window.</li>
           <li><code>end</code> (Number): timestamp of the current end of the window.</li>
           <li><code>byUser</code> (Boolean): change happened because of user drag/zoom.</li>
+          <li><code>event</code> (Object): original event triggering the rangechange.</li>
         </ul>
       </td>
       <td>Fired repeatedly when the timeline window is being changed.
@@ -1469,6 +1576,7 @@ timeline.off('select', onSelect);
           <li><code>start</code> (Number): timestamp of the current start of the window.</li>
           <li><code>end</code> (Number): timestamp of the current end of the window.</li>
           <li><code>byUser</code> (Boolean): change happened because of user drag/zoom.</li>
+          <li><code>event</code> (Object): original event triggering the rangechanged.</li>
         </ul>
       </td>
       <td>Fired once after the timeline window has been changed.
@@ -1517,6 +1625,7 @@ timeline.off('select', onSelect);
         <ul>
           <li><code>id</code> (Number or String): custom time bar id.</li>
           <li><code>time</code> (Date): the custom time.</li>
+          <li><code>event</code> (Object): original event triggering the timechange.</li>
         </ul>
       </td>
       <td>Fired repeatedly when the user is dragging the custom time bar.
@@ -1530,6 +1639,7 @@ timeline.off('select', onSelect);
         <ul>
           <li><code>id</code> (Number or String): custom time bar id.</li>
           <li><code>time</code> (Date): the custom time.</li>
+          <li><code>event</code> (Object): original event triggering the timechanged.</li>
         </ul>
       </td>
       <td>Fired once after the user has dragged the custom time bar.
@@ -1565,12 +1675,13 @@ var options = {
     add: true,         // add new items by double tapping
     updateTime: true,  // drag items horizontally
     updateGroup: true, // drag items from one group to another
-    remove: true       // delete an item by tapping the delete button top right
+    remove: true,       // delete an item by tapping the delete button top right
+    overrideItems: false  // allow these options to override item.editable
   }
 };</pre>
 
   <p>
-    Editing can be enabled/disabled for specific items. Setting the property <code>editable</code> to <code>true</code> or <code>false</code> on a data item will override the timeline option.
+    Editing can be enabled/disabled for specific items. Setting the property <code>editable</code> to <code>true</code> or <code>false</code> on a data item will override the timeline option except when <code>timeline.editable.overrideItems</code> is set to <code>true</code>.
   </p>
 
 <pre class="prettyprint lang-js">

examples/graph2d/08_performance.html

@@ -147,4 +147,4 @@
     var graph2d = new vis.Graph2d(container, dataset, options);
 </script>
 </body>
-</html>
+</html>

examples/graph3d/07_dot_cloud_colors.html

@@ -13,6 +13,9 @@
     var data = null;
     var graph = null;
 
+    function onclick(point) {
+      console.log(point);
+    }
 
     // Called when the Visualization API is loaded.
     function drawVisualization() {
@@ -30,9 +33,9 @@
         var x = pow(random(), 2);
         var y = pow(random(), 2);
         var z = pow(random(), 2);
-        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+        var style = (i%2==0) ? sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)) : "#00ffff";
 
-        data.add({x:x,y:y,z:z,style:dist});
+        data.add({x:x,y:y,z:z,style:style});
       }
 
       // specify options
@@ -45,6 +48,7 @@
         keepAspectRatio: true,
         verticalRatio: 1.0,
         legendLabel: 'distance',
+        onclick: onclick,
         cameraPosition: {
           horizontal: -0.35,
           vertical: 0.22,

examples/network/labels/labelMargins.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Label margins</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    p {
+      max-width:600px;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<p>The labels of box, circle, database, icon and text nodes may have different margin values.
+  Top, right, bottom and left margins may be different for each node.</p>
+<p>Setting the margin value in the network's nodes property sets it as the default.</p>
+<p>Setting a the value to a number uses that number for the margins. If the value is an object, a different value for each margin will be set.</p>
+<p>Note that negative values appropriately push labels outside the node.
+
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = [
+    { id: 1, label: 'Default Value\n(5)', x: -150, y: -150 },
+    { id: 2, label: 'Single Value\n(25)', margin: 20, x: 0, y: 0 },
+    { id: 3, label: 'Different Values\n(10, 20, 40, 30)', margin: { top: 10, right: 20, bottom: 40, left: 30 }, x: 120, y: 120},
+    { id: 4, label: 'A Negative Value\n(10, 20, 40, -50)', margin: { top: 10, right: 20, bottom: 30, left: -20 }, x: 300, y: -300}
+  ];
+
+  // create an array with edges
+  var edges = [
+    {from: 1, to: 2},
+    {from: 2, to: 3},
+    {from: 3, to: 4}
+  ];
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    nodes: {
+      shape: 'box'
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>

examples/network/labels/labelMultifont.html

@@ -0,0 +1,115 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Multifont Labels</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+    code {
+      font-size: 15px;
+    }
+    p {
+      max-width: 600px;
+    }
+    .indented {
+      margin-left: 30px;
+    }
+    table {
+      border-collapse: collapse;
+      font-family: sans-serif;
+    }
+    table code {
+      background: #dddddd;
+    }
+    th, td {
+      border: 1px solid #aaaaaa;
+      text-align: center;
+      padding: 5px;
+      font-weight: normal;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<p>Node and edge labels may be marked up to be drawn with multiple fonts.</p>
+
+<div id="mynetwork"></div>
+
+<p>The value of the <code>font.multi</code> property may be set to <code>'html'</code>, <code>'markdown'</code> or a boolean.</p>
+<table class="indented">
+  <tr><th colspan='4'>Embedded Font Markup</th></tr>
+  <tr><th rowspan=2>font mod</th><th colspan=3><code>font.multi</code> setting</th></tr>
+  <tr><th><code>'html'</code> or <code>true</code></th><th><code>'markdown'</code> or <code>'md'</code></th><th><code>false<code></th></tr>
+  <tr><th>bold</th><td><code>&lt;b&gt;</code> ... <code>&lt;/b></code></td><td><code>&nbsp;*</code> ... <code>*&nbsp;</code></td><td>n/a</td></tr>
+  <tr><th>italic</th><td><code>&lt;i&gt;</code> ... <code>&lt;/i></code></td><td><code>&nbsp;_</code> ... <code>_&nbsp;</code></td><td>n/a</td></tr>
+  <tr><th>mono-spaced</th><td><code>&lt;code&gt;</code> ... <code>&lt;/code&gt;</code></td><td><code>&nbsp;`</code> ... <code>`&nbsp;</code></td><td>n/a</td></tr>
+</table>
+
+<p>
+The <code>html</code> and <code>markdown</code> rendering is limited: bolds may be embedded in italics, italics may be embedded in bolds, and mono-spaced may be embedded in bold or italic, but will not be altered by those font mods, nor will embedded bolds or italics be handled.
+The only entities that will be observed in html are <code>&amp;lt;</code> and <code>&amp;amp;</code> and in <code>markdown</code> a backslash will escape the following character (including a backslash) from special processing.
+Any font mod that is started in a label line will be implicitly terminated at the end of that line.
+While this interpretation may not exactly match <i>official</i> rendering standards, it is a consistent compromise for drawing multifont strings in the non-multifont html canvas element underlying vis.
+</p>
+
+<p>This implies that four additional sets of font properties will be recognized in label processing.</p>
+<p class="indented"><code>font.bold</code> designates the font used for rendering bold font mods.
+<br/><code>font.ital</code> designates the font used for rendering italic font mods.
+<br/><code>font.boldital</code> designates the font used for rendering bold-<b><i>and</i></b>-italic font mods.
+<br/><code>font.mono</code> designates the font used for rendering monospaced font mods.</p>
+<p>Any font mod without a matching font will be rendered using the normal <code>font</code> (or default) value.</p>
+
+<p>The <code>font.multi</code> and extended font settings may be set in the network's <code>nodes</code> or <code>edges</code> properties, or on individual nodes and edges.
+Node and edge label fonts are separate.</p>
+
+<script type="text/javascript">
+  var nodes = [
+    { id: 1, label: 'This is a\nsingle-font label', x: -120, y: -120 },
+    { id: 2, font: { multi: true }, label: '<b>This</b> is a\n<i>default</i> <b><i>multi-</i>font</b> <code>label</code>', x: -40, y: -40 },
+    { id: 3, font: { multi: 'html', size: 20 }, label: '<b>This</b> is an\n<i>html</i> <b><i>multi-</i>font</b> <code>label</code>', x: 40, y: 40 },
+    { id: 4, font: { multi: 'md', face: 'georgia' }, label: '*This* is a\n_markdown_ *_multi-_ font* `label`', x: 120, y: 120},
+  ];
+
+  var edges = [
+    {from: 1, to: 2, label: "single to default"},
+    {from: 2, to: 3, font: { multi: true }, label: "default to <b>html</b>" },
+    {from: 3, to: 4, font: { multi: "md" }, label: "*html* to _md_" }
+  ];
+
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges: {
+      font: {
+        size: 12
+      }
+    },
+    nodes: {
+      shape: 'box',
+      font: {
+        bold: {
+          color: '#0077aa'
+        }
+      }
+    },
+    physics: {
+      enabled: false
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>

examples/network/nodeStyles/widthHeight.html

@@ -0,0 +1,118 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Label Width and Height Settings</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+    code {
+      font-size: 14px;
+      background: #dddddd;
+    }
+    p {
+      max-width: 600px;
+    }
+    .indented {
+      margin-left: 30px;
+    }
+    .sep {
+      height: 1px;
+      width: 35%;
+      margin-left: 40px;
+      background-color: #dddddd;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<p>Nodes may be set to have fixed, minimum and maximum widths and minimum heights.
+Nodes with minimum heights may also have a vertical alignment set.</p>
+
+<p>Edges may be set to have maximum widths.</p>
+
+<div id="mynetwork"></div>
+
+<p>The <code>widthConstraint: value</code> option means a fixed width, the minimum and maximum width of the element are set to the value (respecting left and right margins). Lines exceeding the maximum width will be broken at space boundaries to fit.</p>
+<p>The <code>widthConstraint: { minimum: value }</code> option sets the minimum width of the element to the value.</p>
+<p>The <code>widthConstraint: { maximum: value }</code> option sets the maximum width of the element to the value (respecting left and right margins). Lines exceeding the maximum width will be broken at space boundaries to fit.</p>
+<p>Minimum width line sizing is applied after maximum width line breaking, so counterintuitively, the minimum being greater than the maximum has a meaningful interpretation.</p>
+
+<div class="sep"></div>
+
+<p>The <code>heightConstraint: value</code> option sets the minimum height of the element to the value (respecting top and bottom margins).</p>
+<p>The <code>heightConstraint: { minimum: value }</code> option also sets the minimum height of the element to the value (respecting top and bottom margins).</p>
+<p>The <code>heightConstraint: { valign: value }</code> option (with value <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, sets the alignment of the text in the element's label to the elements top, middle or bottom (respecting top and bottom margins) when it's height is less than the minimum. The middle value is the default.</p>
+
+<div class="sep"></div>
+
+<p>Node width and height constraints may both be applied together, of course.</p>
+<p>The constraint options may be applied to elements individually, or at the whole-set level.
+Whole-set node and edge constraints are exclusive.</p>
+
+<script type="text/javascript">
+  var nodes = [
+    { id: 100, label: 'This node has no fixed, minimum or maximum width or height', x: -50, y: -300 },
+    { id: 210, widthConstraint: { minimum: 120 }, label: 'This node has a mimimum width', x: -400, y: -200 },
+    { id: 211, widthConstraint: { minimum: 120 }, label: '...so does this', x: -500, y: -50 },
+    { id: 220, widthConstraint: { maximum: 170 }, label: 'This node has a maximum width and breaks have been automatically inserted into the label', x: -150, y: -150 },
+    { id: 221, widthConstraint: { maximum: 170 }, label: '...this too', x: -100, y: 0 },
+    { id: 200, font: { multi: true }, widthConstraint: 150, label: '<b>This</b> node has a fixed width and breaks have been automatically inserted into the label', x: -300, y: 50 },
+    { id: 201, widthConstraint: 150, label: '...this as well', x: -300, y: 200 },
+    { id: 300, heightConstraint: { minimum: 70 }, label: 'This node\nhas a\nminimum\nheight', x: 100, y: -150 },
+    { id: 301, heightConstraint: { minimum: 70 }, label: '...this one here too', x: 100, y: 0 },
+    { id: 400, heightConstraint: { minimum: 100, valign: 'top' }, label: 'Minimum height\nvertical alignment\nmay be top', x: 300, y: -200 },
+    { id: 401, heightConstraint: { minimum: 100, valign: 'middle' }, label: 'Minimum height\nvertical alignment\nmay be middle\n(default)', x: 300, y: 0 },
+    { id: 402, heightConstraint: { minimum: 100, valign: 'bottom' }, label: 'Minimum height\nvertical alignment\nmay be bottom', x: 300, y: 200 }
+  ];
+
+  var edges = [
+    { from: 100, to: 210, label: "unconstrained to minimum width"},
+    { from: 210, to: 211, label: "more minimum width"},
+    { from: 100, to: 220, label: "unconstrained to maximum width"},
+    { from: 220, to: 221, label: "more maximum width"},
+    { from: 210, to: 200, label: "minimum width to fixed width"},
+    { from: 220, to: 200, label: "maximum width to fixed width"},
+    { from: 200, to: 201, label: "more fixed width"},
+    { from: 100, to: 300, label: "unconstrained to minimum height"},
+    { from: 300, to: 301, label: "more minimum height"},
+    { from: 100, to: 400, label: "unconstrained to top valign"},
+    { from: 400, to: 401, label: "top valign to middle valign"},
+    { from: 401, to: 402, label: "middle valign to bottom valign"},
+  ];
+
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges: {
+      font: {
+        size: 12
+      },
+      widthConstraint: {
+        maximum: 90
+      }
+    },
+    nodes: {
+      shape: 'box',
+      margin: 10
+    },
+    physics: {
+      enabled: false
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>

examples/network/other/chosen.html

@@ -0,0 +1,466 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Chosen Elements</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 900px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    code {
+      font-size: 14px;
+      background: #dddddd;
+    }
+    p {
+      max-width: 600px;
+    }
+    .indented {
+      margin-left: 30px;
+    }
+    .sep {
+      height: 1px;
+      width: 35%;
+      margin-left: 40px;
+      background-color: #dddddd;
+    }
+  </style>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<p>When a node or edge is selected or hovered its visible characteristics can be changed.</p>
+
+<div id="mynetwork"></div>
+
+<p>In this network, an element (node, edge or label) will change a characteristic when hovered, and it will be locked in when selected.
+   This is managed by setting up a 'chosen' function that will be called when the element containing the function is chosen.
+   These functions may be set on nodes, edges and labels, at the individual or group level.</p>
+
+<p>All states (unselected, hover-over-unselected, selected, and hover-over selected) may be handled as needed by the application using vis, as the select and hover states are passed to the chosen function when called.
+   Additionally, the id of the element is passed to allow context-specific characteristic adjustment on select or hover as needed.</p>
+
+<p><i>It should be noted that the characteristics which might affect the position of elements have been left out on purpose.
+   While it might be interesting to make them changeable, this is problematic on hovering.
+   Consider that the user hovers over an object.
+   If it changed characteristics that moved it outside of the hover-distance, it would then no longer be hovering.
+   So it would be moved back to its original prosition, within the hover-distance and then again be hovering over the object.
+   This hysteresis loop is kept from occurring by leaving out the characteristics that could cause it.
+   Some seemingly innocuous changes (such as resizing a node's label on hover that would in turn cause the node to resize and move out of hover-distance) may still cause hysteresis, but with care they should be avoidable.</i></p>
+
+
+<script type="text/javascript">
+
+  var changeChosenLabelColor =
+    function(ctx, values, id) {
+      values.color = "#ff0000";
+    }
+
+  var changeChosenLabelSize =
+    function(ctx, values, id) {
+      values.size += 1;
+    }
+
+  var changeChosenLabelFace =
+    function(ctx, values, id) {
+      values.face = "serif";
+    }
+
+  var changeChosenLabelMod =
+    function(ctx, values, id) {
+      values.mod = "bold italic";
+    }
+
+  var changeChosenLabelStrokeWidth =
+    function(ctx, values, id) {
+      values.strokeWidth = 5;
+    }
+
+  var changeChosenLabelStrokeColor =
+    function(ctx, values, id) {
+      values.strokeColor = "#00ff00";
+    }
+
+  var changeChosenNodeColor =
+    function(values, id, selected, hovering) {
+      values.color = "#ffdd88";
+    }
+
+  var changeChosenNodeBorderWidth =
+    function(values, id, selected, hovering) {
+      values.borderWidth = 3;
+    }
+
+  var changeChosenNodeBorderColor =
+    function(values, id, selected, hovering) {
+      values.borderColor = "#ff0000";
+    }
+
+  var changeChosenNodeSize =
+    function(values, id, selected, hovering) {
+      values.size = 30;
+    }
+
+  var changeChosenNodeBorderDashes =
+    function(values, id, selected, hovering) {
+      values.borderDashes = [ 10, 10 ];
+    }
+
+  var changeChosenNodeBorderRadius =
+    function(values, id, selected, hovering) {
+      values.borderRadius = 15;
+    }
+
+  var changeChosenNodeShadow =
+    function(values, id, selected, hovering) {
+      values.shadow = true;
+    }
+
+  var changeChosenNodeShadowColor =
+    function(values, id, selected, hovering) {
+      values.shadowColor = "#ff0000";
+    }
+
+  var changeChosenNodeShadowSize =
+    function(values, id, selected, hovering) {
+      values.shadowSize = 30;
+    }
+
+  var changeChosenNodeShadowX =
+    function(values, id, selected, hovering) {
+      values.shadowX = -5;
+    }
+
+  var changeChosenNodeShadowY =
+    function(values, id, selected, hovering) {
+      values.shadowY = -5;
+    }
+
+  var changeChosenEdgeToArrow =
+    function(values, id, selected, hovering) {
+      values.toArrow = true;
+    }
+
+  var changeChosenEdgeToArrowScale =
+    function(values, id, selected, hovering) {
+      values.toArrowScale = 2;
+    }
+
+  var changeChosenEdgeToArrowType =
+    function(values, id, selected, hovering) {
+      values.toArrowType = "circle";
+    }
+
+  var changeChosenEdgeMiddleArrow =
+    function(values, id, selected, hovering) {
+      values.middleArrow = true;
+    }
+
+  var changeChosenEdgeMiddleArrowScale =
+    function(values, id, selected, hovering) {
+      values.middleArrowScale = 2;
+    }
+
+  var changeChosenEdgeMiddleArrowType =
+    function(values, id, selected, hovering) {
+      values.middleArrowType = "circle";
+    }
+
+  var changeChosenEdgeFromArrow =
+    function(values, id, selected, hovering) {
+      values.fromArrow = true;
+    }
+
+  var changeChosenEdgeFromArrowScale =
+    function(values, id, selected, hovering) {
+      values.fromArrowScale = 2;
+    }
+
+  var changeChosenEdgeFromArrowType =
+    function(values, id, selected, hovering) {
+      values.fromArrowType = "circle";
+    }
+
+  var changeChosenEdgeArrowStrikethrough =
+    function(values, id, selected, hovering) {
+      values.arrowStrikethrough = false;
+    }
+
+  var changeChosenEdgeColor =
+    function(values, id, selected, hovering) {
+      values.color = "#00ff00";
+    }
+
+  var changeChosenEdgeInheritsColor =
+    function(values, id, selected, hovering) {
+      values.inheritsColor = "both";
+    }
+
+  var changeChosenEdgeOpacity =
+    function(values, id, selected, hovering) {
+      values.opacity = 0.25;
+    }
+
+  var changeChosenEdgeHidden =
+    function(values, id, selected, hovering) {
+      values.hidden = true;
+    }
+
+  var changeChosenEdgeShadow =
+    function(values, id, selected, hovering) {
+      values.shadow = true;
+    }
+
+  var changeChosenEdgeShadowColor =
+    function(values, id, selected, hovering) {
+      values.shadowColor = "#00ffff";
+    }
+
+  var changeChosenEdgeShadowSize =
+    function(values, id, selected, hovering) {
+      values.shadowSize = 20;
+    }
+
+  var changeChosenEdgeShadowX =
+    function(values, id, selected, hovering) {
+      values.shadowX = -5;
+    }
+
+  var changeChosenEdgeShadowY =
+    function(values, id, selected, hovering) {
+      values.shadowY = -5;
+    }
+
+  var changeChosenEdgeWidth =
+    function(values, id, selected, hovering) {
+      values.width = 5;
+    }
+
+  var changeChosenEdgeDashes =
+    function(values, id, selected, hovering) {
+      values.dashes = [10, 10];
+    }
+
+  var nodes = [
+    { id: 1000, label: "label does not change",
+                x: -400, y: -300,
+                chosen: { label: false, node: false } },
+    { id: 1010, label: "label default settings",
+                x: -400, y: -225,
+                chosen: { label: true, node: false } },
+    { id: 1020, label: "label changes color",
+                x: -400, y: -150,
+                chosen: { label: changeChosenLabelColor, node: false } },
+    { id: 1030, label: "label changes size",
+                x: -400, y: -75,
+                chosen: { label: changeChosenLabelSize, node: false } },
+    { id: 1040, label: "label changes face",
+                x: -400, y: 0,
+                chosen: { label: changeChosenLabelFace, node: false } },
+    { id: 1050, label: "label changes modifier",
+                x: -400, y: 75,
+                chosen: { label: changeChosenLabelMod, node: false } },
+    { id: 1060, label: "label changes stokeWidth",
+                x: -400, y: 150,
+                chosen: { label: changeChosenLabelStrokeWidth, node: false } },
+    { id: 1070, label: "label changes stokeColor",
+                x: -400, y: 225, font: { strokeWidth: 2 },
+                chosen: { label: changeChosenLabelStrokeColor, node: false } },
+
+    { id: 2000, label: "node does not change",
+                x: 0, y: -300,
+                chosen: { label: false, node: false } },
+    { id: 2010, label: "node default settings",
+                x: 0, y: -225,
+                chosen: { label: false, node: true } },
+    { id: 2020, label: "node changes color",
+                x: 0, y: -150,
+                chosen: { label: false, node: changeChosenNodeColor } },
+    { id: 2030, label: "node changes borderWidth",
+                x: 0, y: -75,
+                chosen: { label: false, node: changeChosenNodeBorderWidth } },
+    { id: 2040, label: "node changes borderColor",
+                x: 0, y: 0,
+                chosen: { label: false, node: changeChosenNodeBorderColor } },
+    { id: 2050, label: "shaped nodes change size",
+                x: 0, y: 70, shape: 'star',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2051, x: -60, y: 70, shape: 'dot',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2052, x: -120, y: 70, shape: 'diamond',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2053, x: 60, y: 70, shape: 'square',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2054, x: 120, y: 70, shape: 'triangle',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2055, x: 165, y: 70, shape: 'triangleDown',
+                chosen: { label: false, node: changeChosenNodeSize } },
+    { id: 2060, label: "node changes borderDashes",
+                x: 0, y: 150,
+                chosen: { label: false, node: changeChosenNodeBorderDashes } },
+    { id: 2070, label: "node changes borderRadius",
+                x: 0, y: 225,
+                chosen: { label: false, node: changeChosenNodeBorderRadius } },
+    { id: 2080, label: "node changes shadow",
+                x: 0, y: 300,
+                chosen: { label: false, node: changeChosenNodeShadow } },
+    { id: 2090, label: "node changes shadowColor",
+                x: 0, y: 375, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowColor } },
+    { id: 2100, label: "node changes shadowSize",
+                x: 0, y: 450, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowSize } },
+    { id: 2110, label: "node changes shadowX",
+                x: 0, y: 525, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowX } },
+    { id: 2120, label: "node changes shadowY",
+                x: 0, y: 600, shadow: true,
+                chosen: { label: false, node: changeChosenNodeShadowY } },
+
+    { id: 3000, x: 275, y: -310, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3001, x: 525, y: -210, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3010, x: 275, y: -235, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3011, x: 525, y: -135, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3020, x: 275, y: -160, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3021, x: 525, y:  -60, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3030, x: 275, y:  -85, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3031, x: 525, y:   15, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3040, x: 275, y:  -10, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3041, x: 525, y:   90, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3050, x: 275, y:   65, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3051, x: 525, y:  165, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3060, x: 275, y:  140, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3061, x: 525, y:  240, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3070, x: 275, y:  215, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3071, x: 525, y:  315, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3080, x: 275, y:  290, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0},
+    { id: 3081, x: 525, y:  390, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3090, x: 275, y:  365, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3091, x: 525, y:  465, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3100, x: 275, y:  440, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3101, x: 525, y:  540, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3110, x: 275, y:  515, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3111, x: 525, y:  615, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3120, x: 575, y: -310, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3121, x: 825, y: -210, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3130, x: 575, y: -235, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3131, x: 825, y: -135, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3140, x: 575, y: -160, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3141, x: 825, y:  -60, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3150, x: 575, y:  -85, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3151, x: 825, y:   15, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3160, x: 575, y:  -10, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3161, x: 825, y:   90, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3170, x: 575, y:   65, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3171, x: 825, y:  165, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3180, x: 575, y:  140, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3181, x: 825, y:  240, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3190, x: 575, y:  215, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3191, x: 825, y:  315, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3200, x: 575, y:  290, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3201, x: 825, y:  390, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3210, x: 575, y:  365, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3211, x: 825, y:  465, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+    { id: 3220, x: 575, y:  440, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
+    { id: 3221, x: 825, y:  540, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
+  ];
+
+  var edges = [
+    { id: 4000, from: 3000, to: 3001, label: "edge does not change",
+                chosen: false },
+    { id: 4010, from: 3010, to: 3011, label: "edge has default settings",
+                chosen: { label: false, edge: true } },
+    { id: 4020, from: 3020, to: 3021, label: "edge changes toArrow",
+                chosen: { label: false, edge: changeChosenEdgeToArrow } },
+    { id: 4030, from: 3030, to: 3031, label: "edge changes toArrowScale",
+                arrows: { to: true },
+                chosen: { label: false, edge: changeChosenEdgeToArrowScale } },
+    { id: 4040, from: 3040, to: 3041, label: "edge changes toArrowType",
+                arrows: { to: true },
+                chosen: { label: false, edge: changeChosenEdgeToArrowType } },
+    { id: 4050, from: 3050, to: 3051, label: "edge changes middleArrow",
+                chosen: { label: false, edge: changeChosenEdgeMiddleArrow } },
+    { id: 4060, from: 3060, to: 3061, label: "edge changes middleArrowScale",
+                arrows: { middle: true },
+                chosen: { label: false, edge: changeChosenEdgeMiddleArrowScale } },
+    { id: 4070, from: 3070, to: 3071, label: "edge changes middleArrowType",
+                arrows: { middle: true },
+                chosen: { label: false, edge: changeChosenEdgeMiddleArrowType } },
+    { id: 4080, from: 3080, to: 3081, label: "edge changes fromArrow",
+                chosen: { label: false, edge: changeChosenEdgeFromArrow } },
+    { id: 4090, from: 3090, to: 3091, label: "edge changes fromArrowScale",
+                arrows: { from: true },
+                chosen: { label: false, edge: changeChosenEdgeFromArrowScale } },
+    { id: 4100, from: 3100, to: 3101, label: "edge changes fromArrowType",
+                arrows: { from: true },
+                chosen: { label: false, edge: changeChosenEdgeFromArrowType } },
+    { id: 4110, from: 3110, to: 3111, label: "edge changes arrowStrikethrough",
+                arrows: { to: true, from: true }, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeArrowStrikethrough } },
+    { id: 4120, from: 3120, to: 3121, label: "edge changes color",
+                chosen: { label: false, edge: changeChosenEdgeColor } },
+    { id: 4130, from: 3130, to: 3131, label: "edge inherits color",
+                chosen: { label: false, edge: changeChosenEdgeInheritsColor } },
+    { id: 4140, from: 3140, to: 3141, label: "edge changes opacity",
+                chosen: { label: false, edge: changeChosenEdgeOpacity } },
+    { id: 4150, from: 3150, to: 3151, label: "edge changes hidden",
+                chosen: { label: false, edge: changeChosenEdgeHidden } },
+    { id: 4160, from: 3160, to: 3161, label: "edge changes shadow",
+                width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadow } },
+    { id: 4170, from: 3170, to: 3171, label: "edge changes shadowColor",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowColor } },
+    { id: 4180, from: 3180, to: 3181, label: "edge changes shadowSize",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowSize } },
+    { id: 4190, from: 3190, to: 3191, label: "edge changes shadowX",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowX } },
+    { id: 4200, from: 3200, to: 3201, label: "edge changes shadowY",
+                shadow: true, width: 7,
+                chosen: { label: false, edge: changeChosenEdgeShadowY } },
+    { id: 4210, from: 3210, to: 3211, label: "edge changes width",
+                chosen: { label: false, edge: changeChosenEdgeWidth } },
+    { id: 4220, from: 3220, to: 3221, label: "edge changes dashes",
+                chosen: { label: false, edge: changeChosenEdgeDashes } },
+  ];
+
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges: {
+      font: {
+        size: 16
+      },
+      selfReferenceSize: 30
+    },
+    nodes: {
+      shape: 'box',
+      widthConstraint: 250,
+      color: "#cccccc",
+      margin: 10,
+      font: {
+        size: 16
+      }
+    },
+    physics: {
+      enabled: false
+    },
+    interaction: {
+      hover: true
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+
+</body>
+</html>

examples/network/other/cursorChange.html

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Cursor Change</title>
+
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+<body>
+
+<p>Here is a simple network with nodes and edges that demonstrates how to change the cursor on hover for nodes and edges.</p>
+<p>Use the dropdowns and button below to change the cursor type bound to an event.</p>
+<div>
+Event Type -
+<select id="eventType">
+	<option value="hoverNode">hoverNode</option>
+	<option value="blurNode">blurNode</option>
+	<option value="hoverEdge">hoverEdge</option>
+	<option value="blurEdge">blurEdge</option>
+	<option value="dragStart">dragStart</option>
+	<option value="dragging">dragging</option>
+	<option value="dragEnd">dragEnd</option>
+</select>
+&nbsp;
+Cursor Type -
+<select id="cursorType">
+	<option value="auto">auto</option>
+	<option value="default">default</option>
+	<option value="context-menu">context-menu</option>
+	<option value="help">help</option>
+	<option value="pointer">pointer</option>
+	<option value="progress">progress</option>
+	<option value="wait">wait</option>
+	<option value="cell">cell</option>
+	<option value="crosshair">crosshair</option>
+	<option value="text">text</option>
+	<option value="vertical-text">vertical-text</option>
+	<option value="alias">alias</option>
+	<option value="copy">copy</option>
+	<option value="move">move</option>
+	<option value="no-drop">no-drop</option>
+	<option value="not-allowed">not-allowed</option>
+	<option value="all-scroll">all-scroll</option>
+	<option value="col-resize">col-resize</option>
+	<option value="row-resize">row-resize</option>
+	<option value="n-resize">n-resize</option>
+	<option value="e-resize">e-resize</option>
+	<option value="w-resize">w-resize</option>
+	<option value="s-resize">s-resize</option>
+	<option value="ne-resize">ne-resize</option>
+	<option value="nw-resize">nw-resize</option>
+	<option value="se-resize">se-resize</option>
+	<option value="sw-resize">sw-resize</option>
+	<option value="ew-resize">ew-resize</option>
+	<option value="ns-resize">ns-resize</option>
+	<option value="nesw-resize">nesw-resize</option>
+	<option value="nwse-resize">nwse-resize</option>
+	<option value="zoom-in">zoom-in</option>
+	<option value="zoom-out">zoom-out</option>
+	<option value="grab">grab</option>
+	<option value="grabbing">grabbing</option>
+</select>
+&nbsp;
+
+<button onClick="changeEventCursor(document.getElementById('eventType').value,document.getElementById('cursorType').value);">Change Cursor for Event</button>
+</div>
+<div id="mynetwork"></div>
+
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {id: 1, label: 'Node 1'},
+    {id: 2, label: 'Node 2'},
+    {id: 3, label: 'Node 3'},
+    {id: 4, label: 'Node 4'},
+    {id: 5, label: 'Node 5'}
+  ]);
+
+  // create an array with edges
+  var edges = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ]);
+
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {interaction:{hover:true}};
+  var network = new vis.Network(container, data, options);
+
+  //Get the canvas HTML element
+  var networkCanvas = document.getElementById("mynetwork").getElementsByTagName("canvas")[0]
+  function changeCursor(newCursorStyle){
+	networkCanvas.style.cursor = newCursorStyle;
+  }
+  function changeEventCursor(eventName,cursorType){ 
+    network.on(eventName, function() {
+      changeCursor(cursorType);
+    });
+  }
+  network.on('hoverNode', function () {
+	changeCursor('grab');
+  });
+  network.on('blurNode', function () {
+	changeCursor('default');
+  });
+  network.on('hoverEdge', function () {
+	changeCursor('grab');
+  });
+  network.on('blurEdge', function () {
+	changeCursor('default');
+  });
+  network.on('dragStart', function () {
+	changeCursor('grabbing');
+  });
+  network.on('dragging', function () {
+	changeCursor('grabbing');
+  });
+  network.on('dragEnd', function () {
+	changeCursor('grab');
+  });
+
+</script>
+
+</body>
+</html>
+

examples/network/other/manipulationEditEdgeNoDrag.html

@@ -0,0 +1,254 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>Network | Manipulation | Edit Edge Without Drag</title>
+
+  <style type="text/css">
+    body, select {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      position:relative;
+      width: 800px;
+      height: 600px;
+      border: 1px solid lightgray;
+    }
+    table.legend_table {
+      font-size: 11px;
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+    }
+    table.legend_table,td {
+      border-width:1px;
+      border-color:#d3d3d3;
+      border-style:solid;
+      padding: 2px;
+    }
+    div.table_content {
+      width:80px;
+      text-align:center;
+    }
+    div.table_description {
+      width:100px;
+    }
+
+    #operation {
+      font-size:28px;
+    }
+    #node-popUp {
+      display:none;
+      position:absolute;
+      top:350px;
+      left:170px;
+      z-index:299;
+      width:250px;
+      height:120px;
+      background-color: #f9f9f9;
+      border-style:solid;
+      border-width:3px;
+      border-color: #5394ed;
+      padding:10px;
+      text-align: center;
+    }
+    #edge-popUp {
+      display:none;
+      position:absolute;
+      top:350px;
+      left:170px;
+      z-index:299;
+      width:250px;
+      height:90px;
+      background-color: #f9f9f9;
+      border-style:solid;
+      border-width:3px;
+      border-color: #5394ed;
+      padding:10px;
+      text-align: center;
+    }
+  </style>
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    // randomly create some nodes and edges
+    var data = getScaleFreeNetwork(25);
+    var seed = 2;
+
+    function setDefaultLocale() {
+      var defaultLocal = navigator.language;
+      var select = document.getElementById('locale');
+      select.selectedIndex = 0; // set fallback value
+      for (var i = 0, j = select.options.length; i < j; ++i) {
+        if (select.options[i].getAttribute('value') === defaultLocal) {
+          select.selectedIndex = i;
+          break;
+        }
+      }
+    }
+
+    function destroy() {
+      if (network !== null) {
+        network.destroy();
+        network = null;
+      }
+    }
+
+    function draw() {
+      destroy();
+      nodes = [];
+      edges = [];
+
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var options = {
+        layout: {randomSeed:seed}, // just to make sure the layout is the same when the locale is changed
+        locale: document.getElementById('locale').value,
+        manipulation: {
+          addNode: function (data, callback) {
+            // filling in the popup DOM elements
+            document.getElementById('node-operation').innerHTML = "Add Node";
+            editNode(data, callback);
+          },
+          editNode: function (data, callback) {
+            // filling in the popup DOM elements
+            document.getElementById('node-operation').innerHTML = "Edit Node";
+            editNode(data, callback);
+          },
+          addEdge: function (data, callback) {
+            if (data.from == data.to) {
+              var r = confirm("Do you want to connect the node to itself?");
+              if (r != true) {
+                callback(null);
+                return;
+              }
+            }
+            document.getElementById('edge-operation').innerHTML = "Add Edge";
+            editEdgeWithoutDrag(data, callback);
+          },
+          editEdge: {
+            editWithoutDrag: function(data, callback) {
+              document.getElementById('edge-operation').innerHTML = "Edit Edge";
+              editEdgeWithoutDrag(data,callback);
+            }
+          }
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+
+    function editNode(data, callback) {
+      document.getElementById('node-label').value = data.label;
+      document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);
+      document.getElementById('node-cancelButton').onclick = clearNodePopUp.bind();
+      document.getElementById('node-popUp').style.display = 'block';
+    }
+
+    function clearNodePopUp() {
+      document.getElementById('node-saveButton').onclick = null;
+      document.getElementById('node-cancelButton').onclick = null;
+      document.getElementById('node-popUp').style.display = 'none';
+    }
+
+    function cancelNodeEdit(callback) {
+      clearNodePopUp();
+      callback(null);
+    }
+
+    function saveNodeData(data, callback) {
+      data.label = document.getElementById('node-label').value;
+      clearNodePopUp();
+      callback(data);
+    }
+
+    function editEdgeWithoutDrag(data, callback) {
+      // filling in the popup DOM elements
+      document.getElementById('edge-label').value = data.label;
+      document.getElementById('edge-saveButton').onclick = saveEdgeData.bind(this, data, callback);
+      document.getElementById('edge-cancelButton').onclick = cancelEdgeEdit.bind(this,callback);
+      document.getElementById('edge-popUp').style.display = 'block';
+    }
+
+    function clearEdgePopUp() {
+      document.getElementById('edge-saveButton').onclick = null;
+      document.getElementById('edge-cancelButton').onclick = null;
+      document.getElementById('edge-popUp').style.display = 'none';
+    }
+
+    function cancelEdgeEdit(callback) {
+      clearEdgePopUp();
+      callback(null);
+    }
+
+    function saveEdgeData(data, callback) {
+      if (typeof data.to === 'object')
+        data.to = data.to.id
+      if (typeof data.from === 'object')
+        data.from = data.from.id
+      data.label = document.getElementById('edge-label').value;
+      clearEdgePopUp();
+      callback(data);
+    }
+
+    function init() {
+      setDefaultLocale();
+      draw();
+    }
+
+  </script>
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body onload="init();">
+<h2>Editing the nodes and edges-without-drag (localized)</h2>
+<p style="width: 700px; font-size:14px; text-align: justify;">
+  The localization is only relevant to the manipulation buttons.
+</p>
+
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale" onchange="draw();">
+    <option value="en">en</option>
+    <option value="de">de</option>
+    <option value="es">es</option>
+    <option value="it">it</option>
+    <option value="nl">nl</option>
+    <option value="pt-br">pt</option>
+    <option value="ru">ru</option>
+  </select>
+</p>
+
+<div id="node-popUp">
+  <span id="node-operation">node</span> <br>
+  <table style="margin:auto;">
+    <tr>
+      <td>id</td><td><input id="node-id" value="new value" /></td>
+    </tr>
+    <tr>
+      <td>label</td><td><input id="node-label" value="new value" /></td>
+    </tr>
+  </table>
+  <input type="button" value="save" id="node-saveButton" />
+  <input type="button" value="cancel" id="node-cancelButton" />
+</div>
+
+<div id="edge-popUp">
+  <span id="edge-operation">edge</span> <br>
+  <table style="margin:auto;">
+    <tr>
+      <td>label</td><td><input id="edge-label" value="new value" /></td>
+    </tr></table>
+  <input type="button" value="save" id="edge-saveButton" />
+  <input type="button" value="cancel" id="edge-cancelButton" />
+</div>
+
+<br />
+<div id="mynetwork"></div>
+
+</body>
+</html>

examples/network/other/onLoadAnimation.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+  <title>Network | On Load Animation</title>
+  <script type="text/javascript" src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+  </style>
+</head>
+<body>
+  <h2>Vis.js network onLoad animation</h2>
+  <p>easeIn functions accelerate from zero velocity.</p> 
+  <p>easeOut functions decelerate to zero velocity.</p>
+  <p>easeInOut functions accelerate from zero till halfway then after the halfway point they decrease until zero.</p>
+  <div>
+  Onload Animation Easing Function - 
+    <select id="easingFunction">
+	  <option value="linear">linear</option>
+	  <option value="easeInQuad">easeInQuad</option>
+	  <option value="easeOutQuad">easeOutQuad</option>
+	  <option value="easeInOutQuad">easeInOutQuad</option>
+	  <option value="easeInCubic">easeInCubic</option>
+	  <option value="easeOutCubic">easeOutCubic</option>
+	  <option value="easeInOutCubic">easeInOutCubic</option>
+	  <option value="easeInQuart">easeInQuart</option>
+	  <option value="easeOutQuart">easeOutQuart</option>
+	  <option value="easeInOutQuart">easeInOutQuart</option>
+	  <option value="easeInQuint">easeInQuint</option>
+	  <option value="easeOutQuint">easeOutQuint</option>
+	  <option value="easeInOutQuint">easeInOutQuint</option>
+    </select>
+    <button onClick="createNetwork(document.getElementById('easingFunction').value);">Demo Easing Function</button>
+  </div>
+  <p>For more information on easing functions check out <a href="http://easings.net/">easings.net</a></p>
+  <div id="mynetwork"></div>
+  <script type="text/javascript">
+  document.getElementById("easingFunction").selectedIndex = 0;
+  function createNetwork(easingType) {
+    var nodes = new vis.DataSet([
+      {id: 1, label: 'Node 1'},
+      {id: 2, label: 'Node 2'},
+      {id: 3, label: 'Node 3'},
+      {id: 4, label: 'Node 4'},
+      {id: 5, label: 'Node 5'}
+    ]);
+
+    var edges = new vis.DataSet([
+      {from: 1, to: 3},
+      {from: 1, to: 2},
+      {from: 2, to: 4},
+      {from: 2, to: 5}
+    ]);
+
+    var container = document.getElementById('mynetwork');
+    var data = {
+      nodes: nodes,
+      edges: edges
+    };
+    var options = {};
+    var network = new vis.Network(container, data, options); 
+    network.once("beforeDrawing", function() {
+      network.focus(2, {
+        scale: 12
+      });
+    });
+    network.once("afterDrawing", function() {
+      network.fit({
+        animation: {
+          duration: 3000,
+          easingFunction: easingType
+        }
+      });
+    });
+  }
+  createNetwork("linear");
+  </script>
+</body>
+</html>
+

examples/timeline/editing/individualEditableItems.html

@@ -34,16 +34,21 @@
 <div id="visualization"></div>
 
 <script>
+  // create groups to highligh groupUpdate
+  var groups = new vis.DataSet([
+    {id: 1, content: 'Group 1'},
+    {id: 2, content: 'Group 2'}
+  ]);
   // create a DataSet with items
   var items = new vis.DataSet([
-    {id: 1, content: 'Editable', editable: true, start: '2010-08-23'},
-    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'},
-    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'},
-    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'},
-    {id: 5, content: 'Editable', editable: true, start: '2010-08-28'},
-    {id: 6, content: 'Read-only', editable: false, start: '2010-08-29'},
-    {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'},
-    {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'}
+    {id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
+    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
+    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
+    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
+    {id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
+    {id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
+    {id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
+    {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
   ]);
 
   var container = document.getElementById('visualization');
@@ -51,7 +56,7 @@
     editable: true   // default for all items
   };
 
-  var timeline = new vis.Timeline(container, items, options);
+  var timeline = new vis.Timeline(container, items, groups, options);
 
 </script>
 </body>

examples/timeline/editing/overrideEditingItems.html

@@ -0,0 +1,99 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Individual editable items</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+
+    div.vis-editable,
+    div.vis-editable.vis-selected {
+      /* custom styling for editable items... */
+    }
+
+    div.vis-readonly,
+    div.vis-readonly.vis-selected {
+      /* custom styling for readonly items... */
+      background-color: #ff4500;
+      border-color: red;
+      color: white;
+    }
+  </style>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body>
+
+<p>Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable</p>
+
+<div id="visualization"></div>
+<p>
+<form>
+Timeline.editable = {</br>
+<input name="add" type="checkbox" checked>add</input></br>
+<input name="remove" type="checkbox" checked>remove</input></br>
+<input name="updateGroup" type="checkbox">updateGroup</input></br>
+<input name="updateTime" type="checkbox" checked>updateTime</input><br>
+<input name="overrideItems" type="checkbox">overrideItems</input><br>
+}
+</form>
+</p>
+<script>
+  // create a DataSet with items
+  var items = new vis.DataSet([
+    {id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
+    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
+    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
+    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
+    {id: 5, content: 'Editable', editable: true, start: '2010-08-28', group: 1},
+    {id: 6, content: 'Read-only', editable: false, start: '2010-08-29', group: 2},
+    {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03', group: 1},
+    {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00', group: 2},
+    {id: 9, content: 'Default', start: '2010-09-04', group: 1},
+    {id: 10, content: 'Default', start: '2010-08-24', group: 2}
+  ]);
+
+  var groups = [
+    {
+      id: 1,
+      content: 'group 1'
+    },
+    {
+      id: 2,
+      content: 'group 2'
+    }
+  ]
+
+  var container = document.getElementById('visualization');
+  var options = {
+    editable: {
+      add: true,
+      remove: true,
+      updateGroup: false,
+      updateTime: true,
+      overrideItems: false
+    }  // default for all items
+  };
+
+  var timeline = new vis.Timeline(container, items, groups, options);
+
+  var updateEditOptions = function(e){
+    var changedOption = e.target.name;
+    var options = { editable: { } };
+    options.editable[changedOption] = e.target.checked;
+    timeline.setOptions(options);
+  };
+
+  var cbs = document.getElementsByTagName("input");
+  [].forEach.call(cbs, function(cb){
+    cb.onchange = updateEditOptions;
+  });
+
+</script>
+</body>
+</html>

examples/timeline/groups/groupsEditable.html

@@ -28,7 +28,8 @@
 </head>
 <body>
 <p>
-  This example demonstrates editable groups (for now only reordering).
+  This example demonstrates editable groups (reordering and hiding).
+  <button onclick="showAllGroups()">Restore Hidden</button>
 </p>
 <div id="visualization"></div>
 
@@ -55,7 +56,14 @@
 	{"content": "WEC", "id": "WEC", "value": 18, className:'endurance'},
 	{"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'}
   ]);
-  
+
+  // function to make all groups visible again
+  function showAllGroups(){
+    groups.forEach(function(group){
+      groups.update({id: group.id, visible: true});
+    })
+  };
+
   // create a dataset with items
   // note that months are zero-based in the JavaScript Date object, so month 3 is April
   var items = new vis.DataSet([
@@ -299,6 +307,20 @@
     	a.value = b.value;
     	b.value = v;
     },
+    groupTemplate: function(group){
+      var container = document.createElement('div');
+      var label = document.createElement('span');
+      label.innerHTML = group.content + ' ';
+      container.insertAdjacentElement('afterBegin',label);
+      var hide = document.createElement('button');
+      hide.innerHTML = 'hide';
+      hide.style.fontSize = 'small';
+      hide.addEventListener('click',function(){
+        groups.update({id: group.id, visible: false});
+      });
+      container.insertAdjacentElement('beforeEnd',hide);
+      return container;
+    },
     orientation: 'both',
     editable: true,
     groupEditable: true,

examples/timeline/groups/nestedGroups.html

@@ -0,0 +1,113 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Nested Groups example</title>
+
+  <style>
+    body, html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+
+    #visualization {
+      box-sizing: border-box;
+      width: 100%;
+      height: 300px;
+    }
+  </style>
+
+  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
+  <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.min.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<p>
+  This example demonstrate using groups. Note that a DataSet is used for both
+  items and groups, allowing to dynamically add, update or remove both items
+  and groups via the DataSet.
+</p>
+<div id="visualization"></div>
+
+<script>
+  var now = moment().minutes(0).seconds(0).milliseconds(0);
+  var itemCount = 60;
+
+  // create a data set with groups
+  var groups = new vis.DataSet();
+
+  groups.add([
+    {
+      id: 1,
+      content: "Lee",
+      nestedGroups: [11,12,13]
+    },
+    {
+      id: 2,
+      content: "invisible group",
+      visible: false
+    },
+    {
+      id: 3,
+      content: "John",
+      nestedGroups: [14],
+      showNested: false
+    },
+    {
+      id: 4,
+      content: "Alson"
+    },
+
+  ]);
+
+  groups.add([
+    {
+      id: 11,
+      content: "cook",
+    },
+    {
+      id: 12,
+      content: "shop",
+    },
+    {
+      id: 13,
+      content: "clean house",
+    },
+    {
+      id: 14,
+      content: "wash dishes",
+    }
+  ]);
+
+  // create a dataset with items
+  var items = new vis.DataSet();
+  var groupIds = groups.getIds();
+    var types = [ 'box', 'point', 'range', 'background']
+  for (var i = 0; i < itemCount; i++) {
+    var start = now.clone().add(Math.random() * 200, 'hours');
+    var end = start.clone().add(2, 'hours');
+    var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
+    var type = types[Math.floor(4 * Math.random())]
+
+    items.add({
+      id: i,
+      group: randomGroupId,
+      content: 'item ' + i,
+      start: start,
+      end: end,
+      type: type
+    });
+  }
+
+  // create visualization
+  var container = document.getElementById('visualization');
+  var options = {
+    groupOrder: 'content'  // groupOrder can be a property name or a sorting function
+  };
+
+  var timeline = new vis.Timeline(container, items, groups, options);
+
+</script>
+</body>
+</html>

examples/timeline/groups/subgroups.html

@@ -1,7 +1,10 @@
 <!DOCTYPE HTML>
 <html>
 <head>
-    <title>Timeline | Background areas</title>
+    <title>Timeline | Subgroups</title>
+
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
 
     <style>
         body, html {
@@ -19,14 +22,11 @@
             border-left: 2px solid green;
         }
     </style>
-
-    <script src="../../../dist/vis.js"></script>
-    <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
-    <script src="../../googleAnalytics.js"></script>
 </head>
 <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>
 
 <div id="visualization"></div>
 
@@ -66,11 +66,16 @@
         start: '2014-01-10',
         end: '2014-02-10',
         editable: true,
-        stack: false
+        stack: false,
+        stackSubgroups: true
     };
 
     var timeline = new vis.Timeline(container, items, groups, options);
 
+    function toggleStackSubgroups() {
+        options.stackSubgroups = !options.stackSubgroups;
+        timeline.setOptions(options);
+    }
 </script>
 </body>
 </html>

examples/timeline/groups/verticalItemsHide.html

@@ -106,12 +106,6 @@
     maxHeight: 400,
     start: new Date(),
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
-    editable: true,
-    margin: {
-      item: 10, // minimal margin between items
-      axis: 5   // minimal margin between items and the axis
-    },
-    orientation: 'top'
   };
 
 

examples/timeline/interaction/eventListeners.html

@@ -15,7 +15,7 @@
 </head>
 <body>
   <p>
-    This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
+    This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
   </p>
   <div id="visualization"></div>
   <p></p>
@@ -57,6 +57,28 @@
       setHoveredItem('none');
     });
 
+    timeline.on('click', function (properties) {
+      logEvent('click', properties);
+    });
+
+    timeline.on('doubleClick', function (properties) {
+      logEvent('doubleClick', properties);
+    });
+
+    timeline.on('contextmenu', function (properties) {
+      logEvent('contextmenu', properties);
+    });
+
+    // other possible events:
+
+    // timeline.on('mouseOver', function (properties) {
+    //   logEvent('mouseOver', properties);
+    // });
+
+    // timeline.on("mouseMove", function(properties) {
+    //   logEvent('mouseMove', properties);
+    // });
+
     items.on('*', function (event, properties) {
       logEvent(event, properties);
     });

examples/timeline/interaction/rollingMode.html

@@ -0,0 +1,45 @@
+<html>
+<head>
+  <title>Timeline | rolling mode Option</title>
+  <meta charset="utf-8">
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <script src="../../googleAnalytics.js"></script>
+</head>
+
+<body>
+
+<h1><i id="icon">&#9974;</i>Timeline rolling mode option</h1>
+
+<div id="mytimeline"></div>
+
+
+<script>
+  var container = document.getElementById('mytimeline');
+
+  var items = new vis.DataSet();
+
+  for (var i = 10; i >= 0; i--) { 
+    items.add({
+        id: i,
+        content: "item " + i,
+        start: new Date(new Date().getTime() + i*100000)
+    });
+  }
+
+  // Configuration for the Timeline
+  // specify options
+  var options = {
+    start: new Date(),
+    end: new Date(new Date().getTime() + 1000000),
+    rollingMode: true
+  };
+
+  // create a Timeline
+  timeline = new vis.Timeline(container, items, null, options);
+
+</script>
+
+</body>
+</html>

examples/timeline/items/expectedVsActualTimesItems.html

@@ -0,0 +1,111 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Timeline | expected vs actual times items</title>
+
+    <script src="../../../dist/vis.js"></script>
+    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+    <style>
+        body, html {
+            font-family: arial, sans-serif;
+            font-size: 11pt;
+        }
+        .vis-item.expected {
+            background-color: transparent;
+            border-style: dashed!important;
+            z-index: 0;
+        }
+        .vis-item.vis-selected {
+            opacity: 0.6;
+        }
+        .vis-item.vis-background.marker {
+            border-left: 2px solid green;
+        }
+    </style>
+</head>
+<body>
+
+<div id="visualization"></div>
+
+<script>
+
+    // create a dataset with items
+    // we specify the type of the fields `start` and `end` here to be strings
+    // containing an ISO date. The fields will be outputted as ISO dates
+    // automatically getting data from the DataSet via items.get().
+    var items = new vis.DataSet({
+        type: { start: 'ISODate', end: 'ISODate' }
+    });
+
+    var groups = new vis.DataSet([
+        {
+            id: 'group1', 
+            content:'group1'
+        }
+    ]);
+
+    // add items to the DataSet
+    items.add([
+        // group 1
+        {
+            id: 'background1',
+            start: '2014-01-21', 
+            end: '2014-01-22', 
+            type: 'background', 
+            group:'group1'
+        },
+
+        // subgroup 1
+        {
+            id: 1, 
+            content: 'item 1 (expected time)', 
+            className: 'expected',
+            start: '2014-01-23 12:00:00', 
+            end: '2014-01-26 12:00:00',
+            group:'group1', 
+            subgroup:'sg_1'
+        },
+        {
+            id: 2, 
+            content: 'item 1 (actual time)', 
+            start: '2014-01-24 12:00:00', 
+            end: '2014-01-27 12:00:00',
+            group:'group1', 
+            subgroup:'sg_1'
+        },
+
+        // subgroup 2
+        {
+            id: 3, 
+            content: 'item 2 (expected time)', 
+            className: 'expected',
+            start: '2014-01-13 12:00:00', 
+            end: '2014-01-16 12:00:00',
+            group:'group1', 
+            subgroup:'sg_2'
+        },
+         {
+            id: 4, 
+            content: 'item 2 (actual time)', 
+            start: '2014-01-14 12:00:00', 
+            end: '2014-01-17 12:00:00',
+            group:'group1', 
+            subgroup:'sg_2'
+        }
+    ]);
+
+    var container = document.getElementById('visualization');
+    var options = {
+        start: '2014-01-10',
+        end: '2014-02-10',
+        editable: true,
+        stack: false,
+        stackSubgroups: false
+    };
+
+    var timeline = new vis.Timeline(container, items, groups, options);
+
+</script>
+</body>
+</html>

examples/timeline/items/tooltip.html

@@ -0,0 +1,84 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Tooltips</title>
+
+  <style type="text/css">
+    body, html {
+      font-family: sans-serif;
+      max-width: 800px;
+    }
+  </style>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+  <script src="../../googleAnalytics.js"></script>
+</head>
+<body>
+
+<h1>Tooltips</h1>
+
+<p>
+  Setting the tooltip in various ways.
+</p>
+
+<div id="tooltips"></div>
+
+<p>
+  The example below has the tooltip follow the mouse.
+</p>
+
+<div id="tooltips-follow"></div>
+
+<p>
+  The example below has the tooltip overflow set to 'cap'. Compare this to the one above,
+  to see how they differ. For the best results, move the cursor to the top right,
+  where the tool-tip is going to overflow out of the timeline.
+</p>
+
+<div id="tooltips-cap"></div>
+
+<script type="text/javascript">
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, content: 'Item 1', start: '2016-01-01', end: '2016-01-02',
+      title: 'Normal text'},
+    {id: 2, content: 'Item 2', start: '2016-01-02', title: '<b>Bold</b>'},
+    {id: 3, content: 'Item 3', start: '2016-01-03', type: 'point',
+      title: '<span style="color: red">Red</span> text'},
+    {id: 4, content: '<h1>HTML</h1> Item', start: '2016-01-03', end: '2016-01-04',
+      title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'}
+  ]);
+
+  // Options
+  var options = {};
+
+  // Timeline object
+  var timelineTooltips = new vis.Timeline(document.getElementById('tooltips'),
+      items, options
+  );
+
+  // Follow options
+  var follow_options = {
+    tooltip: {
+      followMouse: true
+    }
+  };
+
+  var timelineFollow = new vis.Timeline(document.getElementById('tooltips-follow'),
+      items, follow_options);
+
+  // Cap options
+  var cap_options = {
+    tooltip: {
+      followMouse: true,
+      overflowMethod: 'cap'
+    }
+  }
+
+  var timelineCap = new vis.Timeline(document.getElementById('tooltips-cap'),
+      items, cap_options);
+</script>
+
+</body>
+</html>

examples/timeline/items/visibleFrameTemplateContent.html

@@ -0,0 +1,67 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Dynamic Content</title>
+
+  <script src="../../../dist/vis.js"></script>
+  <link href="../../../dist/vis.min.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    .progress-wrapper {
+      background: white;
+      width: 100%;
+      height: 18px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .progress {
+      height: 100%;
+      width: 60%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      background: #63ed63;
+    }
+
+    .progress-label {
+      position: absolute;
+      z-index: 1;
+    }
+
+  </style>
+</head>
+<body>
+
+<div id="myTimeline"></div>
+
+<script type="text/javascript">
+  // DOM element where the Timeline will be attached
+  var container = document.getElementById('myTimeline');
+
+  // Create a DataSet (allows two way data-binding)
+  var items = new vis.DataSet([
+    {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
+    {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
+    {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
+    {id: 4, content: 'item 4 with visibleFramTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFramTemplate: '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">80%<label></div>'
+    }
+  ]);
+
+  // Configuration for the Timeline
+  var options = {
+    visibleFrameTemplate: function(item) {
+      if (item.visibleFramTemplate) {
+        return item.visibleFramTemplate;
+      }
+      var percentage = item.value * 100 + '%';
+      return '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">' + percentage + '<label></div>';
+    } 
+  };
+
+  // Create a Timeline
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>

examples/timeline/other/drag&drop.html

@@ -49,6 +49,10 @@
     <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>
 
@@ -110,12 +114,16 @@
     var item = {
       id: new Date(),
       type: itemType,
-      content: event.target.innerHTML.split('-')[0].trim(),
-      start: new Date(),
-      end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+      content: event.target.innerHTML.split('-')[0].trim()
     };
 
-    event.dataTransfer.setData("text/plain", JSON.stringify(item));
+    var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
+    if (isFixedTimes) {
+      item.start = new Date();
+      item.end = new Date(1000*60*10 + (new Date()).valueOf());
+    }
+
+    event.dataTransfer.setData("text", JSON.stringify(item));
   }
 
   var items = document.querySelectorAll('.items .item');

examples/timeline/other/usingReact.html

@@ -88,10 +88,12 @@
             end: new Date(1000*60*60*24 + (new Date()).valueOf()),
             editable: true,
             template: function (item, element) {
+                if (!item) { return }
                 ReactDOM.unmountComponentAtNode(element);
                 return ReactDOM.render(<ItemTemplate item={item} />, element);
             },
             groupTemplate: function (group, element) {
+                if (!item) { return }
                 ReactDOM.unmountComponentAtNode(element);
                 return ReactDOM.render(<GroupTemplate group={group} />, element);
             }

examples/timeline/other/verticalScroll.html

@@ -52,12 +52,13 @@ zoomKey: 'ctrlKey'
       date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
       var end = new Date(date);
 
+      var orderIndex = order + itemsPerGroup * truck
       items.add({
-        id: order + itemsPerGroup * truck,
+        id: orderIndex,
         group: truck,
         start: start,
         end: end,
-        content: 'Order ' + order
+        content: 'Order ' + orderIndex
       });
     }
   }
@@ -70,15 +71,10 @@ zoomKey: 'ctrlKey'
     maxHeight: 200,
     start: new Date(),
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
-    editable: true,
-    margin: {
-      item: 10, // minimal margin between items
-      axis: 5   // minimal margin between items and the axis
-    },
-    orientation: 'top'
   };
 
   // create a Timeline
+
   options1 = Object.assign({}, options)
   var container1 = document.getElementById('mytimeline1');
   timeline1 = new vis.Timeline(container1, items, groups, options1);

index.html

@@ -29,7 +29,7 @@
 
     <script src="./js/smooth-scroll.min.js"></script>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.0/vis.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.min.js"></script>
 
     <script language="JavaScript">
         smoothScroll.init();
@@ -37,7 +37,7 @@
         function evalLinks() {
             if (typeof vis === 'undefined') {
                 console.log(document.getElementById("linkStatus"));
-                document.getElementById("linkStatus").innerHTML = "Note: The latest version (4.17.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.18.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_css").style.color = "rgb(150,150,150)";
             }
@@ -205,13 +205,13 @@
                     <pre class="prettyprint">bower install vis</pre>
                     <h3>link from cdnjs.com</h3>
                     <p>
-                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.17.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.17.0/vis.min.css" target="_blank">vis.min.css</a> <br>
+                        <a id="cdn_vis" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.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.18.0/vis.min.css" target="_blank">vis.min.css</a> <br>
                         <span id="linkStatus"></span>
                     </p>
                     <h3>download</h3>
                     <p>
-                        <a href="https://github.com/almende/vis/archive/v4.17.0.zip">v4.17.0.zip</a>
+                        <a href="https://github.com/almende/vis/archive/v4.18.0.zip">v4.18.0.zip</a>
                     </p>
                 </div>
             </div>

network_examples.html

@@ -69,20 +69,22 @@
         <a class='exampleLink' href="examples/network/basicUsage.html">basic usage</a><br />
 
     <h3>node styles</h3>
+    <a class='exampleLink' href="examples/network/nodeStyles/circularImages.html">circular images</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/colors.html">colors</a><br />
-    <a class='exampleLink' href="examples/network/nodeStyles/groups.html">groups</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/customGroups.html">custom groups</a><br />
+    <a class='exampleLink' href="examples/network/nodeStyles/groups.html">groups</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/HTMLInNodes.html">HTML in nodes</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/icons.html">icons (Fontawesome and Ionicons)</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/images.html">images</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/imagesWithBorders.html">images with borders</a><br />
-    <a class='exampleLink' href="examples/network/nodeStyles/circularImages.html">circular images</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/shadows.html">node shadows</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/shapes.html">node shapes</a><br />
     <a class='exampleLink' href="examples/network/nodeStyles/shapesWithDashedBorders.html">dashed borders</a><br />
+    <a class='exampleLink' href="examples/network/nodeStyles/widthHeight.html">width height</a><br />
 
     <h3>edge styles</h3>
     <a class='exampleLink' href="examples/network/edgeStyles/arrows.html">arrows (also combined with dashes)</a><br />
+    <a class='exampleLink' href="examples/network/edgeStyles/arrowTypes.html">arrow types</a><br />
     <a class='exampleLink' href="examples/network/edgeStyles/colors.html">different colors</a><br />
     <a class='exampleLink' href="examples/network/edgeStyles/dashes.html">dashes</a><br />
     <a class='exampleLink' href="examples/network/edgeStyles/smooth.html">smooth curves</a><br />
@@ -92,6 +94,8 @@
     <a class='exampleLink' href="examples/network/labels/labelAlignment.html">label alignment (for edges only)</a><br />
     <a class='exampleLink' href="examples/network/labels/labelBackground.html">label background</a><br />
     <a class='exampleLink' href="examples/network/labels/labelColorAndSize.html">colors and sizes</a><br />
+    <a class='exampleLink' href="examples/network/labels/labelMargins.html">label margins</a><br />
+    <a class='exampleLink' href="examples/network/labels/labelMultifont.html">label multible fonts</a><br />
     <a class='exampleLink' href="examples/network/labels/labelStroke.html">label stroke</a><br />
     <a class='exampleLink' href="examples/network/labels/multilineText.html">multiline text</a><br />
 
@@ -115,25 +119,36 @@
     <a class='exampleLink' href="examples/network/data/scalingNodesEdges.html">scaling the nodes and edges with the value.</a><br />
     <a class='exampleLink' href="examples/network/data/scalingNodesEdgesLabels.html">scaling the nodes, edges and labels with the value.</a><br />
 
-    <h3>dynamic configuration interface</h3>
-    <a class='exampleLink' href="examples/network/other/configuration.html">dynamic configuration</a><br />
-
-    <h3>data manipulation interface</h3>
-    <a class='exampleLink' href="examples/network/other/manipulation.html">manipulation interface and localization</a><br />
+    <h3>animation</h3>
+    <a class='exampleLink' href="examples/network/other/animationShowcase.html">animation showcase</a><br />
 
     <h3>clustering</h3>
+    <a class='exampleLink' href="examples/network/other/changingClusteredEdgesNodes.html">changing clustered edges nodes</a><br />
     <a class='exampleLink' href="examples/network/other/clustering.html">clustering possibilities</a><br />
     <a class='exampleLink' href="examples/network/other/clusteringByZoom.html">clustering by zoom</a><br />
+    <a class='exampleLink' href="examples/network/other/clustersOfclusters.html">clusters of clusters</a><br />
+
+    <h3>dynamic configuration interface</h3>
+    <a class='exampleLink' href="examples/network/other/configuration.html">dynamic configuration</a><br />
 
     <h3>physics</h3>
     <a class='exampleLink' href="examples/network/physics/physicsConfiguration.html">physics configuration</a><br />
 
-    <h3>animation</h3>
-    <a class='exampleLink' href="examples/network/other/animationShowcase.html">animation showcase</a><br />
+    <h3>data manipulation interface</h3>
+    <a class='exampleLink' href="examples/network/other/manipulation.html">manipulation interface and localization</a><br />
+    <a class='exampleLink' href="examples/network/other/manipulationEditEdgeNoDrag.html">manipulation edit edge no drag</a><br />
 
     <h3>navigation buttons</h3>
     <a class='exampleLink' href="examples/network/other/navigation.html">navigation buttons and keyboard shortcuts</a><br />
 
+    <h3>misc</h3>
+    <a class='exampleLink' href="examples/network/other/chosen.html">chosen</a><br />
+    <a class='exampleLink' href="examples/network/other/cursorChange.html">cursor change</a><br />
+    <a class='exampleLink' href="examples/network/other/onLoadAnimation.html">onLoad animation</a><br />
+    <a class='exampleLink' href="examples/network/other/performance.html">performance test with scale free network</a><br />
+    <a class='exampleLink' href="examples/network/other/saveAndLoad.html">save and load</a><br />
+
+
     <h3>example applications</h3>
     <a class='exampleLink' href="examples/network/exampleApplications/disassemblerExample.html">disassembler example</a><br />
     <a class='exampleLink' href="examples/network/exampleApplications/lesMiserables.html">les miserables cast</a><br />
@@ -141,8 +156,6 @@
     <a class='exampleLink' href="examples/network/exampleApplications/neighbourhoodHighlight.html">neighbourhood heighlight</a><br />
     <a class='exampleLink' href="examples/network/exampleApplications/nodeLegend.html">using nodes as a legend</a><br />
     <a class='exampleLink' href="examples/network/exampleApplications/worldCupPerformance.html">performance test with the worldcup data</a><br />
-    <a class='exampleLink' href="examples/network/other/performance.html">performance test with scale free network</a><br />
-
 
 </div>
 <br />

timeline_examples.html

@@ -73,6 +73,7 @@
         <a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
         <a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
         <a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
+        <a class='exampleLink' href="examples/timeline/interaction/rollingMode.html">rolling mode</a><br />
         <a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />
 
         <h3>editing</h3>
@@ -80,28 +81,35 @@
         <a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
         <a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
         <a class='exampleLink' href="examples/timeline/editing/individualEditableItems.html">individually editable items</a><br />
+        <a class='exampleLink' href="examples/timeline/editing/overrideEditingItems.html">override editable items</a><br />
+        <a class='exampleLink' href="examples/timeline/editing/tooltipOnItemChange.html">tooltip on item change</a><br />
         <a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />
 
         <h3>items</h3>
-        <a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
-        <a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
         <a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
         <a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
-        <a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
-        <a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />
+        <a class='exampleLink' href="examples/timeline/items/expectedVsActualTimesItems.html">expected vs actual times items</a><br />
+        <a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
+        <a class='exampleLink' href="examples/timeline/items/itemOrdering.html">Item ordering</a><br />
+        <a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
+        <a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow</a><br />
+        <a class='exampleLink' href="examples/timeline/items/tooltip.html">Tooltips</a><br />
+        <a class='exampleLink' href="examples/timeline/items/visibleFrameTemplateContent.html">Dynamic Content</a><br />
 
         <h3>groups</h3>
         <a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
+        <a class='exampleLink' href="examples/timeline/groups/groupsEditable.html">editable groups</a><br />
         <a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
+        <a class='exampleLink' href="examples/timeline/groups/nestedGroups.html">nested groups</a><br />
         <a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />
-        <a class='exampleLink' href="examples/timeline/groups/groupsEditable.html">editable groups</a><br />
+        <a class='exampleLink' href="examples/timeline/groups/verticalItemsHide.html">hide vertical items</a><br />
 
         <h3>styling</h3>
-        <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
-        <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
         <a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
         <a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
         <a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />
+        <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
+        <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
 
         <h3>data handling</h3>
         <a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
@@ -111,13 +119,19 @@
         <a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
         <a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
         <a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
+
+        <a class='exampleLink' href="examples/timeline/other/drag&drop.html">Drag and Drop</a><br />
+        <a class='exampleLink' href="examples/timeline/other/functionLabelFormats.html">label formats function</a><br />
+        <a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">performance of groups</a><br />
         <a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
+        <a class='exampleLink' href="examples/timeline/other/horizontalScroll.html">horizontal scroll</a><br />
         <a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
         <a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
-        <a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">performance of groups</a><br />
-        <a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
         <a class='exampleLink' href="examples/timeline/other/rtl.html">right to left (rtl)</a><br />
         <a class='exampleLink' href="examples/timeline/other/timezone.html">timezone</a><br />
+        <a class='exampleLink' href="examples/timeline/other/usingReact.html">React example</a><br />
+        <a class='exampleLink' href="examples/timeline/other/verticalScroll.html">vertical scroll</a><br />
+        <a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
     </div>
 </div>