diff --git a/HISTORY.md b/HISTORY.md
index c647a7a6..173f4445 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,9 +1,11 @@
vis.js history
http://visjs.org
+
## , version 0.3.0
- Implemented options `showCurrentTime` and `showCustomTime`. Thanks fi0dor.
+- Implemented touch support for Timeline.
- Fixed broken Timeline options `min` and `max`.
- Fixed not being able to load vis.js in node.js.
diff --git a/Jakefile.js b/Jakefile.js
index c2961da0..d5599feb 100644
--- a/Jakefile.js
+++ b/Jakefile.js
@@ -18,7 +18,7 @@ var VIS_MIN = './vis.min.js';
*/
desc('Execute all tasks: build all libraries');
task('default', ['build', 'minify', 'test'], function () {
- console.log('done');
+ console.log('done');
});
/**
@@ -26,97 +26,97 @@ task('default', ['build', 'minify', 'test'], function () {
*/
desc('Build the visualization library vis.js');
task('build', {async: true}, function () {
- // concatenate and stringify the css files
- var result = concat({
- src: [
- './src/timeline/component/css/timeline.css',
- './src/timeline/component/css/panel.css',
- './src/timeline/component/css/groupset.css',
- './src/timeline/component/css/itemset.css',
- './src/timeline/component/css/item.css',
- './src/timeline/component/css/timeaxis.css',
- './src/timeline/component/css/currenttime.css',
- './src/timeline/component/css/customtime.css'
- ],
- header: '/* vis.js stylesheet */',
- separator: '\n'
- });
- var cssText = JSON.stringify(result.code);
-
- // concatenate the script files
- concat({
- dest: VIS_TMP,
- src: [
- './src/module/imports.js',
-
- './src/shim.js',
- './src/util.js',
- './src/events.js',
- './src/EventBus.js',
- './src/DataSet.js',
- './src/DataView.js',
-
- './src/timeline/TimeStep.js',
- './src/timeline/Stack.js',
- './src/timeline/Range.js',
- './src/timeline/Controller.js',
- './src/timeline/component/Component.js',
- './src/timeline/component/Panel.js',
- './src/timeline/component/RootPanel.js',
- './src/timeline/component/TimeAxis.js',
- './src/timeline/component/CurrentTime.js',
- './src/timeline/component/CustomTime.js',
- './src/timeline/component/ItemSet.js',
- './src/timeline/component/item/*.js',
- './src/timeline/component/Group.js',
- './src/timeline/component/GroupSet.js',
- './src/timeline/Timeline.js',
-
- './src/graph/dotparser.js',
- './src/graph/shapes.js',
- './src/graph/Node.js',
- './src/graph/Edge.js',
- './src/graph/Popup.js',
- './src/graph/Groups.js',
- './src/graph/Images.js',
- './src/graph/Graph.js',
-
- './src/module/exports.js'
- ],
-
- separator: '\n',
-
- // Note: we insert the css as a string in the javascript code here
- // the css will be injected on load of the javascript library
- footer: '// inject css\n' +
- 'util.loadCss(' + cssText + ');\n'
- });
-
- // bundle the concatenated script and dependencies into one file
- var b = browserify();
- b.add(VIS_TMP);
- b.bundle({
- standalone: 'vis'
- }, function (err, code) {
- if(err) {
- throw err;
- }
-
- // add header and footer
- var lib = read('./src/module/header.js') + code;
-
- // write bundled file
- write(VIS, lib);
- console.log('created ' + VIS);
-
- // remove temporary file
- fs.unlinkSync(VIS_TMP);
-
- // update version number and stuff in the javascript files
- replacePlaceholders(VIS);
-
- complete();
- });
+ // concatenate and stringify the css files
+ var result = concat({
+ src: [
+ './src/timeline/component/css/timeline.css',
+ './src/timeline/component/css/panel.css',
+ './src/timeline/component/css/groupset.css',
+ './src/timeline/component/css/itemset.css',
+ './src/timeline/component/css/item.css',
+ './src/timeline/component/css/timeaxis.css',
+ './src/timeline/component/css/currenttime.css',
+ './src/timeline/component/css/customtime.css'
+ ],
+ header: '/* vis.js stylesheet */',
+ separator: '\n'
+ });
+ var cssText = JSON.stringify(result.code);
+
+ // concatenate the script files
+ concat({
+ dest: VIS_TMP,
+ src: [
+ './src/module/imports.js',
+
+ './src/shim.js',
+ './src/util.js',
+ './src/events.js',
+ './src/EventBus.js',
+ './src/DataSet.js',
+ './src/DataView.js',
+
+ './src/timeline/TimeStep.js',
+ './src/timeline/Stack.js',
+ './src/timeline/Range.js',
+ './src/timeline/Controller.js',
+ './src/timeline/component/Component.js',
+ './src/timeline/component/Panel.js',
+ './src/timeline/component/RootPanel.js',
+ './src/timeline/component/TimeAxis.js',
+ './src/timeline/component/CurrentTime.js',
+ './src/timeline/component/CustomTime.js',
+ './src/timeline/component/ItemSet.js',
+ './src/timeline/component/item/*.js',
+ './src/timeline/component/Group.js',
+ './src/timeline/component/GroupSet.js',
+ './src/timeline/Timeline.js',
+
+ './src/graph/dotparser.js',
+ './src/graph/shapes.js',
+ './src/graph/Node.js',
+ './src/graph/Edge.js',
+ './src/graph/Popup.js',
+ './src/graph/Groups.js',
+ './src/graph/Images.js',
+ './src/graph/Graph.js',
+
+ './src/module/exports.js'
+ ],
+
+ separator: '\n',
+
+ // Note: we insert the css as a string in the javascript code here
+ // the css will be injected on load of the javascript library
+ footer: '// inject css\n' +
+ 'util.loadCss(' + cssText + ');\n'
+ });
+
+ // bundle the concatenated script and dependencies into one file
+ var b = browserify();
+ b.add(VIS_TMP);
+ b.bundle({
+ standalone: 'vis'
+ }, function (err, code) {
+ if(err) {
+ throw err;
+ }
+
+ // add header and footer
+ var lib = read('./src/module/header.js') + code;
+
+ // write bundled file
+ write(VIS, lib);
+ console.log('created ' + VIS);
+
+ // remove temporary file
+ fs.unlinkSync(VIS_TMP);
+
+ // update version number and stuff in the javascript files
+ replacePlaceholders(VIS);
+
+ complete();
+ });
});
/**
@@ -124,17 +124,17 @@ task('build', {async: true}, function () {
*/
desc('Minify the visualization library vis.js');
task('minify', function () {
- // minify javascript
- minify({
- src: VIS,
- dest: VIS_MIN,
- header: read('./src/module/header.js')
- });
+ // minify javascript
+ minify({
+ src: VIS,
+ dest: VIS_MIN,
+ header: read('./src/module/header.js')
+ });
- // update version number and stuff in the javascript files
- replacePlaceholders(VIS_MIN);
+ // update version number and stuff in the javascript files
+ replacePlaceholders(VIS_MIN);
- console.log('created ' + VIS_MIN);
+ console.log('created ' + VIS_MIN);
});
/**
@@ -142,18 +142,18 @@ task('minify', function () {
*/
desc('Test the library');
task('test', ['build'], function () {
- // TODO: use a testing suite for testing: nodeunit, mocha, tap, ...
- var filelist = new jake.FileList();
- filelist.include([
- './test/**/*.js'
- ]);
-
- var files = filelist.toArray();
- files.forEach(function (file) {
- require('./' + file);
- });
-
- console.log('Executed ' + files.length + ' test files successfully');
+ // TODO: use a testing suite for testing: nodeunit, mocha, tap, ...
+ var filelist = new jake.FileList();
+ filelist.include([
+ './test/**/*.js'
+ ]);
+
+ var files = filelist.toArray();
+ files.forEach(function (file) {
+ require('./' + file);
+ });
+
+ console.log('Executed ' + files.length + ' test files successfully');
});
/**
@@ -161,11 +161,11 @@ task('test', ['build'], function () {
* @param {String} filename
*/
var replacePlaceholders = function (filename) {
- replace({
- replacements: [
- {pattern: '@@date', replacement: today()},
- {pattern: '@@version', replacement: version()}
- ],
- src: filename
- });
+ replace({
+ replacements: [
+ {pattern: '@@date', replacement: today()},
+ {pattern: '@@version', replacement: version()}
+ ],
+ src: filename
+ });
};
diff --git a/README.md b/README.md
index ea589e3c..a97439b5 100644
--- a/README.md
+++ b/README.md
@@ -40,12 +40,12 @@ To use a component, include the javascript file of vis in your web page:
-
+
-
+
```
@@ -54,12 +54,12 @@ or load vis.js using require.js:
```js
require.config({
- paths: {
- vis: 'path/to/vis',
- }
+ paths: {
+ vis: 'path/to/vis',
+ }
});
require(['vis'], function (math) {
- // ... load a visualization
+ // ... load a visualization
});
```
@@ -85,30 +85,30 @@ of the project.
- Timeline basic demo
-
-
-
+ Timeline basic demo
+
+
+
diff --git a/bower.json b/bower.json
index 29dec11a..742c61d9 100644
--- a/bower.json
+++ b/bower.json
@@ -1,23 +1,23 @@
{
- "name": "vis",
- "version": "0.3.0-SNAPSHOT",
- "description": "A dynamic, browser-based visualization library.",
- "homepage": "http://visjs.org/",
- "repository": {
- "type": "git",
- "url": "git://github.com/almende/vis.git"
- },
- "ignore": [
- "node_modules",
- "src",
- "test",
- "tools",
- ".idea",
- "Jakefile.js",
- "package.json",
- ".npmignore",
- ".gitignore"
- ],
- "dependencies": {},
- "devDependencies": {}
+ "name": "vis",
+ "version": "0.3.0-SNAPSHOT",
+ "description": "A dynamic, browser-based visualization library.",
+ "homepage": "http://visjs.org/",
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/almende/vis.git"
+ },
+ "ignore": [
+ "node_modules",
+ "src",
+ "test",
+ "tools",
+ ".idea",
+ "Jakefile.js",
+ "package.json",
+ ".npmignore",
+ ".gitignore"
+ ],
+ "dependencies": {},
+ "devDependencies": {}
}
diff --git a/docs/css/prettify.css b/docs/css/prettify.css
index b4ec4ca0..3c7acd2e 100644
--- a/docs/css/prettify.css
+++ b/docs/css/prettify.css
@@ -1,87 +1,87 @@
.com {
- color: gray;
+ color: gray;
}
.lit {
- color: red;
+ color: red;
}
.pun {
- color: gray;
+ color: gray;
}
.pln {
- color: #333333;
+ color: #333333;
}
pre.prettyprint {
- border: 1px solid lightgray;
- background-color: #fcfcfc;
- padding: 5px;
+ border: 1px solid lightgray;
+ background-color: #fcfcfc;
+ padding: 5px;
- font-size: 10pt;
- line-height: 1.5em;
- font-family: monospace;
+ font-size: 10pt;
+ line-height: 1.5em;
+ font-family: monospace;
}
ol.linenums {
- margin-top:0;
- margin-bottom:0;
+ margin-top:0;
+ margin-bottom:0;
}
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 {
- list-style:none;
+ list-style:none;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
- background:#eee;
+ background:#eee;
}
.str,.atv {
- color: green;
+ color: green;
}
.kwd,.tag {
- color:#2B7CE9;
+ color:#2B7CE9;
}
.typ,.atn,.dec {
- color: darkorange;
+ color: darkorange;
}
@media print {
- .com {
- color:#600;
- font-style:italic;
- }
-
- .typ {
- color:#404;
- font-weight:700;
- }
-
- .lit {
- color:#044;
- }
-
- .pun {
- color:#440;
- }
-
- .pln {
- color:#000;
- }
-
- .atn {
- color:#404;
- }
-
- .str,.atv {
- color:#060;
- }
-
- .kwd,.tag {
- color:#006;
- font-weight:700;
- }
+ .com {
+ color:#600;
+ font-style:italic;
+ }
+
+ .typ {
+ color:#404;
+ font-weight:700;
+ }
+
+ .lit {
+ color:#044;
+ }
+
+ .pun {
+ color:#440;
+ }
+
+ .pln {
+ color:#000;
+ }
+
+ .atn {
+ color:#404;
+ }
+
+ .str,.atv {
+ color:#060;
+ }
+
+ .kwd,.tag {
+ color:#006;
+ font-weight:700;
+ }
}
\ No newline at end of file
diff --git a/docs/css/style.css b/docs/css/style.css
index 14ba2183..12b5ac45 100644
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -1,77 +1,77 @@
html, body {
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
}
body, td, th {
- font-family: arial, sans-serif;
- font-size: 11pt;
- color: #4D4D4D;
- line-height: 1.7em;
+ font-family: arial, sans-serif;
+ font-size: 11pt;
+ color: #4D4D4D;
+ line-height: 1.7em;
}
#container {
- position: relative;
- margin: 0 auto;
- padding: 10px 10px 50px 10px;
- width: 700px;
- max-width: 100%;
- box-sizing: border-box;
+ position: relative;
+ margin: 0 auto;
+ padding: 10px 10px 50px 10px;
+ width: 700px;
+ max-width: 100%;
+ box-sizing: border-box;
}
h1 {
- font-size: 180%;
- font-weight: bold;
- padding: 0;
- margin: 1em 0 1em 0;
+ font-size: 180%;
+ font-weight: bold;
+ padding: 0;
+ margin: 1em 0 1em 0;
}
h2 {
- padding-top: 20px;
- padding-bottom: 10px;
- border-bottom: 1px solid #a0c0f0;
- color: #2B7CE9;
+ padding-top: 20px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0c0f0;
+ color: #2B7CE9;
}
h3 {
- font-size: 140%;
+ font-size: 140%;
}
a > img {
- border: none;
+ border: none;
}
a {
- color: #2B7CE9;
- text-decoration: none;
+ color: #2B7CE9;
+ text-decoration: none;
}
a:visited {
- color: #2E60A4;
+ color: #2E60A4;
}
a:hover {
- color: red;
- text-decoration: underline;
+ color: red;
+ text-decoration: underline;
}
table {
- border-collapse: collapse;
+ border-collapse: collapse;
}
th {
- font-weight: bold;
- border: 1px solid lightgray;
- background-color: #E5E5E5;
- text-align: left;
- vertical-align: top;
- padding: 5px;
+ font-weight: bold;
+ border: 1px solid lightgray;
+ background-color: #E5E5E5;
+ text-align: left;
+ vertical-align: top;
+ padding: 5px;
}
td {
- border: 1px solid lightgray;
- padding: 5px;
- vertical-align: top;
+ border: 1px solid lightgray;
+ padding: 5px;
+ vertical-align: top;
}
diff --git a/docs/dataset.html b/docs/dataset.html
index be0ee783..e6e8310b 100644
--- a/docs/dataset.html
+++ b/docs/dataset.html
@@ -2,50 +2,50 @@
- vis.js | DataSet documentation
+ vis.js | DataSet documentation
-
-
+
+
-
+
-
DataSet documentation
+
DataSet documentation
-
Contents
-
+
Contents
+
-
Overview
+
Overview
-
- Vis.js comes with a flexible DataSet, which can be used to hold and
- manipulate unstructured data and listen for changes in the data.
- The DataSet is key/value based. Data items can be added, updated and
- removed from the DatSet, and one can subscribe to changes in the DataSet.
- The data in the DataSet can be filtered and ordered, and fields (like
- dates) can be converted to a specific type. Data can be normalized when
- appending it to the DataSet as well.
-
+
+ Vis.js comes with a flexible DataSet, which can be used to hold and
+ manipulate unstructured data and listen for changes in the data.
+ The DataSet is key/value based. Data items can be added, updated and
+ removed from the DatSet, and one can subscribe to changes in the DataSet.
+ The data in the DataSet can be filtered and ordered, and fields (like
+ dates) can be converted to a specific type. Data can be normalized when
+ appending it to the DataSet as well.
+
-
Example
+
Example
-
- The following example shows how to use a DataSet.
-
+
+ The following example shows how to use a DataSet.
+
// create a DataSet
@@ -55,15 +55,15 @@ var data = new vis.DataSet(options);
// add items
// note that the data items can contain different properties and data formats
data.add([
- {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
- {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
- {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
- {id: 4, text: 'item 4'}
+ {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+ {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+ {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+ {id: 4, text: 'item 4'}
]);
// subscribe to any change in the DataSet
data.subscribe('*', function (event, params, senderId) {
- console.log('event', event, params);
+ console.log('event', event, params);
});
// update an existing item
@@ -82,94 +82,94 @@ console.log('item1', item1);
// retrieve a filtered subset of the data
var items = data.get({
- filter: function (item) {
- return item.group == 1;
- }
+ filter: function (item) {
+ return item.group == 1;
+ }
});
console.log('filtered items', items);
// retrieve formatted items
var items = data.get({
- fields: ['id', 'date'],
- convert: {
- date: 'ISODate'
- }
+ fields: ['id', 'date'],
+ convert: {
+ date: 'ISODate'
+ }
});
console.log('formatted items', items);
-
Construction
+
Construction
-
- A DataSet can be constructed as:
-
+
+ A DataSet can be constructed as:
+
var data = new vis.DataSet(options)
-
- After construction, data can be added to the DataSet using the methods
- add
and update
, as described in section
- Data Manipulation .
-
-
-
- The parameter options
is optional and is an object which can
- contain the following properties:
-
-
-
-
- Name
- Type
- Default value
- Description
-
-
- fieldId
- String
- "id"
-
- The name of the field containing the id of the items.
-
- When data is fetched from a server which uses some specific
- field to identify items, this field name can be specified
- in the DataSet using the option fieldId
.
- For example CouchDB uses the field
- "_id"
to identify documents.
-
-
-
- convert
- Object.<String, String>
- none
-
- An object containing field names as key, and data types as
- value. By default, the type of the properties of items are left
- unchanged. Item properties can be normalized by specifying a
- field type. This is useful for example to automatically convert
- stringified dates coming from a server into JavaScript Date
- objects. The available data types are listed in section
- Data Types .
-
-
-
-
-
-
Data Manipulation
-
-
- The data in a DataSet can be manipulated using the methods
- add
,
- update
,
- and remove
.
- The DataSet can be emptied using the method
- clear
.
-
+
+ After construction, data can be added to the DataSet using the methods
+ add
and update
, as described in section
+ Data Manipulation .
+
+
+
+ The parameter options
is optional and is an object which can
+ contain the following properties:
+
+
+
+
+ Name
+ Type
+ Default value
+ Description
+
+
+ fieldId
+ String
+ "id"
+
+ The name of the field containing the id of the items.
+
+ When data is fetched from a server which uses some specific
+ field to identify items, this field name can be specified
+ in the DataSet using the option fieldId
.
+ For example CouchDB uses the field
+ "_id"
to identify documents.
+
+
+
+ convert
+ Object.<String, String>
+ none
+
+ An object containing field names as key, and data types as
+ value. By default, the type of the properties of items are left
+ unchanged. Item properties can be normalized by specifying a
+ field type. This is useful for example to automatically convert
+ stringified dates coming from a server into JavaScript Date
+ objects. The available data types are listed in section
+ Data Types .
+
+
+
+
+
+
Data Manipulation
+
+
+ The data in a DataSet can be manipulated using the methods
+ add
,
+ update
,
+ and remove
.
+ The DataSet can be emptied using the method
+ clear
.
+
// create a DataSet
@@ -177,9 +177,9 @@ var data = new vis.DataSet();
// add items
data.add([
- {id: 1, text: 'item 1'},
- {id: 2, text: 'item 2'},
- {id: 3, text: 'item 3'}
+ {id: 1, text: 'item 1'},
+ {id: 2, text: 'item 2'},
+ {id: 3, text: 'item 3'}
]);
// update an item
@@ -189,193 +189,193 @@ data.update({id: 2, text: 'item 2 (updated)'});
data.remove(3);
-
Add
-
-
- Add a data item or an array with items.
-
-
- Syntax:
-
var addedIds = DataSet.add(data [, senderId])
-
- The argument
data
can contain:
-
-
- An Object
containing a single item to be
- added. The item must contain an id.
-
-
- An Array
or
- google.visualization.DataTable
containing
- a list with items to be added. Each item must contain
- an id.
-
-
-
-
- After the items are added to the DataSet, the DataSet will
- trigger an event add
. When a senderId
- is provided, this id will be passed with the triggered
- event to all subscribers.
-
-
-
- The method will throw an Error when an item with the same id
- as any of the added items already exists.
-
-
-
Update
-
-
- Update a data item or an array with items.
-
-
- Syntax:
-
var updatedIds = DataSet.update(data [, senderId])
-
- The argument
data
can contain:
-
-
- An Object
containing a single item to be
- updated. The item must contain an id.
-
-
- An Array
or
- google.visualization.DataTable
containing
- a list with items to be updated. Each item must contain
- an id.
-
-
-
-
- The provided properties will be merged in the existing item.
- When an item does not exist, it will be created.
-
-
-
- After the items are updated, the DataSet will
- trigger an event add
for the added items, and
- an event update
. When a senderId
- is provided, this id will be passed with the triggered
- event to all subscribers.
-
-
-
Remove
-
-
- Remove a data item or an array with items.
-
-
- Syntax:
-
var removedIds = DataSet.remove(id [, senderId])
-
-
- The argument id
can be:
-
-
-
- A Number
or String
containing the id
- of a single item to be removed.
-
-
- An Object
containing the item to be deleted.
- The item will be deleted by its id.
-
-
- An Array containing ids or items to be removed.
-
-
-
-
- The method ignores removal of non-existing items, and returns an array
- containing the ids of the items which are actually removed from the
- DataSet.
-
-
-
- After the items are removed, the DataSet will
- trigger an event remove
for the removed items.
- When a senderId
is provided, this id will be passed with
- the triggered event to all subscribers.
-
-
-
-
Clear
-
-
- Clear the complete DataSet.
-
-
- Syntax:
-
var removedIds = DataSet.clear([senderId])
-
-
- After the items are removed, the DataSet will
- trigger an event remove
for all removed items.
- When a senderId
is provided, this id will be passed with
- the triggered event to all subscribers.
-
-
-
-
Data Filtering
-
-
- Data can be retrieved from the DataSet using the method get
.
- This method can return a single item or a list with items.
-
-
-
A single item can be retrieved by its id:
+
Add
+
+
+ Add a data item or an array with items.
+
+
+Syntax:
+
var addedIds = DataSet.add(data [, senderId])
+
+The argument
data
can contain:
+
+
+ An Object
containing a single item to be
+ added. The item must contain an id.
+
+
+ An Array
or
+ google.visualization.DataTable
containing
+ a list with items to be added. Each item must contain
+ an id.
+
+
+
+
+ After the items are added to the DataSet, the DataSet will
+ trigger an event add
. When a senderId
+ is provided, this id will be passed with the triggered
+ event to all subscribers.
+
+
+
+ The method will throw an Error when an item with the same id
+ as any of the added items already exists.
+
+
+
Update
+
+
+ Update a data item or an array with items.
+
+
+Syntax:
+
var updatedIds = DataSet.update(data [, senderId])
+
+The argument
data
can contain:
+
+
+ An Object
containing a single item to be
+ updated. The item must contain an id.
+
+
+ An Array
or
+ google.visualization.DataTable
containing
+ a list with items to be updated. Each item must contain
+ an id.
+
+
+
+
+ The provided properties will be merged in the existing item.
+ When an item does not exist, it will be created.
+
+
+
+ After the items are updated, the DataSet will
+ trigger an event add
for the added items, and
+ an event update
. When a senderId
+ is provided, this id will be passed with the triggered
+ event to all subscribers.
+
+
+
Remove
+
+
+ Remove a data item or an array with items.
+
+
+Syntax:
+
var removedIds = DataSet.remove(id [, senderId])
+
+
+ The argument id
can be:
+
+
+
+ A Number
or String
containing the id
+ of a single item to be removed.
+
+
+ An Object
containing the item to be deleted.
+ The item will be deleted by its id.
+
+
+ An Array containing ids or items to be removed.
+
+
+
+
+ The method ignores removal of non-existing items, and returns an array
+ containing the ids of the items which are actually removed from the
+ DataSet.
+
+
+
+ After the items are removed, the DataSet will
+ trigger an event remove
for the removed items.
+ When a senderId
is provided, this id will be passed with
+ the triggered event to all subscribers.
+
+
+
+
Clear
+
+
+ Clear the complete DataSet.
+
+
+Syntax:
+
var removedIds = DataSet.clear([senderId])
+
+
+ After the items are removed, the DataSet will
+ trigger an event remove
for all removed items.
+ When a senderId
is provided, this id will be passed with
+ the triggered event to all subscribers.
+
+
+
+
Data Filtering
+
+
+ Data can be retrieved from the DataSet using the method get
.
+ This method can return a single item or a list with items.
+
+
+
A single item can be retrieved by its id:
var item1 = dataset.get(1);
-
A selection of items can be retrieved by providing an array with ids:
+
A selection of items can be retrieved by providing an array with ids:
var items = dataset.get([1, 3, 4]); // retrieve items 1, 3, and 4
-
All items can be retrieved by simply calling get
without
- specifying an id:
+
All items can be retrieved by simply calling get
without
+ specifying an id:
var items = dataset.get(); // retrieve all items
-
- Items can be filtered on specific properties by providing a filter
- function. A filter function is executed for each of the items in the
- DataSet, and is called with the item as parameter. The function must
- return a boolean. All items for which the filter function returns
- true will be emitted.
-
+
+ Items can be filtered on specific properties by providing a filter
+ function. A filter function is executed for each of the items in the
+ DataSet, and is called with the item as parameter. The function must
+ return a boolean. All items for which the filter function returns
+ true will be emitted.
+
// retrieve all items having a property group with value 2
var group2 = dataset.get({
- filter: function (item) {
- return (item.group == 2);
- }
+ filter: function (item) {
+ return (item.group == 2);
+ }
});
// retrieve all items having a property balance with a value above zero
var positiveBalance = dataset.get({
- filter: function (item) {
- return (item.balance > 0);
- }
+ filter: function (item) {
+ return (item.balance > 0);
+ }
});
-
+
-
- The DataSet contains functionality to format data retrieved via the
- method get
. The method get
has the following
- syntax:
-
+
+ The DataSet contains functionality to format data retrieved via the
+ method get
. The method get
has the following
+ syntax:
+
var item = DataSet.get(id, options); // retrieve a single item
@@ -383,171 +383,171 @@ var items = DataSet.get(ids, options); // retrieve a selection of items
var items = DataSet.get(options); // retrieve all items or a filtered set
-
- Where options
is an Object which can have the following
- properties:
-
-
-
-
- Name
- Type
- Description
-
-
-
- fields
- String[ ]
-
- An array with field names.
- By default, all properties of the items are emitted.
- When fields
is defined, only the properties
- whose name is specified in fields
will be included
- in the returned items.
-
-
-
-
- convert
- Object.<String, String>
-
- An object containing field names as key, and data types as value.
- By default, the type of the properties of an item are left
- unchanged. When a field type is specified, this field in the
- items will be converted to the specified type. This can be used
- for example to convert ISO strings containing a date to a
- JavaScript Date object, or convert strings to numbers or vice
- versa. The available data types are listed in section
- Data Types .
-
-
-
-
- filter
- Function
- Items can be filtered on specific properties by providing a filter
- function. A filter function is executed for each of the items in the
- DataSet, and is called with the item as parameter. The function must
- return a boolean. All items for which the filter function returns
- true will be emitted.
- See section Data Filtering .
-
-
-
- order
- String | Function
- Order the items by a field name or custom sort function.
-
-
-
-
-
- The following example demonstrates formatting properties and filtering
- properties from items.
-
+
+ Where options
is an Object which can have the following
+ properties:
+
+
+
+
+ Name
+ Type
+ Description
+
+
+
+ fields
+ String[ ]
+
+ An array with field names.
+ By default, all properties of the items are emitted.
+ When fields
is defined, only the properties
+ whose name is specified in fields
will be included
+ in the returned items.
+
+
+
+
+ convert
+ Object.<String, String>
+
+ An object containing field names as key, and data types as value.
+ By default, the type of the properties of an item are left
+ unchanged. When a field type is specified, this field in the
+ items will be converted to the specified type. This can be used
+ for example to convert ISO strings containing a date to a
+ JavaScript Date object, or convert strings to numbers or vice
+ versa. The available data types are listed in section
+ Data Types .
+
+
+
+
+ filter
+ Function
+ Items can be filtered on specific properties by providing a filter
+ function. A filter function is executed for each of the items in the
+ DataSet, and is called with the item as parameter. The function must
+ return a boolean. All items for which the filter function returns
+ true will be emitted.
+ See section Data Filtering .
+
+
+
+ order
+ String | Function
+ Order the items by a field name or custom sort function.
+
+
+
+
+
+ The following example demonstrates formatting properties and filtering
+ properties from items.
+
// create a DataSet
var data = new vis.DataSet();
data.add([
- {id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true},
- {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
- {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
- {id: 4, text: 'item 4'}
+ {id: 1, text: 'item 1', date: '2013-06-20', group: 1, first: true},
+ {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+ {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+ {id: 4, text: 'item 4'}
]);
// retrieve formatted items
var items = data.get({
- fields: ['id', 'date', 'group'], // output the specified fields only
- convert: {
- date: 'Date', // convert the date fields to Date objects
- group: 'String' // convert the group fields to Strings
- }
+ fields: ['id', 'date', 'group'], // output the specified fields only
+ convert: {
+ date: 'Date', // convert the date fields to Date objects
+ group: 'String' // convert the group fields to Strings
+ }
});
-
Data Types
-
-
- DataSet supports the following data types:
-
-
-
-
- Name
- Description
- Examples
-
-
- Boolean
- A JavaScript Boolean
-
- true
- false
-
-
-
- Number
- A JavaScript Number
-
- 32
- 2.4
-
-
-
- String
- A JavaScript String
-
- "hello world"
- "2013-06-28"
-
-
-
- Date
- A JavaScript Date object
-
- new Date()
- new Date(2013, 5, 28)
- new Date(1372370400000)
-
-
-
- Moment
- A Moment object, created with
- moment.js
-
- moment()
- moment('2013-06-28')
-
-
-
- ISODate
- A string containing an ISO Date
-
- new Date().toISOString()
- "2013-06-27T22:00:00.000Z"
-
-
-
- ASPDate
- A string containing an ASP Date
-
- "/Date(1372370400000)/"
- "/Date(1198908717056-0700)/"
-
-
-
-
-
-
Subscriptions
-
-
- One can subscribe on changes in a DataSet.
- A subscription can be created using the method subscribe
,
- and removed with unsubscribe
.
-
+
Data Types
+
+
+ DataSet supports the following data types:
+
+
+
+
+ Name
+ Description
+ Examples
+
+
+ Boolean
+ A JavaScript Boolean
+
+ true
+ false
+
+
+
+ Number
+ A JavaScript Number
+
+ 32
+ 2.4
+
+
+
+ String
+ A JavaScript String
+
+ "hello world"
+ "2013-06-28"
+
+
+
+ Date
+ A JavaScript Date object
+
+ new Date()
+ new Date(2013, 5, 28)
+ new Date(1372370400000)
+
+
+
+ Moment
+ A Moment object, created with
+ moment.js
+
+ moment()
+ moment('2013-06-28')
+
+
+
+ ISODate
+ A string containing an ISO Date
+
+ new Date().toISOString()
+ "2013-06-27T22:00:00.000Z"
+
+
+
+ ASPDate
+ A string containing an ASP Date
+
+ "/Date(1372370400000)/"
+ "/Date(1198908717056-0700)/"
+
+
+
+
+
+
Subscriptions
+
+
+ One can subscribe on changes in a DataSet.
+ A subscription can be created using the method subscribe
,
+ and removed with unsubscribe
.
+
// create a DataSet
@@ -555,7 +555,7 @@ var data = new vis.DataSet();
// subscribe to any change in the DataSet
data.subscribe('*', function (event, params, senderId) {
- console.log('event:', event, 'params:', params, 'senderId:', senderId);
+ console.log('event:', event, 'params:', params, 'senderId:', senderId);
});
// add an item
@@ -565,144 +565,144 @@ data.remove(1); // triggers an 'remove' event
-
Subscribe
-
-
- Subscribe to an event.
-
-
- Syntax:
-
DataSet.subscribe(event, callback)
-
- Where:
-
-
- event
is a String containing any of the events listed
- in section Events .
-
-
- callback
is a callback function which will be called
- each time the event occurs. The callback function is described in
- section Callback .
-
-
-
-
Unsubscribe
-
-
- Unsubscribe from an event.
-
-
- Syntax:
-
DataSet.unsubscribe(event, callback)
-
- Where
event
and
callback
correspond with the
- parameters used to
subscribe to the event.
-
-
Events
-
-
- The following events are available for subscription:
-
-
-
-
- Event
- Description
-
-
- add
-
- The add
event is triggered when an item
- or a set of items is added, or when an item is updated while
- not yet existing.
-
-
-
- update
-
- The update
event is triggered when an existing item
- or a set of existing items is updated.
-
-
-
- remove
-
- The remove
event is triggered when an item
- or a set of items is removed.
-
-
-
- *
-
- The *
event is triggered when any of the events
- add
, update
, and remove
- occurs.
-
-
-
-
-
Callback
-
-
- The callback functions of subscribers are called with the following
- parameters:
-
+
Subscribe
+
+
+ Subscribe to an event.
+
+
+Syntax:
+
DataSet.subscribe(event, callback)
+
+Where:
+
+
+ event
is a String containing any of the events listed
+ in section Events .
+
+
+ callback
is a callback function which will be called
+ each time the event occurs. The callback function is described in
+ section Callback .
+
+
+
+
Unsubscribe
+
+
+ Unsubscribe from an event.
+
+
+Syntax:
+
DataSet.unsubscribe(event, callback)
+
+Where
event
and
callback
correspond with the
+parameters used to
subscribe to the event.
+
+
Events
+
+
+ The following events are available for subscription:
+
+
+
+
+ Event
+ Description
+
+
+ add
+
+ The add
event is triggered when an item
+ or a set of items is added, or when an item is updated while
+ not yet existing.
+
+
+
+ update
+
+ The update
event is triggered when an existing item
+ or a set of existing items is updated.
+
+
+
+ remove
+
+ The remove
event is triggered when an item
+ or a set of items is removed.
+
+
+
+ *
+
+ The *
event is triggered when any of the events
+ add
, update
, and remove
+ occurs.
+
+
+
+
+
Callback
+
+
+ The callback functions of subscribers are called with the following
+ parameters:
+
function (event, params, senderId) {
- // handle the event
+ // handle the event
});
-
- where the parameters are defined as
-
-
-
-
- Parameter
- Type
- Description
-
-
- event
- String
-
- Any of the available events: add
,
- update
, or remove
.
-
-
-
- params
- Object | null
-
- Optional parameters providing more information on the event.
- In case of the events add
,
- update
, and remove
,
- params
is always an object containing a property
- items, which contains an array with the ids of the affected
- items.
-
-
-
- senderId
- String | Number
-
- An senderId, optionally provided by the application code
- which triggered the event. If senderId is not provided, the
- argument will be null
.
-
-
-
-
-
-
-
Data Policy
-
- All code and data is processed and rendered in the browser.
- No data is sent to any server.
-
+
+ where the parameters are defined as
+
+
+
+
+ Parameter
+ Type
+ Description
+
+
+ event
+ String
+
+ Any of the available events: add
,
+ update
, or remove
.
+
+
+
+ params
+ Object | null
+
+ Optional parameters providing more information on the event.
+ In case of the events add
,
+ update
, and remove
,
+ params
is always an object containing a property
+ items, which contains an array with the ids of the affected
+ items.
+
+
+
+ senderId
+ String | Number
+
+ An senderId, optionally provided by the application code
+ which triggered the event. If senderId is not provided, the
+ argument will be null
.
+
+
+
+
+
+
+
Data Policy
+
+ All code and data is processed and rendered in the browser.
+ No data is sent to any server.
+
diff --git a/docs/dataview.html b/docs/dataview.html
index bb459d9c..1698ffb1 100644
--- a/docs/dataview.html
+++ b/docs/dataview.html
@@ -2,69 +2,69 @@
- vis.js | DataView documentation
+ vis.js | DataView documentation
-
-
+
+
-
+
-
DataView documentation
+
DataView documentation
-
Contents
-
+
Contents
+
-
Overview
+
Overview
-
- A DataView offers a filtered and/or formatted view on a
- DataSet .
- One can subscribe on changes in a DataView, and easily get filtered or
- formatted data without having to specify filters and field types all
- the time.
-
+
+ A DataView offers a filtered and/or formatted view on a
+ DataSet .
+ One can subscribe on changes in a DataView, and easily get filtered or
+ formatted data without having to specify filters and field types all
+ the time.
+
-
Example
+
Example
-
- The following example shows how to use a DataView.
-
+
+ The following example shows how to use a DataView.
+
// create a DataSet
var data = new vis.DataSet();
data.add([
- {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
- {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
- {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
- {id: 4, text: 'item 4'}
+ {id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
+ {id: 2, text: 'item 2', date: '2013-06-23', group: 2},
+ {id: 3, text: 'item 3', date: '2013-06-25', group: 2},
+ {id: 4, text: 'item 4'}
]);
// create a DataView
// the view will only contain items having a property group with value 1,
// and will only output fields id, text, and date.
var view = new vis.DataView(data, {
- filter: function (item) {
- return (item.group == 1);
- },
- fields: ['id', 'text', 'date']
+ filter: function (item) {
+ return (item.group == 1);
+ },
+ fields: ['id', 'text', 'date']
});
// subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
- console.log('event', event, params);
+ console.log('event', event, params);
});
// update an item in the data set
@@ -78,131 +78,131 @@ console.log('ids', ids); // will output [1, 2]
var items = view.get();
-
Construction
+
Construction
-
- A DataView can be constructed as:
-
+
+ A DataView can be constructed as:
+
var data = new vis.DataView(dataset, options)
-
- where:
-
-
-
-
- dataset
is a DataSet or DataView.
-
-
- options
is an object which can
- contain the following properties. Note that these properties
- are exactly the same as the properties available in methods
- DataSet.get
and DataView.get
.
-
-
-
-
-
- Name
- Type
- Description
-
-
-
- convert
- Object.<String, String>
-
- An object containing field names as key, and data types as value.
- By default, the type of the properties of an item are left
- unchanged. When a field type is specified, this field in the
- items will be converted to the specified type. This can be used
- for example to convert ISO strings containing a date to a
- JavaScript Date object, or convert strings to numbers or vice
- versa. The available data types are listed in section
- Data Types .
-
-
-
-
- fields
- String[ ]
-
- An array with field names.
- By default, all properties of the items are emitted.
- When fields
is defined, only the properties
- whose name is specified in fields
will be included
- in the returned items.
-
-
-
-
- filter
- function
- Items can be filtered on specific properties by providing a filter
- function. A filter function is executed for each of the items in the
- DataSet, and is called with the item as parameter. The function must
- return a boolean. All items for which the filter function returns
- true will be emitted.
- See also section Data Filtering .
-
-
-
-
-
-
-
Getting Data
-
-
- Data of the DataView can be retrieved using the method get
.
-
+
+ where:
+
+
+
+
+ dataset
is a DataSet or DataView.
+
+
+ options
is an object which can
+ contain the following properties. Note that these properties
+ are exactly the same as the properties available in methods
+ DataSet.get
and DataView.get
.
+
+
+
+
+
+ Name
+ Type
+ Description
+
+
+
+ convert
+ Object.<String, String>
+
+ An object containing field names as key, and data types as value.
+ By default, the type of the properties of an item are left
+ unchanged. When a field type is specified, this field in the
+ items will be converted to the specified type. This can be used
+ for example to convert ISO strings containing a date to a
+ JavaScript Date object, or convert strings to numbers or vice
+ versa. The available data types are listed in section
+ Data Types .
+
+
+
+
+ fields
+ String[ ]
+
+ An array with field names.
+ By default, all properties of the items are emitted.
+ When fields
is defined, only the properties
+ whose name is specified in fields
will be included
+ in the returned items.
+
+
+
+
+ filter
+ function
+ Items can be filtered on specific properties by providing a filter
+ function. A filter function is executed for each of the items in the
+ DataSet, and is called with the item as parameter. The function must
+ return a boolean. All items for which the filter function returns
+ true will be emitted.
+ See also section Data Filtering .
+
+
+
+
+
+
+
Getting Data
+
+
+ Data of the DataView can be retrieved using the method get
.
+
var items = view.get();
-
- Data of a DataView can be filtered and formatted again, in exactly the
- same way as in a DataSet. See sections
- Data Filtering and
- Data Formatting for more
- information.
-
+
+ Data of a DataView can be filtered and formatted again, in exactly the
+ same way as in a DataSet. See sections
+ Data Filtering and
+ Data Formatting for more
+ information.
+
var items = view.get({
- fields: ['id', 'score'],
- filter: function (item) {
- return (item.score > 50);
- }
+ fields: ['id', 'score'],
+ filter: function (item) {
+ return (item.score > 50);
+ }
});
-
Subscriptions
-
- One can subscribe on changes in the DataView. Subscription works exactly
- the same as for DataSets. See the documentation on
- subscriptions in a DataSet
- for more information.
-
+
Subscriptions
+
+ One can subscribe on changes in the DataView. Subscription works exactly
+ the same as for DataSets. See the documentation on
+ subscriptions in a DataSet
+ for more information.
+
// create a DataSet and a view on the data set
var data = new vis.DataSet();
var view = new vis.DataView({
- filter: function (item) {
- return (item.group == 2);
- }
+ filter: function (item) {
+ return (item.group == 2);
+ }
});
// subscribe to any change in the DataView
view.subscribe('*', function (event, params, senderId) {
- console.log('event:', event, 'params:', params, 'senderId:', senderId);
+ console.log('event:', event, 'params:', params, 'senderId:', senderId);
});
// add, update, and remove data in the DataSet...
@@ -210,11 +210,11 @@ view.subscribe('*', function (event, params, senderId) {
- Data Policy
-
- All code and data is processed and rendered in the browser.
- No data is sent to any server.
-
+Data Policy
+
+ All code and data is processed and rendered in the browser.
+ No data is sent to any server.
+
diff --git a/docs/graph.html b/docs/graph.html
index f196a732..fec8affb 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -2,12 +2,12 @@
- vis.js | graph documentation
+ vis.js | graph documentation
-
-
+
+
-
+
@@ -17,52 +17,52 @@
Contents
Overview
- Graph is a visualization to display graphs and networks consisting of nodes
- and edges. The visualization is easy to use and supports custom shapes,
- styles, colors, sizes, images, and more.
+ Graph is a visualization to display graphs and networks consisting of nodes
+ and edges. The visualization is easy to use and supports custom shapes,
+ styles, colors, sizes, images, and more.
- The graph visualization works smooth on any modern browser for up to a
- few hundred nodes and edges.
+ The graph visualization works smooth on any modern browser for up to a
+ few hundred nodes and edges.
- To get started with Graph, install or download the
- vis.js library.
+ To get started with Graph, install or download the
+ vis.js library.
Example
- Here a basic graph example. More examples can be found in the
- examples directory .
+ Here a basic graph example. More examples can be found in the
+ examples directory .
<!doctype html>
<html>
<head>
- <title>Graph | Basic usage</title>
+ <title>Graph | Basic usage</title>
- <script type="text/javascript" src="../../vis.js"></script>
+ <script type="text/javascript" src="../../vis.js"></script>
</head>
<body>
@@ -70,34 +70,34 @@
<div id="mygraph"></div>
<script type="text/javascript">
- // create an array with nodes
- var nodes = [
- {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 = [
- {from: 1, to: 2},
- {from: 1, to: 3},
- {from: 2, to: 4},
- {from: 2, to: 5}
- ];
-
- // create a graph
- var container = document.getElementById('mygraph');
- var data= {
- nodes: nodes,
- edges: edges,
- };
- var options = {
- width: '400px',
- height: '400px'
- };
- var graph = new vis.Graph(container, data, options);
+ // create an array with nodes
+ var nodes = [
+ {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 = [
+ {from: 1, to: 2},
+ {from: 1, to: 3},
+ {from: 2, to: 4},
+ {from: 2, to: 5}
+ ];
+
+ // create a graph
+ var container = document.getElementById('mygraph');
+ var data= {
+ nodes: nodes,
+ edges: edges,
+ };
+ var options = {
+ width: '400px',
+ height: '400px'
+ };
+ var graph = new vis.Graph(container, data, options);
</script>
</body>
@@ -107,8 +107,8 @@
Loading
- Install or download the vis.js library.
- in a subfolder of your project. Include the library script in the head of your html code:
+ Install or download the vis.js library.
+ in a subfolder of your project. Include the library script in the head of your html code:
@@ -121,278 +121,278 @@ The constructor of the Graph is vis.Graph
.
The constructor accepts three parameters:
-
- container
is the DOM element in which to create the graph.
-
-
- data
is an Object containing properties nodes
and
- edges
, which both contain an array with objects.
- Optionally, data may contain an options
object.
- The parameter data
is optional, data can also be set using
- the method setData
. Section Data Format
- describes the data object.
-
-
- options
is an optional Object containing a name-value map
- with options. Options can also be set using the method
- setOptions
.
- Section Configuration Options
- describes the available options.
-
+
+ container
is the DOM element in which to create the graph.
+
+
+ data
is an Object containing properties nodes
and
+ edges
, which both contain an array with objects.
+ Optionally, data may contain an options
object.
+ The parameter data
is optional, data can also be set using
+ the method setData
. Section Data Format
+ describes the data object.
+
+
+ options
is an optional Object containing a name-value map
+ with options. Options can also be set using the method
+ setOptions
.
+ Section Configuration Options
+ describes the available options.
+
- The data
parameter of the Graph constructor is an object
- which can contain different types of data.
- The following properties are supported in the data
object:
+ The data
parameter of the Graph constructor is an object
+ which can contain different types of data.
+ The following properties are supported in the data
object:
-
- A property pair nodes
and edges
,
- both containing an Array with objects. The data formats are described
- in the sections Nodes and Edges .
- Example:
+
+ A property pair nodes
and edges
,
+ both containing an Array with objects. The data formats are described
+ in the sections Nodes and Edges .
+ Example:
var data = {
- nodes: [...],
- edges: [...]
+ nodes: [...],
+ edges: [...]
};
-
-
- A property dot
,
- containing a string with data in the
- DOT language .
- DOT support is described in section DOT_language .
-
- Example:
+
+
+ A property dot
,
+ containing a string with data in the
+ DOT language .
+ DOT support is described in section DOT_language .
+
+ Example:
var data = {
- dot: '...'
+ dot: '...'
};
-
-
- A property options
,
- containing an object with global options.
- Options can be provided as third parameter in the graph constructor
- as well. Section Configuration Options
- describes the available options.
-
-
+
+
+ A property options
,
+ containing an object with global options.
+ Options can be provided as third parameter in the graph constructor
+ as well. Section Configuration Options
+ describes the available options.
+
+
Nodes
- Nodes typically have an id
and label
.
- A node must contain at least a property id
.
- Nodes can have extra properties, used to define the shape and style of the
- nodes.
+ Nodes typically have an id
and label
.
+ A node must contain at least a property id
.
+ Nodes can have extra properties, used to define the shape and style of the
+ nodes.
- A JavaScript Array with nodes is constructed like:
+ A JavaScript Array with nodes is constructed like:
var nodes = [
- {
- id: 1,
- label: 'Node 1'
- },
- // ... more nodes
+ {
+ id: 1,
+ label: 'Node 1'
+ },
+ // ... more nodes
];
- Nodes support the following properties:
+ Nodes support the following properties:
-
- Name
- Type
- Required
- Description
-
-
-
- color
- String | Object
- no
- Color for the node.
-
-
-
- color.background
- String
- no
- Background color for the node.
-
-
-
- color.border
- String
- no
- Border color for the node.
-
-
-
- color.highlight
- String | Object
- no
- Color of the node when selected.
-
-
-
- color.highlight.background
- String
- no
- Background color of the node when selected.
-
-
-
- color.highlight.border
- String
- no
- Border color of the node when selected.
-
-
-
- group
- Number | String
- no
- A group number or name. The type can be number
,
- string
, or an other type. All nodes with the same group get
- the same color schema.
-
-
-
- fontColor
- String
- no
- Font color for label in the node.
-
-
-
- fontFace
- String
- no
- Font face for label in the node, for example "verdana" or "arial".
-
-
-
- fontSize
- Number
- no
- Font size in pixels for label in the node.
-
-
-
- id
- Number | String
- yes
- A unique id for this node.
- Nodes may not have duplicate id's.
- Id's do not need to be consecutive.
- An id is normally a number, but may be any type.
-
-
-
- image
- string
- no
- Url of an image. Only applicable when the shape of the node is
- image
.
-
-
-
- radius
- number
- no
- Radius for the node. Applicable for all shapes except box
,
- circle
, ellipse
and database
.
- The value of radius
will override a value in
- property value
.
-
-
-
- shape
- string
- no
- Define the shape for the node.
- Choose from
- ellipse
(default), circle
, box
,
- database
, image
, label
, dot
,
- star
, triangle
, triangleDown
, and square
.
-
-
- In case of image
, a property with name image
must
- be provided, containing image urls.
-
-
- The shapes dot
, star
, triangle
,
- triangleDown
, and square
, are scalable.
- The size is determined by the properties radius
or
- value
.
-
-
- When a property label
is provided,
- this label will be displayed inside the shape in case of shapes
- box
, circle
, ellipse
,
- and database
.
- For all other shapes, the label will be displayed right below the shape.
-
-
-
-
-
- label
- string
- no
- Text label to be displayed in the node or under the image of the node.
- Multiple lines can be separated by a newline character \n
.
-
-
-
- title
- string
- no
- Title to be displayed when the user hovers over the node.
- The title can contain HTML code.
-
-
-
- value
- number
- no
- A value for the node.
- The radius of the nodes will be scaled automatically from minimum to
- maximum value.
- Only applicable when the shape of the node is dot
.
- If a radius
is provided for the node too, it will override the
- radius calculated from the value.
-
-
-
- x
- number
- no
- Horizontal position in pixels.
- The horizontal position of the node will be fixed.
- The vertical position y may remain undefined.
-
-
- y
- number
- no
- Vertical position in pixels.
- The vertical position of the node will be fixed.
- The horizontal position x may remain undefined.
-
+
+ Name
+ Type
+ Required
+ Description
+
+
+
+ color
+ String | Object
+ no
+ Color for the node.
+
+
+
+ color.background
+ String
+ no
+ Background color for the node.
+
+
+
+ color.border
+ String
+ no
+ Border color for the node.
+
+
+
+ color.highlight
+ String | Object
+ no
+ Color of the node when selected.
+
+
+
+ color.highlight.background
+ String
+ no
+ Background color of the node when selected.
+
+
+
+ color.highlight.border
+ String
+ no
+ Border color of the node when selected.
+
+
+
+ group
+ Number | String
+ no
+ A group number or name. The type can be number
,
+ string
, or an other type. All nodes with the same group get
+ the same color schema.
+
+
+
+ fontColor
+ String
+ no
+ Font color for label in the node.
+
+
+
+ fontFace
+ String
+ no
+ Font face for label in the node, for example "verdana" or "arial".
+
+
+
+ fontSize
+ Number
+ no
+ Font size in pixels for label in the node.
+
+
+
+ id
+ Number | String
+ yes
+ A unique id for this node.
+ Nodes may not have duplicate id's.
+ Id's do not need to be consecutive.
+ An id is normally a number, but may be any type.
+
+
+
+ image
+ string
+ no
+ Url of an image. Only applicable when the shape of the node is
+ image
.
+
+
+
+ radius
+ number
+ no
+ Radius for the node. Applicable for all shapes except box
,
+ circle
, ellipse
and database
.
+ The value of radius
will override a value in
+ property value
.
+
+
+
+ shape
+ string
+ no
+ Define the shape for the node.
+ Choose from
+ ellipse
(default), circle
, box
,
+ database
, image
, label
, dot
,
+ star
, triangle
, triangleDown
, and square
.
+
+
+ In case of image
, a property with name image
must
+ be provided, containing image urls.
+
+
+ The shapes dot
, star
, triangle
,
+ triangleDown
, and square
, are scalable.
+ The size is determined by the properties radius
or
+ value
.
+
+
+ When a property label
is provided,
+ this label will be displayed inside the shape in case of shapes
+ box
, circle
, ellipse
,
+ and database
.
+ For all other shapes, the label will be displayed right below the shape.
+
+
+
+
+
+ label
+ string
+ no
+ Text label to be displayed in the node or under the image of the node.
+ Multiple lines can be separated by a newline character \n
.
+
+
+
+ title
+ string
+ no
+ Title to be displayed when the user hovers over the node.
+ The title can contain HTML code.
+
+
+
+ value
+ number
+ no
+ A value for the node.
+ The radius of the nodes will be scaled automatically from minimum to
+ maximum value.
+ Only applicable when the shape of the node is dot
.
+ If a radius
is provided for the node too, it will override the
+ radius calculated from the value.
+
+
+
+ x
+ number
+ no
+ Horizontal position in pixels.
+ The horizontal position of the node will be fixed.
+ The vertical position y may remain undefined.
+
+
+ y
+ number
+ no
+ Vertical position in pixels.
+ The vertical position of the node will be fixed.
+ The horizontal position x may remain undefined.
+
@@ -400,176 +400,176 @@ var nodes = [
Edges
- Edges are connections between nodes.
- An edge must at least contain properties from
and
- to
, both referring to the id
of a node.
- Edges can have extra properties, used to define the type and style.
+ Edges are connections between nodes.
+ An edge must at least contain properties from
and
+ to
, both referring to the id
of a node.
+ Edges can have extra properties, used to define the type and style.
- A JavaScript Array with edges is constructed as:
+ A JavaScript Array with edges is constructed as:
var edges = [
- {
- from: 1,
- to: 3
- },
- // ... more edges
+ {
+ from: 1,
+ to: 3
+ },
+ // ... more edges
];
- Edges support the following properties:
+ Edges support the following properties:
-
- Name
- Type
- Required
- Description
-
-
-
- color
- string
- no
- A HTML color for the edge.
-
-
-
- dash
- Object
- no
-
- Object containing properties for dashed lines.
- Available properties: length
, gap
,
- altLength
.
-
-
-
-
- dash.altLength
- number
- no
- Length of the alternated dash in pixels on a dashed line.
- Specifying dash.altLength
allows for creating
- a dashed line with a dash-dot style, for example when
- dash.length=10
and dash.altLength=5
.
- See also the option dahs.length
.
- Only applicable when the line style is dash-line
.
-
-
-
- dash.length
- number
- no
- Length of a dash in pixels on a dashed line.
- Only applicable when the line style is dash-line
.
-
-
-
- dash.gap
- number
- no
- Length of a gap in pixels on a dashed line.
- Only applicable when the line style is dash-line
.
-
-
-
- fontColor
- String
- no
- Font color for the text label of the edge.
- Only applicable when property label
is defined.
-
-
-
- fontFace
- String
- no
- Font face for the text label of the edge,
- for example "verdana" or "arial".
- Only applicable when property label
is defined.
-
-
-
- fontSize
- Number
- no
- Font size in pixels for the text label of the edge.
- Only applicable when property label
is defined.
-
-
-
- from
- Number | String
- yes
- The id of a node where the edge starts. The type must correspond with
- the type of the node id's. This is normally a number, but can be any
- type.
-
-
-
- length
- number
- no
- The length of the edge in pixels.
-
-
-
- style
- string
- no
- Define a line style for the edge.
- Choose from line
(default), arrow
,
- arrow-center
, or dash-line
.
-
-
-
-
- label
- string
- no
- Text label to be displayed halfway the edge.
-
-
-
- title
- string
- no
- Title to be displayed when the user hovers over the edge.
- The title can contain HTML code.
-
-
-
- to
- Number | String
- yes
- The id of a node where the edge ends. The type must correspond with
- the type of the node id's. This is normally a number, but can be any
- type.
-
-
- value
- number
- no
- A value for the edge.
- The width of the edges will be scaled automatically from minimum to
- maximum value.
- If a width
is provided for the edge too, it will override the
- width calculated from the value.
-
-
-
- width
- number
- no
- Width of the line in pixels. The width
will
- override a specified value
, if a value
is
- specified too.
-
+
+ Name
+ Type
+ Required
+ Description
+
+
+
+ color
+ string
+ no
+ A HTML color for the edge.
+
+
+
+ dash
+ Object
+ no
+
+ Object containing properties for dashed lines.
+ Available properties: length
, gap
,
+ altLength
.
+
+
+
+
+ dash.altLength
+ number
+ no
+ Length of the alternated dash in pixels on a dashed line.
+ Specifying dash.altLength
allows for creating
+ a dashed line with a dash-dot style, for example when
+ dash.length=10
and dash.altLength=5
.
+ See also the option dahs.length
.
+ Only applicable when the line style is dash-line
.
+
+
+
+ dash.length
+ number
+ no
+ Length of a dash in pixels on a dashed line.
+ Only applicable when the line style is dash-line
.
+
+
+
+ dash.gap
+ number
+ no
+ Length of a gap in pixels on a dashed line.
+ Only applicable when the line style is dash-line
.
+
+
+
+ fontColor
+ String
+ no
+ Font color for the text label of the edge.
+ Only applicable when property label
is defined.
+
+
+
+ fontFace
+ String
+ no
+ Font face for the text label of the edge,
+ for example "verdana" or "arial".
+ Only applicable when property label
is defined.
+
+
+
+ fontSize
+ Number
+ no
+ Font size in pixels for the text label of the edge.
+ Only applicable when property label
is defined.
+
+
+
+ from
+ Number | String
+ yes
+ The id of a node where the edge starts. The type must correspond with
+ the type of the node id's. This is normally a number, but can be any
+ type.
+
+
+
+ length
+ number
+ no
+ The length of the edge in pixels.
+
+
+
+ style
+ string
+ no
+ Define a line style for the edge.
+ Choose from line
(default), arrow
,
+ arrow-center
, or dash-line
.
+
+
+
+
+ label
+ string
+ no
+ Text label to be displayed halfway the edge.
+
+
+
+ title
+ string
+ no
+ Title to be displayed when the user hovers over the edge.
+ The title can contain HTML code.
+
+
+
+ to
+ Number | String
+ yes
+ The id of a node where the edge ends. The type must correspond with
+ the type of the node id's. This is normally a number, but can be any
+ type.
+
+
+ value
+ number
+ no
+ A value for the edge.
+ The width of the edges will be scaled automatically from minimum to
+ maximum value.
+ If a width
is provided for the edge too, it will override the
+ width calculated from the value.
+
+
+
+ width
+ number
+ no
+ Width of the line in pixels. The width
will
+ override a specified value
, if a value
is
+ specified too.
+
@@ -577,20 +577,20 @@ var edges = [
DOT language
- Graph supports data in the
- DOT language .
- To provide data in the DOT language, the data
object must contain
- a property dot
with a String containing the data.
+ Graph supports data in the
+ DOT language .
+ To provide data in the DOT language, the data
object must contain
+ a property dot
with a String containing the data.
- Example usage:
+ Example usage:
// provide data in the DOT language
var data = {
- dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
+ dot: 'digraph {1 -> 1 -> 2; 2 -> 3; 2 -- 4; 2 -> 1 }'
};
// create a graph
@@ -602,252 +602,252 @@ var graph = new vis.Graph(container, data);
Configuration Options
- Options can be used to customize the graph. Options are defined as a JSON object.
- All options are optional.
+ Options can be used to customize the graph. Options are defined as a JSON object.
+ All options are optional.
var options = {
- width: '100%',
- height: '400px',
- edges: {
- color: 'red',
- width: 2
- }
+ width: '100%',
+ height: '400px',
+ edges: {
+ color: 'red',
+ width: 2
+ }
};
- The following options are available.
+ The following options are available.
- Name
- Type
- Default
- Description
+ Name
+ Type
+ Default
+ Description
- edges.color
- String
- "#2B7CE9"
- The default color of a edge.
+ edges.color
+ String
+ "#2B7CE9"
+ The default color of a edge.
- edges.dash
- Object
- Object
-
- Object containing default properties for dashed lines.
- Available properties: length
, gap
,
- altLength
.
-
+ edges.dash
+ Object
+ Object
+
+ Object containing default properties for dashed lines.
+ Available properties: length
, gap
,
+ altLength
.
+
- edges.dash.altLength
- number
- none
- Default length of the alternated dash in pixels on a dashed line.
- Specifying dash.altLength
allows for creating
- a dashed line with a dash-dot style, for example when
- dash.length=10
and dash.altLength=5
.
- See also the option dahs.length
.
- Only applicable when the line style is dash-line
.
+ edges.dash.altLength
+ number
+ none
+ Default length of the alternated dash in pixels on a dashed line.
+ Specifying dash.altLength
allows for creating
+ a dashed line with a dash-dot style, for example when
+ dash.length=10
and dash.altLength=5
.
+ See also the option dahs.length
.
+ Only applicable when the line style is dash-line
.
- edges.dash.length
- number
- 10
- Default length of a dash in pixels on a dashed line.
- Only applicable when the line style is dash-line
.
+ edges.dash.length
+ number
+ 10
+ Default length of a dash in pixels on a dashed line.
+ Only applicable when the line style is dash-line
.
- edges.dash.gap
- number
- 5
- Default length of a gap in pixels on a dashed line.
- Only applicable when the line style is dash-line
.
+ edges.dash.gap
+ number
+ 5
+ Default length of a gap in pixels on a dashed line.
+ Only applicable when the line style is dash-line
.
- edges.length
- Number
- 100
- The default length of a edge.
+ edges.length
+ Number
+ 100
+ The default length of a edge.
- edges.style
- String
- "line"
- The default style of a edge.
- Choose from line
(default), arrow
,
- arrow-center
, dash-line
.
+ edges.style
+ String
+ "line"
+ The default style of a edge.
+ Choose from line
(default), arrow
,
+ arrow-center
, dash-line
.
- edges.width
- Number
- 1
- The default width of a edge.
+ edges.width
+ Number
+ 1
+ The default width of a edge.
- groups
- Object
- none
- It is possible to specify custom styles for groups.
- Each node assigned a group gets the specified style.
- See Groups for an overview of the available styles
- and an example.
-
+ groups
+ Object
+ none
+ It is possible to specify custom styles for groups.
+ Each node assigned a group gets the specified style.
+ See Groups for an overview of the available styles
+ and an example.
+
- height
- String
- "400px"
- The height of the graph in pixels or as a percentage.
+ height
+ String
+ "400px"
+ The height of the graph in pixels or as a percentage.
- nodes.color
- String | Object
- Object
- Default color of the nodes. When color is a string, the color is applied
+ nodes.color
+ String | Object
+ Object
+ Default color of the nodes. When color is a string, the color is applied
to both background as well as the border of the node.
- nodes.color.background
- String
- "#97C2FC"
- Default background color of the nodes
+ nodes.color.background
+ String
+ "#97C2FC"
+ Default background color of the nodes
- nodes.color.border
- String
- "#2B7CE9"
- Default border color of the nodes
+ nodes.color.border
+ String
+ "#2B7CE9"
+ Default border color of the nodes
- nodes.color.highlight
- String | Object
- Object
- Default color of the node when the node is selected. Applied to
+ nodes.color.highlight
+ String | Object
+ Object
+ Default color of the node when the node is selected. Applied to
both border and background of the node.
- nodes.color.highlight.background
- String
- "#D2E5FF"
- Default background color of the node when selected.
+ nodes.color.highlight.background
+ String
+ "#D2E5FF"
+ Default background color of the node when selected.
- nodes.color.highlight.border
- String
- "#2B7CE9"
- Default border color of the node when selected.
+ nodes.color.highlight.border
+ String
+ "#2B7CE9"
+ Default border color of the node when selected.
- nodes.fontColor
- String
- "black"
- Default font color for the text label in the nodes.
+ nodes.fontColor
+ String
+ "black"
+ Default font color for the text label in the nodes.
- nodes.fontFace
- String
- "sans"
- Default font face for the text label in the nodes, for example "verdana" or "arial".
+ nodes.fontFace
+ String
+ "sans"
+ Default font face for the text label in the nodes, for example "verdana" or "arial".
- nodes.fontSize
- Number
- 14
- Default font size in pixels for the text label in the nodes.
+ nodes.fontSize
+ Number
+ 14
+ Default font size in pixels for the text label in the nodes.
- nodes.group
- String
- none
- Default group for the nodes.
+ nodes.group
+ String
+ none
+ Default group for the nodes.
- nodes.image
- String
- none
- Default image url for the nodes. only applicable with shape image
.
+ nodes.image
+ String
+ none
+ Default image url for the nodes. only applicable with shape image
.
- nodes.widthMin
- Number
- 16
- The minimum width for a scaled image. Only applicable with shape image
.
+ nodes.widthMin
+ Number
+ 16
+ The minimum width for a scaled image. Only applicable with shape image
.
- nodes.widthMax
- Number
- 64
- The maximum width for a scaled image. Only applicable with shape image
.
+ nodes.widthMax
+ Number
+ 64
+ The maximum width for a scaled image. Only applicable with shape image
.
- nodes.shape
- String
- "ellipse"
- The default shape for all nodes.
- Choose from
- ellipse
(default), circle
, box
,
- database
, image
, label
, dot
,
- star
, triangle
, triangleDown
, and square
.
- This shape can be overridden by a group shape, or by a shape of an individual node.
+ nodes.shape
+ String
+ "ellipse"
+ The default shape for all nodes.
+ Choose from
+ ellipse
(default), circle
, box
,
+ database
, image
, label
, dot
,
+ star
, triangle
, triangleDown
, and square
.
+ This shape can be overridden by a group shape, or by a shape of an individual node.
- nodes.radius
- Number
- 5
- The default radius for a node. Only applicable with shape dot
.
+ nodes.radius
+ Number
+ 5
+ The default radius for a node. Only applicable with shape dot
.
- nodes.radiusMin
- Number
- 5
- The minimum radius for a scaled node. Only applicable with shape dot
.
+ nodes.radiusMin
+ Number
+ 5
+ The minimum radius for a scaled node. Only applicable with shape dot
.
- nodes.radiusMax
- Number
- 20
- The maximum radius for a scaled node. Only applicable with shape dot
.
+ nodes.radiusMax
+ Number
+ 20
+ The maximum radius for a scaled node. Only applicable with shape dot
.
- selectable
- Boolean
- true
- If true, nodes in the graph can be selected by clicking them.
- Long press can be used to select multiple nodes.
+ selectable
+ Boolean
+ true
+ If true, nodes in the graph can be selected by clicking them.
+ Long press can be used to select multiple nodes.
- stabilize
- Boolean
- true
- If true, the graph is stabilized before displaying it. If false,
- the nodes move to a stabe position visibly in an animated way.
+ stabilize
+ Boolean
+ true
+ If true, the graph is stabilized before displaying it. If false,
+ the nodes move to a stabe position visibly in an animated way.
- width
- String
- "400px"
- The width of the graph in pixels or as a percentage.
+ width
+ String
+ "400px"
+ The width of the graph in pixels or as a percentage.
@@ -857,254 +857,254 @@ var options = {
Groups
It is possible to specify custom styles for groups of nodes.
- Each node having assigned to this group gets the specified style.
- The options groups
is an object containing one or multiple groups,
- identified by a unique string, the groupname.
+ Each node having assigned to this group gets the specified style.
+ The options groups
is an object containing one or multiple groups,
+ identified by a unique string, the groupname.
- A group can have the following styles:
+ A group can have the following styles:
var options = {
- // ...
-
- groups: {
- mygroup: {
- shape: 'circle',
- color: {
- border: 'black',
- background: 'white',
- highlight: {
- border: 'yellow',
- background: 'orange'
- }
- }
- fontColor: 'red',
- fontSize: 18
+ // ...
+
+ groups: {
+ mygroup: {
+ shape: 'circle',
+ color: {
+ border: 'black',
+ background: 'white',
+ highlight: {
+ border: 'yellow',
+ background: 'orange'
}
- // add more groups here
+ }
+ fontColor: 'red',
+ fontSize: 18
}
+ // add more groups here
+ }
};
var nodes = [
- {id: 1, label: 'Node 1'}, // will get the default style
- {id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
- // ... more nodes
+ {id: 1, label: 'Node 1'}, // will get the default style
+ {id: 2, label: 'Node 2', group: 'mygroup'}, // will get the style from 'mygroup'
+ // ... more nodes
];
The following styles are available for groups:
-
- Name
- Type
- Default
- Description
-
-
-
- color
- String | Object
- Object
- Color of the node
-
-
-
- color.border
- String
- "#2B7CE9"
- Border color of the node
-
-
-
- color.background
- String
- "#97C2FC"
- Background color of the node
-
-
- color.highlight
- String
- "#D2E5FF"
- Color of the node when selected.
-
-
- color.highlight.background
- String
- "#D2E5FF"
- Background color of the node when selected.
-
-
- color.highlight.border
- String
- "#D2E5FF"
- Border color of the node when selected.
-
-
- image
- String
- none
- Default image for the nodes. Only applicable in combination with
- shape image
.
-
-
-
- fontColor
- String
- "black"
- Font color of the node.
-
-
- fontFace
- String
- "sans"
- Font name of the node, for example "verdana" or "arial".
-
-
- fontSize
- Number
- 14
- Font size for the node in pixels.
-
-
- shape
- String
- "ellipse"
- Choose from
- ellipse
(default), circle
, box
,
- database
, image
, label
, dot
,
- star
, triangle
, triangleDown
, and square
.
- In case of image, a property with name image must be provided, containing
- image urls.
-
-
- radius
- Number
- 5
- Default radius for the node. Only applicable in combination with
- shapes box
and dot
.
-
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+ color
+ String | Object
+ Object
+ Color of the node
+
+
+
+ color.border
+ String
+ "#2B7CE9"
+ Border color of the node
+
+
+
+ color.background
+ String
+ "#97C2FC"
+ Background color of the node
+
+
+ color.highlight
+ String
+ "#D2E5FF"
+ Color of the node when selected.
+
+
+ color.highlight.background
+ String
+ "#D2E5FF"
+ Background color of the node when selected.
+
+
+ color.highlight.border
+ String
+ "#D2E5FF"
+ Border color of the node when selected.
+
+
+ image
+ String
+ none
+ Default image for the nodes. Only applicable in combination with
+ shape image
.
+
+
+
+ fontColor
+ String
+ "black"
+ Font color of the node.
+
+
+ fontFace
+ String
+ "sans"
+ Font name of the node, for example "verdana" or "arial".
+
+
+ fontSize
+ Number
+ 14
+ Font size for the node in pixels.
+
+
+ shape
+ String
+ "ellipse"
+ Choose from
+ ellipse
(default), circle
, box
,
+ database
, image
, label
, dot
,
+ star
, triangle
, triangleDown
, and square
.
+ In case of image, a property with name image must be provided, containing
+ image urls.
+
+
+ radius
+ Number
+ 5
+ Default radius for the node. Only applicable in combination with
+ shapes box
and dot
.
+
Methods
- Graph supports the following methods.
+ Graph supports the following methods.
-
- Method
- Return Type
- Description
-
-
-
- setData(data)
- none
- Loads data. Parameter data
is an object containing
- nodes, edges, and options. Parameters nodes, edges are an Array.
- Options is a name-value map and is optional.
-
-
-
-
- setOptions(options)
- none
- Set options for the graph. The available options are described in
- the section Configuration Options .
-
-
-
-
- getSelection()
- Array of ids
- Returns an array with the ids of the selected nodes.
- Returns an empty array if no nodes are selected.
- The selections are not ordered.
-
-
-
-
- redraw()
- none
- Redraw the graph. Useful when the layout of the webpage changed.
-
-
-
- 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.
-
-
-
-
- setSize(width, height)
- none
- Parameters width
and height
are strings,
- containing a new size for the visualization. Size can be provided in pixels
- or in percentages.
-
+
+ Method
+ Return Type
+ Description
+
+
+
+ setData(data)
+ none
+ Loads data. Parameter data
is an object containing
+ nodes, edges, and options. Parameters nodes, edges are an Array.
+ Options is a name-value map and is optional.
+
+
+
+
+ setOptions(options)
+ none
+ Set options for the graph. The available options are described in
+ the section Configuration Options .
+
+
+
+
+ getSelection()
+ Array of ids
+ Returns an array with the ids of the selected nodes.
+ Returns an empty array if no nodes are selected.
+ The selections are not ordered.
+
+
+
+
+ redraw()
+ none
+ Redraw the graph. Useful when the layout of the webpage changed.
+
+
+
+ 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.
+
+
+
+
+ setSize(width, height)
+ none
+ Parameters width
and height
are strings,
+ containing a new size for the visualization. Size can be provided in pixels
+ or in percentages.
+
Events
- Graph fires events after one or multiple nodes are selected.
- The event can be catched by creating a listener.
+ Graph fires events after one or multiple nodes are selected.
+ The event can be catched by creating a listener.
- Here an example on how to catch a select
event.
+ Here an example on how to catch a select
event.
function onSelect() {
- alert('selected nodes: ' + graph.getSelection());
+ alert('selected nodes: ' + graph.getSelection());
}
vis.events.addListener(graph, 'select', onSelect);
- The following events are available.
+ The following events are available.
-
-
-
-
-
- name
- Description
- Properties
-
-
-
- select
- Fired after the user selects or unselects a node by clicking it,
- or when selecting a number of nodes by dragging a selection area
- around them. Not fired when the method setSelection
- is executed. The ids of the selected nodes can be retrieved via the
- method getSelection
.
-
- none
-
+
+
+
+
+
+ name
+ Description
+ Properties
+
+
+
+ select
+ Fired after the user selects or unselects a node by clicking it,
+ or when selecting a number of nodes by dragging a selection area
+ around them. Not fired when the method setSelection
+ is executed. The ids of the selected nodes can be retrieved via the
+ method getSelection
.
+
+ none
+
Data Policy
- All code and data is processed and rendered in the browser.
- No data is sent to any server.
+ All code and data is processed and rendered in the browser.
+ No data is sent to any server.
diff --git a/docs/index.html b/docs/index.html
index 6f907a0f..8be44e9c 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,201 +2,201 @@
- vis.js | documentation
+ vis.js | documentation
-
-
+
+
-
+
-
vis.js documentation
-
-
- Vis.js is a dynamic, browser based visualization library.
- The library is designed to be easy to use, handle large amounts
- of dynamic data, and enable manipulation of the data.
-
-
-
- The library is developed by
- Almende B.V.
-
-
-
Components
-
-
- Vis.js contains of the following components:
-
-
-
-
- DataSet .
- A flexible key/value based data set.
- Add, update, and remove items. Subscribe on changes in the data set.
- A DataSet can filter and order items, and convert fields of items.
-
-
- DataView .
- A filtered and/or formatted view on a DataSet.
-
-
- Graph .
- Display a graph or network with nodes and edges.
-
-
- Timeline .
- Display different types of data on a timeline. The timeline and the
- items on the timeline can be interactively moved, zoomed, and
- manipulated.
-
-
-
-
-
-
-
Install
-
-
npm
+
vis.js documentation
+
+
+ Vis.js is a dynamic, browser based visualization library.
+ The library is designed to be easy to use, handle large amounts
+ of dynamic data, and enable manipulation of the data.
+
+
+
+ The library is developed by
+ Almende B.V.
+
+
+
Components
+
+
+ Vis.js contains of the following components:
+
+
+
+
+ DataSet .
+ A flexible key/value based data set.
+ Add, update, and remove items. Subscribe on changes in the data set.
+ A DataSet can filter and order items, and convert fields of items.
+
+
+ DataView .
+ A filtered and/or formatted view on a DataSet.
+
+
+ Graph .
+ Display a graph or network with nodes and edges.
+
+
+ Timeline .
+ Display different types of data on a timeline. The timeline and the
+ items on the timeline can be interactively moved, zoomed, and
+ manipulated.
+
+
+
+
+
+
+
Install
+
+
npm
npm install vis
-
bower
+
bower
bower install vis
-
download
- Download the library from the website:
-
http://visjs.org .
+
download
+ Download the library from the website:
+
http://visjs.org .
-
Load
+
Load
-
- To use a component, include the javascript file of vis in your web page:
-
+
+ To use a component, include the javascript file of vis in your web page:
+
<!DOCTYPE HTML>
<html>
<head>
- <script src="components/vis/vis.js"></script>
+ <script src="components/vis/vis.js"></script>
</head>
<body>
<script type="text/javascript">
- // ... load a visualization
+ // ... load a visualization
</script>
</body>
</html>
-
- or load vis.js using require.js:
-
+
+ or load vis.js using require.js:
+
require.config({
- paths: {
- vis: 'path/to/vis',
- }
+ paths: {
+ vis: 'path/to/vis',
+ }
});
require(['vis'], function (math) {
- // ... load a visualization
+ // ... load a visualization
});
-
- A timeline can be instantiated as follows. Other components can be
- created in a similar way.
-
+
+ A timeline can be instantiated as follows. Other components can be
+ created in a similar way.
+
var timeline = new vis.Timeline(container, data, options);
-
- Where container
is an HTML element, data
is
- an Array with data or a DataSet, and options
is an optional
- object with configuration options for the component.
-
+
+ Where container
is an HTML element, data
is
+ an Array with data or a DataSet, and options
is an optional
+ object with configuration options for the component.
+
-
Use
+
Use
-
+
A basic example on using a Timeline is shown below. More examples can be
found in the examples directory of the project.
-
+ target="_blank">examples directory of the project.
+
<!DOCTYPE HTML>
<html>
<head>
- <title>Timeline basic demo</title>
- <script src="components/vis/vis.js"></script>
-
- <style type="text/css">
- body, html {
- font-family: sans-serif;
- }
- </style>
+ <title>Timeline basic demo</title>
+ <script src="components/vis/vis.js"></script>
+
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
- var container = document.getElementById('visualization');
- var data = [
- {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'}
- ];
- var options = {};
- var timeline = new vis.Timeline(container, data, options);
+ var container = document.getElementById('visualization');
+ var data = [
+ {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'}
+ ];
+ var options = {};
+ var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>
-
License
+
License
-
- Copyright (C) 2010-2013 Almende B.V.
-
+
+ Copyright (C) 2010-2013 Almende B.V.
+
-
- Licensed under the Apache License, Version 2.0 (the "License");
- you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
-
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
-
- http://www.apache.org/licenses/LICENSE-2.0
-
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+
diff --git a/docs/timeline.html b/docs/timeline.html
index 5c4d0424..ae3d1370 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -1,12 +1,12 @@
- vis.js | timeline documentation
+ vis.js | timeline documentation
-
-
+
+
-
+
@@ -17,65 +17,65 @@
Contents
Overview
- The Timeline is an interactive visualization chart to visualize data in time.
- The data items can take place on a single date, or have a start and end date (a range).
- You can freely move and zoom in the timeline by dragging and scrolling in the
- Timeline. Items can be created, edited, and deleted in the timeline.
- The time scale on the axis is adjusted automatically, and supports scales ranging
- from milliseconds to years.
+ The Timeline is an interactive visualization chart to visualize data in time.
+ The data items can take place on a single date, or have a start and end date (a range).
+ You can freely move and zoom in the timeline by dragging and scrolling in the
+ Timeline. Items can be created, edited, and deleted in the timeline.
+ The time scale on the axis is adjusted automatically, and supports scales ranging
+ from milliseconds to years.
Example
- The following code shows how to create a Timeline and provide it with data.
- More examples can be found in the examples directory.
+ The following code shows how to create a Timeline and provide it with data.
+ More examples can be found in the examples directory.
<!DOCTYPE HTML>
<html>
<head>
- <title>Timeline | Basic demo</title>
+ <title>Timeline | Basic demo</title>
- <style type="text/css">
- body, html {
- font-family: sans-serif;
- }
- </style>
+ <style type="text/css">
+ body, html {
+ font-family: sans-serif;
+ }
+ </style>
- <script src="../../vis.js"></script>
+ <script src="../../vis.js"></script>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
- var container = document.getElementById('visualization');
- var items = [
- {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'}
- ];
- var options = {};
- var timeline = new vis.Timeline(container, items, options);
+ var container = document.getElementById('visualization');
+ var items = [
+ {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'}
+ ];
+ var options = {};
+ var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>
@@ -84,8 +84,8 @@
Loading
- Install or download the vis.js library.
- in a subfolder of your project. Include the library script in the head of your html code:
+ Install or download the vis.js library.
+ in a subfolder of your project. Include the library script in the head of your html code:
@@ -98,199 +98,199 @@ The constructor of the Timeline is vis.Timeline
The constructor accepts three parameters:
-
- container
is the DOM element in which to create the graph.
-
-
- items
is an Array containing items. The properties of an
- item are described in section Data Format .
-
-
- options
is an optional Object containing a name-value map
- with options. Options can also be set using the method
- setOptions
.
-
+
+ container
is the DOM element in which to create the graph.
+
+
+ items
is an Array containing items. The properties of an
+ item are described in section Data Format .
+
+
+ options
is an optional Object containing a name-value map
+ with options. Options can also be set using the method
+ setOptions
.
+
- The timeline can be provided with two types of data:
+ The timeline can be provided with two types of data:
- Items containing a set of items to be displayed in time.
- Groups containing a set of groups used to group items
+ Items containing a set of items to be displayed in time.
+ Groups containing a set of groups used to group items
together.
Items
- The Timeline uses regular Arrays and Objects as data format.
- Data items can contain the properties start
,
- end
(optional), content
,
- group
(optional), and className
(optional).
+ The Timeline uses regular Arrays and Objects as data format.
+ Data items can contain the properties start
,
+ end
(optional), content
,
+ group
(optional), and className
(optional).
- A table is constructed as:
+ A table is constructed as:
var items = [
- {
- start: new Date(2010, 7, 15),
- end: new Date(2010, 8, 2), // end is optional
- content: 'Trajectory A'
- // Optional: fields 'id', 'type', 'group', 'className'
- }
- // more items...
+ {
+ start: new Date(2010, 7, 15),
+ end: new Date(2010, 8, 2), // end is optional
+ content: 'Trajectory A'
+ // Optional: fields 'id', 'type', 'group', 'className'
+ }
+ // more items...
]);
- The item properties are defined as:
+ The item properties are defined as:
-
- Name
- Type
- Required
- Description
-
-
- id
- String | Number
- no
- An id for the item. Using an id is not required but highly
- recommended. An id is needed when dynamically adding, updating,
- and removing items in a DataSet.
-
-
- start
- Date
- yes
- The start date of the item, for example new Date(2010,09,23)
.
-
-
- end
- Date
- no
- The end date of the item. The end date is optional, and can be left null
.
- If end date is provided, the item is displayed as a range.
- If not, the item is displayed as a box.
-
-
- content
- String
- yes
- The contents of the item. This can be plain text or html code.
-
-
- type
- String
- 'box'
- The type of the item. Can be 'box' (default), 'range', or 'point'.
-
-
-
-
- group
- any type
- no
- This field is optional. When the group column is provided,
- all items with the same group are placed on one line.
- A vertical axis is displayed showing the groups.
- Grouping items can be useful for example when showing availability of multiple
- people, rooms, or other resources next to each other.
-
-
-
- className
- String
- no
- This field is optional. A className can be used to give items
- an individual css style. For example, when an item has className
- 'red', one can define a css style
-
- .red {
- background-color: red;
- border-color: dark-red;
- }
-
.
- More details on how to style items can be found in the section
- Styles .
-
-
+
+ Name
+ Type
+ Required
+ Description
+
+
+ id
+ String | Number
+ no
+ An id for the item. Using an id is not required but highly
+ recommended. An id is needed when dynamically adding, updating,
+ and removing items in a DataSet.
+
+
+ start
+ Date
+ yes
+ The start date of the item, for example new Date(2010,09,23)
.
+
+
+ end
+ Date
+ no
+ The end date of the item. The end date is optional, and can be left null
.
+ If end date is provided, the item is displayed as a range.
+ If not, the item is displayed as a box.
+
+
+ content
+ String
+ yes
+ The contents of the item. This can be plain text or html code.
+
+
+ type
+ String
+ 'box'
+ The type of the item. Can be 'box' (default), 'range', or 'point'.
+
+
+
+
+ group
+ any type
+ no
+ This field is optional. When the group column is provided,
+ all items with the same group are placed on one line.
+ A vertical axis is displayed showing the groups.
+ Grouping items can be useful for example when showing availability of multiple
+ people, rooms, or other resources next to each other.
+
+
+
+ className
+ String
+ no
+ This field is optional. A className can be used to give items
+ an individual css style. For example, when an item has className
+ 'red', one can define a css style
+
+ .red {
+ background-color: red;
+ border-color: dark-red;
+ }
+
.
+ More details on how to style items can be found in the section
+ Styles .
+
+
Groups
- Like the items, groups are regular JavaScript Arrays and Objects.
- Using groups, items can be grouped together.
- Items are filtered per group, and displayed as
+ Like the items, groups are regular JavaScript Arrays and Objects.
+ Using groups, items can be grouped together.
+ Items are filtered per group, and displayed as
- Group items can contain the properties id
,
- content
, and className
(optional).
+ Group items can contain the properties id
,
+ content
, and className
(optional).
- Groups can be applied to a timeline using the method setGroups
.
- A table with groups can be created like:
+ Groups can be applied to a timeline using the method setGroups
.
+ A table with groups can be created like:
var groups = [
- {
- id: 1,
- content: 'Group 1'
- // Optional: a field 'className'
- }
- // more groups...
+ {
+ id: 1,
+ content: 'Group 1'
+ // Optional: a field 'className'
+ }
+ // more groups...
]);
- Groups can have the following properties:
+ Groups can have the following properties:
-
- Name
- Type
- Required
- Description
-
-
- id
- String | Number
- yes
- An id for the group. The group will display all items having a
- property group
which matches the id
- of the group.
-
-
- content
- String
- yes
- The contents of the group. This can be plain text or html code.
-
-
- className
- String
- no
- This field is optional. A className can be used to give groups
- an individual css style. For example, when a group has className
- 'red', one can define a css style
-
- .red {
- color: red;
- }
-
.
- More details on how to style groups can be found in the section
- Styles .
-
-
+
+ Name
+ Type
+ Required
+ Description
+
+
+ id
+ String | Number
+ yes
+ An id for the group. The group will display all items having a
+ property group
which matches the id
+ of the group.
+
+
+ content
+ String
+ yes
+ The contents of the group. This can be plain text or html code.
+
+
+ className
+ String
+ no
+ This field is optional. A className can be used to give groups
+ an individual css style. For example, when a group has className
+ 'red', one can define a css style
+
+ .red {
+ color: red;
+ }
+
.
+ More details on how to style groups can be found in the section
+ Styles .
+
+
@@ -298,282 +298,282 @@ var groups = [
Configuration Options
- Options can be used to customize the timeline.
- Options are defined as a JSON object. All options are optional.
+ Options can be used to customize the timeline.
+ Options are defined as a JSON object. All options are optional.
var options = {
- width: '100%',
- height: '30px'
+ width: '100%',
+ height: '30px'
};
- The following options are available.
+ The following options are available.
-
- Name
- Type
- Default
- Description
-
-
-
- align
- String
- "center"
- Alignment of items with type 'box'. Available values are
- 'center' (default), 'left', or 'right').
-
-
-
- autoResize
- boolean
- false
- If true, the Timeline will automatically detect when its
- container is resized, and redraw itself accordingly.
-
-
-
- end
- Date
- none
- The initial end date for the axis of the timeline.
- If not provided, the latest date present in the items set is taken as
- end date.
-
-
-
- groupOrder
- String | Function
- none
- Order the groups by a field name or custom sort function.
- By default, groups are not ordered.
-
-
-
-
- height
- String
- none
- The height of the timeline in pixels or as a percentage.
- When height is undefined or null, the height of the timeline is automatically
- adjusted to fit the contents.
- It is possible to set a maximum height using option maxHeight
- to prevent the timeline from getting too high in case of automatically
- calculated height.
-
-
-
-
- margin.axis
- Number
- 20
- The minimal margin in pixels between items and the time axis.
-
-
-
- margin.item
- Number
- 10
- The minimal margin in pixels between items.
-
-
-
- max
- Date
- none
- Set a maximum Date for the visible range.
- It will not be possible to move beyond this maximum.
-
-
-
-
- maxHeight
- Number
- none
- Specifies a maximum height for the Timeline in pixels.
-
-
-
-
- min
- Date
- none
- Set a minimum Date for the visible range.
- It will not be possible to move beyond this minimum.
-
-
-
-
- order
- Function
- none
- Provide a custom sort function to order the items. The order of the
- items is determining the way they are stacked. The function
- order is called with two parameters, both of type
- `vis.components.items.Item`.
-
-
-
-
- orientation
- String
- 'bottom'
- Orientation of the timeline: 'top' or 'bottom' (default).
- If orientation is 'bottom', the time axis is drawn at the bottom,
- and if 'top', the axis is drawn on top.
-
-
-
- padding
- Number
- 5
- The padding of items, needed to correctly calculate the size
- of item ranges. Must correspond with the css of item ranges.
-
-
-
- showCurrentTime
- boolean
- false
- Show a vertical bar at the current time.
-
-
-
- showCustomTime
- boolean
- false
- Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future.
-
-
-
-
-
- showMajorLabels
- boolean
- true
- By default, the timeline shows both minor and major date labels on the
- time axis.
- For example the minor labels show minutes and the major labels show hours.
- When showMajorLabels
is false
, no major labels
- are shown.
-
-
-
- showMinorLabels
- boolean
- true
- By default, the timeline shows both minor and major date labels on the
- time axis.
- For example the minor labels show minutes and the major labels show hours.
- When showMinorLabels
is false
, no minor labels
- are shown. When both showMajorLabels
and
- showMinorLabels
are false, no horizontal axis will be
- visible.
-
-
-
- start
- Date
- none
- The initial start date for the axis of the timeline.
- If not provided, the earliest date present in the events is taken as start date.
-
-
-
- type
- String
- 'box'
- Specifies the type for the timeline items. Choose from 'dot' or 'point'.
- Note that individual items can override this global type.
-
-
-
-
- width
- String
- '100%'
- The width of the timeline in pixels or as a percentage.
-
-
-
- zoomMax
- Number
- 315360000000000
- Set a maximum zoom interval for the visible range in milliseconds.
- It will not be possible to zoom out further than this maximum.
- Default value equals about 10000 years.
-
-
-
-
- zoomMin
- Number
- 10
- Set a minimum zoom interval for the visible range in milliseconds.
- It will not be possible to zoom in further than this minimum.
-
-
+
+ Name
+ Type
+ Default
+ Description
+
+
+
+ align
+ String
+ "center"
+ Alignment of items with type 'box'. Available values are
+ 'center' (default), 'left', or 'right').
+
+
+
+ autoResize
+ boolean
+ false
+ If true, the Timeline will automatically detect when its
+ container is resized, and redraw itself accordingly.
+
+
+
+ end
+ Date
+ none
+ The initial end date for the axis of the timeline.
+ If not provided, the latest date present in the items set is taken as
+ end date.
+
+
+
+ groupOrder
+ String | Function
+ none
+ Order the groups by a field name or custom sort function.
+ By default, groups are not ordered.
+
+
+
+
+ height
+ String
+ none
+ The height of the timeline in pixels or as a percentage.
+ When height is undefined or null, the height of the timeline is automatically
+ adjusted to fit the contents.
+ It is possible to set a maximum height using option maxHeight
+ to prevent the timeline from getting too high in case of automatically
+ calculated height.
+
+
+
+
+ margin.axis
+ Number
+ 20
+ The minimal margin in pixels between items and the time axis.
+
+
+
+ margin.item
+ Number
+ 10
+ The minimal margin in pixels between items.
+
+
+
+ max
+ Date
+ none
+ Set a maximum Date for the visible range.
+ It will not be possible to move beyond this maximum.
+
+
+
+
+ maxHeight
+ Number
+ none
+ Specifies a maximum height for the Timeline in pixels.
+
+
+
+
+ min
+ Date
+ none
+ Set a minimum Date for the visible range.
+ It will not be possible to move beyond this minimum.
+
+
+
+
+ order
+ Function
+ none
+ Provide a custom sort function to order the items. The order of the
+ items is determining the way they are stacked. The function
+ order is called with two parameters, both of type
+ `vis.components.items.Item`.
+
+
+
+
+ orientation
+ String
+ 'bottom'
+ Orientation of the timeline: 'top' or 'bottom' (default).
+ If orientation is 'bottom', the time axis is drawn at the bottom,
+ and if 'top', the axis is drawn on top.
+
+
+
+ padding
+ Number
+ 5
+ The padding of items, needed to correctly calculate the size
+ of item ranges. Must correspond with the css of item ranges.
+
+
+
+ showCurrentTime
+ boolean
+ false
+ Show a vertical bar at the current time.
+
+
+
+ showCustomTime
+ boolean
+ false
+ Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future.
+
+
+
+
+
+ showMajorLabels
+ boolean
+ true
+ By default, the timeline shows both minor and major date labels on the
+ time axis.
+ For example the minor labels show minutes and the major labels show hours.
+ When showMajorLabels
is false
, no major labels
+ are shown.
+
+
+
+ showMinorLabels
+ boolean
+ true
+ By default, the timeline shows both minor and major date labels on the
+ time axis.
+ For example the minor labels show minutes and the major labels show hours.
+ When showMinorLabels
is false
, no minor labels
+ are shown. When both showMajorLabels
and
+ showMinorLabels
are false, no horizontal axis will be
+ visible.
+
+
+
+ start
+ Date
+ none
+ The initial start date for the axis of the timeline.
+ If not provided, the earliest date present in the events is taken as start date.
+
+
+
+ type
+ String
+ 'box'
+ Specifies the type for the timeline items. Choose from 'dot' or 'point'.
+ Note that individual items can override this global type.
+
+
+
+
+ width
+ String
+ '100%'
+ The width of the timeline in pixels or as a percentage.
+
+
+
+ zoomMax
+ Number
+ 315360000000000
+ Set a maximum zoom interval for the visible range in milliseconds.
+ It will not be possible to zoom out further than this maximum.
+ Default value equals about 10000 years.
+
+
+
+
+ zoomMin
+ Number
+ 10
+ Set a minimum zoom interval for the visible range in milliseconds.
+ It will not be possible to zoom in further than this minimum.
+
+
Methods
- The Timeline supports the following methods.
+ The Timeline supports the following methods.
-
- Method
- Return Type
- Description
-
-
-
- getCustomTime()
- Date
- Retrieve the custom time. Only applicable when the option showCustomTime
is true.
-
-
-
- setCustomTime(time)
- none
- Adjust the custom time bar. Only applicable when the option showCustomTime
is true. time
is a Date object.
-
-
-
- setGroups(groups)
- none
- Set a data set with groups for the Timeline.
- groups
can be an Array with Objects,
- a DataSet, or a DataView. For each of the groups, the items of the
- timeline are filtered on the property group
, which
- must correspond with the id of the group.
-
-
-
- setItems(items)
- none
- Set a data set with items for the Timeline.
- items
can be an Array with Objects,
- a DataSet, or a DataView.
-
-
-
-
- setOptions(options)
- none
- Set or update options. It is possible to change any option
- of the timeline at any time. You can for example switch orientation
- on the fly.
-
-
+
+ Method
+ Return Type
+ Description
+
+
+
+ getCustomTime()
+ Date
+ Retrieve the custom time. Only applicable when the option showCustomTime
is true.
+
+
+
+ setCustomTime(time)
+ none
+ Adjust the custom time bar. Only applicable when the option showCustomTime
is true. time
is a Date object.
+
+
+
+ setGroups(groups)
+ none
+ Set a data set with groups for the Timeline.
+ groups
can be an Array with Objects,
+ a DataSet, or a DataView. For each of the groups, the items of the
+ timeline are filtered on the property group
, which
+ must correspond with the id of the group.
+
+
+
+ setItems(items)
+ none
+ Set a data set with items for the Timeline.
+ items
can be an Array with Objects,
+ a DataSet, or a DataView.
+
+
+
+
+ setOptions(options)
+ none
+ Set or update options. It is possible to change any option
+ of the timeline at any time. You can for example switch orientation
+ on the fly.
+
+
@@ -581,26 +581,26 @@ var options = {
Styles
- All parts of the Timeline have a class name and a default css style.
- The styles can be overwritten, which enables full customization of the layout
- of the Timeline.
+ All parts of the Timeline have a class name and a default css style.
+ The styles can be overwritten, which enables full customization of the layout
+ of the Timeline.
For example, to change the border and background color of all items, include the
- following code inside the head of your html code or in a separate stylesheet.
+ following code inside the head of your html code or in a separate stylesheet.
<style>
- .graph .item {
- border-color: orange;
- background-color: yellow;
- }
+ .graph .item {
+ border-color: orange;
+ background-color: yellow;
+ }
</style>
Data Policy
- All code and data is processed and rendered in the browser.
- No data is sent to any server.
+ All code and data is processed and rendered in the browser.
+ No data is sent to any server.
diff --git a/examples/graph/01_basic_usage.html b/examples/graph/01_basic_usage.html
index 3bed9c75..0698b9cb 100644
--- a/examples/graph/01_basic_usage.html
+++ b/examples/graph/01_basic_usage.html
@@ -1,17 +1,17 @@
- Graph | Basic usage
+ Graph | Basic usage
-
+
-
+
@@ -19,31 +19,31 @@
diff --git a/examples/graph/02_random_nodes.html b/examples/graph/02_random_nodes.html
index b048a69d..3d4b5a96 100755
--- a/examples/graph/02_random_nodes.html
+++ b/examples/graph/02_random_nodes.html
@@ -1,105 +1,105 @@
- Graph | Random nodes
+ Graph | Random nodes
-
+
-
+
-
+ // add event listeners
+ vis.events.addListener(graph, 'select', function(params) {
+ document.getElementById('selection').innerHTML =
+ 'Selection: ' + graph.getSelection();
+ });
+ }
+
diff --git a/examples/graph/03_images.html b/examples/graph/03_images.html
index f0235fb6..74e080cb 100755
--- a/examples/graph/03_images.html
+++ b/examples/graph/03_images.html
@@ -1,78 +1,78 @@
- Graph | Images
-
-
-
-
-
-
+ Graph | Images
+
+
+
+
+
+
diff --git a/examples/graph/04_shapes.html b/examples/graph/04_shapes.html
index 25b3f3ea..a13c8070 100755
--- a/examples/graph/04_shapes.html
+++ b/examples/graph/04_shapes.html
@@ -1,71 +1,71 @@
- Graph | Shapes
+ Graph | Shapes
-
+
-
+
-
+ }
+
+ // create a graph
+ var container = document.getElementById('mygraph');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {
+ stabilize: false
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/05_social_network.html b/examples/graph/05_social_network.html
index 480eca6b..327145db 100644
--- a/examples/graph/05_social_network.html
+++ b/examples/graph/05_social_network.html
@@ -1,76 +1,76 @@
- Graph | Social Network
+ Graph | Social Network
-
+
-
+
-
+ // create a graph
+ var container = document.getElementById('mygraph');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {};
+ graph = new vis.Graph(container, data, options);
+ }
+
- Icons: Scrap Icons by Deleket
+ Icons: Scrap Icons by Deleket
diff --git a/examples/graph/06_groups.html b/examples/graph/06_groups.html
index 59adfb51..f40b8e6a 100644
--- a/examples/graph/06_groups.html
+++ b/examples/graph/06_groups.html
@@ -1,156 +1,156 @@
- Graph | Groups
+ Graph | Groups
+
+
+
+
+
+
+
-
-
-
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/07_selections.html b/examples/graph/07_selections.html
index 421c3794..0cb31796 100644
--- a/examples/graph/07_selections.html
+++ b/examples/graph/07_selections.html
@@ -1,17 +1,17 @@
- Graph | Selections
+ Graph | Selections
-
+
-
+
@@ -20,45 +20,45 @@
diff --git a/examples/graph/08_mobile_friendly.html b/examples/graph/08_mobile_friendly.html
index de44f4a8..6601bee9 100755
--- a/examples/graph/08_mobile_friendly.html
+++ b/examples/graph/08_mobile_friendly.html
@@ -1,105 +1,105 @@
- Graph | Mobile friendly
+ Graph | Mobile friendly
-
+ #mygraph {
+ width: 100%;
+ height: 100%;
+ }
+
-
-
+
+
-
+
-
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/09_sizing.html b/examples/graph/09_sizing.html
index 67a48f8e..42ed7273 100644
--- a/examples/graph/09_sizing.html
+++ b/examples/graph/09_sizing.html
@@ -1,77 +1,77 @@
- Graph | Sizing
+ Graph | Sizing
-
+
-
+
-
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/10_multiline_text.html b/examples/graph/10_multiline_text.html
index 695d5fba..d7e2d1dd 100755
--- a/examples/graph/10_multiline_text.html
+++ b/examples/graph/10_multiline_text.html
@@ -1,47 +1,47 @@
- Graph | Multiline text
+ Graph | Multiline text
-
+
-
+
-
+ // create a graph
+ var container = document.getElementById('mygraph');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {};
+ var graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/11_custom_style.html b/examples/graph/11_custom_style.html
index 20e9dd59..99225208 100644
--- a/examples/graph/11_custom_style.html
+++ b/examples/graph/11_custom_style.html
@@ -1,128 +1,128 @@
- Graph | Custom style
+ Graph | Custom style
-
+
-
+
-
+ };
+
+ // create the graph
+ var container = document.getElementById('mygraph');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/12_scalable_images.html b/examples/graph/12_scalable_images.html
index 8a3da963..2a87ac62 100644
--- a/examples/graph/12_scalable_images.html
+++ b/examples/graph/12_scalable_images.html
@@ -1,80 +1,80 @@
- Graph | Scalable images
+ Graph | Scalable images
-
+
-
+
-
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/13_dashed_lines.html b/examples/graph/13_dashed_lines.html
index 6f954672..3fdc2f5f 100644
--- a/examples/graph/13_dashed_lines.html
+++ b/examples/graph/13_dashed_lines.html
@@ -1,65 +1,65 @@
- Graph | Dashed lines
+ Graph | Dashed lines
-
+
-
+
-
+ // create the graph
+ var container = document.getElementById('mygraph');
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {
+ nodes: {
+ shape: 'box'
+ },
+ edges: {
+ length: 180
+ },
+ stabilize: false
+ };
+ var graph = new vis.Graph(container, data, options);
+ }
+
-
- This example shows the different options for dashed lines.
-
+
+ This example shows the different options for dashed lines.
+
-
+
diff --git a/examples/graph/14_dot_language.html b/examples/graph/14_dot_language.html
index 7d86df95..241f4403 100644
--- a/examples/graph/14_dot_language.html
+++ b/examples/graph/14_dot_language.html
@@ -1,18 +1,18 @@
- Graph | DOT Language
+ Graph | DOT Language
-
+
-
+
-
+
diff --git a/examples/graph/15_dot_language_playground.html b/examples/graph/15_dot_language_playground.html
index bf757cd8..dc5c6931 100644
--- a/examples/graph/15_dot_language_playground.html
+++ b/examples/graph/15_dot_language_playground.html
@@ -1,201 +1,201 @@
- Graph | DOT language playground
-
-
-
-
+ textarea.example {
+ display: none;
+ }
+
-
-
-
-
- DOT language playground
-
-
-
- Draw
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ DOT language playground
+
+
+
+ Draw
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/graph/16_dynamic_data.html b/examples/graph/16_dynamic_data.html
index b4ccb596..ea3040de 100644
--- a/examples/graph/16_dynamic_data.html
+++ b/examples/graph/16_dynamic_data.html
@@ -1,264 +1,264 @@
- Graph | DataSet
+ Graph | DataSet
-
+ #graph {
+ width: 100%;
+ height: 400px;
+ border: 1px solid lightgray;
+ }
+
-
-
+
+
-
+ // create a graph
+ var container = $('#graph').get(0);
+ var data = {
+ nodes: nodes,
+ edges: edges
+ };
+ var options = {};
+ graph = new vis.Graph(container, data, options);
+ });
+
- This example demonstrates dynamically adding, updating and removing nodes
- and edges using a DataSet.
+ This example demonstrates dynamically adding, updating and removing nodes
+ and edges using a DataSet.
Adjust
-
-
- Node
-
-
-
- Edge
-
-
-
+
+
+ Node
+
+
+
+ Edge
+
+
+
View
-
-
-
-
-
-
-
- Nodes
-
-
+
+
+
+
+
+
+
+ Nodes
+
+
-
- Edges
-
-
+
+ Edges
+
+
-
- Graph
-
-
-
+
+ Graph
+
+
+
diff --git a/examples/graph/17_network_info.html b/examples/graph/17_network_info.html
index 62cd9eef..ab73f517 100644
--- a/examples/graph/17_network_info.html
+++ b/examples/graph/17_network_info.html
@@ -1,149 +1,149 @@
- Graph | Images
-
-
+
+
+
+
-
-
+ };
+ graph = new vis.Graph(container, data, options);
+ }
+
diff --git a/examples/graph/graphviz/graphviz_gallery.html b/examples/graph/graphviz/graphviz_gallery.html
index 3260187d..6e17feb2 100644
--- a/examples/graph/graphviz/graphviz_gallery.html
+++ b/examples/graph/graphviz/graphviz_gallery.html
@@ -1,86 +1,86 @@
- Graph | Graphviz Gallery
+ Graph | Graphviz Gallery
-
-
+
+
-
+
- The following examples are unmodified copies from the
- Graphviz Gallery .
+ The following examples are unmodified copies from the
+ Graphviz Gallery .
- Note that some style attributes of Graphviz are not supported by vis.js,
- and that vis.js offers options not supported by Graphviz (which could make
- some examples look much nicer).
+ Note that some style attributes of Graphviz are not supported by vis.js,
+ and that vis.js offers options not supported by Graphviz (which could make
+ some examples look much nicer).
- Select an example:
-
- fsm
- hello
- process
- siblings
- softmaint
- traffic_lights
- transparency
- twopi2
- unix
- world
-
+ Select an example:
+
+ fsm
+ hello
+ process
+ siblings
+ softmaint
+ traffic_lights
+ transparency
+ twopi2
+ unix
+ world
+
diff --git a/examples/graph/index.html b/examples/graph/index.html
index 0fd44cfb..7cb11657 100644
--- a/examples/graph/index.html
+++ b/examples/graph/index.html
@@ -2,34 +2,34 @@
- vis.js | graph examples
+ vis.js | graph examples
-
+
diff --git a/package.json b/package.json
index 61bfcefb..c5954b62 100644
--- a/package.json
+++ b/package.json
@@ -1,34 +1,34 @@
{
- "name": "vis",
- "version": "0.3.0-SNAPSHOT",
- "description": "A dynamic, browser-based visualization library.",
- "homepage": "http://visjs.org/",
- "repository": {
- "type": "git",
- "url": "git://github.com/almende/vis.git"
- },
- "keywords": [
- "vis",
- "visualization",
- "web based",
- "browser based",
- "javascript",
- "chart",
- "linechart",
- "timeline",
- "graph",
- "network",
- "browser"
- ],
- "scripts": {
- "test": "jake test --trace"
- },
- "dependencies": {},
- "devDependencies": {
- "jake": "latest",
- "jake-utils": "latest",
- "browserify": "latest",
- "moment": "latest",
- "hammerjs": "latest"
- }
+ "name": "vis",
+ "version": "0.3.0-SNAPSHOT",
+ "description": "A dynamic, browser-based visualization library.",
+ "homepage": "http://visjs.org/",
+ "repository": {
+ "type": "git",
+ "url": "git://github.com/almende/vis.git"
+ },
+ "keywords": [
+ "vis",
+ "visualization",
+ "web based",
+ "browser based",
+ "javascript",
+ "chart",
+ "linechart",
+ "timeline",
+ "graph",
+ "network",
+ "browser"
+ ],
+ "scripts": {
+ "test": "jake test --trace"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "jake": "latest",
+ "jake-utils": "latest",
+ "browserify": "latest",
+ "moment": "latest",
+ "hammerjs": "latest"
+ }
}
diff --git a/src/DataSet.js b/src/DataSet.js
index fb274a44..36604a58 100644
--- a/src/DataSet.js
+++ b/src/DataSet.js
@@ -36,31 +36,31 @@
*/
// TODO: add a DataSet constructor DataSet(data, options)
function DataSet (options) {
- this.id = util.randomUUID();
-
- this.options = options || {};
- this.data = {}; // map with data indexed by id
- this.fieldId = this.options.fieldId || 'id'; // name of the field containing id
- this.convert = {}; // field types by field name
-
- if (this.options.convert) {
- for (var field in this.options.convert) {
- if (this.options.convert.hasOwnProperty(field)) {
- var value = this.options.convert[field];
- if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
- this.convert[field] = 'Date';
- }
- else {
- this.convert[field] = value;
- }
- }
+ this.id = util.randomUUID();
+
+ this.options = options || {};
+ this.data = {}; // map with data indexed by id
+ this.fieldId = this.options.fieldId || 'id'; // name of the field containing id
+ this.convert = {}; // field types by field name
+
+ if (this.options.convert) {
+ for (var field in this.options.convert) {
+ if (this.options.convert.hasOwnProperty(field)) {
+ var value = this.options.convert[field];
+ if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
+ this.convert[field] = 'Date';
}
+ else {
+ this.convert[field] = value;
+ }
+ }
}
+ }
- // event subscribers
- this.subscribers = {};
+ // event subscribers
+ this.subscribers = {};
- this.internalIds = {}; // internally generated id's
+ this.internalIds = {}; // internally generated id's
}
/**
@@ -73,15 +73,15 @@ function DataSet (options) {
* {String | Number} senderId
*/
DataSet.prototype.subscribe = function (event, callback) {
- var subscribers = this.subscribers[event];
- if (!subscribers) {
- subscribers = [];
- this.subscribers[event] = subscribers;
- }
-
- subscribers.push({
- callback: callback
- });
+ var subscribers = this.subscribers[event];
+ if (!subscribers) {
+ subscribers = [];
+ this.subscribers[event] = subscribers;
+ }
+
+ subscribers.push({
+ callback: callback
+ });
};
/**
@@ -90,12 +90,12 @@ DataSet.prototype.subscribe = function (event, callback) {
* @param {function} callback
*/
DataSet.prototype.unsubscribe = function (event, callback) {
- var subscribers = this.subscribers[event];
- if (subscribers) {
- this.subscribers[event] = subscribers.filter(function (listener) {
- return (listener.callback != callback);
- });
- }
+ var subscribers = this.subscribers[event];
+ if (subscribers) {
+ this.subscribers[event] = subscribers.filter(function (listener) {
+ return (listener.callback != callback);
+ });
+ }
};
/**
@@ -106,24 +106,24 @@ DataSet.prototype.unsubscribe = function (event, callback) {
* @private
*/
DataSet.prototype._trigger = function (event, params, senderId) {
- if (event == '*') {
- throw new Error('Cannot trigger event *');
- }
-
- var subscribers = [];
- if (event in this.subscribers) {
- subscribers = subscribers.concat(this.subscribers[event]);
- }
- if ('*' in this.subscribers) {
- subscribers = subscribers.concat(this.subscribers['*']);
- }
-
- for (var i = 0; i < subscribers.length; i++) {
- var subscriber = subscribers[i];
- if (subscriber.callback) {
- subscriber.callback(event, params, senderId || null);
- }
- }
+ if (event == '*') {
+ throw new Error('Cannot trigger event *');
+ }
+
+ var subscribers = [];
+ if (event in this.subscribers) {
+ subscribers = subscribers.concat(this.subscribers[event]);
+ }
+ if ('*' in this.subscribers) {
+ subscribers = subscribers.concat(this.subscribers['*']);
+ }
+
+ for (var i = 0; i < subscribers.length; i++) {
+ var subscriber = subscribers[i];
+ if (subscriber.callback) {
+ subscriber.callback(event, params, senderId || null);
+ }
+ }
};
/**
@@ -134,45 +134,45 @@ DataSet.prototype._trigger = function (event, params, senderId) {
* @return {Array} addedIds Array with the ids of the added items
*/
DataSet.prototype.add = function (data, senderId) {
- var addedIds = [],
- id,
- me = this;
-
- if (data instanceof Array) {
- // Array
- for (var i = 0, len = data.length; i < len; i++) {
- id = me._addItem(data[i]);
- addedIds.push(id);
- }
- }
- else if (util.isDataTable(data)) {
- // Google DataTable
- var columns = this._getColumnNames(data);
- for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
- var item = {};
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- item[field] = data.getValue(row, col);
- }
-
- id = me._addItem(item);
- addedIds.push(id);
- }
- }
- else if (data instanceof Object) {
- // Single item
- id = me._addItem(data);
- addedIds.push(id);
- }
- else {
- throw new Error('Unknown dataType');
- }
-
- if (addedIds.length) {
- this._trigger('add', {items: addedIds}, senderId);
- }
-
- return addedIds;
+ var addedIds = [],
+ id,
+ me = this;
+
+ if (data instanceof Array) {
+ // Array
+ for (var i = 0, len = data.length; i < len; i++) {
+ id = me._addItem(data[i]);
+ addedIds.push(id);
+ }
+ }
+ else if (util.isDataTable(data)) {
+ // Google DataTable
+ var columns = this._getColumnNames(data);
+ for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+ var item = {};
+ for (var col = 0, cols = columns.length; col < cols; col++) {
+ var field = columns[col];
+ item[field] = data.getValue(row, col);
+ }
+
+ id = me._addItem(item);
+ addedIds.push(id);
+ }
+ }
+ else if (data instanceof Object) {
+ // Single item
+ id = me._addItem(data);
+ addedIds.push(id);
+ }
+ else {
+ throw new Error('Unknown dataType');
+ }
+
+ if (addedIds.length) {
+ this._trigger('add', {items: addedIds}, senderId);
+ }
+
+ return addedIds;
};
/**
@@ -182,60 +182,60 @@ DataSet.prototype.add = function (data, senderId) {
* @return {Array} updatedIds The ids of the added or updated items
*/
DataSet.prototype.update = function (data, senderId) {
- var addedIds = [],
- updatedIds = [],
- me = this,
- fieldId = me.fieldId;
-
- var addOrUpdate = function (item) {
- var id = item[fieldId];
- if (me.data[id]) {
- // update item
- id = me._updateItem(item);
- updatedIds.push(id);
- }
- else {
- // add new item
- id = me._addItem(item);
- addedIds.push(id);
- }
- };
-
- if (data instanceof Array) {
- // Array
- for (var i = 0, len = data.length; i < len; i++) {
- addOrUpdate(data[i]);
- }
- }
- else if (util.isDataTable(data)) {
- // Google DataTable
- var columns = this._getColumnNames(data);
- for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
- var item = {};
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- item[field] = data.getValue(row, col);
- }
-
- addOrUpdate(item);
- }
- }
- else if (data instanceof Object) {
- // Single item
- addOrUpdate(data);
+ var addedIds = [],
+ updatedIds = [],
+ me = this,
+ fieldId = me.fieldId;
+
+ var addOrUpdate = function (item) {
+ var id = item[fieldId];
+ if (me.data[id]) {
+ // update item
+ id = me._updateItem(item);
+ updatedIds.push(id);
}
else {
- throw new Error('Unknown dataType');
- }
-
- if (addedIds.length) {
- this._trigger('add', {items: addedIds}, senderId);
- }
- if (updatedIds.length) {
- this._trigger('update', {items: updatedIds}, senderId);
- }
-
- return addedIds.concat(updatedIds);
+ // add new item
+ id = me._addItem(item);
+ addedIds.push(id);
+ }
+ };
+
+ if (data instanceof Array) {
+ // Array
+ for (var i = 0, len = data.length; i < len; i++) {
+ addOrUpdate(data[i]);
+ }
+ }
+ else if (util.isDataTable(data)) {
+ // Google DataTable
+ var columns = this._getColumnNames(data);
+ for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+ var item = {};
+ for (var col = 0, cols = columns.length; col < cols; col++) {
+ var field = columns[col];
+ item[field] = data.getValue(row, col);
+ }
+
+ addOrUpdate(item);
+ }
+ }
+ else if (data instanceof Object) {
+ // Single item
+ addOrUpdate(data);
+ }
+ else {
+ throw new Error('Unknown dataType');
+ }
+
+ if (addedIds.length) {
+ this._trigger('add', {items: addedIds}, senderId);
+ }
+ if (updatedIds.length) {
+ this._trigger('update', {items: updatedIds}, senderId);
+ }
+
+ return addedIds.concat(updatedIds);
};
/**
@@ -274,138 +274,138 @@ DataSet.prototype.update = function (data, senderId) {
* @throws Error
*/
DataSet.prototype.get = function (args) {
- var me = this;
-
- // parse the arguments
- var id, ids, options, data;
- var firstType = util.getType(arguments[0]);
- if (firstType == 'String' || firstType == 'Number') {
- // get(id [, options] [, data])
- id = arguments[0];
- options = arguments[1];
- data = arguments[2];
- }
- else if (firstType == 'Array') {
- // get(ids [, options] [, data])
- ids = arguments[0];
- options = arguments[1];
- data = arguments[2];
+ var me = this;
+
+ // parse the arguments
+ var id, ids, options, data;
+ var firstType = util.getType(arguments[0]);
+ if (firstType == 'String' || firstType == 'Number') {
+ // get(id [, options] [, data])
+ id = arguments[0];
+ options = arguments[1];
+ data = arguments[2];
+ }
+ else if (firstType == 'Array') {
+ // get(ids [, options] [, data])
+ ids = arguments[0];
+ options = arguments[1];
+ data = arguments[2];
+ }
+ else {
+ // get([, options] [, data])
+ options = arguments[0];
+ data = arguments[1];
+ }
+
+ // determine the return type
+ var type;
+ if (options && options.type) {
+ type = (options.type == 'DataTable') ? 'DataTable' : 'Array';
+
+ if (data && (type != util.getType(data))) {
+ throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
+ 'does not correspond with specified options.type (' + options.type + ')');
+ }
+ if (type == 'DataTable' && !util.isDataTable(data)) {
+ throw new Error('Parameter "data" must be a DataTable ' +
+ 'when options.type is "DataTable"');
+ }
+ }
+ else if (data) {
+ type = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+ }
+ else {
+ type = 'Array';
+ }
+
+ // build options
+ var convert = options && options.convert || this.options.convert;
+ var filter = options && options.filter;
+ var items = [], item, itemId, i, len;
+
+ // convert items
+ if (id != undefined) {
+ // return a single item
+ item = me._getItem(id, convert);
+ if (filter && !filter(item)) {
+ item = null;
+ }
+ }
+ else if (ids != undefined) {
+ // return a subset of items
+ for (i = 0, len = ids.length; i < len; i++) {
+ item = me._getItem(ids[i], convert);
+ if (!filter || filter(item)) {
+ items.push(item);
+ }
+ }
+ }
+ else {
+ // return all items
+ for (itemId in this.data) {
+ if (this.data.hasOwnProperty(itemId)) {
+ item = me._getItem(itemId, convert);
+ if (!filter || filter(item)) {
+ items.push(item);
+ }
+ }
+ }
+ }
+
+ // order the results
+ if (options && options.order && id == undefined) {
+ this._sort(items, options.order);
+ }
+
+ // filter fields of the items
+ if (options && options.fields) {
+ var fields = options.fields;
+ if (id != undefined) {
+ item = this._filterFields(item, fields);
}
else {
- // get([, options] [, data])
- options = arguments[0];
- data = arguments[1];
+ for (i = 0, len = items.length; i < len; i++) {
+ items[i] = this._filterFields(items[i], fields);
+ }
}
+ }
- // determine the return type
- var type;
- if (options && options.type) {
- type = (options.type == 'DataTable') ? 'DataTable' : 'Array';
-
- if (data && (type != util.getType(data))) {
- throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
- 'does not correspond with specified options.type (' + options.type + ')');
- }
- if (type == 'DataTable' && !util.isDataTable(data)) {
- throw new Error('Parameter "data" must be a DataTable ' +
- 'when options.type is "DataTable"');
- }
- }
- else if (data) {
- type = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+ // return the results
+ if (type == 'DataTable') {
+ var columns = this._getColumnNames(data);
+ if (id != undefined) {
+ // append a single item to the data table
+ me._appendRow(data, columns, item);
}
else {
- type = 'Array';
- }
-
- // build options
- var convert = options && options.convert || this.options.convert;
- var filter = options && options.filter;
- var items = [], item, itemId, i, len;
-
- // convert items
+ // copy the items to the provided data table
+ for (i = 0, len = items.length; i < len; i++) {
+ me._appendRow(data, columns, items[i]);
+ }
+ }
+ return data;
+ }
+ else {
+ // return an array
if (id != undefined) {
- // return a single item
- item = me._getItem(id, convert);
- if (filter && !filter(item)) {
- item = null;
- }
- }
- else if (ids != undefined) {
- // return a subset of items
- for (i = 0, len = ids.length; i < len; i++) {
- item = me._getItem(ids[i], convert);
- if (!filter || filter(item)) {
- items.push(item);
- }
- }
+ // a single item
+ return item;
}
else {
- // return all items
- for (itemId in this.data) {
- if (this.data.hasOwnProperty(itemId)) {
- item = me._getItem(itemId, convert);
- if (!filter || filter(item)) {
- items.push(item);
- }
- }
- }
- }
-
- // order the results
- if (options && options.order && id == undefined) {
- this._sort(items, options.order);
- }
-
- // filter fields of the items
- if (options && options.fields) {
- var fields = options.fields;
- if (id != undefined) {
- item = this._filterFields(item, fields);
- }
- else {
- for (i = 0, len = items.length; i < len; i++) {
- items[i] = this._filterFields(items[i], fields);
- }
- }
- }
-
- // return the results
- if (type == 'DataTable') {
- var columns = this._getColumnNames(data);
- if (id != undefined) {
- // append a single item to the data table
- me._appendRow(data, columns, item);
- }
- else {
- // copy the items to the provided data table
- for (i = 0, len = items.length; i < len; i++) {
- me._appendRow(data, columns, items[i]);
- }
+ // multiple items
+ if (data) {
+ // copy the items to the provided array
+ for (i = 0, len = items.length; i < len; i++) {
+ data.push(items[i]);
}
return data;
+ }
+ else {
+ // just return our array
+ return items;
+ }
}
- else {
- // return an array
- if (id != undefined) {
- // a single item
- return item;
- }
- else {
- // multiple items
- if (data) {
- // copy the items to the provided array
- for (i = 0, len = items.length; i < len; i++) {
- data.push(items[i]);
- }
- return data;
- }
- else {
- // just return our array
- return items;
- }
- }
- }
+ }
};
/**
@@ -417,78 +417,78 @@ DataSet.prototype.get = function (args) {
* @return {Array} ids
*/
DataSet.prototype.getIds = function (options) {
- var data = this.data,
- filter = options && options.filter,
- order = options && options.order,
- convert = options && options.convert || this.options.convert,
- i,
- len,
- id,
- item,
- items,
- ids = [];
-
- if (filter) {
- // get filtered items
- if (order) {
- // create ordered list
- items = [];
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (filter(item)) {
- items.push(item);
- }
- }
- }
-
- this._sort(items, order);
-
- for (i = 0, len = items.length; i < len; i++) {
- ids[i] = items[i][this.fieldId];
- }
- }
- else {
- // create unordered list
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (filter(item)) {
- ids.push(item[this.fieldId]);
- }
- }
- }
+ var data = this.data,
+ filter = options && options.filter,
+ order = options && options.order,
+ convert = options && options.convert || this.options.convert,
+ i,
+ len,
+ id,
+ item,
+ items,
+ ids = [];
+
+ if (filter) {
+ // get filtered items
+ if (order) {
+ // create ordered list
+ items = [];
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (filter(item)) {
+ items.push(item);
+ }
}
+ }
+
+ this._sort(items, order);
+
+ for (i = 0, len = items.length; i < len; i++) {
+ ids[i] = items[i][this.fieldId];
+ }
}
else {
- // get all items
- if (order) {
- // create an ordered list
- items = [];
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- items.push(data[id]);
- }
- }
-
- this._sort(items, order);
-
- for (i = 0, len = items.length; i < len; i++) {
- ids[i] = items[i][this.fieldId];
- }
+ // create unordered list
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (filter(item)) {
+ ids.push(item[this.fieldId]);
+ }
+ }
+ }
+ }
+ }
+ else {
+ // get all items
+ if (order) {
+ // create an ordered list
+ items = [];
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ items.push(data[id]);
}
- else {
- // create unordered list
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = data[id];
- ids.push(item[this.fieldId]);
- }
- }
+ }
+
+ this._sort(items, order);
+
+ for (i = 0, len = items.length; i < len; i++) {
+ ids[i] = items[i][this.fieldId];
+ }
+ }
+ else {
+ // create unordered list
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = data[id];
+ ids.push(item[this.fieldId]);
}
+ }
}
+ }
- return ids;
+ return ids;
};
/**
@@ -503,33 +503,33 @@ DataSet.prototype.getIds = function (options) {
* a field name or custom sort function.
*/
DataSet.prototype.forEach = function (callback, options) {
- var filter = options && options.filter,
- convert = options && options.convert || this.options.convert,
- data = this.data,
- item,
- id;
-
- if (options && options.order) {
- // execute forEach on ordered list
- var items = this.get(options);
-
- for (var i = 0, len = items.length; i < len; i++) {
- item = items[i];
- id = item[this.fieldId];
- callback(item, id);
- }
- }
- else {
- // unordered
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (!filter || filter(item)) {
- callback(item, id);
- }
- }
- }
- }
+ var filter = options && options.filter,
+ convert = options && options.convert || this.options.convert,
+ data = this.data,
+ item,
+ id;
+
+ if (options && options.order) {
+ // execute forEach on ordered list
+ var items = this.get(options);
+
+ for (var i = 0, len = items.length; i < len; i++) {
+ item = items[i];
+ id = item[this.fieldId];
+ callback(item, id);
+ }
+ }
+ else {
+ // unordered
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (!filter || filter(item)) {
+ callback(item, id);
+ }
+ }
+ }
+ }
};
/**
@@ -544,28 +544,28 @@ DataSet.prototype.forEach = function (callback, options) {
* @return {Object[]} mappedItems
*/
DataSet.prototype.map = function (callback, options) {
- var filter = options && options.filter,
- convert = options && options.convert || this.options.convert,
- mappedItems = [],
- data = this.data,
- item;
-
- // convert and filter items
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (!filter || filter(item)) {
- mappedItems.push(callback(item, id));
- }
- }
- }
-
- // order items
- if (options && options.order) {
- this._sort(mappedItems, options.order);
- }
-
- return mappedItems;
+ var filter = options && options.filter,
+ convert = options && options.convert || this.options.convert,
+ mappedItems = [],
+ data = this.data,
+ item;
+
+ // convert and filter items
+ for (var id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (!filter || filter(item)) {
+ mappedItems.push(callback(item, id));
+ }
+ }
+ }
+
+ // order items
+ if (options && options.order) {
+ this._sort(mappedItems, options.order);
+ }
+
+ return mappedItems;
};
/**
@@ -576,15 +576,15 @@ DataSet.prototype.map = function (callback, options) {
* @private
*/
DataSet.prototype._filterFields = function (item, fields) {
- var filteredItem = {};
+ var filteredItem = {};
- for (var field in item) {
- if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
- filteredItem[field] = item[field];
- }
+ for (var field in item) {
+ if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
+ filteredItem[field] = item[field];
}
+ }
- return filteredItem;
+ return filteredItem;
};
/**
@@ -594,24 +594,24 @@ DataSet.prototype._filterFields = function (item, fields) {
* @private
*/
DataSet.prototype._sort = function (items, order) {
- if (util.isString(order)) {
- // order by provided field name
- var name = order; // field name
- items.sort(function (a, b) {
- var av = a[name];
- var bv = b[name];
- return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
- });
- }
- else if (typeof order === 'function') {
- // order by sort function
- items.sort(order);
- }
- // TODO: extend order by an Object {field:String, direction:String}
- // where direction can be 'asc' or 'desc'
- else {
- throw new TypeError('Order must be a function or a string');
- }
+ if (util.isString(order)) {
+ // order by provided field name
+ var name = order; // field name
+ items.sort(function (a, b) {
+ var av = a[name];
+ var bv = b[name];
+ return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
+ });
+ }
+ else if (typeof order === 'function') {
+ // order by sort function
+ items.sort(order);
+ }
+ // TODO: extend order by an Object {field:String, direction:String}
+ // where direction can be 'asc' or 'desc'
+ else {
+ throw new TypeError('Order must be a function or a string');
+ }
};
/**
@@ -622,29 +622,29 @@ DataSet.prototype._sort = function (items, order) {
* @return {Array} removedIds
*/
DataSet.prototype.remove = function (id, senderId) {
- var removedIds = [],
- i, len, removedId;
-
- if (id instanceof Array) {
- for (i = 0, len = id.length; i < len; i++) {
- removedId = this._remove(id[i]);
- if (removedId != null) {
- removedIds.push(removedId);
- }
- }
+ var removedIds = [],
+ i, len, removedId;
+
+ if (id instanceof Array) {
+ for (i = 0, len = id.length; i < len; i++) {
+ removedId = this._remove(id[i]);
+ if (removedId != null) {
+ removedIds.push(removedId);
+ }
}
- else {
- removedId = this._remove(id);
- if (removedId != null) {
- removedIds.push(removedId);
- }
+ }
+ else {
+ removedId = this._remove(id);
+ if (removedId != null) {
+ removedIds.push(removedId);
}
+ }
- if (removedIds.length) {
- this._trigger('remove', {items: removedIds}, senderId);
- }
+ if (removedIds.length) {
+ this._trigger('remove', {items: removedIds}, senderId);
+ }
- return removedIds;
+ return removedIds;
};
/**
@@ -654,22 +654,22 @@ DataSet.prototype.remove = function (id, senderId) {
* @private
*/
DataSet.prototype._remove = function (id) {
- if (util.isNumber(id) || util.isString(id)) {
- if (this.data[id]) {
- delete this.data[id];
- delete this.internalIds[id];
- return id;
- }
- }
- else if (id instanceof Object) {
- var itemId = id[this.fieldId];
- if (itemId && this.data[itemId]) {
- delete this.data[itemId];
- delete this.internalIds[itemId];
- return itemId;
- }
- }
- return null;
+ if (util.isNumber(id) || util.isString(id)) {
+ if (this.data[id]) {
+ delete this.data[id];
+ delete this.internalIds[id];
+ return id;
+ }
+ }
+ else if (id instanceof Object) {
+ var itemId = id[this.fieldId];
+ if (itemId && this.data[itemId]) {
+ delete this.data[itemId];
+ delete this.internalIds[itemId];
+ return itemId;
+ }
+ }
+ return null;
};
/**
@@ -678,14 +678,14 @@ DataSet.prototype._remove = function (id) {
* @return {Array} removedIds The ids of all removed items
*/
DataSet.prototype.clear = function (senderId) {
- var ids = Object.keys(this.data);
+ var ids = Object.keys(this.data);
- this.data = {};
- this.internalIds = {};
+ this.data = {};
+ this.internalIds = {};
- this._trigger('remove', {items: ids}, senderId);
+ this._trigger('remove', {items: ids}, senderId);
- return ids;
+ return ids;
};
/**
@@ -694,22 +694,22 @@ DataSet.prototype.clear = function (senderId) {
* @return {Object | null} item Item containing max value, or null if no items
*/
DataSet.prototype.max = function (field) {
- var data = this.data,
- max = null,
- maxField = null;
-
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- var item = data[id];
- var itemField = item[field];
- if (itemField != null && (!max || itemField > maxField)) {
- max = item;
- maxField = itemField;
- }
- }
- }
-
- return max;
+ var data = this.data,
+ max = null,
+ maxField = null;
+
+ for (var id in data) {
+ if (data.hasOwnProperty(id)) {
+ var item = data[id];
+ var itemField = item[field];
+ if (itemField != null && (!max || itemField > maxField)) {
+ max = item;
+ maxField = itemField;
+ }
+ }
+ }
+
+ return max;
};
/**
@@ -718,22 +718,22 @@ DataSet.prototype.max = function (field) {
* @return {Object | null} item Item containing max value, or null if no items
*/
DataSet.prototype.min = function (field) {
- var data = this.data,
- min = null,
- minField = null;
-
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- var item = data[id];
- var itemField = item[field];
- if (itemField != null && (!min || itemField < minField)) {
- min = item;
- minField = itemField;
- }
- }
- }
-
- return min;
+ var data = this.data,
+ min = null,
+ minField = null;
+
+ for (var id in data) {
+ if (data.hasOwnProperty(id)) {
+ var item = data[id];
+ var itemField = item[field];
+ if (itemField != null && (!min || itemField < minField)) {
+ min = item;
+ minField = itemField;
+ }
+ }
+ }
+
+ return min;
};
/**
@@ -745,30 +745,30 @@ DataSet.prototype.min = function (field) {
* The returned array is unordered.
*/
DataSet.prototype.distinct = function (field) {
- var data = this.data,
- values = [],
- fieldType = this.options.convert[field],
- count = 0;
-
- for (var prop in data) {
- if (data.hasOwnProperty(prop)) {
- var item = data[prop];
- var value = util.convert(item[field], fieldType);
- var exists = false;
- for (var i = 0; i < count; i++) {
- if (values[i] == value) {
- exists = true;
- break;
- }
- }
- if (!exists) {
- values[count] = value;
- count++;
- }
- }
- }
-
- return values;
+ var data = this.data,
+ values = [],
+ fieldType = this.options.convert[field],
+ count = 0;
+
+ for (var prop in data) {
+ if (data.hasOwnProperty(prop)) {
+ var item = data[prop];
+ var value = util.convert(item[field], fieldType);
+ var exists = false;
+ for (var i = 0; i < count; i++) {
+ if (values[i] == value) {
+ exists = true;
+ break;
+ }
+ }
+ if (!exists) {
+ values[count] = value;
+ count++;
+ }
+ }
+ }
+
+ return values;
};
/**
@@ -778,32 +778,32 @@ DataSet.prototype.distinct = function (field) {
* @private
*/
DataSet.prototype._addItem = function (item) {
- var id = item[this.fieldId];
-
- if (id != undefined) {
- // check whether this id is already taken
- if (this.data[id]) {
- // item already exists
- throw new Error('Cannot add item: item with id ' + id + ' already exists');
- }
- }
- else {
- // generate an id
- id = util.randomUUID();
- item[this.fieldId] = id;
- this.internalIds[id] = item;
- }
-
- var d = {};
- for (var field in item) {
- if (item.hasOwnProperty(field)) {
- var fieldType = this.convert[field]; // type may be undefined
- d[field] = util.convert(item[field], fieldType);
- }
- }
- this.data[id] = d;
-
- return id;
+ var id = item[this.fieldId];
+
+ if (id != undefined) {
+ // check whether this id is already taken
+ if (this.data[id]) {
+ // item already exists
+ throw new Error('Cannot add item: item with id ' + id + ' already exists');
+ }
+ }
+ else {
+ // generate an id
+ id = util.randomUUID();
+ item[this.fieldId] = id;
+ this.internalIds[id] = item;
+ }
+
+ var d = {};
+ for (var field in item) {
+ if (item.hasOwnProperty(field)) {
+ var fieldType = this.convert[field]; // type may be undefined
+ d[field] = util.convert(item[field], fieldType);
+ }
+ }
+ this.data[id] = d;
+
+ return id;
};
/**
@@ -814,43 +814,43 @@ DataSet.prototype._addItem = function (item) {
* @private
*/
DataSet.prototype._getItem = function (id, convert) {
- var field, value;
-
- // get the item from the dataset
- var raw = this.data[id];
- if (!raw) {
- return null;
- }
-
- // convert the items field types
- var converted = {},
- fieldId = this.fieldId,
- internalIds = this.internalIds;
- if (convert) {
- for (field in raw) {
- if (raw.hasOwnProperty(field)) {
- value = raw[field];
- // output all fields, except internal ids
- if ((field != fieldId) || !(value in internalIds)) {
- converted[field] = util.convert(value, convert[field]);
- }
- }
- }
- }
- else {
- // no field types specified, no converting needed
- for (field in raw) {
- if (raw.hasOwnProperty(field)) {
- value = raw[field];
- // output all fields, except internal ids
- if ((field != fieldId) || !(value in internalIds)) {
- converted[field] = value;
- }
- }
- }
- }
+ var field, value;
- return converted;
+ // get the item from the dataset
+ var raw = this.data[id];
+ if (!raw) {
+ return null;
+ }
+
+ // convert the items field types
+ var converted = {},
+ fieldId = this.fieldId,
+ internalIds = this.internalIds;
+ if (convert) {
+ for (field in raw) {
+ if (raw.hasOwnProperty(field)) {
+ value = raw[field];
+ // output all fields, except internal ids
+ if ((field != fieldId) || !(value in internalIds)) {
+ converted[field] = util.convert(value, convert[field]);
+ }
+ }
+ }
+ }
+ else {
+ // no field types specified, no converting needed
+ for (field in raw) {
+ if (raw.hasOwnProperty(field)) {
+ value = raw[field];
+ // output all fields, except internal ids
+ if ((field != fieldId) || !(value in internalIds)) {
+ converted[field] = value;
+ }
+ }
+ }
+ }
+
+ return converted;
};
/**
@@ -862,25 +862,25 @@ DataSet.prototype._getItem = function (id, convert) {
* @private
*/
DataSet.prototype._updateItem = function (item) {
- var id = item[this.fieldId];
- if (id == undefined) {
- throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
- }
- var d = this.data[id];
- if (!d) {
- // item doesn't exist
- throw new Error('Cannot update item: no item with id ' + id + ' found');
- }
-
- // merge with current item
- for (var field in item) {
- if (item.hasOwnProperty(field)) {
- var fieldType = this.convert[field]; // type may be undefined
- d[field] = util.convert(item[field], fieldType);
- }
- }
-
- return id;
+ var id = item[this.fieldId];
+ if (id == undefined) {
+ throw new Error('Cannot update item: item has no id (item: ' + JSON.stringify(item) + ')');
+ }
+ var d = this.data[id];
+ if (!d) {
+ // item doesn't exist
+ throw new Error('Cannot update item: no item with id ' + id + ' found');
+ }
+
+ // merge with current item
+ for (var field in item) {
+ if (item.hasOwnProperty(field)) {
+ var fieldType = this.convert[field]; // type may be undefined
+ d[field] = util.convert(item[field], fieldType);
+ }
+ }
+
+ return id;
};
/**
@@ -890,11 +890,11 @@ DataSet.prototype._updateItem = function (item) {
* @private
*/
DataSet.prototype._getColumnNames = function (dataTable) {
- var columns = [];
- for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
- columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
- }
- return columns;
+ var columns = [];
+ for (var col = 0, cols = dataTable.getNumberOfColumns(); col < cols; col++) {
+ columns[col] = dataTable.getColumnId(col) || dataTable.getColumnLabel(col);
+ }
+ return columns;
};
/**
@@ -905,10 +905,10 @@ DataSet.prototype._getColumnNames = function (dataTable) {
* @private
*/
DataSet.prototype._appendRow = function (dataTable, columns, item) {
- var row = dataTable.addRow();
+ var row = dataTable.addRow();
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- dataTable.setValue(row, col, item[field]);
- }
+ for (var col = 0, cols = columns.length; col < cols; col++) {
+ var field = columns[col];
+ dataTable.setValue(row, col, item[field]);
+ }
};
diff --git a/src/DataView.js b/src/DataView.js
index 540fef17..d02ffdac 100644
--- a/src/DataView.js
+++ b/src/DataView.js
@@ -9,67 +9,70 @@
* @constructor DataView
*/
function DataView (data, options) {
- this.id = util.randomUUID();
+ this.id = util.randomUUID();
- this.data = null;
- this.ids = {}; // ids of the items currently in memory (just contains a boolean true)
- this.options = options || {};
- this.fieldId = 'id'; // name of the field containing id
- this.subscribers = {}; // event subscribers
+ this.data = null;
+ this.ids = {}; // ids of the items currently in memory (just contains a boolean true)
+ this.options = options || {};
+ this.fieldId = 'id'; // name of the field containing id
+ this.subscribers = {}; // event subscribers
- var me = this;
- this.listener = function () {
- me._onEvent.apply(me, arguments);
- };
+ var me = this;
+ this.listener = function () {
+ me._onEvent.apply(me, arguments);
+ };
- this.setData(data);
+ this.setData(data);
}
+// TODO: implement a function .config() to dynamically update things like configured filter
+// and trigger changes accordingly
+
/**
* Set a data source for the view
* @param {DataSet | DataView} data
*/
DataView.prototype.setData = function (data) {
- var ids, dataItems, i, len;
+ var ids, dataItems, i, len;
- if (this.data) {
- // unsubscribe from current dataset
- if (this.data.unsubscribe) {
- this.data.unsubscribe('*', this.listener);
- }
+ if (this.data) {
+ // unsubscribe from current dataset
+ if (this.data.unsubscribe) {
+ this.data.unsubscribe('*', this.listener);
+ }
- // trigger a remove of all items in memory
- ids = [];
- for (var id in this.ids) {
- if (this.ids.hasOwnProperty(id)) {
- ids.push(id);
- }
- }
- this.ids = {};
- this._trigger('remove', {items: ids});
+ // trigger a remove of all items in memory
+ ids = [];
+ for (var id in this.ids) {
+ if (this.ids.hasOwnProperty(id)) {
+ ids.push(id);
+ }
}
+ this.ids = {};
+ this._trigger('remove', {items: ids});
+ }
- this.data = data;
+ this.data = data;
- if (this.data) {
- // update fieldId
- this.fieldId = this.options.fieldId ||
- (this.data && this.data.options && this.data.options.fieldId) ||
- 'id';
+ if (this.data) {
+ // update fieldId
+ this.fieldId = this.options.fieldId ||
+ (this.data && this.data.options && this.data.options.fieldId) ||
+ 'id';
- // trigger an add of all added items
- ids = this.data.getIds({filter: this.options && this.options.filter});
- for (i = 0, len = ids.length; i < len; i++) {
- id = ids[i];
- this.ids[id] = true;
- }
- this._trigger('add', {items: ids});
+ // trigger an add of all added items
+ ids = this.data.getIds({filter: this.options && this.options.filter});
+ for (i = 0, len = ids.length; i < len; i++) {
+ id = ids[i];
+ this.ids[id] = true;
+ }
+ this._trigger('add', {items: ids});
- // subscribe to new dataset
- if (this.data.subscribe) {
- this.data.subscribe('*', this.listener);
- }
+ // subscribe to new dataset
+ if (this.data.subscribe) {
+ this.data.subscribe('*', this.listener);
}
+ }
};
/**
@@ -107,42 +110,42 @@ DataView.prototype.setData = function (data) {
* @param args
*/
DataView.prototype.get = function (args) {
- var me = this;
-
- // parse the arguments
- var ids, options, data;
- var firstType = util.getType(arguments[0]);
- if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
- // get(id(s) [, options] [, data])
- ids = arguments[0]; // can be a single id or an array with ids
- options = arguments[1];
- data = arguments[2];
- }
- else {
- // get([, options] [, data])
- options = arguments[0];
- data = arguments[1];
- }
+ var me = this;
- // extend the options with the default options and provided options
- var viewOptions = util.extend({}, this.options, options);
+ // parse the arguments
+ var ids, options, data;
+ var firstType = util.getType(arguments[0]);
+ if (firstType == 'String' || firstType == 'Number' || firstType == 'Array') {
+ // get(id(s) [, options] [, data])
+ ids = arguments[0]; // can be a single id or an array with ids
+ options = arguments[1];
+ data = arguments[2];
+ }
+ else {
+ // get([, options] [, data])
+ options = arguments[0];
+ data = arguments[1];
+ }
- // create a combined filter method when needed
- if (this.options.filter && options && options.filter) {
- viewOptions.filter = function (item) {
- return me.options.filter(item) && options.filter(item);
- }
- }
+ // extend the options with the default options and provided options
+ var viewOptions = util.extend({}, this.options, options);
- // build up the call to the linked data set
- var getArguments = [];
- if (ids != undefined) {
- getArguments.push(ids);
+ // create a combined filter method when needed
+ if (this.options.filter && options && options.filter) {
+ viewOptions.filter = function (item) {
+ return me.options.filter(item) && options.filter(item);
}
- getArguments.push(viewOptions);
- getArguments.push(data);
+ }
+
+ // build up the call to the linked data set
+ var getArguments = [];
+ if (ids != undefined) {
+ getArguments.push(ids);
+ }
+ getArguments.push(viewOptions);
+ getArguments.push(data);
- return this.data && this.data.get.apply(this.data, getArguments);
+ return this.data && this.data.get.apply(this.data, getArguments);
};
/**
@@ -154,36 +157,36 @@ DataView.prototype.get = function (args) {
* @return {Array} ids
*/
DataView.prototype.getIds = function (options) {
- var ids;
+ var ids;
- if (this.data) {
- var defaultFilter = this.options.filter;
- var filter;
+ if (this.data) {
+ var defaultFilter = this.options.filter;
+ var filter;
- if (options && options.filter) {
- if (defaultFilter) {
- filter = function (item) {
- return defaultFilter(item) && options.filter(item);
- }
- }
- else {
- filter = options.filter;
- }
- }
- else {
- filter = defaultFilter;
+ if (options && options.filter) {
+ if (defaultFilter) {
+ filter = function (item) {
+ return defaultFilter(item) && options.filter(item);
}
-
- ids = this.data.getIds({
- filter: filter,
- order: options && options.order
- });
+ }
+ else {
+ filter = options.filter;
+ }
}
else {
- ids = [];
+ filter = defaultFilter;
}
- return ids;
+ ids = this.data.getIds({
+ filter: filter,
+ order: options && options.order
+ });
+ }
+ else {
+ ids = [];
+ }
+
+ return ids;
};
/**
@@ -196,80 +199,80 @@ DataView.prototype.getIds = function (options) {
* @private
*/
DataView.prototype._onEvent = function (event, params, senderId) {
- var i, len, id, item,
- ids = params && params.items,
- data = this.data,
- added = [],
- updated = [],
- removed = [];
-
- if (ids && data) {
- switch (event) {
- case 'add':
- // filter the ids of the added items
- for (i = 0, len = ids.length; i < len; i++) {
- id = ids[i];
- item = this.get(id);
- if (item) {
- this.ids[id] = true;
- added.push(id);
- }
- }
-
- break;
-
- case 'update':
- // determine the event from the views viewpoint: an updated
- // item can be added, updated, or removed from this view.
- for (i = 0, len = ids.length; i < len; i++) {
- id = ids[i];
- item = this.get(id);
-
- if (item) {
- if (this.ids[id]) {
- updated.push(id);
- }
- else {
- this.ids[id] = true;
- added.push(id);
- }
- }
- else {
- if (this.ids[id]) {
- delete this.ids[id];
- removed.push(id);
- }
- else {
- // nothing interesting for me :-(
- }
- }
- }
-
- break;
-
- case 'remove':
- // filter the ids of the removed items
- for (i = 0, len = ids.length; i < len; i++) {
- id = ids[i];
- if (this.ids[id]) {
- delete this.ids[id];
- removed.push(id);
- }
- }
-
- break;
- }
+ var i, len, id, item,
+ ids = params && params.items,
+ data = this.data,
+ added = [],
+ updated = [],
+ removed = [];
- if (added.length) {
- this._trigger('add', {items: added}, senderId);
+ if (ids && data) {
+ switch (event) {
+ case 'add':
+ // filter the ids of the added items
+ for (i = 0, len = ids.length; i < len; i++) {
+ id = ids[i];
+ item = this.get(id);
+ if (item) {
+ this.ids[id] = true;
+ added.push(id);
+ }
}
- if (updated.length) {
- this._trigger('update', {items: updated}, senderId);
+
+ break;
+
+ case 'update':
+ // determine the event from the views viewpoint: an updated
+ // item can be added, updated, or removed from this view.
+ for (i = 0, len = ids.length; i < len; i++) {
+ id = ids[i];
+ item = this.get(id);
+
+ if (item) {
+ if (this.ids[id]) {
+ updated.push(id);
+ }
+ else {
+ this.ids[id] = true;
+ added.push(id);
+ }
+ }
+ else {
+ if (this.ids[id]) {
+ delete this.ids[id];
+ removed.push(id);
+ }
+ else {
+ // nothing interesting for me :-(
+ }
+ }
}
- if (removed.length) {
- this._trigger('remove', {items: removed}, senderId);
+
+ break;
+
+ case 'remove':
+ // filter the ids of the removed items
+ for (i = 0, len = ids.length; i < len; i++) {
+ id = ids[i];
+ if (this.ids[id]) {
+ delete this.ids[id];
+ removed.push(id);
+ }
}
+
+ break;
+ }
+
+ if (added.length) {
+ this._trigger('add', {items: added}, senderId);
+ }
+ if (updated.length) {
+ this._trigger('update', {items: updated}, senderId);
+ }
+ if (removed.length) {
+ this._trigger('remove', {items: removed}, senderId);
}
+ }
};
// copy subscription functionality from DataSet
diff --git a/src/EventBus.js b/src/EventBus.js
index ae761a37..017739b1 100644
--- a/src/EventBus.js
+++ b/src/EventBus.js
@@ -3,7 +3,7 @@
* @constructor EventBus
*/
function EventBus() {
- this.subscriptions = [];
+ this.subscriptions = [];
}
/**
@@ -16,21 +16,21 @@ function EventBus() {
* @returns {String} id A subscription id
*/
EventBus.prototype.on = function (event, callback, target) {
- var regexp = (event instanceof RegExp) ?
- event :
- new RegExp(event.replace('*', '\\w+'));
+ var regexp = (event instanceof RegExp) ?
+ event :
+ new RegExp(event.replace('*', '\\w+'));
- var subscription = {
- id: util.randomUUID(),
- event: event,
- regexp: regexp,
- callback: (typeof callback === 'function') ? callback : null,
- target: target
- };
+ var subscription = {
+ id: util.randomUUID(),
+ event: event,
+ regexp: regexp,
+ callback: (typeof callback === 'function') ? callback : null,
+ target: target
+ };
- this.subscriptions.push(subscription);
+ this.subscriptions.push(subscription);
- return subscription.id;
+ return subscription.id;
};
/**
@@ -42,33 +42,33 @@ EventBus.prototype.on = function (event, callback, target) {
* callback, and target.
*/
EventBus.prototype.off = function (filter) {
- var i = 0;
- while (i < this.subscriptions.length) {
- var subscription = this.subscriptions[i];
+ var i = 0;
+ while (i < this.subscriptions.length) {
+ var subscription = this.subscriptions[i];
- var match = true;
- if (filter instanceof Object) {
- // filter is an object. All fields must match
- for (var prop in filter) {
- if (filter.hasOwnProperty(prop)) {
- if (filter[prop] !== subscription[prop]) {
- match = false;
- }
- }
- }
- }
- else {
- // filter is a string, filter on id
- match = (subscription.id == filter);
+ var match = true;
+ if (filter instanceof Object) {
+ // filter is an object. All fields must match
+ for (var prop in filter) {
+ if (filter.hasOwnProperty(prop)) {
+ if (filter[prop] !== subscription[prop]) {
+ match = false;
+ }
}
+ }
+ }
+ else {
+ // filter is a string, filter on id
+ match = (subscription.id == filter);
+ }
- if (match) {
- this.subscriptions.splice(i, 1);
- }
- else {
- i++;
- }
+ if (match) {
+ this.subscriptions.splice(i, 1);
+ }
+ else {
+ i++;
}
+ }
};
/**
@@ -78,12 +78,12 @@ EventBus.prototype.off = function (filter) {
* @param {*} [source]
*/
EventBus.prototype.emit = function (event, data, source) {
- for (var i =0; i < this.subscriptions.length; i++) {
- var subscription = this.subscriptions[i];
- if (subscription.regexp.test(event)) {
- if (subscription.callback) {
- subscription.callback(event, data, source);
- }
- }
+ for (var i =0; i < this.subscriptions.length; i++) {
+ var subscription = this.subscriptions[i];
+ if (subscription.regexp.test(event)) {
+ if (subscription.callback) {
+ subscription.callback(event, data, source);
+ }
}
+ }
};
diff --git a/src/events.js b/src/events.js
index 1356be25..4676aded 100644
--- a/src/events.js
+++ b/src/events.js
@@ -3,114 +3,114 @@
*/
// TODO: replace usage of the event listener for the EventBus
var events = {
- 'listeners': [],
+ 'listeners': [],
- /**
- * Find a single listener by its object
- * @param {Object} object
- * @return {Number} index -1 when not found
- */
- 'indexOf': function (object) {
- var listeners = this.listeners;
- for (var i = 0, iMax = this.listeners.length; i < iMax; i++) {
- var listener = listeners[i];
- if (listener && listener.object == object) {
- return i;
- }
- }
- return -1;
- },
+ /**
+ * Find a single listener by its object
+ * @param {Object} object
+ * @return {Number} index -1 when not found
+ */
+ 'indexOf': function (object) {
+ var listeners = this.listeners;
+ for (var i = 0, iMax = this.listeners.length; i < iMax; i++) {
+ var listener = listeners[i];
+ if (listener && listener.object == object) {
+ return i;
+ }
+ }
+ return -1;
+ },
- /**
- * Add an event listener
- * @param {Object} object
- * @param {String} event The name of an event, for example 'select'
- * @param {function} callback The callback method, called when the
- * event takes place
- */
- 'addListener': function (object, event, callback) {
- var index = this.indexOf(object);
- var listener = this.listeners[index];
- if (!listener) {
- listener = {
- 'object': object,
- 'events': {}
- };
- this.listeners.push(listener);
- }
+ /**
+ * Add an event listener
+ * @param {Object} object
+ * @param {String} event The name of an event, for example 'select'
+ * @param {function} callback The callback method, called when the
+ * event takes place
+ */
+ 'addListener': function (object, event, callback) {
+ var index = this.indexOf(object);
+ var listener = this.listeners[index];
+ if (!listener) {
+ listener = {
+ 'object': object,
+ 'events': {}
+ };
+ this.listeners.push(listener);
+ }
- var callbacks = listener.events[event];
- if (!callbacks) {
- callbacks = [];
- listener.events[event] = callbacks;
- }
+ var callbacks = listener.events[event];
+ if (!callbacks) {
+ callbacks = [];
+ listener.events[event] = callbacks;
+ }
- // add the callback if it does not yet exist
- if (callbacks.indexOf(callback) == -1) {
- callbacks.push(callback);
- }
- },
+ // add the callback if it does not yet exist
+ if (callbacks.indexOf(callback) == -1) {
+ callbacks.push(callback);
+ }
+ },
- /**
- * Remove an event listener
- * @param {Object} object
- * @param {String} event The name of an event, for example 'select'
- * @param {function} callback The registered callback method
- */
- 'removeListener': function (object, event, callback) {
- var index = this.indexOf(object);
- var listener = this.listeners[index];
- if (listener) {
- var callbacks = listener.events[event];
- if (callbacks) {
- index = callbacks.indexOf(callback);
- if (index != -1) {
- callbacks.splice(index, 1);
- }
+ /**
+ * Remove an event listener
+ * @param {Object} object
+ * @param {String} event The name of an event, for example 'select'
+ * @param {function} callback The registered callback method
+ */
+ 'removeListener': function (object, event, callback) {
+ var index = this.indexOf(object);
+ var listener = this.listeners[index];
+ if (listener) {
+ var callbacks = listener.events[event];
+ if (callbacks) {
+ index = callbacks.indexOf(callback);
+ if (index != -1) {
+ callbacks.splice(index, 1);
+ }
- // remove the array when empty
- if (callbacks.length == 0) {
- delete listener.events[event];
- }
- }
+ // remove the array when empty
+ if (callbacks.length == 0) {
+ delete listener.events[event];
+ }
+ }
- // count the number of registered events. remove listener when empty
- var count = 0;
- var events = listener.events;
- for (var e in events) {
- if (events.hasOwnProperty(e)) {
- count++;
- }
- }
- if (count == 0) {
- delete this.listeners[index];
- }
+ // count the number of registered events. remove listener when empty
+ var count = 0;
+ var events = listener.events;
+ for (var e in events) {
+ if (events.hasOwnProperty(e)) {
+ count++;
}
- },
+ }
+ if (count == 0) {
+ delete this.listeners[index];
+ }
+ }
+ },
- /**
- * Remove all registered event listeners
- */
- 'removeAllListeners': function () {
- this.listeners = [];
- },
+ /**
+ * Remove all registered event listeners
+ */
+ 'removeAllListeners': function () {
+ this.listeners = [];
+ },
- /**
- * Trigger an event. All registered event handlers will be called
- * @param {Object} object
- * @param {String} event
- * @param {Object} properties (optional)
- */
- 'trigger': function (object, event, properties) {
- var index = this.indexOf(object);
- var listener = this.listeners[index];
- if (listener) {
- var callbacks = listener.events[event];
- if (callbacks) {
- for (var i = 0, iMax = callbacks.length; i < iMax; i++) {
- callbacks[i](properties);
- }
- }
+ /**
+ * Trigger an event. All registered event handlers will be called
+ * @param {Object} object
+ * @param {String} event
+ * @param {Object} properties (optional)
+ */
+ 'trigger': function (object, event, properties) {
+ var index = this.indexOf(object);
+ var listener = this.listeners[index];
+ if (listener) {
+ var callbacks = listener.events[event];
+ if (callbacks) {
+ for (var i = 0, iMax = callbacks.length; i < iMax; i++) {
+ callbacks[i](properties);
}
+ }
}
+ }
};
diff --git a/src/graph/Edge.js b/src/graph/Edge.js
index d4f5f25b..28aaa7cc 100644
--- a/src/graph/Edge.js
+++ b/src/graph/Edge.js
@@ -14,40 +14,40 @@
* example for the color
*/
function Edge (properties, graph, constants) {
- if (!graph) {
- throw "No graph provided";
- }
- this.graph = graph;
-
- // initialize constants
- this.widthMin = constants.edges.widthMin;
- this.widthMax = constants.edges.widthMax;
-
- // initialize variables
- this.id = undefined;
- this.fromId = undefined;
- this.toId = undefined;
- this.style = constants.edges.style;
- this.title = undefined;
- this.width = constants.edges.width;
- this.value = undefined;
- this.length = constants.edges.length;
-
- this.from = null; // a node
- this.to = null; // a node
- this.connected = false;
-
- // Added to support dashed lines
- // David Jordan
- // 2012-08-08
- this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
-
- this.stiffness = undefined; // depends on the length of the edge
- this.color = constants.edges.color;
- this.widthFixed = false;
- this.lengthFixed = false;
-
- this.setProperties(properties, constants);
+ if (!graph) {
+ throw "No graph provided";
+ }
+ this.graph = graph;
+
+ // initialize constants
+ this.widthMin = constants.edges.widthMin;
+ this.widthMax = constants.edges.widthMax;
+
+ // initialize variables
+ this.id = undefined;
+ this.fromId = undefined;
+ this.toId = undefined;
+ this.style = constants.edges.style;
+ this.title = undefined;
+ this.width = constants.edges.width;
+ this.value = undefined;
+ this.length = constants.edges.length;
+
+ this.from = null; // a node
+ this.to = null; // a node
+ this.connected = false;
+
+ // Added to support dashed lines
+ // David Jordan
+ // 2012-08-08
+ this.dash = util.extend({}, constants.edges.dash); // contains properties length, gap, altLength
+
+ this.stiffness = undefined; // depends on the length of the edge
+ this.color = constants.edges.color;
+ this.widthFixed = false;
+ this.lengthFixed = false;
+
+ this.setProperties(properties, constants);
}
/**
@@ -56,95 +56,95 @@ function Edge (properties, graph, constants) {
* @param {Object} constants and object with default, global properties
*/
Edge.prototype.setProperties = function(properties, constants) {
- if (!properties) {
- return;
- }
-
- if (properties.from != undefined) {this.fromId = properties.from;}
- if (properties.to != undefined) {this.toId = properties.to;}
-
- if (properties.id != undefined) {this.id = properties.id;}
- if (properties.style != undefined) {this.style = properties.style;}
- if (properties.label != undefined) {this.label = properties.label;}
- if (this.label) {
- this.fontSize = constants.edges.fontSize;
- this.fontFace = constants.edges.fontFace;
- this.fontColor = constants.edges.fontColor;
- if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;}
- if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
- if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
- }
- if (properties.title != undefined) {this.title = properties.title;}
- if (properties.width != undefined) {this.width = properties.width;}
- if (properties.value != undefined) {this.value = properties.value;}
- if (properties.length != undefined) {this.length = properties.length;}
-
- // Added to support dashed lines
- // David Jordan
- // 2012-08-08
- if (properties.dash) {
- if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
- if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
- if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
- }
-
- if (properties.color != undefined) {this.color = properties.color;}
-
- // A node is connected when it has a from and to node.
- this.connect();
-
- this.widthFixed = this.widthFixed || (properties.width != undefined);
- this.lengthFixed = this.lengthFixed || (properties.length != undefined);
- this.stiffness = 1 / this.length;
-
- // set draw method based on style
- switch (this.style) {
- case 'line': this.draw = this._drawLine; break;
- case 'arrow': this.draw = this._drawArrow; break;
- case 'arrow-center': this.draw = this._drawArrowCenter; break;
- case 'dash-line': this.draw = this._drawDashLine; break;
- default: this.draw = this._drawLine; break;
- }
+ if (!properties) {
+ return;
+ }
+
+ if (properties.from != undefined) {this.fromId = properties.from;}
+ if (properties.to != undefined) {this.toId = properties.to;}
+
+ if (properties.id != undefined) {this.id = properties.id;}
+ if (properties.style != undefined) {this.style = properties.style;}
+ if (properties.label != undefined) {this.label = properties.label;}
+ if (this.label) {
+ this.fontSize = constants.edges.fontSize;
+ this.fontFace = constants.edges.fontFace;
+ this.fontColor = constants.edges.fontColor;
+ if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;}
+ if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
+ if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
+ }
+ if (properties.title != undefined) {this.title = properties.title;}
+ if (properties.width != undefined) {this.width = properties.width;}
+ if (properties.value != undefined) {this.value = properties.value;}
+ if (properties.length != undefined) {this.length = properties.length;}
+
+ // Added to support dashed lines
+ // David Jordan
+ // 2012-08-08
+ if (properties.dash) {
+ if (properties.dash.length != undefined) {this.dash.length = properties.dash.length;}
+ if (properties.dash.gap != undefined) {this.dash.gap = properties.dash.gap;}
+ if (properties.dash.altLength != undefined) {this.dash.altLength = properties.dash.altLength;}
+ }
+
+ if (properties.color != undefined) {this.color = properties.color;}
+
+ // A node is connected when it has a from and to node.
+ this.connect();
+
+ this.widthFixed = this.widthFixed || (properties.width != undefined);
+ this.lengthFixed = this.lengthFixed || (properties.length != undefined);
+ this.stiffness = 1 / this.length;
+
+ // set draw method based on style
+ switch (this.style) {
+ case 'line': this.draw = this._drawLine; break;
+ case 'arrow': this.draw = this._drawArrow; break;
+ case 'arrow-center': this.draw = this._drawArrowCenter; break;
+ case 'dash-line': this.draw = this._drawDashLine; break;
+ default: this.draw = this._drawLine; break;
+ }
};
/**
* Connect an edge to its nodes
*/
Edge.prototype.connect = function () {
- this.disconnect();
+ this.disconnect();
- this.from = this.graph.nodes[this.fromId] || null;
- this.to = this.graph.nodes[this.toId] || null;
- this.connected = (this.from && this.to);
+ this.from = this.graph.nodes[this.fromId] || null;
+ this.to = this.graph.nodes[this.toId] || null;
+ this.connected = (this.from && this.to);
- if (this.connected) {
- this.from.attachEdge(this);
- this.to.attachEdge(this);
+ if (this.connected) {
+ this.from.attachEdge(this);
+ this.to.attachEdge(this);
+ }
+ else {
+ if (this.from) {
+ this.from.detachEdge(this);
}
- else {
- if (this.from) {
- this.from.detachEdge(this);
- }
- if (this.to) {
- this.to.detachEdge(this);
- }
+ if (this.to) {
+ this.to.detachEdge(this);
}
+ }
};
/**
* Disconnect an edge from its nodes
*/
Edge.prototype.disconnect = function () {
- if (this.from) {
- this.from.detachEdge(this);
- this.from = null;
- }
- if (this.to) {
- this.to.detachEdge(this);
- this.to = null;
- }
-
- this.connected = false;
+ if (this.from) {
+ this.from.detachEdge(this);
+ this.from = null;
+ }
+ if (this.to) {
+ this.to.detachEdge(this);
+ this.to = null;
+ }
+
+ this.connected = false;
};
/**
@@ -153,7 +153,7 @@ Edge.prototype.disconnect = function () {
* has been set.
*/
Edge.prototype.getTitle = function() {
- return this.title;
+ return this.title;
};
@@ -162,7 +162,7 @@ Edge.prototype.getTitle = function() {
* @return {Number} value
*/
Edge.prototype.getValue = function() {
- return this.value;
+ return this.value;
};
/**
@@ -172,10 +172,10 @@ Edge.prototype.getValue = function() {
* @param {Number} max
*/
Edge.prototype.setValueRange = function(min, max) {
- if (!this.widthFixed && this.value !== undefined) {
- var scale = (this.widthMax - this.widthMin) / (max - min);
- this.width = (this.value - min) * scale + this.widthMin;
- }
+ if (!this.widthFixed && this.value !== undefined) {
+ var scale = (this.widthMax - this.widthMin) / (max - min);
+ this.width = (this.value - min) * scale + this.widthMin;
+ }
};
/**
@@ -185,7 +185,7 @@ Edge.prototype.setValueRange = function(min, max) {
* @param {CanvasRenderingContext2D} ctx
*/
Edge.prototype.draw = function(ctx) {
- throw "Method draw not initialized in edge";
+ throw "Method draw not initialized in edge";
};
/**
@@ -194,19 +194,19 @@ Edge.prototype.draw = function(ctx) {
* @return {boolean} True if location is located on the edge
*/
Edge.prototype.isOverlappingWith = function(obj) {
- var distMax = 10;
+ var distMax = 10;
- var xFrom = this.from.x;
- var yFrom = this.from.y;
- var xTo = this.to.x;
- var yTo = this.to.y;
- var xObj = obj.left;
- var yObj = obj.top;
+ var xFrom = this.from.x;
+ var yFrom = this.from.y;
+ var xTo = this.to.x;
+ var yTo = this.to.y;
+ var xObj = obj.left;
+ var yObj = obj.top;
- var dist = Edge._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
+ var dist = Edge._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
- return (dist < distMax);
+ return (dist < distMax);
};
@@ -218,40 +218,40 @@ Edge.prototype.isOverlappingWith = function(obj) {
* @private
*/
Edge.prototype._drawLine = function(ctx) {
- // set style
- ctx.strokeStyle = this.color;
- ctx.lineWidth = this._getLineWidth();
-
- var point;
- if (this.from != this.to) {
- // draw line
- this._line(ctx);
-
- // draw label
- if (this.label) {
- point = this._pointOnLine(0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ // set style
+ ctx.strokeStyle = this.color;
+ ctx.lineWidth = this._getLineWidth();
+
+ var point;
+ if (this.from != this.to) {
+ // draw line
+ this._line(ctx);
+
+ // draw label
+ if (this.label) {
+ point = this._pointOnLine(0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
+ else {
+ var x, y;
+ var radius = this.length / 4;
+ var node = this.from;
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width / 2;
+ y = node.y - radius;
}
else {
- var x, y;
- var radius = this.length / 4;
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width / 2;
- y = node.y - radius;
- }
- else {
- x = node.x + radius;
- y = node.y - node.height / 2;
- }
- this._circle(ctx, x, y, radius);
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
+ x = node.x + radius;
+ y = node.y - node.height / 2;
}
+ this._circle(ctx, x, y, radius);
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
};
/**
@@ -261,12 +261,12 @@ Edge.prototype._drawLine = function(ctx) {
* @private
*/
Edge.prototype._getLineWidth = function() {
- if (this.from.selected || this.to.selected) {
- return Math.min(this.width * 2, this.widthMax);
- }
- else {
- return this.width;
- }
+ if (this.from.selected || this.to.selected) {
+ return Math.min(this.width * 2, this.widthMax);
+ }
+ else {
+ return this.width;
+ }
};
/**
@@ -275,11 +275,11 @@ Edge.prototype._getLineWidth = function() {
* @private
*/
Edge.prototype._line = function (ctx) {
- // draw a straight line
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
- ctx.lineTo(this.to.x, this.to.y);
- ctx.stroke();
+ // draw a straight line
+ ctx.beginPath();
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.lineTo(this.to.x, this.to.y);
+ ctx.stroke();
};
/**
@@ -291,10 +291,10 @@ Edge.prototype._line = function (ctx) {
* @private
*/
Edge.prototype._circle = function (ctx, x, y, radius) {
- // draw a circle
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
+ // draw a circle
+ ctx.beginPath();
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
};
/**
@@ -306,24 +306,24 @@ Edge.prototype._circle = function (ctx, x, y, radius) {
* @private
*/
Edge.prototype._label = function (ctx, text, x, y) {
- if (text) {
- // TODO: cache the calculated size
- ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
- this.fontSize + "px " + this.fontFace;
- ctx.fillStyle = 'white';
- var width = ctx.measureText(text).width;
- var height = this.fontSize;
- var left = x - width / 2;
- var top = y - height / 2;
-
- ctx.fillRect(left, top, width, height);
-
- // draw text
- ctx.fillStyle = this.fontColor || "black";
- ctx.textAlign = "left";
- ctx.textBaseline = "top";
- ctx.fillText(text, left, top);
- }
+ if (text) {
+ // TODO: cache the calculated size
+ ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
+ this.fontSize + "px " + this.fontFace;
+ ctx.fillStyle = 'white';
+ var width = ctx.measureText(text).width;
+ var height = this.fontSize;
+ var left = x - width / 2;
+ var top = y - height / 2;
+
+ ctx.fillRect(left, top, width, height);
+
+ // draw text
+ ctx.fillStyle = this.fontColor || "black";
+ ctx.textAlign = "left";
+ ctx.textBaseline = "top";
+ ctx.fillText(text, left, top);
+ }
};
/**
@@ -336,35 +336,35 @@ Edge.prototype._label = function (ctx, text, x, y) {
* @private
*/
Edge.prototype._drawDashLine = function(ctx) {
- // set style
- ctx.strokeStyle = this.color;
- ctx.lineWidth = this._getLineWidth();
-
- // draw dashed line
- ctx.beginPath();
- ctx.lineCap = 'round';
- if (this.dash.altLength != undefined) //If an alt dash value has been set add to the array this value
- {
- ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
- [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
- }
- else if (this.dash.length != undefined && this.dash.gap != undefined) //If a dash and gap value has been set add to the array this value
- {
- ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
- [this.dash.length,this.dash.gap]);
- }
- else //If all else fails draw a line
- {
- ctx.moveTo(this.from.x, this.from.y);
- ctx.lineTo(this.to.x, this.to.y);
- }
- ctx.stroke();
-
- // draw label
- if (this.label) {
- var point = this._pointOnLine(0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ // set style
+ ctx.strokeStyle = this.color;
+ ctx.lineWidth = this._getLineWidth();
+
+ // draw dashed line
+ ctx.beginPath();
+ ctx.lineCap = 'round';
+ if (this.dash.altLength != undefined) //If an alt dash value has been set add to the array this value
+ {
+ ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+ [this.dash.length,this.dash.gap,this.dash.altLength,this.dash.gap]);
+ }
+ else if (this.dash.length != undefined && this.dash.gap != undefined) //If a dash and gap value has been set add to the array this value
+ {
+ ctx.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,
+ [this.dash.length,this.dash.gap]);
+ }
+ else //If all else fails draw a line
+ {
+ ctx.moveTo(this.from.x, this.from.y);
+ ctx.lineTo(this.to.x, this.to.y);
+ }
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ var point = this._pointOnLine(0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
};
/**
@@ -374,10 +374,10 @@ Edge.prototype._drawDashLine = function(ctx) {
* @private
*/
Edge.prototype._pointOnLine = function (percentage) {
- return {
- x: (1 - percentage) * this.from.x + percentage * this.to.x,
- y: (1 - percentage) * this.from.y + percentage * this.to.y
- }
+ return {
+ x: (1 - percentage) * this.from.x + percentage * this.to.x,
+ y: (1 - percentage) * this.from.y + percentage * this.to.y
+ }
};
/**
@@ -390,11 +390,11 @@ Edge.prototype._pointOnLine = function (percentage) {
* @private
*/
Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
- var angle = (percentage - 3/8) * 2 * Math.PI;
- return {
- x: x + radius * Math.cos(angle),
- y: y - radius * Math.sin(angle)
- }
+ var angle = (percentage - 3/8) * 2 * Math.PI;
+ return {
+ x: x + radius * Math.cos(angle),
+ y: y - radius * Math.sin(angle)
+ }
};
/**
@@ -405,62 +405,62 @@ Edge.prototype._pointOnCircle = function (x, y, radius, percentage) {
* @private
*/
Edge.prototype._drawArrowCenter = function(ctx) {
- var point;
- // set style
- ctx.strokeStyle = this.color;
- ctx.fillStyle = this.color;
- ctx.lineWidth = this._getLineWidth();
-
- if (this.from != this.to) {
- // draw line
- this._line(ctx);
-
- // draw an arrow halfway the line
- var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var length = 10 + 5 * this.width; // TODO: make customizable?
- point = this._pointOnLine(0.5);
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- point = this._pointOnLine(0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ var point;
+ // set style
+ ctx.strokeStyle = this.color;
+ ctx.fillStyle = this.color;
+ ctx.lineWidth = this._getLineWidth();
+
+ if (this.from != this.to) {
+ // draw line
+ this._line(ctx);
+
+ // draw an arrow halfway the line
+ var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var length = 10 + 5 * this.width; // TODO: make customizable?
+ point = this._pointOnLine(0.5);
+ ctx.arrow(point.x, point.y, angle, length);
+ ctx.fill();
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ point = this._pointOnLine(0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
+ else {
+ // draw circle
+ var x, y;
+ var radius = this.length / 4;
+ var node = this.from;
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width / 2;
+ y = node.y - radius;
}
else {
- // draw circle
- var x, y;
- var radius = this.length / 4;
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width / 2;
- y = node.y - radius;
- }
- else {
- x = node.x + radius;
- y = node.y - node.height / 2;
- }
- this._circle(ctx, x, y, radius);
-
- // draw all arrows
- var angle = 0.2 * Math.PI;
- var length = 10 + 5 * this.width; // TODO: make customizable?
- point = this._pointOnCircle(x, y, radius, 0.5);
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ x = node.x + radius;
+ y = node.y - node.height / 2;
}
+ this._circle(ctx, x, y, radius);
+
+ // draw all arrows
+ var angle = 0.2 * Math.PI;
+ var length = 10 + 5 * this.width; // TODO: make customizable?
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ ctx.arrow(point.x, point.y, angle, length);
+ ctx.fill();
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
};
@@ -473,91 +473,91 @@ Edge.prototype._drawArrowCenter = function(ctx) {
* @private
*/
Edge.prototype._drawArrow = function(ctx) {
- // set style
- ctx.strokeStyle = this.color;
- ctx.fillStyle = this.color;
- ctx.lineWidth = this._getLineWidth();
+ // set style
+ ctx.strokeStyle = this.color;
+ ctx.fillStyle = this.color;
+ ctx.lineWidth = this._getLineWidth();
+
+ // draw line
+ var angle, length;
+ if (this.from != this.to) {
+ // calculate length and angle of the line
+ angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
+ var dx = (this.to.x - this.from.x);
+ var dy = (this.to.y - this.from.y);
+ var lEdge = Math.sqrt(dx * dx + dy * dy);
+
+ var lFrom = this.from.distanceToBorder(ctx, angle + Math.PI);
+ var pFrom = (lEdge - lFrom) / lEdge;
+ var xFrom = (pFrom) * this.from.x + (1 - pFrom) * this.to.x;
+ var yFrom = (pFrom) * this.from.y + (1 - pFrom) * this.to.y;
+
+ var lTo = this.to.distanceToBorder(ctx, angle);
+ var pTo = (lEdge - lTo) / lEdge;
+ var xTo = (1 - pTo) * this.from.x + pTo * this.to.x;
+ var yTo = (1 - pTo) * this.from.y + pTo * this.to.y;
- // draw line
- var angle, length;
- if (this.from != this.to) {
- // calculate length and angle of the line
- angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var dx = (this.to.x - this.from.x);
- var dy = (this.to.y - this.from.y);
- var lEdge = Math.sqrt(dx * dx + dy * dy);
-
- var lFrom = this.from.distanceToBorder(ctx, angle + Math.PI);
- var pFrom = (lEdge - lFrom) / lEdge;
- var xFrom = (pFrom) * this.from.x + (1 - pFrom) * this.to.x;
- var yFrom = (pFrom) * this.from.y + (1 - pFrom) * this.to.y;
-
- var lTo = this.to.distanceToBorder(ctx, angle);
- var pTo = (lEdge - lTo) / lEdge;
- var xTo = (1 - pTo) * this.from.x + pTo * this.to.x;
- var yTo = (1 - pTo) * this.from.y + pTo * this.to.y;
-
- ctx.beginPath();
- ctx.moveTo(xFrom, yFrom);
- ctx.lineTo(xTo, yTo);
- ctx.stroke();
-
- // draw arrow at the end of the line
- length = 10 + 5 * this.width; // TODO: make customizable?
- ctx.arrow(xTo, yTo, angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- var point = this._pointOnLine(0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ ctx.beginPath();
+ ctx.moveTo(xFrom, yFrom);
+ ctx.lineTo(xTo, yTo);
+ ctx.stroke();
+
+ // draw arrow at the end of the line
+ length = 10 + 5 * this.width; // TODO: make customizable?
+ ctx.arrow(xTo, yTo, angle, length);
+ ctx.fill();
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ var point = this._pointOnLine(0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
+ else {
+ // draw circle
+ var node = this.from;
+ var x, y, arrow;
+ var radius = this.length / 4;
+ if (!node.width) {
+ node.resize(ctx);
+ }
+ if (node.width > node.height) {
+ x = node.x + node.width / 2;
+ y = node.y - radius;
+ arrow = {
+ x: x,
+ y: node.y,
+ angle: 0.9 * Math.PI
+ };
}
else {
- // draw circle
- var node = this.from;
- var x, y, arrow;
- var radius = this.length / 4;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width / 2;
- y = node.y - radius;
- arrow = {
- x: x,
- y: node.y,
- angle: 0.9 * Math.PI
- };
- }
- else {
- x = node.x + radius;
- y = node.y - node.height / 2;
- arrow = {
- x: node.x,
- y: y,
- angle: 0.6 * Math.PI
- };
- }
- ctx.beginPath();
- // TODO: do not draw a circle, but an arc
- // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.stroke();
-
- // draw all arrows
- length = 10 + 5 * this.width; // TODO: make customizable?
- ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- point = this._pointOnCircle(x, y, radius, 0.5);
- this._label(ctx, this.label, point.x, point.y);
- }
+ x = node.x + radius;
+ y = node.y - node.height / 2;
+ arrow = {
+ x: node.x,
+ y: y,
+ angle: 0.6 * Math.PI
+ };
}
+ ctx.beginPath();
+ // TODO: do not draw a circle, but an arc
+ // TODO: similarly, for a line without arrows, draw to the border of the nodes instead of the center
+ ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
+ ctx.stroke();
+
+ // draw all arrows
+ length = 10 + 5 * this.width; // TODO: make customizable?
+ ctx.arrow(arrow.x, arrow.y, arrow.angle, length);
+ ctx.fill();
+ ctx.stroke();
+
+ // draw label
+ if (this.label) {
+ point = this._pointOnCircle(x, y, radius, 0.5);
+ this._label(ctx, this.label, point.x, point.y);
+ }
+ }
};
@@ -575,28 +575,28 @@ Edge.prototype._drawArrow = function(ctx) {
* @private
*/
Edge._dist = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
- var px = x2-x1,
- py = y2-y1,
- something = px*px + py*py,
- u = ((x3 - x1) * px + (y3 - y1) * py) / something;
-
- if (u > 1) {
- u = 1;
- }
- else if (u < 0) {
- u = 0;
- }
-
- var x = x1 + u * px,
- y = y1 + u * py,
- dx = x - x3,
- dy = y - y3;
-
- //# Note: If the actual distance does not matter,
- //# if you only want to compare what this function
- //# returns to other results of this function, you
- //# can just return the squared distance instead
- //# (i.e. remove the sqrt) to gain a little performance
-
- return Math.sqrt(dx*dx + dy*dy);
+ var px = x2-x1,
+ py = y2-y1,
+ something = px*px + py*py,
+ u = ((x3 - x1) * px + (y3 - y1) * py) / something;
+
+ if (u > 1) {
+ u = 1;
+ }
+ else if (u < 0) {
+ u = 0;
+ }
+
+ var x = x1 + u * px,
+ y = y1 + u * py,
+ dx = x - x3,
+ dy = y - y3;
+
+ //# Note: If the actual distance does not matter,
+ //# if you only want to compare what this function
+ //# returns to other results of this function, you
+ //# can just return the squared distance instead
+ //# (i.e. remove the sqrt) to gain a little performance
+
+ return Math.sqrt(dx*dx + dy*dy);
};
diff --git a/src/graph/Graph.js b/src/graph/Graph.js
index 7e26fc5c..8b783cb3 100644
--- a/src/graph/Graph.js
+++ b/src/graph/Graph.js
@@ -1,7 +1,7 @@
/**
* @constructor Graph
* Create a graph visualization, displaying nodes and edges.
- *
+ *
* @param {Element} container The DOM element in which the Graph will
* be created. Normally a div element.
* @param {Object} data An object containing parameters
@@ -10,125 +10,125 @@
* @param {Object} options Options
*/
function Graph (container, data, options) {
- // create variables and set default values
- this.containerElement = container;
- this.width = '100%';
- this.height = '100%';
- this.refreshRate = 50; // milliseconds
- this.stabilize = true; // stabilize before displaying the graph
- this.selectable = true;
-
- // set constant values
- this.constants = {
- nodes: {
- radiusMin: 5,
- radiusMax: 20,
- radius: 5,
- distance: 100, // px
- shape: 'ellipse',
- image: undefined,
- widthMin: 16, // px
- widthMax: 64, // px
- fontColor: 'black',
- fontSize: 14, // px
- //fontFace: verdana,
- fontFace: 'arial',
- color: {
- border: '#2B7CE9',
- background: '#97C2FC',
- highlight: {
- border: '#2B7CE9',
- background: '#D2E5FF'
- }
- },
- borderColor: '#2B7CE9',
- backgroundColor: '#97C2FC',
- highlightColor: '#D2E5FF',
- group: undefined
- },
- edges: {
- widthMin: 1,
- widthMax: 15,
- width: 1,
- style: 'line',
- color: '#343434',
- fontColor: '#343434',
- fontSize: 14, // px
- fontFace: 'arial',
- //distance: 100, //px
- length: 100, // px
- dash: {
- length: 10,
- gap: 5,
- altLength: undefined
- }
- },
- minForce: 0.05,
- minVelocity: 0.02, // px/s
- maxIterations: 1000 // maximum number of iteration to stabilize
- };
-
- var graph = this;
- this.nodes = {}; // object with Node objects
- this.edges = {}; // object with Edge objects
- // TODO: create a counter to keep track on the number of nodes having values
- // TODO: create a counter to keep track on the number of nodes currently moving
- // TODO: create a counter to keep track on the number of edges having values
-
- this.nodesData = null; // A DataSet or DataView
- this.edgesData = null; // A DataSet or DataView
-
- // create event listeners used to subscribe on the DataSets of the nodes and edges
- var me = this;
- this.nodesListeners = {
- 'add': function (event, params) {
- me._addNodes(params.items);
- me.start();
- },
- 'update': function (event, params) {
- me._updateNodes(params.items);
- me.start();
- },
- 'remove': function (event, params) {
- me._removeNodes(params.items);
- me.start();
+ // create variables and set default values
+ this.containerElement = container;
+ this.width = '100%';
+ this.height = '100%';
+ this.refreshRate = 50; // milliseconds
+ this.stabilize = true; // stabilize before displaying the graph
+ this.selectable = true;
+
+ // set constant values
+ this.constants = {
+ nodes: {
+ radiusMin: 5,
+ radiusMax: 20,
+ radius: 5,
+ distance: 100, // px
+ shape: 'ellipse',
+ image: undefined,
+ widthMin: 16, // px
+ widthMax: 64, // px
+ fontColor: 'black',
+ fontSize: 14, // px
+ //fontFace: verdana,
+ fontFace: 'arial',
+ color: {
+ border: '#2B7CE9',
+ background: '#97C2FC',
+ highlight: {
+ border: '#2B7CE9',
+ background: '#D2E5FF'
}
- };
- this.edgesListeners = {
- 'add': function (event, params) {
- me._addEdges(params.items);
- me.start();
- },
- 'update': function (event, params) {
- me._updateEdges(params.items);
- me.start();
- },
- 'remove': function (event, params) {
- me._removeEdges(params.items);
- me.start();
- }
- };
-
- this.groups = new Groups(); // object with groups
- this.images = new Images(); // object with images
- this.images.setOnloadCallback(function () {
- graph._redraw();
- });
-
- // properties of the data
- this.moving = false; // True if any of the nodes have an undefined position
-
- this.selection = [];
- this.timer = undefined;
-
- // create a frame and canvas
- this._create();
-
- // apply options
- this.setOptions(options);
-
- // draw data
- this.setData(data);
+ },
+ borderColor: '#2B7CE9',
+ backgroundColor: '#97C2FC',
+ highlightColor: '#D2E5FF',
+ group: undefined
+ },
+ edges: {
+ widthMin: 1,
+ widthMax: 15,
+ width: 1,
+ style: 'line',
+ color: '#343434',
+ fontColor: '#343434',
+ fontSize: 14, // px
+ fontFace: 'arial',
+ //distance: 100, //px
+ length: 100, // px
+ dash: {
+ length: 10,
+ gap: 5,
+ altLength: undefined
+ }
+ },
+ minForce: 0.05,
+ minVelocity: 0.02, // px/s
+ maxIterations: 1000 // maximum number of iteration to stabilize
+ };
+
+ var graph = this;
+ this.nodes = {}; // object with Node objects
+ this.edges = {}; // object with Edge objects
+ // TODO: create a counter to keep track on the number of nodes having values
+ // TODO: create a counter to keep track on the number of nodes currently moving
+ // TODO: create a counter to keep track on the number of edges having values
+
+ this.nodesData = null; // A DataSet or DataView
+ this.edgesData = null; // A DataSet or DataView
+
+ // create event listeners used to subscribe on the DataSets of the nodes and edges
+ var me = this;
+ this.nodesListeners = {
+ 'add': function (event, params) {
+ me._addNodes(params.items);
+ me.start();
+ },
+ 'update': function (event, params) {
+ me._updateNodes(params.items);
+ me.start();
+ },
+ 'remove': function (event, params) {
+ me._removeNodes(params.items);
+ me.start();
+ }
+ };
+ this.edgesListeners = {
+ 'add': function (event, params) {
+ me._addEdges(params.items);
+ me.start();
+ },
+ 'update': function (event, params) {
+ me._updateEdges(params.items);
+ me.start();
+ },
+ 'remove': function (event, params) {
+ me._removeEdges(params.items);
+ me.start();
+ }
+ };
+
+ this.groups = new Groups(); // object with groups
+ this.images = new Images(); // object with images
+ this.images.setOnloadCallback(function () {
+ graph._redraw();
+ });
+
+ // properties of the data
+ this.moving = false; // True if any of the nodes have an undefined position
+
+ this.selection = [];
+ this.timer = undefined;
+
+ // create a frame and canvas
+ this._create();
+
+ // apply options
+ this.setOptions(options);
+
+ // draw data
+ this.setData(data);
}
/**
@@ -141,33 +141,33 @@ function Graph (container, data, options) {
* {Options} [options] Object with options
*/
Graph.prototype.setData = function(data) {
- if (data && data.dot && (data.nodes || data.edges)) {
- throw new SyntaxError('Data must contain either parameter "dot" or ' +
- ' parameter pair "nodes" and "edges", but not both.');
- }
-
- // set options
- this.setOptions(data && data.options);
-
- // set all data
- if (data && data.dot) {
- // parse DOT file
- if(data && data.dot) {
- var dotData = vis.util.DOTToGraph(data.dot);
- this.setData(dotData);
- return;
- }
- }
- else {
- this._setNodes(data && data.nodes);
- this._setEdges(data && data.edges);
- }
-
- // find a stable position or start animating to a stable position
- if (this.stabilize) {
- this._doStabilize();
- }
- this.start();
+ if (data && data.dot && (data.nodes || data.edges)) {
+ throw new SyntaxError('Data must contain either parameter "dot" or ' +
+ ' parameter pair "nodes" and "edges", but not both.');
+ }
+
+ // set options
+ this.setOptions(data && data.options);
+
+ // set all data
+ if (data && data.dot) {
+ // parse DOT file
+ if(data && data.dot) {
+ var dotData = vis.util.DOTToGraph(data.dot);
+ this.setData(dotData);
+ return;
+ }
+ }
+ else {
+ this._setNodes(data && data.nodes);
+ this._setEdges(data && data.edges);
+ }
+
+ // find a stable position or start animating to a stable position
+ if (this.stabilize) {
+ this._doStabilize();
+ }
+ this.start();
};
/**
@@ -175,77 +175,77 @@ Graph.prototype.setData = function(data) {
* @param {Object} options
*/
Graph.prototype.setOptions = function (options) {
- if (options) {
- // retrieve parameter values
- if (options.width != undefined) {this.width = options.width;}
- if (options.height != undefined) {this.height = options.height;}
- if (options.stabilize != undefined) {this.stabilize = options.stabilize;}
- if (options.selectable != undefined) {this.selectable = options.selectable;}
-
- // TODO: work out these options and document them
- if (options.edges) {
- for (var prop in options.edges) {
- if (options.edges.hasOwnProperty(prop)) {
- this.constants.edges[prop] = options.edges[prop];
- }
- }
-
- if (options.edges.length != undefined &&
- options.nodes && options.nodes.distance == undefined) {
- this.constants.edges.length = options.edges.length;
- this.constants.nodes.distance = options.edges.length * 1.25;
- }
-
- if (!options.edges.fontColor) {
- this.constants.edges.fontColor = options.edges.color;
- }
-
- // Added to support dashed lines
- // David Jordan
- // 2012-08-08
- if (options.edges.dash) {
- if (options.edges.dash.length != undefined) {
- this.constants.edges.dash.length = options.edges.dash.length;
- }
- if (options.edges.dash.gap != undefined) {
- this.constants.edges.dash.gap = options.edges.dash.gap;
- }
- if (options.edges.dash.altLength != undefined) {
- this.constants.edges.dash.altLength = options.edges.dash.altLength;
- }
- }
+ if (options) {
+ // retrieve parameter values
+ if (options.width != undefined) {this.width = options.width;}
+ if (options.height != undefined) {this.height = options.height;}
+ if (options.stabilize != undefined) {this.stabilize = options.stabilize;}
+ if (options.selectable != undefined) {this.selectable = options.selectable;}
+
+ // TODO: work out these options and document them
+ if (options.edges) {
+ for (var prop in options.edges) {
+ if (options.edges.hasOwnProperty(prop)) {
+ this.constants.edges[prop] = options.edges[prop];
+ }
+ }
+
+ if (options.edges.length != undefined &&
+ options.nodes && options.nodes.distance == undefined) {
+ this.constants.edges.length = options.edges.length;
+ this.constants.nodes.distance = options.edges.length * 1.25;
+ }
+
+ if (!options.edges.fontColor) {
+ this.constants.edges.fontColor = options.edges.color;
+ }
+
+ // Added to support dashed lines
+ // David Jordan
+ // 2012-08-08
+ if (options.edges.dash) {
+ if (options.edges.dash.length != undefined) {
+ this.constants.edges.dash.length = options.edges.dash.length;
+ }
+ if (options.edges.dash.gap != undefined) {
+ this.constants.edges.dash.gap = options.edges.dash.gap;
}
+ if (options.edges.dash.altLength != undefined) {
+ this.constants.edges.dash.altLength = options.edges.dash.altLength;
+ }
+ }
+ }
- if (options.nodes) {
- for (prop in options.nodes) {
- if (options.nodes.hasOwnProperty(prop)) {
- this.constants.nodes[prop] = options.nodes[prop];
- }
- }
+ if (options.nodes) {
+ for (prop in options.nodes) {
+ if (options.nodes.hasOwnProperty(prop)) {
+ this.constants.nodes[prop] = options.nodes[prop];
+ }
+ }
- if (options.nodes.color) {
- this.constants.nodes.color = Node.parseColor(options.nodes.color);
- }
+ if (options.nodes.color) {
+ this.constants.nodes.color = Node.parseColor(options.nodes.color);
+ }
- /*
- if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
- if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
- */
- }
+ /*
+ if (options.nodes.widthMin) this.constants.nodes.radiusMin = options.nodes.widthMin;
+ if (options.nodes.widthMax) this.constants.nodes.radiusMax = options.nodes.widthMax;
+ */
+ }
- if (options.groups) {
- for (var groupname in options.groups) {
- if (options.groups.hasOwnProperty(groupname)) {
- var group = options.groups[groupname];
- this.groups.add(groupname, group);
- }
- }
+ if (options.groups) {
+ for (var groupname in options.groups) {
+ if (options.groups.hasOwnProperty(groupname)) {
+ var group = options.groups[groupname];
+ this.groups.add(groupname, group);
}
+ }
}
+ }
- this.setSize(this.width, this.height);
- this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
- this._setScale(1);
+ this.setSize(this.width, this.height);
+ this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
+ this._setScale(1);
};
/**
@@ -255,7 +255,7 @@ Graph.prototype.setOptions = function (options) {
* @private
*/
Graph.prototype._trigger = function (event, params) {
- events.trigger(this, event, params);
+ events.trigger(this, event, params);
};
@@ -267,48 +267,48 @@ Graph.prototype._trigger = function (event, params) {
* @private
*/
Graph.prototype._create = function () {
- // remove all elements from the container element.
- while (this.containerElement.hasChildNodes()) {
- this.containerElement.removeChild(this.containerElement.firstChild);
- }
-
- this.frame = document.createElement('div');
- this.frame.className = 'graph-frame';
- this.frame.style.position = 'relative';
- this.frame.style.overflow = 'hidden';
-
- // create the graph canvas (HTML canvas element)
- this.frame.canvas = document.createElement( 'canvas' );
- this.frame.canvas.style.position = 'relative';
- this.frame.appendChild(this.frame.canvas);
- if (!this.frame.canvas.getContext) {
- var noCanvas = document.createElement( 'DIV' );
- noCanvas.style.color = 'red';
- noCanvas.style.fontWeight = 'bold' ;
- noCanvas.style.padding = '10px';
- noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
- this.frame.canvas.appendChild(noCanvas);
- }
-
- var me = this;
- this.drag = {};
- this.pinch = {};
- this.hammer = Hammer(this.frame.canvas, {
- prevent_default: true
- });
- this.hammer.on('tap', me._onTap.bind(me) );
- this.hammer.on('hold', me._onHold.bind(me) );
- this.hammer.on('pinch', me._onPinch.bind(me) );
- this.hammer.on('touch', me._onTouch.bind(me) );
- this.hammer.on('dragstart', me._onDragStart.bind(me) );
- this.hammer.on('drag', me._onDrag.bind(me) );
- this.hammer.on('dragend', me._onDragEnd.bind(me) );
- this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
- this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
- this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
-
- // add the frame to the container element
- this.containerElement.appendChild(this.frame);
+ // remove all elements from the container element.
+ while (this.containerElement.hasChildNodes()) {
+ this.containerElement.removeChild(this.containerElement.firstChild);
+ }
+
+ this.frame = document.createElement('div');
+ this.frame.className = 'graph-frame';
+ this.frame.style.position = 'relative';
+ this.frame.style.overflow = 'hidden';
+
+ // create the graph canvas (HTML canvas element)
+ this.frame.canvas = document.createElement( 'canvas' );
+ this.frame.canvas.style.position = 'relative';
+ this.frame.appendChild(this.frame.canvas);
+ if (!this.frame.canvas.getContext) {
+ var noCanvas = document.createElement( 'DIV' );
+ noCanvas.style.color = 'red';
+ noCanvas.style.fontWeight = 'bold' ;
+ noCanvas.style.padding = '10px';
+ noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
+ this.frame.canvas.appendChild(noCanvas);
+ }
+
+ var me = this;
+ this.drag = {};
+ this.pinch = {};
+ this.hammer = Hammer(this.frame.canvas, {
+ prevent_default: true
+ });
+ this.hammer.on('tap', me._onTap.bind(me) );
+ this.hammer.on('hold', me._onHold.bind(me) );
+ this.hammer.on('pinch', me._onPinch.bind(me) );
+ this.hammer.on('touch', me._onTouch.bind(me) );
+ this.hammer.on('dragstart', me._onDragStart.bind(me) );
+ this.hammer.on('drag', me._onDrag.bind(me) );
+ this.hammer.on('dragend', me._onDragEnd.bind(me) );
+ this.hammer.on('mousewheel',me._onMouseWheel.bind(me) );
+ this.hammer.on('DOMMouseScroll',me._onMouseWheel.bind(me) ); // for FF
+ this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
+
+ // add the frame to the container element
+ this.containerElement.appendChild(this.frame);
};
/**
@@ -318,21 +318,21 @@ Graph.prototype._create = function () {
* @private
*/
Graph.prototype._getNodeAt = function (pointer) {
- var x = this._canvasToX(pointer.x);
- var y = this._canvasToY(pointer.y);
-
- var obj = {
- left: x,
- top: y,
- right: x,
- bottom: y
- };
-
- // if there are overlapping nodes, select the last one, this is the
- // one which is drawn on top of the others
- var overlappingNodes = this._getNodesOverlappingWith(obj);
- return (overlappingNodes.length > 0) ?
- overlappingNodes[overlappingNodes.length - 1] : null;
+ var x = this._canvasToX(pointer.x);
+ var y = this._canvasToY(pointer.y);
+
+ var obj = {
+ left: x,
+ top: y,
+ right: x,
+ bottom: y
+ };
+
+ // if there are overlapping nodes, select the last one, this is the
+ // one which is drawn on top of the others
+ var overlappingNodes = this._getNodesOverlappingWith(obj);
+ return (overlappingNodes.length > 0) ?
+ overlappingNodes[overlappingNodes.length - 1] : null;
};
/**
@@ -342,10 +342,10 @@ Graph.prototype._getNodeAt = function (pointer) {
* @private
*/
Graph.prototype._getPointer = function (touch) {
- return {
- x: touch.pageX - vis.util.getAbsoluteLeft(this.frame.canvas),
- y: touch.pageY - vis.util.getAbsoluteTop(this.frame.canvas)
- };
+ return {
+ x: touch.pageX - vis.util.getAbsoluteLeft(this.frame.canvas),
+ y: touch.pageY - vis.util.getAbsoluteTop(this.frame.canvas)
+ };
};
/**
@@ -354,9 +354,9 @@ Graph.prototype._getPointer = function (touch) {
* @private
*/
Graph.prototype._onTouch = function (event) {
- this.drag.pointer = this._getPointer(event.gesture.touches[0]);
- this.drag.pinched = false;
- this.pinch.scale = this._getScale();
+ this.drag.pointer = this._getPointer(event.gesture.touches[0]);
+ this.drag.pinched = false;
+ this.pinch.scale = this._getScale();
};
/**
@@ -364,44 +364,44 @@ Graph.prototype._onTouch = function (event) {
* @private
*/
Graph.prototype._onDragStart = function () {
- var drag = this.drag;
+ var drag = this.drag;
- drag.selection = [];
- drag.translation = this._getTranslation();
- drag.nodeId = this._getNodeAt(drag.pointer);
- // note: drag.pointer is set in _onTouch to get the initial touch location
+ drag.selection = [];
+ drag.translation = this._getTranslation();
+ drag.nodeId = this._getNodeAt(drag.pointer);
+ // note: drag.pointer is set in _onTouch to get the initial touch location
- var node = this.nodes[drag.nodeId];
- if (node) {
- // select the clicked node if not yet selected
- if (!node.isSelected()) {
- this._selectNodes([drag.nodeId]);
- }
+ var node = this.nodes[drag.nodeId];
+ if (node) {
+ // select the clicked node if not yet selected
+ if (!node.isSelected()) {
+ this._selectNodes([drag.nodeId]);
+ }
- // create an array with the selected nodes and their original location and status
- var me = this;
- this.selection.forEach(function (id) {
- var node = me.nodes[id];
- if (node) {
- var s = {
- id: id,
- node: node,
-
- // store original x, y, xFixed and yFixed, make the node temporarily Fixed
- x: node.x,
- y: node.y,
- xFixed: node.xFixed,
- yFixed: node.yFixed
- };
-
- node.xFixed = true;
- node.yFixed = true;
-
- drag.selection.push(s);
- }
- });
+ // create an array with the selected nodes and their original location and status
+ var me = this;
+ this.selection.forEach(function (id) {
+ var node = me.nodes[id];
+ if (node) {
+ var s = {
+ id: id,
+ node: node,
+
+ // store original x, y, xFixed and yFixed, make the node temporarily Fixed
+ x: node.x,
+ y: node.y,
+ xFixed: node.xFixed,
+ yFixed: node.yFixed
+ };
- }
+ node.xFixed = true;
+ node.yFixed = true;
+
+ drag.selection.push(s);
+ }
+ });
+
+ }
};
/**
@@ -409,51 +409,51 @@ Graph.prototype._onDragStart = function () {
* @private
*/
Graph.prototype._onDrag = function (event) {
- if (this.drag.pinched) {
- return;
- }
-
- var pointer = this._getPointer(event.gesture.touches[0]);
-
- var me = this,
- drag = this.drag,
- selection = drag.selection;
- if (selection && selection.length) {
- // calculate delta's and new location
- var deltaX = pointer.x - drag.pointer.x,
- deltaY = pointer.y - drag.pointer.y;
-
- // update position of all selected nodes
- selection.forEach(function (s) {
- var node = s.node;
-
- if (!s.xFixed) {
- node.x = me._canvasToX(me._xToCanvas(s.x) + deltaX);
- }
-
- if (!s.yFixed) {
- node.y = me._canvasToY(me._yToCanvas(s.y) + deltaY);
- }
- });
+ if (this.drag.pinched) {
+ return;
+ }
+
+ var pointer = this._getPointer(event.gesture.touches[0]);
+
+ var me = this,
+ drag = this.drag,
+ selection = drag.selection;
+ if (selection && selection.length) {
+ // calculate delta's and new location
+ var deltaX = pointer.x - drag.pointer.x,
+ deltaY = pointer.y - drag.pointer.y;
+
+ // update position of all selected nodes
+ selection.forEach(function (s) {
+ var node = s.node;
+
+ if (!s.xFixed) {
+ node.x = me._canvasToX(me._xToCanvas(s.x) + deltaX);
+ }
+
+ if (!s.yFixed) {
+ node.y = me._canvasToY(me._yToCanvas(s.y) + deltaY);
+ }
+ });
- // start animation if not yet running
- if (!this.moving) {
- this.moving = true;
- this.start();
- }
+ // start animation if not yet running
+ if (!this.moving) {
+ this.moving = true;
+ this.start();
}
- else {
- // move the graph
- var diffX = pointer.x - this.drag.pointer.x;
- var diffY = pointer.y - this.drag.pointer.y;
+ }
+ else {
+ // move the graph
+ var diffX = pointer.x - this.drag.pointer.x;
+ var diffY = pointer.y - this.drag.pointer.y;
- this._setTranslation(
- this.drag.translation.x + diffX,
- this.drag.translation.y + diffY);
- this._redraw();
+ this._setTranslation(
+ this.drag.translation.x + diffX,
+ this.drag.translation.y + diffY);
+ this._redraw();
- this.moved = true;
- }
+ this.moved = true;
+ }
};
/**
@@ -461,14 +461,14 @@ Graph.prototype._onDrag = function (event) {
* @private
*/
Graph.prototype._onDragEnd = function () {
- var selection = this.drag.selection;
- if (selection) {
- selection.forEach(function (s) {
- // restore original xFixed and yFixed
- s.node.xFixed = s.xFixed;
- s.node.yFixed = s.yFixed;
- });
- }
+ var selection = this.drag.selection;
+ if (selection) {
+ selection.forEach(function (s) {
+ // restore original xFixed and yFixed
+ s.node.xFixed = s.xFixed;
+ s.node.yFixed = s.yFixed;
+ });
+ }
};
/**
@@ -476,23 +476,23 @@ Graph.prototype._onDragEnd = function () {
* @private
*/
Graph.prototype._onTap = function (event) {
- var pointer = this._getPointer(event.gesture.touches[0]);
+ var pointer = this._getPointer(event.gesture.touches[0]);
- var nodeId = this._getNodeAt(pointer);
- var node = this.nodes[nodeId];
- if (node) {
- // select this node
- this._selectNodes([nodeId]);
+ var nodeId = this._getNodeAt(pointer);
+ var node = this.nodes[nodeId];
+ if (node) {
+ // select this node
+ this._selectNodes([nodeId]);
- if (!this.moving) {
- this._redraw();
- }
- }
- else {
- // remove selection
- this._unselectNodes();
- this._redraw();
+ if (!this.moving) {
+ this._redraw();
}
+ }
+ else {
+ // remove selection
+ this._unselectNodes();
+ this._redraw();
+ }
};
/**
@@ -500,26 +500,26 @@ Graph.prototype._onTap = function (event) {
* @private
*/
Graph.prototype._onHold = function (event) {
- var pointer = this._getPointer(event.gesture.touches[0]);
- var nodeId = this._getNodeAt(pointer);
- var node = this.nodes[nodeId];
- if (node) {
- if (!node.isSelected()) {
- // select this node, keep previous selection
- var append = true;
- this._selectNodes([nodeId], append);
- }
- else {
- this._unselectNodes([nodeId]);
- }
-
- if (!this.moving) {
- this._redraw();
- }
+ var pointer = this._getPointer(event.gesture.touches[0]);
+ var nodeId = this._getNodeAt(pointer);
+ var node = this.nodes[nodeId];
+ if (node) {
+ if (!node.isSelected()) {
+ // select this node, keep previous selection
+ var append = true;
+ this._selectNodes([nodeId], append);
}
else {
- // Do nothing
+ this._unselectNodes([nodeId]);
}
+
+ if (!this.moving) {
+ this._redraw();
+ }
+ }
+ else {
+ // Do nothing
+ }
};
/**
@@ -528,16 +528,16 @@ Graph.prototype._onHold = function (event) {
* @private
*/
Graph.prototype._onPinch = function (event) {
- var pointer = this._getPointer(event.gesture.center);
+ var pointer = this._getPointer(event.gesture.center);
- this.drag.pinched = true;
- if (!('scale' in this.pinch)) {
- this.pinch.scale = 1;
- }
+ this.drag.pinched = true;
+ if (!('scale' in this.pinch)) {
+ this.pinch.scale = 1;
+ }
- // TODO: enable moving while pinching?
- var scale = this.pinch.scale * event.gesture.scale;
- this._zoom(scale, pointer)
+ // TODO: enable moving while pinching?
+ var scale = this.pinch.scale * event.gesture.scale;
+ this._zoom(scale, pointer)
};
/**
@@ -548,24 +548,24 @@ Graph.prototype._onPinch = function (event) {
* @private
*/
Graph.prototype._zoom = function(scale, pointer) {
- var scaleOld = this._getScale();
- if (scale < 0.01) {
- scale = 0.01;
- }
- if (scale > 10) {
- scale = 10;
- }
-
- var translation = this._getTranslation();
- var scaleFrac = scale / scaleOld;
- var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
- var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
-
- this._setScale(scale);
- this._setTranslation(tx, ty);
- this._redraw();
-
- return scale;
+ var scaleOld = this._getScale();
+ if (scale < 0.01) {
+ scale = 0.01;
+ }
+ if (scale > 10) {
+ scale = 10;
+ }
+
+ var translation = this._getTranslation();
+ var scaleFrac = scale / scaleOld;
+ var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
+ var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
+
+ this._setScale(scale);
+ this._setTranslation(tx, ty);
+ this._redraw();
+
+ return scale;
};
/**
@@ -576,45 +576,45 @@ Graph.prototype._zoom = function(scale, pointer) {
* @private
*/
Graph.prototype._onMouseWheel = function(event) {
- // retrieve delta
- var delta = 0;
- if (event.wheelDelta) { /* IE/Opera. */
- delta = event.wheelDelta/120;
- } else if (event.detail) { /* Mozilla case. */
- // In Mozilla, sign of delta is different than in IE.
- // Also, delta is multiple of 3.
- delta = -event.detail/3;
- }
-
- // If delta is nonzero, handle it.
- // Basically, delta is now positive if wheel was scrolled up,
- // and negative, if wheel was scrolled down.
- if (delta) {
- if (!('mouswheelScale' in this.pinch)) {
- this.pinch.mouswheelScale = 1;
- }
-
- // calculate the new scale
- var scale = this.pinch.mouswheelScale;
- var zoom = delta / 10;
- if (delta < 0) {
- zoom = zoom / (1 - zoom);
- }
- scale *= (1 + zoom);
-
- // calculate the pointer location
- var gesture = Hammer.event.collectEventData(this, 'scroll', event);
- var pointer = this._getPointer(gesture.center);
+ // retrieve delta
+ var delta = 0;
+ if (event.wheelDelta) { /* IE/Opera. */
+ delta = event.wheelDelta/120;
+ } else if (event.detail) { /* Mozilla case. */
+ // In Mozilla, sign of delta is different than in IE.
+ // Also, delta is multiple of 3.
+ delta = -event.detail/3;
+ }
+
+ // If delta is nonzero, handle it.
+ // Basically, delta is now positive if wheel was scrolled up,
+ // and negative, if wheel was scrolled down.
+ if (delta) {
+ if (!('mouswheelScale' in this.pinch)) {
+ this.pinch.mouswheelScale = 1;
+ }
+
+ // calculate the new scale
+ var scale = this.pinch.mouswheelScale;
+ var zoom = delta / 10;
+ if (delta < 0) {
+ zoom = zoom / (1 - zoom);
+ }
+ scale *= (1 + zoom);
+
+ // calculate the pointer location
+ var gesture = Hammer.event.collectEventData(this, 'scroll', event);
+ var pointer = this._getPointer(gesture.center);
- // apply the new scale
- scale = this._zoom(scale, pointer);
+ // apply the new scale
+ scale = this._zoom(scale, pointer);
- // store the new, applied scale
- this.pinch.mouswheelScale = scale;
- }
+ // store the new, applied scale
+ this.pinch.mouswheelScale = scale;
+ }
- // Prevent default actions caused by mouse wheel.
- event.preventDefault();
+ // Prevent default actions caused by mouse wheel.
+ event.preventDefault();
};
@@ -624,26 +624,26 @@ Graph.prototype._onMouseWheel = function(event) {
* @private
*/
Graph.prototype._onMouseMoveTitle = function (event) {
- var gesture = Hammer.event.collectEventData(this, 'mousemove', event);
- var pointer = this._getPointer(gesture.center);
-
- // check if the previously selected node is still selected
- if (this.popupNode) {
- this._checkHidePopup(pointer);
- }
-
- // start a timeout that will check if the mouse is positioned above
- // an element
- var me = this;
- var checkShow = function() {
- me._checkShowPopup(pointer);
- };
- if (this.popupTimer) {
- clearInterval(this.popupTimer); // stop any running timer
- }
- if (!this.leftButtonDown) {
- this.popupTimer = setTimeout(checkShow, 300);
- }
+ var gesture = Hammer.event.collectEventData(this, 'mousemove', event);
+ var pointer = this._getPointer(gesture.center);
+
+ // check if the previously selected node is still selected
+ if (this.popupNode) {
+ this._checkHidePopup(pointer);
+ }
+
+ // start a timeout that will check if the mouse is positioned above
+ // an element
+ var me = this;
+ var checkShow = function() {
+ me._checkShowPopup(pointer);
+ };
+ if (this.popupTimer) {
+ clearInterval(this.popupTimer); // stop any running timer
+ }
+ if (!this.leftButtonDown) {
+ this.popupTimer = setTimeout(checkShow, 300);
+ }
};
/**
@@ -655,66 +655,66 @@ Graph.prototype._onMouseMoveTitle = function (event) {
* @private
*/
Graph.prototype._checkShowPopup = function (pointer) {
- var obj = {
- left: this._canvasToX(pointer.x),
- top: this._canvasToY(pointer.y),
- right: this._canvasToX(pointer.x),
- bottom: this._canvasToY(pointer.y)
- };
-
- var id;
- var lastPopupNode = this.popupNode;
-
- if (this.popupNode == undefined) {
- // search the nodes for overlap, select the top one in case of multiple nodes
- var nodes = this.nodes;
- for (id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- var node = nodes[id];
- if (node.getTitle() != undefined && node.isOverlappingWith(obj)) {
- this.popupNode = node;
- break;
- }
- }
- }
- }
-
- if (this.popupNode == undefined) {
- // search the edges for overlap
- var edges = this.edges;
- for (id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- if (edge.connected && (edge.getTitle() != undefined) &&
- edge.isOverlappingWith(obj)) {
- this.popupNode = edge;
- break;
- }
- }
+ var obj = {
+ left: this._canvasToX(pointer.x),
+ top: this._canvasToY(pointer.y),
+ right: this._canvasToX(pointer.x),
+ bottom: this._canvasToY(pointer.y)
+ };
+
+ var id;
+ var lastPopupNode = this.popupNode;
+
+ if (this.popupNode == undefined) {
+ // search the nodes for overlap, select the top one in case of multiple nodes
+ var nodes = this.nodes;
+ for (id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ var node = nodes[id];
+ if (node.getTitle() != undefined && node.isOverlappingWith(obj)) {
+ this.popupNode = node;
+ break;
}
+ }
}
+ }
- if (this.popupNode) {
- // show popup message window
- if (this.popupNode != lastPopupNode) {
- var me = this;
- if (!me.popup) {
- me.popup = new Popup(me.frame);
- }
-
- // adjust a small offset such that the mouse cursor is located in the
- // bottom left location of the popup, and you can easily move over the
- // popup area
- me.popup.setPosition(pointer.x - 3, pointer.y - 3);
- me.popup.setText(me.popupNode.getTitle());
- me.popup.show();
- }
- }
- else {
- if (this.popup) {
- this.popup.hide();
+ if (this.popupNode == undefined) {
+ // search the edges for overlap
+ var edges = this.edges;
+ for (id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ var edge = edges[id];
+ if (edge.connected && (edge.getTitle() != undefined) &&
+ edge.isOverlappingWith(obj)) {
+ this.popupNode = edge;
+ break;
}
- }
+ }
+ }
+ }
+
+ if (this.popupNode) {
+ // show popup message window
+ if (this.popupNode != lastPopupNode) {
+ var me = this;
+ if (!me.popup) {
+ me.popup = new Popup(me.frame);
+ }
+
+ // adjust a small offset such that the mouse cursor is located in the
+ // bottom left location of the popup, and you can easily move over the
+ // popup area
+ me.popup.setPosition(pointer.x - 3, pointer.y - 3);
+ me.popup.setText(me.popupNode.getTitle());
+ me.popup.show();
+ }
+ }
+ else {
+ if (this.popup) {
+ this.popup.hide();
+ }
+ }
};
/**
@@ -724,12 +724,12 @@ Graph.prototype._checkShowPopup = function (pointer) {
* @private
*/
Graph.prototype._checkHidePopup = function (pointer) {
- if (!this.popupNode || !this._getNodeAt(pointer) ) {
- this.popupNode = undefined;
- if (this.popup) {
- this.popup.hide();
- }
+ if (!this.popupNode || !this._getNodeAt(pointer) ) {
+ this.popupNode = undefined;
+ if (this.popup) {
+ this.popup.hide();
}
+ }
};
/**
@@ -743,43 +743,43 @@ Graph.prototype._checkHidePopup = function (pointer) {
* @private
*/
Graph.prototype._unselectNodes = function(selection, triggerSelect) {
- var changed = false;
- var i, iMax, id;
-
- if (selection) {
- // remove provided selections
- for (i = 0, iMax = selection.length; i < iMax; i++) {
- id = selection[i];
- this.nodes[id].unselect();
-
- var j = 0;
- while (j < this.selection.length) {
- if (this.selection[j] == id) {
- this.selection.splice(j, 1);
- changed = true;
- }
- else {
- j++;
- }
- }
+ var changed = false;
+ var i, iMax, id;
+
+ if (selection) {
+ // remove provided selections
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ id = selection[i];
+ this.nodes[id].unselect();
+
+ var j = 0;
+ while (j < this.selection.length) {
+ if (this.selection[j] == id) {
+ this.selection.splice(j, 1);
+ changed = true;
}
- }
- else if (this.selection && this.selection.length) {
- // remove all selections
- for (i = 0, iMax = this.selection.length; i < iMax; i++) {
- id = this.selection[i];
- this.nodes[id].unselect();
- changed = true;
+ else {
+ j++;
}
- this.selection = [];
+ }
}
-
- if (changed && (triggerSelect == true || triggerSelect == undefined)) {
- // fire the select event
- this._trigger('select');
+ }
+ else if (this.selection && this.selection.length) {
+ // remove all selections
+ for (i = 0, iMax = this.selection.length; i < iMax; i++) {
+ id = this.selection[i];
+ this.nodes[id].unselect();
+ changed = true;
}
+ this.selection = [];
+ }
- return changed;
+ if (changed && (triggerSelect == true || triggerSelect == undefined)) {
+ // fire the select event
+ this._trigger('select');
+ }
+
+ return changed;
};
/**
@@ -791,51 +791,51 @@ Graph.prototype._unselectNodes = function(selection, triggerSelect) {
* @private
*/
Graph.prototype._selectNodes = function(selection, append) {
- var changed = false;
- var i, iMax;
-
- // TODO: the selectNodes method is a little messy, rework this
-
- // check if the current selection equals the desired selection
- var selectionAlreadyThere = true;
- if (selection.length != this.selection.length) {
+ var changed = false;
+ var i, iMax;
+
+ // TODO: the selectNodes method is a little messy, rework this
+
+ // check if the current selection equals the desired selection
+ var selectionAlreadyThere = true;
+ if (selection.length != this.selection.length) {
+ selectionAlreadyThere = false;
+ }
+ else {
+ for (i = 0, iMax = Math.min(selection.length, this.selection.length); i < iMax; i++) {
+ if (selection[i] != this.selection[i]) {
selectionAlreadyThere = false;
+ break;
+ }
}
- else {
- for (i = 0, iMax = Math.min(selection.length, this.selection.length); i < iMax; i++) {
- if (selection[i] != this.selection[i]) {
- selectionAlreadyThere = false;
- break;
- }
- }
- }
- if (selectionAlreadyThere) {
- return changed;
- }
-
- if (append == undefined || append == false) {
- // first deselect any selected node
- var triggerSelect = false;
- changed = this._unselectNodes(undefined, triggerSelect);
- }
-
- for (i = 0, iMax = selection.length; i < iMax; i++) {
- // add each of the new selections, but only when they are not duplicate
- var id = selection[i];
- var isDuplicate = (this.selection.indexOf(id) != -1);
- if (!isDuplicate) {
- this.nodes[id].select();
- this.selection.push(id);
- changed = true;
- }
- }
-
- if (changed) {
- // fire the select event
- this._trigger('select');
- }
-
+ }
+ if (selectionAlreadyThere) {
return changed;
+ }
+
+ if (append == undefined || append == false) {
+ // first deselect any selected node
+ var triggerSelect = false;
+ changed = this._unselectNodes(undefined, triggerSelect);
+ }
+
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ // add each of the new selections, but only when they are not duplicate
+ var id = selection[i];
+ var isDuplicate = (this.selection.indexOf(id) != -1);
+ if (!isDuplicate) {
+ this.nodes[id].select();
+ this.selection.push(id);
+ changed = true;
+ }
+ }
+
+ if (changed) {
+ // fire the select event
+ this._trigger('select');
+ }
+
+ return changed;
};
/**
@@ -845,18 +845,18 @@ Graph.prototype._selectNodes = function(selection, append) {
* @private
*/
Graph.prototype._getNodesOverlappingWith = function (obj) {
- var nodes = this.nodes,
- overlappingNodes = [];
+ var nodes = this.nodes,
+ overlappingNodes = [];
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].isOverlappingWith(obj)) {
- overlappingNodes.push(id);
- }
- }
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ if (nodes[id].isOverlappingWith(obj)) {
+ overlappingNodes.push(id);
+ }
}
+ }
- return overlappingNodes;
+ return overlappingNodes;
};
/**
@@ -865,7 +865,7 @@ Graph.prototype._getNodesOverlappingWith = function (obj) {
* selected nodes.
*/
Graph.prototype.getSelection = function() {
- return this.selection.concat([]);
+ return this.selection.concat([]);
};
/**
@@ -874,31 +874,31 @@ Graph.prototype.getSelection = function() {
* selected nodes.
*/
Graph.prototype.setSelection = function(selection) {
- var i, iMax, id;
+ var i, iMax, id;
- if (!selection || (selection.length == undefined))
- throw 'Selection must be an array with ids';
+ if (!selection || (selection.length == undefined))
+ throw 'Selection must be an array with ids';
- // first unselect any selected node
- for (i = 0, iMax = this.selection.length; i < iMax; i++) {
- id = this.selection[i];
- this.nodes[id].unselect();
- }
+ // first unselect any selected node
+ for (i = 0, iMax = this.selection.length; i < iMax; i++) {
+ id = this.selection[i];
+ this.nodes[id].unselect();
+ }
- this.selection = [];
+ this.selection = [];
- for (i = 0, iMax = selection.length; i < iMax; i++) {
- id = selection[i];
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ id = selection[i];
- var node = this.nodes[id];
- if (!node) {
- throw new RangeError('Node with id "' + id + '" not found');
- }
- node.select();
- this.selection.push(id);
+ var node = this.nodes[id];
+ if (!node) {
+ throw new RangeError('Node with id "' + id + '" not found');
}
+ node.select();
+ this.selection.push(id);
+ }
- this.redraw();
+ this.redraw();
};
/**
@@ -906,16 +906,16 @@ Graph.prototype.setSelection = function(selection) {
* @private
*/
Graph.prototype._updateSelection = function () {
- var i = 0;
- while (i < this.selection.length) {
- var id = this.selection[i];
- if (!this.nodes[id]) {
- this.selection.splice(i, 1);
- }
- else {
- i++;
- }
+ var i = 0;
+ while (i < this.selection.length) {
+ var id = this.selection[i];
+ if (!this.nodes[id]) {
+ this.selection.splice(i, 1);
}
+ else {
+ i++;
+ }
+ }
};
/**
@@ -927,74 +927,74 @@ Graph.prototype._updateSelection = function () {
* @private
*/
Graph.prototype._getConnectionCount = function(level) {
- if (level == undefined) {
- level = 1;
- }
-
- // get the nodes connected to given nodes
- function getConnectedNodes(nodes) {
- var connectedNodes = [];
-
- for (var j = 0, jMax = nodes.length; j < jMax; j++) {
- var node = nodes[j];
-
- // find all nodes connected to this node
- var edges = node.edges;
- for (var i = 0, iMax = edges.length; i < iMax; i++) {
- var edge = edges[i];
- var other = null;
-
- // check if connected
- if (edge.from == node)
- other = edge.to;
- else if (edge.to == node)
- other = edge.from;
-
- // check if the other node is not already in the list with nodes
- var k, kMax;
- if (other) {
- for (k = 0, kMax = nodes.length; k < kMax; k++) {
- if (nodes[k] == other) {
- other = null;
- break;
- }
- }
- }
- if (other) {
- for (k = 0, kMax = connectedNodes.length; k < kMax; k++) {
- if (connectedNodes[k] == other) {
- other = null;
- break;
- }
- }
- }
-
- if (other)
- connectedNodes.push(other);
+ if (level == undefined) {
+ level = 1;
+ }
+
+ // get the nodes connected to given nodes
+ function getConnectedNodes(nodes) {
+ var connectedNodes = [];
+
+ for (var j = 0, jMax = nodes.length; j < jMax; j++) {
+ var node = nodes[j];
+
+ // find all nodes connected to this node
+ var edges = node.edges;
+ for (var i = 0, iMax = edges.length; i < iMax; i++) {
+ var edge = edges[i];
+ var other = null;
+
+ // check if connected
+ if (edge.from == node)
+ other = edge.to;
+ else if (edge.to == node)
+ other = edge.from;
+
+ // check if the other node is not already in the list with nodes
+ var k, kMax;
+ if (other) {
+ for (k = 0, kMax = nodes.length; k < kMax; k++) {
+ if (nodes[k] == other) {
+ other = null;
+ break;
}
+ }
}
-
- return connectedNodes;
- }
-
- var connections = [];
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- var c = [nodes[id]];
- for (var l = 0; l < level; l++) {
- c = c.concat(getConnectedNodes(c));
+ if (other) {
+ for (k = 0, kMax = connectedNodes.length; k < kMax; k++) {
+ if (connectedNodes[k] == other) {
+ other = null;
+ break;
}
- connections.push(c);
+ }
}
+
+ if (other)
+ connectedNodes.push(other);
+ }
}
- var hubs = [];
- for (var i = 0, len = connections.length; i < len; i++) {
- hubs.push(connections[i].length);
+ return connectedNodes;
+ }
+
+ var connections = [];
+ var nodes = this.nodes;
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ var c = [nodes[id]];
+ for (var l = 0; l < level; l++) {
+ c = c.concat(getConnectedNodes(c));
+ }
+ connections.push(c);
}
+ }
+
+ var hubs = [];
+ for (var i = 0, len = connections.length; i < len; i++) {
+ hubs.push(connections[i].length);
+ }
- return hubs;
+ return hubs;
};
@@ -1006,14 +1006,14 @@ Graph.prototype._getConnectionCount = function(level) {
* or '30%')
*/
Graph.prototype.setSize = function(width, height) {
- this.frame.style.width = width;
- this.frame.style.height = height;
+ this.frame.style.width = width;
+ this.frame.style.height = height;
- this.frame.canvas.style.width = '100%';
- this.frame.canvas.style.height = '100%';
+ this.frame.canvas.style.width = '100%';
+ this.frame.canvas.style.height = '100%';
- this.frame.canvas.width = this.frame.canvas.clientWidth;
- this.frame.canvas.height = this.frame.canvas.clientHeight;
+ this.frame.canvas.width = this.frame.canvas.clientWidth;
+ this.frame.canvas.height = this.frame.canvas.clientHeight;
};
/**
@@ -1022,45 +1022,45 @@ Graph.prototype.setSize = function(width, height) {
* @private
*/
Graph.prototype._setNodes = function(nodes) {
- var oldNodesData = this.nodesData;
-
- if (nodes instanceof DataSet || nodes instanceof DataView) {
- this.nodesData = nodes;
- }
- else if (nodes instanceof Array) {
- this.nodesData = new DataSet();
- this.nodesData.add(nodes);
- }
- else if (!nodes) {
- this.nodesData = new DataSet();
- }
- else {
- throw new TypeError('Array or DataSet expected');
- }
-
- if (oldNodesData) {
- // unsubscribe from old dataset
- util.forEach(this.nodesListeners, function (callback, event) {
- oldNodesData.unsubscribe(event, callback);
- });
- }
+ var oldNodesData = this.nodesData;
+
+ if (nodes instanceof DataSet || nodes instanceof DataView) {
+ this.nodesData = nodes;
+ }
+ else if (nodes instanceof Array) {
+ this.nodesData = new DataSet();
+ this.nodesData.add(nodes);
+ }
+ else if (!nodes) {
+ this.nodesData = new DataSet();
+ }
+ else {
+ throw new TypeError('Array or DataSet expected');
+ }
+
+ if (oldNodesData) {
+ // unsubscribe from old dataset
+ util.forEach(this.nodesListeners, function (callback, event) {
+ oldNodesData.unsubscribe(event, callback);
+ });
+ }
- // remove drawn nodes
- this.nodes = {};
+ // remove drawn nodes
+ this.nodes = {};
- if (this.nodesData) {
- // subscribe to new dataset
- var me = this;
- util.forEach(this.nodesListeners, function (callback, event) {
- me.nodesData.subscribe(event, callback);
- });
+ if (this.nodesData) {
+ // subscribe to new dataset
+ var me = this;
+ util.forEach(this.nodesListeners, function (callback, event) {
+ me.nodesData.subscribe(event, callback);
+ });
- // draw all new nodes
- var ids = this.nodesData.getIds();
- this._addNodes(ids);
- }
+ // draw all new nodes
+ var ids = this.nodesData.getIds();
+ this._addNodes(ids);
+ }
- this._updateSelection();
+ this._updateSelection();
};
/**
@@ -1069,29 +1069,29 @@ Graph.prototype._setNodes = function(nodes) {
* @private
*/
Graph.prototype._addNodes = function(ids) {
- var id;
- for (var i = 0, len = ids.length; i < len; i++) {
- id = ids[i];
- var data = this.nodesData.get(id);
- var node = new Node(data, this.images, this.groups, this.constants);
- this.nodes[id] = node; // note: this may replace an existing node
-
- if (!node.isFixed()) {
- // TODO: position new nodes in a smarter way!
- var radius = this.constants.edges.length * 2;
- var count = ids.length;
- var angle = 2 * Math.PI * (i / count);
- node.x = radius * Math.cos(angle);
- node.y = radius * Math.sin(angle);
-
- // note: no not use node.isMoving() here, as that gives the current
- // velocity of the node, which is zero after creation of the node.
- this.moving = true;
- }
- }
-
- this._reconnectEdges();
- this._updateValueRange(this.nodes);
+ var id;
+ for (var i = 0, len = ids.length; i < len; i++) {
+ id = ids[i];
+ var data = this.nodesData.get(id);
+ var node = new Node(data, this.images, this.groups, this.constants);
+ this.nodes[id] = node; // note: this may replace an existing node
+
+ if (!node.isFixed()) {
+ // TODO: position new nodes in a smarter way!
+ var radius = this.constants.edges.length * 2;
+ var count = ids.length;
+ var angle = 2 * Math.PI * (i / count);
+ node.x = radius * Math.cos(angle);
+ node.y = radius * Math.sin(angle);
+
+ // note: no not use node.isMoving() here, as that gives the current
+ // velocity of the node, which is zero after creation of the node.
+ this.moving = true;
+ }
+ }
+
+ this._reconnectEdges();
+ this._updateValueRange(this.nodes);
};
/**
@@ -1100,29 +1100,29 @@ Graph.prototype._addNodes = function(ids) {
* @private
*/
Graph.prototype._updateNodes = function(ids) {
- var nodes = this.nodes,
- nodesData = this.nodesData;
- for (var i = 0, len = ids.length; i < len; i++) {
- var id = ids[i];
- var node = nodes[id];
- var data = nodesData.get(id);
- if (node) {
- // update node
- node.setProperties(data, this.constants);
- }
- else {
- // create node
- node = new Node(properties, this.images, this.groups, this.constants);
- nodes[id] = node;
+ var nodes = this.nodes,
+ nodesData = this.nodesData;
+ for (var i = 0, len = ids.length; i < len; i++) {
+ var id = ids[i];
+ var node = nodes[id];
+ var data = nodesData.get(id);
+ if (node) {
+ // update node
+ node.setProperties(data, this.constants);
+ }
+ else {
+ // create node
+ node = new Node(properties, this.images, this.groups, this.constants);
+ nodes[id] = node;
- if (!node.isFixed()) {
- this.moving = true;
- }
- }
+ if (!node.isFixed()) {
+ this.moving = true;
+ }
}
+ }
- this._reconnectEdges();
- this._updateValueRange(nodes);
+ this._reconnectEdges();
+ this._updateValueRange(nodes);
};
/**
@@ -1131,15 +1131,15 @@ Graph.prototype._updateNodes = function(ids) {
* @private
*/
Graph.prototype._removeNodes = function(ids) {
- var nodes = this.nodes;
- for (var i = 0, len = ids.length; i < len; i++) {
- var id = ids[i];
- delete nodes[id];
- }
-
- this._reconnectEdges();
- this._updateSelection();
- this._updateValueRange(nodes);
+ var nodes = this.nodes;
+ for (var i = 0, len = ids.length; i < len; i++) {
+ var id = ids[i];
+ delete nodes[id];
+ }
+
+ this._reconnectEdges();
+ this._updateSelection();
+ this._updateValueRange(nodes);
};
/**
@@ -1149,45 +1149,45 @@ Graph.prototype._removeNodes = function(ids) {
* @private
*/
Graph.prototype._setEdges = function(edges) {
- var oldEdgesData = this.edgesData;
-
- if (edges instanceof DataSet || edges instanceof DataView) {
- this.edgesData = edges;
- }
- else if (edges instanceof Array) {
- this.edgesData = new DataSet();
- this.edgesData.add(edges);
- }
- else if (!edges) {
- this.edgesData = new DataSet();
- }
- else {
- throw new TypeError('Array or DataSet expected');
- }
-
- if (oldEdgesData) {
- // unsubscribe from old dataset
- util.forEach(this.edgesListeners, function (callback, event) {
- oldEdgesData.unsubscribe(event, callback);
- });
- }
+ var oldEdgesData = this.edgesData;
+
+ if (edges instanceof DataSet || edges instanceof DataView) {
+ this.edgesData = edges;
+ }
+ else if (edges instanceof Array) {
+ this.edgesData = new DataSet();
+ this.edgesData.add(edges);
+ }
+ else if (!edges) {
+ this.edgesData = new DataSet();
+ }
+ else {
+ throw new TypeError('Array or DataSet expected');
+ }
+
+ if (oldEdgesData) {
+ // unsubscribe from old dataset
+ util.forEach(this.edgesListeners, function (callback, event) {
+ oldEdgesData.unsubscribe(event, callback);
+ });
+ }
- // remove drawn edges
- this.edges = {};
+ // remove drawn edges
+ this.edges = {};
- if (this.edgesData) {
- // subscribe to new dataset
- var me = this;
- util.forEach(this.edgesListeners, function (callback, event) {
- me.edgesData.subscribe(event, callback);
- });
+ if (this.edgesData) {
+ // subscribe to new dataset
+ var me = this;
+ util.forEach(this.edgesListeners, function (callback, event) {
+ me.edgesData.subscribe(event, callback);
+ });
- // draw all new nodes
- var ids = this.edgesData.getIds();
- this._addEdges(ids);
- }
+ // draw all new nodes
+ var ids = this.edgesData.getIds();
+ this._addEdges(ids);
+ }
- this._reconnectEdges();
+ this._reconnectEdges();
};
/**
@@ -1196,22 +1196,22 @@ Graph.prototype._setEdges = function(edges) {
* @private
*/
Graph.prototype._addEdges = function (ids) {
- var edges = this.edges,
- edgesData = this.edgesData;
- for (var i = 0, len = ids.length; i < len; i++) {
- var id = ids[i];
-
- var oldEdge = edges[id];
- if (oldEdge) {
- oldEdge.disconnect();
- }
+ var edges = this.edges,
+ edgesData = this.edgesData;
+ for (var i = 0, len = ids.length; i < len; i++) {
+ var id = ids[i];
- var data = edgesData.get(id);
- edges[id] = new Edge(data, this, this.constants);
+ var oldEdge = edges[id];
+ if (oldEdge) {
+ oldEdge.disconnect();
}
- this.moving = true;
- this._updateValueRange(edges);
+ var data = edgesData.get(id);
+ edges[id] = new Edge(data, this, this.constants);
+ }
+
+ this.moving = true;
+ this._updateValueRange(edges);
};
/**
@@ -1220,28 +1220,28 @@ Graph.prototype._addEdges = function (ids) {
* @private
*/
Graph.prototype._updateEdges = function (ids) {
- var edges = this.edges,
- edgesData = this.edgesData;
- for (var i = 0, len = ids.length; i < len; i++) {
- var id = ids[i];
-
- var data = edgesData.get(id);
- var edge = edges[id];
- if (edge) {
- // update edge
- edge.disconnect();
- edge.setProperties(data, this.constants);
- edge.connect();
- }
- else {
- // create edge
- edge = new Edge(data, this, this.constants);
- this.edges[id] = edge;
- }
+ var edges = this.edges,
+ edgesData = this.edgesData;
+ for (var i = 0, len = ids.length; i < len; i++) {
+ var id = ids[i];
+
+ var data = edgesData.get(id);
+ var edge = edges[id];
+ if (edge) {
+ // update edge
+ edge.disconnect();
+ edge.setProperties(data, this.constants);
+ edge.connect();
+ }
+ else {
+ // create edge
+ edge = new Edge(data, this, this.constants);
+ this.edges[id] = edge;
}
+ }
- this.moving = true;
- this._updateValueRange(edges);
+ this.moving = true;
+ this._updateValueRange(edges);
};
/**
@@ -1250,18 +1250,18 @@ Graph.prototype._updateEdges = function (ids) {
* @private
*/
Graph.prototype._removeEdges = function (ids) {
- var edges = this.edges;
- for (var i = 0, len = ids.length; i < len; i++) {
- var id = ids[i];
- var edge = edges[id];
- if (edge) {
- edge.disconnect();
- delete edges[id];
- }
- }
-
- this.moving = true;
- this._updateValueRange(edges);
+ var edges = this.edges;
+ for (var i = 0, len = ids.length; i < len; i++) {
+ var id = ids[i];
+ var edge = edges[id];
+ if (edge) {
+ edge.disconnect();
+ delete edges[id];
+ }
+ }
+
+ this.moving = true;
+ this._updateValueRange(edges);
};
/**
@@ -1269,23 +1269,23 @@ Graph.prototype._removeEdges = function (ids) {
* @private
*/
Graph.prototype._reconnectEdges = function() {
- var id,
- nodes = this.nodes,
- edges = this.edges;
- for (id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- nodes[id].edges = [];
- }
- }
-
- for (id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- edge.from = null;
- edge.to = null;
- edge.connect();
- }
- }
+ var id,
+ nodes = this.nodes,
+ edges = this.edges;
+ for (id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ nodes[id].edges = [];
+ }
+ }
+
+ for (id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ var edge = edges[id];
+ edge.from = null;
+ edge.to = null;
+ edge.connect();
+ }
+ }
};
/**
@@ -1297,29 +1297,29 @@ Graph.prototype._reconnectEdges = function() {
* @private
*/
Graph.prototype._updateValueRange = function(obj) {
- var id;
-
- // determine the range of the objects
- var valueMin = undefined;
- var valueMax = undefined;
+ var id;
+
+ // determine the range of the objects
+ var valueMin = undefined;
+ var valueMax = undefined;
+ for (id in obj) {
+ if (obj.hasOwnProperty(id)) {
+ var value = obj[id].getValue();
+ if (value !== undefined) {
+ valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
+ valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
+ }
+ }
+ }
+
+ // adjust the range of all objects
+ if (valueMin !== undefined && valueMax !== undefined) {
for (id in obj) {
- if (obj.hasOwnProperty(id)) {
- var value = obj[id].getValue();
- if (value !== undefined) {
- valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
- valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
- }
- }
- }
-
- // adjust the range of all objects
- if (valueMin !== undefined && valueMax !== undefined) {
- for (id in obj) {
- if (obj.hasOwnProperty(id)) {
- obj[id].setValueRange(valueMin, valueMax);
- }
- }
+ if (obj.hasOwnProperty(id)) {
+ obj[id].setValueRange(valueMin, valueMax);
+ }
}
+ }
};
/**
@@ -1327,9 +1327,9 @@ Graph.prototype._updateValueRange = function(obj) {
* chart will be resized too.
*/
Graph.prototype.redraw = function() {
- this.setSize(this.width, this.height);
+ this.setSize(this.width, this.height);
- this._redraw();
+ this._redraw();
};
/**
@@ -1337,23 +1337,23 @@ Graph.prototype.redraw = function() {
* @private
*/
Graph.prototype._redraw = function() {
- var ctx = this.frame.canvas.getContext('2d');
+ var ctx = this.frame.canvas.getContext('2d');
- // clear the canvas
- var w = this.frame.canvas.width;
- var h = this.frame.canvas.height;
- ctx.clearRect(0, 0, w, h);
+ // clear the canvas
+ var w = this.frame.canvas.width;
+ var h = this.frame.canvas.height;
+ ctx.clearRect(0, 0, w, h);
- // set scaling and translation
- ctx.save();
- ctx.translate(this.translation.x, this.translation.y);
- ctx.scale(this.scale, this.scale);
+ // set scaling and translation
+ ctx.save();
+ ctx.translate(this.translation.x, this.translation.y);
+ ctx.scale(this.scale, this.scale);
- this._drawEdges(ctx);
- this._drawNodes(ctx);
+ this._drawEdges(ctx);
+ this._drawNodes(ctx);
- // restore original scaling and translation
- ctx.restore();
+ // restore original scaling and translation
+ ctx.restore();
};
/**
@@ -1363,19 +1363,19 @@ Graph.prototype._redraw = function() {
* @private
*/
Graph.prototype._setTranslation = function(offsetX, offsetY) {
- if (this.translation === undefined) {
- this.translation = {
- x: 0,
- y: 0
- };
- }
-
- if (offsetX !== undefined) {
- this.translation.x = offsetX;
- }
- if (offsetY !== undefined) {
- this.translation.y = offsetY;
- }
+ if (this.translation === undefined) {
+ this.translation = {
+ x: 0,
+ y: 0
+ };
+ }
+
+ if (offsetX !== undefined) {
+ this.translation.x = offsetX;
+ }
+ if (offsetY !== undefined) {
+ this.translation.y = offsetY;
+ }
};
/**
@@ -1384,10 +1384,10 @@ Graph.prototype._setTranslation = function(offsetX, offsetY) {
* @private
*/
Graph.prototype._getTranslation = function() {
- return {
- x: this.translation.x,
- y: this.translation.y
- };
+ return {
+ x: this.translation.x,
+ y: this.translation.y
+ };
};
/**
@@ -1396,7 +1396,7 @@ Graph.prototype._getTranslation = function() {
* @private
*/
Graph.prototype._setScale = function(scale) {
- this.scale = scale;
+ this.scale = scale;
};
/**
* Get the current scale of the graph
@@ -1404,7 +1404,7 @@ Graph.prototype._setScale = function(scale) {
* @private
*/
Graph.prototype._getScale = function() {
- return this.scale;
+ return this.scale;
};
/**
@@ -1414,7 +1414,7 @@ Graph.prototype._getScale = function() {
* @private
*/
Graph.prototype._canvasToX = function(x) {
- return (x - this.translation.x) / this.scale;
+ return (x - this.translation.x) / this.scale;
};
/**
@@ -1424,7 +1424,7 @@ Graph.prototype._canvasToX = function(x) {
* @private
*/
Graph.prototype._xToCanvas = function(x) {
- return x * this.scale + this.translation.x;
+ return x * this.scale + this.translation.x;
};
/**
@@ -1434,7 +1434,7 @@ Graph.prototype._xToCanvas = function(x) {
* @private
*/
Graph.prototype._canvasToY = function(y) {
- return (y - this.translation.y) / this.scale;
+ return (y - this.translation.y) / this.scale;
};
/**
@@ -1444,7 +1444,7 @@ Graph.prototype._canvasToY = function(y) {
* @private
*/
Graph.prototype._yToCanvas = function(y) {
- return y * this.scale + this.translation.y ;
+ return y * this.scale + this.translation.y ;
};
/**
@@ -1454,24 +1454,24 @@ Graph.prototype._yToCanvas = function(y) {
* @private
*/
Graph.prototype._drawNodes = function(ctx) {
- // first draw the unselected nodes
- var nodes = this.nodes;
- var selected = [];
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].isSelected()) {
- selected.push(id);
- }
- else {
- nodes[id].draw(ctx);
- }
- }
- }
-
- // draw the selected nodes on top
- for (var s = 0, sMax = selected.length; s < sMax; s++) {
- nodes[selected[s]].draw(ctx);
- }
+ // first draw the unselected nodes
+ var nodes = this.nodes;
+ var selected = [];
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ if (nodes[id].isSelected()) {
+ selected.push(id);
+ }
+ else {
+ nodes[id].draw(ctx);
+ }
+ }
+ }
+
+ // draw the selected nodes on top
+ for (var s = 0, sMax = selected.length; s < sMax; s++) {
+ nodes[selected[s]].draw(ctx);
+ }
};
/**
@@ -1481,15 +1481,15 @@ Graph.prototype._drawNodes = function(ctx) {
* @private
*/
Graph.prototype._drawEdges = function(ctx) {
- var edges = this.edges;
- for (var id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- if (edge.connected) {
- edges[id].draw(ctx);
- }
- }
- }
+ var edges = this.edges;
+ for (var id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ var edge = edges[id];
+ if (edge.connected) {
+ edges[id].draw(ctx);
+ }
+ }
+ }
};
/**
@@ -1497,22 +1497,22 @@ Graph.prototype._drawEdges = function(ctx) {
* @private
*/
Graph.prototype._doStabilize = function() {
- var start = new Date();
-
- // find stable position
- var count = 0;
- var vmin = this.constants.minVelocity;
- var stable = false;
- while (!stable && count < this.constants.maxIterations) {
- this._calculateForces();
- this._discreteStepNodes();
- stable = !this._isMoving(vmin);
- count++;
- }
-
- var end = new Date();
-
- // console.log('Stabilized in ' + (end-start) + ' ms, ' + count + ' iterations' ); // TODO: cleanup
+ var start = new Date();
+
+ // find stable position
+ var count = 0;
+ var vmin = this.constants.minVelocity;
+ var stable = false;
+ while (!stable && count < this.constants.maxIterations) {
+ this._calculateForces();
+ this._discreteStepNodes();
+ stable = !this._isMoving(vmin);
+ count++;
+ }
+
+ var end = new Date();
+
+ // console.log('Stabilized in ' + (end-start) + ' ms, ' + count + ' iterations' ); // TODO: cleanup
};
/**
@@ -1521,149 +1521,149 @@ Graph.prototype._doStabilize = function() {
* @private
*/
Graph.prototype._calculateForces = function() {
- // create a local edge to the nodes and edges, that is faster
- var id, dx, dy, angle, distance, fx, fy,
- repulsingForce, springForce, length, edgeLength,
- nodes = this.nodes,
- edges = this.edges;
-
- // gravity, add a small constant force to pull the nodes towards the center of
- // the graph
- // Also, the forces are reset to zero in this loop by using _setForce instead
- // of _addForce
- var gravity = 0.01,
- gx = this.frame.canvas.clientWidth / 2,
- gy = this.frame.canvas.clientHeight / 2;
- for (id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- var node = nodes[id];
- dx = gx - node.x;
- dy = gy - node.y;
- angle = Math.atan2(dy, dx);
- fx = Math.cos(angle) * gravity;
- fy = Math.sin(angle) * gravity;
-
- node._setForce(fx, fy);
+ // create a local edge to the nodes and edges, that is faster
+ var id, dx, dy, angle, distance, fx, fy,
+ repulsingForce, springForce, length, edgeLength,
+ nodes = this.nodes,
+ edges = this.edges;
+
+ // gravity, add a small constant force to pull the nodes towards the center of
+ // the graph
+ // Also, the forces are reset to zero in this loop by using _setForce instead
+ // of _addForce
+ var gravity = 0.01,
+ gx = this.frame.canvas.clientWidth / 2,
+ gy = this.frame.canvas.clientHeight / 2;
+ for (id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ var node = nodes[id];
+ dx = gx - node.x;
+ dy = gy - node.y;
+ angle = Math.atan2(dy, dx);
+ fx = Math.cos(angle) * gravity;
+ fy = Math.sin(angle) * gravity;
+
+ node._setForce(fx, fy);
+ }
+ }
+
+ // repulsing forces between nodes
+ var minimumDistance = this.constants.nodes.distance,
+ steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+
+ for (var id1 in nodes) {
+ if (nodes.hasOwnProperty(id1)) {
+ var node1 = nodes[id1];
+ for (var id2 in nodes) {
+ if (nodes.hasOwnProperty(id2)) {
+ var node2 = nodes[id2];
+ // calculate normally distributed force
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+ angle = Math.atan2(dy, dx);
+
+ // TODO: correct factor for repulsing force
+ //repulsingForce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+ //repulsingForce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+ repulsingForce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)); // TODO: customize the repulsing force
+ fx = Math.cos(angle) * repulsingForce;
+ fy = Math.sin(angle) * repulsingForce;
+
+ node1._addForce(-fx, -fy);
+ node2._addForce(fx, fy);
}
- }
-
- // repulsing forces between nodes
- var minimumDistance = this.constants.nodes.distance,
- steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
-
- for (var id1 in nodes) {
- if (nodes.hasOwnProperty(id1)) {
- var node1 = nodes[id1];
- for (var id2 in nodes) {
- if (nodes.hasOwnProperty(id2)) {
- var node2 = nodes[id2];
- // calculate normally distributed force
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
- angle = Math.atan2(dy, dx);
-
- // TODO: correct factor for repulsing force
- //repulsingForce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
- //repulsingForce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
- repulsingForce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)); // TODO: customize the repulsing force
- fx = Math.cos(angle) * repulsingForce;
- fy = Math.sin(angle) * repulsingForce;
-
- node1._addForce(-fx, -fy);
- node2._addForce(fx, fy);
- }
- }
- }
- }
-
- /* TODO: re-implement repulsion of edges
- for (var n = 0; n < nodes.length; n++) {
- for (var l = 0; l < edges.length; l++) {
- var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
- ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
-
- // calculate normally distributed force
- dx = nodes[n].x - lx,
- dy = nodes[n].y - ly,
- distance = Math.sqrt(dx * dx + dy * dy),
- angle = Math.atan2(dy, dx),
-
-
- // TODO: correct factor for repulsing force
- //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
- //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
- repulsingforce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)), // TODO: customize the repulsing force
- fx = Math.cos(angle) * repulsingforce,
- fy = Math.sin(angle) * repulsingforce;
- nodes[n]._addForce(fx, fy);
- edges[l].from._addForce(-fx/2,-fy/2);
- edges[l].to._addForce(-fx/2,-fy/2);
- }
- }
- */
-
- // forces caused by the edges, modelled as springs
- for (id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- if (edge.connected) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length; // TODO: dmin
- //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length; // TODO: dmin
- //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2;
- edgeLength = edge.length;
- length = Math.sqrt(dx * dx + dy * dy);
- angle = Math.atan2(dy, dx);
-
- springForce = edge.stiffness * (edgeLength - length);
-
- fx = Math.cos(angle) * springForce;
- fy = Math.sin(angle) * springForce;
-
- edge.from._addForce(-fx, -fy);
- edge.to._addForce(fx, fy);
- }
- }
- }
-
- /* TODO: re-implement repulsion of edges
- // repulsing forces between edges
- var minimumDistance = this.constants.edges.distance,
- steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
- for (var l = 0; l < edges.length; l++) {
- //Keep distance from other edge centers
- for (var l2 = l + 1; l2 < this.edges.length; l2++) {
- //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
- //var dmin = (nodes[n].width + nodes[n2].width)/2 || minimumDistance, // TODO: dmin
- //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
- var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
- ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
- l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
- l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
-
- // calculate normally distributed force
- dx = l2x - lx,
- dy = l2y - ly,
- distance = Math.sqrt(dx * dx + dy * dy),
- angle = Math.atan2(dy, dx),
-
-
- // TODO: correct factor for repulsing force
- //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
- //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
- repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
- fx = Math.cos(angle) * repulsingforce,
- fy = Math.sin(angle) * repulsingforce;
-
- edges[l].from._addForce(-fx, -fy);
- edges[l].to._addForce(-fx, -fy);
- edges[l2].from._addForce(fx, fy);
- edges[l2].to._addForce(fx, fy);
- }
- }
- */
+ }
+ }
+ }
+
+ /* TODO: re-implement repulsion of edges
+ for (var n = 0; n < nodes.length; n++) {
+ for (var l = 0; l < edges.length; l++) {
+ var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
+ ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
+
+ // calculate normally distributed force
+ dx = nodes[n].x - lx,
+ dy = nodes[n].y - ly,
+ distance = Math.sqrt(dx * dx + dy * dy),
+ angle = Math.atan2(dy, dx),
+
+
+ // TODO: correct factor for repulsing force
+ //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+ //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+ repulsingforce = 1 / (1 + Math.exp((distance / (minimumDistance / 2) - 1) * steepness)), // TODO: customize the repulsing force
+ fx = Math.cos(angle) * repulsingforce,
+ fy = Math.sin(angle) * repulsingforce;
+ nodes[n]._addForce(fx, fy);
+ edges[l].from._addForce(-fx/2,-fy/2);
+ edges[l].to._addForce(-fx/2,-fy/2);
+ }
+ }
+ */
+
+ // forces caused by the edges, modelled as springs
+ for (id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ var edge = edges[id];
+ if (edge.connected) {
+ dx = (edge.to.x - edge.from.x);
+ dy = (edge.to.y - edge.from.y);
+ //edgeLength = (edge.from.width + edge.from.height + edge.to.width + edge.to.height)/2 || edge.length; // TODO: dmin
+ //edgeLength = (edge.from.width + edge.to.width)/2 || edge.length; // TODO: dmin
+ //edgeLength = 20 + ((edge.from.width + edge.to.width) || 0) / 2;
+ edgeLength = edge.length;
+ length = Math.sqrt(dx * dx + dy * dy);
+ angle = Math.atan2(dy, dx);
+
+ springForce = edge.stiffness * (edgeLength - length);
+
+ fx = Math.cos(angle) * springForce;
+ fy = Math.sin(angle) * springForce;
+
+ edge.from._addForce(-fx, -fy);
+ edge.to._addForce(fx, fy);
+ }
+ }
+ }
+
+ /* TODO: re-implement repulsion of edges
+ // repulsing forces between edges
+ var minimumDistance = this.constants.edges.distance,
+ steepness = 10; // higher value gives steeper slope of the force around the given minimumDistance
+ for (var l = 0; l < edges.length; l++) {
+ //Keep distance from other edge centers
+ for (var l2 = l + 1; l2 < this.edges.length; l2++) {
+ //var dmin = (nodes[n].width + nodes[n].height + nodes[n2].width + nodes[n2].height) / 1 || minimumDistance, // TODO: dmin
+ //var dmin = (nodes[n].width + nodes[n2].width)/2 || minimumDistance, // TODO: dmin
+ //dmin = 40 + ((nodes[n].width/2 + nodes[n2].width/2) || 0),
+ var lx = edges[l].from.x+(edges[l].to.x - edges[l].from.x)/2,
+ ly = edges[l].from.y+(edges[l].to.y - edges[l].from.y)/2,
+ l2x = edges[l2].from.x+(edges[l2].to.x - edges[l2].from.x)/2,
+ l2y = edges[l2].from.y+(edges[l2].to.y - edges[l2].from.y)/2,
+
+ // calculate normally distributed force
+ dx = l2x - lx,
+ dy = l2y - ly,
+ distance = Math.sqrt(dx * dx + dy * dy),
+ angle = Math.atan2(dy, dx),
+
+
+ // TODO: correct factor for repulsing force
+ //var repulsingforce = 2 * Math.exp(-5 * (distance * distance) / (dmin * dmin) ); // TODO: customize the repulsing force
+ //repulsingforce = Math.exp(-1 * (distance * distance) / (dmin * dmin) ), // TODO: customize the repulsing force
+ repulsingforce = 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness)), // TODO: customize the repulsing force
+ fx = Math.cos(angle) * repulsingforce,
+ fy = Math.sin(angle) * repulsingforce;
+
+ edges[l].from._addForce(-fx, -fy);
+ edges[l].to._addForce(-fx, -fy);
+ edges[l2].from._addForce(fx, fy);
+ edges[l2].to._addForce(fx, fy);
+ }
+ }
+ */
};
@@ -1674,14 +1674,14 @@ Graph.prototype._calculateForces = function() {
* @private
*/
Graph.prototype._isMoving = function(vmin) {
- // TODO: ismoving does not work well: should check the kinetic energy, not its velocity
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
- return true;
- }
- }
- return false;
+ // TODO: ismoving does not work well: should check the kinetic energy, not its velocity
+ var nodes = this.nodes;
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id) && nodes[id].isMoving(vmin)) {
+ return true;
+ }
+ }
+ return false;
};
@@ -1690,49 +1690,49 @@ Graph.prototype._isMoving = function(vmin) {
* @private
*/
Graph.prototype._discreteStepNodes = function() {
- var interval = this.refreshRate / 1000.0; // in seconds
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- nodes[id].discreteStep(interval);
- }
+ var interval = this.refreshRate / 1000.0; // in seconds
+ var nodes = this.nodes;
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ nodes[id].discreteStep(interval);
}
+ }
};
/**
* Start animating nodes and edges
*/
Graph.prototype.start = function() {
- if (this.moving) {
- this._calculateForces();
- this._discreteStepNodes();
-
- var vmin = this.constants.minVelocity;
- this.moving = this._isMoving(vmin);
- }
+ if (this.moving) {
+ this._calculateForces();
+ this._discreteStepNodes();
- if (this.moving) {
- // start animation. only start timer if it is not already running
- if (!this.timer) {
- var graph = this;
- this.timer = window.setTimeout(function () {
- graph.timer = undefined;
- graph.start();
- graph._redraw();
- }, this.refreshRate);
- }
- }
- else {
- this._redraw();
+ var vmin = this.constants.minVelocity;
+ this.moving = this._isMoving(vmin);
+ }
+
+ if (this.moving) {
+ // start animation. only start timer if it is not already running
+ if (!this.timer) {
+ var graph = this;
+ this.timer = window.setTimeout(function () {
+ graph.timer = undefined;
+ graph.start();
+ graph._redraw();
+ }, this.refreshRate);
}
+ }
+ else {
+ this._redraw();
+ }
};
/**
* Stop animating nodes and edges.
*/
Graph.prototype.stop = function () {
- if (this.timer) {
- window.clearInterval(this.timer);
- this.timer = undefined;
- }
+ if (this.timer) {
+ window.clearInterval(this.timer);
+ this.timer = undefined;
+ }
};
diff --git a/src/graph/Groups.js b/src/graph/Groups.js
index a33f5e47..4d92ba7d 100644
--- a/src/graph/Groups.js
+++ b/src/graph/Groups.js
@@ -3,8 +3,8 @@
* This class can store groups and properties specific for groups.
*/
Groups = function () {
- this.clear();
- this.defaultIndex = 0;
+ this.clear();
+ this.defaultIndex = 0;
};
@@ -12,16 +12,16 @@ Groups = function () {
* default constants for group colors
*/
Groups.DEFAULT = [
- {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
- {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
- {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}}, // red
- {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}}, // green
- {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
- {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
- {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}}, // orange
- {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
- {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
- {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}} // mint
+ {border: "#2B7CE9", background: "#97C2FC", highlight: {border: "#2B7CE9", background: "#D2E5FF"}}, // blue
+ {border: "#FFA500", background: "#FFFF00", highlight: {border: "#FFA500", background: "#FFFFA3"}}, // yellow
+ {border: "#FA0A10", background: "#FB7E81", highlight: {border: "#FA0A10", background: "#FFAFB1"}}, // red
+ {border: "#41A906", background: "#7BE141", highlight: {border: "#41A906", background: "#A1EC76"}}, // green
+ {border: "#E129F0", background: "#EB7DF4", highlight: {border: "#E129F0", background: "#F0B3F5"}}, // magenta
+ {border: "#7C29F0", background: "#AD85E4", highlight: {border: "#7C29F0", background: "#D3BDF0"}}, // purple
+ {border: "#C37F00", background: "#FFA807", highlight: {border: "#C37F00", background: "#FFCA66"}}, // orange
+ {border: "#4220FB", background: "#6E6EFD", highlight: {border: "#4220FB", background: "#9B9BFD"}}, // darkblue
+ {border: "#FD5A77", background: "#FFC0CB", highlight: {border: "#FD5A77", background: "#FFD1D9"}}, // pink
+ {border: "#4AD63A", background: "#C2FABC", highlight: {border: "#4AD63A", background: "#E6FFE3"}} // mint
];
@@ -29,17 +29,17 @@ Groups.DEFAULT = [
* Clear all groups
*/
Groups.prototype.clear = function () {
- this.groups = {};
- this.groups.length = function()
- {
- var i = 0;
- for ( var p in this ) {
- if (this.hasOwnProperty(p)) {
- i++;
- }
- }
- return i;
+ this.groups = {};
+ this.groups.length = function()
+ {
+ var i = 0;
+ for ( var p in this ) {
+ if (this.hasOwnProperty(p)) {
+ i++;
+ }
}
+ return i;
+ }
};
@@ -50,18 +50,18 @@ Groups.prototype.clear = function () {
* @return {Object} group The created group, containing all group properties
*/
Groups.prototype.get = function (groupname) {
- var group = this.groups[groupname];
+ var group = this.groups[groupname];
- if (group == undefined) {
- // create new group
- var index = this.defaultIndex % Groups.DEFAULT.length;
- this.defaultIndex++;
- group = {};
- group.color = Groups.DEFAULT[index];
- this.groups[groupname] = group;
- }
+ if (group == undefined) {
+ // create new group
+ var index = this.defaultIndex % Groups.DEFAULT.length;
+ this.defaultIndex++;
+ group = {};
+ group.color = Groups.DEFAULT[index];
+ this.groups[groupname] = group;
+ }
- return group;
+ return group;
};
/**
@@ -72,9 +72,9 @@ Groups.prototype.get = function (groupname) {
* @return {Object} group The created group object
*/
Groups.prototype.add = function (groupname, style) {
- this.groups[groupname] = style;
- if (style.color) {
- style.color = Node.parseColor(style.color);
- }
- return style;
+ this.groups[groupname] = style;
+ if (style.color) {
+ style.color = Node.parseColor(style.color);
+ }
+ return style;
};
diff --git a/src/graph/Images.js b/src/graph/Images.js
index 6dc20d22..48517dde 100644
--- a/src/graph/Images.js
+++ b/src/graph/Images.js
@@ -3,9 +3,9 @@
* This class loads images and keeps them stored.
*/
Images = function () {
- this.images = {};
+ this.images = {};
- this.callback = undefined;
+ this.callback = undefined;
};
/**
@@ -14,7 +14,7 @@ Images = function () {
* @param {function} callback
*/
Images.prototype.setOnloadCallback = function(callback) {
- this.callback = callback;
+ this.callback = callback;
};
/**
@@ -23,19 +23,19 @@ Images.prototype.setOnloadCallback = function(callback) {
* @return {Image} img The image object
*/
Images.prototype.load = function(url) {
- var img = this.images[url];
- if (img == undefined) {
- // create the image
- var images = this;
- img = new Image();
- this.images[url] = img;
- img.onload = function() {
- if (images.callback) {
- images.callback(this);
- }
- };
- img.src = url;
- }
+ var img = this.images[url];
+ if (img == undefined) {
+ // create the image
+ var images = this;
+ img = new Image();
+ this.images[url] = img;
+ img.onload = function() {
+ if (images.callback) {
+ images.callback(this);
+ }
+ };
+ img.src = url;
+ }
- return img;
+ return img;
};
diff --git a/src/graph/Node.js b/src/graph/Node.js
index edb10a6c..934c1399 100644
--- a/src/graph/Node.js
+++ b/src/graph/Node.js
@@ -23,43 +23,43 @@
* example for the color
*/
function Node(properties, imagelist, grouplist, constants) {
- this.selected = false;
+ this.selected = false;
- this.edges = []; // all edges connected to this node
- this.group = constants.nodes.group;
+ this.edges = []; // all edges connected to this node
+ this.group = constants.nodes.group;
- this.fontSize = constants.nodes.fontSize;
- this.fontFace = constants.nodes.fontFace;
- this.fontColor = constants.nodes.fontColor;
+ this.fontSize = constants.nodes.fontSize;
+ this.fontFace = constants.nodes.fontFace;
+ this.fontColor = constants.nodes.fontColor;
- this.color = constants.nodes.color;
+ this.color = constants.nodes.color;
- // set defaults for the properties
- this.id = undefined;
- this.shape = constants.nodes.shape;
- this.image = constants.nodes.image;
- this.x = 0;
- this.y = 0;
- this.xFixed = false;
- this.yFixed = false;
- this.radius = constants.nodes.radius;
- this.radiusFixed = false;
- this.radiusMin = constants.nodes.radiusMin;
- this.radiusMax = constants.nodes.radiusMax;
+ // set defaults for the properties
+ this.id = undefined;
+ this.shape = constants.nodes.shape;
+ this.image = constants.nodes.image;
+ this.x = 0;
+ this.y = 0;
+ this.xFixed = false;
+ this.yFixed = false;
+ this.radius = constants.nodes.radius;
+ this.radiusFixed = false;
+ this.radiusMin = constants.nodes.radiusMin;
+ this.radiusMax = constants.nodes.radiusMax;
- this.imagelist = imagelist;
- this.grouplist = grouplist;
+ this.imagelist = imagelist;
+ this.grouplist = grouplist;
- this.setProperties(properties, constants);
+ this.setProperties(properties, constants);
- // mass, force, velocity
- this.mass = 50; // kg (mass is adjusted for the number of connected edges)
- this.fx = 0.0; // external force x
- this.fy = 0.0; // external force y
- this.vx = 0.0; // velocity x
- this.vy = 0.0; // velocity y
- this.minForce = constants.minForce;
- this.damping = 0.9; // damping factor
+ // mass, force, velocity
+ this.mass = 50; // kg (mass is adjusted for the number of connected edges)
+ this.fx = 0.0; // external force x
+ this.fy = 0.0; // external force y
+ this.vx = 0.0; // velocity x
+ this.vy = 0.0; // velocity y
+ this.minForce = constants.minForce;
+ this.damping = 0.9; // damping factor
};
/**
@@ -67,10 +67,10 @@ function Node(properties, imagelist, grouplist, constants) {
* @param {Edge} edge
*/
Node.prototype.attachEdge = function(edge) {
- if (this.edges.indexOf(edge) == -1) {
- this.edges.push(edge);
- }
- this._updateMass();
+ if (this.edges.indexOf(edge) == -1) {
+ this.edges.push(edge);
+ }
+ this._updateMass();
};
/**
@@ -78,11 +78,11 @@ Node.prototype.attachEdge = function(edge) {
* @param {Edge} edge
*/
Node.prototype.detachEdge = function(edge) {
- var index = this.edges.indexOf(edge);
- if (index != -1) {
- this.edges.splice(index, 1);
- }
- this._updateMass();
+ var index = this.edges.indexOf(edge);
+ if (index != -1) {
+ this.edges.splice(index, 1);
+ }
+ this._updateMass();
};
/**
@@ -91,7 +91,7 @@ Node.prototype.detachEdge = function(edge) {
* @private
*/
Node.prototype._updateMass = function() {
- this.mass = 50 + 20 * this.edges.length; // kg
+ this.mass = 50 + 20 * this.edges.length; // kg
};
/**
@@ -100,81 +100,81 @@ Node.prototype._updateMass = function() {
* @param {Object} constants and object with default, global properties
*/
Node.prototype.setProperties = function(properties, constants) {
- if (!properties) {
- return;
- }
-
- // basic properties
- if (properties.id != undefined) {this.id = properties.id;}
- if (properties.label != undefined) {this.label = properties.label;}
- if (properties.title != undefined) {this.title = properties.title;}
- if (properties.group != undefined) {this.group = properties.group;}
- if (properties.x != undefined) {this.x = properties.x;}
- if (properties.y != undefined) {this.y = properties.y;}
- if (properties.value != undefined) {this.value = properties.value;}
-
- if (this.id === undefined) {
- throw "Node must have an id";
- }
-
- // copy group properties
- if (this.group) {
- var groupObj = this.grouplist.get(this.group);
- for (var prop in groupObj) {
- if (groupObj.hasOwnProperty(prop)) {
- this[prop] = groupObj[prop];
- }
- }
+ if (!properties) {
+ return;
+ }
+
+ // basic properties
+ if (properties.id != undefined) {this.id = properties.id;}
+ if (properties.label != undefined) {this.label = properties.label;}
+ if (properties.title != undefined) {this.title = properties.title;}
+ if (properties.group != undefined) {this.group = properties.group;}
+ if (properties.x != undefined) {this.x = properties.x;}
+ if (properties.y != undefined) {this.y = properties.y;}
+ if (properties.value != undefined) {this.value = properties.value;}
+
+ if (this.id === undefined) {
+ throw "Node must have an id";
+ }
+
+ // copy group properties
+ if (this.group) {
+ var groupObj = this.grouplist.get(this.group);
+ for (var prop in groupObj) {
+ if (groupObj.hasOwnProperty(prop)) {
+ this[prop] = groupObj[prop];
+ }
}
+ }
- // individual shape properties
- if (properties.shape != undefined) {this.shape = properties.shape;}
- if (properties.image != undefined) {this.image = properties.image;}
- if (properties.radius != undefined) {this.radius = properties.radius;}
- if (properties.color != undefined) {this.color = Node.parseColor(properties.color);}
-
- if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;}
- if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
- if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
-
+ // individual shape properties
+ if (properties.shape != undefined) {this.shape = properties.shape;}
+ if (properties.image != undefined) {this.image = properties.image;}
+ if (properties.radius != undefined) {this.radius = properties.radius;}
+ if (properties.color != undefined) {this.color = Node.parseColor(properties.color);}
- if (this.image != undefined) {
- if (this.imagelist) {
- this.imageObj = this.imagelist.load(this.image);
- }
- else {
- throw "No imagelist provided";
- }
- }
+ if (properties.fontColor != undefined) {this.fontColor = properties.fontColor;}
+ if (properties.fontSize != undefined) {this.fontSize = properties.fontSize;}
+ if (properties.fontFace != undefined) {this.fontFace = properties.fontFace;}
- this.xFixed = this.xFixed || (properties.x != undefined);
- this.yFixed = this.yFixed || (properties.y != undefined);
- this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
- if (this.shape == 'image') {
- this.radiusMin = constants.nodes.widthMin;
- this.radiusMax = constants.nodes.widthMax;
+ if (this.image != undefined) {
+ if (this.imagelist) {
+ this.imageObj = this.imagelist.load(this.image);
}
-
- // choose draw method depending on the shape
- switch (this.shape) {
- case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
- case 'box': this.draw = this._drawBox; this.resize = this._resizeBox; break;
- case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
- case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
- // TODO: add diamond shape
- case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break;
- case 'text': this.draw = this._drawText; this.resize = this._resizeText; break;
- case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break;
- case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break;
- case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
- case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
- case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break;
- default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+ else {
+ throw "No imagelist provided";
}
-
- // reset the size of the node, this can be changed
- this._reset();
+ }
+
+ this.xFixed = this.xFixed || (properties.x != undefined);
+ this.yFixed = this.yFixed || (properties.y != undefined);
+ this.radiusFixed = this.radiusFixed || (properties.radius != undefined);
+
+ if (this.shape == 'image') {
+ this.radiusMin = constants.nodes.widthMin;
+ this.radiusMax = constants.nodes.widthMax;
+ }
+
+ // choose draw method depending on the shape
+ switch (this.shape) {
+ case 'database': this.draw = this._drawDatabase; this.resize = this._resizeDatabase; break;
+ case 'box': this.draw = this._drawBox; this.resize = this._resizeBox; break;
+ case 'circle': this.draw = this._drawCircle; this.resize = this._resizeCircle; break;
+ case 'ellipse': this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+ // TODO: add diamond shape
+ case 'image': this.draw = this._drawImage; this.resize = this._resizeImage; break;
+ case 'text': this.draw = this._drawText; this.resize = this._resizeText; break;
+ case 'dot': this.draw = this._drawDot; this.resize = this._resizeShape; break;
+ case 'square': this.draw = this._drawSquare; this.resize = this._resizeShape; break;
+ case 'triangle': this.draw = this._drawTriangle; this.resize = this._resizeShape; break;
+ case 'triangleDown': this.draw = this._drawTriangleDown; this.resize = this._resizeShape; break;
+ case 'star': this.draw = this._drawStar; this.resize = this._resizeShape; break;
+ default: this.draw = this._drawEllipse; this.resize = this._resizeEllipse; break;
+ }
+
+ // reset the size of the node, this can be changed
+ this._reset();
};
/**
@@ -184,51 +184,51 @@ Node.prototype.setProperties = function(properties, constants) {
* @return {Object} colorObject
*/
Node.parseColor = function(color) {
- var c;
- if (util.isString(color)) {
- c = {
- border: color,
- background: color,
- highlight: {
- border: color,
- background: color
- }
- };
- // TODO: automatically generate a nice highlight color
+ var c;
+ if (util.isString(color)) {
+ c = {
+ border: color,
+ background: color,
+ highlight: {
+ border: color,
+ background: color
+ }
+ };
+ // TODO: automatically generate a nice highlight color
+ }
+ else {
+ c = {};
+ c.background = color.background || 'white';
+ c.border = color.border || c.background;
+ if (util.isString(color.highlight)) {
+ c.highlight = {
+ border: color.highlight,
+ background: color.highlight
+ }
}
else {
- c = {};
- c.background = color.background || 'white';
- c.border = color.border || c.background;
- if (util.isString(color.highlight)) {
- c.highlight = {
- border: color.highlight,
- background: color.highlight
- }
- }
- else {
- c.highlight = {};
- c.highlight.background = color.highlight && color.highlight.background || c.background;
- c.highlight.border = color.highlight && color.highlight.border || c.border;
- }
+ c.highlight = {};
+ c.highlight.background = color.highlight && color.highlight.background || c.background;
+ c.highlight.border = color.highlight && color.highlight.border || c.border;
}
- return c;
+ }
+ return c;
};
/**
* select this node
*/
Node.prototype.select = function() {
- this.selected = true;
- this._reset();
+ this.selected = true;
+ this._reset();
};
/**
* unselect this node
*/
Node.prototype.unselect = function() {
- this.selected = false;
- this._reset();
+ this.selected = false;
+ this._reset();
};
/**
@@ -236,8 +236,8 @@ Node.prototype.unselect = function() {
* @private
*/
Node.prototype._reset = function() {
- this.width = undefined;
- this.height = undefined;
+ this.width = undefined;
+ this.height = undefined;
};
/**
@@ -246,7 +246,7 @@ Node.prototype._reset = function() {
* has been set.
*/
Node.prototype.getTitle = function() {
- return this.title;
+ return this.title;
};
/**
@@ -256,46 +256,46 @@ Node.prototype.getTitle = function() {
* @returns {number} distance Distance to the border in pixels
*/
Node.prototype.distanceToBorder = function (ctx, angle) {
- var borderWidth = 1;
-
- if (!this.width) {
- this.resize(ctx);
- }
-
- //noinspection FallthroughInSwitchStatementJS
- switch (this.shape) {
- case 'circle':
- case 'dot':
- return this.radius + borderWidth;
-
- case 'ellipse':
- var a = this.width / 2;
- var b = this.height / 2;
- var w = (Math.sin(angle) * a);
- var h = (Math.cos(angle) * b);
- return a * b / Math.sqrt(w * w + h * h);
-
- // TODO: implement distanceToBorder for database
- // TODO: implement distanceToBorder for triangle
- // TODO: implement distanceToBorder for triangleDown
-
- case 'box':
- case 'image':
- case 'text':
- default:
- if (this.width) {
- return Math.min(
- Math.abs(this.width / 2 / Math.cos(angle)),
- Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
- // TODO: reckon with border radius too in case of box
- }
- else {
- return 0;
- }
+ var borderWidth = 1;
+
+ if (!this.width) {
+ this.resize(ctx);
+ }
+
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.shape) {
+ case 'circle':
+ case 'dot':
+ return this.radius + borderWidth;
+
+ case 'ellipse':
+ var a = this.width / 2;
+ var b = this.height / 2;
+ var w = (Math.sin(angle) * a);
+ var h = (Math.cos(angle) * b);
+ return a * b / Math.sqrt(w * w + h * h);
+
+ // TODO: implement distanceToBorder for database
+ // TODO: implement distanceToBorder for triangle
+ // TODO: implement distanceToBorder for triangleDown
+
+ case 'box':
+ case 'image':
+ case 'text':
+ default:
+ if (this.width) {
+ return Math.min(
+ Math.abs(this.width / 2 / Math.cos(angle)),
+ Math.abs(this.height / 2 / Math.sin(angle))) + borderWidth;
+ // TODO: reckon with border radius too in case of box
+ }
+ else {
+ return 0;
+ }
- }
+ }
- // TODO: implement calculation of distance to border for all shapes
+ // TODO: implement calculation of distance to border for all shapes
};
/**
@@ -304,8 +304,8 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
* @param {number} fy Force in vertical direction
*/
Node.prototype._setForce = function(fx, fy) {
- this.fx = fx;
- this.fy = fy;
+ this.fx = fx;
+ this.fy = fy;
};
/**
@@ -315,8 +315,8 @@ Node.prototype._setForce = function(fx, fy) {
* @private
*/
Node.prototype._addForce = function(fx, fy) {
- this.fx += fx;
- this.fy += fy;
+ this.fx += fx;
+ this.fy += fy;
};
/**
@@ -324,19 +324,19 @@ Node.prototype._addForce = function(fx, fy) {
* @param {number} interval Time interval in seconds
*/
Node.prototype.discreteStep = function(interval) {
- if (!this.xFixed) {
- var dx = -this.damping * this.vx; // damping force
- var ax = (this.fx + dx) / this.mass; // acceleration
- this.vx += ax / interval; // velocity
- this.x += this.vx / interval; // position
- }
+ if (!this.xFixed) {
+ var dx = -this.damping * this.vx; // damping force
+ var ax = (this.fx + dx) / this.mass; // acceleration
+ this.vx += ax / interval; // velocity
+ this.x += this.vx / interval; // position
+ }
- if (!this.yFixed) {
- var dy = -this.damping * this.vy; // damping force
- var ay = (this.fy + dy) / this.mass; // acceleration
- this.vy += ay / interval; // velocity
- this.y += this.vy / interval; // position
- }
+ if (!this.yFixed) {
+ var dy = -this.damping * this.vy; // damping force
+ var ay = (this.fy + dy) / this.mass; // acceleration
+ this.vy += ay / interval; // velocity
+ this.y += this.vy / interval; // position
+ }
};
@@ -345,7 +345,7 @@ Node.prototype.discreteStep = function(interval) {
* @return {boolean} true if fixed, false if not
*/
Node.prototype.isFixed = function() {
- return (this.xFixed && this.yFixed);
+ return (this.xFixed && this.yFixed);
};
/**
@@ -355,9 +355,9 @@ Node.prototype.isFixed = function() {
*/
// TODO: replace this method with calculating the kinetic energy
Node.prototype.isMoving = function(vmin) {
- return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin ||
- (!this.xFixed && Math.abs(this.fx) > this.minForce) ||
- (!this.yFixed && Math.abs(this.fy) > this.minForce));
+ return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin ||
+ (!this.xFixed && Math.abs(this.fx) > this.minForce) ||
+ (!this.yFixed && Math.abs(this.fy) > this.minForce));
};
/**
@@ -365,7 +365,7 @@ Node.prototype.isMoving = function(vmin) {
* @return {boolean} selected True if node is selected, else false
*/
Node.prototype.isSelected = function() {
- return this.selected;
+ return this.selected;
};
/**
@@ -373,7 +373,7 @@ Node.prototype.isSelected = function() {
* @return {Number} value
*/
Node.prototype.getValue = function() {
- return this.value;
+ return this.value;
};
/**
@@ -383,9 +383,9 @@ Node.prototype.getValue = function() {
* @return {Number} value
*/
Node.prototype.getDistance = function(x, y) {
- var dx = this.x - x,
- dy = this.y - y;
- return Math.sqrt(dx * dx + dy * dy);
+ var dx = this.x - x,
+ dy = this.y - y;
+ return Math.sqrt(dx * dx + dy * dy);
};
@@ -396,15 +396,15 @@ Node.prototype.getDistance = function(x, y) {
* @param {Number} max
*/
Node.prototype.setValueRange = function(min, max) {
- if (!this.radiusFixed && this.value !== undefined) {
- if (max == min) {
- this.radius = (this.radiusMin + this.radiusMax) / 2;
- }
- else {
- var scale = (this.radiusMax - this.radiusMin) / (max - min);
- this.radius = (this.value - min) * scale + this.radiusMin;
- }
+ if (!this.radiusFixed && this.value !== undefined) {
+ if (max == min) {
+ this.radius = (this.radiusMin + this.radiusMax) / 2;
+ }
+ else {
+ var scale = (this.radiusMax - this.radiusMin) / (max - min);
+ this.radius = (this.value - min) * scale + this.radiusMin;
}
+ }
};
/**
@@ -413,7 +413,7 @@ Node.prototype.setValueRange = function(min, max) {
* @param {CanvasRenderingContext2D} ctx
*/
Node.prototype.draw = function(ctx) {
- throw "Draw method not initialized for node";
+ throw "Draw method not initialized for node";
};
/**
@@ -422,7 +422,7 @@ Node.prototype.draw = function(ctx) {
* @param {CanvasRenderingContext2D} ctx
*/
Node.prototype.resize = function(ctx) {
- throw "Resize method not initialized for node";
+ throw "Resize method not initialized for node";
};
/**
@@ -431,256 +431,256 @@ Node.prototype.resize = function(ctx) {
* @return {boolean} True if location is located on node
*/
Node.prototype.isOverlappingWith = function(obj) {
- return (this.left < obj.right &&
- this.left + this.width > obj.left &&
- this.top < obj.bottom &&
- this.top + this.height > obj.top);
+ return (this.left < obj.right &&
+ this.left + this.width > obj.left &&
+ this.top < obj.bottom &&
+ this.top + this.height > obj.top);
};
Node.prototype._resizeImage = function (ctx) {
- // TODO: pre calculate the image size
- if (!this.width) { // undefined or 0
- var width, height;
- if (this.value) {
- var scale = this.imageObj.height / this.imageObj.width;
- width = this.radius || this.imageObj.width;
- height = this.radius * scale || this.imageObj.height;
- }
- else {
- width = this.imageObj.width;
- height = this.imageObj.height;
- }
- this.width = width;
- this.height = height;
+ // TODO: pre calculate the image size
+ if (!this.width) { // undefined or 0
+ var width, height;
+ if (this.value) {
+ var scale = this.imageObj.height / this.imageObj.width;
+ width = this.radius || this.imageObj.width;
+ height = this.radius * scale || this.imageObj.height;
}
+ else {
+ width = this.imageObj.width;
+ height = this.imageObj.height;
+ }
+ this.width = width;
+ this.height = height;
+ }
};
Node.prototype._drawImage = function (ctx) {
- this._resizeImage(ctx);
+ this._resizeImage(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- var yLabel;
- if (this.imageObj) {
- ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
- yLabel = this.y + this.height / 2;
- }
- else {
- // image still loading... just draw the label for now
- yLabel = this.y;
- }
+ var yLabel;
+ if (this.imageObj) {
+ ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
+ yLabel = this.y + this.height / 2;
+ }
+ else {
+ // image still loading... just draw the label for now
+ yLabel = this.y;
+ }
- this._label(ctx, this.label, this.x, yLabel, undefined, "top");
+ this._label(ctx, this.label, this.x, yLabel, undefined, "top");
};
Node.prototype._resizeBox = function (ctx) {
- if (!this.width) {
- var margin = 5;
- var textSize = this.getTextSize(ctx);
- this.width = textSize.width + 2 * margin;
- this.height = textSize.height + 2 * margin;
- }
+ if (!this.width) {
+ var margin = 5;
+ var textSize = this.getTextSize(ctx);
+ this.width = textSize.width + 2 * margin;
+ this.height = textSize.height + 2 * margin;
+ }
};
Node.prototype._drawBox = function (ctx) {
- this._resizeBox(ctx);
+ this._resizeBox(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
- ctx.lineWidth = this.selected ? 2.0 : 1.0;
- ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
- ctx.fill();
- ctx.stroke();
+ ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+ ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+ ctx.lineWidth = this.selected ? 2.0 : 1.0;
+ ctx.roundRect(this.left, this.top, this.width, this.height, this.radius);
+ ctx.fill();
+ ctx.stroke();
- this._label(ctx, this.label, this.x, this.y);
+ this._label(ctx, this.label, this.x, this.y);
};
Node.prototype._resizeDatabase = function (ctx) {
- if (!this.width) {
- var margin = 5;
- var textSize = this.getTextSize(ctx);
- var size = textSize.width + 2 * margin;
- this.width = size;
- this.height = size;
- }
+ if (!this.width) {
+ var margin = 5;
+ var textSize = this.getTextSize(ctx);
+ var size = textSize.width + 2 * margin;
+ this.width = size;
+ this.height = size;
+ }
};
Node.prototype._drawDatabase = function (ctx) {
- this._resizeDatabase(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this._resizeDatabase(ctx);
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
- ctx.lineWidth = this.selected ? 2.0 : 1.0;
- ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
- ctx.fill();
- ctx.stroke();
+ ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+ ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+ ctx.lineWidth = this.selected ? 2.0 : 1.0;
+ ctx.database(this.x - this.width/2, this.y - this.height*0.5, this.width, this.height);
+ ctx.fill();
+ ctx.stroke();
- this._label(ctx, this.label, this.x, this.y);
+ this._label(ctx, this.label, this.x, this.y);
};
Node.prototype._resizeCircle = function (ctx) {
- if (!this.width) {
- var margin = 5;
- var textSize = this.getTextSize(ctx);
- var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
- this.radius = diameter / 2;
-
- this.width = diameter;
- this.height = diameter;
- }
+ if (!this.width) {
+ var margin = 5;
+ var textSize = this.getTextSize(ctx);
+ var diameter = Math.max(textSize.width, textSize.height) + 2 * margin;
+ this.radius = diameter / 2;
+
+ this.width = diameter;
+ this.height = diameter;
+ }
};
Node.prototype._drawCircle = function (ctx) {
- this._resizeCircle(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this._resizeCircle(ctx);
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
- ctx.lineWidth = this.selected ? 2.0 : 1.0;
- ctx.circle(this.x, this.y, this.radius);
- ctx.fill();
- ctx.stroke();
+ ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+ ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+ ctx.lineWidth = this.selected ? 2.0 : 1.0;
+ ctx.circle(this.x, this.y, this.radius);
+ ctx.fill();
+ ctx.stroke();
- this._label(ctx, this.label, this.x, this.y);
+ this._label(ctx, this.label, this.x, this.y);
};
Node.prototype._resizeEllipse = function (ctx) {
- if (!this.width) {
- var textSize = this.getTextSize(ctx);
-
- this.width = textSize.width * 1.5;
- this.height = textSize.height * 2;
- if (this.width < this.height) {
- this.width = this.height;
- }
+ if (!this.width) {
+ var textSize = this.getTextSize(ctx);
+
+ this.width = textSize.width * 1.5;
+ this.height = textSize.height * 2;
+ if (this.width < this.height) {
+ this.width = this.height;
}
+ }
};
Node.prototype._drawEllipse = function (ctx) {
- this._resizeEllipse(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this._resizeEllipse(ctx);
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
- ctx.lineWidth = this.selected ? 2.0 : 1.0;
- ctx.ellipse(this.left, this.top, this.width, this.height);
- ctx.fill();
- ctx.stroke();
+ ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+ ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+ ctx.lineWidth = this.selected ? 2.0 : 1.0;
+ ctx.ellipse(this.left, this.top, this.width, this.height);
+ ctx.fill();
+ ctx.stroke();
- this._label(ctx, this.label, this.x, this.y);
+ this._label(ctx, this.label, this.x, this.y);
};
Node.prototype._drawDot = function (ctx) {
- this._drawShape(ctx, 'circle');
+ this._drawShape(ctx, 'circle');
};
Node.prototype._drawTriangle = function (ctx) {
- this._drawShape(ctx, 'triangle');
+ this._drawShape(ctx, 'triangle');
};
Node.prototype._drawTriangleDown = function (ctx) {
- this._drawShape(ctx, 'triangleDown');
+ this._drawShape(ctx, 'triangleDown');
};
Node.prototype._drawSquare = function (ctx) {
- this._drawShape(ctx, 'square');
+ this._drawShape(ctx, 'square');
};
Node.prototype._drawStar = function (ctx) {
- this._drawShape(ctx, 'star');
+ this._drawShape(ctx, 'star');
};
Node.prototype._resizeShape = function (ctx) {
- if (!this.width) {
- var size = 2 * this.radius;
- this.width = size;
- this.height = size;
- }
+ if (!this.width) {
+ var size = 2 * this.radius;
+ this.width = size;
+ this.height = size;
+ }
};
Node.prototype._drawShape = function (ctx, shape) {
- this._resizeShape(ctx);
+ this._resizeShape(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
- ctx.lineWidth = this.selected ? 2.0 : 1.0;
+ ctx.strokeStyle = this.selected ? this.color.highlight.border : this.color.border;
+ ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
+ ctx.lineWidth = this.selected ? 2.0 : 1.0;
- ctx[shape](this.x, this.y, this.radius);
- ctx.fill();
- ctx.stroke();
+ ctx[shape](this.x, this.y, this.radius);
+ ctx.fill();
+ ctx.stroke();
- if (this.label) {
- this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top');
- }
+ if (this.label) {
+ this._label(ctx, this.label, this.x, this.y + this.height / 2, undefined, 'top');
+ }
};
Node.prototype._resizeText = function (ctx) {
- if (!this.width) {
- var margin = 5;
- var textSize = this.getTextSize(ctx);
- this.width = textSize.width + 2 * margin;
- this.height = textSize.height + 2 * margin;
- }
+ if (!this.width) {
+ var margin = 5;
+ var textSize = this.getTextSize(ctx);
+ this.width = textSize.width + 2 * margin;
+ this.height = textSize.height + 2 * margin;
+ }
};
Node.prototype._drawText = function (ctx) {
- this._resizeText(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
+ this._resizeText(ctx);
+ this.left = this.x - this.width / 2;
+ this.top = this.y - this.height / 2;
- this._label(ctx, this.label, this.x, this.y);
+ this._label(ctx, this.label, this.x, this.y);
};
Node.prototype._label = function (ctx, text, x, y, align, baseline) {
- if (text) {
- ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
- ctx.fillStyle = this.fontColor || "black";
- ctx.textAlign = align || "center";
- ctx.textBaseline = baseline || "middle";
-
- var lines = text.split('\n'),
- lineCount = lines.length,
- fontSize = (this.fontSize + 4),
- yLine = y + (1 - lineCount) / 2 * fontSize;
-
- for (var i = 0; i < lineCount; i++) {
- ctx.fillText(lines[i], x, yLine);
- yLine += fontSize;
- }
+ if (text) {
+ ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
+ ctx.fillStyle = this.fontColor || "black";
+ ctx.textAlign = align || "center";
+ ctx.textBaseline = baseline || "middle";
+
+ var lines = text.split('\n'),
+ lineCount = lines.length,
+ fontSize = (this.fontSize + 4),
+ yLine = y + (1 - lineCount) / 2 * fontSize;
+
+ for (var i = 0; i < lineCount; i++) {
+ ctx.fillText(lines[i], x, yLine);
+ yLine += fontSize;
}
+ }
};
Node.prototype.getTextSize = function(ctx) {
- if (this.label != undefined) {
- ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
-
- var lines = this.label.split('\n'),
- height = (this.fontSize + 4) * lines.length,
- width = 0;
+ if (this.label != undefined) {
+ ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
- for (var i = 0, iMax = lines.length; i < iMax; i++) {
- width = Math.max(width, ctx.measureText(lines[i]).width);
- }
+ var lines = this.label.split('\n'),
+ height = (this.fontSize + 4) * lines.length,
+ width = 0;
- return {"width": width, "height": height};
- }
- else {
- return {"width": 0, "height": 0};
+ for (var i = 0, iMax = lines.length; i < iMax; i++) {
+ width = Math.max(width, ctx.measureText(lines[i]).width);
}
+
+ return {"width": width, "height": height};
+ }
+ else {
+ return {"width": 0, "height": 0};
+ }
};
diff --git a/src/graph/Popup.js b/src/graph/Popup.js
index 2d0121a3..7dc8ffe8 100644
--- a/src/graph/Popup.js
+++ b/src/graph/Popup.js
@@ -6,38 +6,38 @@
* @param {String} [text]
*/
function Popup(container, x, y, text) {
- if (container) {
- this.container = container;
- }
- else {
- this.container = document.body;
- }
- this.x = 0;
- this.y = 0;
- this.padding = 5;
+ if (container) {
+ this.container = container;
+ }
+ else {
+ this.container = document.body;
+ }
+ this.x = 0;
+ this.y = 0;
+ this.padding = 5;
- if (x !== undefined && y !== undefined ) {
- this.setPosition(x, y);
- }
- if (text !== undefined) {
- this.setText(text);
- }
+ if (x !== undefined && y !== undefined ) {
+ this.setPosition(x, y);
+ }
+ if (text !== undefined) {
+ this.setText(text);
+ }
- // create the frame
- this.frame = document.createElement("div");
- var style = this.frame.style;
- style.position = "absolute";
- style.visibility = "hidden";
- style.border = "1px solid #666";
- style.color = "black";
- style.padding = this.padding + "px";
- style.backgroundColor = "#FFFFC6";
- style.borderRadius = "3px";
- style.MozBorderRadius = "3px";
- style.WebkitBorderRadius = "3px";
- style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
- style.whiteSpace = "nowrap";
- this.container.appendChild(this.frame);
+ // create the frame
+ this.frame = document.createElement("div");
+ var style = this.frame.style;
+ style.position = "absolute";
+ style.visibility = "hidden";
+ style.border = "1px solid #666";
+ style.color = "black";
+ style.padding = this.padding + "px";
+ style.backgroundColor = "#FFFFC6";
+ style.borderRadius = "3px";
+ style.MozBorderRadius = "3px";
+ style.WebkitBorderRadius = "3px";
+ style.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
+ style.whiteSpace = "nowrap";
+ this.container.appendChild(this.frame);
};
/**
@@ -45,8 +45,8 @@ function Popup(container, x, y, text) {
* @param {number} y Vertical position of the popup window
*/
Popup.prototype.setPosition = function(x, y) {
- this.x = parseInt(x);
- this.y = parseInt(y);
+ this.x = parseInt(x);
+ this.y = parseInt(y);
};
/**
@@ -54,7 +54,7 @@ Popup.prototype.setPosition = function(x, y) {
* @param {string} text
*/
Popup.prototype.setText = function(text) {
- this.frame.innerHTML = text;
+ this.frame.innerHTML = text;
};
/**
@@ -62,44 +62,44 @@ Popup.prototype.setText = function(text) {
* @param {boolean} show Optional. Show or hide the window
*/
Popup.prototype.show = function (show) {
- if (show === undefined) {
- show = true;
- }
+ if (show === undefined) {
+ show = true;
+ }
- if (show) {
- var height = this.frame.clientHeight;
- var width = this.frame.clientWidth;
- var maxHeight = this.frame.parentNode.clientHeight;
- var maxWidth = this.frame.parentNode.clientWidth;
+ if (show) {
+ var height = this.frame.clientHeight;
+ var width = this.frame.clientWidth;
+ var maxHeight = this.frame.parentNode.clientHeight;
+ var maxWidth = this.frame.parentNode.clientWidth;
- var top = (this.y - height);
- if (top + height + this.padding > maxHeight) {
- top = maxHeight - height - this.padding;
- }
- if (top < this.padding) {
- top = this.padding;
- }
-
- var left = this.x;
- if (left + width + this.padding > maxWidth) {
- left = maxWidth - width - this.padding;
- }
- if (left < this.padding) {
- left = this.padding;
- }
+ var top = (this.y - height);
+ if (top + height + this.padding > maxHeight) {
+ top = maxHeight - height - this.padding;
+ }
+ if (top < this.padding) {
+ top = this.padding;
+ }
- this.frame.style.left = left + "px";
- this.frame.style.top = top + "px";
- this.frame.style.visibility = "visible";
+ var left = this.x;
+ if (left + width + this.padding > maxWidth) {
+ left = maxWidth - width - this.padding;
}
- else {
- this.hide();
+ if (left < this.padding) {
+ left = this.padding;
}
+
+ this.frame.style.left = left + "px";
+ this.frame.style.top = top + "px";
+ this.frame.style.visibility = "visible";
+ }
+ else {
+ this.hide();
+ }
};
/**
* Hide the popup window
*/
Popup.prototype.hide = function () {
- this.frame.style.visibility = "hidden";
+ this.frame.style.visibility = "hidden";
};
diff --git a/src/graph/dotparser.js b/src/graph/dotparser.js
index 46d73d05..71576079 100644
--- a/src/graph/dotparser.js
+++ b/src/graph/dotparser.js
@@ -1,829 +1,829 @@
(function(exports) {
- /**
- * Parse a text source containing data in DOT language into a JSON object.
- * The object contains two lists: one with nodes and one with edges.
- *
- * DOT language reference: http://www.graphviz.org/doc/info/lang.html
- *
- * @param {String} data Text containing a graph in DOT-notation
- * @return {Object} graph An object containing two parameters:
- * {Object[]} nodes
- * {Object[]} edges
- */
- function parseDOT (data) {
- dot = data;
- return parseGraph();
- }
-
- // token types enumeration
- var TOKENTYPE = {
- NULL : 0,
- DELIMITER : 1,
- IDENTIFIER: 2,
- UNKNOWN : 3
- };
-
- // map with all delimiters
- var DELIMITERS = {
- '{': true,
- '}': true,
- '[': true,
- ']': true,
- ';': true,
- '=': true,
- ',': true,
-
- '->': true,
- '--': true
- };
-
- var dot = ''; // current dot file
- var index = 0; // current index in dot file
- var c = ''; // current token character in expr
- var token = ''; // current token
- var tokenType = TOKENTYPE.NULL; // type of the token
-
- /**
- * Get the first character from the dot file.
- * The character is stored into the char c. If the end of the dot file is
- * reached, the function puts an empty string in c.
- */
- function first() {
- index = 0;
- c = dot.charAt(0);
- }
-
- /**
- * Get the next character from the dot file.
- * The character is stored into the char c. If the end of the dot file is
- * reached, the function puts an empty string in c.
- */
- function next() {
- index++;
- c = dot.charAt(index);
- }
-
- /**
- * Preview the next character from the dot file.
- * @return {String} cNext
- */
- function nextPreview() {
- return dot.charAt(index + 1);
- }
-
- /**
- * Test whether given character is alphabetic or numeric
- * @param {String} c
- * @return {Boolean} isAlphaNumeric
- */
- var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
- function isAlphaNumeric(c) {
- return regexAlphaNumeric.test(c);
- }
-
- /**
- * Merge all properties of object b into object b
- * @param {Object} a
- * @param {Object} b
- * @return {Object} a
- */
- function merge (a, b) {
- if (!a) {
- a = {};
- }
-
- if (b) {
- for (var name in b) {
- if (b.hasOwnProperty(name)) {
- a[name] = b[name];
- }
- }
- }
- return a;
- }
-
- /**
- * Set a value in an object, where the provided parameter name can be a
- * path with nested parameters. For example:
- *
- * var obj = {a: 2};
- * setValue(obj, 'b.c', 3); // obj = {a: 2, b: {c: 3}}
- *
- * @param {Object} obj
- * @param {String} path A parameter name or dot-separated parameter path,
- * like "color.highlight.border".
- * @param {*} value
- */
- function setValue(obj, path, value) {
- var keys = path.split('.');
- var o = obj;
- while (keys.length) {
- var key = keys.shift();
- if (keys.length) {
- // this isn't the end point
- if (!o[key]) {
- o[key] = {};
- }
- o = o[key];
- }
- else {
- // this is the end point
- o[key] = value;
- }
- }
+ /**
+ * Parse a text source containing data in DOT language into a JSON object.
+ * The object contains two lists: one with nodes and one with edges.
+ *
+ * DOT language reference: http://www.graphviz.org/doc/info/lang.html
+ *
+ * @param {String} data Text containing a graph in DOT-notation
+ * @return {Object} graph An object containing two parameters:
+ * {Object[]} nodes
+ * {Object[]} edges
+ */
+ function parseDOT (data) {
+ dot = data;
+ return parseGraph();
+ }
+
+ // token types enumeration
+ var TOKENTYPE = {
+ NULL : 0,
+ DELIMITER : 1,
+ IDENTIFIER: 2,
+ UNKNOWN : 3
+ };
+
+ // map with all delimiters
+ var DELIMITERS = {
+ '{': true,
+ '}': true,
+ '[': true,
+ ']': true,
+ ';': true,
+ '=': true,
+ ',': true,
+
+ '->': true,
+ '--': true
+ };
+
+ var dot = ''; // current dot file
+ var index = 0; // current index in dot file
+ var c = ''; // current token character in expr
+ var token = ''; // current token
+ var tokenType = TOKENTYPE.NULL; // type of the token
+
+ /**
+ * Get the first character from the dot file.
+ * The character is stored into the char c. If the end of the dot file is
+ * reached, the function puts an empty string in c.
+ */
+ function first() {
+ index = 0;
+ c = dot.charAt(0);
+ }
+
+ /**
+ * Get the next character from the dot file.
+ * The character is stored into the char c. If the end of the dot file is
+ * reached, the function puts an empty string in c.
+ */
+ function next() {
+ index++;
+ c = dot.charAt(index);
+ }
+
+ /**
+ * Preview the next character from the dot file.
+ * @return {String} cNext
+ */
+ function nextPreview() {
+ return dot.charAt(index + 1);
+ }
+
+ /**
+ * Test whether given character is alphabetic or numeric
+ * @param {String} c
+ * @return {Boolean} isAlphaNumeric
+ */
+ var regexAlphaNumeric = /[a-zA-Z_0-9.:#]/;
+ function isAlphaNumeric(c) {
+ return regexAlphaNumeric.test(c);
+ }
+
+ /**
+ * Merge all properties of object b into object b
+ * @param {Object} a
+ * @param {Object} b
+ * @return {Object} a
+ */
+ function merge (a, b) {
+ if (!a) {
+ a = {};
}
- /**
- * Add a node to a graph object. If there is already a node with
- * the same id, their attributes will be merged.
- * @param {Object} graph
- * @param {Object} node
- */
- function addNode(graph, node) {
- var i, len;
- var current = null;
-
- // find root graph (in case of subgraph)
- var graphs = [graph]; // list with all graphs from current graph to root graph
- var root = graph;
- while (root.parent) {
- graphs.push(root.parent);
- root = root.parent;
- }
-
- // find existing node (at root level) by its id
- if (root.nodes) {
- for (i = 0, len = root.nodes.length; i < len; i++) {
- if (node.id === root.nodes[i].id) {
- current = root.nodes[i];
- break;
- }
- }
- }
-
- if (!current) {
- // this is a new node
- current = {
- id: node.id
- };
- if (graph.node) {
- // clone default attributes
- current.attr = merge(current.attr, graph.node);
- }
- }
-
- // add node to this (sub)graph and all its parent graphs
- for (i = graphs.length - 1; i >= 0; i--) {
- var g = graphs[i];
-
- if (!g.nodes) {
- g.nodes = [];
- }
- if (g.nodes.indexOf(current) == -1) {
- g.nodes.push(current);
- }
- }
-
- // merge attributes
- if (node.attr) {
- current.attr = merge(current.attr, node.attr);
+ if (b) {
+ for (var name in b) {
+ if (b.hasOwnProperty(name)) {
+ a[name] = b[name];
}
+ }
+ }
+ return a;
+ }
+
+ /**
+ * Set a value in an object, where the provided parameter name can be a
+ * path with nested parameters. For example:
+ *
+ * var obj = {a: 2};
+ * setValue(obj, 'b.c', 3); // obj = {a: 2, b: {c: 3}}
+ *
+ * @param {Object} obj
+ * @param {String} path A parameter name or dot-separated parameter path,
+ * like "color.highlight.border".
+ * @param {*} value
+ */
+ function setValue(obj, path, value) {
+ var keys = path.split('.');
+ var o = obj;
+ while (keys.length) {
+ var key = keys.shift();
+ if (keys.length) {
+ // this isn't the end point
+ if (!o[key]) {
+ o[key] = {};
+ }
+ o = o[key];
+ }
+ else {
+ // this is the end point
+ o[key] = value;
+ }
+ }
+ }
+
+ /**
+ * Add a node to a graph object. If there is already a node with
+ * the same id, their attributes will be merged.
+ * @param {Object} graph
+ * @param {Object} node
+ */
+ function addNode(graph, node) {
+ var i, len;
+ var current = null;
+
+ // find root graph (in case of subgraph)
+ var graphs = [graph]; // list with all graphs from current graph to root graph
+ var root = graph;
+ while (root.parent) {
+ graphs.push(root.parent);
+ root = root.parent;
}
- /**
- * Add an edge to a graph object
- * @param {Object} graph
- * @param {Object} edge
- */
- function addEdge(graph, edge) {
- if (!graph.edges) {
- graph.edges = [];
- }
- graph.edges.push(edge);
- if (graph.edge) {
- var attr = merge({}, graph.edge); // clone default attributes
- edge.attr = merge(attr, edge.attr); // merge attributes
+ // find existing node (at root level) by its id
+ if (root.nodes) {
+ for (i = 0, len = root.nodes.length; i < len; i++) {
+ if (node.id === root.nodes[i].id) {
+ current = root.nodes[i];
+ break;
}
+ }
}
- /**
- * Create an edge to a graph object
- * @param {Object} graph
- * @param {String | Number | Object} from
- * @param {String | Number | Object} to
- * @param {String} type
- * @param {Object | null} attr
- * @return {Object} edge
- */
- function createEdge(graph, from, to, type, attr) {
- var edge = {
- from: from,
- to: to,
- type: type
- };
+ if (!current) {
+ // this is a new node
+ current = {
+ id: node.id
+ };
+ if (graph.node) {
+ // clone default attributes
+ current.attr = merge(current.attr, graph.node);
+ }
+ }
- if (graph.edge) {
- edge.attr = merge({}, graph.edge); // clone default attributes
- }
- edge.attr = merge(edge.attr || {}, attr); // merge attributes
+ // add node to this (sub)graph and all its parent graphs
+ for (i = graphs.length - 1; i >= 0; i--) {
+ var g = graphs[i];
- return edge;
+ if (!g.nodes) {
+ g.nodes = [];
+ }
+ if (g.nodes.indexOf(current) == -1) {
+ g.nodes.push(current);
+ }
}
- /**
- * Get next token in the current dot file.
- * The token and token type are available as token and tokenType
- */
- function getToken() {
- tokenType = TOKENTYPE.NULL;
- token = '';
+ // merge attributes
+ if (node.attr) {
+ current.attr = merge(current.attr, node.attr);
+ }
+ }
+
+ /**
+ * Add an edge to a graph object
+ * @param {Object} graph
+ * @param {Object} edge
+ */
+ function addEdge(graph, edge) {
+ if (!graph.edges) {
+ graph.edges = [];
+ }
+ graph.edges.push(edge);
+ if (graph.edge) {
+ var attr = merge({}, graph.edge); // clone default attributes
+ edge.attr = merge(attr, edge.attr); // merge attributes
+ }
+ }
+
+ /**
+ * Create an edge to a graph object
+ * @param {Object} graph
+ * @param {String | Number | Object} from
+ * @param {String | Number | Object} to
+ * @param {String} type
+ * @param {Object | null} attr
+ * @return {Object} edge
+ */
+ function createEdge(graph, from, to, type, attr) {
+ var edge = {
+ from: from,
+ to: to,
+ type: type
+ };
- // skip over whitespaces
- while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
- next();
- }
+ if (graph.edge) {
+ edge.attr = merge({}, graph.edge); // clone default attributes
+ }
+ edge.attr = merge(edge.attr || {}, attr); // merge attributes
+
+ return edge;
+ }
+
+ /**
+ * Get next token in the current dot file.
+ * The token and token type are available as token and tokenType
+ */
+ function getToken() {
+ tokenType = TOKENTYPE.NULL;
+ token = '';
+
+ // skip over whitespaces
+ while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
+ next();
+ }
- do {
- var isComment = false;
-
- // skip comment
- if (c == '#') {
- // find the previous non-space character
- var i = index - 1;
- while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
- i--;
- }
- if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
- // the # is at the start of a line, this is indeed a line comment
- while (c != '' && c != '\n') {
- next();
- }
- isComment = true;
- }
- }
- if (c == '/' && nextPreview() == '/') {
- // skip line comment
- while (c != '' && c != '\n') {
- next();
- }
- isComment = true;
- }
- if (c == '/' && nextPreview() == '*') {
- // skip block comment
- while (c != '') {
- if (c == '*' && nextPreview() == '/') {
- // end of block comment found. skip these last two characters
- next();
- next();
- break;
- }
- else {
- next();
- }
- }
- isComment = true;
- }
-
- // skip over whitespaces
- while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
- next();
- }
- }
- while (isComment);
+ do {
+ var isComment = false;
- // check for end of dot file
- if (c == '') {
- // token is still empty
- tokenType = TOKENTYPE.DELIMITER;
- return;
+ // skip comment
+ if (c == '#') {
+ // find the previous non-space character
+ var i = index - 1;
+ while (dot.charAt(i) == ' ' || dot.charAt(i) == '\t') {
+ i--;
}
-
- // check for delimiters consisting of 2 characters
- var c2 = c + nextPreview();
- if (DELIMITERS[c2]) {
- tokenType = TOKENTYPE.DELIMITER;
- token = c2;
+ if (dot.charAt(i) == '\n' || dot.charAt(i) == '') {
+ // the # is at the start of a line, this is indeed a line comment
+ while (c != '' && c != '\n') {
next();
+ }
+ isComment = true;
+ }
+ }
+ if (c == '/' && nextPreview() == '/') {
+ // skip line comment
+ while (c != '' && c != '\n') {
+ next();
+ }
+ isComment = true;
+ }
+ if (c == '/' && nextPreview() == '*') {
+ // skip block comment
+ while (c != '') {
+ if (c == '*' && nextPreview() == '/') {
+ // end of block comment found. skip these last two characters
next();
- return;
- }
-
- // check for delimiters consisting of 1 character
- if (DELIMITERS[c]) {
- tokenType = TOKENTYPE.DELIMITER;
- token = c;
next();
- return;
+ break;
+ }
+ else {
+ next();
+ }
}
+ isComment = true;
+ }
- // check for an identifier (number or string)
- // TODO: more precise parsing of numbers/strings (and the port separator ':')
- if (isAlphaNumeric(c) || c == '-') {
- token += c;
- next();
+ // skip over whitespaces
+ while (c == ' ' || c == '\t' || c == '\n' || c == '\r') { // space, tab, enter
+ next();
+ }
+ }
+ while (isComment);
- while (isAlphaNumeric(c)) {
- token += c;
- next();
- }
- if (token == 'false') {
- token = false; // convert to boolean
- }
- else if (token == 'true') {
- token = true; // convert to boolean
- }
- else if (!isNaN(Number(token))) {
- token = Number(token); // convert to number
- }
- tokenType = TOKENTYPE.IDENTIFIER;
- return;
- }
+ // check for end of dot file
+ if (c == '') {
+ // token is still empty
+ tokenType = TOKENTYPE.DELIMITER;
+ return;
+ }
- // check for a string enclosed by double quotes
- if (c == '"') {
- next();
- while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
- token += c;
- if (c == '"') { // skip the escape character
- next();
- }
- next();
- }
- if (c != '"') {
- throw newSyntaxError('End of string " expected');
- }
- next();
- tokenType = TOKENTYPE.IDENTIFIER;
- return;
- }
+ // check for delimiters consisting of 2 characters
+ var c2 = c + nextPreview();
+ if (DELIMITERS[c2]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c2;
+ next();
+ next();
+ return;
+ }
- // something unknown is found, wrong characters, a syntax error
- tokenType = TOKENTYPE.UNKNOWN;
- while (c != '') {
- token += c;
- next();
- }
- throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+ // check for delimiters consisting of 1 character
+ if (DELIMITERS[c]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c;
+ next();
+ return;
}
- /**
- * Parse a graph.
- * @returns {Object} graph
- */
- function parseGraph() {
- var graph = {};
+ // check for an identifier (number or string)
+ // TODO: more precise parsing of numbers/strings (and the port separator ':')
+ if (isAlphaNumeric(c) || c == '-') {
+ token += c;
+ next();
+
+ while (isAlphaNumeric(c)) {
+ token += c;
+ next();
+ }
+ if (token == 'false') {
+ token = false; // convert to boolean
+ }
+ else if (token == 'true') {
+ token = true; // convert to boolean
+ }
+ else if (!isNaN(Number(token))) {
+ token = Number(token); // convert to number
+ }
+ tokenType = TOKENTYPE.IDENTIFIER;
+ return;
+ }
- first();
- getToken();
+ // check for a string enclosed by double quotes
+ if (c == '"') {
+ next();
+ while (c != '' && (c != '"' || (c == '"' && nextPreview() == '"'))) {
+ token += c;
+ if (c == '"') { // skip the escape character
+ next();
+ }
+ next();
+ }
+ if (c != '"') {
+ throw newSyntaxError('End of string " expected');
+ }
+ next();
+ tokenType = TOKENTYPE.IDENTIFIER;
+ return;
+ }
- // optional strict keyword
- if (token == 'strict') {
- graph.strict = true;
- getToken();
- }
+ // something unknown is found, wrong characters, a syntax error
+ tokenType = TOKENTYPE.UNKNOWN;
+ while (c != '') {
+ token += c;
+ next();
+ }
+ throw new SyntaxError('Syntax error in part "' + chop(token, 30) + '"');
+ }
+
+ /**
+ * Parse a graph.
+ * @returns {Object} graph
+ */
+ function parseGraph() {
+ var graph = {};
+
+ first();
+ getToken();
+
+ // optional strict keyword
+ if (token == 'strict') {
+ graph.strict = true;
+ getToken();
+ }
- // graph or digraph keyword
- if (token == 'graph' || token == 'digraph') {
- graph.type = token;
- getToken();
- }
+ // graph or digraph keyword
+ if (token == 'graph' || token == 'digraph') {
+ graph.type = token;
+ getToken();
+ }
- // optional graph id
- if (tokenType == TOKENTYPE.IDENTIFIER) {
- graph.id = token;
- getToken();
- }
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ graph.id = token;
+ getToken();
+ }
- // open angle bracket
- if (token != '{') {
- throw newSyntaxError('Angle bracket { expected');
- }
- getToken();
+ // open angle bracket
+ if (token != '{') {
+ throw newSyntaxError('Angle bracket { expected');
+ }
+ getToken();
- // statements
- parseStatements(graph);
+ // statements
+ parseStatements(graph);
- // close angle bracket
- if (token != '}') {
- throw newSyntaxError('Angle bracket } expected');
- }
- getToken();
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
+ }
+ getToken();
- // end of file
- if (token !== '') {
- throw newSyntaxError('End of file expected');
- }
+ // end of file
+ if (token !== '') {
+ throw newSyntaxError('End of file expected');
+ }
+ getToken();
+
+ // remove temporary default properties
+ delete graph.node;
+ delete graph.edge;
+ delete graph.graph;
+
+ return graph;
+ }
+
+ /**
+ * Parse a list with statements.
+ * @param {Object} graph
+ */
+ function parseStatements (graph) {
+ while (token !== '' && token != '}') {
+ parseStatement(graph);
+ if (token == ';') {
getToken();
+ }
+ }
+ }
+
+ /**
+ * Parse a single statement. Can be a an attribute statement, node
+ * statement, a series of node statements and edge statements, or a
+ * parameter.
+ * @param {Object} graph
+ */
+ function parseStatement(graph) {
+ // parse subgraph
+ var subgraph = parseSubgraph(graph);
+ if (subgraph) {
+ // edge statements
+ parseEdge(graph, subgraph);
+
+ return;
+ }
- // remove temporary default properties
- delete graph.node;
- delete graph.edge;
- delete graph.graph;
+ // parse an attribute statement
+ var attr = parseAttributeStatement(graph);
+ if (attr) {
+ return;
+ }
- return graph;
+ // parse node
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier expected');
+ }
+ var id = token; // id can be a string or a number
+ getToken();
+
+ if (token == '=') {
+ // id statement
+ getToken();
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Identifier expected');
+ }
+ graph[id] = token;
+ getToken();
+ // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
+ }
+ else {
+ parseNodeStatement(graph, id);
+ }
+ }
+
+ /**
+ * Parse a subgraph
+ * @param {Object} graph parent graph object
+ * @return {Object | null} subgraph
+ */
+ function parseSubgraph (graph) {
+ var subgraph = null;
+
+ // optional subgraph keyword
+ if (token == 'subgraph') {
+ subgraph = {};
+ subgraph.type = 'subgraph';
+ getToken();
+
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ subgraph.id = token;
+ getToken();
+ }
}
- /**
- * Parse a list with statements.
- * @param {Object} graph
- */
- function parseStatements (graph) {
- while (token !== '' && token != '}') {
- parseStatement(graph);
- if (token == ';') {
- getToken();
- }
- }
+ // open angle bracket
+ if (token == '{') {
+ getToken();
+
+ if (!subgraph) {
+ subgraph = {};
+ }
+ subgraph.parent = graph;
+ subgraph.node = graph.node;
+ subgraph.edge = graph.edge;
+ subgraph.graph = graph.graph;
+
+ // statements
+ parseStatements(subgraph);
+
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
+ }
+ getToken();
+
+ // remove temporary default properties
+ delete subgraph.node;
+ delete subgraph.edge;
+ delete subgraph.graph;
+ delete subgraph.parent;
+
+ // register at the parent graph
+ if (!graph.subgraphs) {
+ graph.subgraphs = [];
+ }
+ graph.subgraphs.push(subgraph);
}
- /**
- * Parse a single statement. Can be a an attribute statement, node
- * statement, a series of node statements and edge statements, or a
- * parameter.
- * @param {Object} graph
- */
- function parseStatement(graph) {
- // parse subgraph
- var subgraph = parseSubgraph(graph);
- if (subgraph) {
- // edge statements
- parseEdge(graph, subgraph);
-
- return;
- }
+ return subgraph;
+ }
+
+ /**
+ * parse an attribute statement like "node [shape=circle fontSize=16]".
+ * Available keywords are 'node', 'edge', 'graph'.
+ * The previous list with default attributes will be replaced
+ * @param {Object} graph
+ * @returns {String | null} keyword Returns the name of the parsed attribute
+ * (node, edge, graph), or null if nothing
+ * is parsed.
+ */
+ function parseAttributeStatement (graph) {
+ // attribute statements
+ if (token == 'node') {
+ getToken();
+
+ // node attributes
+ graph.node = parseAttributeList();
+ return 'node';
+ }
+ else if (token == 'edge') {
+ getToken();
- // parse an attribute statement
- var attr = parseAttributeStatement(graph);
- if (attr) {
- return;
- }
+ // edge attributes
+ graph.edge = parseAttributeList();
+ return 'edge';
+ }
+ else if (token == 'graph') {
+ getToken();
+
+ // graph attributes
+ graph.graph = parseAttributeList();
+ return 'graph';
+ }
- // parse node
+ return null;
+ }
+
+ /**
+ * parse a node statement
+ * @param {Object} graph
+ * @param {String | Number} id
+ */
+ function parseNodeStatement(graph, id) {
+ // node statement
+ var node = {
+ id: id
+ };
+ var attr = parseAttributeList();
+ if (attr) {
+ node.attr = attr;
+ }
+ addNode(graph, node);
+
+ // edge statements
+ parseEdge(graph, id);
+ }
+
+ /**
+ * Parse an edge or a series of edges
+ * @param {Object} graph
+ * @param {String | Number} from Id of the from node
+ */
+ function parseEdge(graph, from) {
+ while (token == '->' || token == '--') {
+ var to;
+ var type = token;
+ getToken();
+
+ var subgraph = parseSubgraph(graph);
+ if (subgraph) {
+ to = subgraph;
+ }
+ else {
if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier expected');
+ throw newSyntaxError('Identifier or subgraph expected');
}
- var id = token; // id can be a string or a number
+ to = token;
+ addNode(graph, {
+ id: to
+ });
getToken();
+ }
- if (token == '=') {
- // id statement
- getToken();
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier expected');
- }
- graph[id] = token;
- getToken();
- // TODO: implement comma separated list with "a_list: ID=ID [','] [a_list] "
- }
- else {
- parseNodeStatement(graph, id);
- }
- }
+ // parse edge attributes
+ var attr = parseAttributeList();
- /**
- * Parse a subgraph
- * @param {Object} graph parent graph object
- * @return {Object | null} subgraph
- */
- function parseSubgraph (graph) {
- var subgraph = null;
-
- // optional subgraph keyword
- if (token == 'subgraph') {
- subgraph = {};
- subgraph.type = 'subgraph';
- getToken();
-
- // optional graph id
- if (tokenType == TOKENTYPE.IDENTIFIER) {
- subgraph.id = token;
- getToken();
- }
- }
+ // create edge
+ var edge = createEdge(graph, from, to, type, attr);
+ addEdge(graph, edge);
- // open angle bracket
- if (token == '{') {
- getToken();
-
- if (!subgraph) {
- subgraph = {};
- }
- subgraph.parent = graph;
- subgraph.node = graph.node;
- subgraph.edge = graph.edge;
- subgraph.graph = graph.graph;
-
- // statements
- parseStatements(subgraph);
-
- // close angle bracket
- if (token != '}') {
- throw newSyntaxError('Angle bracket } expected');
- }
- getToken();
-
- // remove temporary default properties
- delete subgraph.node;
- delete subgraph.edge;
- delete subgraph.graph;
- delete subgraph.parent;
-
- // register at the parent graph
- if (!graph.subgraphs) {
- graph.subgraphs = [];
- }
- graph.subgraphs.push(subgraph);
+ from = to;
+ }
+ }
+
+ /**
+ * Parse a set with attributes,
+ * for example [label="1.000", shape=solid]
+ * @return {Object | null} attr
+ */
+ function parseAttributeList() {
+ var attr = null;
+
+ while (token == '[') {
+ getToken();
+ attr = {};
+ while (token !== '' && token != ']') {
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Attribute name expected');
}
+ var name = token;
- return subgraph;
- }
-
- /**
- * parse an attribute statement like "node [shape=circle fontSize=16]".
- * Available keywords are 'node', 'edge', 'graph'.
- * The previous list with default attributes will be replaced
- * @param {Object} graph
- * @returns {String | null} keyword Returns the name of the parsed attribute
- * (node, edge, graph), or null if nothing
- * is parsed.
- */
- function parseAttributeStatement (graph) {
- // attribute statements
- if (token == 'node') {
- getToken();
-
- // node attributes
- graph.node = parseAttributeList();
- return 'node';
+ getToken();
+ if (token != '=') {
+ throw newSyntaxError('Equal sign = expected');
}
- else if (token == 'edge') {
- getToken();
+ getToken();
- // edge attributes
- graph.edge = parseAttributeList();
- return 'edge';
+ if (tokenType != TOKENTYPE.IDENTIFIER) {
+ throw newSyntaxError('Attribute value expected');
}
- else if (token == 'graph') {
- getToken();
+ var value = token;
+ setValue(attr, name, value); // name can be a path
- // graph attributes
- graph.graph = parseAttributeList();
- return 'graph';
+ getToken();
+ if (token ==',') {
+ getToken();
}
+ }
- return null;
+ if (token != ']') {
+ throw newSyntaxError('Bracket ] expected');
+ }
+ getToken();
}
- /**
- * parse a node statement
- * @param {Object} graph
- * @param {String | Number} id
- */
- function parseNodeStatement(graph, id) {
- // node statement
- var node = {
- id: id
- };
- var attr = parseAttributeList();
- if (attr) {
- node.attr = attr;
+ return attr;
+ }
+
+ /**
+ * Create a syntax error with extra information on current token and index.
+ * @param {String} message
+ * @returns {SyntaxError} err
+ */
+ function newSyntaxError(message) {
+ return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
+ }
+
+ /**
+ * Chop off text after a maximum length
+ * @param {String} text
+ * @param {Number} maxLength
+ * @returns {String}
+ */
+ function chop (text, maxLength) {
+ return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
+ }
+
+ /**
+ * Execute a function fn for each pair of elements in two arrays
+ * @param {Array | *} array1
+ * @param {Array | *} array2
+ * @param {function} fn
+ */
+ function forEach2(array1, array2, fn) {
+ if (array1 instanceof Array) {
+ array1.forEach(function (elem1) {
+ if (array2 instanceof Array) {
+ array2.forEach(function (elem2) {
+ fn(elem1, elem2);
+ });
}
- addNode(graph, node);
-
- // edge statements
- parseEdge(graph, id);
- }
-
- /**
- * Parse an edge or a series of edges
- * @param {Object} graph
- * @param {String | Number} from Id of the from node
- */
- function parseEdge(graph, from) {
- while (token == '->' || token == '--') {
- var to;
- var type = token;
- getToken();
-
- var subgraph = parseSubgraph(graph);
- if (subgraph) {
- to = subgraph;
- }
- else {
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Identifier or subgraph expected');
- }
- to = token;
- addNode(graph, {
- id: to
- });
- getToken();
- }
-
- // parse edge attributes
- var attr = parseAttributeList();
-
- // create edge
- var edge = createEdge(graph, from, to, type, attr);
- addEdge(graph, edge);
-
- from = to;
+ else {
+ fn(elem1, array2);
}
+ });
+ }
+ else {
+ if (array2 instanceof Array) {
+ array2.forEach(function (elem2) {
+ fn(array1, elem2);
+ });
+ }
+ else {
+ fn(array1, array2);
+ }
}
+ }
+
+ /**
+ * Convert a string containing a graph in DOT language into a map containing
+ * with nodes and edges in the format of graph.
+ * @param {String} data Text containing a graph in DOT-notation
+ * @return {Object} graphData
+ */
+ function DOTToGraph (data) {
+ // parse the DOT file
+ var dotData = parseDOT(data);
+ var graphData = {
+ nodes: [],
+ edges: [],
+ options: {}
+ };
- /**
- * Parse a set with attributes,
- * for example [label="1.000", shape=solid]
- * @return {Object | null} attr
- */
- function parseAttributeList() {
- var attr = null;
-
- while (token == '[') {
- getToken();
- attr = {};
- while (token !== '' && token != ']') {
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Attribute name expected');
- }
- var name = token;
-
- getToken();
- if (token != '=') {
- throw newSyntaxError('Equal sign = expected');
- }
- getToken();
-
- if (tokenType != TOKENTYPE.IDENTIFIER) {
- throw newSyntaxError('Attribute value expected');
- }
- var value = token;
- setValue(attr, name, value); // name can be a path
-
- getToken();
- if (token ==',') {
- getToken();
- }
- }
-
- if (token != ']') {
- throw newSyntaxError('Bracket ] expected');
- }
- getToken();
+ // copy the nodes
+ if (dotData.nodes) {
+ dotData.nodes.forEach(function (dotNode) {
+ var graphNode = {
+ id: dotNode.id,
+ label: String(dotNode.label || dotNode.id)
+ };
+ merge(graphNode, dotNode.attr);
+ if (graphNode.image) {
+ graphNode.shape = 'image';
}
+ graphData.nodes.push(graphNode);
+ });
+ }
- return attr;
- }
-
- /**
- * Create a syntax error with extra information on current token and index.
- * @param {String} message
- * @returns {SyntaxError} err
- */
- function newSyntaxError(message) {
- return new SyntaxError(message + ', got "' + chop(token, 30) + '" (char ' + index + ')');
- }
-
- /**
- * Chop off text after a maximum length
- * @param {String} text
- * @param {Number} maxLength
- * @returns {String}
- */
- function chop (text, maxLength) {
- return (text.length <= maxLength) ? text : (text.substr(0, 27) + '...');
- }
-
- /**
- * Execute a function fn for each pair of elements in two arrays
- * @param {Array | *} array1
- * @param {Array | *} array2
- * @param {function} fn
- */
- function forEach2(array1, array2, fn) {
- if (array1 instanceof Array) {
- array1.forEach(function (elem1) {
- if (array2 instanceof Array) {
- array2.forEach(function (elem2) {
- fn(elem1, elem2);
- });
- }
- else {
- fn(elem1, array2);
- }
- });
- }
- else {
- if (array2 instanceof Array) {
- array2.forEach(function (elem2) {
- fn(array1, elem2);
- });
- }
- else {
- fn(array1, array2);
- }
- }
- }
-
- /**
- * Convert a string containing a graph in DOT language into a map containing
- * with nodes and edges in the format of graph.
- * @param {String} data Text containing a graph in DOT-notation
- * @return {Object} graphData
- */
- function DOTToGraph (data) {
- // parse the DOT file
- var dotData = parseDOT(data);
- var graphData = {
- nodes: [],
- edges: [],
- options: {}
+ // copy the edges
+ if (dotData.edges) {
+ /**
+ * Convert an edge in DOT format to an edge with VisGraph format
+ * @param {Object} dotEdge
+ * @returns {Object} graphEdge
+ */
+ function convertEdge(dotEdge) {
+ var graphEdge = {
+ from: dotEdge.from,
+ to: dotEdge.to
};
+ merge(graphEdge, dotEdge.attr);
+ graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
+ return graphEdge;
+ }
- // copy the nodes
- if (dotData.nodes) {
- dotData.nodes.forEach(function (dotNode) {
- var graphNode = {
- id: dotNode.id,
- label: String(dotNode.label || dotNode.id)
- };
- merge(graphNode, dotNode.attr);
- if (graphNode.image) {
- graphNode.shape = 'image';
- }
- graphData.nodes.push(graphNode);
- });
+ dotData.edges.forEach(function (dotEdge) {
+ var from, to;
+ if (dotEdge.from instanceof Object) {
+ from = dotEdge.from.nodes;
+ }
+ else {
+ from = {
+ id: dotEdge.from
+ }
}
- // copy the edges
- if (dotData.edges) {
- /**
- * Convert an edge in DOT format to an edge with VisGraph format
- * @param {Object} dotEdge
- * @returns {Object} graphEdge
- */
- function convertEdge(dotEdge) {
- var graphEdge = {
- from: dotEdge.from,
- to: dotEdge.to
- };
- merge(graphEdge, dotEdge.attr);
- graphEdge.style = (dotEdge.type == '->') ? 'arrow' : 'line';
- return graphEdge;
- }
-
- dotData.edges.forEach(function (dotEdge) {
- var from, to;
- if (dotEdge.from instanceof Object) {
- from = dotEdge.from.nodes;
- }
- else {
- from = {
- id: dotEdge.from
- }
- }
-
- if (dotEdge.to instanceof Object) {
- to = dotEdge.to.nodes;
- }
- else {
- to = {
- id: dotEdge.to
- }
- }
-
- if (dotEdge.from instanceof Object && dotEdge.from.edges) {
- dotEdge.from.edges.forEach(function (subEdge) {
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
- }
-
- forEach2(from, to, function (from, to) {
- var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
-
- if (dotEdge.to instanceof Object && dotEdge.to.edges) {
- dotEdge.to.edges.forEach(function (subEdge) {
- var graphEdge = convertEdge(subEdge);
- graphData.edges.push(graphEdge);
- });
- }
- });
+ if (dotEdge.to instanceof Object) {
+ to = dotEdge.to.nodes;
+ }
+ else {
+ to = {
+ id: dotEdge.to
+ }
+ }
+
+ if (dotEdge.from instanceof Object && dotEdge.from.edges) {
+ dotEdge.from.edges.forEach(function (subEdge) {
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
}
- // copy the options
- if (dotData.attr) {
- graphData.options = dotData.attr;
+ forEach2(from, to, function (from, to) {
+ var subEdge = createEdge(graphData, from.id, to.id, dotEdge.type, dotEdge.attr);
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
+
+ if (dotEdge.to instanceof Object && dotEdge.to.edges) {
+ dotEdge.to.edges.forEach(function (subEdge) {
+ var graphEdge = convertEdge(subEdge);
+ graphData.edges.push(graphEdge);
+ });
}
+ });
+ }
- return graphData;
+ // copy the options
+ if (dotData.attr) {
+ graphData.options = dotData.attr;
}
- // exports
- exports.parseDOT = parseDOT;
- exports.DOTToGraph = DOTToGraph;
+ return graphData;
+ }
+
+ // exports
+ exports.parseDOT = parseDOT;
+ exports.DOTToGraph = DOTToGraph;
})(typeof util !== 'undefined' ? util : exports);
diff --git a/src/graph/shapes.js b/src/graph/shapes.js
index 93919306..ed80372b 100644
--- a/src/graph/shapes.js
+++ b/src/graph/shapes.js
@@ -3,223 +3,223 @@
*/
if (typeof CanvasRenderingContext2D !== 'undefined') {
- /**
- * Draw a circle shape
- */
- CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
- this.beginPath();
- this.arc(x, y, r, 0, 2*Math.PI, false);
- };
-
- /**
- * Draw a square shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r size, width and height of the square
- */
- CanvasRenderingContext2D.prototype.square = function(x, y, r) {
- this.beginPath();
- this.rect(x - r, y - r, r * 2, r * 2);
- };
-
- /**
- * Draw a triangle shape
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
-
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
-
- this.moveTo(x, y - (h - ir));
- this.lineTo(x + s2, y + ir);
- this.lineTo(x - s2, y + ir);
- this.lineTo(x, y - (h - ir));
- this.closePath();
- };
-
- /**
- * Draw a triangle shape in downward orientation
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius
- */
- CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
- // http://en.wikipedia.org/wiki/Equilateral_triangle
- this.beginPath();
-
- var s = r * 2;
- var s2 = s / 2;
- var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
- var h = Math.sqrt(s * s - s2 * s2); // height
-
- this.moveTo(x, y + (h - ir));
- this.lineTo(x + s2, y - ir);
- this.lineTo(x - s2, y - ir);
- this.lineTo(x, y + (h - ir));
- this.closePath();
- };
-
- /**
- * Draw a star shape, a star with 5 points
- * @param {Number} x horizontal center
- * @param {Number} y vertical center
- * @param {Number} r radius, half the length of the sides of the triangle
- */
- CanvasRenderingContext2D.prototype.star = function(x, y, r) {
- // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
- this.beginPath();
-
- for (var n = 0; n < 10; n++) {
- var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
- this.lineTo(
- x + radius * Math.sin(n * 2 * Math.PI / 10),
- y - radius * Math.cos(n * 2 * Math.PI / 10)
- );
- }
-
- this.closePath();
- };
-
- /**
- * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
- */
- CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
- var r2d = Math.PI/180;
- if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
- if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
- this.beginPath();
- this.moveTo(x+r,y);
- this.lineTo(x+w-r,y);
- this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
- this.lineTo(x+w,y+h-r);
- this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
- this.lineTo(x+r,y+h);
- this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
- this.lineTo(x,y+r);
- this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
- };
-
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
- var kappa = .5522848,
- ox = (w / 2) * kappa, // control point offset horizontal
- oy = (h / 2) * kappa, // control point offset vertical
- xe = x + w, // x-end
- ye = y + h, // y-end
- xm = x + w / 2, // x-middle
- ym = y + h / 2; // y-middle
-
- this.beginPath();
- this.moveTo(x, ym);
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
- };
-
-
-
- /**
- * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
- */
- CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
- var f = 1/3;
- var wEllipse = w;
- var hEllipse = h * f;
-
- var kappa = .5522848,
- ox = (wEllipse / 2) * kappa, // control point offset horizontal
- oy = (hEllipse / 2) * kappa, // control point offset vertical
- xe = x + wEllipse, // x-end
- ye = y + hEllipse, // y-end
- xm = x + wEllipse / 2, // x-middle
- ym = y + hEllipse / 2, // y-middle
- ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
- yeb = y + h; // y-end, bottom ellipse
-
- this.beginPath();
- this.moveTo(xe, ym);
-
- this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
- this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
-
- this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
- this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
-
- this.lineTo(xe, ymb);
-
- this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
- this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
-
- this.lineTo(x, ym);
- };
-
-
- /**
- * Draw an arrow point (no line)
- */
- CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
- // tail
- var xt = x - length * Math.cos(angle);
- var yt = y - length * Math.sin(angle);
-
- // inner tail
- // TODO: allow to customize different shapes
- var xi = x - length * 0.9 * Math.cos(angle);
- var yi = y - length * 0.9 * Math.sin(angle);
-
- // left
- var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
- var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
-
- // right
- var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
- var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
-
- this.beginPath();
- this.moveTo(x, y);
- this.lineTo(xl, yl);
- this.lineTo(xi, yi);
- this.lineTo(xr, yr);
- this.closePath();
- };
-
- /**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
- */
- CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
- if (!dashArray) dashArray=[10,5];
- if (dashLength==0) dashLength = 0.001; // Hack for Safari
- var dashCount = dashArray.length;
- this.moveTo(x, y);
- var dx = (x2-x), dy = (y2-y);
- var slope = dy/dx;
- var distRemaining = Math.sqrt( dx*dx + dy*dy );
- var dashIndex=0, draw=true;
- while (distRemaining>=0.1){
- var dashLength = dashArray[dashIndex++%dashCount];
- if (dashLength > distRemaining) dashLength = distRemaining;
- var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
- if (dx<0) xStep = -xStep;
- x += xStep;
- y += slope*xStep;
- this[draw ? 'lineTo' : 'moveTo'](x,y);
- distRemaining -= dashLength;
- draw = !draw;
- }
- };
-
- // TODO: add diamond shape
+ /**
+ * Draw a circle shape
+ */
+ CanvasRenderingContext2D.prototype.circle = function(x, y, r) {
+ this.beginPath();
+ this.arc(x, y, r, 0, 2*Math.PI, false);
+ };
+
+ /**
+ * Draw a square shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r size, width and height of the square
+ */
+ CanvasRenderingContext2D.prototype.square = function(x, y, r) {
+ this.beginPath();
+ this.rect(x - r, y - r, r * 2, r * 2);
+ };
+
+ /**
+ * Draw a triangle shape
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.triangle = function(x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
+
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
+
+ this.moveTo(x, y - (h - ir));
+ this.lineTo(x + s2, y + ir);
+ this.lineTo(x - s2, y + ir);
+ this.lineTo(x, y - (h - ir));
+ this.closePath();
+ };
+
+ /**
+ * Draw a triangle shape in downward orientation
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius
+ */
+ CanvasRenderingContext2D.prototype.triangleDown = function(x, y, r) {
+ // http://en.wikipedia.org/wiki/Equilateral_triangle
+ this.beginPath();
+
+ var s = r * 2;
+ var s2 = s / 2;
+ var ir = Math.sqrt(3) / 6 * s; // radius of inner circle
+ var h = Math.sqrt(s * s - s2 * s2); // height
+
+ this.moveTo(x, y + (h - ir));
+ this.lineTo(x + s2, y - ir);
+ this.lineTo(x - s2, y - ir);
+ this.lineTo(x, y + (h - ir));
+ this.closePath();
+ };
+
+ /**
+ * Draw a star shape, a star with 5 points
+ * @param {Number} x horizontal center
+ * @param {Number} y vertical center
+ * @param {Number} r radius, half the length of the sides of the triangle
+ */
+ CanvasRenderingContext2D.prototype.star = function(x, y, r) {
+ // http://www.html5canvastutorials.com/labs/html5-canvas-star-spinner/
+ this.beginPath();
+
+ for (var n = 0; n < 10; n++) {
+ var radius = (n % 2 === 0) ? r * 1.3 : r * 0.5;
+ this.lineTo(
+ x + radius * Math.sin(n * 2 * Math.PI / 10),
+ y - radius * Math.cos(n * 2 * Math.PI / 10)
+ );
+ }
+
+ this.closePath();
+ };
+
+ /**
+ * http://stackoverflow.com/questions/1255512/how-to-draw-a-rounded-rectangle-on-html-canvas
+ */
+ CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+ var r2d = Math.PI/180;
+ if( w - ( 2 * r ) < 0 ) { r = ( w / 2 ); } //ensure that the radius isn't too large for x
+ if( h - ( 2 * r ) < 0 ) { r = ( h / 2 ); } //ensure that the radius isn't too large for y
+ this.beginPath();
+ this.moveTo(x+r,y);
+ this.lineTo(x+w-r,y);
+ this.arc(x+w-r,y+r,r,r2d*270,r2d*360,false);
+ this.lineTo(x+w,y+h-r);
+ this.arc(x+w-r,y+h-r,r,0,r2d*90,false);
+ this.lineTo(x+r,y+h);
+ this.arc(x+r,y+h-r,r,r2d*90,r2d*180,false);
+ this.lineTo(x,y+r);
+ this.arc(x+r,y+r,r,r2d*180,r2d*270,false);
+ };
+
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.ellipse = function(x, y, w, h) {
+ var kappa = .5522848,
+ ox = (w / 2) * kappa, // control point offset horizontal
+ oy = (h / 2) * kappa, // control point offset vertical
+ xe = x + w, // x-end
+ ye = y + h, // y-end
+ xm = x + w / 2, // x-middle
+ ym = y + h / 2; // y-middle
+
+ this.beginPath();
+ this.moveTo(x, ym);
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+ };
+
+
+
+ /**
+ * http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
+ */
+ CanvasRenderingContext2D.prototype.database = function(x, y, w, h) {
+ var f = 1/3;
+ var wEllipse = w;
+ var hEllipse = h * f;
+
+ var kappa = .5522848,
+ ox = (wEllipse / 2) * kappa, // control point offset horizontal
+ oy = (hEllipse / 2) * kappa, // control point offset vertical
+ xe = x + wEllipse, // x-end
+ ye = y + hEllipse, // y-end
+ xm = x + wEllipse / 2, // x-middle
+ ym = y + hEllipse / 2, // y-middle
+ ymb = y + (h - hEllipse/2), // y-midlle, bottom ellipse
+ yeb = y + h; // y-end, bottom ellipse
+
+ this.beginPath();
+ this.moveTo(xe, ym);
+
+ this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
+ this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
+
+ this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
+ this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
+
+ this.lineTo(xe, ymb);
+
+ this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
+ this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+
+ this.lineTo(x, ym);
+ };
+
+
+ /**
+ * Draw an arrow point (no line)
+ */
+ CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
+ // tail
+ var xt = x - length * Math.cos(angle);
+ var yt = y - length * Math.sin(angle);
+
+ // inner tail
+ // TODO: allow to customize different shapes
+ var xi = x - length * 0.9 * Math.cos(angle);
+ var yi = y - length * 0.9 * Math.sin(angle);
+
+ // left
+ var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
+ var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
+
+ // right
+ var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
+ var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+
+ this.beginPath();
+ this.moveTo(x, y);
+ this.lineTo(xl, yl);
+ this.lineTo(xi, yi);
+ this.lineTo(xr, yr);
+ this.closePath();
+ };
+
+ /**
+ * Sets up the dashedLine functionality for drawing
+ * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ */
+ CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
+ if (!dashArray) dashArray=[10,5];
+ if (dashLength==0) dashLength = 0.001; // Hack for Safari
+ var dashCount = dashArray.length;
+ this.moveTo(x, y);
+ var dx = (x2-x), dy = (y2-y);
+ var slope = dy/dx;
+ var distRemaining = Math.sqrt( dx*dx + dy*dy );
+ var dashIndex=0, draw=true;
+ while (distRemaining>=0.1){
+ var dashLength = dashArray[dashIndex++%dashCount];
+ if (dashLength > distRemaining) dashLength = distRemaining;
+ var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
+ if (dx<0) xStep = -xStep;
+ x += xStep;
+ y += slope*xStep;
+ this[draw ? 'lineTo' : 'moveTo'](x,y);
+ distRemaining -= dashLength;
+ draw = !draw;
+ }
+ };
+
+ // TODO: add diamond shape
}
diff --git a/src/module/exports.js b/src/module/exports.js
index da62569f..e4c70cbf 100644
--- a/src/module/exports.js
+++ b/src/module/exports.js
@@ -2,67 +2,67 @@
* vis.js module exports
*/
var vis = {
- util: util,
- events: events,
+ util: util,
+ events: events,
- Controller: Controller,
- DataSet: DataSet,
- DataView: DataView,
- Range: Range,
- Stack: Stack,
- TimeStep: TimeStep,
- EventBus: EventBus,
+ Controller: Controller,
+ DataSet: DataSet,
+ DataView: DataView,
+ Range: Range,
+ Stack: Stack,
+ TimeStep: TimeStep,
+ EventBus: EventBus,
- components: {
- items: {
- Item: Item,
- ItemBox: ItemBox,
- ItemPoint: ItemPoint,
- ItemRange: ItemRange
- },
-
- Component: Component,
- Panel: Panel,
- RootPanel: RootPanel,
- ItemSet: ItemSet,
- TimeAxis: TimeAxis
+ components: {
+ items: {
+ Item: Item,
+ ItemBox: ItemBox,
+ ItemPoint: ItemPoint,
+ ItemRange: ItemRange
},
- graph: {
- Node: Node,
- Edge: Edge,
- Popup: Popup,
- Groups: Groups,
- Images: Images
- },
+ Component: Component,
+ Panel: Panel,
+ RootPanel: RootPanel,
+ ItemSet: ItemSet,
+ TimeAxis: TimeAxis
+ },
+
+ graph: {
+ Node: Node,
+ Edge: Edge,
+ Popup: Popup,
+ Groups: Groups,
+ Images: Images
+ },
- Timeline: Timeline,
- Graph: Graph
+ Timeline: Timeline,
+ Graph: Graph
};
/**
* CommonJS module exports
*/
if (typeof exports !== 'undefined') {
- exports = vis;
+ exports = vis;
}
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
- module.exports = vis;
+ module.exports = vis;
}
/**
* AMD module exports
*/
if (typeof(define) === 'function') {
- define(function () {
- return vis;
- });
+ define(function () {
+ return vis;
+ });
}
/**
* Window exports
*/
if (typeof window !== 'undefined') {
- // attach the module to the window, load as a regular javascript file
- window['vis'] = vis;
+ // attach the module to the window, load as a regular javascript file
+ window['vis'] = vis;
}
diff --git a/src/shim.js b/src/shim.js
index 3bb50d55..b7b71691 100644
--- a/src/shim.js
+++ b/src/shim.js
@@ -3,31 +3,31 @@
// it here in that case.
// http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/
if(!Array.prototype.indexOf) {
- Array.prototype.indexOf = function(obj){
- for(var i = 0; i < this.length; i++){
- if(this[i] == obj){
- return i;
- }
- }
- return -1;
- };
-
- try {
- console.log("Warning: Ancient browser detected. Please update your browser");
- }
- catch (err) {
+ Array.prototype.indexOf = function(obj){
+ for(var i = 0; i < this.length; i++){
+ if(this[i] == obj){
+ return i;
+ }
}
+ return -1;
+ };
+
+ try {
+ console.log("Warning: Ancient browser detected. Please update your browser");
+ }
+ catch (err) {
+ }
}
// Internet Explorer 8 and older does not support Array.forEach, so we define
// it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(fn, scope) {
- for(var i = 0, len = this.length; i < len; ++i) {
- fn.call(scope || this, this[i], i, this);
- }
+ Array.prototype.forEach = function(fn, scope) {
+ for(var i = 0, len = this.length; i < len; ++i) {
+ fn.call(scope || this, this[i], i, this);
}
+ }
}
// Internet Explorer 8 and older does not support Array.map, so we define it
@@ -36,106 +36,106 @@ if (!Array.prototype.forEach) {
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
- Array.prototype.map = function(callback, thisArg) {
+ Array.prototype.map = function(callback, thisArg) {
- var T, A, k;
+ var T, A, k;
- if (this == null) {
- throw new TypeError(" this is null or not defined");
- }
+ if (this == null) {
+ throw new TypeError(" this is null or not defined");
+ }
- // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
- var O = Object(this);
+ // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+ var O = Object(this);
- // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
- // 3. Let len be ToUint32(lenValue).
- var len = O.length >>> 0;
+ // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+ // 3. Let len be ToUint32(lenValue).
+ var len = O.length >>> 0;
- // 4. If IsCallable(callback) is false, throw a TypeError exception.
- // See: http://es5.github.com/#x9.11
- if (typeof callback !== "function") {
- throw new TypeError(callback + " is not a function");
- }
+ // 4. If IsCallable(callback) is false, throw a TypeError exception.
+ // See: http://es5.github.com/#x9.11
+ if (typeof callback !== "function") {
+ throw new TypeError(callback + " is not a function");
+ }
- // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
- if (thisArg) {
- T = thisArg;
- }
+ // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+ if (thisArg) {
+ T = thisArg;
+ }
- // 6. Let A be a new array created as if by the expression new Array(len) where Array is
- // the standard built-in constructor with that name and len is the value of len.
- A = new Array(len);
+ // 6. Let A be a new array created as if by the expression new Array(len) where Array is
+ // the standard built-in constructor with that name and len is the value of len.
+ A = new Array(len);
- // 7. Let k be 0
- k = 0;
+ // 7. Let k be 0
+ k = 0;
- // 8. Repeat, while k < len
- while(k < len) {
+ // 8. Repeat, while k < len
+ while(k < len) {
- var kValue, mappedValue;
+ var kValue, mappedValue;
- // a. Let Pk be ToString(k).
- // This is implicit for LHS operands of the in operator
- // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
- // This step can be combined with c
- // c. If kPresent is true, then
- if (k in O) {
+ // a. Let Pk be ToString(k).
+ // This is implicit for LHS operands of the in operator
+ // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+ // This step can be combined with c
+ // c. If kPresent is true, then
+ if (k in O) {
- // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
- kValue = O[ k ];
+ // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+ kValue = O[ k ];
- // ii. Let mappedValue be the result of calling the Call internal method of callback
- // with T as the this value and argument list containing kValue, k, and O.
- mappedValue = callback.call(T, kValue, k, O);
+ // ii. Let mappedValue be the result of calling the Call internal method of callback
+ // with T as the this value and argument list containing kValue, k, and O.
+ mappedValue = callback.call(T, kValue, k, O);
- // iii. Call the DefineOwnProperty internal method of A with arguments
- // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},
- // and false.
+ // iii. Call the DefineOwnProperty internal method of A with arguments
+ // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},
+ // and false.
- // In browsers that support Object.defineProperty, use the following:
- // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });
+ // In browsers that support Object.defineProperty, use the following:
+ // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });
- // For best browser support, use the following:
- A[ k ] = mappedValue;
- }
- // d. Increase k by 1.
- k++;
- }
+ // For best browser support, use the following:
+ A[ k ] = mappedValue;
+ }
+ // d. Increase k by 1.
+ k++;
+ }
- // 9. return A
- return A;
- };
+ // 9. return A
+ return A;
+ };
}
// Internet Explorer 8 and older does not support Array.filter, so we define it
// here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter
if (!Array.prototype.filter) {
- Array.prototype.filter = function(fun /*, thisp */) {
- "use strict";
+ Array.prototype.filter = function(fun /*, thisp */) {
+ "use strict";
- if (this == null) {
- throw new TypeError();
- }
+ if (this == null) {
+ throw new TypeError();
+ }
- var t = Object(this);
- var len = t.length >>> 0;
- if (typeof fun != "function") {
- throw new TypeError();
- }
+ var t = Object(this);
+ var len = t.length >>> 0;
+ if (typeof fun != "function") {
+ throw new TypeError();
+ }
- var res = [];
- var thisp = arguments[1];
- for (var i = 0; i < len; i++) {
- if (i in t) {
- var val = t[i]; // in case fun mutates this
- if (fun.call(thisp, val, i, t))
- res.push(val);
- }
- }
+ var res = [];
+ var thisp = arguments[1];
+ for (var i = 0; i < len; i++) {
+ if (i in t) {
+ var val = t[i]; // in case fun mutates this
+ if (fun.call(thisp, val, i, t))
+ res.push(val);
+ }
+ }
- return res;
- };
+ return res;
+ };
}
@@ -143,110 +143,110 @@ if (!Array.prototype.filter) {
// here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
- Object.keys = (function () {
- var hasOwnProperty = Object.prototype.hasOwnProperty,
- hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
- dontEnums = [
- 'toString',
- 'toLocaleString',
- 'valueOf',
- 'hasOwnProperty',
- 'isPrototypeOf',
- 'propertyIsEnumerable',
- 'constructor'
- ],
- dontEnumsLength = dontEnums.length;
-
- return function (obj) {
- if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) {
- throw new TypeError('Object.keys called on non-object');
- }
-
- var result = [];
-
- for (var prop in obj) {
- if (hasOwnProperty.call(obj, prop)) result.push(prop);
- }
-
- if (hasDontEnumBug) {
- for (var i=0; i < dontEnumsLength; i++) {
- if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
- }
- }
- return result;
+ Object.keys = (function () {
+ var hasOwnProperty = Object.prototype.hasOwnProperty,
+ hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
+ dontEnums = [
+ 'toString',
+ 'toLocaleString',
+ 'valueOf',
+ 'hasOwnProperty',
+ 'isPrototypeOf',
+ 'propertyIsEnumerable',
+ 'constructor'
+ ],
+ dontEnumsLength = dontEnums.length;
+
+ return function (obj) {
+ if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) {
+ throw new TypeError('Object.keys called on non-object');
+ }
+
+ var result = [];
+
+ for (var prop in obj) {
+ if (hasOwnProperty.call(obj, prop)) result.push(prop);
+ }
+
+ if (hasDontEnumBug) {
+ for (var i=0; i < dontEnumsLength; i++) {
+ if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
}
- })()
+ }
+ return result;
+ }
+ })()
}
// Internet Explorer 8 and older does not support Array.isArray,
// so we define it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/isArray
if(!Array.isArray) {
- Array.isArray = function (vArg) {
- return Object.prototype.toString.call(vArg) === "[object Array]";
- };
+ Array.isArray = function (vArg) {
+ return Object.prototype.toString.call(vArg) === "[object Array]";
+ };
}
// Internet Explorer 8 and older does not support Function.bind,
// so we define it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
if (!Function.prototype.bind) {
- Function.prototype.bind = function (oThis) {
- if (typeof this !== "function") {
- // closest thing possible to the ECMAScript 5 internal IsCallable function
- throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
- }
+ Function.prototype.bind = function (oThis) {
+ if (typeof this !== "function") {
+ // closest thing possible to the ECMAScript 5 internal IsCallable function
+ throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+ }
- var aArgs = Array.prototype.slice.call(arguments, 1),
- fToBind = this,
- fNOP = function () {},
- fBound = function () {
- return fToBind.apply(this instanceof fNOP && oThis
- ? this
- : oThis,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
-
- fNOP.prototype = this.prototype;
- fBound.prototype = new fNOP();
-
- return fBound;
- };
+ var aArgs = Array.prototype.slice.call(arguments, 1),
+ fToBind = this,
+ fNOP = function () {},
+ fBound = function () {
+ return fToBind.apply(this instanceof fNOP && oThis
+ ? this
+ : oThis,
+ aArgs.concat(Array.prototype.slice.call(arguments)));
+ };
+
+ fNOP.prototype = this.prototype;
+ fBound.prototype = new fNOP();
+
+ return fBound;
+ };
}
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create
if (!Object.create) {
- Object.create = function (o) {
- if (arguments.length > 1) {
- throw new Error('Object.create implementation only accepts the first parameter.');
- }
- function F() {}
- F.prototype = o;
- return new F();
- };
+ Object.create = function (o) {
+ if (arguments.length > 1) {
+ throw new Error('Object.create implementation only accepts the first parameter.');
+ }
+ function F() {}
+ F.prototype = o;
+ return new F();
+ };
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
if (!Function.prototype.bind) {
- Function.prototype.bind = function (oThis) {
- if (typeof this !== "function") {
- // closest thing possible to the ECMAScript 5 internal IsCallable function
- throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
- }
+ Function.prototype.bind = function (oThis) {
+ if (typeof this !== "function") {
+ // closest thing possible to the ECMAScript 5 internal IsCallable function
+ throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+ }
- var aArgs = Array.prototype.slice.call(arguments, 1),
- fToBind = this,
- fNOP = function () {},
- fBound = function () {
- return fToBind.apply(this instanceof fNOP && oThis
- ? this
- : oThis,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
-
- fNOP.prototype = this.prototype;
- fBound.prototype = new fNOP();
-
- return fBound;
- };
+ var aArgs = Array.prototype.slice.call(arguments, 1),
+ fToBind = this,
+ fNOP = function () {},
+ fBound = function () {
+ return fToBind.apply(this instanceof fNOP && oThis
+ ? this
+ : oThis,
+ aArgs.concat(Array.prototype.slice.call(arguments)));
+ };
+
+ fNOP.prototype = this.prototype;
+ fBound.prototype = new fNOP();
+
+ return fBound;
+ };
}
diff --git a/src/timeline/Controller.js b/src/timeline/Controller.js
index 7ec69a63..185d341b 100644
--- a/src/timeline/Controller.js
+++ b/src/timeline/Controller.js
@@ -4,11 +4,11 @@
* A Controller controls the reflows and repaints of all visual components
*/
function Controller () {
- this.id = util.randomUUID();
- this.components = {};
+ this.id = util.randomUUID();
+ this.components = {};
- this.repaintTimer = undefined;
- this.reflowTimer = undefined;
+ this.repaintTimer = undefined;
+ this.reflowTimer = undefined;
}
/**
@@ -16,18 +16,18 @@ function Controller () {
* @param {Component} component
*/
Controller.prototype.add = function add(component) {
- // validate the component
- if (component.id == undefined) {
- throw new Error('Component has no field id');
- }
- if (!(component instanceof Component) && !(component instanceof Controller)) {
- throw new TypeError('Component must be an instance of ' +
- 'prototype Component or Controller');
- }
-
- // add the component
- component.controller = this;
- this.components[component.id] = component;
+ // validate the component
+ if (component.id == undefined) {
+ throw new Error('Component has no field id');
+ }
+ if (!(component instanceof Component) && !(component instanceof Controller)) {
+ throw new TypeError('Component must be an instance of ' +
+ 'prototype Component or Controller');
+ }
+
+ // add the component
+ component.controller = this;
+ this.components[component.id] = component;
};
/**
@@ -35,18 +35,18 @@ Controller.prototype.add = function add(component) {
* @param {Component | String} component
*/
Controller.prototype.remove = function remove(component) {
- var id;
- for (id in this.components) {
- if (this.components.hasOwnProperty(id)) {
- if (id == component || this.components[id] == component) {
- break;
- }
- }
+ var id;
+ for (id in this.components) {
+ if (this.components.hasOwnProperty(id)) {
+ if (id == component || this.components[id] == component) {
+ break;
+ }
}
+ }
- if (id) {
- delete this.components[id];
- }
+ if (id) {
+ delete this.components[id];
+ }
};
/**
@@ -55,18 +55,18 @@ Controller.prototype.remove = function remove(component) {
* is false.
*/
Controller.prototype.requestReflow = function requestReflow(force) {
- if (force) {
- this.reflow();
- }
- else {
- if (!this.reflowTimer) {
- var me = this;
- this.reflowTimer = setTimeout(function () {
- me.reflowTimer = undefined;
- me.reflow();
- }, 0);
- }
+ if (force) {
+ this.reflow();
+ }
+ else {
+ if (!this.reflowTimer) {
+ var me = this;
+ this.reflowTimer = setTimeout(function () {
+ me.reflowTimer = undefined;
+ me.reflow();
+ }, 0);
}
+ }
};
/**
@@ -75,98 +75,98 @@ Controller.prototype.requestReflow = function requestReflow(force) {
* is false.
*/
Controller.prototype.requestRepaint = function requestRepaint(force) {
- if (force) {
- this.repaint();
- }
- else {
- if (!this.repaintTimer) {
- var me = this;
- this.repaintTimer = setTimeout(function () {
- me.repaintTimer = undefined;
- me.repaint();
- }, 0);
- }
+ if (force) {
+ this.repaint();
+ }
+ else {
+ if (!this.repaintTimer) {
+ var me = this;
+ this.repaintTimer = setTimeout(function () {
+ me.repaintTimer = undefined;
+ me.repaint();
+ }, 0);
}
+ }
};
/**
* Repaint all components
*/
Controller.prototype.repaint = function repaint() {
- var changed = false;
+ var changed = false;
- // cancel any running repaint request
- if (this.repaintTimer) {
- clearTimeout(this.repaintTimer);
- this.repaintTimer = undefined;
- }
-
- var done = {};
-
- function repaint(component, id) {
- if (!(id in done)) {
- // first repaint the components on which this component is dependent
- if (component.depends) {
- component.depends.forEach(function (dep) {
- repaint(dep, dep.id);
- });
- }
- if (component.parent) {
- repaint(component.parent, component.parent.id);
- }
-
- // repaint the component itself and mark as done
- changed = component.repaint() || changed;
- done[id] = true;
- }
+ // cancel any running repaint request
+ if (this.repaintTimer) {
+ clearTimeout(this.repaintTimer);
+ this.repaintTimer = undefined;
+ }
+
+ var done = {};
+
+ function repaint(component, id) {
+ if (!(id in done)) {
+ // first repaint the components on which this component is dependent
+ if (component.depends) {
+ component.depends.forEach(function (dep) {
+ repaint(dep, dep.id);
+ });
+ }
+ if (component.parent) {
+ repaint(component.parent, component.parent.id);
+ }
+
+ // repaint the component itself and mark as done
+ changed = component.repaint() || changed;
+ done[id] = true;
}
+ }
- util.forEach(this.components, repaint);
+ util.forEach(this.components, repaint);
- // immediately reflow when needed
- if (changed) {
- this.reflow();
- }
- // TODO: limit the number of nested reflows/repaints, prevent loop
+ // immediately reflow when needed
+ if (changed) {
+ this.reflow();
+ }
+ // TODO: limit the number of nested reflows/repaints, prevent loop
};
/**
* Reflow all components
*/
Controller.prototype.reflow = function reflow() {
- var resized = false;
+ var resized = false;
- // cancel any running repaint request
- if (this.reflowTimer) {
- clearTimeout(this.reflowTimer);
- this.reflowTimer = undefined;
- }
-
- var done = {};
-
- function reflow(component, id) {
- if (!(id in done)) {
- // first reflow the components on which this component is dependent
- if (component.depends) {
- component.depends.forEach(function (dep) {
- reflow(dep, dep.id);
- });
- }
- if (component.parent) {
- reflow(component.parent, component.parent.id);
- }
-
- // reflow the component itself and mark as done
- resized = component.reflow() || resized;
- done[id] = true;
- }
+ // cancel any running repaint request
+ if (this.reflowTimer) {
+ clearTimeout(this.reflowTimer);
+ this.reflowTimer = undefined;
+ }
+
+ var done = {};
+
+ function reflow(component, id) {
+ if (!(id in done)) {
+ // first reflow the components on which this component is dependent
+ if (component.depends) {
+ component.depends.forEach(function (dep) {
+ reflow(dep, dep.id);
+ });
+ }
+ if (component.parent) {
+ reflow(component.parent, component.parent.id);
+ }
+
+ // reflow the component itself and mark as done
+ resized = component.reflow() || resized;
+ done[id] = true;
}
+ }
- util.forEach(this.components, reflow);
+ util.forEach(this.components, reflow);
- // immediately repaint when needed
- if (resized) {
- this.repaint();
- }
- // TODO: limit the number of nested reflows/repaints, prevent loop
+ // immediately repaint when needed
+ if (resized) {
+ this.repaint();
+ }
+ // TODO: limit the number of nested reflows/repaints, prevent loop
};
diff --git a/src/timeline/Range.js b/src/timeline/Range.js
index 09a943dd..1ebe7a45 100644
--- a/src/timeline/Range.js
+++ b/src/timeline/Range.js
@@ -7,13 +7,13 @@
* @extends Controller
*/
function Range(options) {
- this.id = util.randomUUID();
- this.start = null; // Number
- this.end = null; // Number
+ this.id = util.randomUUID();
+ this.start = null; // Number
+ this.end = null; // Number
- this.options = options || {};
+ this.options = options || {};
- this.setOptions(options);
+ this.setOptions(options);
}
/**
@@ -27,12 +27,12 @@ function Range(options) {
* (end - start).
*/
Range.prototype.setOptions = function (options) {
- util.extend(this.options, options);
+ util.extend(this.options, options);
- // re-apply range with new limitations
- if (this.start !== null && this.end !== null) {
- this.setRange(this.start, this.end);
- }
+ // re-apply range with new limitations
+ if (this.start !== null && this.end !== null) {
+ this.setRange(this.start, this.end);
+ }
};
/**
@@ -40,10 +40,10 @@ Range.prototype.setOptions = function (options) {
* @param {String} direction 'horizontal' or 'vertical'
*/
function validateDirection (direction) {
- if (direction != 'horizontal' && direction != 'vertical') {
- throw new TypeError('Unknown direction "' + direction + '". ' +
- 'Choose "horizontal" or "vertical".');
- }
+ if (direction != 'horizontal' && direction != 'vertical') {
+ throw new TypeError('Unknown direction "' + direction + '". ' +
+ 'Choose "horizontal" or "vertical".');
+ }
}
/**
@@ -53,44 +53,44 @@ function validateDirection (direction) {
* @param {String} direction Available directions: 'horizontal', 'vertical'
*/
Range.prototype.subscribe = function (component, event, direction) {
- var me = this;
-
- if (event == 'move') {
- // drag start listener
- component.on('dragstart', function (event) {
- me._onDragStart(event, component);
- });
-
- // drag listener
- component.on('drag', function (event) {
- me._onDrag(event, component, direction);
- });
-
- // drag end listener
- component.on('dragend', function (event) {
- me._onDragEnd(event, component);
- });
- }
- else if (event == 'zoom') {
- // mouse wheel
- function mousewheel (event) {
- me._onMouseWheel(event, component, direction);
- }
- component.on('mousewheel', mousewheel);
- component.on('DOMMouseScroll', mousewheel); // For FF
-
- // pinch
- component.on('touch', function (event) {
- me._onTouch();
- });
- component.on('pinch', function (event) {
- me._onPinch(event, component, direction);
- });
- }
- else {
- throw new TypeError('Unknown event "' + event + '". ' +
- 'Choose "move" or "zoom".');
+ var me = this;
+
+ if (event == 'move') {
+ // drag start listener
+ component.on('dragstart', function (event) {
+ me._onDragStart(event, component);
+ });
+
+ // drag listener
+ component.on('drag', function (event) {
+ me._onDrag(event, component, direction);
+ });
+
+ // drag end listener
+ component.on('dragend', function (event) {
+ me._onDragEnd(event, component);
+ });
+ }
+ else if (event == 'zoom') {
+ // mouse wheel
+ function mousewheel (event) {
+ me._onMouseWheel(event, component, direction);
}
+ component.on('mousewheel', mousewheel);
+ component.on('DOMMouseScroll', mousewheel); // For FF
+
+ // pinch
+ component.on('touch', function (event) {
+ me._onTouch();
+ });
+ component.on('pinch', function (event) {
+ me._onPinch(event, component, direction);
+ });
+ }
+ else {
+ throw new TypeError('Unknown event "' + event + '". ' +
+ 'Choose "move" or "zoom".');
+ }
};
/**
@@ -100,7 +100,7 @@ Range.prototype.subscribe = function (component, event, direction) {
* as parameter.
*/
Range.prototype.on = function (event, callback) {
- events.addListener(this, event, callback);
+ events.addListener(this, event, callback);
};
/**
@@ -110,10 +110,10 @@ Range.prototype.on = function (event, callback) {
* @private
*/
Range.prototype._trigger = function (event) {
- events.trigger(this, event, {
- start: this.start,
- end: this.end
- });
+ events.trigger(this, event, {
+ start: this.start,
+ end: this.end
+ });
};
/**
@@ -122,11 +122,11 @@ Range.prototype._trigger = function (event) {
* @param {Number} [end]
*/
Range.prototype.setRange = function(start, end) {
- var changed = this._applyRange(start, end);
- if (changed) {
- this._trigger('rangechange');
- this._trigger('rangechanged');
- }
+ var changed = this._applyRange(start, end);
+ if (changed) {
+ this._trigger('rangechange');
+ this._trigger('rangechanged');
+ }
};
/**
@@ -139,105 +139,105 @@ Range.prototype.setRange = function(start, end) {
* @private
*/
Range.prototype._applyRange = function(start, end) {
- var newStart = (start != null) ? util.convert(start, 'Number') : this.start,
- newEnd = (end != null) ? util.convert(end, 'Number') : this.end,
- max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
- min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
- diff;
-
- // check for valid number
- if (isNaN(newStart) || newStart === null) {
- throw new Error('Invalid start "' + start + '"');
- }
- if (isNaN(newEnd) || newEnd === null) {
- throw new Error('Invalid end "' + end + '"');
+ var newStart = (start != null) ? util.convert(start, 'Number') : this.start,
+ newEnd = (end != null) ? util.convert(end, 'Number') : this.end,
+ max = (this.options.max != null) ? util.convert(this.options.max, 'Date').valueOf() : null,
+ min = (this.options.min != null) ? util.convert(this.options.min, 'Date').valueOf() : null,
+ diff;
+
+ // check for valid number
+ if (isNaN(newStart) || newStart === null) {
+ throw new Error('Invalid start "' + start + '"');
+ }
+ if (isNaN(newEnd) || newEnd === null) {
+ throw new Error('Invalid end "' + end + '"');
+ }
+
+ // prevent start < end
+ if (newEnd < newStart) {
+ newEnd = newStart;
+ }
+
+ // prevent start < min
+ if (min !== null) {
+ if (newStart < min) {
+ diff = (min - newStart);
+ newStart += diff;
+ newEnd += diff;
+
+ // prevent end > max
+ if (max != null) {
+ if (newEnd > max) {
+ newEnd = max;
+ }
+ }
}
+ }
- // prevent start < end
- if (newEnd < newStart) {
- newEnd = newStart;
- }
+ // prevent end > max
+ if (max !== null) {
+ if (newEnd > max) {
+ diff = (newEnd - max);
+ newStart -= diff;
+ newEnd -= diff;
- // prevent start < min
- if (min !== null) {
+ // prevent start < min
+ if (min != null) {
if (newStart < min) {
- diff = (min - newStart);
- newStart += diff;
- newEnd += diff;
-
- // prevent end > max
- if (max != null) {
- if (newEnd > max) {
- newEnd = max;
- }
- }
+ newStart = min;
}
+ }
}
+ }
- // prevent end > max
- if (max !== null) {
- if (newEnd > max) {
- diff = (newEnd - max);
- newStart -= diff;
- newEnd -= diff;
-
- // prevent start < min
- if (min != null) {
- if (newStart < min) {
- newStart = min;
- }
- }
- }
+ // prevent (end-start) < zoomMin
+ if (this.options.zoomMin !== null) {
+ var zoomMin = parseFloat(this.options.zoomMin);
+ if (zoomMin < 0) {
+ zoomMin = 0;
}
-
- // prevent (end-start) < zoomMin
- if (this.options.zoomMin !== null) {
- var zoomMin = parseFloat(this.options.zoomMin);
- if (zoomMin < 0) {
- zoomMin = 0;
- }
- if ((newEnd - newStart) < zoomMin) {
- if ((this.end - this.start) === zoomMin) {
- // ignore this action, we are already zoomed to the minimum
- newStart = this.start;
- newEnd = this.end;
- }
- else {
- // zoom to the minimum
- diff = (zoomMin - (newEnd - newStart));
- newStart -= diff / 2;
- newEnd += diff / 2;
- }
- }
+ if ((newEnd - newStart) < zoomMin) {
+ if ((this.end - this.start) === zoomMin) {
+ // ignore this action, we are already zoomed to the minimum
+ newStart = this.start;
+ newEnd = this.end;
+ }
+ else {
+ // zoom to the minimum
+ diff = (zoomMin - (newEnd - newStart));
+ newStart -= diff / 2;
+ newEnd += diff / 2;
+ }
}
+ }
- // prevent (end-start) > zoomMax
- if (this.options.zoomMax !== null) {
- var zoomMax = parseFloat(this.options.zoomMax);
- if (zoomMax < 0) {
- zoomMax = 0;
- }
- if ((newEnd - newStart) > zoomMax) {
- if ((this.end - this.start) === zoomMax) {
- // ignore this action, we are already zoomed to the maximum
- newStart = this.start;
- newEnd = this.end;
- }
- else {
- // zoom to the maximum
- diff = ((newEnd - newStart) - zoomMax);
- newStart += diff / 2;
- newEnd -= diff / 2;
- }
- }
+ // prevent (end-start) > zoomMax
+ if (this.options.zoomMax !== null) {
+ var zoomMax = parseFloat(this.options.zoomMax);
+ if (zoomMax < 0) {
+ zoomMax = 0;
}
+ if ((newEnd - newStart) > zoomMax) {
+ if ((this.end - this.start) === zoomMax) {
+ // ignore this action, we are already zoomed to the maximum
+ newStart = this.start;
+ newEnd = this.end;
+ }
+ else {
+ // zoom to the maximum
+ diff = ((newEnd - newStart) - zoomMax);
+ newStart += diff / 2;
+ newEnd -= diff / 2;
+ }
+ }
+ }
- var changed = (this.start != newStart || this.end != newEnd);
+ var changed = (this.start != newStart || this.end != newEnd);
- this.start = newStart;
- this.end = newEnd;
+ this.start = newStart;
+ this.end = newEnd;
- return changed;
+ return changed;
};
/**
@@ -245,10 +245,10 @@ Range.prototype._applyRange = function(start, end) {
* @return {Object} An object with start and end properties
*/
Range.prototype.getRange = function() {
- return {
- start: this.start,
- end: this.end
- };
+ return {
+ start: this.start,
+ end: this.end
+ };
};
/**
@@ -258,7 +258,7 @@ Range.prototype.getRange = function() {
* @returns {{offset: number, scale: number}} conversion
*/
Range.prototype.conversion = function (width) {
- return Range.conversion(this.start, this.end, width);
+ return Range.conversion(this.start, this.end, width);
};
/**
@@ -270,18 +270,18 @@ Range.prototype.conversion = function (width) {
* @returns {{offset: number, scale: number}} conversion
*/
Range.conversion = function (start, end, width) {
- if (width != 0 && (end - start != 0)) {
- return {
- offset: start,
- scale: width / (end - start)
- }
- }
- else {
- return {
- offset: 0,
- scale: 1
- };
+ if (width != 0 && (end - start != 0)) {
+ return {
+ offset: start,
+ scale: width / (end - start)
}
+ }
+ else {
+ return {
+ offset: 0,
+ scale: 1
+ };
+ }
};
// global (private) object to store drag params
@@ -294,17 +294,17 @@ var touchParams = {};
* @private
*/
Range.prototype._onDragStart = function(event, component) {
- // refuse to drag when we where pinching to prevent the timeline make a jump
- // when releasing the fingers in opposite order from the touch screen
- if (touchParams.pinching) return;
+ // refuse to drag when we where pinching to prevent the timeline make a jump
+ // when releasing the fingers in opposite order from the touch screen
+ if (touchParams.pinching) return;
- touchParams.start = this.start;
- touchParams.end = this.end;
+ touchParams.start = this.start;
+ touchParams.end = this.end;
- var frame = component.frame;
- if (frame) {
- frame.style.cursor = 'move';
- }
+ var frame = component.frame;
+ if (frame) {
+ frame.style.cursor = 'move';
+ }
};
/**
@@ -315,21 +315,21 @@ Range.prototype._onDragStart = function(event, component) {
* @private
*/
Range.prototype._onDrag = function (event, component, direction) {
- validateDirection(direction);
+ validateDirection(direction);
- // refuse to drag when we where pinching to prevent the timeline make a jump
- // when releasing the fingers in opposite order from the touch screen
- if (touchParams.pinching) return;
+ // refuse to drag when we where pinching to prevent the timeline make a jump
+ // when releasing the fingers in opposite order from the touch screen
+ if (touchParams.pinching) return;
- var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
- interval = (touchParams.end - touchParams.start),
- width = (direction == 'horizontal') ? component.width : component.height,
- diffRange = -delta / width * interval;
+ var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
+ interval = (touchParams.end - touchParams.start),
+ width = (direction == 'horizontal') ? component.width : component.height,
+ diffRange = -delta / width * interval;
- this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
+ this._applyRange(touchParams.start + diffRange, touchParams.end + diffRange);
- // fire a rangechange event
- this._trigger('rangechange');
+ // fire a rangechange event
+ this._trigger('rangechange');
};
/**
@@ -339,16 +339,16 @@ Range.prototype._onDrag = function (event, component, direction) {
* @private
*/
Range.prototype._onDragEnd = function (event, component) {
- // refuse to drag when we where pinching to prevent the timeline make a jump
- // when releasing the fingers in opposite order from the touch screen
- if (touchParams.pinching) return;
+ // refuse to drag when we where pinching to prevent the timeline make a jump
+ // when releasing the fingers in opposite order from the touch screen
+ if (touchParams.pinching) return;
- if (component.frame) {
- component.frame.style.cursor = 'auto';
- }
+ if (component.frame) {
+ component.frame.style.cursor = 'auto';
+ }
- // fire a rangechanged event
- this._trigger('rangechanged');
+ // fire a rangechanged event
+ this._trigger('rangechanged');
};
/**
@@ -360,45 +360,45 @@ Range.prototype._onDragEnd = function (event, component) {
* @private
*/
Range.prototype._onMouseWheel = function(event, component, direction) {
- validateDirection(direction);
-
- // retrieve delta
- var delta = 0;
- if (event.wheelDelta) { /* IE/Opera. */
- delta = event.wheelDelta / 120;
- } else if (event.detail) { /* Mozilla case. */
- // In Mozilla, sign of delta is different than in IE.
- // Also, delta is multiple of 3.
- delta = -event.detail / 3;
+ validateDirection(direction);
+
+ // retrieve delta
+ var delta = 0;
+ if (event.wheelDelta) { /* IE/Opera. */
+ delta = event.wheelDelta / 120;
+ } else if (event.detail) { /* Mozilla case. */
+ // In Mozilla, sign of delta is different than in IE.
+ // Also, delta is multiple of 3.
+ delta = -event.detail / 3;
+ }
+
+ // If delta is nonzero, handle it.
+ // Basically, delta is now positive if wheel was scrolled up,
+ // and negative, if wheel was scrolled down.
+ if (delta) {
+ // perform the zoom action. Delta is normally 1 or -1
+
+ // adjust a negative delta such that zooming in with delta 0.1
+ // equals zooming out with a delta -0.1
+ var scale;
+ if (delta < 0) {
+ scale = 1 - (delta / 5);
+ }
+ else {
+ scale = 1 / (1 + (delta / 5)) ;
}
- // If delta is nonzero, handle it.
- // Basically, delta is now positive if wheel was scrolled up,
- // and negative, if wheel was scrolled down.
- if (delta) {
- // perform the zoom action. Delta is normally 1 or -1
-
- // adjust a negative delta such that zooming in with delta 0.1
- // equals zooming out with a delta -0.1
- var scale;
- if (delta < 0) {
- scale = 1 - (delta / 5);
- }
- else {
- scale = 1 / (1 + (delta / 5)) ;
- }
-
- // calculate center, the date to zoom around
- var gesture = Hammer.event.collectEventData(this, 'scroll', event),
- pointer = getPointer(gesture.touches[0], component.frame),
- pointerDate = this._pointerToDate(component, direction, pointer);
+ // calculate center, the date to zoom around
+ var gesture = Hammer.event.collectEventData(this, 'scroll', event),
+ pointer = getPointer(gesture.touches[0], component.frame),
+ pointerDate = this._pointerToDate(component, direction, pointer);
- this.zoom(scale, pointerDate);
- }
+ this.zoom(scale, pointerDate);
+ }
- // Prevent default actions caused by mouse wheel
- // (else the page and timeline both zoom and scroll)
- util.preventDefault(event);
+ // Prevent default actions caused by mouse wheel
+ // (else the page and timeline both zoom and scroll)
+ util.preventDefault(event);
};
/**
@@ -406,10 +406,10 @@ Range.prototype._onMouseWheel = function(event, component, direction) {
* @private
*/
Range.prototype._onTouch = function () {
- touchParams.start = this.start;
- touchParams.end = this.end;
- touchParams.pinching = false;
- touchParams.center = null;
+ touchParams.start = this.start;
+ touchParams.end = this.end;
+ touchParams.pinching = false;
+ touchParams.center = null;
};
/**
@@ -420,26 +420,26 @@ Range.prototype._onTouch = function () {
* @private
*/
Range.prototype._onPinch = function (event, component, direction) {
- touchParams.pinching = true;
+ touchParams.pinching = true;
- if (event.gesture.touches.length > 1) {
- if (!touchParams.center) {
- touchParams.center = getPointer(event.gesture.center, component.frame);
- }
+ if (event.gesture.touches.length > 1) {
+ if (!touchParams.center) {
+ touchParams.center = getPointer(event.gesture.center, component.frame);
+ }
- var scale = 1 / event.gesture.scale,
- initDate = this._pointerToDate(component, direction, touchParams.center),
- center = getPointer(event.gesture.center, component.frame),
- date = this._pointerToDate(component, direction, center),
- delta = date - initDate; // TODO: utilize delta
+ var scale = 1 / event.gesture.scale,
+ initDate = this._pointerToDate(component, direction, touchParams.center),
+ center = getPointer(event.gesture.center, component.frame),
+ date = this._pointerToDate(component, direction, center),
+ delta = date - initDate; // TODO: utilize delta
- // calculate new start and end
- var newStart = parseInt(initDate + (touchParams.start - initDate) * scale);
- var newEnd = parseInt(initDate + (touchParams.end - initDate) * scale);
+ // calculate new start and end
+ var newStart = parseInt(initDate + (touchParams.start - initDate) * scale);
+ var newEnd = parseInt(initDate + (touchParams.end - initDate) * scale);
- // apply new range
- this.setRange(newStart, newEnd);
- }
+ // apply new range
+ this.setRange(newStart, newEnd);
+ }
};
/**
@@ -451,17 +451,17 @@ Range.prototype._onPinch = function (event, component, direction) {
* @private
*/
Range.prototype._pointerToDate = function (component, direction, pointer) {
- var conversion;
- if (direction == 'horizontal') {
- var width = component.width;
- conversion = this.conversion(width);
- return pointer.x / conversion.scale + conversion.offset;
- }
- else {
- var height = component.height;
- conversion = this.conversion(height);
- return pointer.y / conversion.scale + conversion.offset;
- }
+ var conversion;
+ if (direction == 'horizontal') {
+ var width = component.width;
+ conversion = this.conversion(width);
+ return pointer.x / conversion.scale + conversion.offset;
+ }
+ else {
+ var height = component.height;
+ conversion = this.conversion(height);
+ return pointer.y / conversion.scale + conversion.offset;
+ }
};
/**
@@ -472,10 +472,10 @@ Range.prototype._pointerToDate = function (component, direction, pointer) {
* @private
*/
function getPointer (touch, element) {
- return {
- x: touch.pageX - vis.util.getAbsoluteLeft(element),
- y: touch.pageY - vis.util.getAbsoluteTop(element)
- };
+ return {
+ x: touch.pageX - vis.util.getAbsoluteLeft(element),
+ y: touch.pageY - vis.util.getAbsoluteTop(element)
+ };
}
/**
@@ -489,16 +489,16 @@ function getPointer (touch, element) {
* be zoomed.
*/
Range.prototype.zoom = function(scale, center) {
- // if centerDate is not provided, take it half between start Date and end Date
- if (center == null) {
- center = (this.start + this.end) / 2;
- }
+ // if centerDate is not provided, take it half between start Date and end Date
+ if (center == null) {
+ center = (this.start + this.end) / 2;
+ }
- // calculate new start and end
- var newStart = center + (this.start - center) * scale;
- var newEnd = center + (this.end - center) * scale;
+ // calculate new start and end
+ var newStart = center + (this.start - center) * scale;
+ var newEnd = center + (this.end - center) * scale;
- this.setRange(newStart, newEnd);
+ this.setRange(newStart, newEnd);
};
/**
@@ -508,17 +508,17 @@ Range.prototype.zoom = function(scale, center) {
* negative value will move left
*/
Range.prototype.move = function(delta) {
- // zoom start Date and end Date relative to the centerDate
- var diff = (this.end - this.start);
+ // zoom start Date and end Date relative to the centerDate
+ var diff = (this.end - this.start);
- // apply new values
- var newStart = this.start + diff * delta;
- var newEnd = this.end + diff * delta;
+ // apply new values
+ var newStart = this.start + diff * delta;
+ var newEnd = this.end + diff * delta;
- // TODO: reckon with min and max range
+ // TODO: reckon with min and max range
- this.start = newStart;
- this.end = newEnd;
+ this.start = newStart;
+ this.end = newEnd;
};
/**
@@ -526,13 +526,13 @@ Range.prototype.move = function(delta) {
* @param {Number} moveTo New center point of the range
*/
Range.prototype.moveTo = function(moveTo) {
- var center = (this.start + this.end) / 2;
+ var center = (this.start + this.end) / 2;
- var diff = center - moveTo;
+ var diff = center - moveTo;
- // calculate new start and end
- var newStart = this.start - diff;
- var newEnd = this.end - diff;
+ // calculate new start and end
+ var newStart = this.start - diff;
+ var newEnd = this.end - diff;
- this.setRange(newStart, newEnd);
+ this.setRange(newStart, newEnd);
};
diff --git a/src/timeline/Stack.js b/src/timeline/Stack.js
index e714aee4..017c98ce 100644
--- a/src/timeline/Stack.js
+++ b/src/timeline/Stack.js
@@ -5,39 +5,39 @@
* @param {Object} [options]
*/
function Stack (parent, options) {
- this.parent = parent;
-
- this.options = options || {};
- this.defaultOptions = {
- order: function (a, b) {
- //return (b.width - a.width) || (a.left - b.left); // TODO: cleanup
- // Order: ranges over non-ranges, ranged ordered by width, and
- // lastly ordered by start.
- if (a instanceof ItemRange) {
- if (b instanceof ItemRange) {
- var aInt = (a.data.end - a.data.start);
- var bInt = (b.data.end - b.data.start);
- return (aInt - bInt) || (a.data.start - b.data.start);
- }
- else {
- return -1;
- }
- }
- else {
- if (b instanceof ItemRange) {
- return 1;
- }
- else {
- return (a.data.start - b.data.start);
- }
- }
- },
- margin: {
- item: 10
+ this.parent = parent;
+
+ this.options = options || {};
+ this.defaultOptions = {
+ order: function (a, b) {
+ //return (b.width - a.width) || (a.left - b.left); // TODO: cleanup
+ // Order: ranges over non-ranges, ranged ordered by width, and
+ // lastly ordered by start.
+ if (a instanceof ItemRange) {
+ if (b instanceof ItemRange) {
+ var aInt = (a.data.end - a.data.start);
+ var bInt = (b.data.end - b.data.start);
+ return (aInt - bInt) || (a.data.start - b.data.start);
}
- };
+ else {
+ return -1;
+ }
+ }
+ else {
+ if (b instanceof ItemRange) {
+ return 1;
+ }
+ else {
+ return (a.data.start - b.data.start);
+ }
+ }
+ },
+ margin: {
+ item: 10
+ }
+ };
- this.ordered = []; // ordered items
+ this.ordered = []; // ordered items
}
/**
@@ -48,9 +48,9 @@ function Stack (parent, options) {
* {function} order Stacking order
*/
Stack.prototype.setOptions = function setOptions (options) {
- util.extend(this.options, options);
+ util.extend(this.options, options);
- // TODO: register on data changes at the connected parent itemset, and update the changed part only and immediately
+ // TODO: register on data changes at the connected parent itemset, and update the changed part only and immediately
};
/**
@@ -58,8 +58,8 @@ Stack.prototype.setOptions = function setOptions (options) {
* distance equal to options.margin.item.
*/
Stack.prototype.update = function update() {
- this._order();
- this._stack();
+ this._order();
+ this._stack();
};
/**
@@ -70,31 +70,31 @@ Stack.prototype.update = function update() {
* @private
*/
Stack.prototype._order = function _order () {
- var items = this.parent.items;
- if (!items) {
- throw new Error('Cannot stack items: parent does not contain items');
+ var items = this.parent.items;
+ if (!items) {
+ throw new Error('Cannot stack items: parent does not contain items');
+ }
+
+ // TODO: store the sorted items, to have less work later on
+ var ordered = [];
+ var index = 0;
+ // items is a map (no array)
+ util.forEach(items, function (item) {
+ if (item.visible) {
+ ordered[index] = item;
+ index++;
}
+ });
- // TODO: store the sorted items, to have less work later on
- var ordered = [];
- var index = 0;
- // items is a map (no array)
- util.forEach(items, function (item) {
- if (item.visible) {
- ordered[index] = item;
- index++;
- }
- });
-
- //if a customer stack order function exists, use it.
- var order = this.options.order || this.defaultOptions.order;
- if (!(typeof order === 'function')) {
- throw new Error('Option order must be a function');
- }
+ //if a customer stack order function exists, use it.
+ var order = this.options.order || this.defaultOptions.order;
+ if (!(typeof order === 'function')) {
+ throw new Error('Option order must be a function');
+ }
- ordered.sort(order);
+ ordered.sort(order);
- this.ordered = ordered;
+ this.ordered = ordered;
};
/**
@@ -103,40 +103,40 @@ Stack.prototype._order = function _order () {
* @private
*/
Stack.prototype._stack = function _stack () {
- var i,
- iMax,
- ordered = this.ordered,
- options = this.options,
- orientation = options.orientation || this.defaultOptions.orientation,
- axisOnTop = (orientation == 'top'),
- margin;
-
- if (options.margin && options.margin.item !== undefined) {
- margin = options.margin.item;
- }
- else {
- margin = this.defaultOptions.margin.item
- }
-
- // calculate new, non-overlapping positions
- for (i = 0, iMax = ordered.length; i < iMax; i++) {
- var item = ordered[i];
- var collidingItem = null;
- do {
- // TODO: optimize checking for overlap. when there is a gap without items,
- // you only need to check for items from the next item on, not from zero
- collidingItem = this.checkOverlap(ordered, i, 0, i - 1, margin);
- if (collidingItem != null) {
- // There is a collision. Reposition the event above the colliding element
- if (axisOnTop) {
- item.top = collidingItem.top + collidingItem.height + margin;
- }
- else {
- item.top = collidingItem.top - item.height - margin;
- }
- }
- } while (collidingItem);
- }
+ var i,
+ iMax,
+ ordered = this.ordered,
+ options = this.options,
+ orientation = options.orientation || this.defaultOptions.orientation,
+ axisOnTop = (orientation == 'top'),
+ margin;
+
+ if (options.margin && options.margin.item !== undefined) {
+ margin = options.margin.item;
+ }
+ else {
+ margin = this.defaultOptions.margin.item
+ }
+
+ // calculate new, non-overlapping positions
+ for (i = 0, iMax = ordered.length; i < iMax; i++) {
+ var item = ordered[i];
+ var collidingItem = null;
+ do {
+ // TODO: optimize checking for overlap. when there is a gap without items,
+ // you only need to check for items from the next item on, not from zero
+ collidingItem = this.checkOverlap(ordered, i, 0, i - 1, margin);
+ if (collidingItem != null) {
+ // There is a collision. Reposition the event above the colliding element
+ if (axisOnTop) {
+ item.top = collidingItem.top + collidingItem.height + margin;
+ }
+ else {
+ item.top = collidingItem.top - item.height - margin;
+ }
+ }
+ } while (collidingItem);
+ }
};
/**
@@ -155,21 +155,21 @@ Stack.prototype._stack = function _stack () {
*/
Stack.prototype.checkOverlap = function checkOverlap (items, itemIndex,
itemStart, itemEnd, margin) {
- var collision = this.collision;
-
- // we loop from end to start, as we suppose that the chance of a
- // collision is larger for items at the end, so check these first.
- var a = items[itemIndex];
- for (var i = itemEnd; i >= itemStart; i--) {
- var b = items[i];
- if (collision(a, b, margin)) {
- if (i != itemIndex) {
- return b;
- }
- }
+ var collision = this.collision;
+
+ // we loop from end to start, as we suppose that the chance of a
+ // collision is larger for items at the end, so check these first.
+ var a = items[itemIndex];
+ for (var i = itemEnd; i >= itemStart; i--) {
+ var b = items[i];
+ if (collision(a, b, margin)) {
+ if (i != itemIndex) {
+ return b;
+ }
}
+ }
- return null;
+ return null;
};
/**
@@ -185,8 +185,8 @@ Stack.prototype.checkOverlap = function checkOverlap (items, itemIndex,
* @return {boolean} true if a and b collide, else false
*/
Stack.prototype.collision = function collision (a, b, margin) {
- return ((a.left - margin) < (b.left + b.getWidth()) &&
- (a.left + a.getWidth() + margin) > b.left &&
- (a.top - margin) < (b.top + b.height) &&
- (a.top + a.height + margin) > b.top);
+ return ((a.left - margin) < (b.left + b.getWidth()) &&
+ (a.left + a.getWidth() + margin) > b.left &&
+ (a.top - margin) < (b.top + b.height) &&
+ (a.top + a.height + margin) > b.top);
};
diff --git a/src/timeline/TimeStep.js b/src/timeline/TimeStep.js
index ccbc6c9f..fc56b518 100644
--- a/src/timeline/TimeStep.js
+++ b/src/timeline/TimeStep.js
@@ -25,29 +25,29 @@
* @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
*/
TimeStep = function(start, end, minimumStep) {
- // variables
- this.current = new Date();
- this._start = new Date();
- this._end = new Date();
+ // variables
+ this.current = new Date();
+ this._start = new Date();
+ this._end = new Date();
- this.autoScale = true;
- this.scale = TimeStep.SCALE.DAY;
- this.step = 1;
+ this.autoScale = true;
+ this.scale = TimeStep.SCALE.DAY;
+ this.step = 1;
- // initialize the range
- this.setRange(start, end, minimumStep);
+ // initialize the range
+ this.setRange(start, end, minimumStep);
};
/// enum scale
TimeStep.SCALE = {
- MILLISECOND: 1,
- SECOND: 2,
- MINUTE: 3,
- HOUR: 4,
- DAY: 5,
- WEEKDAY: 6,
- MONTH: 7,
- YEAR: 8
+ MILLISECOND: 1,
+ SECOND: 2,
+ MINUTE: 3,
+ HOUR: 4,
+ DAY: 5,
+ WEEKDAY: 6,
+ MONTH: 7,
+ YEAR: 8
};
@@ -62,24 +62,24 @@ TimeStep.SCALE = {
* @param {int} [minimumStep] Optional. Minimum step size in milliseconds
*/
TimeStep.prototype.setRange = function(start, end, minimumStep) {
- if (!(start instanceof Date) || !(end instanceof Date)) {
- throw "No legal start or end date in method setRange";
- }
+ if (!(start instanceof Date) || !(end instanceof Date)) {
+ throw "No legal start or end date in method setRange";
+ }
- this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
- this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
+ this._start = (start != undefined) ? new Date(start.valueOf()) : new Date();
+ this._end = (end != undefined) ? new Date(end.valueOf()) : new Date();
- if (this.autoScale) {
- this.setMinimumStep(minimumStep);
- }
+ if (this.autoScale) {
+ this.setMinimumStep(minimumStep);
+ }
};
/**
* Set the range iterator to the start date.
*/
TimeStep.prototype.first = function() {
- this.current = new Date(this._start.valueOf());
- this.roundToMinor();
+ this.current = new Date(this._start.valueOf());
+ this.roundToMinor();
};
/**
@@ -87,36 +87,36 @@ TimeStep.prototype.first = function() {
* This must be executed once when the current date is set to start Date
*/
TimeStep.prototype.roundToMinor = function() {
- // round to floor
- // IMPORTANT: we have no breaks in this switch! (this is no bug)
- //noinspection FallthroughInSwitchStatementJS
+ // round to floor
+ // IMPORTANT: we have no breaks in this switch! (this is no bug)
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.scale) {
+ case TimeStep.SCALE.YEAR:
+ this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
+ this.current.setMonth(0);
+ case TimeStep.SCALE.MONTH: this.current.setDate(1);
+ case TimeStep.SCALE.DAY: // intentional fall through
+ case TimeStep.SCALE.WEEKDAY: this.current.setHours(0);
+ case TimeStep.SCALE.HOUR: this.current.setMinutes(0);
+ case TimeStep.SCALE.MINUTE: this.current.setSeconds(0);
+ case TimeStep.SCALE.SECOND: this.current.setMilliseconds(0);
+ //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
+ }
+
+ if (this.step != 1) {
+ // round down to the first minor value that is a multiple of the current step size
switch (this.scale) {
- case TimeStep.SCALE.YEAR:
- this.current.setFullYear(this.step * Math.floor(this.current.getFullYear() / this.step));
- this.current.setMonth(0);
- case TimeStep.SCALE.MONTH: this.current.setDate(1);
- case TimeStep.SCALE.DAY: // intentional fall through
- case TimeStep.SCALE.WEEKDAY: this.current.setHours(0);
- case TimeStep.SCALE.HOUR: this.current.setMinutes(0);
- case TimeStep.SCALE.MINUTE: this.current.setSeconds(0);
- case TimeStep.SCALE.SECOND: this.current.setMilliseconds(0);
- //case TimeStep.SCALE.MILLISECOND: // nothing to do for milliseconds
- }
-
- if (this.step != 1) {
- // round down to the first minor value that is a multiple of the current step size
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND: this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step); break;
- case TimeStep.SCALE.SECOND: this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
- case TimeStep.SCALE.MINUTE: this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
- case TimeStep.SCALE.HOUR: this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
- case TimeStep.SCALE.WEEKDAY: // intentional fall through
- case TimeStep.SCALE.DAY: this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
- case TimeStep.SCALE.MONTH: this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step); break;
- case TimeStep.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
- default: break;
- }
+ case TimeStep.SCALE.MILLISECOND: this.current.setMilliseconds(this.current.getMilliseconds() - this.current.getMilliseconds() % this.step); break;
+ case TimeStep.SCALE.SECOND: this.current.setSeconds(this.current.getSeconds() - this.current.getSeconds() % this.step); break;
+ case TimeStep.SCALE.MINUTE: this.current.setMinutes(this.current.getMinutes() - this.current.getMinutes() % this.step); break;
+ case TimeStep.SCALE.HOUR: this.current.setHours(this.current.getHours() - this.current.getHours() % this.step); break;
+ case TimeStep.SCALE.WEEKDAY: // intentional fall through
+ case TimeStep.SCALE.DAY: this.current.setDate((this.current.getDate()-1) - (this.current.getDate()-1) % this.step + 1); break;
+ case TimeStep.SCALE.MONTH: this.current.setMonth(this.current.getMonth() - this.current.getMonth() % this.step); break;
+ case TimeStep.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() - this.current.getFullYear() % this.step); break;
+ default: break;
}
+ }
};
/**
@@ -124,70 +124,70 @@ TimeStep.prototype.roundToMinor = function() {
* @return {boolean} true if the current date has not passed the end date
*/
TimeStep.prototype.hasNext = function () {
- return (this.current.valueOf() <= this._end.valueOf());
+ return (this.current.valueOf() <= this._end.valueOf());
};
/**
* Do the next step
*/
TimeStep.prototype.next = function() {
- var prev = this.current.valueOf();
-
- // Two cases, needed to prevent issues with switching daylight savings
- // (end of March and end of October)
- if (this.current.getMonth() < 6) {
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND:
-
- this.current = new Date(this.current.valueOf() + this.step); break;
- case TimeStep.SCALE.SECOND: this.current = new Date(this.current.valueOf() + this.step * 1000); break;
- case TimeStep.SCALE.MINUTE: this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
- case TimeStep.SCALE.HOUR:
- this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
- // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
- var h = this.current.getHours();
- this.current.setHours(h - (h % this.step));
- break;
- case TimeStep.SCALE.WEEKDAY: // intentional fall through
- case TimeStep.SCALE.DAY: this.current.setDate(this.current.getDate() + this.step); break;
- case TimeStep.SCALE.MONTH: this.current.setMonth(this.current.getMonth() + this.step); break;
- case TimeStep.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() + this.step); break;
- default: break;
- }
+ var prev = this.current.valueOf();
+
+ // Two cases, needed to prevent issues with switching daylight savings
+ // (end of March and end of October)
+ if (this.current.getMonth() < 6) {
+ switch (this.scale) {
+ case TimeStep.SCALE.MILLISECOND:
+
+ this.current = new Date(this.current.valueOf() + this.step); break;
+ case TimeStep.SCALE.SECOND: this.current = new Date(this.current.valueOf() + this.step * 1000); break;
+ case TimeStep.SCALE.MINUTE: this.current = new Date(this.current.valueOf() + this.step * 1000 * 60); break;
+ case TimeStep.SCALE.HOUR:
+ this.current = new Date(this.current.valueOf() + this.step * 1000 * 60 * 60);
+ // in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)
+ var h = this.current.getHours();
+ this.current.setHours(h - (h % this.step));
+ break;
+ case TimeStep.SCALE.WEEKDAY: // intentional fall through
+ case TimeStep.SCALE.DAY: this.current.setDate(this.current.getDate() + this.step); break;
+ case TimeStep.SCALE.MONTH: this.current.setMonth(this.current.getMonth() + this.step); break;
+ case TimeStep.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() + this.step); break;
+ default: break;
}
- else {
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND: this.current = new Date(this.current.valueOf() + this.step); break;
- case TimeStep.SCALE.SECOND: this.current.setSeconds(this.current.getSeconds() + this.step); break;
- case TimeStep.SCALE.MINUTE: this.current.setMinutes(this.current.getMinutes() + this.step); break;
- case TimeStep.SCALE.HOUR: this.current.setHours(this.current.getHours() + this.step); break;
- case TimeStep.SCALE.WEEKDAY: // intentional fall through
- case TimeStep.SCALE.DAY: this.current.setDate(this.current.getDate() + this.step); break;
- case TimeStep.SCALE.MONTH: this.current.setMonth(this.current.getMonth() + this.step); break;
- case TimeStep.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() + this.step); break;
- default: break;
- }
+ }
+ else {
+ switch (this.scale) {
+ case TimeStep.SCALE.MILLISECOND: this.current = new Date(this.current.valueOf() + this.step); break;
+ case TimeStep.SCALE.SECOND: this.current.setSeconds(this.current.getSeconds() + this.step); break;
+ case TimeStep.SCALE.MINUTE: this.current.setMinutes(this.current.getMinutes() + this.step); break;
+ case TimeStep.SCALE.HOUR: this.current.setHours(this.current.getHours() + this.step); break;
+ case TimeStep.SCALE.WEEKDAY: // intentional fall through
+ case TimeStep.SCALE.DAY: this.current.setDate(this.current.getDate() + this.step); break;
+ case TimeStep.SCALE.MONTH: this.current.setMonth(this.current.getMonth() + this.step); break;
+ case TimeStep.SCALE.YEAR: this.current.setFullYear(this.current.getFullYear() + this.step); break;
+ default: break;
}
+ }
- if (this.step != 1) {
- // round down to the correct major value
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND: if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0); break;
- case TimeStep.SCALE.SECOND: if(this.current.getSeconds() < this.step) this.current.setSeconds(0); break;
- case TimeStep.SCALE.MINUTE: if(this.current.getMinutes() < this.step) this.current.setMinutes(0); break;
- case TimeStep.SCALE.HOUR: if(this.current.getHours() < this.step) this.current.setHours(0); break;
- case TimeStep.SCALE.WEEKDAY: // intentional fall through
- case TimeStep.SCALE.DAY: if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
- case TimeStep.SCALE.MONTH: if(this.current.getMonth() < this.step) this.current.setMonth(0); break;
- case TimeStep.SCALE.YEAR: break; // nothing to do for year
- default: break;
- }
+ if (this.step != 1) {
+ // round down to the correct major value
+ switch (this.scale) {
+ case TimeStep.SCALE.MILLISECOND: if(this.current.getMilliseconds() < this.step) this.current.setMilliseconds(0); break;
+ case TimeStep.SCALE.SECOND: if(this.current.getSeconds() < this.step) this.current.setSeconds(0); break;
+ case TimeStep.SCALE.MINUTE: if(this.current.getMinutes() < this.step) this.current.setMinutes(0); break;
+ case TimeStep.SCALE.HOUR: if(this.current.getHours() < this.step) this.current.setHours(0); break;
+ case TimeStep.SCALE.WEEKDAY: // intentional fall through
+ case TimeStep.SCALE.DAY: if(this.current.getDate() < this.step+1) this.current.setDate(1); break;
+ case TimeStep.SCALE.MONTH: if(this.current.getMonth() < this.step) this.current.setMonth(0); break;
+ case TimeStep.SCALE.YEAR: break; // nothing to do for year
+ default: break;
}
+ }
- // safety mechanism: if current time is still unchanged, move to the end
- if (this.current.valueOf() == prev) {
- this.current = new Date(this._end.valueOf());
- }
+ // safety mechanism: if current time is still unchanged, move to the end
+ if (this.current.valueOf() == prev) {
+ this.current = new Date(this._end.valueOf());
+ }
};
@@ -196,7 +196,7 @@ TimeStep.prototype.next = function() {
* @return {Date} current The current date
*/
TimeStep.prototype.getCurrent = function() {
- return this.current;
+ return this.current;
};
/**
@@ -213,13 +213,13 @@ TimeStep.prototype.getCurrent = function() {
* example 1, 2, 5, or 10.
*/
TimeStep.prototype.setScale = function(newScale, newStep) {
- this.scale = newScale;
+ this.scale = newScale;
- if (newStep > 0) {
- this.step = newStep;
- }
+ if (newStep > 0) {
+ this.step = newStep;
+ }
- this.autoScale = false;
+ this.autoScale = false;
};
/**
@@ -227,7 +227,7 @@ TimeStep.prototype.setScale = function(newScale, newStep) {
* @param {boolean} enable If true, autoascaling is set true
*/
TimeStep.prototype.setAutoScale = function (enable) {
- this.autoScale = enable;
+ this.autoScale = enable;
};
@@ -236,48 +236,48 @@ TimeStep.prototype.setAutoScale = function (enable) {
* @param {Number} [minimumStep] The minimum step size in milliseconds
*/
TimeStep.prototype.setMinimumStep = function(minimumStep) {
- if (minimumStep == undefined) {
- return;
- }
-
- var stepYear = (1000 * 60 * 60 * 24 * 30 * 12);
- var stepMonth = (1000 * 60 * 60 * 24 * 30);
- var stepDay = (1000 * 60 * 60 * 24);
- var stepHour = (1000 * 60 * 60);
- var stepMinute = (1000 * 60);
- var stepSecond = (1000);
- var stepMillisecond= (1);
-
- // find the smallest step that is larger than the provided minimumStep
- if (stepYear*1000 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 1000;}
- if (stepYear*500 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 500;}
- if (stepYear*100 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 100;}
- if (stepYear*50 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 50;}
- if (stepYear*10 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 10;}
- if (stepYear*5 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 5;}
- if (stepYear > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 1;}
- if (stepMonth*3 > minimumStep) {this.scale = TimeStep.SCALE.MONTH; this.step = 3;}
- if (stepMonth > minimumStep) {this.scale = TimeStep.SCALE.MONTH; this.step = 1;}
- if (stepDay*5 > minimumStep) {this.scale = TimeStep.SCALE.DAY; this.step = 5;}
- if (stepDay*2 > minimumStep) {this.scale = TimeStep.SCALE.DAY; this.step = 2;}
- if (stepDay > minimumStep) {this.scale = TimeStep.SCALE.DAY; this.step = 1;}
- if (stepDay/2 > minimumStep) {this.scale = TimeStep.SCALE.WEEKDAY; this.step = 1;}
- if (stepHour*4 > minimumStep) {this.scale = TimeStep.SCALE.HOUR; this.step = 4;}
- if (stepHour > minimumStep) {this.scale = TimeStep.SCALE.HOUR; this.step = 1;}
- if (stepMinute*15 > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 15;}
- if (stepMinute*10 > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 10;}
- if (stepMinute*5 > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 5;}
- if (stepMinute > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 1;}
- if (stepSecond*15 > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 15;}
- if (stepSecond*10 > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 10;}
- if (stepSecond*5 > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 5;}
- if (stepSecond > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 1;}
- if (stepMillisecond*200 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
- if (stepMillisecond*100 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
- if (stepMillisecond*50 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
- if (stepMillisecond*10 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
- if (stepMillisecond*5 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
- if (stepMillisecond > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
+ if (minimumStep == undefined) {
+ return;
+ }
+
+ var stepYear = (1000 * 60 * 60 * 24 * 30 * 12);
+ var stepMonth = (1000 * 60 * 60 * 24 * 30);
+ var stepDay = (1000 * 60 * 60 * 24);
+ var stepHour = (1000 * 60 * 60);
+ var stepMinute = (1000 * 60);
+ var stepSecond = (1000);
+ var stepMillisecond= (1);
+
+ // find the smallest step that is larger than the provided minimumStep
+ if (stepYear*1000 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 1000;}
+ if (stepYear*500 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 500;}
+ if (stepYear*100 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 100;}
+ if (stepYear*50 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 50;}
+ if (stepYear*10 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 10;}
+ if (stepYear*5 > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 5;}
+ if (stepYear > minimumStep) {this.scale = TimeStep.SCALE.YEAR; this.step = 1;}
+ if (stepMonth*3 > minimumStep) {this.scale = TimeStep.SCALE.MONTH; this.step = 3;}
+ if (stepMonth > minimumStep) {this.scale = TimeStep.SCALE.MONTH; this.step = 1;}
+ if (stepDay*5 > minimumStep) {this.scale = TimeStep.SCALE.DAY; this.step = 5;}
+ if (stepDay*2 > minimumStep) {this.scale = TimeStep.SCALE.DAY; this.step = 2;}
+ if (stepDay > minimumStep) {this.scale = TimeStep.SCALE.DAY; this.step = 1;}
+ if (stepDay/2 > minimumStep) {this.scale = TimeStep.SCALE.WEEKDAY; this.step = 1;}
+ if (stepHour*4 > minimumStep) {this.scale = TimeStep.SCALE.HOUR; this.step = 4;}
+ if (stepHour > minimumStep) {this.scale = TimeStep.SCALE.HOUR; this.step = 1;}
+ if (stepMinute*15 > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 15;}
+ if (stepMinute*10 > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 10;}
+ if (stepMinute*5 > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 5;}
+ if (stepMinute > minimumStep) {this.scale = TimeStep.SCALE.MINUTE; this.step = 1;}
+ if (stepSecond*15 > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 15;}
+ if (stepSecond*10 > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 10;}
+ if (stepSecond*5 > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 5;}
+ if (stepSecond > minimumStep) {this.scale = TimeStep.SCALE.SECOND; this.step = 1;}
+ if (stepMillisecond*200 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 200;}
+ if (stepMillisecond*100 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 100;}
+ if (stepMillisecond*50 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 50;}
+ if (stepMillisecond*10 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 10;}
+ if (stepMillisecond*5 > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 5;}
+ if (stepMillisecond > minimumStep) {this.scale = TimeStep.SCALE.MILLISECOND; this.step = 1;}
};
/**
@@ -286,87 +286,87 @@ TimeStep.prototype.setMinimumStep = function(minimumStep) {
* @param {Date} date the date to be snapped
*/
TimeStep.prototype.snap = function(date) {
- if (this.scale == TimeStep.SCALE.YEAR) {
- var year = date.getFullYear() + Math.round(date.getMonth() / 12);
- date.setFullYear(Math.round(year / this.step) * this.step);
- date.setMonth(0);
- date.setDate(0);
- date.setHours(0);
- date.setMinutes(0);
- date.setSeconds(0);
- date.setMilliseconds(0);
+ if (this.scale == TimeStep.SCALE.YEAR) {
+ var year = date.getFullYear() + Math.round(date.getMonth() / 12);
+ date.setFullYear(Math.round(year / this.step) * this.step);
+ date.setMonth(0);
+ date.setDate(0);
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+ }
+ else if (this.scale == TimeStep.SCALE.MONTH) {
+ if (date.getDate() > 15) {
+ date.setDate(1);
+ date.setMonth(date.getMonth() + 1);
+ // important: first set Date to 1, after that change the month.
}
- else if (this.scale == TimeStep.SCALE.MONTH) {
- if (date.getDate() > 15) {
- date.setDate(1);
- date.setMonth(date.getMonth() + 1);
- // important: first set Date to 1, after that change the month.
- }
- else {
- date.setDate(1);
- }
-
- date.setHours(0);
- date.setMinutes(0);
- date.setSeconds(0);
- date.setMilliseconds(0);
+ else {
+ date.setDate(1);
}
- else if (this.scale == TimeStep.SCALE.DAY ||
- this.scale == TimeStep.SCALE.WEEKDAY) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 5:
- case 2:
- date.setHours(Math.round(date.getHours() / 24) * 24); break;
- default:
- date.setHours(Math.round(date.getHours() / 12) * 12); break;
- }
- date.setMinutes(0);
- date.setSeconds(0);
- date.setMilliseconds(0);
+
+ date.setHours(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+ }
+ else if (this.scale == TimeStep.SCALE.DAY ||
+ this.scale == TimeStep.SCALE.WEEKDAY) {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 5:
+ case 2:
+ date.setHours(Math.round(date.getHours() / 24) * 24); break;
+ default:
+ date.setHours(Math.round(date.getHours() / 12) * 12); break;
}
- else if (this.scale == TimeStep.SCALE.HOUR) {
- switch (this.step) {
- case 4:
- date.setMinutes(Math.round(date.getMinutes() / 60) * 60); break;
- default:
- date.setMinutes(Math.round(date.getMinutes() / 30) * 30); break;
- }
- date.setSeconds(0);
- date.setMilliseconds(0);
- } else if (this.scale == TimeStep.SCALE.MINUTE) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 15:
- case 10:
- date.setMinutes(Math.round(date.getMinutes() / 5) * 5);
- date.setSeconds(0);
- break;
- case 5:
- date.setSeconds(Math.round(date.getSeconds() / 60) * 60); break;
- default:
- date.setSeconds(Math.round(date.getSeconds() / 30) * 30); break;
- }
- date.setMilliseconds(0);
+ date.setMinutes(0);
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+ }
+ else if (this.scale == TimeStep.SCALE.HOUR) {
+ switch (this.step) {
+ case 4:
+ date.setMinutes(Math.round(date.getMinutes() / 60) * 60); break;
+ default:
+ date.setMinutes(Math.round(date.getMinutes() / 30) * 30); break;
}
- else if (this.scale == TimeStep.SCALE.SECOND) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 15:
- case 10:
- date.setSeconds(Math.round(date.getSeconds() / 5) * 5);
- date.setMilliseconds(0);
- break;
- case 5:
- date.setMilliseconds(Math.round(date.getMilliseconds() / 1000) * 1000); break;
- default:
- date.setMilliseconds(Math.round(date.getMilliseconds() / 500) * 500); break;
- }
+ date.setSeconds(0);
+ date.setMilliseconds(0);
+ } else if (this.scale == TimeStep.SCALE.MINUTE) {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 15:
+ case 10:
+ date.setMinutes(Math.round(date.getMinutes() / 5) * 5);
+ date.setSeconds(0);
+ break;
+ case 5:
+ date.setSeconds(Math.round(date.getSeconds() / 60) * 60); break;
+ default:
+ date.setSeconds(Math.round(date.getSeconds() / 30) * 30); break;
}
- else if (this.scale == TimeStep.SCALE.MILLISECOND) {
- var step = this.step > 5 ? this.step / 2 : 1;
- date.setMilliseconds(Math.round(date.getMilliseconds() / step) * step);
+ date.setMilliseconds(0);
+ }
+ else if (this.scale == TimeStep.SCALE.SECOND) {
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.step) {
+ case 15:
+ case 10:
+ date.setSeconds(Math.round(date.getSeconds() / 5) * 5);
+ date.setMilliseconds(0);
+ break;
+ case 5:
+ date.setMilliseconds(Math.round(date.getMilliseconds() / 1000) * 1000); break;
+ default:
+ date.setMilliseconds(Math.round(date.getMilliseconds() / 500) * 500); break;
}
+ }
+ else if (this.scale == TimeStep.SCALE.MILLISECOND) {
+ var step = this.step > 5 ? this.step / 2 : 1;
+ date.setMilliseconds(Math.round(date.getMilliseconds() / step) * step);
+ }
};
/**
@@ -375,26 +375,26 @@ TimeStep.prototype.snap = function(date) {
* @return {boolean} true if current date is major, else false.
*/
TimeStep.prototype.isMajor = function() {
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND:
- return (this.current.getMilliseconds() == 0);
- case TimeStep.SCALE.SECOND:
- return (this.current.getSeconds() == 0);
- case TimeStep.SCALE.MINUTE:
- return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
- // Note: this is no bug. Major label is equal for both minute and hour scale
- case TimeStep.SCALE.HOUR:
- return (this.current.getHours() == 0);
- case TimeStep.SCALE.WEEKDAY: // intentional fall through
- case TimeStep.SCALE.DAY:
- return (this.current.getDate() == 1);
- case TimeStep.SCALE.MONTH:
- return (this.current.getMonth() == 0);
- case TimeStep.SCALE.YEAR:
- return false;
- default:
- return false;
- }
+ switch (this.scale) {
+ case TimeStep.SCALE.MILLISECOND:
+ return (this.current.getMilliseconds() == 0);
+ case TimeStep.SCALE.SECOND:
+ return (this.current.getSeconds() == 0);
+ case TimeStep.SCALE.MINUTE:
+ return (this.current.getHours() == 0) && (this.current.getMinutes() == 0);
+ // Note: this is no bug. Major label is equal for both minute and hour scale
+ case TimeStep.SCALE.HOUR:
+ return (this.current.getHours() == 0);
+ case TimeStep.SCALE.WEEKDAY: // intentional fall through
+ case TimeStep.SCALE.DAY:
+ return (this.current.getDate() == 1);
+ case TimeStep.SCALE.MONTH:
+ return (this.current.getMonth() == 0);
+ case TimeStep.SCALE.YEAR:
+ return false;
+ default:
+ return false;
+ }
};
@@ -405,21 +405,21 @@ TimeStep.prototype.isMajor = function() {
* @param {Date} [date] custom date. if not provided, current date is taken
*/
TimeStep.prototype.getLabelMinor = function(date) {
- if (date == undefined) {
- date = this.current;
- }
-
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND: return moment(date).format('SSS');
- case TimeStep.SCALE.SECOND: return moment(date).format('s');
- case TimeStep.SCALE.MINUTE: return moment(date).format('HH:mm');
- case TimeStep.SCALE.HOUR: return moment(date).format('HH:mm');
- case TimeStep.SCALE.WEEKDAY: return moment(date).format('ddd D');
- case TimeStep.SCALE.DAY: return moment(date).format('D');
- case TimeStep.SCALE.MONTH: return moment(date).format('MMM');
- case TimeStep.SCALE.YEAR: return moment(date).format('YYYY');
- default: return '';
- }
+ if (date == undefined) {
+ date = this.current;
+ }
+
+ switch (this.scale) {
+ case TimeStep.SCALE.MILLISECOND: return moment(date).format('SSS');
+ case TimeStep.SCALE.SECOND: return moment(date).format('s');
+ case TimeStep.SCALE.MINUTE: return moment(date).format('HH:mm');
+ case TimeStep.SCALE.HOUR: return moment(date).format('HH:mm');
+ case TimeStep.SCALE.WEEKDAY: return moment(date).format('ddd D');
+ case TimeStep.SCALE.DAY: return moment(date).format('D');
+ case TimeStep.SCALE.MONTH: return moment(date).format('MMM');
+ case TimeStep.SCALE.YEAR: return moment(date).format('YYYY');
+ default: return '';
+ }
};
@@ -430,20 +430,20 @@ TimeStep.prototype.getLabelMinor = function(date) {
* @param {Date} [date] custom date. if not provided, current date is taken
*/
TimeStep.prototype.getLabelMajor = function(date) {
- if (date == undefined) {
- date = this.current;
- }
-
- //noinspection FallthroughInSwitchStatementJS
- switch (this.scale) {
- case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
- case TimeStep.SCALE.SECOND: return moment(date).format('D MMMM HH:mm');
- case TimeStep.SCALE.MINUTE:
- case TimeStep.SCALE.HOUR: return moment(date).format('ddd D MMMM');
- case TimeStep.SCALE.WEEKDAY:
- case TimeStep.SCALE.DAY: return moment(date).format('MMMM YYYY');
- case TimeStep.SCALE.MONTH: return moment(date).format('YYYY');
- case TimeStep.SCALE.YEAR: return '';
- default: return '';
- }
+ if (date == undefined) {
+ date = this.current;
+ }
+
+ //noinspection FallthroughInSwitchStatementJS
+ switch (this.scale) {
+ case TimeStep.SCALE.MILLISECOND:return moment(date).format('HH:mm:ss');
+ case TimeStep.SCALE.SECOND: return moment(date).format('D MMMM HH:mm');
+ case TimeStep.SCALE.MINUTE:
+ case TimeStep.SCALE.HOUR: return moment(date).format('ddd D MMMM');
+ case TimeStep.SCALE.WEEKDAY:
+ case TimeStep.SCALE.DAY: return moment(date).format('MMMM YYYY');
+ case TimeStep.SCALE.MONTH: return moment(date).format('YYYY');
+ case TimeStep.SCALE.YEAR: return '';
+ default: return '';
+ }
};
diff --git a/src/timeline/Timeline.js b/src/timeline/Timeline.js
index 9122be85..cceebc7b 100644
--- a/src/timeline/Timeline.js
+++ b/src/timeline/Timeline.js
@@ -6,130 +6,130 @@
* @constructor
*/
function Timeline (container, items, options) {
- var me = this;
- var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
- this.options = {
- orientation: 'bottom',
- min: null,
- max: null,
- zoomMin: 10, // milliseconds
- zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
- // moveable: true, // TODO: option moveable
- // zoomable: true, // TODO: option zoomable
- showMinorLabels: true,
- showMajorLabels: true,
- showCurrentTime: false,
- showCustomTime: false,
- autoResize: false
- };
-
- // controller
- this.controller = new Controller();
-
- // root panel
- if (!container) {
- throw new Error('No container element provided');
+ var me = this;
+ var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
+ this.options = {
+ orientation: 'bottom',
+ min: null,
+ max: null,
+ zoomMin: 10, // milliseconds
+ zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000, // milliseconds
+ // moveable: true, // TODO: option moveable
+ // zoomable: true, // TODO: option zoomable
+ showMinorLabels: true,
+ showMajorLabels: true,
+ showCurrentTime: false,
+ showCustomTime: false,
+ autoResize: false
+ };
+
+ // controller
+ this.controller = new Controller();
+
+ // root panel
+ if (!container) {
+ throw new Error('No container element provided');
+ }
+ var rootOptions = Object.create(this.options);
+ rootOptions.height = function () {
+ // TODO: change to height
+ if (me.options.height) {
+ // fixed height
+ return me.options.height;
}
- var rootOptions = Object.create(this.options);
- rootOptions.height = function () {
- // TODO: change to height
- if (me.options.height) {
- // fixed height
- return me.options.height;
- }
- else {
- // auto height
- return (me.timeaxis.height + me.content.height) + 'px';
- }
- };
- this.rootPanel = new RootPanel(container, rootOptions);
- this.controller.add(this.rootPanel);
-
- // item panel
- var itemOptions = Object.create(this.options);
- itemOptions.left = function () {
- return me.labelPanel.width;
- };
- itemOptions.width = function () {
- return me.rootPanel.width - me.labelPanel.width;
- };
- itemOptions.top = null;
- itemOptions.height = null;
- this.itemPanel = new Panel(this.rootPanel, [], itemOptions);
- this.controller.add(this.itemPanel);
-
- // label panel
- var labelOptions = Object.create(this.options);
- labelOptions.top = null;
- labelOptions.left = null;
- labelOptions.height = null;
- labelOptions.width = function () {
- if (me.content && typeof me.content.getLabelsWidth === 'function') {
- return me.content.getLabelsWidth();
- }
- else {
- return 0;
- }
- };
- this.labelPanel = new Panel(this.rootPanel, [], labelOptions);
- this.controller.add(this.labelPanel);
-
- // range
- var rangeOptions = Object.create(this.options);
- this.range = new Range(rangeOptions);
- this.range.setRange(
- now.clone().add('days', -3).valueOf(),
- now.clone().add('days', 4).valueOf()
- );
-
- // TODO: reckon with options moveable and zoomable
- this.range.subscribe(this.rootPanel, 'move', 'horizontal');
- this.range.subscribe(this.rootPanel, 'zoom', 'horizontal');
- this.range.on('rangechange', function () {
- var force = true;
- me.controller.requestReflow(force);
- });
- this.range.on('rangechanged', function () {
- var force = true;
- me.controller.requestReflow(force);
- });
-
- // TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable
-
- // time axis
- var timeaxisOptions = Object.create(rootOptions);
- timeaxisOptions.range = this.range;
- timeaxisOptions.left = null;
- timeaxisOptions.top = null;
- timeaxisOptions.width = '100%';
- timeaxisOptions.height = null;
- this.timeaxis = new TimeAxis(this.itemPanel, [], timeaxisOptions);
- this.timeaxis.setRange(this.range);
- this.controller.add(this.timeaxis);
-
- // current time bar
- this.currenttime = new CurrentTime(this.timeaxis, [], rootOptions);
- this.controller.add(this.currenttime);
-
- // custom time bar
- this.customtime = new CustomTime(this.timeaxis, [], rootOptions);
- this.controller.add(this.customtime);
-
- // create groupset
- this.setGroups(null);
-
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
-
- // apply options
- if (options) {
- this.setOptions(options);
+ else {
+ // auto height
+ return (me.timeaxis.height + me.content.height) + 'px';
}
-
- // create itemset and groupset
- if (items) {
- this.setItems(items);
+ };
+ this.rootPanel = new RootPanel(container, rootOptions);
+ this.controller.add(this.rootPanel);
+
+ // item panel
+ var itemOptions = Object.create(this.options);
+ itemOptions.left = function () {
+ return me.labelPanel.width;
+ };
+ itemOptions.width = function () {
+ return me.rootPanel.width - me.labelPanel.width;
+ };
+ itemOptions.top = null;
+ itemOptions.height = null;
+ this.itemPanel = new Panel(this.rootPanel, [], itemOptions);
+ this.controller.add(this.itemPanel);
+
+ // label panel
+ var labelOptions = Object.create(this.options);
+ labelOptions.top = null;
+ labelOptions.left = null;
+ labelOptions.height = null;
+ labelOptions.width = function () {
+ if (me.content && typeof me.content.getLabelsWidth === 'function') {
+ return me.content.getLabelsWidth();
}
+ else {
+ return 0;
+ }
+ };
+ this.labelPanel = new Panel(this.rootPanel, [], labelOptions);
+ this.controller.add(this.labelPanel);
+
+ // range
+ var rangeOptions = Object.create(this.options);
+ this.range = new Range(rangeOptions);
+ this.range.setRange(
+ now.clone().add('days', -3).valueOf(),
+ now.clone().add('days', 4).valueOf()
+ );
+
+ // TODO: reckon with options moveable and zoomable
+ this.range.subscribe(this.rootPanel, 'move', 'horizontal');
+ this.range.subscribe(this.rootPanel, 'zoom', 'horizontal');
+ this.range.on('rangechange', function () {
+ var force = true;
+ me.controller.requestReflow(force);
+ });
+ this.range.on('rangechanged', function () {
+ var force = true;
+ me.controller.requestReflow(force);
+ });
+
+ // TODO: put the listeners in setOptions, be able to dynamically change with options moveable and zoomable
+
+ // time axis
+ var timeaxisOptions = Object.create(rootOptions);
+ timeaxisOptions.range = this.range;
+ timeaxisOptions.left = null;
+ timeaxisOptions.top = null;
+ timeaxisOptions.width = '100%';
+ timeaxisOptions.height = null;
+ this.timeaxis = new TimeAxis(this.itemPanel, [], timeaxisOptions);
+ this.timeaxis.setRange(this.range);
+ this.controller.add(this.timeaxis);
+
+ // current time bar
+ this.currenttime = new CurrentTime(this.timeaxis, [], rootOptions);
+ this.controller.add(this.currenttime);
+
+ // custom time bar
+ this.customtime = new CustomTime(this.timeaxis, [], rootOptions);
+ this.controller.add(this.customtime);
+
+ // create groupset
+ this.setGroups(null);
+
+ this.itemsData = null; // DataSet
+ this.groupsData = null; // DataSet
+
+ // apply options
+ if (options) {
+ this.setOptions(options);
+ }
+
+ // create itemset and groupset
+ if (items) {
+ this.setItems(items);
+ }
}
/**
@@ -137,15 +137,15 @@ function Timeline (container, items, options) {
* @param {Object} options TODO: describe the available options
*/
Timeline.prototype.setOptions = function (options) {
- util.extend(this.options, options);
+ util.extend(this.options, options);
- // force update of range
- // options.start and options.end can be undefined
- //this.range.setRange(options.start, options.end);
- this.range.setRange();
+ // force update of range
+ // options.start and options.end can be undefined
+ //this.range.setRange(options.start, options.end);
+ this.range.setRange();
- this.controller.reflow();
- this.controller.repaint();
+ this.controller.reflow();
+ this.controller.repaint();
};
/**
@@ -153,7 +153,7 @@ Timeline.prototype.setOptions = function (options) {
* @param {Date} time
*/
Timeline.prototype.setCustomTime = function (time) {
- this.customtime._setCustomTime(time);
+ this.customtime._setCustomTime(time);
};
/**
@@ -161,7 +161,7 @@ Timeline.prototype.setCustomTime = function (time) {
* @return {Date} customTime
*/
Timeline.prototype.getCustomTime = function() {
- return new Date(this.customtime.customTime.valueOf());
+ return new Date(this.customtime.customTime.valueOf());
};
/**
@@ -169,60 +169,60 @@ Timeline.prototype.getCustomTime = function() {
* @param {vis.DataSet | Array | DataTable | null} items
*/
Timeline.prototype.setItems = function(items) {
- var initialLoad = (this.itemsData == null);
-
- // convert to type DataSet when needed
- var newItemSet;
- if (!items) {
- newItemSet = null;
+ var initialLoad = (this.itemsData == null);
+
+ // convert to type DataSet when needed
+ var newItemSet;
+ if (!items) {
+ newItemSet = null;
+ }
+ else if (items instanceof DataSet) {
+ newItemSet = items;
+ }
+ if (!(items instanceof DataSet)) {
+ newItemSet = new DataSet({
+ convert: {
+ start: 'Date',
+ end: 'Date'
+ }
+ });
+ newItemSet.add(items);
+ }
+
+ // set items
+ this.itemsData = newItemSet;
+ this.content.setItems(newItemSet);
+
+ if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) {
+ // apply the data range as range
+ var dataRange = this.getItemRange();
+
+ // add 5% space on both sides
+ var min = dataRange.min;
+ var max = dataRange.max;
+ if (min != null && max != null) {
+ var interval = (max.valueOf() - min.valueOf());
+ if (interval <= 0) {
+ // prevent an empty interval
+ interval = 24 * 60 * 60 * 1000; // 1 day
+ }
+ min = new Date(min.valueOf() - interval * 0.05);
+ max = new Date(max.valueOf() + interval * 0.05);
}
- else if (items instanceof DataSet) {
- newItemSet = items;
+
+ // override specified start and/or end date
+ if (this.options.start != undefined) {
+ min = util.convert(this.options.start, 'Date');
}
- if (!(items instanceof DataSet)) {
- newItemSet = new DataSet({
- convert: {
- start: 'Date',
- end: 'Date'
- }
- });
- newItemSet.add(items);
+ if (this.options.end != undefined) {
+ max = util.convert(this.options.end, 'Date');
}
- // set items
- this.itemsData = newItemSet;
- this.content.setItems(newItemSet);
-
- if (initialLoad && (this.options.start == undefined || this.options.end == undefined)) {
- // apply the data range as range
- var dataRange = this.getItemRange();
-
- // add 5% space on both sides
- var min = dataRange.min;
- var max = dataRange.max;
- if (min != null && max != null) {
- var interval = (max.valueOf() - min.valueOf());
- if (interval <= 0) {
- // prevent an empty interval
- interval = 24 * 60 * 60 * 1000; // 1 day
- }
- min = new Date(min.valueOf() - interval * 0.05);
- max = new Date(max.valueOf() + interval * 0.05);
- }
-
- // override specified start and/or end date
- if (this.options.start != undefined) {
- min = util.convert(this.options.start, 'Date');
- }
- if (this.options.end != undefined) {
- max = util.convert(this.options.end, 'Date');
- }
-
- // apply range if there is a min or max available
- if (min != null || max != null) {
- this.range.setRange(min, max);
- }
+ // apply range if there is a min or max available
+ if (min != null || max != null) {
+ this.range.setRange(min, max);
}
+ }
};
/**
@@ -230,76 +230,76 @@ Timeline.prototype.setItems = function(items) {
* @param {vis.DataSet | Array | DataTable} groups
*/
Timeline.prototype.setGroups = function(groups) {
- var me = this;
- this.groupsData = groups;
-
- // switch content type between ItemSet or GroupSet when needed
- var Type = this.groupsData ? GroupSet : ItemSet;
- if (!(this.content instanceof Type)) {
- // remove old content set
- if (this.content) {
- this.content.hide();
- if (this.content.setItems) {
- this.content.setItems(); // disconnect from items
- }
- if (this.content.setGroups) {
- this.content.setGroups(); // disconnect from groups
- }
- this.controller.remove(this.content);
- }
+ var me = this;
+ this.groupsData = groups;
+
+ // switch content type between ItemSet or GroupSet when needed
+ var Type = this.groupsData ? GroupSet : ItemSet;
+ if (!(this.content instanceof Type)) {
+ // remove old content set
+ if (this.content) {
+ this.content.hide();
+ if (this.content.setItems) {
+ this.content.setItems(); // disconnect from items
+ }
+ if (this.content.setGroups) {
+ this.content.setGroups(); // disconnect from groups
+ }
+ this.controller.remove(this.content);
+ }
- // create new content set
- var options = Object.create(this.options);
- util.extend(options, {
- top: function () {
- if (me.options.orientation == 'top') {
- return me.timeaxis.height;
- }
- else {
- return me.itemPanel.height - me.timeaxis.height - me.content.height;
- }
- },
- left: null,
- width: '100%',
- height: function () {
- if (me.options.height) {
- // fixed height
- return me.itemPanel.height - me.timeaxis.height;
- }
- else {
- // auto height
- return null;
- }
- },
- maxHeight: function () {
- // TODO: change maxHeight to be a css string like '100%' or '300px'
- if (me.options.maxHeight) {
- if (!util.isNumber(me.options.maxHeight)) {
- throw new TypeError('Number expected for property maxHeight');
- }
- return me.options.maxHeight - me.timeaxis.height;
- }
- else {
- return null;
- }
- },
- labelContainer: function () {
- return me.labelPanel.getContainer();
- }
- });
-
- this.content = new Type(this.itemPanel, [this.timeaxis], options);
- if (this.content.setRange) {
- this.content.setRange(this.range);
+ // create new content set
+ var options = Object.create(this.options);
+ util.extend(options, {
+ top: function () {
+ if (me.options.orientation == 'top') {
+ return me.timeaxis.height;
}
- if (this.content.setItems) {
- this.content.setItems(this.itemsData);
+ else {
+ return me.itemPanel.height - me.timeaxis.height - me.content.height;
}
- if (this.content.setGroups) {
- this.content.setGroups(this.groupsData);
+ },
+ left: null,
+ width: '100%',
+ height: function () {
+ if (me.options.height) {
+ // fixed height
+ return me.itemPanel.height - me.timeaxis.height;
+ }
+ else {
+ // auto height
+ return null;
}
- this.controller.add(this.content);
+ },
+ maxHeight: function () {
+ // TODO: change maxHeight to be a css string like '100%' or '300px'
+ if (me.options.maxHeight) {
+ if (!util.isNumber(me.options.maxHeight)) {
+ throw new TypeError('Number expected for property maxHeight');
+ }
+ return me.options.maxHeight - me.timeaxis.height;
+ }
+ else {
+ return null;
+ }
+ },
+ labelContainer: function () {
+ return me.labelPanel.getContainer();
+ }
+ });
+
+ this.content = new Type(this.itemPanel, [this.timeaxis], options);
+ if (this.content.setRange) {
+ this.content.setRange(this.range);
}
+ if (this.content.setItems) {
+ this.content.setItems(this.itemsData);
+ }
+ if (this.content.setGroups) {
+ this.content.setGroups(this.groupsData);
+ }
+ this.controller.add(this.content);
+ }
};
/**
@@ -309,34 +309,34 @@ Timeline.prototype.setGroups = function(groups) {
* When no maximum is found, max==null
*/
Timeline.prototype.getItemRange = function getItemRange() {
- // calculate min from start filed
- var itemsData = this.itemsData,
- min = null,
- max = null;
-
- if (itemsData) {
- // calculate the minimum value of the field 'start'
- var minItem = itemsData.min('start');
- min = minItem ? minItem.start.valueOf() : null;
-
- // calculate maximum value of fields 'start' and 'end'
- var maxStartItem = itemsData.max('start');
- if (maxStartItem) {
- max = maxStartItem.start.valueOf();
- }
- var maxEndItem = itemsData.max('end');
- if (maxEndItem) {
- if (max == null) {
- max = maxEndItem.end.valueOf();
- }
- else {
- max = Math.max(max, maxEndItem.end.valueOf());
- }
- }
+ // calculate min from start filed
+ var itemsData = this.itemsData,
+ min = null,
+ max = null;
+
+ if (itemsData) {
+ // calculate the minimum value of the field 'start'
+ var minItem = itemsData.min('start');
+ min = minItem ? minItem.start.valueOf() : null;
+
+ // calculate maximum value of fields 'start' and 'end'
+ var maxStartItem = itemsData.max('start');
+ if (maxStartItem) {
+ max = maxStartItem.start.valueOf();
+ }
+ var maxEndItem = itemsData.max('end');
+ if (maxEndItem) {
+ if (max == null) {
+ max = maxEndItem.end.valueOf();
+ }
+ else {
+ max = Math.max(max, maxEndItem.end.valueOf());
+ }
}
+ }
- return {
- min: (min != null) ? new Date(min) : null,
- max: (max != null) ? new Date(max) : null
- };
+ return {
+ min: (min != null) ? new Date(min) : null,
+ max: (max != null) ? new Date(max) : null
+ };
};
diff --git a/src/timeline/component/Component.js b/src/timeline/component/Component.js
index 7c21e369..8d15e0c6 100644
--- a/src/timeline/component/Component.js
+++ b/src/timeline/component/Component.js
@@ -2,17 +2,17 @@
* Prototype for visual components
*/
function Component () {
- this.id = null;
- this.parent = null;
- this.depends = null;
- this.controller = null;
- this.options = null;
+ this.id = null;
+ this.parent = null;
+ this.depends = null;
+ this.controller = null;
+ this.options = null;
- this.frame = null; // main DOM element
- this.top = 0;
- this.left = 0;
- this.width = 0;
- this.height = 0;
+ this.frame = null; // main DOM element
+ this.top = 0;
+ this.left = 0;
+ this.width = 0;
+ this.height = 0;
}
/**
@@ -27,14 +27,14 @@ function Component () {
* {String | Number | function} [height]
*/
Component.prototype.setOptions = function setOptions(options) {
- if (options) {
- util.extend(this.options, options);
+ if (options) {
+ util.extend(this.options, options);
- if (this.controller) {
- this.requestRepaint();
- this.requestReflow();
- }
+ if (this.controller) {
+ this.requestRepaint();
+ this.requestReflow();
}
+ }
};
/**
@@ -45,14 +45,14 @@ Component.prototype.setOptions = function setOptions(options) {
* @return {*} value
*/
Component.prototype.getOption = function getOption(name) {
- var value;
- if (this.options) {
- value = this.options[name];
- }
- if (value === undefined && this.defaultOptions) {
- value = this.defaultOptions[name];
- }
- return value;
+ var value;
+ if (this.options) {
+ value = this.options[name];
+ }
+ if (value === undefined && this.defaultOptions) {
+ value = this.defaultOptions[name];
+ }
+ return value;
};
/**
@@ -63,8 +63,8 @@ Component.prototype.getOption = function getOption(name) {
*/
// TODO: get rid of the getContainer and getFrame methods, provide these via the options
Component.prototype.getContainer = function getContainer() {
- // should be implemented by the component
- return null;
+ // should be implemented by the component
+ return null;
};
/**
@@ -72,7 +72,7 @@ Component.prototype.getContainer = function getContainer() {
* @returns {HTMLElement | null} frame
*/
Component.prototype.getFrame = function getFrame() {
- return this.frame;
+ return this.frame;
};
/**
@@ -80,8 +80,8 @@ Component.prototype.getFrame = function getFrame() {
* @return {Boolean} changed
*/
Component.prototype.repaint = function repaint() {
- // should be implemented by the component
- return false;
+ // should be implemented by the component
+ return false;
};
/**
@@ -89,8 +89,8 @@ Component.prototype.repaint = function repaint() {
* @return {Boolean} resized
*/
Component.prototype.reflow = function reflow() {
- // should be implemented by the component
- return false;
+ // should be implemented by the component
+ return false;
};
/**
@@ -98,13 +98,13 @@ Component.prototype.reflow = function reflow() {
* @return {Boolean} changed
*/
Component.prototype.hide = function hide() {
- if (this.frame && this.frame.parentNode) {
- this.frame.parentNode.removeChild(this.frame);
- return true;
- }
- else {
- return false;
- }
+ if (this.frame && this.frame.parentNode) {
+ this.frame.parentNode.removeChild(this.frame);
+ return true;
+ }
+ else {
+ return false;
+ }
};
/**
@@ -113,36 +113,36 @@ Component.prototype.hide = function hide() {
* @return {Boolean} changed
*/
Component.prototype.show = function show() {
- if (!this.frame || !this.frame.parentNode) {
- return this.repaint();
- }
- else {
- return false;
- }
+ if (!this.frame || !this.frame.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
};
/**
* Request a repaint. The controller will schedule a repaint
*/
Component.prototype.requestRepaint = function requestRepaint() {
- if (this.controller) {
- this.controller.requestRepaint();
- }
- else {
- throw new Error('Cannot request a repaint: no controller configured');
- // TODO: just do a repaint when no parent is configured?
- }
+ if (this.controller) {
+ this.controller.requestRepaint();
+ }
+ else {
+ throw new Error('Cannot request a repaint: no controller configured');
+ // TODO: just do a repaint when no parent is configured?
+ }
};
/**
* Request a reflow. The controller will schedule a reflow
*/
Component.prototype.requestReflow = function requestReflow() {
- if (this.controller) {
- this.controller.requestReflow();
- }
- else {
- throw new Error('Cannot request a reflow: no controller configured');
- // TODO: just do a reflow when no parent is configured?
- }
+ if (this.controller) {
+ this.controller.requestReflow();
+ }
+ else {
+ throw new Error('Cannot request a reflow: no controller configured');
+ // TODO: just do a reflow when no parent is configured?
+ }
};
diff --git a/src/timeline/component/ContentPanel.js b/src/timeline/component/ContentPanel.js
index ff61a6e2..fcc27167 100644
--- a/src/timeline/component/ContentPanel.js
+++ b/src/timeline/component/ContentPanel.js
@@ -14,11 +14,11 @@
* @extends Panel
*/
function ContentPanel(parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
- this.options = options || {};
+ this.options = options || {};
}
ContentPanel.prototype = new Component();
@@ -40,7 +40,7 @@ ContentPanel.prototype.setOptions = Component.prototype.setOptions;
* @returns {HTMLElement} container
*/
ContentPanel.prototype.getContainer = function () {
- return this.frame;
+ return this.frame;
};
/**
@@ -48,46 +48,46 @@ ContentPanel.prototype.getContainer = function () {
* @return {Boolean} changed
*/
ContentPanel.prototype.repaint = function () {
- var changed = 0,
- update = util.updateProperty,
- asSize = util.option.asSize,
- options = this.options,
- frame = this.frame;
- if (!frame) {
- frame = document.createElement('div');
- frame.className = 'content-panel';
+ var changed = 0,
+ update = util.updateProperty,
+ asSize = util.option.asSize,
+ options = this.options,
+ frame = this.frame;
+ if (!frame) {
+ frame = document.createElement('div');
+ frame.className = 'content-panel';
- var className = options.className;
- if (className) {
- if (typeof className == 'function') {
- util.addClassName(frame, String(className()));
- }
- else {
- util.addClassName(frame, String(className));
- }
- }
+ var className = options.className;
+ if (className) {
+ if (typeof className == 'function') {
+ util.addClassName(frame, String(className()));
+ }
+ else {
+ util.addClassName(frame, String(className));
+ }
+ }
- this.frame = frame;
- changed += 1;
+ this.frame = frame;
+ changed += 1;
+ }
+ if (!frame.parentNode) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint panel: no parent attached');
}
- if (!frame.parentNode) {
- if (!this.parent) {
- throw new Error('Cannot repaint panel: no parent attached');
- }
- var parentContainer = this.parent.getContainer();
- if (!parentContainer) {
- throw new Error('Cannot repaint panel: parent has no container element');
- }
- parentContainer.appendChild(frame);
- changed += 1;
+ var parentContainer = this.parent.getContainer();
+ if (!parentContainer) {
+ throw new Error('Cannot repaint panel: parent has no container element');
}
+ parentContainer.appendChild(frame);
+ changed += 1;
+ }
- changed += update(frame.style, 'top', asSize(options.top, '0px'));
- changed += update(frame.style, 'left', asSize(options.left, '0px'));
- changed += update(frame.style, 'width', asSize(options.width, '100%'));
- changed += update(frame.style, 'height', asSize(options.height, '100%'));
+ changed += update(frame.style, 'top', asSize(options.top, '0px'));
+ changed += update(frame.style, 'left', asSize(options.left, '0px'));
+ changed += update(frame.style, 'width', asSize(options.width, '100%'));
+ changed += update(frame.style, 'height', asSize(options.height, '100%'));
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -95,19 +95,19 @@ ContentPanel.prototype.repaint = function () {
* @return {Boolean} resized
*/
ContentPanel.prototype.reflow = function () {
- var changed = 0,
- update = util.updateProperty,
- frame = this.frame;
+ var changed = 0,
+ update = util.updateProperty,
+ frame = this.frame;
- if (frame) {
- changed += update(this, 'top', frame.offsetTop);
- changed += update(this, 'left', frame.offsetLeft);
- changed += update(this, 'width', frame.offsetWidth);
- changed += update(this, 'height', frame.offsetHeight);
- }
- else {
- changed += 1;
- }
+ if (frame) {
+ changed += update(this, 'top', frame.offsetTop);
+ changed += update(this, 'left', frame.offsetLeft);
+ changed += update(this, 'width', frame.offsetWidth);
+ changed += update(this, 'height', frame.offsetHeight);
+ }
+ else {
+ changed += 1;
+ }
- return (changed > 0);
+ return (changed > 0);
};
diff --git a/src/timeline/component/CurrentTime.js b/src/timeline/component/CurrentTime.js
index a94fd005..ddacf868 100644
--- a/src/timeline/component/CurrentTime.js
+++ b/src/timeline/component/CurrentTime.js
@@ -10,14 +10,14 @@
*/
function CurrentTime (parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
-
- this.options = options || {};
- this.defaultOptions = {
- showCurrentTime: false
- };
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ this.options = options || {};
+ this.defaultOptions = {
+ showCurrentTime: false
+ };
}
CurrentTime.prototype = new Component();
@@ -30,7 +30,7 @@ CurrentTime.prototype.setOptions = Component.prototype.setOptions;
* @returns {HTMLElement} container
*/
CurrentTime.prototype.getContainer = function () {
- return this.frame;
+ return this.frame;
};
/**
@@ -38,64 +38,64 @@ CurrentTime.prototype.getContainer = function () {
* @return {Boolean} changed
*/
CurrentTime.prototype.repaint = function () {
- var bar = this.frame,
- parent = this.parent,
- parentContainer = parent.parent.getContainer();
-
- if (!parent) {
- throw new Error('Cannot repaint bar: no parent attached');
- }
-
- if (!parentContainer) {
- throw new Error('Cannot repaint bar: parent has no container element');
+ var bar = this.frame,
+ parent = this.parent,
+ parentContainer = parent.parent.getContainer();
+
+ if (!parent) {
+ throw new Error('Cannot repaint bar: no parent attached');
+ }
+
+ if (!parentContainer) {
+ throw new Error('Cannot repaint bar: parent has no container element');
+ }
+
+ if (!this.getOption('showCurrentTime')) {
+ if (bar) {
+ parentContainer.removeChild(bar);
+ delete this.frame;
}
- if (!this.getOption('showCurrentTime')) {
- if (bar) {
- parentContainer.removeChild(bar);
- delete this.frame;
- }
+ return;
+ }
- return;
- }
+ if (!bar) {
+ bar = document.createElement('div');
+ bar.className = 'currenttime';
+ bar.style.position = 'absolute';
+ bar.style.top = '0px';
+ bar.style.height = '100%';
- if (!bar) {
- bar = document.createElement('div');
- bar.className = 'currenttime';
- bar.style.position = 'absolute';
- bar.style.top = '0px';
- bar.style.height = '100%';
+ parentContainer.appendChild(bar);
+ this.frame = bar;
+ }
- parentContainer.appendChild(bar);
- this.frame = bar;
- }
+ if (!parent.conversion) {
+ parent._updateConversion();
+ }
- if (!parent.conversion) {
- parent._updateConversion();
- }
+ var now = new Date();
+ var x = parent.toScreen(now);
- var now = new Date();
- var x = parent.toScreen(now);
+ bar.style.left = x + 'px';
+ bar.title = 'Current time: ' + now;
- bar.style.left = x + 'px';
- bar.title = 'Current time: ' + now;
+ // start a timer to adjust for the new time
+ if (this.currentTimeTimer !== undefined) {
+ clearTimeout(this.currentTimeTimer);
+ delete this.currentTimeTimer;
+ }
- // start a timer to adjust for the new time
- if (this.currentTimeTimer !== undefined) {
- clearTimeout(this.currentTimeTimer);
- delete this.currentTimeTimer;
- }
+ var timeline = this;
+ var interval = 1 / parent.conversion.scale / 2;
- var timeline = this;
- var interval = 1 / parent.conversion.scale / 2;
+ if (interval < 30) {
+ interval = 30;
+ }
- if (interval < 30) {
- interval = 30;
- }
-
- this.currentTimeTimer = setTimeout(function() {
- timeline.repaint();
- }, interval);
+ this.currentTimeTimer = setTimeout(function() {
+ timeline.repaint();
+ }, interval);
- return false;
+ return false;
};
diff --git a/src/timeline/component/CustomTime.js b/src/timeline/component/CustomTime.js
index 9efe6892..a5df5ca5 100644
--- a/src/timeline/component/CustomTime.js
+++ b/src/timeline/component/CustomTime.js
@@ -10,17 +10,17 @@
*/
function CustomTime (parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
- this.options = options || {};
- this.defaultOptions = {
- showCustomTime: false
- };
+ this.options = options || {};
+ this.defaultOptions = {
+ showCustomTime: false
+ };
- this.listeners = [];
- this.customTime = new Date();
+ this.listeners = [];
+ this.customTime = new Date();
}
CustomTime.prototype = new Component();
@@ -33,7 +33,7 @@ CustomTime.prototype.setOptions = Component.prototype.setOptions;
* @returns {HTMLElement} container
*/
CustomTime.prototype.getContainer = function () {
- return this.frame;
+ return this.frame;
};
/**
@@ -41,59 +41,59 @@ CustomTime.prototype.getContainer = function () {
* @return {Boolean} changed
*/
CustomTime.prototype.repaint = function () {
- var bar = this.frame,
- parent = this.parent,
- parentContainer = parent.parent.getContainer();
-
- if (!parent) {
- throw new Error('Cannot repaint bar: no parent attached');
+ var bar = this.frame,
+ parent = this.parent,
+ parentContainer = parent.parent.getContainer();
+
+ if (!parent) {
+ throw new Error('Cannot repaint bar: no parent attached');
+ }
+
+ if (!parentContainer) {
+ throw new Error('Cannot repaint bar: parent has no container element');
+ }
+
+ if (!this.getOption('showCustomTime')) {
+ if (bar) {
+ parentContainer.removeChild(bar);
+ delete this.frame;
}
- if (!parentContainer) {
- throw new Error('Cannot repaint bar: parent has no container element');
- }
+ return;
+ }
- if (!this.getOption('showCustomTime')) {
- if (bar) {
- parentContainer.removeChild(bar);
- delete this.frame;
- }
+ if (!bar) {
+ bar = document.createElement('div');
+ bar.className = 'customtime';
+ bar.style.position = 'absolute';
+ bar.style.top = '0px';
+ bar.style.height = '100%';
- return;
- }
+ parentContainer.appendChild(bar);
- if (!bar) {
- bar = document.createElement('div');
- bar.className = 'customtime';
- bar.style.position = 'absolute';
- bar.style.top = '0px';
- bar.style.height = '100%';
+ var drag = document.createElement('div');
+ drag.style.position = 'relative';
+ drag.style.top = '0px';
+ drag.style.left = '-10px';
+ drag.style.height = '100%';
+ drag.style.width = '20px';
+ bar.appendChild(drag);
- parentContainer.appendChild(bar);
+ this.frame = bar;
- var drag = document.createElement('div');
- drag.style.position = 'relative';
- drag.style.top = '0px';
- drag.style.left = '-10px';
- drag.style.height = '100%';
- drag.style.width = '20px';
- bar.appendChild(drag);
+ this.subscribe(this, 'movetime');
+ }
- this.frame = bar;
+ if (!parent.conversion) {
+ parent._updateConversion();
+ }
- this.subscribe(this, 'movetime');
- }
-
- if (!parent.conversion) {
- parent._updateConversion();
- }
+ var x = parent.toScreen(this.customTime);
- var x = parent.toScreen(this.customTime);
+ bar.style.left = x + 'px';
+ bar.title = 'Time: ' + this.customTime;
- bar.style.left = x + 'px';
- bar.title = 'Time: ' + this.customTime;
-
- return false;
+ return false;
};
/**
@@ -101,8 +101,8 @@ CustomTime.prototype.repaint = function () {
* @param {Date} time
*/
CustomTime.prototype._setCustomTime = function(time) {
- this.customTime = new Date(time.valueOf());
- this.repaint();
+ this.customTime = new Date(time.valueOf());
+ this.repaint();
};
/**
@@ -110,7 +110,7 @@ CustomTime.prototype._setCustomTime = function(time) {
* @return {Date} customTime
*/
CustomTime.prototype._getCustomTime = function() {
- return new Date(this.customTime.valueOf());
+ return new Date(this.customTime.valueOf());
};
/**
@@ -118,18 +118,18 @@ CustomTime.prototype._getCustomTime = function() {
* @param {Component} component
*/
CustomTime.prototype.subscribe = function (component, event) {
- var me = this;
- var listener = {
- component: component,
- event: event,
- callback: function (event) {
- me._onMouseDown(event, listener);
- },
- params: {}
- };
-
- component.on('mousedown', listener.callback);
- me.listeners.push(listener);
+ var me = this;
+ var listener = {
+ component: component,
+ event: event,
+ callback: function (event) {
+ me._onMouseDown(event, listener);
+ },
+ params: {}
+ };
+
+ component.on('mousedown', listener.callback);
+ me.listeners.push(listener);
};
@@ -140,13 +140,13 @@ CustomTime.prototype.subscribe = function (component, event) {
* as parameter.
*/
CustomTime.prototype.on = function (event, callback) {
- var bar = this.frame;
- if (!bar) {
- throw new Error('Cannot add event listener: no parent attached');
- }
+ var bar = this.frame;
+ if (!bar) {
+ throw new Error('Cannot add event listener: no parent attached');
+ }
- events.addListener(this, event, callback);
- util.addEventListener(bar, event, callback);
+ events.addListener(this, event, callback);
+ util.addEventListener(bar, event, callback);
};
/**
@@ -156,38 +156,38 @@ CustomTime.prototype.on = function (event, callback) {
* @private
*/
CustomTime.prototype._onMouseDown = function(event, listener) {
- event = event || window.event;
- var params = listener.params;
-
- // only react on left mouse button down
- var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
- if (!leftButtonDown) {
- return;
- }
-
- // get mouse position
- params.mouseX = util.getPageX(event);
- params.moved = false;
-
- params.customTime = this.customTime;
-
- // add event listeners to handle moving the custom time bar
- var me = this;
- if (!params.onMouseMove) {
- params.onMouseMove = function (event) {
- me._onMouseMove(event, listener);
- };
- util.addEventListener(document, 'mousemove', params.onMouseMove);
- }
- if (!params.onMouseUp) {
- params.onMouseUp = function (event) {
- me._onMouseUp(event, listener);
- };
- util.addEventListener(document, 'mouseup', params.onMouseUp);
- }
+ event = event || window.event;
+ var params = listener.params;
+
+ // only react on left mouse button down
+ var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
+ if (!leftButtonDown) {
+ return;
+ }
+
+ // get mouse position
+ params.mouseX = util.getPageX(event);
+ params.moved = false;
+
+ params.customTime = this.customTime;
+
+ // add event listeners to handle moving the custom time bar
+ var me = this;
+ if (!params.onMouseMove) {
+ params.onMouseMove = function (event) {
+ me._onMouseMove(event, listener);
+ };
+ util.addEventListener(document, 'mousemove', params.onMouseMove);
+ }
+ if (!params.onMouseUp) {
+ params.onMouseUp = function (event) {
+ me._onMouseUp(event, listener);
+ };
+ util.addEventListener(document, 'mouseup', params.onMouseUp);
+ }
- util.stopPropagation(event);
- util.preventDefault(event);
+ util.stopPropagation(event);
+ util.preventDefault(event);
};
/**
@@ -198,33 +198,33 @@ CustomTime.prototype._onMouseDown = function(event, listener) {
* @private
*/
CustomTime.prototype._onMouseMove = function (event, listener) {
- event = event || window.event;
- var params = listener.params;
- var parent = this.parent;
+ event = event || window.event;
+ var params = listener.params;
+ var parent = this.parent;
- // calculate change in mouse position
- var mouseX = util.getPageX(event);
+ // calculate change in mouse position
+ var mouseX = util.getPageX(event);
- if (params.mouseX === undefined) {
- params.mouseX = mouseX;
- }
+ if (params.mouseX === undefined) {
+ params.mouseX = mouseX;
+ }
- var diff = mouseX - params.mouseX;
+ var diff = mouseX - params.mouseX;
- // if mouse movement is big enough, register it as a "moved" event
- if (Math.abs(diff) >= 1) {
- params.moved = true;
- }
+ // if mouse movement is big enough, register it as a "moved" event
+ if (Math.abs(diff) >= 1) {
+ params.moved = true;
+ }
- var x = parent.toScreen(params.customTime);
- var xnew = x + diff;
- var time = parent.toTime(xnew);
- this._setCustomTime(time);
+ var x = parent.toScreen(params.customTime);
+ var xnew = x + diff;
+ var time = parent.toTime(xnew);
+ this._setCustomTime(time);
- // fire a timechange event
- events.trigger(this, 'timechange', {customTime: this.customTime});
+ // fire a timechange event
+ events.trigger(this, 'timechange', {customTime: this.customTime});
- util.preventDefault(event);
+ util.preventDefault(event);
};
/**
@@ -235,21 +235,21 @@ CustomTime.prototype._onMouseMove = function (event, listener) {
* @private
*/
CustomTime.prototype._onMouseUp = function (event, listener) {
- event = event || window.event;
- var params = listener.params;
-
- // remove event listeners here, important for Safari
- if (params.onMouseMove) {
- util.removeEventListener(document, 'mousemove', params.onMouseMove);
- params.onMouseMove = null;
- }
- if (params.onMouseUp) {
- util.removeEventListener(document, 'mouseup', params.onMouseUp);
- params.onMouseUp = null;
- }
-
- if (params.moved) {
- // fire a timechanged event
- events.trigger(this, 'timechanged', {customTime: this.customTime});
- }
+ event = event || window.event;
+ var params = listener.params;
+
+ // remove event listeners here, important for Safari
+ if (params.onMouseMove) {
+ util.removeEventListener(document, 'mousemove', params.onMouseMove);
+ params.onMouseMove = null;
+ }
+ if (params.onMouseUp) {
+ util.removeEventListener(document, 'mouseup', params.onMouseUp);
+ params.onMouseUp = null;
+ }
+
+ if (params.moved) {
+ // fire a timechanged event
+ events.trigger(this, 'timechanged', {customTime: this.customTime});
+ }
};
diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js
index 1198cd3c..74fac5dc 100644
--- a/src/timeline/component/Group.js
+++ b/src/timeline/component/Group.js
@@ -7,25 +7,25 @@
* @extends Component
*/
function Group (parent, groupId, options) {
- this.id = util.randomUUID();
- this.parent = parent;
-
- this.groupId = groupId;
- this.itemset = null; // ItemSet
- this.options = options || {};
- this.options.top = 0;
-
- this.props = {
- label: {
- width: 0,
- height: 0
- }
- };
-
- this.top = 0;
- this.left = 0;
- this.width = 0;
- this.height = 0;
+ this.id = util.randomUUID();
+ this.parent = parent;
+
+ this.groupId = groupId;
+ this.itemset = null; // ItemSet
+ this.options = options || {};
+ this.options.top = 0;
+
+ this.props = {
+ label: {
+ width: 0,
+ height: 0
+ }
+ };
+
+ this.top = 0;
+ this.left = 0;
+ this.width = 0;
+ this.height = 0;
}
Group.prototype = new Component();
@@ -39,7 +39,7 @@ Group.prototype.setOptions = Component.prototype.setOptions;
* @returns {HTMLElement} container
*/
Group.prototype.getContainer = function () {
- return this.parent.getContainer();
+ return this.parent.getContainer();
};
/**
@@ -48,31 +48,31 @@ Group.prototype.getContainer = function () {
* @param {DataSet | DataView} items
*/
Group.prototype.setItems = function setItems(items) {
- if (this.itemset) {
- // remove current item set
- this.itemset.hide();
- this.itemset.setItems();
-
- this.parent.controller.remove(this.itemset);
- this.itemset = null;
- }
-
- if (items) {
- var groupId = this.groupId;
-
- var itemsetOptions = Object.create(this.options);
- this.itemset = new ItemSet(this, null, itemsetOptions);
- this.itemset.setRange(this.parent.range);
-
- this.view = new DataView(items, {
- filter: function (item) {
- return item.group == groupId;
- }
- });
- this.itemset.setItems(this.view);
-
- this.parent.controller.add(this.itemset);
- }
+ if (this.itemset) {
+ // remove current item set
+ this.itemset.hide();
+ this.itemset.setItems();
+
+ this.parent.controller.remove(this.itemset);
+ this.itemset = null;
+ }
+
+ if (items) {
+ var groupId = this.groupId;
+
+ var itemsetOptions = Object.create(this.options);
+ this.itemset = new ItemSet(this, null, itemsetOptions);
+ this.itemset.setRange(this.parent.range);
+
+ this.view = new DataView(items, {
+ filter: function (item) {
+ return item.group == groupId;
+ }
+ });
+ this.itemset.setItems(this.view);
+
+ this.parent.controller.add(this.itemset);
+ }
};
/**
@@ -80,7 +80,7 @@ Group.prototype.setItems = function setItems(items) {
* @return {Boolean} changed
*/
Group.prototype.repaint = function repaint() {
- return false;
+ return false;
};
/**
@@ -88,23 +88,23 @@ Group.prototype.repaint = function repaint() {
* @return {Boolean} resized
*/
Group.prototype.reflow = function reflow() {
- var changed = 0,
- update = util.updateProperty;
+ var changed = 0,
+ update = util.updateProperty;
- changed += update(this, 'top', this.itemset ? this.itemset.top : 0);
- changed += update(this, 'height', this.itemset ? this.itemset.height : 0);
+ changed += update(this, 'top', this.itemset ? this.itemset.top : 0);
+ changed += update(this, 'height', this.itemset ? this.itemset.height : 0);
- // TODO: reckon with the height of the group label
+ // TODO: reckon with the height of the group label
- if (this.label) {
- var inner = this.label.firstChild;
- changed += update(this.props.label, 'width', inner.clientWidth);
- changed += update(this.props.label, 'height', inner.clientHeight);
- }
- else {
- changed += update(this.props.label, 'width', 0);
- changed += update(this.props.label, 'height', 0);
- }
+ if (this.label) {
+ var inner = this.label.firstChild;
+ changed += update(this.props.label, 'width', inner.clientWidth);
+ changed += update(this.props.label, 'height', inner.clientHeight);
+ }
+ else {
+ changed += update(this.props.label, 'width', 0);
+ changed += update(this.props.label, 'height', 0);
+ }
- return (changed > 0);
+ return (changed > 0);
};
diff --git a/src/timeline/component/GroupSet.js b/src/timeline/component/GroupSet.js
index 616bb42c..970a83d6 100644
--- a/src/timeline/component/GroupSet.js
+++ b/src/timeline/component/GroupSet.js
@@ -9,42 +9,42 @@
* @extends Panel
*/
function GroupSet(parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
- this.options = options || {};
+ this.options = options || {};
- this.range = null; // Range or Object {start: number, end: number}
- this.itemsData = null; // DataSet with items
- this.groupsData = null; // DataSet with groups
+ this.range = null; // Range or Object {start: number, end: number}
+ this.itemsData = null; // DataSet with items
+ this.groupsData = null; // DataSet with groups
- this.groups = {}; // map with groups
+ this.groups = {}; // map with groups
- this.dom = {};
- this.props = {
- labels: {
- width: 0
- }
- };
-
- // TODO: implement right orientation of the labels
-
- // changes in groups are queued key/value map containing id/action
- this.queue = {};
-
- var me = this;
- this.listeners = {
- 'add': function (event, params) {
- me._onAdd(params.items);
- },
- 'update': function (event, params) {
- me._onUpdate(params.items);
- },
- 'remove': function (event, params) {
- me._onRemove(params.items);
- }
- };
+ this.dom = {};
+ this.props = {
+ labels: {
+ width: 0
+ }
+ };
+
+ // TODO: implement right orientation of the labels
+
+ // changes in groups are queued key/value map containing id/action
+ this.queue = {};
+
+ var me = this;
+ this.listeners = {
+ 'add': function (event, params) {
+ me._onAdd(params.items);
+ },
+ 'update': function (event, params) {
+ me._onUpdate(params.items);
+ },
+ 'remove': function (event, params) {
+ me._onRemove(params.items);
+ }
+ };
}
GroupSet.prototype = new Panel();
@@ -58,7 +58,7 @@ GroupSet.prototype = new Panel();
GroupSet.prototype.setOptions = Component.prototype.setOptions;
GroupSet.prototype.setRange = function (range) {
- // TODO: implement setRange
+ // TODO: implement setRange
};
/**
@@ -66,14 +66,14 @@ GroupSet.prototype.setRange = function (range) {
* @param {vis.DataSet | null} items
*/
GroupSet.prototype.setItems = function setItems(items) {
- this.itemsData = items;
+ this.itemsData = items;
- for (var id in this.groups) {
- if (this.groups.hasOwnProperty(id)) {
- var group = this.groups[id];
- group.setItems(items);
- }
+ for (var id in this.groups) {
+ if (this.groups.hasOwnProperty(id)) {
+ var group = this.groups[id];
+ group.setItems(items);
}
+ }
};
/**
@@ -81,7 +81,7 @@ GroupSet.prototype.setItems = function setItems(items) {
* @return {vis.DataSet | null} items
*/
GroupSet.prototype.getItems = function getItems() {
- return this.itemsData;
+ return this.itemsData;
};
/**
@@ -89,7 +89,7 @@ GroupSet.prototype.getItems = function getItems() {
* @param {Range | Object} range A Range or an object containing start and end.
*/
GroupSet.prototype.setRange = function setRange(range) {
- this.range = range;
+ this.range = range;
};
/**
@@ -97,48 +97,48 @@ GroupSet.prototype.setRange = function setRange(range) {
* @param {vis.DataSet} groups
*/
GroupSet.prototype.setGroups = function setGroups(groups) {
- var me = this,
- ids;
-
- // unsubscribe from current dataset
- if (this.groupsData) {
- util.forEach(this.listeners, function (callback, event) {
- me.groupsData.unsubscribe(event, callback);
- });
+ var me = this,
+ ids;
- // remove all drawn groups
- ids = this.groupsData.getIds();
- this._onRemove(ids);
- }
-
- // replace the dataset
- if (!groups) {
- this.groupsData = null;
- }
- else if (groups instanceof DataSet) {
- this.groupsData = groups;
- }
- else {
- this.groupsData = new DataSet({
- convert: {
- start: 'Date',
- end: 'Date'
- }
- });
- this.groupsData.add(groups);
- }
+ // unsubscribe from current dataset
+ if (this.groupsData) {
+ util.forEach(this.listeners, function (callback, event) {
+ me.groupsData.unsubscribe(event, callback);
+ });
- if (this.groupsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.listeners, function (callback, event) {
- me.groupsData.subscribe(event, callback, id);
- });
+ // remove all drawn groups
+ ids = this.groupsData.getIds();
+ this._onRemove(ids);
+ }
+
+ // replace the dataset
+ if (!groups) {
+ this.groupsData = null;
+ }
+ else if (groups instanceof DataSet) {
+ this.groupsData = groups;
+ }
+ else {
+ this.groupsData = new DataSet({
+ convert: {
+ start: 'Date',
+ end: 'Date'
+ }
+ });
+ this.groupsData.add(groups);
+ }
+
+ if (this.groupsData) {
+ // subscribe to new dataset
+ var id = this.id;
+ util.forEach(this.listeners, function (callback, event) {
+ me.groupsData.subscribe(event, callback, id);
+ });
- // draw all new groups
- ids = this.groupsData.getIds();
- this._onAdd(ids);
- }
+ // draw all new groups
+ ids = this.groupsData.getIds();
+ this._onAdd(ids);
+ }
};
/**
@@ -146,7 +146,7 @@ GroupSet.prototype.setGroups = function setGroups(groups) {
* @return {vis.DataSet | null} groups
*/
GroupSet.prototype.getGroups = function getGroups() {
- return this.groupsData;
+ return this.groupsData;
};
/**
@@ -154,179 +154,179 @@ GroupSet.prototype.getGroups = function getGroups() {
* @return {Boolean} changed
*/
GroupSet.prototype.repaint = function repaint() {
- var changed = 0,
- i, id, group, label,
- update = util.updateProperty,
- asSize = util.option.asSize,
- asElement = util.option.asElement,
- options = this.options,
- frame = this.dom.frame,
- labels = this.dom.labels,
- labelSet = this.dom.labelSet;
-
- // create frame
- if (!this.parent) {
- throw new Error('Cannot repaint groupset: no parent attached');
- }
- var parentContainer = this.parent.getContainer();
- if (!parentContainer) {
- throw new Error('Cannot repaint groupset: parent has no container element');
- }
- if (!frame) {
- frame = document.createElement('div');
- frame.className = 'groupset';
- this.dom.frame = frame;
-
- var className = options.className;
- if (className) {
- util.addClassName(frame, util.option.asString(className));
- }
-
- changed += 1;
- }
- if (!frame.parentNode) {
- parentContainer.appendChild(frame);
- changed += 1;
+ var changed = 0,
+ i, id, group, label,
+ update = util.updateProperty,
+ asSize = util.option.asSize,
+ asElement = util.option.asElement,
+ options = this.options,
+ frame = this.dom.frame,
+ labels = this.dom.labels,
+ labelSet = this.dom.labelSet;
+
+ // create frame
+ if (!this.parent) {
+ throw new Error('Cannot repaint groupset: no parent attached');
+ }
+ var parentContainer = this.parent.getContainer();
+ if (!parentContainer) {
+ throw new Error('Cannot repaint groupset: parent has no container element');
+ }
+ if (!frame) {
+ frame = document.createElement('div');
+ frame.className = 'groupset';
+ this.dom.frame = frame;
+
+ var className = options.className;
+ if (className) {
+ util.addClassName(frame, util.option.asString(className));
}
- // create labels
- var labelContainer = asElement(options.labelContainer);
- if (!labelContainer) {
- throw new Error('Cannot repaint groupset: option "labelContainer" not defined');
+ changed += 1;
+ }
+ if (!frame.parentNode) {
+ parentContainer.appendChild(frame);
+ changed += 1;
+ }
+
+ // create labels
+ var labelContainer = asElement(options.labelContainer);
+ if (!labelContainer) {
+ throw new Error('Cannot repaint groupset: option "labelContainer" not defined');
+ }
+ if (!labels) {
+ labels = document.createElement('div');
+ labels.className = 'labels';
+ this.dom.labels = labels;
+ }
+ if (!labelSet) {
+ labelSet = document.createElement('div');
+ labelSet.className = 'label-set';
+ labels.appendChild(labelSet);
+ this.dom.labelSet = labelSet;
+ }
+ if (!labels.parentNode || labels.parentNode != labelContainer) {
+ if (labels.parentNode) {
+ labels.parentNode.removeChild(labels.parentNode);
}
- if (!labels) {
- labels = document.createElement('div');
- labels.className = 'labels';
- this.dom.labels = labels;
- }
- if (!labelSet) {
- labelSet = document.createElement('div');
- labelSet.className = 'label-set';
- labels.appendChild(labelSet);
- this.dom.labelSet = labelSet;
- }
- if (!labels.parentNode || labels.parentNode != labelContainer) {
- if (labels.parentNode) {
- labels.parentNode.removeChild(labels.parentNode);
- }
- labelContainer.appendChild(labels);
- }
-
- // reposition frame
- changed += update(frame.style, 'height', asSize(options.height, this.height + 'px'));
- changed += update(frame.style, 'top', asSize(options.top, '0px'));
- changed += update(frame.style, 'left', asSize(options.left, '0px'));
- changed += update(frame.style, 'width', asSize(options.width, '100%'));
-
- // reposition labels
- changed += update(labelSet.style, 'top', asSize(options.top, '0px'));
- changed += update(labelSet.style, 'height', asSize(options.height, this.height + 'px'));
-
- var me = this,
- queue = this.queue,
- groups = this.groups,
- groupsData = this.groupsData;
-
- // show/hide added/changed/removed groups
- var ids = Object.keys(queue);
- if (ids.length) {
- ids.forEach(function (id) {
- var action = queue[id];
- var group = groups[id];
-
- //noinspection FallthroughInSwitchStatementJS
- switch (action) {
- case 'add':
- case 'update':
- if (!group) {
- var groupOptions = Object.create(me.options);
- util.extend(groupOptions, {
- height: null,
- maxHeight: null
- });
-
- group = new Group(me, id, groupOptions);
- group.setItems(me.itemsData); // attach items data
- groups[id] = group;
-
- me.controller.add(group);
- }
-
- // TODO: update group data
- group.data = groupsData.get(id);
-
- delete queue[id];
- break;
-
- case 'remove':
- if (group) {
- group.setItems(); // detach items data
- delete groups[id];
-
- me.controller.remove(group);
- }
-
- // update lists
- delete queue[id];
- break;
-
- default:
- console.log('Error: unknown action "' + action + '"');
- }
- });
-
- // the groupset depends on each of the groups
- //this.depends = this.groups; // TODO: gives a circular reference through the parent
+ labelContainer.appendChild(labels);
+ }
+
+ // reposition frame
+ changed += update(frame.style, 'height', asSize(options.height, this.height + 'px'));
+ changed += update(frame.style, 'top', asSize(options.top, '0px'));
+ changed += update(frame.style, 'left', asSize(options.left, '0px'));
+ changed += update(frame.style, 'width', asSize(options.width, '100%'));
+
+ // reposition labels
+ changed += update(labelSet.style, 'top', asSize(options.top, '0px'));
+ changed += update(labelSet.style, 'height', asSize(options.height, this.height + 'px'));
+
+ var me = this,
+ queue = this.queue,
+ groups = this.groups,
+ groupsData = this.groupsData;
+
+ // show/hide added/changed/removed groups
+ var ids = Object.keys(queue);
+ if (ids.length) {
+ ids.forEach(function (id) {
+ var action = queue[id];
+ var group = groups[id];
+
+ //noinspection FallthroughInSwitchStatementJS
+ switch (action) {
+ case 'add':
+ case 'update':
+ if (!group) {
+ var groupOptions = Object.create(me.options);
+ util.extend(groupOptions, {
+ height: null,
+ maxHeight: null
+ });
+
+ group = new Group(me, id, groupOptions);
+ group.setItems(me.itemsData); // attach items data
+ groups[id] = group;
+
+ me.controller.add(group);
+ }
+
+ // TODO: update group data
+ group.data = groupsData.get(id);
+
+ delete queue[id];
+ break;
+
+ case 'remove':
+ if (group) {
+ group.setItems(); // detach items data
+ delete groups[id];
+
+ me.controller.remove(group);
+ }
+
+ // update lists
+ delete queue[id];
+ break;
+
+ default:
+ console.log('Error: unknown action "' + action + '"');
+ }
+ });
- // TODO: apply dependencies of the groupset
+ // the groupset depends on each of the groups
+ //this.depends = this.groups; // TODO: gives a circular reference through the parent
- // update the top positions of the groups in the correct order
- var orderedGroups = this.groupsData.getIds({
- order: this.options.groupOrder
- });
- for (i = 0; i < orderedGroups.length; i++) {
- (function (group, prevGroup) {
- var top = 0;
- if (prevGroup) {
- top = function () {
- // TODO: top must reckon with options.maxHeight
- return prevGroup.top + prevGroup.height;
- }
- }
- group.setOptions({
- top: top
- });
- })(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
- }
+ // TODO: apply dependencies of the groupset
- // (re)create the labels
- while (labelSet.firstChild) {
- labelSet.removeChild(labelSet.firstChild);
- }
- for (i = 0; i < orderedGroups.length; i++) {
- id = orderedGroups[i];
- label = this._createLabel(id);
- labelSet.appendChild(label);
+ // update the top positions of the groups in the correct order
+ var orderedGroups = this.groupsData.getIds({
+ order: this.options.groupOrder
+ });
+ for (i = 0; i < orderedGroups.length; i++) {
+ (function (group, prevGroup) {
+ var top = 0;
+ if (prevGroup) {
+ top = function () {
+ // TODO: top must reckon with options.maxHeight
+ return prevGroup.top + prevGroup.height;
+ }
}
+ group.setOptions({
+ top: top
+ });
+ })(groups[orderedGroups[i]], groups[orderedGroups[i - 1]]);
+ }
- changed++;
+ // (re)create the labels
+ while (labelSet.firstChild) {
+ labelSet.removeChild(labelSet.firstChild);
+ }
+ for (i = 0; i < orderedGroups.length; i++) {
+ id = orderedGroups[i];
+ label = this._createLabel(id);
+ labelSet.appendChild(label);
}
- // reposition the labels
- // TODO: labels are not displayed correctly when orientation=='top'
- // TODO: width of labelPanel is not immediately updated on a change in groups
- for (id in groups) {
- if (groups.hasOwnProperty(id)) {
- group = groups[id];
- label = group.label;
- if (label) {
- label.style.top = group.top + 'px';
- label.style.height = group.height + 'px';
- }
- }
+ changed++;
+ }
+
+ // reposition the labels
+ // TODO: labels are not displayed correctly when orientation=='top'
+ // TODO: width of labelPanel is not immediately updated on a change in groups
+ for (id in groups) {
+ if (groups.hasOwnProperty(id)) {
+ group = groups[id];
+ label = group.label;
+ if (label) {
+ label.style.top = group.top + 'px';
+ label.style.height = group.height + 'px';
+ }
}
+ }
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -336,29 +336,29 @@ GroupSet.prototype.repaint = function repaint() {
* @private
*/
GroupSet.prototype._createLabel = function(id) {
- var group = this.groups[id];
- var label = document.createElement('div');
- label.className = 'label';
- var inner = document.createElement('div');
- inner.className = 'inner';
- label.appendChild(inner);
-
- var content = group.data && group.data.content;
- if (content instanceof Element) {
- inner.appendChild(content);
- }
- else if (content != undefined) {
- inner.innerHTML = content;
- }
-
- var className = group.data && group.data.className;
- if (className) {
- util.addClassName(label, className);
- }
-
- group.label = label; // TODO: not so nice, parking labels in the group this way!!!
-
- return label;
+ var group = this.groups[id];
+ var label = document.createElement('div');
+ label.className = 'label';
+ var inner = document.createElement('div');
+ inner.className = 'inner';
+ label.appendChild(inner);
+
+ var content = group.data && group.data.content;
+ if (content instanceof Element) {
+ inner.appendChild(content);
+ }
+ else if (content != undefined) {
+ inner.innerHTML = content;
+ }
+
+ var className = group.data && group.data.className;
+ if (className) {
+ util.addClassName(label, className);
+ }
+
+ group.label = label; // TODO: not so nice, parking labels in the group this way!!!
+
+ return label;
};
/**
@@ -366,7 +366,7 @@ GroupSet.prototype._createLabel = function(id) {
* @return {HTMLElement} container
*/
GroupSet.prototype.getContainer = function getContainer() {
- return this.dom.frame;
+ return this.dom.frame;
};
/**
@@ -374,7 +374,7 @@ GroupSet.prototype.getContainer = function getContainer() {
* @return {Number} width
*/
GroupSet.prototype.getLabelsWidth = function getContainer() {
- return this.props.labels.width;
+ return this.props.labels.width;
};
/**
@@ -382,54 +382,54 @@ GroupSet.prototype.getLabelsWidth = function getContainer() {
* @return {Boolean} resized
*/
GroupSet.prototype.reflow = function reflow() {
- var changed = 0,
- id, group,
- options = this.options,
- update = util.updateProperty,
- asNumber = util.option.asNumber,
- asSize = util.option.asSize,
- frame = this.dom.frame;
-
- if (frame) {
- var maxHeight = asNumber(options.maxHeight);
- var fixedHeight = (asSize(options.height) != null);
- var height;
- if (fixedHeight) {
- height = frame.offsetHeight;
- }
- else {
- // height is not specified, calculate the sum of the height of all groups
- height = 0;
-
- for (id in this.groups) {
- if (this.groups.hasOwnProperty(id)) {
- group = this.groups[id];
- height += group.height;
- }
- }
- }
- if (maxHeight != null) {
- height = Math.min(height, maxHeight);
- }
- changed += update(this, 'height', height);
-
- changed += update(this, 'top', frame.offsetTop);
- changed += update(this, 'left', frame.offsetLeft);
- changed += update(this, 'width', frame.offsetWidth);
+ var changed = 0,
+ id, group,
+ options = this.options,
+ update = util.updateProperty,
+ asNumber = util.option.asNumber,
+ asSize = util.option.asSize,
+ frame = this.dom.frame;
+
+ if (frame) {
+ var maxHeight = asNumber(options.maxHeight);
+ var fixedHeight = (asSize(options.height) != null);
+ var height;
+ if (fixedHeight) {
+ height = frame.offsetHeight;
}
+ else {
+ // height is not specified, calculate the sum of the height of all groups
+ height = 0;
- // calculate the maximum width of the labels
- var width = 0;
- for (id in this.groups) {
+ for (id in this.groups) {
if (this.groups.hasOwnProperty(id)) {
- group = this.groups[id];
- var labelWidth = group.props && group.props.label && group.props.label.width || 0;
- width = Math.max(width, labelWidth);
+ group = this.groups[id];
+ height += group.height;
}
+ }
}
- changed += update(this.props.labels, 'width', width);
+ if (maxHeight != null) {
+ height = Math.min(height, maxHeight);
+ }
+ changed += update(this, 'height', height);
+
+ changed += update(this, 'top', frame.offsetTop);
+ changed += update(this, 'left', frame.offsetLeft);
+ changed += update(this, 'width', frame.offsetWidth);
+ }
+
+ // calculate the maximum width of the labels
+ var width = 0;
+ for (id in this.groups) {
+ if (this.groups.hasOwnProperty(id)) {
+ group = this.groups[id];
+ var labelWidth = group.props && group.props.label && group.props.label.width || 0;
+ width = Math.max(width, labelWidth);
+ }
+ }
+ changed += update(this.props.labels, 'width', width);
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -437,13 +437,13 @@ GroupSet.prototype.reflow = function reflow() {
* @return {Boolean} changed
*/
GroupSet.prototype.hide = function hide() {
- if (this.dom.frame && this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- return true;
- }
- else {
- return false;
- }
+ if (this.dom.frame && this.dom.frame.parentNode) {
+ this.dom.frame.parentNode.removeChild(this.dom.frame);
+ return true;
+ }
+ else {
+ return false;
+ }
};
/**
@@ -452,12 +452,12 @@ GroupSet.prototype.hide = function hide() {
* @return {Boolean} changed
*/
GroupSet.prototype.show = function show() {
- if (!this.dom.frame || !this.dom.frame.parentNode) {
- return this.repaint();
- }
- else {
- return false;
- }
+ if (!this.dom.frame || !this.dom.frame.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
};
/**
@@ -466,7 +466,7 @@ GroupSet.prototype.show = function show() {
* @private
*/
GroupSet.prototype._onUpdate = function _onUpdate(ids) {
- this._toQueue(ids, 'update');
+ this._toQueue(ids, 'update');
};
/**
@@ -475,7 +475,7 @@ GroupSet.prototype._onUpdate = function _onUpdate(ids) {
* @private
*/
GroupSet.prototype._onAdd = function _onAdd(ids) {
- this._toQueue(ids, 'add');
+ this._toQueue(ids, 'add');
};
/**
@@ -484,7 +484,7 @@ GroupSet.prototype._onAdd = function _onAdd(ids) {
* @private
*/
GroupSet.prototype._onRemove = function _onRemove(ids) {
- this._toQueue(ids, 'remove');
+ this._toQueue(ids, 'remove');
};
/**
@@ -493,13 +493,13 @@ GroupSet.prototype._onRemove = function _onRemove(ids) {
* @param {String} action can be 'add', 'update', 'remove'
*/
GroupSet.prototype._toQueue = function _toQueue(ids, action) {
- var queue = this.queue;
- ids.forEach(function (id) {
- queue[id] = action;
- });
-
- if (this.controller) {
- //this.requestReflow();
- this.requestRepaint();
- }
+ var queue = this.queue;
+ ids.forEach(function (id) {
+ queue[id] = action;
+ });
+
+ if (this.controller) {
+ //this.requestReflow();
+ this.requestRepaint();
+ }
};
diff --git a/src/timeline/component/ItemSet.js b/src/timeline/component/ItemSet.js
index 6973a375..f68a3572 100644
--- a/src/timeline/component/ItemSet.js
+++ b/src/timeline/component/ItemSet.js
@@ -12,63 +12,63 @@
*/
// TODO: improve performance by replacing all Array.forEach with a for loop
function ItemSet(parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
-
- // one options object is shared by this itemset and all its items
- this.options = options || {};
- this.defaultOptions = {
- type: 'box',
- align: 'center',
- orientation: 'bottom',
- margin: {
- axis: 20,
- item: 10
- },
- padding: 5
- };
-
- this.dom = {};
-
- var me = this;
- this.itemsData = null; // DataSet
- this.range = null; // Range or Object {start: number, end: number}
-
- this.listeners = {
- 'add': function (event, params, senderId) {
- if (senderId != me.id) {
- me._onAdd(params.items);
- }
- },
- 'update': function (event, params, senderId) {
- if (senderId != me.id) {
- me._onUpdate(params.items);
- }
- },
- 'remove': function (event, params, senderId) {
- if (senderId != me.id) {
- me._onRemove(params.items);
- }
- }
- };
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ // one options object is shared by this itemset and all its items
+ this.options = options || {};
+ this.defaultOptions = {
+ type: 'box',
+ align: 'center',
+ orientation: 'bottom',
+ margin: {
+ axis: 20,
+ item: 10
+ },
+ padding: 5
+ };
+
+ this.dom = {};
+
+ var me = this;
+ this.itemsData = null; // DataSet
+ this.range = null; // Range or Object {start: number, end: number}
+
+ this.listeners = {
+ 'add': function (event, params, senderId) {
+ if (senderId != me.id) {
+ me._onAdd(params.items);
+ }
+ },
+ 'update': function (event, params, senderId) {
+ if (senderId != me.id) {
+ me._onUpdate(params.items);
+ }
+ },
+ 'remove': function (event, params, senderId) {
+ if (senderId != me.id) {
+ me._onRemove(params.items);
+ }
+ }
+ };
- this.items = {}; // object with an Item for every data item
- this.queue = {}; // queue with id/actions: 'add', 'update', 'delete'
- this.stack = new Stack(this, Object.create(this.options));
- this.conversion = null;
+ this.items = {}; // object with an Item for every data item
+ this.queue = {}; // queue with id/actions: 'add', 'update', 'delete'
+ this.stack = new Stack(this, Object.create(this.options));
+ this.conversion = null;
- // TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
+ // TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
}
ItemSet.prototype = new Panel();
// available item types will be registered here
ItemSet.types = {
- box: ItemBox,
- range: ItemRange,
- rangeoverflow: ItemRangeOverflow,
- point: ItemPoint
+ box: ItemBox,
+ range: ItemRange,
+ rangeoverflow: ItemRangeOverflow,
+ point: ItemPoint
};
/**
@@ -103,11 +103,11 @@ ItemSet.prototype.setOptions = Component.prototype.setOptions;
* @param {Range | Object} range A Range or an object containing start and end.
*/
ItemSet.prototype.setRange = function setRange(range) {
- if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
- throw new TypeError('Range must be an instance of Range, ' +
- 'or an object containing start and end.');
- }
- this.range = range;
+ if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
+ throw new TypeError('Range must be an instance of Range, ' +
+ 'or an object containing start and end.');
+ }
+ this.range = range;
};
/**
@@ -115,170 +115,170 @@ ItemSet.prototype.setRange = function setRange(range) {
* @return {Boolean} changed
*/
ItemSet.prototype.repaint = function repaint() {
- var changed = 0,
- update = util.updateProperty,
- asSize = util.option.asSize,
- options = this.options,
- orientation = this.getOption('orientation'),
- defaultOptions = this.defaultOptions,
- frame = this.frame;
-
- if (!frame) {
- frame = document.createElement('div');
- frame.className = 'itemset';
-
- var className = options.className;
- if (className) {
- util.addClassName(frame, util.option.asString(className));
- }
-
- // create background panel
- var background = document.createElement('div');
- background.className = 'background';
- frame.appendChild(background);
- this.dom.background = background;
-
- // create foreground panel
- var foreground = document.createElement('div');
- foreground.className = 'foreground';
- frame.appendChild(foreground);
- this.dom.foreground = foreground;
-
- // create axis panel
- var axis = document.createElement('div');
- axis.className = 'itemset-axis';
- //frame.appendChild(axis);
- this.dom.axis = axis;
-
- this.frame = frame;
- changed += 1;
+ var changed = 0,
+ update = util.updateProperty,
+ asSize = util.option.asSize,
+ options = this.options,
+ orientation = this.getOption('orientation'),
+ defaultOptions = this.defaultOptions,
+ frame = this.frame;
+
+ if (!frame) {
+ frame = document.createElement('div');
+ frame.className = 'itemset';
+
+ var className = options.className;
+ if (className) {
+ util.addClassName(frame, util.option.asString(className));
}
- if (!this.parent) {
- throw new Error('Cannot repaint itemset: no parent attached');
- }
- var parentContainer = this.parent.getContainer();
- if (!parentContainer) {
- throw new Error('Cannot repaint itemset: parent has no container element');
- }
- if (!frame.parentNode) {
- parentContainer.appendChild(frame);
- changed += 1;
- }
- if (!this.dom.axis.parentNode) {
- parentContainer.appendChild(this.dom.axis);
- changed += 1;
- }
+ // create background panel
+ var background = document.createElement('div');
+ background.className = 'background';
+ frame.appendChild(background);
+ this.dom.background = background;
+
+ // create foreground panel
+ var foreground = document.createElement('div');
+ foreground.className = 'foreground';
+ frame.appendChild(foreground);
+ this.dom.foreground = foreground;
+
+ // create axis panel
+ var axis = document.createElement('div');
+ axis.className = 'itemset-axis';
+ //frame.appendChild(axis);
+ this.dom.axis = axis;
+
+ this.frame = frame;
+ changed += 1;
+ }
+
+ if (!this.parent) {
+ throw new Error('Cannot repaint itemset: no parent attached');
+ }
+ var parentContainer = this.parent.getContainer();
+ if (!parentContainer) {
+ throw new Error('Cannot repaint itemset: parent has no container element');
+ }
+ if (!frame.parentNode) {
+ parentContainer.appendChild(frame);
+ changed += 1;
+ }
+ if (!this.dom.axis.parentNode) {
+ parentContainer.appendChild(this.dom.axis);
+ changed += 1;
+ }
+
+ // reposition frame
+ changed += update(frame.style, 'left', asSize(options.left, '0px'));
+ changed += update(frame.style, 'top', asSize(options.top, '0px'));
+ changed += update(frame.style, 'width', asSize(options.width, '100%'));
+ changed += update(frame.style, 'height', asSize(options.height, this.height + 'px'));
+
+ // reposition axis
+ changed += update(this.dom.axis.style, 'left', asSize(options.left, '0px'));
+ changed += update(this.dom.axis.style, 'width', asSize(options.width, '100%'));
+ if (orientation == 'bottom') {
+ changed += update(this.dom.axis.style, 'top', (this.height + this.top) + 'px');
+ }
+ else { // orientation == 'top'
+ changed += update(this.dom.axis.style, 'top', this.top + 'px');
+ }
+
+ this._updateConversion();
+
+ var me = this,
+ queue = this.queue,
+ itemsData = this.itemsData,
+ items = this.items,
+ dataOptions = {
+ // TODO: cleanup
+ // fields: [(itemsData && itemsData.fieldId || 'id'), 'start', 'end', 'content', 'type', 'className']
+ };
+
+ // show/hide added/changed/removed items
+ Object.keys(queue).forEach(function (id) {
+ //var entry = queue[id];
+ var action = queue[id];
+ var item = items[id];
+ //var item = entry.item;
+ //noinspection FallthroughInSwitchStatementJS
+ switch (action) {
+ case 'add':
+ case 'update':
+ var itemData = itemsData && itemsData.get(id, dataOptions);
+
+ if (itemData) {
+ var type = itemData.type ||
+ (itemData.start && itemData.end && 'range') ||
+ options.type ||
+ 'box';
+ var constructor = ItemSet.types[type];
+
+ // TODO: how to handle items with invalid data? hide them and give a warning? or throw an error?
+ if (item) {
+ // update item
+ if (!constructor || !(item instanceof constructor)) {
+ // item type has changed, hide and delete the item
+ changed += item.hide();
+ item = null;
+ }
+ else {
+ item.data = itemData; // TODO: create a method item.setData ?
+ changed++;
+ }
+ }
- // reposition frame
- changed += update(frame.style, 'left', asSize(options.left, '0px'));
- changed += update(frame.style, 'top', asSize(options.top, '0px'));
- changed += update(frame.style, 'width', asSize(options.width, '100%'));
- changed += update(frame.style, 'height', asSize(options.height, this.height + 'px'));
-
- // reposition axis
- changed += update(this.dom.axis.style, 'left', asSize(options.left, '0px'));
- changed += update(this.dom.axis.style, 'width', asSize(options.width, '100%'));
- if (orientation == 'bottom') {
- changed += update(this.dom.axis.style, 'top', (this.height + this.top) + 'px');
- }
- else { // orientation == 'top'
- changed += update(this.dom.axis.style, 'top', this.top + 'px');
- }
+ if (!item) {
+ // create item
+ if (constructor) {
+ item = new constructor(me, itemData, options, defaultOptions);
+ changed++;
+ }
+ else {
+ throw new TypeError('Unknown item type "' + type + '"');
+ }
+ }
- this._updateConversion();
+ // force a repaint (not only a reposition)
+ item.repaint();
- var me = this,
- queue = this.queue,
- itemsData = this.itemsData,
- items = this.items,
- dataOptions = {
- // TODO: cleanup
- // fields: [(itemsData && itemsData.fieldId || 'id'), 'start', 'end', 'content', 'type', 'className']
- };
-
- // show/hide added/changed/removed items
- Object.keys(queue).forEach(function (id) {
- //var entry = queue[id];
- var action = queue[id];
- var item = items[id];
- //var item = entry.item;
- //noinspection FallthroughInSwitchStatementJS
- switch (action) {
- case 'add':
- case 'update':
- var itemData = itemsData && itemsData.get(id, dataOptions);
-
- if (itemData) {
- var type = itemData.type ||
- (itemData.start && itemData.end && 'range') ||
- options.type ||
- 'box';
- var constructor = ItemSet.types[type];
-
- // TODO: how to handle items with invalid data? hide them and give a warning? or throw an error?
- if (item) {
- // update item
- if (!constructor || !(item instanceof constructor)) {
- // item type has changed, hide and delete the item
- changed += item.hide();
- item = null;
- }
- else {
- item.data = itemData; // TODO: create a method item.setData ?
- changed++;
- }
- }
-
- if (!item) {
- // create item
- if (constructor) {
- item = new constructor(me, itemData, options, defaultOptions);
- changed++;
- }
- else {
- throw new TypeError('Unknown item type "' + type + '"');
- }
- }
-
- // force a repaint (not only a reposition)
- item.repaint();
-
- items[id] = item;
- }
-
- // update queue
- delete queue[id];
- break;
-
- case 'remove':
- if (item) {
- // remove DOM of the item
- changed += item.hide();
- }
-
- // update lists
- delete items[id];
- delete queue[id];
- break;
-
- default:
- console.log('Error: unknown action "' + action + '"');
+ items[id] = item;
}
- });
- // reposition all items. Show items only when in the visible area
- util.forEach(this.items, function (item) {
- if (item.visible) {
- changed += item.show();
- item.reposition();
- }
- else {
- changed += item.hide();
+ // update queue
+ delete queue[id];
+ break;
+
+ case 'remove':
+ if (item) {
+ // remove DOM of the item
+ changed += item.hide();
}
- });
- return (changed > 0);
+ // update lists
+ delete items[id];
+ delete queue[id];
+ break;
+
+ default:
+ console.log('Error: unknown action "' + action + '"');
+ }
+ });
+
+ // reposition all items. Show items only when in the visible area
+ util.forEach(this.items, function (item) {
+ if (item.visible) {
+ changed += item.show();
+ item.reposition();
+ }
+ else {
+ changed += item.hide();
+ }
+ });
+
+ return (changed > 0);
};
/**
@@ -286,7 +286,7 @@ ItemSet.prototype.repaint = function repaint() {
* @return {HTMLElement} foreground
*/
ItemSet.prototype.getForeground = function getForeground() {
- return this.dom.foreground;
+ return this.dom.foreground;
};
/**
@@ -294,7 +294,7 @@ ItemSet.prototype.getForeground = function getForeground() {
* @return {HTMLElement} background
*/
ItemSet.prototype.getBackground = function getBackground() {
- return this.dom.background;
+ return this.dom.background;
};
/**
@@ -302,7 +302,7 @@ ItemSet.prototype.getBackground = function getBackground() {
* @return {HTMLElement} axis
*/
ItemSet.prototype.getAxis = function getAxis() {
- return this.dom.axis;
+ return this.dom.axis;
};
/**
@@ -310,63 +310,63 @@ ItemSet.prototype.getAxis = function getAxis() {
* @return {Boolean} resized
*/
ItemSet.prototype.reflow = function reflow () {
- var changed = 0,
- options = this.options,
- marginAxis = options.margin && options.margin.axis || this.defaultOptions.margin.axis,
- marginItem = options.margin && options.margin.item || this.defaultOptions.margin.item,
- update = util.updateProperty,
- asNumber = util.option.asNumber,
- asSize = util.option.asSize,
- frame = this.frame;
-
- if (frame) {
- this._updateConversion();
-
- util.forEach(this.items, function (item) {
- changed += item.reflow();
- });
+ var changed = 0,
+ options = this.options,
+ marginAxis = options.margin && options.margin.axis || this.defaultOptions.margin.axis,
+ marginItem = options.margin && options.margin.item || this.defaultOptions.margin.item,
+ update = util.updateProperty,
+ asNumber = util.option.asNumber,
+ asSize = util.option.asSize,
+ frame = this.frame;
+
+ if (frame) {
+ this._updateConversion();
- // TODO: stack.update should be triggered via an event, in stack itself
- // TODO: only update the stack when there are changed items
- this.stack.update();
+ util.forEach(this.items, function (item) {
+ changed += item.reflow();
+ });
- var maxHeight = asNumber(options.maxHeight);
- var fixedHeight = (asSize(options.height) != null);
- var height;
- if (fixedHeight) {
- height = frame.offsetHeight;
- }
- else {
- // height is not specified, determine the height from the height and positioned items
- var visibleItems = this.stack.ordered; // TODO: not so nice way to get the filtered items
- if (visibleItems.length) {
- var min = visibleItems[0].top;
- var max = visibleItems[0].top + visibleItems[0].height;
- util.forEach(visibleItems, function (item) {
- min = Math.min(min, item.top);
- max = Math.max(max, (item.top + item.height));
- });
- height = (max - min) + marginAxis + marginItem;
- }
- else {
- height = marginAxis + marginItem;
- }
- }
- if (maxHeight != null) {
- height = Math.min(height, maxHeight);
- }
- changed += update(this, 'height', height);
+ // TODO: stack.update should be triggered via an event, in stack itself
+ // TODO: only update the stack when there are changed items
+ this.stack.update();
- // calculate height from items
- changed += update(this, 'top', frame.offsetTop);
- changed += update(this, 'left', frame.offsetLeft);
- changed += update(this, 'width', frame.offsetWidth);
+ var maxHeight = asNumber(options.maxHeight);
+ var fixedHeight = (asSize(options.height) != null);
+ var height;
+ if (fixedHeight) {
+ height = frame.offsetHeight;
}
else {
- changed += 1;
+ // height is not specified, determine the height from the height and positioned items
+ var visibleItems = this.stack.ordered; // TODO: not so nice way to get the filtered items
+ if (visibleItems.length) {
+ var min = visibleItems[0].top;
+ var max = visibleItems[0].top + visibleItems[0].height;
+ util.forEach(visibleItems, function (item) {
+ min = Math.min(min, item.top);
+ max = Math.max(max, (item.top + item.height));
+ });
+ height = (max - min) + marginAxis + marginItem;
+ }
+ else {
+ height = marginAxis + marginItem;
+ }
}
-
- return (changed > 0);
+ if (maxHeight != null) {
+ height = Math.min(height, maxHeight);
+ }
+ changed += update(this, 'height', height);
+
+ // calculate height from items
+ changed += update(this, 'top', frame.offsetTop);
+ changed += update(this, 'left', frame.offsetLeft);
+ changed += update(this, 'width', frame.offsetWidth);
+ }
+ else {
+ changed += 1;
+ }
+
+ return (changed > 0);
};
/**
@@ -374,19 +374,19 @@ ItemSet.prototype.reflow = function reflow () {
* @return {Boolean} changed
*/
ItemSet.prototype.hide = function hide() {
- var changed = false;
-
- // remove the DOM
- if (this.frame && this.frame.parentNode) {
- this.frame.parentNode.removeChild(this.frame);
- changed = true;
- }
- if (this.dom.axis && this.dom.axis.parentNode) {
- this.dom.axis.parentNode.removeChild(this.dom.axis);
- changed = true;
- }
-
- return changed;
+ var changed = false;
+
+ // remove the DOM
+ if (this.frame && this.frame.parentNode) {
+ this.frame.parentNode.removeChild(this.frame);
+ changed = true;
+ }
+ if (this.dom.axis && this.dom.axis.parentNode) {
+ this.dom.axis.parentNode.removeChild(this.dom.axis);
+ changed = true;
+ }
+
+ return changed;
};
/**
@@ -394,43 +394,43 @@ ItemSet.prototype.hide = function hide() {
* @param {vis.DataSet | null} items
*/
ItemSet.prototype.setItems = function setItems(items) {
- var me = this,
- ids,
- oldItemsData = this.itemsData;
-
- // replace the dataset
- if (!items) {
- this.itemsData = null;
- }
- else if (items instanceof DataSet || items instanceof DataView) {
- this.itemsData = items;
- }
- else {
- throw new TypeError('Data must be an instance of DataSet');
- }
+ var me = this,
+ ids,
+ oldItemsData = this.itemsData;
+
+ // replace the dataset
+ if (!items) {
+ this.itemsData = null;
+ }
+ else if (items instanceof DataSet || items instanceof DataView) {
+ this.itemsData = items;
+ }
+ else {
+ throw new TypeError('Data must be an instance of DataSet');
+ }
+
+ if (oldItemsData) {
+ // unsubscribe from old dataset
+ util.forEach(this.listeners, function (callback, event) {
+ oldItemsData.unsubscribe(event, callback);
+ });
- if (oldItemsData) {
- // unsubscribe from old dataset
- util.forEach(this.listeners, function (callback, event) {
- oldItemsData.unsubscribe(event, callback);
- });
+ // remove all drawn items
+ ids = oldItemsData.getIds();
+ this._onRemove(ids);
+ }
- // remove all drawn items
- ids = oldItemsData.getIds();
- this._onRemove(ids);
- }
-
- if (this.itemsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.listeners, function (callback, event) {
- me.itemsData.subscribe(event, callback, id);
- });
+ if (this.itemsData) {
+ // subscribe to new dataset
+ var id = this.id;
+ util.forEach(this.listeners, function (callback, event) {
+ me.itemsData.subscribe(event, callback, id);
+ });
- // draw all new items
- ids = this.itemsData.getIds();
- this._onAdd(ids);
- }
+ // draw all new items
+ ids = this.itemsData.getIds();
+ this._onAdd(ids);
+ }
};
/**
@@ -438,7 +438,7 @@ ItemSet.prototype.setItems = function setItems(items) {
* @returns {vis.DataSet | null}
*/
ItemSet.prototype.getItems = function getItems() {
- return this.itemsData;
+ return this.itemsData;
};
/**
@@ -447,7 +447,7 @@ ItemSet.prototype.getItems = function getItems() {
* @private
*/
ItemSet.prototype._onUpdate = function _onUpdate(ids) {
- this._toQueue('update', ids);
+ this._toQueue('update', ids);
};
/**
@@ -456,7 +456,7 @@ ItemSet.prototype._onUpdate = function _onUpdate(ids) {
* @private
*/
ItemSet.prototype._onAdd = function _onAdd(ids) {
- this._toQueue('add', ids);
+ this._toQueue('add', ids);
};
/**
@@ -465,7 +465,7 @@ ItemSet.prototype._onAdd = function _onAdd(ids) {
* @private
*/
ItemSet.prototype._onRemove = function _onRemove(ids) {
- this._toQueue('remove', ids);
+ this._toQueue('remove', ids);
};
/**
@@ -474,15 +474,15 @@ ItemSet.prototype._onRemove = function _onRemove(ids) {
* @param {Number[]} ids
*/
ItemSet.prototype._toQueue = function _toQueue(action, ids) {
- var queue = this.queue;
- ids.forEach(function (id) {
- queue[id] = action;
- });
-
- if (this.controller) {
- //this.requestReflow();
- this.requestRepaint();
- }
+ var queue = this.queue;
+ ids.forEach(function (id) {
+ queue[id] = action;
+ });
+
+ if (this.controller) {
+ //this.requestReflow();
+ this.requestRepaint();
+ }
};
/**
@@ -493,17 +493,17 @@ ItemSet.prototype._toQueue = function _toQueue(action, ids) {
* @private
*/
ItemSet.prototype._updateConversion = function _updateConversion() {
- var range = this.range;
- if (!range) {
- throw new Error('No range configured');
- }
-
- if (range.conversion) {
- this.conversion = range.conversion(this.width);
- }
- else {
- this.conversion = Range.conversion(range.start, range.end, this.width);
- }
+ var range = this.range;
+ if (!range) {
+ throw new Error('No range configured');
+ }
+
+ if (range.conversion) {
+ this.conversion = range.conversion(this.width);
+ }
+ else {
+ this.conversion = Range.conversion(range.start, range.end, this.width);
+ }
};
/**
@@ -514,8 +514,8 @@ ItemSet.prototype._updateConversion = function _updateConversion() {
* @return {Date} time The datetime the corresponds with given position x
*/
ItemSet.prototype.toTime = function toTime(x) {
- var conversion = this.conversion;
- return new Date(x / conversion.scale + conversion.offset);
+ var conversion = this.conversion;
+ return new Date(x / conversion.scale + conversion.offset);
};
/**
@@ -527,6 +527,6 @@ ItemSet.prototype.toTime = function toTime(x) {
* with the given date.
*/
ItemSet.prototype.toScreen = function toScreen(time) {
- var conversion = this.conversion;
- return (time.valueOf() - conversion.offset) * conversion.scale;
+ var conversion = this.conversion;
+ return (time.valueOf() - conversion.offset) * conversion.scale;
};
diff --git a/src/timeline/component/Panel.js b/src/timeline/component/Panel.js
index 53b41412..e3badfae 100644
--- a/src/timeline/component/Panel.js
+++ b/src/timeline/component/Panel.js
@@ -13,11 +13,11 @@
* @extends Component
*/
function Panel(parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
- this.options = options || {};
+ this.options = options || {};
}
Panel.prototype = new Component();
@@ -39,7 +39,7 @@ Panel.prototype.setOptions = Component.prototype.setOptions;
* @returns {HTMLElement} container
*/
Panel.prototype.getContainer = function () {
- return this.frame;
+ return this.frame;
};
/**
@@ -47,46 +47,46 @@ Panel.prototype.getContainer = function () {
* @return {Boolean} changed
*/
Panel.prototype.repaint = function () {
- var changed = 0,
- update = util.updateProperty,
- asSize = util.option.asSize,
- options = this.options,
- frame = this.frame;
- if (!frame) {
- frame = document.createElement('div');
- frame.className = 'panel';
+ var changed = 0,
+ update = util.updateProperty,
+ asSize = util.option.asSize,
+ options = this.options,
+ frame = this.frame;
+ if (!frame) {
+ frame = document.createElement('div');
+ frame.className = 'panel';
- var className = options.className;
- if (className) {
- if (typeof className == 'function') {
- util.addClassName(frame, String(className()));
- }
- else {
- util.addClassName(frame, String(className));
- }
- }
+ var className = options.className;
+ if (className) {
+ if (typeof className == 'function') {
+ util.addClassName(frame, String(className()));
+ }
+ else {
+ util.addClassName(frame, String(className));
+ }
+ }
- this.frame = frame;
- changed += 1;
+ this.frame = frame;
+ changed += 1;
+ }
+ if (!frame.parentNode) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint panel: no parent attached');
}
- if (!frame.parentNode) {
- if (!this.parent) {
- throw new Error('Cannot repaint panel: no parent attached');
- }
- var parentContainer = this.parent.getContainer();
- if (!parentContainer) {
- throw new Error('Cannot repaint panel: parent has no container element');
- }
- parentContainer.appendChild(frame);
- changed += 1;
+ var parentContainer = this.parent.getContainer();
+ if (!parentContainer) {
+ throw new Error('Cannot repaint panel: parent has no container element');
}
+ parentContainer.appendChild(frame);
+ changed += 1;
+ }
- changed += update(frame.style, 'top', asSize(options.top, '0px'));
- changed += update(frame.style, 'left', asSize(options.left, '0px'));
- changed += update(frame.style, 'width', asSize(options.width, '100%'));
- changed += update(frame.style, 'height', asSize(options.height, '100%'));
+ changed += update(frame.style, 'top', asSize(options.top, '0px'));
+ changed += update(frame.style, 'left', asSize(options.left, '0px'));
+ changed += update(frame.style, 'width', asSize(options.width, '100%'));
+ changed += update(frame.style, 'height', asSize(options.height, '100%'));
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -94,19 +94,19 @@ Panel.prototype.repaint = function () {
* @return {Boolean} resized
*/
Panel.prototype.reflow = function () {
- var changed = 0,
- update = util.updateProperty,
- frame = this.frame;
+ var changed = 0,
+ update = util.updateProperty,
+ frame = this.frame;
- if (frame) {
- changed += update(this, 'top', frame.offsetTop);
- changed += update(this, 'left', frame.offsetLeft);
- changed += update(this, 'width', frame.offsetWidth);
- changed += update(this, 'height', frame.offsetHeight);
- }
- else {
- changed += 1;
- }
+ if (frame) {
+ changed += update(this, 'top', frame.offsetTop);
+ changed += update(this, 'left', frame.offsetLeft);
+ changed += update(this, 'width', frame.offsetWidth);
+ changed += update(this, 'height', frame.offsetHeight);
+ }
+ else {
+ changed += 1;
+ }
- return (changed > 0);
+ return (changed > 0);
};
diff --git a/src/timeline/component/RootPanel.js b/src/timeline/component/RootPanel.js
index f55af08f..6bfd2db2 100644
--- a/src/timeline/component/RootPanel.js
+++ b/src/timeline/component/RootPanel.js
@@ -7,15 +7,15 @@
* @extends Panel
*/
function RootPanel(container, options) {
- this.id = util.randomUUID();
- this.container = container;
+ this.id = util.randomUUID();
+ this.container = container;
- this.options = options || {};
- this.defaultOptions = {
- autoResize: true
- };
+ this.options = options || {};
+ this.defaultOptions = {
+ autoResize: true
+ };
- this.listeners = {}; // event listeners
+ this.listeners = {}; // event listeners
}
RootPanel.prototype = new Panel();
@@ -37,42 +37,42 @@ RootPanel.prototype.setOptions = Component.prototype.setOptions;
* @return {Boolean} changed
*/
RootPanel.prototype.repaint = function () {
- var changed = 0,
- update = util.updateProperty,
- asSize = util.option.asSize,
- options = this.options,
- frame = this.frame;
-
- if (!frame) {
- frame = document.createElement('div');
-
- this.frame = frame;
-
- changed += 1;
- }
- if (!frame.parentNode) {
- if (!this.container) {
- throw new Error('Cannot repaint root panel: no container attached');
- }
- this.container.appendChild(frame);
- changed += 1;
+ var changed = 0,
+ update = util.updateProperty,
+ asSize = util.option.asSize,
+ options = this.options,
+ frame = this.frame;
+
+ if (!frame) {
+ frame = document.createElement('div');
+
+ this.frame = frame;
+
+ changed += 1;
+ }
+ if (!frame.parentNode) {
+ if (!this.container) {
+ throw new Error('Cannot repaint root panel: no container attached');
}
+ this.container.appendChild(frame);
+ changed += 1;
+ }
- frame.className = 'vis timeline rootpanel ' + options.orientation;
- var className = options.className;
- if (className) {
- util.addClassName(frame, util.option.asString(className));
- }
+ frame.className = 'vis timeline rootpanel ' + options.orientation;
+ var className = options.className;
+ if (className) {
+ util.addClassName(frame, util.option.asString(className));
+ }
- changed += update(frame.style, 'top', asSize(options.top, '0px'));
- changed += update(frame.style, 'left', asSize(options.left, '0px'));
- changed += update(frame.style, 'width', asSize(options.width, '100%'));
- changed += update(frame.style, 'height', asSize(options.height, '100%'));
+ changed += update(frame.style, 'top', asSize(options.top, '0px'));
+ changed += update(frame.style, 'left', asSize(options.left, '0px'));
+ changed += update(frame.style, 'width', asSize(options.width, '100%'));
+ changed += update(frame.style, 'height', asSize(options.height, '100%'));
- this._updateEventEmitters();
- this._updateWatch();
+ this._updateEventEmitters();
+ this._updateWatch();
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -80,21 +80,21 @@ RootPanel.prototype.repaint = function () {
* @return {Boolean} resized
*/
RootPanel.prototype.reflow = function () {
- var changed = 0,
- update = util.updateProperty,
- frame = this.frame;
-
- if (frame) {
- changed += update(this, 'top', frame.offsetTop);
- changed += update(this, 'left', frame.offsetLeft);
- changed += update(this, 'width', frame.offsetWidth);
- changed += update(this, 'height', frame.offsetHeight);
- }
- else {
- changed += 1;
- }
-
- return (changed > 0);
+ var changed = 0,
+ update = util.updateProperty,
+ frame = this.frame;
+
+ if (frame) {
+ changed += update(this, 'top', frame.offsetTop);
+ changed += update(this, 'left', frame.offsetLeft);
+ changed += update(this, 'width', frame.offsetWidth);
+ changed += update(this, 'height', frame.offsetHeight);
+ }
+ else {
+ changed += 1;
+ }
+
+ return (changed > 0);
};
/**
@@ -102,13 +102,13 @@ RootPanel.prototype.reflow = function () {
* @private
*/
RootPanel.prototype._updateWatch = function () {
- var autoResize = this.getOption('autoResize');
- if (autoResize) {
- this._watch();
- }
- else {
- this._unwatch();
- }
+ var autoResize = this.getOption('autoResize');
+ if (autoResize) {
+ this._watch();
+ }
+ else {
+ this._unwatch();
+ }
};
/**
@@ -117,31 +117,31 @@ RootPanel.prototype._updateWatch = function () {
* @private
*/
RootPanel.prototype._watch = function () {
- var me = this;
+ var me = this;
- this._unwatch();
+ this._unwatch();
- var checkSize = function () {
- var autoResize = me.getOption('autoResize');
- if (!autoResize) {
- // stop watching when the option autoResize is changed to false
- me._unwatch();
- return;
- }
+ var checkSize = function () {
+ var autoResize = me.getOption('autoResize');
+ if (!autoResize) {
+ // stop watching when the option autoResize is changed to false
+ me._unwatch();
+ return;
+ }
- if (me.frame) {
- // check whether the frame is resized
- if ((me.frame.clientWidth != me.width) ||
- (me.frame.clientHeight != me.height)) {
- me.requestReflow();
- }
- }
- };
+ if (me.frame) {
+ // check whether the frame is resized
+ if ((me.frame.clientWidth != me.width) ||
+ (me.frame.clientHeight != me.height)) {
+ me.requestReflow();
+ }
+ }
+ };
- // TODO: automatically cleanup the event listener when the frame is deleted
- util.addEventListener(window, 'resize', checkSize);
+ // TODO: automatically cleanup the event listener when the frame is deleted
+ util.addEventListener(window, 'resize', checkSize);
- this.watchTimer = setInterval(checkSize, 1000);
+ this.watchTimer = setInterval(checkSize, 1000);
};
/**
@@ -149,12 +149,12 @@ RootPanel.prototype._watch = function () {
* @private
*/
RootPanel.prototype._unwatch = function () {
- if (this.watchTimer) {
- clearInterval(this.watchTimer);
- this.watchTimer = undefined;
- }
+ if (this.watchTimer) {
+ clearInterval(this.watchTimer);
+ this.watchTimer = undefined;
+ }
- // TODO: remove event listener on window.resize
+ // TODO: remove event listener on window.resize
};
/**
@@ -164,15 +164,15 @@ RootPanel.prototype._unwatch = function () {
* as parameter.
*/
RootPanel.prototype.on = function (event, callback) {
- // register the listener at this component
- var arr = this.listeners[event];
- if (!arr) {
- arr = [];
- this.listeners[event] = arr;
- }
- arr.push(callback);
-
- this._updateEventEmitters();
+ // register the listener at this component
+ var arr = this.listeners[event];
+ if (!arr) {
+ arr = [];
+ this.listeners[event] = arr;
+ }
+ arr.push(callback);
+
+ this._updateEventEmitters();
};
/**
@@ -180,36 +180,36 @@ RootPanel.prototype.on = function (event, callback) {
* @private
*/
RootPanel.prototype._updateEventEmitters = function () {
- if (this.listeners) {
- var me = this;
- util.forEach(this.listeners, function (listeners, event) {
- if (!me.emitters) {
- me.emitters = {};
- }
- if (!(event in me.emitters)) {
- // create event
- var frame = me.frame;
- if (frame) {
- //console.log('Created a listener for event ' + event + ' on component ' + me.id); // TODO: cleanup logging
- var callback = function(event) {
- listeners.forEach(function (listener) {
- // TODO: filter on event target!
- listener(event);
- });
- };
- me.emitters[event] = callback;
-
- if (!me.hammer) {
- me.hammer = Hammer(frame, {
- prevent_default: true
- });
- }
- me.hammer.on(event, callback);
- }
- }
- });
-
- // TODO: be able to delete event listeners
- // TODO: be able to move event listeners to a parent when available
- }
+ if (this.listeners) {
+ var me = this;
+ util.forEach(this.listeners, function (listeners, event) {
+ if (!me.emitters) {
+ me.emitters = {};
+ }
+ if (!(event in me.emitters)) {
+ // create event
+ var frame = me.frame;
+ if (frame) {
+ //console.log('Created a listener for event ' + event + ' on component ' + me.id); // TODO: cleanup logging
+ var callback = function(event) {
+ listeners.forEach(function (listener) {
+ // TODO: filter on event target!
+ listener(event);
+ });
+ };
+ me.emitters[event] = callback;
+
+ if (!me.hammer) {
+ me.hammer = Hammer(frame, {
+ prevent_default: true
+ });
+ }
+ me.hammer.on(event, callback);
+ }
+ }
+ });
+
+ // TODO: be able to delete event listeners
+ // TODO: be able to move event listeners to a parent when available
+ }
};
diff --git a/src/timeline/component/TimeAxis.js b/src/timeline/component/TimeAxis.js
index 090bd62c..dadb37d2 100644
--- a/src/timeline/component/TimeAxis.js
+++ b/src/timeline/component/TimeAxis.js
@@ -9,41 +9,41 @@
* @extends Component
*/
function TimeAxis (parent, depends, options) {
- this.id = util.randomUUID();
- this.parent = parent;
- this.depends = depends;
-
- this.dom = {
- majorLines: [],
- majorTexts: [],
- minorLines: [],
- minorTexts: [],
- redundant: {
- majorLines: [],
- majorTexts: [],
- minorLines: [],
- minorTexts: []
- }
- };
- this.props = {
- range: {
- start: 0,
- end: 0,
- minimumStep: 0
- },
- lineTop: 0
- };
-
- this.options = options || {};
- this.defaultOptions = {
- orientation: 'bottom', // supported: 'top', 'bottom'
- // TODO: implement timeaxis orientations 'left' and 'right'
- showMinorLabels: true,
- showMajorLabels: true
- };
-
- this.conversion = null;
- this.range = null;
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ this.dom = {
+ majorLines: [],
+ majorTexts: [],
+ minorLines: [],
+ minorTexts: [],
+ redundant: {
+ majorLines: [],
+ majorTexts: [],
+ minorLines: [],
+ minorTexts: []
+ }
+ };
+ this.props = {
+ range: {
+ start: 0,
+ end: 0,
+ minimumStep: 0
+ },
+ lineTop: 0
+ };
+
+ this.options = options || {};
+ this.defaultOptions = {
+ orientation: 'bottom', // supported: 'top', 'bottom'
+ // TODO: implement timeaxis orientations 'left' and 'right'
+ showMinorLabels: true,
+ showMajorLabels: true
+ };
+
+ this.conversion = null;
+ this.range = null;
}
TimeAxis.prototype = new Component();
@@ -56,11 +56,11 @@ TimeAxis.prototype.setOptions = Component.prototype.setOptions;
* @param {Range | Object} range A Range or an object containing start and end.
*/
TimeAxis.prototype.setRange = function (range) {
- if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
- throw new TypeError('Range must be an instance of Range, ' +
- 'or an object containing start and end.');
- }
- this.range = range;
+ if (!(range instanceof Range) && (!range || !range.start || !range.end)) {
+ throw new TypeError('Range must be an instance of Range, ' +
+ 'or an object containing start and end.');
+ }
+ this.range = range;
};
/**
@@ -69,8 +69,8 @@ TimeAxis.prototype.setRange = function (range) {
* @return {Date} time The datetime the corresponds with given position x
*/
TimeAxis.prototype.toTime = function(x) {
- var conversion = this.conversion;
- return new Date(x / conversion.scale + conversion.offset);
+ var conversion = this.conversion;
+ return new Date(x / conversion.scale + conversion.offset);
};
/**
@@ -81,8 +81,8 @@ TimeAxis.prototype.toTime = function(x) {
* @private
*/
TimeAxis.prototype.toScreen = function(time) {
- var conversion = this.conversion;
- return (time.valueOf() - conversion.offset) * conversion.scale;
+ var conversion = this.conversion;
+ return (time.valueOf() - conversion.offset) * conversion.scale;
};
/**
@@ -90,112 +90,112 @@ TimeAxis.prototype.toScreen = function(time) {
* @return {Boolean} changed
*/
TimeAxis.prototype.repaint = function () {
- var changed = 0,
- update = util.updateProperty,
- asSize = util.option.asSize,
- options = this.options,
- orientation = this.getOption('orientation'),
- props = this.props,
- step = this.step;
-
- var frame = this.frame;
- if (!frame) {
- frame = document.createElement('div');
- this.frame = frame;
- changed += 1;
+ var changed = 0,
+ update = util.updateProperty,
+ asSize = util.option.asSize,
+ options = this.options,
+ orientation = this.getOption('orientation'),
+ props = this.props,
+ step = this.step;
+
+ var frame = this.frame;
+ if (!frame) {
+ frame = document.createElement('div');
+ this.frame = frame;
+ changed += 1;
+ }
+ frame.className = 'axis';
+ // TODO: custom className?
+
+ if (!frame.parentNode) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint time axis: no parent attached');
}
- frame.className = 'axis';
- // TODO: custom className?
-
- if (!frame.parentNode) {
- if (!this.parent) {
- throw new Error('Cannot repaint time axis: no parent attached');
- }
- var parentContainer = this.parent.getContainer();
- if (!parentContainer) {
- throw new Error('Cannot repaint time axis: parent has no container element');
- }
- parentContainer.appendChild(frame);
-
- changed += 1;
+ var parentContainer = this.parent.getContainer();
+ if (!parentContainer) {
+ throw new Error('Cannot repaint time axis: parent has no container element');
}
+ parentContainer.appendChild(frame);
+
+ changed += 1;
+ }
+
+ var parent = frame.parentNode;
+ if (parent) {
+ var beforeChild = frame.nextSibling;
+ parent.removeChild(frame); // take frame offline while updating (is almost twice as fast)
+
+ var defaultTop = (orientation == 'bottom' && this.props.parentHeight && this.height) ?
+ (this.props.parentHeight - this.height) + 'px' :
+ '0px';
+ changed += update(frame.style, 'top', asSize(options.top, defaultTop));
+ changed += update(frame.style, 'left', asSize(options.left, '0px'));
+ changed += update(frame.style, 'width', asSize(options.width, '100%'));
+ changed += update(frame.style, 'height', asSize(options.height, this.height + 'px'));
+
+ // get characters width and height
+ this._repaintMeasureChars();
+
+ if (this.step) {
+ this._repaintStart();
+
+ step.first();
+ var xFirstMajorLabel = undefined;
+ var max = 0;
+ while (step.hasNext() && max < 1000) {
+ max++;
+ var cur = step.getCurrent(),
+ x = this.toScreen(cur),
+ isMajor = step.isMajor();
+
+ // TODO: lines must have a width, such that we can create css backgrounds
+
+ if (this.getOption('showMinorLabels')) {
+ this._repaintMinorText(x, step.getLabelMinor());
+ }
- var parent = frame.parentNode;
- if (parent) {
- var beforeChild = frame.nextSibling;
- parent.removeChild(frame); // take frame offline while updating (is almost twice as fast)
-
- var defaultTop = (orientation == 'bottom' && this.props.parentHeight && this.height) ?
- (this.props.parentHeight - this.height) + 'px' :
- '0px';
- changed += update(frame.style, 'top', asSize(options.top, defaultTop));
- changed += update(frame.style, 'left', asSize(options.left, '0px'));
- changed += update(frame.style, 'width', asSize(options.width, '100%'));
- changed += update(frame.style, 'height', asSize(options.height, this.height + 'px'));
-
- // get characters width and height
- this._repaintMeasureChars();
-
- if (this.step) {
- this._repaintStart();
-
- step.first();
- var xFirstMajorLabel = undefined;
- var max = 0;
- while (step.hasNext() && max < 1000) {
- max++;
- var cur = step.getCurrent(),
- x = this.toScreen(cur),
- isMajor = step.isMajor();
-
- // TODO: lines must have a width, such that we can create css backgrounds
-
- if (this.getOption('showMinorLabels')) {
- this._repaintMinorText(x, step.getLabelMinor());
- }
-
- if (isMajor && this.getOption('showMajorLabels')) {
- if (x > 0) {
- if (xFirstMajorLabel == undefined) {
- xFirstMajorLabel = x;
- }
- this._repaintMajorText(x, step.getLabelMajor());
- }
- this._repaintMajorLine(x);
- }
- else {
- this._repaintMinorLine(x);
- }
-
- step.next();
+ if (isMajor && this.getOption('showMajorLabels')) {
+ if (x > 0) {
+ if (xFirstMajorLabel == undefined) {
+ xFirstMajorLabel = x;
}
+ this._repaintMajorText(x, step.getLabelMajor());
+ }
+ this._repaintMajorLine(x);
+ }
+ else {
+ this._repaintMinorLine(x);
+ }
- // create a major label on the left when needed
- if (this.getOption('showMajorLabels')) {
- var leftTime = this.toTime(0),
- leftText = step.getLabelMajor(leftTime),
- widthText = leftText.length * (props.majorCharWidth || 10) + 10; // upper bound estimation
+ step.next();
+ }
- if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
- this._repaintMajorText(0, leftText);
- }
- }
+ // create a major label on the left when needed
+ if (this.getOption('showMajorLabels')) {
+ var leftTime = this.toTime(0),
+ leftText = step.getLabelMajor(leftTime),
+ widthText = leftText.length * (props.majorCharWidth || 10) + 10; // upper bound estimation
- this._repaintEnd();
+ if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
+ this._repaintMajorText(0, leftText);
}
+ }
- this._repaintLine();
+ this._repaintEnd();
+ }
- // put frame online again
- if (beforeChild) {
- parent.insertBefore(frame, beforeChild);
- }
- else {
- parent.appendChild(frame)
- }
+ this._repaintLine();
+
+ // put frame online again
+ if (beforeChild) {
+ parent.insertBefore(frame, beforeChild);
}
+ else {
+ parent.appendChild(frame)
+ }
+ }
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -204,18 +204,18 @@ TimeAxis.prototype.repaint = function () {
* @private
*/
TimeAxis.prototype._repaintStart = function () {
- var dom = this.dom,
- redundant = dom.redundant;
-
- redundant.majorLines = dom.majorLines;
- redundant.majorTexts = dom.majorTexts;
- redundant.minorLines = dom.minorLines;
- redundant.minorTexts = dom.minorTexts;
-
- dom.majorLines = [];
- dom.majorTexts = [];
- dom.minorLines = [];
- dom.minorTexts = [];
+ var dom = this.dom,
+ redundant = dom.redundant;
+
+ redundant.majorLines = dom.majorLines;
+ redundant.majorTexts = dom.majorTexts;
+ redundant.minorLines = dom.minorLines;
+ redundant.minorTexts = dom.minorTexts;
+
+ dom.majorLines = [];
+ dom.majorTexts = [];
+ dom.minorLines = [];
+ dom.minorTexts = [];
};
/**
@@ -223,14 +223,14 @@ TimeAxis.prototype._repaintStart = function () {
* @private
*/
TimeAxis.prototype._repaintEnd = function () {
- util.forEach(this.dom.redundant, function (arr) {
- while (arr.length) {
- var elem = arr.pop();
- if (elem && elem.parentNode) {
- elem.parentNode.removeChild(elem);
- }
- }
- });
+ util.forEach(this.dom.redundant, function (arr) {
+ while (arr.length) {
+ var elem = arr.pop();
+ if (elem && elem.parentNode) {
+ elem.parentNode.removeChild(elem);
+ }
+ }
+ });
};
@@ -241,23 +241,23 @@ TimeAxis.prototype._repaintEnd = function () {
* @private
*/
TimeAxis.prototype._repaintMinorText = function (x, text) {
- // reuse redundant label
- var label = this.dom.redundant.minorTexts.shift();
-
- if (!label) {
- // create new label
- var content = document.createTextNode('');
- label = document.createElement('div');
- label.appendChild(content);
- label.className = 'text minor';
- this.frame.appendChild(label);
- }
- this.dom.minorTexts.push(label);
-
- label.childNodes[0].nodeValue = text;
- label.style.left = x + 'px';
- label.style.top = this.props.minorLabelTop + 'px';
- //label.title = title; // TODO: this is a heavy operation
+ // reuse redundant label
+ var label = this.dom.redundant.minorTexts.shift();
+
+ if (!label) {
+ // create new label
+ var content = document.createTextNode('');
+ label = document.createElement('div');
+ label.appendChild(content);
+ label.className = 'text minor';
+ this.frame.appendChild(label);
+ }
+ this.dom.minorTexts.push(label);
+
+ label.childNodes[0].nodeValue = text;
+ label.style.left = x + 'px';
+ label.style.top = this.props.minorLabelTop + 'px';
+ //label.title = title; // TODO: this is a heavy operation
};
/**
@@ -267,23 +267,23 @@ TimeAxis.prototype._repaintMinorText = function (x, text) {
* @private
*/
TimeAxis.prototype._repaintMajorText = function (x, text) {
- // reuse redundant label
- var label = this.dom.redundant.majorTexts.shift();
-
- if (!label) {
- // create label
- var content = document.createTextNode(text);
- label = document.createElement('div');
- label.className = 'text major';
- label.appendChild(content);
- this.frame.appendChild(label);
- }
- this.dom.majorTexts.push(label);
-
- label.childNodes[0].nodeValue = text;
- label.style.top = this.props.majorLabelTop + 'px';
- label.style.left = x + 'px';
- //label.title = title; // TODO: this is a heavy operation
+ // reuse redundant label
+ var label = this.dom.redundant.majorTexts.shift();
+
+ if (!label) {
+ // create label
+ var content = document.createTextNode(text);
+ label = document.createElement('div');
+ label.className = 'text major';
+ label.appendChild(content);
+ this.frame.appendChild(label);
+ }
+ this.dom.majorTexts.push(label);
+
+ label.childNodes[0].nodeValue = text;
+ label.style.top = this.props.majorLabelTop + 'px';
+ label.style.left = x + 'px';
+ //label.title = title; // TODO: this is a heavy operation
};
/**
@@ -292,21 +292,21 @@ TimeAxis.prototype._repaintMajorText = function (x, text) {
* @private
*/
TimeAxis.prototype._repaintMinorLine = function (x) {
- // reuse redundant line
- var line = this.dom.redundant.minorLines.shift();
-
- if (!line) {
- // create vertical line
- line = document.createElement('div');
- line.className = 'grid vertical minor';
- this.frame.appendChild(line);
- }
- this.dom.minorLines.push(line);
-
- var props = this.props;
- line.style.top = props.minorLineTop + 'px';
- line.style.height = props.minorLineHeight + 'px';
- line.style.left = (x - props.minorLineWidth / 2) + 'px';
+ // reuse redundant line
+ var line = this.dom.redundant.minorLines.shift();
+
+ if (!line) {
+ // create vertical line
+ line = document.createElement('div');
+ line.className = 'grid vertical minor';
+ this.frame.appendChild(line);
+ }
+ this.dom.minorLines.push(line);
+
+ var props = this.props;
+ line.style.top = props.minorLineTop + 'px';
+ line.style.height = props.minorLineHeight + 'px';
+ line.style.left = (x - props.minorLineWidth / 2) + 'px';
};
/**
@@ -315,21 +315,21 @@ TimeAxis.prototype._repaintMinorLine = function (x) {
* @private
*/
TimeAxis.prototype._repaintMajorLine = function (x) {
- // reuse redundant line
- var line = this.dom.redundant.majorLines.shift();
-
- if (!line) {
- // create vertical line
- line = document.createElement('DIV');
- line.className = 'grid vertical major';
- this.frame.appendChild(line);
- }
- this.dom.majorLines.push(line);
-
- var props = this.props;
- line.style.top = props.majorLineTop + 'px';
- line.style.left = (x - props.majorLineWidth / 2) + 'px';
- line.style.height = props.majorLineHeight + 'px';
+ // reuse redundant line
+ var line = this.dom.redundant.majorLines.shift();
+
+ if (!line) {
+ // create vertical line
+ line = document.createElement('DIV');
+ line.className = 'grid vertical major';
+ this.frame.appendChild(line);
+ }
+ this.dom.majorLines.push(line);
+
+ var props = this.props;
+ line.style.top = props.majorLineTop + 'px';
+ line.style.left = (x - props.majorLineWidth / 2) + 'px';
+ line.style.height = props.majorLineHeight + 'px';
};
@@ -338,33 +338,33 @@ TimeAxis.prototype._repaintMajorLine = function (x) {
* @private
*/
TimeAxis.prototype._repaintLine = function() {
- var line = this.dom.line,
- frame = this.frame,
- options = this.options;
-
- // line before all axis elements
- if (this.getOption('showMinorLabels') || this.getOption('showMajorLabels')) {
- if (line) {
- // put this line at the end of all childs
- frame.removeChild(line);
- frame.appendChild(line);
- }
- else {
- // create the axis line
- line = document.createElement('div');
- line.className = 'grid horizontal major';
- frame.appendChild(line);
- this.dom.line = line;
- }
-
- line.style.top = this.props.lineTop + 'px';
+ var line = this.dom.line,
+ frame = this.frame,
+ options = this.options;
+
+ // line before all axis elements
+ if (this.getOption('showMinorLabels') || this.getOption('showMajorLabels')) {
+ if (line) {
+ // put this line at the end of all childs
+ frame.removeChild(line);
+ frame.appendChild(line);
}
else {
- if (line && line.parentElement) {
- frame.removeChild(line.line);
- delete this.dom.line;
- }
+ // create the axis line
+ line = document.createElement('div');
+ line.className = 'grid horizontal major';
+ frame.appendChild(line);
+ this.dom.line = line;
+ }
+
+ line.style.top = this.props.lineTop + 'px';
+ }
+ else {
+ if (line && line.parentElement) {
+ frame.removeChild(line.line);
+ delete this.dom.line;
}
+ }
};
/**
@@ -372,31 +372,31 @@ TimeAxis.prototype._repaintLine = function() {
* @private
*/
TimeAxis.prototype._repaintMeasureChars = function () {
- // calculate the width and height of a single character
- // this is used to calculate the step size, and also the positioning of the
- // axis
- var dom = this.dom,
- text;
-
- if (!dom.measureCharMinor) {
- text = document.createTextNode('0');
- var measureCharMinor = document.createElement('DIV');
- measureCharMinor.className = 'text minor measure';
- measureCharMinor.appendChild(text);
- this.frame.appendChild(measureCharMinor);
-
- dom.measureCharMinor = measureCharMinor;
- }
-
- if (!dom.measureCharMajor) {
- text = document.createTextNode('0');
- var measureCharMajor = document.createElement('DIV');
- measureCharMajor.className = 'text major measure';
- measureCharMajor.appendChild(text);
- this.frame.appendChild(measureCharMajor);
-
- dom.measureCharMajor = measureCharMajor;
- }
+ // calculate the width and height of a single character
+ // this is used to calculate the step size, and also the positioning of the
+ // axis
+ var dom = this.dom,
+ text;
+
+ if (!dom.measureCharMinor) {
+ text = document.createTextNode('0');
+ var measureCharMinor = document.createElement('DIV');
+ measureCharMinor.className = 'text minor measure';
+ measureCharMinor.appendChild(text);
+ this.frame.appendChild(measureCharMinor);
+
+ dom.measureCharMinor = measureCharMinor;
+ }
+
+ if (!dom.measureCharMajor) {
+ text = document.createTextNode('0');
+ var measureCharMajor = document.createElement('DIV');
+ measureCharMajor.className = 'text major measure';
+ measureCharMajor.appendChild(text);
+ this.frame.appendChild(measureCharMajor);
+
+ dom.measureCharMajor = measureCharMajor;
+ }
};
/**
@@ -404,100 +404,100 @@ TimeAxis.prototype._repaintMeasureChars = function () {
* @return {Boolean} resized
*/
TimeAxis.prototype.reflow = function () {
- var changed = 0,
- update = util.updateProperty,
- frame = this.frame,
- range = this.range;
+ var changed = 0,
+ update = util.updateProperty,
+ frame = this.frame,
+ range = this.range;
+
+ if (!range) {
+ throw new Error('Cannot repaint time axis: no range configured');
+ }
+
+ if (frame) {
+ changed += update(this, 'top', frame.offsetTop);
+ changed += update(this, 'left', frame.offsetLeft);
+
+ // calculate size of a character
+ var props = this.props,
+ showMinorLabels = this.getOption('showMinorLabels'),
+ showMajorLabels = this.getOption('showMajorLabels'),
+ measureCharMinor = this.dom.measureCharMinor,
+ measureCharMajor = this.dom.measureCharMajor;
+ if (measureCharMinor) {
+ props.minorCharHeight = measureCharMinor.clientHeight;
+ props.minorCharWidth = measureCharMinor.clientWidth;
+ }
+ if (measureCharMajor) {
+ props.majorCharHeight = measureCharMajor.clientHeight;
+ props.majorCharWidth = measureCharMajor.clientWidth;
+ }
- if (!range) {
- throw new Error('Cannot repaint time axis: no range configured');
+ var parentHeight = frame.parentNode ? frame.parentNode.offsetHeight : 0;
+ if (parentHeight != props.parentHeight) {
+ props.parentHeight = parentHeight;
+ changed += 1;
}
+ switch (this.getOption('orientation')) {
+ case 'bottom':
+ props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+ props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
- if (frame) {
- changed += update(this, 'top', frame.offsetTop);
- changed += update(this, 'left', frame.offsetLeft);
-
- // calculate size of a character
- var props = this.props,
- showMinorLabels = this.getOption('showMinorLabels'),
- showMajorLabels = this.getOption('showMajorLabels'),
- measureCharMinor = this.dom.measureCharMinor,
- measureCharMajor = this.dom.measureCharMajor;
- if (measureCharMinor) {
- props.minorCharHeight = measureCharMinor.clientHeight;
- props.minorCharWidth = measureCharMinor.clientWidth;
- }
- if (measureCharMajor) {
- props.majorCharHeight = measureCharMajor.clientHeight;
- props.majorCharWidth = measureCharMajor.clientWidth;
- }
+ props.minorLabelTop = 0;
+ props.majorLabelTop = props.minorLabelTop + props.minorLabelHeight;
- var parentHeight = frame.parentNode ? frame.parentNode.offsetHeight : 0;
- if (parentHeight != props.parentHeight) {
- props.parentHeight = parentHeight;
- changed += 1;
- }
- switch (this.getOption('orientation')) {
- case 'bottom':
- props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
- props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+ props.minorLineTop = -this.top;
+ props.minorLineHeight = Math.max(this.top + props.majorLabelHeight, 0);
+ props.minorLineWidth = 1; // TODO: really calculate width
- props.minorLabelTop = 0;
- props.majorLabelTop = props.minorLabelTop + props.minorLabelHeight;
+ props.majorLineTop = -this.top;
+ props.majorLineHeight = Math.max(this.top + props.minorLabelHeight + props.majorLabelHeight, 0);
+ props.majorLineWidth = 1; // TODO: really calculate width
- props.minorLineTop = -this.top;
- props.minorLineHeight = Math.max(this.top + props.majorLabelHeight, 0);
- props.minorLineWidth = 1; // TODO: really calculate width
+ props.lineTop = 0;
- props.majorLineTop = -this.top;
- props.majorLineHeight = Math.max(this.top + props.minorLabelHeight + props.majorLabelHeight, 0);
- props.majorLineWidth = 1; // TODO: really calculate width
+ break;
- props.lineTop = 0;
+ case 'top':
+ props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+ props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
- break;
+ props.majorLabelTop = 0;
+ props.minorLabelTop = props.majorLabelTop + props.majorLabelHeight;
- case 'top':
- props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
- props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+ props.minorLineTop = props.minorLabelTop;
+ props.minorLineHeight = Math.max(parentHeight - props.majorLabelHeight - this.top);
+ props.minorLineWidth = 1; // TODO: really calculate width
- props.majorLabelTop = 0;
- props.minorLabelTop = props.majorLabelTop + props.majorLabelHeight;
+ props.majorLineTop = 0;
+ props.majorLineHeight = Math.max(parentHeight - this.top);
+ props.majorLineWidth = 1; // TODO: really calculate width
- props.minorLineTop = props.minorLabelTop;
- props.minorLineHeight = Math.max(parentHeight - props.majorLabelHeight - this.top);
- props.minorLineWidth = 1; // TODO: really calculate width
+ props.lineTop = props.majorLabelHeight + props.minorLabelHeight;
- props.majorLineTop = 0;
- props.majorLineHeight = Math.max(parentHeight - this.top);
- props.majorLineWidth = 1; // TODO: really calculate width
+ break;
- props.lineTop = props.majorLabelHeight + props.minorLabelHeight;
+ default:
+ throw new Error('Unkown orientation "' + this.getOption('orientation') + '"');
+ }
- break;
+ var height = props.minorLabelHeight + props.majorLabelHeight;
+ changed += update(this, 'width', frame.offsetWidth);
+ changed += update(this, 'height', height);
- default:
- throw new Error('Unkown orientation "' + this.getOption('orientation') + '"');
- }
+ // calculate range and step
+ this._updateConversion();
- var height = props.minorLabelHeight + props.majorLabelHeight;
- changed += update(this, 'width', frame.offsetWidth);
- changed += update(this, 'height', height);
-
- // calculate range and step
- this._updateConversion();
-
- var start = util.convert(range.start, 'Number'),
- end = util.convert(range.end, 'Number'),
- minimumStep = this.toTime((props.minorCharWidth || 10) * 5).valueOf()
- -this.toTime(0).valueOf();
- this.step = new TimeStep(new Date(start), new Date(end), minimumStep);
- changed += update(props.range, 'start', start);
- changed += update(props.range, 'end', end);
- changed += update(props.range, 'minimumStep', minimumStep.valueOf());
- }
+ var start = util.convert(range.start, 'Number'),
+ end = util.convert(range.end, 'Number'),
+ minimumStep = this.toTime((props.minorCharWidth || 10) * 5).valueOf()
+ -this.toTime(0).valueOf();
+ this.step = new TimeStep(new Date(start), new Date(end), minimumStep);
+ changed += update(props.range, 'start', start);
+ changed += update(props.range, 'end', end);
+ changed += update(props.range, 'minimumStep', minimumStep.valueOf());
+ }
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -508,15 +508,15 @@ TimeAxis.prototype.reflow = function () {
* @private
*/
TimeAxis.prototype._updateConversion = function() {
- var range = this.range;
- if (!range) {
- throw new Error('No range configured');
- }
-
- if (range.conversion) {
- this.conversion = range.conversion(this.width);
- }
- else {
- this.conversion = Range.conversion(range.start, range.end, this.width);
- }
+ var range = this.range;
+ if (!range) {
+ throw new Error('No range configured');
+ }
+
+ if (range.conversion) {
+ this.conversion = range.conversion(this.width);
+ }
+ else {
+ this.conversion = Range.conversion(range.start, range.end, this.width);
+ }
};
diff --git a/src/timeline/component/css/currenttime.css b/src/timeline/component/css/currenttime.css
index 5ea0380b..73438693 100644
--- a/src/timeline/component/css/currenttime.css
+++ b/src/timeline/component/css/currenttime.css
@@ -1,5 +1,5 @@
.vis.timeline .currenttime {
- background-color: #FF7F6E;
- width: 2px;
- z-index: 9;
+ background-color: #FF7F6E;
+ width: 2px;
+ z-index: 9;
}
\ No newline at end of file
diff --git a/src/timeline/component/css/customtime.css b/src/timeline/component/css/customtime.css
index 15a3792a..76ce38fe 100644
--- a/src/timeline/component/css/customtime.css
+++ b/src/timeline/component/css/customtime.css
@@ -1,6 +1,6 @@
.vis.timeline .customtime {
- background-color: #6E94FF;
- width: 2px;
- cursor: move;
- z-index: 9;
+ background-color: #6E94FF;
+ width: 2px;
+ cursor: move;
+ z-index: 9;
}
\ No newline at end of file
diff --git a/src/timeline/component/css/groupset.css b/src/timeline/component/css/groupset.css
index 590c3b82..b6467a7f 100644
--- a/src/timeline/component/css/groupset.css
+++ b/src/timeline/component/css/groupset.css
@@ -1,59 +1,59 @@
.vis.timeline .groupset {
- position: absolute;
- padding: 0;
- margin: 0;
+ position: absolute;
+ padding: 0;
+ margin: 0;
}
.vis.timeline .labels {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
-
- padding: 0;
- margin: 0;
-
- border-right: 1px solid #bfbfbf;
- box-sizing: border-box;
- -moz-box-sizing: border-box;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ padding: 0;
+ margin: 0;
+
+ border-right: 1px solid #bfbfbf;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
}
.vis.timeline .labels .label-set {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
- overflow: hidden;
+ overflow: hidden;
- border-top: none;
- border-bottom: 1px solid #bfbfbf;
+ border-top: none;
+ border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .label {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- color: #4d4d4d;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ color: #4d4d4d;
}
.vis.timeline.top .labels .label-set .label,
.vis.timeline.top .groupset .itemset-axis {
-border-top: 1px solid #bfbfbf;
- border-bottom: none;
+ border-top: 1px solid #bfbfbf;
+ border-bottom: none;
}
.vis.timeline.bottom .labels .label-set .label,
.vis.timeline.bottom .groupset .itemset-axis {
- border-top: none;
- border-bottom: 1px solid #bfbfbf;
+ border-top: none;
+ border-bottom: 1px solid #bfbfbf;
}
.vis.timeline .labels .label-set .label .inner {
- display: inline-block;
- padding: 5px;
+ display: inline-block;
+ padding: 5px;
}
diff --git a/src/timeline/component/css/item.css b/src/timeline/component/css/item.css
index 13937964..579d1e5e 100644
--- a/src/timeline/component/css/item.css
+++ b/src/timeline/component/css/item.css
@@ -1,85 +1,85 @@
.vis.timeline .item {
- position: absolute;
- color: #1A1A1A;
- border-color: #97B0F8;
- background-color: #D5DDF6;
- display: inline-block;
+ position: absolute;
+ color: #1A1A1A;
+ border-color: #97B0F8;
+ background-color: #D5DDF6;
+ display: inline-block;
}
.vis.timeline .item.selected {
- border-color: #FFC200;
- background-color: #FFF785;
- z-index: 999;
+ border-color: #FFC200;
+ background-color: #FFF785;
+ z-index: 999;
}
.vis.timeline .item.cluster {
- /* TODO: use another color or pattern? */
- background: #97B0F8 url('img/cluster_bg.png');
- color: white;
+ /* TODO: use another color or pattern? */
+ background: #97B0F8 url('img/cluster_bg.png');
+ color: white;
}
.vis.timeline .item.cluster.point {
- border-color: #D5DDF6;
+ border-color: #D5DDF6;
}
.vis.timeline .item.box {
- text-align: center;
- border-style: solid;
- border-width: 1px;
- border-radius: 5px;
- -moz-border-radius: 5px; /* For Firefox 3.6 and older */
+ text-align: center;
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 5px;
+ -moz-border-radius: 5px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.point {
- background: none;
+ background: none;
}
.vis.timeline .dot {
- border: 5px solid #97B0F8;
- position: absolute;
- border-radius: 5px;
- -moz-border-radius: 5px; /* For Firefox 3.6 and older */
+ border: 5px solid #97B0F8;
+ position: absolute;
+ border-radius: 5px;
+ -moz-border-radius: 5px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.range {
- overflow: hidden;
- border-style: solid;
- border-width: 1px;
- border-radius: 2px;
- -moz-border-radius: 2px; /* For Firefox 3.6 and older */
+ overflow: hidden;
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 2px;
+ -moz-border-radius: 2px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.rangeoverflow {
- border-style: solid;
- border-width: 1px;
- border-radius: 2px;
- -moz-border-radius: 2px; /* For Firefox 3.6 and older */
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 2px;
+ -moz-border-radius: 2px; /* For Firefox 3.6 and older */
}
.vis.timeline .item.range .drag-left, .vis.timeline .item.rangeoverflow .drag-left {
- cursor: w-resize;
- z-index: 1000;
+ cursor: w-resize;
+ z-index: 1000;
}
.vis.timeline .item.range .drag-right, .vis.timeline .item.rangeoverflow .drag-right {
- cursor: e-resize;
- z-index: 1000;
+ cursor: e-resize;
+ z-index: 1000;
}
.vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content {
- position: relative;
- display: inline-block;
+ position: relative;
+ display: inline-block;
}
.vis.timeline .item.line {
- position: absolute;
- width: 0;
- border-left-width: 1px;
- border-left-style: solid;
+ position: absolute;
+ width: 0;
+ border-left-width: 1px;
+ border-left-style: solid;
}
.vis.timeline .item .content {
- margin: 5px;
- white-space: nowrap;
- overflow: hidden;
+ margin: 5px;
+ white-space: nowrap;
+ overflow: hidden;
}
diff --git a/src/timeline/component/css/itemset.css b/src/timeline/component/css/itemset.css
index 3e1d2885..c21d8fa1 100644
--- a/src/timeline/component/css/itemset.css
+++ b/src/timeline/component/css/itemset.css
@@ -1,9 +1,9 @@
.vis.timeline .itemset {
- position: absolute;
- padding: 0;
- margin: 0;
- overflow: hidden;
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
}
.vis.timeline .background {
@@ -13,5 +13,5 @@
}
.vis.timeline .itemset-axis {
- position: absolute;
+ position: absolute;
}
diff --git a/src/timeline/component/css/panel.css b/src/timeline/component/css/panel.css
index f87bbf3b..819f33f2 100644
--- a/src/timeline/component/css/panel.css
+++ b/src/timeline/component/css/panel.css
@@ -1,14 +1,14 @@
.vis.timeline.rootpanel {
- position: relative;
- overflow: hidden;
+ position: relative;
+ overflow: hidden;
- border: 1px solid #bfbfbf;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
+ border: 1px solid #bfbfbf;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
.vis.timeline .panel {
- position: absolute;
- overflow: hidden;
+ position: absolute;
+ overflow: hidden;
}
diff --git a/src/timeline/component/css/timeaxis.css b/src/timeline/component/css/timeaxis.css
index 0d86b860..91b655b7 100644
--- a/src/timeline/component/css/timeaxis.css
+++ b/src/timeline/component/css/timeaxis.css
@@ -1,41 +1,41 @@
.vis.timeline .axis {
- position: relative;
+ position: relative;
}
.vis.timeline .axis .text {
- position: absolute;
- color: #4d4d4d;
- padding: 3px;
- white-space: nowrap;
+ position: absolute;
+ color: #4d4d4d;
+ padding: 3px;
+ white-space: nowrap;
}
.vis.timeline .axis .text.measure {
- position: absolute;
- padding-left: 0;
- padding-right: 0;
- margin-left: 0;
- margin-right: 0;
- visibility: hidden;
+ position: absolute;
+ padding-left: 0;
+ padding-right: 0;
+ margin-left: 0;
+ margin-right: 0;
+ visibility: hidden;
}
.vis.timeline .axis .grid.vertical {
- position: absolute;
- width: 0;
- border-right: 1px solid;
+ position: absolute;
+ width: 0;
+ border-right: 1px solid;
}
.vis.timeline .axis .grid.horizontal {
- position: absolute;
- left: 0;
- width: 100%;
- height: 0;
- border-bottom: 1px solid;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 0;
+ border-bottom: 1px solid;
}
.vis.timeline .axis .grid.minor {
- border-color: #e5e5e5;
+ border-color: #e5e5e5;
}
.vis.timeline .axis .grid.major {
- border-color: #bfbfbf;
+ border-color: #bfbfbf;
}
diff --git a/src/timeline/component/item/Item.js b/src/timeline/component/item/Item.js
index 0a5f623e..a706993f 100644
--- a/src/timeline/component/item/Item.js
+++ b/src/timeline/component/item/Item.js
@@ -8,32 +8,32 @@
* // TODO: describe available options
*/
function Item (parent, data, options, defaultOptions) {
- this.parent = parent;
- this.data = data;
- this.dom = null;
- this.options = options || {};
- this.defaultOptions = defaultOptions || {};
+ this.parent = parent;
+ this.data = data;
+ this.dom = null;
+ this.options = options || {};
+ this.defaultOptions = defaultOptions || {};
- this.selected = false;
- this.visible = false;
- this.top = 0;
- this.left = 0;
- this.width = 0;
- this.height = 0;
+ this.selected = false;
+ this.visible = false;
+ this.top = 0;
+ this.left = 0;
+ this.width = 0;
+ this.height = 0;
}
/**
* Select current item
*/
Item.prototype.select = function select() {
- this.selected = true;
+ this.selected = true;
};
/**
* Unselect current item
*/
Item.prototype.unselect = function unselect() {
- this.selected = false;
+ this.selected = false;
};
/**
@@ -41,7 +41,7 @@ Item.prototype.unselect = function unselect() {
* @return {Boolean} changed
*/
Item.prototype.show = function show() {
- return false;
+ return false;
};
/**
@@ -49,7 +49,7 @@ Item.prototype.show = function show() {
* @return {Boolean} changed
*/
Item.prototype.hide = function hide() {
- return false;
+ return false;
};
/**
@@ -57,8 +57,8 @@ Item.prototype.hide = function hide() {
* @return {Boolean} changed
*/
Item.prototype.repaint = function repaint() {
- // should be implemented by the item
- return false;
+ // should be implemented by the item
+ return false;
};
/**
@@ -66,8 +66,8 @@ Item.prototype.repaint = function repaint() {
* @return {Boolean} resized
*/
Item.prototype.reflow = function reflow() {
- // should be implemented by the item
- return false;
+ // should be implemented by the item
+ return false;
};
/**
@@ -75,5 +75,5 @@ Item.prototype.reflow = function reflow() {
* @return {Integer} width
*/
Item.prototype.getWidth = function getWidth() {
- return this.width;
+ return this.width;
}
diff --git a/src/timeline/component/item/ItemBox.js b/src/timeline/component/item/ItemBox.js
index 48253cc4..4ad671c6 100644
--- a/src/timeline/component/item/ItemBox.js
+++ b/src/timeline/component/item/ItemBox.js
@@ -9,22 +9,22 @@
* // TODO: describe available options
*/
function ItemBox (parent, data, options, defaultOptions) {
- this.props = {
- dot: {
- left: 0,
- top: 0,
- width: 0,
- height: 0
- },
- line: {
- top: 0,
- left: 0,
- width: 0,
- height: 0
- }
- };
-
- Item.call(this, parent, data, options, defaultOptions);
+ this.props = {
+ dot: {
+ left: 0,
+ top: 0,
+ width: 0,
+ height: 0
+ },
+ line: {
+ top: 0,
+ left: 0,
+ width: 0,
+ height: 0
+ }
+ };
+
+ Item.call(this, parent, data, options, defaultOptions);
}
ItemBox.prototype = new Item (null, null);
@@ -34,8 +34,8 @@ ItemBox.prototype = new Item (null, null);
* @override
*/
ItemBox.prototype.select = function select() {
- this.selected = true;
- // TODO: select and unselect
+ this.selected = true;
+ // TODO: select and unselect
};
/**
@@ -43,8 +43,8 @@ ItemBox.prototype.select = function select() {
* @override
*/
ItemBox.prototype.unselect = function unselect() {
- this.selected = false;
- // TODO: select and unselect
+ this.selected = false;
+ // TODO: select and unselect
};
/**
@@ -52,80 +52,80 @@ ItemBox.prototype.unselect = function unselect() {
* @return {Boolean} changed
*/
ItemBox.prototype.repaint = function repaint() {
- // TODO: make an efficient repaint
- var changed = false;
- var dom = this.dom;
-
- if (!dom) {
- this._create();
- dom = this.dom;
- changed = true;
+ // TODO: make an efficient repaint
+ var changed = false;
+ var dom = this.dom;
+
+ if (!dom) {
+ this._create();
+ dom = this.dom;
+ changed = true;
+ }
+
+ if (dom) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint item: no parent attached');
}
- if (dom) {
- if (!this.parent) {
- throw new Error('Cannot repaint item: no parent attached');
- }
-
- if (!dom.box.parentNode) {
- var foreground = this.parent.getForeground();
- if (!foreground) {
- throw new Error('Cannot repaint time axis: ' +
- 'parent has no foreground container element');
- }
- foreground.appendChild(dom.box);
- changed = true;
- }
-
- if (!dom.line.parentNode) {
- var background = this.parent.getBackground();
- if (!background) {
- throw new Error('Cannot repaint time axis: ' +
- 'parent has no background container element');
- }
- background.appendChild(dom.line);
- changed = true;
- }
-
- if (!dom.dot.parentNode) {
- var axis = this.parent.getAxis();
- if (!background) {
- throw new Error('Cannot repaint time axis: ' +
- 'parent has no axis container element');
- }
- axis.appendChild(dom.dot);
- changed = true;
- }
-
- // update contents
- if (this.data.content != this.content) {
- this.content = this.data.content;
- if (this.content instanceof Element) {
- dom.content.innerHTML = '';
- dom.content.appendChild(this.content);
- }
- else if (this.data.content != undefined) {
- dom.content.innerHTML = this.content;
- }
- else {
- throw new Error('Property "content" missing in item ' + this.data.id);
- }
- changed = true;
- }
-
- // update class
- var className = (this.data.className? ' ' + this.data.className : '') +
- (this.selected ? ' selected' : '');
- if (this.className != className) {
- this.className = className;
- dom.box.className = 'item box' + className;
- dom.line.className = 'item line' + className;
- dom.dot.className = 'item dot' + className;
- changed = true;
- }
+ if (!dom.box.parentNode) {
+ var foreground = this.parent.getForeground();
+ if (!foreground) {
+ throw new Error('Cannot repaint time axis: ' +
+ 'parent has no foreground container element');
+ }
+ foreground.appendChild(dom.box);
+ changed = true;
+ }
+
+ if (!dom.line.parentNode) {
+ var background = this.parent.getBackground();
+ if (!background) {
+ throw new Error('Cannot repaint time axis: ' +
+ 'parent has no background container element');
+ }
+ background.appendChild(dom.line);
+ changed = true;
+ }
+
+ if (!dom.dot.parentNode) {
+ var axis = this.parent.getAxis();
+ if (!background) {
+ throw new Error('Cannot repaint time axis: ' +
+ 'parent has no axis container element');
+ }
+ axis.appendChild(dom.dot);
+ changed = true;
}
- return changed;
+ // update contents
+ if (this.data.content != this.content) {
+ this.content = this.data.content;
+ if (this.content instanceof Element) {
+ dom.content.innerHTML = '';
+ dom.content.appendChild(this.content);
+ }
+ else if (this.data.content != undefined) {
+ dom.content.innerHTML = this.content;
+ }
+ else {
+ throw new Error('Property "content" missing in item ' + this.data.id);
+ }
+ changed = true;
+ }
+
+ // update class
+ var className = (this.data.className? ' ' + this.data.className : '') +
+ (this.selected ? ' selected' : '');
+ if (this.className != className) {
+ this.className = className;
+ dom.box.className = 'item box' + className;
+ dom.line.className = 'item line' + className;
+ dom.dot.className = 'item dot' + className;
+ changed = true;
+ }
+ }
+
+ return changed;
};
/**
@@ -134,12 +134,12 @@ ItemBox.prototype.repaint = function repaint() {
* @return {Boolean} changed
*/
ItemBox.prototype.show = function show() {
- if (!this.dom || !this.dom.box.parentNode) {
- return this.repaint();
- }
- else {
- return false;
- }
+ if (!this.dom || !this.dom.box.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
};
/**
@@ -147,21 +147,21 @@ ItemBox.prototype.show = function show() {
* @return {Boolean} changed
*/
ItemBox.prototype.hide = function hide() {
- var changed = false,
- dom = this.dom;
- if (dom) {
- if (dom.box.parentNode) {
- dom.box.parentNode.removeChild(dom.box);
- changed = true;
- }
- if (dom.line.parentNode) {
- dom.line.parentNode.removeChild(dom.line);
- }
- if (dom.dot.parentNode) {
- dom.dot.parentNode.removeChild(dom.dot);
- }
+ var changed = false,
+ dom = this.dom;
+ if (dom) {
+ if (dom.box.parentNode) {
+ dom.box.parentNode.removeChild(dom.box);
+ changed = true;
+ }
+ if (dom.line.parentNode) {
+ dom.line.parentNode.removeChild(dom.line);
}
- return changed;
+ if (dom.dot.parentNode) {
+ dom.dot.parentNode.removeChild(dom.dot);
+ }
+ }
+ return changed;
};
/**
@@ -170,87 +170,87 @@ ItemBox.prototype.hide = function hide() {
* @override
*/
ItemBox.prototype.reflow = function reflow() {
- var changed = 0,
- update,
- dom,
- props,
- options,
- margin,
- start,
- align,
- orientation,
- top,
- left,
- data,
- range;
-
- if (this.data.start == undefined) {
- throw new Error('Property "start" missing in item ' + this.data.id);
- }
-
- data = this.data;
- range = this.parent && this.parent.range;
- if (data && range) {
- // TODO: account for the width of the item
- var interval = (range.end - range.start);
- this.visible = (data.start > range.start - interval) && (data.start < range.end + interval);
+ var changed = 0,
+ update,
+ dom,
+ props,
+ options,
+ margin,
+ start,
+ align,
+ orientation,
+ top,
+ left,
+ data,
+ range;
+
+ if (this.data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + this.data.id);
+ }
+
+ data = this.data;
+ range = this.parent && this.parent.range;
+ if (data && range) {
+ // TODO: account for the width of the item
+ var interval = (range.end - range.start);
+ this.visible = (data.start > range.start - interval) && (data.start < range.end + interval);
+ }
+ else {
+ this.visible = false;
+ }
+
+ if (this.visible) {
+ dom = this.dom;
+ if (dom) {
+ update = util.updateProperty;
+ props = this.props;
+ options = this.options;
+ start = this.parent.toScreen(this.data.start);
+ align = options.align || this.defaultOptions.align;
+ margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
+ orientation = options.orientation || this.defaultOptions.orientation;
+
+ changed += update(props.dot, 'height', dom.dot.offsetHeight);
+ changed += update(props.dot, 'width', dom.dot.offsetWidth);
+ changed += update(props.line, 'width', dom.line.offsetWidth);
+ changed += update(props.line, 'height', dom.line.offsetHeight);
+ changed += update(props.line, 'top', dom.line.offsetTop);
+ changed += update(this, 'width', dom.box.offsetWidth);
+ changed += update(this, 'height', dom.box.offsetHeight);
+ if (align == 'right') {
+ left = start - this.width;
+ }
+ else if (align == 'left') {
+ left = start;
+ }
+ else {
+ // default or 'center'
+ left = start - this.width / 2;
+ }
+ changed += update(this, 'left', left);
+
+ changed += update(props.line, 'left', start - props.line.width / 2);
+ changed += update(props.dot, 'left', start - props.dot.width / 2);
+ changed += update(props.dot, 'top', -props.dot.height / 2);
+ if (orientation == 'top') {
+ top = margin;
+
+ changed += update(this, 'top', top);
+ }
+ else {
+ // default or 'bottom'
+ var parentHeight = this.parent.height;
+ top = parentHeight - this.height - margin;
+
+ changed += update(this, 'top', top);
+ }
}
else {
- this.visible = false;
- }
-
- if (this.visible) {
- dom = this.dom;
- if (dom) {
- update = util.updateProperty;
- props = this.props;
- options = this.options;
- start = this.parent.toScreen(this.data.start);
- align = options.align || this.defaultOptions.align;
- margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
- orientation = options.orientation || this.defaultOptions.orientation;
-
- changed += update(props.dot, 'height', dom.dot.offsetHeight);
- changed += update(props.dot, 'width', dom.dot.offsetWidth);
- changed += update(props.line, 'width', dom.line.offsetWidth);
- changed += update(props.line, 'height', dom.line.offsetHeight);
- changed += update(props.line, 'top', dom.line.offsetTop);
- changed += update(this, 'width', dom.box.offsetWidth);
- changed += update(this, 'height', dom.box.offsetHeight);
- if (align == 'right') {
- left = start - this.width;
- }
- else if (align == 'left') {
- left = start;
- }
- else {
- // default or 'center'
- left = start - this.width / 2;
- }
- changed += update(this, 'left', left);
-
- changed += update(props.line, 'left', start - props.line.width / 2);
- changed += update(props.dot, 'left', start - props.dot.width / 2);
- changed += update(props.dot, 'top', -props.dot.height / 2);
- if (orientation == 'top') {
- top = margin;
-
- changed += update(this, 'top', top);
- }
- else {
- // default or 'bottom'
- var parentHeight = this.parent.height;
- top = parentHeight - this.height - margin;
-
- changed += update(this, 'top', top);
- }
- }
- else {
- changed += 1;
- }
+ changed += 1;
}
+ }
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -258,27 +258,27 @@ ItemBox.prototype.reflow = function reflow() {
* @private
*/
ItemBox.prototype._create = function _create() {
- var dom = this.dom;
- if (!dom) {
- this.dom = dom = {};
-
- // create the box
- dom.box = document.createElement('DIV');
- // className is updated in repaint()
-
- // contents box (inside the background box). used for making margins
- dom.content = document.createElement('DIV');
- dom.content.className = 'content';
- dom.box.appendChild(dom.content);
-
- // line to axis
- dom.line = document.createElement('DIV');
- dom.line.className = 'line';
-
- // dot on axis
- dom.dot = document.createElement('DIV');
- dom.dot.className = 'dot';
- }
+ var dom = this.dom;
+ if (!dom) {
+ this.dom = dom = {};
+
+ // create the box
+ dom.box = document.createElement('DIV');
+ // className is updated in repaint()
+
+ // contents box (inside the background box). used for making margins
+ dom.content = document.createElement('DIV');
+ dom.content.className = 'content';
+ dom.box.appendChild(dom.content);
+
+ // line to axis
+ dom.line = document.createElement('DIV');
+ dom.line.className = 'line';
+
+ // dot on axis
+ dom.dot = document.createElement('DIV');
+ dom.dot.className = 'dot';
+ }
};
/**
@@ -287,31 +287,31 @@ ItemBox.prototype._create = function _create() {
* @override
*/
ItemBox.prototype.reposition = function reposition() {
- var dom = this.dom,
- props = this.props,
- orientation = this.options.orientation || this.defaultOptions.orientation;
-
- if (dom) {
- var box = dom.box,
- line = dom.line,
- dot = dom.dot;
-
- box.style.left = this.left + 'px';
- box.style.top = this.top + 'px';
-
- line.style.left = props.line.left + 'px';
- if (orientation == 'top') {
- line.style.top = 0 + 'px';
- line.style.height = this.top + 'px';
- }
- else {
- // orientation 'bottom'
- line.style.top = (this.top + this.height) + 'px';
- line.style.height = Math.max(this.parent.height - this.top - this.height +
- this.props.dot.height / 2, 0) + 'px';
- }
-
- dot.style.left = props.dot.left + 'px';
- dot.style.top = props.dot.top + 'px';
+ var dom = this.dom,
+ props = this.props,
+ orientation = this.options.orientation || this.defaultOptions.orientation;
+
+ if (dom) {
+ var box = dom.box,
+ line = dom.line,
+ dot = dom.dot;
+
+ box.style.left = this.left + 'px';
+ box.style.top = this.top + 'px';
+
+ line.style.left = props.line.left + 'px';
+ if (orientation == 'top') {
+ line.style.top = 0 + 'px';
+ line.style.height = this.top + 'px';
}
+ else {
+ // orientation 'bottom'
+ line.style.top = (this.top + this.height) + 'px';
+ line.style.height = Math.max(this.parent.height - this.top - this.height +
+ this.props.dot.height / 2, 0) + 'px';
+ }
+
+ dot.style.left = props.dot.left + 'px';
+ dot.style.top = props.dot.top + 'px';
+ }
};
diff --git a/src/timeline/component/item/ItemPoint.js b/src/timeline/component/item/ItemPoint.js
index ec5b7d84..1d0d7ce7 100644
--- a/src/timeline/component/item/ItemPoint.js
+++ b/src/timeline/component/item/ItemPoint.js
@@ -9,19 +9,19 @@
* // TODO: describe available options
*/
function ItemPoint (parent, data, options, defaultOptions) {
- this.props = {
- dot: {
- top: 0,
- width: 0,
- height: 0
- },
- content: {
- height: 0,
- marginLeft: 0
- }
- };
-
- Item.call(this, parent, data, options, defaultOptions);
+ this.props = {
+ dot: {
+ top: 0,
+ width: 0,
+ height: 0
+ },
+ content: {
+ height: 0,
+ marginLeft: 0
+ }
+ };
+
+ Item.call(this, parent, data, options, defaultOptions);
}
ItemPoint.prototype = new Item (null, null);
@@ -31,8 +31,8 @@ ItemPoint.prototype = new Item (null, null);
* @override
*/
ItemPoint.prototype.select = function select() {
- this.selected = true;
- // TODO: select and unselect
+ this.selected = true;
+ // TODO: select and unselect
};
/**
@@ -40,8 +40,8 @@ ItemPoint.prototype.select = function select() {
* @override
*/
ItemPoint.prototype.unselect = function unselect() {
- this.selected = false;
- // TODO: select and unselect
+ this.selected = false;
+ // TODO: select and unselect
};
/**
@@ -49,59 +49,59 @@ ItemPoint.prototype.unselect = function unselect() {
* @return {Boolean} changed
*/
ItemPoint.prototype.repaint = function repaint() {
- // TODO: make an efficient repaint
- var changed = false;
- var dom = this.dom;
-
- if (!dom) {
- this._create();
- dom = this.dom;
- changed = true;
+ // TODO: make an efficient repaint
+ var changed = false;
+ var dom = this.dom;
+
+ if (!dom) {
+ this._create();
+ dom = this.dom;
+ changed = true;
+ }
+
+ if (dom) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint item: no parent attached');
+ }
+ var foreground = this.parent.getForeground();
+ if (!foreground) {
+ throw new Error('Cannot repaint time axis: ' +
+ 'parent has no foreground container element');
}
- if (dom) {
- if (!this.parent) {
- throw new Error('Cannot repaint item: no parent attached');
- }
- var foreground = this.parent.getForeground();
- if (!foreground) {
- throw new Error('Cannot repaint time axis: ' +
- 'parent has no foreground container element');
- }
-
- if (!dom.point.parentNode) {
- foreground.appendChild(dom.point);
- foreground.appendChild(dom.point);
- changed = true;
- }
-
- // update contents
- if (this.data.content != this.content) {
- this.content = this.data.content;
- if (this.content instanceof Element) {
- dom.content.innerHTML = '';
- dom.content.appendChild(this.content);
- }
- else if (this.data.content != undefined) {
- dom.content.innerHTML = this.content;
- }
- else {
- throw new Error('Property "content" missing in item ' + this.data.id);
- }
- changed = true;
- }
-
- // update class
- var className = (this.data.className? ' ' + this.data.className : '') +
- (this.selected ? ' selected' : '');
- if (this.className != className) {
- this.className = className;
- dom.point.className = 'item point' + className;
- changed = true;
- }
+ if (!dom.point.parentNode) {
+ foreground.appendChild(dom.point);
+ foreground.appendChild(dom.point);
+ changed = true;
+ }
+
+ // update contents
+ if (this.data.content != this.content) {
+ this.content = this.data.content;
+ if (this.content instanceof Element) {
+ dom.content.innerHTML = '';
+ dom.content.appendChild(this.content);
+ }
+ else if (this.data.content != undefined) {
+ dom.content.innerHTML = this.content;
+ }
+ else {
+ throw new Error('Property "content" missing in item ' + this.data.id);
+ }
+ changed = true;
+ }
+
+ // update class
+ var className = (this.data.className? ' ' + this.data.className : '') +
+ (this.selected ? ' selected' : '');
+ if (this.className != className) {
+ this.className = className;
+ dom.point.className = 'item point' + className;
+ changed = true;
}
+ }
- return changed;
+ return changed;
};
/**
@@ -110,12 +110,12 @@ ItemPoint.prototype.repaint = function repaint() {
* @return {Boolean} changed
*/
ItemPoint.prototype.show = function show() {
- if (!this.dom || !this.dom.point.parentNode) {
- return this.repaint();
- }
- else {
- return false;
- }
+ if (!this.dom || !this.dom.point.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
};
/**
@@ -123,15 +123,15 @@ ItemPoint.prototype.show = function show() {
* @return {Boolean} changed
*/
ItemPoint.prototype.hide = function hide() {
- var changed = false,
- dom = this.dom;
- if (dom) {
- if (dom.point.parentNode) {
- dom.point.parentNode.removeChild(dom.point);
- changed = true;
- }
+ var changed = false,
+ dom = this.dom;
+ if (dom) {
+ if (dom.point.parentNode) {
+ dom.point.parentNode.removeChild(dom.point);
+ changed = true;
}
- return changed;
+ }
+ return changed;
};
/**
@@ -140,70 +140,70 @@ ItemPoint.prototype.hide = function hide() {
* @override
*/
ItemPoint.prototype.reflow = function reflow() {
- var changed = 0,
- update,
- dom,
- props,
- options,
- margin,
- orientation,
- start,
- top,
- data,
- range;
-
- if (this.data.start == undefined) {
- throw new Error('Property "start" missing in item ' + this.data.id);
- }
-
- data = this.data;
- range = this.parent && this.parent.range;
- if (data && range) {
- // TODO: account for the width of the item
- var interval = (range.end - range.start);
- this.visible = (data.start > range.start - interval) && (data.start < range.end);
+ var changed = 0,
+ update,
+ dom,
+ props,
+ options,
+ margin,
+ orientation,
+ start,
+ top,
+ data,
+ range;
+
+ if (this.data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + this.data.id);
+ }
+
+ data = this.data;
+ range = this.parent && this.parent.range;
+ if (data && range) {
+ // TODO: account for the width of the item
+ var interval = (range.end - range.start);
+ this.visible = (data.start > range.start - interval) && (data.start < range.end);
+ }
+ else {
+ this.visible = false;
+ }
+
+ if (this.visible) {
+ dom = this.dom;
+ if (dom) {
+ update = util.updateProperty;
+ props = this.props;
+ options = this.options;
+ orientation = options.orientation || this.defaultOptions.orientation;
+ margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
+ start = this.parent.toScreen(this.data.start);
+
+ changed += update(this, 'width', dom.point.offsetWidth);
+ changed += update(this, 'height', dom.point.offsetHeight);
+ changed += update(props.dot, 'width', dom.dot.offsetWidth);
+ changed += update(props.dot, 'height', dom.dot.offsetHeight);
+ changed += update(props.content, 'height', dom.content.offsetHeight);
+
+ if (orientation == 'top') {
+ top = margin;
+ }
+ else {
+ // default or 'bottom'
+ var parentHeight = this.parent.height;
+ top = Math.max(parentHeight - this.height - margin, 0);
+ }
+ changed += update(this, 'top', top);
+ changed += update(this, 'left', start - props.dot.width / 2);
+ changed += update(props.content, 'marginLeft', 1.5 * props.dot.width);
+ //changed += update(props.content, 'marginRight', 0.5 * props.dot.width); // TODO
+
+ changed += update(props.dot, 'top', (this.height - props.dot.height) / 2);
}
else {
- this.visible = false;
+ changed += 1;
}
+ }
- if (this.visible) {
- dom = this.dom;
- if (dom) {
- update = util.updateProperty;
- props = this.props;
- options = this.options;
- orientation = options.orientation || this.defaultOptions.orientation;
- margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
- start = this.parent.toScreen(this.data.start);
-
- changed += update(this, 'width', dom.point.offsetWidth);
- changed += update(this, 'height', dom.point.offsetHeight);
- changed += update(props.dot, 'width', dom.dot.offsetWidth);
- changed += update(props.dot, 'height', dom.dot.offsetHeight);
- changed += update(props.content, 'height', dom.content.offsetHeight);
-
- if (orientation == 'top') {
- top = margin;
- }
- else {
- // default or 'bottom'
- var parentHeight = this.parent.height;
- top = Math.max(parentHeight - this.height - margin, 0);
- }
- changed += update(this, 'top', top);
- changed += update(this, 'left', start - props.dot.width / 2);
- changed += update(props.content, 'marginLeft', 1.5 * props.dot.width);
- //changed += update(props.content, 'marginRight', 0.5 * props.dot.width); // TODO
-
- changed += update(props.dot, 'top', (this.height - props.dot.height) / 2);
- }
- else {
- changed += 1;
- }
- }
-
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -211,24 +211,24 @@ ItemPoint.prototype.reflow = function reflow() {
* @private
*/
ItemPoint.prototype._create = function _create() {
- var dom = this.dom;
- if (!dom) {
- this.dom = dom = {};
-
- // background box
- dom.point = document.createElement('div');
- // className is updated in repaint()
-
- // contents box, right from the dot
- dom.content = document.createElement('div');
- dom.content.className = 'content';
- dom.point.appendChild(dom.content);
-
- // dot at start
- dom.dot = document.createElement('div');
- dom.dot.className = 'dot';
- dom.point.appendChild(dom.dot);
- }
+ var dom = this.dom;
+ if (!dom) {
+ this.dom = dom = {};
+
+ // background box
+ dom.point = document.createElement('div');
+ // className is updated in repaint()
+
+ // contents box, right from the dot
+ dom.content = document.createElement('div');
+ dom.content.className = 'content';
+ dom.point.appendChild(dom.content);
+
+ // dot at start
+ dom.dot = document.createElement('div');
+ dom.dot.className = 'dot';
+ dom.point.appendChild(dom.dot);
+ }
};
/**
@@ -237,16 +237,16 @@ ItemPoint.prototype._create = function _create() {
* @override
*/
ItemPoint.prototype.reposition = function reposition() {
- var dom = this.dom,
- props = this.props;
+ var dom = this.dom,
+ props = this.props;
- if (dom) {
- dom.point.style.top = this.top + 'px';
- dom.point.style.left = this.left + 'px';
+ if (dom) {
+ dom.point.style.top = this.top + 'px';
+ dom.point.style.left = this.left + 'px';
- dom.content.style.marginLeft = props.content.marginLeft + 'px';
- //dom.content.style.marginRight = props.content.marginRight + 'px'; // TODO
+ dom.content.style.marginLeft = props.content.marginLeft + 'px';
+ //dom.content.style.marginRight = props.content.marginRight + 'px'; // TODO
- dom.dot.style.top = props.dot.top + 'px';
- }
+ dom.dot.style.top = props.dot.top + 'px';
+ }
};
diff --git a/src/timeline/component/item/ItemRange.js b/src/timeline/component/item/ItemRange.js
index c42ffc03..50c800c3 100644
--- a/src/timeline/component/item/ItemRange.js
+++ b/src/timeline/component/item/ItemRange.js
@@ -9,14 +9,14 @@
* // TODO: describe available options
*/
function ItemRange (parent, data, options, defaultOptions) {
- this.props = {
- content: {
- left: 0,
- width: 0
- }
- };
+ this.props = {
+ content: {
+ left: 0,
+ width: 0
+ }
+ };
- Item.call(this, parent, data, options, defaultOptions);
+ Item.call(this, parent, data, options, defaultOptions);
}
ItemRange.prototype = new Item (null, null);
@@ -26,8 +26,8 @@ ItemRange.prototype = new Item (null, null);
* @override
*/
ItemRange.prototype.select = function select() {
- this.selected = true;
- // TODO: select and unselect
+ this.selected = true;
+ // TODO: select and unselect
};
/**
@@ -35,8 +35,8 @@ ItemRange.prototype.select = function select() {
* @override
*/
ItemRange.prototype.unselect = function unselect() {
- this.selected = false;
- // TODO: select and unselect
+ this.selected = false;
+ // TODO: select and unselect
};
/**
@@ -44,57 +44,57 @@ ItemRange.prototype.unselect = function unselect() {
* @return {Boolean} changed
*/
ItemRange.prototype.repaint = function repaint() {
- // TODO: make an efficient repaint
- var changed = false;
- var dom = this.dom;
+ // TODO: make an efficient repaint
+ var changed = false;
+ var dom = this.dom;
- if (!dom) {
- this._create();
- dom = this.dom;
- changed = true;
- }
+ if (!dom) {
+ this._create();
+ dom = this.dom;
+ changed = true;
+ }
- if (dom) {
- if (!this.parent) {
- throw new Error('Cannot repaint item: no parent attached');
- }
- var foreground = this.parent.getForeground();
- if (!foreground) {
- throw new Error('Cannot repaint time axis: ' +
- 'parent has no foreground container element');
- }
+ if (dom) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint item: no parent attached');
+ }
+ var foreground = this.parent.getForeground();
+ if (!foreground) {
+ throw new Error('Cannot repaint time axis: ' +
+ 'parent has no foreground container element');
+ }
- if (!dom.box.parentNode) {
- foreground.appendChild(dom.box);
- changed = true;
- }
+ if (!dom.box.parentNode) {
+ foreground.appendChild(dom.box);
+ changed = true;
+ }
- // update content
- if (this.data.content != this.content) {
- this.content = this.data.content;
- if (this.content instanceof Element) {
- dom.content.innerHTML = '';
- dom.content.appendChild(this.content);
- }
- else if (this.data.content != undefined) {
- dom.content.innerHTML = this.content;
- }
- else {
- throw new Error('Property "content" missing in item ' + this.data.id);
- }
- changed = true;
- }
+ // update content
+ if (this.data.content != this.content) {
+ this.content = this.data.content;
+ if (this.content instanceof Element) {
+ dom.content.innerHTML = '';
+ dom.content.appendChild(this.content);
+ }
+ else if (this.data.content != undefined) {
+ dom.content.innerHTML = this.content;
+ }
+ else {
+ throw new Error('Property "content" missing in item ' + this.data.id);
+ }
+ changed = true;
+ }
- // update class
- var className = this.data.className ? (' ' + this.data.className) : '';
- if (this.className != className) {
- this.className = className;
- dom.box.className = 'item range' + className;
- changed = true;
- }
+ // update class
+ var className = this.data.className ? (' ' + this.data.className) : '';
+ if (this.className != className) {
+ this.className = className;
+ dom.box.className = 'item range' + className;
+ changed = true;
}
+ }
- return changed;
+ return changed;
};
/**
@@ -103,12 +103,12 @@ ItemRange.prototype.repaint = function repaint() {
* @return {Boolean} changed
*/
ItemRange.prototype.show = function show() {
- if (!this.dom || !this.dom.box.parentNode) {
- return this.repaint();
- }
- else {
- return false;
- }
+ if (!this.dom || !this.dom.box.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
};
/**
@@ -116,15 +116,15 @@ ItemRange.prototype.show = function show() {
* @return {Boolean} changed
*/
ItemRange.prototype.hide = function hide() {
- var changed = false,
- dom = this.dom;
- if (dom) {
- if (dom.box.parentNode) {
- dom.box.parentNode.removeChild(dom.box);
- changed = true;
- }
+ var changed = false,
+ dom = this.dom;
+ if (dom) {
+ if (dom.box.parentNode) {
+ dom.box.parentNode.removeChild(dom.box);
+ changed = true;
}
- return changed;
+ }
+ return changed;
};
/**
@@ -133,98 +133,98 @@ ItemRange.prototype.hide = function hide() {
* @override
*/
ItemRange.prototype.reflow = function reflow() {
- var changed = 0,
- dom,
- props,
- options,
- margin,
- padding,
- parent,
- start,
- end,
- data,
- range,
- update,
- box,
- parentWidth,
- contentLeft,
- orientation,
- top;
+ var changed = 0,
+ dom,
+ props,
+ options,
+ margin,
+ padding,
+ parent,
+ start,
+ end,
+ data,
+ range,
+ update,
+ box,
+ parentWidth,
+ contentLeft,
+ orientation,
+ top;
- if (this.data.start == undefined) {
- throw new Error('Property "start" missing in item ' + this.data.id);
- }
- if (this.data.end == undefined) {
- throw new Error('Property "end" missing in item ' + this.data.id);
- }
+ if (this.data.start == undefined) {
+ throw new Error('Property "start" missing in item ' + this.data.id);
+ }
+ if (this.data.end == undefined) {
+ throw new Error('Property "end" missing in item ' + this.data.id);
+ }
- data = this.data;
- range = this.parent && this.parent.range;
- if (data && range) {
- // TODO: account for the width of the item. Take some margin
- this.visible = (data.start < range.end) && (data.end > range.start);
- }
- else {
- this.visible = false;
- }
+ data = this.data;
+ range = this.parent && this.parent.range;
+ if (data && range) {
+ // TODO: account for the width of the item. Take some margin
+ this.visible = (data.start < range.end) && (data.end > range.start);
+ }
+ else {
+ this.visible = false;
+ }
- if (this.visible) {
- dom = this.dom;
- if (dom) {
- props = this.props;
- options = this.options;
- parent = this.parent;
- start = parent.toScreen(this.data.start);
- end = parent.toScreen(this.data.end);
- update = util.updateProperty;
- box = dom.box;
- parentWidth = parent.width;
- orientation = options.orientation || this.defaultOptions.orientation;
- margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
- padding = options.padding || this.defaultOptions.padding;
+ if (this.visible) {
+ dom = this.dom;
+ if (dom) {
+ props = this.props;
+ options = this.options;
+ parent = this.parent;
+ start = parent.toScreen(this.data.start);
+ end = parent.toScreen(this.data.end);
+ update = util.updateProperty;
+ box = dom.box;
+ parentWidth = parent.width;
+ orientation = options.orientation || this.defaultOptions.orientation;
+ margin = options.margin && options.margin.axis || this.defaultOptions.margin.axis;
+ padding = options.padding || this.defaultOptions.padding;
- changed += update(props.content, 'width', dom.content.offsetWidth);
+ changed += update(props.content, 'width', dom.content.offsetWidth);
- changed += update(this, 'height', box.offsetHeight);
+ changed += update(this, 'height', box.offsetHeight);
- // limit the width of the this, as browsers cannot draw very wide divs
- if (start < -parentWidth) {
- start = -parentWidth;
- }
- if (end > 2 * parentWidth) {
- end = 2 * parentWidth;
- }
+ // limit the width of the this, as browsers cannot draw very wide divs
+ if (start < -parentWidth) {
+ start = -parentWidth;
+ }
+ if (end > 2 * parentWidth) {
+ end = 2 * parentWidth;
+ }
- // when range exceeds left of the window, position the contents at the left of the visible area
- if (start < 0) {
- contentLeft = Math.min(-start,
- (end - start - props.content.width - 2 * padding));
- // TODO: remove the need for options.padding. it's terrible.
- }
- else {
- contentLeft = 0;
- }
- changed += update(props.content, 'left', contentLeft);
+ // when range exceeds left of the window, position the contents at the left of the visible area
+ if (start < 0) {
+ contentLeft = Math.min(-start,
+ (end - start - props.content.width - 2 * padding));
+ // TODO: remove the need for options.padding. it's terrible.
+ }
+ else {
+ contentLeft = 0;
+ }
+ changed += update(props.content, 'left', contentLeft);
- if (orientation == 'top') {
- top = margin;
- changed += update(this, 'top', top);
- }
- else {
- // default or 'bottom'
- top = parent.height - this.height - margin;
- changed += update(this, 'top', top);
- }
+ if (orientation == 'top') {
+ top = margin;
+ changed += update(this, 'top', top);
+ }
+ else {
+ // default or 'bottom'
+ top = parent.height - this.height - margin;
+ changed += update(this, 'top', top);
+ }
- changed += update(this, 'left', start);
- changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
- }
- else {
- changed += 1;
- }
+ changed += update(this, 'left', start);
+ changed += update(this, 'width', Math.max(end - start, 1)); // TODO: reckon with border width;
}
+ else {
+ changed += 1;
+ }
+ }
- return (changed > 0);
+ return (changed > 0);
};
/**
@@ -232,18 +232,18 @@ ItemRange.prototype.reflow = function reflow() {
* @private
*/
ItemRange.prototype._create = function _create() {
- var dom = this.dom;
- if (!dom) {
- this.dom = dom = {};
- // background box
- dom.box = document.createElement('div');
- // className is updated in repaint()
+ var dom = this.dom;
+ if (!dom) {
+ this.dom = dom = {};
+ // background box
+ dom.box = document.createElement('div');
+ // className is updated in repaint()
- // contents box
- dom.content = document.createElement('div');
- dom.content.className = 'content';
- dom.box.appendChild(dom.content);
- }
+ // contents box
+ dom.content = document.createElement('div');
+ dom.content.className = 'content';
+ dom.box.appendChild(dom.content);
+ }
};
/**
@@ -252,14 +252,14 @@ ItemRange.prototype._create = function _create() {
* @override
*/
ItemRange.prototype.reposition = function reposition() {
- var dom = this.dom,
- props = this.props;
+ var dom = this.dom,
+ props = this.props;
- if (dom) {
- dom.box.style.top = this.top + 'px';
- dom.box.style.left = this.left + 'px';
- dom.box.style.width = this.width + 'px';
+ if (dom) {
+ dom.box.style.top = this.top + 'px';
+ dom.box.style.left = this.left + 'px';
+ dom.box.style.width = this.width + 'px';
- dom.content.style.left = props.content.left + 'px';
- }
+ dom.content.style.left = props.content.left + 'px';
+ }
};
diff --git a/src/timeline/component/item/ItemRangeOverflow.js b/src/timeline/component/item/ItemRangeOverflow.js
index 521d42aa..4e0d4cbb 100644
--- a/src/timeline/component/item/ItemRangeOverflow.js
+++ b/src/timeline/component/item/ItemRangeOverflow.js
@@ -9,14 +9,14 @@
* // TODO: describe available options
*/
function ItemRangeOverflow (parent, data, options, defaultOptions) {
- this.props = {
- content: {
- left: 0,
- width: 0
- }
- };
+ this.props = {
+ content: {
+ left: 0,
+ width: 0
+ }
+ };
- ItemRange.call(this, parent, data, options, defaultOptions);
+ ItemRange.call(this, parent, data, options, defaultOptions);
}
ItemRangeOverflow.prototype = new ItemRange (null, null);
@@ -26,57 +26,57 @@ ItemRangeOverflow.prototype = new ItemRange (null, null);
* @return {Boolean} changed
*/
ItemRangeOverflow.prototype.repaint = function repaint() {
- // TODO: make an efficient repaint
- var changed = false;
- var dom = this.dom;
+ // TODO: make an efficient repaint
+ var changed = false;
+ var dom = this.dom;
- if (!dom) {
- this._create();
- dom = this.dom;
- changed = true;
- }
+ if (!dom) {
+ this._create();
+ dom = this.dom;
+ changed = true;
+ }
- if (dom) {
- if (!this.parent) {
- throw new Error('Cannot repaint item: no parent attached');
- }
- var foreground = this.parent.getForeground();
- if (!foreground) {
- throw new Error('Cannot repaint time axis: ' +
- 'parent has no foreground container element');
- }
+ if (dom) {
+ if (!this.parent) {
+ throw new Error('Cannot repaint item: no parent attached');
+ }
+ var foreground = this.parent.getForeground();
+ if (!foreground) {
+ throw new Error('Cannot repaint time axis: ' +
+ 'parent has no foreground container element');
+ }
- if (!dom.box.parentNode) {
- foreground.appendChild(dom.box);
- changed = true;
- }
+ if (!dom.box.parentNode) {
+ foreground.appendChild(dom.box);
+ changed = true;
+ }
- // update content
- if (this.data.content != this.content) {
- this.content = this.data.content;
- if (this.content instanceof Element) {
- dom.content.innerHTML = '';
- dom.content.appendChild(this.content);
- }
- else if (this.data.content != undefined) {
- dom.content.innerHTML = this.content;
- }
- else {
- throw new Error('Property "content" missing in item ' + this.data.id);
- }
- changed = true;
- }
+ // update content
+ if (this.data.content != this.content) {
+ this.content = this.data.content;
+ if (this.content instanceof Element) {
+ dom.content.innerHTML = '';
+ dom.content.appendChild(this.content);
+ }
+ else if (this.data.content != undefined) {
+ dom.content.innerHTML = this.content;
+ }
+ else {
+ throw new Error('Property "content" missing in item ' + this.data.id);
+ }
+ changed = true;
+ }
- // update class
- var className = this.data.className ? (' ' + this.data.className) : '';
- if (this.className != className) {
- this.className = className;
- dom.box.className = 'item rangeoverflow' + className;
- changed = true;
- }
+ // update class
+ var className = this.data.className ? (' ' + this.data.className) : '';
+ if (this.className != className) {
+ this.className = className;
+ dom.box.className = 'item rangeoverflow' + className;
+ changed = true;
}
+ }
- return changed;
+ return changed;
};
/**
@@ -84,8 +84,8 @@ ItemRangeOverflow.prototype.repaint = function repaint() {
* @return {Number} width
*/
ItemRangeOverflow.prototype.getWidth = function getWidth() {
- if (this.props.content !== undefined && this.width < this.props.content.width)
- return this.props.content.width;
- else
- return this.width;
+ if (this.props.content !== undefined && this.width < this.props.content.width)
+ return this.props.content.width;
+ else
+ return this.width;
};
diff --git a/src/util.js b/src/util.js
index 95dcafbc..e7abbf30 100644
--- a/src/util.js
+++ b/src/util.js
@@ -9,7 +9,7 @@ var util = {};
* @return {Boolean} isNumber
*/
util.isNumber = function isNumber(object) {
- return (object instanceof Number || typeof object == 'number');
+ return (object instanceof Number || typeof object == 'number');
};
/**
@@ -18,7 +18,7 @@ util.isNumber = function isNumber(object) {
* @return {Boolean} isString
*/
util.isString = function isString(object) {
- return (object instanceof String || typeof object == 'string');
+ return (object instanceof String || typeof object == 'string');
};
/**
@@ -27,21 +27,21 @@ util.isString = function isString(object) {
* @return {Boolean} isDate
*/
util.isDate = function isDate(object) {
- if (object instanceof Date) {
- return true;
+ if (object instanceof Date) {
+ return true;
+ }
+ else if (util.isString(object)) {
+ // test whether this string contains a date
+ var match = ASPDateRegex.exec(object);
+ if (match) {
+ return true;
}
- else if (util.isString(object)) {
- // test whether this string contains a date
- var match = ASPDateRegex.exec(object);
- if (match) {
- return true;
- }
- else if (!isNaN(Date.parse(object))) {
- return true;
- }
+ else if (!isNaN(Date.parse(object))) {
+ return true;
}
+ }
- return false;
+ return false;
};
/**
@@ -50,10 +50,10 @@ util.isDate = function isDate(object) {
* @return {Boolean} isDataTable
*/
util.isDataTable = function isDataTable(object) {
- return (typeof (google) !== 'undefined') &&
- (google.visualization) &&
- (google.visualization.DataTable) &&
- (object instanceof google.visualization.DataTable);
+ return (typeof (google) !== 'undefined') &&
+ (google.visualization) &&
+ (google.visualization.DataTable) &&
+ (object instanceof google.visualization.DataTable);
};
/**
@@ -62,19 +62,19 @@ util.isDataTable = function isDataTable(object) {
* @return {String} uuid
*/
util.randomUUID = function randomUUID () {
- var S4 = function () {
- return Math.floor(
- Math.random() * 0x10000 /* 65536 */
- ).toString(16);
- };
-
- return (
- S4() + S4() + '-' +
- S4() + '-' +
- S4() + '-' +
- S4() + '-' +
- S4() + S4() + S4()
- );
+ var S4 = function () {
+ return Math.floor(
+ Math.random() * 0x10000 /* 65536 */
+ ).toString(16);
+ };
+
+ return (
+ S4() + S4() + '-' +
+ S4() + '-' +
+ S4() + '-' +
+ S4() + '-' +
+ S4() + S4() + S4()
+ );
};
/**
@@ -85,16 +85,16 @@ util.randomUUID = function randomUUID () {
* @return {Object} a
*/
util.extend = function (a, b) {
- for (var i = 1, len = arguments.length; i < len; i++) {
- var other = arguments[i];
- for (var prop in other) {
- if (other.hasOwnProperty(prop) && other[prop] !== undefined) {
- a[prop] = other[prop];
- }
- }
+ for (var i = 1, len = arguments.length; i < len; i++) {
+ var other = arguments[i];
+ for (var prop in other) {
+ if (other.hasOwnProperty(prop) && other[prop] !== undefined) {
+ a[prop] = other[prop];
+ }
}
+ }
- return a;
+ return a;
};
/**
@@ -107,143 +107,143 @@ util.extend = function (a, b) {
* @throws Error
*/
util.convert = function convert(object, type) {
- var match;
-
- if (object === undefined) {
- return undefined;
- }
- if (object === null) {
- return null;
- }
-
- if (!type) {
- return object;
- }
- if (!(typeof type === 'string') && !(type instanceof String)) {
- throw new Error('Type must be a string');
- }
-
- //noinspection FallthroughInSwitchStatementJS
- switch (type) {
- case 'boolean':
- case 'Boolean':
- return Boolean(object);
-
- case 'number':
- case 'Number':
- return Number(object.valueOf());
-
- case 'string':
- case 'String':
- return String(object);
-
- case 'Date':
- if (util.isNumber(object)) {
- return new Date(object);
- }
- if (object instanceof Date) {
- return new Date(object.valueOf());
- }
- else if (moment.isMoment(object)) {
- return new Date(object.valueOf());
- }
- if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- if (match) {
- // object is an ASP date
- return new Date(Number(match[1])); // parse number
- }
- else {
- return moment(object).toDate(); // parse string
- }
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type Date');
- }
-
- case 'Moment':
- if (util.isNumber(object)) {
- return moment(object);
- }
- if (object instanceof Date) {
- return moment(object.valueOf());
- }
- else if (moment.isMoment(object)) {
- return moment(object);
- }
- if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- if (match) {
- // object is an ASP date
- return moment(Number(match[1])); // parse number
- }
- else {
- return moment(object); // parse string
- }
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type Date');
- }
-
- case 'ISODate':
- if (util.isNumber(object)) {
- return new Date(object);
- }
- else if (object instanceof Date) {
- return object.toISOString();
- }
- else if (moment.isMoment(object)) {
- return object.toDate().toISOString();
- }
- else if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- if (match) {
- // object is an ASP date
- return new Date(Number(match[1])).toISOString(); // parse number
- }
- else {
- return new Date(object).toISOString(); // parse string
- }
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type ISODate');
- }
-
- case 'ASPDate':
- if (util.isNumber(object)) {
- return '/Date(' + object + ')/';
- }
- else if (object instanceof Date) {
- return '/Date(' + object.valueOf() + ')/';
- }
- else if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- var value;
- if (match) {
- // object is an ASP date
- value = new Date(Number(match[1])).valueOf(); // parse number
- }
- else {
- value = new Date(object).valueOf(); // parse string
- }
- return '/Date(' + value + ')/';
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type ASPDate');
- }
-
- default:
- throw new Error('Cannot convert object of type ' + util.getType(object) +
- ' to type "' + type + '"');
- }
+ var match;
+
+ if (object === undefined) {
+ return undefined;
+ }
+ if (object === null) {
+ return null;
+ }
+
+ if (!type) {
+ return object;
+ }
+ if (!(typeof type === 'string') && !(type instanceof String)) {
+ throw new Error('Type must be a string');
+ }
+
+ //noinspection FallthroughInSwitchStatementJS
+ switch (type) {
+ case 'boolean':
+ case 'Boolean':
+ return Boolean(object);
+
+ case 'number':
+ case 'Number':
+ return Number(object.valueOf());
+
+ case 'string':
+ case 'String':
+ return String(object);
+
+ case 'Date':
+ if (util.isNumber(object)) {
+ return new Date(object);
+ }
+ if (object instanceof Date) {
+ return new Date(object.valueOf());
+ }
+ else if (moment.isMoment(object)) {
+ return new Date(object.valueOf());
+ }
+ if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ if (match) {
+ // object is an ASP date
+ return new Date(Number(match[1])); // parse number
+ }
+ else {
+ return moment(object).toDate(); // parse string
+ }
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type Date');
+ }
+
+ case 'Moment':
+ if (util.isNumber(object)) {
+ return moment(object);
+ }
+ if (object instanceof Date) {
+ return moment(object.valueOf());
+ }
+ else if (moment.isMoment(object)) {
+ return moment(object);
+ }
+ if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ if (match) {
+ // object is an ASP date
+ return moment(Number(match[1])); // parse number
+ }
+ else {
+ return moment(object); // parse string
+ }
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type Date');
+ }
+
+ case 'ISODate':
+ if (util.isNumber(object)) {
+ return new Date(object);
+ }
+ else if (object instanceof Date) {
+ return object.toISOString();
+ }
+ else if (moment.isMoment(object)) {
+ return object.toDate().toISOString();
+ }
+ else if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ if (match) {
+ // object is an ASP date
+ return new Date(Number(match[1])).toISOString(); // parse number
+ }
+ else {
+ return new Date(object).toISOString(); // parse string
+ }
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type ISODate');
+ }
+
+ case 'ASPDate':
+ if (util.isNumber(object)) {
+ return '/Date(' + object + ')/';
+ }
+ else if (object instanceof Date) {
+ return '/Date(' + object.valueOf() + ')/';
+ }
+ else if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ var value;
+ if (match) {
+ // object is an ASP date
+ value = new Date(Number(match[1])).valueOf(); // parse number
+ }
+ else {
+ value = new Date(object).valueOf(); // parse string
+ }
+ return '/Date(' + value + ')/';
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type ASPDate');
+ }
+
+ default:
+ throw new Error('Cannot convert object of type ' + util.getType(object) +
+ ' to type "' + type + '"');
+ }
};
// parse ASP.Net Date pattern,
@@ -257,40 +257,40 @@ var ASPDateRegex = /^\/?Date\((\-?\d+)/i;
* @return {String} type
*/
util.getType = function getType(object) {
- var type = typeof object;
+ var type = typeof object;
- if (type == 'object') {
- if (object == null) {
- return 'null';
- }
- if (object instanceof Boolean) {
- return 'Boolean';
- }
- if (object instanceof Number) {
- return 'Number';
- }
- if (object instanceof String) {
- return 'String';
- }
- if (object instanceof Array) {
- return 'Array';
- }
- if (object instanceof Date) {
- return 'Date';
- }
- return 'Object';
+ if (type == 'object') {
+ if (object == null) {
+ return 'null';
}
- else if (type == 'number') {
- return 'Number';
+ if (object instanceof Boolean) {
+ return 'Boolean';
}
- else if (type == 'boolean') {
- return 'Boolean';
+ if (object instanceof Number) {
+ return 'Number';
}
- else if (type == 'string') {
- return 'String';
+ if (object instanceof String) {
+ return 'String';
}
-
- return type;
+ if (object instanceof Array) {
+ return 'Array';
+ }
+ if (object instanceof Date) {
+ return 'Date';
+ }
+ return 'Object';
+ }
+ else if (type == 'number') {
+ return 'Number';
+ }
+ else if (type == 'boolean') {
+ return 'Boolean';
+ }
+ else if (type == 'string') {
+ return 'String';
+ }
+
+ return type;
};
/**
@@ -300,17 +300,17 @@ util.getType = function getType(object) {
* in the browser page.
*/
util.getAbsoluteLeft = function getAbsoluteLeft (elem) {
- var doc = document.documentElement;
- var body = document.body;
-
- var left = elem.offsetLeft;
- var e = elem.offsetParent;
- while (e != null && e != body && e != doc) {
- left += e.offsetLeft;
- left -= e.scrollLeft;
- e = e.offsetParent;
- }
- return left;
+ var doc = document.documentElement;
+ var body = document.body;
+
+ var left = elem.offsetLeft;
+ var e = elem.offsetParent;
+ while (e != null && e != body && e != doc) {
+ left += e.offsetLeft;
+ left -= e.scrollLeft;
+ e = e.offsetParent;
+ }
+ return left;
};
/**
@@ -320,17 +320,17 @@ util.getAbsoluteLeft = function getAbsoluteLeft (elem) {
* in the browser page.
*/
util.getAbsoluteTop = function getAbsoluteTop (elem) {
- var doc = document.documentElement;
- var body = document.body;
-
- var top = elem.offsetTop;
- var e = elem.offsetParent;
- while (e != null && e != body && e != doc) {
- top += e.offsetTop;
- top -= e.scrollTop;
- e = e.offsetParent;
- }
- return top;
+ var doc = document.documentElement;
+ var body = document.body;
+
+ var top = elem.offsetTop;
+ var e = elem.offsetParent;
+ while (e != null && e != body && e != doc) {
+ top += e.offsetTop;
+ top -= e.scrollTop;
+ e = e.offsetParent;
+ }
+ return top;
};
/**
@@ -339,24 +339,24 @@ util.getAbsoluteTop = function getAbsoluteTop (elem) {
* @return {Number} pageY
*/
util.getPageY = function getPageY (event) {
- if ('pageY' in event) {
- return event.pageY;
+ if ('pageY' in event) {
+ return event.pageY;
+ }
+ else {
+ var clientY;
+ if (('targetTouches' in event) && event.targetTouches.length) {
+ clientY = event.targetTouches[0].clientY;
}
else {
- var clientY;
- if (('targetTouches' in event) && event.targetTouches.length) {
- clientY = event.targetTouches[0].clientY;
- }
- else {
- clientY = event.clientY;
- }
-
- var doc = document.documentElement;
- var body = document.body;
- return clientY +
- ( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
- ( doc && doc.clientTop || body && body.clientTop || 0 );
+ clientY = event.clientY;
}
+
+ var doc = document.documentElement;
+ var body = document.body;
+ return clientY +
+ ( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
+ ( doc && doc.clientTop || body && body.clientTop || 0 );
+ }
};
/**
@@ -365,24 +365,24 @@ util.getPageY = function getPageY (event) {
* @return {Number} pageX
*/
util.getPageX = function getPageX (event) {
- if ('pageY' in event) {
- return event.pageX;
+ if ('pageY' in event) {
+ return event.pageX;
+ }
+ else {
+ var clientX;
+ if (('targetTouches' in event) && event.targetTouches.length) {
+ clientX = event.targetTouches[0].clientX;
}
else {
- var clientX;
- if (('targetTouches' in event) && event.targetTouches.length) {
- clientX = event.targetTouches[0].clientX;
- }
- else {
- clientX = event.clientX;
- }
-
- var doc = document.documentElement;
- var body = document.body;
- return clientX +
- ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
- ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ clientX = event.clientX;
}
+
+ var doc = document.documentElement;
+ var body = document.body;
+ return clientX +
+ ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
+ ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ }
};
/**
@@ -391,11 +391,11 @@ util.getPageX = function getPageX (event) {
* @param {String} className
*/
util.addClassName = function addClassName(elem, className) {
- var classes = elem.className.split(' ');
- if (classes.indexOf(className) == -1) {
- classes.push(className); // add the class to the array
- elem.className = classes.join(' ');
- }
+ var classes = elem.className.split(' ');
+ if (classes.indexOf(className) == -1) {
+ classes.push(className); // add the class to the array
+ elem.className = classes.join(' ');
+ }
};
/**
@@ -404,12 +404,12 @@ util.addClassName = function addClassName(elem, className) {
* @param {String} className
*/
util.removeClassName = function removeClassname(elem, className) {
- var classes = elem.className.split(' ');
- var index = classes.indexOf(className);
- if (index != -1) {
- classes.splice(index, 1); // remove the class from the array
- elem.className = classes.join(' ');
- }
+ var classes = elem.className.split(' ');
+ var index = classes.indexOf(className);
+ if (index != -1) {
+ classes.splice(index, 1); // remove the class from the array
+ elem.className = classes.join(' ');
+ }
};
/**
@@ -422,22 +422,22 @@ util.removeClassName = function removeClassname(elem, className) {
* callback(value, index, object)
*/
util.forEach = function forEach (object, callback) {
- var i,
- len;
- if (object instanceof Array) {
- // array
- for (i = 0, len = object.length; i < len; i++) {
- callback(object[i], i, object);
- }
- }
- else {
- // object
- for (i in object) {
- if (object.hasOwnProperty(i)) {
- callback(object[i], i, object);
- }
- }
- }
+ var i,
+ len;
+ if (object instanceof Array) {
+ // array
+ for (i = 0, len = object.length; i < len; i++) {
+ callback(object[i], i, object);
+ }
+ }
+ else {
+ // object
+ for (i in object) {
+ if (object.hasOwnProperty(i)) {
+ callback(object[i], i, object);
+ }
+ }
+ }
};
/**
@@ -448,13 +448,13 @@ util.forEach = function forEach (object, callback) {
* @return {Boolean} changed
*/
util.updateProperty = function updateProp (object, key, value) {
- if (object[key] !== value) {
- object[key] = value;
- return true;
- }
- else {
- return false;
- }
+ if (object[key] !== value) {
+ object[key] = value;
+ return true;
+ }
+ else {
+ return false;
+ }
};
/**
@@ -466,18 +466,18 @@ util.updateProperty = function updateProp (object, key, value) {
* @param {boolean} [useCapture]
*/
util.addEventListener = function addEventListener(element, action, listener, useCapture) {
- if (element.addEventListener) {
- if (useCapture === undefined)
- useCapture = false;
+ if (element.addEventListener) {
+ if (useCapture === undefined)
+ useCapture = false;
- if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
- action = "DOMMouseScroll"; // For Firefox
- }
-
- element.addEventListener(action, listener, useCapture);
- } else {
- element.attachEvent("on" + action, listener); // IE browsers
+ if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+ action = "DOMMouseScroll"; // For Firefox
}
+
+ element.addEventListener(action, listener, useCapture);
+ } else {
+ element.attachEvent("on" + action, listener); // IE browsers
+ }
};
/**
@@ -488,20 +488,20 @@ util.addEventListener = function addEventListener(element, action, listener, use
* @param {boolean} [useCapture]
*/
util.removeEventListener = function removeEventListener(element, action, listener, useCapture) {
- if (element.removeEventListener) {
- // non-IE browsers
- if (useCapture === undefined)
- useCapture = false;
+ if (element.removeEventListener) {
+ // non-IE browsers
+ if (useCapture === undefined)
+ useCapture = false;
- if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
- action = "DOMMouseScroll"; // For Firefox
- }
-
- element.removeEventListener(action, listener, useCapture);
- } else {
- // IE browsers
- element.detachEvent("on" + action, listener);
+ if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+ action = "DOMMouseScroll"; // For Firefox
}
+
+ element.removeEventListener(action, listener, useCapture);
+ } else {
+ // IE browsers
+ element.detachEvent("on" + action, listener);
+ }
};
@@ -511,41 +511,41 @@ util.removeEventListener = function removeEventListener(element, action, listene
* @return {Element} target element
*/
util.getTarget = function getTarget(event) {
- // code from http://www.quirksmode.org/js/events_properties.html
- if (!event) {
- event = window.event;
- }
-
- var target;
-
- if (event.target) {
- target = event.target;
- }
- else if (event.srcElement) {
- target = event.srcElement;
- }
-
- if (target.nodeType != undefined && target.nodeType == 3) {
- // defeat Safari bug
- target = target.parentNode;
- }
-
- return target;
+ // code from http://www.quirksmode.org/js/events_properties.html
+ if (!event) {
+ event = window.event;
+ }
+
+ var target;
+
+ if (event.target) {
+ target = event.target;
+ }
+ else if (event.srcElement) {
+ target = event.srcElement;
+ }
+
+ if (target.nodeType != undefined && target.nodeType == 3) {
+ // defeat Safari bug
+ target = target.parentNode;
+ }
+
+ return target;
};
/**
* Stop event propagation
*/
util.stopPropagation = function stopPropagation(event) {
- if (!event)
- event = window.event;
-
- if (event.stopPropagation) {
- event.stopPropagation(); // non-IE browsers
- }
- else {
- event.cancelBubble = true; // IE browsers
- }
+ if (!event)
+ event = window.event;
+
+ if (event.stopPropagation) {
+ event.stopPropagation(); // non-IE browsers
+ }
+ else {
+ event.cancelBubble = true; // IE browsers
+ }
};
@@ -553,15 +553,15 @@ util.stopPropagation = function stopPropagation(event) {
* Cancels the event if it is cancelable, without stopping further propagation of the event.
*/
util.preventDefault = function preventDefault (event) {
- if (!event)
- event = window.event;
-
- if (event.preventDefault) {
- event.preventDefault(); // non-IE browsers
- }
- else {
- event.returnValue = false; // IE browsers
- }
+ if (!event)
+ event = window.event;
+
+ if (event.preventDefault) {
+ event.preventDefault(); // non-IE browsers
+ }
+ else {
+ event.returnValue = false; // IE browsers
+ }
};
@@ -574,15 +574,15 @@ util.option = {};
* @returns {Boolean} bool
*/
util.option.asBoolean = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (value != null) {
- return (value != false);
- }
+ if (value != null) {
+ return (value != false);
+ }
- return defaultValue || null;
+ return defaultValue || null;
};
/**
@@ -592,15 +592,15 @@ util.option.asBoolean = function (value, defaultValue) {
* @returns {Number} number
*/
util.option.asNumber = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (value != null) {
- return Number(value) || defaultValue || null;
- }
+ if (value != null) {
+ return Number(value) || defaultValue || null;
+ }
- return defaultValue || null;
+ return defaultValue || null;
};
/**
@@ -610,15 +610,15 @@ util.option.asNumber = function (value, defaultValue) {
* @returns {String} str
*/
util.option.asString = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (value != null) {
- return String(value);
- }
+ if (value != null) {
+ return String(value);
+ }
- return defaultValue || null;
+ return defaultValue || null;
};
/**
@@ -628,19 +628,19 @@ util.option.asString = function (value, defaultValue) {
* @returns {String} size
*/
util.option.asSize = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
-
- if (util.isString(value)) {
- return value;
- }
- else if (util.isNumber(value)) {
- return value + 'px';
- }
- else {
- return defaultValue || null;
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
+
+ if (util.isString(value)) {
+ return value;
+ }
+ else if (util.isNumber(value)) {
+ return value + 'px';
+ }
+ else {
+ return defaultValue || null;
+ }
};
/**
@@ -650,11 +650,11 @@ util.option.asSize = function (value, defaultValue) {
* @returns {HTMLElement | null} dom
*/
util.option.asElement = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- return value || defaultValue || null;
+ return value || defaultValue || null;
};
/**
@@ -662,25 +662,25 @@ util.option.asElement = function (value, defaultValue) {
* @param {String} css Text containing css
*/
util.loadCss = function (css) {
- if (typeof document === 'undefined') {
- return;
- }
-
- // get the script location, and built the css file name from the js file name
- // http://stackoverflow.com/a/2161748/1262753
- // var scripts = document.getElementsByTagName('script');
- // var jsFile = scripts[scripts.length-1].src.split('?')[0];
- // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
-
- // inject css
- // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
- var style = document.createElement('style');
- style.type = 'text/css';
- if (style.styleSheet){
- style.styleSheet.cssText = css;
- } else {
- style.appendChild(document.createTextNode(css));
- }
-
- document.getElementsByTagName('head')[0].appendChild(style);
+ if (typeof document === 'undefined') {
+ return;
+ }
+
+ // get the script location, and built the css file name from the js file name
+ // http://stackoverflow.com/a/2161748/1262753
+ // var scripts = document.getElementsByTagName('script');
+ // var jsFile = scripts[scripts.length-1].src.split('?')[0];
+ // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
+
+ // inject css
+ // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
+ var style = document.createElement('style');
+ style.type = 'text/css';
+ if (style.styleSheet){
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
+
+ document.getElementsByTagName('head')[0].appendChild(style);
};
diff --git a/test/dataset.html b/test/dataset.html
index 7cb93ee6..ceff8219 100644
--- a/test/dataset.html
+++ b/test/dataset.html
@@ -1,75 +1,75 @@
-
-
-
+
+
+
-
+
\ No newline at end of file
diff --git a/test/dataset.js b/test/dataset.js
index 649127fc..63446918 100644
--- a/test/dataset.js
+++ b/test/dataset.js
@@ -6,81 +6,81 @@ var assert = require('assert'),
var now = new Date();
var data = new DataSet({
- convert: {
- start: 'Date',
- end: 'Date'
- }
+ convert: {
+ start: 'Date',
+ end: 'Date'
+ }
});
// add single items with different date types
data.add({id: 1, content: 'Item 1', start: new Date(now.valueOf())});
data.add({id: 2, content: 'Item 2', start: now.toISOString()});
data.add([
- //{id: 3, content: 'Item 3', start: moment(now)}, // TODO: moment fails, not the same instance
- {id: 3, content: 'Item 3', start: now},
- {id: 4, content: 'Item 4', start: '/Date(' + now.valueOf() + ')/'}
+ //{id: 3, content: 'Item 3', start: moment(now)}, // TODO: moment fails, not the same instance
+ {id: 3, content: 'Item 3', start: now},
+ {id: 4, content: 'Item 4', start: '/Date(' + now.valueOf() + ')/'}
]);
var items = data.get();
assert.equal(items.length, 4);
items.forEach(function (item) {
- assert.ok(item.start instanceof Date);
+ assert.ok(item.start instanceof Date);
});
// get filtered fields only
var sort = function (a, b) {
- return a.id > b.id;
+ return a.id > b.id;
};
assert.deepEqual(data.get({
- fields: ['id', 'content']
+ fields: ['id', 'content']
}).sort(sort), [
- {id: 1, content: 'Item 1'},
- {id: 2, content: 'Item 2'},
- {id: 3, content: 'Item 3'},
- {id: 4, content: 'Item 4'}
+ {id: 1, content: 'Item 1'},
+ {id: 2, content: 'Item 2'},
+ {id: 3, content: 'Item 3'},
+ {id: 4, content: 'Item 4'}
]);
// convert dates
assert.deepEqual(data.get({
- fields: ['id', 'start'],
- convert: {start: 'Number'}
+ fields: ['id', 'start'],
+ convert: {start: 'Number'}
}).sort(sort), [
- {id: 1, start: now.valueOf()},
- {id: 2, start: now.valueOf()},
- {id: 3, start: now.valueOf()},
- {id: 4, start: now.valueOf()}
+ {id: 1, start: now.valueOf()},
+ {id: 2, start: now.valueOf()},
+ {id: 3, start: now.valueOf()},
+ {id: 4, start: now.valueOf()}
]);
// get a single item
assert.deepEqual(data.get(1, {
- fields: ['id', 'start'],
- convert: {start: 'ISODate'}
+ fields: ['id', 'start'],
+ convert: {start: 'ISODate'}
}), {
- id: 1,
- start: now.toISOString()
+ id: 1,
+ start: now.toISOString()
});
// remove an item
data.remove(2);
assert.deepEqual(data.get({
- fields: ['id']
+ fields: ['id']
}).sort(sort), [
- {id: 1},
- {id: 3},
- {id: 4}
+ {id: 1},
+ {id: 3},
+ {id: 4}
]);
// add an item
data.add({id: 5, content: 'Item 5', start: now.valueOf()});
assert.deepEqual(data.get({
- fields: ['id']
+ fields: ['id']
}).sort(sort), [
- {id: 1},
- {id: 3},
- {id: 4},
- {id: 5}
+ {id: 1},
+ {id: 3},
+ {id: 4},
+ {id: 5}
]);
// update an item
@@ -89,11 +89,11 @@ data.remove(3); // remove exi
data.add({id: 3, other: 'bla'}); // add new item
data.update({id: 6, content: 'created!', start: now.valueOf()}); // this item is not yet existing, create it
assert.deepEqual(data.get().sort(sort), [
- {id: 1, content: 'Item 1', start: now},
- {id: 3, other: 'bla'},
- {id: 4, content: 'Item 4', start: now},
- {id: 5, content: 'changed!', start: now},
- {id: 6, content: 'created!', start: now}
+ {id: 1, content: 'Item 1', start: now},
+ {id: 3, other: 'bla'},
+ {id: 4, content: 'Item 4', start: now},
+ {id: 5, content: 'changed!', start: now},
+ {id: 6, content: 'created!', start: now}
]);
data.clear();
@@ -104,42 +104,42 @@ assert.equal(data.get().length, 0);
// test filtering and sorting
data = new vis.DataSet();
data.add([
- {id:1, age: 30, group: 2},
- {id:2, age: 25, group: 4},
- {id:3, age: 17, group: 2},
- {id:4, age: 27, group: 3}
+ {id:1, age: 30, group: 2},
+ {id:2, age: 25, group: 4},
+ {id:3, age: 17, group: 2},
+ {id:4, age: 27, group: 3}
]);
assert.deepEqual(data.get({order: 'age'}), [
- {id:3, age: 17, group: 2},
- {id:2, age: 25, group: 4},
- {id:4, age: 27, group: 3},
- {id:1, age: 30, group: 2}
+ {id:3, age: 17, group: 2},
+ {id:2, age: 25, group: 4},
+ {id:4, age: 27, group: 3},
+ {id:1, age: 30, group: 2}
]);
assert.deepEqual(data.getIds({order: 'age'}), [3,2,4,1]);
assert.deepEqual(data.get({order: 'age', fields: ['id']}), [
- {id:3},
- {id:2},
- {id:4},
- {id:1}
+ {id:3},
+ {id:2},
+ {id:4},
+ {id:1}
]);
assert.deepEqual(data.get({
- order: 'age',
- filter: function (item) {
- return item.group == 2;
- },
- fields: ['id']
+ order: 'age',
+ filter: function (item) {
+ return item.group == 2;
+ },
+ fields: ['id']
}), [
- {id:3},
- {id:1}
+ {id:3},
+ {id:1}
]);
assert.deepEqual(data.getIds({
- order: 'age',
- filter: function (item) {
- return (item.group == 2);
- }
+ order: 'age',
+ filter: function (item) {
+ return (item.group == 2);
+ }
}), [3,1]);
diff --git a/test/dataview.js b/test/dataview.js
index c6769c84..412caa5f 100644
--- a/test/dataview.js
+++ b/test/dataview.js
@@ -9,42 +9,42 @@ var groups = new DataSet();
// add items with different groups
groups.add([
- {id: 1, content: 'Item 1', group: 1},
- {id: 2, content: 'Item 2', group: 2},
- {id: 3, content: 'Item 3', group: 2},
- {id: 4, content: 'Item 4', group: 1},
- {id: 5, content: 'Item 5', group: 3}
+ {id: 1, content: 'Item 1', group: 1},
+ {id: 2, content: 'Item 2', group: 2},
+ {id: 3, content: 'Item 3', group: 2},
+ {id: 4, content: 'Item 4', group: 1},
+ {id: 5, content: 'Item 5', group: 3}
]);
var group2 = new DataView(groups, {
- filter: function (item) {
- return item.group == 2;
- }
+ filter: function (item) {
+ return item.group == 2;
+ }
});
// test getting the filtered data
assert.deepEqual(group2.get(), [
- {id: 2, content: 'Item 2', group: 2},
- {id: 3, content: 'Item 3', group: 2}
+ {id: 2, content: 'Item 2', group: 2},
+ {id: 3, content: 'Item 3', group: 2}
]);
// test filtering the view contents
assert.deepEqual(group2.get({
- filter: function (item) {
- return item.id > 2;
- }
+ filter: function (item) {
+ return item.id > 2;
+ }
}), [
- {id: 3, content: 'Item 3', group: 2}
+ {id: 3, content: 'Item 3', group: 2}
]);
// test event subscription
var groupsTriggerCount = 0;
groups.subscribe('*', function () {
- groupsTriggerCount++;
+ groupsTriggerCount++;
});
var group2TriggerCount = 0;
group2.subscribe('*', function () {
- group2TriggerCount++;
+ group2TriggerCount++;
});
groups.update({id:2, content: 'Item 2 (changed)'});
diff --git a/test/dotparser.js b/test/dotparser.js
index 93c74214..5fccb7e9 100644
--- a/test/dotparser.js
+++ b/test/dotparser.js
@@ -3,177 +3,177 @@ var assert = require('assert'),
dot = require('../src/graph/dotparser.js');
fs.readFile('test/dot.txt', function (err, data) {
- data = String(data);
+ data = String(data);
- var graph = dot.parseDOT(data);
+ var graph = dot.parseDOT(data);
- assert.deepEqual(graph, {
- "type": "digraph",
- "id": "test_graph",
- "rankdir": "LR",
- "size": "8,5",
- "font": "arial",
- "nodes": [
- {
- "id": "node1",
- "attr": {
- "shape": "doublecircle"
- }
- },
- {
- "id": "node2",
- "attr": {
- "shape": "doublecircle"
- }
- },
- {
- "id": "node3",
- "attr": {
- "shape": "doublecircle"
- }
- },
- {
- "id": "node4",
- "attr": {
- "shape": "diamond",
- "color": "red"
- }
- },
- {
- "id": "node5",
- "attr": {
- "shape": "square",
- "color": "blue",
- "width": 3
- }
- },
- {
- "id": 6,
- "attr": {
- "shape": "circle"
- }
- },
- {
- "id": "A",
- "attr": {
- "shape": "circle"
- }
- },
- {
- "id": "B",
- "attr": {
- "shape": "circle"
- }
+ assert.deepEqual(graph, {
+ "type": "digraph",
+ "id": "test_graph",
+ "rankdir": "LR",
+ "size": "8,5",
+ "font": "arial",
+ "nodes": [
+ {
+ "id": "node1",
+ "attr": {
+ "shape": "doublecircle"
+ }
+ },
+ {
+ "id": "node2",
+ "attr": {
+ "shape": "doublecircle"
+ }
+ },
+ {
+ "id": "node3",
+ "attr": {
+ "shape": "doublecircle"
+ }
+ },
+ {
+ "id": "node4",
+ "attr": {
+ "shape": "diamond",
+ "color": "red"
+ }
+ },
+ {
+ "id": "node5",
+ "attr": {
+ "shape": "square",
+ "color": "blue",
+ "width": 3
+ }
+ },
+ {
+ "id": 6,
+ "attr": {
+ "shape": "circle"
+ }
+ },
+ {
+ "id": "A",
+ "attr": {
+ "shape": "circle"
+ }
+ },
+ {
+ "id": "B",
+ "attr": {
+ "shape": "circle"
+ }
+ },
+ {
+ "id": "C",
+ "attr": {
+ "shape": "circle"
+ }
+ }
+ ],
+ "edges": [
+ {
+ "from": "node1",
+ "to": "node1",
+ "type": "->",
+ "attr": {
+ "length": 170,
+ "fontSize": 12,
+ "label": "a"
+ }
+ },
+ {
+ "from": "node2",
+ "to": "node3",
+ "type": "->",
+ "attr": {
+ "length": 170,
+ "fontSize": 12,
+ "label": "b"
+ }
+ },
+ {
+ "from": "node1",
+ "to": "node4",
+ "type": "--",
+ "attr": {
+ "length": 170,
+ "fontSize": 12,
+ "label": "c"
+ }
+ },
+ {
+ "from": "node3",
+ "to": "node4",
+ "type": "->",
+ "attr": {
+ "length": 170,
+ "fontSize": 12,
+ "label": "d"
+ }
+ },
+ {
+ "from": "node4",
+ "to": "node5",
+ "type": "->",
+ "attr": {
+ "length": 170,
+ "fontSize": 12
+ }
+ },
+ {
+ "from": "node5",
+ "to": 6,
+ "type": "->",
+ "attr": {
+ "length": 170,
+ "fontSize": 12
+ }
+ },
+ {
+ "from": "A",
+ "to": {
+ "nodes": [
+ {
+ "id": "B",
+ "attr": {
+ "shape": "circle"
+ }
},
{
- "id": "C",
- "attr": {
- "shape": "circle"
- }
+ "id": "C",
+ "attr": {
+ "shape": "circle"
+ }
}
- ],
- "edges": [
- {
- "from": "node1",
- "to": "node1",
- "type": "->",
- "attr": {
- "length": 170,
- "fontSize": 12,
- "label": "a"
- }
- },
- {
- "from": "node2",
- "to": "node3",
- "type": "->",
- "attr": {
- "length": 170,
- "fontSize": 12,
- "label": "b"
- }
- },
- {
- "from": "node1",
- "to": "node4",
- "type": "--",
- "attr": {
- "length": 170,
- "fontSize": 12,
- "label": "c"
- }
- },
- {
- "from": "node3",
- "to": "node4",
- "type": "->",
- "attr": {
- "length": 170,
- "fontSize": 12,
- "label": "d"
- }
- },
- {
- "from": "node4",
- "to": "node5",
- "type": "->",
- "attr": {
- "length": 170,
- "fontSize": 12
- }
- },
- {
- "from": "node5",
- "to": 6,
- "type": "->",
- "attr": {
- "length": 170,
- "fontSize": 12
- }
- },
- {
- "from": "A",
- "to": {
- "nodes": [
- {
- "id": "B",
- "attr": {
- "shape": "circle"
- }
- },
- {
- "id": "C",
- "attr": {
- "shape": "circle"
- }
- }
- ]
- },
- "type": "->",
- "attr": {
- "length": 170,
- "fontSize": 12
- }
+ ]
+ },
+ "type": "->",
+ "attr": {
+ "length": 170,
+ "fontSize": 12
+ }
+ }
+ ],
+ "subgraphs": [
+ {
+ "nodes": [
+ {
+ "id": "B",
+ "attr": {
+ "shape": "circle"
}
- ],
- "subgraphs": [
- {
- "nodes": [
- {
- "id": "B",
- "attr": {
- "shape": "circle"
- }
- },
- {
- "id": "C",
- "attr": {
- "shape": "circle"
- }
- }
- ]
+ },
+ {
+ "id": "C",
+ "attr": {
+ "shape": "circle"
}
+ }
]
- });
+ }
+ ]
+ });
});
diff --git a/test/eventbus.js b/test/eventbus.js
index f213500b..df4d8a94 100644
--- a/test/eventbus.js
+++ b/test/eventbus.js
@@ -9,21 +9,21 @@ var received = [];
var id1 = '1';
bus.on('message', function (event, data, source) {
- received.push({
- event: event,
- data: data,
- source: source
- });
+ received.push({
+ event: event,
+ data: data,
+ source: source
+ });
}, id1);
var id2 = '2';
bus.emit('message', {text: 'hello world'}, id2);
bus.on('chat:*', function (event, data, source) {
- received.push({
- event: event,
- data: data,
- source: source
- });
+ received.push({
+ event: event,
+ data: data,
+ source: source
+ });
});
bus.emit('chat:1', null, id2);
@@ -31,8 +31,8 @@ bus.emit('chat:2', {text: 'hello world'}, id1);
// verify if the messages are received
assert.deepEqual(received, [
- {event: 'message', data: {text: 'hello world'}, source: id2},
- {event: 'chat:1', data: null, source: id2},
- {event: 'chat:2', data: {text: 'hello world'}, source: id1}
+ {event: 'message', data: {text: 'hello world'}, source: id2},
+ {event: 'chat:1', data: null, source: id2},
+ {event: 'chat:2', data: {text: 'hello world'}, source: id1}
]);
diff --git a/test/timeline.html b/test/timeline.html
index 96023a3a..471e41f7 100644
--- a/test/timeline.html
+++ b/test/timeline.html
@@ -1,82 +1,82 @@
-
-
-
+
+
+
-
+ #visualization .itemset {
+ /*background: rgba(255, 255, 0, 0.5);*/
+ }
+
-
- Orientation
-
- top
- bottom
-
-
-
-
+
+ Orientation
+
+ top
+ bottom
+
+
+
+
-
+
-
+
\ No newline at end of file
diff --git a/test/timeline_groups.html b/test/timeline_groups.html
index b9ed6abb..a8a95a10 100644
--- a/test/timeline_groups.html
+++ b/test/timeline_groups.html
@@ -1,85 +1,85 @@
- Timeline | Group example
+ Timeline | Group example
-
+ #visualization {
+ box-sizing: border-box;
+ width: 100%;
+ height: 300px;
+ }
+
-
-
+
+
-
+
- Orientation
-
- top
- bottom
-
+ Orientation
+
+ top
+ bottom
+
diff --git a/test/timestep.html b/test/timestep.html
index 2ed8b5de..473691c0 100644
--- a/test/timestep.html
+++ b/test/timestep.html
@@ -1,32 +1,32 @@
-
-
+
+
-
+
\ No newline at end of file
diff --git a/tools/watch.js b/tools/watch.js
index 6b18f529..79c99a9c 100644
--- a/tools/watch.js
+++ b/tools/watch.js
@@ -15,17 +15,17 @@ var BUILD_COMMAND = 'jake build';
// rebuilt vis.js on change of code
function rebuild() {
- var start = +new Date();
- child_process.exec(BUILD_COMMAND, function () {
- var end = +new Date();
- console.log('rebuilt in ' + (end - start) + ' ms');
- });
+ var start = +new Date();
+ child_process.exec(BUILD_COMMAND, function () {
+ var end = +new Date();
+ console.log('rebuilt in ' + (end - start) + ' ms');
+ });
}
// watch for changes in the code, rebuilt vis.js automatically
watch(WATCH_FOLDER, function(filename) {
- console.log(filename + ' changed');
- rebuild();
+ console.log(filename + ' changed');
+ rebuild();
});
rebuild();
diff --git a/vis.js b/vis.js
index c1dd372e..08ac4818 100644
--- a/vis.js
+++ b/vis.js
@@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 0.3.0-SNAPSHOT
- * @date 2013-10-30
+ * @date 2014-01-03
*
* @license
* Copyright (C) 2011-2013 Almende B.V, http://almende.com
@@ -22,7 +22,7 @@
* License for the specific language governing permissions and limitations under
* the License.
*/
-!function(e){"object"==typeof exports?module.exports=e():"function"==typeof define&&define.amd?define(e):"undefined"!=typeof window?window.vis=e():"undefined"!=typeof global?global.vis=e():"undefined"!=typeof self&&(self.vis=e())}(function(){var define,module,exports;
+(function(e){if("function"==typeof bootstrap)bootstrap("vis",e);else if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else if("undefined"!=typeof ses){if(!ses.ok())return;ses.makeVis=e}else"undefined"!=typeof window?window.vis=e():global.vis=e()})(function(){var define,ses,bootstrap,module,exports;
return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o= 0) {
- value = Math.floor(coercedNumber);
- } else {
- value = Math.ceil(coercedNumber);
- }
- }
-
- return value;
- }
-
- function daysInMonth(year, month) {
- return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
- }
-
- function daysInYear(year) {
- return isLeapYear(year) ? 366 : 365;
- }
-
- function isLeapYear(year) {
- return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
- }
-
- function checkOverflow(m) {
- var overflow;
- if (m._a && m._pf.overflow === -2) {
- overflow =
- m._a[MONTH] < 0 || m._a[MONTH] > 11 ? MONTH :
- m._a[DATE] < 1 || m._a[DATE] > daysInMonth(m._a[YEAR], m._a[MONTH]) ? DATE :
- m._a[HOUR] < 0 || m._a[HOUR] > 23 ? HOUR :
- m._a[MINUTE] < 0 || m._a[MINUTE] > 59 ? MINUTE :
- m._a[SECOND] < 0 || m._a[SECOND] > 59 ? SECOND :
- m._a[MILLISECOND] < 0 || m._a[MILLISECOND] > 999 ? MILLISECOND :
- -1;
-
- if (m._pf._overflowDayOfYear && (overflow < YEAR || overflow > DATE)) {
- overflow = DATE;
- }
-
- m._pf.overflow = overflow;
- }
- }
-
- function initializeParsingFlags(config) {
- config._pf = {
- empty : false,
- unusedTokens : [],
- unusedInput : [],
- overflow : -2,
- charsLeftOver : 0,
- nullInput : false,
- invalidMonth : null,
- invalidFormat : false,
- userInvalidated : false,
- iso: false
- };
- }
-
- function isValid(m) {
- if (m._isValid == null) {
- m._isValid = !isNaN(m._d.getTime()) &&
- m._pf.overflow < 0 &&
- !m._pf.empty &&
- !m._pf.invalidMonth &&
- !m._pf.nullInput &&
- !m._pf.invalidFormat &&
- !m._pf.userInvalidated;
-
- if (m._strict) {
- m._isValid = m._isValid &&
- m._pf.charsLeftOver === 0 &&
- m._pf.unusedTokens.length === 0;
- }
- }
- return m._isValid;
+ return units ? unitAliases[units] || units.toLowerCase().replace(/(.)s$/, '$1') : units;
}
- function normalizeLanguage(key) {
- return key ? key.toLowerCase().replace('_', '-') : key;
- }
/************************************
Languages
@@ -2194,15 +1988,9 @@ else {
week : function (mom) {
return weekOfYear(mom, this._week.dow, this._week.doy).week;
},
-
_week : {
dow : 0, // Sunday is the first day of the week.
doy : 6 // The week that contains Jan 1st is the first week of the year.
- },
-
- _invalidDate: 'Invalid date',
- invalidDate: function () {
- return this._invalidDate;
}
});
@@ -2231,60 +2019,28 @@ else {
// definition for 'en', so long as 'en' has already been loaded using
// moment.lang.
function getLangDefinition(key) {
- var i = 0, j, lang, next, split,
- get = function (k) {
- if (!languages[k] && hasModule) {
- try {
- require('./lang/' + k);
- } catch (e) { }
- }
- return languages[k];
- };
-
if (!key) {
return moment.fn._lang;
}
-
- if (!isArray(key)) {
- //short-circuit everything else
- lang = get(key);
- if (lang) {
- return lang;
- }
- key = [key];
- }
-
- //pick the language from the array
- //try ['en-au', 'en-gb'] as 'en-au', 'en-gb', 'en', as in move through the list trying each
- //substring from most specific to least, but move to the next array item if it's a more specific variant than the current root
- while (i < key.length) {
- split = normalizeLanguage(key[i]).split('-');
- j = split.length;
- next = normalizeLanguage(key[i + 1]);
- next = next ? next.split('-') : null;
- while (j > 0) {
- lang = get(split.slice(0, j).join('-'));
- if (lang) {
- return lang;
- }
- if (next && next.length >= j && compareArrays(split, next, true) >= j - 1) {
- //the next array item is better than a shallower substring of this one
- break;
- }
- j--;
+ if (!languages[key] && hasModule) {
+ try {
+ require('./lang/' + key);
+ } catch (e) {
+ // call with no params to set to default
+ return moment.fn._lang;
}
- i++;
}
- return moment.fn._lang;
+ return languages[key] || moment.fn._lang;
}
+
/************************************
Formatting
************************************/
function removeFormattingTokens(input) {
- if (input.match(/\[[\s\S]/)) {
+ if (input.match(/\[.*\]/)) {
return input.replace(/^\[|\]$/g, "");
}
return input.replace(/\\/g, "");
@@ -2313,10 +2069,6 @@ else {
// format date using native date object
function formatMoment(m, format) {
- if (!m.isValid()) {
- return m.lang().invalidDate();
- }
-
format = expandFormat(format, m.lang());
if (!formatFunctions[format]) {
@@ -2333,11 +2085,9 @@ else {
return lang.longDateFormat(input) || input;
}
- localFormattingTokens.lastIndex = 0;
- while (i >= 0 && localFormattingTokens.test(format)) {
+ while (i-- && (localFormattingTokens.lastIndex = 0,
+ localFormattingTokens.test(format))) {
format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
- localFormattingTokens.lastIndex = 0;
- i -= 1;
}
return format;
@@ -2351,17 +2101,12 @@ else {
// get the regex to find the next token
function getParseRegexForToken(token, config) {
- var a;
switch (token) {
case 'DDDD':
return parseTokenThreeDigits;
case 'YYYY':
- case 'GGGG':
- case 'gggg':
return parseTokenFourDigits;
case 'YYYYY':
- case 'GGGGG':
- case 'ggggg':
return parseTokenSixDigits;
case 'S':
case 'SS':
@@ -2384,13 +2129,9 @@ else {
return parseTokenTimezone;
case 'T':
return parseTokenT;
- case 'SSSS':
- return parseTokenDigits;
case 'MM':
case 'DD':
case 'YY':
- case 'GG':
- case 'gg':
case 'HH':
case 'hh':
case 'mm':
@@ -2402,23 +2143,16 @@ else {
case 'h':
case 'm':
case 's':
- case 'w':
- case 'ww':
- case 'W':
- case 'WW':
- case 'e':
- case 'E':
return parseTokenOneOrTwoDigits;
default :
- a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
- return a;
+ return new RegExp(token.replace('\\', ''));
}
}
function timezoneMinutesFromString(string) {
var tzchunk = (parseTokenTimezone.exec(string) || [])[0],
parts = (tzchunk + '').match(parseTimezoneChunker) || ['-', 0, 0],
- minutes = +(parts[1] * 60) + toInt(parts[2]);
+ minutes = +(parts[1] * 60) + ~~parts[2];
return parts[0] === '+' ? -minutes : minutes;
}
@@ -2432,7 +2166,7 @@ else {
case 'M' : // fall through to MM
case 'MM' :
if (input != null) {
- datePartArray[MONTH] = toInt(input) - 1;
+ datePartArray[1] = ~~input - 1;
}
break;
case 'MMM' : // fall through to MMMM
@@ -2440,33 +2174,33 @@ else {
a = getLangDefinition(config._l).monthsParse(input);
// if we didn't find a month name, mark the date as invalid.
if (a != null) {
- datePartArray[MONTH] = a;
+ datePartArray[1] = a;
} else {
- config._pf.invalidMonth = input;
+ config._isValid = false;
}
break;
// DAY OF MONTH
case 'D' : // fall through to DD
case 'DD' :
if (input != null) {
- datePartArray[DATE] = toInt(input);
+ datePartArray[2] = ~~input;
}
break;
// DAY OF YEAR
case 'DDD' : // fall through to DDDD
case 'DDDD' :
if (input != null) {
- config._dayOfYear = toInt(input);
+ datePartArray[1] = 0;
+ datePartArray[2] = ~~input;
}
-
break;
// YEAR
case 'YY' :
- datePartArray[YEAR] = toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+ datePartArray[0] = ~~input + (~~input > 68 ? 1900 : 2000);
break;
case 'YYYY' :
case 'YYYYY' :
- datePartArray[YEAR] = toInt(input);
+ datePartArray[0] = ~~input;
break;
// AM / PM
case 'a' : // fall through to A
@@ -2478,24 +2212,23 @@ else {
case 'HH' : // fall through to hh
case 'h' : // fall through to hh
case 'hh' :
- datePartArray[HOUR] = toInt(input);
+ datePartArray[3] = ~~input;
break;
// MINUTE
case 'm' : // fall through to mm
case 'mm' :
- datePartArray[MINUTE] = toInt(input);
+ datePartArray[4] = ~~input;
break;
// SECOND
case 's' : // fall through to ss
case 'ss' :
- datePartArray[SECOND] = toInt(input);
+ datePartArray[5] = ~~input;
break;
// MILLISECOND
case 'S' :
case 'SS' :
case 'SSS' :
- case 'SSSS' :
- datePartArray[MILLISECOND] = toInt(('0.' + input) * 1000);
+ datePartArray[6] = ~~ (('0.' + input) * 1000);
break;
// UNIX TIMESTAMP WITH MS
case 'X':
@@ -2507,29 +2240,11 @@ else {
config._useUTC = true;
config._tzm = timezoneMinutesFromString(input);
break;
- case 'w':
- case 'ww':
- case 'W':
- case 'WW':
- case 'd':
- case 'dd':
- case 'ddd':
- case 'dddd':
- case 'e':
- case 'E':
- token = token.substr(0, 1);
- /* falls through */
- case 'gg':
- case 'gggg':
- case 'GG':
- case 'GGGG':
- case 'GGGGG':
- token = token.substr(0, 2);
- if (input) {
- config._w = config._w || {};
- config._w[token] = input;
- }
- break;
+ }
+
+ // if the input is null, the date is not valid
+ if (input == null) {
+ config._isValid = false;
}
}
@@ -2537,65 +2252,19 @@ else {
// the array should mirror the parameters below
// note: all values past the year are optional and will default to the lowest possible value.
// [year, month, day , hour, minute, second, millisecond]
- function dateFromConfig(config) {
- var i, date, input = [], currentDate,
- yearToUse, fixYear, w, temp, lang, weekday, week;
+ function dateFromArray(config) {
+ var i, date, input = [], currentDate;
if (config._d) {
return;
}
- currentDate = currentDateArray(config);
-
- //compute day of the year from weeks and weekdays
- if (config._w && config._a[DATE] == null && config._a[MONTH] == null) {
- fixYear = function (val) {
- return val ?
- (val.length < 3 ? (parseInt(val, 10) > 68 ? '19' + val : '20' + val) : val) :
- (config._a[YEAR] == null ? moment().weekYear() : config._a[YEAR]);
- };
-
- w = config._w;
- if (w.GG != null || w.W != null || w.E != null) {
- temp = dayOfYearFromWeeks(fixYear(w.GG), w.W || 1, w.E, 4, 1);
- }
- else {
- lang = getLangDefinition(config._l);
- weekday = w.d != null ? parseWeekday(w.d, lang) :
- (w.e != null ? parseInt(w.e, 10) + lang._week.dow : 0);
-
- week = parseInt(w.w, 10) || 1;
-
- //if we're parsing 'd', then the low day numbers may be next week
- if (w.d != null && weekday < lang._week.dow) {
- week++;
- }
-
- temp = dayOfYearFromWeeks(fixYear(w.gg), week, weekday, lang._week.doy, lang._week.dow);
- }
-
- config._a[YEAR] = temp.year;
- config._dayOfYear = temp.dayOfYear;
- }
-
- //if the day of the year is set, figure out what it is
- if (config._dayOfYear) {
- yearToUse = config._a[YEAR] == null ? currentDate[YEAR] : config._a[YEAR];
-
- if (config._dayOfYear > daysInYear(yearToUse)) {
- config._pf._overflowDayOfYear = true;
- }
-
- date = makeUTCDate(yearToUse, 0, config._dayOfYear);
- config._a[MONTH] = date.getUTCMonth();
- config._a[DATE] = date.getUTCDate();
- }
-
// Default to current date.
// * if no year, month, day of month are given, default to today
// * if day of month is given, default month and year
// * if month is given, default only year
// * if year is given, don't default anything
+ currentDate = currentDateArray(config);
for (i = 0; i < 3 && config._a[i] == null; ++i) {
config._a[i] = input[i] = currentDate[i];
}
@@ -2606,31 +2275,40 @@ else {
}
// add the offsets to the time to be parsed so that we can have a clean array for checking isValid
- input[HOUR] += toInt((config._tzm || 0) / 60);
- input[MINUTE] += toInt((config._tzm || 0) % 60);
+ input[3] += ~~((config._tzm || 0) / 60);
+ input[4] += ~~((config._tzm || 0) % 60);
+
+ date = new Date(0);
+
+ if (config._useUTC) {
+ date.setUTCFullYear(input[0], input[1], input[2]);
+ date.setUTCHours(input[3], input[4], input[5], input[6]);
+ } else {
+ date.setFullYear(input[0], input[1], input[2]);
+ date.setHours(input[3], input[4], input[5], input[6]);
+ }
- config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
+ config._d = date;
}
function dateFromObject(config) {
- var normalizedInput;
+ var o = config._i;
if (config._d) {
return;
}
- normalizedInput = normalizeObjectUnits(config._i);
config._a = [
- normalizedInput.year,
- normalizedInput.month,
- normalizedInput.day,
- normalizedInput.hour,
- normalizedInput.minute,
- normalizedInput.second,
- normalizedInput.millisecond
+ o.years || o.year || o.y,
+ o.months || o.month || o.M,
+ o.days || o.day || o.d,
+ o.hours || o.hour || o.h,
+ o.minutes || o.minute || o.m,
+ o.seconds || o.second || o.s,
+ o.milliseconds || o.millisecond || o.ms
];
- dateFromConfig(config);
+ dateFromArray(config);
}
function currentDateArray(config) {
@@ -2648,116 +2326,74 @@ else {
// date from string and format string
function makeDateFromStringAndFormat(config) {
-
- config._a = [];
- config._pf.empty = true;
-
// This array is used to make a Date, either with `new Date` or `Date.UTC`
var lang = getLangDefinition(config._l),
string = '' + config._i,
- i, parsedInput, tokens, token, skipped,
- stringLength = string.length,
- totalParsedInputLength = 0;
+ i, parsedInput, tokens;
+
+ tokens = expandFormat(config._f, lang).match(formattingTokens);
- tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
+ config._a = [];
for (i = 0; i < tokens.length; i++) {
- token = tokens[i];
- parsedInput = (getParseRegexForToken(token, config).exec(string) || [])[0];
+ parsedInput = (getParseRegexForToken(tokens[i], config).exec(string) || [])[0];
if (parsedInput) {
- skipped = string.substr(0, string.indexOf(parsedInput));
- if (skipped.length > 0) {
- config._pf.unusedInput.push(skipped);
- }
string = string.slice(string.indexOf(parsedInput) + parsedInput.length);
- totalParsedInputLength += parsedInput.length;
}
- // don't parse if it's not a known token
- if (formatTokenFunctions[token]) {
- if (parsedInput) {
- config._pf.empty = false;
- }
- else {
- config._pf.unusedTokens.push(token);
- }
- addTimeToArrayFromToken(token, parsedInput, config);
- }
- else if (config._strict && !parsedInput) {
- config._pf.unusedTokens.push(token);
+ // don't parse if its not a known token
+ if (formatTokenFunctions[tokens[i]]) {
+ addTimeToArrayFromToken(tokens[i], parsedInput, config);
}
}
- // add remaining unparsed input length to the string
- config._pf.charsLeftOver = stringLength - totalParsedInputLength;
- if (string.length > 0) {
- config._pf.unusedInput.push(string);
+ // add remaining unparsed input to the string
+ if (string) {
+ config._il = string;
}
// handle am pm
- if (config._isPm && config._a[HOUR] < 12) {
- config._a[HOUR] += 12;
+ if (config._isPm && config._a[3] < 12) {
+ config._a[3] += 12;
}
// if is 12 am, change hours to 0
- if (config._isPm === false && config._a[HOUR] === 12) {
- config._a[HOUR] = 0;
+ if (config._isPm === false && config._a[3] === 12) {
+ config._a[3] = 0;
}
-
- dateFromConfig(config);
- checkOverflow(config);
- }
-
- function unescapeFormat(s) {
- return s.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g, function (matched, p1, p2, p3, p4) {
- return p1 || p2 || p3 || p4;
- });
- }
-
- // Code from http://stackoverflow.com/questions/3561493/is-there-a-regexp-escape-function-in-javascript
- function regexpEscape(s) {
- return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
+ // return
+ dateFromArray(config);
}
// date from string and array of format strings
function makeDateFromStringAndArray(config) {
var tempConfig,
+ tempMoment,
bestMoment,
- scoreToBeat,
+ scoreToBeat = 99,
i,
currentScore;
- if (config._f.length === 0) {
- config._pf.invalidFormat = true;
- config._d = new Date(NaN);
- return;
- }
-
for (i = 0; i < config._f.length; i++) {
- currentScore = 0;
tempConfig = extend({}, config);
- initializeParsingFlags(tempConfig);
tempConfig._f = config._f[i];
makeDateFromStringAndFormat(tempConfig);
+ tempMoment = new Moment(tempConfig);
- if (!isValid(tempConfig)) {
- continue;
- }
-
- // if there is any input that was not parsed add a penalty for that format
- currentScore += tempConfig._pf.charsLeftOver;
-
- //or tokens
- currentScore += tempConfig._pf.unusedTokens.length * 10;
+ currentScore = compareArrays(tempConfig._a, tempMoment.toArray());
- tempConfig._pf.score = currentScore;
+ // if there is any input that was not parsed
+ // add a penalty for that format
+ if (tempMoment._il) {
+ currentScore += tempMoment._il.length;
+ }
- if (scoreToBeat == null || currentScore < scoreToBeat) {
+ if (currentScore < scoreToBeat) {
scoreToBeat = currentScore;
- bestMoment = tempConfig;
+ bestMoment = tempMoment;
}
}
- extend(config, bestMoment || tempConfig);
+ extend(config, bestMoment);
}
// date from iso format
@@ -2767,14 +2403,8 @@ else {
match = isoRegex.exec(string);
if (match) {
- config._pf.iso = true;
- for (i = 4; i > 0; i--) {
- if (match[i]) {
- // match[5] should be "T" or undefined
- config._f = isoDates[i - 1] + (match[6] || " ");
- break;
- }
- }
+ // match[2] should be "T" or undefined
+ config._f = 'YYYY-MM-DD' + (match[2] || " ");
for (i = 0; i < 4; i++) {
if (isoTimes[i][1].exec(string)) {
config._f += isoTimes[i][0];
@@ -2782,11 +2412,10 @@ else {
}
}
if (parseTokenTimezone.exec(string)) {
- config._f += "Z";
+ config._f += " Z";
}
makeDateFromStringAndFormat(config);
- }
- else {
+ } else {
config._d = new Date(string);
}
}
@@ -2803,8 +2432,8 @@ else {
makeDateFromString(config);
} else if (isArray(input)) {
config._a = input.slice(0);
- dateFromConfig(config);
- } else if (isDate(input)) {
+ dateFromArray(config);
+ } else if (input instanceof Date) {
config._d = new Date(+input);
} else if (typeof(input) === 'object') {
dateFromObject(config);
@@ -2813,40 +2442,6 @@ else {
}
}
- function makeDate(y, m, d, h, M, s, ms) {
- //can't just apply() to create a date:
- //http://stackoverflow.com/questions/181348/instantiating-a-javascript-object-by-calling-prototype-constructor-apply
- var date = new Date(y, m, d, h, M, s, ms);
-
- //the date constructor doesn't accept years < 1970
- if (y < 1970) {
- date.setFullYear(y);
- }
- return date;
- }
-
- function makeUTCDate(y) {
- var date = new Date(Date.UTC.apply(null, arguments));
- if (y < 1970) {
- date.setUTCFullYear(y);
- }
- return date;
- }
-
- function parseWeekday(input, language) {
- if (typeof input === 'string') {
- if (!isNaN(input)) {
- input = parseInt(input, 10);
- }
- else {
- input = language.weekdaysParse(input);
- if (typeof input !== 'number') {
- return null;
- }
- }
- }
- return input;
- }
/************************************
Relative Time
@@ -2914,20 +2509,6 @@ else {
};
}
- //http://en.wikipedia.org/wiki/ISO_week_date#Calculating_a_date_given_the_year.2C_week_number_and_weekday
- function dayOfYearFromWeeks(year, week, weekday, firstDayOfWeekOfYear, firstDayOfWeek) {
- var d = new Date(Date.UTC(year, 0)).getUTCDay(),
- daysToAdd, dayOfYear;
-
- weekday = weekday != null ? weekday : firstDayOfWeek;
- daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0);
- dayOfYear = 7 * (week - 1) + (weekday - firstDayOfWeek) + daysToAdd + 1;
-
- return {
- year: dayOfYear > 0 ? year : year - 1,
- dayOfYear: dayOfYear > 0 ? dayOfYear : daysInYear(year - 1) + dayOfYear
- };
- }
/************************************
Top Level Functions
@@ -2937,12 +2518,8 @@ else {
var input = config._i,
format = config._f;
- if (typeof config._pf === 'undefined') {
- initializeParsingFlags(config);
- }
-
- if (input === null) {
- return moment.invalid({nullInput: true});
+ if (input === null || input === '') {
+ return null;
}
if (typeof input === 'string') {
@@ -2951,7 +2528,6 @@ else {
if (moment.isMoment(input)) {
config = extend({}, input);
-
config._d = new Date(+input._d);
} else if (format) {
if (isArray(format)) {
@@ -2966,38 +2542,24 @@ else {
return new Moment(config);
}
- moment = function (input, format, lang, strict) {
- if (typeof(lang) === "boolean") {
- strict = lang;
- lang = undefined;
- }
+ moment = function (input, format, lang) {
return makeMoment({
_i : input,
_f : format,
_l : lang,
- _strict : strict,
_isUTC : false
});
};
// creating with utc
- moment.utc = function (input, format, lang, strict) {
- var m;
-
- if (typeof(lang) === "boolean") {
- strict = lang;
- lang = undefined;
- }
- m = makeMoment({
+ moment.utc = function (input, format, lang) {
+ return makeMoment({
_useUTC : true,
_isUTC : true,
_l : lang,
_i : input,
- _f : format,
- _strict : strict
+ _f : format
}).utc();
-
- return m;
};
// creating with unix timestamp (in seconds)
@@ -3010,13 +2572,9 @@ else {
var isDuration = moment.isDuration(input),
isNumber = (typeof input === 'number'),
duration = (isDuration ? input._input : (isNumber ? {} : input)),
- // matching against regexp is expensive, do it on demand
- match = null,
+ matched = aspNetTimeSpanJsonRegex.exec(input),
sign,
- ret,
- parseIso,
- timeEmpty,
- dateTimeEmpty;
+ ret;
if (isNumber) {
if (key) {
@@ -3024,34 +2582,15 @@ else {
} else {
duration.milliseconds = input;
}
- } else if (!!(match = aspNetTimeSpanJsonRegex.exec(input))) {
- sign = (match[1] === "-") ? -1 : 1;
+ } else if (matched) {
+ sign = (matched[1] === "-") ? -1 : 1;
duration = {
y: 0,
- d: toInt(match[DATE]) * sign,
- h: toInt(match[HOUR]) * sign,
- m: toInt(match[MINUTE]) * sign,
- s: toInt(match[SECOND]) * sign,
- ms: toInt(match[MILLISECOND]) * sign
- };
- } else if (!!(match = isoDurationRegex.exec(input))) {
- sign = (match[1] === "-") ? -1 : 1;
- parseIso = function (inp) {
- // We'd normally use ~~inp for this, but unfortunately it also
- // converts floats to ints.
- // inp may be undefined, so careful calling replace on it.
- var res = inp && parseFloat(inp.replace(',', '.'));
- // apply sign while we're at it
- return (isNaN(res) ? 0 : res) * sign;
- };
- duration = {
- y: parseIso(match[2]),
- M: parseIso(match[3]),
- d: parseIso(match[4]),
- h: parseIso(match[5]),
- m: parseIso(match[6]),
- s: parseIso(match[7]),
- w: parseIso(match[8])
+ d: ~~matched[2] * sign,
+ h: ~~matched[3] * sign,
+ m: ~~matched[4] * sign,
+ s: ~~matched[5] * sign,
+ ms: ~~matched[6] * sign
};
}
@@ -3078,20 +2617,20 @@ else {
// no arguments are passed in, it will simply return the current global
// language key.
moment.lang = function (key, values) {
- var r;
if (!key) {
return moment.fn._lang._abbr;
}
+ key = key.toLowerCase();
+ key = key.replace('_', '-');
if (values) {
- loadLang(normalizeLanguage(key), values);
+ loadLang(key, values);
} else if (values === null) {
unloadLang(key);
key = 'en';
} else if (!languages[key]) {
getLangDefinition(key);
}
- r = moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
- return r._abbr;
+ moment.duration.fn._lang = moment.fn._lang = getLangDefinition(key);
};
// returns language data
@@ -3112,29 +2651,6 @@ else {
return obj instanceof Duration;
};
- for (i = lists.length - 1; i >= 0; --i) {
- makeList(lists[i]);
- }
-
- moment.normalizeUnits = function (units) {
- return normalizeUnits(units);
- };
-
- moment.invalid = function (flags) {
- var m = moment.utc(NaN);
- if (flags != null) {
- extend(m._pf, flags);
- }
- else {
- m._pf.userInvalidated = true;
- }
-
- return m;
- };
-
- moment.parseZone = function (input) {
- return moment(input).parseZone();
- };
/************************************
Moment Prototype
@@ -3156,7 +2672,7 @@ else {
},
toString : function () {
- return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
+ return this.format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
},
toDate : function () {
@@ -3181,24 +2697,22 @@ else {
},
isValid : function () {
- return isValid(this);
- },
-
- isDSTShifted : function () {
-
- if (this._a) {
- return this.isValid() && compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray()) > 0;
+ if (this._isValid == null) {
+ if (this._a) {
+ this._isValid = !compareArrays(this._a, (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray());
+ } else {
+ this._isValid = !isNaN(this._d.getTime());
+ }
}
-
- return false;
- },
-
- parsingFlags : function () {
- return extend({}, this._pf);
+ return !!this._isValid;
},
invalidAt: function () {
- return this._pf.overflow;
+ var i, arr1 = this._a, arr2 = (this._isUTC ? moment.utc(this._a) : moment(this._a)).toArray();
+ for (i = 6; i >= 0 && arr1[i] === arr2[i]; --i) {
+ // empty loop body
+ }
+ return i;
},
utc : function () {
@@ -3294,7 +2808,8 @@ else {
},
isLeapYear : function () {
- return isLeapYear(this.year());
+ var year = this.year();
+ return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
},
isDST : function () {
@@ -3305,7 +2820,12 @@ else {
day : function (input) {
var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
if (input != null) {
- input = parseWeekday(input, this.lang());
+ if (typeof input === 'string') {
+ input = this.lang().weekdaysParse(input);
+ if (typeof input !== 'number') {
+ return this;
+ }
+ }
return this.add({ d : input - day });
} else {
return day;
@@ -3348,7 +2868,7 @@ else {
this.date(1);
/* falls through */
case 'week':
- case 'isoWeek':
+ case 'isoweek':
case 'day':
this.hours(0);
/* falls through */
@@ -3366,7 +2886,7 @@ else {
// weeks are a special case
if (units === 'week') {
this.weekday(0);
- } else if (units === 'isoWeek') {
+ } else if (units === 'isoweek') {
this.isoWeekday(1);
}
@@ -3375,7 +2895,7 @@ else {
endOf: function (units) {
units = normalizeUnits(units);
- return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
+ return this.startOf(units).add((units === 'isoweek' ? 'week' : units), 1).subtract('ms', 1);
},
isAfter: function (input, units) {
@@ -3431,13 +2951,6 @@ else {
return this._isUTC ? "Coordinated Universal Time" : "";
},
- parseZone : function () {
- if (typeof this._i === 'string') {
- this.zone(this._i);
- }
- return this;
- },
-
hasAlignedHourOffset : function (input) {
if (!input) {
input = 0;
@@ -3450,7 +2963,7 @@ else {
},
daysInMonth : function () {
- return daysInMonth(this.year(), this.month());
+ return moment.utc([this.year(), this.month() + 1, 0]).date();
},
dayOfYear : function (input) {
@@ -3479,7 +2992,7 @@ else {
},
weekday : function (input) {
- var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
+ var weekday = (this._d.getDay() + 7 - this.lang()._week.dow) % 7;
return input == null ? weekday : this.add("d", input - weekday);
},
@@ -3492,15 +3005,12 @@ else {
get : function (units) {
units = normalizeUnits(units);
- return this[units]();
+ return this[units.toLowerCase()]();
},
set : function (units, value) {
units = normalizeUnits(units);
- if (typeof this[units] === 'function') {
- this[units](value);
- }
- return this;
+ this[units.toLowerCase()](value);
},
// If passed a language key, it will set the language for this
@@ -3592,7 +3102,7 @@ else {
return this._milliseconds +
this._days * 864e5 +
(this._months % 12) * 2592e6 +
- toInt(this._months / 12) * 31536e6;
+ ~~(this._months / 12) * 31536e6;
},
humanize : function (withSuffix) {
@@ -3641,33 +3151,7 @@ else {
return this['as' + units.charAt(0).toUpperCase() + units.slice(1) + 's']();
},
- lang : moment.fn.lang,
-
- toIsoString : function () {
- // inspired by https://github.com/dordille/moment-isoduration/blob/master/moment.isoduration.js
- var years = Math.abs(this.years()),
- months = Math.abs(this.months()),
- days = Math.abs(this.days()),
- hours = Math.abs(this.hours()),
- minutes = Math.abs(this.minutes()),
- seconds = Math.abs(this.seconds() + this.milliseconds() / 1000);
-
- if (!this.asSeconds()) {
- // this is the same as C#'s (Noda) and python (isodate)...
- // but not other JS (goog.date)
- return 'P0D';
- }
-
- return (this.asSeconds() < 0 ? '-' : '') +
- 'P' +
- (years ? years + 'Y' : '') +
- (months ? months + 'M' : '') +
- (days ? days + 'D' : '') +
- ((hours || minutes || seconds) ? 'T' : '') +
- (hours ? hours + 'H' : '') +
- (minutes ? minutes + 'M' : '') +
- (seconds ? seconds + 'S' : '');
- }
+ lang : moment.fn.lang
});
function makeDurationGetter(name) {
@@ -3704,7 +3188,7 @@ else {
moment.lang('en', {
ordinal : function (number) {
var b = number % 10,
- output = (toInt(number % 100 / 10) === 1) ? 'th' :
+ output = (~~ (number % 100 / 10) === 1) ? 'th' :
(b === 1) ? 'st' :
(b === 2) ? 'nd' :
(b === 3) ? 'rd' : 'th';
@@ -3718,46 +3202,23 @@ else {
Exposing Moment
************************************/
- function makeGlobal(deprecate) {
- var warned = false, local_moment = moment;
- /*global ender:false */
- if (typeof ender !== 'undefined') {
- return;
- }
- // here, `this` means `window` in the browser, or `global` on the server
- // add `moment` as a global object via a string identifier,
- // for Closure Compiler "advanced" mode
- if (deprecate) {
- this.moment = function () {
- if (!warned && console && console.warn) {
- warned = true;
- console.warn(
- "Accessing Moment through the global scope is " +
- "deprecated, and will be removed in an upcoming " +
- "release.");
- }
- return local_moment.apply(null, arguments);
- };
- } else {
- this['moment'] = moment;
- }
- }
// CommonJS module is defined
if (hasModule) {
module.exports = moment;
- makeGlobal(true);
- } else if (typeof define === "function" && define.amd) {
- define("moment", function (require, exports, module) {
- if (module.config().noGlobal !== true) {
- // If user provided noGlobal, he is aware of global
- makeGlobal(module.config().noGlobal === undefined);
- }
-
+ }
+ /*global ender:false */
+ if (typeof ender === 'undefined') {
+ // here, `this` means `window` in the browser, or `global` on the server
+ // add `moment` as a global object via a string identifier,
+ // for Closure Compiler "advanced" mode
+ this['moment'] = moment;
+ }
+ /*global define:false */
+ if (typeof define === "function" && define.amd) {
+ define("moment", [], function () {
return moment;
});
- } else {
- makeGlobal();
}
}).call(this);
@@ -3786,31 +3247,31 @@ else {
// it here in that case.
// http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/
if(!Array.prototype.indexOf) {
- Array.prototype.indexOf = function(obj){
- for(var i = 0; i < this.length; i++){
- if(this[i] == obj){
- return i;
- }
- }
- return -1;
- };
-
- try {
- console.log("Warning: Ancient browser detected. Please update your browser");
- }
- catch (err) {
+ Array.prototype.indexOf = function(obj){
+ for(var i = 0; i < this.length; i++){
+ if(this[i] == obj){
+ return i;
+ }
}
+ return -1;
+ };
+
+ try {
+ console.log("Warning: Ancient browser detected. Please update your browser");
+ }
+ catch (err) {
+ }
}
// Internet Explorer 8 and older does not support Array.forEach, so we define
// it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(fn, scope) {
- for(var i = 0, len = this.length; i < len; ++i) {
- fn.call(scope || this, this[i], i, this);
- }
+ Array.prototype.forEach = function(fn, scope) {
+ for(var i = 0, len = this.length; i < len; ++i) {
+ fn.call(scope || this, this[i], i, this);
}
+ }
}
// Internet Explorer 8 and older does not support Array.map, so we define it
@@ -3819,106 +3280,106 @@ if (!Array.prototype.forEach) {
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
- Array.prototype.map = function(callback, thisArg) {
-
- var T, A, k;
+ Array.prototype.map = function(callback, thisArg) {
- if (this == null) {
- throw new TypeError(" this is null or not defined");
- }
+ var T, A, k;
- // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
- var O = Object(this);
+ if (this == null) {
+ throw new TypeError(" this is null or not defined");
+ }
- // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
- // 3. Let len be ToUint32(lenValue).
- var len = O.length >>> 0;
+ // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
+ var O = Object(this);
- // 4. If IsCallable(callback) is false, throw a TypeError exception.
- // See: http://es5.github.com/#x9.11
- if (typeof callback !== "function") {
- throw new TypeError(callback + " is not a function");
- }
+ // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
+ // 3. Let len be ToUint32(lenValue).
+ var len = O.length >>> 0;
- // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
- if (thisArg) {
- T = thisArg;
- }
+ // 4. If IsCallable(callback) is false, throw a TypeError exception.
+ // See: http://es5.github.com/#x9.11
+ if (typeof callback !== "function") {
+ throw new TypeError(callback + " is not a function");
+ }
- // 6. Let A be a new array created as if by the expression new Array(len) where Array is
- // the standard built-in constructor with that name and len is the value of len.
- A = new Array(len);
+ // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
+ if (thisArg) {
+ T = thisArg;
+ }
- // 7. Let k be 0
- k = 0;
+ // 6. Let A be a new array created as if by the expression new Array(len) where Array is
+ // the standard built-in constructor with that name and len is the value of len.
+ A = new Array(len);
- // 8. Repeat, while k < len
- while(k < len) {
+ // 7. Let k be 0
+ k = 0;
- var kValue, mappedValue;
+ // 8. Repeat, while k < len
+ while(k < len) {
- // a. Let Pk be ToString(k).
- // This is implicit for LHS operands of the in operator
- // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
- // This step can be combined with c
- // c. If kPresent is true, then
- if (k in O) {
+ var kValue, mappedValue;
- // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
- kValue = O[ k ];
+ // a. Let Pk be ToString(k).
+ // This is implicit for LHS operands of the in operator
+ // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk.
+ // This step can be combined with c
+ // c. If kPresent is true, then
+ if (k in O) {
- // ii. Let mappedValue be the result of calling the Call internal method of callback
- // with T as the this value and argument list containing kValue, k, and O.
- mappedValue = callback.call(T, kValue, k, O);
+ // i. Let kValue be the result of calling the Get internal method of O with argument Pk.
+ kValue = O[ k ];
- // iii. Call the DefineOwnProperty internal method of A with arguments
- // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},
- // and false.
+ // ii. Let mappedValue be the result of calling the Call internal method of callback
+ // with T as the this value and argument list containing kValue, k, and O.
+ mappedValue = callback.call(T, kValue, k, O);
- // In browsers that support Object.defineProperty, use the following:
- // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });
+ // iii. Call the DefineOwnProperty internal method of A with arguments
+ // Pk, Property Descriptor {Value: mappedValue, : true, Enumerable: true, Configurable: true},
+ // and false.
- // For best browser support, use the following:
- A[ k ] = mappedValue;
- }
- // d. Increase k by 1.
- k++;
- }
+ // In browsers that support Object.defineProperty, use the following:
+ // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true });
- // 9. return A
- return A;
- };
+ // For best browser support, use the following:
+ A[ k ] = mappedValue;
+ }
+ // d. Increase k by 1.
+ k++;
+ }
+
+ // 9. return A
+ return A;
+ };
}
// Internet Explorer 8 and older does not support Array.filter, so we define it
// here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter
if (!Array.prototype.filter) {
- Array.prototype.filter = function(fun /*, thisp */) {
- "use strict";
+ Array.prototype.filter = function(fun /*, thisp */) {
+ "use strict";
- if (this == null) {
- throw new TypeError();
- }
+ if (this == null) {
+ throw new TypeError();
+ }
- var t = Object(this);
- var len = t.length >>> 0;
- if (typeof fun != "function") {
- throw new TypeError();
- }
+ var t = Object(this);
+ var len = t.length >>> 0;
+ if (typeof fun != "function") {
+ throw new TypeError();
+ }
- var res = [];
- var thisp = arguments[1];
- for (var i = 0; i < len; i++) {
- if (i in t) {
- var val = t[i]; // in case fun mutates this
- if (fun.call(thisp, val, i, t))
- res.push(val);
- }
- }
+ var res = [];
+ var thisp = arguments[1];
+ for (var i = 0; i < len; i++) {
+ if (i in t) {
+ var val = t[i]; // in case fun mutates this
+ if (fun.call(thisp, val, i, t))
+ res.push(val);
+ }
+ }
- return res;
- };
+ return res;
+ };
}
@@ -3926,112 +3387,112 @@ if (!Array.prototype.filter) {
// here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys
if (!Object.keys) {
- Object.keys = (function () {
- var hasOwnProperty = Object.prototype.hasOwnProperty,
- hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
- dontEnums = [
- 'toString',
- 'toLocaleString',
- 'valueOf',
- 'hasOwnProperty',
- 'isPrototypeOf',
- 'propertyIsEnumerable',
- 'constructor'
- ],
- dontEnumsLength = dontEnums.length;
-
- return function (obj) {
- if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) {
- throw new TypeError('Object.keys called on non-object');
- }
+ Object.keys = (function () {
+ var hasOwnProperty = Object.prototype.hasOwnProperty,
+ hasDontEnumBug = !({toString: null}).propertyIsEnumerable('toString'),
+ dontEnums = [
+ 'toString',
+ 'toLocaleString',
+ 'valueOf',
+ 'hasOwnProperty',
+ 'isPrototypeOf',
+ 'propertyIsEnumerable',
+ 'constructor'
+ ],
+ dontEnumsLength = dontEnums.length;
+
+ return function (obj) {
+ if (typeof obj !== 'object' && typeof obj !== 'function' || obj === null) {
+ throw new TypeError('Object.keys called on non-object');
+ }
- var result = [];
+ var result = [];
- for (var prop in obj) {
- if (hasOwnProperty.call(obj, prop)) result.push(prop);
- }
+ for (var prop in obj) {
+ if (hasOwnProperty.call(obj, prop)) result.push(prop);
+ }
- if (hasDontEnumBug) {
- for (var i=0; i < dontEnumsLength; i++) {
- if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
- }
- }
- return result;
+ if (hasDontEnumBug) {
+ for (var i=0; i < dontEnumsLength; i++) {
+ if (hasOwnProperty.call(obj, dontEnums[i])) result.push(dontEnums[i]);
}
- })()
+ }
+ return result;
+ }
+ })()
}
// Internet Explorer 8 and older does not support Array.isArray,
// so we define it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/isArray
if(!Array.isArray) {
- Array.isArray = function (vArg) {
- return Object.prototype.toString.call(vArg) === "[object Array]";
- };
+ Array.isArray = function (vArg) {
+ return Object.prototype.toString.call(vArg) === "[object Array]";
+ };
}
// Internet Explorer 8 and older does not support Function.bind,
// so we define it here in that case.
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
if (!Function.prototype.bind) {
- Function.prototype.bind = function (oThis) {
- if (typeof this !== "function") {
- // closest thing possible to the ECMAScript 5 internal IsCallable function
- throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
- }
-
- var aArgs = Array.prototype.slice.call(arguments, 1),
- fToBind = this,
- fNOP = function () {},
- fBound = function () {
- return fToBind.apply(this instanceof fNOP && oThis
- ? this
- : oThis,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
+ Function.prototype.bind = function (oThis) {
+ if (typeof this !== "function") {
+ // closest thing possible to the ECMAScript 5 internal IsCallable function
+ throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+ }
+
+ var aArgs = Array.prototype.slice.call(arguments, 1),
+ fToBind = this,
+ fNOP = function () {},
+ fBound = function () {
+ return fToBind.apply(this instanceof fNOP && oThis
+ ? this
+ : oThis,
+ aArgs.concat(Array.prototype.slice.call(arguments)));
+ };
- fNOP.prototype = this.prototype;
- fBound.prototype = new fNOP();
+ fNOP.prototype = this.prototype;
+ fBound.prototype = new fNOP();
- return fBound;
- };
+ return fBound;
+ };
}
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/create
if (!Object.create) {
- Object.create = function (o) {
- if (arguments.length > 1) {
- throw new Error('Object.create implementation only accepts the first parameter.');
- }
- function F() {}
- F.prototype = o;
- return new F();
- };
+ Object.create = function (o) {
+ if (arguments.length > 1) {
+ throw new Error('Object.create implementation only accepts the first parameter.');
+ }
+ function F() {}
+ F.prototype = o;
+ return new F();
+ };
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
if (!Function.prototype.bind) {
- Function.prototype.bind = function (oThis) {
- if (typeof this !== "function") {
- // closest thing possible to the ECMAScript 5 internal IsCallable function
- throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
- }
-
- var aArgs = Array.prototype.slice.call(arguments, 1),
- fToBind = this,
- fNOP = function () {},
- fBound = function () {
- return fToBind.apply(this instanceof fNOP && oThis
- ? this
- : oThis,
- aArgs.concat(Array.prototype.slice.call(arguments)));
- };
+ Function.prototype.bind = function (oThis) {
+ if (typeof this !== "function") {
+ // closest thing possible to the ECMAScript 5 internal IsCallable function
+ throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+ }
+
+ var aArgs = Array.prototype.slice.call(arguments, 1),
+ fToBind = this,
+ fNOP = function () {},
+ fBound = function () {
+ return fToBind.apply(this instanceof fNOP && oThis
+ ? this
+ : oThis,
+ aArgs.concat(Array.prototype.slice.call(arguments)));
+ };
- fNOP.prototype = this.prototype;
- fBound.prototype = new fNOP();
+ fNOP.prototype = this.prototype;
+ fBound.prototype = new fNOP();
- return fBound;
- };
+ return fBound;
+ };
}
/**
@@ -4045,7 +3506,7 @@ var util = {};
* @return {Boolean} isNumber
*/
util.isNumber = function isNumber(object) {
- return (object instanceof Number || typeof object == 'number');
+ return (object instanceof Number || typeof object == 'number');
};
/**
@@ -4054,7 +3515,7 @@ util.isNumber = function isNumber(object) {
* @return {Boolean} isString
*/
util.isString = function isString(object) {
- return (object instanceof String || typeof object == 'string');
+ return (object instanceof String || typeof object == 'string');
};
/**
@@ -4063,21 +3524,21 @@ util.isString = function isString(object) {
* @return {Boolean} isDate
*/
util.isDate = function isDate(object) {
- if (object instanceof Date) {
- return true;
+ if (object instanceof Date) {
+ return true;
+ }
+ else if (util.isString(object)) {
+ // test whether this string contains a date
+ var match = ASPDateRegex.exec(object);
+ if (match) {
+ return true;
}
- else if (util.isString(object)) {
- // test whether this string contains a date
- var match = ASPDateRegex.exec(object);
- if (match) {
- return true;
- }
- else if (!isNaN(Date.parse(object))) {
- return true;
- }
+ else if (!isNaN(Date.parse(object))) {
+ return true;
}
+ }
- return false;
+ return false;
};
/**
@@ -4086,10 +3547,10 @@ util.isDate = function isDate(object) {
* @return {Boolean} isDataTable
*/
util.isDataTable = function isDataTable(object) {
- return (typeof (google) !== 'undefined') &&
- (google.visualization) &&
- (google.visualization.DataTable) &&
- (object instanceof google.visualization.DataTable);
+ return (typeof (google) !== 'undefined') &&
+ (google.visualization) &&
+ (google.visualization.DataTable) &&
+ (object instanceof google.visualization.DataTable);
};
/**
@@ -4098,19 +3559,19 @@ util.isDataTable = function isDataTable(object) {
* @return {String} uuid
*/
util.randomUUID = function randomUUID () {
- var S4 = function () {
- return Math.floor(
- Math.random() * 0x10000 /* 65536 */
- ).toString(16);
- };
+ var S4 = function () {
+ return Math.floor(
+ Math.random() * 0x10000 /* 65536 */
+ ).toString(16);
+ };
- return (
- S4() + S4() + '-' +
- S4() + '-' +
- S4() + '-' +
- S4() + '-' +
- S4() + S4() + S4()
- );
+ return (
+ S4() + S4() + '-' +
+ S4() + '-' +
+ S4() + '-' +
+ S4() + '-' +
+ S4() + S4() + S4()
+ );
};
/**
@@ -4121,16 +3582,16 @@ util.randomUUID = function randomUUID () {
* @return {Object} a
*/
util.extend = function (a, b) {
- for (var i = 1, len = arguments.length; i < len; i++) {
- var other = arguments[i];
- for (var prop in other) {
- if (other.hasOwnProperty(prop) && other[prop] !== undefined) {
- a[prop] = other[prop];
- }
- }
+ for (var i = 1, len = arguments.length; i < len; i++) {
+ var other = arguments[i];
+ for (var prop in other) {
+ if (other.hasOwnProperty(prop) && other[prop] !== undefined) {
+ a[prop] = other[prop];
+ }
}
+ }
- return a;
+ return a;
};
/**
@@ -4143,143 +3604,143 @@ util.extend = function (a, b) {
* @throws Error
*/
util.convert = function convert(object, type) {
- var match;
+ var match;
- if (object === undefined) {
- return undefined;
- }
- if (object === null) {
- return null;
- }
+ if (object === undefined) {
+ return undefined;
+ }
+ if (object === null) {
+ return null;
+ }
- if (!type) {
- return object;
- }
- if (!(typeof type === 'string') && !(type instanceof String)) {
- throw new Error('Type must be a string');
- }
+ if (!type) {
+ return object;
+ }
+ if (!(typeof type === 'string') && !(type instanceof String)) {
+ throw new Error('Type must be a string');
+ }
- //noinspection FallthroughInSwitchStatementJS
- switch (type) {
- case 'boolean':
- case 'Boolean':
- return Boolean(object);
-
- case 'number':
- case 'Number':
- return Number(object.valueOf());
-
- case 'string':
- case 'String':
- return String(object);
-
- case 'Date':
- if (util.isNumber(object)) {
- return new Date(object);
- }
- if (object instanceof Date) {
- return new Date(object.valueOf());
- }
- else if (moment.isMoment(object)) {
- return new Date(object.valueOf());
- }
- if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- if (match) {
- // object is an ASP date
- return new Date(Number(match[1])); // parse number
- }
- else {
- return moment(object).toDate(); // parse string
- }
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type Date');
- }
+ //noinspection FallthroughInSwitchStatementJS
+ switch (type) {
+ case 'boolean':
+ case 'Boolean':
+ return Boolean(object);
- case 'Moment':
- if (util.isNumber(object)) {
- return moment(object);
- }
- if (object instanceof Date) {
- return moment(object.valueOf());
- }
- else if (moment.isMoment(object)) {
- return moment(object);
- }
- if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- if (match) {
- // object is an ASP date
- return moment(Number(match[1])); // parse number
- }
- else {
- return moment(object); // parse string
- }
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type Date');
- }
+ case 'number':
+ case 'Number':
+ return Number(object.valueOf());
- case 'ISODate':
- if (util.isNumber(object)) {
- return new Date(object);
- }
- else if (object instanceof Date) {
- return object.toISOString();
- }
- else if (moment.isMoment(object)) {
- return object.toDate().toISOString();
- }
- else if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- if (match) {
- // object is an ASP date
- return new Date(Number(match[1])).toISOString(); // parse number
- }
- else {
- return new Date(object).toISOString(); // parse string
- }
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type ISODate');
- }
+ case 'string':
+ case 'String':
+ return String(object);
- case 'ASPDate':
- if (util.isNumber(object)) {
- return '/Date(' + object + ')/';
- }
- else if (object instanceof Date) {
- return '/Date(' + object.valueOf() + ')/';
- }
- else if (util.isString(object)) {
- match = ASPDateRegex.exec(object);
- var value;
- if (match) {
- // object is an ASP date
- value = new Date(Number(match[1])).valueOf(); // parse number
- }
- else {
- value = new Date(object).valueOf(); // parse string
- }
- return '/Date(' + value + ')/';
- }
- else {
- throw new Error(
- 'Cannot convert object of type ' + util.getType(object) +
- ' to type ASPDate');
- }
+ case 'Date':
+ if (util.isNumber(object)) {
+ return new Date(object);
+ }
+ if (object instanceof Date) {
+ return new Date(object.valueOf());
+ }
+ else if (moment.isMoment(object)) {
+ return new Date(object.valueOf());
+ }
+ if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ if (match) {
+ // object is an ASP date
+ return new Date(Number(match[1])); // parse number
+ }
+ else {
+ return moment(object).toDate(); // parse string
+ }
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type Date');
+ }
- default:
- throw new Error('Cannot convert object of type ' + util.getType(object) +
- ' to type "' + type + '"');
- }
+ case 'Moment':
+ if (util.isNumber(object)) {
+ return moment(object);
+ }
+ if (object instanceof Date) {
+ return moment(object.valueOf());
+ }
+ else if (moment.isMoment(object)) {
+ return moment(object);
+ }
+ if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ if (match) {
+ // object is an ASP date
+ return moment(Number(match[1])); // parse number
+ }
+ else {
+ return moment(object); // parse string
+ }
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type Date');
+ }
+
+ case 'ISODate':
+ if (util.isNumber(object)) {
+ return new Date(object);
+ }
+ else if (object instanceof Date) {
+ return object.toISOString();
+ }
+ else if (moment.isMoment(object)) {
+ return object.toDate().toISOString();
+ }
+ else if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ if (match) {
+ // object is an ASP date
+ return new Date(Number(match[1])).toISOString(); // parse number
+ }
+ else {
+ return new Date(object).toISOString(); // parse string
+ }
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type ISODate');
+ }
+
+ case 'ASPDate':
+ if (util.isNumber(object)) {
+ return '/Date(' + object + ')/';
+ }
+ else if (object instanceof Date) {
+ return '/Date(' + object.valueOf() + ')/';
+ }
+ else if (util.isString(object)) {
+ match = ASPDateRegex.exec(object);
+ var value;
+ if (match) {
+ // object is an ASP date
+ value = new Date(Number(match[1])).valueOf(); // parse number
+ }
+ else {
+ value = new Date(object).valueOf(); // parse string
+ }
+ return '/Date(' + value + ')/';
+ }
+ else {
+ throw new Error(
+ 'Cannot convert object of type ' + util.getType(object) +
+ ' to type ASPDate');
+ }
+
+ default:
+ throw new Error('Cannot convert object of type ' + util.getType(object) +
+ ' to type "' + type + '"');
+ }
};
// parse ASP.Net Date pattern,
@@ -4293,40 +3754,40 @@ var ASPDateRegex = /^\/?Date\((\-?\d+)/i;
* @return {String} type
*/
util.getType = function getType(object) {
- var type = typeof object;
+ var type = typeof object;
- if (type == 'object') {
- if (object == null) {
- return 'null';
- }
- if (object instanceof Boolean) {
- return 'Boolean';
- }
- if (object instanceof Number) {
- return 'Number';
- }
- if (object instanceof String) {
- return 'String';
- }
- if (object instanceof Array) {
- return 'Array';
- }
- if (object instanceof Date) {
- return 'Date';
- }
- return 'Object';
+ if (type == 'object') {
+ if (object == null) {
+ return 'null';
+ }
+ if (object instanceof Boolean) {
+ return 'Boolean';
}
- else if (type == 'number') {
- return 'Number';
+ if (object instanceof Number) {
+ return 'Number';
}
- else if (type == 'boolean') {
- return 'Boolean';
+ if (object instanceof String) {
+ return 'String';
+ }
+ if (object instanceof Array) {
+ return 'Array';
}
- else if (type == 'string') {
- return 'String';
+ if (object instanceof Date) {
+ return 'Date';
}
+ return 'Object';
+ }
+ else if (type == 'number') {
+ return 'Number';
+ }
+ else if (type == 'boolean') {
+ return 'Boolean';
+ }
+ else if (type == 'string') {
+ return 'String';
+ }
- return type;
+ return type;
};
/**
@@ -4336,17 +3797,17 @@ util.getType = function getType(object) {
* in the browser page.
*/
util.getAbsoluteLeft = function getAbsoluteLeft (elem) {
- var doc = document.documentElement;
- var body = document.body;
-
- var left = elem.offsetLeft;
- var e = elem.offsetParent;
- while (e != null && e != body && e != doc) {
- left += e.offsetLeft;
- left -= e.scrollLeft;
- e = e.offsetParent;
- }
- return left;
+ var doc = document.documentElement;
+ var body = document.body;
+
+ var left = elem.offsetLeft;
+ var e = elem.offsetParent;
+ while (e != null && e != body && e != doc) {
+ left += e.offsetLeft;
+ left -= e.scrollLeft;
+ e = e.offsetParent;
+ }
+ return left;
};
/**
@@ -4356,17 +3817,17 @@ util.getAbsoluteLeft = function getAbsoluteLeft (elem) {
* in the browser page.
*/
util.getAbsoluteTop = function getAbsoluteTop (elem) {
- var doc = document.documentElement;
- var body = document.body;
-
- var top = elem.offsetTop;
- var e = elem.offsetParent;
- while (e != null && e != body && e != doc) {
- top += e.offsetTop;
- top -= e.scrollTop;
- e = e.offsetParent;
- }
- return top;
+ var doc = document.documentElement;
+ var body = document.body;
+
+ var top = elem.offsetTop;
+ var e = elem.offsetParent;
+ while (e != null && e != body && e != doc) {
+ top += e.offsetTop;
+ top -= e.scrollTop;
+ e = e.offsetParent;
+ }
+ return top;
};
/**
@@ -4375,24 +3836,24 @@ util.getAbsoluteTop = function getAbsoluteTop (elem) {
* @return {Number} pageY
*/
util.getPageY = function getPageY (event) {
- if ('pageY' in event) {
- return event.pageY;
+ if ('pageY' in event) {
+ return event.pageY;
+ }
+ else {
+ var clientY;
+ if (('targetTouches' in event) && event.targetTouches.length) {
+ clientY = event.targetTouches[0].clientY;
}
else {
- var clientY;
- if (('targetTouches' in event) && event.targetTouches.length) {
- clientY = event.targetTouches[0].clientY;
- }
- else {
- clientY = event.clientY;
- }
-
- var doc = document.documentElement;
- var body = document.body;
- return clientY +
- ( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
- ( doc && doc.clientTop || body && body.clientTop || 0 );
+ clientY = event.clientY;
}
+
+ var doc = document.documentElement;
+ var body = document.body;
+ return clientY +
+ ( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
+ ( doc && doc.clientTop || body && body.clientTop || 0 );
+ }
};
/**
@@ -4401,24 +3862,24 @@ util.getPageY = function getPageY (event) {
* @return {Number} pageX
*/
util.getPageX = function getPageX (event) {
- if ('pageY' in event) {
- return event.pageX;
+ if ('pageY' in event) {
+ return event.pageX;
+ }
+ else {
+ var clientX;
+ if (('targetTouches' in event) && event.targetTouches.length) {
+ clientX = event.targetTouches[0].clientX;
}
else {
- var clientX;
- if (('targetTouches' in event) && event.targetTouches.length) {
- clientX = event.targetTouches[0].clientX;
- }
- else {
- clientX = event.clientX;
- }
-
- var doc = document.documentElement;
- var body = document.body;
- return clientX +
- ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
- ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ clientX = event.clientX;
}
+
+ var doc = document.documentElement;
+ var body = document.body;
+ return clientX +
+ ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
+ ( doc && doc.clientLeft || body && body.clientLeft || 0 );
+ }
};
/**
@@ -4427,11 +3888,11 @@ util.getPageX = function getPageX (event) {
* @param {String} className
*/
util.addClassName = function addClassName(elem, className) {
- var classes = elem.className.split(' ');
- if (classes.indexOf(className) == -1) {
- classes.push(className); // add the class to the array
- elem.className = classes.join(' ');
- }
+ var classes = elem.className.split(' ');
+ if (classes.indexOf(className) == -1) {
+ classes.push(className); // add the class to the array
+ elem.className = classes.join(' ');
+ }
};
/**
@@ -4440,12 +3901,12 @@ util.addClassName = function addClassName(elem, className) {
* @param {String} className
*/
util.removeClassName = function removeClassname(elem, className) {
- var classes = elem.className.split(' ');
- var index = classes.indexOf(className);
- if (index != -1) {
- classes.splice(index, 1); // remove the class from the array
- elem.className = classes.join(' ');
- }
+ var classes = elem.className.split(' ');
+ var index = classes.indexOf(className);
+ if (index != -1) {
+ classes.splice(index, 1); // remove the class from the array
+ elem.className = classes.join(' ');
+ }
};
/**
@@ -4458,22 +3919,22 @@ util.removeClassName = function removeClassname(elem, className) {
* callback(value, index, object)
*/
util.forEach = function forEach (object, callback) {
- var i,
- len;
- if (object instanceof Array) {
- // array
- for (i = 0, len = object.length; i < len; i++) {
- callback(object[i], i, object);
- }
+ var i,
+ len;
+ if (object instanceof Array) {
+ // array
+ for (i = 0, len = object.length; i < len; i++) {
+ callback(object[i], i, object);
}
- else {
- // object
- for (i in object) {
- if (object.hasOwnProperty(i)) {
- callback(object[i], i, object);
- }
- }
+ }
+ else {
+ // object
+ for (i in object) {
+ if (object.hasOwnProperty(i)) {
+ callback(object[i], i, object);
+ }
}
+ }
};
/**
@@ -4484,13 +3945,13 @@ util.forEach = function forEach (object, callback) {
* @return {Boolean} changed
*/
util.updateProperty = function updateProp (object, key, value) {
- if (object[key] !== value) {
- object[key] = value;
- return true;
- }
- else {
- return false;
- }
+ if (object[key] !== value) {
+ object[key] = value;
+ return true;
+ }
+ else {
+ return false;
+ }
};
/**
@@ -4502,18 +3963,18 @@ util.updateProperty = function updateProp (object, key, value) {
* @param {boolean} [useCapture]
*/
util.addEventListener = function addEventListener(element, action, listener, useCapture) {
- if (element.addEventListener) {
- if (useCapture === undefined)
- useCapture = false;
+ if (element.addEventListener) {
+ if (useCapture === undefined)
+ useCapture = false;
- if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
- action = "DOMMouseScroll"; // For Firefox
- }
-
- element.addEventListener(action, listener, useCapture);
- } else {
- element.attachEvent("on" + action, listener); // IE browsers
+ if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+ action = "DOMMouseScroll"; // For Firefox
}
+
+ element.addEventListener(action, listener, useCapture);
+ } else {
+ element.attachEvent("on" + action, listener); // IE browsers
+ }
};
/**
@@ -4524,20 +3985,20 @@ util.addEventListener = function addEventListener(element, action, listener, use
* @param {boolean} [useCapture]
*/
util.removeEventListener = function removeEventListener(element, action, listener, useCapture) {
- if (element.removeEventListener) {
- // non-IE browsers
- if (useCapture === undefined)
- useCapture = false;
+ if (element.removeEventListener) {
+ // non-IE browsers
+ if (useCapture === undefined)
+ useCapture = false;
- if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
- action = "DOMMouseScroll"; // For Firefox
- }
-
- element.removeEventListener(action, listener, useCapture);
- } else {
- // IE browsers
- element.detachEvent("on" + action, listener);
+ if (action === "mousewheel" && navigator.userAgent.indexOf("Firefox") >= 0) {
+ action = "DOMMouseScroll"; // For Firefox
}
+
+ element.removeEventListener(action, listener, useCapture);
+ } else {
+ // IE browsers
+ element.detachEvent("on" + action, listener);
+ }
};
@@ -4547,41 +4008,41 @@ util.removeEventListener = function removeEventListener(element, action, listene
* @return {Element} target element
*/
util.getTarget = function getTarget(event) {
- // code from http://www.quirksmode.org/js/events_properties.html
- if (!event) {
- event = window.event;
- }
+ // code from http://www.quirksmode.org/js/events_properties.html
+ if (!event) {
+ event = window.event;
+ }
- var target;
+ var target;
- if (event.target) {
- target = event.target;
- }
- else if (event.srcElement) {
- target = event.srcElement;
- }
+ if (event.target) {
+ target = event.target;
+ }
+ else if (event.srcElement) {
+ target = event.srcElement;
+ }
- if (target.nodeType != undefined && target.nodeType == 3) {
- // defeat Safari bug
- target = target.parentNode;
- }
+ if (target.nodeType != undefined && target.nodeType == 3) {
+ // defeat Safari bug
+ target = target.parentNode;
+ }
- return target;
+ return target;
};
/**
* Stop event propagation
*/
util.stopPropagation = function stopPropagation(event) {
- if (!event)
- event = window.event;
+ if (!event)
+ event = window.event;
- if (event.stopPropagation) {
- event.stopPropagation(); // non-IE browsers
- }
- else {
- event.cancelBubble = true; // IE browsers
- }
+ if (event.stopPropagation) {
+ event.stopPropagation(); // non-IE browsers
+ }
+ else {
+ event.cancelBubble = true; // IE browsers
+ }
};
@@ -4589,15 +4050,15 @@ util.stopPropagation = function stopPropagation(event) {
* Cancels the event if it is cancelable, without stopping further propagation of the event.
*/
util.preventDefault = function preventDefault (event) {
- if (!event)
- event = window.event;
+ if (!event)
+ event = window.event;
- if (event.preventDefault) {
- event.preventDefault(); // non-IE browsers
- }
- else {
- event.returnValue = false; // IE browsers
- }
+ if (event.preventDefault) {
+ event.preventDefault(); // non-IE browsers
+ }
+ else {
+ event.returnValue = false; // IE browsers
+ }
};
@@ -4610,15 +4071,15 @@ util.option = {};
* @returns {Boolean} bool
*/
util.option.asBoolean = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (value != null) {
- return (value != false);
- }
+ if (value != null) {
+ return (value != false);
+ }
- return defaultValue || null;
+ return defaultValue || null;
};
/**
@@ -4628,15 +4089,15 @@ util.option.asBoolean = function (value, defaultValue) {
* @returns {Number} number
*/
util.option.asNumber = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (value != null) {
- return Number(value) || defaultValue || null;
- }
+ if (value != null) {
+ return Number(value) || defaultValue || null;
+ }
- return defaultValue || null;
+ return defaultValue || null;
};
/**
@@ -4646,15 +4107,15 @@ util.option.asNumber = function (value, defaultValue) {
* @returns {String} str
*/
util.option.asString = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (value != null) {
- return String(value);
- }
+ if (value != null) {
+ return String(value);
+ }
- return defaultValue || null;
+ return defaultValue || null;
};
/**
@@ -4664,19 +4125,19 @@ util.option.asString = function (value, defaultValue) {
* @returns {String} size
*/
util.option.asSize = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- if (util.isString(value)) {
- return value;
- }
- else if (util.isNumber(value)) {
- return value + 'px';
- }
- else {
- return defaultValue || null;
- }
+ if (util.isString(value)) {
+ return value;
+ }
+ else if (util.isNumber(value)) {
+ return value + 'px';
+ }
+ else {
+ return defaultValue || null;
+ }
};
/**
@@ -4686,11 +4147,11 @@ util.option.asSize = function (value, defaultValue) {
* @returns {HTMLElement | null} dom
*/
util.option.asElement = function (value, defaultValue) {
- if (typeof value == 'function') {
- value = value();
- }
+ if (typeof value == 'function') {
+ value = value();
+ }
- return value || defaultValue || null;
+ return value || defaultValue || null;
};
/**
@@ -4698,27 +4159,27 @@ util.option.asElement = function (value, defaultValue) {
* @param {String} css Text containing css
*/
util.loadCss = function (css) {
- if (typeof document === 'undefined') {
- return;
- }
-
- // get the script location, and built the css file name from the js file name
- // http://stackoverflow.com/a/2161748/1262753
- // var scripts = document.getElementsByTagName('script');
- // var jsFile = scripts[scripts.length-1].src.split('?')[0];
- // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
+ if (typeof document === 'undefined') {
+ return;
+ }
- // inject css
- // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
- var style = document.createElement('style');
- style.type = 'text/css';
- if (style.styleSheet){
- style.styleSheet.cssText = css;
- } else {
- style.appendChild(document.createTextNode(css));
- }
+ // get the script location, and built the css file name from the js file name
+ // http://stackoverflow.com/a/2161748/1262753
+ // var scripts = document.getElementsByTagName('script');
+ // var jsFile = scripts[scripts.length-1].src.split('?')[0];
+ // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
+
+ // inject css
+ // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
+ var style = document.createElement('style');
+ style.type = 'text/css';
+ if (style.styleSheet){
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
- document.getElementsByTagName('head')[0].appendChild(style);
+ document.getElementsByTagName('head')[0].appendChild(style);
};
/**
@@ -4726,116 +4187,116 @@ util.loadCss = function (css) {
*/
// TODO: replace usage of the event listener for the EventBus
var events = {
- 'listeners': [],
-
- /**
- * Find a single listener by its object
- * @param {Object} object
- * @return {Number} index -1 when not found
- */
- 'indexOf': function (object) {
- var listeners = this.listeners;
- for (var i = 0, iMax = this.listeners.length; i < iMax; i++) {
- var listener = listeners[i];
- if (listener && listener.object == object) {
- return i;
- }
- }
- return -1;
- },
-
- /**
- * Add an event listener
- * @param {Object} object
- * @param {String} event The name of an event, for example 'select'
- * @param {function} callback The callback method, called when the
- * event takes place
- */
- 'addListener': function (object, event, callback) {
- var index = this.indexOf(object);
- var listener = this.listeners[index];
- if (!listener) {
- listener = {
- 'object': object,
- 'events': {}
- };
- this.listeners.push(listener);
- }
-
- var callbacks = listener.events[event];
- if (!callbacks) {
- callbacks = [];
- listener.events[event] = callbacks;
- }
-
- // add the callback if it does not yet exist
- if (callbacks.indexOf(callback) == -1) {
- callbacks.push(callback);
+ 'listeners': [],
+
+ /**
+ * Find a single listener by its object
+ * @param {Object} object
+ * @return {Number} index -1 when not found
+ */
+ 'indexOf': function (object) {
+ var listeners = this.listeners;
+ for (var i = 0, iMax = this.listeners.length; i < iMax; i++) {
+ var listener = listeners[i];
+ if (listener && listener.object == object) {
+ return i;
+ }
+ }
+ return -1;
+ },
+
+ /**
+ * Add an event listener
+ * @param {Object} object
+ * @param {String} event The name of an event, for example 'select'
+ * @param {function} callback The callback method, called when the
+ * event takes place
+ */
+ 'addListener': function (object, event, callback) {
+ var index = this.indexOf(object);
+ var listener = this.listeners[index];
+ if (!listener) {
+ listener = {
+ 'object': object,
+ 'events': {}
+ };
+ this.listeners.push(listener);
+ }
+
+ var callbacks = listener.events[event];
+ if (!callbacks) {
+ callbacks = [];
+ listener.events[event] = callbacks;
+ }
+
+ // add the callback if it does not yet exist
+ if (callbacks.indexOf(callback) == -1) {
+ callbacks.push(callback);
+ }
+ },
+
+ /**
+ * Remove an event listener
+ * @param {Object} object
+ * @param {String} event The name of an event, for example 'select'
+ * @param {function} callback The registered callback method
+ */
+ 'removeListener': function (object, event, callback) {
+ var index = this.indexOf(object);
+ var listener = this.listeners[index];
+ if (listener) {
+ var callbacks = listener.events[event];
+ if (callbacks) {
+ index = callbacks.indexOf(callback);
+ if (index != -1) {
+ callbacks.splice(index, 1);
+ }
+
+ // remove the array when empty
+ if (callbacks.length == 0) {
+ delete listener.events[event];
}
- },
-
- /**
- * Remove an event listener
- * @param {Object} object
- * @param {String} event The name of an event, for example 'select'
- * @param {function} callback The registered callback method
- */
- 'removeListener': function (object, event, callback) {
- var index = this.indexOf(object);
- var listener = this.listeners[index];
- if (listener) {
- var callbacks = listener.events[event];
- if (callbacks) {
- index = callbacks.indexOf(callback);
- if (index != -1) {
- callbacks.splice(index, 1);
- }
-
- // remove the array when empty
- if (callbacks.length == 0) {
- delete listener.events[event];
- }
- }
+ }
- // count the number of registered events. remove listener when empty
- var count = 0;
- var events = listener.events;
- for (var e in events) {
- if (events.hasOwnProperty(e)) {
- count++;
- }
- }
- if (count == 0) {
- delete this.listeners[index];
- }
+ // count the number of registered events. remove listener when empty
+ var count = 0;
+ var events = listener.events;
+ for (var e in events) {
+ if (events.hasOwnProperty(e)) {
+ count++;
}
- },
-
- /**
- * Remove all registered event listeners
- */
- 'removeAllListeners': function () {
- this.listeners = [];
- },
+ }
+ if (count == 0) {
+ delete this.listeners[index];
+ }
+ }
+ },
- /**
- * Trigger an event. All registered event handlers will be called
- * @param {Object} object
- * @param {String} event
- * @param {Object} properties (optional)
- */
- 'trigger': function (object, event, properties) {
- var index = this.indexOf(object);
- var listener = this.listeners[index];
- if (listener) {
- var callbacks = listener.events[event];
- if (callbacks) {
- for (var i = 0, iMax = callbacks.length; i < iMax; i++) {
- callbacks[i](properties);
- }
- }
+ /**
+ * Remove all registered event listeners
+ */
+ 'removeAllListeners': function () {
+ this.listeners = [];
+ },
+
+ /**
+ * Trigger an event. All registered event handlers will be called
+ * @param {Object} object
+ * @param {String} event
+ * @param {Object} properties (optional)
+ */
+ 'trigger': function (object, event, properties) {
+ var index = this.indexOf(object);
+ var listener = this.listeners[index];
+ if (listener) {
+ var callbacks = listener.events[event];
+ if (callbacks) {
+ for (var i = 0, iMax = callbacks.length; i < iMax; i++) {
+ callbacks[i](properties);
}
+ }
}
+ }
};
/**
@@ -4843,7 +4304,7 @@ var events = {
* @constructor EventBus
*/
function EventBus() {
- this.subscriptions = [];
+ this.subscriptions = [];
}
/**
@@ -4856,21 +4317,21 @@ function EventBus() {
* @returns {String} id A subscription id
*/
EventBus.prototype.on = function (event, callback, target) {
- var regexp = (event instanceof RegExp) ?
- event :
- new RegExp(event.replace('*', '\\w+'));
-
- var subscription = {
- id: util.randomUUID(),
- event: event,
- regexp: regexp,
- callback: (typeof callback === 'function') ? callback : null,
- target: target
- };
+ var regexp = (event instanceof RegExp) ?
+ event :
+ new RegExp(event.replace('*', '\\w+'));
+
+ var subscription = {
+ id: util.randomUUID(),
+ event: event,
+ regexp: regexp,
+ callback: (typeof callback === 'function') ? callback : null,
+ target: target
+ };
- this.subscriptions.push(subscription);
+ this.subscriptions.push(subscription);
- return subscription.id;
+ return subscription.id;
};
/**
@@ -4882,33 +4343,33 @@ EventBus.prototype.on = function (event, callback, target) {
* callback, and target.
*/
EventBus.prototype.off = function (filter) {
- var i = 0;
- while (i < this.subscriptions.length) {
- var subscription = this.subscriptions[i];
-
- var match = true;
- if (filter instanceof Object) {
- // filter is an object. All fields must match
- for (var prop in filter) {
- if (filter.hasOwnProperty(prop)) {
- if (filter[prop] !== subscription[prop]) {
- match = false;
- }
- }
- }
- }
- else {
- // filter is a string, filter on id
- match = (subscription.id == filter);
+ var i = 0;
+ while (i < this.subscriptions.length) {
+ var subscription = this.subscriptions[i];
+
+ var match = true;
+ if (filter instanceof Object) {
+ // filter is an object. All fields must match
+ for (var prop in filter) {
+ if (filter.hasOwnProperty(prop)) {
+ if (filter[prop] !== subscription[prop]) {
+ match = false;
+ }
}
+ }
+ }
+ else {
+ // filter is a string, filter on id
+ match = (subscription.id == filter);
+ }
- if (match) {
- this.subscriptions.splice(i, 1);
- }
- else {
- i++;
- }
+ if (match) {
+ this.subscriptions.splice(i, 1);
}
+ else {
+ i++;
+ }
+ }
};
/**
@@ -4918,14 +4379,14 @@ EventBus.prototype.off = function (filter) {
* @param {*} [source]
*/
EventBus.prototype.emit = function (event, data, source) {
- for (var i =0; i < this.subscriptions.length; i++) {
- var subscription = this.subscriptions[i];
- if (subscription.regexp.test(event)) {
- if (subscription.callback) {
- subscription.callback(event, data, source);
- }
- }
+ for (var i =0; i < this.subscriptions.length; i++) {
+ var subscription = this.subscriptions[i];
+ if (subscription.regexp.test(event)) {
+ if (subscription.callback) {
+ subscription.callback(event, data, source);
+ }
}
+ }
};
/**
@@ -4966,31 +4427,31 @@ EventBus.prototype.emit = function (event, data, source) {
*/
// TODO: add a DataSet constructor DataSet(data, options)
function DataSet (options) {
- this.id = util.randomUUID();
-
- this.options = options || {};
- this.data = {}; // map with data indexed by id
- this.fieldId = this.options.fieldId || 'id'; // name of the field containing id
- this.convert = {}; // field types by field name
-
- if (this.options.convert) {
- for (var field in this.options.convert) {
- if (this.options.convert.hasOwnProperty(field)) {
- var value = this.options.convert[field];
- if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
- this.convert[field] = 'Date';
- }
- else {
- this.convert[field] = value;
- }
- }
+ this.id = util.randomUUID();
+
+ this.options = options || {};
+ this.data = {}; // map with data indexed by id
+ this.fieldId = this.options.fieldId || 'id'; // name of the field containing id
+ this.convert = {}; // field types by field name
+
+ if (this.options.convert) {
+ for (var field in this.options.convert) {
+ if (this.options.convert.hasOwnProperty(field)) {
+ var value = this.options.convert[field];
+ if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
+ this.convert[field] = 'Date';
+ }
+ else {
+ this.convert[field] = value;
}
+ }
}
+ }
- // event subscribers
- this.subscribers = {};
+ // event subscribers
+ this.subscribers = {};
- this.internalIds = {}; // internally generated id's
+ this.internalIds = {}; // internally generated id's
}
/**
@@ -5003,15 +4464,15 @@ function DataSet (options) {
* {String | Number} senderId
*/
DataSet.prototype.subscribe = function (event, callback) {
- var subscribers = this.subscribers[event];
- if (!subscribers) {
- subscribers = [];
- this.subscribers[event] = subscribers;
- }
+ var subscribers = this.subscribers[event];
+ if (!subscribers) {
+ subscribers = [];
+ this.subscribers[event] = subscribers;
+ }
- subscribers.push({
- callback: callback
- });
+ subscribers.push({
+ callback: callback
+ });
};
/**
@@ -5020,12 +4481,12 @@ DataSet.prototype.subscribe = function (event, callback) {
* @param {function} callback
*/
DataSet.prototype.unsubscribe = function (event, callback) {
- var subscribers = this.subscribers[event];
- if (subscribers) {
- this.subscribers[event] = subscribers.filter(function (listener) {
- return (listener.callback != callback);
- });
- }
+ var subscribers = this.subscribers[event];
+ if (subscribers) {
+ this.subscribers[event] = subscribers.filter(function (listener) {
+ return (listener.callback != callback);
+ });
+ }
};
/**
@@ -5036,24 +4497,24 @@ DataSet.prototype.unsubscribe = function (event, callback) {
* @private
*/
DataSet.prototype._trigger = function (event, params, senderId) {
- if (event == '*') {
- throw new Error('Cannot trigger event *');
- }
+ if (event == '*') {
+ throw new Error('Cannot trigger event *');
+ }
- var subscribers = [];
- if (event in this.subscribers) {
- subscribers = subscribers.concat(this.subscribers[event]);
- }
- if ('*' in this.subscribers) {
- subscribers = subscribers.concat(this.subscribers['*']);
- }
+ var subscribers = [];
+ if (event in this.subscribers) {
+ subscribers = subscribers.concat(this.subscribers[event]);
+ }
+ if ('*' in this.subscribers) {
+ subscribers = subscribers.concat(this.subscribers['*']);
+ }
- for (var i = 0; i < subscribers.length; i++) {
- var subscriber = subscribers[i];
- if (subscriber.callback) {
- subscriber.callback(event, params, senderId || null);
- }
+ for (var i = 0; i < subscribers.length; i++) {
+ var subscriber = subscribers[i];
+ if (subscriber.callback) {
+ subscriber.callback(event, params, senderId || null);
}
+ }
};
/**
@@ -5064,45 +4525,45 @@ DataSet.prototype._trigger = function (event, params, senderId) {
* @return {Array} addedIds Array with the ids of the added items
*/
DataSet.prototype.add = function (data, senderId) {
- var addedIds = [],
- id,
- me = this;
-
- if (data instanceof Array) {
- // Array
- for (var i = 0, len = data.length; i < len; i++) {
- id = me._addItem(data[i]);
- addedIds.push(id);
- }
- }
- else if (util.isDataTable(data)) {
- // Google DataTable
- var columns = this._getColumnNames(data);
- for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
- var item = {};
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- item[field] = data.getValue(row, col);
- }
+ var addedIds = [],
+ id,
+ me = this;
- id = me._addItem(item);
- addedIds.push(id);
- }
- }
- else if (data instanceof Object) {
- // Single item
- id = me._addItem(data);
- addedIds.push(id);
- }
- else {
- throw new Error('Unknown dataType');
+ if (data instanceof Array) {
+ // Array
+ for (var i = 0, len = data.length; i < len; i++) {
+ id = me._addItem(data[i]);
+ addedIds.push(id);
}
+ }
+ else if (util.isDataTable(data)) {
+ // Google DataTable
+ var columns = this._getColumnNames(data);
+ for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+ var item = {};
+ for (var col = 0, cols = columns.length; col < cols; col++) {
+ var field = columns[col];
+ item[field] = data.getValue(row, col);
+ }
- if (addedIds.length) {
- this._trigger('add', {items: addedIds}, senderId);
+ id = me._addItem(item);
+ addedIds.push(id);
}
+ }
+ else if (data instanceof Object) {
+ // Single item
+ id = me._addItem(data);
+ addedIds.push(id);
+ }
+ else {
+ throw new Error('Unknown dataType');
+ }
+
+ if (addedIds.length) {
+ this._trigger('add', {items: addedIds}, senderId);
+ }
- return addedIds;
+ return addedIds;
};
/**
@@ -5112,60 +4573,60 @@ DataSet.prototype.add = function (data, senderId) {
* @return {Array} updatedIds The ids of the added or updated items
*/
DataSet.prototype.update = function (data, senderId) {
- var addedIds = [],
- updatedIds = [],
- me = this,
- fieldId = me.fieldId;
-
- var addOrUpdate = function (item) {
- var id = item[fieldId];
- if (me.data[id]) {
- // update item
- id = me._updateItem(item);
- updatedIds.push(id);
- }
- else {
- // add new item
- id = me._addItem(item);
- addedIds.push(id);
- }
- };
-
- if (data instanceof Array) {
- // Array
- for (var i = 0, len = data.length; i < len; i++) {
- addOrUpdate(data[i]);
- }
- }
- else if (util.isDataTable(data)) {
- // Google DataTable
- var columns = this._getColumnNames(data);
- for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
- var item = {};
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- item[field] = data.getValue(row, col);
- }
-
- addOrUpdate(item);
- }
- }
- else if (data instanceof Object) {
- // Single item
- addOrUpdate(data);
+ var addedIds = [],
+ updatedIds = [],
+ me = this,
+ fieldId = me.fieldId;
+
+ var addOrUpdate = function (item) {
+ var id = item[fieldId];
+ if (me.data[id]) {
+ // update item
+ id = me._updateItem(item);
+ updatedIds.push(id);
}
else {
- throw new Error('Unknown dataType');
+ // add new item
+ id = me._addItem(item);
+ addedIds.push(id);
}
+ };
- if (addedIds.length) {
- this._trigger('add', {items: addedIds}, senderId);
+ if (data instanceof Array) {
+ // Array
+ for (var i = 0, len = data.length; i < len; i++) {
+ addOrUpdate(data[i]);
}
- if (updatedIds.length) {
- this._trigger('update', {items: updatedIds}, senderId);
+ }
+ else if (util.isDataTable(data)) {
+ // Google DataTable
+ var columns = this._getColumnNames(data);
+ for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
+ var item = {};
+ for (var col = 0, cols = columns.length; col < cols; col++) {
+ var field = columns[col];
+ item[field] = data.getValue(row, col);
+ }
+
+ addOrUpdate(item);
}
+ }
+ else if (data instanceof Object) {
+ // Single item
+ addOrUpdate(data);
+ }
+ else {
+ throw new Error('Unknown dataType');
+ }
- return addedIds.concat(updatedIds);
+ if (addedIds.length) {
+ this._trigger('add', {items: addedIds}, senderId);
+ }
+ if (updatedIds.length) {
+ this._trigger('update', {items: updatedIds}, senderId);
+ }
+
+ return addedIds.concat(updatedIds);
};
/**
@@ -5204,138 +4665,138 @@ DataSet.prototype.update = function (data, senderId) {
* @throws Error
*/
DataSet.prototype.get = function (args) {
- var me = this;
+ var me = this;
+
+ // parse the arguments
+ var id, ids, options, data;
+ var firstType = util.getType(arguments[0]);
+ if (firstType == 'String' || firstType == 'Number') {
+ // get(id [, options] [, data])
+ id = arguments[0];
+ options = arguments[1];
+ data = arguments[2];
+ }
+ else if (firstType == 'Array') {
+ // get(ids [, options] [, data])
+ ids = arguments[0];
+ options = arguments[1];
+ data = arguments[2];
+ }
+ else {
+ // get([, options] [, data])
+ options = arguments[0];
+ data = arguments[1];
+ }
+
+ // determine the return type
+ var type;
+ if (options && options.type) {
+ type = (options.type == 'DataTable') ? 'DataTable' : 'Array';
- // parse the arguments
- var id, ids, options, data;
- var firstType = util.getType(arguments[0]);
- if (firstType == 'String' || firstType == 'Number') {
- // get(id [, options] [, data])
- id = arguments[0];
- options = arguments[1];
- data = arguments[2];
- }
- else if (firstType == 'Array') {
- // get(ids [, options] [, data])
- ids = arguments[0];
- options = arguments[1];
- data = arguments[2];
+ if (data && (type != util.getType(data))) {
+ throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
+ 'does not correspond with specified options.type (' + options.type + ')');
}
- else {
- // get([, options] [, data])
- options = arguments[0];
- data = arguments[1];
+ if (type == 'DataTable' && !util.isDataTable(data)) {
+ throw new Error('Parameter "data" must be a DataTable ' +
+ 'when options.type is "DataTable"');
}
+ }
+ else if (data) {
+ type = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+ }
+ else {
+ type = 'Array';
+ }
- // determine the return type
- var type;
- if (options && options.type) {
- type = (options.type == 'DataTable') ? 'DataTable' : 'Array';
+ // build options
+ var convert = options && options.convert || this.options.convert;
+ var filter = options && options.filter;
+ var items = [], item, itemId, i, len;
- if (data && (type != util.getType(data))) {
- throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
- 'does not correspond with specified options.type (' + options.type + ')');
- }
- if (type == 'DataTable' && !util.isDataTable(data)) {
- throw new Error('Parameter "data" must be a DataTable ' +
- 'when options.type is "DataTable"');
- }
+ // convert items
+ if (id != undefined) {
+ // return a single item
+ item = me._getItem(id, convert);
+ if (filter && !filter(item)) {
+ item = null;
}
- else if (data) {
- type = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
+ }
+ else if (ids != undefined) {
+ // return a subset of items
+ for (i = 0, len = ids.length; i < len; i++) {
+ item = me._getItem(ids[i], convert);
+ if (!filter || filter(item)) {
+ items.push(item);
+ }
}
- else {
- type = 'Array';
+ }
+ else {
+ // return all items
+ for (itemId in this.data) {
+ if (this.data.hasOwnProperty(itemId)) {
+ item = me._getItem(itemId, convert);
+ if (!filter || filter(item)) {
+ items.push(item);
+ }
+ }
}
+ }
- // build options
- var convert = options && options.convert || this.options.convert;
- var filter = options && options.filter;
- var items = [], item, itemId, i, len;
+ // order the results
+ if (options && options.order && id == undefined) {
+ this._sort(items, options.order);
+ }
- // convert items
+ // filter fields of the items
+ if (options && options.fields) {
+ var fields = options.fields;
if (id != undefined) {
- // return a single item
- item = me._getItem(id, convert);
- if (filter && !filter(item)) {
- item = null;
- }
- }
- else if (ids != undefined) {
- // return a subset of items
- for (i = 0, len = ids.length; i < len; i++) {
- item = me._getItem(ids[i], convert);
- if (!filter || filter(item)) {
- items.push(item);
- }
- }
+ item = this._filterFields(item, fields);
}
else {
- // return all items
- for (itemId in this.data) {
- if (this.data.hasOwnProperty(itemId)) {
- item = me._getItem(itemId, convert);
- if (!filter || filter(item)) {
- items.push(item);
- }
- }
- }
+ for (i = 0, len = items.length; i < len; i++) {
+ items[i] = this._filterFields(items[i], fields);
+ }
}
+ }
- // order the results
- if (options && options.order && id == undefined) {
- this._sort(items, options.order);
+ // return the results
+ if (type == 'DataTable') {
+ var columns = this._getColumnNames(data);
+ if (id != undefined) {
+ // append a single item to the data table
+ me._appendRow(data, columns, item);
}
-
- // filter fields of the items
- if (options && options.fields) {
- var fields = options.fields;
- if (id != undefined) {
- item = this._filterFields(item, fields);
- }
- else {
- for (i = 0, len = items.length; i < len; i++) {
- items[i] = this._filterFields(items[i], fields);
- }
- }
+ else {
+ // copy the items to the provided data table
+ for (i = 0, len = items.length; i < len; i++) {
+ me._appendRow(data, columns, items[i]);
+ }
}
-
- // return the results
- if (type == 'DataTable') {
- var columns = this._getColumnNames(data);
- if (id != undefined) {
- // append a single item to the data table
- me._appendRow(data, columns, item);
- }
- else {
- // copy the items to the provided data table
- for (i = 0, len = items.length; i < len; i++) {
- me._appendRow(data, columns, items[i]);
- }
- }
- return data;
+ return data;
+ }
+ else {
+ // return an array
+ if (id != undefined) {
+ // a single item
+ return item;
}
else {
- // return an array
- if (id != undefined) {
- // a single item
- return item;
- }
- else {
- // multiple items
- if (data) {
- // copy the items to the provided array
- for (i = 0, len = items.length; i < len; i++) {
- data.push(items[i]);
- }
- return data;
- }
- else {
- // just return our array
- return items;
- }
+ // multiple items
+ if (data) {
+ // copy the items to the provided array
+ for (i = 0, len = items.length; i < len; i++) {
+ data.push(items[i]);
}
+ return data;
+ }
+ else {
+ // just return our array
+ return items;
+ }
}
+ }
};
/**
@@ -5347,78 +4808,78 @@ DataSet.prototype.get = function (args) {
* @return {Array} ids
*/
DataSet.prototype.getIds = function (options) {
- var data = this.data,
- filter = options && options.filter,
- order = options && options.order,
- convert = options && options.convert || this.options.convert,
- i,
- len,
- id,
- item,
- items,
- ids = [];
-
- if (filter) {
- // get filtered items
- if (order) {
- // create ordered list
- items = [];
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (filter(item)) {
- items.push(item);
- }
- }
- }
+ var data = this.data,
+ filter = options && options.filter,
+ order = options && options.order,
+ convert = options && options.convert || this.options.convert,
+ i,
+ len,
+ id,
+ item,
+ items,
+ ids = [];
+
+ if (filter) {
+ // get filtered items
+ if (order) {
+ // create ordered list
+ items = [];
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (filter(item)) {
+ items.push(item);
+ }
+ }
+ }
- this._sort(items, order);
+ this._sort(items, order);
- for (i = 0, len = items.length; i < len; i++) {
- ids[i] = items[i][this.fieldId];
- }
- }
- else {
- // create unordered list
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (filter(item)) {
- ids.push(item[this.fieldId]);
- }
- }
- }
- }
+ for (i = 0, len = items.length; i < len; i++) {
+ ids[i] = items[i][this.fieldId];
+ }
}
else {
- // get all items
- if (order) {
- // create an ordered list
- items = [];
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- items.push(data[id]);
- }
- }
+ // create unordered list
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (filter(item)) {
+ ids.push(item[this.fieldId]);
+ }
+ }
+ }
+ }
+ }
+ else {
+ // get all items
+ if (order) {
+ // create an ordered list
+ items = [];
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ items.push(data[id]);
+ }
+ }
- this._sort(items, order);
+ this._sort(items, order);
- for (i = 0, len = items.length; i < len; i++) {
- ids[i] = items[i][this.fieldId];
- }
- }
- else {
- // create unordered list
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = data[id];
- ids.push(item[this.fieldId]);
- }
- }
+ for (i = 0, len = items.length; i < len; i++) {
+ ids[i] = items[i][this.fieldId];
+ }
+ }
+ else {
+ // create unordered list
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = data[id];
+ ids.push(item[this.fieldId]);
}
+ }
}
+ }
- return ids;
+ return ids;
};
/**
@@ -5433,33 +4894,33 @@ DataSet.prototype.getIds = function (options) {
* a field name or custom sort function.
*/
DataSet.prototype.forEach = function (callback, options) {
- var filter = options && options.filter,
- convert = options && options.convert || this.options.convert,
- data = this.data,
- item,
- id;
+ var filter = options && options.filter,
+ convert = options && options.convert || this.options.convert,
+ data = this.data,
+ item,
+ id;
- if (options && options.order) {
- // execute forEach on ordered list
- var items = this.get(options);
+ if (options && options.order) {
+ // execute forEach on ordered list
+ var items = this.get(options);
- for (var i = 0, len = items.length; i < len; i++) {
- item = items[i];
- id = item[this.fieldId];
- callback(item, id);
- }
+ for (var i = 0, len = items.length; i < len; i++) {
+ item = items[i];
+ id = item[this.fieldId];
+ callback(item, id);
}
- else {
- // unordered
- for (id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (!filter || filter(item)) {
- callback(item, id);
- }
- }
+ }
+ else {
+ // unordered
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (!filter || filter(item)) {
+ callback(item, id);
}
+ }
}
+ }
};
/**
@@ -5474,28 +4935,28 @@ DataSet.prototype.forEach = function (callback, options) {
* @return {Object[]} mappedItems
*/
DataSet.prototype.map = function (callback, options) {
- var filter = options && options.filter,
- convert = options && options.convert || this.options.convert,
- mappedItems = [],
- data = this.data,
- item;
-
- // convert and filter items
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, convert);
- if (!filter || filter(item)) {
- mappedItems.push(callback(item, id));
- }
- }
+ var filter = options && options.filter,
+ convert = options && options.convert || this.options.convert,
+ mappedItems = [],
+ data = this.data,
+ item;
+
+ // convert and filter items
+ for (var id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = this._getItem(id, convert);
+ if (!filter || filter(item)) {
+ mappedItems.push(callback(item, id));
+ }
}
+ }
- // order items
- if (options && options.order) {
- this._sort(mappedItems, options.order);
- }
+ // order items
+ if (options && options.order) {
+ this._sort(mappedItems, options.order);
+ }
- return mappedItems;
+ return mappedItems;
};
/**
@@ -5506,15 +4967,15 @@ DataSet.prototype.map = function (callback, options) {
* @private
*/
DataSet.prototype._filterFields = function (item, fields) {
- var filteredItem = {};
+ var filteredItem = {};
- for (var field in item) {
- if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
- filteredItem[field] = item[field];
- }
+ for (var field in item) {
+ if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
+ filteredItem[field] = item[field];
}
+ }
- return filteredItem;
+ return filteredItem;
};
/**
@@ -5524,24 +4985,24 @@ DataSet.prototype._filterFields = function (item, fields) {
* @private
*/
DataSet.prototype._sort = function (items, order) {
- if (util.isString(order)) {
- // order by provided field name
- var name = order; // field name
- items.sort(function (a, b) {
- var av = a[name];
- var bv = b[name];
- return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
- });
- }
- else if (typeof order === 'function') {
- // order by sort function
- items.sort(order);
- }
- // TODO: extend order by an Object {field:String, direction:String}
- // where direction can be 'asc' or 'desc'
- else {
- throw new TypeError('Order must be a function or a string');
- }
+ if (util.isString(order)) {
+ // order by provided field name
+ var name = order; // field name
+ items.sort(function (a, b) {
+ var av = a[name];
+ var bv = b[name];
+ return (av > bv) ? 1 : ((av < bv) ? -1 : 0);
+ });
+ }
+ else if (typeof order === 'function') {
+ // order by sort function
+ items.sort(order);
+ }
+ // TODO: extend order by an Object {field:String, direction:String}
+ // where direction can be 'asc' or 'desc'
+ else {
+ throw new TypeError('Order must be a function or a string');
+ }
};
/**
@@ -5552,29 +5013,29 @@ DataSet.prototype._sort = function (items, order) {
* @return {Array} removedIds
*/
DataSet.prototype.remove = function (id, senderId) {
- var removedIds = [],
- i, len, removedId;
-
- if (id instanceof Array) {
- for (i = 0, len = id.length; i < len; i++) {
- removedId = this._remove(id[i]);
- if (removedId != null) {
- removedIds.push(removedId);
- }
- }
+ var removedIds = [],
+ i, len, removedId;
+
+ if (id instanceof Array) {
+ for (i = 0, len = id.length; i < len; i++) {
+ removedId = this._remove(id[i]);
+ if (removedId != null) {
+ removedIds.push(removedId);
+ }
}
- else {
- removedId = this._remove(id);
- if (removedId != null) {
- removedIds.push(removedId);
- }
+ }
+ else {
+ removedId = this._remove(id);
+ if (removedId != null) {
+ removedIds.push(removedId);
}
+ }
- if (removedIds.length) {
- this._trigger('remove', {items: removedIds}, senderId);
- }
+ if (removedIds.length) {
+ this._trigger('remove', {items: removedIds}, senderId);
+ }
- return removedIds;
+ return removedIds;
};
/**
@@ -5584,22 +5045,22 @@ DataSet.prototype.remove = function (id, senderId) {
* @private
*/
DataSet.prototype._remove = function (id) {
- if (util.isNumber(id) || util.isString(id)) {
- if (this.data[id]) {
- delete this.data[id];
- delete this.internalIds[id];
- return id;
- }
+ if (util.isNumber(id) || util.isString(id)) {
+ if (this.data[id]) {
+ delete this.data[id];
+ delete this.internalIds[id];
+ return id;
}
- else if (id instanceof Object) {
- var itemId = id[this.fieldId];
- if (itemId && this.data[itemId]) {
- delete this.data[itemId];
- delete this.internalIds[itemId];
- return itemId;
- }
+ }
+ else if (id instanceof Object) {
+ var itemId = id[this.fieldId];
+ if (itemId && this.data[itemId]) {
+ delete this.data[itemId];
+ delete this.internalIds[itemId];
+ return itemId;
}
- return null;
+ }
+ return null;
};
/**
@@ -5608,14 +5069,14 @@ DataSet.prototype._remove = function (id) {
* @return {Array} removedIds The ids of all removed items
*/
DataSet.prototype.clear = function (senderId) {
- var ids = Object.keys(this.data);
+ var ids = Object.keys(this.data);
- this.data = {};
- this.internalIds = {};
+ this.data = {};
+ this.internalIds = {};
- this._trigger('remove', {items: ids}, senderId);
+ this._trigger('remove', {items: ids}, senderId);
- return ids;
+ return ids;
};
/**
@@ -5624,22 +5085,22 @@ DataSet.prototype.clear = function (senderId) {
* @return {Object | null} item Item containing max value, or null if no items
*/
DataSet.prototype.max = function (field) {
- var data = this.data,
- max = null,
- maxField = null;
-
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- var item = data[id];
- var itemField = item[field];
- if (itemField != null && (!max || itemField > maxField)) {
- max = item;
- maxField = itemField;
- }
- }
+ var data = this.data,
+ max = null,
+ maxField = null;
+
+ for (var id in data) {
+ if (data.hasOwnProperty(id)) {
+ var item = data[id];
+ var itemField = item[field];
+ if (itemField != null && (!max || itemField > maxField)) {
+ max = item;
+ maxField = itemField;
+ }
}
+ }
- return max;
+ return max;
};
/**
@@ -5648,22 +5109,22 @@ DataSet.prototype.max = function (field) {
* @return {Object | null} item Item containing max value, or null if no items
*/
DataSet.prototype.min = function (field) {
- var data = this.data,
- min = null,
- minField = null;
-
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- var item = data[id];
- var itemField = item[field];
- if (itemField != null && (!min || itemField < minField)) {
- min = item;
- minField = itemField;
- }
- }
+ var data = this.data,
+ min = null,
+ minField = null;
+
+ for (var id in data) {
+ if (data.hasOwnProperty(id)) {
+ var item = data[id];
+ var itemField = item[field];
+ if (itemField != null && (!min || itemField < minField)) {
+ min = item;
+ minField = itemField;
+ }
}
+ }
- return min;
+ return min;
};
/**
@@ -5675,30 +5136,30 @@ DataSet.prototype.min = function (field) {
* The returned array is unordered.
*/
DataSet.prototype.distinct = function (field) {
- var data = this.data,
- values = [],
- fieldType = this.options.convert[field],
- count = 0;
-
- for (var prop in data) {
- if (data.hasOwnProperty(prop)) {
- var item = data[prop];
- var value = util.convert(item[field], fieldType);
- var exists = false;
- for (var i = 0; i < count; i++) {
- if (values[i] == value) {
- exists = true;
- break;
- }
- }
- if (!exists) {
- values[count] = value;
- count++;
- }
+ var data = this.data,
+ values = [],
+ fieldType = this.options.convert[field],
+ count = 0;
+
+ for (var prop in data) {
+ if (data.hasOwnProperty(prop)) {
+ var item = data[prop];
+ var value = util.convert(item[field], fieldType);
+ var exists = false;
+ for (var i = 0; i < count; i++) {
+ if (values[i] == value) {
+ exists = true;
+ break;
}
+ }
+ if (!exists) {
+ values[count] = value;
+ count++;
+ }
}
+ }
- return values;
+ return values;
};
/**
@@ -5708,32 +5169,32 @@ DataSet.prototype.distinct = function (field) {
* @private
*/
DataSet.prototype._addItem = function (item) {
- var id = item[this.fieldId];
+ var id = item[this.fieldId];
- if (id != undefined) {
- // check whether this id is already taken
- if (this.data[id]) {
- // item already exists
- throw new Error('Cannot add item: item with id ' + id + ' already exists');
- }
- }
- else {
- // generate an id
- id = util.randomUUID();
- item[this.fieldId] = id;
- this.internalIds[id] = item;
+ if (id != undefined) {
+ // check whether this id is already taken
+ if (this.data[id]) {
+ // item already exists
+ throw new Error('Cannot add item: item with id ' + id + ' already exists');
}
+ }
+ else {
+ // generate an id
+ id = util.randomUUID();
+ item[this.fieldId] = id;
+ this.internalIds[id] = item;
+ }
- var d = {};
- for (var field in item) {
- if (item.hasOwnProperty(field)) {
- var fieldType = this.convert[field]; // type may be undefined
- d[field] = util.convert(item[field], fieldType);
- }
+ var d = {};
+ for (var field in item) {
+ if (item.hasOwnProperty(field)) {
+ var fieldType = this.convert[field]; // type may be undefined
+ d[fi