From 1f6064b491c473d2b957aadadaa05bbc3e2393aa Mon Sep 17 00:00:00 2001
From: josdejong
Date: Tue, 14 Jan 2014 17:29:19 +0100
Subject: [PATCH] Released version 0.3.0
---
dist/vis.css | 235 +
dist/vis.js | 15765 ++++++++++++++++
dist/vis.min.js | 29 +
docs/css/prettify.css | 102 +-
docs/css/style.css | 78 +-
docs/dataset.html | 1095 +-
docs/dataview.html | 272 +-
docs/graph.html | 1636 +-
docs/index.html | 255 +-
docs/timeline.html | 883 +-
download/vis.zip | Bin 0 -> 941597 bytes
examples/graph/01_basic_usage.html | 68 +-
examples/graph/02_random_nodes.html | 168 +-
examples/graph/03_images.html | 144 +-
examples/graph/04_shapes.html | 114 +-
examples/graph/05_social_network.html | 116 +-
examples/graph/06_groups.html | 282 +-
examples/graph/07_selections.html | 88 +-
examples/graph/08_mobile_friendly.html | 174 +-
examples/graph/09_sizing.html | 126 +-
examples/graph/10_multiline_text.html | 72 +-
examples/graph/11_custom_style.html | 228 +-
examples/graph/12_scalable_images.html | 132 +-
examples/graph/13_dashed_lines.html | 104 +-
examples/graph/14_dot_language.html | 20 +-
.../graph/15_dot_language_playground.html | 344 +-
examples/graph/16_dynamic_data.html | 448 +-
examples/graph/17_network_info.html | 280 +-
examples/graph/graphviz/graphviz_gallery.html | 120 +-
examples/graph/index.html | 42 +-
examples/timeline/01_basic.html | 37 +-
examples/timeline/02_dataset.html | 100 +-
examples/timeline/03_much_data.html | 3 +-
examples/timeline/04_html_data.html | 99 +-
examples/timeline/05_groups.html | 101 +-
examples/timeline/index.html | 16 +-
.../timeline/requirejs/requirejs_example.html | 8 +-
examples/timeline/requirejs/scripts/main.js | 28 +-
index.html | 63 +-
package.js | 0
updateversion.js | 78 +-
vis.js | 14667 --------------
vis.min.js | 29 -
43 files changed, 19997 insertions(+), 18652 deletions(-)
create mode 100644 dist/vis.css
create mode 100644 dist/vis.js
create mode 100644 dist/vis.min.js
create mode 100644 download/vis.zip
create mode 100644 package.js
delete mode 100644 vis.js
delete mode 100644 vis.min.js
diff --git a/dist/vis.css b/dist/vis.css
new file mode 100644
index 00000000..4f54a95f
--- /dev/null
+++ b/dist/vis.css
@@ -0,0 +1,235 @@
+.vis.timeline {
+}
+
+
+.vis.timeline.rootpanel {
+ position: relative;
+ overflow: hidden;
+
+ border: 1px solid #bfbfbf;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.vis.timeline .panel {
+ position: absolute;
+ overflow: hidden;
+}
+
+
+.vis.timeline .groupset {
+ 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;
+}
+
+.vis.timeline .labels .label-set {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ overflow: hidden;
+
+ border-top: none;
+ border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labels .label-set .label {
+ 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;
+}
+
+.vis.timeline.bottom .labels .label-set .label,
+.vis.timeline.bottom .groupset .itemset-axis {
+ border-top: none;
+ border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labels .label-set .label .inner {
+ display: inline-block;
+ padding: 5px;
+}
+
+
+.vis.timeline .itemset {
+ position: absolute;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+}
+
+.vis.timeline .background {
+}
+
+.vis.timeline .foreground {
+}
+
+.vis.timeline .itemset-axis {
+ position: absolute;
+}
+
+
+.vis.timeline .item {
+ 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;
+}
+
+.vis.timeline .item.cluster {
+ /* TODO: use another color or pattern? */
+ background: #97B0F8 url('img/cluster_bg.png');
+ color: white;
+}
+.vis.timeline .item.cluster.point {
+ 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 */
+}
+
+.vis.timeline .item.point {
+ background: none;
+}
+
+.vis.timeline .dot {
+ 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 */
+}
+
+.vis.timeline .item.rangeoverflow {
+ 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;
+}
+
+.vis.timeline .item.range .drag-right, .vis.timeline .item.rangeoverflow .drag-right {
+ cursor: e-resize;
+ z-index: 1000;
+}
+
+.vis.timeline .item.range .content, .vis.timeline .item.rangeoverflow .content {
+ position: relative;
+ display: inline-block;
+}
+
+.vis.timeline .item.line {
+ position: absolute;
+ width: 0;
+ border-left-width: 1px;
+ border-left-style: solid;
+}
+
+.vis.timeline .item .content {
+ margin: 5px;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.vis.timeline .axis {
+ position: relative;
+}
+
+.vis.timeline .axis .text {
+ 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;
+}
+
+.vis.timeline .axis .grid.vertical {
+ 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;
+}
+
+.vis.timeline .axis .grid.minor {
+ border-color: #e5e5e5;
+}
+
+.vis.timeline .axis .grid.major {
+ border-color: #bfbfbf;
+}
+
+.vis.timeline .currenttime {
+ background-color: #FF7F6E;
+ width: 2px;
+ z-index: 9;
+}
+.vis.timeline .customtime {
+ background-color: #6E94FF;
+ width: 2px;
+ cursor: move;
+ z-index: 9;
+}
diff --git a/dist/vis.js b/dist/vis.js
new file mode 100644
index 00000000..7594f2f9
--- /dev/null
+++ b/dist/vis.js
@@ -0,0 +1,15765 @@
+/**
+ * vis.js
+ * https://github.com/almende/vis
+ *
+ * A dynamic, browser-based visualization library.
+ *
+ * @version 0.3.0
+ * @date 2014-01-14
+ *
+ * @license
+ * Copyright (C) 2011-2013 Almende B.V, http://almende.com
+ *
+ * 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
+ *
+ * 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.
+ */
+!function(e){if("object"==typeof exports)module.exports=e();else if("function"==typeof define&&define.amd)define(e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.vis=e()}}(function(){var define,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;
+
+ // 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;
+ }
+
+ // 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;
+
+ // 8. Repeat, while k < len
+ while(k < len) {
+
+ 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) {
+
+ // 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);
+
+ // 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 });
+
+ // 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";
+
+ if (this == null) {
+ 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);
+ }
+ }
+
+ return res;
+ };
+}
+
+
+// Internet Explorer 8 and older does not support Object.keys, so we define it
+// 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;
+ }
+ })()
+}
+
+// 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]";
+ };
+}
+
+// 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)));
+ };
+
+ 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();
+ };
+}
+
+// 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)));
+ };
+
+ fNOP.prototype = this.prototype;
+ fBound.prototype = new fNOP();
+
+ return fBound;
+ };
+}
+
+/**
+ * utility functions
+ */
+var util = {};
+
+/**
+ * Test whether given object is a number
+ * @param {*} object
+ * @return {Boolean} isNumber
+ */
+util.isNumber = function isNumber(object) {
+ return (object instanceof Number || typeof object == 'number');
+};
+
+/**
+ * Test whether given object is a string
+ * @param {*} object
+ * @return {Boolean} isString
+ */
+util.isString = function isString(object) {
+ return (object instanceof String || typeof object == 'string');
+};
+
+/**
+ * Test whether given object is a Date, or a String containing a Date
+ * @param {Date | String} object
+ * @return {Boolean} isDate
+ */
+util.isDate = function isDate(object) {
+ 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 (!isNaN(Date.parse(object))) {
+ return true;
+ }
+ }
+
+ return false;
+};
+
+/**
+ * Test whether given object is an instance of google.visualization.DataTable
+ * @param {*} object
+ * @return {Boolean} isDataTable
+ */
+util.isDataTable = function isDataTable(object) {
+ return (typeof (google) !== 'undefined') &&
+ (google.visualization) &&
+ (google.visualization.DataTable) &&
+ (object instanceof google.visualization.DataTable);
+};
+
+/**
+ * Create a semi UUID
+ * source: http://stackoverflow.com/a/105074/1262753
+ * @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()
+ );
+};
+
+/**
+ * Extend object a with the properties of object b or a series of objects
+ * Only properties with defined values are copied
+ * @param {Object} a
+ * @param {... Object} b
+ * @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];
+ }
+ }
+ }
+
+ return a;
+};
+
+/**
+ * Convert an object to another type
+ * @param {Boolean | Number | String | Date | Moment | Null | undefined} object
+ * @param {String | undefined} type Name of the type. Available types:
+ * 'Boolean', 'Number', 'String',
+ * 'Date', 'Moment', ISODate', 'ASPDate'.
+ * @return {*} object
+ * @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 + '"');
+ }
+};
+
+// parse ASP.Net Date pattern,
+// for example '/Date(1198908717056)/' or '/Date(1198908717056-0700)/'
+// code from http://momentjs.com/
+var ASPDateRegex = /^\/?Date\((\-?\d+)/i;
+
+/**
+ * Get the type of an object, for example util.getType([]) returns 'Array'
+ * @param {*} object
+ * @return {String} type
+ */
+util.getType = function getType(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';
+ }
+ else if (type == 'number') {
+ return 'Number';
+ }
+ else if (type == 'boolean') {
+ return 'Boolean';
+ }
+ else if (type == 'string') {
+ return 'String';
+ }
+
+ return type;
+};
+
+/**
+ * Retrieve the absolute left value of a DOM element
+ * @param {Element} elem A dom element, for example a div
+ * @return {number} left The absolute left position of this element
+ * 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;
+};
+
+/**
+ * Retrieve the absolute top value of a DOM element
+ * @param {Element} elem A dom element, for example a div
+ * @return {number} top The absolute top position of this element
+ * 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;
+};
+
+/**
+ * Get the absolute, vertical mouse position from an event.
+ * @param {Event} event
+ * @return {Number} pageY
+ */
+util.getPageY = function getPageY (event) {
+ if ('pageY' in event) {
+ return event.pageY;
+ }
+ 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 );
+ }
+};
+
+/**
+ * Get the absolute, horizontal mouse position from an event.
+ * @param {Event} event
+ * @return {Number} pageX
+ */
+util.getPageX = function getPageX (event) {
+ if ('pageY' in event) {
+ return event.pageX;
+ }
+ 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 );
+ }
+};
+
+/**
+ * add a className to the given elements style
+ * @param {Element} elem
+ * @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(' ');
+ }
+};
+
+/**
+ * add a className to the given elements style
+ * @param {Element} elem
+ * @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(' ');
+ }
+};
+
+/**
+ * For each method for both arrays and objects.
+ * In case of an array, the built-in Array.forEach() is applied.
+ * In case of an Object, the method loops over all properties of the object.
+ * @param {Object | Array} object An Object or Array
+ * @param {function} callback Callback method, called for each item in
+ * the object or array with three parameters:
+ * 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);
+ }
+ }
+ }
+};
+
+/**
+ * Update a property in an object
+ * @param {Object} object
+ * @param {String} key
+ * @param {*} value
+ * @return {Boolean} changed
+ */
+util.updateProperty = function updateProp (object, key, value) {
+ if (object[key] !== value) {
+ object[key] = value;
+ return true;
+ }
+ else {
+ return false;
+ }
+};
+
+/**
+ * Add and event listener. Works for all browsers
+ * @param {Element} element An html element
+ * @param {string} action The action, for example "click",
+ * without the prefix "on"
+ * @param {function} listener The callback function to be executed
+ * @param {boolean} [useCapture]
+ */
+util.addEventListener = function addEventListener(element, action, listener, useCapture) {
+ 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
+ }
+};
+
+/**
+ * Remove an event listener from an element
+ * @param {Element} element An html dom element
+ * @param {string} action The name of the event, for example "mousedown"
+ * @param {function} listener The listener function
+ * @param {boolean} [useCapture]
+ */
+util.removeEventListener = function removeEventListener(element, action, listener, useCapture) {
+ 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);
+ }
+};
+
+
+/**
+ * Get HTML element which is the target of the event
+ * @param {Event} event
+ * @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;
+};
+
+/**
+ * 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
+ }
+};
+
+/**
+ * Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
+ * @param {Element} element
+ * @param {Event} event
+ */
+util.fakeGesture = function fakeGesture (element, event) {
+ var eventType = null;
+
+ // for hammer.js 1.0.5
+ return Hammer.event.collectEventData(this, eventType, event);
+
+ // for hammer.js 1.0.6
+ //var touches = Hammer.event.getTouchList(event, eventType);
+ //return Hammer.event.collectEventData(this, eventType, touches, 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
+ }
+};
+
+
+util.option = {};
+
+/**
+ * Convert a value into a boolean
+ * @param {Boolean | function | undefined} value
+ * @param {Boolean} [defaultValue]
+ * @returns {Boolean} bool
+ */
+util.option.asBoolean = function (value, defaultValue) {
+ if (typeof value == 'function') {
+ value = value();
+ }
+
+ if (value != null) {
+ return (value != false);
+ }
+
+ return defaultValue || null;
+};
+
+/**
+ * Convert a value into a number
+ * @param {Boolean | function | undefined} value
+ * @param {Number} [defaultValue]
+ * @returns {Number} number
+ */
+util.option.asNumber = function (value, defaultValue) {
+ if (typeof value == 'function') {
+ value = value();
+ }
+
+ if (value != null) {
+ return Number(value) || defaultValue || null;
+ }
+
+ return defaultValue || null;
+};
+
+/**
+ * Convert a value into a string
+ * @param {String | function | undefined} value
+ * @param {String} [defaultValue]
+ * @returns {String} str
+ */
+util.option.asString = function (value, defaultValue) {
+ if (typeof value == 'function') {
+ value = value();
+ }
+
+ if (value != null) {
+ return String(value);
+ }
+
+ return defaultValue || null;
+};
+
+/**
+ * Convert a size or location into a string with pixels or a percentage
+ * @param {String | Number | function | undefined} value
+ * @param {String} [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;
+ }
+};
+
+/**
+ * Convert a value into a DOM element
+ * @param {HTMLElement | function | undefined} value
+ * @param {HTMLElement} [defaultValue]
+ * @returns {HTMLElement | null} dom
+ */
+util.option.asElement = function (value, defaultValue) {
+ if (typeof value == 'function') {
+ value = value();
+ }
+
+ return value || defaultValue || null;
+};
+
+/**
+ * Event listener (singleton)
+ */
+// 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);
+ }
+ },
+
+ /**
+ * 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];
+ }
+ }
+ },
+
+ /**
+ * 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);
+ }
+ }
+ }
+ }
+};
+
+/**
+ * An event bus can be used to emit events, and to subscribe to events
+ * @constructor EventBus
+ */
+function EventBus() {
+ this.subscriptions = [];
+}
+
+/**
+ * Subscribe to an event
+ * @param {String | RegExp} event The event can be a regular expression, or
+ * a string with wildcards, like 'server.*'.
+ * @param {function} callback. Callback are called with three parameters:
+ * {String} event, {*} [data], {*} [source]
+ * @param {*} [target]
+ * @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
+ };
+
+ this.subscriptions.push(subscription);
+
+ return subscription.id;
+};
+
+/**
+ * Unsubscribe from an event
+ * @param {String | Object} filter Filter for subscriptions to be removed
+ * Filter can be a string containing a
+ * subscription id, or an object containing
+ * one or more of the fields id, event,
+ * 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);
+ }
+
+ if (match) {
+ this.subscriptions.splice(i, 1);
+ }
+ else {
+ i++;
+ }
+ }
+};
+
+/**
+ * Emit an event
+ * @param {String} event
+ * @param {*} [data]
+ * @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);
+ }
+ }
+ }
+};
+
+/**
+ * DataSet
+ *
+ * Usage:
+ * var dataSet = new DataSet({
+ * fieldId: '_id',
+ * convert: {
+ * // ...
+ * }
+ * });
+ *
+ * dataSet.add(item);
+ * dataSet.add(data);
+ * dataSet.update(item);
+ * dataSet.update(data);
+ * dataSet.remove(id);
+ * dataSet.remove(ids);
+ * var data = dataSet.get();
+ * var data = dataSet.get(id);
+ * var data = dataSet.get(ids);
+ * var data = dataSet.get(ids, options, data);
+ * dataSet.clear();
+ *
+ * A data set can:
+ * - add/remove/update data
+ * - gives triggers upon changes in the data
+ * - can import/export data in various data formats
+ *
+ * @param {Object} [options] Available options:
+ * {String} fieldId Field name of the id in the
+ * items, 'id' by default.
+ * {Object.} [convert]
+ * {String[]} [fields] field names to be returned
+ * {function} [filter] filter items
+ * {String | function} [order] Order the items by
+ * a field name or custom sort function.
+ * {Array | DataTable} [data] If provided, items will be appended to this
+ * array or table. Required in case of Google
+ * DataTable.
+ *
+ * @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];
+ }
+ 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 {
+ 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]);
+ }
+ }
+ return data;
+ }
+ 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;
+ }
+ }
+ }
+};
+
+/**
+ * Get ids of all items or from a filtered set of items.
+ * @param {Object} [options] An Object with options. Available options:
+ * {function} [filter] filter items
+ * {String | function} [order] Order the items by
+ * a field name or custom sort function.
+ * @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]);
+ }
+ }
+ }
+ }
+ }
+ 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];
+ }
+ }
+ else {
+ // create unordered list
+ for (id in data) {
+ if (data.hasOwnProperty(id)) {
+ item = data[id];
+ ids.push(item[this.fieldId]);
+ }
+ }
+ }
+ }
+
+ return ids;
+};
+
+/**
+ * Execute a callback function for every item in the dataset.
+ * The order of the items is not determined.
+ * @param {function} callback
+ * @param {Object} [options] Available options:
+ * {Object.} [convert]
+ * {String[]} [fields] filter fields
+ * {function} [filter] filter items
+ * {String | function} [order] Order the items by
+ * 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);
+ }
+ }
+ }
+ }
+};
+
+/**
+ * Map every item in the dataset.
+ * @param {function} callback
+ * @param {Object} [options] Available options:
+ * {Object.} [convert]
+ * {String[]} [fields] filter fields
+ * {function} [filter] filter items
+ * {String | function} [order] Order the items by
+ * a field name or custom sort function.
+ * @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;
+};
+
+/**
+ * Filter the fields of an item
+ * @param {Object} item
+ * @param {String[]} fields Field names
+ * @return {Object} filteredItem
+ * @private
+ */
+DataSet.prototype._filterFields = function (item, fields) {
+ var filteredItem = {};
+
+ for (var field in item) {
+ if (item.hasOwnProperty(field) && (fields.indexOf(field) != -1)) {
+ filteredItem[field] = item[field];
+ }
+ }
+
+ return filteredItem;
+};
+
+/**
+ * Sort the provided array with items
+ * @param {Object[]} items
+ * @param {String | function} order A field name or custom sort function.
+ * @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');
+ }
+};
+
+/**
+ * Remove an object by pointer or by id
+ * @param {String | Number | Object | Array} id Object or id, or an array with
+ * objects or ids to be removed
+ * @param {String} [senderId] Optional sender id
+ * @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);
+ }
+ }
+ }
+ else {
+ removedId = this._remove(id);
+ if (removedId != null) {
+ removedIds.push(removedId);
+ }
+ }
+
+ if (removedIds.length) {
+ this._trigger('remove', {items: removedIds}, senderId);
+ }
+
+ return removedIds;
+};
+
+/**
+ * Remove an item by its id
+ * @param {Number | String | Object} id id or item
+ * @returns {Number | String | null} id
+ * @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;
+};
+
+/**
+ * Clear the data
+ * @param {String} [senderId] Optional sender id
+ * @return {Array} removedIds The ids of all removed items
+ */
+DataSet.prototype.clear = function (senderId) {
+ var ids = Object.keys(this.data);
+
+ this.data = {};
+ this.internalIds = {};
+
+ this._trigger('remove', {items: ids}, senderId);
+
+ return ids;
+};
+
+/**
+ * Find the item with maximum value of a specified field
+ * @param {String} field
+ * @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;
+};
+
+/**
+ * Find the item with minimum value of a specified field
+ * @param {String} 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;
+};
+
+/**
+ * Find all distinct values of a specified field
+ * @param {String} field
+ * @return {Array} values Array containing all distinct values. If the data
+ * items do not contain the specified field, an array
+ * containing a single value undefined is returned.
+ * 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;
+};
+
+/**
+ * Add a single item. Will fail when an item with the same id already exists.
+ * @param {Object} item
+ * @return {String} id
+ * @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;
+};
+
+/**
+ * Get an item. Fields can be converted to a specific type
+ * @param {String} id
+ * @param {Object.} [convert] field types to convert
+ * @return {Object | null} 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;
+ }
+ }
+ }
+ }
+
+ return converted;
+};
+
+/**
+ * Update a single item: merge with existing item.
+ * Will fail when the item has no id, or when there does not exist an item
+ * with the same id.
+ * @param {Object} item
+ * @return {String} id
+ * @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;
+};
+
+/**
+ * Get an array with the column names of a Google DataTable
+ * @param {DataTable} dataTable
+ * @return {String[]} columnNames
+ * @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;
+};
+
+/**
+ * Append an item as a row to the dataTable
+ * @param dataTable
+ * @param columns
+ * @param item
+ * @private
+ */
+DataSet.prototype._appendRow = function (dataTable, columns, item) {
+ var row = dataTable.addRow();
+
+ for (var col = 0, cols = columns.length; col < cols; col++) {
+ var field = columns[col];
+ dataTable.setValue(row, col, item[field]);
+ }
+};
+
+/**
+ * DataView
+ *
+ * a dataview offers a filtered view on a dataset or an other dataview.
+ *
+ * @param {DataSet | DataView} data
+ * @param {Object} [options] Available options: see method get
+ *
+ * @constructor DataView
+ */
+function DataView (data, options) {
+ 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
+
+ var me = this;
+ this.listener = function () {
+ me._onEvent.apply(me, arguments);
+ };
+
+ 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;
+
+ 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});
+ }
+
+ this.data = data;
+
+ 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});
+
+ // subscribe to new dataset
+ if (this.data.subscribe) {
+ this.data.subscribe('*', this.listener);
+ }
+ }
+};
+
+/**
+ * Get data from the data view
+ *
+ * Usage:
+ *
+ * get()
+ * get(options: Object)
+ * get(options: Object, data: Array | DataTable)
+ *
+ * get(id: Number)
+ * get(id: Number, options: Object)
+ * get(id: Number, options: Object, data: Array | DataTable)
+ *
+ * get(ids: Number[])
+ * get(ids: Number[], options: Object)
+ * get(ids: Number[], options: Object, data: Array | DataTable)
+ *
+ * Where:
+ *
+ * {Number | String} id The id of an item
+ * {Number[] | String{}} ids An array with ids of items
+ * {Object} options An Object with options. Available options:
+ * {String} [type] Type of data to be returned. Can
+ * be 'DataTable' or 'Array' (default)
+ * {Object.} [convert]
+ * {String[]} [fields] field names to be returned
+ * {function} [filter] filter items
+ * {String | function} [order] Order the items by
+ * a field name or custom sort function.
+ * {Array | DataTable} [data] If provided, items will be appended to this
+ * array or table. Required in case of Google
+ * DataTable.
+ * @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];
+ }
+
+ // extend the options with the default options and provided options
+ var viewOptions = util.extend({}, this.options, options);
+
+ // 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);
+ }
+ }
+
+ // 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);
+};
+
+/**
+ * Get ids of all items or from a filtered set of items.
+ * @param {Object} [options] An Object with options. Available options:
+ * {function} [filter] filter items
+ * {String | function} [order] Order the items by
+ * a field name or custom sort function.
+ * @return {Array} ids
+ */
+DataView.prototype.getIds = function (options) {
+ var ids;
+
+ 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;
+ }
+
+ ids = this.data.getIds({
+ filter: filter,
+ order: options && options.order
+ });
+ }
+ else {
+ ids = [];
+ }
+
+ return ids;
+};
+
+/**
+ * Event listener. Will propagate all events from the connected data set to
+ * the subscribers of the DataView, but will filter the items and only trigger
+ * when there are changes in the filtered data set.
+ * @param {String} event
+ * @param {Object | null} params
+ * @param {String} senderId
+ * @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;
+ }
+
+ 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
+DataView.prototype.subscribe = DataSet.prototype.subscribe;
+DataView.prototype.unsubscribe = DataSet.prototype.unsubscribe;
+DataView.prototype._trigger = DataSet.prototype._trigger;
+
+/**
+ * @constructor TimeStep
+ * The class TimeStep is an iterator for dates. You provide a start date and an
+ * end date. The class itself determines the best scale (step size) based on the
+ * provided start Date, end Date, and minimumStep.
+ *
+ * If minimumStep is provided, the step size is chosen as close as possible
+ * to the minimumStep but larger than minimumStep. If minimumStep is not
+ * provided, the scale is set to 1 DAY.
+ * The minimumStep should correspond with the onscreen size of about 6 characters
+ *
+ * Alternatively, you can set a scale by hand.
+ * After creation, you can initialize the class by executing first(). Then you
+ * can iterate from the start date to the end date via next(). You can check if
+ * the end date is reached with the function hasNext(). After each step, you can
+ * retrieve the current date via getCurrent().
+ * The TimeStep has scales ranging from milliseconds, seconds, minutes, hours,
+ * days, to years.
+ *
+ * Version: 1.2
+ *
+ * @param {Date} [start] The start date, for example new Date(2010, 9, 21)
+ * or new Date(2010, 9, 21, 23, 45, 00)
+ * @param {Date} [end] The end date
+ * @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();
+
+ this.autoScale = true;
+ this.scale = TimeStep.SCALE.DAY;
+ this.step = 1;
+
+ // 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
+};
+
+
+/**
+ * Set a new range
+ * If minimumStep is provided, the step size is chosen as close as possible
+ * to the minimumStep but larger than minimumStep. If minimumStep is not
+ * provided, the scale is set to 1 DAY.
+ * The minimumStep should correspond with the onscreen size of about 6 characters
+ * @param {Date} [start] The start date and time.
+ * @param {Date} [end] The end date and time.
+ * @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";
+ }
+
+ 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);
+ }
+};
+
+/**
+ * Set the range iterator to the start date.
+ */
+TimeStep.prototype.first = function() {
+ this.current = new Date(this._start.valueOf());
+ this.roundToMinor();
+};
+
+/**
+ * Round the current date to the first minor date value
+ * 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
+ 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;
+ }
+ }
+};
+
+/**
+ * Check if the there is a next step
+ * @return {boolean} true if the current date has not passed the end date
+ */
+TimeStep.prototype.hasNext = function () {
+ 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;
+ }
+ }
+ 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;
+ }
+ }
+
+ // safety mechanism: if current time is still unchanged, move to the end
+ if (this.current.valueOf() == prev) {
+ this.current = new Date(this._end.valueOf());
+ }
+};
+
+
+/**
+ * Get the current datetime
+ * @return {Date} current The current date
+ */
+TimeStep.prototype.getCurrent = function() {
+ return this.current;
+};
+
+/**
+ * Set a custom scale. Autoscaling will be disabled.
+ * For example setScale(SCALE.MINUTES, 5) will result
+ * in minor steps of 5 minutes, and major steps of an hour.
+ *
+ * @param {TimeStep.SCALE} newScale
+ * A scale. Choose from SCALE.MILLISECOND,
+ * SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
+ * SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
+ * SCALE.YEAR.
+ * @param {Number} newStep A step size, by default 1. Choose for
+ * example 1, 2, 5, or 10.
+ */
+TimeStep.prototype.setScale = function(newScale, newStep) {
+ this.scale = newScale;
+
+ if (newStep > 0) {
+ this.step = newStep;
+ }
+
+ this.autoScale = false;
+};
+
+/**
+ * Enable or disable autoscaling
+ * @param {boolean} enable If true, autoascaling is set true
+ */
+TimeStep.prototype.setAutoScale = function (enable) {
+ this.autoScale = enable;
+};
+
+
+/**
+ * Automatically determine the scale that bests fits the provided minimum step
+ * @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;}
+};
+
+/**
+ * Snap a date to a rounded value. The snap intervals are dependent on the
+ * current scale and step.
+ * @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);
+ }
+ 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 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);
+ }
+ 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);
+ }
+ 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);
+ }
+};
+
+/**
+ * Check if the current value is a major value (for example when the step
+ * is DAY, a major value is each first day of the MONTH)
+ * @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;
+ }
+};
+
+
+/**
+ * Returns formatted text for the minor axislabel, depending on the current
+ * date and the scale. For example when scale is MINUTE, the current time is
+ * formatted as "hh:mm".
+ * @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 '';
+ }
+};
+
+
+/**
+ * Returns formatted text for the major axis label, depending on the current
+ * date and the scale. For example when scale is MINUTE, the major scale is
+ * hours, and the hour will be formatted as "hh".
+ * @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 '';
+ }
+};
+
+/**
+ * @constructor Stack
+ * Stacks items on top of each other.
+ * @param {ItemSet} parent
+ * @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.ordered = []; // ordered items
+}
+
+/**
+ * Set options for the stack
+ * @param {Object} options Available options:
+ * {ItemSet} parent
+ * {Number} margin
+ * {function} order Stacking order
+ */
+Stack.prototype.setOptions = function setOptions (options) {
+ util.extend(this.options, options);
+
+ // TODO: register on data changes at the connected parent itemset, and update the changed part only and immediately
+};
+
+/**
+ * Stack the items such that they don't overlap. The items will have a minimal
+ * distance equal to options.margin.item.
+ */
+Stack.prototype.update = function update() {
+ this._order();
+ this._stack();
+};
+
+/**
+ * Order the items. The items are ordered by width first, and by left position
+ * second.
+ * If a custom order function has been provided via the options, then this will
+ * be used.
+ * @private
+ */
+Stack.prototype._order = function _order () {
+ 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++;
+ }
+ });
+
+ //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);
+
+ this.ordered = ordered;
+};
+
+/**
+ * Adjust vertical positions of the events such that they don't overlap each
+ * other.
+ * @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);
+ }
+};
+
+/**
+ * Check if the destiny position of given item overlaps with any
+ * of the other items from index itemStart to itemEnd.
+ * @param {Array} items Array with items
+ * @param {int} itemIndex Number of the item to be checked for overlap
+ * @param {int} itemStart First item to be checked.
+ * @param {int} itemEnd Last item to be checked.
+ * @return {Object | null} colliding item, or undefined when no collisions
+ * @param {Number} margin A minimum required margin.
+ * If margin is provided, the two items will be
+ * marked colliding when they overlap or
+ * when the margin between the two is smaller than
+ * the requested margin.
+ */
+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;
+ }
+ }
+ }
+
+ return null;
+};
+
+/**
+ * Test if the two provided items collide
+ * The items must have parameters left, width, top, and height.
+ * @param {Component} a The first item
+ * @param {Component} b The second item
+ * @param {Number} margin A minimum required margin.
+ * If margin is provided, the two items will be
+ * marked colliding when they overlap or
+ * when the margin between the two is smaller than
+ * the requested margin.
+ * @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);
+};
+
+/**
+ * @constructor Range
+ * A Range controls a numeric range with a start and end value.
+ * The Range adjusts the range based on mouse events or programmatic changes,
+ * and triggers events when the range is changing or has been changed.
+ * @param {Object} [options] See description at Range.setOptions
+ * @extends Controller
+ */
+function Range(options) {
+ this.id = util.randomUUID();
+ this.start = null; // Number
+ this.end = null; // Number
+
+ this.options = options || {};
+
+ this.setOptions(options);
+}
+
+/**
+ * Set options for the range controller
+ * @param {Object} options Available options:
+ * {Number} min Minimum value for start
+ * {Number} max Maximum value for end
+ * {Number} zoomMin Set a minimum value for
+ * (end - start).
+ * {Number} zoomMax Set a maximum value for
+ * (end - start).
+ */
+Range.prototype.setOptions = function (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);
+ }
+};
+
+/**
+ * Test whether direction has a valid value
+ * @param {String} direction 'horizontal' or 'vertical'
+ */
+function validateDirection (direction) {
+ if (direction != 'horizontal' && direction != 'vertical') {
+ throw new TypeError('Unknown direction "' + direction + '". ' +
+ 'Choose "horizontal" or "vertical".');
+ }
+}
+
+/**
+ * Add listeners for mouse and touch events to the component
+ * @param {Component} component
+ * @param {String} event Available events: 'move', 'zoom'
+ * @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".');
+ }
+};
+
+/**
+ * Event handler
+ * @param {String} event name of the event, for example 'click', 'mousemove'
+ * @param {function} callback callback handler, invoked with the raw HTML Event
+ * as parameter.
+ */
+Range.prototype.on = function (event, callback) {
+ events.addListener(this, event, callback);
+};
+
+/**
+ * Trigger an event
+ * @param {String} event name of the event, available events: 'rangechange',
+ * 'rangechanged'
+ * @private
+ */
+Range.prototype._trigger = function (event) {
+ events.trigger(this, event, {
+ start: this.start,
+ end: this.end
+ });
+};
+
+/**
+ * Set a new start and end range
+ * @param {Number} [start]
+ * @param {Number} [end]
+ */
+Range.prototype.setRange = function(start, end) {
+ var changed = this._applyRange(start, end);
+ if (changed) {
+ this._trigger('rangechange');
+ this._trigger('rangechanged');
+ }
+};
+
+/**
+ * Set a new start and end range. This method is the same as setRange, but
+ * does not trigger a range change and range changed event, and it returns
+ * true when the range is changed
+ * @param {Number} [start]
+ * @param {Number} [end]
+ * @return {Boolean} changed
+ * @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 + '"');
+ }
+
+ // 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 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;
+ }
+ 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;
+ }
+ }
+ }
+
+ var changed = (this.start != newStart || this.end != newEnd);
+
+ this.start = newStart;
+ this.end = newEnd;
+
+ return changed;
+};
+
+/**
+ * Retrieve the current range.
+ * @return {Object} An object with start and end properties
+ */
+Range.prototype.getRange = function() {
+ return {
+ start: this.start,
+ end: this.end
+ };
+};
+
+/**
+ * Calculate the conversion offset and scale for current range, based on
+ * the provided width
+ * @param {Number} width
+ * @returns {{offset: number, scale: number}} conversion
+ */
+Range.prototype.conversion = function (width) {
+ return Range.conversion(this.start, this.end, width);
+};
+
+/**
+ * Static method to calculate the conversion offset and scale for a range,
+ * based on the provided start, end, and width
+ * @param {Number} start
+ * @param {Number} end
+ * @param {Number} 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
+ };
+ }
+};
+
+// global (private) object to store drag params
+var touchParams = {};
+
+/**
+ * Start dragging horizontally or vertically
+ * @param {Event} event
+ * @param {Object} component
+ * @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;
+
+ touchParams.start = this.start;
+ touchParams.end = this.end;
+
+ var frame = component.frame;
+ if (frame) {
+ frame.style.cursor = 'move';
+ }
+};
+
+/**
+ * Perform dragging operating.
+ * @param {Event} event
+ * @param {Component} component
+ * @param {String} direction 'horizontal' or 'vertical'
+ * @private
+ */
+Range.prototype._onDrag = function (event, component, 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;
+
+ 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);
+
+ // fire a rangechange event
+ this._trigger('rangechange');
+};
+
+/**
+ * Stop dragging operating.
+ * @param {event} event
+ * @param {Component} component
+ * @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;
+
+ if (component.frame) {
+ component.frame.style.cursor = 'auto';
+ }
+
+ // fire a rangechanged event
+ this._trigger('rangechanged');
+};
+
+/**
+ * Event handler for mouse wheel event, used to zoom
+ * Code from http://adomas.org/javascript-mouse-wheel/
+ * @param {Event} event
+ * @param {Component} component
+ * @param {String} direction 'horizontal' or 'vertical'
+ * @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;
+ }
+
+ // 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 = util.fakeGesture(this, event),
+ pointer = getPointer(gesture.touches[0], component.frame),
+ pointerDate = this._pointerToDate(component, direction, pointer);
+
+ this.zoom(scale, pointerDate);
+ }
+
+ // Prevent default actions caused by mouse wheel
+ // (else the page and timeline both zoom and scroll)
+ util.preventDefault(event);
+};
+
+/**
+ * On start of a touch gesture, initialize scale to 1
+ * @private
+ */
+Range.prototype._onTouch = function () {
+ touchParams.start = this.start;
+ touchParams.end = this.end;
+ touchParams.pinching = false;
+ touchParams.center = null;
+};
+
+/**
+ * Handle pinch event
+ * @param {Event} event
+ * @param {Component} component
+ * @param {String} direction 'horizontal' or 'vertical'
+ * @private
+ */
+Range.prototype._onPinch = function (event, component, direction) {
+ touchParams.pinching = true;
+
+ 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
+
+ // 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);
+ }
+};
+
+/**
+ * Helper function to calculate the center date for zooming
+ * @param {Component} component
+ * @param {{x: Number, y: Number}} pointer
+ * @param {String} direction 'horizontal' or 'vertical'
+ * @return {number} date
+ * @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;
+ }
+};
+
+/**
+ * Get the pointer location relative to the location of the dom element
+ * @param {{pageX: Number, pageY: Number}} touch
+ * @param {Element} element HTML DOM element
+ * @return {{x: Number, y: Number}} pointer
+ * @private
+ */
+function getPointer (touch, element) {
+ return {
+ x: touch.pageX - vis.util.getAbsoluteLeft(element),
+ y: touch.pageY - vis.util.getAbsoluteTop(element)
+ };
+}
+
+/**
+ * Zoom the range the given scale in or out. Start and end date will
+ * be adjusted, and the timeline will be redrawn. You can optionally give a
+ * date around which to zoom.
+ * For example, try scale = 0.9 or 1.1
+ * @param {Number} scale Scaling factor. Values above 1 will zoom out,
+ * values below 1 will zoom in.
+ * @param {Number} [center] Value representing a date around which will
+ * 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;
+ }
+
+ // calculate new start and end
+ var newStart = center + (this.start - center) * scale;
+ var newEnd = center + (this.end - center) * scale;
+
+ this.setRange(newStart, newEnd);
+};
+
+/**
+ * Move the range with a given delta to the left or right. Start and end
+ * value will be adjusted. For example, try delta = 0.1 or -0.1
+ * @param {Number} delta Moving amount. Positive value will move right,
+ * 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);
+
+ // apply new values
+ var newStart = this.start + diff * delta;
+ var newEnd = this.end + diff * delta;
+
+ // TODO: reckon with min and max range
+
+ this.start = newStart;
+ this.end = newEnd;
+};
+
+/**
+ * Move the range to a new center point
+ * @param {Number} moveTo New center point of the range
+ */
+Range.prototype.moveTo = function(moveTo) {
+ var center = (this.start + this.end) / 2;
+
+ var diff = center - moveTo;
+
+ // calculate new start and end
+ var newStart = this.start - diff;
+ var newEnd = this.end - diff;
+
+ this.setRange(newStart, newEnd);
+};
+
+/**
+ * @constructor Controller
+ *
+ * A Controller controls the reflows and repaints of all visual components
+ */
+function Controller () {
+ this.id = util.randomUUID();
+ this.components = {};
+
+ this.repaintTimer = undefined;
+ this.reflowTimer = undefined;
+}
+
+/**
+ * Add a component to the 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;
+};
+
+/**
+ * Remove a component from the controller
+ * @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;
+ }
+ }
+ }
+
+ if (id) {
+ delete this.components[id];
+ }
+};
+
+/**
+ * Request a reflow. The controller will schedule a reflow
+ * @param {Boolean} [force] If true, an immediate reflow is forced. Default
+ * 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);
+ }
+ }
+};
+
+/**
+ * Request a repaint. The controller will schedule a repaint
+ * @param {Boolean} [force] If true, an immediate repaint is forced. Default
+ * 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);
+ }
+ }
+};
+
+/**
+ * Repaint all components
+ */
+Controller.prototype.repaint = function repaint() {
+ 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;
+ }
+ }
+
+ util.forEach(this.components, repaint);
+
+ // 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;
+
+ // 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);
+
+ // immediately repaint when needed
+ if (resized) {
+ this.repaint();
+ }
+ // TODO: limit the number of nested reflows/repaints, prevent loop
+};
+
+/**
+ * Prototype for visual components
+ */
+function Component () {
+ 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;
+}
+
+/**
+ * Set parameters for the frame. Parameters will be merged in current parameter
+ * set.
+ * @param {Object} options Available parameters:
+ * {String | function} [className]
+ * {EventBus} [eventBus]
+ * {String | Number | function} [left]
+ * {String | Number | function} [top]
+ * {String | Number | function} [width]
+ * {String | Number | function} [height]
+ */
+Component.prototype.setOptions = function setOptions(options) {
+ if (options) {
+ util.extend(this.options, options);
+
+ if (this.controller) {
+ this.requestRepaint();
+ this.requestReflow();
+ }
+ }
+};
+
+/**
+ * Get an option value by name
+ * The function will first check this.options object, and else will check
+ * this.defaultOptions.
+ * @param {String} name
+ * @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;
+};
+
+/**
+ * Get the container element of the component, which can be used by a child to
+ * add its own widgets. Not all components do have a container for childs, in
+ * that case null is returned.
+ * @returns {HTMLElement | null} container
+ */
+// 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;
+};
+
+/**
+ * Get the frame element of the component, the outer HTML DOM element.
+ * @returns {HTMLElement | null} frame
+ */
+Component.prototype.getFrame = function getFrame() {
+ return this.frame;
+};
+
+/**
+ * Repaint the component
+ * @return {Boolean} changed
+ */
+Component.prototype.repaint = function repaint() {
+ // should be implemented by the component
+ return false;
+};
+
+/**
+ * Reflow the component
+ * @return {Boolean} resized
+ */
+Component.prototype.reflow = function reflow() {
+ // should be implemented by the component
+ return false;
+};
+
+/**
+ * Hide the component from the DOM
+ * @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;
+ }
+};
+
+/**
+ * Show the component in the DOM (when not already visible).
+ * A repaint will be executed when the component is not visible
+ * @return {Boolean} changed
+ */
+Component.prototype.show = function show() {
+ 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?
+ }
+};
+
+/**
+ * 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?
+ }
+};
+
+/**
+ * A panel can contain components
+ * @param {Component} [parent]
+ * @param {Component[]} [depends] Components on which this components depends
+ * (except for the parent)
+ * @param {Object} [options] Available parameters:
+ * {String | Number | function} [left]
+ * {String | Number | function} [top]
+ * {String | Number | function} [width]
+ * {String | Number | function} [height]
+ * {String | function} [className]
+ * @constructor Panel
+ * @extends Component
+ */
+function Panel(parent, depends, options) {
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ this.options = options || {};
+}
+
+Panel.prototype = new Component();
+
+/**
+ * Set options. Will extend the current options.
+ * @param {Object} [options] Available parameters:
+ * {String | function} [className]
+ * {String | Number | function} [left]
+ * {String | Number | function} [top]
+ * {String | Number | function} [width]
+ * {String | Number | function} [height]
+ */
+Panel.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Get the container element of the panel, which can be used by a child to
+ * add its own widgets.
+ * @returns {HTMLElement} container
+ */
+Panel.prototype.getContainer = function () {
+ return this.frame;
+};
+
+/**
+ * Repaint the component
+ * @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 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;
+ }
+ 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;
+ }
+
+ 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);
+};
+
+/**
+ * Reflow the component
+ * @return {Boolean} resized
+ */
+Panel.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);
+};
+
+/**
+ * A root panel can hold components. The root panel must be initialized with
+ * a DOM element as container.
+ * @param {HTMLElement} container
+ * @param {Object} [options] Available parameters: see RootPanel.setOptions.
+ * @constructor RootPanel
+ * @extends Panel
+ */
+function RootPanel(container, options) {
+ this.id = util.randomUUID();
+ this.container = container;
+
+ this.options = options || {};
+ this.defaultOptions = {
+ autoResize: true
+ };
+
+ this.listeners = {}; // event listeners
+}
+
+RootPanel.prototype = new Panel();
+
+/**
+ * Set options. Will extend the current options.
+ * @param {Object} [options] Available parameters:
+ * {String | function} [className]
+ * {String | Number | function} [left]
+ * {String | Number | function} [top]
+ * {String | Number | function} [width]
+ * {String | Number | function} [height]
+ * {Boolean | function} [autoResize]
+ */
+RootPanel.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Repaint the component
+ * @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;
+ }
+
+ 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%'));
+
+ this._updateEventEmitters();
+ this._updateWatch();
+
+ return (changed > 0);
+};
+
+/**
+ * Reflow the component
+ * @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);
+};
+
+/**
+ * Update watching for resize, depending on the current option
+ * @private
+ */
+RootPanel.prototype._updateWatch = function () {
+ var autoResize = this.getOption('autoResize');
+ if (autoResize) {
+ this._watch();
+ }
+ else {
+ this._unwatch();
+ }
+};
+
+/**
+ * Watch for changes in the size of the frame. On resize, the Panel will
+ * automatically redraw itself.
+ * @private
+ */
+RootPanel.prototype._watch = function () {
+ var me = this;
+
+ 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;
+ }
+
+ 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);
+
+ this.watchTimer = setInterval(checkSize, 1000);
+};
+
+/**
+ * Stop watching for a resize of the frame.
+ * @private
+ */
+RootPanel.prototype._unwatch = function () {
+ if (this.watchTimer) {
+ clearInterval(this.watchTimer);
+ this.watchTimer = undefined;
+ }
+
+ // TODO: remove event listener on window.resize
+};
+
+/**
+ * Event handler
+ * @param {String} event name of the event, for example 'click', 'mousemove'
+ * @param {function} callback callback handler, invoked with the raw HTML Event
+ * 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();
+};
+
+/**
+ * Update the event listeners for all event emitters
+ * @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
+ }
+};
+
+/**
+ * A horizontal time axis
+ * @param {Component} parent
+ * @param {Component[]} [depends] Components on which this components depends
+ * (except for the parent)
+ * @param {Object} [options] See TimeAxis.setOptions for the available
+ * options.
+ * @constructor TimeAxis
+ * @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;
+}
+
+TimeAxis.prototype = new Component();
+
+// TODO: comment options
+TimeAxis.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Set a range (start and end)
+ * @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;
+};
+
+/**
+ * Convert a position on screen (pixels) to a datetime
+ * @param {int} x Position on the screen in pixels
+ * @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);
+};
+
+/**
+ * Convert a datetime (Date object) into a position on the screen
+ * @param {Date} time A date
+ * @return {int} x The position on the screen in pixels which corresponds
+ * with the given date.
+ * @private
+ */
+TimeAxis.prototype.toScreen = function(time) {
+ var conversion = this.conversion;
+ return (time.valueOf() - conversion.offset) * conversion.scale;
+};
+
+/**
+ * Repaint the component
+ * @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;
+ }
+ 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 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();
+ }
+
+ // 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
+
+ if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
+ this._repaintMajorText(0, leftText);
+ }
+ }
+
+ this._repaintEnd();
+ }
+
+ this._repaintLine();
+
+ // put frame online again
+ if (beforeChild) {
+ parent.insertBefore(frame, beforeChild);
+ }
+ else {
+ parent.appendChild(frame)
+ }
+ }
+
+ return (changed > 0);
+};
+
+/**
+ * Start a repaint. Move all DOM elements to a redundant list, where they
+ * can be picked for re-use, or can be cleaned up in the end
+ * @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 = [];
+};
+
+/**
+ * End a repaint. Cleanup leftover DOM elements in the redundant list
+ * @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);
+ }
+ }
+ });
+};
+
+
+/**
+ * Create a minor label for the axis at position x
+ * @param {Number} x
+ * @param {String} text
+ * @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
+};
+
+/**
+ * Create a Major label for the axis at position x
+ * @param {Number} x
+ * @param {String} 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
+};
+
+/**
+ * Create a minor line for the axis at position x
+ * @param {Number} x
+ * @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';
+};
+
+/**
+ * Create a Major line for the axis at position x
+ * @param {Number} 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';
+};
+
+
+/**
+ * Repaint the horizontal line for the axis
+ * @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';
+ }
+ else {
+ if (line && line.parentElement) {
+ frame.removeChild(line.line);
+ delete this.dom.line;
+ }
+ }
+};
+
+/**
+ * Create characters used to determine the size of text on the axis
+ * @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;
+ }
+};
+
+/**
+ * Reflow the component
+ * @return {Boolean} resized
+ */
+TimeAxis.prototype.reflow = function () {
+ 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;
+ }
+
+ 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.minorLabelTop = 0;
+ props.majorLabelTop = props.minorLabelTop + props.minorLabelHeight;
+
+ props.minorLineTop = -this.top;
+ props.minorLineHeight = Math.max(this.top + props.majorLabelHeight, 0);
+ props.minorLineWidth = 1; // TODO: really calculate width
+
+ props.majorLineTop = -this.top;
+ props.majorLineHeight = Math.max(this.top + props.minorLabelHeight + props.majorLabelHeight, 0);
+ props.majorLineWidth = 1; // TODO: really calculate width
+
+ props.lineTop = 0;
+
+ break;
+
+ case 'top':
+ props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
+ props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
+
+ props.majorLabelTop = 0;
+ props.minorLabelTop = props.majorLabelTop + props.majorLabelHeight;
+
+ props.minorLineTop = props.minorLabelTop;
+ props.minorLineHeight = Math.max(parentHeight - props.majorLabelHeight - this.top);
+ props.minorLineWidth = 1; // TODO: really calculate width
+
+ props.majorLineTop = 0;
+ props.majorLineHeight = Math.max(parentHeight - this.top);
+ props.majorLineWidth = 1; // TODO: really calculate width
+
+ props.lineTop = props.majorLabelHeight + props.minorLabelHeight;
+
+ break;
+
+ default:
+ throw new Error('Unkown orientation "' + this.getOption('orientation') + '"');
+ }
+
+ 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());
+ }
+
+ return (changed > 0);
+};
+
+/**
+ * Calculate the scale and offset to convert a position on screen to the
+ * corresponding date and vice versa.
+ * After the method _updateConversion is executed once, the methods toTime
+ * and toScreen can be used.
+ * @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);
+ }
+};
+
+/**
+ * A current time bar
+ * @param {Component} parent
+ * @param {Component[]} [depends] Components on which this components depends
+ * (except for the parent)
+ * @param {Object} [options] Available parameters:
+ * {Boolean} [showCurrentTime]
+ * @constructor CurrentTime
+ * @extends Component
+ */
+
+function CurrentTime (parent, depends, options) {
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ this.options = options || {};
+ this.defaultOptions = {
+ showCurrentTime: false
+ };
+}
+
+CurrentTime.prototype = new Component();
+
+CurrentTime.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Get the container element of the bar, which can be used by a child to
+ * add its own widgets.
+ * @returns {HTMLElement} container
+ */
+CurrentTime.prototype.getContainer = function () {
+ return this.frame;
+};
+
+/**
+ * Repaint the component
+ * @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');
+ }
+
+ if (!this.getOption('showCurrentTime')) {
+ if (bar) {
+ parentContainer.removeChild(bar);
+ delete this.frame;
+ }
+
+ return;
+ }
+
+ 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;
+ }
+
+ if (!parent.conversion) {
+ parent._updateConversion();
+ }
+
+ var now = new Date();
+ var x = parent.toScreen(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;
+ }
+
+ var timeline = this;
+ var interval = 1 / parent.conversion.scale / 2;
+
+ if (interval < 30) {
+ interval = 30;
+ }
+
+ this.currentTimeTimer = setTimeout(function() {
+ timeline.repaint();
+ }, interval);
+
+ return false;
+};
+
+/**
+ * A custom time bar
+ * @param {Component} parent
+ * @param {Component[]} [depends] Components on which this components depends
+ * (except for the parent)
+ * @param {Object} [options] Available parameters:
+ * {Boolean} [showCustomTime]
+ * @constructor CustomTime
+ * @extends Component
+ */
+
+function CustomTime (parent, depends, options) {
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ this.options = options || {};
+ this.defaultOptions = {
+ showCustomTime: false
+ };
+
+ this.listeners = [];
+ this.customTime = new Date();
+}
+
+CustomTime.prototype = new Component();
+
+CustomTime.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Get the container element of the bar, which can be used by a child to
+ * add its own widgets.
+ * @returns {HTMLElement} container
+ */
+CustomTime.prototype.getContainer = function () {
+ return this.frame;
+};
+
+/**
+ * Repaint the component
+ * @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');
+ }
+
+ 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;
+ }
+
+ return;
+ }
+
+ if (!bar) {
+ bar = document.createElement('div');
+ bar.className = 'customtime';
+ bar.style.position = 'absolute';
+ bar.style.top = '0px';
+ bar.style.height = '100%';
+
+ parentContainer.appendChild(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.frame = bar;
+
+ this.subscribe(this, 'movetime');
+ }
+
+ if (!parent.conversion) {
+ parent._updateConversion();
+ }
+
+ var x = parent.toScreen(this.customTime);
+
+ bar.style.left = x + 'px';
+ bar.title = 'Time: ' + this.customTime;
+
+ return false;
+};
+
+/**
+ * Set custom time.
+ * @param {Date} time
+ */
+CustomTime.prototype._setCustomTime = function(time) {
+ this.customTime = new Date(time.valueOf());
+ this.repaint();
+};
+
+/**
+ * Retrieve the current custom time.
+ * @return {Date} customTime
+ */
+CustomTime.prototype._getCustomTime = function() {
+ return new Date(this.customTime.valueOf());
+};
+
+/**
+ * Add listeners for mouse and touch events to the component
+ * @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);
+
+};
+
+/**
+ * Event handler
+ * @param {String} event name of the event, for example 'click', 'mousemove'
+ * @param {function} callback callback handler, invoked with the raw HTML 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');
+ }
+
+ events.addListener(this, event, callback);
+ util.addEventListener(bar, event, callback);
+};
+
+/**
+ * Start moving horizontally
+ * @param {Event} event
+ * @param {Object} listener Listener containing the component and params
+ * @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);
+ }
+
+ util.stopPropagation(event);
+ util.preventDefault(event);
+};
+
+/**
+ * Perform moving operating.
+ * This function activated from within the funcion CustomTime._onMouseDown().
+ * @param {Event} event
+ * @param {Object} listener
+ * @private
+ */
+CustomTime.prototype._onMouseMove = function (event, listener) {
+ event = event || window.event;
+ var params = listener.params;
+ var parent = this.parent;
+
+ // calculate change in mouse position
+ var mouseX = util.getPageX(event);
+
+ if (params.mouseX === undefined) {
+ params.mouseX = 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;
+ }
+
+ 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});
+
+ util.preventDefault(event);
+};
+
+/**
+ * Stop moving operating.
+ * This function activated from within the function CustomTime._onMouseDown().
+ * @param {event} event
+ * @param {Object} 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});
+ }
+};
+
+/**
+ * An ItemSet holds a set of items and ranges which can be displayed in a
+ * range. The width is determined by the parent of the ItemSet, and the height
+ * is determined by the size of the items.
+ * @param {Component} parent
+ * @param {Component[]} [depends] Components on which this components depends
+ * (except for the parent)
+ * @param {Object} [options] See ItemSet.setOptions for the available
+ * options.
+ * @constructor ItemSet
+ * @extends Panel
+ */
+// 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.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
+}
+
+ItemSet.prototype = new Panel();
+
+// available item types will be registered here
+ItemSet.types = {
+ box: ItemBox,
+ range: ItemRange,
+ rangeoverflow: ItemRangeOverflow,
+ point: ItemPoint
+};
+
+/**
+ * Set options for the ItemSet. Existing options will be extended/overwritten.
+ * @param {Object} [options] The following options are available:
+ * {String | function} [className]
+ * class name for the itemset
+ * {String} [type]
+ * Default type for the items. Choose from 'box'
+ * (default), 'point', or 'range'. The default
+ * Style can be overwritten by individual items.
+ * {String} align
+ * Alignment for the items, only applicable for
+ * ItemBox. Choose 'center' (default), 'left', or
+ * 'right'.
+ * {String} orientation
+ * Orientation of the item set. Choose 'top' or
+ * 'bottom' (default).
+ * {Number} margin.axis
+ * Margin between the axis and the items in pixels.
+ * Default is 20.
+ * {Number} margin.item
+ * Margin between items in pixels. Default is 10.
+ * {Number} padding
+ * Padding of the contents of an item in pixels.
+ * Must correspond with the items css. Default is 5.
+ */
+ItemSet.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Set range (start and end).
+ * @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;
+};
+
+/**
+ * Repaint the component
+ * @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;
+ }
+
+ 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++;
+ }
+ }
+
+ 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 + '"');
+ }
+ });
+
+ // 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);
+};
+
+/**
+ * Get the foreground container element
+ * @return {HTMLElement} foreground
+ */
+ItemSet.prototype.getForeground = function getForeground() {
+ return this.dom.foreground;
+};
+
+/**
+ * Get the background container element
+ * @return {HTMLElement} background
+ */
+ItemSet.prototype.getBackground = function getBackground() {
+ return this.dom.background;
+};
+
+/**
+ * Get the axis container element
+ * @return {HTMLElement} axis
+ */
+ItemSet.prototype.getAxis = function getAxis() {
+ return this.dom.axis;
+};
+
+/**
+ * Reflow the component
+ * @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();
+ });
+
+ // 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();
+
+ 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);
+
+ // 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);
+};
+
+/**
+ * Hide this component from the DOM
+ * @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;
+};
+
+/**
+ * Set items
+ * @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');
+ }
+
+ 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);
+ }
+
+ 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);
+ }
+};
+
+/**
+ * Get the current items items
+ * @returns {vis.DataSet | null}
+ */
+ItemSet.prototype.getItems = function getItems() {
+ return this.itemsData;
+};
+
+/**
+ * Handle updated items
+ * @param {Number[]} ids
+ * @private
+ */
+ItemSet.prototype._onUpdate = function _onUpdate(ids) {
+ this._toQueue('update', ids);
+};
+
+/**
+ * Handle changed items
+ * @param {Number[]} ids
+ * @private
+ */
+ItemSet.prototype._onAdd = function _onAdd(ids) {
+ this._toQueue('add', ids);
+};
+
+/**
+ * Handle removed items
+ * @param {Number[]} ids
+ * @private
+ */
+ItemSet.prototype._onRemove = function _onRemove(ids) {
+ this._toQueue('remove', ids);
+};
+
+/**
+ * Put items in the queue to be added/updated/remove
+ * @param {String} action can be 'add', 'update', 'remove'
+ * @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();
+ }
+};
+
+/**
+ * Calculate the scale and offset to convert a position on screen to the
+ * corresponding date and vice versa.
+ * After the method _updateConversion is executed once, the methods toTime
+ * and toScreen can be used.
+ * @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);
+ }
+};
+
+/**
+ * Convert a position on screen (pixels) to a datetime
+ * Before this method can be used, the method _updateConversion must be
+ * executed once.
+ * @param {int} x Position on the screen in pixels
+ * @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);
+};
+
+/**
+ * Convert a datetime (Date object) into a position on the screen
+ * Before this method can be used, the method _updateConversion must be
+ * executed once.
+ * @param {Date} time A date
+ * @return {int} x The position on the screen in pixels which corresponds
+ * with the given date.
+ */
+ItemSet.prototype.toScreen = function toScreen(time) {
+ var conversion = this.conversion;
+ return (time.valueOf() - conversion.offset) * conversion.scale;
+};
+
+/**
+ * @constructor Item
+ * @param {ItemSet} parent
+ * @param {Object} data Object containing (optional) parameters type,
+ * start, end, content, group, className.
+ * @param {Object} [options] Options to set initial property values
+ * @param {Object} [defaultOptions] default options
+ * // 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.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;
+};
+
+/**
+ * Unselect current item
+ */
+Item.prototype.unselect = function unselect() {
+ this.selected = false;
+};
+
+/**
+ * Show the Item in the DOM (when not already visible)
+ * @return {Boolean} changed
+ */
+Item.prototype.show = function show() {
+ return false;
+};
+
+/**
+ * Hide the Item from the DOM (when visible)
+ * @return {Boolean} changed
+ */
+Item.prototype.hide = function hide() {
+ return false;
+};
+
+/**
+ * Repaint the item
+ * @return {Boolean} changed
+ */
+Item.prototype.repaint = function repaint() {
+ // should be implemented by the item
+ return false;
+};
+
+/**
+ * Reflow the item
+ * @return {Boolean} resized
+ */
+Item.prototype.reflow = function reflow() {
+ // should be implemented by the item
+ return false;
+};
+
+/**
+ * Return the items width
+ * @return {Integer} width
+ */
+Item.prototype.getWidth = function getWidth() {
+ return this.width;
+}
+
+/**
+ * @constructor ItemBox
+ * @extends Item
+ * @param {ItemSet} parent
+ * @param {Object} data Object containing parameters start
+ * content, className.
+ * @param {Object} [options] Options to set initial property values
+ * @param {Object} [defaultOptions] default options
+ * // 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);
+}
+
+ItemBox.prototype = new Item (null, null);
+
+/**
+ * Select the item
+ * @override
+ */
+ItemBox.prototype.select = function select() {
+ this.selected = true;
+ // TODO: select and unselect
+};
+
+/**
+ * Unselect the item
+ * @override
+ */
+ItemBox.prototype.unselect = function unselect() {
+ this.selected = false;
+ // TODO: select and unselect
+};
+
+/**
+ * Repaint the item
+ * @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;
+ }
+
+ 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;
+ }
+ }
+
+ return changed;
+};
+
+/**
+ * Show the item in the DOM (when not already visible). The items DOM will
+ * be created when needed.
+ * @return {Boolean} changed
+ */
+ItemBox.prototype.show = function show() {
+ if (!this.dom || !this.dom.box.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
+};
+
+/**
+ * Hide the item from the DOM (when visible)
+ * @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);
+ }
+ }
+ return changed;
+};
+
+/**
+ * Reflow the item: calculate its actual size and position from the DOM
+ * @return {boolean} resized returns true if the axis is resized
+ * @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);
+ }
+ 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;
+ }
+ }
+
+ return (changed > 0);
+};
+
+/**
+ * Create an items DOM
+ * @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';
+ }
+};
+
+/**
+ * Reposition the item, recalculate its left, top, and width, using the current
+ * range and size of the items itemset
+ * @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';
+ }
+};
+
+/**
+ * @constructor ItemPoint
+ * @extends Item
+ * @param {ItemSet} parent
+ * @param {Object} data Object containing parameters start
+ * content, className.
+ * @param {Object} [options] Options to set initial property values
+ * @param {Object} [defaultOptions] default options
+ * // 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);
+}
+
+ItemPoint.prototype = new Item (null, null);
+
+/**
+ * Select the item
+ * @override
+ */
+ItemPoint.prototype.select = function select() {
+ this.selected = true;
+ // TODO: select and unselect
+};
+
+/**
+ * Unselect the item
+ * @override
+ */
+ItemPoint.prototype.unselect = function unselect() {
+ this.selected = false;
+ // TODO: select and unselect
+};
+
+/**
+ * Repaint the item
+ * @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;
+ }
+
+ 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;
+ }
+ }
+
+ return changed;
+};
+
+/**
+ * Show the item in the DOM (when not already visible). The items DOM will
+ * be created when needed.
+ * @return {Boolean} changed
+ */
+ItemPoint.prototype.show = function show() {
+ if (!this.dom || !this.dom.point.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
+};
+
+/**
+ * Hide the item from the DOM (when visible)
+ * @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;
+ }
+ }
+ return changed;
+};
+
+/**
+ * Reflow the item: calculate its actual size from the DOM
+ * @return {boolean} resized returns true if the axis is resized
+ * @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);
+ }
+ 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 {
+ changed += 1;
+ }
+ }
+
+ return (changed > 0);
+};
+
+/**
+ * Create an items DOM
+ * @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);
+ }
+};
+
+/**
+ * Reposition the item, recalculate its left, top, and width, using the current
+ * range and size of the items itemset
+ * @override
+ */
+ItemPoint.prototype.reposition = function reposition() {
+ var dom = this.dom,
+ props = this.props;
+
+ 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.dot.style.top = props.dot.top + 'px';
+ }
+};
+
+/**
+ * @constructor ItemRange
+ * @extends Item
+ * @param {ItemSet} parent
+ * @param {Object} data Object containing parameters start, end
+ * content, className.
+ * @param {Object} [options] Options to set initial property values
+ * @param {Object} [defaultOptions] default options
+ * // TODO: describe available options
+ */
+function ItemRange (parent, data, options, defaultOptions) {
+ this.props = {
+ content: {
+ left: 0,
+ width: 0
+ }
+ };
+
+ Item.call(this, parent, data, options, defaultOptions);
+}
+
+ItemRange.prototype = new Item (null, null);
+
+/**
+ * Select the item
+ * @override
+ */
+ItemRange.prototype.select = function select() {
+ this.selected = true;
+ // TODO: select and unselect
+};
+
+/**
+ * Unselect the item
+ * @override
+ */
+ItemRange.prototype.unselect = function unselect() {
+ this.selected = false;
+ // TODO: select and unselect
+};
+
+/**
+ * Repaint the item
+ * @return {Boolean} changed
+ */
+ItemRange.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;
+ }
+
+ 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;
+ }
+
+ // 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;
+ }
+ }
+
+ return changed;
+};
+
+/**
+ * Show the item in the DOM (when not already visible). The items DOM will
+ * be created when needed.
+ * @return {Boolean} changed
+ */
+ItemRange.prototype.show = function show() {
+ if (!this.dom || !this.dom.box.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
+};
+
+/**
+ * Hide the item from the DOM (when visible)
+ * @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;
+ }
+ }
+ return changed;
+};
+
+/**
+ * Reflow the item: calculate its actual size from the DOM
+ * @return {boolean} resized returns true if the axis is resized
+ * @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;
+
+ 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;
+ }
+
+ 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(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;
+ }
+
+ // 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);
+ }
+
+ 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);
+};
+
+/**
+ * Create an items DOM
+ * @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()
+
+ // contents box
+ dom.content = document.createElement('div');
+ dom.content.className = 'content';
+ dom.box.appendChild(dom.content);
+ }
+};
+
+/**
+ * Reposition the item, recalculate its left, top, and width, using the current
+ * range and size of the items itemset
+ * @override
+ */
+ItemRange.prototype.reposition = function reposition() {
+ 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';
+
+ dom.content.style.left = props.content.left + 'px';
+ }
+};
+
+/**
+ * @constructor ItemRangeOverflow
+ * @extends ItemRange
+ * @param {ItemSet} parent
+ * @param {Object} data Object containing parameters start, end
+ * content, className.
+ * @param {Object} [options] Options to set initial property values
+ * @param {Object} [defaultOptions] default options
+ * // TODO: describe available options
+ */
+function ItemRangeOverflow (parent, data, options, defaultOptions) {
+ this.props = {
+ content: {
+ left: 0,
+ width: 0
+ }
+ };
+
+ ItemRange.call(this, parent, data, options, defaultOptions);
+}
+
+ItemRangeOverflow.prototype = new ItemRange (null, null);
+
+/**
+ * Repaint the item
+ * @return {Boolean} changed
+ */
+ItemRangeOverflow.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;
+ }
+
+ 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;
+ }
+
+ // 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;
+ }
+ }
+
+ return changed;
+};
+
+/**
+ * Return the items width
+ * @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;
+};
+
+/**
+ * @constructor Group
+ * @param {GroupSet} parent
+ * @param {Number | String} groupId
+ * @param {Object} [options] Options to set initial property values
+ * // TODO: describe available options
+ * @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;
+}
+
+Group.prototype = new Component();
+
+// TODO: comment
+Group.prototype.setOptions = Component.prototype.setOptions;
+
+/**
+ * Get the container element of the panel, which can be used by a child to
+ * add its own widgets.
+ * @returns {HTMLElement} container
+ */
+Group.prototype.getContainer = function () {
+ return this.parent.getContainer();
+};
+
+/**
+ * Set item set for the group. The group will create a view on the itemset,
+ * filtered by the groups id.
+ * @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);
+ }
+};
+
+/**
+ * Repaint the item
+ * @return {Boolean} changed
+ */
+Group.prototype.repaint = function repaint() {
+ return false;
+};
+
+/**
+ * Reflow the item
+ * @return {Boolean} resized
+ */
+Group.prototype.reflow = function reflow() {
+ 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);
+
+ // 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);
+ }
+
+ return (changed > 0);
+};
+
+/**
+ * An GroupSet holds a set of groups
+ * @param {Component} parent
+ * @param {Component[]} [depends] Components on which this components depends
+ * (except for the parent)
+ * @param {Object} [options] See GroupSet.setOptions for the available
+ * options.
+ * @constructor GroupSet
+ * @extends Panel
+ */
+function GroupSet(parent, depends, options) {
+ this.id = util.randomUUID();
+ this.parent = parent;
+ this.depends = depends;
+
+ 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.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);
+ }
+ };
+}
+
+GroupSet.prototype = new Panel();
+
+/**
+ * Set options for the GroupSet. Existing options will be extended/overwritten.
+ * @param {Object} [options] The following options are available:
+ * {String | function} groupsOrder
+ * TODO: describe options
+ */
+GroupSet.prototype.setOptions = Component.prototype.setOptions;
+
+GroupSet.prototype.setRange = function (range) {
+ // TODO: implement setRange
+};
+
+/**
+ * Set items
+ * @param {vis.DataSet | null} items
+ */
+GroupSet.prototype.setItems = function setItems(items) {
+ this.itemsData = items;
+
+ for (var id in this.groups) {
+ if (this.groups.hasOwnProperty(id)) {
+ var group = this.groups[id];
+ group.setItems(items);
+ }
+ }
+};
+
+/**
+ * Get items
+ * @return {vis.DataSet | null} items
+ */
+GroupSet.prototype.getItems = function getItems() {
+ return this.itemsData;
+};
+
+/**
+ * Set range (start and end).
+ * @param {Range | Object} range A Range or an object containing start and end.
+ */
+GroupSet.prototype.setRange = function setRange(range) {
+ this.range = range;
+};
+
+/**
+ * Set groups
+ * @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);
+ });
+
+ // 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);
+ }
+};
+
+/**
+ * Get groups
+ * @return {vis.DataSet | null} groups
+ */
+GroupSet.prototype.getGroups = function getGroups() {
+ return this.groupsData;
+};
+
+/**
+ * Repaint the component
+ * @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;
+ }
+
+ // 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);
+ }
+ 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
+
+ // TODO: apply dependencies of the groupset
+
+ // 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]]);
+ }
+
+ // (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);
+ }
+
+ 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);
+};
+
+/**
+ * Create a label for group with given id
+ * @param {Number} id
+ * @return {Element} label
+ * @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;
+};
+
+/**
+ * Get container element
+ * @return {HTMLElement} container
+ */
+GroupSet.prototype.getContainer = function getContainer() {
+ return this.dom.frame;
+};
+
+/**
+ * Get the width of the group labels
+ * @return {Number} width
+ */
+GroupSet.prototype.getLabelsWidth = function getContainer() {
+ return this.props.labels.width;
+};
+
+/**
+ * Reflow the component
+ * @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);
+ }
+
+ // 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);
+};
+
+/**
+ * Hide the component from the DOM
+ * @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;
+ }
+};
+
+/**
+ * Show the component in the DOM (when not already visible).
+ * A repaint will be executed when the component is not visible
+ * @return {Boolean} changed
+ */
+GroupSet.prototype.show = function show() {
+ if (!this.dom.frame || !this.dom.frame.parentNode) {
+ return this.repaint();
+ }
+ else {
+ return false;
+ }
+};
+
+/**
+ * Handle updated groups
+ * @param {Number[]} ids
+ * @private
+ */
+GroupSet.prototype._onUpdate = function _onUpdate(ids) {
+ this._toQueue(ids, 'update');
+};
+
+/**
+ * Handle changed groups
+ * @param {Number[]} ids
+ * @private
+ */
+GroupSet.prototype._onAdd = function _onAdd(ids) {
+ this._toQueue(ids, 'add');
+};
+
+/**
+ * Handle removed groups
+ * @param {Number[]} ids
+ * @private
+ */
+GroupSet.prototype._onRemove = function _onRemove(ids) {
+ this._toQueue(ids, 'remove');
+};
+
+/**
+ * Put groups in the queue to be added/updated/remove
+ * @param {Number[]} 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();
+ }
+};
+
+/**
+ * Create a timeline visualization
+ * @param {HTMLElement} container
+ * @param {vis.DataSet | Array | DataTable} [items]
+ * @param {Object} [options] See Timeline.setOptions for the available options.
+ * @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 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);
+ }
+
+ // create itemset and groupset
+ if (items) {
+ this.setItems(items);
+ }
+}
+
+/**
+ * Set options
+ * @param {Object} options TODO: describe the available options
+ */
+Timeline.prototype.setOptions = function (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();
+
+ this.controller.reflow();
+ this.controller.repaint();
+};
+
+/**
+ * Set a custom time bar
+ * @param {Date} time
+ */
+Timeline.prototype.setCustomTime = function (time) {
+ this.customtime._setCustomTime(time);
+};
+
+/**
+ * Retrieve the current custom time.
+ * @return {Date} customTime
+ */
+Timeline.prototype.getCustomTime = function() {
+ return new Date(this.customtime.customTime.valueOf());
+};
+
+/**
+ * Set items
+ * @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;
+ }
+ 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);
+ }
+
+ // 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);
+ }
+ }
+};
+
+/**
+ * Set groups
+ * @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);
+ }
+
+ // 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);
+ }
+ if (this.content.setItems) {
+ this.content.setItems(this.itemsData);
+ }
+ if (this.content.setGroups) {
+ this.content.setGroups(this.groupsData);
+ }
+ this.controller.add(this.content);
+ }
+};
+
+/**
+ * Get the data range of the item set.
+ * @returns {{min: Date, max: Date}} range A range with a start and end Date.
+ * When no minimum is found, min==null
+ * 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());
+ }
+ }
+ }
+
+ return {
+ min: (min != null) ? new Date(min) : null,
+ max: (max != null) ? new Date(max) : null
+ };
+};
+
+(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;
+ }
+ }
+ }
+
+ /**
+ * 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);
+ }
+ }
+
+ /**
+ * 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
+ };
+
+ 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);
+
+ // check for end of dot file
+ if (c == '') {
+ // token is still empty
+ tokenType = TOKENTYPE.DELIMITER;
+ return;
+ }
+
+ // check for delimiters consisting of 2 characters
+ var c2 = c + nextPreview();
+ if (DELIMITERS[c2]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c2;
+ next();
+ next();
+ return;
+ }
+
+ // check for delimiters consisting of 1 character
+ if (DELIMITERS[c]) {
+ tokenType = TOKENTYPE.DELIMITER;
+ token = c;
+ next();
+ return;
+ }
+
+ // 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;
+ }
+
+ // 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;
+ }
+
+ // 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();
+ }
+
+ // optional graph id
+ if (tokenType == TOKENTYPE.IDENTIFIER) {
+ graph.id = token;
+ getToken();
+ }
+
+ // open angle bracket
+ if (token != '{') {
+ throw newSyntaxError('Angle bracket { expected');
+ }
+ getToken();
+
+ // statements
+ parseStatements(graph);
+
+ // close angle bracket
+ if (token != '}') {
+ throw newSyntaxError('Angle bracket } expected');
+ }
+ getToken();
+
+ // 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;
+ }
+
+ // parse an attribute statement
+ var attr = parseAttributeStatement(graph);
+ if (attr) {
+ return;
+ }
+
+ // 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();
+ }
+ }
+
+ // 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);
+ }
+
+ 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();
+
+ // edge attributes
+ graph.edge = parseAttributeList();
+ return 'edge';
+ }
+ else if (token == 'graph') {
+ getToken();
+
+ // graph attributes
+ graph.graph = parseAttributeList();
+ return 'graph';
+ }
+
+ 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 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;
+ }
+ }
+
+ /**
+ * 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();
+ }
+
+ 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 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);
+ });
+ }
+
+ // 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);
+ });
+ }
+ });
+ }
+
+ // copy the options
+ if (dotData.attr) {
+ graphData.options = dotData.attr;
+ }
+
+ return graphData;
+ }
+
+ // exports
+ exports.parseDOT = parseDOT;
+ exports.DOTToGraph = DOTToGraph;
+
+})(typeof util !== 'undefined' ? util : exports);
+
+/**
+ * Canvas shapes used by the Graph
+ */
+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
+}
+
+/**
+ * @class Node
+ * A node. A node can be connected to other nodes via one or multiple edges.
+ * @param {object} properties An object containing properties for the node. All
+ * properties are optional, except for the id.
+ * {number} id Id of the node. Required
+ * {string} label Text label for the node
+ * {number} x Horizontal position of the node
+ * {number} y Vertical position of the node
+ * {string} shape Node shape, available:
+ * "database", "circle", "ellipse",
+ * "box", "image", "text", "dot",
+ * "star", "triangle", "triangleDown",
+ * "square"
+ * {string} image An image url
+ * {string} title An title text, can be HTML
+ * {anytype} group A group name or number
+ * @param {Graph.Images} imagelist A list with images. Only needed
+ * when the node has an image
+ * @param {Graph.Groups} grouplist A list with groups. Needed for
+ * retrieving group properties
+ * @param {Object} constants An object with default values for
+ * example for the color
+ */
+function Node(properties, imagelist, grouplist, constants) {
+ this.selected = false;
+
+ 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.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;
+
+ this.imagelist = imagelist;
+ this.grouplist = grouplist;
+
+ 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
+};
+
+/**
+ * Attach a edge to the node
+ * @param {Edge} edge
+ */
+Node.prototype.attachEdge = function(edge) {
+ if (this.edges.indexOf(edge) == -1) {
+ this.edges.push(edge);
+ }
+ this._updateMass();
+};
+
+/**
+ * Detach a edge from the node
+ * @param {Edge} edge
+ */
+Node.prototype.detachEdge = function(edge) {
+ var index = this.edges.indexOf(edge);
+ if (index != -1) {
+ this.edges.splice(index, 1);
+ }
+ this._updateMass();
+};
+
+/**
+ * Update the nodes mass, which is determined by the number of edges connecting
+ * to it (more edges -> heavier node).
+ * @private
+ */
+Node.prototype._updateMass = function() {
+ this.mass = 50 + 20 * this.edges.length; // kg
+};
+
+/**
+ * Set or overwrite properties for the node
+ * @param {Object} properties an object with properties
+ * @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];
+ }
+ }
+ }
+
+ // 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;}
+
+
+ if (this.image != undefined) {
+ if (this.imagelist) {
+ this.imageObj = this.imagelist.load(this.image);
+ }
+ else {
+ throw "No imagelist provided";
+ }
+ }
+
+ 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();
+};
+
+/**
+ * Parse a color property into an object with border, background, and
+ * hightlight colors
+ * @param {Object | String} color
+ * @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
+ }
+ 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;
+ }
+ }
+ return c;
+};
+
+/**
+ * select this node
+ */
+Node.prototype.select = function() {
+ this.selected = true;
+ this._reset();
+};
+
+/**
+ * unselect this node
+ */
+Node.prototype.unselect = function() {
+ this.selected = false;
+ this._reset();
+};
+
+/**
+ * Reset the calculated size of the node, forces it to recalculate its size
+ * @private
+ */
+Node.prototype._reset = function() {
+ this.width = undefined;
+ this.height = undefined;
+};
+
+/**
+ * get the title of this node.
+ * @return {string} title The title of the node, or undefined when no title
+ * has been set.
+ */
+Node.prototype.getTitle = function() {
+ return this.title;
+};
+
+/**
+ * Calculate the distance to the border of the Node
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} angle Angle in radians
+ * @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;
+ }
+
+ }
+
+ // TODO: implement calculation of distance to border for all shapes
+};
+
+/**
+ * Set forces acting on the node
+ * @param {number} fx Force in horizontal direction
+ * @param {number} fy Force in vertical direction
+ */
+Node.prototype._setForce = function(fx, fy) {
+ this.fx = fx;
+ this.fy = fy;
+};
+
+/**
+ * Add forces acting on the node
+ * @param {number} fx Force in horizontal direction
+ * @param {number} fy Force in vertical direction
+ * @private
+ */
+Node.prototype._addForce = function(fx, fy) {
+ this.fx += fx;
+ this.fy += fy;
+};
+
+/**
+ * Perform one discrete step for the node
+ * @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.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
+ }
+};
+
+
+/**
+ * Check if this node has a fixed x and y position
+ * @return {boolean} true if fixed, false if not
+ */
+Node.prototype.isFixed = function() {
+ return (this.xFixed && this.yFixed);
+};
+
+/**
+ * Check if this node is moving
+ * @param {number} vmin the minimum velocity considered as "moving"
+ * @return {boolean} true if moving, false if it has no velocity
+ */
+// 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));
+};
+
+/**
+ * check if this node is selecte
+ * @return {boolean} selected True if node is selected, else false
+ */
+Node.prototype.isSelected = function() {
+ return this.selected;
+};
+
+/**
+ * Retrieve the value of the node. Can be undefined
+ * @return {Number} value
+ */
+Node.prototype.getValue = function() {
+ return this.value;
+};
+
+/**
+ * Calculate the distance from the nodes location to the given location (x,y)
+ * @param {Number} x
+ * @param {Number} y
+ * @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);
+};
+
+
+/**
+ * Adjust the value range of the node. The node will adjust it's radius
+ * based on its value.
+ * @param {Number} min
+ * @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;
+ }
+ }
+};
+
+/**
+ * Draw this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ */
+Node.prototype.draw = function(ctx) {
+ throw "Draw method not initialized for node";
+};
+
+/**
+ * Recalculate the size of this node in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ */
+Node.prototype.resize = function(ctx) {
+ throw "Resize method not initialized for node";
+};
+
+/**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj an object with parameters left, top, right, bottom
+ * @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);
+};
+
+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;
+ }
+};
+
+Node.prototype._drawImage = function (ctx) {
+ this._resizeImage(ctx);
+
+ 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;
+ }
+
+ 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;
+ }
+};
+
+Node.prototype._drawBox = function (ctx) {
+ this._resizeBox(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.roundRect(this.left, this.top, this.width, this.height, this.radius);
+ ctx.fill();
+ ctx.stroke();
+
+ 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;
+ }
+};
+
+Node.prototype._drawDatabase = function (ctx) {
+ 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();
+
+ 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;
+ }
+};
+
+Node.prototype._drawCircle = function (ctx) {
+ 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();
+
+ 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;
+ }
+ }
+};
+
+Node.prototype._drawEllipse = function (ctx) {
+ 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();
+
+ this._label(ctx, this.label, this.x, this.y);
+};
+
+Node.prototype._drawDot = function (ctx) {
+ this._drawShape(ctx, 'circle');
+};
+
+Node.prototype._drawTriangle = function (ctx) {
+ this._drawShape(ctx, 'triangle');
+};
+
+Node.prototype._drawTriangleDown = function (ctx) {
+ this._drawShape(ctx, 'triangleDown');
+};
+
+Node.prototype._drawSquare = function (ctx) {
+ this._drawShape(ctx, 'square');
+};
+
+Node.prototype._drawStar = function (ctx) {
+ this._drawShape(ctx, 'star');
+};
+
+Node.prototype._resizeShape = function (ctx) {
+ if (!this.width) {
+ var size = 2 * this.radius;
+ this.width = size;
+ this.height = size;
+ }
+};
+
+Node.prototype._drawShape = function (ctx, shape) {
+ this._resizeShape(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[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');
+ }
+};
+
+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;
+ }
+};
+
+Node.prototype._drawText = function (ctx) {
+ 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);
+};
+
+
+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;
+ }
+ }
+};
+
+
+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;
+
+ 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};
+ }
+};
+
+/**
+ * @class Edge
+ *
+ * A edge connects two nodes
+ * @param {Object} properties Object with properties. Must contain
+ * At least properties from and to.
+ * Available properties: from (number),
+ * to (number), label (string, color (string),
+ * width (number), style (string),
+ * length (number), title (string)
+ * @param {Graph} graph A graph object, used to find and edge to
+ * nodes.
+ * @param {Object} constants An object with default values for
+ * 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);
+}
+
+/**
+ * Set or overwrite properties for the edge
+ * @param {Object} properties an object with properties
+ * @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;
+ }
+};
+
+/**
+ * Connect an edge to its nodes
+ */
+Edge.prototype.connect = function () {
+ this.disconnect();
+
+ 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);
+ }
+ else {
+ if (this.from) {
+ this.from.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;
+};
+
+/**
+ * get the title of this edge.
+ * @return {string} title The title of the edge, or undefined when no title
+ * has been set.
+ */
+Edge.prototype.getTitle = function() {
+ return this.title;
+};
+
+
+/**
+ * Retrieve the value of the edge. Can be undefined
+ * @return {Number} value
+ */
+Edge.prototype.getValue = function() {
+ return this.value;
+};
+
+/**
+ * Adjust the value range of the edge. The edge will adjust it's width
+ * based on its value.
+ * @param {Number} min
+ * @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;
+ }
+};
+
+/**
+ * Redraw a edge
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ */
+Edge.prototype.draw = function(ctx) {
+ throw "Method draw not initialized in edge";
+};
+
+/**
+ * Check if this object is overlapping with the provided object
+ * @param {Object} obj an object with parameters left, top
+ * @return {boolean} True if location is located on the edge
+ */
+Edge.prototype.isOverlappingWith = function(obj) {
+ 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 dist = Edge._dist(xFrom, yFrom, xTo, yTo, xObj, yObj);
+
+ return (dist < distMax);
+};
+
+
+/**
+ * Redraw a edge as a line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @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);
+ }
+ }
+ 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);
+ }
+};
+
+/**
+ * Get the line width of the edge. Depends on width and whether one of the
+ * connected nodes is selected.
+ * @return {Number} width
+ * @private
+ */
+Edge.prototype._getLineWidth = function() {
+ if (this.from.selected || this.to.selected) {
+ return Math.min(this.width * 2, this.widthMax);
+ }
+ else {
+ return this.width;
+ }
+};
+
+/**
+ * Draw a line between two nodes
+ * @param {CanvasRenderingContext2D} ctx
+ * @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 line from a node to itself, a circle
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @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 label with white background and with the middle at (x, y)
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} text
+ * @param {Number} x
+ * @param {Number} y
+ * @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);
+ }
+};
+
+/**
+ * Redraw a edge as a dashed line
+ * Draw this edge in the given canvas
+ * @author David Jordan
+ * @date 2012-08-08
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @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);
+ }
+};
+
+/**
+ * Get a point on a line
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @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
+ }
+};
+
+/**
+ * Get a point on a circle
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} radius
+ * @param {Number} percentage. Value between 0 (line start) and 1 (line end)
+ * @return {Object} point
+ * @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)
+ }
+};
+
+/**
+ * Redraw a edge as a line with an arrow halfway the line
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @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);
+ }
+ }
+ 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);
+ }
+ }
+};
+
+
+
+/**
+ * Redraw a edge as a line with an arrow
+ * Draw this edge in the given canvas
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext("2d");
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+Edge.prototype._drawArrow = function(ctx) {
+ // 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;
+
+ 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 {
+ 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);
+ }
+ }
+};
+
+
+
+/**
+ * Calculate the distance between a point (x3,y3) and a line segment from
+ * (x1,y1) to (x2,y2).
+ * http://stackoverflow.com/questions/849211/shortest-distancae-between-a-point-and-a-line-segment
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} x2
+ * @param {number} y2
+ * @param {number} x3
+ * @param {number} y3
+ * @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);
+};
+
+/**
+ * Popup is a class to create a popup window with some text
+ * @param {Element} container The container object.
+ * @param {Number} [x]
+ * @param {Number} [y]
+ * @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 (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);
+};
+
+/**
+ * @param {number} x Horizontal position of the popup window
+ * @param {number} y Vertical position of the popup window
+ */
+Popup.prototype.setPosition = function(x, y) {
+ this.x = parseInt(x);
+ this.y = parseInt(y);
+};
+
+/**
+ * Set the text for the popup window. This can be HTML code
+ * @param {string} text
+ */
+Popup.prototype.setText = function(text) {
+ this.frame.innerHTML = text;
+};
+
+/**
+ * Show the popup window
+ * @param {boolean} show Optional. Show or hide the window
+ */
+Popup.prototype.show = function (show) {
+ 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;
+
+ 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;
+ }
+
+ 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";
+};
+
+/**
+ * @class Groups
+ * This class can store groups and properties specific for groups.
+ */
+Groups = function () {
+ this.clear();
+ this.defaultIndex = 0;
+};
+
+
+/**
+ * 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
+];
+
+
+/**
+ * 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;
+ }
+};
+
+
+/**
+ * get group properties of a groupname. If groupname is not found, a new group
+ * is added.
+ * @param {*} groupname Can be a number, string, Date, etc.
+ * @return {Object} group The created group, containing all group properties
+ */
+Groups.prototype.get = function (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;
+ }
+
+ return group;
+};
+
+/**
+ * Add a custom group style
+ * @param {String} groupname
+ * @param {Object} style An object containing borderColor,
+ * backgroundColor, etc.
+ * @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;
+};
+
+/**
+ * @class Images
+ * This class loads images and keeps them stored.
+ */
+Images = function () {
+ this.images = {};
+
+ this.callback = undefined;
+};
+
+/**
+ * Set an onload callback function. This will be called each time an image
+ * is loaded
+ * @param {function} callback
+ */
+Images.prototype.setOnloadCallback = function(callback) {
+ this.callback = callback;
+};
+
+/**
+ *
+ * @param {string} url Url of the image
+ * @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;
+ }
+
+ return img;
+};
+
+/**
+ * @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
+ * {Array} nodes
+ * {Array} edges
+ * @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();
+ }
+ };
+ 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);
+}
+
+/**
+ * Set nodes and edges, and optionally options as well.
+ *
+ * @param {Object} data Object containing parameters:
+ * {Array | DataSet | DataView} [nodes] Array with nodes
+ * {Array | DataSet | DataView} [edges] Array with edges
+ * {String} [dot] String containing data in DOT format
+ * {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();
+};
+
+/**
+ * Set options
+ * @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.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.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);
+ }
+ }
+ }
+ }
+
+ this.setSize(this.width, this.height);
+ this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
+ this._setScale(1);
+};
+
+/**
+ * fire an event
+ * @param {String} event The name of an event, for example 'select'
+ * @param {Object} params Optional object with event parameters
+ * @private
+ */
+Graph.prototype._trigger = function (event, params) {
+ events.trigger(this, event, params);
+};
+
+
+/**
+ * Create the main frame for the Graph.
+ * This function is executed once when a Graph object is created. The frame
+ * contains a canvas, and this canvas contains all objects like the axis and
+ * nodes.
+ * @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);
+};
+
+/**
+ *
+ * @param {{x: Number, y: Number}} pointer
+ * @return {Number | null} node
+ * @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;
+};
+
+/**
+ * Get the pointer location from a touch location
+ * @param {{pageX: Number, pageY: Number}} touch
+ * @return {{x: Number, y: Number}} 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)
+ };
+};
+
+/**
+ * On start of a touch gesture, store the pointer
+ * @param event
+ * @private
+ */
+Graph.prototype._onTouch = function (event) {
+ this.drag.pointer = this._getPointer(event.gesture.touches[0]);
+ this.drag.pinched = false;
+ this.pinch.scale = this._getScale();
+};
+
+/**
+ * handle drag start event
+ * @private
+ */
+Graph.prototype._onDragStart = function () {
+ 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
+
+ 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);
+ }
+ });
+
+ }
+};
+
+/**
+ * handle drag event
+ * @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);
+ }
+ });
+
+ // 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;
+
+ this._setTranslation(
+ this.drag.translation.x + diffX,
+ this.drag.translation.y + diffY);
+ this._redraw();
+
+ this.moved = true;
+ }
+};
+
+/**
+ * handle drag start 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;
+ });
+ }
+};
+
+/**
+ * handle tap/click event: select/unselect a node
+ * @private
+ */
+Graph.prototype._onTap = function (event) {
+ 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]);
+
+ if (!this.moving) {
+ this._redraw();
+ }
+ }
+ else {
+ // remove selection
+ this._unselectNodes();
+ this._redraw();
+ }
+};
+
+/**
+ * handle long tap event: multi select nodes
+ * @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();
+ }
+ }
+ else {
+ // Do nothing
+ }
+};
+
+/**
+ * Handle pinch event
+ * @param event
+ * @private
+ */
+Graph.prototype._onPinch = function (event) {
+ var pointer = this._getPointer(event.gesture.center);
+
+ 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)
+};
+
+/**
+ * Zoom the graph in or out
+ * @param {Number} scale a number around 1, and between 0.01 and 10
+ * @param {{x: Number, y: Number}} pointer
+ * @return {Number} appliedScale scale is limited within the boundaries
+ * @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;
+};
+
+/**
+ * Event handler for mouse wheel event, used to zoom the timeline
+ * See http://adomas.org/javascript-mouse-wheel/
+ * https://github.com/EightMedia/hammer.js/issues/256
+ * @param {MouseEvent} event
+ * @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 = util.fakeGesture(this, event);
+ var pointer = this._getPointer(gesture.center);
+
+ // apply the new scale
+ scale = this._zoom(scale, pointer);
+
+ // store the new, applied scale
+ this.pinch.mouswheelScale = scale;
+ }
+
+ // Prevent default actions caused by mouse wheel.
+ event.preventDefault();
+};
+
+
+/**
+ * Mouse move handler for checking whether the title moves over a node with a title.
+ * @param {Event} event
+ * @private
+ */
+Graph.prototype._onMouseMoveTitle = function (event) {
+ var gesture = util.fakeGesture(this, 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);
+ }
+};
+
+/**
+ * Check if there is an element on the given position in the graph
+ * (a node or edge). If so, and if this element has a title,
+ * show a popup window with its title.
+ *
+ * @param {{x:Number, y:Number}} pointer
+ * @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;
+ }
+ }
+ }
+ }
+
+ 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();
+ }
+ }
+};
+
+/**
+ * Check if the popup must be hided, which is the case when the mouse is no
+ * longer hovering on the object
+ * @param {{x:Number, y:Number}} pointer
+ * @private
+ */
+Graph.prototype._checkHidePopup = function (pointer) {
+ if (!this.popupNode || !this._getNodeAt(pointer) ) {
+ this.popupNode = undefined;
+ if (this.popup) {
+ this.popup.hide();
+ }
+ }
+};
+
+/**
+ * Unselect selected nodes. If no selection array is provided, all nodes
+ * are unselected
+ * @param {Object[]} selection Array with selection objects, each selection
+ * object has a parameter row. Optional
+ * @param {Boolean} triggerSelect If true (default), the select event
+ * is triggered when nodes are unselected
+ * @return {Boolean} changed True if the selection is changed
+ * @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++;
+ }
+ }
+ }
+ }
+ 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 = [];
+ }
+
+ if (changed && (triggerSelect == true || triggerSelect == undefined)) {
+ // fire the select event
+ this._trigger('select');
+ }
+
+ return changed;
+};
+
+/**
+ * select all nodes on given location x, y
+ * @param {Array} selection an array with node ids
+ * @param {boolean} append If true, the new selection will be appended to the
+ * current selection (except for duplicate entries)
+ * @return {Boolean} changed True if the selection is changed
+ * @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) {
+ 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;
+ }
+ }
+ }
+ 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;
+};
+
+/**
+ * retrieve all nodes overlapping with given object
+ * @param {Object} obj An object with parameters left, top, right, bottom
+ * @return {Number[]} An array with id's of the overlapping nodes
+ * @private
+ */
+Graph.prototype._getNodesOverlappingWith = function (obj) {
+ var nodes = this.nodes,
+ overlappingNodes = [];
+
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ if (nodes[id].isOverlappingWith(obj)) {
+ overlappingNodes.push(id);
+ }
+ }
+ }
+
+ return overlappingNodes;
+};
+
+/**
+ * retrieve the currently selected nodes
+ * @return {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+Graph.prototype.getSelection = function() {
+ return this.selection.concat([]);
+};
+
+/**
+ * select zero or more nodes
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+Graph.prototype.setSelection = function(selection) {
+ var i, iMax, id;
+
+ 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();
+ }
+
+ this.selection = [];
+
+ 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);
+ }
+
+ this.redraw();
+};
+
+/**
+ * Validate the selection: remove ids of nodes which no longer exist
+ * @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++;
+ }
+ }
+};
+
+/**
+ * Temporary method to test calculating a hub value for the nodes
+ * @param {number} level Maximum number edges between two nodes in order
+ * to call them connected. Optional, 1 by default
+ * @return {Number[]} connectioncount array with the connection count
+ * for each node
+ * @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);
+ }
+ }
+
+ 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;
+};
+
+
+/**
+ * Set a new size for the graph
+ * @param {string} width Width in pixels or percentage (for example '800px'
+ * or '50%')
+ * @param {string} height Height in pixels or percentage (for example '400px'
+ * or '30%')
+ */
+Graph.prototype.setSize = function(width, 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.width = this.frame.canvas.clientWidth;
+ this.frame.canvas.height = this.frame.canvas.clientHeight;
+};
+
+/**
+ * Set a data set with nodes for the graph
+ * @param {Array | DataSet | DataView} nodes The data containing the nodes.
+ * @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);
+ });
+ }
+
+ // 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);
+ });
+
+ // draw all new nodes
+ var ids = this.nodesData.getIds();
+ this._addNodes(ids);
+ }
+
+ this._updateSelection();
+};
+
+/**
+ * Add nodes
+ * @param {Number[] | String[]} ids
+ * @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);
+};
+
+/**
+ * Update existing nodes, or create them when not yet existing
+ * @param {Number[] | String[]} 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;
+
+ if (!node.isFixed()) {
+ this.moving = true;
+ }
+ }
+ }
+
+ this._reconnectEdges();
+ this._updateValueRange(nodes);
+};
+
+/**
+ * Remove existing nodes. If nodes do not exist, the method will just ignore it.
+ * @param {Number[] | String[]} 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);
+};
+
+/**
+ * Load edges by reading the data table
+ * @param {Array | DataSet | DataView} edges The data containing the edges.
+ * @private
+ * @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);
+ });
+ }
+
+ // 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);
+ });
+
+ // draw all new nodes
+ var ids = this.edgesData.getIds();
+ this._addEdges(ids);
+ }
+
+ this._reconnectEdges();
+};
+
+/**
+ * Add edges
+ * @param {Number[] | String[]} ids
+ * @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 data = edgesData.get(id);
+ edges[id] = new Edge(data, this, this.constants);
+ }
+
+ this.moving = true;
+ this._updateValueRange(edges);
+};
+
+/**
+ * Update existing edges, or create them when not yet existing
+ * @param {Number[] | String[]} 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;
+ }
+ }
+
+ this.moving = true;
+ this._updateValueRange(edges);
+};
+
+/**
+ * Remove existing edges. Non existing ids will be ignored
+ * @param {Number[] | String[]} 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);
+};
+
+/**
+ * Reconnect all edges
+ * @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();
+ }
+ }
+};
+
+/**
+ * Update the values of all object in the given array according to the current
+ * value range of the objects in the array.
+ * @param {Object} obj An object containing a set of Edges or Nodes
+ * The objects must have a method getValue() and
+ * setValueRange(min, max).
+ * @private
+ */
+Graph.prototype._updateValueRange = function(obj) {
+ 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)) {
+ obj[id].setValueRange(valueMin, valueMax);
+ }
+ }
+ }
+};
+
+/**
+ * Redraw the graph with the current data
+ * chart will be resized too.
+ */
+Graph.prototype.redraw = function() {
+ this.setSize(this.width, this.height);
+
+ this._redraw();
+};
+
+/**
+ * Redraw the graph with the current data
+ * @private
+ */
+Graph.prototype._redraw = function() {
+ 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);
+
+ // 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);
+
+ // restore original scaling and translation
+ ctx.restore();
+};
+
+/**
+ * Set the translation of the graph
+ * @param {Number} offsetX Horizontal offset
+ * @param {Number} offsetY Vertical offset
+ * @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;
+ }
+};
+
+/**
+ * Get the translation of the graph
+ * @return {Object} translation An object with parameters x and y, both a number
+ * @private
+ */
+Graph.prototype._getTranslation = function() {
+ return {
+ x: this.translation.x,
+ y: this.translation.y
+ };
+};
+
+/**
+ * Scale the graph
+ * @param {Number} scale Scaling factor 1.0 is unscaled
+ * @private
+ */
+Graph.prototype._setScale = function(scale) {
+ this.scale = scale;
+};
+/**
+ * Get the current scale of the graph
+ * @return {Number} scale Scaling factor 1.0 is unscaled
+ * @private
+ */
+Graph.prototype._getScale = function() {
+ return this.scale;
+};
+
+/**
+ * Convert a horizontal point on the HTML canvas to the x-value of the model
+ * @param {number} x
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._canvasToX = function(x) {
+ return (x - this.translation.x) / this.scale;
+};
+
+/**
+ * Convert an x-value in the model to a horizontal point on the HTML canvas
+ * @param {number} x
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._xToCanvas = function(x) {
+ return x * this.scale + this.translation.x;
+};
+
+/**
+ * Convert a vertical point on the HTML canvas to the y-value of the model
+ * @param {number} y
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._canvasToY = function(y) {
+ return (y - this.translation.y) / this.scale;
+};
+
+/**
+ * Convert an y-value in the model to a vertical point on the HTML canvas
+ * @param {number} y
+ * @returns {number}
+ * @private
+ */
+Graph.prototype._yToCanvas = function(y) {
+ return y * this.scale + this.translation.y ;
+};
+
+/**
+ * Redraw all nodes
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+ * @param {CanvasRenderingContext2D} ctx
+ * @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);
+ }
+};
+
+/**
+ * Redraw all edges
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+ * @param {CanvasRenderingContext2D} 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);
+ }
+ }
+ }
+};
+
+/**
+ * Find a stable position for all nodes
+ * @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
+};
+
+/**
+ * Calculate the external forces acting on the nodes
+ * Forces are caused by: edges, repulsing forces between nodes, gravity
+ * @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);
+ }
+ }
+
+ // 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);
+ }
+ }
+ */
+};
+
+
+/**
+ * Check if any of the nodes is still moving
+ * @param {number} vmin the minimum velocity considered as 'moving'
+ * @return {boolean} true if moving, false if non of the nodes is moving
+ * @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;
+};
+
+
+/**
+ * Perform one discrete step for all nodes
+ * @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);
+ }
+ }
+};
+
+/**
+ * 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) {
+ // 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;
+ }
+};
+
+/**
+ * vis.js module exports
+ */
+var vis = {
+ util: util,
+ events: events,
+
+ 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
+ },
+
+ graph: {
+ Node: Node,
+ Edge: Edge,
+ Popup: Popup,
+ Groups: Groups,
+ Images: Images
+ },
+
+ Timeline: Timeline,
+ Graph: Graph
+};
+
+/**
+ * CommonJS module exports
+ */
+if (typeof exports !== 'undefined') {
+ exports = vis;
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+ module.exports = vis;
+}
+
+/**
+ * AMD module exports
+ */
+if (typeof(define) === 'function') {
+ 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;
+}
+
+
+},{"hammerjs":2,"moment":3}],2:[function(require,module,exports){
+/*! Hammer.JS - v1.0.5 - 2013-04-07
+ * http://eightmedia.github.com/hammer.js
+ *
+ * Copyright (c) 2013 Jorik Tangelder ;
+ * Licensed under the MIT license */
+
+(function(window, undefined) {
+ 'use strict';
+
+/**
+ * Hammer
+ * use this to create instances
+ * @param {HTMLElement} element
+ * @param {Object} options
+ * @returns {Hammer.Instance}
+ * @constructor
+ */
+var Hammer = function(element, options) {
+ return new Hammer.Instance(element, options || {});
+};
+
+// default settings
+Hammer.defaults = {
+ // add styles and attributes to the element to prevent the browser from doing
+ // its native behavior. this doesnt prevent the scrolling, but cancels
+ // the contextmenu, tap highlighting etc
+ // set to false to disable this
+ stop_browser_behavior: {
+ // this also triggers onselectstart=false for IE
+ userSelect: 'none',
+ // this makes the element blocking in IE10 >, you could experiment with the value
+ // see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241
+ touchAction: 'none',
+ touchCallout: 'none',
+ contentZooming: 'none',
+ userDrag: 'none',
+ tapHighlightColor: 'rgba(0,0,0,0)'
+ }
+
+ // more settings are defined per gesture at gestures.js
+};
+
+// detect touchevents
+Hammer.HAS_POINTEREVENTS = navigator.pointerEnabled || navigator.msPointerEnabled;
+Hammer.HAS_TOUCHEVENTS = ('ontouchstart' in window);
+
+// dont use mouseevents on mobile devices
+Hammer.MOBILE_REGEX = /mobile|tablet|ip(ad|hone|od)|android/i;
+Hammer.NO_MOUSEEVENTS = Hammer.HAS_TOUCHEVENTS && navigator.userAgent.match(Hammer.MOBILE_REGEX);
+
+// eventtypes per touchevent (start, move, end)
+// are filled by Hammer.event.determineEventTypes on setup
+Hammer.EVENT_TYPES = {};
+
+// direction defines
+Hammer.DIRECTION_DOWN = 'down';
+Hammer.DIRECTION_LEFT = 'left';
+Hammer.DIRECTION_UP = 'up';
+Hammer.DIRECTION_RIGHT = 'right';
+
+// pointer type
+Hammer.POINTER_MOUSE = 'mouse';
+Hammer.POINTER_TOUCH = 'touch';
+Hammer.POINTER_PEN = 'pen';
+
+// touch event defines
+Hammer.EVENT_START = 'start';
+Hammer.EVENT_MOVE = 'move';
+Hammer.EVENT_END = 'end';
+
+// hammer document where the base events are added at
+Hammer.DOCUMENT = document;
+
+// plugins namespace
+Hammer.plugins = {};
+
+// if the window events are set...
+Hammer.READY = false;
+
+/**
+ * setup events to detect gestures on the document
+ */
+function setup() {
+ if(Hammer.READY) {
+ return;
+ }
+
+ // find what eventtypes we add listeners to
+ Hammer.event.determineEventTypes();
+
+ // Register all gestures inside Hammer.gestures
+ for(var name in Hammer.gestures) {
+ if(Hammer.gestures.hasOwnProperty(name)) {
+ Hammer.detection.register(Hammer.gestures[name]);
+ }
+ }
+
+ // Add touch events on the document
+ Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_MOVE, Hammer.detection.detect);
+ Hammer.event.onTouch(Hammer.DOCUMENT, Hammer.EVENT_END, Hammer.detection.detect);
+
+ // Hammer is ready...!
+ Hammer.READY = true;
+}
+
+/**
+ * create new hammer instance
+ * all methods should return the instance itself, so it is chainable.
+ * @param {HTMLElement} element
+ * @param {Object} [options={}]
+ * @returns {Hammer.Instance}
+ * @constructor
+ */
+Hammer.Instance = function(element, options) {
+ var self = this;
+
+ // setup HammerJS window events and register all gestures
+ // this also sets up the default options
+ setup();
+
+ this.element = element;
+
+ // start/stop detection option
+ this.enabled = true;
+
+ // merge options
+ this.options = Hammer.utils.extend(
+ Hammer.utils.extend({}, Hammer.defaults),
+ options || {});
+
+ // add some css to the element to prevent the browser from doing its native behavoir
+ if(this.options.stop_browser_behavior) {
+ Hammer.utils.stopDefaultBrowserBehavior(this.element, this.options.stop_browser_behavior);
+ }
+
+ // start detection on touchstart
+ Hammer.event.onTouch(element, Hammer.EVENT_START, function(ev) {
+ if(self.enabled) {
+ Hammer.detection.startDetect(self, ev);
+ }
+ });
+
+ // return instance
+ return this;
+};
+
+
+Hammer.Instance.prototype = {
+ /**
+ * bind events to the instance
+ * @param {String} gesture
+ * @param {Function} handler
+ * @returns {Hammer.Instance}
+ */
+ on: function onEvent(gesture, handler){
+ var gestures = gesture.split(' ');
+ for(var t=0; t 0 && eventType == Hammer.EVENT_END) {
+ eventType = Hammer.EVENT_MOVE;
+ }
+ // no touches, force the end event
+ else if(!count_touches) {
+ eventType = Hammer.EVENT_END;
+ }
+
+ // because touchend has no touches, and we often want to use these in our gestures,
+ // we send the last move event as our eventData in touchend
+ if(!count_touches && last_move_event !== null) {
+ ev = last_move_event;
+ }
+ // store the last move event
+ else {
+ last_move_event = ev;
+ }
+
+ // trigger the handler
+ handler.call(Hammer.detection, self.collectEventData(element, eventType, ev));
+
+ // remove pointerevent from list
+ if(Hammer.HAS_POINTEREVENTS && eventType == Hammer.EVENT_END) {
+ count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
+ }
+ }
+
+ //debug(sourceEventType +" "+ eventType);
+
+ // on the end we reset everything
+ if(!count_touches) {
+ last_move_event = null;
+ enable_detect = false;
+ touch_triggered = false;
+ Hammer.PointerEvent.reset();
+ }
+ });
+ },
+
+
+ /**
+ * we have different events for each device/browser
+ * determine what we need and set them in the Hammer.EVENT_TYPES constant
+ */
+ determineEventTypes: function determineEventTypes() {
+ // determine the eventtype we want to set
+ var types;
+
+ // pointerEvents magic
+ if(Hammer.HAS_POINTEREVENTS) {
+ types = Hammer.PointerEvent.getEvents();
+ }
+ // on Android, iOS, blackberry, windows mobile we dont want any mouseevents
+ else if(Hammer.NO_MOUSEEVENTS) {
+ types = [
+ 'touchstart',
+ 'touchmove',
+ 'touchend touchcancel'];
+ }
+ // for non pointer events browsers and mixed browsers,
+ // like chrome on windows8 touch laptop
+ else {
+ types = [
+ 'touchstart mousedown',
+ 'touchmove mousemove',
+ 'touchend touchcancel mouseup'];
+ }
+
+ Hammer.EVENT_TYPES[Hammer.EVENT_START] = types[0];
+ Hammer.EVENT_TYPES[Hammer.EVENT_MOVE] = types[1];
+ Hammer.EVENT_TYPES[Hammer.EVENT_END] = types[2];
+ },
+
+
+ /**
+ * create touchlist depending on the event
+ * @param {Object} ev
+ * @param {String} eventType used by the fakemultitouch plugin
+ */
+ getTouchList: function getTouchList(ev/*, eventType*/) {
+ // get the fake pointerEvent touchlist
+ if(Hammer.HAS_POINTEREVENTS) {
+ return Hammer.PointerEvent.getTouchList();
+ }
+ // get the touchlist
+ else if(ev.touches) {
+ return ev.touches;
+ }
+ // make fake touchlist from mouse position
+ else {
+ return [{
+ identifier: 1,
+ pageX: ev.pageX,
+ pageY: ev.pageY,
+ target: ev.target
+ }];
+ }
+ },
+
+
+ /**
+ * collect event data for Hammer js
+ * @param {HTMLElement} element
+ * @param {String} eventType like Hammer.EVENT_MOVE
+ * @param {Object} eventData
+ */
+ collectEventData: function collectEventData(element, eventType, ev) {
+ var touches = this.getTouchList(ev, eventType);
+
+ // find out pointerType
+ var pointerType = Hammer.POINTER_TOUCH;
+ if(ev.type.match(/mouse/) || Hammer.PointerEvent.matchType(Hammer.POINTER_MOUSE, ev)) {
+ pointerType = Hammer.POINTER_MOUSE;
+ }
+
+ return {
+ center : Hammer.utils.getCenter(touches),
+ timeStamp : new Date().getTime(),
+ target : ev.target,
+ touches : touches,
+ eventType : eventType,
+ pointerType : pointerType,
+ srcEvent : ev,
+
+ /**
+ * prevent the browser default actions
+ * mostly used to disable scrolling of the browser
+ */
+ preventDefault: function() {
+ if(this.srcEvent.preventManipulation) {
+ this.srcEvent.preventManipulation();
+ }
+
+ if(this.srcEvent.preventDefault) {
+ this.srcEvent.preventDefault();
+ }
+ },
+
+ /**
+ * stop bubbling the event up to its parents
+ */
+ stopPropagation: function() {
+ this.srcEvent.stopPropagation();
+ },
+
+ /**
+ * immediately stop gesture detection
+ * might be useful after a swipe was detected
+ * @return {*}
+ */
+ stopDetect: function() {
+ return Hammer.detection.stopDetect();
+ }
+ };
+ }
+};
+
+Hammer.PointerEvent = {
+ /**
+ * holds all pointers
+ * @type {Object}
+ */
+ pointers: {},
+
+ /**
+ * get a list of pointers
+ * @returns {Array} touchlist
+ */
+ getTouchList: function() {
+ var self = this;
+ var touchlist = [];
+
+ // we can use forEach since pointerEvents only is in IE10
+ Object.keys(self.pointers).sort().forEach(function(id) {
+ touchlist.push(self.pointers[id]);
+ });
+ return touchlist;
+ },
+
+ /**
+ * update the position of a pointer
+ * @param {String} type Hammer.EVENT_END
+ * @param {Object} pointerEvent
+ */
+ updatePointer: function(type, pointerEvent) {
+ if(type == Hammer.EVENT_END) {
+ this.pointers = {};
+ }
+ else {
+ pointerEvent.identifier = pointerEvent.pointerId;
+ this.pointers[pointerEvent.pointerId] = pointerEvent;
+ }
+
+ return Object.keys(this.pointers).length;
+ },
+
+ /**
+ * check if ev matches pointertype
+ * @param {String} pointerType Hammer.POINTER_MOUSE
+ * @param {PointerEvent} ev
+ */
+ matchType: function(pointerType, ev) {
+ if(!ev.pointerType) {
+ return false;
+ }
+
+ var types = {};
+ types[Hammer.POINTER_MOUSE] = (ev.pointerType == ev.MSPOINTER_TYPE_MOUSE || ev.pointerType == Hammer.POINTER_MOUSE);
+ types[Hammer.POINTER_TOUCH] = (ev.pointerType == ev.MSPOINTER_TYPE_TOUCH || ev.pointerType == Hammer.POINTER_TOUCH);
+ types[Hammer.POINTER_PEN] = (ev.pointerType == ev.MSPOINTER_TYPE_PEN || ev.pointerType == Hammer.POINTER_PEN);
+ return types[pointerType];
+ },
+
+
+ /**
+ * get events
+ */
+ getEvents: function() {
+ return [
+ 'pointerdown MSPointerDown',
+ 'pointermove MSPointerMove',
+ 'pointerup pointercancel MSPointerUp MSPointerCancel'
+ ];
+ },
+
+ /**
+ * reset the list
+ */
+ reset: function() {
+ this.pointers = {};
+ }
+};
+
+
+Hammer.utils = {
+ /**
+ * extend method,
+ * also used for cloning when dest is an empty object
+ * @param {Object} dest
+ * @param {Object} src
+ * @parm {Boolean} merge do a merge
+ * @returns {Object} dest
+ */
+ extend: function extend(dest, src, merge) {
+ for (var key in src) {
+ if(dest[key] !== undefined && merge) {
+ continue;
+ }
+ dest[key] = src[key];
+ }
+ return dest;
+ },
+
+
+ /**
+ * find if a node is in the given parent
+ * used for event delegation tricks
+ * @param {HTMLElement} node
+ * @param {HTMLElement} parent
+ * @returns {boolean} has_parent
+ */
+ hasParent: function(node, parent) {
+ while(node){
+ if(node == parent) {
+ return true;
+ }
+ node = node.parentNode;
+ }
+ return false;
+ },
+
+
+ /**
+ * get the center of all the touches
+ * @param {Array} touches
+ * @returns {Object} center
+ */
+ getCenter: function getCenter(touches) {
+ var valuesX = [], valuesY = [];
+
+ for(var t= 0,len=touches.length; t= y) {
+ return touch1.pageX - touch2.pageX > 0 ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+ }
+ else {
+ return touch1.pageY - touch2.pageY > 0 ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+ }
+ },
+
+
+ /**
+ * calculate the distance between two touches
+ * @param {Touch} touch1
+ * @param {Touch} touch2
+ * @returns {Number} distance
+ */
+ getDistance: function getDistance(touch1, touch2) {
+ var x = touch2.pageX - touch1.pageX,
+ y = touch2.pageY - touch1.pageY;
+ return Math.sqrt((x*x) + (y*y));
+ },
+
+
+ /**
+ * calculate the scale factor between two touchLists (fingers)
+ * no scale is 1, and goes down to 0 when pinched together, and bigger when pinched out
+ * @param {Array} start
+ * @param {Array} end
+ * @returns {Number} scale
+ */
+ getScale: function getScale(start, end) {
+ // need two fingers...
+ if(start.length >= 2 && end.length >= 2) {
+ return this.getDistance(end[0], end[1]) /
+ this.getDistance(start[0], start[1]);
+ }
+ return 1;
+ },
+
+
+ /**
+ * calculate the rotation degrees between two touchLists (fingers)
+ * @param {Array} start
+ * @param {Array} end
+ * @returns {Number} rotation
+ */
+ getRotation: function getRotation(start, end) {
+ // need two fingers
+ if(start.length >= 2 && end.length >= 2) {
+ return this.getAngle(end[1], end[0]) -
+ this.getAngle(start[1], start[0]);
+ }
+ return 0;
+ },
+
+
+ /**
+ * boolean if the direction is vertical
+ * @param {String} direction
+ * @returns {Boolean} is_vertical
+ */
+ isVertical: function isVertical(direction) {
+ return (direction == Hammer.DIRECTION_UP || direction == Hammer.DIRECTION_DOWN);
+ },
+
+
+ /**
+ * stop browser default behavior with css props
+ * @param {HtmlElement} element
+ * @param {Object} css_props
+ */
+ stopDefaultBrowserBehavior: function stopDefaultBrowserBehavior(element, css_props) {
+ var prop,
+ vendors = ['webkit','khtml','moz','ms','o',''];
+
+ if(!css_props || !element.style) {
+ return;
+ }
+
+ // with css properties for modern browsers
+ for(var i = 0; i < vendors.length; i++) {
+ for(var p in css_props) {
+ if(css_props.hasOwnProperty(p)) {
+ prop = p;
+
+ // vender prefix at the property
+ if(vendors[i]) {
+ prop = vendors[i] + prop.substring(0, 1).toUpperCase() + prop.substring(1);
+ }
+
+ // set the style
+ element.style[prop] = css_props[p];
+ }
+ }
+ }
+
+ // also the disable onselectstart
+ if(css_props.userSelect == 'none') {
+ element.onselectstart = function() {
+ return false;
+ };
+ }
+ }
+};
+
+Hammer.detection = {
+ // contains all registred Hammer.gestures in the correct order
+ gestures: [],
+
+ // data of the current Hammer.gesture detection session
+ current: null,
+
+ // the previous Hammer.gesture session data
+ // is a full clone of the previous gesture.current object
+ previous: null,
+
+ // when this becomes true, no gestures are fired
+ stopped: false,
+
+
+ /**
+ * start Hammer.gesture detection
+ * @param {Hammer.Instance} inst
+ * @param {Object} eventData
+ */
+ startDetect: function startDetect(inst, eventData) {
+ // already busy with a Hammer.gesture detection on an element
+ if(this.current) {
+ return;
+ }
+
+ this.stopped = false;
+
+ this.current = {
+ inst : inst, // reference to HammerInstance we're working for
+ startEvent : Hammer.utils.extend({}, eventData), // start eventData for distances, timing etc
+ lastEvent : false, // last eventData
+ name : '' // current gesture we're in/detected, can be 'tap', 'hold' etc
+ };
+
+ this.detect(eventData);
+ },
+
+
+ /**
+ * Hammer.gesture detection
+ * @param {Object} eventData
+ * @param {Object} eventData
+ */
+ detect: function detect(eventData) {
+ if(!this.current || this.stopped) {
+ return;
+ }
+
+ // extend event data with calculations about scale, distance etc
+ eventData = this.extendEventData(eventData);
+
+ // instance options
+ var inst_options = this.current.inst.options;
+
+ // call Hammer.gesture handlers
+ for(var g=0,len=this.gestures.length; g b.index) {
+ return 1;
+ }
+ return 0;
+ });
+
+ return this.gestures;
+ }
+};
+
+
+Hammer.gestures = Hammer.gestures || {};
+
+/**
+ * Custom gestures
+ * ==============================
+ *
+ * Gesture object
+ * --------------------
+ * The object structure of a gesture:
+ *
+ * { name: 'mygesture',
+ * index: 1337,
+ * defaults: {
+ * mygesture_option: true
+ * }
+ * handler: function(type, ev, inst) {
+ * // trigger gesture event
+ * inst.trigger(this.name, ev);
+ * }
+ * }
+
+ * @param {String} name
+ * this should be the name of the gesture, lowercase
+ * it is also being used to disable/enable the gesture per instance config.
+ *
+ * @param {Number} [index=1000]
+ * the index of the gesture, where it is going to be in the stack of gestures detection
+ * like when you build an gesture that depends on the drag gesture, it is a good
+ * idea to place it after the index of the drag gesture.
+ *
+ * @param {Object} [defaults={}]
+ * the default settings of the gesture. these are added to the instance settings,
+ * and can be overruled per instance. you can also add the name of the gesture,
+ * but this is also added by default (and set to true).
+ *
+ * @param {Function} handler
+ * this handles the gesture detection of your custom gesture and receives the
+ * following arguments:
+ *
+ * @param {Object} eventData
+ * event data containing the following properties:
+ * timeStamp {Number} time the event occurred
+ * target {HTMLElement} target element
+ * touches {Array} touches (fingers, pointers, mouse) on the screen
+ * pointerType {String} kind of pointer that was used. matches Hammer.POINTER_MOUSE|TOUCH
+ * center {Object} center position of the touches. contains pageX and pageY
+ * deltaTime {Number} the total time of the touches in the screen
+ * deltaX {Number} the delta on x axis we haved moved
+ * deltaY {Number} the delta on y axis we haved moved
+ * velocityX {Number} the velocity on the x
+ * velocityY {Number} the velocity on y
+ * angle {Number} the angle we are moving
+ * direction {String} the direction we are moving. matches Hammer.DIRECTION_UP|DOWN|LEFT|RIGHT
+ * distance {Number} the distance we haved moved
+ * scale {Number} scaling of the touches, needs 2 touches
+ * rotation {Number} rotation of the touches, needs 2 touches *
+ * eventType {String} matches Hammer.EVENT_START|MOVE|END
+ * srcEvent {Object} the source event, like TouchStart or MouseDown *
+ * startEvent {Object} contains the same properties as above,
+ * but from the first touch. this is used to calculate
+ * distances, deltaTime, scaling etc
+ *
+ * @param {Hammer.Instance} inst
+ * the instance we are doing the detection for. you can get the options from
+ * the inst.options object and trigger the gesture event by calling inst.trigger
+ *
+ *
+ * Handle gestures
+ * --------------------
+ * inside the handler you can get/set Hammer.detection.current. This is the current
+ * detection session. It has the following properties
+ * @param {String} name
+ * contains the name of the gesture we have detected. it has not a real function,
+ * only to check in other gestures if something is detected.
+ * like in the drag gesture we set it to 'drag' and in the swipe gesture we can
+ * check if the current gesture is 'drag' by accessing Hammer.detection.current.name
+ *
+ * @readonly
+ * @param {Hammer.Instance} inst
+ * the instance we do the detection for
+ *
+ * @readonly
+ * @param {Object} startEvent
+ * contains the properties of the first gesture detection in this session.
+ * Used for calculations about timing, distance, etc.
+ *
+ * @readonly
+ * @param {Object} lastEvent
+ * contains all the properties of the last gesture detect in this session.
+ *
+ * after the gesture detection session has been completed (user has released the screen)
+ * the Hammer.detection.current object is copied into Hammer.detection.previous,
+ * this is usefull for gestures like doubletap, where you need to know if the
+ * previous gesture was a tap
+ *
+ * options that have been set by the instance can be received by calling inst.options
+ *
+ * You can trigger a gesture event by calling inst.trigger("mygesture", event).
+ * The first param is the name of your gesture, the second the event argument
+ *
+ *
+ * Register gestures
+ * --------------------
+ * When an gesture is added to the Hammer.gestures object, it is auto registered
+ * at the setup of the first Hammer instance. You can also call Hammer.detection.register
+ * manually and pass your gesture object as a param
+ *
+ */
+
+/**
+ * Hold
+ * Touch stays at the same place for x time
+ * @events hold
+ */
+Hammer.gestures.Hold = {
+ name: 'hold',
+ index: 10,
+ defaults: {
+ hold_timeout : 500,
+ hold_threshold : 1
+ },
+ timer: null,
+ handler: function holdGesture(ev, inst) {
+ switch(ev.eventType) {
+ case Hammer.EVENT_START:
+ // clear any running timers
+ clearTimeout(this.timer);
+
+ // set the gesture so we can check in the timeout if it still is
+ Hammer.detection.current.name = this.name;
+
+ // set timer and if after the timeout it still is hold,
+ // we trigger the hold event
+ this.timer = setTimeout(function() {
+ if(Hammer.detection.current.name == 'hold') {
+ inst.trigger('hold', ev);
+ }
+ }, inst.options.hold_timeout);
+ break;
+
+ // when you move or end we clear the timer
+ case Hammer.EVENT_MOVE:
+ if(ev.distance > inst.options.hold_threshold) {
+ clearTimeout(this.timer);
+ }
+ break;
+
+ case Hammer.EVENT_END:
+ clearTimeout(this.timer);
+ break;
+ }
+ }
+};
+
+
+/**
+ * Tap/DoubleTap
+ * Quick touch at a place or double at the same place
+ * @events tap, doubletap
+ */
+Hammer.gestures.Tap = {
+ name: 'tap',
+ index: 100,
+ defaults: {
+ tap_max_touchtime : 250,
+ tap_max_distance : 10,
+ tap_always : true,
+ doubletap_distance : 20,
+ doubletap_interval : 300
+ },
+ handler: function tapGesture(ev, inst) {
+ if(ev.eventType == Hammer.EVENT_END) {
+ // previous gesture, for the double tap since these are two different gesture detections
+ var prev = Hammer.detection.previous,
+ did_doubletap = false;
+
+ // when the touchtime is higher then the max touch time
+ // or when the moving distance is too much
+ if(ev.deltaTime > inst.options.tap_max_touchtime ||
+ ev.distance > inst.options.tap_max_distance) {
+ return;
+ }
+
+ // check if double tap
+ if(prev && prev.name == 'tap' &&
+ (ev.timeStamp - prev.lastEvent.timeStamp) < inst.options.doubletap_interval &&
+ ev.distance < inst.options.doubletap_distance) {
+ inst.trigger('doubletap', ev);
+ did_doubletap = true;
+ }
+
+ // do a single tap
+ if(!did_doubletap || inst.options.tap_always) {
+ Hammer.detection.current.name = 'tap';
+ inst.trigger(Hammer.detection.current.name, ev);
+ }
+ }
+ }
+};
+
+
+/**
+ * Swipe
+ * triggers swipe events when the end velocity is above the threshold
+ * @events swipe, swipeleft, swiperight, swipeup, swipedown
+ */
+Hammer.gestures.Swipe = {
+ name: 'swipe',
+ index: 40,
+ defaults: {
+ // set 0 for unlimited, but this can conflict with transform
+ swipe_max_touches : 1,
+ swipe_velocity : 0.7
+ },
+ handler: function swipeGesture(ev, inst) {
+ if(ev.eventType == Hammer.EVENT_END) {
+ // max touches
+ if(inst.options.swipe_max_touches > 0 &&
+ ev.touches.length > inst.options.swipe_max_touches) {
+ return;
+ }
+
+ // when the distance we moved is too small we skip this gesture
+ // or we can be already in dragging
+ if(ev.velocityX > inst.options.swipe_velocity ||
+ ev.velocityY > inst.options.swipe_velocity) {
+ // trigger swipe events
+ inst.trigger(this.name, ev);
+ inst.trigger(this.name + ev.direction, ev);
+ }
+ }
+ }
+};
+
+
+/**
+ * Drag
+ * Move with x fingers (default 1) around on the page. Blocking the scrolling when
+ * moving left and right is a good practice. When all the drag events are blocking
+ * you disable scrolling on that area.
+ * @events drag, drapleft, dragright, dragup, dragdown
+ */
+Hammer.gestures.Drag = {
+ name: 'drag',
+ index: 50,
+ defaults: {
+ drag_min_distance : 10,
+ // set 0 for unlimited, but this can conflict with transform
+ drag_max_touches : 1,
+ // prevent default browser behavior when dragging occurs
+ // be careful with it, it makes the element a blocking element
+ // when you are using the drag gesture, it is a good practice to set this true
+ drag_block_horizontal : false,
+ drag_block_vertical : false,
+ // drag_lock_to_axis keeps the drag gesture on the axis that it started on,
+ // It disallows vertical directions if the initial direction was horizontal, and vice versa.
+ drag_lock_to_axis : false,
+ // drag lock only kicks in when distance > drag_lock_min_distance
+ // This way, locking occurs only when the distance has become large enough to reliably determine the direction
+ drag_lock_min_distance : 25
+ },
+ triggered: false,
+ handler: function dragGesture(ev, inst) {
+ // current gesture isnt drag, but dragged is true
+ // this means an other gesture is busy. now call dragend
+ if(Hammer.detection.current.name != this.name && this.triggered) {
+ inst.trigger(this.name +'end', ev);
+ this.triggered = false;
+ return;
+ }
+
+ // max touches
+ if(inst.options.drag_max_touches > 0 &&
+ ev.touches.length > inst.options.drag_max_touches) {
+ return;
+ }
+
+ switch(ev.eventType) {
+ case Hammer.EVENT_START:
+ this.triggered = false;
+ break;
+
+ case Hammer.EVENT_MOVE:
+ // when the distance we moved is too small we skip this gesture
+ // or we can be already in dragging
+ if(ev.distance < inst.options.drag_min_distance &&
+ Hammer.detection.current.name != this.name) {
+ return;
+ }
+
+ // we are dragging!
+ Hammer.detection.current.name = this.name;
+
+ // lock drag to axis?
+ if(Hammer.detection.current.lastEvent.drag_locked_to_axis || (inst.options.drag_lock_to_axis && inst.options.drag_lock_min_distance<=ev.distance)) {
+ ev.drag_locked_to_axis = true;
+ }
+ var last_direction = Hammer.detection.current.lastEvent.direction;
+ if(ev.drag_locked_to_axis && last_direction !== ev.direction) {
+ // keep direction on the axis that the drag gesture started on
+ if(Hammer.utils.isVertical(last_direction)) {
+ ev.direction = (ev.deltaY < 0) ? Hammer.DIRECTION_UP : Hammer.DIRECTION_DOWN;
+ }
+ else {
+ ev.direction = (ev.deltaX < 0) ? Hammer.DIRECTION_LEFT : Hammer.DIRECTION_RIGHT;
+ }
+ }
+
+ // first time, trigger dragstart event
+ if(!this.triggered) {
+ inst.trigger(this.name +'start', ev);
+ this.triggered = true;
+ }
+
+ // trigger normal event
+ inst.trigger(this.name, ev);
+
+ // direction event, like dragdown
+ inst.trigger(this.name + ev.direction, ev);
+
+ // block the browser events
+ if( (inst.options.drag_block_vertical && Hammer.utils.isVertical(ev.direction)) ||
+ (inst.options.drag_block_horizontal && !Hammer.utils.isVertical(ev.direction))) {
+ ev.preventDefault();
+ }
+ break;
+
+ case Hammer.EVENT_END:
+ // trigger dragend
+ if(this.triggered) {
+ inst.trigger(this.name +'end', ev);
+ }
+
+ this.triggered = false;
+ break;
+ }
+ }
+};
+
+
+/**
+ * Transform
+ * User want to scale or rotate with 2 fingers
+ * @events transform, pinch, pinchin, pinchout, rotate
+ */
+Hammer.gestures.Transform = {
+ name: 'transform',
+ index: 45,
+ defaults: {
+ // factor, no scale is 1, zoomin is to 0 and zoomout until higher then 1
+ transform_min_scale : 0.01,
+ // rotation in degrees
+ transform_min_rotation : 1,
+ // prevent default browser behavior when two touches are on the screen
+ // but it makes the element a blocking element
+ // when you are using the transform gesture, it is a good practice to set this true
+ transform_always_block : false
+ },
+ triggered: false,
+ handler: function transformGesture(ev, inst) {
+ // current gesture isnt drag, but dragged is true
+ // this means an other gesture is busy. now call dragend
+ if(Hammer.detection.current.name != this.name && this.triggered) {
+ inst.trigger(this.name +'end', ev);
+ this.triggered = false;
+ return;
+ }
+
+ // atleast multitouch
+ if(ev.touches.length < 2) {
+ return;
+ }
+
+ // prevent default when two fingers are on the screen
+ if(inst.options.transform_always_block) {
+ ev.preventDefault();
+ }
+
+ switch(ev.eventType) {
+ case Hammer.EVENT_START:
+ this.triggered = false;
+ break;
+
+ case Hammer.EVENT_MOVE:
+ var scale_threshold = Math.abs(1-ev.scale);
+ var rotation_threshold = Math.abs(ev.rotation);
+
+ // when the distance we moved is too small we skip this gesture
+ // or we can be already in dragging
+ if(scale_threshold < inst.options.transform_min_scale &&
+ rotation_threshold < inst.options.transform_min_rotation) {
+ return;
+ }
+
+ // we are transforming!
+ Hammer.detection.current.name = this.name;
+
+ // first time, trigger dragstart event
+ if(!this.triggered) {
+ inst.trigger(this.name +'start', ev);
+ this.triggered = true;
+ }
+
+ inst.trigger(this.name, ev); // basic transform event
+
+ // trigger rotate event
+ if(rotation_threshold > inst.options.transform_min_rotation) {
+ inst.trigger('rotate', ev);
+ }
+
+ // trigger pinch event
+ if(scale_threshold > inst.options.transform_min_scale) {
+ inst.trigger('pinch', ev);
+ inst.trigger('pinch'+ ((ev.scale < 1) ? 'in' : 'out'), ev);
+ }
+ break;
+
+ case Hammer.EVENT_END:
+ // trigger dragend
+ if(this.triggered) {
+ inst.trigger(this.name +'end', ev);
+ }
+
+ this.triggered = false;
+ break;
+ }
+ }
+};
+
+
+/**
+ * Touch
+ * Called as first, tells the user has touched the screen
+ * @events touch
+ */
+Hammer.gestures.Touch = {
+ name: 'touch',
+ index: -Infinity,
+ defaults: {
+ // call preventDefault at touchstart, and makes the element blocking by
+ // disabling the scrolling of the page, but it improves gestures like
+ // transforming and dragging.
+ // be careful with using this, it can be very annoying for users to be stuck
+ // on the page
+ prevent_default: false,
+
+ // disable mouse events, so only touch (or pen!) input triggers events
+ prevent_mouseevents: false
+ },
+ handler: function touchGesture(ev, inst) {
+ if(inst.options.prevent_mouseevents && ev.pointerType == Hammer.POINTER_MOUSE) {
+ ev.stopDetect();
+ return;
+ }
+
+ if(inst.options.prevent_default) {
+ ev.preventDefault();
+ }
+
+ if(ev.eventType == Hammer.EVENT_START) {
+ inst.trigger(this.name, ev);
+ }
+ }
+};
+
+
+/**
+ * Release
+ * Called as last, tells the user has released the screen
+ * @events release
+ */
+Hammer.gestures.Release = {
+ name: 'release',
+ index: Infinity,
+ handler: function releaseGesture(ev, inst) {
+ if(ev.eventType == Hammer.EVENT_END) {
+ inst.trigger(this.name, ev);
+ }
+ }
+};
+
+// node export
+if(typeof module === 'object' && typeof module.exports === 'object'){
+ module.exports = Hammer;
+}
+// just window export
+else {
+ window.Hammer = Hammer;
+
+ // requireJS module definition
+ if(typeof window.define === 'function' && window.define.amd) {
+ window.define('hammer', [], function() {
+ return Hammer;
+ });
+ }
+}
+})(this);
+},{}],3:[function(require,module,exports){
+//! moment.js
+//! version : 2.5.0
+//! authors : Tim Wood, Iskren Chernev, Moment.js contributors
+//! license : MIT
+//! momentjs.com
+
+(function (undefined) {
+
+ /************************************
+ Constants
+ ************************************/
+
+ var moment,
+ VERSION = "2.5.0",
+ global = this,
+ round = Math.round,
+ i,
+
+ YEAR = 0,
+ MONTH = 1,
+ DATE = 2,
+ HOUR = 3,
+ MINUTE = 4,
+ SECOND = 5,
+ MILLISECOND = 6,
+
+ // internal storage for language config files
+ languages = {},
+
+ // check for nodeJS
+ hasModule = (typeof module !== 'undefined' && module.exports && typeof require !== 'undefined'),
+
+ // ASP.NET json date format regex
+ aspNetJsonRegex = /^\/?Date\((\-?\d+)/i,
+ aspNetTimeSpanJsonRegex = /(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,
+
+ // from http://docs.closure-library.googlecode.com/git/closure_goog_date_date.js.source.html
+ // somewhat more in line with 4.4.3.2 2004 spec, but allows decimal anywhere
+ isoDurationRegex = /^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/,
+
+ // format tokens
+ formattingTokens = /(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|X|zz?|ZZ?|.)/g,
+ localFormattingTokens = /(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,
+
+ // parsing token regexes
+ parseTokenOneOrTwoDigits = /\d\d?/, // 0 - 99
+ parseTokenOneToThreeDigits = /\d{1,3}/, // 0 - 999
+ parseTokenOneToFourDigits = /\d{1,4}/, // 0 - 9999
+ parseTokenOneToSixDigits = /[+\-]?\d{1,6}/, // -999,999 - 999,999
+ parseTokenDigits = /\d+/, // nonzero number of digits
+ parseTokenWord = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i, // any word (or two) characters or numbers including two/three word month in arabic.
+ parseTokenTimezone = /Z|[\+\-]\d\d:?\d\d/gi, // +00:00 -00:00 +0000 -0000 or Z
+ parseTokenT = /T/i, // T (ISO separator)
+ parseTokenTimestampMs = /[\+\-]?\d+(\.\d{1,3})?/, // 123456789 123456789.123
+
+ //strict parsing regexes
+ parseTokenOneDigit = /\d/, // 0 - 9
+ parseTokenTwoDigits = /\d\d/, // 00 - 99
+ parseTokenThreeDigits = /\d{3}/, // 000 - 999
+ parseTokenFourDigits = /\d{4}/, // 0000 - 9999
+ parseTokenSixDigits = /[+\-]?\d{6}/, // -999,999 - 999,999
+
+ // iso 8601 regex
+ // 0000-00-00 0000-W00 or 0000-W00-0 + T + 00 or 00:00 or 00:00:00 or 00:00:00.000 + +00:00 or +0000 or +00)
+ isoRegex = /^\s*\d{4}-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/,
+
+ isoFormat = 'YYYY-MM-DDTHH:mm:ssZ',
+
+ isoDates = [
+ 'YYYY-MM-DD',
+ 'GGGG-[W]WW',
+ 'GGGG-[W]WW-E',
+ 'YYYY-DDD'
+ ],
+
+ // iso time formats and regexes
+ isoTimes = [
+ ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d{1,3}/],
+ ['HH:mm:ss', /(T| )\d\d:\d\d:\d\d/],
+ ['HH:mm', /(T| )\d\d:\d\d/],
+ ['HH', /(T| )\d\d/]
+ ],
+
+ // timezone chunker "+10:00" > ["10", "00"] or "-1530" > ["-15", "30"]
+ parseTimezoneChunker = /([\+\-]|\d\d)/gi,
+
+ // getter and setter names
+ proxyGettersAndSetters = 'Date|Hours|Minutes|Seconds|Milliseconds'.split('|'),
+ unitMillisecondFactors = {
+ 'Milliseconds' : 1,
+ 'Seconds' : 1e3,
+ 'Minutes' : 6e4,
+ 'Hours' : 36e5,
+ 'Days' : 864e5,
+ 'Months' : 2592e6,
+ 'Years' : 31536e6
+ },
+
+ unitAliases = {
+ ms : 'millisecond',
+ s : 'second',
+ m : 'minute',
+ h : 'hour',
+ d : 'day',
+ D : 'date',
+ w : 'week',
+ W : 'isoWeek',
+ M : 'month',
+ y : 'year',
+ DDD : 'dayOfYear',
+ e : 'weekday',
+ E : 'isoWeekday',
+ gg: 'weekYear',
+ GG: 'isoWeekYear'
+ },
+
+ camelFunctions = {
+ dayofyear : 'dayOfYear',
+ isoweekday : 'isoWeekday',
+ isoweek : 'isoWeek',
+ weekyear : 'weekYear',
+ isoweekyear : 'isoWeekYear'
+ },
+
+ // format function strings
+ formatFunctions = {},
+
+ // tokens to ordinalize and pad
+ ordinalizeTokens = 'DDD w W M D d'.split(' '),
+ paddedTokens = 'M D H h m s w W'.split(' '),
+
+ formatTokenFunctions = {
+ M : function () {
+ return this.month() + 1;
+ },
+ MMM : function (format) {
+ return this.lang().monthsShort(this, format);
+ },
+ MMMM : function (format) {
+ return this.lang().months(this, format);
+ },
+ D : function () {
+ return this.date();
+ },
+ DDD : function () {
+ return this.dayOfYear();
+ },
+ d : function () {
+ return this.day();
+ },
+ dd : function (format) {
+ return this.lang().weekdaysMin(this, format);
+ },
+ ddd : function (format) {
+ return this.lang().weekdaysShort(this, format);
+ },
+ dddd : function (format) {
+ return this.lang().weekdays(this, format);
+ },
+ w : function () {
+ return this.week();
+ },
+ W : function () {
+ return this.isoWeek();
+ },
+ YY : function () {
+ return leftZeroFill(this.year() % 100, 2);
+ },
+ YYYY : function () {
+ return leftZeroFill(this.year(), 4);
+ },
+ YYYYY : function () {
+ return leftZeroFill(this.year(), 5);
+ },
+ YYYYYY : function () {
+ var y = this.year(), sign = y >= 0 ? '+' : '-';
+ return sign + leftZeroFill(Math.abs(y), 6);
+ },
+ gg : function () {
+ return leftZeroFill(this.weekYear() % 100, 2);
+ },
+ gggg : function () {
+ return this.weekYear();
+ },
+ ggggg : function () {
+ return leftZeroFill(this.weekYear(), 5);
+ },
+ GG : function () {
+ return leftZeroFill(this.isoWeekYear() % 100, 2);
+ },
+ GGGG : function () {
+ return this.isoWeekYear();
+ },
+ GGGGG : function () {
+ return leftZeroFill(this.isoWeekYear(), 5);
+ },
+ e : function () {
+ return this.weekday();
+ },
+ E : function () {
+ return this.isoWeekday();
+ },
+ a : function () {
+ return this.lang().meridiem(this.hours(), this.minutes(), true);
+ },
+ A : function () {
+ return this.lang().meridiem(this.hours(), this.minutes(), false);
+ },
+ H : function () {
+ return this.hours();
+ },
+ h : function () {
+ return this.hours() % 12 || 12;
+ },
+ m : function () {
+ return this.minutes();
+ },
+ s : function () {
+ return this.seconds();
+ },
+ S : function () {
+ return toInt(this.milliseconds() / 100);
+ },
+ SS : function () {
+ return leftZeroFill(toInt(this.milliseconds() / 10), 2);
+ },
+ SSS : function () {
+ return leftZeroFill(this.milliseconds(), 3);
+ },
+ SSSS : function () {
+ return leftZeroFill(this.milliseconds(), 3);
+ },
+ Z : function () {
+ var a = -this.zone(),
+ b = "+";
+ if (a < 0) {
+ a = -a;
+ b = "-";
+ }
+ return b + leftZeroFill(toInt(a / 60), 2) + ":" + leftZeroFill(toInt(a) % 60, 2);
+ },
+ ZZ : function () {
+ var a = -this.zone(),
+ b = "+";
+ if (a < 0) {
+ a = -a;
+ b = "-";
+ }
+ return b + leftZeroFill(toInt(a / 60), 2) + leftZeroFill(toInt(a) % 60, 2);
+ },
+ z : function () {
+ return this.zoneAbbr();
+ },
+ zz : function () {
+ return this.zoneName();
+ },
+ X : function () {
+ return this.unix();
+ },
+ Q : function () {
+ return this.quarter();
+ }
+ },
+
+ lists = ['months', 'monthsShort', 'weekdays', 'weekdaysShort', 'weekdaysMin'];
+
+ function padToken(func, count) {
+ return function (a) {
+ return leftZeroFill(func.call(this, a), count);
+ };
+ }
+ function ordinalizeToken(func, period) {
+ return function (a) {
+ return this.lang().ordinal(func.call(this, a), period);
+ };
+ }
+
+ while (ordinalizeTokens.length) {
+ i = ordinalizeTokens.pop();
+ formatTokenFunctions[i + 'o'] = ordinalizeToken(formatTokenFunctions[i], i);
+ }
+ while (paddedTokens.length) {
+ i = paddedTokens.pop();
+ formatTokenFunctions[i + i] = padToken(formatTokenFunctions[i], 2);
+ }
+ formatTokenFunctions.DDDD = padToken(formatTokenFunctions.DDD, 3);
+
+
+ /************************************
+ Constructors
+ ************************************/
+
+ function Language() {
+
+ }
+
+ // Moment prototype object
+ function Moment(config) {
+ checkOverflow(config);
+ extend(this, config);
+ }
+
+ // Duration Constructor
+ function Duration(duration) {
+ var normalizedInput = normalizeObjectUnits(duration),
+ years = normalizedInput.year || 0,
+ months = normalizedInput.month || 0,
+ weeks = normalizedInput.week || 0,
+ days = normalizedInput.day || 0,
+ hours = normalizedInput.hour || 0,
+ minutes = normalizedInput.minute || 0,
+ seconds = normalizedInput.second || 0,
+ milliseconds = normalizedInput.millisecond || 0;
+
+ // representation for dateAddRemove
+ this._milliseconds = +milliseconds +
+ seconds * 1e3 + // 1000
+ minutes * 6e4 + // 1000 * 60
+ hours * 36e5; // 1000 * 60 * 60
+ // Because of dateAddRemove treats 24 hours as different from a
+ // day when working around DST, we need to store them separately
+ this._days = +days +
+ weeks * 7;
+ // It is impossible translate months into days without knowing
+ // which months you are are talking about, so we have to store
+ // it separately.
+ this._months = +months +
+ years * 12;
+
+ this._data = {};
+
+ this._bubble();
+ }
+
+ /************************************
+ Helpers
+ ************************************/
+
+
+ function extend(a, b) {
+ for (var i in b) {
+ if (b.hasOwnProperty(i)) {
+ a[i] = b[i];
+ }
+ }
+
+ if (b.hasOwnProperty("toString")) {
+ a.toString = b.toString;
+ }
+
+ if (b.hasOwnProperty("valueOf")) {
+ a.valueOf = b.valueOf;
+ }
+
+ return a;
+ }
+
+ function absRound(number) {
+ if (number < 0) {
+ return Math.ceil(number);
+ } else {
+ return Math.floor(number);
+ }
+ }
+
+ // left zero fill a number
+ // see http://jsperf.com/left-zero-filling for performance comparison
+ function leftZeroFill(number, targetLength, forceSign) {
+ var output = Math.abs(number) + '',
+ sign = number >= 0;
+
+ while (output.length < targetLength) {
+ output = '0' + output;
+ }
+ return (sign ? (forceSign ? '+' : '') : '-') + output;
+ }
+
+ // helper function for _.addTime and _.subtractTime
+ function addOrSubtractDurationFromMoment(mom, duration, isAdding, ignoreUpdateOffset) {
+ var milliseconds = duration._milliseconds,
+ days = duration._days,
+ months = duration._months,
+ minutes,
+ hours;
+
+ if (milliseconds) {
+ mom._d.setTime(+mom._d + milliseconds * isAdding);
+ }
+ // store the minutes and hours so we can restore them
+ if (days || months) {
+ minutes = mom.minute();
+ hours = mom.hour();
+ }
+ if (days) {
+ mom.date(mom.date() + days * isAdding);
+ }
+ if (months) {
+ mom.month(mom.month() + months * isAdding);
+ }
+ if (milliseconds && !ignoreUpdateOffset) {
+ moment.updateOffset(mom);
+ }
+ // restore the minutes and hours after possibly changing dst
+ if (days || months) {
+ mom.minute(minutes);
+ mom.hour(hours);
+ }
+ }
+
+ // check if is an array
+ function isArray(input) {
+ return Object.prototype.toString.call(input) === '[object Array]';
+ }
+
+ function isDate(input) {
+ return Object.prototype.toString.call(input) === '[object Date]' ||
+ input instanceof Date;
+ }
+
+ // compare two arrays, return the number of differences
+ function compareArrays(array1, array2, dontConvert) {
+ var len = Math.min(array1.length, array2.length),
+ lengthDiff = Math.abs(array1.length - array2.length),
+ diffs = 0,
+ i;
+ for (i = 0; i < len; i++) {
+ if ((dontConvert && array1[i] !== array2[i]) ||
+ (!dontConvert && toInt(array1[i]) !== toInt(array2[i]))) {
+ diffs++;
+ }
+ }
+ return diffs + lengthDiff;
+ }
+
+ function normalizeUnits(units) {
+ if (units) {
+ var lowered = units.toLowerCase().replace(/(.)s$/, '$1');
+ units = unitAliases[units] || camelFunctions[lowered] || lowered;
+ }
+ return units;
+ }
+
+ function normalizeObjectUnits(inputObject) {
+ var normalizedInput = {},
+ normalizedProp,
+ prop;
+
+ for (prop in inputObject) {
+ if (inputObject.hasOwnProperty(prop)) {
+ normalizedProp = normalizeUnits(prop);
+ if (normalizedProp) {
+ normalizedInput[normalizedProp] = inputObject[prop];
+ }
+ }
+ }
+
+ return normalizedInput;
+ }
+
+ function makeList(field) {
+ var count, setter;
+
+ if (field.indexOf('week') === 0) {
+ count = 7;
+ setter = 'day';
+ }
+ else if (field.indexOf('month') === 0) {
+ count = 12;
+ setter = 'month';
+ }
+ else {
+ return;
+ }
+
+ moment[field] = function (format, index) {
+ var i, getter,
+ method = moment.fn._lang[field],
+ results = [];
+
+ if (typeof format === 'number') {
+ index = format;
+ format = undefined;
+ }
+
+ getter = function (i) {
+ var m = moment().utc().set(setter, i);
+ return method.call(moment.fn._lang, m, format || '');
+ };
+
+ if (index != null) {
+ return getter(index);
+ }
+ else {
+ for (i = 0; i < count; i++) {
+ results.push(getter(i));
+ }
+ return results;
+ }
+ };
+ }
+
+ function toInt(argumentForCoercion) {
+ var coercedNumber = +argumentForCoercion,
+ value = 0;
+
+ if (coercedNumber !== 0 && isFinite(coercedNumber)) {
+ if (coercedNumber >= 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;
+ }
+
+ function normalizeLanguage(key) {
+ return key ? key.toLowerCase().replace('_', '-') : key;
+ }
+
+ // Return a moment from input, that is local/utc/zone equivalent to model.
+ function makeAs(input, model) {
+ return model._isUTC ? moment(input).zone(model._offset || 0) :
+ moment(input).local();
+ }
+
+ /************************************
+ Languages
+ ************************************/
+
+
+ extend(Language.prototype, {
+
+ set : function (config) {
+ var prop, i;
+ for (i in config) {
+ prop = config[i];
+ if (typeof prop === 'function') {
+ this[i] = prop;
+ } else {
+ this['_' + i] = prop;
+ }
+ }
+ },
+
+ _months : "January_February_March_April_May_June_July_August_September_October_November_December".split("_"),
+ months : function (m) {
+ return this._months[m.month()];
+ },
+
+ _monthsShort : "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),
+ monthsShort : function (m) {
+ return this._monthsShort[m.month()];
+ },
+
+ monthsParse : function (monthName) {
+ var i, mom, regex;
+
+ if (!this._monthsParse) {
+ this._monthsParse = [];
+ }
+
+ for (i = 0; i < 12; i++) {
+ // make the regex if we don't have it already
+ if (!this._monthsParse[i]) {
+ mom = moment.utc([2000, i]);
+ regex = '^' + this.months(mom, '') + '|^' + this.monthsShort(mom, '');
+ this._monthsParse[i] = new RegExp(regex.replace('.', ''), 'i');
+ }
+ // test the regex
+ if (this._monthsParse[i].test(monthName)) {
+ return i;
+ }
+ }
+ },
+
+ _weekdays : "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),
+ weekdays : function (m) {
+ return this._weekdays[m.day()];
+ },
+
+ _weekdaysShort : "Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),
+ weekdaysShort : function (m) {
+ return this._weekdaysShort[m.day()];
+ },
+
+ _weekdaysMin : "Su_Mo_Tu_We_Th_Fr_Sa".split("_"),
+ weekdaysMin : function (m) {
+ return this._weekdaysMin[m.day()];
+ },
+
+ weekdaysParse : function (weekdayName) {
+ var i, mom, regex;
+
+ if (!this._weekdaysParse) {
+ this._weekdaysParse = [];
+ }
+
+ for (i = 0; i < 7; i++) {
+ // make the regex if we don't have it already
+ if (!this._weekdaysParse[i]) {
+ mom = moment([2000, 1]).day(i);
+ regex = '^' + this.weekdays(mom, '') + '|^' + this.weekdaysShort(mom, '') + '|^' + this.weekdaysMin(mom, '');
+ this._weekdaysParse[i] = new RegExp(regex.replace('.', ''), 'i');
+ }
+ // test the regex
+ if (this._weekdaysParse[i].test(weekdayName)) {
+ return i;
+ }
+ }
+ },
+
+ _longDateFormat : {
+ LT : "h:mm A",
+ L : "MM/DD/YYYY",
+ LL : "MMMM D YYYY",
+ LLL : "MMMM D YYYY LT",
+ LLLL : "dddd, MMMM D YYYY LT"
+ },
+ longDateFormat : function (key) {
+ var output = this._longDateFormat[key];
+ if (!output && this._longDateFormat[key.toUpperCase()]) {
+ output = this._longDateFormat[key.toUpperCase()].replace(/MMMM|MM|DD|dddd/g, function (val) {
+ return val.slice(1);
+ });
+ this._longDateFormat[key] = output;
+ }
+ return output;
+ },
+
+ isPM : function (input) {
+ // IE8 Quirks Mode & IE7 Standards Mode do not allow accessing strings like arrays
+ // Using charAt should be more compatible.
+ return ((input + '').toLowerCase().charAt(0) === 'p');
+ },
+
+ _meridiemParse : /[ap]\.?m?\.?/i,
+ meridiem : function (hours, minutes, isLower) {
+ if (hours > 11) {
+ return isLower ? 'pm' : 'PM';
+ } else {
+ return isLower ? 'am' : 'AM';
+ }
+ },
+
+ _calendar : {
+ sameDay : '[Today at] LT',
+ nextDay : '[Tomorrow at] LT',
+ nextWeek : 'dddd [at] LT',
+ lastDay : '[Yesterday at] LT',
+ lastWeek : '[Last] dddd [at] LT',
+ sameElse : 'L'
+ },
+ calendar : function (key, mom) {
+ var output = this._calendar[key];
+ return typeof output === 'function' ? output.apply(mom) : output;
+ },
+
+ _relativeTime : {
+ future : "in %s",
+ past : "%s ago",
+ s : "a few seconds",
+ m : "a minute",
+ mm : "%d minutes",
+ h : "an hour",
+ hh : "%d hours",
+ d : "a day",
+ dd : "%d days",
+ M : "a month",
+ MM : "%d months",
+ y : "a year",
+ yy : "%d years"
+ },
+ relativeTime : function (number, withoutSuffix, string, isFuture) {
+ var output = this._relativeTime[string];
+ return (typeof output === 'function') ?
+ output(number, withoutSuffix, string, isFuture) :
+ output.replace(/%d/i, number);
+ },
+ pastFuture : function (diff, output) {
+ var format = this._relativeTime[diff > 0 ? 'future' : 'past'];
+ return typeof format === 'function' ? format(output) : format.replace(/%s/i, output);
+ },
+
+ ordinal : function (number) {
+ return this._ordinal.replace("%d", number);
+ },
+ _ordinal : "%d",
+
+ preparse : function (string) {
+ return string;
+ },
+
+ postformat : function (string) {
+ return string;
+ },
+
+ 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;
+ }
+ });
+
+ // Loads a language definition into the `languages` cache. The function
+ // takes a key and optionally values. If not in the browser and no values
+ // are provided, it will load the language file module. As a convenience,
+ // this function also returns the language values.
+ function loadLang(key, values) {
+ values.abbr = key;
+ if (!languages[key]) {
+ languages[key] = new Language();
+ }
+ languages[key].set(values);
+ return languages[key];
+ }
+
+ // Remove a language from the `languages` cache. Mostly useful in tests.
+ function unloadLang(key) {
+ delete languages[key];
+ }
+
+ // Determines which language definition to use and returns it.
+ //
+ // With no parameters, it will return the global language. If you
+ // pass in a language key, such as 'en', it will return the
+ // 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--;
+ }
+ i++;
+ }
+ return moment.fn._lang;
+ }
+
+ /************************************
+ Formatting
+ ************************************/
+
+
+ function removeFormattingTokens(input) {
+ if (input.match(/\[[\s\S]/)) {
+ return input.replace(/^\[|\]$/g, "");
+ }
+ return input.replace(/\\/g, "");
+ }
+
+ function makeFormatFunction(format) {
+ var array = format.match(formattingTokens), i, length;
+
+ for (i = 0, length = array.length; i < length; i++) {
+ if (formatTokenFunctions[array[i]]) {
+ array[i] = formatTokenFunctions[array[i]];
+ } else {
+ array[i] = removeFormattingTokens(array[i]);
+ }
+ }
+
+ return function (mom) {
+ var output = "";
+ for (i = 0; i < length; i++) {
+ output += array[i] instanceof Function ? array[i].call(mom, format) : array[i];
+ }
+ return output;
+ };
+ }
+
+ // 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]) {
+ formatFunctions[format] = makeFormatFunction(format);
+ }
+
+ return formatFunctions[format](m);
+ }
+
+ function expandFormat(format, lang) {
+ var i = 5;
+
+ function replaceLongDateFormatTokens(input) {
+ return lang.longDateFormat(input) || input;
+ }
+
+ localFormattingTokens.lastIndex = 0;
+ while (i >= 0 && localFormattingTokens.test(format)) {
+ format = format.replace(localFormattingTokens, replaceLongDateFormatTokens);
+ localFormattingTokens.lastIndex = 0;
+ i -= 1;
+ }
+
+ return format;
+ }
+
+
+ /************************************
+ Parsing
+ ************************************/
+
+
+ // get the regex to find the next token
+ function getParseRegexForToken(token, config) {
+ var a, strict = config._strict;
+ switch (token) {
+ case 'DDDD':
+ return parseTokenThreeDigits;
+ case 'YYYY':
+ case 'GGGG':
+ case 'gggg':
+ return strict ? parseTokenFourDigits : parseTokenOneToFourDigits;
+ case 'YYYYYY':
+ case 'YYYYY':
+ case 'GGGGG':
+ case 'ggggg':
+ return strict ? parseTokenSixDigits : parseTokenOneToSixDigits;
+ case 'S':
+ if (strict) { return parseTokenOneDigit; }
+ /* falls through */
+ case 'SS':
+ if (strict) { return parseTokenTwoDigits; }
+ /* falls through */
+ case 'SSS':
+ case 'DDD':
+ return strict ? parseTokenThreeDigits : parseTokenOneToThreeDigits;
+ case 'MMM':
+ case 'MMMM':
+ case 'dd':
+ case 'ddd':
+ case 'dddd':
+ return parseTokenWord;
+ case 'a':
+ case 'A':
+ return getLangDefinition(config._l)._meridiemParse;
+ case 'X':
+ return parseTokenTimestampMs;
+ case 'Z':
+ case 'ZZ':
+ 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':
+ case 'ss':
+ case 'ww':
+ case 'WW':
+ return strict ? parseTokenTwoDigits : parseTokenOneOrTwoDigits;
+ case 'M':
+ case 'D':
+ case 'd':
+ case 'H':
+ case 'h':
+ case 'm':
+ case 's':
+ case 'w':
+ case 'W':
+ case 'e':
+ case 'E':
+ return strict ? parseTokenOneDigit : parseTokenOneOrTwoDigits;
+ default :
+ a = new RegExp(regexpEscape(unescapeFormat(token.replace('\\', '')), "i"));
+ return a;
+ }
+ }
+
+ function timezoneMinutesFromString(string) {
+ string = string || "";
+ var possibleTzMatches = (string.match(parseTokenTimezone) || []),
+ tzChunk = possibleTzMatches[possibleTzMatches.length - 1] || [],
+ parts = (tzChunk + '').match(parseTimezoneChunker) || ['-', 0, 0],
+ minutes = +(parts[1] * 60) + toInt(parts[2]);
+
+ return parts[0] === '+' ? -minutes : minutes;
+ }
+
+ // function to convert string input to date
+ function addTimeToArrayFromToken(token, input, config) {
+ var a, datePartArray = config._a;
+
+ switch (token) {
+ // MONTH
+ case 'M' : // fall through to MM
+ case 'MM' :
+ if (input != null) {
+ datePartArray[MONTH] = toInt(input) - 1;
+ }
+ break;
+ case 'MMM' : // fall through to MMMM
+ case 'MMMM' :
+ 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;
+ } else {
+ config._pf.invalidMonth = input;
+ }
+ break;
+ // DAY OF MONTH
+ case 'D' : // fall through to DD
+ case 'DD' :
+ if (input != null) {
+ datePartArray[DATE] = toInt(input);
+ }
+ break;
+ // DAY OF YEAR
+ case 'DDD' : // fall through to DDDD
+ case 'DDDD' :
+ if (input != null) {
+ config._dayOfYear = toInt(input);
+ }
+
+ break;
+ // YEAR
+ case 'YY' :
+ datePartArray[YEAR] = toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
+ break;
+ case 'YYYY' :
+ case 'YYYYY' :
+ case 'YYYYYY' :
+ datePartArray[YEAR] = toInt(input);
+ break;
+ // AM / PM
+ case 'a' : // fall through to A
+ case 'A' :
+ config._isPm = getLangDefinition(config._l).isPM(input);
+ break;
+ // 24 HOUR
+ case 'H' : // fall through to hh
+ case 'HH' : // fall through to hh
+ case 'h' : // fall through to hh
+ case 'hh' :
+ datePartArray[HOUR] = toInt(input);
+ break;
+ // MINUTE
+ case 'm' : // fall through to mm
+ case 'mm' :
+ datePartArray[MINUTE] = toInt(input);
+ break;
+ // SECOND
+ case 's' : // fall through to ss
+ case 'ss' :
+ datePartArray[SECOND] = toInt(input);
+ break;
+ // MILLISECOND
+ case 'S' :
+ case 'SS' :
+ case 'SSS' :
+ case 'SSSS' :
+ datePartArray[MILLISECOND] = toInt(('0.' + input) * 1000);
+ break;
+ // UNIX TIMESTAMP WITH MS
+ case 'X':
+ config._d = new Date(parseFloat(input) * 1000);
+ break;
+ // TIMEZONE
+ case 'Z' : // fall through to ZZ
+ case 'ZZ' :
+ 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;
+ }
+ }
+
+ // convert an array to a date.
+ // 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;
+
+ 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) {
+ var int_val = parseInt(val, 10);
+ return val ?
+ (val.length < 3 ? (int_val > 68 ? 1900 + int_val : 2000 + int_val) : int_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
+ for (i = 0; i < 3 && config._a[i] == null; ++i) {
+ config._a[i] = input[i] = currentDate[i];
+ }
+
+ // Zero out whatever was not defaulted, including time
+ for (; i < 7; i++) {
+ config._a[i] = input[i] = (config._a[i] == null) ? (i === 2 ? 1 : 0) : config._a[i];
+ }
+
+ // 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);
+
+ config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
+ }
+
+ function dateFromObject(config) {
+ var normalizedInput;
+
+ if (config._d) {
+ return;
+ }
+
+ normalizedInput = normalizeObjectUnits(config._i);
+ config._a = [
+ normalizedInput.year,
+ normalizedInput.month,
+ normalizedInput.day,
+ normalizedInput.hour,
+ normalizedInput.minute,
+ normalizedInput.second,
+ normalizedInput.millisecond
+ ];
+
+ dateFromConfig(config);
+ }
+
+ function currentDateArray(config) {
+ var now = new Date();
+ if (config._useUTC) {
+ return [
+ now.getUTCFullYear(),
+ now.getUTCMonth(),
+ now.getUTCDate()
+ ];
+ } else {
+ return [now.getFullYear(), now.getMonth(), now.getDate()];
+ }
+ }
+
+ // 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;
+
+ tokens = expandFormat(config._f, lang).match(formattingTokens) || [];
+
+ for (i = 0; i < tokens.length; i++) {
+ token = tokens[i];
+ parsedInput = (string.match(getParseRegexForToken(token, config)) || [])[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);
+ }
+ }
+
+ // add remaining unparsed input length to the string
+ config._pf.charsLeftOver = stringLength - totalParsedInputLength;
+ if (string.length > 0) {
+ config._pf.unusedInput.push(string);
+ }
+
+ // handle am pm
+ if (config._isPm && config._a[HOUR] < 12) {
+ config._a[HOUR] += 12;
+ }
+ // if is 12 am, change hours to 0
+ if (config._isPm === false && config._a[HOUR] === 12) {
+ config._a[HOUR] = 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, '\\$&');
+ }
+
+ // date from string and array of format strings
+ function makeDateFromStringAndArray(config) {
+ var tempConfig,
+ bestMoment,
+
+ scoreToBeat,
+ 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);
+
+ 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;
+
+ tempConfig._pf.score = currentScore;
+
+ if (scoreToBeat == null || currentScore < scoreToBeat) {
+ scoreToBeat = currentScore;
+ bestMoment = tempConfig;
+ }
+ }
+
+ extend(config, bestMoment || tempConfig);
+ }
+
+ // date from iso format
+ function makeDateFromString(config) {
+ var i,
+ string = config._i,
+ 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;
+ }
+ }
+ for (i = 0; i < 4; i++) {
+ if (isoTimes[i][1].exec(string)) {
+ config._f += isoTimes[i][0];
+ break;
+ }
+ }
+ if (string.match(parseTokenTimezone)) {
+ config._f += "Z";
+ }
+ makeDateFromStringAndFormat(config);
+ }
+ else {
+ config._d = new Date(string);
+ }
+ }
+
+ function makeDateFromInput(config) {
+ var input = config._i,
+ matched = aspNetJsonRegex.exec(input);
+
+ if (input === undefined) {
+ config._d = new Date();
+ } else if (matched) {
+ config._d = new Date(+matched[1]);
+ } else if (typeof input === 'string') {
+ makeDateFromString(config);
+ } else if (isArray(input)) {
+ config._a = input.slice(0);
+ dateFromConfig(config);
+ } else if (isDate(input)) {
+ config._d = new Date(+input);
+ } else if (typeof(input) === 'object') {
+ dateFromObject(config);
+ } else {
+ config._d = new Date(input);
+ }
+ }
+
+ 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
+ ************************************/
+
+
+ // helper function for moment.fn.from, moment.fn.fromNow, and moment.duration.fn.humanize
+ function substituteTimeAgo(string, number, withoutSuffix, isFuture, lang) {
+ return lang.relativeTime(number || 1, !!withoutSuffix, string, isFuture);
+ }
+
+ function relativeTime(milliseconds, withoutSuffix, lang) {
+ var seconds = round(Math.abs(milliseconds) / 1000),
+ minutes = round(seconds / 60),
+ hours = round(minutes / 60),
+ days = round(hours / 24),
+ years = round(days / 365),
+ args = seconds < 45 && ['s', seconds] ||
+ minutes === 1 && ['m'] ||
+ minutes < 45 && ['mm', minutes] ||
+ hours === 1 && ['h'] ||
+ hours < 22 && ['hh', hours] ||
+ days === 1 && ['d'] ||
+ days <= 25 && ['dd', days] ||
+ days <= 45 && ['M'] ||
+ days < 345 && ['MM', round(days / 30)] ||
+ years === 1 && ['y'] || ['yy', years];
+ args[2] = withoutSuffix;
+ args[3] = milliseconds > 0;
+ args[4] = lang;
+ return substituteTimeAgo.apply({}, args);
+ }
+
+
+ /************************************
+ Week of Year
+ ************************************/
+
+
+ // firstDayOfWeek 0 = sun, 6 = sat
+ // the day of the week that starts the week
+ // (usually sunday or monday)
+ // firstDayOfWeekOfYear 0 = sun, 6 = sat
+ // the first week is the week that contains the first
+ // of this day of the week
+ // (eg. ISO weeks use thursday (4))
+ function weekOfYear(mom, firstDayOfWeek, firstDayOfWeekOfYear) {
+ var end = firstDayOfWeekOfYear - firstDayOfWeek,
+ daysToDayOfWeek = firstDayOfWeekOfYear - mom.day(),
+ adjustedMoment;
+
+
+ if (daysToDayOfWeek > end) {
+ daysToDayOfWeek -= 7;
+ }
+
+ if (daysToDayOfWeek < end - 7) {
+ daysToDayOfWeek += 7;
+ }
+
+ adjustedMoment = moment(mom).add('d', daysToDayOfWeek);
+ return {
+ week: Math.ceil(adjustedMoment.dayOfYear() / 7),
+ year: adjustedMoment.year()
+ };
+ }
+
+ //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) {
+ // The only solid way to create an iso date from year is to use
+ // a string format (Date.UTC handles only years > 1900). Don't ask why
+ // it doesn't need Z at the end.
+ var d = new Date(leftZeroFill(year, 6, true) + '-01-01').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
+ ************************************/
+
+ function makeMoment(config) {
+ var input = config._i,
+ format = config._f;
+
+ if (typeof config._pf === 'undefined') {
+ initializeParsingFlags(config);
+ }
+
+ if (input === null) {
+ return moment.invalid({nullInput: true});
+ }
+
+ if (typeof input === 'string') {
+ config._i = input = getLangDefinition().preparse(input);
+ }
+
+ if (moment.isMoment(input)) {
+ config = extend({}, input);
+
+ config._d = new Date(+input._d);
+ } else if (format) {
+ if (isArray(format)) {
+ makeDateFromStringAndArray(config);
+ } else {
+ makeDateFromStringAndFormat(config);
+ }
+ } else {
+ makeDateFromInput(config);
+ }
+
+ return new Moment(config);
+ }
+
+ moment = function (input, format, lang, strict) {
+ if (typeof(lang) === "boolean") {
+ strict = lang;
+ lang = undefined;
+ }
+ 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({
+ _useUTC : true,
+ _isUTC : true,
+ _l : lang,
+ _i : input,
+ _f : format,
+ _strict : strict
+ }).utc();
+
+ return m;
+ };
+
+ // creating with unix timestamp (in seconds)
+ moment.unix = function (input) {
+ return moment(input * 1000);
+ };
+
+ // duration
+ moment.duration = function (input, key) {
+ var duration = input,
+ // matching against regexp is expensive, do it on demand
+ match = null,
+ sign,
+ ret,
+ parseIso;
+
+ if (moment.isDuration(input)) {
+ duration = {
+ ms: input._milliseconds,
+ d: input._days,
+ M: input._months
+ };
+ } else if (typeof input === 'number') {
+ duration = {};
+ if (key) {
+ duration[key] = input;
+ } else {
+ duration.milliseconds = input;
+ }
+ } else if (!!(match = aspNetTimeSpanJsonRegex.exec(input))) {
+ sign = (match[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])
+ };
+ }
+
+ ret = new Duration(duration);
+
+ if (moment.isDuration(input) && input.hasOwnProperty('_lang')) {
+ ret._lang = input._lang;
+ }
+
+ return ret;
+ };
+
+ // version number
+ moment.version = VERSION;
+
+ // default format
+ moment.defaultFormat = isoFormat;
+
+ // This function will be called whenever a moment is mutated.
+ // It is intended to keep the offset in sync with the timezone.
+ moment.updateOffset = function () {};
+
+ // This function will load languages and then set the global language. If
+ // 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;
+ }
+ if (values) {
+ loadLang(normalizeLanguage(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;
+ };
+
+ // returns language data
+ moment.langData = function (key) {
+ if (key && key._lang && key._lang._abbr) {
+ key = key._lang._abbr;
+ }
+ return getLangDefinition(key);
+ };
+
+ // compare moment object
+ moment.isMoment = function (obj) {
+ return obj instanceof Moment;
+ };
+
+ // for typechecking Duration objects
+ moment.isDuration = function (obj) {
+ 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
+ ************************************/
+
+
+ extend(moment.fn = Moment.prototype, {
+
+ clone : function () {
+ return moment(this);
+ },
+
+ valueOf : function () {
+ return +this._d + ((this._offset || 0) * 60000);
+ },
+
+ unix : function () {
+ return Math.floor(+this / 1000);
+ },
+
+ toString : function () {
+ return this.clone().lang('en').format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ");
+ },
+
+ toDate : function () {
+ return this._offset ? new Date(+this) : this._d;
+ },
+
+ toISOString : function () {
+ var m = moment(this).utc();
+ if (0 < m.year() && m.year() <= 9999) {
+ return formatMoment(m, 'YYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
+ } else {
+ return formatMoment(m, 'YYYYYY-MM-DD[T]HH:mm:ss.SSS[Z]');
+ }
+ },
+
+ toArray : function () {
+ var m = this;
+ return [
+ m.year(),
+ m.month(),
+ m.date(),
+ m.hours(),
+ m.minutes(),
+ m.seconds(),
+ m.milliseconds()
+ ];
+ },
+
+ 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;
+ }
+
+ return false;
+ },
+
+ parsingFlags : function () {
+ return extend({}, this._pf);
+ },
+
+ invalidAt: function () {
+ return this._pf.overflow;
+ },
+
+ utc : function () {
+ return this.zone(0);
+ },
+
+ local : function () {
+ this.zone(0);
+ this._isUTC = false;
+ return this;
+ },
+
+ format : function (inputString) {
+ var output = formatMoment(this, inputString || moment.defaultFormat);
+ return this.lang().postformat(output);
+ },
+
+ add : function (input, val) {
+ var dur;
+ // switch args to support add('s', 1) and add(1, 's')
+ if (typeof input === 'string') {
+ dur = moment.duration(+val, input);
+ } else {
+ dur = moment.duration(input, val);
+ }
+ addOrSubtractDurationFromMoment(this, dur, 1);
+ return this;
+ },
+
+ subtract : function (input, val) {
+ var dur;
+ // switch args to support subtract('s', 1) and subtract(1, 's')
+ if (typeof input === 'string') {
+ dur = moment.duration(+val, input);
+ } else {
+ dur = moment.duration(input, val);
+ }
+ addOrSubtractDurationFromMoment(this, dur, -1);
+ return this;
+ },
+
+ diff : function (input, units, asFloat) {
+ var that = makeAs(input, this),
+ zoneDiff = (this.zone() - that.zone()) * 6e4,
+ diff, output;
+
+ units = normalizeUnits(units);
+
+ if (units === 'year' || units === 'month') {
+ // average number of days in the months in the given dates
+ diff = (this.daysInMonth() + that.daysInMonth()) * 432e5; // 24 * 60 * 60 * 1000 / 2
+ // difference in months
+ output = ((this.year() - that.year()) * 12) + (this.month() - that.month());
+ // adjust by taking difference in days, average number of days
+ // and dst in the given months.
+ output += ((this - moment(this).startOf('month')) -
+ (that - moment(that).startOf('month'))) / diff;
+ // same as above but with zones, to negate all dst
+ output -= ((this.zone() - moment(this).startOf('month').zone()) -
+ (that.zone() - moment(that).startOf('month').zone())) * 6e4 / diff;
+ if (units === 'year') {
+ output = output / 12;
+ }
+ } else {
+ diff = (this - that);
+ output = units === 'second' ? diff / 1e3 : // 1000
+ units === 'minute' ? diff / 6e4 : // 1000 * 60
+ units === 'hour' ? diff / 36e5 : // 1000 * 60 * 60
+ units === 'day' ? (diff - zoneDiff) / 864e5 : // 1000 * 60 * 60 * 24, negate dst
+ units === 'week' ? (diff - zoneDiff) / 6048e5 : // 1000 * 60 * 60 * 24 * 7, negate dst
+ diff;
+ }
+ return asFloat ? output : absRound(output);
+ },
+
+ from : function (time, withoutSuffix) {
+ return moment.duration(this.diff(time)).lang(this.lang()._abbr).humanize(!withoutSuffix);
+ },
+
+ fromNow : function (withoutSuffix) {
+ return this.from(moment(), withoutSuffix);
+ },
+
+ calendar : function () {
+ // We want to compare the start of today, vs this.
+ // Getting start-of-today depends on whether we're zone'd or not.
+ var sod = makeAs(moment(), this).startOf('day'),
+ diff = this.diff(sod, 'days', true),
+ format = diff < -6 ? 'sameElse' :
+ diff < -1 ? 'lastWeek' :
+ diff < 0 ? 'lastDay' :
+ diff < 1 ? 'sameDay' :
+ diff < 2 ? 'nextDay' :
+ diff < 7 ? 'nextWeek' : 'sameElse';
+ return this.format(this.lang().calendar(format, this));
+ },
+
+ isLeapYear : function () {
+ return isLeapYear(this.year());
+ },
+
+ isDST : function () {
+ return (this.zone() < this.clone().month(0).zone() ||
+ this.zone() < this.clone().month(5).zone());
+ },
+
+ day : function (input) {
+ var day = this._isUTC ? this._d.getUTCDay() : this._d.getDay();
+ if (input != null) {
+ input = parseWeekday(input, this.lang());
+ return this.add({ d : input - day });
+ } else {
+ return day;
+ }
+ },
+
+ month : function (input) {
+ var utc = this._isUTC ? 'UTC' : '',
+ dayOfMonth;
+
+ if (input != null) {
+ if (typeof input === 'string') {
+ input = this.lang().monthsParse(input);
+ if (typeof input !== 'number') {
+ return this;
+ }
+ }
+
+ dayOfMonth = this.date();
+ this.date(1);
+ this._d['set' + utc + 'Month'](input);
+ this.date(Math.min(dayOfMonth, this.daysInMonth()));
+
+ moment.updateOffset(this);
+ return this;
+ } else {
+ return this._d['get' + utc + 'Month']();
+ }
+ },
+
+ startOf: function (units) {
+ units = normalizeUnits(units);
+ // the following switch intentionally omits break keywords
+ // to utilize falling through the cases.
+ switch (units) {
+ case 'year':
+ this.month(0);
+ /* falls through */
+ case 'month':
+ this.date(1);
+ /* falls through */
+ case 'week':
+ case 'isoWeek':
+ case 'day':
+ this.hours(0);
+ /* falls through */
+ case 'hour':
+ this.minutes(0);
+ /* falls through */
+ case 'minute':
+ this.seconds(0);
+ /* falls through */
+ case 'second':
+ this.milliseconds(0);
+ /* falls through */
+ }
+
+ // weeks are a special case
+ if (units === 'week') {
+ this.weekday(0);
+ } else if (units === 'isoWeek') {
+ this.isoWeekday(1);
+ }
+
+ return this;
+ },
+
+ endOf: function (units) {
+ units = normalizeUnits(units);
+ return this.startOf(units).add((units === 'isoWeek' ? 'week' : units), 1).subtract('ms', 1);
+ },
+
+ isAfter: function (input, units) {
+ units = typeof units !== 'undefined' ? units : 'millisecond';
+ return +this.clone().startOf(units) > +moment(input).startOf(units);
+ },
+
+ isBefore: function (input, units) {
+ units = typeof units !== 'undefined' ? units : 'millisecond';
+ return +this.clone().startOf(units) < +moment(input).startOf(units);
+ },
+
+ isSame: function (input, units) {
+ units = units || 'ms';
+ return +this.clone().startOf(units) === +makeAs(input, this).startOf(units);
+ },
+
+ min: function (other) {
+ other = moment.apply(null, arguments);
+ return other < this ? this : other;
+ },
+
+ max: function (other) {
+ other = moment.apply(null, arguments);
+ return other > this ? this : other;
+ },
+
+ zone : function (input) {
+ var offset = this._offset || 0;
+ if (input != null) {
+ if (typeof input === "string") {
+ input = timezoneMinutesFromString(input);
+ }
+ if (Math.abs(input) < 16) {
+ input = input * 60;
+ }
+ this._offset = input;
+ this._isUTC = true;
+ if (offset !== input) {
+ addOrSubtractDurationFromMoment(this, moment.duration(offset - input, 'm'), 1, true);
+ }
+ } else {
+ return this._isUTC ? offset : this._d.getTimezoneOffset();
+ }
+ return this;
+ },
+
+ zoneAbbr : function () {
+ return this._isUTC ? "UTC" : "";
+ },
+
+ zoneName : function () {
+ return this._isUTC ? "Coordinated Universal Time" : "";
+ },
+
+ parseZone : function () {
+ if (this._tzm) {
+ this.zone(this._tzm);
+ } else if (typeof this._i === 'string') {
+ this.zone(this._i);
+ }
+ return this;
+ },
+
+ hasAlignedHourOffset : function (input) {
+ if (!input) {
+ input = 0;
+ }
+ else {
+ input = moment(input).zone();
+ }
+
+ return (this.zone() - input) % 60 === 0;
+ },
+
+ daysInMonth : function () {
+ return daysInMonth(this.year(), this.month());
+ },
+
+ dayOfYear : function (input) {
+ var dayOfYear = round((moment(this).startOf('day') - moment(this).startOf('year')) / 864e5) + 1;
+ return input == null ? dayOfYear : this.add("d", (input - dayOfYear));
+ },
+
+ quarter : function () {
+ return Math.ceil((this.month() + 1.0) / 3.0);
+ },
+
+ weekYear : function (input) {
+ var year = weekOfYear(this, this.lang()._week.dow, this.lang()._week.doy).year;
+ return input == null ? year : this.add("y", (input - year));
+ },
+
+ isoWeekYear : function (input) {
+ var year = weekOfYear(this, 1, 4).year;
+ return input == null ? year : this.add("y", (input - year));
+ },
+
+ week : function (input) {
+ var week = this.lang().week(this);
+ return input == null ? week : this.add("d", (input - week) * 7);
+ },
+
+ isoWeek : function (input) {
+ var week = weekOfYear(this, 1, 4).week;
+ return input == null ? week : this.add("d", (input - week) * 7);
+ },
+
+ weekday : function (input) {
+ var weekday = (this.day() + 7 - this.lang()._week.dow) % 7;
+ return input == null ? weekday : this.add("d", input - weekday);
+ },
+
+ isoWeekday : function (input) {
+ // behaves the same as moment#day except
+ // as a getter, returns 7 instead of 0 (1-7 range instead of 0-6)
+ // as a setter, sunday should belong to the previous week.
+ return input == null ? this.day() || 7 : this.day(this.day() % 7 ? input : input - 7);
+ },
+
+ get : function (units) {
+ units = normalizeUnits(units);
+ return this[units]();
+ },
+
+ set : function (units, value) {
+ units = normalizeUnits(units);
+ if (typeof this[units] === 'function') {
+ this[units](value);
+ }
+ return this;
+ },
+
+ // If passed a language key, it will set the language for this
+ // instance. Otherwise, it will return the language configuration
+ // variables for this instance.
+ lang : function (key) {
+ if (key === undefined) {
+ return this._lang;
+ } else {
+ this._lang = getLangDefinition(key);
+ return this;
+ }
+ }
+ });
+
+ // helper for adding shortcuts
+ function makeGetterAndSetter(name, key) {
+ moment.fn[name] = moment.fn[name + 's'] = function (input) {
+ var utc = this._isUTC ? 'UTC' : '';
+ if (input != null) {
+ this._d['set' + utc + key](input);
+ moment.updateOffset(this);
+ return this;
+ } else {
+ return this._d['get' + utc + key]();
+ }
+ };
+ }
+
+ // loop through and add shortcuts (Month, Date, Hours, Minutes, Seconds, Milliseconds)
+ for (i = 0; i < proxyGettersAndSetters.length; i ++) {
+ makeGetterAndSetter(proxyGettersAndSetters[i].toLowerCase().replace(/s$/, ''), proxyGettersAndSetters[i]);
+ }
+
+ // add shortcut for year (uses different syntax than the getter/setter 'year' == 'FullYear')
+ makeGetterAndSetter('year', 'FullYear');
+
+ // add plural methods
+ moment.fn.days = moment.fn.day;
+ moment.fn.months = moment.fn.month;
+ moment.fn.weeks = moment.fn.week;
+ moment.fn.isoWeeks = moment.fn.isoWeek;
+
+ // add aliased format methods
+ moment.fn.toJSON = moment.fn.toISOString;
+
+ /************************************
+ Duration Prototype
+ ************************************/
+
+
+ extend(moment.duration.fn = Duration.prototype, {
+
+ _bubble : function () {
+ var milliseconds = this._milliseconds,
+ days = this._days,
+ months = this._months,
+ data = this._data,
+ seconds, minutes, hours, years;
+
+ // The following code bubbles up values, see the tests for
+ // examples of what that means.
+ data.milliseconds = milliseconds % 1000;
+
+ seconds = absRound(milliseconds / 1000);
+ data.seconds = seconds % 60;
+
+ minutes = absRound(seconds / 60);
+ data.minutes = minutes % 60;
+
+ hours = absRound(minutes / 60);
+ data.hours = hours % 24;
+
+ days += absRound(hours / 24);
+ data.days = days % 30;
+
+ months += absRound(days / 30);
+ data.months = months % 12;
+
+ years = absRound(months / 12);
+ data.years = years;
+ },
+
+ weeks : function () {
+ return absRound(this.days() / 7);
+ },
+
+ valueOf : function () {
+ return this._milliseconds +
+ this._days * 864e5 +
+ (this._months % 12) * 2592e6 +
+ toInt(this._months / 12) * 31536e6;
+ },
+
+ humanize : function (withSuffix) {
+ var difference = +this,
+ output = relativeTime(difference, !withSuffix, this.lang());
+
+ if (withSuffix) {
+ output = this.lang().pastFuture(difference, output);
+ }
+
+ return this.lang().postformat(output);
+ },
+
+ add : function (input, val) {
+ // supports only 2.0-style add(1, 's') or add(moment)
+ var dur = moment.duration(input, val);
+
+ this._milliseconds += dur._milliseconds;
+ this._days += dur._days;
+ this._months += dur._months;
+
+ this._bubble();
+
+ return this;
+ },
+
+ subtract : function (input, val) {
+ var dur = moment.duration(input, val);
+
+ this._milliseconds -= dur._milliseconds;
+ this._days -= dur._days;
+ this._months -= dur._months;
+
+ this._bubble();
+
+ return this;
+ },
+
+ get : function (units) {
+ units = normalizeUnits(units);
+ return this[units.toLowerCase() + 's']();
+ },
+
+ as : function (units) {
+ units = normalizeUnits(units);
+ 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' : '');
+ }
+ });
+
+ function makeDurationGetter(name) {
+ moment.duration.fn[name] = function () {
+ return this._data[name];
+ };
+ }
+
+ function makeDurationAsGetter(name, factor) {
+ moment.duration.fn['as' + name] = function () {
+ return +this / factor;
+ };
+ }
+
+ for (i in unitMillisecondFactors) {
+ if (unitMillisecondFactors.hasOwnProperty(i)) {
+ makeDurationAsGetter(i, unitMillisecondFactors[i]);
+ makeDurationGetter(i.toLowerCase());
+ }
+ }
+
+ makeDurationAsGetter('Weeks', 6048e5);
+ moment.duration.fn.asMonths = function () {
+ return (+this - this.years() * 31536e6) / 2592e6 + this.years() * 12;
+ };
+
+
+ /************************************
+ Default Lang
+ ************************************/
+
+
+ // Set default language, other languages will inherit from English.
+ moment.lang('en', {
+ ordinal : function (number) {
+ var b = number % 10,
+ output = (toInt(number % 100 / 10) === 1) ? 'th' :
+ (b === 1) ? 'st' :
+ (b === 2) ? 'nd' :
+ (b === 3) ? 'rd' : 'th';
+ return number + output;
+ }
+ });
+
+ /* EMBED_LANGUAGES */
+
+ /************************************
+ 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) {
+ global.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);
+ };
+ extend(global.moment, local_moment);
+ } else {
+ global['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 && module.config() && module.config().noGlobal !== true) {
+ // If user provided noGlobal, he is aware of global
+ makeGlobal(module.config().noGlobal === undefined);
+ }
+
+ return moment;
+ });
+ } else {
+ makeGlobal();
+ }
+}).call(this);
+
+},{}]},{},[1])
+(1)
+});
\ No newline at end of file
diff --git a/dist/vis.min.js b/dist/vis.min.js
new file mode 100644
index 00000000..8ca53878
--- /dev/null
+++ b/dist/vis.min.js
@@ -0,0 +1,29 @@
+/**
+ * vis.js
+ * https://github.com/almende/vis
+ *
+ * A dynamic, browser-based visualization library.
+ *
+ * @version 0.3.0
+ * @date 2014-01-14
+ *
+ * @license
+ * Copyright (C) 2011-2013 Almende B.V, http://almende.com
+ *
+ * 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
+ *
+ * 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.
+ */
+!function(t){if("object"==typeof exports)module.exports=t();else if("function"==typeof define&&define.amd)define(t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.vis=t()}}(function(){var t;return function e(t,i,n){function s(o,a){if(!i[o]){if(!t[o]){var h="function"==typeof require&&require;if(!a&&h)return h(o,!0);if(r)return r(o,!0);throw new Error("Cannot find module '"+o+"'")}var d=i[o]={exports:{}};t[o][0].call(d.exports,function(e){var i=t[o][1][e];return s(i?i:e)},d,d.exports,e,t,i,n)}return i[o].exports}for(var r="function"==typeof require&&require,o=0;oi;++i)t.call(e||this,this[i],i,this)}),Array.prototype.map||(Array.prototype.map=function(t,e){var i,n,s;if(null==this)throw new TypeError(" this is null or not defined");var r=Object(this),o=r.length>>>0;if("function"!=typeof t)throw new TypeError(t+" is not a function");for(e&&(i=e),n=new Array(o),s=0;o>s;){var a,h;s in r&&(a=r[s],h=t.call(i,a,s,r),n[s]=h),s++}return n}),Array.prototype.filter||(Array.prototype.filter=function(t){"use strict";if(null==this)throw new TypeError;var e=Object(this),i=e.length>>>0;if("function"!=typeof t)throw new TypeError;for(var n=[],s=arguments[1],r=0;i>r;r++)if(r in e){var o=e[r];t.call(s,o,r,e)&&n.push(o)}return n}),Object.keys||(Object.keys=function(){var t=Object.prototype.hasOwnProperty,e=!{toString:null}.propertyIsEnumerable("toString"),i=["toString","toLocaleString","valueOf","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","constructor"],n=i.length;return function(s){if("object"!=typeof s&&"function"!=typeof s||null===s)throw new TypeError("Object.keys called on non-object");var r=[];for(var o in s)t.call(s,o)&&r.push(o);if(e)for(var a=0;n>a;a++)t.call(s,i[a])&&r.push(i[a]);return r}}()),Array.isArray||(Array.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)}),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,n=function(){},s=function(){return i.apply(this instanceof n&&t?this:t,e.concat(Array.prototype.slice.call(arguments)))};return n.prototype=this.prototype,s.prototype=new n,s}),Object.create||(Object.create=function(t){function e(){}if(arguments.length>1)throw new Error("Object.create implementation only accepts the first parameter.");return e.prototype=t,new e}),Function.prototype.bind||(Function.prototype.bind=function(t){if("function"!=typeof this)throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");var e=Array.prototype.slice.call(arguments,1),i=this,n=function(){},s=function(){return i.apply(this instanceof n&&t?this:t,e.concat(Array.prototype.slice.call(arguments)))};return n.prototype=this.prototype,s.prototype=new n,s});var A={};A.isNumber=function(t){return t instanceof Number||"number"==typeof t},A.isString=function(t){return t instanceof String||"string"==typeof t},A.isDate=function(t){if(t instanceof Date)return!0;if(A.isString(t)){var e=P.exec(t);if(e)return!0;if(!isNaN(Date.parse(t)))return!0}return!1},A.isDataTable=function(t){return"undefined"!=typeof google&&google.visualization&&google.visualization.DataTable&&t instanceof google.visualization.DataTable},A.randomUUID=function(){var t=function(){return Math.floor(65536*Math.random()).toString(16)};return t()+t()+"-"+t()+"-"+t()+"-"+t()+"-"+t()+t()+t()},A.extend=function(t){for(var e=1,i=arguments.length;i>e;e++){var n=arguments[e];for(var s in n)n.hasOwnProperty(s)&&void 0!==n[s]&&(t[s]=n[s])}return t},A.convert=function(t,e){var i;if(void 0===t)return void 0;if(null===t)return null;if(!e)return t;if("string"!=typeof e&&!(e instanceof String))throw new Error("Type must be a string");switch(e){case"boolean":case"Boolean":return Boolean(t);case"number":case"Number":return Number(t.valueOf());case"string":case"String":return String(t);case"Date":if(A.isNumber(t))return new Date(t);if(t instanceof Date)return new Date(t.valueOf());if(I.isMoment(t))return new Date(t.valueOf());if(A.isString(t))return i=P.exec(t),i?new Date(Number(i[1])):I(t).toDate();throw new Error("Cannot convert object of type "+A.getType(t)+" to type Date");case"Moment":if(A.isNumber(t))return I(t);if(t instanceof Date)return I(t.valueOf());if(I.isMoment(t))return I(t);if(A.isString(t))return i=P.exec(t),i?I(Number(i[1])):I(t);throw new Error("Cannot convert object of type "+A.getType(t)+" to type Date");case"ISODate":if(A.isNumber(t))return new Date(t);if(t instanceof Date)return t.toISOString();if(I.isMoment(t))return t.toDate().toISOString();if(A.isString(t))return i=P.exec(t),i?new Date(Number(i[1])).toISOString():new Date(t).toISOString();throw new Error("Cannot convert object of type "+A.getType(t)+" to type ISODate");case"ASPDate":if(A.isNumber(t))return"/Date("+t+")/";if(t instanceof Date)return"/Date("+t.valueOf()+")/";if(A.isString(t)){i=P.exec(t);var n;return n=i?new Date(Number(i[1])).valueOf():new Date(t).valueOf(),"/Date("+n+")/"}throw new Error("Cannot convert object of type "+A.getType(t)+" to type ASPDate");default:throw new Error("Cannot convert object of type "+A.getType(t)+' to type "'+e+'"')}};var P=/^\/?Date\((\-?\d+)/i;A.getType=function(t){var e=typeof t;return"object"==e?null==t?"null":t instanceof Boolean?"Boolean":t instanceof Number?"Number":t instanceof String?"String":t instanceof Array?"Array":t instanceof Date?"Date":"Object":"number"==e?"Number":"boolean"==e?"Boolean":"string"==e?"String":e},A.getAbsoluteLeft=function(t){for(var e=document.documentElement,i=document.body,n=t.offsetLeft,s=t.offsetParent;null!=s&&s!=i&&s!=e;)n+=s.offsetLeft,n-=s.scrollLeft,s=s.offsetParent;return n},A.getAbsoluteTop=function(t){for(var e=document.documentElement,i=document.body,n=t.offsetTop,s=t.offsetParent;null!=s&&s!=i&&s!=e;)n+=s.offsetTop,n-=s.scrollTop,s=s.offsetParent;return n},A.getPageY=function(t){if("pageY"in t)return t.pageY;var e;e="targetTouches"in t&&t.targetTouches.length?t.targetTouches[0].clientY:t.clientY;var i=document.documentElement,n=document.body;return e+(i&&i.scrollTop||n&&n.scrollTop||0)-(i&&i.clientTop||n&&n.clientTop||0)},A.getPageX=function(t){if("pageY"in t)return t.pageX;var e;e="targetTouches"in t&&t.targetTouches.length?t.targetTouches[0].clientX:t.clientX;var i=document.documentElement,n=document.body;return e+(i&&i.scrollLeft||n&&n.scrollLeft||0)-(i&&i.clientLeft||n&&n.clientLeft||0)},A.addClassName=function(t,e){var i=t.className.split(" ");-1==i.indexOf(e)&&(i.push(e),t.className=i.join(" "))},A.removeClassName=function(t,e){var i=t.className.split(" "),n=i.indexOf(e);-1!=n&&(i.splice(n,1),t.className=i.join(" "))},A.forEach=function(t,e){var i,n;if(t instanceof Array)for(i=0,n=t.length;n>i;i++)e(t[i],i,t);else for(i in t)t.hasOwnProperty(i)&&e(t[i],i,t)},A.updateProperty=function(t,e,i){return t[e]!==i?(t[e]=i,!0):!1},A.addEventListener=function(t,e,i,n){t.addEventListener?(void 0===n&&(n=!1),"mousewheel"===e&&navigator.userAgent.indexOf("Firefox")>=0&&(e="DOMMouseScroll"),t.addEventListener(e,i,n)):t.attachEvent("on"+e,i)},A.removeEventListener=function(t,e,i,n){t.removeEventListener?(void 0===n&&(n=!1),"mousewheel"===e&&navigator.userAgent.indexOf("Firefox")>=0&&(e="DOMMouseScroll"),t.removeEventListener(e,i,n)):t.detachEvent("on"+e,i)},A.getTarget=function(t){t||(t=window.event);var e;return t.target?e=t.target:t.srcElement&&(e=t.srcElement),void 0!=e.nodeType&&3==e.nodeType&&(e=e.parentNode),e},A.stopPropagation=function(t){t||(t=window.event),t.stopPropagation?t.stopPropagation():t.cancelBubble=!0},A.fakeGesture=function(t,e){var i=null;return L.event.collectEventData(this,i,e)},A.preventDefault=function(t){t||(t=window.event),t.preventDefault?t.preventDefault():t.returnValue=!1},A.option={},A.option.asBoolean=function(t,e){return"function"==typeof t&&(t=t()),null!=t?0!=t:e||null},A.option.asNumber=function(t,e){return"function"==typeof t&&(t=t()),null!=t?Number(t)||e||null:e||null},A.option.asString=function(t,e){return"function"==typeof t&&(t=t()),null!=t?String(t):e||null},A.option.asSize=function(t,e){return"function"==typeof t&&(t=t()),A.isString(t)?t:A.isNumber(t)?t+"px":e||null},A.option.asElement=function(t,e){return"function"==typeof t&&(t=t()),t||e||null};var Y={listeners:[],indexOf:function(t){for(var e=this.listeners,i=0,n=this.listeners.length;n>i;i++){var s=e[i];if(s&&s.object==t)return i}return-1},addListener:function(t,e,i){var n=this.indexOf(t),s=this.listeners[n];s||(s={object:t,events:{}},this.listeners.push(s));var r=s.events[e];r||(r=[],s.events[e]=r),-1==r.indexOf(i)&&r.push(i)},removeListener:function(t,e,i){var n=this.indexOf(t),s=this.listeners[n];if(s){var r=s.events[e];r&&(n=r.indexOf(i),-1!=n&&r.splice(n,1),0==r.length&&delete s.events[e]);var o=0,a=s.events;for(var h in a)a.hasOwnProperty(h)&&o++;0==o&&delete this.listeners[n]}},removeAllListeners:function(){this.listeners=[]},trigger:function(t,e,i){var n=this.indexOf(t),s=this.listeners[n];if(s){var r=s.events[e];if(r)for(var o=0,a=r.length;a>o;o++)r[o](i)}}};s.prototype.on=function(t,e,i){var n=t instanceof RegExp?t:new RegExp(t.replace("*","\\w+")),s={id:A.randomUUID(),event:t,regexp:n,callback:"function"==typeof e?e:null,target:i};return this.subscriptions.push(s),s.id},s.prototype.off=function(t){for(var e=0;er;r++)i=s._addItem(t[r]),n.push(i);else if(A.isDataTable(t))for(var a=this._getColumnNames(t),h=0,d=t.getNumberOfRows();d>h;h++){for(var c={},u=0,l=a.length;l>u;u++){var p=a[u];c[p]=t.getValue(h,u)}i=s._addItem(c),n.push(i)}else{if(!(t instanceof Object))throw new Error("Unknown dataType");i=s._addItem(t),n.push(i)}return n.length&&this._trigger("add",{items:n},e),n},r.prototype.update=function(t,e){var i=[],n=[],s=this,r=s.fieldId,o=function(t){var e=t[r];s.data[e]?(e=s._updateItem(t),n.push(e)):(e=s._addItem(t),i.push(e))};if(t instanceof Array)for(var a=0,h=t.length;h>a;a++)o(t[a]);else if(A.isDataTable(t))for(var d=this._getColumnNames(t),c=0,u=t.getNumberOfRows();u>c;c++){for(var l={},p=0,f=d.length;f>p;p++){var m=d[p];l[m]=t.getValue(c,p)}o(l)}else{if(!(t instanceof Object))throw new Error("Unknown dataType");o(t)}return i.length&&this._trigger("add",{items:i},e),n.length&&this._trigger("update",{items:n},e),i.concat(n)},r.prototype.get=function(){var t,e,i,n,s=this,r=A.getType(arguments[0]);"String"==r||"Number"==r?(t=arguments[0],i=arguments[1],n=arguments[2]):"Array"==r?(e=arguments[0],i=arguments[1],n=arguments[2]):(i=arguments[0],n=arguments[1]);var o;if(i&&i.type){if(o="DataTable"==i.type?"DataTable":"Array",n&&o!=A.getType(n))throw new Error('Type of parameter "data" ('+A.getType(n)+") does not correspond with specified options.type ("+i.type+")");if("DataTable"==o&&!A.isDataTable(n))throw new Error('Parameter "data" must be a DataTable when options.type is "DataTable"')}else o=n?"DataTable"==A.getType(n)?"DataTable":"Array":"Array";var a,h,d,c,u=i&&i.convert||this.options.convert,l=i&&i.filter,p=[];if(void 0!=t)a=s._getItem(t,u),l&&!l(a)&&(a=null);else if(void 0!=e)for(d=0,c=e.length;c>d;d++)a=s._getItem(e[d],u),(!l||l(a))&&p.push(a);else for(h in this.data)this.data.hasOwnProperty(h)&&(a=s._getItem(h,u),(!l||l(a))&&p.push(a));if(i&&i.order&&void 0==t&&this._sort(p,i.order),i&&i.fields){var f=i.fields;if(void 0!=t)a=this._filterFields(a,f);else for(d=0,c=p.length;c>d;d++)p[d]=this._filterFields(p[d],f)}if("DataTable"==o){var m=this._getColumnNames(n);if(void 0!=t)s._appendRow(n,m,a);else for(d=0,c=p.length;c>d;d++)s._appendRow(n,m,p[d]);return n}if(void 0!=t)return a;if(n){for(d=0,c=p.length;c>d;d++)n.push(p[d]);return n}return p},r.prototype.getIds=function(t){var e,i,n,s,r,o=this.data,a=t&&t.filter,h=t&&t.order,d=t&&t.convert||this.options.convert,c=[];if(a)if(h){r=[];for(n in o)o.hasOwnProperty(n)&&(s=this._getItem(n,d),a(s)&&r.push(s));for(this._sort(r,h),e=0,i=r.length;i>e;e++)c[e]=r[e][this.fieldId]}else for(n in o)o.hasOwnProperty(n)&&(s=this._getItem(n,d),a(s)&&c.push(s[this.fieldId]));else if(h){r=[];for(n in o)o.hasOwnProperty(n)&&r.push(o[n]);for(this._sort(r,h),e=0,i=r.length;i>e;e++)c[e]=r[e][this.fieldId]}else for(n in o)o.hasOwnProperty(n)&&(s=o[n],c.push(s[this.fieldId]));return c},r.prototype.forEach=function(t,e){var i,n,s=e&&e.filter,r=e&&e.convert||this.options.convert,o=this.data;if(e&&e.order)for(var a=this.get(e),h=0,d=a.length;d>h;h++)i=a[h],n=i[this.fieldId],t(i,n);else for(n in o)o.hasOwnProperty(n)&&(i=this._getItem(n,r),(!s||s(i))&&t(i,n))},r.prototype.map=function(t,e){var i,n=e&&e.filter,s=e&&e.convert||this.options.convert,r=[],o=this.data;for(var a in o)o.hasOwnProperty(a)&&(i=this._getItem(a,s),(!n||n(i))&&r.push(t(i,a)));return e&&e.order&&this._sort(r,e.order),r},r.prototype._filterFields=function(t,e){var i={};for(var n in t)t.hasOwnProperty(n)&&-1!=e.indexOf(n)&&(i[n]=t[n]);return i},r.prototype._sort=function(t,e){if(A.isString(e)){var i=e;t.sort(function(t,e){var n=t[i],s=e[i];return n>s?1:s>n?-1:0})}else{if("function"!=typeof e)throw new TypeError("Order must be a function or a string");t.sort(e)}},r.prototype.remove=function(t,e){var i,n,s,r=[];if(t instanceof Array)for(i=0,n=t.length;n>i;i++)s=this._remove(t[i]),null!=s&&r.push(s);else s=this._remove(t),null!=s&&r.push(s);return r.length&&this._trigger("remove",{items:r},e),r},r.prototype._remove=function(t){if(A.isNumber(t)||A.isString(t)){if(this.data[t])return delete this.data[t],delete this.internalIds[t],t}else if(t instanceof Object){var e=t[this.fieldId];if(e&&this.data[e])return delete this.data[e],delete this.internalIds[e],e}return null},r.prototype.clear=function(t){var e=Object.keys(this.data);return this.data={},this.internalIds={},this._trigger("remove",{items:e},t),e},r.prototype.max=function(t){var e=this.data,i=null,n=null;for(var s in e)if(e.hasOwnProperty(s)){var r=e[s],o=r[t];null!=o&&(!i||o>n)&&(i=r,n=o)}return i},r.prototype.min=function(t){var e=this.data,i=null,n=null;for(var s in e)if(e.hasOwnProperty(s)){var r=e[s],o=r[t];null!=o&&(!i||n>o)&&(i=r,n=o)}return i},r.prototype.distinct=function(t){var e=this.data,i=[],n=this.options.convert[t],s=0;for(var r in e)if(e.hasOwnProperty(r)){for(var o=e[r],a=A.convert(o[t],n),h=!1,d=0;s>d;d++)if(i[d]==a){h=!0;break}h||(i[s]=a,s++)}return i},r.prototype._addItem=function(t){var e=t[this.fieldId];if(void 0!=e){if(this.data[e])throw new Error("Cannot add item: item with id "+e+" already exists")}else e=A.randomUUID(),t[this.fieldId]=e,this.internalIds[e]=t;var i={};for(var n in t)if(t.hasOwnProperty(n)){var s=this.convert[n];i[n]=A.convert(t[n],s)}return this.data[e]=i,e},r.prototype._getItem=function(t,e){var i,n,s=this.data[t];if(!s)return null;var r={},o=this.fieldId,a=this.internalIds;if(e)for(i in s)s.hasOwnProperty(i)&&(n=s[i],i==o&&n in a||(r[i]=A.convert(n,e[i])));else for(i in s)s.hasOwnProperty(i)&&(n=s[i],i==o&&n in a||(r[i]=n));return r},r.prototype._updateItem=function(t){var e=t[this.fieldId];if(void 0==e)throw new Error("Cannot update item: item has no id (item: "+JSON.stringify(t)+")");var i=this.data[e];if(!i)throw new Error("Cannot update item: no item with id "+e+" found");for(var n in t)if(t.hasOwnProperty(n)){var s=this.convert[n];i[n]=A.convert(t[n],s)}return e},r.prototype._getColumnNames=function(t){for(var e=[],i=0,n=t.getNumberOfColumns();n>i;i++)e[i]=t.getColumnId(i)||t.getColumnLabel(i);return e},r.prototype._appendRow=function(t,e,i){for(var n=t.addRow(),s=0,r=e.length;r>s;s++){var o=e[s];t.setValue(n,s,i[o])}},o.prototype.setData=function(t){var e,i,n;if(this.data){this.data.unsubscribe&&this.data.unsubscribe("*",this.listener),e=[];for(var s in this.ids)this.ids.hasOwnProperty(s)&&e.push(s);this.ids={},this._trigger("remove",{items:e})}if(this.data=t,this.data){for(this.fieldId=this.options.fieldId||this.data&&this.data.options&&this.data.options.fieldId||"id",e=this.data.getIds({filter:this.options&&this.options.filter}),i=0,n=e.length;n>i;i++)s=e[i],this.ids[s]=!0;this._trigger("add",{items:e}),this.data.subscribe&&this.data.subscribe("*",this.listener)}},o.prototype.get=function(){var t,e,i,n=this,s=A.getType(arguments[0]);"String"==s||"Number"==s||"Array"==s?(t=arguments[0],e=arguments[1],i=arguments[2]):(e=arguments[0],i=arguments[1]);var r=A.extend({},this.options,e);this.options.filter&&e&&e.filter&&(r.filter=function(t){return n.options.filter(t)&&e.filter(t)});var o=[];return void 0!=t&&o.push(t),o.push(r),o.push(i),this.data&&this.data.get.apply(this.data,o)},o.prototype.getIds=function(t){var e;if(this.data){var i,n=this.options.filter;i=t&&t.filter?n?function(e){return n(e)&&t.filter(e)}:t.filter:n,e=this.data.getIds({filter:i,order:t&&t.order})}else e=[];return e},o.prototype._onEvent=function(t,e,i){var n,s,r,o,a=e&&e.items,h=this.data,d=[],c=[],u=[];if(a&&h){switch(t){case"add":for(n=0,s=a.length;s>n;n++)r=a[n],o=this.get(r),o&&(this.ids[r]=!0,d.push(r));break;case"update":for(n=0,s=a.length;s>n;n++)r=a[n],o=this.get(r),o?this.ids[r]?c.push(r):(this.ids[r]=!0,d.push(r)):this.ids[r]&&(delete this.ids[r],u.push(r));break;case"remove":for(n=0,s=a.length;s>n;n++)r=a[n],this.ids[r]&&(delete this.ids[r],u.push(r))}d.length&&this._trigger("add",{items:d},i),c.length&&this._trigger("update",{items:c},i),u.length&&this._trigger("remove",{items:u},i)}},o.prototype.subscribe=r.prototype.subscribe,o.prototype.unsubscribe=r.prototype.unsubscribe,o.prototype._trigger=r.prototype._trigger,TimeStep=function(t,e,i){this.current=new Date,this._start=new Date,this._end=new Date,this.autoScale=!0,this.scale=TimeStep.SCALE.DAY,this.step=1,this.setRange(t,e,i)},TimeStep.SCALE={MILLISECOND:1,SECOND:2,MINUTE:3,HOUR:4,DAY:5,WEEKDAY:6,MONTH:7,YEAR:8},TimeStep.prototype.setRange=function(t,e,i){if(!(t instanceof Date&&e instanceof Date))throw"No legal start or end date in method setRange";this._start=void 0!=t?new Date(t.valueOf()):new Date,this._end=void 0!=e?new Date(e.valueOf()):new Date,this.autoScale&&this.setMinimumStep(i)},TimeStep.prototype.first=function(){this.current=new Date(this._start.valueOf()),this.roundToMinor()},TimeStep.prototype.roundToMinor=function(){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: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)}if(1!=this.step)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: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)}},TimeStep.prototype.hasNext=function(){return this.current.valueOf()<=this._end.valueOf()},TimeStep.prototype.next=function(){var t=this.current.valueOf();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()+1e3*this.step);break;case TimeStep.SCALE.MINUTE:this.current=new Date(this.current.valueOf()+1e3*this.step*60);break;case TimeStep.SCALE.HOUR:this.current=new Date(this.current.valueOf()+1e3*this.step*60*60);var e=this.current.getHours();this.current.setHours(e-e%this.step);break;case TimeStep.SCALE.WEEKDAY: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)}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: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)}if(1!=this.step)switch(this.scale){case TimeStep.SCALE.MILLISECOND:this.current.getMilliseconds()0&&(this.step=e),this.autoScale=!1},TimeStep.prototype.setAutoScale=function(t){this.autoScale=t},TimeStep.prototype.setMinimumStep=function(t){if(void 0!=t){var e=31104e6,i=2592e6,n=864e5,s=36e5,r=6e4,o=1e3,a=1;1e3*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=1e3),500*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=500),100*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=100),50*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=50),10*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=10),5*e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=5),e>t&&(this.scale=TimeStep.SCALE.YEAR,this.step=1),3*i>t&&(this.scale=TimeStep.SCALE.MONTH,this.step=3),i>t&&(this.scale=TimeStep.SCALE.MONTH,this.step=1),5*n>t&&(this.scale=TimeStep.SCALE.DAY,this.step=5),2*n>t&&(this.scale=TimeStep.SCALE.DAY,this.step=2),n>t&&(this.scale=TimeStep.SCALE.DAY,this.step=1),n/2>t&&(this.scale=TimeStep.SCALE.WEEKDAY,this.step=1),4*s>t&&(this.scale=TimeStep.SCALE.HOUR,this.step=4),s>t&&(this.scale=TimeStep.SCALE.HOUR,this.step=1),15*r>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=15),10*r>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=10),5*r>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=5),r>t&&(this.scale=TimeStep.SCALE.MINUTE,this.step=1),15*o>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=15),10*o>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=10),5*o>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=5),o>t&&(this.scale=TimeStep.SCALE.SECOND,this.step=1),200*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=200),100*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=100),50*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=50),10*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=10),5*a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=5),a>t&&(this.scale=TimeStep.SCALE.MILLISECOND,this.step=1)}},TimeStep.prototype.snap=function(t){if(this.scale==TimeStep.SCALE.YEAR){var e=t.getFullYear()+Math.round(t.getMonth()/12);t.setFullYear(Math.round(e/this.step)*this.step),t.setMonth(0),t.setDate(0),t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.MONTH)t.getDate()>15?(t.setDate(1),t.setMonth(t.getMonth()+1)):t.setDate(1),t.setHours(0),t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0);else if(this.scale==TimeStep.SCALE.DAY||this.scale==TimeStep.SCALE.WEEKDAY){switch(this.step){case 5:case 2:t.setHours(24*Math.round(t.getHours()/24));break;default:t.setHours(12*Math.round(t.getHours()/12))}t.setMinutes(0),t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.HOUR){switch(this.step){case 4:t.setMinutes(60*Math.round(t.getMinutes()/60));break;default:t.setMinutes(30*Math.round(t.getMinutes()/30))}t.setSeconds(0),t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.MINUTE){switch(this.step){case 15:case 10:t.setMinutes(5*Math.round(t.getMinutes()/5)),t.setSeconds(0);break;case 5:t.setSeconds(60*Math.round(t.getSeconds()/60));break;default:t.setSeconds(30*Math.round(t.getSeconds()/30))}t.setMilliseconds(0)}else if(this.scale==TimeStep.SCALE.SECOND)switch(this.step){case 15:case 10:t.setSeconds(5*Math.round(t.getSeconds()/5)),t.setMilliseconds(0);break;case 5:t.setMilliseconds(1e3*Math.round(t.getMilliseconds()/1e3));break;default:t.setMilliseconds(500*Math.round(t.getMilliseconds()/500))}else if(this.scale==TimeStep.SCALE.MILLISECOND){var i=this.step>5?this.step/2:1;t.setMilliseconds(Math.round(t.getMilliseconds()/i)*i)}},TimeStep.prototype.isMajor=function(){switch(this.scale){case TimeStep.SCALE.MILLISECOND:return 0==this.current.getMilliseconds();case TimeStep.SCALE.SECOND:return 0==this.current.getSeconds();case TimeStep.SCALE.MINUTE:return 0==this.current.getHours()&&0==this.current.getMinutes();case TimeStep.SCALE.HOUR:return 0==this.current.getHours();case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:return 1==this.current.getDate();case TimeStep.SCALE.MONTH:return 0==this.current.getMonth();case TimeStep.SCALE.YEAR:return!1;default:return!1}},TimeStep.prototype.getLabelMinor=function(t){switch(void 0==t&&(t=this.current),this.scale){case TimeStep.SCALE.MILLISECOND:return I(t).format("SSS");case TimeStep.SCALE.SECOND:return I(t).format("s");case TimeStep.SCALE.MINUTE:return I(t).format("HH:mm");case TimeStep.SCALE.HOUR:return I(t).format("HH:mm");case TimeStep.SCALE.WEEKDAY:return I(t).format("ddd D");case TimeStep.SCALE.DAY:return I(t).format("D");case TimeStep.SCALE.MONTH:return I(t).format("MMM");case TimeStep.SCALE.YEAR:return I(t).format("YYYY");default:return""}},TimeStep.prototype.getLabelMajor=function(t){switch(void 0==t&&(t=this.current),this.scale){case TimeStep.SCALE.MILLISECOND:return I(t).format("HH:mm:ss");case TimeStep.SCALE.SECOND:return I(t).format("D MMMM HH:mm");case TimeStep.SCALE.MINUTE:case TimeStep.SCALE.HOUR:return I(t).format("ddd D MMMM");case TimeStep.SCALE.WEEKDAY:case TimeStep.SCALE.DAY:return I(t).format("MMMM YYYY");case TimeStep.SCALE.MONTH:return I(t).format("YYYY");case TimeStep.SCALE.YEAR:return"";default:return""}},a.prototype.setOptions=function(t){A.extend(this.options,t)},a.prototype.update=function(){this._order(),this._stack()},a.prototype._order=function(){var t=this.parent.items;if(!t)throw new Error("Cannot stack items: parent does not contain items");var e=[],i=0;A.forEach(t,function(t){t.visible&&(e[i]=t,i++)});var n=this.options.order||this.defaultOptions.order;if("function"!=typeof n)throw new Error("Option order must be a function");e.sort(n),this.ordered=e},a.prototype._stack=function(){var t,e,i,n=this.ordered,s=this.options,r=s.orientation||this.defaultOptions.orientation,o="top"==r;for(i=s.margin&&void 0!==s.margin.item?s.margin.item:this.defaultOptions.margin.item,t=0,e=n.length;e>t;t++){var a=n[t],h=null;do h=this.checkOverlap(n,t,0,t-1,i),null!=h&&(a.top=o?h.top+h.height+i:h.top-a.height-i);while(h)}},a.prototype.checkOverlap=function(t,e,i,n,s){for(var r=this.collision,o=t[e],a=n;a>=i;a--){var h=t[a];if(r(o,h,s)&&a!=e)return h}return null},a.prototype.collision=function(t,e,i){return t.left-ie.left&&t.top-ie.top},h.prototype.setOptions=function(t){A.extend(this.options,t),null!==this.start&&null!==this.end&&this.setRange(this.start,this.end)},h.prototype.subscribe=function(t,e,i){function n(e){s._onMouseWheel(e,t,i)}var s=this;if("move"==e)t.on("dragstart",function(e){s._onDragStart(e,t)}),t.on("drag",function(e){s._onDrag(e,t,i)}),t.on("dragend",function(e){s._onDragEnd(e,t)});else{if("zoom"!=e)throw new TypeError('Unknown event "'+e+'". Choose "move" or "zoom".');t.on("mousewheel",n),t.on("DOMMouseScroll",n),t.on("touch",function(){s._onTouch()}),t.on("pinch",function(e){s._onPinch(e,t,i)})}},h.prototype.on=function(t,e){Y.addListener(this,t,e)},h.prototype._trigger=function(t){Y.trigger(this,t,{start:this.start,end:this.end})},h.prototype.setRange=function(t,e){var i=this._applyRange(t,e);i&&(this._trigger("rangechange"),this._trigger("rangechanged"))},h.prototype._applyRange=function(t,e){var i,n=null!=t?A.convert(t,"Number"):this.start,s=null!=e?A.convert(e,"Number"):this.end,r=null!=this.options.max?A.convert(this.options.max,"Date").valueOf():null,o=null!=this.options.min?A.convert(this.options.min,"Date").valueOf():null;if(isNaN(n)||null===n)throw new Error('Invalid start "'+t+'"');if(isNaN(s)||null===s)throw new Error('Invalid end "'+e+'"');if(n>s&&(s=n),null!==o&&o>n&&(i=o-n,n+=i,s+=i,null!=r&&s>r&&(s=r)),null!==r&&s>r&&(i=s-r,n-=i,s-=i,null!=o&&o>n&&(n=o)),null!==this.options.zoomMin){var a=parseFloat(this.options.zoomMin);0>a&&(a=0),a>s-n&&(this.end-this.start===a?(n=this.start,s=this.end):(i=a-(s-n),n-=i/2,s+=i/2))}if(null!==this.options.zoomMax){var h=parseFloat(this.options.zoomMax);0>h&&(h=0),s-n>h&&(this.end-this.start===h?(n=this.start,s=this.end):(i=s-n-h,n+=i/2,s-=i/2))}var d=this.start!=n||this.end!=s;return this.start=n,this.end=s,d},h.prototype.getRange=function(){return{start:this.start,end:this.end}},h.prototype.conversion=function(t){return h.conversion(this.start,this.end,t)},h.conversion=function(t,e,i){return 0!=i&&e-t!=0?{offset:t,scale:i/(e-t)}:{offset:0,scale:1}};var F={};h.prototype._onDragStart=function(t,e){if(!F.pinching){F.start=this.start,F.end=this.end;var i=e.frame;i&&(i.style.cursor="move")}},h.prototype._onDrag=function(t,e,i){if(d(i),!F.pinching){var n="horizontal"==i?t.gesture.deltaX:t.gesture.deltaY,s=F.end-F.start,r="horizontal"==i?e.width:e.height,o=-n/r*s;this._applyRange(F.start+o,F.end+o),this._trigger("rangechange")}},h.prototype._onDragEnd=function(t,e){F.pinching||(e.frame&&(e.frame.style.cursor="auto"),this._trigger("rangechanged"))},h.prototype._onMouseWheel=function(t,e,i){d(i);var n=0;if(t.wheelDelta?n=t.wheelDelta/120:t.detail&&(n=-t.detail/3),n){var s;s=0>n?1-n/5:1/(1+n/5);var r=A.fakeGesture(this,t),o=c(r.touches[0],e.frame),a=this._pointerToDate(e,i,o);this.zoom(s,a)}A.preventDefault(t)},h.prototype._onTouch=function(){F.start=this.start,F.end=this.end,F.pinching=!1,F.center=null},h.prototype._onPinch=function(t,e,i){if(F.pinching=!0,t.gesture.touches.length>1){F.center||(F.center=c(t.gesture.center,e.frame));var n=1/t.gesture.scale,s=this._pointerToDate(e,i,F.center),r=c(t.gesture.center,e.frame),o=(this._pointerToDate(e,i,r),parseInt(s+(F.start-s)*n)),a=parseInt(s+(F.end-s)*n);this.setRange(o,a)}},h.prototype._pointerToDate=function(t,e,i){var n;if("horizontal"==e){var s=t.width;return n=this.conversion(s),i.x/n.scale+n.offset}var r=t.height;return n=this.conversion(r),i.y/n.scale+n.offset},h.prototype.zoom=function(t,e){null==e&&(e=(this.start+this.end)/2);var i=e+(this.start-e)*t,n=e+(this.end-e)*t;this.setRange(i,n)},h.prototype.move=function(t){var e=this.end-this.start,i=this.start+e*t,n=this.end+e*t;this.start=i,this.end=n},h.prototype.moveTo=function(t){var e=(this.start+this.end)/2,i=e-t,n=this.start-i,s=this.end-i;this.setRange(n,s)},u.prototype.add=function(t){if(void 0==t.id)throw new Error("Component has no field id");if(!(t instanceof l||t instanceof u))throw new TypeError("Component must be an instance of prototype Component or Controller");t.controller=this,this.components[t.id]=t},u.prototype.remove=function(t){var e;for(e in this.components)if(this.components.hasOwnProperty(e)&&(e==t||this.components[e]==t))break;e&&delete this.components[e]},u.prototype.requestReflow=function(t){if(t)this.reflow();else if(!this.reflowTimer){var e=this;this.reflowTimer=setTimeout(function(){e.reflowTimer=void 0,e.reflow()},0)}},u.prototype.requestRepaint=function(t){if(t)this.repaint();else if(!this.repaintTimer){var e=this;this.repaintTimer=setTimeout(function(){e.repaintTimer=void 0,e.repaint()},0)}},u.prototype.repaint=function H(){function H(i,n){n in e||(i.depends&&i.depends.forEach(function(t){H(t,t.id)}),i.parent&&H(i.parent,i.parent.id),t=i.repaint()||t,e[n]=!0)}var t=!1;this.repaintTimer&&(clearTimeout(this.repaintTimer),this.repaintTimer=void 0);var e={};A.forEach(this.components,H),t&&this.reflow()},u.prototype.reflow=function z(){function z(i,n){n in e||(i.depends&&i.depends.forEach(function(t){z(t,t.id)}),i.parent&&z(i.parent,i.parent.id),t=i.reflow()||t,e[n]=!0)}var t=!1;this.reflowTimer&&(clearTimeout(this.reflowTimer),this.reflowTimer=void 0);var e={};A.forEach(this.components,z),t&&this.repaint()},l.prototype.setOptions=function(t){t&&(A.extend(this.options,t),this.controller&&(this.requestRepaint(),this.requestReflow()))},l.prototype.getOption=function(t){var e;return this.options&&(e=this.options[t]),void 0===e&&this.defaultOptions&&(e=this.defaultOptions[t]),e},l.prototype.getContainer=function(){return null},l.prototype.getFrame=function(){return this.frame},l.prototype.repaint=function(){return!1},l.prototype.reflow=function(){return!1},l.prototype.hide=function(){return this.frame&&this.frame.parentNode?(this.frame.parentNode.removeChild(this.frame),!0):!1},l.prototype.show=function(){return this.frame&&this.frame.parentNode?!1:this.repaint()},l.prototype.requestRepaint=function(){if(!this.controller)throw new Error("Cannot request a repaint: no controller configured");this.controller.requestRepaint()},l.prototype.requestReflow=function(){if(!this.controller)throw new Error("Cannot request a reflow: no controller configured");this.controller.requestReflow()},p.prototype=new l,p.prototype.setOptions=l.prototype.setOptions,p.prototype.getContainer=function(){return this.frame},p.prototype.repaint=function(){var t=0,e=A.updateProperty,i=A.option.asSize,n=this.options,s=this.frame;if(!s){s=document.createElement("div"),s.className="panel";var r=n.className;r&&("function"==typeof r?A.addClassName(s,String(r())):A.addClassName(s,String(r))),this.frame=s,t+=1}if(!s.parentNode){if(!this.parent)throw new Error("Cannot repaint panel: no parent attached");var o=this.parent.getContainer();if(!o)throw new Error("Cannot repaint panel: parent has no container element");o.appendChild(s),t+=1}return t+=e(s.style,"top",i(n.top,"0px")),t+=e(s.style,"left",i(n.left,"0px")),t+=e(s.style,"width",i(n.width,"100%")),t+=e(s.style,"height",i(n.height,"100%")),t>0},p.prototype.reflow=function(){var t=0,e=A.updateProperty,i=this.frame;return i?(t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft),t+=e(this,"width",i.offsetWidth),t+=e(this,"height",i.offsetHeight)):t+=1,t>0},f.prototype=new p,f.prototype.setOptions=l.prototype.setOptions,f.prototype.repaint=function(){var t=0,e=A.updateProperty,i=A.option.asSize,n=this.options,s=this.frame;if(s||(s=document.createElement("div"),this.frame=s,t+=1),!s.parentNode){if(!this.container)throw new Error("Cannot repaint root panel: no container attached");this.container.appendChild(s),t+=1}s.className="vis timeline rootpanel "+n.orientation;var r=n.className;return r&&A.addClassName(s,A.option.asString(r)),t+=e(s.style,"top",i(n.top,"0px")),t+=e(s.style,"left",i(n.left,"0px")),t+=e(s.style,"width",i(n.width,"100%")),t+=e(s.style,"height",i(n.height,"100%")),this._updateEventEmitters(),this._updateWatch(),t>0},f.prototype.reflow=function(){var t=0,e=A.updateProperty,i=this.frame;return i?(t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft),t+=e(this,"width",i.offsetWidth),t+=e(this,"height",i.offsetHeight)):t+=1,t>0},f.prototype._updateWatch=function(){var t=this.getOption("autoResize");t?this._watch():this._unwatch()},f.prototype._watch=function(){var t=this;this._unwatch();var e=function(){var e=t.getOption("autoResize");return e?(t.frame&&(t.frame.clientWidth!=t.width||t.frame.clientHeight!=t.height)&&t.requestReflow(),void 0):(t._unwatch(),void 0)};A.addEventListener(window,"resize",e),this.watchTimer=setInterval(e,1e3)},f.prototype._unwatch=function(){this.watchTimer&&(clearInterval(this.watchTimer),this.watchTimer=void 0)},f.prototype.on=function(t,e){var i=this.listeners[t];i||(i=[],this.listeners[t]=i),i.push(e),this._updateEventEmitters()},f.prototype._updateEventEmitters=function(){if(this.listeners){var t=this;A.forEach(this.listeners,function(e,i){if(t.emitters||(t.emitters={}),!(i in t.emitters)){var n=t.frame;if(n){var s=function(t){e.forEach(function(e){e(t)})};t.emitters[i]=s,t.hammer||(t.hammer=L(n,{prevent_default:!0})),t.hammer.on(i,s)}}})}},m.prototype=new l,m.prototype.setOptions=l.prototype.setOptions,m.prototype.setRange=function(t){if(!(t instanceof h||t&&t.start&&t.end))throw new TypeError("Range must be an instance of Range, or an object containing start and end.");this.range=t},m.prototype.toTime=function(t){var e=this.conversion;return new Date(t/e.scale+e.offset)},m.prototype.toScreen=function(t){var e=this.conversion;return(t.valueOf()-e.offset)*e.scale},m.prototype.repaint=function(){var t=0,e=A.updateProperty,i=A.option.asSize,n=this.options,s=this.getOption("orientation"),r=this.props,o=this.step,a=this.frame;if(a||(a=document.createElement("div"),this.frame=a,t+=1),a.className="axis",!a.parentNode){if(!this.parent)throw new Error("Cannot repaint time axis: no parent attached");var h=this.parent.getContainer();if(!h)throw new Error("Cannot repaint time axis: parent has no container element");h.appendChild(a),t+=1}var d=a.parentNode;if(d){var c=a.nextSibling;d.removeChild(a);var u="bottom"==s&&this.props.parentHeight&&this.height?this.props.parentHeight-this.height+"px":"0px";if(t+=e(a.style,"top",i(n.top,u)),t+=e(a.style,"left",i(n.left,"0px")),t+=e(a.style,"width",i(n.width,"100%")),t+=e(a.style,"height",i(n.height,this.height+"px")),this._repaintMeasureChars(),this.step){this._repaintStart(),o.first();for(var l=void 0,p=0;o.hasNext()&&1e3>p;){p++;var f=o.getCurrent(),m=this.toScreen(f),g=o.isMajor();this.getOption("showMinorLabels")&&this._repaintMinorText(m,o.getLabelMinor()),g&&this.getOption("showMajorLabels")?(m>0&&(void 0==l&&(l=m),this._repaintMajorText(m,o.getLabelMajor())),this._repaintMajorLine(m)):this._repaintMinorLine(m),o.next()}if(this.getOption("showMajorLabels")){var v=this.toTime(0),y=o.getLabelMajor(v),w=y.length*(r.majorCharWidth||10)+10;(void 0==l||l>w)&&this._repaintMajorText(0,y)}this._repaintEnd()}this._repaintLine(),c?d.insertBefore(a,c):d.appendChild(a)}return t>0},m.prototype._repaintStart=function(){var t=this.dom,e=t.redundant;e.majorLines=t.majorLines,e.majorTexts=t.majorTexts,e.minorLines=t.minorLines,e.minorTexts=t.minorTexts,t.majorLines=[],t.majorTexts=[],t.minorLines=[],t.minorTexts=[]},m.prototype._repaintEnd=function(){A.forEach(this.dom.redundant,function(t){for(;t.length;){var e=t.pop();e&&e.parentNode&&e.parentNode.removeChild(e)}})},m.prototype._repaintMinorText=function(t,e){var i=this.dom.redundant.minorTexts.shift();if(!i){var n=document.createTextNode("");i=document.createElement("div"),i.appendChild(n),i.className="text minor",this.frame.appendChild(i)}this.dom.minorTexts.push(i),i.childNodes[0].nodeValue=e,i.style.left=t+"px",i.style.top=this.props.minorLabelTop+"px"},m.prototype._repaintMajorText=function(t,e){var i=this.dom.redundant.majorTexts.shift();if(!i){var n=document.createTextNode(e);i=document.createElement("div"),i.className="text major",i.appendChild(n),this.frame.appendChild(i)}this.dom.majorTexts.push(i),i.childNodes[0].nodeValue=e,i.style.top=this.props.majorLabelTop+"px",i.style.left=t+"px"},m.prototype._repaintMinorLine=function(t){var e=this.dom.redundant.minorLines.shift();e||(e=document.createElement("div"),e.className="grid vertical minor",this.frame.appendChild(e)),this.dom.minorLines.push(e);var i=this.props;e.style.top=i.minorLineTop+"px",e.style.height=i.minorLineHeight+"px",e.style.left=t-i.minorLineWidth/2+"px"},m.prototype._repaintMajorLine=function(t){var e=this.dom.redundant.majorLines.shift();e||(e=document.createElement("DIV"),e.className="grid vertical major",this.frame.appendChild(e)),this.dom.majorLines.push(e);var i=this.props;e.style.top=i.majorLineTop+"px",e.style.left=t-i.majorLineWidth/2+"px",e.style.height=i.majorLineHeight+"px"},m.prototype._repaintLine=function(){{var t=this.dom.line,e=this.frame;this.options}this.getOption("showMinorLabels")||this.getOption("showMajorLabels")?(t?(e.removeChild(t),e.appendChild(t)):(t=document.createElement("div"),t.className="grid horizontal major",e.appendChild(t),this.dom.line=t),t.style.top=this.props.lineTop+"px"):t&&t.parentElement&&(e.removeChild(t.line),delete this.dom.line)},m.prototype._repaintMeasureChars=function(){var t,e=this.dom;if(!e.measureCharMinor){t=document.createTextNode("0");var i=document.createElement("DIV");i.className="text minor measure",i.appendChild(t),this.frame.appendChild(i),e.measureCharMinor=i}if(!e.measureCharMajor){t=document.createTextNode("0");var n=document.createElement("DIV");n.className="text major measure",n.appendChild(t),this.frame.appendChild(n),e.measureCharMajor=n}},m.prototype.reflow=function(){var t=0,e=A.updateProperty,i=this.frame,n=this.range;if(!n)throw new Error("Cannot repaint time axis: no range configured");if(i){t+=e(this,"top",i.offsetTop),t+=e(this,"left",i.offsetLeft);var s=this.props,r=this.getOption("showMinorLabels"),o=this.getOption("showMajorLabels"),a=this.dom.measureCharMinor,h=this.dom.measureCharMajor;a&&(s.minorCharHeight=a.clientHeight,s.minorCharWidth=a.clientWidth),h&&(s.majorCharHeight=h.clientHeight,s.majorCharWidth=h.clientWidth);var d=i.parentNode?i.parentNode.offsetHeight:0;switch(d!=s.parentHeight&&(s.parentHeight=d,t+=1),this.getOption("orientation")){case"bottom":s.minorLabelHeight=r?s.minorCharHeight:0,s.majorLabelHeight=o?s.majorCharHeight:0,s.minorLabelTop=0,s.majorLabelTop=s.minorLabelTop+s.minorLabelHeight,s.minorLineTop=-this.top,s.minorLineHeight=Math.max(this.top+s.majorLabelHeight,0),s.minorLineWidth=1,s.majorLineTop=-this.top,s.majorLineHeight=Math.max(this.top+s.minorLabelHeight+s.majorLabelHeight,0),s.majorLineWidth=1,s.lineTop=0;break;case"top":s.minorLabelHeight=r?s.minorCharHeight:0,s.majorLabelHeight=o?s.majorCharHeight:0,s.majorLabelTop=0,s.minorLabelTop=s.majorLabelTop+s.majorLabelHeight,s.minorLineTop=s.minorLabelTop,s.minorLineHeight=Math.max(d-s.majorLabelHeight-this.top),s.minorLineWidth=1,s.majorLineTop=0,s.majorLineHeight=Math.max(d-this.top),s.majorLineWidth=1,s.lineTop=s.majorLabelHeight+s.minorLabelHeight;break;default:throw new Error('Unkown orientation "'+this.getOption("orientation")+'"')}var c=s.minorLabelHeight+s.majorLabelHeight;t+=e(this,"width",i.offsetWidth),t+=e(this,"height",c),this._updateConversion();var u=A.convert(n.start,"Number"),l=A.convert(n.end,"Number"),p=this.toTime(5*(s.minorCharWidth||10)).valueOf()-this.toTime(0).valueOf();this.step=new TimeStep(new Date(u),new Date(l),p),t+=e(s.range,"start",u),t+=e(s.range,"end",l),t+=e(s.range,"minimumStep",p.valueOf())}return t>0},m.prototype._updateConversion=function(){var t=this.range;if(!t)throw new Error("No range configured");this.conversion=t.conversion?t.conversion(this.width):h.conversion(t.start,t.end,this.width)},g.prototype=new l,g.prototype.setOptions=l.prototype.setOptions,g.prototype.getContainer=function(){return this.frame},g.prototype.repaint=function(){var t=this.frame,e=this.parent,i=e.parent.getContainer();if(!e)throw new Error("Cannot repaint bar: no parent attached");if(!i)throw new Error("Cannot repaint bar: parent has no container element");if(!this.getOption("showCurrentTime"))return t&&(i.removeChild(t),delete this.frame),void 0;t||(t=document.createElement("div"),t.className="currenttime",t.style.position="absolute",t.style.top="0px",t.style.height="100%",i.appendChild(t),this.frame=t),e.conversion||e._updateConversion();var n=new Date,s=e.toScreen(n);t.style.left=s+"px",t.title="Current time: "+n,void 0!==this.currentTimeTimer&&(clearTimeout(this.currentTimeTimer),delete this.currentTimeTimer);var r=this,o=1/e.conversion.scale/2;return 30>o&&(o=30),this.currentTimeTimer=setTimeout(function(){r.repaint()},o),!1},v.prototype=new l,v.prototype.setOptions=l.prototype.setOptions,v.prototype.getContainer=function(){return this.frame},v.prototype.repaint=function(){var t=this.frame,e=this.parent,i=e.parent.getContainer();if(!e)throw new Error("Cannot repaint bar: no parent attached");if(!i)throw new Error("Cannot repaint bar: parent has no container element");if(!this.getOption("showCustomTime"))return t&&(i.removeChild(t),delete this.frame),void 0;if(!t){t=document.createElement("div"),t.className="customtime",t.style.position="absolute",t.style.top="0px",t.style.height="100%",i.appendChild(t);var n=document.createElement("div");n.style.position="relative",n.style.top="0px",n.style.left="-10px",n.style.height="100%",n.style.width="20px",t.appendChild(n),this.frame=t,this.subscribe(this,"movetime")}e.conversion||e._updateConversion();var s=e.toScreen(this.customTime);return t.style.left=s+"px",t.title="Time: "+this.customTime,!1},v.prototype._setCustomTime=function(t){this.customTime=new Date(t.valueOf()),this.repaint()},v.prototype._getCustomTime=function(){return new Date(this.customTime.valueOf())},v.prototype.subscribe=function(t,e){var i=this,n={component:t,event:e,callback:function(t){i._onMouseDown(t,n)},params:{}};t.on("mousedown",n.callback),i.listeners.push(n)},v.prototype.on=function(t,e){var i=this.frame;if(!i)throw new Error("Cannot add event listener: no parent attached");Y.addListener(this,t,e),A.addEventListener(i,t,e)},v.prototype._onMouseDown=function(t,e){t=t||window.event;var i=e.params,n=t.which?1==t.which:1==t.button;if(n){i.mouseX=A.getPageX(t),i.moved=!1,i.customTime=this.customTime;var s=this;i.onMouseMove||(i.onMouseMove=function(t){s._onMouseMove(t,e)},A.addEventListener(document,"mousemove",i.onMouseMove)),i.onMouseUp||(i.onMouseUp=function(t){s._onMouseUp(t,e)},A.addEventListener(document,"mouseup",i.onMouseUp)),A.stopPropagation(t),A.preventDefault(t)}},v.prototype._onMouseMove=function(t,e){t=t||window.event;var i=e.params,n=this.parent,s=A.getPageX(t);void 0===i.mouseX&&(i.mouseX=s);var r=s-i.mouseX;Math.abs(r)>=1&&(i.moved=!0);var o=n.toScreen(i.customTime),a=o+r,h=n.toTime(a);this._setCustomTime(h),Y.trigger(this,"timechange",{customTime:this.customTime}),A.preventDefault(t)},v.prototype._onMouseUp=function(t,e){t=t||window.event;var i=e.params;i.onMouseMove&&(A.removeEventListener(document,"mousemove",i.onMouseMove),i.onMouseMove=null),i.onMouseUp&&(A.removeEventListener(document,"mouseup",i.onMouseUp),i.onMouseUp=null),i.moved&&Y.trigger(this,"timechanged",{customTime:this.customTime})},y.prototype=new p,y.types={box:_,range:E,rangeoverflow:T,point:b},y.prototype.setOptions=l.prototype.setOptions,y.prototype.setRange=function(t){if(!(t instanceof h||t&&t.start&&t.end))throw new TypeError("Range must be an instance of Range, or an object containing start and end.");this.range=t},y.prototype.repaint=function(){var t=0,e=A.updateProperty,i=A.option.asSize,n=this.options,s=this.getOption("orientation"),r=this.defaultOptions,o=this.frame;if(!o){o=document.createElement("div"),o.className="itemset";var a=n.className;a&&A.addClassName(o,A.option.asString(a));var h=document.createElement("div");h.className="background",o.appendChild(h),this.dom.background=h;var d=document.createElement("div");d.className="foreground",o.appendChild(d),this.dom.foreground=d;var c=document.createElement("div");c.className="itemset-axis",this.dom.axis=c,this.frame=o,t+=1}if(!this.parent)throw new Error("Cannot repaint itemset: no parent attached");var u=this.parent.getContainer();if(!u)throw new Error("Cannot repaint itemset: parent has no container element");o.parentNode||(u.appendChild(o),t+=1),this.dom.axis.parentNode||(u.appendChild(this.dom.axis),t+=1),t+=e(o.style,"left",i(n.left,"0px")),t+=e(o.style,"top",i(n.top,"0px")),t+=e(o.style,"width",i(n.width,"100%")),t+=e(o.style,"height",i(n.height,this.height+"px")),t+=e(this.dom.axis.style,"left",i(n.left,"0px")),t+=e(this.dom.axis.style,"width",i(n.width,"100%")),t+="bottom"==s?e(this.dom.axis.style,"top",this.height+this.top+"px"):e(this.dom.axis.style,"top",this.top+"px"),this._updateConversion();var l=this,p=this.queue,f=this.itemsData,m=this.items,g={};return Object.keys(p).forEach(function(e){var i=p[e],s=m[e];switch(i){case"add":case"update":var o=f&&f.get(e,g);if(o){var a=o.type||o.start&&o.end&&"range"||n.type||"box",h=y.types[a];if(s&&(h&&s instanceof h?(s.data=o,t++):(t+=s.hide(),s=null)),!s){if(!h)throw new TypeError('Unknown item type "'+a+'"');s=new h(l,o,n,r),t++}s.repaint(),m[e]=s}delete p[e];break;case"remove":s&&(t+=s.hide()),delete m[e],delete p[e];break;default:console.log('Error: unknown action "'+i+'"')}}),A.forEach(this.items,function(e){e.visible?(t+=e.show(),e.reposition()):t+=e.hide()}),t>0},y.prototype.getForeground=function(){return this.dom.foreground},y.prototype.getBackground=function(){return this.dom.background},y.prototype.getAxis=function(){return this.dom.axis},y.prototype.reflow=function(){var t=0,e=this.options,i=e.margin&&e.margin.axis||this.defaultOptions.margin.axis,n=e.margin&&e.margin.item||this.defaultOptions.margin.item,s=A.updateProperty,r=A.option.asNumber,o=A.option.asSize,a=this.frame;if(a){this._updateConversion(),A.forEach(this.items,function(e){t+=e.reflow()}),this.stack.update();var h,d=r(e.maxHeight),c=null!=o(e.height);if(c)h=a.offsetHeight;else{var u=this.stack.ordered;if(u.length){var l=u[0].top,p=u[0].top+u[0].height;A.forEach(u,function(t){l=Math.min(l,t.top),p=Math.max(p,t.top+t.height)}),h=p-l+i+n}else h=i+n}null!=d&&(h=Math.min(h,d)),t+=s(this,"height",h),t+=s(this,"top",a.offsetTop),t+=s(this,"left",a.offsetLeft),t+=s(this,"width",a.offsetWidth)}else t+=1;return t>0},y.prototype.hide=function(){var t=!1;return this.frame&&this.frame.parentNode&&(this.frame.parentNode.removeChild(this.frame),t=!0),this.dom.axis&&this.dom.axis.parentNode&&(this.dom.axis.parentNode.removeChild(this.dom.axis),t=!0),t},y.prototype.setItems=function(t){var e,i=this,n=this.itemsData;if(t){if(!(t instanceof r||t instanceof o))throw new TypeError("Data must be an instance of DataSet");this.itemsData=t}else this.itemsData=null;if(n&&(A.forEach(this.listeners,function(t,e){n.unsubscribe(e,t)}),e=n.getIds(),this._onRemove(e)),this.itemsData){var s=this.id;A.forEach(this.listeners,function(t,e){i.itemsData.subscribe(e,t,s)}),e=this.itemsData.getIds(),this._onAdd(e)}},y.prototype.getItems=function(){return this.itemsData},y.prototype._onUpdate=function(t){this._toQueue("update",t)},y.prototype._onAdd=function(t){this._toQueue("add",t)},y.prototype._onRemove=function(t){this._toQueue("remove",t)},y.prototype._toQueue=function(t,e){var i=this.queue;e.forEach(function(e){i[e]=t}),this.controller&&this.requestRepaint()},y.prototype._updateConversion=function(){var t=this.range;if(!t)throw new Error("No range configured");this.conversion=t.conversion?t.conversion(this.width):h.conversion(t.start,t.end,this.width)},y.prototype.toTime=function(t){var e=this.conversion;return new Date(t/e.scale+e.offset)},y.prototype.toScreen=function(t){var e=this.conversion;return(t.valueOf()-e.offset)*e.scale},w.prototype.select=function(){this.selected=!0},w.prototype.unselect=function(){this.selected=!1},w.prototype.show=function(){return!1},w.prototype.hide=function(){return!1},w.prototype.repaint=function(){return!1},w.prototype.reflow=function(){return!1},w.prototype.getWidth=function(){return this.width},_.prototype=new w(null,null),_.prototype.select=function(){this.selected=!0},_.prototype.unselect=function(){this.selected=!1},_.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw new Error("Cannot repaint item: no parent attached");if(!e.box.parentNode){var i=this.parent.getForeground();if(!i)throw new Error("Cannot repaint time axis: parent has no foreground container element");i.appendChild(e.box),t=!0}if(!e.line.parentNode){var n=this.parent.getBackground();if(!n)throw new Error("Cannot repaint time axis: parent has no background container element");n.appendChild(e.line),t=!0}if(!e.dot.parentNode){var s=this.parent.getAxis();if(!n)throw new Error("Cannot repaint time axis: parent has no axis container element");s.appendChild(e.dot),t=!0}if(this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw new Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var r=(this.data.className?" "+this.data.className:"")+(this.selected?" selected":"");this.className!=r&&(this.className=r,e.box.className="item box"+r,e.line.className="item line"+r,e.dot.className="item dot"+r,t=!0)}return t},_.prototype.show=function(){return this.dom&&this.dom.box.parentNode?!1:this.repaint()
+},_.prototype.hide=function(){var t=!1,e=this.dom;return e&&(e.box.parentNode&&(e.box.parentNode.removeChild(e.box),t=!0),e.line.parentNode&&e.line.parentNode.removeChild(e.line),e.dot.parentNode&&e.dot.parentNode.removeChild(e.dot)),t},_.prototype.reflow=function(){var t,e,i,n,s,r,o,a,h,d,c,u,l=0;if(void 0==this.data.start)throw new Error('Property "start" missing in item '+this.data.id);if(c=this.data,u=this.parent&&this.parent.range,c&&u){var p=u.end-u.start;this.visible=c.start>u.start-p&&c.start0},_.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.box=document.createElement("DIV"),t.content=document.createElement("DIV"),t.content.className="content",t.box.appendChild(t.content),t.line=document.createElement("DIV"),t.line.className="line",t.dot=document.createElement("DIV"),t.dot.className="dot")},_.prototype.reposition=function(){var t=this.dom,e=this.props,i=this.options.orientation||this.defaultOptions.orientation;if(t){var n=t.box,s=t.line,r=t.dot;n.style.left=this.left+"px",n.style.top=this.top+"px",s.style.left=e.line.left+"px","top"==i?(s.style.top="0px",s.style.height=this.top+"px"):(s.style.top=this.top+this.height+"px",s.style.height=Math.max(this.parent.height-this.top-this.height+this.props.dot.height/2,0)+"px"),r.style.left=e.dot.left+"px",r.style.top=e.dot.top+"px"}},b.prototype=new w(null,null),b.prototype.select=function(){this.selected=!0},b.prototype.unselect=function(){this.selected=!1},b.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw new Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw new Error("Cannot repaint time axis: parent has no foreground container element");if(e.point.parentNode||(i.appendChild(e.point),i.appendChild(e.point),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw new Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var n=(this.data.className?" "+this.data.className:"")+(this.selected?" selected":"");this.className!=n&&(this.className=n,e.point.className="item point"+n,t=!0)}return t},b.prototype.show=function(){return this.dom&&this.dom.point.parentNode?!1:this.repaint()},b.prototype.hide=function(){var t=!1,e=this.dom;return e&&e.point.parentNode&&(e.point.parentNode.removeChild(e.point),t=!0),t},b.prototype.reflow=function(){var t,e,i,n,s,r,o,a,h,d,c=0;if(void 0==this.data.start)throw new Error('Property "start" missing in item '+this.data.id);if(h=this.data,d=this.parent&&this.parent.range,h&&d){var u=d.end-d.start;this.visible=h.start>d.start-u&&h.start0},b.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.point=document.createElement("div"),t.content=document.createElement("div"),t.content.className="content",t.point.appendChild(t.content),t.dot=document.createElement("div"),t.dot.className="dot",t.point.appendChild(t.dot))},b.prototype.reposition=function(){var t=this.dom,e=this.props;t&&(t.point.style.top=this.top+"px",t.point.style.left=this.left+"px",t.content.style.marginLeft=e.content.marginLeft+"px",t.dot.style.top=e.dot.top+"px")},E.prototype=new w(null,null),E.prototype.select=function(){this.selected=!0},E.prototype.unselect=function(){this.selected=!1},E.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw new Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw new Error("Cannot repaint time axis: parent has no foreground container element");if(e.box.parentNode||(i.appendChild(e.box),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw new Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var n=this.data.className?" "+this.data.className:"";this.className!=n&&(this.className=n,e.box.className="item range"+n,t=!0)}return t},E.prototype.show=function(){return this.dom&&this.dom.box.parentNode?!1:this.repaint()},E.prototype.hide=function(){var t=!1,e=this.dom;return e&&e.box.parentNode&&(e.box.parentNode.removeChild(e.box),t=!0),t},E.prototype.reflow=function(){var t,e,i,n,s,r,o,a,h,d,c,u,l,p,f,m,g=0;if(void 0==this.data.start)throw new Error('Property "start" missing in item '+this.data.id);if(void 0==this.data.end)throw new Error('Property "end" missing in item '+this.data.id);return h=this.data,d=this.parent&&this.parent.range,this.visible=h&&d?h.startd.start:!1,this.visible&&(t=this.dom,t?(e=this.props,i=this.options,r=this.parent,o=r.toScreen(this.data.start),a=r.toScreen(this.data.end),c=A.updateProperty,u=t.box,l=r.width,f=i.orientation||this.defaultOptions.orientation,n=i.margin&&i.margin.axis||this.defaultOptions.margin.axis,s=i.padding||this.defaultOptions.padding,g+=c(e.content,"width",t.content.offsetWidth),g+=c(this,"height",u.offsetHeight),-l>o&&(o=-l),a>2*l&&(a=2*l),p=0>o?Math.min(-o,a-o-e.content.width-2*s):0,g+=c(e.content,"left",p),"top"==f?(m=n,g+=c(this,"top",m)):(m=r.height-this.height-n,g+=c(this,"top",m)),g+=c(this,"left",o),g+=c(this,"width",Math.max(a-o,1))):g+=1),g>0},E.prototype._create=function(){var t=this.dom;t||(this.dom=t={},t.box=document.createElement("div"),t.content=document.createElement("div"),t.content.className="content",t.box.appendChild(t.content))},E.prototype.reposition=function(){var t=this.dom,e=this.props;t&&(t.box.style.top=this.top+"px",t.box.style.left=this.left+"px",t.box.style.width=this.width+"px",t.content.style.left=e.content.left+"px")},T.prototype=new E(null,null),T.prototype.repaint=function(){var t=!1,e=this.dom;if(e||(this._create(),e=this.dom,t=!0),e){if(!this.parent)throw new Error("Cannot repaint item: no parent attached");var i=this.parent.getForeground();if(!i)throw new Error("Cannot repaint time axis: parent has no foreground container element");if(e.box.parentNode||(i.appendChild(e.box),t=!0),this.data.content!=this.content){if(this.content=this.data.content,this.content instanceof Element)e.content.innerHTML="",e.content.appendChild(this.content);else{if(void 0==this.data.content)throw new Error('Property "content" missing in item '+this.data.id);e.content.innerHTML=this.content}t=!0}var n=this.data.className?" "+this.data.className:"";this.className!=n&&(this.className=n,e.box.className="item rangeoverflow"+n,t=!0)}return t},T.prototype.getWidth=function(){return void 0!==this.props.content&&this.width0},x.prototype=new p,x.prototype.setOptions=l.prototype.setOptions,x.prototype.setRange=function(){},x.prototype.setItems=function(t){this.itemsData=t;for(var e in this.groups)if(this.groups.hasOwnProperty(e)){var i=this.groups[e];i.setItems(t)}},x.prototype.getItems=function(){return this.itemsData},x.prototype.setRange=function(t){this.range=t},x.prototype.setGroups=function(t){var e,i=this;if(this.groupsData&&(A.forEach(this.listeners,function(t,e){i.groupsData.unsubscribe(e,t)}),e=this.groupsData.getIds(),this._onRemove(e)),t?t instanceof r?this.groupsData=t:(this.groupsData=new r({convert:{start:"Date",end:"Date"}}),this.groupsData.add(t)):this.groupsData=null,this.groupsData){var n=this.id;A.forEach(this.listeners,function(t,e){i.groupsData.subscribe(e,t,n)}),e=this.groupsData.getIds(),this._onAdd(e)}},x.prototype.getGroups=function(){return this.groupsData},x.prototype.repaint=function(){var t,e,i,n,s=0,r=A.updateProperty,o=A.option.asSize,a=A.option.asElement,h=this.options,d=this.dom.frame,c=this.dom.labels,u=this.dom.labelSet;if(!this.parent)throw new Error("Cannot repaint groupset: no parent attached");var l=this.parent.getContainer();if(!l)throw new Error("Cannot repaint groupset: parent has no container element");if(!d){d=document.createElement("div"),d.className="groupset",this.dom.frame=d;var p=h.className;p&&A.addClassName(d,A.option.asString(p)),s+=1}d.parentNode||(l.appendChild(d),s+=1);var f=a(h.labelContainer);if(!f)throw new Error('Cannot repaint groupset: option "labelContainer" not defined');c||(c=document.createElement("div"),c.className="labels",this.dom.labels=c),u||(u=document.createElement("div"),u.className="label-set",c.appendChild(u),this.dom.labelSet=u),c.parentNode&&c.parentNode==f||(c.parentNode&&c.parentNode.removeChild(c.parentNode),f.appendChild(c)),s+=r(d.style,"height",o(h.height,this.height+"px")),s+=r(d.style,"top",o(h.top,"0px")),s+=r(d.style,"left",o(h.left,"0px")),s+=r(d.style,"width",o(h.width,"100%")),s+=r(u.style,"top",o(h.top,"0px")),s+=r(u.style,"height",o(h.height,this.height+"px"));var m=this,g=this.queue,v=this.groups,y=this.groupsData,w=Object.keys(g);if(w.length){w.forEach(function(t){var e=g[t],i=v[t];switch(e){case"add":case"update":if(!i){var n=Object.create(m.options);A.extend(n,{height:null,maxHeight:null}),i=new S(m,t,n),i.setItems(m.itemsData),v[t]=i,m.controller.add(i)}i.data=y.get(t),delete g[t];break;case"remove":i&&(i.setItems(),delete v[t],m.controller.remove(i)),delete g[t];break;default:console.log('Error: unknown action "'+e+'"')}});var _=this.groupsData.getIds({order:this.options.groupOrder});for(t=0;t<_.length;t++)!function(t,e){var i=0;e&&(i=function(){return e.top+e.height}),t.setOptions({top:i})}(v[_[t]],v[_[t-1]]);for(;u.firstChild;)u.removeChild(u.firstChild);for(t=0;t<_.length;t++)e=_[t],n=this._createLabel(e),u.appendChild(n);s++}for(e in v)v.hasOwnProperty(e)&&(i=v[e],n=i.label,n&&(n.style.top=i.top+"px",n.style.height=i.height+"px"));return s>0},x.prototype._createLabel=function(t){var e=this.groups[t],i=document.createElement("div");i.className="label";var n=document.createElement("div");n.className="inner",i.appendChild(n);var s=e.data&&e.data.content;s instanceof Element?n.appendChild(s):void 0!=s&&(n.innerHTML=s);var r=e.data&&e.data.className;return r&&A.addClassName(i,r),e.label=i,i},x.prototype.getContainer=function(){return this.dom.frame},x.prototype.getLabelsWidth=function(){return this.props.labels.width},x.prototype.reflow=function(){var t,e,i=0,n=this.options,s=A.updateProperty,r=A.option.asNumber,o=A.option.asSize,a=this.dom.frame;if(a){var h,d=r(n.maxHeight),c=null!=o(n.height);if(c)h=a.offsetHeight;else{h=0;for(t in this.groups)this.groups.hasOwnProperty(t)&&(e=this.groups[t],h+=e.height)}null!=d&&(h=Math.min(h,d)),i+=s(this,"height",h),i+=s(this,"top",a.offsetTop),i+=s(this,"left",a.offsetLeft),i+=s(this,"width",a.offsetWidth)}var u=0;for(t in this.groups)if(this.groups.hasOwnProperty(t)){e=this.groups[t];var l=e.props&&e.props.label&&e.props.label.width||0;u=Math.max(u,l)}return i+=s(this.props.labels,"width",u),i>0},x.prototype.hide=function(){return this.dom.frame&&this.dom.frame.parentNode?(this.dom.frame.parentNode.removeChild(this.dom.frame),!0):!1},x.prototype.show=function(){return this.dom.frame&&this.dom.frame.parentNode?!1:this.repaint()},x.prototype._onUpdate=function(t){this._toQueue(t,"update")},x.prototype._onAdd=function(t){this._toQueue(t,"add")},x.prototype._onRemove=function(t){this._toQueue(t,"remove")},x.prototype._toQueue=function(t,e){var i=this.queue;t.forEach(function(t){i[t]=e}),this.controller&&this.requestRepaint()},D.prototype.setOptions=function(t){A.extend(this.options,t),this.range.setRange(),this.controller.reflow(),this.controller.repaint()},D.prototype.setCustomTime=function(t){this.customtime._setCustomTime(t)},D.prototype.getCustomTime=function(){return new Date(this.customtime.customTime.valueOf())},D.prototype.setItems=function(t){var e,i=null==this.itemsData;if(t?t instanceof r&&(e=t):e=null,t instanceof r||(e=new r({convert:{start:"Date",end:"Date"}}),e.add(t)),this.itemsData=e,this.content.setItems(e),i&&(void 0==this.options.start||void 0==this.options.end)){var n=this.getItemRange(),s=n.min,o=n.max;if(null!=s&&null!=o){var a=o.valueOf()-s.valueOf();0>=a&&(a=864e5),s=new Date(s.valueOf()-.05*a),o=new Date(o.valueOf()+.05*a)}void 0!=this.options.start&&(s=A.convert(this.options.start,"Date")),void 0!=this.options.end&&(o=A.convert(this.options.end,"Date")),(null!=s||null!=o)&&this.range.setRange(s,o)}},D.prototype.setGroups=function(t){var e=this;this.groupsData=t;var i=this.groupsData?x:y;if(!(this.content instanceof i)){this.content&&(this.content.hide(),this.content.setItems&&this.content.setItems(),this.content.setGroups&&this.content.setGroups(),this.controller.remove(this.content));var n=Object.create(this.options);A.extend(n,{top:function(){return"top"==e.options.orientation?e.timeaxis.height:e.itemPanel.height-e.timeaxis.height-e.content.height},left:null,width:"100%",height:function(){return e.options.height?e.itemPanel.height-e.timeaxis.height:null},maxHeight:function(){if(e.options.maxHeight){if(!A.isNumber(e.options.maxHeight))throw new TypeError("Number expected for property maxHeight");return e.options.maxHeight-e.timeaxis.height}return null},labelContainer:function(){return e.labelPanel.getContainer()}}),this.content=new i(this.itemPanel,[this.timeaxis],n),this.content.setRange&&this.content.setRange(this.range),this.content.setItems&&this.content.setItems(this.itemsData),this.content.setGroups&&this.content.setGroups(this.groupsData),this.controller.add(this.content)}},D.prototype.getItemRange=function(){var t=this.itemsData,e=null,i=null;if(t){var n=t.min("start");e=n?n.start.valueOf():null;var s=t.max("start");s&&(i=s.start.valueOf());var r=t.max("end");r&&(i=null==i?r.end.valueOf():Math.max(i,r.end.valueOf()))}return{min:null!=e?new Date(e):null,max:null!=i?new Date(i):null}},function(t){function e(t){return D=t,l()}function i(){M=0,C=D.charAt(0)}function n(){M++,C=D.charAt(M)}function s(){return D.charAt(M+1)}function r(t){return L.test(t)}function o(t,e){if(t||(t={}),e)for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}function a(t,e,i){for(var n=e.split("."),s=t;n.length;){var r=n.shift();n.length?(s[r]||(s[r]={}),s=s[r]):s[r]=i}}function h(t,e){for(var i,n,s=null,r=[t],a=t;a.parent;)r.push(a.parent),a=a.parent;if(a.nodes)for(i=0,n=a.nodes.length;n>i;i++)if(e.id===a.nodes[i].id){s=a.nodes[i];break}for(s||(s={id:e.id},t.node&&(s.attr=o(s.attr,t.node))),i=r.length-1;i>=0;i--){var h=r[i];h.nodes||(h.nodes=[]),-1==h.nodes.indexOf(s)&&h.nodes.push(s)}e.attr&&(s.attr=o(s.attr,e.attr))}function d(t,e){if(t.edges||(t.edges=[]),t.edges.push(e),t.edge){var i=o({},t.edge);e.attr=o(i,e.attr)}}function c(t,e,i,n,s){var r={from:e,to:i,type:n};return t.edge&&(r.attr=o({},t.edge)),r.attr=o(r.attr||{},s),r}function u(){for(N=S.NULL,O="";" "==C||" "==C||"\n"==C||"\r"==C;)n();do{var t=!1;if("#"==C){for(var e=M-1;" "==D.charAt(e)||" "==D.charAt(e);)e--;if("\n"==D.charAt(e)||""==D.charAt(e)){for(;""!=C&&"\n"!=C;)n();t=!0}}if("/"==C&&"/"==s()){for(;""!=C&&"\n"!=C;)n();t=!0}if("/"==C&&"*"==s()){for(;""!=C;){if("*"==C&&"/"==s()){n(),n();break}n()}t=!0}for(;" "==C||" "==C||"\n"==C||"\r"==C;)n()}while(t);if(""==C)return N=S.DELIMITER,void 0;var i=C+s();if(x[i])return N=S.DELIMITER,O=i,n(),n(),void 0;if(x[C])return N=S.DELIMITER,O=C,n(),void 0;if(r(C)||"-"==C){for(O+=C,n();r(C);)O+=C,n();return"false"==O?O=!1:"true"==O?O=!0:isNaN(Number(O))||(O=Number(O)),N=S.IDENTIFIER,void 0}if('"'==C){for(n();""!=C&&('"'!=C||'"'==C&&'"'==s());)O+=C,'"'==C&&n(),n();if('"'!=C)throw _('End of string " expected');return n(),N=S.IDENTIFIER,void 0}for(N=S.UNKNOWN;""!=C;)O+=C,n();throw new SyntaxError('Syntax error in part "'+b(O,30)+'"')}function l(){var t={};if(i(),u(),"strict"==O&&(t.strict=!0,u()),("graph"==O||"digraph"==O)&&(t.type=O,u()),N==S.IDENTIFIER&&(t.id=O,u()),"{"!=O)throw _("Angle bracket { expected");if(u(),p(t),"}"!=O)throw _("Angle bracket } expected");if(u(),""!==O)throw _("End of file expected");return u(),delete t.node,delete t.edge,delete t.graph,t}function p(t){for(;""!==O&&"}"!=O;)f(t),";"==O&&u()}function f(t){var e=m(t);if(e)return y(t,e),void 0;var i=g(t);if(!i){if(N!=S.IDENTIFIER)throw _("Identifier expected");var n=O;if(u(),"="==O){if(u(),N!=S.IDENTIFIER)throw _("Identifier expected");t[n]=O,u()}else v(t,n)}}function m(t){var e=null;if("subgraph"==O&&(e={},e.type="subgraph",u(),N==S.IDENTIFIER&&(e.id=O,u())),"{"==O){if(u(),e||(e={}),e.parent=t,e.node=t.node,e.edge=t.edge,e.graph=t.graph,p(e),"}"!=O)throw _("Angle bracket } expected");u(),delete e.node,delete e.edge,delete e.graph,delete e.parent,t.subgraphs||(t.subgraphs=[]),t.subgraphs.push(e)}return e}function g(t){return"node"==O?(u(),t.node=w(),"node"):"edge"==O?(u(),t.edge=w(),"edge"):"graph"==O?(u(),t.graph=w(),"graph"):null}function v(t,e){var i={id:e},n=w();n&&(i.attr=n),h(t,i),y(t,e)}function y(t,e){for(;"->"==O||"--"==O;){var i,n=O;u();var s=m(t);if(s)i=s;else{if(N!=S.IDENTIFIER)throw _("Identifier or subgraph expected");i=O,h(t,{id:i}),u()}var r=w(),o=c(t,e,i,n,r);d(t,o),e=i}}function w(){for(var t=null;"["==O;){for(u(),t={};""!==O&&"]"!=O;){if(N!=S.IDENTIFIER)throw _("Attribute name expected");var e=O;if(u(),"="!=O)throw _("Equal sign = expected");if(u(),N!=S.IDENTIFIER)throw _("Attribute value expected");var i=O;a(t,e,i),u(),","==O&&u()}if("]"!=O)throw _("Bracket ] expected");u()}return t}function _(t){return new SyntaxError(t+', got "'+b(O,30)+'" (char '+M+")")}function b(t,e){return t.length<=e?t:t.substr(0,27)+"..."}function E(t,e,i){t instanceof Array?t.forEach(function(t){e instanceof Array?e.forEach(function(e){i(t,e)}):i(t,e)}):e instanceof Array?e.forEach(function(e){i(t,e)}):i(t,e)}function T(t){function i(t){var e={from:t.from,to:t.to};return o(e,t.attr),e.style="->"==t.type?"arrow":"line",e}var n=e(t),s={nodes:[],edges:[],options:{}};return n.nodes&&n.nodes.forEach(function(t){var e={id:t.id,label:String(t.label||t.id)};o(e,t.attr),e.image&&(e.shape="image"),s.nodes.push(e)}),n.edges&&n.edges.forEach(function(t){var e,n;e=t.from instanceof Object?t.from.nodes:{id:t.from},n=t.to instanceof Object?t.to.nodes:{id:t.to},t.from instanceof Object&&t.from.edges&&t.from.edges.forEach(function(t){var e=i(t);s.edges.push(e)}),E(e,n,function(e,n){var r=c(s,e.id,n.id,t.type,t.attr),o=i(r);s.edges.push(o)}),t.to instanceof Object&&t.to.edges&&t.to.edges.forEach(function(t){var e=i(t);s.edges.push(e)})}),n.attr&&(s.options=n.attr),s}var S={NULL:0,DELIMITER:1,IDENTIFIER:2,UNKNOWN:3},x={"{":!0,"}":!0,"[":!0,"]":!0,";":!0,"=":!0,",":!0,"->":!0,"--":!0},D="",M=0,C="",O="",N=S.NULL,L=/[a-zA-Z_0-9.:#]/;t.parseDOT=e,t.DOTToGraph=T}("undefined"!=typeof A?A:n),"undefined"!=typeof CanvasRenderingContext2D&&(CanvasRenderingContext2D.prototype.circle=function(t,e,i){this.beginPath(),this.arc(t,e,i,0,2*Math.PI,!1)},CanvasRenderingContext2D.prototype.square=function(t,e,i){this.beginPath(),this.rect(t-i,e-i,2*i,2*i)},CanvasRenderingContext2D.prototype.triangle=function(t,e,i){this.beginPath();var n=2*i,s=n/2,r=Math.sqrt(3)/6*n,o=Math.sqrt(n*n-s*s);this.moveTo(t,e-(o-r)),this.lineTo(t+s,e+r),this.lineTo(t-s,e+r),this.lineTo(t,e-(o-r)),this.closePath()},CanvasRenderingContext2D.prototype.triangleDown=function(t,e,i){this.beginPath();var n=2*i,s=n/2,r=Math.sqrt(3)/6*n,o=Math.sqrt(n*n-s*s);this.moveTo(t,e+(o-r)),this.lineTo(t+s,e-r),this.lineTo(t-s,e-r),this.lineTo(t,e+(o-r)),this.closePath()},CanvasRenderingContext2D.prototype.star=function(t,e,i){this.beginPath();for(var n=0;10>n;n++){var s=n%2===0?1.3*i:.5*i;this.lineTo(t+s*Math.sin(2*n*Math.PI/10),e-s*Math.cos(2*n*Math.PI/10))}this.closePath()},CanvasRenderingContext2D.prototype.roundRect=function(t,e,i,n,s){var r=Math.PI/180;0>i-2*s&&(s=i/2),0>n-2*s&&(s=n/2),this.beginPath(),this.moveTo(t+s,e),this.lineTo(t+i-s,e),this.arc(t+i-s,e+s,s,270*r,360*r,!1),this.lineTo(t+i,e+n-s),this.arc(t+i-s,e+n-s,s,0,90*r,!1),this.lineTo(t+s,e+n),this.arc(t+s,e+n-s,s,90*r,180*r,!1),this.lineTo(t,e+s),this.arc(t+s,e+s,s,180*r,270*r,!1)},CanvasRenderingContext2D.prototype.ellipse=function(t,e,i,n){var s=.5522848,r=i/2*s,o=n/2*s,a=t+i,h=e+n,d=t+i/2,c=e+n/2;this.beginPath(),this.moveTo(t,c),this.bezierCurveTo(t,c-o,d-r,e,d,e),this.bezierCurveTo(d+r,e,a,c-o,a,c),this.bezierCurveTo(a,c+o,d+r,h,d,h),this.bezierCurveTo(d-r,h,t,c+o,t,c)},CanvasRenderingContext2D.prototype.database=function(t,e,i,n){var s=1/3,r=i,o=n*s,a=.5522848,h=r/2*a,d=o/2*a,c=t+r,u=e+o,l=t+r/2,p=e+o/2,f=e+(n-o/2),m=e+n;this.beginPath(),this.moveTo(c,p),this.bezierCurveTo(c,p+d,l+h,u,l,u),this.bezierCurveTo(l-h,u,t,p+d,t,p),this.bezierCurveTo(t,p-d,l-h,e,l,e),this.bezierCurveTo(l+h,e,c,p-d,c,p),this.lineTo(c,f),this.bezierCurveTo(c,f+d,l+h,m,l,m),this.bezierCurveTo(l-h,m,t,f+d,t,f),this.lineTo(t,p)},CanvasRenderingContext2D.prototype.arrow=function(t,e,i,n){var s=t-n*Math.cos(i),r=e-n*Math.sin(i),o=t-.9*n*Math.cos(i),a=e-.9*n*Math.sin(i),h=s+n/3*Math.cos(i+.5*Math.PI),d=r+n/3*Math.sin(i+.5*Math.PI),c=s+n/3*Math.cos(i-.5*Math.PI),u=r+n/3*Math.sin(i-.5*Math.PI);this.beginPath(),this.moveTo(t,e),this.lineTo(h,d),this.lineTo(o,a),this.lineTo(c,u),this.closePath()},CanvasRenderingContext2D.prototype.dashedLine=function(t,e,i,n,s){s||(s=[10,5]),0==l&&(l=.001);var r=s.length;this.moveTo(t,e);for(var o=i-t,a=n-e,h=a/o,d=Math.sqrt(o*o+a*a),c=0,u=!0;d>=.1;){var l=s[c++%r];l>d&&(l=d);var p=Math.sqrt(l*l/(1+h*h));0>o&&(p=-p),t+=p,e+=h*p,this[u?"lineTo":"moveTo"](t,e),d-=l,u=!u}}),M.prototype.attachEdge=function(t){-1==this.edges.indexOf(t)&&this.edges.push(t),this._updateMass()},M.prototype.detachEdge=function(t){var e=this.edges.indexOf(t);-1!=e&&this.edges.splice(e,1),this._updateMass()},M.prototype._updateMass=function(){this.mass=50+20*this.edges.length},M.prototype.setProperties=function(t,e){if(t){if(void 0!=t.id&&(this.id=t.id),void 0!=t.label&&(this.label=t.label),void 0!=t.title&&(this.title=t.title),void 0!=t.group&&(this.group=t.group),void 0!=t.x&&(this.x=t.x),void 0!=t.y&&(this.y=t.y),void 0!=t.value&&(this.value=t.value),void 0===this.id)throw"Node must have an id";if(this.group){var i=this.grouplist.get(this.group);for(var n in i)i.hasOwnProperty(n)&&(this[n]=i[n])}if(void 0!=t.shape&&(this.shape=t.shape),void 0!=t.image&&(this.image=t.image),void 0!=t.radius&&(this.radius=t.radius),void 0!=t.color&&(this.color=M.parseColor(t.color)),void 0!=t.fontColor&&(this.fontColor=t.fontColor),void 0!=t.fontSize&&(this.fontSize=t.fontSize),void 0!=t.fontFace&&(this.fontFace=t.fontFace),void 0!=this.image){if(!this.imagelist)throw"No imagelist provided";this.imageObj=this.imagelist.load(this.image)}switch(this.xFixed=this.xFixed||void 0!=t.x,this.yFixed=this.yFixed||void 0!=t.y,this.radiusFixed=this.radiusFixed||void 0!=t.radius,"image"==this.shape&&(this.radiusMin=e.nodes.widthMin,this.radiusMax=e.nodes.widthMax),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;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}this._reset()}},M.parseColor=function(t){var e;return A.isString(t)?e={border:t,background:t,highlight:{border:t,background:t}}:(e={},e.background=t.background||"white",e.border=t.border||e.background,A.isString(t.highlight)?e.highlight={border:t.highlight,background:t.highlight}:(e.highlight={},e.highlight.background=t.highlight&&t.highlight.background||e.background,e.highlight.border=t.highlight&&t.highlight.border||e.border)),e},M.prototype.select=function(){this.selected=!0,this._reset()},M.prototype.unselect=function(){this.selected=!1,this._reset()},M.prototype._reset=function(){this.width=void 0,this.height=void 0},M.prototype.getTitle=function(){return this.title},M.prototype.distanceToBorder=function(t,e){var i=1;switch(this.width||this.resize(t),this.shape){case"circle":case"dot":return this.radius+i;case"ellipse":var n=this.width/2,s=this.height/2,r=Math.sin(e)*n,o=Math.cos(e)*s;return n*s/Math.sqrt(r*r+o*o);case"box":case"image":case"text":default:return this.width?Math.min(Math.abs(this.width/2/Math.cos(e)),Math.abs(this.height/2/Math.sin(e)))+i:0}},M.prototype._setForce=function(t,e){this.fx=t,this.fy=e},M.prototype._addForce=function(t,e){this.fx+=t,this.fy+=e},M.prototype.discreteStep=function(t){if(!this.xFixed){var e=-this.damping*this.vx,i=(this.fx+e)/this.mass;this.vx+=i/t,this.x+=this.vx/t}if(!this.yFixed){var n=-this.damping*this.vy,s=(this.fy+n)/this.mass;this.vy+=s/t,this.y+=this.vy/t}},M.prototype.isFixed=function(){return this.xFixed&&this.yFixed},M.prototype.isMoving=function(t){return Math.abs(this.vx)>t||Math.abs(this.vy)>t||!this.xFixed&&Math.abs(this.fx)>this.minForce||!this.yFixed&&Math.abs(this.fy)>this.minForce},M.prototype.isSelected=function(){return this.selected},M.prototype.getValue=function(){return this.value},M.prototype.getDistance=function(t,e){var i=this.x-t,n=this.y-e;return Math.sqrt(i*i+n*n)},M.prototype.setValueRange=function(t,e){if(!this.radiusFixed&&void 0!==this.value)if(e==t)this.radius=(this.radiusMin+this.radiusMax)/2;else{var i=(this.radiusMax-this.radiusMin)/(e-t);this.radius=(this.value-t)*i+this.radiusMin}},M.prototype.draw=function(){throw"Draw method not initialized for node"},M.prototype.resize=function(){throw"Resize method not initialized for node"},M.prototype.isOverlappingWith=function(t){return this.leftt.left&&this.topt.top},M.prototype._resizeImage=function(){if(!this.width){var t,e;if(this.value){var i=this.imageObj.height/this.imageObj.width;t=this.radius||this.imageObj.width,e=this.radius*i||this.imageObj.height}else t=this.imageObj.width,e=this.imageObj.height;this.width=t,this.height=e}},M.prototype._drawImage=function(t){this._resizeImage(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2;var e;this.imageObj?(t.drawImage(this.imageObj,this.left,this.top,this.width,this.height),e=this.y+this.height/2):e=this.y,this._label(t,this.label,this.x,e,void 0,"top")},M.prototype._resizeBox=function(t){if(!this.width){var e=5,i=this.getTextSize(t);this.width=i.width+2*e,this.height=i.height+2*e}},M.prototype._drawBox=function(t){this._resizeBox(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.selected?this.color.highlight.border:this.color.border,t.fillStyle=this.selected?this.color.highlight.background:this.color.background,t.lineWidth=this.selected?2:1,t.roundRect(this.left,this.top,this.width,this.height,this.radius),t.fill(),t.stroke(),this._label(t,this.label,this.x,this.y)},M.prototype._resizeDatabase=function(t){if(!this.width){var e=5,i=this.getTextSize(t),n=i.width+2*e;this.width=n,this.height=n}},M.prototype._drawDatabase=function(t){this._resizeDatabase(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.selected?this.color.highlight.border:this.color.border,t.fillStyle=this.selected?this.color.highlight.background:this.color.background,t.lineWidth=this.selected?2:1,t.database(this.x-this.width/2,this.y-.5*this.height,this.width,this.height),t.fill(),t.stroke(),this._label(t,this.label,this.x,this.y)},M.prototype._resizeCircle=function(t){if(!this.width){var e=5,i=this.getTextSize(t),n=Math.max(i.width,i.height)+2*e;this.radius=n/2,this.width=n,this.height=n}},M.prototype._drawCircle=function(t){this._resizeCircle(t),this.left=this.x-this.width/2,this.top=this.y-this.height/2,t.strokeStyle=this.selected?this.color.highlight.border:this.color.border,t.fillStyle=this.selected?this.color.highlight.background:this.color.background,t.lineWidth=this.selected?2:1,t.circle(this.x,this.y,this.radius),t.fill(),t.stroke(),this._label(t,this.label,this.x,this.y)},M.prototype._resizeEllipse=function(t){if(!this.width){var e=this.getTextSize(t);this.width=1.5*e.width,this.height=2*e.height,this.widthc;c++)t.fillText(o[c],i,d),d+=h}},M.prototype.getTextSize=function(t){if(void 0!=this.label){t.font=(this.selected?"bold ":"")+this.fontSize+"px "+this.fontFace;for(var e=this.label.split("\n"),i=(this.fontSize+4)*e.length,n=0,s=0,r=e.length;r>s;s++)n=Math.max(n,t.measureText(e[s]).width);return{width:n,height:i}}return{width:0,height:0}},C.prototype.setProperties=function(t,e){if(t)switch(void 0!=t.from&&(this.fromId=t.from),void 0!=t.to&&(this.toId=t.to),void 0!=t.id&&(this.id=t.id),void 0!=t.style&&(this.style=t.style),void 0!=t.label&&(this.label=t.label),this.label&&(this.fontSize=e.edges.fontSize,this.fontFace=e.edges.fontFace,this.fontColor=e.edges.fontColor,void 0!=t.fontColor&&(this.fontColor=t.fontColor),void 0!=t.fontSize&&(this.fontSize=t.fontSize),void 0!=t.fontFace&&(this.fontFace=t.fontFace)),void 0!=t.title&&(this.title=t.title),void 0!=t.width&&(this.width=t.width),void 0!=t.value&&(this.value=t.value),void 0!=t.length&&(this.length=t.length),t.dash&&(void 0!=t.dash.length&&(this.dash.length=t.dash.length),void 0!=t.dash.gap&&(this.dash.gap=t.dash.gap),void 0!=t.dash.altLength&&(this.dash.altLength=t.dash.altLength)),void 0!=t.color&&(this.color=t.color),this.connect(),this.widthFixed=this.widthFixed||void 0!=t.width,this.lengthFixed=this.lengthFixed||void 0!=t.length,this.stiffness=1/this.length,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}},C.prototype.connect=function(){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.connected?(this.from.attachEdge(this),this.to.attachEdge(this)):(this.from&&this.from.detachEdge(this),this.to&&this.to.detachEdge(this))},C.prototype.disconnect=function(){this.from&&(this.from.detachEdge(this),this.from=null),this.to&&(this.to.detachEdge(this),this.to=null),this.connected=!1},C.prototype.getTitle=function(){return this.title},C.prototype.getValue=function(){return this.value},C.prototype.setValueRange=function(t,e){if(!this.widthFixed&&void 0!==this.value){var i=(this.widthMax-this.widthMin)/(e-t);this.width=(this.value-t)*i+this.widthMin}},C.prototype.draw=function(){throw"Method draw not initialized in edge"},C.prototype.isOverlappingWith=function(t){var e=10,i=this.from.x,n=this.from.y,s=this.to.x,r=this.to.y,o=t.left,a=t.top,h=C._dist(i,n,s,r,o,a);return e>h},C.prototype._drawLine=function(t){t.strokeStyle=this.color,t.lineWidth=this._getLineWidth();var e;if(this.from!=this.to)this._line(t),this.label&&(e=this._pointOnLine(.5),this._label(t,this.label,e.x,e.y));else{var i,n,s=this.length/4,r=this.from;r.width||r.resize(t),r.width>r.height?(i=r.x+r.width/2,n=r.y-s):(i=r.x+s,n=r.y-r.height/2),this._circle(t,i,n,s),e=this._pointOnCircle(i,n,s,.5),this._label(t,this.label,e.x,e.y)}},C.prototype._getLineWidth=function(){return this.from.selected||this.to.selected?Math.min(2*this.width,this.widthMax):this.width},C.prototype._line=function(t){t.beginPath(),t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y),t.stroke()},C.prototype._circle=function(t,e,i,n){t.beginPath(),t.arc(e,i,n,0,2*Math.PI,!1),t.stroke()},C.prototype._label=function(t,e,i,n){if(e){t.font=(this.from.selected||this.to.selected?"bold ":"")+this.fontSize+"px "+this.fontFace,t.fillStyle="white";var s=t.measureText(e).width,r=this.fontSize,o=i-s/2,a=n-r/2;t.fillRect(o,a,s,r),t.fillStyle=this.fontColor||"black",t.textAlign="left",t.textBaseline="top",t.fillText(e,o,a)}},C.prototype._drawDashLine=function(t){if(t.strokeStyle=this.color,t.lineWidth=this._getLineWidth(),t.beginPath(),t.lineCap="round",void 0!=this.dash.altLength?t.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]):void 0!=this.dash.length&&void 0!=this.dash.gap?t.dashedLine(this.from.x,this.from.y,this.to.x,this.to.y,[this.dash.length,this.dash.gap]):(t.moveTo(this.from.x,this.from.y),t.lineTo(this.to.x,this.to.y)),t.stroke(),this.label){var e=this._pointOnLine(.5);this._label(t,this.label,e.x,e.y)}},C.prototype._pointOnLine=function(t){return{x:(1-t)*this.from.x+t*this.to.x,y:(1-t)*this.from.y+t*this.to.y}},C.prototype._pointOnCircle=function(t,e,i,n){var s=2*(n-3/8)*Math.PI;return{x:t+i*Math.cos(s),y:e-i*Math.sin(s)}},C.prototype._drawArrowCenter=function(t){var e;if(t.strokeStyle=this.color,t.fillStyle=this.color,t.lineWidth=this._getLineWidth(),this.from!=this.to){this._line(t);var i=Math.atan2(this.to.y-this.from.y,this.to.x-this.from.x),n=10+5*this.width;e=this._pointOnLine(.5),t.arrow(e.x,e.y,i,n),t.fill(),t.stroke(),this.label&&(e=this._pointOnLine(.5),this._label(t,this.label,e.x,e.y))}else{var s,r,o=this.length/4,a=this.from;a.width||a.resize(t),a.width>a.height?(s=a.x+a.width/2,r=a.y-o):(s=a.x+o,r=a.y-a.height/2),this._circle(t,s,r,o);var i=.2*Math.PI,n=10+5*this.width;e=this._pointOnCircle(s,r,o,.5),t.arrow(e.x,e.y,i,n),t.fill(),t.stroke(),this.label&&(e=this._pointOnCircle(s,r,o,.5),this._label(t,this.label,e.x,e.y))}},C.prototype._drawArrow=function(t){t.strokeStyle=this.color,t.fillStyle=this.color,t.lineWidth=this._getLineWidth();var e,i;if(this.from!=this.to){e=Math.atan2(this.to.y-this.from.y,this.to.x-this.from.x);var n=this.to.x-this.from.x,s=this.to.y-this.from.y,r=Math.sqrt(n*n+s*s),o=this.from.distanceToBorder(t,e+Math.PI),a=(r-o)/r,h=a*this.from.x+(1-a)*this.to.x,d=a*this.from.y+(1-a)*this.to.y,c=this.to.distanceToBorder(t,e),u=(r-c)/r,l=(1-u)*this.from.x+u*this.to.x,p=(1-u)*this.from.y+u*this.to.y;if(t.beginPath(),t.moveTo(h,d),t.lineTo(l,p),t.stroke(),i=10+5*this.width,t.arrow(l,p,e,i),t.fill(),t.stroke(),this.label){var f=this._pointOnLine(.5);this._label(t,this.label,f.x,f.y)}}else{var m,g,v,y=this.from,w=this.length/4;y.width||y.resize(t),y.width>y.height?(m=y.x+y.width/2,g=y.y-w,v={x:m,y:y.y,angle:.9*Math.PI}):(m=y.x+w,g=y.y-y.height/2,v={x:y.x,y:g,angle:.6*Math.PI}),t.beginPath(),t.arc(m,g,w,0,2*Math.PI,!1),t.stroke(),i=10+5*this.width,t.arrow(v.x,v.y,v.angle,i),t.fill(),t.stroke(),this.label&&(f=this._pointOnCircle(m,g,w,.5),this._label(t,this.label,f.x,f.y))}},C._dist=function(t,e,i,n,s,r){var o=i-t,a=n-e,h=o*o+a*a,d=((s-t)*o+(r-e)*a)/h;d>1?d=1:0>d&&(d=0);var c=t+d*o,u=e+d*a,l=c-s,p=u-r;return Math.sqrt(l*l+p*p)},O.prototype.setPosition=function(t,e){this.x=parseInt(t),this.y=parseInt(e)},O.prototype.setText=function(t){this.frame.innerHTML=t},O.prototype.show=function(t){if(void 0===t&&(t=!0),t){var e=this.frame.clientHeight,i=this.frame.clientWidth,n=this.frame.parentNode.clientHeight,s=this.frame.parentNode.clientWidth,r=this.y-e;r+e+this.padding>n&&(r=n-e-this.padding),rs&&(o=s-i-this.padding),o0?s[s.length-1]:null},N.prototype._getPointer=function(t){return{x:t.pageX-R.util.getAbsoluteLeft(this.frame.canvas),y:t.pageY-R.util.getAbsoluteTop(this.frame.canvas)}},N.prototype._onTouch=function(t){this.drag.pointer=this._getPointer(t.gesture.touches[0]),this.drag.pinched=!1,this.pinch.scale=this._getScale()},N.prototype._onDragStart=function(){var t=this.drag;t.selection=[],t.translation=this._getTranslation(),t.nodeId=this._getNodeAt(t.pointer);var e=this.nodes[t.nodeId];if(e){e.isSelected()||this._selectNodes([t.nodeId]);var i=this;this.selection.forEach(function(e){var n=i.nodes[e];if(n){var s={id:e,node:n,x:n.x,y:n.y,xFixed:n.xFixed,yFixed:n.yFixed};n.xFixed=!0,n.yFixed=!0,t.selection.push(s)}})}},N.prototype._onDrag=function(t){if(!this.drag.pinched){var e=this._getPointer(t.gesture.touches[0]),i=this,n=this.drag,s=n.selection;if(s&&s.length){var r=e.x-n.pointer.x,o=e.y-n.pointer.y;s.forEach(function(t){var e=t.node;t.xFixed||(e.x=i._canvasToX(i._xToCanvas(t.x)+r)),t.yFixed||(e.y=i._canvasToY(i._yToCanvas(t.y)+o))}),this.moving||(this.moving=!0,this.start())}else{var a=e.x-this.drag.pointer.x,h=e.y-this.drag.pointer.y;this._setTranslation(this.drag.translation.x+a,this.drag.translation.y+h),this._redraw(),this.moved=!0}}},N.prototype._onDragEnd=function(){var t=this.drag.selection;t&&t.forEach(function(t){t.node.xFixed=t.xFixed,t.node.yFixed=t.yFixed})},N.prototype._onTap=function(t){var e=this._getPointer(t.gesture.touches[0]),i=this._getNodeAt(e),n=this.nodes[i];n?(this._selectNodes([i]),this.moving||this._redraw()):(this._unselectNodes(),this._redraw())},N.prototype._onHold=function(t){var e=this._getPointer(t.gesture.touches[0]),i=this._getNodeAt(e),n=this.nodes[i];if(n){if(n.isSelected())this._unselectNodes([i]);else{var s=!0;this._selectNodes([i],s)}this.moving||this._redraw()}},N.prototype._onPinch=function(t){var e=this._getPointer(t.gesture.center);this.drag.pinched=!0,"scale"in this.pinch||(this.pinch.scale=1);var i=this.pinch.scale*t.gesture.scale;this._zoom(i,e)},N.prototype._zoom=function(t,e){var i=this._getScale();.01>t&&(t=.01),t>10&&(t=10);var n=this._getTranslation(),s=t/i,r=(1-s)*e.x+n.x*s,o=(1-s)*e.y+n.y*s;return this._setScale(t),this._setTranslation(r,o),this._redraw(),t},N.prototype._onMouseWheel=function(t){var e=0;if(t.wheelDelta?e=t.wheelDelta/120:t.detail&&(e=-t.detail/3),e){"mouswheelScale"in this.pinch||(this.pinch.mouswheelScale=1);var i=this.pinch.mouswheelScale,n=e/10;0>e&&(n/=1-n),i*=1+n;var s=A.fakeGesture(this,t),r=this._getPointer(s.center);i=this._zoom(i,r),this.pinch.mouswheelScale=i}t.preventDefault()},N.prototype._onMouseMoveTitle=function(t){var e=A.fakeGesture(this,t),i=this._getPointer(e.center);this.popupNode&&this._checkHidePopup(i);var n=this,s=function(){n._checkShowPopup(i)};this.popupTimer&&clearInterval(this.popupTimer),this.leftButtonDown||(this.popupTimer=setTimeout(s,300))},N.prototype._checkShowPopup=function(t){var e,i={left:this._canvasToX(t.x),top:this._canvasToY(t.y),right:this._canvasToX(t.x),bottom:this._canvasToY(t.y)},n=this.popupNode;if(void 0==this.popupNode){var s=this.nodes;for(e in s)if(s.hasOwnProperty(e)){var r=s[e];if(void 0!=r.getTitle()&&r.isOverlappingWith(i)){this.popupNode=r;break}}}if(void 0==this.popupNode){var o=this.edges;for(e in o)if(o.hasOwnProperty(e)){var a=o[e];if(a.connected&&void 0!=a.getTitle()&&a.isOverlappingWith(i)){this.popupNode=a;break}}}if(this.popupNode){if(this.popupNode!=n){var h=this;h.popup||(h.popup=new O(h.frame)),h.popup.setPosition(t.x-3,t.y-3),h.popup.setText(h.popupNode.getTitle()),h.popup.show()}}else this.popup&&this.popup.hide()},N.prototype._checkHidePopup=function(t){this.popupNode&&this._getNodeAt(t)||(this.popupNode=void 0,this.popup&&this.popup.hide())},N.prototype._unselectNodes=function(t,e){var i,n,s,r=!1;if(t)for(i=0,n=t.length;n>i;i++){s=t[i],this.nodes[s].unselect();for(var o=0;oi;i++)s=this.selection[i],this.nodes[s].unselect(),r=!0;this.selection=[]}return!r||1!=e&&void 0!=e||this._trigger("select"),r},N.prototype._selectNodes=function(t,e){var i,n,s=!1,r=!0;if(t.length!=this.selection.length)r=!1;else for(i=0,n=Math.min(t.length,this.selection.length);n>i;i++)if(t[i]!=this.selection[i]){r=!1;break}if(r)return s;if(void 0==e||0==e){var o=!1;s=this._unselectNodes(void 0,o)}for(i=0,n=t.length;n>i;i++){var a=t[i],h=-1!=this.selection.indexOf(a);h||(this.nodes[a].select(),this.selection.push(a),s=!0)}return s&&this._trigger("select"),s},N.prototype._getNodesOverlappingWith=function(t){var e=this.nodes,i=[];for(var n in e)e.hasOwnProperty(n)&&e[n].isOverlappingWith(t)&&i.push(n);return i},N.prototype.getSelection=function(){return this.selection.concat([])},N.prototype.setSelection=function(t){var e,i,n;if(!t||void 0==t.length)throw"Selection must be an array with ids";for(e=0,i=this.selection.length;i>e;e++)n=this.selection[e],this.nodes[n].unselect();for(this.selection=[],e=0,i=t.length;i>e;e++){n=t[e];var s=this.nodes[n];if(!s)throw new RangeError('Node with id "'+n+'" not found');s.select(),this.selection.push(n)}this.redraw()},N.prototype._updateSelection=function(){for(var t=0;ti;i++)for(var s=t[i],r=s.edges,o=0,a=r.length;a>o;o++){var h=r[o],d=null;h.from==s?d=h.to:h.to==s&&(d=h.from);var c,u;if(d)for(c=0,u=t.length;u>c;c++)if(t[c]==d){d=null;break}if(d)for(c=0,u=e.length;u>c;c++)if(e[c]==d){d=null;break}d&&e.push(d)}return e}void 0==t&&(t=1);var i=[],n=this.nodes;for(var s in n)if(n.hasOwnProperty(s)){for(var r=[n[s]],o=0;t>o;o++)r=r.concat(e(r));i.push(r)}for(var a=[],h=0,d=i.length;d>h;h++)a.push(i[h].length);return a},N.prototype.setSize=function(t,e){this.frame.style.width=t,this.frame.style.height=e,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},N.prototype._setNodes=function(t){var e=this.nodesData;if(t instanceof r||t instanceof o)this.nodesData=t;else if(t instanceof Array)this.nodesData=new r,this.nodesData.add(t);else{if(t)throw new TypeError("Array or DataSet expected");this.nodesData=new r}if(e&&A.forEach(this.nodesListeners,function(t,i){e.unsubscribe(i,t)}),this.nodes={},this.nodesData){var i=this;A.forEach(this.nodesListeners,function(t,e){i.nodesData.subscribe(e,t)});var n=this.nodesData.getIds();this._addNodes(n)}this._updateSelection()},N.prototype._addNodes=function(t){for(var e,i=0,n=t.length;n>i;i++){e=t[i];var s=this.nodesData.get(e),r=new M(s,this.images,this.groups,this.constants);if(this.nodes[e]=r,!r.isFixed()){var o=2*this.constants.edges.length,a=t.length,h=2*Math.PI*(i/a);r.x=o*Math.cos(h),r.y=o*Math.sin(h),this.moving=!0}}this._reconnectEdges(),this._updateValueRange(this.nodes)},N.prototype._updateNodes=function(t){for(var e=this.nodes,i=this.nodesData,n=0,s=t.length;s>n;n++){var r=t[n],o=e[r],a=i.get(r);o?o.setProperties(a,this.constants):(o=new M(properties,this.images,this.groups,this.constants),e[r]=o,o.isFixed()||(this.moving=!0))}this._reconnectEdges(),this._updateValueRange(e)},N.prototype._removeNodes=function(t){for(var e=this.nodes,i=0,n=t.length;n>i;i++){var s=t[i];delete e[s]}this._reconnectEdges(),this._updateSelection(),this._updateValueRange(e)},N.prototype._setEdges=function(t){var e=this.edgesData;if(t instanceof r||t instanceof o)this.edgesData=t;else if(t instanceof Array)this.edgesData=new r,this.edgesData.add(t);else{if(t)throw new TypeError("Array or DataSet expected");this.edgesData=new r}if(e&&A.forEach(this.edgesListeners,function(t,i){e.unsubscribe(i,t)}),this.edges={},this.edgesData){var i=this;A.forEach(this.edgesListeners,function(t,e){i.edgesData.subscribe(e,t)});var n=this.edgesData.getIds();this._addEdges(n)}this._reconnectEdges()},N.prototype._addEdges=function(t){for(var e=this.edges,i=this.edgesData,n=0,s=t.length;s>n;n++){var r=t[n],o=e[r];o&&o.disconnect();var a=i.get(r);e[r]=new C(a,this,this.constants)}this.moving=!0,this._updateValueRange(e)},N.prototype._updateEdges=function(t){for(var e=this.edges,i=this.edgesData,n=0,s=t.length;s>n;n++){var r=t[n],o=i.get(r),a=e[r];a?(a.disconnect(),a.setProperties(o,this.constants),a.connect()):(a=new C(o,this,this.constants),this.edges[r]=a)}this.moving=!0,this._updateValueRange(e)},N.prototype._removeEdges=function(t){for(var e=this.edges,i=0,n=t.length;n>i;i++){var s=t[i],r=e[s];r&&(r.disconnect(),delete e[s])}this.moving=!0,this._updateValueRange(e)},N.prototype._reconnectEdges=function(){var t,e=this.nodes,i=this.edges;for(t in e)e.hasOwnProperty(t)&&(e[t].edges=[]);for(t in i)if(i.hasOwnProperty(t)){var n=i[t];n.from=null,n.to=null,n.connect()}},N.prototype._updateValueRange=function(t){var e,i=void 0,n=void 0;for(e in t)if(t.hasOwnProperty(e)){var s=t[e].getValue();void 0!==s&&(i=void 0===i?s:Math.min(s,i),n=void 0===n?s:Math.max(s,n))}if(void 0!==i&&void 0!==n)for(e in t)t.hasOwnProperty(e)&&t[e].setValueRange(i,n)},N.prototype.redraw=function(){this.setSize(this.width,this.height),this._redraw()},N.prototype._redraw=function(){var t=this.frame.canvas.getContext("2d"),e=this.frame.canvas.width,i=this.frame.canvas.height;t.clearRect(0,0,e,i),t.save(),t.translate(this.translation.x,this.translation.y),t.scale(this.scale,this.scale),this._drawEdges(t),this._drawNodes(t),t.restore()},N.prototype._setTranslation=function(t,e){void 0===this.translation&&(this.translation={x:0,y:0}),void 0!==t&&(this.translation.x=t),void 0!==e&&(this.translation.y=e)},N.prototype._getTranslation=function(){return{x:this.translation.x,y:this.translation.y}},N.prototype._setScale=function(t){this.scale=t},N.prototype._getScale=function(){return this.scale},N.prototype._canvasToX=function(t){return(t-this.translation.x)/this.scale},N.prototype._xToCanvas=function(t){return t*this.scale+this.translation.x},N.prototype._canvasToY=function(t){return(t-this.translation.y)/this.scale},N.prototype._yToCanvas=function(t){return t*this.scale+this.translation.y},N.prototype._drawNodes=function(t){var e=this.nodes,i=[];for(var n in e)e.hasOwnProperty(n)&&(e[n].isSelected()?i.push(n):e[n].draw(t));for(var s=0,r=i.length;r>s;s++)e[i[s]].draw(t)},N.prototype._drawEdges=function(t){var e=this.edges;for(var i in e)if(e.hasOwnProperty(i)){var n=e[i];n.connected&&e[i].draw(t)}},N.prototype._doStabilize=function(){for(var t=(new Date,0),e=this.constants.minVelocity,i=!1;!i&&t0&&e==s.EVENT_END?e=s.EVENT_MOVE:c||(e=s.EVENT_END),c||null===r?r=h:h=r,i.call(s.detection,n.collectEventData(t,e,h)),s.HAS_POINTEREVENTS&&e==s.EVENT_END&&(c=s.PointerEvent.updatePointer(e,h))),c||(r=null,o=!1,a=!1,s.PointerEvent.reset())}})},determineEventTypes:function(){var t;t=s.HAS_POINTEREVENTS?s.PointerEvent.getEvents():s.NO_MOUSEEVENTS?["touchstart","touchmove","touchend touchcancel"]:["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],s.EVENT_TYPES[s.EVENT_START]=t[0],s.EVENT_TYPES[s.EVENT_MOVE]=t[1],s.EVENT_TYPES[s.EVENT_END]=t[2]},getTouchList:function(t){return s.HAS_POINTEREVENTS?s.PointerEvent.getTouchList():t.touches?t.touches:[{identifier:1,pageX:t.pageX,pageY:t.pageY,target:t.target}]},collectEventData:function(t,e,i){var n=this.getTouchList(i,e),r=s.POINTER_TOUCH;return(i.type.match(/mouse/)||s.PointerEvent.matchType(s.POINTER_MOUSE,i))&&(r=s.POINTER_MOUSE),{center:s.utils.getCenter(n),timeStamp:(new Date).getTime(),target:i.target,touches:n,eventType:e,pointerType:r,srcEvent:i,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return s.detection.stopDetect()}}}},s.PointerEvent={pointers:{},getTouchList:function(){var t=this,e=[];return Object.keys(t.pointers).sort().forEach(function(i){e.push(t.pointers[i])}),e},updatePointer:function(t,e){return t==s.EVENT_END?this.pointers={}:(e.identifier=e.pointerId,this.pointers[e.pointerId]=e),Object.keys(this.pointers).length},matchType:function(t,e){if(!e.pointerType)return!1;var i={};return i[s.POINTER_MOUSE]=e.pointerType==e.MSPOINTER_TYPE_MOUSE||e.pointerType==s.POINTER_MOUSE,i[s.POINTER_TOUCH]=e.pointerType==e.MSPOINTER_TYPE_TOUCH||e.pointerType==s.POINTER_TOUCH,i[s.POINTER_PEN]=e.pointerType==e.MSPOINTER_TYPE_PEN||e.pointerType==s.POINTER_PEN,i[t]},getEvents:function(){return["pointerdown MSPointerDown","pointermove MSPointerMove","pointerup pointercancel MSPointerUp MSPointerCancel"]},reset:function(){this.pointers={}}},s.utils={extend:function(t,e,n){for(var s in e)t[s]!==i&&n||(t[s]=e[s]);return t},hasParent:function(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1},getCenter:function(t){for(var e=[],i=[],n=0,s=t.length;s>n;n++)e.push(t[n].pageX),i.push(t[n].pageY);return{pageX:(Math.min.apply(Math,e)+Math.max.apply(Math,e))/2,pageY:(Math.min.apply(Math,i)+Math.max.apply(Math,i))/2}},getVelocity:function(t,e,i){return{x:Math.abs(e/t)||0,y:Math.abs(i/t)||0}},getAngle:function(t,e){var i=e.pageY-t.pageY,n=e.pageX-t.pageX;return 180*Math.atan2(i,n)/Math.PI},getDirection:function(t,e){var i=Math.abs(t.pageX-e.pageX),n=Math.abs(t.pageY-e.pageY);return i>=n?t.pageX-e.pageX>0?s.DIRECTION_LEFT:s.DIRECTION_RIGHT:t.pageY-e.pageY>0?s.DIRECTION_UP:s.DIRECTION_DOWN},getDistance:function(t,e){var i=e.pageX-t.pageX,n=e.pageY-t.pageY;return Math.sqrt(i*i+n*n)},getScale:function(t,e){return t.length>=2&&e.length>=2?this.getDistance(e[0],e[1])/this.getDistance(t[0],t[1]):1},getRotation:function(t,e){return t.length>=2&&e.length>=2?this.getAngle(e[1],e[0])-this.getAngle(t[1],t[0]):0},isVertical:function(t){return t==s.DIRECTION_UP||t==s.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(t,e){var i,n=["webkit","khtml","moz","ms","o",""];if(e&&t.style){for(var s=0;si;i++){var r=this.gestures[i];if(!this.stopped&&e[r.name]!==!1&&r.handler.call(r,t,this.current.inst)===!1){this.stopDetect();break}}return this.current&&(this.current.lastEvent=t),t.eventType==s.EVENT_END&&!t.touches.length-1&&this.stopDetect(),t}},stopDetect:function(){this.previous=s.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(t){var e=this.current.startEvent;
+if(e&&(t.touches.length!=e.touches.length||t.touches===e.touches)){e.touches=[];for(var i=0,n=t.touches.length;n>i;i++)e.touches.push(s.utils.extend({},t.touches[i]))}var r=t.timeStamp-e.timeStamp,o=t.center.pageX-e.center.pageX,a=t.center.pageY-e.center.pageY,h=s.utils.getVelocity(r,o,a);return s.utils.extend(t,{deltaTime:r,deltaX:o,deltaY:a,velocityX:h.x,velocityY:h.y,distance:s.utils.getDistance(e.center,t.center),angle:s.utils.getAngle(e.center,t.center),direction:s.utils.getDirection(e.center,t.center),scale:s.utils.getScale(e.touches,t.touches),rotation:s.utils.getRotation(e.touches,t.touches),startEvent:e}),t},register:function(t){var e=t.defaults||{};return e[t.name]===i&&(e[t.name]=!0),s.utils.extend(s.defaults,e,!0),t.index=t.index||1e3,this.gestures.push(t),this.gestures.sort(function(t,e){return t.indexe.index?1:0}),this.gestures}},s.gestures=s.gestures||{},s.gestures.Hold={name:"hold",index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(t,e){switch(t.eventType){case s.EVENT_START:clearTimeout(this.timer),s.detection.current.name=this.name,this.timer=setTimeout(function(){"hold"==s.detection.current.name&&e.trigger("hold",t)},e.options.hold_timeout);break;case s.EVENT_MOVE:t.distance>e.options.hold_threshold&&clearTimeout(this.timer);break;case s.EVENT_END:clearTimeout(this.timer)}}},s.gestures.Tap={name:"tap",index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,tap_always:!0,doubletap_distance:20,doubletap_interval:300},handler:function(t,e){if(t.eventType==s.EVENT_END){var i=s.detection.previous,n=!1;if(t.deltaTime>e.options.tap_max_touchtime||t.distance>e.options.tap_max_distance)return;i&&"tap"==i.name&&t.timeStamp-i.lastEvent.timeStamp0&&t.touches.length>e.options.swipe_max_touches)return;(t.velocityX>e.options.swipe_velocity||t.velocityY>e.options.swipe_velocity)&&(e.trigger(this.name,t),e.trigger(this.name+t.direction,t))}}},s.gestures.Drag={name:"drag",index:50,defaults:{drag_min_distance:10,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1,drag_lock_min_distance:25},triggered:!1,handler:function(t,e){if(s.detection.current.name!=this.name&&this.triggered)return e.trigger(this.name+"end",t),this.triggered=!1,void 0;if(!(e.options.drag_max_touches>0&&t.touches.length>e.options.drag_max_touches))switch(t.eventType){case s.EVENT_START:this.triggered=!1;break;case s.EVENT_MOVE:if(t.distancee.options.transform_min_rotation&&e.trigger("rotate",t),i>e.options.transform_min_scale&&(e.trigger("pinch",t),e.trigger("pinch"+(t.scale<1?"in":"out"),t));break;case s.EVENT_END:this.triggered&&e.trigger(this.name+"end",t),this.triggered=!1}}},s.gestures.Touch={name:"touch",index:-1/0,defaults:{prevent_default:!1,prevent_mouseevents:!1},handler:function(t,e){return e.options.prevent_mouseevents&&t.pointerType==s.POINTER_MOUSE?(t.stopDetect(),void 0):(e.options.prevent_default&&t.preventDefault(),t.eventType==s.EVENT_START&&e.trigger(this.name,t),void 0)}},s.gestures.Release={name:"release",index:1/0,handler:function(t,e){t.eventType==s.EVENT_END&&e.trigger(this.name,t)}},"object"==typeof e&&"object"==typeof e.exports?e.exports=s:(t.Hammer=s,"function"==typeof t.define&&t.define.amd&&t.define("hammer",[],function(){return s}))}(this)},{}],3:[function(e,i){(function(n){function s(t,e){return function(i){return u(t.call(this,i),e)}}function r(t,e){return function(i){return this.lang().ordinal(t.call(this,i),e)}}function o(){}function a(t){T(t),d(this,t)}function h(t){var e=v(t),i=e.year||0,n=e.month||0,s=e.week||0,r=e.day||0,o=e.hour||0,a=e.minute||0,h=e.second||0,d=e.millisecond||0;this._milliseconds=+d+1e3*h+6e4*a+36e5*o,this._days=+r+7*s,this._months=+n+12*i,this._data={},this._bubble()}function d(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return e.hasOwnProperty("toString")&&(t.toString=e.toString),e.hasOwnProperty("valueOf")&&(t.valueOf=e.valueOf),t}function c(t){return 0>t?Math.ceil(t):Math.floor(t)}function u(t,e,i){for(var n=Math.abs(t)+"",s=t>=0;n.lengthn;n++)(i&&t[n]!==e[n]||!i&&w(t[n])!==w(e[n]))&&o++;return o+r}function g(t){if(t){var e=t.toLowerCase().replace(/(.)s$/,"$1");t=Ge[t]||Be[e]||e}return t}function v(t){var e,i,n={};for(i in t)t.hasOwnProperty(i)&&(e=g(i),e&&(n[e]=t[i]));return n}function y(t){var e,i;if(0===t.indexOf("week"))e=7,i="day";else{if(0!==t.indexOf("month"))return;e=12,i="month"}re[t]=function(s,r){var o,a,h=re.fn._lang[t],d=[];if("number"==typeof s&&(r=s,s=n),a=function(t){var e=re().utc().set(i,t);return h.call(re.fn._lang,e,s||"")},null!=r)return a(r);for(o=0;e>o;o++)d.push(a(o));return d}}function w(t){var e=+t,i=0;return 0!==e&&isFinite(e)&&(i=e>=0?Math.floor(e):Math.ceil(e)),i}function _(t,e){return new Date(Date.UTC(t,e+1,0)).getUTCDate()}function b(t){return E(t)?366:365}function E(t){return t%4===0&&t%100!==0||t%400===0}function T(t){var e;t._a&&-2===t._pf.overflow&&(e=t._a[ue]<0||t._a[ue]>11?ue:t._a[le]<1||t._a[le]>_(t._a[ce],t._a[ue])?le:t._a[pe]<0||t._a[pe]>23?pe:t._a[fe]<0||t._a[fe]>59?fe:t._a[me]<0||t._a[me]>59?me:t._a[ge]<0||t._a[ge]>999?ge:-1,t._pf._overflowDayOfYear&&(ce>e||e>le)&&(e=le),t._pf.overflow=e)}function S(t){t._pf={empty:!1,unusedTokens:[],unusedInput:[],overflow:-2,charsLeftOver:0,nullInput:!1,invalidMonth:null,invalidFormat:!1,userInvalidated:!1,iso:!1}}function x(t){return null==t._isValid&&(t._isValid=!isNaN(t._d.getTime())&&t._pf.overflow<0&&!t._pf.empty&&!t._pf.invalidMonth&&!t._pf.nullInput&&!t._pf.invalidFormat&&!t._pf.userInvalidated,t._strict&&(t._isValid=t._isValid&&0===t._pf.charsLeftOver&&0===t._pf.unusedTokens.length)),t._isValid}function D(t){return t?t.toLowerCase().replace("_","-"):t}function M(t,e){return e._isUTC?re(t).zone(e._offset||0):re(t).local()}function C(t,e){return e.abbr=t,ve[t]||(ve[t]=new o),ve[t].set(e),ve[t]}function O(t){delete ve[t]}function N(t){var i,n,s,r,o=0,a=function(t){if(!ve[t]&&ye)try{e("./lang/"+t)}catch(i){}return ve[t]};if(!t)return re.fn._lang;if(!p(t)){if(n=a(t))return n;t=[t]}for(;o0;){if(n=a(r.slice(0,i).join("-")))return n;if(s&&s.length>=i&&m(r,s,!0)>=i-1)break;i--}o++}return re.fn._lang}function L(t){return t.match(/\[[\s\S]/)?t.replace(/^\[|\]$/g,""):t.replace(/\\/g,"")}function I(t){var e,i,n=t.match(Ee);for(e=0,i=n.length;i>e;e++)n[e]=Ke[n[e]]?Ke[n[e]]:L(n[e]);return function(s){var r="";for(e=0;i>e;e++)r+=n[e]instanceof Function?n[e].call(s,t):n[e];return r}}function k(t,e){return t.isValid()?(e=A(e,t.lang()),qe[e]||(qe[e]=I(e)),qe[e](t)):t.lang().invalidDate()}function A(t,e){function i(t){return e.longDateFormat(t)||t}var n=5;for(Te.lastIndex=0;n>=0&&Te.test(t);)t=t.replace(Te,i),Te.lastIndex=0,n-=1;return t}function P(t,e){var i,n=e._strict;switch(t){case"DDDD":return Pe;case"YYYY":case"GGGG":case"gggg":return n?Ye:De;case"YYYYYY":case"YYYYY":case"GGGGG":case"ggggg":return n?Fe:Me;case"S":if(n)return ke;case"SS":if(n)return Ae;case"SSS":case"DDD":return n?Pe:xe;case"MMM":case"MMMM":case"dd":case"ddd":case"dddd":return Oe;case"a":case"A":return N(e._l)._meridiemParse;case"X":return Ie;case"Z":case"ZZ":return Ne;case"T":return Le;case"SSSS":return Ce;case"MM":case"DD":case"YY":case"GG":case"gg":case"HH":case"hh":case"mm":case"ss":case"ww":case"WW":return n?Ae:Se;case"M":case"D":case"d":case"H":case"h":case"m":case"s":case"w":case"W":case"e":case"E":return n?ke:Se;default:return i=new RegExp(j(W(t.replace("\\","")),"i"))}}function Y(t){t=t||"";var e=t.match(Ne)||[],i=e[e.length-1]||[],n=(i+"").match(We)||["-",0,0],s=+(60*n[1])+w(n[2]);return"+"===n[0]?-s:s}function F(t,e,i){var n,s=i._a;switch(t){case"M":case"MM":null!=e&&(s[ue]=w(e)-1);break;case"MMM":case"MMMM":n=N(i._l).monthsParse(e),null!=n?s[ue]=n:i._pf.invalidMonth=e;break;case"D":case"DD":null!=e&&(s[le]=w(e));break;case"DDD":case"DDDD":null!=e&&(i._dayOfYear=w(e));break;case"YY":s[ce]=w(e)+(w(e)>68?1900:2e3);break;case"YYYY":case"YYYYY":case"YYYYYY":s[ce]=w(e);break;case"a":case"A":i._isPm=N(i._l).isPM(e);break;case"H":case"HH":case"h":case"hh":s[pe]=w(e);break;case"m":case"mm":s[fe]=w(e);break;case"s":case"ss":s[me]=w(e);break;case"S":case"SS":case"SSS":case"SSSS":s[ge]=w(1e3*("0."+e));break;case"X":i._d=new Date(1e3*parseFloat(e));break;case"Z":case"ZZ":i._useUTC=!0,i._tzm=Y(e);break;case"w":case"ww":case"W":case"WW":case"d":case"dd":case"ddd":case"dddd":case"e":case"E":t=t.substr(0,1);case"gg":case"gggg":case"GG":case"GGGG":case"GGGGG":t=t.substr(0,2),e&&(i._w=i._w||{},i._w[t]=e)}}function R(t){var e,i,n,s,r,o,a,h,d,c,u=[];if(!t._d){for(n=z(t),t._w&&null==t._a[le]&&null==t._a[ue]&&(r=function(e){var i=parseInt(e,10);return e?e.length<3?i>68?1900+i:2e3+i:i:null==t._a[ce]?re().weekYear():t._a[ce]},o=t._w,null!=o.GG||null!=o.W||null!=o.E?a=J(r(o.GG),o.W||1,o.E,4,1):(h=N(t._l),d=null!=o.d?Z(o.d,h):null!=o.e?parseInt(o.e,10)+h._week.dow:0,c=parseInt(o.w,10)||1,null!=o.d&&db(s)&&(t._pf._overflowDayOfYear=!0),i=X(s,0,t._dayOfYear),t._a[ue]=i.getUTCMonth(),t._a[le]=i.getUTCDate()),e=0;3>e&&null==t._a[e];++e)t._a[e]=u[e]=n[e];for(;7>e;e++)t._a[e]=u[e]=null==t._a[e]?2===e?1:0:t._a[e];u[pe]+=w((t._tzm||0)/60),u[fe]+=w((t._tzm||0)%60),t._d=(t._useUTC?X:q).apply(null,u)}}function H(t){var e;t._d||(e=v(t._i),t._a=[e.year,e.month,e.day,e.hour,e.minute,e.second,e.millisecond],R(t))}function z(t){var e=new Date;return t._useUTC?[e.getUTCFullYear(),e.getUTCMonth(),e.getUTCDate()]:[e.getFullYear(),e.getMonth(),e.getDate()]}function U(t){t._a=[],t._pf.empty=!0;var e,i,n,s,r,o=N(t._l),a=""+t._i,h=a.length,d=0;for(n=A(t._f,o).match(Ee)||[],e=0;e0&&t._pf.unusedInput.push(r),a=a.slice(a.indexOf(i)+i.length),d+=i.length),Ke[s]?(i?t._pf.empty=!1:t._pf.unusedTokens.push(s),F(s,i,t)):t._strict&&!i&&t._pf.unusedTokens.push(s);t._pf.charsLeftOver=h-d,a.length>0&&t._pf.unusedInput.push(a),t._isPm&&t._a[pe]<12&&(t._a[pe]+=12),t._isPm===!1&&12===t._a[pe]&&(t._a[pe]=0),R(t),T(t)}function W(t){return t.replace(/\\(\[)|\\(\])|\[([^\]\[]*)\]|\\(.)/g,function(t,e,i,n,s){return e||i||n||s})}function j(t){return t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")}function V(t){var e,i,n,s,r;if(0===t._f.length)return t._pf.invalidFormat=!0,t._d=new Date(0/0),void 0;for(s=0;sr)&&(n=r,i=e));d(t,i||e)}function G(t){var e,i=t._i,n=Re.exec(i);if(n){for(t._pf.iso=!0,e=4;e>0;e--)if(n[e]){t._f=ze[e-1]+(n[6]||" ");break}for(e=0;4>e;e++)if(Ue[e][1].exec(i)){t._f+=Ue[e][0];break}i.match(Ne)&&(t._f+="Z"),U(t)}else t._d=new Date(i)}function B(t){var e=t._i,i=we.exec(e);e===n?t._d=new Date:i?t._d=new Date(+i[1]):"string"==typeof e?G(t):p(e)?(t._a=e.slice(0),R(t)):f(e)?t._d=new Date(+e):"object"==typeof e?H(t):t._d=new Date(e)}function q(t,e,i,n,s,r,o){var a=new Date(t,e,i,n,s,r,o);return 1970>t&&a.setFullYear(t),a}function X(t){var e=new Date(Date.UTC.apply(null,arguments));return 1970>t&&e.setUTCFullYear(t),e}function Z(t,e){if("string"==typeof t)if(isNaN(t)){if(t=e.weekdaysParse(t),"number"!=typeof t)return null}else t=parseInt(t,10);return t}function K(t,e,i,n,s){return s.relativeTime(e||1,!!i,t,n)}function Q(t,e,i){var n=de(Math.abs(t)/1e3),s=de(n/60),r=de(s/60),o=de(r/24),a=de(o/365),h=45>n&&["s",n]||1===s&&["m"]||45>s&&["mm",s]||1===r&&["h"]||22>r&&["hh",r]||1===o&&["d"]||25>=o&&["dd",o]||45>=o&&["M"]||345>o&&["MM",de(o/30)]||1===a&&["y"]||["yy",a];return h[2]=e,h[3]=t>0,h[4]=i,K.apply({},h)}function $(t,e,i){var n,s=i-e,r=i-t.day();return r>s&&(r-=7),s-7>r&&(r+=7),n=re(t).add("d",r),{week:Math.ceil(n.dayOfYear()/7),year:n.year()}}function J(t,e,i,n,s){var r,o,a=new Date(u(t,6,!0)+"-01-01").getUTCDay();return i=null!=i?i:s,r=s-a+(a>n?7:0),o=7*(e-1)+(i-s)+r+1,{year:o>0?t:t-1,dayOfYear:o>0?o:b(t-1)+o}}function te(t){var e=t._i,i=t._f;return"undefined"==typeof t._pf&&S(t),null===e?re.invalid({nullInput:!0}):("string"==typeof e&&(t._i=e=N().preparse(e)),re.isMoment(e)?(t=d({},e),t._d=new Date(+e._d)):i?p(i)?V(t):U(t):B(t),new a(t))}function ee(t,e){re.fn[t]=re.fn[t+"s"]=function(t){var i=this._isUTC?"UTC":"";return null!=t?(this._d["set"+i+e](t),re.updateOffset(this),this):this._d["get"+i+e]()}}function ie(t){re.duration.fn[t]=function(){return this._data[t]}}function ne(t,e){re.duration.fn["as"+t]=function(){return+this/e}}function se(t){var e=!1,i=re;"undefined"==typeof ender&&(t?(he.moment=function(){return!e&&console&&console.warn&&(e=!0,console.warn("Accessing Moment through the global scope is deprecated, and will be removed in an upcoming release.")),i.apply(null,arguments)},d(he.moment,i)):he.moment=re)}for(var re,oe,ae="2.5.0",he=this,de=Math.round,ce=0,ue=1,le=2,pe=3,fe=4,me=5,ge=6,ve={},ye="undefined"!=typeof i&&i.exports&&"undefined"!=typeof e,we=/^\/?Date\((\-?\d+)/i,_e=/(\-)?(?:(\d*)\.)?(\d+)\:(\d+)(?:\:(\d+)\.?(\d{3})?)?/,be=/^(-)?P(?:(?:([0-9,.]*)Y)?(?:([0-9,.]*)M)?(?:([0-9,.]*)D)?(?:T(?:([0-9,.]*)H)?(?:([0-9,.]*)M)?(?:([0-9,.]*)S)?)?|([0-9,.]*)W)$/,Ee=/(\[[^\[]*\])|(\\)?(Mo|MM?M?M?|Do|DDDo|DD?D?D?|ddd?d?|do?|w[o|w]?|W[o|W]?|YYYYYY|YYYYY|YYYY|YY|gg(ggg?)?|GG(GGG?)?|e|E|a|A|hh?|HH?|mm?|ss?|S{1,4}|X|zz?|ZZ?|.)/g,Te=/(\[[^\[]*\])|(\\)?(LT|LL?L?L?|l{1,4})/g,Se=/\d\d?/,xe=/\d{1,3}/,De=/\d{1,4}/,Me=/[+\-]?\d{1,6}/,Ce=/\d+/,Oe=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,Ne=/Z|[\+\-]\d\d:?\d\d/gi,Le=/T/i,Ie=/[\+\-]?\d+(\.\d{1,3})?/,ke=/\d/,Ae=/\d\d/,Pe=/\d{3}/,Ye=/\d{4}/,Fe=/[+\-]?\d{6}/,Re=/^\s*\d{4}-(?:(\d\d-\d\d)|(W\d\d$)|(W\d\d-\d)|(\d\d\d))((T| )(\d\d(:\d\d(:\d\d(\.\d+)?)?)?)?([\+\-]\d\d(?::?\d\d)?|\s*Z)?)?$/,He="YYYY-MM-DDTHH:mm:ssZ",ze=["YYYY-MM-DD","GGGG-[W]WW","GGGG-[W]WW-E","YYYY-DDD"],Ue=[["HH:mm:ss.SSSS",/(T| )\d\d:\d\d:\d\d\.\d{1,3}/],["HH:mm:ss",/(T| )\d\d:\d\d:\d\d/],["HH:mm",/(T| )\d\d:\d\d/],["HH",/(T| )\d\d/]],We=/([\+\-]|\d\d)/gi,je="Date|Hours|Minutes|Seconds|Milliseconds".split("|"),Ve={Milliseconds:1,Seconds:1e3,Minutes:6e4,Hours:36e5,Days:864e5,Months:2592e6,Years:31536e6},Ge={ms:"millisecond",s:"second",m:"minute",h:"hour",d:"day",D:"date",w:"week",W:"isoWeek",M:"month",y:"year",DDD:"dayOfYear",e:"weekday",E:"isoWeekday",gg:"weekYear",GG:"isoWeekYear"},Be={dayofyear:"dayOfYear",isoweekday:"isoWeekday",isoweek:"isoWeek",weekyear:"weekYear",isoweekyear:"isoWeekYear"},qe={},Xe="DDD w W M D d".split(" "),Ze="M D H h m s w W".split(" "),Ke={M:function(){return this.month()+1},MMM:function(t){return this.lang().monthsShort(this,t)},MMMM:function(t){return this.lang().months(this,t)},D:function(){return this.date()},DDD:function(){return this.dayOfYear()},d:function(){return this.day()},dd:function(t){return this.lang().weekdaysMin(this,t)},ddd:function(t){return this.lang().weekdaysShort(this,t)},dddd:function(t){return this.lang().weekdays(this,t)},w:function(){return this.week()},W:function(){return this.isoWeek()},YY:function(){return u(this.year()%100,2)},YYYY:function(){return u(this.year(),4)},YYYYY:function(){return u(this.year(),5)},YYYYYY:function(){var t=this.year(),e=t>=0?"+":"-";return e+u(Math.abs(t),6)},gg:function(){return u(this.weekYear()%100,2)},gggg:function(){return this.weekYear()},ggggg:function(){return u(this.weekYear(),5)},GG:function(){return u(this.isoWeekYear()%100,2)},GGGG:function(){return this.isoWeekYear()},GGGGG:function(){return u(this.isoWeekYear(),5)},e:function(){return this.weekday()},E:function(){return this.isoWeekday()},a:function(){return this.lang().meridiem(this.hours(),this.minutes(),!0)},A:function(){return this.lang().meridiem(this.hours(),this.minutes(),!1)},H:function(){return this.hours()},h:function(){return this.hours()%12||12},m:function(){return this.minutes()},s:function(){return this.seconds()},S:function(){return w(this.milliseconds()/100)},SS:function(){return u(w(this.milliseconds()/10),2)},SSS:function(){return u(this.milliseconds(),3)},SSSS:function(){return u(this.milliseconds(),3)},Z:function(){var t=-this.zone(),e="+";return 0>t&&(t=-t,e="-"),e+u(w(t/60),2)+":"+u(w(t)%60,2)},ZZ:function(){var t=-this.zone(),e="+";return 0>t&&(t=-t,e="-"),e+u(w(t/60),2)+u(w(t)%60,2)},z:function(){return this.zoneAbbr()},zz:function(){return this.zoneName()},X:function(){return this.unix()},Q:function(){return this.quarter()}},Qe=["months","monthsShort","weekdays","weekdaysShort","weekdaysMin"];Xe.length;)oe=Xe.pop(),Ke[oe+"o"]=r(Ke[oe],oe);for(;Ze.length;)oe=Ze.pop(),Ke[oe+oe]=s(Ke[oe],2);for(Ke.DDDD=s(Ke.DDD,3),d(o.prototype,{set:function(t){var e,i;for(i in t)e=t[i],"function"==typeof e?this[i]=e:this["_"+i]=e},_months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),months:function(t){return this._months[t.month()]},_monthsShort:"Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec".split("_"),monthsShort:function(t){return this._monthsShort[t.month()]},monthsParse:function(t){var e,i,n;for(this._monthsParse||(this._monthsParse=[]),e=0;12>e;e++)if(this._monthsParse[e]||(i=re.utc([2e3,e]),n="^"+this.months(i,"")+"|^"+this.monthsShort(i,""),this._monthsParse[e]=new RegExp(n.replace(".",""),"i")),this._monthsParse[e].test(t))return e},_weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),weekdays:function(t){return this._weekdays[t.day()]},_weekdaysShort:"Sun_Mon_Tue_Wed_Thu_Fri_Sat".split("_"),weekdaysShort:function(t){return this._weekdaysShort[t.day()]},_weekdaysMin:"Su_Mo_Tu_We_Th_Fr_Sa".split("_"),weekdaysMin:function(t){return this._weekdaysMin[t.day()]},weekdaysParse:function(t){var e,i,n;for(this._weekdaysParse||(this._weekdaysParse=[]),e=0;7>e;e++)if(this._weekdaysParse[e]||(i=re([2e3,1]).day(e),n="^"+this.weekdays(i,"")+"|^"+this.weekdaysShort(i,"")+"|^"+this.weekdaysMin(i,""),this._weekdaysParse[e]=new RegExp(n.replace(".",""),"i")),this._weekdaysParse[e].test(t))return e},_longDateFormat:{LT:"h:mm A",L:"MM/DD/YYYY",LL:"MMMM D YYYY",LLL:"MMMM D YYYY LT",LLLL:"dddd, MMMM D YYYY LT"},longDateFormat:function(t){var e=this._longDateFormat[t];return!e&&this._longDateFormat[t.toUpperCase()]&&(e=this._longDateFormat[t.toUpperCase()].replace(/MMMM|MM|DD|dddd/g,function(t){return t.slice(1)}),this._longDateFormat[t]=e),e},isPM:function(t){return"p"===(t+"").toLowerCase().charAt(0)},_meridiemParse:/[ap]\.?m?\.?/i,meridiem:function(t,e,i){return t>11?i?"pm":"PM":i?"am":"AM"},_calendar:{sameDay:"[Today at] LT",nextDay:"[Tomorrow at] LT",nextWeek:"dddd [at] LT",lastDay:"[Yesterday at] LT",lastWeek:"[Last] dddd [at] LT",sameElse:"L"},calendar:function(t,e){var i=this._calendar[t];return"function"==typeof i?i.apply(e):i},_relativeTime:{future:"in %s",past:"%s ago",s:"a few seconds",m:"a minute",mm:"%d minutes",h:"an hour",hh:"%d hours",d:"a day",dd:"%d days",M:"a month",MM:"%d months",y:"a year",yy:"%d years"},relativeTime:function(t,e,i,n){var s=this._relativeTime[i];return"function"==typeof s?s(t,e,i,n):s.replace(/%d/i,t)},pastFuture:function(t,e){var i=this._relativeTime[t>0?"future":"past"];return"function"==typeof i?i(e):i.replace(/%s/i,e)},ordinal:function(t){return this._ordinal.replace("%d",t)},_ordinal:"%d",preparse:function(t){return t},postformat:function(t){return t},week:function(t){return $(t,this._week.dow,this._week.doy).week},_week:{dow:0,doy:6},_invalidDate:"Invalid date",invalidDate:function(){return this._invalidDate}}),re=function(t,e,i,s){return"boolean"==typeof i&&(s=i,i=n),te({_i:t,_f:e,_l:i,_strict:s,_isUTC:!1})},re.utc=function(t,e,i,s){var r;return"boolean"==typeof i&&(s=i,i=n),r=te({_useUTC:!0,_isUTC:!0,_l:i,_i:t,_f:e,_strict:s}).utc()},re.unix=function(t){return re(1e3*t)},re.duration=function(t,e){var i,n,s,r=t,o=null;return re.isDuration(t)?r={ms:t._milliseconds,d:t._days,M:t._months}:"number"==typeof t?(r={},e?r[e]=t:r.milliseconds=t):(o=_e.exec(t))?(i="-"===o[1]?-1:1,r={y:0,d:w(o[le])*i,h:w(o[pe])*i,m:w(o[fe])*i,s:w(o[me])*i,ms:w(o[ge])*i}):(o=be.exec(t))&&(i="-"===o[1]?-1:1,s=function(t){var e=t&&parseFloat(t.replace(",","."));return(isNaN(e)?0:e)*i},r={y:s(o[2]),M:s(o[3]),d:s(o[4]),h:s(o[5]),m:s(o[6]),s:s(o[7]),w:s(o[8])}),n=new h(r),re.isDuration(t)&&t.hasOwnProperty("_lang")&&(n._lang=t._lang),n},re.version=ae,re.defaultFormat=He,re.updateOffset=function(){},re.lang=function(t,e){var i;return t?(e?C(D(t),e):null===e?(O(t),t="en"):ve[t]||N(t),i=re.duration.fn._lang=re.fn._lang=N(t),i._abbr):re.fn._lang._abbr},re.langData=function(t){return t&&t._lang&&t._lang._abbr&&(t=t._lang._abbr),N(t)},re.isMoment=function(t){return t instanceof a},re.isDuration=function(t){return t instanceof h},oe=Qe.length-1;oe>=0;--oe)y(Qe[oe]);for(re.normalizeUnits=function(t){return g(t)},re.invalid=function(t){var e=re.utc(0/0);return null!=t?d(e._pf,t):e._pf.userInvalidated=!0,e},re.parseZone=function(t){return re(t).parseZone()},d(re.fn=a.prototype,{clone:function(){return re(this)},valueOf:function(){return+this._d+6e4*(this._offset||0)},unix:function(){return Math.floor(+this/1e3)},toString:function(){return this.clone().lang("en").format("ddd MMM DD YYYY HH:mm:ss [GMT]ZZ")},toDate:function(){return this._offset?new Date(+this):this._d},toISOString:function(){var t=re(this).utc();return 00:!1},parsingFlags:function(){return d({},this._pf)},invalidAt:function(){return this._pf.overflow},utc:function(){return this.zone(0)},local:function(){return this.zone(0),this._isUTC=!1,this},format:function(t){var e=k(this,t||re.defaultFormat);return this.lang().postformat(e)},add:function(t,e){var i;return i="string"==typeof t?re.duration(+e,t):re.duration(t,e),l(this,i,1),this},subtract:function(t,e){var i;return i="string"==typeof t?re.duration(+e,t):re.duration(t,e),l(this,i,-1),this},diff:function(t,e,i){var n,s,r=M(t,this),o=6e4*(this.zone()-r.zone());return e=g(e),"year"===e||"month"===e?(n=432e5*(this.daysInMonth()+r.daysInMonth()),s=12*(this.year()-r.year())+(this.month()-r.month()),s+=(this-re(this).startOf("month")-(r-re(r).startOf("month")))/n,s-=6e4*(this.zone()-re(this).startOf("month").zone()-(r.zone()-re(r).startOf("month").zone()))/n,"year"===e&&(s/=12)):(n=this-r,s="second"===e?n/1e3:"minute"===e?n/6e4:"hour"===e?n/36e5:"day"===e?(n-o)/864e5:"week"===e?(n-o)/6048e5:n),i?s:c(s)},from:function(t,e){return re.duration(this.diff(t)).lang(this.lang()._abbr).humanize(!e)},fromNow:function(t){return this.from(re(),t)},calendar:function(){var t=M(re(),this).startOf("day"),e=this.diff(t,"days",!0),i=-6>e?"sameElse":-1>e?"lastWeek":0>e?"lastDay":1>e?"sameDay":2>e?"nextDay":7>e?"nextWeek":"sameElse";return this.format(this.lang().calendar(i,this))},isLeapYear:function(){return E(this.year())},isDST:function(){return this.zone()+re(t).startOf(e)},isBefore:function(t,e){return e="undefined"!=typeof e?e:"millisecond",+this.clone().startOf(e)<+re(t).startOf(e)},isSame:function(t,e){return e=e||"ms",+this.clone().startOf(e)===+M(t,this).startOf(e)},min:function(t){return t=re.apply(null,arguments),this>t?this:t},max:function(t){return t=re.apply(null,arguments),t>this?this:t},zone:function(t){var e=this._offset||0;return null==t?this._isUTC?e:this._d.getTimezoneOffset():("string"==typeof t&&(t=Y(t)),Math.abs(t)<16&&(t=60*t),this._offset=t,this._isUTC=!0,e!==t&&l(this,re.duration(e-t,"m"),1,!0),this)},zoneAbbr:function(){return this._isUTC?"UTC":""},zoneName:function(){return this._isUTC?"Coordinated Universal Time":""},parseZone:function(){return this._tzm?this.zone(this._tzm):"string"==typeof this._i&&this.zone(this._i),this},hasAlignedHourOffset:function(t){return t=t?re(t).zone():0,(this.zone()-t)%60===0},daysInMonth:function(){return _(this.year(),this.month())},dayOfYear:function(t){var e=de((re(this).startOf("day")-re(this).startOf("year"))/864e5)+1;return null==t?e:this.add("d",t-e)},quarter:function(){return Math.ceil((this.month()+1)/3)},weekYear:function(t){var e=$(this,this.lang()._week.dow,this.lang()._week.doy).year;return null==t?e:this.add("y",t-e)},isoWeekYear:function(t){var e=$(this,1,4).year;return null==t?e:this.add("y",t-e)},week:function(t){var e=this.lang().week(this);return null==t?e:this.add("d",7*(t-e))},isoWeek:function(t){var e=$(this,1,4).week;return null==t?e:this.add("d",7*(t-e))},weekday:function(t){var e=(this.day()+7-this.lang()._week.dow)%7;return null==t?e:this.add("d",t-e)},isoWeekday:function(t){return null==t?this.day()||7:this.day(this.day()%7?t:t-7)},get:function(t){return t=g(t),this[t]()},set:function(t,e){return t=g(t),"function"==typeof this[t]&&this[t](e),this},lang:function(t){return t===n?this._lang:(this._lang=N(t),this)}}),oe=0;oe 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 1847a3b1..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,164 +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 .
-
-
-
-
- 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
@@ -548,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
@@ -558,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..2c679bc1 100644
--- a/docs/graph.html
+++ b/docs/graph.html
@@ -2,12 +2,12 @@
- vis.js | graph documentation
+ vis.js | graph documentation
-
-
+
+
-
+
@@ -17,52 +17,58 @@
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. Note that unlike the
+ Timeline , the Graph does not need the vis.css
+ file.
+
+
+
+ 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="../../dist/vis.js"></script>
</head>
<body>
@@ -70,34 +76,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,12 +113,12 @@
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:
-<script type="text/javascript" src="vis/vis.js"></script>
+<script type="text/javascript" src="vis/dist/vis.js"></script>
@@ -121,278 +127,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 +406,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 +583,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 +608,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 +863,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..bbaf818b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -2,201 +2,204 @@
- 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 load vis.js, include the javascript and css files of vis in your web page:
+
<!DOCTYPE HTML>
<html>
<head>
- <script src="components/vis/vis.js"></script>
+ <script src="components/vis/vis.js"></script>
+ <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
</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>
+ <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
+
+ <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 4bdd9ee7..c2335c60 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -1,12 +1,12 @@
- vis.js | timeline documentation
+ vis.js | timeline documentation
-
-
+
+
-
+
@@ -17,65 +17,66 @@
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="../../dist/vis.js"></script>
+ <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
</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,12 +85,14 @@
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 libraries script and css files in the
+ head of your html code:
-<script type="text/javascript" src="vis/vis.js"></script>
+<script src="vis/dist/vis.js"></script>
+<link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />
The constructor of the Timeline is vis.Timeline
@@ -98,197 +101,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 .
+
+
@@ -296,269 +301,309 @@ 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.
-
-
-
- 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.
-
-
-
- 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
-
-
- 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.
+
+
+
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/download/vis.zip b/download/vis.zip
new file mode 100644
index 0000000000000000000000000000000000000000..687e8b81a0b7339e38cf01ba138e178b604a5700
GIT binary patch
literal 941597
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