diff --git a/HISTORY.md b/HISTORY.md
index 5f65d033..029ef2a1 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,17 +2,50 @@
http://visjs.org
-## 2014-06-06, version 1.1.1
+## not yet released, version 2.1.0
### Timeline
+- Fixed auto detected item type being preferred over the global item `type`.
+- Throws an error when constructing without new keyword.
+- Removed the 'rangeoverflow' item type. Instead, one can use a regular range
+ and change css styling of the item contents to:
+
+ .vis.timeline .item.range .content {
+ overflow: visible;
+ }
+
+### Graph
+
+- Throws an error when constructing without new keyword.
+
+### Graph3d
+
+- Throws an error when constructing without new keyword.
+
+
+## 2014-06-19, version 2.0.0
+
+### Timeline
+
+- Implemented function `destroy` to neatly cleanup a Timeline.
+- Implemented support for dragging the timeline contents vertically.
+- Implemented options `zoomable` and `moveable`.
- Changed default value of option `showCurrentTime` to true.
+- Internal refactoring and simplification of the code.
+- Fixed property `className` of groups not being applied to related contents and
+ background elements, and not being updated once applied.
### Graph
- Reduced the timestep a little for smoother animations.
- Fixed dataManipulation.initiallyVisible functionality (thanks theGrue).
- Forced typecast of fontSize to Number.
+- Added editing of edges using the data manipulation toolkit.
+
+### DataSet
+
+- Renamed option `convert` to `type`.
## 2014-06-06, version 1.1.0
diff --git a/Jakefile.js b/Jakefile.js
index 384b6ef9..d1bb2ec6 100644
--- a/Jakefile.js
+++ b/Jakefile.js
@@ -44,6 +44,7 @@ task('build', {async: true}, function () {
'./src/timeline/component/css/timeaxis.css',
'./src/timeline/component/css/currenttime.css',
'./src/timeline/component/css/customtime.css',
+ './src/timeline/component/css/animation.css',
'./src/timeline/component/css/dataaxis.css',
'./src/timeline/component/css/pathStyles.css',
diff --git a/bower.json b/bower.json
index 336ebee4..fca2518e 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "vis",
- "version": "1.1.0",
+ "version": "2.0.1-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/",
"repository": {
diff --git a/docs/dataset.html b/docs/dataset.html
index 0828e37e..723affae 100644
--- a/docs/dataset.html
+++ b/docs/dataset.html
@@ -91,7 +91,7 @@ console.log('filtered items', items);
// retrieve formatted items
var items = data.get({
fields: ['id', 'date'],
- convert: {
+ type: {
date: 'ISODate'
}
});
@@ -149,7 +149,7 @@ var data = new vis.DataSet([data] [, options])
-
convert
+
type
Object.<String, String>
none
@@ -227,7 +227,7 @@ var data = new vis.DataSet([data] [, options])
Number[]
Get ids of all items or of a filtered set of items.
- Available options are described in section Data Selection, except that options fields and convert are not applicable in case of getIds.
+ Available options are described in section Data Selection, except that options fields and type are not applicable in case of getIds.
An object containing field names as key, and data types as value.
@@ -700,7 +700,7 @@ data.add([
// retrieve formatted items
var items = data.get({
fields: ['id', 'date', 'group'], // output the specified fields only
- convert: {
+ type: {
date: 'Date', // convert the date fields to Date objects
group: 'String' // convert the group fields to Strings
}
diff --git a/docs/graph.html b/docs/graph.html
index 20e96ed2..791c8d51 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -1593,6 +1593,16 @@ var options: {
// all fields normally accepted by a node can be used.
callback(newData); // call the callback with the new data to edit the node.
}
+ onEditEdge: function(data,callback) {
+ /** data = {id: edgeID,
+ * from: nodeId1,
+ * to: nodeId2,
+ * };
+ */
+ var newData = {..}; // alter the data as you want, except for the ID.
+ // all fields normally accepted by an edge can be used.
+ callback(newData); // call the callback with the new data to edit the edge.
+ }
onConnect: function(data,callback) {
// data = {from: nodeId1, to: nodeId2};
var newData = {..}; // check or alter data as you see fit.
@@ -1951,10 +1961,12 @@ var options: {
link:"Add Link",
del:"Delete selected",
editNode:"Edit Node",
+ editEdge:"Edit Edge",
back:"Back",
addDescription:"Click in an empty space to place a new node.",
linkDescription:"Click on a node and drag the edge to another
node to connect them.",
+ editEdgeDescription:"Click on either one of the control points and drag them to another node to connect to it.".
addError:"The function for add does not support two arguments
(data,callback).",
linkError:"The function for connect does not support two arguments
@@ -2137,16 +2149,36 @@ var options: {
+
+
selectNodes(selection, [highlightEdges])
+
none
+
Select nodes.
+ selection is an array with ids of nodes to be selected.
+ The array selection can contain zero or multiple ids.
+ Example usage: graph.selectNodes([3, 5]); will select
+ nodes with id 3 and 5. The highlisghEdges boolean can be used to automatically select the edges connected to the node.
+
+
+
+
selectEdges(selection)
+
none
+
Select Edges.
+ selection is an array with ids of edges to be selected.
+ The array selection can contain zero or multiple ids.
+ Example usage: graph.selectEdges([3, 5]); will select
+ edges with id 3 and 5.
+
+
setSelection(selection)
none
-
Select nodes.
- selection is an array with ids of nodes to be selected.
- The array selection can contain zero or multiple ids.
- Example usage: graph.setSelection([3, 5]); will select
- nodes with id 3 and 5.
+
Select nodes [deprecated].
+ selection is an array with ids of nodes to be selected.
+ The array selection can contain zero or multiple ids.
+ Example usage: graph.setSelection([3, 5]); will select
+ nodes with id 3 and 5.
-
+
setSize(width, height)
diff --git a/docs/index.html b/docs/index.html
index 7a83de95..1d6e3bd8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -162,16 +162,23 @@ var timeline = new vis.Timeline(container, data, options);
<div id="visualization"></div>
<script type="text/javascript">
+ // DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
- var data = [
+
+ // Create a DataSet (allows two way data-binding)
+ var data = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
- ];
+ ]);
+
+ // Configuration for the Timeline
var options = {};
+
+ // Create a Timeline
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
diff --git a/docs/timeline.html b/docs/timeline.html
index 43abb226..07da66f4 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -68,16 +68,23 @@
<div id="visualization"></div>
<script type="text/javascript">
+ // DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
- var items = [
+
+ // Create a DataSet (allows two way data-binding)
+ var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2013-04-20'},
{id: 2, content: 'item 2', start: '2013-04-14'},
{id: 3, content: 'item 3', start: '2013-04-18'},
{id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: 'item 5', start: '2013-04-25'},
{id: 6, content: 'item 6', start: '2013-04-27'}
- ];
+ ]);
+
+ // Configuration for the Timeline
var options = {};
+
+ // Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
@@ -195,8 +202,8 @@ var items = [
type
String
'box'
-
The type of the item. Can be 'box' (default), 'point', 'range', or 'rangeoverflow'.
- Types 'box' and 'point' need a start date, and types 'range' and 'rangeoverflow' need both a start and end date. Types 'range' and rangeoverflow are equal, except that overflowing text in 'range' is hidden, while visible in 'rangeoverflow'.
+
The type of the item. Can be 'box' (default), 'point', or 'range'.
+ Types 'box' and 'point' need a start date, and type 'range' needs both a start and end date.
@@ -458,6 +465,16 @@ var options = {
Specifies the minimum height for the Timeline. Can be a number in pixels or a string like "300px".
+
+
moveable
+
Boolean
+
true
+
+ Specifies whether the Timeline can be moved and zoomed by dragging the window.
+ See also option zoomable.
+
+
+
onAdd
Function
@@ -587,8 +604,8 @@ var options = {
type
String
-
'box'
-
Specifies the default type for the timeline items. Choose from 'box', 'point', 'range', and 'rangeoverflow'. Note that individual items can override this default type.
+
none
+
Specifies the default type for the timeline items. Choose from 'box', 'point', and 'range'. Note that individual items can override this default type. If undefined, the Timeline will auto detect the type from the items data: if a start and end date is available, a 'range' will be created, and else, a 'box' is created.
@@ -599,6 +616,16 @@ var options = {
The width of the timeline in pixels or as a percentage.
+
+
zoomable
+
Boolean
+
true
+
+ Specifies whether the Timeline can be zoomed by pinching or scrolling in the window.
+ Only applicable when option moveable is set true.
+
+
+
zoomMax
Number
@@ -646,6 +673,13 @@ timeline.clear({options: true}); // clear options only
+
+
destroy()
+
none
+
Destroy the Timeline. The timeline is removed from memory. all DOM elements and event listeners are cleaned up.
+
+
+
fit()
none
@@ -895,7 +929,7 @@ var options = {
item: the item being manipulated
-
callback: a callback function which must be invoked to report back. The callback must be invoked as callback(item | null). Here, item can contain changes to the passed item. When invoked as callback(null), the action will be cancelled.
+
callback: a callback function which must be invoked to report back. The callback must be invoked as callback(item | null). Here, item can contain changes to the passed item. Parameter `item` typically contains fields `content`, `start`, and optionally `end`. The type of `start` and `end` is determined by the DataSet type configuration and is `Date` by default. When invoked as callback(null), the action will be cancelled.
This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.