Merge remote-tracking branch 'origin/develop' into develop

HISTORY.md

@@ -26,7 +26,8 @@ http://visjs.org
 ### Graph2d & Timeline
 
 - Fixed #858, #872, fixed usage of deprecated `unsubscribe` from DataSet.
-- Fixed #869: add className with id to custom time bars
+- Fixed #869: Add className with id to custom time bars
+- Fixed #877: Added support for metaKey to select multiple items.
 
 
 ## 2015-05-22, version 4.0.0

docs/network/index.html

@@ -247,10 +247,7 @@
             targetNode="eventsDiv"><a>Events</a></li>
         <li role="presentation"
             onclick="toggleTab(this);"
-            targetNode="dotParserDiv"><a>DOT language</a></li>
-        <li role="presentation"
-            onclick="toggleTab(this);"
-            targetNode="gephiDiv"><a>Importing from Gephi</a></li>
+            targetNode="importDiv"><a>Import</a></li>
     </ul>
     <br>
 
@@ -1156,7 +1153,7 @@ var options = {
 
         </table>
     </div>
-    <div id="eventsDiv" class=" hidden">
+    <div id="eventsDiv" class="hidden">
         <h3>All Events</h3>
 
         <p>This is a list of all the events in the public API. They are collected here from all individual modules.</p>
@@ -1174,8 +1171,11 @@ var options = {
             <tr>
                 <td>click</td>
                 <td>
-<pre class="code">
-{
+                    Object
+                </td>
+                <td>Fired when the user clicks the mouse or taps on a touchscreen device. Passes an object with properties structured as:
+
+                <pre class="prettyprint lang-js">{
   nodes: [Array of selected nodeIds],
   edges: [Array of selected edgeIds],
   event: [Object] original click event,
@@ -1186,7 +1186,6 @@ var options = {
 }
 </pre>
                 </td>
-                <td>Fired when the user clicks the mouse or taps on a touchscreen device.</td>
             </tr>
             <tr>
                 <td>doubleClick</td>
@@ -1242,8 +1241,10 @@ var options = {
             </tr>
             <tr>
                 <td>deselectNode</td>
-                <td><pre class="code">
-{
+                <td>Object
+                </td>
+                <td>Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is the list of nodes and edges that were selected before the last user event. Passes an object with properties structured as:
+<pre class="prettyprint lang-js">{
   nodes: [Array of selected nodeIds],
   edges: [Array of selected edgeIds],
   event: [Object] original click event,
@@ -1259,10 +1260,6 @@ var options = {
 }
 </pre>
                 </td>
-                <td>Fired when a node (or nodes) has (or have) been deselected by the user. The previous selection is
-                    the
-                    list of nodes and edges that were selected before the last user event.
-                </td>
             </tr>
             <tr>
                 <td>deselectEdge</td>
@@ -1324,46 +1321,38 @@ var options = {
                 </td>
             <tr>
                 <td>stabilizationProgress</td>
-                <td>
-<pre class="code">
-{
+                <td>Object</td>
+                <td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only occurs in the 'hidden' stabilization. Passes an object with properties structured as:
+
+                    <pre class="prettyprint lang-js">{
   iterations: Number // iterations so far,
   total: Number      // total iterations in options
-}
-</pre>
-                </td>
-                <td>Fired when a multiple of the <code>updateInterval</code> number of iterations is reached. This only
-                    occurs in the 'hidden' stabilization.
+}</pre>
                 </td>
             </tr>
             <tr>
                 <td>stabilizationIterationsDone</td>
                 <td>none</td>
-                <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is
-                    stabilized; it could also mean that the amount of iterations defined in the options has been
-                    reached.
+                <td>Fired when the 'hidden' stabilization finishes. This does not necessarily mean the network is stabilized; it could also mean that the amount of iterations defined in the options has been reached.
                 </td>
             <tr>
                 <td>stabilized</td>
-                <td>
-<pre class="code">
-{
+                <td>Object</td>
+                <td>Fired when the network has stabilized or when the <code>stopSimulation()</code> has been called. The amount of iterations it took could be used to tweak the maximum amount of iterations needed to stabilize the network. Passes an object with properties structured as:
+<pre class="prettyprint lang-js">{
   iterations: Number // iterations it took
-}
-</pre>
-                </td>
-                <td>Fired when the network has stabilized or when the <code>stopSimulation()</code> has been called. The
-                    amount of iterations it took could be used to tweak the maximum amount of iterations needed to
-                    stabilize
-                    the network.
+}</pre>
+
                 </td>
             <tr class="subHeader">
                 <td colspan="3">Event triggered by the canvas.</td>
             </tr>
             <tr>
                 <td>resize</td>
-                <td>
-<pre class="code">
+                <td>Object</td>
+                <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div has changed in size, a setSize() call with new values or a setOptions() with new width and/or height values. Passes an object with properties structured as:
+
+<pre class="prettyprint lang-js">
 {
   width: Number     // the new width  of the canvas
   height: Number    // the new height of the canvas
@@ -1371,13 +1360,6 @@ var options = {
   oldHeight: Number // the old height of the canvas
 }
 </pre>
-                    <ul>
-                    </ul>
-                </td>
-                <td>Fired when the size of the canvas has been resized, either by a redraw call when the container div
-                    has
-                    changed in size, a setSize() call with new values or a setOptions() with new width and/or height
-                    values.
                 </td>
 
             </tr>
@@ -1416,42 +1398,13 @@ var options = {
         </table>
 
     </div>
-    <div id="dotParserDiv" class=" hidden">
-        <p>
-            Network supports data in the
-            <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
-            To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT
-            language
-            into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other
-            options if you'd like.
-        </p>
-
-        <p>
-            Example usage:
-        </p>
-
-<pre class="prettyprint lang-js">
-// provide data in the DOT language
-var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
-var parsedData = vis.network.convertDot(DOTstring);
 
-var data = {
-  nodes: parsedData.nodes,
-  edges: parsedData.edges
-}
+    <div id="importDiv" class=" hidden">
 
-var options = parsedData.options;
+        <p>Network contains conversion utilities to import data from <a href="#importGephi">Gephi</a> and graphs in the <a href="#importDot">DOT language</a>.</p>
 
-// you can extend the options like a normal JSON variable:
-options.nodes = {
-  color: 'red'
-}
+        <h3 id="importGephi">Import data from Gephi</h3>
 
-// create a network
-var network = new vis.Network(container, data, options);
-</pre>
-    </div>
-    <div id="gephiDiv" class=" hidden">
         <p>
             Network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
             <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
@@ -1530,8 +1483,45 @@ var network = new vis.Network(container, data);
             </tr>
 
         </table>
+
+        <h3 id="importDot">Import data in DOT language</h3>
+
+        <p>
+            Network supports data in the
+            <a href="http://en.wikipedia.org/wiki/DOT_language" target="_blank">DOT language</a>.
+            To use data in the DOT language, you can use the vis.network.convertDot converter to transform the DOT
+            language
+            into a vis.Network compatible nodes, edges and options objects. You can extend the options object with other
+            options if you'd like.
+        </p>
+
+        <p>
+            Example usage:
+        </p>
+
+<pre class="prettyprint lang-js">
+// provide data in the DOT language
+var DOTstring = 'dinetwork {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }';
+var parsedData = vis.network.convertDot(DOTstring);
+
+var data = {
+  nodes: parsedData.nodes,
+  edges: parsedData.edges
+}
+
+var options = parsedData.options;
+
+// you can extend the options like a normal JSON variable:
+options.nodes = {
+  color: 'red'
+}
+
+// create a network
+var network = new vis.Network(container, data, options);
+</pre>
     </div>
 
+
 </div>
 
 <!-- Bootstrap core JavaScript

examples/network/other/manipulation.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <title>Network | Localization</title>
+  <title>Network | Manipulation</title>
 
   <style type="text/css">
     body, select {

examples/timeline/editing/editingItemsCallbacks.html

@@ -127,7 +127,6 @@
   }
 
   function prettyPrompt(title, text, inputValue, callback) {
-    console.log(title, text, inputValue)
     swal({
       title: title,
       text: text,

examples/timeline/other/tooltips.html

@@ -1,62 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <title>Timeline | Tooltips</title>
-
-  <style type="text/css">
-    /* http://www.menucool.com/tooltip/css-tooltip */
-    a.tooltip {outline:none; }
-    a.tooltip strong {line-height:30px;}
-    a.tooltip:hover {text-decoration:none;}
-    a.tooltip span {
-      z-index:10;display:none; padding:14px 20px;
-      margin-top:-30px; margin-left:28px;
-      width:300px; line-height:16px;
-    }
-    a.tooltip:hover span{
-      display:inline; position:absolute; color:#111;
-      border:1px solid #DCA; background:#fffAF0;}
-    .callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
-
-    /*CSS3 extras*/
-    a.tooltip span
-    {
-      border-radius:4px;
-      box-shadow: 5px 5px 8px #CCC;
-    }
-  </style>
-
-  <script src="../../../dist/vis.js"></script>
-  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
-  <script src="../../googleAnalytics.js"></script>
-</head>
-<body>
-
-<p>
-  Show tooltips when hovering items using a CSS tooltip library or your own custom CSS.
-</p>
-
-<div id="visualization"></div>
-
-<script type="text/javascript">
-  // DOM element where the Timeline will be attached
-  var container = document.getElementById('visualization');
-
-  // Create a DataSet (allows two way data-binding)
-  var items = new vis.DataSet([
-    {id: 1, content: 'item 1', start: '2014-04-20'},
-    {id: 2, content: 'item 2', start: '2014-04-14'},
-    {id: 3, content: 'item 3', start: '2014-04-18'},
-    {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
-    {id: 5, content: 'item 5', start: '2014-04-25'},
-    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
-  ]);
-
-  // Configuration for the Timeline
-  var options = {};
-
-  // Create a Timeline
-  var timeline = new vis.Timeline(container, items, options);
-</script>
-</body>
-</html>

lib/network/modules/InteractionHandler.js

@@ -115,7 +115,8 @@ class InteractionHandler {
    */
   onTap(event) {
     let pointer = this.getPointer(event.center);
-    let multiselect = this.selectionHandler.options.multiselect && event.changedPointers[0].ctrlKey;
+    let multiselect = this.selectionHandler.options.multiselect &&
+        (event.changedPointers[0].ctrlKey || event.changedPointers[0].metaKey);
 
     this.checkSelectionChanges(pointer, event, multiselect);
     this.selectionHandler._generateClickEvent('click', event, pointer);

lib/timeline/component/ItemSet.js

@@ -1163,7 +1163,7 @@ ItemSet.prototype._onDragStart = function (event) {
 
     event.stopPropagation();
   }
-  else if (this.options.editable.add && event.srcEvent.ctrlKey) {
+  else if (this.options.editable.add && (event.srcEvent.ctrlKey || event.srcEvent.metaKey)) {
     // create a new range item when dragging with ctrl key down
     this._onDragStartAddItem(event);
   }
@@ -1386,7 +1386,7 @@ ItemSet.prototype._onDragEnd = function (event) {
 ItemSet.prototype._onSelectItem = function (event) {
   if (!this.options.selectable) return;
 
-  var ctrlKey  = event.srcEvent && event.srcEvent.ctrlKey;
+  var ctrlKey  = event.srcEvent && (event.srcEvent.ctrlKey || event.srcEvent.metaKey);
   var shiftKey = event.srcEvent && event.srcEvent.shiftKey;
   if (ctrlKey || shiftKey) {
     this._onMultiSelectItem(event);

lib/util.js

@@ -1390,4 +1390,4 @@ exports.easingFunctions = {
   easeInOutQuint: function (t) {
     return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t
   }
-};
+};