|
|
- /**
- * vis.js
- * https://github.com/almende/vis
- *
- * A dynamic, browser-based visualization library.
- *
- * @version 3.0.0
- * @date 2014-07-07
- *
- * @license
- * Copyright (C) 2011-2014 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<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
- /**
- * vis.js module imports
- */
-
- // Try to load dependencies from the global window object.
- // If not available there, load via require.
-
- var moment = (typeof window !== 'undefined') && window['moment'] || require('moment');
- var Emitter = require('emitter-component');
-
- var Hammer;
- if (typeof window !== 'undefined') {
- // load hammer.js only when running in a browser (where window is available)
- Hammer = window['Hammer'] || require('hammerjs');
- }
- else {
- Hammer = function () {
- throw Error('hammer.js is only available in a browser, not in node.js.');
- }
- }
-
- var mousetrap;
- if (typeof window !== 'undefined') {
- // load mousetrap.js only when running in a browser (where window is available)
- mousetrap = window['mousetrap'] || require('mousetrap');
- }
- else {
- mousetrap = function () {
- throw Error('mouseTrap is only available in a browser, not in node.js.');
- }
- }
-
-
- // Internet Explorer 8 and older does not support Array.indexOf, so we define
- // it here in that case.
- // http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/
- if(!Array.prototype.indexOf) {
- Array.prototype.indexOf = function(obj){
- for(var i = 0; i < this.length; i++){
- if(this[i] == obj){
- return i;
- }
- }
- return -1;
- };
-
- try {
- console.log("Warning: Ancient browser detected. Please update your browser");
- }
- catch (err) {
- }
- }
-
- // Internet Explorer 8 and older does not support Array.forEach, so we define
- // it here in that case.
- // https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach
- if (!Array.prototype.forEach) {
- Array.prototype.forEach = function(fn, scope) {
- for(var i = 0, len = this.length; i < len; ++i) {
- fn.call(scope || this, this[i], i, this);
- }
- }
- }
-
- // Internet Explorer 8 and older does not support Array.map, so we define it
- // here in that case.
- // https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map
- // Production steps of ECMA-262, Edition 5, 15.4.4.19
- // Reference: http://es5.github.com/#x15.4.4.19
- if (!Array.prototype.map) {
- Array.prototype.map = function(callback, thisArg) {
-
- var T, A, k;
-
- if (this == null) {
- throw new TypeError(" this is null or not defined");
- }
-
- // 1. Let O be the result of calling ToObject passing the |this| value as the argument.
- var O = Object(this);
-
- // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length".
- // 3. Let len be ToUint32(lenValue).
- var len = O.length >>> 0;
-
- // 4. If IsCallable(callback) is false, throw a TypeError exception.
- // See: http://es5.github.com/#x9.11
- if (typeof callback !== "function") {
- throw new TypeError(callback + " is not a function");
- }
-
- // 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(object) {
- return (object instanceof Number || typeof object == 'number');
- };
-
- /**
- * Test whether given object is a string
- * @param {*} object
- * @return {Boolean} isString
- */
- util.isString = function(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(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(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() {
- 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)) {
- a[prop] = other[prop];
- }
- }
- }
-
- return a;
- };
-
- /**
- * Extend object a with selected properties of object b or a series of objects
- * Only properties with defined values are copied
- * @param {Array.<String>} props
- * @param {Object} a
- * @param {... Object} b
- * @return {Object} a
- */
- util.selectiveExtend = function (props, a, b) {
- if (!Array.isArray(props)) {
- throw new Error('Array with property names expected as first argument');
- }
-
- for (var i = 2; i < arguments.length; i++) {
- var other = arguments[i];
-
- for (var p = 0; p < props.length; p++) {
- var prop = props[p];
- if (other.hasOwnProperty(prop)) {
- a[prop] = other[prop];
- }
- }
- }
- return a;
- };
-
- /**
- * Extend object a with selected properties of object b or a series of objects
- * Only properties with defined values are copied
- * @param {Array.<String>} props
- * @param {Object} a
- * @param {... Object} b
- * @return {Object} a
- */
- util.selectiveDeepExtend = function (props, a, b) {
- // TODO: add support for Arrays to deepExtend
- if (Array.isArray(b)) {
- throw new TypeError('Arrays are not supported by deepExtend');
- }
- for (var i = 2; i < arguments.length; i++) {
- var other = arguments[i];
- for (var p = 0; p < props.length; p++) {
- var prop = props[p];
- if (other.hasOwnProperty(prop)) {
- if (b[prop] && b[prop].constructor === Object) {
- if (a[prop] === undefined) {
- a[prop] = {};
- }
- if (a[prop].constructor === Object) {
- util.deepExtend(a[prop], b[prop]);
- }
- else {
- a[prop] = b[prop];
- }
- } else if (Array.isArray(b[prop])) {
- throw new TypeError('Arrays are not supported by deepExtend');
- } else {
- a[prop] = b[prop];
- }
-
- }
- }
- }
- return a;
- };
-
- /**
- * Deep extend an object a with the properties of object b
- * @param {Object} a
- * @param {Object} b
- * @returns {Object}
- */
- util.deepExtend = function(a, b) {
- // TODO: add support for Arrays to deepExtend
- if (Array.isArray(b)) {
- throw new TypeError('Arrays are not supported by deepExtend');
- }
-
- for (var prop in b) {
- if (b.hasOwnProperty(prop)) {
- if (b[prop] && b[prop].constructor === Object) {
- if (a[prop] === undefined) {
- a[prop] = {};
- }
- if (a[prop].constructor === Object) {
- util.deepExtend(a[prop], b[prop]);
- }
- else {
- a[prop] = b[prop];
- }
- } else if (Array.isArray(b[prop])) {
- throw new TypeError('Arrays are not supported by deepExtend');
- } else {
- a[prop] = b[prop];
- }
- }
- }
- return a;
- };
-
- /**
- * Test whether all elements in two arrays are equal.
- * @param {Array} a
- * @param {Array} b
- * @return {boolean} Returns true if both arrays have the same length and same
- * elements.
- */
- util.equalArray = function (a, b) {
- if (a.length != b.length) return false;
-
- for (var i = 0, len = a.length; i < len; i++) {
- if (a[i] != b[i]) return false;
- }
-
- return true;
- };
-
- /**
- * 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(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('Unknown 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(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(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(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(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(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(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(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(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);
- }
- }
- }
- };
-
- /**
- * Convert an object into an array: all objects properties are put into the
- * array. The resulting array is unordered.
- * @param {Object} object
- * @param {Array} array
- */
- util.toArray = function(object) {
- var array = [];
-
- for (var prop in object) {
- if (object.hasOwnProperty(prop)) array.push(object[prop]);
- }
-
- return array;
- }
-
- /**
- * Update a property in an object
- * @param {Object} object
- * @param {String} key
- * @param {*} value
- * @return {Boolean} changed
- */
- util.updateProperty = function(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(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(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(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;
- };
-
- /**
- * Fake a hammer.js gesture. Event can be a ScrollEvent or MouseMoveEvent
- * @param {Element} element
- * @param {Event} event
- */
- util.fakeGesture = function(element, event) {
- var eventType = null;
-
- // for hammer.js 1.0.5
- var gesture = Hammer.event.collectEventData(this, eventType, event);
-
- // for hammer.js 1.0.6
- //var touches = Hammer.event.getTouchList(event, eventType);
- // var gesture = Hammer.event.collectEventData(this, eventType, touches, event);
-
- // on IE in standards mode, no touches are recognized by hammer.js,
- // resulting in NaN values for center.pageX and center.pageY
- if (isNaN(gesture.center.pageX)) {
- gesture.center.pageX = event.pageX;
- }
- if (isNaN(gesture.center.pageY)) {
- gesture.center.pageY = event.pageY;
- }
-
- return gesture;
- };
-
- 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;
- };
-
-
-
- util.GiveDec = function(Hex) {
- var Value;
-
- if (Hex == "A")
- Value = 10;
- else if (Hex == "B")
- Value = 11;
- else if (Hex == "C")
- Value = 12;
- else if (Hex == "D")
- Value = 13;
- else if (Hex == "E")
- Value = 14;
- else if (Hex == "F")
- Value = 15;
- else
- Value = eval(Hex);
-
- return Value;
- };
-
- util.GiveHex = function(Dec) {
- var Value;
-
- if(Dec == 10)
- Value = "A";
- else if (Dec == 11)
- Value = "B";
- else if (Dec == 12)
- Value = "C";
- else if (Dec == 13)
- Value = "D";
- else if (Dec == 14)
- Value = "E";
- else if (Dec == 15)
- Value = "F";
- else
- Value = "" + Dec;
-
- return Value;
- };
-
- /**
- * Parse a color property into an object with border, background, and
- * highlight colors
- * @param {Object | String} color
- * @return {Object} colorObject
- */
- util.parseColor = function(color) {
- var c;
- if (util.isString(color)) {
- if (util.isValidHex(color)) {
- var hsv = util.hexToHSV(color);
- var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
- var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
- var darkerColorHex = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
- var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
-
- c = {
- background: color,
- border:darkerColorHex,
- highlight: {
- background:lighterColorHex,
- border:darkerColorHex
- },
- hover: {
- background:lighterColorHex,
- border:darkerColorHex
- }
- };
- }
- else {
- c = {
- background:color,
- border:color,
- highlight: {
- background:color,
- border:color
- },
- hover: {
- background:color,
- border: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;
- }
-
- if (util.isString(color.hover)) {
- c.hover = {
- border: color.hover,
- background: color.hover
- }
- }
- else {
- c.hover = {};
- c.hover.background = color.hover && color.hover.background || c.background;
- c.hover.border = color.hover && color.hover.border || c.border;
- }
- }
-
- return c;
- };
-
- /**
- * http://www.yellowpipe.com/yis/tools/hex-to-rgb/color-converter.php
- *
- * @param {String} hex
- * @returns {{r: *, g: *, b: *}}
- */
- util.hexToRGB = function(hex) {
- hex = hex.replace("#","").toUpperCase();
-
- var a = util.GiveDec(hex.substring(0, 1));
- var b = util.GiveDec(hex.substring(1, 2));
- var c = util.GiveDec(hex.substring(2, 3));
- var d = util.GiveDec(hex.substring(3, 4));
- var e = util.GiveDec(hex.substring(4, 5));
- var f = util.GiveDec(hex.substring(5, 6));
-
- var r = (a * 16) + b;
- var g = (c * 16) + d;
- var b = (e * 16) + f;
-
- return {r:r,g:g,b:b};
- };
-
- util.RGBToHex = function(red,green,blue) {
- var a = util.GiveHex(Math.floor(red / 16));
- var b = util.GiveHex(red % 16);
- var c = util.GiveHex(Math.floor(green / 16));
- var d = util.GiveHex(green % 16);
- var e = util.GiveHex(Math.floor(blue / 16));
- var f = util.GiveHex(blue % 16);
-
- var hex = a + b + c + d + e + f;
- return "#" + hex;
- };
-
-
- /**
- * http://www.javascripter.net/faq/rgb2hsv.htm
- *
- * @param red
- * @param green
- * @param blue
- * @returns {*}
- * @constructor
- */
- util.RGBToHSV = function(red,green,blue) {
- red=red/255; green=green/255; blue=blue/255;
- var minRGB = Math.min(red,Math.min(green,blue));
- var maxRGB = Math.max(red,Math.max(green,blue));
-
- // Black-gray-white
- if (minRGB == maxRGB) {
- return {h:0,s:0,v:minRGB};
- }
-
- // Colors other than black-gray-white:
- var d = (red==minRGB) ? green-blue : ((blue==minRGB) ? red-green : blue-red);
- var h = (red==minRGB) ? 3 : ((blue==minRGB) ? 1 : 5);
- var hue = 60*(h - d/(maxRGB - minRGB))/360;
- var saturation = (maxRGB - minRGB)/maxRGB;
- var value = maxRGB;
- return {h:hue,s:saturation,v:value};
- };
-
-
- /**
- * https://gist.github.com/mjijackson/5311256
- * @param hue
- * @param saturation
- * @param value
- * @returns {{r: number, g: number, b: number}}
- * @constructor
- */
- util.HSVToRGB = function(h, s, v) {
- var r, g, b;
-
- var i = Math.floor(h * 6);
- var f = h * 6 - i;
- var p = v * (1 - s);
- var q = v * (1 - f * s);
- var t = v * (1 - (1 - f) * s);
-
- switch (i % 6) {
- case 0: r = v, g = t, b = p; break;
- case 1: r = q, g = v, b = p; break;
- case 2: r = p, g = v, b = t; break;
- case 3: r = p, g = q, b = v; break;
- case 4: r = t, g = p, b = v; break;
- case 5: r = v, g = p, b = q; break;
- }
-
- return {r:Math.floor(r * 255), g:Math.floor(g * 255), b:Math.floor(b * 255) };
- };
-
- util.HSVToHex = function(h, s, v) {
- var rgb = util.HSVToRGB(h, s, v);
- return util.RGBToHex(rgb.r, rgb.g, rgb.b);
- };
-
- util.hexToHSV = function(hex) {
- var rgb = util.hexToRGB(hex);
- return util.RGBToHSV(rgb.r, rgb.g, rgb.b);
- };
-
- util.isValidHex = function(hex) {
- var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(hex);
- return isOk;
- };
-
-
- /**
- * This recursively redirects the prototype of JSON objects to the referenceObject
- * This is used for default options.
- *
- * @param referenceObject
- * @returns {*}
- */
- util.selectiveBridgeObject = function(fields, referenceObject) {
- if (typeof referenceObject == "object") {
- var objectTo = Object.create(referenceObject);
- for (var i = 0; i < fields.length; i++) {
- if (referenceObject.hasOwnProperty(fields[i])) {
- if (typeof referenceObject[fields[i]] == "object") {
- objectTo[fields[i]] = util.bridgeObject(referenceObject[fields[i]]);
- }
- }
- }
- return objectTo;
- }
- else {
- return null;
- }
- };
-
- /**
- * This recursively redirects the prototype of JSON objects to the referenceObject
- * This is used for default options.
- *
- * @param referenceObject
- * @returns {*}
- */
- util.bridgeObject = function(referenceObject) {
- if (typeof referenceObject == "object") {
- var objectTo = Object.create(referenceObject);
- for (var i in referenceObject) {
- if (referenceObject.hasOwnProperty(i)) {
- if (typeof referenceObject[i] == "object") {
- objectTo[i] = util.bridgeObject(referenceObject[i]);
- }
- }
- }
- return objectTo;
- }
- else {
- return null;
- }
- };
-
-
- /**
- * this is used to set the options of subobjects in the options object. A requirement of these subobjects
- * is that they have an 'enabled' element which is optional for the user but mandatory for the program.
- *
- * @param [object] mergeTarget | this is either this.options or the options used for the groups.
- * @param [object] options | options
- * @param [String] option | this is the option key in the options argument
- * @private
- */
- util.mergeOptions = function (mergeTarget, options, option) {
- if (options[option] !== undefined) {
- if (typeof options[option] == 'boolean') {
- mergeTarget[option].enabled = options[option];
- }
- else {
- mergeTarget[option].enabled = true;
- for (prop in options[option]) {
- if (options[option].hasOwnProperty(prop)) {
- mergeTarget[option][prop] = options[option][prop];
- }
- }
- }
- }
- }
-
-
- /**
- * this is used to set the options of subobjects in the options object. A requirement of these subobjects
- * is that they have an 'enabled' element which is optional for the user but mandatory for the program.
- *
- * @param [object] mergeTarget | this is either this.options or the options used for the groups.
- * @param [object] options | options
- * @param [String] option | this is the option key in the options argument
- * @private
- */
- util.mergeOptions = function (mergeTarget, options, option) {
- if (options[option] !== undefined) {
- if (typeof options[option] == 'boolean') {
- mergeTarget[option].enabled = options[option];
- }
- else {
- mergeTarget[option].enabled = true;
- for (prop in options[option]) {
- if (options[option].hasOwnProperty(prop)) {
- mergeTarget[option][prop] = options[option][prop];
- }
- }
- }
- }
- }
-
-
-
-
- /**
- * This function does a binary search for a visible item. The user can select either the this.orderedItems.byStart or .byEnd
- * arrays. This is done by giving a boolean value true if you want to use the byEnd.
- * This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
- * if the time we selected (start or end) is within the current range).
- *
- * The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
- * before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
- * either the start OR end time has to be in the range.
- *
- * @param {{byStart: Item[], byEnd: Item[]}} orderedItems
- * @param {{start: number, end: number}} range
- * @param {Boolean} byEnd
- * @returns {number}
- * @private
- */
- util.binarySearch = function(orderedItems, range, field, field2) {
- var array = orderedItems;
- var interval = range.end - range.start;
-
- var found = false;
- var low = 0;
- var high = array.length;
- var guess = Math.floor(0.5*(high+low));
- var newGuess;
- var value;
-
- if (high == 0) {guess = -1;}
- else if (high == 1) {
- value = field2 === undefined ? array[guess][field] : array[guess][field][field2];
- if ((value > range.start - interval) && (value < range.end)) {
- guess = 0;
- }
- else {
- guess = -1;
- }
- }
- else {
- high -= 1;
- while (found == false) {
- value = field2 === undefined ? array[guess][field] : array[guess][field][field2];
- if ((value > range.start - interval) && (value < range.end)) {
- found = true;
- }
- else {
- if (value < range.start - interval) { // it is too small --> increase low
- low = Math.floor(0.5*(high+low));
- }
- else { // it is too big --> decrease high
- high = Math.floor(0.5*(high+low));
- }
- newGuess = Math.floor(0.5*(high+low));
- // not in list;
- if (guess == newGuess) {
- guess = -1;
- found = true;
- }
- else {
- guess = newGuess;
- }
- }
- }
- }
- return guess;
- };
-
- /**
- * This function does a binary search for a visible item. The user can select either the this.orderedItems.byStart or .byEnd
- * arrays. This is done by giving a boolean value true if you want to use the byEnd.
- * This is done to be able to select the correct if statement (we do not want to check if an item is visible, we want to check
- * if the time we selected (start or end) is within the current range).
- *
- * The trick is that every interval has to either enter the screen at the initial load or by dragging. The case of the ItemRange that is
- * before and after the current range is handled by simply checking if it was in view before and if it is again. For all the rest,
- * either the start OR end time has to be in the range.
- *
- * @param {Array} orderedItems
- * @param {{start: number, end: number}} target
- * @param {Boolean} byEnd
- * @returns {number}
- * @private
- */
- util.binarySearchGeneric = function(orderedItems, target, field, sidePreference) {
- var array = orderedItems;
- var found = false;
- var low = 0;
- var high = array.length;
- var guess = Math.floor(0.5*(high+low));
- var newGuess;
- var prevValue, value, nextValue;
-
- if (high == 0) {guess = -1;}
- else if (high == 1) {
- value = array[guess][field];
- if (value == target) {
- guess = 0;
- }
- else {
- guess = -1;
- }
- }
- else {
- high -= 1;
- while (found == false) {
- prevValue = array[Math.max(0,guess - 1)][field];
- value = array[guess][field];
- nextValue = array[Math.min(array.length-1,guess + 1)][field];
-
- if (value == target || prevValue < target && value > target || value < target && nextValue > target) {
- found = true;
- if (value != target) {
- if (sidePreference == 'before') {
- if (prevValue < target && value > target) {
- guess = Math.max(0,guess - 1);
- }
- }
- else {
- if (value < target && nextValue > target) {
- guess = Math.min(array.length-1,guess + 1);
- }
- }
- }
- }
- else {
- if (value < target) { // it is too small --> increase low
- low = Math.floor(0.5*(high+low));
- }
- else { // it is too big --> decrease high
- high = Math.floor(0.5*(high+low));
- }
- newGuess = Math.floor(0.5*(high+low));
- // not in list;
- if (guess == newGuess) {
- guess = -2;
- found = true;
- }
- else {
- guess = newGuess;
- }
- }
- }
- }
- return guess;
- };
- /**
- * Created by Alex on 6/20/14.
- */
-
- var DOMutil = {};
-
- /**
- * this prepares the JSON container for allocating SVG elements
- * @param JSONcontainer
- * @private
- */
- DOMutil.prepareElements = function(JSONcontainer) {
- // cleanup the redundant svgElements;
- for (var elementType in JSONcontainer) {
- if (JSONcontainer.hasOwnProperty(elementType)) {
- JSONcontainer[elementType].redundant = JSONcontainer[elementType].used;
- JSONcontainer[elementType].used = [];
- }
- }
- };
-
- /**
- * this cleans up all the unused SVG elements. By asking for the parentNode, we only need to supply the JSON container from
- * which to remove the redundant elements.
- *
- * @param JSONcontainer
- * @private
- */
- DOMutil.cleanupElements = function(JSONcontainer) {
- // cleanup the redundant svgElements;
- for (var elementType in JSONcontainer) {
- if (JSONcontainer.hasOwnProperty(elementType)) {
- if (JSONcontainer[elementType].redundant) {
- for (var i = 0; i < JSONcontainer[elementType].redundant.length; i++) {
- JSONcontainer[elementType].redundant[i].parentNode.removeChild(JSONcontainer[elementType].redundant[i]);
- }
- JSONcontainer[elementType].redundant = [];
- }
- }
- }
- };
-
- /**
- * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
- * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
- *
- * @param elementType
- * @param JSONcontainer
- * @param svgContainer
- * @returns {*}
- * @private
- */
- DOMutil.getSVGElement = function (elementType, JSONcontainer, svgContainer) {
- var element;
- // allocate SVG element, if it doesnt yet exist, create one.
- if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
- // check if there is an redundant element
- if (JSONcontainer[elementType].redundant.length > 0) {
- element = JSONcontainer[elementType].redundant[0];
- JSONcontainer[elementType].redundant.shift();
- }
- else {
- // create a new element and add it to the SVG
- element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
- svgContainer.appendChild(element);
- }
- }
- else {
- // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
- element = document.createElementNS('http://www.w3.org/2000/svg', elementType);
- JSONcontainer[elementType] = {used: [], redundant: []};
- svgContainer.appendChild(element);
- }
- JSONcontainer[elementType].used.push(element);
- return element;
- };
-
-
- /**
- * Allocate or generate an SVG element if needed. Store a reference to it in the JSON container and draw it in the svgContainer
- * the JSON container and the SVG container have to be supplied so other svg containers (like the legend) can use this.
- *
- * @param elementType
- * @param JSONcontainer
- * @param DOMContainer
- * @returns {*}
- * @private
- */
- DOMutil.getDOMElement = function (elementType, JSONcontainer, DOMContainer) {
- var element;
- // allocate SVG element, if it doesnt yet exist, create one.
- if (JSONcontainer.hasOwnProperty(elementType)) { // this element has been created before
- // check if there is an redundant element
- if (JSONcontainer[elementType].redundant.length > 0) {
- element = JSONcontainer[elementType].redundant[0];
- JSONcontainer[elementType].redundant.shift();
- }
- else {
- // create a new element and add it to the SVG
- element = document.createElement(elementType);
- DOMContainer.appendChild(element);
- }
- }
- else {
- // create a new element and add it to the SVG, also create a new object in the svgElements to keep track of it.
- element = document.createElement(elementType);
- JSONcontainer[elementType] = {used: [], redundant: []};
- DOMContainer.appendChild(element);
- }
- JSONcontainer[elementType].used.push(element);
- return element;
- };
-
-
-
-
- /**
- * draw a point object. this is a seperate function because it can also be called by the legend.
- * The reason the JSONcontainer and the target SVG svgContainer have to be supplied is so the legend can use these functions
- * as well.
- *
- * @param x
- * @param y
- * @param group
- * @param JSONcontainer
- * @param svgContainer
- * @returns {*}
- */
- DOMutil.drawPoint = function(x, y, group, JSONcontainer, svgContainer) {
- var point;
- if (group.options.drawPoints.style == 'circle') {
- point = DOMutil.getSVGElement('circle',JSONcontainer,svgContainer);
- point.setAttributeNS(null, "cx", x);
- point.setAttributeNS(null, "cy", y);
- point.setAttributeNS(null, "r", 0.5 * group.options.drawPoints.size);
- point.setAttributeNS(null, "class", group.className + " point");
- }
- else {
- point = DOMutil.getSVGElement('rect',JSONcontainer,svgContainer);
- point.setAttributeNS(null, "x", x - 0.5*group.options.drawPoints.size);
- point.setAttributeNS(null, "y", y - 0.5*group.options.drawPoints.size);
- point.setAttributeNS(null, "width", group.options.drawPoints.size);
- point.setAttributeNS(null, "height", group.options.drawPoints.size);
- point.setAttributeNS(null, "class", group.className + " point");
- }
- return point;
- };
-
- /**
- * draw a bar SVG element centered on the X coordinate
- *
- * @param x
- * @param y
- * @param className
- */
- DOMutil.drawBar = function (x, y, width, height, className, JSONcontainer, svgContainer) {
- var rect = DOMutil.getSVGElement('rect',JSONcontainer, svgContainer);
- rect.setAttributeNS(null, "x", x - 0.5 * width);
- rect.setAttributeNS(null, "y", y);
- rect.setAttributeNS(null, "width", width);
- rect.setAttributeNS(null, "height", height);
- rect.setAttributeNS(null, "class", className);
- };
- /**
- * DataSet
- *
- * Usage:
- * var dataSet = new DataSet({
- * fieldId: '_id',
- * type: {
- * // ...
- * }
- * });
- *
- * 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 {Array | DataTable} [data] Optional array with initial data
- * @param {Object} [options] Available options:
- * {String} fieldId Field name of the id in the
- * items, 'id' by default.
- * {Object.<String, String} type
- * A map with field names as key,
- * and the field type as value.
- * @constructor DataSet
- */
- // TODO: add a DataSet constructor DataSet(data, options)
- function DataSet (data, options) {
- // correctly read optional arguments
- if (data && !Array.isArray(data) && !util.isDataTable(data)) {
- options = data;
- data = null;
- }
-
- this._options = options || {};
- this._data = {}; // map with data indexed by id
- this._fieldId = this._options.fieldId || 'id'; // name of the field containing id
- this._type = {}; // internal field types (NOTE: this can differ from this._options.type)
-
- // all variants of a Date are internally stored as Date, so we can convert
- // from everything to everything (also from ISODate to Number for example)
- if (this._options.type) {
- for (var field in this._options.type) {
- if (this._options.type.hasOwnProperty(field)) {
- var value = this._options.type[field];
- if (value == 'Date' || value == 'ISODate' || value == 'ASPDate') {
- this._type[field] = 'Date';
- }
- else {
- this._type[field] = value;
- }
- }
- }
- }
-
- // TODO: deprecated since version 1.1.1 (or 2.0.0?)
- if (this._options.convert) {
- throw new Error('Option "convert" is deprecated. Use "type" instead.');
- }
-
- this._subscribers = {}; // event subscribers
-
- // add initial data when provided
- if (data) {
- this.add(data);
- }
- }
-
- /**
- * Subscribe to an event, add an event listener
- * @param {String} event Event name. Available events: 'put', 'update',
- * 'remove'
- * @param {function} callback Callback method. Called with three parameters:
- * {String} event
- * {Object | null} params
- * {String | Number} senderId
- */
- DataSet.prototype.on = function(event, callback) {
- var subscribers = this._subscribers[event];
- if (!subscribers) {
- subscribers = [];
- this._subscribers[event] = subscribers;
- }
-
- subscribers.push({
- callback: callback
- });
- };
-
- // TODO: make this function deprecated (replaced with `on` since version 0.5)
- DataSet.prototype.subscribe = DataSet.prototype.on;
-
- /**
- * Unsubscribe from an event, remove an event listener
- * @param {String} event
- * @param {function} callback
- */
- DataSet.prototype.off = function(event, callback) {
- var subscribers = this._subscribers[event];
- if (subscribers) {
- this._subscribers[event] = subscribers.filter(function (listener) {
- return (listener.callback != callback);
- });
- }
- };
-
- // TODO: make this function deprecated (replaced with `on` since version 0.5)
- DataSet.prototype.unsubscribe = DataSet.prototype.off;
-
- /**
- * Trigger an event
- * @param {String} event
- * @param {Object | null} params
- * @param {String} [senderId] Optional id of the sender.
- * @private
- */
- DataSet.prototype._trigger = function (event, params, senderId) {
- if (event == '*') {
- throw new Error('Cannot trigger event *');
- }
-
- var subscribers = [];
- if (event in this._subscribers) {
- subscribers = subscribers.concat(this._subscribers[event]);
- }
- if ('*' in this._subscribers) {
- subscribers = subscribers.concat(this._subscribers['*']);
- }
-
- for (var i = 0; i < subscribers.length; i++) {
- var subscriber = subscribers[i];
- if (subscriber.callback) {
- subscriber.callback(event, params, senderId || null);
- }
- }
- };
-
- /**
- * Add data.
- * Adding an item will fail when there already is an item with the same id.
- * @param {Object | Array | DataTable} data
- * @param {String} [senderId] Optional sender id
- * @return {Array} addedIds Array with the ids of the added items
- */
- DataSet.prototype.add = function (data, senderId) {
- var addedIds = [],
- id,
- me = this;
-
- if (Array.isArray(data)) {
- // Array
- for (var i = 0, len = data.length; i < len; i++) {
- id = me._addItem(data[i]);
- addedIds.push(id);
- }
- }
- else if (util.isDataTable(data)) {
- // Google DataTable
- var columns = this._getColumnNames(data);
- for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
- var item = {};
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- item[field] = data.getValue(row, col);
- }
-
- id = me._addItem(item);
- addedIds.push(id);
- }
- }
- else if (data instanceof Object) {
- // Single item
- id = me._addItem(data);
- addedIds.push(id);
- }
- else {
- throw new Error('Unknown dataType');
- }
-
- if (addedIds.length) {
- this._trigger('add', {items: addedIds}, senderId);
- }
-
- return addedIds;
- };
-
- /**
- * Update existing items. When an item does not exist, it will be created
- * @param {Object | Array | DataTable} data
- * @param {String} [senderId] Optional sender id
- * @return {Array} updatedIds The ids of the added or updated items
- */
- DataSet.prototype.update = function (data, senderId) {
- var addedIds = [],
- updatedIds = [],
- me = this,
- fieldId = me._fieldId;
-
- var addOrUpdate = function (item) {
- var id = item[fieldId];
- if (me._data[id]) {
- // update item
- id = me._updateItem(item);
- updatedIds.push(id);
- }
- else {
- // add new item
- id = me._addItem(item);
- addedIds.push(id);
- }
- };
-
- if (Array.isArray(data)) {
- // Array
- for (var i = 0, len = data.length; i < len; i++) {
- addOrUpdate(data[i]);
- }
- }
- else if (util.isDataTable(data)) {
- // Google DataTable
- var columns = this._getColumnNames(data);
- for (var row = 0, rows = data.getNumberOfRows(); row < rows; row++) {
- var item = {};
- for (var col = 0, cols = columns.length; col < cols; col++) {
- var field = columns[col];
- item[field] = data.getValue(row, col);
- }
-
- addOrUpdate(item);
- }
- }
- else if (data instanceof Object) {
- // Single item
- addOrUpdate(data);
- }
- else {
- throw new Error('Unknown dataType');
- }
-
- if (addedIds.length) {
- this._trigger('add', {items: addedIds}, senderId);
- }
- if (updatedIds.length) {
- this._trigger('update', {items: updatedIds}, senderId);
- }
-
- return addedIds.concat(updatedIds);
- };
-
- /**
- * Get a data item or multiple items.
- *
- * Usage:
- *
- * get()
- * get(options: Object)
- * get(options: Object, data: Array | DataTable)
- *
- * get(id: Number | String)
- * get(id: Number | String, options: Object)
- * get(id: Number | String, options: Object, data: Array | DataTable)
- *
- * get(ids: Number[] | String[])
- * get(ids: Number[] | String[], options: Object)
- * get(ids: Number[] | String[], 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} [returnType] Type of data to be
- * returned. Can be 'DataTable' or 'Array' (default)
- * {Object.<String, String>} [type]
- * {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 returnType;
- if (options && options.returnType) {
- returnType = (options.returnType == 'DataTable') ? 'DataTable' : 'Array';
-
- if (data && (returnType != util.getType(data))) {
- throw new Error('Type of parameter "data" (' + util.getType(data) + ') ' +
- 'does not correspond with specified options.type (' + options.type + ')');
- }
- if (returnType == 'DataTable' && !util.isDataTable(data)) {
- throw new Error('Parameter "data" must be a DataTable ' +
- 'when options.type is "DataTable"');
- }
- }
- else if (data) {
- returnType = (util.getType(data) == 'DataTable') ? 'DataTable' : 'Array';
- }
- else {
- returnType = 'Array';
- }
-
- // build options
- var type = options && options.type || this._options.type;
- var filter = options && options.filter;
- var items = [], item, itemId, i, len;
-
- // convert items
- if (id != undefined) {
- // return a single item
- item = me._getItem(id, type);
- 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], type);
- 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, type);
- 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 (returnType == '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,
- type = options && options.type || this._options.type,
- 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, type);
- 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, type);
- 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;
- };
-
- /**
- * Returns the DataSet itself. Is overwritten for example by the DataView,
- * which returns the DataSet it is connected to instead.
- */
- DataSet.prototype.getDataSet = function () {
- return this;
- };
-
- /**
- * Execute a callback function for every item in the dataset.
- * @param {function} callback
- * @param {Object} [options] Available options:
- * {Object.<String, String>} [type]
- * {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,
- type = options && options.type || this._options.type,
- 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, type);
- if (!filter || filter(item)) {
- callback(item, id);
- }
- }
- }
- }
- };
-
- /**
- * Map every item in the dataset.
- * @param {function} callback
- * @param {Object} [options] Available options:
- * {Object.<String, String>} [type]
- * {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,
- type = options && options.type || this._options.type,
- mappedItems = [],
- data = this._data,
- item;
-
- // convert and filter items
- for (var id in data) {
- if (data.hasOwnProperty(id)) {
- item = this._getItem(id, type);
- 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 (Array.isArray(id)) {
- 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];
- return id;
- }
- }
- else if (id instanceof Object) {
- var itemId = id[this._fieldId];
- if (itemId && this._data[itemId]) {
- delete this._data[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._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 data items
- * do not contain the specified field are ignored.
- * The returned array is unordered.
- */
- DataSet.prototype.distinct = function (field) {
- var data = this._data;
- var values = [];
- var fieldType = this._options.type && this._options.type[field] || null;
- var count = 0;
- var i;
-
- for (var prop in data) {
- if (data.hasOwnProperty(prop)) {
- var item = data[prop];
- var value = item[field];
- var exists = false;
- for (i = 0; i < count; i++) {
- if (values[i] == value) {
- exists = true;
- break;
- }
- }
- if (!exists && (value !== undefined)) {
- values[count] = value;
- count++;
- }
- }
- }
-
- if (fieldType) {
- for (i = 0; i < values.length; i++) {
- values[i] = util.convert(values[i], fieldType);
- }
- }
-
- 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;
- }
-
- var d = {};
- for (var field in item) {
- if (item.hasOwnProperty(field)) {
- var fieldType = this._type[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.<String, String>} [types] field types to convert
- * @return {Object | null} item
- * @private
- */
- DataSet.prototype._getItem = function (id, types) {
- 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 = {};
- if (types) {
- for (field in raw) {
- if (raw.hasOwnProperty(field)) {
- value = raw[field];
- converted[field] = util.convert(value, types[field]);
- }
- }
- }
- else {
- // no field types specified, no converting needed
- for (field in raw) {
- if (raw.hasOwnProperty(field)) {
- value = raw[field];
- 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._type[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._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, 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.on) {
- this._data.on('*', 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.<String, String>} [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;
- };
-
- /**
- * Get the DataSet to which this DataView is connected. In case there is a chain
- * of multiple DataViews, the root DataSet of this chain is returned.
- * @return {DataSet} dataSet
- */
- DataView.prototype.getDataSet = function () {
- var dataSet = this;
- while (dataSet instanceof DataView) {
- dataSet = dataSet._data;
- }
- return dataSet || null;
- };
-
- /**
- * 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.on = DataSet.prototype.on;
- DataView.prototype.off = DataSet.prototype.off;
- DataView.prototype._trigger = DataSet.prototype._trigger;
-
- // TODO: make these functions deprecated (replaced with `on` and `off` since version 0.5)
- DataView.prototype.subscribe = DataView.prototype.on;
- DataView.prototype.unsubscribe = DataView.prototype.off;
-
- /**
- * @constructor Group
- * @param {Number | String} groupId
- * @param {Object} data
- * @param {ItemSet} itemSet
- */
- function GraphGroup (group, groupId, options, groupsUsingDefaultStyles) {
- this.id = groupId;
- var fields = ['sampling','style','sort','yAxisOrientation','barChart','drawPoints','shaded','catmullRom']
- this.options = util.selectiveBridgeObject(fields,options);
- this.usingDefaultStyle = group.className === undefined;
- this.groupsUsingDefaultStyles = groupsUsingDefaultStyles;
- this.zeroPosition = 0;
- this.update(group);
- if (this.usingDefaultStyle == true) {
- this.groupsUsingDefaultStyles[0] += 1;
- }
- this.itemsData = [];
- }
-
- GraphGroup.prototype.setItems = function(items) {
- if (items != null) {
- this.itemsData = items;
- if (this.options.sort == true) {
- this.itemsData.sort(function (a,b) {return a.x - b.x;})
- }
- }
- else {
- this.itemsData = [];
- }
- }
-
- GraphGroup.prototype.setZeroPosition = function(pos) {
- this.zeroPosition = pos;
- }
-
- GraphGroup.prototype.setOptions = function(options) {
- if (options !== undefined) {
- var fields = ['sampling','style','sort','yAxisOrientation','barChart'];
- util.selectiveDeepExtend(fields, this.options, options);
-
- util.mergeOptions(this.options, options,'catmullRom');
- util.mergeOptions(this.options, options,'drawPoints');
- util.mergeOptions(this.options, options,'shaded');
-
- if (options.catmullRom) {
- if (typeof options.catmullRom == 'object') {
- if (options.catmullRom.parametrization) {
- if (options.catmullRom.parametrization == 'uniform') {
- this.options.catmullRom.alpha = 0;
- }
- else if (options.catmullRom.parametrization == 'chordal') {
- this.options.catmullRom.alpha = 1.0;
- }
- else {
- this.options.catmullRom.parametrization = 'centripetal';
- this.options.catmullRom.alpha = 0.5;
- }
- }
- }
- }
- }
- };
-
- GraphGroup.prototype.update = function(group) {
- this.group = group;
- this.content = group.content || 'graph';
- this.className = group.className || this.className || "graphGroup" + this.groupsUsingDefaultStyles[0] % 10;
- this.setOptions(group.options);
- };
-
- GraphGroup.prototype.drawIcon = function(x, y, JSONcontainer, SVGcontainer, iconWidth, iconHeight) {
- var fillHeight = iconHeight * 0.5;
- var path, fillPath;
-
- var outline = DOMutil.getSVGElement("rect", JSONcontainer, SVGcontainer);
- outline.setAttributeNS(null, "x", x);
- outline.setAttributeNS(null, "y", y - fillHeight);
- outline.setAttributeNS(null, "width", iconWidth);
- outline.setAttributeNS(null, "height", 2*fillHeight);
- outline.setAttributeNS(null, "class", "outline");
-
- if (this.options.style == 'line') {
- path = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
- path.setAttributeNS(null, "class", this.className);
- path.setAttributeNS(null, "d", "M" + x + ","+y+" L" + (x + iconWidth) + ","+y+"");
- if (this.options.shaded.enabled == true) {
- fillPath = DOMutil.getSVGElement("path", JSONcontainer, SVGcontainer);
- if (this.options.shaded.orientation == 'top') {
- fillPath.setAttributeNS(null, "d", "M"+x+", " + (y - fillHeight) +
- "L"+x+","+y+" L"+ (x + iconWidth) + ","+y+" L"+ (x + iconWidth) + "," + (y - fillHeight));
- }
- else {
- fillPath.setAttributeNS(null, "d", "M"+x+","+y+" " +
- "L"+x+"," + (y + fillHeight) + " " +
- "L"+ (x + iconWidth) + "," + (y + fillHeight) +
- "L"+ (x + iconWidth) + ","+y);
- }
- fillPath.setAttributeNS(null, "class", this.className + " iconFill");
- }
-
- if (this.options.drawPoints.enabled == true) {
- DOMutil.drawPoint(x + 0.5 * iconWidth,y, this, JSONcontainer, SVGcontainer);
- }
- }
- else {
- var barWidth = Math.round(0.3 * iconWidth);
- var bar1Height = Math.round(0.4 * iconHeight);
- var bar2Height = Math.round(0.75 * iconHeight);
-
- var offset = Math.round((iconWidth - (2 * barWidth))/3);
-
- DOMutil.drawBar(x + 0.5*barWidth + offset , y + fillHeight - bar1Height - 1, barWidth, bar1Height, this.className + ' bar', JSONcontainer, SVGcontainer);
- DOMutil.drawBar(x + 1.5*barWidth + offset + 2, y + fillHeight - bar2Height - 1, barWidth, bar2Height, this.className + ' bar', JSONcontainer, SVGcontainer);
- }
- }
-
- /**
- * Created by Alex on 6/17/14.
- */
- function Legend(body, options, side) {
- this.body = body;
- this.defaultOptions = {
- enabled: true,
- icons: true,
- iconSize: 20,
- iconSpacing: 6,
- left: {
- visible: true,
- position: 'top-left' // top/bottom - left,center,right
- },
- right: {
- visible: true,
- position: 'top-left' // top/bottom - left,center,right
- }
- }
- this.side = side;
- this.options = util.extend({},this.defaultOptions);
-
- this.svgElements = {};
- this.dom = {};
- this.groups = {};
- this.amountOfGroups = 0;
- this._create();
-
- this.setOptions(options);
- };
-
- Legend.prototype = new Component();
-
-
- Legend.prototype.addGroup = function(label, graphOptions) {
- if (!this.groups.hasOwnProperty(label)) {
- this.groups[label] = graphOptions;
- }
- this.amountOfGroups += 1;
- };
-
- Legend.prototype.updateGroup = function(label, graphOptions) {
- this.groups[label] = graphOptions;
- };
-
- Legend.prototype.removeGroup = function(label) {
- if (this.groups.hasOwnProperty(label)) {
- delete this.groups[label];
- this.amountOfGroups -= 1;
- }
- };
-
- Legend.prototype._create = function() {
- this.dom.frame = document.createElement('div');
- this.dom.frame.className = 'legend';
- this.dom.frame.style.position = "absolute";
- this.dom.frame.style.top = "10px";
- this.dom.frame.style.display = "block";
-
- this.dom.textArea = document.createElement('div');
- this.dom.textArea.className = 'legendText';
- this.dom.textArea.style.position = "relative";
- this.dom.textArea.style.top = "0px";
-
- this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.svg.style.position = 'absolute';
- this.svg.style.top = 0 +'px';
- this.svg.style.width = this.options.iconSize + 5 + 'px';
-
- this.dom.frame.appendChild(this.svg);
- this.dom.frame.appendChild(this.dom.textArea);
- }
-
- /**
- * Hide the component from the DOM
- */
- Legend.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- }
- };
-
- /**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
- */
- Legend.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
- }
- };
-
- Legend.prototype.setOptions = function(options) {
- var fields = ['enabled','orientation','icons','left','right'];
- util.selectiveDeepExtend(fields, this.options, options);
- }
-
- Legend.prototype.redraw = function() {
- if (this.options[this.side].visible == false || this.amountOfGroups == 0 || this.options.enabled == false) {
- this.hide();
- }
- else {
- this.show();
- if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'bottom-left') {
- this.dom.frame.style.left = '4px';
- this.dom.frame.style.textAlign = "left";
- this.dom.textArea.style.textAlign = "left";
- this.dom.textArea.style.left = (this.options.iconSize + 15) + 'px';
- this.dom.textArea.style.right = '';
- this.svg.style.left = 0 +'px';
- this.svg.style.right = '';
- }
- else {
- this.dom.frame.style.right = '4px';
- this.dom.frame.style.textAlign = "right";
- this.dom.textArea.style.textAlign = "right";
- this.dom.textArea.style.right = (this.options.iconSize + 15) + 'px';
- this.dom.textArea.style.left = '';
- this.svg.style.right = 0 +'px';
- this.svg.style.left = '';
- }
-
- if (this.options[this.side].position == 'top-left' || this.options[this.side].position == 'top-right') {
- this.dom.frame.style.top = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
- this.dom.frame.style.bottom = '';
- }
- else {
- this.dom.frame.style.bottom = 4 - Number(this.body.dom.center.style.top.replace("px","")) + 'px';
- this.dom.frame.style.top = '';
- }
-
- if (this.options.icons == false) {
- this.dom.frame.style.width = this.dom.textArea.offsetWidth + 10 + 'px';
- this.dom.textArea.style.right = '';
- this.dom.textArea.style.left = '';
- this.svg.style.width = '0px';
- }
- else {
- this.dom.frame.style.width = this.options.iconSize + 15 + this.dom.textArea.offsetWidth + 10 + 'px'
- this.drawLegendIcons();
- }
-
- var content = "";
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- content += this.groups[groupId].content + '<br />';
- }
- }
- this.dom.textArea.innerHTML = content;
- this.dom.textArea.style.lineHeight = ((0.75 * this.options.iconSize) + this.options.iconSpacing) + 'px';
- }
- }
-
- Legend.prototype.drawLegendIcons = function() {
- if (this.dom.frame.parentNode) {
- DOMutil.prepareElements(this.svgElements);
- var padding = window.getComputedStyle(this.dom.frame).paddingTop;
- var iconOffset = Number(padding.replace("px",''));
- var x = iconOffset;
- var iconWidth = this.options.iconSize;
- var iconHeight = 0.75 * this.options.iconSize;
- var y = iconOffset + 0.5 * iconHeight + 3;
-
- this.svg.style.width = iconWidth + 5 + iconOffset + 'px';
-
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
- y += iconHeight + this.options.iconSpacing;
- }
- }
-
- DOMutil.cleanupElements(this.svgElements);
- }
- }
- /**
- * A horizontal time axis
- * @param {Object} [options] See DataAxis.setOptions for the available
- * options.
- * @constructor DataAxis
- * @extends Component
- * @param body
- */
- function DataAxis (body, options, svg) {
- this.id = util.randomUUID();
- this.body = body;
-
- this.defaultOptions = {
- orientation: 'left', // supported: 'left', 'right'
- showMinorLabels: true,
- showMajorLabels: true,
- icons: true,
- majorLinesOffset: 7,
- minorLinesOffset: 4,
- labelOffsetX: 10,
- labelOffsetY: 2,
- iconWidth: 20,
- width: '40px',
- visible: true
- };
-
- this.linegraphSVG = svg;
- this.props = {};
- this.DOMelements = { // dynamic elements
- lines: {},
- labels: {}
- };
-
- this.dom = {};
-
- this.range = {start:0, end:0};
-
- this.options = util.extend({}, this.defaultOptions);
- this.conversionFactor = 1;
-
- this.setOptions(options);
- this.width = Number(('' + this.options.width).replace("px",""));
- this.minWidth = this.width;
- this.height = this.linegraphSVG.offsetHeight;
-
- this.stepPixels = 25;
- this.stepPixelsForced = 25;
- this.lineOffset = 0;
- this.master = true;
- this.svgElements = {};
-
-
- this.groups = {};
- this.amountOfGroups = 0;
-
- // create the HTML DOM
- this._create();
- }
-
- DataAxis.prototype = new Component();
-
-
-
- DataAxis.prototype.addGroup = function(label, graphOptions) {
- if (!this.groups.hasOwnProperty(label)) {
- this.groups[label] = graphOptions;
- }
- this.amountOfGroups += 1;
- };
-
- DataAxis.prototype.updateGroup = function(label, graphOptions) {
- this.groups[label] = graphOptions;
- };
-
- DataAxis.prototype.removeGroup = function(label) {
- if (this.groups.hasOwnProperty(label)) {
- delete this.groups[label];
- this.amountOfGroups -= 1;
- }
- };
-
-
- DataAxis.prototype.setOptions = function (options) {
- if (options) {
- var redraw = false;
- if (this.options.orientation != options.orientation && options.orientation !== undefined) {
- redraw = true;
- }
- var fields = [
- 'orientation',
- 'showMinorLabels',
- 'showMajorLabels',
- 'icons',
- 'majorLinesOffset',
- 'minorLinesOffset',
- 'labelOffsetX',
- 'labelOffsetY',
- 'iconWidth',
- 'width',
- 'visible'];
- util.selectiveExtend(fields, this.options, options);
-
- this.minWidth = Number(('' + this.options.width).replace("px",""));
-
- if (redraw == true && this.dom.frame) {
- this.hide();
- this.show();
- }
- }
- };
-
-
- /**
- * Create the HTML DOM for the DataAxis
- */
- DataAxis.prototype._create = function() {
- this.dom.frame = document.createElement('div');
- this.dom.frame.style.width = this.options.width;
- this.dom.frame.style.height = this.height;
-
- this.dom.lineContainer = document.createElement('div');
- this.dom.lineContainer.style.width = '100%';
- this.dom.lineContainer.style.height = this.height;
-
- // create svg element for graph drawing.
- this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.svg.style.position = "absolute";
- this.svg.style.top = '0px';
- this.svg.style.height = '100%';
- this.svg.style.width = '100%';
- this.svg.style.display = "block";
- this.dom.frame.appendChild(this.svg);
- };
-
- DataAxis.prototype._redrawGroupIcons = function () {
- DOMutil.prepareElements(this.svgElements);
-
- var x;
- var iconWidth = this.options.iconWidth;
- var iconHeight = 15;
- var iconOffset = 4;
- var y = iconOffset + 0.5 * iconHeight;
-
- if (this.options.orientation == 'left') {
- x = iconOffset;
- }
- else {
- x = this.width - iconWidth - iconOffset;
- }
-
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- this.groups[groupId].drawIcon(x, y, this.svgElements, this.svg, iconWidth, iconHeight);
- y += iconHeight + iconOffset;
- }
- }
-
- DOMutil.cleanupElements(this.svgElements);
- };
-
- /**
- * Create the HTML DOM for the DataAxis
- */
- DataAxis.prototype.show = function() {
- if (!this.dom.frame.parentNode) {
- if (this.options.orientation == 'left') {
- this.body.dom.left.appendChild(this.dom.frame);
- }
- else {
- this.body.dom.right.appendChild(this.dom.frame);
- }
- }
-
- if (!this.dom.lineContainer.parentNode) {
- this.body.dom.backgroundHorizontal.appendChild(this.dom.lineContainer);
- }
- };
-
- /**
- * Create the HTML DOM for the DataAxis
- */
- DataAxis.prototype.hide = function() {
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- }
-
- if (this.dom.lineContainer.parentNode) {
- this.dom.lineContainer.parentNode.removeChild(this.dom.lineContainer);
- }
- };
-
- /**
- * Set a range (start and end)
- * @param end
- * @param start
- * @param end
- */
- DataAxis.prototype.setRange = function (start, end) {
- this.range.start = start;
- this.range.end = end;
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- DataAxis.prototype.redraw = function () {
- var changeCalled = false;
- if (this.amountOfGroups == 0) {
- this.hide();
- }
- else {
- this.show();
- this.height = Number(this.linegraphSVG.style.height.replace("px",""));
- // svg offsetheight did not work in firefox and explorer...
-
- this.dom.lineContainer.style.height = this.height + 'px';
- this.width = this.options.visible == true ? Number(('' + this.options.width).replace("px","")) : 0;
-
- var props = this.props;
- var frame = this.dom.frame;
-
- // update classname
- frame.className = 'dataaxis';
-
- // calculate character width and height
- this._calculateCharSize();
-
- var orientation = this.options.orientation;
- var showMinorLabels = this.options.showMinorLabels;
- var showMajorLabels = this.options.showMajorLabels;
-
- // determine the width and height of the elemens for the axis
- props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
- props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
-
- props.minorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.minorLinesOffset;
- props.minorLineHeight = 1;
- props.majorLineWidth = this.body.dom.backgroundHorizontal.offsetWidth - this.lineOffset - this.width + 2 * this.options.majorLinesOffset;
- props.majorLineHeight = 1;
-
- // take frame offline while updating (is almost twice as fast)
- if (orientation == 'left') {
- frame.style.top = '0';
- frame.style.left = '0';
- frame.style.bottom = '';
- frame.style.width = this.width + 'px';
- frame.style.height = this.height + "px";
- }
- else { // right
- frame.style.top = '';
- frame.style.bottom = '0';
- frame.style.left = '0';
- frame.style.width = this.width + 'px';
- frame.style.height = this.height + "px";
- }
- changeCalled = this._redrawLabels();
- if (this.options.icons == true) {
- this._redrawGroupIcons();
- }
- }
- return changeCalled;
- };
-
- /**
- * Repaint major and minor text labels and vertical grid lines
- * @private
- */
- DataAxis.prototype._redrawLabels = function () {
- DOMutil.prepareElements(this.DOMelements);
-
- var orientation = this.options['orientation'];
-
- // calculate range and step (step such that we have space for 7 characters per label)
- var minimumStep = this.master ? this.props.majorCharHeight || 10 : this.stepPixelsForced;
- var step = new DataStep(this.range.start, this.range.end, minimumStep, this.dom.frame.offsetHeight);
- this.step = step;
- step.first();
-
- // get the distance in pixels for a step
- var stepPixels = this.dom.frame.offsetHeight / ((step.marginRange / step.step) + 1);
- this.stepPixels = stepPixels;
-
- var amountOfSteps = this.height / stepPixels;
- var stepDifference = 0;
-
- if (this.master == false) {
- stepPixels = this.stepPixelsForced;
- stepDifference = Math.round((this.height / stepPixels) - amountOfSteps);
- for (var i = 0; i < 0.5 * stepDifference; i++) {
- step.previous();
- }
- amountOfSteps = this.height / stepPixels;
- }
-
-
- this.valueAtZero = step.marginEnd;
- var marginStartPos = 0;
-
- // do not draw the first label
- var max = 1;
- step.next();
-
- this.maxLabelSize = 0;
- var y = 0;
- while (max < Math.round(amountOfSteps)) {
-
- y = Math.round(max * stepPixels);
- marginStartPos = max * stepPixels;
- var isMajor = step.isMajor();
-
- if (this.options['showMinorLabels'] && isMajor == false || this.master == false && this.options['showMinorLabels'] == true) {
- this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis minor', this.props.minorCharHeight);
- }
-
- if (isMajor && this.options['showMajorLabels'] && this.master == true ||
- this.options['showMinorLabels'] == false && this.master == false && isMajor == true) {
-
- if (y >= 0) {
- this._redrawLabel(y - 2, step.getCurrent(), orientation, 'yAxis major', this.props.majorCharHeight);
- }
- this._redrawLine(y, orientation, 'grid horizontal major', this.options.majorLinesOffset, this.props.majorLineWidth);
- }
- else {
- this._redrawLine(y, orientation, 'grid horizontal minor', this.options.minorLinesOffset, this.props.minorLineWidth);
- }
-
- step.next();
- max++;
- }
-
- this.conversionFactor = marginStartPos/((amountOfSteps-1) * step.step);
-
- var offset = this.options.icons == true ? this.options.iconWidth + this.options.labelOffsetX + 15 : this.options.labelOffsetX + 15;
- // this will resize the yAxis to accomodate the labels.
- if (this.maxLabelSize > (this.width - offset) && this.options.visible == true) {
- this.width = this.maxLabelSize + offset;
- this.options.width = this.width + "px";
- DOMutil.cleanupElements(this.DOMelements);
- this.redraw();
- return true;
- }
- // this will resize the yAxis if it is too big for the labels.
- else if (this.maxLabelSize < (this.width - offset) && this.options.visible == true && this.width > this.minWidth) {
- this.width = Math.max(this.minWidth,this.maxLabelSize + offset);
- this.options.width = this.width + "px";
- DOMutil.cleanupElements(this.DOMelements);
- this.redraw();
- return true;
- }
- else {
- DOMutil.cleanupElements(this.DOMelements);
- return false;
- }
- };
-
- /**
- * Create a label for the axis at position x
- * @private
- * @param y
- * @param text
- * @param orientation
- * @param className
- * @param characterHeight
- */
- DataAxis.prototype._redrawLabel = function (y, text, orientation, className, characterHeight) {
- // reuse redundant label
- var label = DOMutil.getDOMElement('div',this.DOMelements, this.dom.frame); //this.dom.redundant.labels.shift();
- label.className = className;
- label.innerHTML = text;
-
- if (orientation == 'left') {
- label.style.left = '-' + this.options.labelOffsetX + 'px';
- label.style.textAlign = "right";
- }
- else {
- label.style.right = '-' + this.options.labelOffsetX + 'px';
- label.style.textAlign = "left";
- }
-
- label.style.top = y - 0.5 * characterHeight + this.options.labelOffsetY + 'px';
-
- text += '';
-
- var largestWidth = Math.max(this.props.majorCharWidth,this.props.minorCharWidth);
- if (this.maxLabelSize < text.length * largestWidth) {
- this.maxLabelSize = text.length * largestWidth;
- }
- };
-
- /**
- * Create a minor line for the axis at position y
- * @param y
- * @param orientation
- * @param className
- * @param offset
- * @param width
- */
- DataAxis.prototype._redrawLine = function (y, orientation, className, offset, width) {
- if (this.master == true) {
- var line = DOMutil.getDOMElement('div',this.DOMelements, this.dom.lineContainer);//this.dom.redundant.lines.shift();
- line.className = className;
- line.innerHTML = '';
-
- if (orientation == 'left') {
- line.style.left = (this.width - offset) + 'px';
- }
- else {
- line.style.right = (this.width - offset) + 'px';
- }
-
- line.style.width = width + 'px';
- line.style.top = y + 'px';
- }
- };
-
-
- DataAxis.prototype.convertValue = function (value) {
- var invertedValue = this.valueAtZero - value;
- var convertedValue = invertedValue * this.conversionFactor;
- return convertedValue; // the -2 is to compensate for the borders
- };
-
-
- /**
- * Determine the size of text on the axis (both major and minor axis).
- * The size is calculated only once and then cached in this.props.
- * @private
- */
- DataAxis.prototype._calculateCharSize = function () {
- // determine the char width and height on the minor axis
- if (!('minorCharHeight' in this.props)) {
-
- var textMinor = document.createTextNode('0');
- var measureCharMinor = document.createElement('DIV');
- measureCharMinor.className = 'yAxis minor measure';
- measureCharMinor.appendChild(textMinor);
- this.dom.frame.appendChild(measureCharMinor);
-
- this.props.minorCharHeight = measureCharMinor.clientHeight;
- this.props.minorCharWidth = measureCharMinor.clientWidth;
-
- this.dom.frame.removeChild(measureCharMinor);
- }
-
- if (!('majorCharHeight' in this.props)) {
- var textMajor = document.createTextNode('0');
- var measureCharMajor = document.createElement('DIV');
- measureCharMajor.className = 'yAxis major measure';
- measureCharMajor.appendChild(textMajor);
- this.dom.frame.appendChild(measureCharMajor);
-
- this.props.majorCharHeight = measureCharMajor.clientHeight;
- this.props.majorCharWidth = measureCharMajor.clientWidth;
-
- this.dom.frame.removeChild(measureCharMajor);
- }
- };
-
- /**
- * 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.
- * @return {Date} snappedDate
- */
- DataAxis.prototype.snap = function(date) {
- return this.step.snap(date);
- };
-
- var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
-
- /**
- * This is the constructor of the LineGraph. It requires a Timeline body and options.
- *
- * @param body
- * @param options
- * @constructor
- */
- function LineGraph(body, options) {
- this.id = util.randomUUID();
- this.body = body;
-
- this.defaultOptions = {
- yAxisOrientation: 'left',
- defaultGroup: 'default',
- sort: true,
- sampling: true,
- graphHeight: '400px',
- shaded: {
- enabled: false,
- orientation: 'bottom' // top, bottom
- },
- style: 'line', // line, bar
- barChart: {
- width: 50,
- align: 'center' // left, center, right
- },
- catmullRom: {
- enabled: true,
- parametrization: 'centripetal', // uniform (alpha = 0.0), chordal (alpha = 1.0), centripetal (alpha = 0.5)
- alpha: 0.5
- },
- drawPoints: {
- enabled: true,
- size: 6,
- style: 'square' // square, circle
- },
- dataAxis: {
- showMinorLabels: true,
- showMajorLabels: true,
- icons: false,
- width: '40px',
- visible: true
- },
- legend: {
- enabled: false,
- icons: true,
- left: {
- visible: true,
- position: 'top-left' // top/bottom - left,right
- },
- right: {
- visible: true,
- position: 'top-right' // top/bottom - left,right
- }
- }
- };
-
- // options is shared by this ItemSet and all its items
- this.options = util.extend({}, this.defaultOptions);
- this.dom = {};
- this.props = {};
- this.hammer = null;
- this.groups = {};
-
- var me = this;
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
-
- // listeners for the DataSet of the items
- this.itemListeners = {
- 'add': function (event, params, senderId) {
- me._onAdd(params.items);
- },
- 'update': function (event, params, senderId) {
- me._onUpdate(params.items);
- },
- 'remove': function (event, params, senderId) {
- me._onRemove(params.items);
- }
- };
-
- // listeners for the DataSet of the groups
- this.groupListeners = {
- 'add': function (event, params, senderId) {
- me._onAddGroups(params.items);
- },
- 'update': function (event, params, senderId) {
- me._onUpdateGroups(params.items);
- },
- 'remove': function (event, params, senderId) {
- me._onRemoveGroups(params.items);
- }
- };
-
- this.items = {}; // object with an Item for every data item
- this.selection = []; // list with the ids of all selected nodes
- this.lastStart = this.body.range.start;
- this.touchParams = {}; // stores properties while dragging
-
- this.svgElements = {};
- this.setOptions(options);
- this.groupsUsingDefaultStyles = [0];
-
- this.body.emitter.on("rangechange",function() {
- if (me.lastStart != 0) {
- var offset = me.body.range.start - me.lastStart;
- var range = me.body.range.end - me.body.range.start;
- if (me.width != 0) {
- var rangePerPixelInv = me.width/range;
- var xOffset = offset * rangePerPixelInv;
- me.svg.style.left = (-me.width - xOffset) + "px";
- }
- }
- });
- this.body.emitter.on("rangechanged", function() {
- me.lastStart = me.body.range.start;
- me.svg.style.left = util.option.asSize(-me.width);
- me._updateGraph.apply(me);
- });
-
- // create the HTML DOM
- this._create();
- this.body.emitter.emit("change");
- }
-
- LineGraph.prototype = new Component();
-
- /**
- * Create the HTML DOM for the ItemSet
- */
- LineGraph.prototype._create = function(){
- var frame = document.createElement('div');
- frame.className = 'LineGraph';
- this.dom.frame = frame;
-
- // create svg element for graph drawing.
- this.svg = document.createElementNS('http://www.w3.org/2000/svg',"svg");
- this.svg.style.position = "relative";
- this.svg.style.height = ('' + this.options.graphHeight).replace("px",'') + 'px';
- this.svg.style.display = "block";
- frame.appendChild(this.svg);
-
- // data axis
- this.options.dataAxis.orientation = 'left';
- this.yAxisLeft = new DataAxis(this.body, this.options.dataAxis, this.svg);
-
- this.options.dataAxis.orientation = 'right';
- this.yAxisRight = new DataAxis(this.body, this.options.dataAxis, this.svg);
- delete this.options.dataAxis.orientation;
-
- // legends
- this.legendLeft = new Legend(this.body, this.options.legend, 'left');
- this.legendRight = new Legend(this.body, this.options.legend, 'right');
-
- this.show();
- };
-
- /**
- * set the options of the LineGraph. the mergeOptions is used for subObjects that have an enabled element.
- * @param options
- */
- LineGraph.prototype.setOptions = function(options) {
- if (options) {
- var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort'];
- util.selectiveDeepExtend(fields, this.options, options);
- util.mergeOptions(this.options, options,'catmullRom');
- util.mergeOptions(this.options, options,'drawPoints');
- util.mergeOptions(this.options, options,'shaded');
- util.mergeOptions(this.options, options,'legend');
-
- if (options.catmullRom) {
- if (typeof options.catmullRom == 'object') {
- if (options.catmullRom.parametrization) {
- if (options.catmullRom.parametrization == 'uniform') {
- this.options.catmullRom.alpha = 0;
- }
- else if (options.catmullRom.parametrization == 'chordal') {
- this.options.catmullRom.alpha = 1.0;
- }
- else {
- this.options.catmullRom.parametrization = 'centripetal';
- this.options.catmullRom.alpha = 0.5;
- }
- }
- }
- }
-
- if (this.yAxisLeft) {
- if (options.dataAxis !== undefined) {
- this.yAxisLeft.setOptions(this.options.dataAxis);
- this.yAxisRight.setOptions(this.options.dataAxis);
- }
- }
-
- if (this.legendLeft) {
- if (options.legend !== undefined) {
- this.legendLeft.setOptions(this.options.legend);
- this.legendRight.setOptions(this.options.legend);
- }
- }
-
- if (this.groups.hasOwnProperty(UNGROUPED)) {
- this.groups[UNGROUPED].setOptions(options);
- }
- }
- if (this.dom.frame) {
- this._updateGraph();
- }
- };
-
- /**
- * Hide the component from the DOM
- */
- LineGraph.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- }
- };
-
- /**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
- */
- LineGraph.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
- }
- };
-
-
- /**
- * Set items
- * @param {vis.DataSet | null} items
- */
- LineGraph.prototype.setItems = function(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 or DataView');
- }
-
- if (oldItemsData) {
- // unsubscribe from old dataset
- util.forEach(this.itemListeners, function (callback, event) {
- oldItemsData.off(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.itemListeners, function (callback, event) {
- me.itemsData.on(event, callback, id);
- });
-
- // add all new items
- ids = this.itemsData.getIds();
- this._onAdd(ids);
- }
- this._updateUngrouped();
- this._updateGraph();
- this.redraw();
- };
-
- /**
- * Set groups
- * @param {vis.DataSet} groups
- */
- LineGraph.prototype.setGroups = function(groups) {
- var me = this,
- ids;
-
- // unsubscribe from current dataset
- if (this.groupsData) {
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.unsubscribe(event, callback);
- });
-
- // remove all drawn groups
- ids = this.groupsData.getIds();
- this.groupsData = null;
- this._onRemoveGroups(ids); // note: this will cause a redraw
- }
-
- // replace the dataset
- if (!groups) {
- this.groupsData = null;
- }
- else if (groups instanceof DataSet || groups instanceof DataView) {
- this.groupsData = groups;
- }
- else {
- throw new TypeError('Data must be an instance of DataSet or DataView');
- }
-
- if (this.groupsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.on(event, callback, id);
- });
-
- // draw all ms
- ids = this.groupsData.getIds();
- this._onAddGroups(ids);
- }
- this._onUpdate();
- };
-
-
-
- LineGraph.prototype._onUpdate = function(ids) {
- this._updateUngrouped();
- this._updateAllGroupData();
- this._updateGraph();
- this.redraw();
- };
- LineGraph.prototype._onAdd = function (ids) {this._onUpdate(ids);};
- LineGraph.prototype._onRemove = function (ids) {this._onUpdate(ids);};
- LineGraph.prototype._onUpdateGroups = function (groupIds) {
- for (var i = 0; i < groupIds.length; i++) {
- var group = this.groupsData.get(groupIds[i]);
- this._updateGroup(group, groupIds[i]);
- }
-
- this._updateGraph();
- this.redraw();
- };
- LineGraph.prototype._onAddGroups = function (groupIds) {this._onUpdateGroups(groupIds);};
-
- LineGraph.prototype._onRemoveGroups = function (groupIds) {
- for (var i = 0; i < groupIds.length; i++) {
- if (!this.groups.hasOwnProperty(groupIds[i])) {
- if (this.groups[groupIds[i]].options.yAxisOrientation == 'right') {
- this.yAxisRight.removeGroup(groupIds[i]);
- this.legendRight.removeGroup(groupIds[i]);
- this.legendRight.redraw();
- }
- else {
- this.yAxisLeft.removeGroup(groupIds[i]);
- this.legendLeft.removeGroup(groupIds[i]);
- this.legendLeft.redraw();
- }
- delete this.groups[groupIds[i]];
- }
- }
- this._updateUngrouped();
- this._updateGraph();
- this.redraw();
- };
-
- /**
- * update a group object
- *
- * @param group
- * @param groupId
- * @private
- */
- LineGraph.prototype._updateGroup = function (group, groupId) {
- if (!this.groups.hasOwnProperty(groupId)) {
- this.groups[groupId] = new GraphGroup(group, groupId, this.options, this.groupsUsingDefaultStyles);
- if (this.groups[groupId].options.yAxisOrientation == 'right') {
- this.yAxisRight.addGroup(groupId, this.groups[groupId]);
- this.legendRight.addGroup(groupId, this.groups[groupId]);
- }
- else {
- this.yAxisLeft.addGroup(groupId, this.groups[groupId]);
- this.legendLeft.addGroup(groupId, this.groups[groupId]);
- }
- }
- else {
- this.groups[groupId].update(group);
- if (this.groups[groupId].options.yAxisOrientation == 'right') {
- this.yAxisRight.updateGroup(groupId, this.groups[groupId]);
- this.legendRight.updateGroup(groupId, this.groups[groupId]);
- }
- else {
- this.yAxisLeft.updateGroup(groupId, this.groups[groupId]);
- this.legendLeft.updateGroup(groupId, this.groups[groupId]);
- }
- }
- this.legendLeft.redraw();
- this.legendRight.redraw();
- };
-
- LineGraph.prototype._updateAllGroupData = function () {
- if (this.itemsData != null) {
- // ~450 ms @ 500k
-
- var groupsContent = {};
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- groupsContent[groupId] = [];
- }
- }
- for (var itemId in this.itemsData._data) {
- if (this.itemsData._data.hasOwnProperty(itemId)) {
- var item = this.itemsData._data[itemId];
- item.x = util.convert(item.x,"Date");
- groupsContent[item.group].push(item);
- }
- }
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- this.groups[groupId].setItems(groupsContent[groupId]);
- }
- }
- // // ~4500ms @ 500k
- // for (var groupId in this.groups) {
- // if (this.groups.hasOwnProperty(groupId)) {
- // this.groups[groupId].setItems(this.itemsData.get({filter:
- // function (item) {
- // return (item.group == groupId);
- // }, type:{x:"Date"}}
- // ));
- // }
- // }
- }
- };
-
- /**
- * Create or delete the group holding all ungrouped items. This group is used when
- * there are no groups specified. This anonymous group is called 'graph'.
- * @protected
- */
- LineGraph.prototype._updateUngrouped = function() {
- if (this.itemsData != null) {
- // var t0 = new Date();
- var group = {id: UNGROUPED, content: this.options.defaultGroup};
- this._updateGroup(group, UNGROUPED);
- var ungroupedCounter = 0;
- if (this.itemsData) {
- for (var itemId in this.itemsData._data) {
- if (this.itemsData._data.hasOwnProperty(itemId)) {
- var item = this.itemsData._data[itemId];
- if (item != undefined) {
- if (item.hasOwnProperty('group')) {
- if (item.group === undefined) {
- item.group = UNGROUPED;
- }
- }
- else {
- item.group = UNGROUPED;
- }
- ungroupedCounter = item.group == UNGROUPED ? ungroupedCounter + 1 : ungroupedCounter;
- }
- }
- }
- }
-
- // much much slower
- // var datapoints = this.itemsData.get({
- // filter: function (item) {return item.group === undefined;},
- // showInternalIds:true
- // });
- // if (datapoints.length > 0) {
- // var updateQuery = [];
- // for (var i = 0; i < datapoints.length; i++) {
- // updateQuery.push({id:datapoints[i].id, group: UNGROUPED});
- // }
- // this.itemsData.update(updateQuery, true);
- // }
- // var t1 = new Date();
- // var pointInUNGROUPED = this.itemsData.get({filter: function (item) {return item.group == UNGROUPED;}});
- if (ungroupedCounter == 0) {
- delete this.groups[UNGROUPED];
- this.legendLeft.removeGroup(UNGROUPED);
- this.legendRight.removeGroup(UNGROUPED);
- this.yAxisLeft.removeGroup(UNGROUPED);
- this.yAxisRight.removeGroup(UNGROUPED);
- }
- // console.log("getting amount ungrouped",new Date() - t1);
- // console.log("putting in ungrouped",new Date() - t0);
- }
- else {
- delete this.groups[UNGROUPED];
- this.legendLeft.removeGroup(UNGROUPED);
- this.legendRight.removeGroup(UNGROUPED);
- this.yAxisLeft.removeGroup(UNGROUPED);
- this.yAxisRight.removeGroup(UNGROUPED);
- }
-
- this.legendLeft.redraw();
- this.legendRight.redraw();
- };
-
-
- /**
- * Redraw the component, mandatory function
- * @return {boolean} Returns true if the component is resized
- */
- LineGraph.prototype.redraw = function() {
- var resized = false;
-
- this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
- if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
- resized = true;
- }
- // check if this component is resized
- resized = this._isResized() || resized;
- // check whether zoomed (in that case we need to re-stack everything)
- var visibleInterval = this.body.range.end - this.body.range.start;
- var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth);
- this.lastVisibleInterval = visibleInterval;
- this.lastWidth = this.width;
-
- // calculate actual size and position
- this.width = this.dom.frame.offsetWidth;
-
- // the svg element is three times as big as the width, this allows for fully dragging left and right
- // without reloading the graph. the controls for this are bound to events in the constructor
- if (resized == true) {
- this.svg.style.width = util.option.asSize(3*this.width);
- this.svg.style.left = util.option.asSize(-this.width);
- }
- if (zoomed == true) {
- this._updateGraph();
- }
-
- this.legendLeft.redraw();
- this.legendRight.redraw();
-
- return resized;
- };
-
- /**
- * Update and redraw the graph.
- *
- */
- LineGraph.prototype._updateGraph = function () {
- // reset the svg elements
- DOMutil.prepareElements(this.svgElements);
- // // very slow...
- // groupData = group.itemsData.get({filter:
- // function (item) {
- // return (item.x > minDate && item.x < maxDate);
- // }}
- // );
-
-
- if (this.width != 0 && this.itemsData != null) {
- var group, groupData, preprocessedGroup, i;
- var preprocessedGroupData = [];
- var processedGroupData = [];
- var groupRanges = [];
- var changeCalled = false;
-
- // getting group Ids
- var groupIds = [];
- for (var groupId in this.groups) {
- if (this.groups.hasOwnProperty(groupId)) {
- groupIds.push(groupId);
- }
- }
-
- // this is the range of the SVG canvas
- var minDate = this.body.util.toGlobalTime(- this.body.domProps.root.width);
- var maxDate = this.body.util.toGlobalTime(2 * this.body.domProps.root.width);
-
- // first select and preprocess the data from the datasets.
- // the groups have their preselection of data, we now loop over this data to see
- // what data we need to draw. Sorted data is much faster.
- // more optimization is possible by doing the sampling before and using the binary search
- // to find the end date to determine the increment.
- if (groupIds.length > 0) {
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- groupData = [];
- // optimization for sorted data
- if (group.options.sort == true) {
- var guess = Math.max(0,util.binarySearchGeneric(group.itemsData, minDate, 'x', 'before'));
-
- for (var j = guess; j < group.itemsData.length; j++) {
- var item = group.itemsData[j];
- if (item !== undefined) {
- if (item.x > maxDate) {
- groupData.push(item);
- break;
- }
- else {
- groupData.push(item);
- }
- }
- }
- }
- else {
- for (var j = 0; j < group.itemsData.length; j++) {
- var item = group.itemsData[j];
- if (item !== undefined) {
- if (item.x > minDate && item.x < maxDate) {
- groupData.push(item);
- }
- }
- }
- }
- // preprocess, split into ranges and data
- preprocessedGroup = this._preprocessData(groupData, group);
- groupRanges.push({min: preprocessedGroup.min, max: preprocessedGroup.max});
- preprocessedGroupData.push(preprocessedGroup.data);
- }
-
- // update the Y axis first, we use this data to draw at the correct Y points
- // changeCalled is required to clean the SVG on a change emit.
- changeCalled = this._updateYAxis(groupIds, groupRanges);
- if (changeCalled == true) {
- DOMutil.cleanupElements(this.svgElements);
- this.body.emitter.emit("change");
- return;
- }
-
- // with the yAxis scaled correctly, use this to get the Y values of the points.
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- processedGroupData.push(this._convertYvalues(preprocessedGroupData[i],group))
- }
-
- // draw the groups
- for (i = 0; i < groupIds.length; i++) {
- group = this.groups[groupIds[i]];
- if (group.options.style == 'line') {
- this._drawLineGraph(processedGroupData[i], group);
- }
- else {
- this._drawBarGraph (processedGroupData[i], group);
- }
- }
- }
- }
-
- // cleanup unused svg elements
- DOMutil.cleanupElements(this.svgElements);
- };
-
- /**
- * this sets the Y ranges for the Y axis. It also determines which of the axis should be shown or hidden.
- * @param {array} groupIds
- * @private
- */
- LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
- var changeCalled = false;
- var yAxisLeftUsed = false;
- var yAxisRightUsed = false;
- var minLeft = 1e9, minRight = 1e9, maxLeft = -1e9, maxRight = -1e9, minVal, maxVal;
- var orientation = 'left';
-
- // if groups are present
- if (groupIds.length > 0) {
- for (var i = 0; i < groupIds.length; i++) {
- orientation = 'left';
- var group = this.groups[groupIds[i]];
- if (group.options.yAxisOrientation == 'right') {
- orientation = 'right';
- }
-
- minVal = groupRanges[i].min;
- maxVal = groupRanges[i].max;
-
- if (orientation == 'left') {
- yAxisLeftUsed = true;
- minLeft = minLeft > minVal ? minVal : minLeft;
- maxLeft = maxLeft < maxVal ? maxVal : maxLeft;
- }
- else {
- yAxisRightUsed = true;
- minRight = minRight > minVal ? minVal : minRight;
- maxRight = maxRight < maxVal ? maxVal : maxRight;
- }
- }
- if (yAxisLeftUsed == true) {
- this.yAxisLeft.setRange(minLeft, maxLeft);
- }
- if (yAxisRightUsed == true) {
- this.yAxisRight.setRange(minRight, maxRight);
- }
- }
-
- changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled;
- changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
-
- if (yAxisRightUsed == true && yAxisLeftUsed == true) {
- this.yAxisLeft.drawIcons = true;
- this.yAxisRight.drawIcons = true;
- }
- else {
- this.yAxisLeft.drawIcons = false;
- this.yAxisRight.drawIcons = false;
- }
-
- this.yAxisRight.master = !yAxisLeftUsed;
-
- if (this.yAxisRight.master == false) {
- if (yAxisRightUsed == true) {
- this.yAxisLeft.lineOffset = this.yAxisRight.width;
- }
- changeCalled = this.yAxisLeft.redraw() || changeCalled;
- this.yAxisRight.stepPixelsForced = this.yAxisLeft.stepPixels;
- changeCalled = this.yAxisRight.redraw() || changeCalled;
- }
- else {
- changeCalled = this.yAxisRight.redraw() || changeCalled;
- }
- return changeCalled;
- };
-
- /**
- * This shows or hides the Y axis if needed. If there is a change, the changed event is emitted by the updateYAxis function
- *
- * @param {boolean} axisUsed
- * @returns {boolean}
- * @private
- * @param axis
- */
- LineGraph.prototype._toggleAxisVisiblity = function (axisUsed, axis) {
- var changed = false;
- if (axisUsed == false) {
- if (axis.dom.frame.parentNode) {
- axis.hide();
- changed = true;
- }
- }
- else {
- if (!axis.dom.frame.parentNode) {
- axis.show();
- changed = true;
- }
- }
- return changed;
- };
-
-
- /**
- * draw a bar graph
- * @param datapoints
- * @param group
- */
- LineGraph.prototype._drawBarGraph = function (dataset, group) {
- if (dataset != null) {
- if (dataset.length > 0) {
- var coreDistance;
- var minWidth = 0.1 * group.options.barChart.width;
- var offset = 0;
- var width = group.options.barChart.width;
-
- if (group.options.barChart.align == 'left') {offset -= 0.5*width;}
- else if (group.options.barChart.align == 'right') {offset += 0.5*width;}
-
- for (var i = 0; i < dataset.length; i++) {
- // dynammically downscale the width so there is no overlap up to 1/10th the original width
- if (i+1 < dataset.length) {coreDistance = Math.abs(dataset[i+1].x - dataset[i].x);}
- if (i > 0) {coreDistance = Math.min(coreDistance,Math.abs(dataset[i-1].x - dataset[i].x));}
- if (coreDistance < width) {width = coreDistance < minWidth ? minWidth : coreDistance;}
-
- DOMutil.drawBar(dataset[i].x + offset, dataset[i].y, width, group.zeroPosition - dataset[i].y, group.className + ' bar', this.svgElements, this.svg);
- }
-
- // draw points
- if (group.options.drawPoints.enabled == true) {
- this._drawPoints(dataset, group, this.svgElements, this.svg, offset);
- }
- }
- }
- };
-
-
- /**
- * draw a line graph
- *
- * @param datapoints
- * @param group
- */
- LineGraph.prototype._drawLineGraph = function (dataset, group) {
- if (dataset != null) {
- if (dataset.length > 0) {
- var path, d;
- var svgHeight = Number(this.svg.style.height.replace("px",""));
- path = DOMutil.getSVGElement('path', this.svgElements, this.svg);
- path.setAttributeNS(null, "class", group.className);
-
- // construct path from dataset
- if (group.options.catmullRom.enabled == true) {
- d = this._catmullRom(dataset, group);
- }
- else {
- d = this._linear(dataset);
- }
-
- // append with points for fill and finalize the path
- if (group.options.shaded.enabled == true) {
- var fillPath = DOMutil.getSVGElement('path',this.svgElements, this.svg);
- var dFill;
- if (group.options.shaded.orientation == 'top') {
- dFill = "M" + dataset[0].x + "," + 0 + " " + d + "L" + dataset[dataset.length - 1].x + "," + 0;
- }
- else {
- dFill = "M" + dataset[0].x + "," + svgHeight + " " + d + "L" + dataset[dataset.length - 1].x + "," + svgHeight;
- }
- fillPath.setAttributeNS(null, "class", group.className + " fill");
- fillPath.setAttributeNS(null, "d", dFill);
- }
- // copy properties to path for drawing.
- path.setAttributeNS(null, "d", "M" + d);
-
- // draw points
- if (group.options.drawPoints.enabled == true) {
- this._drawPoints(dataset, group, this.svgElements, this.svg);
- }
- }
- }
- };
-
- /**
- * draw the data points
- *
- * @param dataset
- * @param JSONcontainer
- * @param svg
- * @param group
- */
- LineGraph.prototype._drawPoints = function (dataset, group, JSONcontainer, svg, offset) {
- if (offset === undefined) {offset = 0;}
- for (var i = 0; i < dataset.length; i++) {
- DOMutil.drawPoint(dataset[i].x + offset, dataset[i].y, group, JSONcontainer, svg);
- }
- };
-
-
-
- /**
- * This uses the DataAxis object to generate the correct X coordinate on the SVG window. It uses the
- * util function toScreen to get the x coordinate from the timestamp. It also pre-filters the data and get the minMax ranges for
- * the yAxis.
- *
- * @param datapoints
- * @returns {Array}
- * @private
- */
- LineGraph.prototype._preprocessData = function (datapoints, group) {
- var extractedData = [];
- var xValue, yValue;
- var toScreen = this.body.util.toScreen;
-
- var increment = 1;
- var amountOfPoints = datapoints.length;
-
- var yMin = datapoints[0].y;
- var yMax = datapoints[0].y;
-
- // the global screen is used because changing the width of the yAxis may affect the increment, resulting in an endless loop
- // of width changing of the yAxis.
- if (group.options.sampling == true) {
- var xDistance = this.body.util.toGlobalScreen(datapoints[datapoints.length-1].x) - this.body.util.toGlobalScreen(datapoints[0].x);
- var pointsPerPixel = amountOfPoints/xDistance;
- increment = Math.min(Math.ceil(0.2 * amountOfPoints), Math.max(1,Math.round(pointsPerPixel)));
- }
-
- for (var i = 0; i < amountOfPoints; i += increment) {
- xValue = toScreen(datapoints[i].x) + this.width - 1;
- yValue = datapoints[i].y;
- extractedData.push({x: xValue, y: yValue});
- yMin = yMin > yValue ? yValue : yMin;
- yMax = yMax < yValue ? yValue : yMax;
- }
-
- // extractedData.sort(function (a,b) {return a.x - b.x;});
- return {min: yMin, max: yMax, data: extractedData};
- };
-
- /**
- * This uses the DataAxis object to generate the correct Y coordinate on the SVG window. It uses the
- * util function toScreen to get the x coordinate from the timestamp.
- *
- * @param datapoints
- * @param options
- * @returns {Array}
- * @private
- */
- LineGraph.prototype._convertYvalues = function (datapoints, group) {
- var extractedData = [];
- var xValue, yValue;
- var axis = this.yAxisLeft;
- var svgHeight = Number(this.svg.style.height.replace("px",""));
-
- if (group.options.yAxisOrientation == 'right') {
- axis = this.yAxisRight;
- }
-
- for (var i = 0; i < datapoints.length; i++) {
- xValue = datapoints[i].x;
- yValue = Math.round(axis.convertValue(datapoints[i].y));
- extractedData.push({x: xValue, y: yValue});
- }
-
- group.setZeroPosition(Math.min(svgHeight, axis.convertValue(0)));
-
- // extractedData.sort(function (a,b) {return a.x - b.x;});
- return extractedData;
- };
-
-
- /**
- * This uses an uniform parametrization of the CatmullRom algorithm:
- * "On the Parameterization of Catmull-Rom Curves" by Cem Yuksel et al.
- * @param data
- * @returns {string}
- * @private
- */
- LineGraph.prototype._catmullRomUniform = function(data) {
- // catmull rom
- var p0, p1, p2, p3, bp1, bp2;
- var d = Math.round(data[0].x) + "," + Math.round(data[0].y) + " ";
- var normalization = 1/6;
- var length = data.length;
- for (var i = 0; i < length - 1; i++) {
-
- p0 = (i == 0) ? data[0] : data[i-1];
- p1 = data[i];
- p2 = data[i+1];
- p3 = (i + 2 < length) ? data[i+2] : p2;
-
-
- // Catmull-Rom to Cubic Bezier conversion matrix
- // 0 1 0 0
- // -1/6 1 1/6 0
- // 0 1/6 1 -1/6
- // 0 0 1 0
-
- // bp0 = { x: p1.x, y: p1.y };
- bp1 = { x: ((-p0.x + 6*p1.x + p2.x) *normalization), y: ((-p0.y + 6*p1.y + p2.y) *normalization)};
- bp2 = { x: (( p1.x + 6*p2.x - p3.x) *normalization), y: (( p1.y + 6*p2.y - p3.y) *normalization)};
- // bp0 = { x: p2.x, y: p2.y };
-
- d += "C" +
- bp1.x + "," +
- bp1.y + " " +
- bp2.x + "," +
- bp2.y + " " +
- p2.x + "," +
- p2.y + " ";
- }
-
- return d;
- };
-
- /**
- * This uses either the chordal or centripetal parameterization of the catmull-rom algorithm.
- * By default, the centripetal parameterization is used because this gives the nicest results.
- * These parameterizations are relatively heavy because the distance between 4 points have to be calculated.
- *
- * One optimization can be used to reuse distances since this is a sliding window approach.
- * @param data
- * @returns {string}
- * @private
- */
- LineGraph.prototype._catmullRom = function(data, group) {
- var alpha = group.options.catmullRom.alpha;
- if (alpha == 0 || alpha === undefined) {
- return this._catmullRomUniform(data);
- }
- else {
- var p0, p1, p2, p3, bp1, bp2, d1,d2,d3, A, B, N, M;
- var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
- var d = Math.round(data[0].x) + "," + Math.round(data[0].y) + " ";
- var length = data.length;
- for (var i = 0; i < length - 1; i++) {
-
- p0 = (i == 0) ? data[0] : data[i-1];
- p1 = data[i];
- p2 = data[i+1];
- p3 = (i + 2 < length) ? data[i+2] : p2;
-
- d1 = Math.sqrt(Math.pow(p0.x - p1.x,2) + Math.pow(p0.y - p1.y,2));
- d2 = Math.sqrt(Math.pow(p1.x - p2.x,2) + Math.pow(p1.y - p2.y,2));
- d3 = Math.sqrt(Math.pow(p2.x - p3.x,2) + Math.pow(p2.y - p3.y,2));
-
- // Catmull-Rom to Cubic Bezier conversion matrix
- //
- // A = 2d1^2a + 3d1^a * d2^a + d3^2a
- // B = 2d3^2a + 3d3^a * d2^a + d2^2a
- //
- // [ 0 1 0 0 ]
- // [ -d2^2a/N A/N d1^2a/N 0 ]
- // [ 0 d3^2a/M B/M -d2^2a/M ]
- // [ 0 0 1 0 ]
-
- // [ 0 1 0 0 ]
- // [ -d2pow2a/N A/N d1pow2a/N 0 ]
- // [ 0 d3pow2a/M B/M -d2pow2a/M ]
- // [ 0 0 1 0 ]
-
- d3powA = Math.pow(d3, alpha);
- d3pow2A = Math.pow(d3,2*alpha);
- d2powA = Math.pow(d2, alpha);
- d2pow2A = Math.pow(d2,2*alpha);
- d1powA = Math.pow(d1, alpha);
- d1pow2A = Math.pow(d1,2*alpha);
-
- A = 2*d1pow2A + 3*d1powA * d2powA + d2pow2A;
- B = 2*d3pow2A + 3*d3powA * d2powA + d2pow2A;
- N = 3*d1powA * (d1powA + d2powA);
- if (N > 0) {N = 1 / N;}
- M = 3*d3powA * (d3powA + d2powA);
- if (M > 0) {M = 1 / M;}
-
- bp1 = { x: ((-d2pow2A * p0.x + A*p1.x + d1pow2A * p2.x) * N),
- y: ((-d2pow2A * p0.y + A*p1.y + d1pow2A * p2.y) * N)};
-
- bp2 = { x: (( d3pow2A * p1.x + B*p2.x - d2pow2A * p3.x) * M),
- y: (( d3pow2A * p1.y + B*p2.y - d2pow2A * p3.y) * M)};
-
- if (bp1.x == 0 && bp1.y == 0) {bp1 = p1;}
- if (bp2.x == 0 && bp2.y == 0) {bp2 = p2;}
- d += "C" +
- bp1.x + "," +
- bp1.y + " " +
- bp2.x + "," +
- bp2.y + " " +
- p2.x + "," +
- p2.y + " ";
- }
-
- return d;
- }
- };
-
- /**
- * this generates the SVG path for a linear drawing between datapoints.
- * @param data
- * @returns {string}
- * @private
- */
- LineGraph.prototype._linear = function(data) {
- // linear
- var d = "";
- for (var i = 0; i < data.length; i++) {
- if (i == 0) {
- d += data[i].x + "," + data[i].y;
- }
- else {
- d += " " + data[i].x + "," + data[i].y;
- }
- }
- return d;
- };
-
-
-
-
-
-
- /**
- * @constructor DataStep
- * The class DataStep is an iterator for data for the lineGraph. You provide a start data point and an
- * end data point. 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 DataStep 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
- */
- function DataStep(start, end, minimumStep, containerHeight, forcedStepSize) {
- // variables
- this.current = 0;
-
- this.autoScale = true;
- this.stepIndex = 0;
- this.step = 1;
- this.scale = 1;
-
- this.marginStart;
- this.marginEnd;
-
- this.majorSteps = [1, 2, 5, 10];
- this.minorSteps = [0.25, 0.5, 1, 2];
-
- this.setRange(start, end, minimumStep, containerHeight, forcedStepSize);
- }
-
-
-
- /**
- * 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 {Number} [start] The start date and time.
- * @param {Number} [end] The end date and time.
- * @param {Number} [minimumStep] Optional. Minimum step size in milliseconds
- */
- DataStep.prototype.setRange = function(start, end, minimumStep, containerHeight, forcedStepSize) {
- this._start = start;
- this._end = end;
-
- if (this.autoScale) {
- this.setMinimumStep(minimumStep, containerHeight, forcedStepSize);
- }
- this.setFirst();
- };
-
- /**
- * Automatically determine the scale that bests fits the provided minimum step
- * @param {Number} [minimumStep] The minimum step size in milliseconds
- */
- DataStep.prototype.setMinimumStep = function(minimumStep, containerHeight) {
- // round to floor
- var size = this._end - this._start;
- var safeSize = size * 1.1;
- var minimumStepValue = minimumStep * (safeSize / containerHeight);
- var orderOfMagnitude = Math.round(Math.log(safeSize)/Math.LN10);
-
- var minorStepIdx = -1;
- var magnitudefactor = Math.pow(10,orderOfMagnitude);
-
- var start = 0;
- if (orderOfMagnitude < 0) {
- start = orderOfMagnitude;
- }
-
- var solutionFound = false;
- for (var i = start; Math.abs(i) <= Math.abs(orderOfMagnitude); i++) {
- magnitudefactor = Math.pow(10,i);
- for (var j = 0; j < this.minorSteps.length; j++) {
- var stepSize = magnitudefactor * this.minorSteps[j];
- if (stepSize >= minimumStepValue) {
- solutionFound = true;
- minorStepIdx = j;
- break;
- }
- }
- if (solutionFound == true) {
- break;
- }
- }
- this.stepIndex = minorStepIdx;
- this.scale = magnitudefactor;
- this.step = magnitudefactor * this.minorSteps[minorStepIdx];
- };
-
-
- /**
- * Set the range iterator to the start date.
- */
- DataStep.prototype.first = function() {
- this.setFirst();
- };
-
- /**
- * Round the current date to the first minor date value
- * This must be executed once when the current date is set to start Date
- */
- DataStep.prototype.setFirst = function() {
- var niceStart = this._start - (this.scale * this.minorSteps[this.stepIndex]);
- var niceEnd = this._end + (this.scale * this.minorSteps[this.stepIndex]);
-
- this.marginEnd = this.roundToMinor(niceEnd);
- this.marginStart = this.roundToMinor(niceStart);
- this.marginRange = this.marginEnd - this.marginStart;
-
- this.current = this.marginEnd;
-
- };
-
- DataStep.prototype.roundToMinor = function(value) {
- var rounded = value - (value % (this.scale * this.minorSteps[this.stepIndex]));
- if (value % (this.scale * this.minorSteps[this.stepIndex]) > 0.5 * (this.scale * this.minorSteps[this.stepIndex])) {
- return rounded + (this.scale * this.minorSteps[this.stepIndex]);
- }
- else {
- return rounded;
- }
- }
-
-
- /**
- * Check if the there is a next step
- * @return {boolean} true if the current date has not passed the end date
- */
- DataStep.prototype.hasNext = function () {
- return (this.current >= this.marginStart);
- };
-
- /**
- * Do the next step
- */
- DataStep.prototype.next = function() {
- var prev = this.current;
- this.current -= this.step;
-
- // safety mechanism: if current time is still unchanged, move to the end
- if (this.current == prev) {
- this.current = this._end;
- }
- };
-
- /**
- * Do the next step
- */
- DataStep.prototype.previous = function() {
- this.current += this.step;
- this.marginEnd += this.step;
- this.marginRange = this.marginEnd - this.marginStart;
- };
-
-
-
- /**
- * Get the current datetime
- * @return {Number} current The current date
- */
- DataStep.prototype.getCurrent = function() {
- var toPrecision = '' + Number(this.current).toPrecision(5);
- for (var i = toPrecision.length-1; i > 0; i--) {
- if (toPrecision[i] == "0") {
- toPrecision = toPrecision.slice(0,i);
- }
- else if (toPrecision[i] == "." || toPrecision[i] == ",") {
- toPrecision = toPrecision.slice(0,i);
- break;
- }
- else{
- break;
- }
- }
-
-
- return toPrecision;
- };
-
-
-
- /**
- * 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.
- * @return {Date} snappedDate
- */
- DataStep.prototype.snap = function(date) {
-
- };
-
- /**
- * 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.
- */
- DataStep.prototype.isMajor = function() {
- return (this.current % (this.scale * this.majorSteps[this.stepIndex]) == 0);
- };
-
- /**
- * Utility functions for ordering and stacking of items
- */
- var stack = {};
-
- /**
- * Order items by their start data
- * @param {Item[]} items
- */
- stack.orderByStart = function(items) {
- items.sort(function (a, b) {
- return a.data.start - b.data.start;
- });
- };
-
- /**
- * Order items by their end date. If they have no end date, their start date
- * is used.
- * @param {Item[]} items
- */
- stack.orderByEnd = function(items) {
- items.sort(function (a, b) {
- var aTime = ('end' in a.data) ? a.data.end : a.data.start,
- bTime = ('end' in b.data) ? b.data.end : b.data.start;
-
- return aTime - bTime;
- });
- };
-
- /**
- * Adjust vertical positions of the items such that they don't overlap each
- * other.
- * @param {Item[]} items
- * All visible items
- * @param {{item: number, axis: number}} margin
- * Margins between items and between items and the axis.
- * @param {boolean} [force=false]
- * If true, all items will be repositioned. If false (default), only
- * items having a top===null will be re-stacked
- */
- stack.stack = function(items, margin, force) {
- var i, iMax;
-
- if (force) {
- // reset top position of all items
- for (i = 0, iMax = items.length; i < iMax; i++) {
- items[i].top = null;
- }
- }
-
- // calculate new, non-overlapping positions
- for (i = 0, iMax = items.length; i < iMax; i++) {
- var item = items[i];
- if (item.top === null) {
- // initialize top position
- item.top = margin.axis;
-
- 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
- var collidingItem = null;
- for (var j = 0, jj = items.length; j < jj; j++) {
- var other = items[j];
- if (other.top !== null && other !== item && stack.collision(item, other, margin.item)) {
- collidingItem = other;
- break;
- }
- }
-
- if (collidingItem != null) {
- // There is a collision. Reposition the items above the colliding element
- item.top = collidingItem.top + collidingItem.height + margin.item;
- }
- } while (collidingItem);
- }
- }
- };
-
- /**
- * Adjust vertical positions of the items without stacking them
- * @param {Item[]} items
- * All visible items
- * @param {{item: number, axis: number}} margin
- * Margins between items and between items and the axis.
- */
- stack.nostack = function(items, margin) {
- var i, iMax;
-
- // reset top position of all items
- for (i = 0, iMax = items.length; i < iMax; i++) {
- items[i].top = margin.axis;
- }
- };
-
- /**
- * Test if the two provided items collide
- * The items must have parameters left, width, top, and height.
- * @param {Item} a The first item
- * @param {Item} 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.collision = function(a, b, margin) {
- return ((a.left - margin) < (b.left + b.width) &&
- (a.left + a.width + margin) > b.left &&
- (a.top - margin) < (b.top + b.height) &&
- (a.top + a.height + margin) > b.top);
- };
-
- /**
- * @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
- */
- function TimeStep(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.
- * @return {Date} snappedDate
- */
- TimeStep.prototype.snap = function(date) {
- var clone = new Date(date.valueOf());
-
- if (this.scale == TimeStep.SCALE.YEAR) {
- var year = clone.getFullYear() + Math.round(clone.getMonth() / 12);
- clone.setFullYear(Math.round(year / this.step) * this.step);
- clone.setMonth(0);
- clone.setDate(0);
- clone.setHours(0);
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == TimeStep.SCALE.MONTH) {
- if (clone.getDate() > 15) {
- clone.setDate(1);
- clone.setMonth(clone.getMonth() + 1);
- // important: first set Date to 1, after that change the month.
- }
- else {
- clone.setDate(1);
- }
-
- clone.setHours(0);
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == TimeStep.SCALE.DAY) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 5:
- case 2:
- clone.setHours(Math.round(clone.getHours() / 24) * 24); break;
- default:
- clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
- }
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == TimeStep.SCALE.WEEKDAY) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 5:
- case 2:
- clone.setHours(Math.round(clone.getHours() / 12) * 12); break;
- default:
- clone.setHours(Math.round(clone.getHours() / 6) * 6); break;
- }
- clone.setMinutes(0);
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- }
- else if (this.scale == TimeStep.SCALE.HOUR) {
- switch (this.step) {
- case 4:
- clone.setMinutes(Math.round(clone.getMinutes() / 60) * 60); break;
- default:
- clone.setMinutes(Math.round(clone.getMinutes() / 30) * 30); break;
- }
- clone.setSeconds(0);
- clone.setMilliseconds(0);
- } else if (this.scale == TimeStep.SCALE.MINUTE) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 15:
- case 10:
- clone.setMinutes(Math.round(clone.getMinutes() / 5) * 5);
- clone.setSeconds(0);
- break;
- case 5:
- clone.setSeconds(Math.round(clone.getSeconds() / 60) * 60); break;
- default:
- clone.setSeconds(Math.round(clone.getSeconds() / 30) * 30); break;
- }
- clone.setMilliseconds(0);
- }
- else if (this.scale == TimeStep.SCALE.SECOND) {
- //noinspection FallthroughInSwitchStatementJS
- switch (this.step) {
- case 15:
- case 10:
- clone.setSeconds(Math.round(clone.getSeconds() / 5) * 5);
- clone.setMilliseconds(0);
- break;
- case 5:
- clone.setMilliseconds(Math.round(clone.getMilliseconds() / 1000) * 1000); break;
- default:
- clone.setMilliseconds(Math.round(clone.getMilliseconds() / 500) * 500); break;
- }
- }
- else if (this.scale == TimeStep.SCALE.MILLISECOND) {
- var step = this.step > 5 ? this.step / 2 : 1;
- clone.setMilliseconds(Math.round(clone.getMilliseconds() / step) * step);
- }
-
- return clone;
- };
-
- /**
- * 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 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 {{dom: Object, domProps: Object, emitter: Emitter}} body
- * @param {Object} [options] See description at Range.setOptions
- */
- function Range(body, options) {
- var now = moment().hours(0).minutes(0).seconds(0).milliseconds(0);
- this.start = now.clone().add('days', -3).valueOf(); // Number
- this.end = now.clone().add('days', 4).valueOf(); // Number
-
- this.body = body;
-
- // default options
- this.defaultOptions = {
- start: null,
- end: null,
- direction: 'horizontal', // 'horizontal' or 'vertical'
- moveable: true,
- zoomable: true,
- min: null,
- max: null,
- zoomMin: 10, // milliseconds
- zoomMax: 1000 * 60 * 60 * 24 * 365 * 10000 // milliseconds
- };
- this.options = util.extend({}, this.defaultOptions);
-
- this.props = {
- touch: {}
- };
-
- // drag listeners for dragging
- this.body.emitter.on('dragstart', this._onDragStart.bind(this));
- this.body.emitter.on('drag', this._onDrag.bind(this));
- this.body.emitter.on('dragend', this._onDragEnd.bind(this));
-
- // ignore dragging when holding
- this.body.emitter.on('hold', this._onHold.bind(this));
-
- // mouse wheel for zooming
- this.body.emitter.on('mousewheel', this._onMouseWheel.bind(this));
- this.body.emitter.on('DOMMouseScroll', this._onMouseWheel.bind(this)); // For FF
-
- // pinch to zoom
- this.body.emitter.on('touch', this._onTouch.bind(this));
- this.body.emitter.on('pinch', this._onPinch.bind(this));
-
- this.setOptions(options);
- }
-
- Range.prototype = new Component();
-
- /**
- * Set options for the range controller
- * @param {Object} options Available options:
- * {Number | Date | String} start Start date for the range
- * {Number | Date | String} end End date for the range
- * {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).
- * {Boolean} moveable Enable moving of the range
- * by dragging. True by default
- * {Boolean} zoomable Enable zooming of the range
- * by pinching/scrolling. True by default
- */
- Range.prototype.setOptions = function (options) {
- if (options) {
- // copy the options that we know
- var fields = ['direction', 'min', 'max', 'zoomMin', 'zoomMax', 'moveable', 'zoomable'];
- util.selectiveExtend(fields, this.options, options);
-
- if ('start' in options || 'end' in options) {
- // apply a new range. both start and end are optional
- this.setRange(options.start, options.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".');
- }
- }
-
- /**
- * 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) {
- var params = {
- start: new Date(this.start),
- end: new Date(this.end)
- };
- this.body.emitter.emit('rangechange', params);
- this.body.emitter.emit('rangechanged', params);
- }
- };
-
- /**
- * 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, 'Date').valueOf() : this.start,
- newEnd = (end != null) ? util.convert(end, 'Date').valueOf() : 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
- };
- }
- };
-
- /**
- * Start dragging horizontally or vertically
- * @param {Event} event
- * @private
- */
- Range.prototype._onDragStart = function(event) {
- // only allow dragging when configured as movable
- if (!this.options.moveable) return;
-
- // refuse to drag when we where pinching to prevent the timeline make a jump
- // when releasing the fingers in opposite order from the touch screen
- if (!this.props.touch.allowDragging) return;
-
- this.props.touch.start = this.start;
- this.props.touch.end = this.end;
-
- if (this.body.dom.root) {
- this.body.dom.root.style.cursor = 'move';
- }
- };
-
- /**
- * Perform dragging operation
- * @param {Event} event
- * @private
- */
- Range.prototype._onDrag = function (event) {
- // only allow dragging when configured as movable
- if (!this.options.moveable) return;
- var direction = this.options.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 (!this.props.touch.allowDragging) return;
- var delta = (direction == 'horizontal') ? event.gesture.deltaX : event.gesture.deltaY,
- interval = (this.props.touch.end - this.props.touch.start),
- width = (direction == 'horizontal') ? this.body.domProps.center.width : this.body.domProps.center.height,
- diffRange = -delta / width * interval;
- this._applyRange(this.props.touch.start + diffRange, this.props.touch.end + diffRange);
- this.body.emitter.emit('rangechange', {
- start: new Date(this.start),
- end: new Date(this.end)
- });
- };
-
- /**
- * Stop dragging operation
- * @param {event} event
- * @private
- */
- Range.prototype._onDragEnd = function (event) {
- // only allow dragging when configured as movable
- if (!this.options.moveable) return;
-
- // refuse to drag when we where pinching to prevent the timeline make a jump
- // when releasing the fingers in opposite order from the touch screen
- if (!this.props.touch.allowDragging) return;
-
- if (this.body.dom.root) {
- this.body.dom.root.style.cursor = 'auto';
- }
-
- // fire a rangechanged event
- this.body.emitter.emit('rangechanged', {
- start: new Date(this.start),
- end: new Date(this.end)
- });
- };
-
- /**
- * Event handler for mouse wheel event, used to zoom
- * Code from http://adomas.org/javascript-mouse-wheel/
- * @param {Event} event
- * @private
- */
- Range.prototype._onMouseWheel = function(event) {
- // only allow zooming when configured as zoomable and moveable
- if (!(this.options.zoomable && this.options.moveable)) return;
-
- // 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.center, this.body.dom.center),
- pointerDate = this._pointerToDate(pointer);
-
- this.zoom(scale, pointerDate);
- }
-
- // Prevent default actions caused by mouse wheel
- // (else the page and timeline both zoom and scroll)
- event.preventDefault();
- };
-
- /**
- * Start of a touch gesture
- * @private
- */
- Range.prototype._onTouch = function (event) {
- this.props.touch.start = this.start;
- this.props.touch.end = this.end;
- this.props.touch.allowDragging = true;
- this.props.touch.center = null;
- };
-
- /**
- * On start of a hold gesture
- * @private
- */
- Range.prototype._onHold = function () {
- this.props.touch.allowDragging = false;
- };
-
- /**
- * Handle pinch event
- * @param {Event} event
- * @private
- */
- Range.prototype._onPinch = function (event) {
- // only allow zooming when configured as zoomable and moveable
- if (!(this.options.zoomable && this.options.moveable)) return;
-
- this.props.touch.allowDragging = false;
-
- if (event.gesture.touches.length > 1) {
- if (!this.props.touch.center) {
- this.props.touch.center = getPointer(event.gesture.center, this.body.dom.center);
- }
-
- var scale = 1 / event.gesture.scale,
- initDate = this._pointerToDate(this.props.touch.center);
-
- // calculate new start and end
- var newStart = parseInt(initDate + (this.props.touch.start - initDate) * scale);
- var newEnd = parseInt(initDate + (this.props.touch.end - initDate) * scale);
-
- // apply new range
- this.setRange(newStart, newEnd);
- }
- };
-
- /**
- * Helper function to calculate the center date for zooming
- * @param {{x: Number, y: Number}} pointer
- * @return {number} date
- * @private
- */
- Range.prototype._pointerToDate = function (pointer) {
- var conversion;
- var direction = this.options.direction;
-
- validateDirection(direction);
-
- if (direction == 'horizontal') {
- var width = this.body.domProps.center.width;
- conversion = this.conversion(width);
- return pointer.x / conversion.scale + conversion.offset;
- }
- else {
- var height = this.body.domProps.center.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);
- };
-
- /**
- * Prototype for visual components
- * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} [body]
- * @param {Object} [options]
- */
- function Component (body, options) {
- this.options = null;
- this.props = null;
- }
-
- /**
- * Set options for the component. The new options will be merged into the
- * current options.
- * @param {Object} options
- */
- Component.prototype.setOptions = function(options) {
- if (options) {
- util.extend(this.options, options);
- }
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- Component.prototype.redraw = function() {
- // should be implemented by the component
- return false;
- };
-
- /**
- * Destroy the component. Cleanup DOM and event listeners
- */
- Component.prototype.destroy = function() {
- // should be implemented by the component
- };
-
- /**
- * Test whether the component is resized since the last time _isResized() was
- * called.
- * @return {Boolean} Returns true if the component is resized
- * @protected
- */
- Component.prototype._isResized = function() {
- var resized = (this.props._previousWidth !== this.props.width ||
- this.props._previousHeight !== this.props.height);
-
- this.props._previousWidth = this.props.width;
- this.props._previousHeight = this.props.height;
-
- return resized;
- };
-
- /**
- * A horizontal time axis
- * @param {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
- * @param {Object} [options] See TimeAxis.setOptions for the available
- * options.
- * @constructor TimeAxis
- * @extends Component
- */
- function TimeAxis (body, options) {
- this.dom = {
- foreground: null,
- majorLines: [],
- majorTexts: [],
- minorLines: [],
- minorTexts: [],
- redundant: {
- majorLines: [],
- majorTexts: [],
- minorLines: [],
- minorTexts: []
- }
- };
- this.props = {
- range: {
- start: 0,
- end: 0,
- minimumStep: 0
- },
- lineTop: 0
- };
-
- this.defaultOptions = {
- orientation: 'bottom', // supported: 'top', 'bottom'
- // TODO: implement timeaxis orientations 'left' and 'right'
- showMinorLabels: true,
- showMajorLabels: true
- };
- this.options = util.extend({}, this.defaultOptions);
-
- this.body = body;
-
- // create the HTML DOM
- this._create();
-
- this.setOptions(options);
- }
-
- TimeAxis.prototype = new Component();
-
- /**
- * Set options for the TimeAxis.
- * Parameters will be merged in current options.
- * @param {Object} options Available options:
- * {string} [orientation]
- * {boolean} [showMinorLabels]
- * {boolean} [showMajorLabels]
- */
- TimeAxis.prototype.setOptions = function(options) {
- if (options) {
- // copy all options that we know
- util.selectiveExtend(['orientation', 'showMinorLabels', 'showMajorLabels'], this.options, options);
- }
- };
-
- /**
- * Create the HTML DOM for the TimeAxis
- */
- TimeAxis.prototype._create = function() {
- this.dom.foreground = document.createElement('div');
- this.dom.background = document.createElement('div');
-
- this.dom.foreground.className = 'timeaxis foreground';
- this.dom.background.className = 'timeaxis background';
- };
-
- /**
- * Destroy the TimeAxis
- */
- TimeAxis.prototype.destroy = function() {
- // remove from DOM
- if (this.dom.foreground.parentNode) {
- this.dom.foreground.parentNode.removeChild(this.dom.foreground);
- }
- if (this.dom.background.parentNode) {
- this.dom.background.parentNode.removeChild(this.dom.background);
- }
-
- this.body = null;
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- TimeAxis.prototype.redraw = function () {
- var options = this.options,
- props = this.props,
- foreground = this.dom.foreground,
- background = this.dom.background;
-
- // determine the correct parent DOM element (depending on option orientation)
- var parent = (options.orientation == 'top') ? this.body.dom.top : this.body.dom.bottom;
- var parentChanged = (foreground.parentNode !== parent);
-
- // calculate character width and height
- this._calculateCharSize();
-
- // TODO: recalculate sizes only needed when parent is resized or options is changed
- var orientation = this.options.orientation,
- showMinorLabels = this.options.showMinorLabels,
- showMajorLabels = this.options.showMajorLabels;
-
- // determine the width and height of the elemens for the axis
- props.minorLabelHeight = showMinorLabels ? props.minorCharHeight : 0;
- props.majorLabelHeight = showMajorLabels ? props.majorCharHeight : 0;
- props.height = props.minorLabelHeight + props.majorLabelHeight;
- props.width = foreground.offsetWidth;
-
- props.minorLineHeight = this.body.domProps.root.height - props.majorLabelHeight -
- (options.orientation == 'top' ? this.body.domProps.bottom.height : this.body.domProps.top.height);
- props.minorLineWidth = 1; // TODO: really calculate width
- props.majorLineHeight = props.minorLineHeight + props.majorLabelHeight;
- props.majorLineWidth = 1; // TODO: really calculate width
-
- // take foreground and background offline while updating (is almost twice as fast)
- var foregroundNextSibling = foreground.nextSibling;
- var backgroundNextSibling = background.nextSibling;
- foreground.parentNode && foreground.parentNode.removeChild(foreground);
- background.parentNode && background.parentNode.removeChild(background);
-
- foreground.style.height = this.props.height + 'px';
-
- this._repaintLabels();
-
- // put DOM online again (at the same place)
- if (foregroundNextSibling) {
- parent.insertBefore(foreground, foregroundNextSibling);
- }
- else {
- parent.appendChild(foreground)
- }
- if (backgroundNextSibling) {
- this.body.dom.backgroundVertical.insertBefore(background, backgroundNextSibling);
- }
- else {
- this.body.dom.backgroundVertical.appendChild(background)
- }
-
- return this._isResized() || parentChanged;
- };
-
- /**
- * Repaint major and minor text labels and vertical grid lines
- * @private
- */
- TimeAxis.prototype._repaintLabels = function () {
- var orientation = this.options.orientation;
-
- // calculate range and step (step such that we have space for 7 characters per label)
- var start = util.convert(this.body.range.start, 'Number'),
- end = util.convert(this.body.range.end, 'Number'),
- minimumStep = this.body.util.toTime((this.props.minorCharWidth || 10) * 7).valueOf()
- -this.body.util.toTime(0).valueOf();
- var step = new TimeStep(new Date(start), new Date(end), minimumStep);
- this.step = step;
-
- // Move all DOM elements to a "redundant" list, where they
- // can be picked for re-use, and clear the lists with lines and texts.
- // At the end of the function _repaintLabels, left over elements will be cleaned up
- var dom = this.dom;
- dom.redundant.majorLines = dom.majorLines;
- dom.redundant.majorTexts = dom.majorTexts;
- dom.redundant.minorLines = dom.minorLines;
- dom.redundant.minorTexts = dom.minorTexts;
- dom.majorLines = [];
- dom.majorTexts = [];
- dom.minorLines = [];
- dom.minorTexts = [];
-
- step.first();
- var xFirstMajorLabel = undefined;
- var max = 0;
- while (step.hasNext() && max < 1000) {
- max++;
- var cur = step.getCurrent(),
- x = this.body.util.toScreen(cur),
- isMajor = step.isMajor();
-
- // TODO: lines must have a width, such that we can create css backgrounds
-
- if (this.options.showMinorLabels) {
- this._repaintMinorText(x, step.getLabelMinor(), orientation);
- }
-
- if (isMajor && this.options.showMajorLabels) {
- if (x > 0) {
- if (xFirstMajorLabel == undefined) {
- xFirstMajorLabel = x;
- }
- this._repaintMajorText(x, step.getLabelMajor(), orientation);
- }
- this._repaintMajorLine(x, orientation);
- }
- else {
- this._repaintMinorLine(x, orientation);
- }
-
- step.next();
- }
-
- // create a major label on the left when needed
- if (this.options.showMajorLabels) {
- var leftTime = this.body.util.toTime(0),
- leftText = step.getLabelMajor(leftTime),
- widthText = leftText.length * (this.props.majorCharWidth || 10) + 10; // upper bound estimation
-
- if (xFirstMajorLabel == undefined || widthText < xFirstMajorLabel) {
- this._repaintMajorText(0, leftText, orientation);
- }
- }
-
- // Cleanup leftover DOM elements from the redundant list
- 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
- * @param {String} orientation "top" or "bottom" (default)
- * @private
- */
- TimeAxis.prototype._repaintMinorText = function (x, text, orientation) {
- // 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.dom.foreground.appendChild(label);
- }
- this.dom.minorTexts.push(label);
-
- label.childNodes[0].nodeValue = text;
-
- label.style.top = (orientation == 'top') ? (this.props.majorLabelHeight + 'px') : '0';
- label.style.left = x + '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
- * @param {String} orientation "top" or "bottom" (default)
- * @private
- */
- TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
- // 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.dom.foreground.appendChild(label);
- }
- this.dom.majorTexts.push(label);
-
- label.childNodes[0].nodeValue = text;
- //label.title = title; // TODO: this is a heavy operation
-
- label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight + 'px');
- label.style.left = x + 'px';
- };
-
- /**
- * Create a minor line for the axis at position x
- * @param {Number} x
- * @param {String} orientation "top" or "bottom" (default)
- * @private
- */
- TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
- // 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.dom.background.appendChild(line);
- }
- this.dom.minorLines.push(line);
-
- var props = this.props;
- if (orientation == 'top') {
- line.style.top = props.majorLabelHeight + 'px';
- }
- else {
- line.style.top = this.body.domProps.top.height + '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
- * @param {String} orientation "top" or "bottom" (default)
- * @private
- */
- TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
- // 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.dom.background.appendChild(line);
- }
- this.dom.majorLines.push(line);
-
- var props = this.props;
- if (orientation == 'top') {
- line.style.top = '0';
- }
- else {
- line.style.top = this.body.domProps.top.height + 'px';
- }
- line.style.left = (x - props.majorLineWidth / 2) + 'px';
- line.style.height = props.majorLineHeight + 'px';
- };
-
- /**
- * Determine the size of text on the axis (both major and minor axis).
- * The size is calculated only once and then cached in this.props.
- * @private
- */
- TimeAxis.prototype._calculateCharSize = function () {
- // Note: We calculate char size with every redraw. Size may change, for
- // example when any of the timelines parents had display:none for example.
-
- // determine the char width and height on the minor axis
- if (!this.dom.measureCharMinor) {
- this.dom.measureCharMinor = document.createElement('DIV');
- this.dom.measureCharMinor.className = 'text minor measure';
- this.dom.measureCharMinor.style.position = 'absolute';
-
- this.dom.measureCharMinor.appendChild(document.createTextNode('0'));
- this.dom.foreground.appendChild(this.dom.measureCharMinor);
- }
- this.props.minorCharHeight = this.dom.measureCharMinor.clientHeight;
- this.props.minorCharWidth = this.dom.measureCharMinor.clientWidth;
-
- // determine the char width and height on the major axis
- if (!this.dom.measureCharMajor) {
- this.dom.measureCharMajor = document.createElement('DIV');
- this.dom.measureCharMajor.className = 'text minor measure';
- this.dom.measureCharMajor.style.position = 'absolute';
-
- this.dom.measureCharMajor.appendChild(document.createTextNode('0'));
- this.dom.foreground.appendChild(this.dom.measureCharMajor);
- }
- this.props.majorCharHeight = this.dom.measureCharMajor.clientHeight;
- this.props.majorCharWidth = this.dom.measureCharMajor.clientWidth;
- };
-
- /**
- * 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.
- * @return {Date} snappedDate
- */
- TimeAxis.prototype.snap = function(date) {
- return this.step.snap(date);
- };
-
- /**
- * A current time bar
- * @param {{range: Range, dom: Object, domProps: Object}} body
- * @param {Object} [options] Available parameters:
- * {Boolean} [showCurrentTime]
- * @constructor CurrentTime
- * @extends Component
- */
-
- function CurrentTime (body, options) {
- this.body = body;
-
- // default options
- this.defaultOptions = {
- showCurrentTime: true
- };
- this.options = util.extend({}, this.defaultOptions);
-
- this._create();
-
- this.setOptions(options);
- }
-
- CurrentTime.prototype = new Component();
-
- /**
- * Create the HTML DOM for the current time bar
- * @private
- */
- CurrentTime.prototype._create = function() {
- var bar = document.createElement('div');
- bar.className = 'currenttime';
- bar.style.position = 'absolute';
- bar.style.top = '0px';
- bar.style.height = '100%';
-
- this.bar = bar;
- };
-
- /**
- * Destroy the CurrentTime bar
- */
- CurrentTime.prototype.destroy = function () {
- this.options.showCurrentTime = false;
- this.redraw(); // will remove the bar from the DOM and stop refreshing
-
- this.body = null;
- };
-
- /**
- * Set options for the component. Options will be merged in current options.
- * @param {Object} options Available parameters:
- * {boolean} [showCurrentTime]
- */
- CurrentTime.prototype.setOptions = function(options) {
- if (options) {
- // copy all options that we know
- util.selectiveExtend(['showCurrentTime'], this.options, options);
- }
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- CurrentTime.prototype.redraw = function() {
- if (this.options.showCurrentTime) {
- var parent = this.body.dom.backgroundVertical;
- if (this.bar.parentNode != parent) {
- // attach to the dom
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- parent.appendChild(this.bar);
-
- this.start();
- }
-
- var now = new Date();
- var x = this.body.util.toScreen(now);
-
- this.bar.style.left = x + 'px';
- this.bar.title = 'Current time: ' + now;
- }
- else {
- // remove the line from the DOM
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- this.stop();
- }
-
- return false;
- };
-
- /**
- * Start auto refreshing the current time bar
- */
- CurrentTime.prototype.start = function() {
- var me = this;
-
- function update () {
- me.stop();
-
- // determine interval to refresh
- var scale = me.body.range.conversion(me.body.domProps.center.width).scale;
- var interval = 1 / scale / 10;
- if (interval < 30) interval = 30;
- if (interval > 1000) interval = 1000;
-
- me.redraw();
-
- // start a timer to adjust for the new time
- me.currentTimeTimer = setTimeout(update, interval);
- }
-
- update();
- };
-
- /**
- * Stop auto refreshing the current time bar
- */
- CurrentTime.prototype.stop = function() {
- if (this.currentTimeTimer !== undefined) {
- clearTimeout(this.currentTimeTimer);
- delete this.currentTimeTimer;
- }
- };
-
- /**
- * A custom time bar
- * @param {{range: Range, dom: Object}} body
- * @param {Object} [options] Available parameters:
- * {Boolean} [showCustomTime]
- * @constructor CustomTime
- * @extends Component
- */
-
- function CustomTime (body, options) {
- this.body = body;
-
- // default options
- this.defaultOptions = {
- showCustomTime: false
- };
- this.options = util.extend({}, this.defaultOptions);
-
- this.customTime = new Date();
- this.eventParams = {}; // stores state parameters while dragging the bar
-
- // create the DOM
- this._create();
-
- this.setOptions(options);
- }
-
- CustomTime.prototype = new Component();
-
- /**
- * Set options for the component. Options will be merged in current options.
- * @param {Object} options Available parameters:
- * {boolean} [showCustomTime]
- */
- CustomTime.prototype.setOptions = function(options) {
- if (options) {
- // copy all options that we know
- util.selectiveExtend(['showCustomTime'], this.options, options);
- }
- };
-
- /**
- * Create the DOM for the custom time
- * @private
- */
- CustomTime.prototype._create = function() {
- var bar = document.createElement('div');
- bar.className = 'customtime';
- bar.style.position = 'absolute';
- bar.style.top = '0px';
- bar.style.height = '100%';
- this.bar = 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);
-
- // attach event listeners
- this.hammer = Hammer(bar, {
- prevent_default: true
- });
- this.hammer.on('dragstart', this._onDragStart.bind(this));
- this.hammer.on('drag', this._onDrag.bind(this));
- this.hammer.on('dragend', this._onDragEnd.bind(this));
- };
-
- /**
- * Destroy the CustomTime bar
- */
- CustomTime.prototype.destroy = function () {
- this.options.showCustomTime = false;
- this.redraw(); // will remove the bar from the DOM
-
- this.hammer.enable(false);
- this.hammer = null;
-
- this.body = null;
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- CustomTime.prototype.redraw = function () {
- if (this.options.showCustomTime) {
- var parent = this.body.dom.backgroundVertical;
- if (this.bar.parentNode != parent) {
- // attach to the dom
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- parent.appendChild(this.bar);
- }
-
- var x = this.body.util.toScreen(this.customTime);
-
- this.bar.style.left = x + 'px';
- this.bar.title = 'Time: ' + this.customTime;
- }
- else {
- // remove the line from the DOM
- if (this.bar.parentNode) {
- this.bar.parentNode.removeChild(this.bar);
- }
- }
-
- return false;
- };
-
- /**
- * Set custom time.
- * @param {Date} time
- */
- CustomTime.prototype.setCustomTime = function(time) {
- this.customTime = new Date(time.valueOf());
- this.redraw();
- };
-
- /**
- * Retrieve the current custom time.
- * @return {Date} customTime
- */
- CustomTime.prototype.getCustomTime = function() {
- return new Date(this.customTime.valueOf());
- };
-
- /**
- * Start moving horizontally
- * @param {Event} event
- * @private
- */
- CustomTime.prototype._onDragStart = function(event) {
- this.eventParams.dragging = true;
- this.eventParams.customTime = this.customTime;
-
- event.stopPropagation();
- event.preventDefault();
- };
-
- /**
- * Perform moving operating.
- * @param {Event} event
- * @private
- */
- CustomTime.prototype._onDrag = function (event) {
- if (!this.eventParams.dragging) return;
-
- var deltaX = event.gesture.deltaX,
- x = this.body.util.toScreen(this.eventParams.customTime) + deltaX,
- time = this.body.util.toTime(x);
-
- this.setCustomTime(time);
-
- // fire a timechange event
- this.body.emitter.emit('timechange', {
- time: new Date(this.customTime.valueOf())
- });
-
- event.stopPropagation();
- event.preventDefault();
- };
-
- /**
- * Stop moving operating.
- * @param {event} event
- * @private
- */
- CustomTime.prototype._onDragEnd = function (event) {
- if (!this.eventParams.dragging) return;
-
- // fire a timechanged event
- this.body.emitter.emit('timechanged', {
- time: new Date(this.customTime.valueOf())
- });
-
- event.stopPropagation();
- event.preventDefault();
- };
-
- var UNGROUPED = '__ungrouped__'; // reserved group id for ungrouped items
-
- /**
- * 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 {{dom: Object, domProps: Object, emitter: Emitter, range: Range}} body
- * @param {Object} [options] See ItemSet.setOptions for the available options.
- * @constructor ItemSet
- * @extends Component
- */
- function ItemSet(body, options) {
- this.body = body;
-
- this.defaultOptions = {
- type: null, // 'box', 'point', 'range'
- orientation: 'bottom', // 'top' or 'bottom'
- align: 'center', // alignment of box items
- stack: true,
- groupOrder: null,
-
- selectable: true,
- editable: {
- updateTime: false,
- updateGroup: false,
- add: false,
- remove: false
- },
-
- onAdd: function (item, callback) {
- callback(item);
- },
- onUpdate: function (item, callback) {
- callback(item);
- },
- onMove: function (item, callback) {
- callback(item);
- },
- onRemove: function (item, callback) {
- callback(item);
- },
-
- margin: {
- item: 10,
- axis: 20
- },
- padding: 5
- };
-
- // options is shared by this ItemSet and all its items
- this.options = util.extend({}, this.defaultOptions);
-
- // options for getting items from the DataSet with the correct type
- this.itemOptions = {
- type: {start: 'Date', end: 'Date'}
- };
-
- this.conversion = {
- toScreen: body.util.toScreen,
- toTime: body.util.toTime
- };
- this.dom = {};
- this.props = {};
- this.hammer = null;
-
- var me = this;
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
-
- // listeners for the DataSet of the items
- this.itemListeners = {
- 'add': function (event, params, senderId) {
- me._onAdd(params.items);
- },
- 'update': function (event, params, senderId) {
- me._onUpdate(params.items);
- },
- 'remove': function (event, params, senderId) {
- me._onRemove(params.items);
- }
- };
-
- // listeners for the DataSet of the groups
- this.groupListeners = {
- 'add': function (event, params, senderId) {
- me._onAddGroups(params.items);
- },
- 'update': function (event, params, senderId) {
- me._onUpdateGroups(params.items);
- },
- 'remove': function (event, params, senderId) {
- me._onRemoveGroups(params.items);
- }
- };
-
- this.items = {}; // object with an Item for every data item
- this.groups = {}; // Group object for every group
- this.groupIds = [];
-
- this.selection = []; // list with the ids of all selected nodes
- this.stackDirty = true; // if true, all items will be restacked on next redraw
-
- this.touchParams = {}; // stores properties while dragging
- // create the HTML DOM
-
- this._create();
-
- this.setOptions(options);
- }
-
- ItemSet.prototype = new Component();
-
- // available item types will be registered here
- ItemSet.types = {
- box: ItemBox,
- range: ItemRange,
- point: ItemPoint
- };
-
- /**
- * Create the HTML DOM for the ItemSet
- */
- ItemSet.prototype._create = function(){
- var frame = document.createElement('div');
- frame.className = 'itemset';
- frame['timeline-itemset'] = this;
- this.dom.frame = frame;
-
- // 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 = 'axis';
- this.dom.axis = axis;
-
- // create labelset
- var labelSet = document.createElement('div');
- labelSet.className = 'labelset';
- this.dom.labelSet = labelSet;
-
- // create ungrouped Group
- this._updateUngrouped();
-
- // attach event listeners
- // Note: we bind to the centerContainer for the case where the height
- // of the center container is larger than of the ItemSet, so we
- // can click in the empty area to create a new item or deselect an item.
- this.hammer = Hammer(this.body.dom.centerContainer, {
- prevent_default: true
- });
-
- // drag items when selected
- this.hammer.on('touch', this._onTouch.bind(this));
- this.hammer.on('dragstart', this._onDragStart.bind(this));
- this.hammer.on('drag', this._onDrag.bind(this));
- this.hammer.on('dragend', this._onDragEnd.bind(this));
-
- // single select (or unselect) when tapping an item
- this.hammer.on('tap', this._onSelectItem.bind(this));
-
- // multi select when holding mouse/touch, or on ctrl+click
- this.hammer.on('hold', this._onMultiSelectItem.bind(this));
-
- // add item on doubletap
- this.hammer.on('doubletap', this._onAddItem.bind(this));
-
- // attach to the DOM
- this.show();
- };
-
- /**
- * Set options for the ItemSet. Existing options will be extended/overwritten.
- * @param {Object} [options] The following options are available:
- * {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).
- * {Function} groupOrder
- * A sorting function for ordering groups
- * {Boolean} stack
- * If true (deafult), items will be stacked on
- * top of each other.
- * {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} margin
- * Set margin for both axis and items in pixels.
- * {Number} padding
- * Padding of the contents of an item in pixels.
- * Must correspond with the items css. Default is 5.
- * {Boolean} selectable
- * If true (default), items can be selected.
- * {Boolean} editable
- * Set all editable options to true or false
- * {Boolean} editable.updateTime
- * Allow dragging an item to an other moment in time
- * {Boolean} editable.updateGroup
- * Allow dragging an item to an other group
- * {Boolean} editable.add
- * Allow creating new items on double tap
- * {Boolean} editable.remove
- * Allow removing items by clicking the delete button
- * top right of a selected item.
- * {Function(item: Item, callback: Function)} onAdd
- * Callback function triggered when an item is about to be added:
- * when the user double taps an empty space in the Timeline.
- * {Function(item: Item, callback: Function)} onUpdate
- * Callback function fired when an item is about to be updated.
- * This function typically has to show a dialog where the user
- * change the item. If not implemented, nothing happens.
- * {Function(item: Item, callback: Function)} onMove
- * Fired when an item has been moved. If not implemented,
- * the move action will be accepted.
- * {Function(item: Item, callback: Function)} onRemove
- * Fired when an item is about to be deleted.
- * If not implemented, the item will be always removed.
- */
- ItemSet.prototype.setOptions = function(options) {
- if (options) {
- // copy all options that we know
- var fields = ['type', 'align', 'orientation', 'padding', 'stack', 'selectable', 'groupOrder'];
- util.selectiveExtend(fields, this.options, options);
-
- if ('margin' in options) {
- if (typeof options.margin === 'number') {
- this.options.margin.axis = options.margin;
- this.options.margin.item = options.margin;
- }
- else if (typeof options.margin === 'object'){
- util.selectiveExtend(['axis', 'item'], this.options.margin, options.margin);
- }
- }
-
- if ('editable' in options) {
- if (typeof options.editable === 'boolean') {
- this.options.editable.updateTime = options.editable;
- this.options.editable.updateGroup = options.editable;
- this.options.editable.add = options.editable;
- this.options.editable.remove = options.editable;
- }
- else if (typeof options.editable === 'object') {
- util.selectiveExtend(['updateTime', 'updateGroup', 'add', 'remove'], this.options.editable, options.editable);
- }
- }
-
- // callback functions
- var addCallback = (function (name) {
- if (name in options) {
- var fn = options[name];
- if (!(fn instanceof Function) || fn.length != 2) {
- throw new Error('option ' + name + ' must be a function ' + name + '(item, callback)');
- }
- this.options[name] = fn;
- }
- }).bind(this);
- ['onAdd', 'onUpdate', 'onRemove', 'onMove'].forEach(addCallback);
-
- // force the itemSet to refresh: options like orientation and margins may be changed
- this.markDirty();
- }
- };
-
- /**
- * Mark the ItemSet dirty so it will refresh everything with next redraw
- */
- ItemSet.prototype.markDirty = function() {
- this.groupIds = [];
- this.stackDirty = true;
- };
-
- /**
- * Destroy the ItemSet
- */
- ItemSet.prototype.destroy = function() {
- this.hide();
- this.setItems(null);
- this.setGroups(null);
-
- this.hammer = null;
-
- this.body = null;
- this.conversion = null;
- };
-
- /**
- * Hide the component from the DOM
- */
- ItemSet.prototype.hide = function() {
- // remove the frame containing the items
- if (this.dom.frame.parentNode) {
- this.dom.frame.parentNode.removeChild(this.dom.frame);
- }
-
- // remove the axis with dots
- if (this.dom.axis.parentNode) {
- this.dom.axis.parentNode.removeChild(this.dom.axis);
- }
-
- // remove the labelset containing all group labels
- if (this.dom.labelSet.parentNode) {
- this.dom.labelSet.parentNode.removeChild(this.dom.labelSet);
- }
- };
-
- /**
- * Show the component in the DOM (when not already visible).
- * @return {Boolean} changed
- */
- ItemSet.prototype.show = function() {
- // show frame containing the items
- if (!this.dom.frame.parentNode) {
- this.body.dom.center.appendChild(this.dom.frame);
- }
-
- // show axis with dots
- if (!this.dom.axis.parentNode) {
- this.body.dom.backgroundVertical.appendChild(this.dom.axis);
- }
-
- // show labelset containing labels
- if (!this.dom.labelSet.parentNode) {
- this.body.dom.left.appendChild(this.dom.labelSet);
- }
- };
-
- /**
- * Set selected items by their id. Replaces the current selection
- * Unknown id's are silently ignored.
- * @param {Array} [ids] An array with zero or more id's of the items to be
- * selected. If ids is an empty array, all items will be
- * unselected.
- */
- ItemSet.prototype.setSelection = function(ids) {
- var i, ii, id, item;
-
- if (ids) {
- if (!Array.isArray(ids)) {
- throw new TypeError('Array expected');
- }
-
- // unselect currently selected items
- for (i = 0, ii = this.selection.length; i < ii; i++) {
- id = this.selection[i];
- item = this.items[id];
- if (item) item.unselect();
- }
-
- // select items
- this.selection = [];
- for (i = 0, ii = ids.length; i < ii; i++) {
- id = ids[i];
- item = this.items[id];
- if (item) {
- this.selection.push(id);
- item.select();
- }
- }
- }
- };
-
- /**
- * Get the selected items by their id
- * @return {Array} ids The ids of the selected items
- */
- ItemSet.prototype.getSelection = function() {
- return this.selection.concat([]);
- };
-
- /**
- * Deselect a selected item
- * @param {String | Number} id
- * @private
- */
- ItemSet.prototype._deselect = function(id) {
- var selection = this.selection;
- for (var i = 0, ii = selection.length; i < ii; i++) {
- if (selection[i] == id) { // non-strict comparison!
- selection.splice(i, 1);
- break;
- }
- }
- };
-
- /**
- * Repaint the component
- * @return {boolean} Returns true if the component is resized
- */
- ItemSet.prototype.redraw = function() {
- var margin = this.options.margin,
- range = this.body.range,
- asSize = util.option.asSize,
- options = this.options,
- orientation = options.orientation,
- resized = false,
- frame = this.dom.frame,
- editable = options.editable.updateTime || options.editable.updateGroup;
-
- // update class name
- frame.className = 'itemset' + (editable ? ' editable' : '');
-
- // reorder the groups (if needed)
- resized = this._orderGroups() || resized;
-
- // check whether zoomed (in that case we need to re-stack everything)
- // TODO: would be nicer to get this as a trigger from Range
- var visibleInterval = range.end - range.start;
- var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.props.width != this.props.lastWidth);
- if (zoomed) this.stackDirty = true;
- this.lastVisibleInterval = visibleInterval;
- this.props.lastWidth = this.props.width;
-
- // redraw all groups
- var restack = this.stackDirty,
- firstGroup = this._firstGroup(),
- firstMargin = {
- item: margin.item,
- axis: margin.axis
- },
- nonFirstMargin = {
- item: margin.item,
- axis: margin.item / 2
- },
- height = 0,
- minHeight = margin.axis + margin.item;
- util.forEach(this.groups, function (group) {
- var groupMargin = (group == firstGroup) ? firstMargin : nonFirstMargin;
- var groupResized = group.redraw(range, groupMargin, restack);
- resized = groupResized || resized;
- height += group.height;
- });
- height = Math.max(height, minHeight);
- this.stackDirty = false;
-
- // update frame height
- frame.style.height = asSize(height);
-
- // calculate actual size and position
- this.props.top = frame.offsetTop;
- this.props.left = frame.offsetLeft;
- this.props.width = frame.offsetWidth;
- this.props.height = height;
-
- // reposition axis
- this.dom.axis.style.top = asSize((orientation == 'top') ?
- (this.body.domProps.top.height + this.body.domProps.border.top) :
- (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
- this.dom.axis.style.left = this.body.domProps.border.left + 'px';
-
- // check if this component is resized
- resized = this._isResized() || resized;
-
- return resized;
- };
-
- /**
- * Get the first group, aligned with the axis
- * @return {Group | null} firstGroup
- * @private
- */
- ItemSet.prototype._firstGroup = function() {
- var firstGroupIndex = (this.options.orientation == 'top') ? 0 : (this.groupIds.length - 1);
- var firstGroupId = this.groupIds[firstGroupIndex];
- var firstGroup = this.groups[firstGroupId] || this.groups[UNGROUPED];
-
- return firstGroup || null;
- };
-
- /**
- * Create or delete the group holding all ungrouped items. This group is used when
- * there are no groups specified.
- * @protected
- */
- ItemSet.prototype._updateUngrouped = function() {
- var ungrouped = this.groups[UNGROUPED];
-
- if (this.groupsData) {
- // remove the group holding all ungrouped items
- if (ungrouped) {
- ungrouped.hide();
- delete this.groups[UNGROUPED];
- }
- }
- else {
- // create a group holding all (unfiltered) items
- if (!ungrouped) {
- var id = null;
- var data = null;
- ungrouped = new Group(id, data, this);
- this.groups[UNGROUPED] = ungrouped;
-
- for (var itemId in this.items) {
- if (this.items.hasOwnProperty(itemId)) {
- ungrouped.add(this.items[itemId]);
- }
- }
-
- ungrouped.show();
- }
- }
- };
-
- /**
- * Get the element for the labelset
- * @return {HTMLElement} labelSet
- */
- ItemSet.prototype.getLabelSet = function() {
- return this.dom.labelSet;
- };
-
- /**
- * Set items
- * @param {vis.DataSet | null} items
- */
- ItemSet.prototype.setItems = function(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 or DataView');
- }
-
- if (oldItemsData) {
- // unsubscribe from old dataset
- util.forEach(this.itemListeners, function (callback, event) {
- oldItemsData.off(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.itemListeners, function (callback, event) {
- me.itemsData.on(event, callback, id);
- });
-
- // add all new items
- ids = this.itemsData.getIds();
- this._onAdd(ids);
-
- // update the group holding all ungrouped items
- this._updateUngrouped();
- }
- };
-
- /**
- * Get the current items
- * @returns {vis.DataSet | null}
- */
- ItemSet.prototype.getItems = function() {
- return this.itemsData;
- };
-
- /**
- * Set groups
- * @param {vis.DataSet} groups
- */
- ItemSet.prototype.setGroups = function(groups) {
- var me = this,
- ids;
-
- // unsubscribe from current dataset
- if (this.groupsData) {
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.unsubscribe(event, callback);
- });
-
- // remove all drawn groups
- ids = this.groupsData.getIds();
- this.groupsData = null;
- this._onRemoveGroups(ids); // note: this will cause a redraw
- }
-
- // replace the dataset
- if (!groups) {
- this.groupsData = null;
- }
- else if (groups instanceof DataSet || groups instanceof DataView) {
- this.groupsData = groups;
- }
- else {
- throw new TypeError('Data must be an instance of DataSet or DataView');
- }
-
- if (this.groupsData) {
- // subscribe to new dataset
- var id = this.id;
- util.forEach(this.groupListeners, function (callback, event) {
- me.groupsData.on(event, callback, id);
- });
-
- // draw all ms
- ids = this.groupsData.getIds();
- this._onAddGroups(ids);
- }
-
- // update the group holding all ungrouped items
- this._updateUngrouped();
-
- // update the order of all items in each group
- this._order();
-
- this.body.emitter.emit('change');
- };
-
- /**
- * Get the current groups
- * @returns {vis.DataSet | null} groups
- */
- ItemSet.prototype.getGroups = function() {
- return this.groupsData;
- };
-
- /**
- * Remove an item by its id
- * @param {String | Number} id
- */
- ItemSet.prototype.removeItem = function(id) {
- var item = this.itemsData.get(id),
- dataset = this.itemsData.getDataSet();
-
- if (item) {
- // confirm deletion
- this.options.onRemove(item, function (item) {
- if (item) {
- // remove by id here, it is possible that an item has no id defined
- // itself, so better not delete by the item itself
- dataset.remove(id);
- }
- });
- }
- };
-
- /**
- * Handle updated items
- * @param {Number[]} ids
- * @protected
- */
- ItemSet.prototype._onUpdate = function(ids) {
- var me = this;
-
- ids.forEach(function (id) {
- var itemData = me.itemsData.get(id, me.itemOptions),
- item = me.items[id],
- type = itemData.type || me.options.type || (itemData.end ? 'range' : 'box');
-
- var constructor = ItemSet.types[type];
-
- if (item) {
- // update item
- if (!constructor || !(item instanceof constructor)) {
- // item type has changed, delete the item and recreate it
- me._removeItem(item);
- item = null;
- }
- else {
- me._updateItem(item, itemData);
- }
- }
-
- if (!item) {
- // create item
- if (constructor) {
- item = new constructor(itemData, me.conversion, me.options);
- item.id = id; // TODO: not so nice setting id afterwards
- me._addItem(item);
- }
- else if (type == 'rangeoverflow') {
- // TODO: deprecated since version 2.1.0 (or 3.0.0?). cleanup some day
- throw new TypeError('Item type "rangeoverflow" is deprecated. Use css styling instead: ' +
- '.vis.timeline .item.range .content {overflow: visible;}');
- }
- else {
- throw new TypeError('Unknown item type "' + type + '"');
- }
- }
- });
-
- this._order();
- this.stackDirty = true; // force re-stacking of all items next redraw
- this.body.emitter.emit('change');
- };
-
- /**
- * Handle added items
- * @param {Number[]} ids
- * @protected
- */
- ItemSet.prototype._onAdd = ItemSet.prototype._onUpdate;
-
- /**
- * Handle removed items
- * @param {Number[]} ids
- * @protected
- */
- ItemSet.prototype._onRemove = function(ids) {
- var count = 0;
- var me = this;
- ids.forEach(function (id) {
- var item = me.items[id];
- if (item) {
- count++;
- me._removeItem(item);
- }
- });
-
- if (count) {
- // update order
- this._order();
- this.stackDirty = true; // force re-stacking of all items next redraw
- this.body.emitter.emit('change');
- }
- };
-
- /**
- * Update the order of item in all groups
- * @private
- */
- ItemSet.prototype._order = function() {
- // reorder the items in all groups
- // TODO: optimization: only reorder groups affected by the changed items
- util.forEach(this.groups, function (group) {
- group.order();
- });
- };
-
- /**
- * Handle updated groups
- * @param {Number[]} ids
- * @private
- */
- ItemSet.prototype._onUpdateGroups = function(ids) {
- this._onAddGroups(ids);
- };
-
- /**
- * Handle changed groups
- * @param {Number[]} ids
- * @private
- */
- ItemSet.prototype._onAddGroups = function(ids) {
- var me = this;
-
- ids.forEach(function (id) {
- var groupData = me.groupsData.get(id);
- var group = me.groups[id];
-
- if (!group) {
- // check for reserved ids
- if (id == UNGROUPED) {
- throw new Error('Illegal group id. ' + id + ' is a reserved id.');
- }
-
- var groupOptions = Object.create(me.options);
- util.extend(groupOptions, {
- height: null
- });
-
- group = new Group(id, groupData, me);
- me.groups[id] = group;
-
- // add items with this groupId to the new group
- for (var itemId in me.items) {
- if (me.items.hasOwnProperty(itemId)) {
- var item = me.items[itemId];
- if (item.data.group == id) {
- group.add(item);
- }
- }
- }
-
- group.order();
- group.show();
- }
- else {
- // update group
- group.setData(groupData);
- }
- });
-
- this.body.emitter.emit('change');
- };
-
- /**
- * Handle removed groups
- * @param {Number[]} ids
- * @private
- */
- ItemSet.prototype._onRemoveGroups = function(ids) {
- var groups = this.groups;
- ids.forEach(function (id) {
- var group = groups[id];
-
- if (group) {
- group.hide();
- delete groups[id];
- }
- });
-
- this.markDirty();
-
- this.body.emitter.emit('change');
- };
-
- /**
- * Reorder the groups if needed
- * @return {boolean} changed
- * @private
- */
- ItemSet.prototype._orderGroups = function () {
- if (this.groupsData) {
- // reorder the groups
- var groupIds = this.groupsData.getIds({
- order: this.options.groupOrder
- });
-
- var changed = !util.equalArray(groupIds, this.groupIds);
- if (changed) {
- // hide all groups, removes them from the DOM
- var groups = this.groups;
- groupIds.forEach(function (groupId) {
- groups[groupId].hide();
- });
-
- // show the groups again, attach them to the DOM in correct order
- groupIds.forEach(function (groupId) {
- groups[groupId].show();
- });
-
- this.groupIds = groupIds;
- }
-
- return changed;
- }
- else {
- return false;
- }
- };
-
- /**
- * Add a new item
- * @param {Item} item
- * @private
- */
- ItemSet.prototype._addItem = function(item) {
- this.items[item.id] = item;
-
- // add to group
- var groupId = this.groupsData ? item.data.group : UNGROUPED;
- var group = this.groups[groupId];
- if (group) group.add(item);
- };
-
- /**
- * Update an existing item
- * @param {Item} item
- * @param {Object} itemData
- * @private
- */
- ItemSet.prototype._updateItem = function(item, itemData) {
- var oldGroupId = item.data.group;
-
- item.data = itemData;
- if (item.displayed) {
- item.redraw();
- }
-
- // update group
- if (oldGroupId != item.data.group) {
- var oldGroup = this.groups[oldGroupId];
- if (oldGroup) oldGroup.remove(item);
-
- var groupId = this.groupsData ? item.data.group : UNGROUPED;
- var group = this.groups[groupId];
- if (group) group.add(item);
- }
- };
-
- /**
- * Delete an item from the ItemSet: remove it from the DOM, from the map
- * with items, and from the map with visible items, and from the selection
- * @param {Item} item
- * @private
- */
- ItemSet.prototype._removeItem = function(item) {
- // remove from DOM
- item.hide();
-
- // remove from items
- delete this.items[item.id];
-
- // remove from selection
- var index = this.selection.indexOf(item.id);
- if (index != -1) this.selection.splice(index, 1);
-
- // remove from group
- var groupId = this.groupsData ? item.data.group : UNGROUPED;
- var group = this.groups[groupId];
- if (group) group.remove(item);
- };
-
- /**
- * Create an array containing all items being a range (having an end date)
- * @param array
- * @returns {Array}
- * @private
- */
- ItemSet.prototype._constructByEndArray = function(array) {
- var endArray = [];
-
- for (var i = 0; i < array.length; i++) {
- if (array[i] instanceof ItemRange) {
- endArray.push(array[i]);
- }
- }
- return endArray;
- };
-
- /**
- * Register the clicked item on touch, before dragStart is initiated.
- *
- * dragStart is initiated from a mousemove event, which can have left the item
- * already resulting in an item == null
- *
- * @param {Event} event
- * @private
- */
- ItemSet.prototype._onTouch = function (event) {
- // store the touched item, used in _onDragStart
- this.touchParams.item = ItemSet.itemFromTarget(event);
- };
-
- /**
- * Start dragging the selected events
- * @param {Event} event
- * @private
- */
- ItemSet.prototype._onDragStart = function (event) {
- if (!this.options.editable.updateTime && !this.options.editable.updateGroup) {
- return;
- }
-
- var item = this.touchParams.item || null,
- me = this,
- props;
-
- if (item && item.selected) {
- var dragLeftItem = event.target.dragLeftItem;
- var dragRightItem = event.target.dragRightItem;
-
- if (dragLeftItem) {
- props = {
- item: dragLeftItem
- };
-
- if (me.options.editable.updateTime) {
- props.start = item.data.start.valueOf();
- }
- if (me.options.editable.updateGroup) {
- if ('group' in item.data) props.group = item.data.group;
- }
-
- this.touchParams.itemProps = [props];
- }
- else if (dragRightItem) {
- props = {
- item: dragRightItem
- };
-
- if (me.options.editable.updateTime) {
- props.end = item.data.end.valueOf();
- }
- if (me.options.editable.updateGroup) {
- if ('group' in item.data) props.group = item.data.group;
- }
-
- this.touchParams.itemProps = [props];
- }
- else {
- this.touchParams.itemProps = this.getSelection().map(function (id) {
- var item = me.items[id];
- var props = {
- item: item
- };
-
- if (me.options.editable.updateTime) {
- if ('start' in item.data) props.start = item.data.start.valueOf();
- if ('end' in item.data) props.end = item.data.end.valueOf();
- }
- if (me.options.editable.updateGroup) {
- if ('group' in item.data) props.group = item.data.group;
- }
-
- return props;
- });
- }
-
- event.stopPropagation();
- }
- };
-
- /**
- * Drag selected items
- * @param {Event} event
- * @private
- */
- ItemSet.prototype._onDrag = function (event) {
- if (this.touchParams.itemProps) {
- var range = this.body.range,
- snap = this.body.util.snap || null,
- deltaX = event.gesture.deltaX,
- scale = (this.props.width / (range.end - range.start)),
- offset = deltaX / scale;
-
- // move
- this.touchParams.itemProps.forEach(function (props) {
- if ('start' in props) {
- var start = new Date(props.start + offset);
- props.item.data.start = snap ? snap(start) : start;
- }
-
- if ('end' in props) {
- var end = new Date(props.end + offset);
- props.item.data.end = snap ? snap(end) : end;
- }
-
- if ('group' in props) {
- // drag from one group to another
- var group = ItemSet.groupFromTarget(event);
- if (group && group.groupId != props.item.data.group) {
- var oldGroup = props.item.parent;
- oldGroup.remove(props.item);
- oldGroup.order();
- group.add(props.item);
- group.order();
-
- props.item.data.group = group.groupId;
- }
- }
- });
-
- // TODO: implement onMoving handler
-
- this.stackDirty = true; // force re-stacking of all items next redraw
- this.body.emitter.emit('change');
-
- event.stopPropagation();
- }
- };
-
- /**
- * End of dragging selected items
- * @param {Event} event
- * @private
- */
- ItemSet.prototype._onDragEnd = function (event) {
- if (this.touchParams.itemProps) {
- // prepare a change set for the changed items
- var changes = [],
- me = this,
- dataset = this.itemsData.getDataSet();
-
- this.touchParams.itemProps.forEach(function (props) {
- var id = props.item.id,
- itemData = me.itemsData.get(id, me.itemOptions);
-
- var changed = false;
- if ('start' in props.item.data) {
- changed = (props.start != props.item.data.start.valueOf());
- itemData.start = util.convert(props.item.data.start,
- dataset._options.type && dataset._options.type.start || 'Date');
- }
- if ('end' in props.item.data) {
- changed = changed || (props.end != props.item.data.end.valueOf());
- itemData.end = util.convert(props.item.data.end,
- dataset._options.type && dataset._options.type.end || 'Date');
- }
- if ('group' in props.item.data) {
- changed = changed || (props.group != props.item.data.group);
- itemData.group = props.item.data.group;
- }
-
- // only apply changes when start or end is actually changed
- if (changed) {
- me.options.onMove(itemData, function (itemData) {
- if (itemData) {
- // apply changes
- itemData[dataset._fieldId] = id; // ensure the item contains its id (can be undefined)
- changes.push(itemData);
- }
- else {
- // restore original values
- if ('start' in props) props.item.data.start = props.start;
- if ('end' in props) props.item.data.end = props.end;
-
- me.stackDirty = true; // force re-stacking of all items next redraw
- me.body.emitter.emit('change');
- }
- });
- }
- });
- this.touchParams.itemProps = null;
-
- // apply the changes to the data (if there are changes)
- if (changes.length) {
- dataset.update(changes);
- }
-
- event.stopPropagation();
- }
- };
-
- /**
- * Handle selecting/deselecting an item when tapping it
- * @param {Event} event
- * @private
- */
- ItemSet.prototype._onSelectItem = function (event) {
- if (!this.options.selectable) return;
-
- var ctrlKey = event.gesture.srcEvent && event.gesture.srcEvent.ctrlKey;
- var shiftKey = event.gesture.srcEvent && event.gesture.srcEvent.shiftKey;
- if (ctrlKey || shiftKey) {
- this._onMultiSelectItem(event);
- return;
- }
-
- var oldSelection = this.getSelection();
-
- var item = ItemSet.itemFromTarget(event);
- var selection = item ? [item.id] : [];
- this.setSelection(selection);
-
- var newSelection = this.getSelection();
-
- // emit a select event,
- // except when old selection is empty and new selection is still empty
- if (newSelection.length > 0 || oldSelection.length > 0) {
- this.body.emitter.emit('select', {
- items: this.getSelection()
- });
- }
-
- event.stopPropagation();
- };
-
- /**
- * Handle creation and updates of an item on double tap
- * @param event
- * @private
- */
- ItemSet.prototype._onAddItem = function (event) {
- if (!this.options.selectable) return;
- if (!this.options.editable.add) return;
-
- var me = this,
- snap = this.body.util.snap || null,
- item = ItemSet.itemFromTarget(event);
-
- if (item) {
- // update item
-
- // execute async handler to update the item (or cancel it)
- var itemData = me.itemsData.get(item.id); // get a clone of the data from the dataset
- this.options.onUpdate(itemData, function (itemData) {
- if (itemData) {
- me.itemsData.update(itemData);
- }
- });
- }
- else {
- // add item
- var xAbs = vis.util.getAbsoluteLeft(this.dom.frame);
- var x = event.gesture.center.pageX - xAbs;
- var start = this.body.util.toTime(x);
- var newItem = {
- start: snap ? snap(start) : start,
- content: 'new item'
- };
-
- // when default type is a range, add a default end date to the new item
- if (this.options.type === 'range') {
- var end = this.body.util.toTime(x + this.props.width / 5);
- newItem.end = snap ? snap(end) : end;
- }
-
- newItem[this.itemsData.fieldId] = util.randomUUID();
-
- var group = ItemSet.groupFromTarget(event);
- if (group) {
- newItem.group = group.groupId;
- }
-
- // execute async handler to customize (or cancel) adding an item
- this.options.onAdd(newItem, function (item) {
- if (item) {
- me.itemsData.add(newItem);
- // TODO: need to trigger a redraw?
- }
- });
- }
- };
-
- /**
- * Handle selecting/deselecting multiple items when holding an item
- * @param {Event} event
- * @private
- */
- ItemSet.prototype._onMultiSelectItem = function (event) {
- if (!this.options.selectable) return;
-
- var selection,
- item = ItemSet.itemFromTarget(event);
-
- if (item) {
- // multi select items
- selection = this.getSelection(); // current selection
- var index = selection.indexOf(item.id);
- if (index == -1) {
- // item is not yet selected -> select it
- selection.push(item.id);
- }
- else {
- // item is already selected -> deselect it
- selection.splice(index, 1);
- }
- this.setSelection(selection);
-
- this.body.emitter.emit('select', {
- items: this.getSelection()
- });
-
- event.stopPropagation();
- }
- };
-
- /**
- * Find an item from an event target:
- * searches for the attribute 'timeline-item' in the event target's element tree
- * @param {Event} event
- * @return {Item | null} item
- */
- ItemSet.itemFromTarget = function(event) {
- var target = event.target;
- while (target) {
- if (target.hasOwnProperty('timeline-item')) {
- return target['timeline-item'];
- }
- target = target.parentNode;
- }
-
- return null;
- };
-
- /**
- * Find the Group from an event target:
- * searches for the attribute 'timeline-group' in the event target's element tree
- * @param {Event} event
- * @return {Group | null} group
- */
- ItemSet.groupFromTarget = function(event) {
- var target = event.target;
- while (target) {
- if (target.hasOwnProperty('timeline-group')) {
- return target['timeline-group'];
- }
- target = target.parentNode;
- }
-
- return null;
- };
-
- /**
- * Find the ItemSet from an event target:
- * searches for the attribute 'timeline-itemset' in the event target's element tree
- * @param {Event} event
- * @return {ItemSet | null} item
- */
- ItemSet.itemSetFromTarget = function(event) {
- var target = event.target;
- while (target) {
- if (target.hasOwnProperty('timeline-itemset')) {
- return target['timeline-itemset'];
- }
- target = target.parentNode;
- }
-
- return null;
- };
-
-
- /**
- * @constructor Item
- * @param {Object} data Object containing (optional) parameters type,
- * start, end, content, group, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} options Configuration options
- * // TODO: describe available options
- */
- function Item (data, conversion, options) {
- this.id = null;
- this.parent = null;
- this.data = data;
- this.dom = null;
- this.conversion = conversion || {};
- this.options = options || {};
-
- this.selected = false;
- this.displayed = false;
- this.dirty = true;
-
- this.top = null;
- this.left = null;
- this.width = null;
- this.height = null;
- }
-
- /**
- * Select current item
- */
- Item.prototype.select = function() {
- this.selected = true;
- if (this.displayed) this.redraw();
- };
-
- /**
- * Unselect current item
- */
- Item.prototype.unselect = function() {
- this.selected = false;
- if (this.displayed) this.redraw();
- };
-
- /**
- * Set a parent for the item
- * @param {ItemSet | Group} parent
- */
- Item.prototype.setParent = function(parent) {
- if (this.displayed) {
- this.hide();
- this.parent = parent;
- if (this.parent) {
- this.show();
- }
- }
- else {
- this.parent = parent;
- }
- };
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- Item.prototype.isVisible = function(range) {
- // Should be implemented by Item implementations
- return false;
- };
-
- /**
- * Show the Item in the DOM (when not already visible)
- * @return {Boolean} changed
- */
- Item.prototype.show = function() {
- return false;
- };
-
- /**
- * Hide the Item from the DOM (when visible)
- * @return {Boolean} changed
- */
- Item.prototype.hide = function() {
- return false;
- };
-
- /**
- * Repaint the item
- */
- Item.prototype.redraw = function() {
- // should be implemented by the item
- };
-
- /**
- * Reposition the Item horizontally
- */
- Item.prototype.repositionX = function() {
- // should be implemented by the item
- };
-
- /**
- * Reposition the Item vertically
- */
- Item.prototype.repositionY = function() {
- // should be implemented by the item
- };
-
- /**
- * Repaint a delete button on the top right of the item when the item is selected
- * @param {HTMLElement} anchor
- * @protected
- */
- Item.prototype._repaintDeleteButton = function (anchor) {
- if (this.selected && this.options.editable.remove && !this.dom.deleteButton) {
- // create and show button
- var me = this;
-
- var deleteButton = document.createElement('div');
- deleteButton.className = 'delete';
- deleteButton.title = 'Delete this item';
-
- Hammer(deleteButton, {
- preventDefault: true
- }).on('tap', function (event) {
- me.parent.removeFromDataSet(me);
- event.stopPropagation();
- });
-
- anchor.appendChild(deleteButton);
- this.dom.deleteButton = deleteButton;
- }
- else if (!this.selected && this.dom.deleteButton) {
- // remove button
- if (this.dom.deleteButton.parentNode) {
- this.dom.deleteButton.parentNode.removeChild(this.dom.deleteButton);
- }
- this.dom.deleteButton = null;
- }
- };
-
- /**
- * @constructor ItemBox
- * @extends Item
- * @param {Object} data Object containing parameters start
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe available options
- */
- function ItemBox (data, conversion, options) {
- this.props = {
- dot: {
- width: 0,
- height: 0
- },
- line: {
- width: 0,
- height: 0
- }
- };
-
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data);
- }
- }
-
- Item.call(this, data, conversion, options);
- }
-
- ItemBox.prototype = new Item (null, null, null);
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- ItemBox.prototype.isVisible = function(range) {
- // determine visibility
- // TODO: account for the real width of the item. Right now we just add 1/4 to the window
- var interval = (range.end - range.start) / 4;
- return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
- };
-
- /**
- * Repaint the item
- */
- ItemBox.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
-
- // create main box
- dom.box = document.createElement('DIV');
-
- // 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';
-
- // attach this item as attribute
- dom.box['timeline-item'] = this;
- }
-
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
- }
- if (!dom.box.parentNode) {
- var foreground = this.parent.dom.foreground;
- if (!foreground) throw new Error('Cannot redraw time axis: parent has no foreground container element');
- foreground.appendChild(dom.box);
- }
- if (!dom.line.parentNode) {
- var background = this.parent.dom.background;
- if (!background) throw new Error('Cannot redraw time axis: parent has no background container element');
- background.appendChild(dom.line);
- }
- if (!dom.dot.parentNode) {
- var axis = this.parent.dom.axis;
- if (!background) throw new Error('Cannot redraw time axis: parent has no axis container element');
- axis.appendChild(dom.dot);
- }
- this.displayed = 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);
- }
-
- this.dirty = true;
- }
-
- // update title
- if (this.data.title != this.title) {
- dom.box.title = this.data.title;
- this.title = this.data.title;
- }
-
- // 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;
-
- this.dirty = true;
- }
-
- // recalculate size
- if (this.dirty) {
- this.props.dot.height = dom.dot.offsetHeight;
- this.props.dot.width = dom.dot.offsetWidth;
- this.props.line.width = dom.line.offsetWidth;
- this.width = dom.box.offsetWidth;
- this.height = dom.box.offsetHeight;
-
- this.dirty = false;
- }
-
- this._repaintDeleteButton(dom.box);
- };
-
- /**
- * Show the item in the DOM (when not already displayed). The items DOM will
- * be created when needed.
- */
- ItemBox.prototype.show = function() {
- if (!this.displayed) {
- this.redraw();
- }
- };
-
- /**
- * Hide the item from the DOM (when visible)
- */
- ItemBox.prototype.hide = function() {
- if (this.displayed) {
- var dom = this.dom;
-
- if (dom.box.parentNode) dom.box.parentNode.removeChild(dom.box);
- if (dom.line.parentNode) dom.line.parentNode.removeChild(dom.line);
- if (dom.dot.parentNode) dom.dot.parentNode.removeChild(dom.dot);
-
- this.top = null;
- this.left = null;
-
- this.displayed = false;
- }
- };
-
- /**
- * Reposition the item horizontally
- * @Override
- */
- ItemBox.prototype.repositionX = function() {
- var start = this.conversion.toScreen(this.data.start),
- align = this.options.align,
- left,
- box = this.dom.box,
- line = this.dom.line,
- dot = this.dom.dot;
-
- // calculate left position of the box
- if (align == 'right') {
- this.left = start - this.width;
- }
- else if (align == 'left') {
- this.left = start;
- }
- else {
- // default or 'center'
- this.left = start - this.width / 2;
- }
-
- // reposition box
- box.style.left = this.left + 'px';
-
- // reposition line
- line.style.left = (start - this.props.line.width / 2) + 'px';
-
- // reposition dot
- dot.style.left = (start - this.props.dot.width / 2) + 'px';
- };
-
- /**
- * Reposition the item vertically
- * @Override
- */
- ItemBox.prototype.repositionY = function() {
- var orientation = this.options.orientation,
- box = this.dom.box,
- line = this.dom.line,
- dot = this.dom.dot;
-
- if (orientation == 'top') {
- box.style.top = (this.top || 0) + 'px';
-
- line.style.top = '0';
- line.style.height = (this.parent.top + this.top + 1) + 'px';
- line.style.bottom = '';
- }
- else { // orientation 'bottom'
- var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
- var lineHeight = itemSetHeight - this.parent.top - this.parent.height + this.top;
-
- box.style.top = (this.parent.height - this.top - this.height || 0) + 'px';
- line.style.top = (itemSetHeight - lineHeight) + 'px';
- line.style.bottom = '0';
- }
-
- dot.style.top = (-this.props.dot.height / 2) + 'px';
- };
-
- /**
- * @constructor ItemPoint
- * @extends Item
- * @param {Object} data Object containing parameters start
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe available options
- */
- function ItemPoint (data, conversion, options) {
- this.props = {
- dot: {
- top: 0,
- width: 0,
- height: 0
- },
- content: {
- height: 0,
- marginLeft: 0
- }
- };
-
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data);
- }
- }
-
- Item.call(this, data, conversion, options);
- }
-
- ItemPoint.prototype = new Item (null, null, null);
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- ItemPoint.prototype.isVisible = function(range) {
- // determine visibility
- // TODO: account for the real width of the item. Right now we just add 1/4 to the window
- var interval = (range.end - range.start) / 4;
- return (this.data.start > range.start - interval) && (this.data.start < range.end + interval);
- };
-
- /**
- * Repaint the item
- */
- ItemPoint.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
-
- // background box
- dom.point = document.createElement('div');
- // className is updated in redraw()
-
- // 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.point.appendChild(dom.dot);
-
- // attach this item as attribute
- dom.point['timeline-item'] = this;
- }
-
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
- }
- if (!dom.point.parentNode) {
- var foreground = this.parent.dom.foreground;
- if (!foreground) {
- throw new Error('Cannot redraw time axis: parent has no foreground container element');
- }
- foreground.appendChild(dom.point);
- }
- this.displayed = 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);
- }
-
- this.dirty = true;
- }
-
- // update title
- if (this.data.title != this.title) {
- dom.point.title = this.data.title;
- this.title = this.data.title;
- }
-
- // 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;
- dom.dot.className = 'item dot' + className;
-
- this.dirty = true;
- }
-
- // recalculate size
- if (this.dirty) {
- this.width = dom.point.offsetWidth;
- this.height = dom.point.offsetHeight;
- this.props.dot.width = dom.dot.offsetWidth;
- this.props.dot.height = dom.dot.offsetHeight;
- this.props.content.height = dom.content.offsetHeight;
-
- // resize contents
- dom.content.style.marginLeft = 2 * this.props.dot.width + 'px';
- //dom.content.style.marginRight = ... + 'px'; // TODO: margin right
-
- dom.dot.style.top = ((this.height - this.props.dot.height) / 2) + 'px';
- dom.dot.style.left = (this.props.dot.width / 2) + 'px';
-
- this.dirty = false;
- }
-
- this._repaintDeleteButton(dom.point);
- };
-
- /**
- * Show the item in the DOM (when not already visible). The items DOM will
- * be created when needed.
- */
- ItemPoint.prototype.show = function() {
- if (!this.displayed) {
- this.redraw();
- }
- };
-
- /**
- * Hide the item from the DOM (when visible)
- */
- ItemPoint.prototype.hide = function() {
- if (this.displayed) {
- if (this.dom.point.parentNode) {
- this.dom.point.parentNode.removeChild(this.dom.point);
- }
-
- this.top = null;
- this.left = null;
-
- this.displayed = false;
- }
- };
-
- /**
- * Reposition the item horizontally
- * @Override
- */
- ItemPoint.prototype.repositionX = function() {
- var start = this.conversion.toScreen(this.data.start);
-
- this.left = start - this.props.dot.width;
-
- // reposition point
- this.dom.point.style.left = this.left + 'px';
- };
-
- /**
- * Reposition the item vertically
- * @Override
- */
- ItemPoint.prototype.repositionY = function() {
- var orientation = this.options.orientation,
- point = this.dom.point;
-
- if (orientation == 'top') {
- point.style.top = this.top + 'px';
- }
- else {
- point.style.top = (this.parent.height - this.top - this.height) + 'px';
- }
- };
-
- /**
- * @constructor ItemRange
- * @extends Item
- * @param {Object} data Object containing parameters start, end
- * content, className.
- * @param {{toScreen: function, toTime: function}} conversion
- * Conversion functions from time to screen and vice versa
- * @param {Object} [options] Configuration options
- * // TODO: describe options
- */
- function ItemRange (data, conversion, options) {
- this.props = {
- content: {
- width: 0
- }
- };
- this.overflow = false; // if contents can overflow (css styling), this flag is set to true
-
- // validate data
- if (data) {
- if (data.start == undefined) {
- throw new Error('Property "start" missing in item ' + data.id);
- }
- if (data.end == undefined) {
- throw new Error('Property "end" missing in item ' + data.id);
- }
- }
-
- Item.call(this, data, conversion, options);
- }
-
- ItemRange.prototype = new Item (null, null, null);
-
- ItemRange.prototype.baseClassName = 'item range';
-
- /**
- * Check whether this item is visible inside given range
- * @returns {{start: Number, end: Number}} range with a timestamp for start and end
- * @returns {boolean} True if visible
- */
- ItemRange.prototype.isVisible = function(range) {
- // determine visibility
- return (this.data.start < range.end) && (this.data.end > range.start);
- };
-
- /**
- * Repaint the item
- */
- ItemRange.prototype.redraw = function() {
- var dom = this.dom;
- if (!dom) {
- // create DOM
- this.dom = {};
- dom = this.dom;
-
- // background box
- dom.box = document.createElement('div');
- // className is updated in redraw()
-
- // contents box
- dom.content = document.createElement('div');
- dom.content.className = 'content';
- dom.box.appendChild(dom.content);
-
- // attach this item as attribute
- dom.box['timeline-item'] = this;
- }
-
- // append DOM to parent DOM
- if (!this.parent) {
- throw new Error('Cannot redraw item: no parent attached');
- }
- if (!dom.box.parentNode) {
- var foreground = this.parent.dom.foreground;
- if (!foreground) {
- throw new Error('Cannot redraw time axis: parent has no foreground container element');
- }
- foreground.appendChild(dom.box);
- }
- this.displayed = 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);
- }
-
- this.dirty = true;
- }
-
- // update title
- if (this.data.title != this.title) {
- dom.box.title = this.data.title;
- this.title = this.data.title;
- }
-
- // update class
- var className = (this.data.className ? (' ' + this.data.className) : '') +
- (this.selected ? ' selected' : '');
- if (this.className != className) {
- this.className = className;
- dom.box.className = this.baseClassName + className;
-
- this.dirty = true;
- }
-
- // recalculate size
- if (this.dirty) {
- // determine from css whether this box has overflow
- this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
-
- this.props.content.width = this.dom.content.offsetWidth;
- this.height = this.dom.box.offsetHeight;
-
- this.dirty = false;
- }
-
- this._repaintDeleteButton(dom.box);
- this._repaintDragLeft();
- this._repaintDragRight();
- };
-
- /**
- * Show the item in the DOM (when not already visible). The items DOM will
- * be created when needed.
- */
- ItemRange.prototype.show = function() {
- if (!this.displayed) {
- this.redraw();
- }
- };
-
- /**
- * Hide the item from the DOM (when visible)
- * @return {Boolean} changed
- */
- ItemRange.prototype.hide = function() {
- if (this.displayed) {
- var box = this.dom.box;
-
- if (box.parentNode) {
- box.parentNode.removeChild(box);
- }
-
- this.top = null;
- this.left = null;
-
- this.displayed = false;
- }
- };
-
- /**
- * Reposition the item horizontally
- * @Override
- */
- // TODO: delete the old function
- ItemRange.prototype.repositionX = function() {
- var props = this.props,
- parentWidth = this.parent.width,
- start = this.conversion.toScreen(this.data.start),
- end = this.conversion.toScreen(this.data.end),
- padding = this.options.padding,
- contentLeft;
-
- // 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;
- }
- var boxWidth = Math.max(end - start, 1);
-
- if (this.overflow) {
- // when range exceeds left of the window, position the contents at the left of the visible area
- contentLeft = Math.max(-start, 0);
-
- this.left = start;
- this.width = boxWidth + this.props.content.width;
- // Note: The calculation of width is an optimistic calculation, giving
- // a width which will not change when moving the Timeline
- // So no restacking needed, which is nicer for the eye;
- }
- else { // no overflow
- // 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;
- }
-
- this.left = start;
- this.width = boxWidth;
- }
-
- this.dom.box.style.left = this.left + 'px';
- this.dom.box.style.width = boxWidth + 'px';
- this.dom.content.style.left = contentLeft + 'px';
- };
-
- /**
- * Reposition the item vertically
- * @Override
- */
- ItemRange.prototype.repositionY = function() {
- var orientation = this.options.orientation,
- box = this.dom.box;
-
- if (orientation == 'top') {
- box.style.top = this.top + 'px';
- }
- else {
- box.style.top = (this.parent.height - this.top - this.height) + 'px';
- }
- };
-
- /**
- * Repaint a drag area on the left side of the range when the range is selected
- * @protected
- */
- ItemRange.prototype._repaintDragLeft = function () {
- if (this.selected && this.options.editable.updateTime && !this.dom.dragLeft) {
- // create and show drag area
- var dragLeft = document.createElement('div');
- dragLeft.className = 'drag-left';
- dragLeft.dragLeftItem = this;
-
- // TODO: this should be redundant?
- Hammer(dragLeft, {
- preventDefault: true
- }).on('drag', function () {
- //console.log('drag left')
- });
-
- this.dom.box.appendChild(dragLeft);
- this.dom.dragLeft = dragLeft;
- }
- else if (!this.selected && this.dom.dragLeft) {
- // delete drag area
- if (this.dom.dragLeft.parentNode) {
- this.dom.dragLeft.parentNode.removeChild(this.dom.dragLeft);
- }
- this.dom.dragLeft = null;
- }
- };
-
- /**
- * Repaint a drag area on the right side of the range when the range is selected
- * @protected
- */
- ItemRange.prototype._repaintDragRight = function () {
- if (this.selected && this.options.editable.updateTime && !this.dom.dragRight) {
- // create and show drag area
- var dragRight = document.createElement('div');
- dragRight.className = 'drag-right';
- dragRight.dragRightItem = this;
-
- // TODO: this should be redundant?
- Hammer(dragRight, {
- preventDefault: true
- }).on('drag', function () {
- //console.log('drag right')
- });
-
- this.dom.box.appendChild(dragRight);
- this.dom.dragRight = dragRight;
- }
- else if (!this.selected && this.dom.dragRight) {
- // delete drag area
- if (this.dom.dragRight.parentNode) {
- this.dom.dragRight.parentNode.removeChild(this.dom.dragRight);
- }
- this.dom.dragRight = null;
- }
- };
-
- /**
- * @constructor Group
- * @param {Number | String} groupId
- * @param {Object} data
- * @param {ItemSet} itemSet
- */
- function Group (groupId, data, itemSet) {
- this.groupId = groupId;
-
- this.itemSet = itemSet;
-
- this.dom = {};
- this.props = {
- label: {
- width: 0,
- height: 0
- }
- };
- this.className = null;
-
- this.items = {}; // items filtered by groupId of this group
- this.visibleItems = []; // items currently visible in window
- this.orderedItems = { // items sorted by start and by end
- byStart: [],
- byEnd: []
- };
-
- this._create();
-
- this.setData(data);
- }
-
- /**
- * Create DOM elements for the group
- * @private
- */
- Group.prototype._create = function() {
- var label = document.createElement('div');
- label.className = 'vlabel';
- this.dom.label = label;
-
- var inner = document.createElement('div');
- inner.className = 'inner';
- label.appendChild(inner);
- this.dom.inner = inner;
-
- var foreground = document.createElement('div');
- foreground.className = 'group';
- foreground['timeline-group'] = this;
- this.dom.foreground = foreground;
-
- this.dom.background = document.createElement('div');
- this.dom.background.className = 'group';
-
- this.dom.axis = document.createElement('div');
- this.dom.axis.className = 'group';
-
- // create a hidden marker to detect when the Timelines container is attached
- // to the DOM, or the style of a parent of the Timeline is changed from
- // display:none is changed to visible.
- this.dom.marker = document.createElement('div');
- this.dom.marker.style.visibility = 'hidden';
- this.dom.marker.innerHTML = '?';
- this.dom.background.appendChild(this.dom.marker);
- };
-
- /**
- * Set the group data for this group
- * @param {Object} data Group data, can contain properties content and className
- */
- Group.prototype.setData = function(data) {
- // update contents
- var content = data && data.content;
- if (content instanceof Element) {
- this.dom.inner.appendChild(content);
- }
- else if (content != undefined) {
- this.dom.inner.innerHTML = content;
- }
- else {
- this.dom.inner.innerHTML = this.groupId;
- }
-
- // update title
- this.dom.label.title = data && data.title || '';
-
- if (!this.dom.inner.firstChild) {
- util.addClassName(this.dom.inner, 'hidden');
- }
- else {
- util.removeClassName(this.dom.inner, 'hidden');
- }
-
- // update className
- var className = data && data.className || null;
- if (className != this.className) {
- if (this.className) {
- util.removeClassName(this.dom.label, className);
- util.removeClassName(this.dom.foreground, className);
- util.removeClassName(this.dom.background, className);
- util.removeClassName(this.dom.axis, className);
- }
- util.addClassName(this.dom.label, className);
- util.addClassName(this.dom.foreground, className);
- util.addClassName(this.dom.background, className);
- util.addClassName(this.dom.axis, className);
- }
- };
-
- /**
- * Get the width of the group label
- * @return {number} width
- */
- Group.prototype.getLabelWidth = function() {
- return this.props.label.width;
- };
-
-
- /**
- * Repaint this group
- * @param {{start: number, end: number}} range
- * @param {{item: number, axis: number}} margin
- * @param {boolean} [restack=false] Force restacking of all items
- * @return {boolean} Returns true if the group is resized
- */
- Group.prototype.redraw = function(range, margin, restack) {
- var resized = false;
-
- this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
-
- // force recalculation of the height of the items when the marker height changed
- // (due to the Timeline being attached to the DOM or changed from display:none to visible)
- var markerHeight = this.dom.marker.clientHeight;
- if (markerHeight != this.lastMarkerHeight) {
- this.lastMarkerHeight = markerHeight;
-
- util.forEach(this.items, function (item) {
- item.dirty = true;
- if (item.displayed) item.redraw();
- });
-
- restack = true;
- }
-
- // reposition visible items vertically
- if (this.itemSet.options.stack) { // TODO: ugly way to access options...
- stack.stack(this.visibleItems, margin, restack);
- }
- else { // no stacking
- stack.nostack(this.visibleItems, margin);
- }
-
- // recalculate the height of the group
- var height;
- var visibleItems = this.visibleItems;
- 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));
- });
- if (min > margin.axis) {
- // there is an empty gap between the lowest item and the axis
- var offset = min - margin.axis;
- max -= offset;
- util.forEach(visibleItems, function (item) {
- item.top -= offset;
- });
- }
- height = max + margin.item / 2;
- }
- else {
- height = margin.axis + margin.item;
- }
- height = Math.max(height, this.props.label.height);
-
- // calculate actual size and position
- var foreground = this.dom.foreground;
- this.top = foreground.offsetTop;
- this.left = foreground.offsetLeft;
- this.width = foreground.offsetWidth;
- resized = util.updateProperty(this, 'height', height) || resized;
-
- // recalculate size of label
- resized = util.updateProperty(this.props.label, 'width', this.dom.inner.clientWidth) || resized;
- resized = util.updateProperty(this.props.label, 'height', this.dom.inner.clientHeight) || resized;
-
- // apply new height
- this.dom.background.style.height = height + 'px';
- this.dom.foreground.style.height = height + 'px';
- this.dom.label.style.height = height + 'px';
-
- // update vertical position of items after they are re-stacked and the height of the group is calculated
- for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
- var item = this.visibleItems[i];
- item.repositionY();
- }
-
- return resized;
- };
-
- /**
- * Show this group: attach to the DOM
- */
- Group.prototype.show = function() {
- if (!this.dom.label.parentNode) {
- this.itemSet.dom.labelSet.appendChild(this.dom.label);
- }
-
- if (!this.dom.foreground.parentNode) {
- this.itemSet.dom.foreground.appendChild(this.dom.foreground);
- }
-
- if (!this.dom.background.parentNode) {
- this.itemSet.dom.background.appendChild(this.dom.background);
- }
-
- if (!this.dom.axis.parentNode) {
- this.itemSet.dom.axis.appendChild(this.dom.axis);
- }
- };
-
- /**
- * Hide this group: remove from the DOM
- */
- Group.prototype.hide = function() {
- var label = this.dom.label;
- if (label.parentNode) {
- label.parentNode.removeChild(label);
- }
-
- var foreground = this.dom.foreground;
- if (foreground.parentNode) {
- foreground.parentNode.removeChild(foreground);
- }
-
- var background = this.dom.background;
- if (background.parentNode) {
- background.parentNode.removeChild(background);
- }
-
- var axis = this.dom.axis;
- if (axis.parentNode) {
- axis.parentNode.removeChild(axis);
- }
- };
-
- /**
- * Add an item to the group
- * @param {Item} item
- */
- Group.prototype.add = function(item) {
- this.items[item.id] = item;
- item.setParent(this);
-
- if (item instanceof ItemRange && this.visibleItems.indexOf(item) == -1) {
- var range = this.itemSet.body.range; // TODO: not nice accessing the range like this
- this._checkIfVisible(item, this.visibleItems, range);
- }
- };
-
- /**
- * Remove an item from the group
- * @param {Item} item
- */
- Group.prototype.remove = function(item) {
- delete this.items[item.id];
- item.setParent(this.itemSet);
-
- // remove from visible items
- var index = this.visibleItems.indexOf(item);
- if (index != -1) this.visibleItems.splice(index, 1);
-
- // TODO: also remove from ordered items?
- };
-
- /**
- * Remove an item from the corresponding DataSet
- * @param {Item} item
- */
- Group.prototype.removeFromDataSet = function(item) {
- this.itemSet.removeItem(item.id);
- };
-
- /**
- * Reorder the items
- */
- Group.prototype.order = function() {
- var array = util.toArray(this.items);
- this.orderedItems.byStart = array;
- this.orderedItems.byEnd = this._constructByEndArray(array);
-
- stack.orderByStart(this.orderedItems.byStart);
- stack.orderByEnd(this.orderedItems.byEnd);
- };
-
- /**
- * Create an array containing all items being a range (having an end date)
- * @param {Item[]} array
- * @returns {ItemRange[]}
- * @private
- */
- Group.prototype._constructByEndArray = function(array) {
- var endArray = [];
-
- for (var i = 0; i < array.length; i++) {
- if (array[i] instanceof ItemRange) {
- endArray.push(array[i]);
- }
- }
- return endArray;
- };
-
- /**
- * Update the visible items
- * @param {{byStart: Item[], byEnd: Item[]}} orderedItems All items ordered by start date and by end date
- * @param {Item[]} visibleItems The previously visible items.
- * @param {{start: number, end: number}} range Visible range
- * @return {Item[]} visibleItems The new visible items.
- * @private
- */
- Group.prototype._updateVisibleItems = function(orderedItems, visibleItems, range) {
- var initialPosByStart,
- newVisibleItems = [],
- i;
-
- // first check if the items that were in view previously are still in view.
- // this handles the case for the ItemRange that is both before and after the current one.
- if (visibleItems.length > 0) {
- for (i = 0; i < visibleItems.length; i++) {
- this._checkIfVisible(visibleItems[i], newVisibleItems, range);
- }
- }
-
- // If there were no visible items previously, use binarySearch to find a visible ItemPoint or ItemRange (based on startTime)
- if (newVisibleItems.length == 0) {
- initialPosByStart = util.binarySearch(orderedItems.byStart, range, 'data','start');
- }
- else {
- initialPosByStart = orderedItems.byStart.indexOf(newVisibleItems[0]);
- }
-
- // use visible search to find a visible ItemRange (only based on endTime)
- var initialPosByEnd = util.binarySearch(orderedItems.byEnd, range, 'data','end');
-
- // if we found a initial ID to use, trace it up and down until we meet an invisible item.
- if (initialPosByStart != -1) {
- for (i = initialPosByStart; i >= 0; i--) {
- if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
- }
- for (i = initialPosByStart + 1; i < orderedItems.byStart.length; i++) {
- if (this._checkIfInvisible(orderedItems.byStart[i], newVisibleItems, range)) {break;}
- }
- }
-
- // if we found a initial ID to use, trace it up and down until we meet an invisible item.
- if (initialPosByEnd != -1) {
- for (i = initialPosByEnd; i >= 0; i--) {
- if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
- }
- for (i = initialPosByEnd + 1; i < orderedItems.byEnd.length; i++) {
- if (this._checkIfInvisible(orderedItems.byEnd[i], newVisibleItems, range)) {break;}
- }
- }
-
- return newVisibleItems;
- };
-
-
-
- /**
- * this function checks if an item is invisible. If it is NOT we make it visible
- * and add it to the global visible items. If it is, return true.
- *
- * @param {Item} item
- * @param {Item[]} visibleItems
- * @param {{start:number, end:number}} range
- * @returns {boolean}
- * @private
- */
- Group.prototype._checkIfInvisible = function(item, visibleItems, range) {
- if (item.isVisible(range)) {
- if (!item.displayed) item.show();
- item.repositionX();
- if (visibleItems.indexOf(item) == -1) {
- visibleItems.push(item);
- }
- return false;
- }
- else {
- return true;
- }
- };
-
- /**
- * this function is very similar to the _checkIfInvisible() but it does not
- * return booleans, hides the item if it should not be seen and always adds to
- * the visibleItems.
- * this one is for brute forcing and hiding.
- *
- * @param {Item} item
- * @param {Array} visibleItems
- * @param {{start:number, end:number}} range
- * @private
- */
- Group.prototype._checkIfVisible = function(item, visibleItems, range) {
- if (item.isVisible(range)) {
- if (!item.displayed) item.show();
- // reposition item horizontally
- item.repositionX();
- visibleItems.push(item);
- }
- else {
- if (item.displayed) item.hide();
- }
- };
-
- /**
- * Create a timeline visualization
- * @param {HTMLElement} container
- * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
- * @param {Object} [options] See Timeline.setOptions for the available options.
- * @constructor
- */
- function Timeline (container, items, options) {
- if (!(this instanceof Timeline)) {
- throw new SyntaxError('Constructor must be called with the new operator');
- }
-
- var me = this;
- this.defaultOptions = {
- start: null,
- end: null,
-
- autoResize: true,
-
- orientation: 'bottom',
- width: null,
- height: null,
- maxHeight: null,
- minHeight: null
- };
- this.options = util.deepExtend({}, this.defaultOptions);
-
- // Create the DOM, props, and emitter
- this._create(container);
-
- // all components listed here will be repainted automatically
- this.components = [];
-
- this.body = {
- dom: this.dom,
- domProps: this.props,
- emitter: {
- on: this.on.bind(this),
- off: this.off.bind(this),
- emit: this.emit.bind(this)
- },
- util: {
- snap: null, // will be specified after TimeAxis is created
- toScreen: me._toScreen.bind(me),
- toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
- toTime: me._toTime.bind(me),
- toGlobalTime : me._toGlobalTime.bind(me)
- }
- };
-
- // range
- this.range = new Range(this.body);
- this.components.push(this.range);
- this.body.range = this.range;
-
- // time axis
- this.timeAxis = new TimeAxis(this.body);
- this.components.push(this.timeAxis);
- this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
-
- // current time bar
- this.currentTime = new CurrentTime(this.body);
- this.components.push(this.currentTime);
-
- // custom time bar
- // Note: time bar will be attached in this.setOptions when selected
- this.customTime = new CustomTime(this.body);
- this.components.push(this.customTime);
-
- // item set
- this.itemSet = new ItemSet(this.body);
- this.components.push(this.itemSet);
-
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
-
- // apply options
- if (options) {
- this.setOptions(options);
- }
-
- // create itemset
- if (items) {
- this.setItems(items);
- }
- else {
- this.redraw();
- }
- }
-
- // turn Timeline into an event emitter
- Emitter(Timeline.prototype);
-
- /**
- * Create the main DOM for the Timeline: a root panel containing left, right,
- * top, bottom, content, and background panel.
- * @param {Element} container The container element where the Timeline will
- * be attached.
- * @private
- */
- Timeline.prototype._create = function (container) {
- this.dom = {};
-
- this.dom.root = document.createElement('div');
- this.dom.background = document.createElement('div');
- this.dom.backgroundVertical = document.createElement('div');
- this.dom.backgroundHorizontal = document.createElement('div');
- this.dom.centerContainer = document.createElement('div');
- this.dom.leftContainer = document.createElement('div');
- this.dom.rightContainer = document.createElement('div');
- this.dom.center = document.createElement('div');
- this.dom.left = document.createElement('div');
- this.dom.right = document.createElement('div');
- this.dom.top = document.createElement('div');
- this.dom.bottom = document.createElement('div');
- this.dom.shadowTop = document.createElement('div');
- this.dom.shadowBottom = document.createElement('div');
- this.dom.shadowTopLeft = document.createElement('div');
- this.dom.shadowBottomLeft = document.createElement('div');
- this.dom.shadowTopRight = document.createElement('div');
- this.dom.shadowBottomRight = document.createElement('div');
-
- this.dom.background.className = 'vispanel background';
- this.dom.backgroundVertical.className = 'vispanel background vertical';
- this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
- this.dom.centerContainer.className = 'vispanel center';
- this.dom.leftContainer.className = 'vispanel left';
- this.dom.rightContainer.className = 'vispanel right';
- this.dom.top.className = 'vispanel top';
- this.dom.bottom.className = 'vispanel bottom';
- this.dom.left.className = 'content';
- this.dom.center.className = 'content';
- this.dom.right.className = 'content';
- this.dom.shadowTop.className = 'shadow top';
- this.dom.shadowBottom.className = 'shadow bottom';
- this.dom.shadowTopLeft.className = 'shadow top';
- this.dom.shadowBottomLeft.className = 'shadow bottom';
- this.dom.shadowTopRight.className = 'shadow top';
- this.dom.shadowBottomRight.className = 'shadow bottom';
-
- this.dom.root.appendChild(this.dom.background);
- this.dom.root.appendChild(this.dom.backgroundVertical);
- this.dom.root.appendChild(this.dom.backgroundHorizontal);
- this.dom.root.appendChild(this.dom.centerContainer);
- this.dom.root.appendChild(this.dom.leftContainer);
- this.dom.root.appendChild(this.dom.rightContainer);
- this.dom.root.appendChild(this.dom.top);
- this.dom.root.appendChild(this.dom.bottom);
-
- this.dom.centerContainer.appendChild(this.dom.center);
- this.dom.leftContainer.appendChild(this.dom.left);
- this.dom.rightContainer.appendChild(this.dom.right);
-
- this.dom.centerContainer.appendChild(this.dom.shadowTop);
- this.dom.centerContainer.appendChild(this.dom.shadowBottom);
- this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
- this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
- this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
- this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
-
- this.on('rangechange', this.redraw.bind(this));
- this.on('change', this.redraw.bind(this));
- this.on('touch', this._onTouch.bind(this));
- this.on('pinch', this._onPinch.bind(this));
- this.on('dragstart', this._onDragStart.bind(this));
- this.on('drag', this._onDrag.bind(this));
-
- // create event listeners for all interesting events, these events will be
- // emitted via emitter
- this.hammer = Hammer(this.dom.root, {
- prevent_default: true
- });
- this.listeners = {};
-
- var me = this;
- var events = [
- 'touch', 'pinch',
- 'tap', 'doubletap', 'hold',
- 'dragstart', 'drag', 'dragend',
- 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
- ];
- events.forEach(function (event) {
- var listener = function () {
- var args = [event].concat(Array.prototype.slice.call(arguments, 0));
- me.emit.apply(me, args);
- };
- me.hammer.on(event, listener);
- me.listeners[event] = listener;
- });
-
- // size properties of each of the panels
- this.props = {
- root: {},
- background: {},
- centerContainer: {},
- leftContainer: {},
- rightContainer: {},
- center: {},
- left: {},
- right: {},
- top: {},
- bottom: {},
- border: {},
- scrollTop: 0,
- scrollTopMin: 0
- };
- this.touch = {}; // store state information needed for touch events
-
- // attach the root panel to the provided container
- if (!container) throw new Error('No container provided');
- container.appendChild(this.dom.root);
- };
-
- /**
- * Destroy the Timeline, clean up all DOM elements and event listeners.
- */
- Timeline.prototype.destroy = function () {
- // unbind datasets
- this.clear();
-
- // remove all event listeners
- this.off();
-
- // stop checking for changed size
- this._stopAutoResize();
-
- // remove from DOM
- if (this.dom.root.parentNode) {
- this.dom.root.parentNode.removeChild(this.dom.root);
- }
- this.dom = null;
-
- // cleanup hammer touch events
- for (var event in this.listeners) {
- if (this.listeners.hasOwnProperty(event)) {
- delete this.listeners[event];
- }
- }
- this.listeners = null;
- this.hammer = null;
-
- // give all components the opportunity to cleanup
- this.components.forEach(function (component) {
- component.destroy();
- });
-
- this.body = null;
- };
-
- /**
- * Set options. Options will be passed to all components loaded in the Timeline.
- * @param {Object} [options]
- * {String} orientation
- * Vertical orientation for the Timeline,
- * can be 'bottom' (default) or 'top'.
- * {String | Number} width
- * Width for the timeline, a number in pixels or
- * a css string like '1000px' or '75%'. '100%' by default.
- * {String | Number} height
- * Fixed height for the Timeline, a number in pixels or
- * a css string like '400px' or '75%'. If undefined,
- * The Timeline will automatically size such that
- * its contents fit.
- * {String | Number} minHeight
- * Minimum height for the Timeline, a number in pixels or
- * a css string like '400px' or '75%'.
- * {String | Number} maxHeight
- * Maximum height for the Timeline, a number in pixels or
- * a css string like '400px' or '75%'.
- * {Number | Date | String} start
- * Start date for the visible window
- * {Number | Date | String} end
- * End date for the visible window
- */
- Timeline.prototype.setOptions = function (options) {
- if (options) {
- // copy the known options
- var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
- util.selectiveExtend(fields, this.options, options);
-
- // enable/disable autoResize
- this._initAutoResize();
- }
-
- // propagate options to all components
- this.components.forEach(function (component) {
- component.setOptions(options);
- });
-
- // TODO: remove deprecation error one day (deprecated since version 0.8.0)
- if (options && options.order) {
- throw new Error('Option order is deprecated. There is no replacement for this feature.');
- }
-
- // redraw everything
- this.redraw();
- };
-
- /**
- * Set a custom time bar
- * @param {Date} time
- */
- Timeline.prototype.setCustomTime = function (time) {
- if (!this.customTime) {
- throw new Error('Cannot get custom time: Custom time bar is not enabled');
- }
-
- this.customTime.setCustomTime(time);
- };
-
- /**
- * Retrieve the current custom time.
- * @return {Date} customTime
- */
- Timeline.prototype.getCustomTime = function() {
- if (!this.customTime) {
- throw new Error('Cannot get custom time: Custom time bar is not enabled');
- }
-
- return this.customTime.getCustomTime();
- };
-
- /**
- * Set items
- * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
- */
- Timeline.prototype.setItems = function(items) {
- var initialLoad = (this.itemsData == null);
-
- // convert to type DataSet when needed
- var newDataSet;
- if (!items) {
- newDataSet = null;
- }
- else if (items instanceof DataSet || items instanceof DataView) {
- newDataSet = items;
- }
- else {
- // turn an array into a dataset
- newDataSet = new DataSet(items, {
- type: {
- start: 'Date',
- end: 'Date'
- }
- });
- }
-
- // set items
- this.itemsData = newDataSet;
- this.itemSet && this.itemSet.setItems(newDataSet);
-
- if (initialLoad && ('start' in this.options || 'end' in this.options)) {
- this.fit();
-
- var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
- var end = ('end' in this.options) ? util.convert(this.options.end, 'Date') : null;
-
- this.setWindow(start, end);
- }
- };
-
- /**
- * Set groups
- * @param {vis.DataSet | Array | google.visualization.DataTable} groups
- */
- Timeline.prototype.setGroups = function(groups) {
- // convert to type DataSet when needed
- var newDataSet;
- if (!groups) {
- newDataSet = null;
- }
- else if (groups instanceof DataSet || groups instanceof DataView) {
- newDataSet = groups;
- }
- else {
- // turn an array into a dataset
- newDataSet = new DataSet(groups);
- }
-
- this.groupsData = newDataSet;
- this.itemSet.setGroups(newDataSet);
- };
-
- /**
- * Clear the Timeline. By Default, items, groups and options are cleared.
- * Example usage:
- *
- * timeline.clear(); // clear items, groups, and options
- * timeline.clear({options: true}); // clear options only
- *
- * @param {Object} [what] Optionally specify what to clear. By default:
- * {items: true, groups: true, options: true}
- */
- Timeline.prototype.clear = function(what) {
- // clear items
- if (!what || what.items) {
- this.setItems(null);
- }
-
- // clear groups
- if (!what || what.groups) {
- this.setGroups(null);
- }
-
- // clear options of timeline and of each of the components
- if (!what || what.options) {
- this.components.forEach(function (component) {
- component.setOptions(component.defaultOptions);
- });
-
- this.setOptions(this.defaultOptions); // this will also do a redraw
- }
- };
-
- /**
- * Set Timeline window such that it fits all items
- */
- Timeline.prototype.fit = function() {
- // apply the data range as range
- var dataRange = this.getItemRange();
-
- // add 5% space on both sides
- var start = dataRange.min;
- var end = dataRange.max;
- if (start != null && end != null) {
- var interval = (end.valueOf() - start.valueOf());
- if (interval <= 0) {
- // prevent an empty interval
- interval = 24 * 60 * 60 * 1000; // 1 day
- }
- start = new Date(start.valueOf() - interval * 0.05);
- end = new Date(end.valueOf() + interval * 0.05);
- }
-
- // skip range set if there is no start and end date
- if (start === null && end === null) {
- return;
- }
-
- this.range.setRange(start, end);
- };
-
- /**
- * 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() {
- // calculate min from start filed
- var dataset = this.itemsData.getDataSet(),
- min = null,
- max = null;
-
- if (dataset) {
- // calculate the minimum value of the field 'start'
- var minItem = dataset.min('start');
- min = minItem ? util.convert(minItem.start, 'Date').valueOf() : null;
- // Note: we convert first to Date and then to number because else
- // a conversion from ISODate to Number will fail
-
- // calculate maximum value of fields 'start' and 'end'
- var maxStartItem = dataset.max('start');
- if (maxStartItem) {
- max = util.convert(maxStartItem.start, 'Date').valueOf();
- }
- var maxEndItem = dataset.max('end');
- if (maxEndItem) {
- if (max == null) {
- max = util.convert(maxEndItem.end, 'Date').valueOf();
- }
- else {
- max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
- }
- }
- }
-
- return {
- min: (min != null) ? new Date(min) : null,
- max: (max != null) ? new Date(max) : null
- };
- };
-
- /**
- * Set selected items by their id. Replaces the current selection
- * Unknown id's are silently ignored.
- * @param {Array} [ids] An array with zero or more id's of the items to be
- * selected. If ids is an empty array, all items will be
- * unselected.
- */
- Timeline.prototype.setSelection = function(ids) {
- this.itemSet && this.itemSet.setSelection(ids);
- };
-
- /**
- * Get the selected items by their id
- * @return {Array} ids The ids of the selected items
- */
- Timeline.prototype.getSelection = function() {
- return this.itemSet && this.itemSet.getSelection() || [];
- };
-
- /**
- * Set the visible window. Both parameters are optional, you can change only
- * start or only end. Syntax:
- *
- * TimeLine.setWindow(start, end)
- * TimeLine.setWindow(range)
- *
- * Where start and end can be a Date, number, or string, and range is an
- * object with properties start and end.
- *
- * @param {Date | Number | String | Object} [start] Start date of visible window
- * @param {Date | Number | String} [end] End date of visible window
- */
- Timeline.prototype.setWindow = function(start, end) {
- if (arguments.length == 1) {
- var range = arguments[0];
- this.range.setRange(range.start, range.end);
- }
- else {
- this.range.setRange(start, end);
- }
- };
-
- /**
- * Get the visible window
- * @return {{start: Date, end: Date}} Visible range
- */
- Timeline.prototype.getWindow = function() {
- var range = this.range.getRange();
- return {
- start: new Date(range.start),
- end: new Date(range.end)
- };
- };
-
- /**
- * Force a redraw of the Timeline. Can be useful to manually redraw when
- * option autoResize=false
- */
- Timeline.prototype.redraw = function() {
- var resized = false,
- options = this.options,
- props = this.props,
- dom = this.dom;
-
- if (!dom) return; // when destroyed
-
- // update class names
- dom.root.className = 'vis timeline root ' + options.orientation;
-
- // update root width and height options
- dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
- dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
- dom.root.style.width = util.option.asSize(options.width, '');
-
- // calculate border widths
- props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
- props.border.right = props.border.left;
- props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
- props.border.bottom = props.border.top;
- var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
- var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
-
- // calculate the heights. If any of the side panels is empty, we set the height to
- // minus the border width, such that the border will be invisible
- props.center.height = dom.center.offsetHeight;
- props.left.height = dom.left.offsetHeight;
- props.right.height = dom.right.offsetHeight;
- props.top.height = dom.top.clientHeight || -props.border.top;
- props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
-
- // TODO: compensate borders when any of the panels is empty.
-
- // apply auto height
- // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
- var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
- var autoHeight = props.top.height + contentHeight + props.bottom.height +
- borderRootHeight + props.border.top + props.border.bottom;
- dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
-
- // calculate heights of the content panels
- props.root.height = dom.root.offsetHeight;
- props.background.height = props.root.height - borderRootHeight;
- var containerHeight = props.root.height - props.top.height - props.bottom.height -
- borderRootHeight;
- props.centerContainer.height = containerHeight;
- props.leftContainer.height = containerHeight;
- props.rightContainer.height = props.leftContainer.height;
-
- // calculate the widths of the panels
- props.root.width = dom.root.offsetWidth;
- props.background.width = props.root.width - borderRootWidth;
- props.left.width = dom.leftContainer.clientWidth || -props.border.left;
- props.leftContainer.width = props.left.width;
- props.right.width = dom.rightContainer.clientWidth || -props.border.right;
- props.rightContainer.width = props.right.width;
- var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
- props.center.width = centerWidth;
- props.centerContainer.width = centerWidth;
- props.top.width = centerWidth;
- props.bottom.width = centerWidth;
-
- // resize the panels
- dom.background.style.height = props.background.height + 'px';
- dom.backgroundVertical.style.height = props.background.height + 'px';
- dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
- dom.centerContainer.style.height = props.centerContainer.height + 'px';
- dom.leftContainer.style.height = props.leftContainer.height + 'px';
- dom.rightContainer.style.height = props.rightContainer.height + 'px';
-
- dom.background.style.width = props.background.width + 'px';
- dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
- dom.backgroundHorizontal.style.width = props.background.width + 'px';
- dom.centerContainer.style.width = props.center.width + 'px';
- dom.top.style.width = props.top.width + 'px';
- dom.bottom.style.width = props.bottom.width + 'px';
-
- // reposition the panels
- dom.background.style.left = '0';
- dom.background.style.top = '0';
- dom.backgroundVertical.style.left = props.left.width + 'px';
- dom.backgroundVertical.style.top = '0';
- dom.backgroundHorizontal.style.left = '0';
- dom.backgroundHorizontal.style.top = props.top.height + 'px';
- dom.centerContainer.style.left = props.left.width + 'px';
- dom.centerContainer.style.top = props.top.height + 'px';
- dom.leftContainer.style.left = '0';
- dom.leftContainer.style.top = props.top.height + 'px';
- dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
- dom.rightContainer.style.top = props.top.height + 'px';
- dom.top.style.left = props.left.width + 'px';
- dom.top.style.top = '0';
- dom.bottom.style.left = props.left.width + 'px';
- dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
-
- // update the scrollTop, feasible range for the offset can be changed
- // when the height of the Timeline or of the contents of the center changed
- this._updateScrollTop();
-
- // reposition the scrollable contents
- var offset = this.props.scrollTop;
- if (options.orientation == 'bottom') {
- offset += Math.max(this.props.centerContainer.height - this.props.center.height -
- this.props.border.top - this.props.border.bottom, 0);
- }
- dom.center.style.left = '0';
- dom.center.style.top = offset + 'px';
- dom.left.style.left = '0';
- dom.left.style.top = offset + 'px';
- dom.right.style.left = '0';
- dom.right.style.top = offset + 'px';
-
- // show shadows when vertical scrolling is available
- var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
- var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
- dom.shadowTop.style.visibility = visibilityTop;
- dom.shadowBottom.style.visibility = visibilityBottom;
- dom.shadowTopLeft.style.visibility = visibilityTop;
- dom.shadowBottomLeft.style.visibility = visibilityBottom;
- dom.shadowTopRight.style.visibility = visibilityTop;
- dom.shadowBottomRight.style.visibility = visibilityBottom;
-
- // redraw all components
- this.components.forEach(function (component) {
- resized = component.redraw() || resized;
- });
- if (resized) {
- // keep repainting until all sizes are settled
- this.redraw();
- }
- };
-
- // TODO: deprecated since version 1.1.0, remove some day
- Timeline.prototype.repaint = function () {
- throw new Error('Function repaint is deprecated. Use redraw instead.');
- };
-
- /**
- * 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
- * @private
- */
- // TODO: move this function to Range
- Timeline.prototype._toTime = function(x) {
- var conversion = this.range.conversion(this.props.center.width);
- return new Date(x / conversion.scale + conversion.offset);
- };
-
-
- /**
- * Convert a position on the global 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
- * @private
- */
- // TODO: move this function to Range
- Timeline.prototype._toGlobalTime = function(x) {
- var conversion = this.range.conversion(this.props.root.width);
- 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
- */
- // TODO: move this function to Range
- Timeline.prototype._toScreen = function(time) {
- var conversion = this.range.conversion(this.props.center.width);
- return (time.valueOf() - conversion.offset) * conversion.scale;
- };
-
-
- /**
- * Convert a datetime (Date object) into a position on the root
- * This is used to get the pixel density estimate for the screen, not the center panel
- * @param {Date} time A date
- * @return {int} x The position on root in pixels which corresponds
- * with the given date.
- * @private
- */
- // TODO: move this function to Range
- Timeline.prototype._toGlobalScreen = function(time) {
- var conversion = this.range.conversion(this.props.root.width);
- return (time.valueOf() - conversion.offset) * conversion.scale;
- };
-
-
- /**
- * Initialize watching when option autoResize is true
- * @private
- */
- Timeline.prototype._initAutoResize = function () {
- if (this.options.autoResize == true) {
- this._startAutoResize();
- }
- else {
- this._stopAutoResize();
- }
- };
-
- /**
- * Watch for changes in the size of the container. On resize, the Panel will
- * automatically redraw itself.
- * @private
- */
- Timeline.prototype._startAutoResize = function () {
- var me = this;
-
- this._stopAutoResize();
-
- this._onResize = function() {
- if (me.options.autoResize != true) {
- // stop watching when the option autoResize is changed to false
- me._stopAutoResize();
- return;
- }
-
- if (me.dom.root) {
- // check whether the frame is resized
- if ((me.dom.root.clientWidth != me.props.lastWidth) ||
- (me.dom.root.clientHeight != me.props.lastHeight)) {
- me.props.lastWidth = me.dom.root.clientWidth;
- me.props.lastHeight = me.dom.root.clientHeight;
-
- me.emit('change');
- }
- }
- };
-
- // add event listener to window resize
- util.addEventListener(window, 'resize', this._onResize);
-
- this.watchTimer = setInterval(this._onResize, 1000);
- };
-
- /**
- * Stop watching for a resize of the frame.
- * @private
- */
- Timeline.prototype._stopAutoResize = function () {
- if (this.watchTimer) {
- clearInterval(this.watchTimer);
- this.watchTimer = undefined;
- }
-
- // remove event listener on window.resize
- util.removeEventListener(window, 'resize', this._onResize);
- this._onResize = null;
- };
-
- /**
- * Start moving the timeline vertically
- * @param {Event} event
- * @private
- */
- Timeline.prototype._onTouch = function (event) {
- this.touch.allowDragging = true;
- };
-
- /**
- * Start moving the timeline vertically
- * @param {Event} event
- * @private
- */
- Timeline.prototype._onPinch = function (event) {
- this.touch.allowDragging = false;
- };
-
- /**
- * Start moving the timeline vertically
- * @param {Event} event
- * @private
- */
- Timeline.prototype._onDragStart = function (event) {
- this.touch.initialScrollTop = this.props.scrollTop;
- };
-
- /**
- * Move the timeline vertically
- * @param {Event} event
- * @private
- */
- Timeline.prototype._onDrag = function (event) {
- // 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 (!this.touch.allowDragging) return;
-
- var delta = event.gesture.deltaY;
-
- var oldScrollTop = this._getScrollTop();
- var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
-
- if (newScrollTop != oldScrollTop) {
- this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
- }
- };
-
- /**
- * Apply a scrollTop
- * @param {Number} scrollTop
- * @returns {Number} scrollTop Returns the applied scrollTop
- * @private
- */
- Timeline.prototype._setScrollTop = function (scrollTop) {
- this.props.scrollTop = scrollTop;
- this._updateScrollTop();
- return this.props.scrollTop;
- };
-
- /**
- * Update the current scrollTop when the height of the containers has been changed
- * @returns {Number} scrollTop Returns the applied scrollTop
- * @private
- */
- Timeline.prototype._updateScrollTop = function () {
- // recalculate the scrollTopMin
- var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
- if (scrollTopMin != this.props.scrollTopMin) {
- // in case of bottom orientation, change the scrollTop such that the contents
- // do not move relative to the time axis at the bottom
- if (this.options.orientation == 'bottom') {
- this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
- }
- this.props.scrollTopMin = scrollTopMin;
- }
-
- // limit the scrollTop to the feasible scroll range
- if (this.props.scrollTop > 0) this.props.scrollTop = 0;
- if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
-
- return this.props.scrollTop;
- };
-
- /**
- * Get the current scrollTop
- * @returns {number} scrollTop
- * @private
- */
- Timeline.prototype._getScrollTop = function () {
- return this.props.scrollTop;
- };
-
- /**
- * Create a timeline visualization
- * @param {HTMLElement} container
- * @param {vis.DataSet | Array | google.visualization.DataTable} [items]
- * @param {Object} [options] See Graph2d.setOptions for the available options.
- * @constructor
- */
- function Graph2d (container, items, options, groups) {
- var me = this;
- this.defaultOptions = {
- start: null,
- end: null,
-
- autoResize: true,
-
- orientation: 'bottom',
- width: null,
- height: null,
- maxHeight: null,
- minHeight: null
- };
- this.options = util.deepExtend({}, this.defaultOptions);
-
- // Create the DOM, props, and emitter
- this._create(container);
-
- // all components listed here will be repainted automatically
- this.components = [];
-
- this.body = {
- dom: this.dom,
- domProps: this.props,
- emitter: {
- on: this.on.bind(this),
- off: this.off.bind(this),
- emit: this.emit.bind(this)
- },
- util: {
- snap: null, // will be specified after TimeAxis is created
- toScreen: me._toScreen.bind(me),
- toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width
- toTime: me._toTime.bind(me),
- toGlobalTime : me._toGlobalTime.bind(me)
- }
- };
-
- // range
- this.range = new Range(this.body);
- this.components.push(this.range);
- this.body.range = this.range;
-
- // time axis
- this.timeAxis = new TimeAxis(this.body);
- this.components.push(this.timeAxis);
- this.body.util.snap = this.timeAxis.snap.bind(this.timeAxis);
-
- // current time bar
- this.currentTime = new CurrentTime(this.body);
- this.components.push(this.currentTime);
-
- // custom time bar
- // Note: time bar will be attached in this.setOptions when selected
- this.customTime = new CustomTime(this.body);
- this.components.push(this.customTime);
-
- // item set
- this.linegraph = new LineGraph(this.body);
- this.components.push(this.linegraph);
-
- this.itemsData = null; // DataSet
- this.groupsData = null; // DataSet
-
- // apply options
- if (options) {
- this.setOptions(options);
- }
-
- // IMPORTANT: THIS HAPPENS BEFORE SET ITEMS!
- if (groups) {
- this.setGroups(groups);
- }
-
- // create itemset
- if (items) {
- this.setItems(items);
- }
- else {
- this.redraw();
- }
- }
-
- // turn Graph2d into an event emitter
- Emitter(Graph2d.prototype);
-
- /**
- * Create the main DOM for the Graph2d: a root panel containing left, right,
- * top, bottom, content, and background panel.
- * @param {Element} container The container element where the Graph2d will
- * be attached.
- * @private
- */
- Graph2d.prototype._create = function (container) {
- this.dom = {};
-
- this.dom.root = document.createElement('div');
- this.dom.background = document.createElement('div');
- this.dom.backgroundVertical = document.createElement('div');
- this.dom.backgroundHorizontalContainer = document.createElement('div');
- this.dom.centerContainer = document.createElement('div');
- this.dom.leftContainer = document.createElement('div');
- this.dom.rightContainer = document.createElement('div');
- this.dom.backgroundHorizontal = document.createElement('div');
- this.dom.center = document.createElement('div');
- this.dom.left = document.createElement('div');
- this.dom.right = document.createElement('div');
- this.dom.top = document.createElement('div');
- this.dom.bottom = document.createElement('div');
- this.dom.shadowTop = document.createElement('div');
- this.dom.shadowBottom = document.createElement('div');
- this.dom.shadowTopLeft = document.createElement('div');
- this.dom.shadowBottomLeft = document.createElement('div');
- this.dom.shadowTopRight = document.createElement('div');
- this.dom.shadowBottomRight = document.createElement('div');
-
- this.dom.background.className = 'vispanel background';
- this.dom.backgroundVertical.className = 'vispanel background vertical';
- this.dom.backgroundHorizontalContainer.className = 'vispanel background horizontal';
- this.dom.backgroundHorizontal.className = 'vispanel background horizontal';
- this.dom.centerContainer.className = 'vispanel center';
- this.dom.leftContainer.className = 'vispanel left';
- this.dom.rightContainer.className = 'vispanel right';
- this.dom.top.className = 'vispanel top';
- this.dom.bottom.className = 'vispanel bottom';
- this.dom.left.className = 'content';
- this.dom.center.className = 'content';
- this.dom.right.className = 'content';
- this.dom.shadowTop.className = 'shadow top';
- this.dom.shadowBottom.className = 'shadow bottom';
- this.dom.shadowTopLeft.className = 'shadow top';
- this.dom.shadowBottomLeft.className = 'shadow bottom';
- this.dom.shadowTopRight.className = 'shadow top';
- this.dom.shadowBottomRight.className = 'shadow bottom';
-
- this.dom.root.appendChild(this.dom.background);
- this.dom.root.appendChild(this.dom.backgroundVertical);
- this.dom.root.appendChild(this.dom.backgroundHorizontalContainer);
- this.dom.root.appendChild(this.dom.centerContainer);
- this.dom.root.appendChild(this.dom.leftContainer);
- this.dom.root.appendChild(this.dom.rightContainer);
- this.dom.root.appendChild(this.dom.top);
- this.dom.root.appendChild(this.dom.bottom);
-
- this.dom.backgroundHorizontalContainer.appendChild(this.dom.backgroundHorizontal);
- this.dom.centerContainer.appendChild(this.dom.center);
- this.dom.leftContainer.appendChild(this.dom.left);
- this.dom.rightContainer.appendChild(this.dom.right);
-
- this.dom.centerContainer.appendChild(this.dom.shadowTop);
- this.dom.centerContainer.appendChild(this.dom.shadowBottom);
- this.dom.leftContainer.appendChild(this.dom.shadowTopLeft);
- this.dom.leftContainer.appendChild(this.dom.shadowBottomLeft);
- this.dom.rightContainer.appendChild(this.dom.shadowTopRight);
- this.dom.rightContainer.appendChild(this.dom.shadowBottomRight);
-
- this.on('rangechange', this.redraw.bind(this));
- this.on('change', this.redraw.bind(this));
- this.on('touch', this._onTouch.bind(this));
- this.on('pinch', this._onPinch.bind(this));
- this.on('dragstart', this._onDragStart.bind(this));
- this.on('drag', this._onDrag.bind(this));
-
- // create event listeners for all interesting events, these events will be
- // emitted via emitter
- this.hammer = Hammer(this.dom.root, {
- prevent_default: true
- });
- this.listeners = {};
-
- var me = this;
- var events = [
- 'touch', 'pinch',
- 'tap', 'doubletap', 'hold',
- 'dragstart', 'drag', 'dragend',
- 'mousewheel', 'DOMMouseScroll' // DOMMouseScroll is needed for Firefox
- ];
- events.forEach(function (event) {
- var listener = function () {
- var args = [event].concat(Array.prototype.slice.call(arguments, 0));
- me.emit.apply(me, args);
- };
- me.hammer.on(event, listener);
- me.listeners[event] = listener;
- });
-
- // size properties of each of the panels
- this.props = {
- root: {},
- background: {},
- centerContainer: {},
- leftContainer: {},
- rightContainer: {},
- center: {},
- left: {},
- right: {},
- top: {},
- bottom: {},
- border: {},
- scrollTop: 0,
- scrollTopMin: 0
- };
- this.touch = {}; // store state information needed for touch events
-
- // attach the root panel to the provided container
- if (!container) throw new Error('No container provided');
- container.appendChild(this.dom.root);
- };
-
- /**
- * Destroy the Graph2d, clean up all DOM elements and event listeners.
- */
- Graph2d.prototype.destroy = function () {
- // unbind datasets
- this.clear();
-
- // remove all event listeners
- this.off();
-
- // stop checking for changed size
- this._stopAutoResize();
-
- // remove from DOM
- if (this.dom.root.parentNode) {
- this.dom.root.parentNode.removeChild(this.dom.root);
- }
- this.dom = null;
-
- // cleanup hammer touch events
- for (var event in this.listeners) {
- if (this.listeners.hasOwnProperty(event)) {
- delete this.listeners[event];
- }
- }
- this.listeners = null;
- this.hammer = null;
-
- // give all components the opportunity to cleanup
- this.components.forEach(function (component) {
- component.destroy();
- });
-
- this.body = null;
- };
-
- /**
- * Set options. Options will be passed to all components loaded in the Graph2d.
- * @param {Object} [options]
- * {String} orientation
- * Vertical orientation for the Graph2d,
- * can be 'bottom' (default) or 'top'.
- * {String | Number} width
- * Width for the timeline, a number in pixels or
- * a css string like '1000px' or '75%'. '100%' by default.
- * {String | Number} height
- * Fixed height for the Graph2d, a number in pixels or
- * a css string like '400px' or '75%'. If undefined,
- * The Graph2d will automatically size such that
- * its contents fit.
- * {String | Number} minHeight
- * Minimum height for the Graph2d, a number in pixels or
- * a css string like '400px' or '75%'.
- * {String | Number} maxHeight
- * Maximum height for the Graph2d, a number in pixels or
- * a css string like '400px' or '75%'.
- * {Number | Date | String} start
- * Start date for the visible window
- * {Number | Date | String} end
- * End date for the visible window
- */
- Graph2d.prototype.setOptions = function (options) {
- if (options) {
- // copy the known options
- var fields = ['width', 'height', 'minHeight', 'maxHeight', 'autoResize', 'start', 'end', 'orientation'];
- util.selectiveExtend(fields, this.options, options);
-
- // enable/disable autoResize
- this._initAutoResize();
- }
-
- // propagate options to all components
- this.components.forEach(function (component) {
- component.setOptions(options);
- });
-
- // TODO: remove deprecation error one day (deprecated since version 0.8.0)
- if (options && options.order) {
- throw new Error('Option order is deprecated. There is no replacement for this feature.');
- }
-
- // redraw everything
- this.redraw();
- };
-
- /**
- * Set a custom time bar
- * @param {Date} time
- */
- Graph2d.prototype.setCustomTime = function (time) {
- if (!this.customTime) {
- throw new Error('Cannot get custom time: Custom time bar is not enabled');
- }
-
- this.customTime.setCustomTime(time);
- };
-
- /**
- * Retrieve the current custom time.
- * @return {Date} customTime
- */
- Graph2d.prototype.getCustomTime = function() {
- if (!this.customTime) {
- throw new Error('Cannot get custom time: Custom time bar is not enabled');
- }
-
- return this.customTime.getCustomTime();
- };
-
- /**
- * Set items
- * @param {vis.DataSet | Array | google.visualization.DataTable | null} items
- */
- Graph2d.prototype.setItems = function(items) {
- var initialLoad = (this.itemsData == null);
-
- // convert to type DataSet when needed
- var newDataSet;
- if (!items) {
- newDataSet = null;
- }
- else if (items instanceof DataSet || items instanceof DataView) {
- newDataSet = items;
- }
- else {
- // turn an array into a dataset
- newDataSet = new DataSet(items, {
- type: {
- start: 'Date',
- end: 'Date'
- }
- });
- }
-
- // set items
- this.itemsData = newDataSet;
- this.linegraph && this.linegraph.setItems(newDataSet);
-
- if (initialLoad && ('start' in this.options || 'end' in this.options)) {
- this.fit();
-
- var start = ('start' in this.options) ? util.convert(this.options.start, 'Date') : null;
- var end = ('end' in this.options) ? util.convert(this.options.end, 'Date') : null;
-
- this.setWindow(start, end);
- }
- };
-
- /**
- * Set groups
- * @param {vis.DataSet | Array | google.visualization.DataTable} groups
- */
- Graph2d.prototype.setGroups = function(groups) {
- // convert to type DataSet when needed
- var newDataSet;
- if (!groups) {
- newDataSet = null;
- }
- else if (groups instanceof DataSet || groups instanceof DataView) {
- newDataSet = groups;
- }
- else {
- // turn an array into a dataset
- newDataSet = new DataSet(groups);
- }
-
- this.groupsData = newDataSet;
- this.linegraph.setGroups(newDataSet);
- };
-
- /**
- * Clear the Graph2d. By Default, items, groups and options are cleared.
- * Example usage:
- *
- * timeline.clear(); // clear items, groups, and options
- * timeline.clear({options: true}); // clear options only
- *
- * @param {Object} [what] Optionally specify what to clear. By default:
- * {items: true, groups: true, options: true}
- */
- Graph2d.prototype.clear = function(what) {
- // clear items
- if (!what || what.items) {
- this.setItems(null);
- }
-
- // clear groups
- if (!what || what.groups) {
- this.setGroups(null);
- }
-
- // clear options of timeline and of each of the components
- if (!what || what.options) {
- this.components.forEach(function (component) {
- component.setOptions(component.defaultOptions);
- });
-
- this.setOptions(this.defaultOptions); // this will also do a redraw
- }
- };
-
- /**
- * Set Graph2d window such that it fits all items
- */
- Graph2d.prototype.fit = function() {
- // apply the data range as range
- var dataRange = this.getItemRange();
-
- // add 5% space on both sides
- var start = dataRange.min;
- var end = dataRange.max;
- if (start != null && end != null) {
- var interval = (end.valueOf() - start.valueOf());
- if (interval <= 0) {
- // prevent an empty interval
- interval = 24 * 60 * 60 * 1000; // 1 day
- }
- start = new Date(start.valueOf() - interval * 0.05);
- end = new Date(end.valueOf() + interval * 0.05);
- }
-
- // skip range set if there is no start and end date
- if (start === null && end === null) {
- return;
- }
-
- this.range.setRange(start, end);
- };
-
- /**
- * 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
- */
- Graph2d.prototype.getItemRange = function() {
- // 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 ? util.convert(minItem.start, 'Date').valueOf() : null;
- // Note: we convert first to Date and then to number because else
- // a conversion from ISODate to Number will fail
-
- // calculate maximum value of fields 'start' and 'end'
- var maxStartItem = itemsData.max('start');
- if (maxStartItem) {
- max = util.convert(maxStartItem.start, 'Date').valueOf();
- }
- var maxEndItem = itemsData.max('end');
- if (maxEndItem) {
- if (max == null) {
- max = util.convert(maxEndItem.end, 'Date').valueOf();
- }
- else {
- max = Math.max(max, util.convert(maxEndItem.end, 'Date').valueOf());
- }
- }
- }
-
- return {
- min: (min != null) ? new Date(min) : null,
- max: (max != null) ? new Date(max) : null
- };
- };
-
- /**
- * Set the visible window. Both parameters are optional, you can change only
- * start or only end. Syntax:
- *
- * TimeLine.setWindow(start, end)
- * TimeLine.setWindow(range)
- *
- * Where start and end can be a Date, number, or string, and range is an
- * object with properties start and end.
- *
- * @param {Date | Number | String | Object} [start] Start date of visible window
- * @param {Date | Number | String} [end] End date of visible window
- */
- Graph2d.prototype.setWindow = function(start, end) {
- if (arguments.length == 1) {
- var range = arguments[0];
- this.range.setRange(range.start, range.end);
- }
- else {
- this.range.setRange(start, end);
- }
- };
-
- /**
- * Get the visible window
- * @return {{start: Date, end: Date}} Visible range
- */
- Graph2d.prototype.getWindow = function() {
- var range = this.range.getRange();
- return {
- start: new Date(range.start),
- end: new Date(range.end)
- };
- };
-
- /**
- * Force a redraw of the Graph2d. Can be useful to manually redraw when
- * option autoResize=false
- */
- Graph2d.prototype.redraw = function() {
- var resized = false,
- options = this.options,
- props = this.props,
- dom = this.dom;
-
- if (!dom) return; // when destroyed
-
- // update class names
- dom.root.className = 'vis timeline root ' + options.orientation;
-
- // update root width and height options
- dom.root.style.maxHeight = util.option.asSize(options.maxHeight, '');
- dom.root.style.minHeight = util.option.asSize(options.minHeight, '');
- dom.root.style.width = util.option.asSize(options.width, '');
-
- // calculate border widths
- props.border.left = (dom.centerContainer.offsetWidth - dom.centerContainer.clientWidth) / 2;
- props.border.right = props.border.left;
- props.border.top = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
- props.border.bottom = props.border.top;
- var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
- var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
-
- // calculate the heights. If any of the side panels is empty, we set the height to
- // minus the border width, such that the border will be invisible
- props.center.height = dom.center.offsetHeight;
- props.left.height = dom.left.offsetHeight;
- props.right.height = dom.right.offsetHeight;
- props.top.height = dom.top.clientHeight || -props.border.top;
- props.bottom.height = dom.bottom.clientHeight || -props.border.bottom;
-
- // TODO: compensate borders when any of the panels is empty.
-
- // apply auto height
- // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
- var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
- var autoHeight = props.top.height + contentHeight + props.bottom.height +
- borderRootHeight + props.border.top + props.border.bottom;
- dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
-
- // calculate heights of the content panels
- props.root.height = dom.root.offsetHeight;
- props.background.height = props.root.height - borderRootHeight;
- var containerHeight = props.root.height - props.top.height - props.bottom.height -
- borderRootHeight;
- props.centerContainer.height = containerHeight;
- props.leftContainer.height = containerHeight;
- props.rightContainer.height = props.leftContainer.height;
-
- // calculate the widths of the panels
- props.root.width = dom.root.offsetWidth;
- props.background.width = props.root.width - borderRootWidth;
- props.left.width = dom.leftContainer.clientWidth || -props.border.left;
- props.leftContainer.width = props.left.width;
- props.right.width = dom.rightContainer.clientWidth || -props.border.right;
- props.rightContainer.width = props.right.width;
- var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
- props.center.width = centerWidth;
- props.centerContainer.width = centerWidth;
- props.top.width = centerWidth;
- props.bottom.width = centerWidth;
-
- // resize the panels
- dom.background.style.height = props.background.height + 'px';
- dom.backgroundVertical.style.height = props.background.height + 'px';
- dom.backgroundHorizontalContainer.style.height = props.centerContainer.height + 'px';
- dom.centerContainer.style.height = props.centerContainer.height + 'px';
- dom.leftContainer.style.height = props.leftContainer.height + 'px';
- dom.rightContainer.style.height = props.rightContainer.height + 'px';
-
- dom.background.style.width = props.background.width + 'px';
- dom.backgroundVertical.style.width = props.centerContainer.width + 'px';
- dom.backgroundHorizontalContainer.style.width = props.background.width + 'px';
- dom.backgroundHorizontal.style.width = props.background.width + 'px';
- dom.centerContainer.style.width = props.center.width + 'px';
- dom.top.style.width = props.top.width + 'px';
- dom.bottom.style.width = props.bottom.width + 'px';
-
- // reposition the panels
- dom.background.style.left = '0';
- dom.background.style.top = '0';
- dom.backgroundVertical.style.left = props.left.width + 'px';
- dom.backgroundVertical.style.top = '0';
- dom.backgroundHorizontalContainer.style.left = '0';
- dom.backgroundHorizontalContainer.style.top = props.top.height + 'px';
- dom.centerContainer.style.left = props.left.width + 'px';
- dom.centerContainer.style.top = props.top.height + 'px';
- dom.leftContainer.style.left = '0';
- dom.leftContainer.style.top = props.top.height + 'px';
- dom.rightContainer.style.left = (props.left.width + props.center.width) + 'px';
- dom.rightContainer.style.top = props.top.height + 'px';
- dom.top.style.left = props.left.width + 'px';
- dom.top.style.top = '0';
- dom.bottom.style.left = props.left.width + 'px';
- dom.bottom.style.top = (props.top.height + props.centerContainer.height) + 'px';
-
- // update the scrollTop, feasible range for the offset can be changed
- // when the height of the Graph2d or of the contents of the center changed
- this._updateScrollTop();
-
- // reposition the scrollable contents
- var offset = this.props.scrollTop;
- if (options.orientation == 'bottom') {
- offset += Math.max(this.props.centerContainer.height - this.props.center.height -
- this.props.border.top - this.props.border.bottom, 0);
- }
- dom.center.style.left = '0';
- dom.center.style.top = offset + 'px';
- dom.backgroundHorizontal.style.left = '0';
- dom.backgroundHorizontal.style.top = offset + 'px';
- dom.left.style.left = '0';
- dom.left.style.top = offset + 'px';
- dom.right.style.left = '0';
- dom.right.style.top = offset + 'px';
-
- // show shadows when vertical scrolling is available
- var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
- var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
- dom.shadowTop.style.visibility = visibilityTop;
- dom.shadowBottom.style.visibility = visibilityBottom;
- dom.shadowTopLeft.style.visibility = visibilityTop;
- dom.shadowBottomLeft.style.visibility = visibilityBottom;
- dom.shadowTopRight.style.visibility = visibilityTop;
- dom.shadowBottomRight.style.visibility = visibilityBottom;
-
- // redraw all components
- this.components.forEach(function (component) {
- resized = component.redraw() || resized;
- });
- if (resized) {
- // keep redrawing until all sizes are settled
- this.redraw();
- }
- };
-
- /**
- * 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
- * @private
- */
- // TODO: move this function to Range
- Graph2d.prototype._toTime = function(x) {
- var conversion = this.range.conversion(this.props.center.width);
- return new Date(x / conversion.scale + conversion.offset);
- };
-
- /**
- * Convert a datetime (Date object) into a position on the root
- * This is used to get the pixel density estimate for the screen, not the center panel
- * @param {Date} time A date
- * @return {int} x The position on root in pixels which corresponds
- * with the given date.
- * @private
- */
- // TODO: move this function to Range
- Graph2d.prototype._toGlobalTime = function(x) {
- var conversion = this.range.conversion(this.props.root.width);
- 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
- */
- // TODO: move this function to Range
- Graph2d.prototype._toScreen = function(time) {
- var conversion = this.range.conversion(this.props.center.width);
- return (time.valueOf() - conversion.offset) * conversion.scale;
- };
-
-
- /**
- * Convert a datetime (Date object) into a position on the root
- * This is used to get the pixel density estimate for the screen, not the center panel
- * @param {Date} time A date
- * @return {int} x The position on root in pixels which corresponds
- * with the given date.
- * @private
- */
- // TODO: move this function to Range
- Graph2d.prototype._toGlobalScreen = function(time) {
- var conversion = this.range.conversion(this.props.root.width);
- return (time.valueOf() - conversion.offset) * conversion.scale;
- };
-
- /**
- * Initialize watching when option autoResize is true
- * @private
- */
- Graph2d.prototype._initAutoResize = function () {
- if (this.options.autoResize == true) {
- this._startAutoResize();
- }
- else {
- this._stopAutoResize();
- }
- };
-
- /**
- * Watch for changes in the size of the container. On resize, the Panel will
- * automatically redraw itself.
- * @private
- */
- Graph2d.prototype._startAutoResize = function () {
- var me = this;
-
- this._stopAutoResize();
-
- this._onResize = function() {
- if (me.options.autoResize != true) {
- // stop watching when the option autoResize is changed to false
- me._stopAutoResize();
- return;
- }
-
- if (me.dom.root) {
- // check whether the frame is resized
- if ((me.dom.root.clientWidth != me.props.lastWidth) ||
- (me.dom.root.clientHeight != me.props.lastHeight)) {
- me.props.lastWidth = me.dom.root.clientWidth;
- me.props.lastHeight = me.dom.root.clientHeight;
-
- me.emit('change');
- }
- }
- };
-
- // add event listener to window resize
- util.addEventListener(window, 'resize', this._onResize);
-
- this.watchTimer = setInterval(this._onResize, 1000);
- };
-
- /**
- * Stop watching for a resize of the frame.
- * @private
- */
- Graph2d.prototype._stopAutoResize = function () {
- if (this.watchTimer) {
- clearInterval(this.watchTimer);
- this.watchTimer = undefined;
- }
-
- // remove event listener on window.resize
- util.removeEventListener(window, 'resize', this._onResize);
- this._onResize = null;
- };
-
- /**
- * Start moving the timeline vertically
- * @param {Event} event
- * @private
- */
- Graph2d.prototype._onTouch = function (event) {
- this.touch.allowDragging = true;
- };
-
- /**
- * Start moving the timeline vertically
- * @param {Event} event
- * @private
- */
- Graph2d.prototype._onPinch = function (event) {
- this.touch.allowDragging = false;
- };
-
- /**
- * Start moving the timeline vertically
- * @param {Event} event
- * @private
- */
- Graph2d.prototype._onDragStart = function (event) {
- this.touch.initialScrollTop = this.props.scrollTop;
- };
-
- /**
- * Move the timeline vertically
- * @param {Event} event
- * @private
- */
- Graph2d.prototype._onDrag = function (event) {
- // 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 (!this.touch.allowDragging) return;
-
- var delta = event.gesture.deltaY;
-
- var oldScrollTop = this._getScrollTop();
- var newScrollTop = this._setScrollTop(this.touch.initialScrollTop + delta);
-
- if (newScrollTop != oldScrollTop) {
- this.redraw(); // TODO: this causes two redraws when dragging, the other is triggered by rangechange already
- }
- };
-
- /**
- * Apply a scrollTop
- * @param {Number} scrollTop
- * @returns {Number} scrollTop Returns the applied scrollTop
- * @private
- */
- Graph2d.prototype._setScrollTop = function (scrollTop) {
- this.props.scrollTop = scrollTop;
- this._updateScrollTop();
- return this.props.scrollTop;
- };
-
- /**
- * Update the current scrollTop when the height of the containers has been changed
- * @returns {Number} scrollTop Returns the applied scrollTop
- * @private
- */
- Graph2d.prototype._updateScrollTop = function () {
- // recalculate the scrollTopMin
- var scrollTopMin = Math.min(this.props.centerContainer.height - this.props.center.height, 0); // is negative or zero
- if (scrollTopMin != this.props.scrollTopMin) {
- // in case of bottom orientation, change the scrollTop such that the contents
- // do not move relative to the time axis at the bottom
- if (this.options.orientation == 'bottom') {
- this.props.scrollTop += (scrollTopMin - this.props.scrollTopMin);
- }
- this.props.scrollTopMin = scrollTopMin;
- }
-
- // limit the scrollTop to the feasible scroll range
- if (this.props.scrollTop > 0) this.props.scrollTop = 0;
- if (this.props.scrollTop < scrollTopMin) this.props.scrollTop = scrollTopMin;
-
- return this.props.scrollTop;
- };
-
- /**
- * Get the current scrollTop
- * @returns {number} scrollTop
- * @private
- */
- Graph2d.prototype._getScrollTop = function () {
- return this.props.scrollTop;
- };
-
- (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 Network
- */
- 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 {Network.Images} imagelist A list with images. Only needed
- * when the node has an image
- * @param {Network.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.hover = false;
-
- this.edges = []; // all edges connected to this node
- this.dynamicEdges = [];
- this.reroutedEdges = {};
-
- this.group = constants.nodes.group;
- this.fontSize = Number(constants.nodes.fontSize);
- this.fontFace = constants.nodes.fontFace;
- this.fontColor = constants.nodes.fontColor;
- this.fontDrawThreshold = 3;
-
- 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 = null;
- this.y = null;
- this.xFixed = false;
- this.yFixed = false;
- this.horizontalAlignLeft = true; // these are for the navigation controls
- this.verticalAlignTop = true; // these are for the navigation controls
- this.radius = constants.nodes.radius;
- this.baseRadiusValue = constants.nodes.radius;
- this.radiusFixed = false;
- this.radiusMin = constants.nodes.radiusMin;
- this.radiusMax = constants.nodes.radiusMax;
- this.level = -1;
- this.preassignedLevel = false;
-
-
- this.imagelist = imagelist;
- this.grouplist = grouplist;
-
- // physics properties
- 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 = constants.physics.damping;
- this.mass = 1; // kg
- this.fixedData = {x:null,y:null};
-
- this.setProperties(properties, constants);
-
- // creating the variables for clustering
- this.resetCluster();
- this.dynamicEdgesLength = 0;
- this.clusterSession = 0;
- this.clusterSizeWidthFactor = constants.clustering.nodeScaling.width;
- this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
- this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
- this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
- this.growthIndicator = 0;
-
- // variables to tell the node about the network.
- this.networkScaleInv = 1;
- this.networkScale = 1;
- this.canvasTopLeft = {"x": -300, "y": -300};
- this.canvasBottomRight = {"x": 300, "y": 300};
- this.parentEdgeId = null;
- }
-
- /**
- * (re)setting the clustering variables and objects
- */
- Node.prototype.resetCluster = function() {
- // clustering variables
- this.formationScale = undefined; // this is used to determine when to open the cluster
- this.clusterSize = 1; // this signifies the total amount of nodes in this cluster
- this.containedNodes = {};
- this.containedEdges = {};
- this.clusterSessions = [];
- };
-
- /**
- * Attach a edge to the node
- * @param {Edge} edge
- */
- Node.prototype.attachEdge = function(edge) {
- if (this.edges.indexOf(edge) == -1) {
- this.edges.push(edge);
- }
- if (this.dynamicEdges.indexOf(edge) == -1) {
- this.dynamicEdges.push(edge);
- }
- this.dynamicEdgesLength = this.dynamicEdges.length;
- };
-
- /**
- * 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.dynamicEdges.splice(index, 1);
- }
- this.dynamicEdgesLength = this.dynamicEdges.length;
- };
-
-
- /**
- * 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;
- }
- this.originalLabel = undefined;
- // basic properties
- if (properties.id !== undefined) {this.id = properties.id;}
- if (properties.label !== undefined) {this.label = properties.label; this.originalLabel = 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 (properties.level !== undefined) {this.level = properties.level; this.preassignedLevel = true;}
-
-
- // physics
- if (properties.mass !== undefined) {this.mass = properties.mass;}
-
- // navigation controls properties
- if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
- if (properties.verticalAlignTop !== undefined) {this.verticalAlignTop = properties.verticalAlignTop;}
- if (properties.triggerFunction !== undefined) {this.triggerFunction = properties.triggerFunction;}
-
- 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 = util.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 && this.image != "") {
- if (this.imagelist) {
- this.imageObj = this.imagelist.load(this.image);
- }
- else {
- throw "No imagelist provided";
- }
- }
-
- this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMoveX);
- this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMoveY);
- 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();
- };
-
- /**
- * 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
- */
- Node.prototype.clearSizeCache = function() {
- 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 typeof this.title === "function" ? this.title() : 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);
- }
-
- 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
- }
- };
-
-
-
- /**
- * Perform one discrete step for the node
- * @param {number} interval Time interval in seconds
- * @param {number} maxVelocity The speed limit imposed on the velocity
- */
- Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
- 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.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
- this.x += this.vx * interval; // position
- }
- else {
- this.fx = 0;
- }
-
- 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.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
- this.y += this.vy * interval; // position
- }
- else {
- this.fy = 0;
- }
- };
-
- /**
- * 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);
- };
-
- /**
- * 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;
- }
- }
- this.baseRadiusValue = this.radius;
- };
-
- /**
- * 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 || !this.height) { // undefined or 0
- var width, height;
- if (this.value) {
- this.radius = this.baseRadiusValue;
- var scale = this.imageObj.height / this.imageObj.width;
- if (scale !== undefined) {
- width = this.radius || this.imageObj.width;
- height = this.radius * scale || this.imageObj.height;
- }
- else {
- width = 0;
- height = 0;
- }
- }
- else {
- width = this.imageObj.width;
- height = this.imageObj.height;
- }
- this.width = width;
- this.height = height;
-
- this.growthIndicator = 0;
- if (this.width > 0 && this.height > 0) {
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - width;
- }
- }
-
- };
-
- 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.width != 0 ) {
- // draw the shade
- if (this.clusterSize > 1) {
- var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
- lineWidth *= this.networkScaleInv;
- lineWidth = Math.min(0.2 * this.width,lineWidth);
-
- ctx.globalAlpha = 0.5;
- ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
- }
-
- // draw the image
- ctx.globalAlpha = 1.0;
- 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;
-
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
- this.growthIndicator = this.width - (textSize.width + 2 * margin);
- // this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-
- }
- };
-
- Node.prototype._drawBox = function (ctx) {
- this._resizeBox(ctx);
-
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
-
- var clusterLineWidth = 2.5;
- var selectionLineWidth = 2;
-
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.radius);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.color.background;
-
- 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;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - size;
- }
- };
-
- Node.prototype._drawDatabase = function (ctx) {
- this._resizeDatabase(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
-
- var clusterLineWidth = 2.5;
- var selectionLineWidth = 2;
-
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
- 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;
-
- // scaling used for clustering
- // this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
- // this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
- this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.radius - 0.5*diameter;
- }
- };
-
- Node.prototype._drawCircle = function (ctx) {
- this._resizeCircle(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
-
- var clusterLineWidth = 2.5;
- var selectionLineWidth = 2;
-
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.circle(this.x, this.y, this.radius+2*ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
- 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;
- }
- var defaultSize = this.width;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - defaultSize;
- }
- };
-
- Node.prototype._drawEllipse = function (ctx) {
- this._resizeEllipse(ctx);
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
-
- var clusterLineWidth = 2.5;
- var selectionLineWidth = 2;
-
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
-
- 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) {
- this.radius = this.baseRadiusValue;
- var size = 2 * this.radius;
- this.width = size;
- this.height = size;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - size;
- }
- };
-
- Node.prototype._drawShape = function (ctx, shape) {
- this._resizeShape(ctx);
-
- this.left = this.x - this.width / 2;
- this.top = this.y - this.height / 2;
-
- var clusterLineWidth = 2.5;
- var selectionLineWidth = 2;
- var radiusMultiplier = 2;
-
- // choose draw method depending on the shape
- switch (shape) {
- case 'dot': radiusMultiplier = 2; break;
- case 'square': radiusMultiplier = 2; break;
- case 'triangle': radiusMultiplier = 3; break;
- case 'triangleDown': radiusMultiplier = 3; break;
- case 'star': radiusMultiplier = 4; break;
- }
-
- ctx.strokeStyle = this.selected ? this.color.highlight.border : this.hover ? this.color.hover.border : this.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx[shape](this.x, this.y, this.radius + radiusMultiplier * ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : 1.0) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(0.1 * this.width,ctx.lineWidth);
-
- ctx.fillStyle = this.selected ? this.color.highlight.background : this.hover ? this.color.hover.background : this.color.background;
- 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',true);
- }
- };
-
- 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;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - (textSize.width + 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, labelUnderNode) {
- if (text && this.fontSize * this.networkScale > this.fontDrawThreshold) {
- 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');
- var lineCount = lines.length;
- var fontSize = (this.fontSize + 4);
- var yLine = y + (1 - lineCount) / 2 * fontSize;
- if (labelUnderNode == true) {
- 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};
- }
- };
-
- /**
- * this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
- * there is a safety margin of 0.3 * width;
- *
- * @returns {boolean}
- */
- Node.prototype.inArea = function() {
- if (this.width !== undefined) {
- return (this.x + this.width *this.networkScaleInv >= this.canvasTopLeft.x &&
- this.x - this.width *this.networkScaleInv < this.canvasBottomRight.x &&
- this.y + this.height*this.networkScaleInv >= this.canvasTopLeft.y &&
- this.y - this.height*this.networkScaleInv < this.canvasBottomRight.y);
- }
- else {
- return true;
- }
- };
-
- /**
- * checks if the core of the node is in the display area, this is used for opening clusters around zoom
- * @returns {boolean}
- */
- Node.prototype.inView = function() {
- return (this.x >= this.canvasTopLeft.x &&
- this.x < this.canvasBottomRight.x &&
- this.y >= this.canvasTopLeft.y &&
- this.y < this.canvasBottomRight.y);
- };
-
- /**
- * This allows the zoom level of the network to influence the rendering
- * We store the inverted scale and the coordinates of the top left, and bottom right points of the canvas
- *
- * @param scale
- * @param canvasTopLeft
- * @param canvasBottomRight
- */
- Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
- this.networkScaleInv = 1.0/scale;
- this.networkScale = scale;
- this.canvasTopLeft = canvasTopLeft;
- this.canvasBottomRight = canvasBottomRight;
- };
-
-
- /**
- * This allows the zoom level of the network to influence the rendering
- *
- * @param scale
- */
- Node.prototype.setScale = function(scale) {
- this.networkScaleInv = 1.0/scale;
- this.networkScale = scale;
- };
-
-
-
- /**
- * set the velocity at 0. Is called when this node is contained in another during clustering
- */
- Node.prototype.clearVelocity = function() {
- this.vx = 0;
- this.vy = 0;
- };
-
-
- /**
- * Basic preservation of (kinectic) energy
- *
- * @param massBeforeClustering
- */
- Node.prototype.updateVelocity = function(massBeforeClustering) {
- var energyBefore = this.vx * this.vx * massBeforeClustering;
- //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
- this.vx = Math.sqrt(energyBefore/this.mass);
- energyBefore = this.vy * this.vy * massBeforeClustering;
- //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
- this.vy = Math.sqrt(energyBefore/this.mass);
- };
-
-
- /**
- * @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 {Network} network A Network object, used to find and edge to
- * nodes.
- * @param {Object} constants An object with default values for
- * example for the color
- */
- function Edge (properties, network, constants) {
- if (!network) {
- throw "No network provided";
- }
- this.network = network;
-
- // 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.widthSelectionMultiplier = constants.edges.widthSelectionMultiplier;
- this.widthSelected = this.width * this.widthSelectionMultiplier;
- this.hoverWidth = constants.edges.hoverWidth;
- this.value = undefined;
- this.length = constants.physics.springLength;
- this.customLength = false;
- this.selected = false;
- this.hover = false;
- this.smooth = constants.smoothCurves;
- this.arrowScaleFactor = constants.edges.arrowScaleFactor;
-
- this.from = null; // a node
- this.to = null; // a node
- this.via = null; // a temp node
-
- // we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
- // by storing the original information we can revert to the original connection when the cluser is opened.
- this.originalFromId = [];
- this.originalToId = [];
-
- 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.color = {color:constants.edges.color.color,
- highlight:constants.edges.color.highlight,
- hover:constants.edges.color.hover};
- this.widthFixed = false;
- this.lengthFixed = false;
-
- this.setProperties(properties, constants);
-
- this.controlNodesEnabled = false;
- this.controlNodes = {from:null, to:null, positions:{}};
- this.connectedNode = null;
- }
-
- /**
- * 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;
- this.fontFill = constants.edges.fontFill;
-
- 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.fontFill !== undefined) {this.fontFill = properties.fontFill;}
- }
-
- if (properties.title !== undefined) {this.title = properties.title;}
- if (properties.width !== undefined) {this.width = properties.width;}
- if (properties.widthSelectionMultiplier !== undefined)
- {this.widthSelectionMultiplier = properties.widthSelectionMultiplier;}
- if (properties.hoverWidth !== undefined) {this.hoverWidth = properties.hoverWidth;}
- if (properties.value !== undefined) {this.value = properties.value;}
- if (properties.length !== undefined) {this.length = properties.length;
- this.customLength = true;}
-
- // scale the arrow
- if (properties.arrowScaleFactor !== undefined) {this.arrowScaleFactor = properties.arrowScaleFactor;}
-
- // 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) {
- if (util.isString(properties.color)) {
- this.color.color = properties.color;
- this.color.highlight = properties.color;
- }
- else {
- if (properties.color.color !== undefined) {this.color.color = properties.color.color;}
- if (properties.color.highlight !== undefined) {this.color.highlight = properties.color.highlight;}
- if (properties.color.hover !== undefined) {this.color.hover = properties.color.hover;}
- }
- }
-
- // 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.widthSelected = this.width * this.widthSelectionMultiplier;
-
- // 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.network.nodes[this.fromId] || null;
- this.to = this.network.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 typeof this.title === "function" ? this.title() : 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) {
- if (this.connected) {
- 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 = this._getDistanceToEdge(xFrom, yFrom, xTo, yTo, xObj, yObj);
-
- return (dist < distMax);
- }
- else {
- return false
- }
- };
-
-
- /**
- * 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
- if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
- else {ctx.strokeStyle = this.color.color;}
- ctx.lineWidth = this._getLineWidth();
-
- if (this.from != this.to) {
- // draw line
- this._line(ctx);
-
- // draw label
- var point;
- if (this.label) {
- if (this.smooth == true) {
- var midpointX = 0.5*(0.5*(this.from.x + this.via.x) + 0.5*(this.to.x + this.via.x));
- var midpointY = 0.5*(0.5*(this.from.y + this.via.y) + 0.5*(this.to.y + this.via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- 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.selected == true) {
- return Math.min(this.widthSelected, this.widthMax)*this.networkScaleInv;
- }
- else {
- if (this.hover == true) {
- return Math.min(this.hoverWidth, this.widthMax)*this.networkScaleInv;
- }
- else {
- return this.width*this.networkScaleInv;
- }
- }
- };
-
- /**
- * 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);
- if (this.smooth == true) {
- ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
- }
- else {
- 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 = this.fontFill;
- 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
- if (this.selected == true) {ctx.strokeStyle = this.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.color.hover;}
- else {ctx.strokeStyle = this.color.color;}
-
- ctx.lineWidth = this._getLineWidth();
-
- // only firefox and chrome support this method, else we use the legacy one.
- if (ctx.mozDash !== undefined || ctx.setLineDash !== undefined) {
- ctx.beginPath();
- ctx.moveTo(this.from.x, this.from.y);
-
- // configure the dash pattern
- var pattern = [0];
- if (this.dash.length !== undefined && this.dash.gap !== undefined) {
- pattern = [this.dash.length,this.dash.gap];
- }
- else {
- pattern = [5,5];
- }
-
- // set dash settings for chrome or firefox
- if (typeof ctx.setLineDash !== 'undefined') { //Chrome
- ctx.setLineDash(pattern);
- ctx.lineDashOffset = 0;
-
- } else { //Firefox
- ctx.mozDash = pattern;
- ctx.mozDashOffset = 0;
- }
-
- // draw the line
- if (this.smooth == true) {
- ctx.quadraticCurveTo(this.via.x,this.via.y,this.to.x, this.to.y);
- }
- else {
- ctx.lineTo(this.to.x, this.to.y);
- }
- ctx.stroke();
-
- // restore the dash settings.
- if (typeof ctx.setLineDash !== 'undefined') { //Chrome
- ctx.setLineDash([0]);
- ctx.lineDashOffset = 0;
-
- } else { //Firefox
- ctx.mozDash = [0];
- ctx.mozDashOffset = 0;
- }
- }
- else { // unsupporting smooth lines
- // 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;
- if (this.smooth == true) {
- var midpointX = 0.5*(0.5*(this.from.x + this.via.x) + 0.5*(this.to.x + this.via.x));
- var midpointY = 0.5*(0.5*(this.from.y + this.via.y) + 0.5*(this.to.y + this.via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- 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
- if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.color.hover; ctx.fillStyle = this.color.hover;}
- else {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
- ctx.lineWidth = this._getLineWidth();
-
- if (this.from != this.to) {
- // draw line
- this._line(ctx);
-
- var angle = Math.atan2((this.to.y - this.from.y), (this.to.x - this.from.x));
- var length = (10 + 5 * this.width) * this.arrowScaleFactor;
- // draw an arrow halfway the line
- if (this.smooth == true) {
- var midpointX = 0.5*(0.5*(this.from.x + this.via.x) + 0.5*(this.to.x + this.via.x));
- var midpointY = 0.5*(0.5*(this.from.y + this.via.y) + 0.5*(this.to.y + this.via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- point = this._pointOnLine(0.5);
- }
-
- ctx.arrow(point.x, point.y, angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- this._label(ctx, this.label, point.x, point.y);
- }
- }
- else {
- // draw circle
- var x, y;
- var radius = 0.25 * Math.max(100,this.length);
- var node = this.from;
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width * 0.5;
- y = node.y - radius;
- }
- else {
- x = node.x + radius;
- y = node.y - node.height * 0.5;
- }
- this._circle(ctx, x, y, radius);
-
- // draw all arrows
- var angle = 0.2 * Math.PI;
- var length = (10 + 5 * this.width) * this.arrowScaleFactor;
- 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
- if (this.selected == true) {ctx.strokeStyle = this.color.highlight; ctx.fillStyle = this.color.highlight;}
- else if (this.hover == true) {ctx.strokeStyle = this.color.hover; ctx.fillStyle = this.color.hover;}
- else {ctx.strokeStyle = this.color.color; ctx.fillStyle = this.color.color;}
-
- ctx.lineWidth = this._getLineWidth();
-
- var angle, length;
- //draw a line
- if (this.from != this.to) {
- 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 edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
-
- var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
- var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
- var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
- var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
-
- if (this.smooth == true) {
- angle = Math.atan2((this.to.y - this.via.y), (this.to.x - this.via.x));
- dx = (this.to.x - this.via.x);
- dy = (this.to.y - this.via.y);
- edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- }
- var toBorderDist = this.to.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
-
- var xTo,yTo;
- if (this.smooth == true) {
- xTo = (1 - toBorderPoint) * this.via.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.via.y + toBorderPoint * this.to.y;
- }
- else {
- xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
- }
-
- ctx.beginPath();
- ctx.moveTo(xFrom,yFrom);
- if (this.smooth == true) {
- ctx.quadraticCurveTo(this.via.x,this.via.y,xTo, yTo);
- }
- else {
- ctx.lineTo(xTo, yTo);
- }
- ctx.stroke();
-
- // draw arrow at the end of the line
- length = (10 + 5 * this.width) * this.arrowScaleFactor;
- ctx.arrow(xTo, yTo, angle, length);
- ctx.fill();
- ctx.stroke();
-
- // draw label
- if (this.label) {
- var point;
- if (this.smooth == true) {
- var midpointX = 0.5*(0.5*(this.from.x + this.via.x) + 0.5*(this.to.x + this.via.x));
- var midpointY = 0.5*(0.5*(this.from.y + this.via.y) + 0.5*(this.to.y + this.via.y));
- point = {x:midpointX, y:midpointY};
- }
- else {
- 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 = 0.25 * Math.max(100,this.length);
- if (!node.width) {
- node.resize(ctx);
- }
- if (node.width > node.height) {
- x = node.x + node.width * 0.5;
- 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 * 0.5;
- arrow = {
- x: node.x,
- y: y,
- angle: 0.6 * Math.PI
- };
- }
- ctx.beginPath();
- // 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
- var length = (10 + 5 * this.width) * this.arrowScaleFactor;
- 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.prototype._getDistanceToEdge = function (x1,y1, x2,y2, x3,y3) { // x3,y3 is the point
- if (this.from != this.to) {
- if (this.smooth == true) {
- var minDistance = 1e9;
- var i,t,x,y,dx,dy;
- for (i = 0; i < 10; i++) {
- t = 0.1*i;
- x = Math.pow(1-t,2)*x1 + (2*t*(1 - t))*this.via.x + Math.pow(t,2)*x2;
- y = Math.pow(1-t,2)*y1 + (2*t*(1 - t))*this.via.y + Math.pow(t,2)*y2;
- dx = Math.abs(x3-x);
- dy = Math.abs(y3-y);
- minDistance = Math.min(minDistance,Math.sqrt(dx*dx + dy*dy));
- }
- return minDistance
- }
- else {
- 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);
- }
- }
- else {
- var x, y, dx, dy;
- 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;
- }
- dx = x - x3;
- dy = y - y3;
- return Math.abs(Math.sqrt(dx*dx + dy*dy) - radius);
- }
- };
-
-
-
- /**
- * This allows the zoom level of the network to influence the rendering
- *
- * @param scale
- */
- Edge.prototype.setScale = function(scale) {
- this.networkScaleInv = 1.0/scale;
- };
-
-
- Edge.prototype.select = function() {
- this.selected = true;
- };
-
- Edge.prototype.unselect = function() {
- this.selected = false;
- };
-
- Edge.prototype.positionBezierNode = function() {
- if (this.via !== null) {
- this.via.x = 0.5 * (this.from.x + this.to.x);
- this.via.y = 0.5 * (this.from.y + this.to.y);
- }
- };
-
- /**
- * This function draws the control nodes for the manipulator. In order to enable this, only set the this.controlNodesEnabled to true.
- * @param ctx
- */
- Edge.prototype._drawControlNodes = function(ctx) {
- if (this.controlNodesEnabled == true) {
- if (this.controlNodes.from === null && this.controlNodes.to === null) {
- var nodeIdFrom = "edgeIdFrom:".concat(this.id);
- var nodeIdTo = "edgeIdTo:".concat(this.id);
- var constants = {
- nodes:{group:'', radius:8},
- physics:{damping:0},
- clustering: {maxNodeSizeIncrements: 0 ,nodeScaling: {width:0, height: 0, radius:0}}
- };
- this.controlNodes.from = new Node(
- {id:nodeIdFrom,
- shape:'dot',
- color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
- },{},{},constants);
- this.controlNodes.to = new Node(
- {id:nodeIdTo,
- shape:'dot',
- color:{background:'#ff4e00', border:'#3c3c3c', highlight: {background:'#07f968'}}
- },{},{},constants);
- }
-
- if (this.controlNodes.from.selected == false && this.controlNodes.to.selected == false) {
- this.controlNodes.positions = this.getControlNodePositions(ctx);
- this.controlNodes.from.x = this.controlNodes.positions.from.x;
- this.controlNodes.from.y = this.controlNodes.positions.from.y;
- this.controlNodes.to.x = this.controlNodes.positions.to.x;
- this.controlNodes.to.y = this.controlNodes.positions.to.y;
- }
-
- this.controlNodes.from.draw(ctx);
- this.controlNodes.to.draw(ctx);
- }
- else {
- this.controlNodes = {from:null, to:null, positions:{}};
- }
- }
-
- /**
- * Enable control nodes.
- * @private
- */
- Edge.prototype._enableControlNodes = function() {
- this.controlNodesEnabled = true;
- }
-
- /**
- * disable control nodes
- * @private
- */
- Edge.prototype._disableControlNodes = function() {
- this.controlNodesEnabled = false;
- }
-
- /**
- * This checks if one of the control nodes is selected and if so, returns the control node object. Else it returns null.
- * @param x
- * @param y
- * @returns {null}
- * @private
- */
- Edge.prototype._getSelectedControlNode = function(x,y) {
- var positions = this.controlNodes.positions;
- var fromDistance = Math.sqrt(Math.pow(x - positions.from.x,2) + Math.pow(y - positions.from.y,2));
- var toDistance = Math.sqrt(Math.pow(x - positions.to.x ,2) + Math.pow(y - positions.to.y ,2));
-
- if (fromDistance < 15) {
- this.connectedNode = this.from;
- this.from = this.controlNodes.from;
- return this.controlNodes.from;
- }
- else if (toDistance < 15) {
- this.connectedNode = this.to;
- this.to = this.controlNodes.to;
- return this.controlNodes.to;
- }
- else {
- return null;
- }
- }
-
-
- /**
- * this resets the control nodes to their original position.
- * @private
- */
- Edge.prototype._restoreControlNodes = function() {
- if (this.controlNodes.from.selected == true) {
- this.from = this.connectedNode;
- this.connectedNode = null;
- this.controlNodes.from.unselect();
- }
- if (this.controlNodes.to.selected == true) {
- this.to = this.connectedNode;
- this.connectedNode = null;
- this.controlNodes.to.unselect();
- }
- }
-
- /**
- * this calculates the position of the control nodes on the edges of the parent nodes.
- *
- * @param ctx
- * @returns {{from: {x: number, y: number}, to: {x: *, y: *}}}
- */
- Edge.prototype.getControlNodePositions = function(ctx) {
- var 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 edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- var fromBorderDist = this.from.distanceToBorder(ctx, angle + Math.PI);
- var fromBorderPoint = (edgeSegmentLength - fromBorderDist) / edgeSegmentLength;
- var xFrom = (fromBorderPoint) * this.from.x + (1 - fromBorderPoint) * this.to.x;
- var yFrom = (fromBorderPoint) * this.from.y + (1 - fromBorderPoint) * this.to.y;
-
-
- if (this.smooth == true) {
- angle = Math.atan2((this.to.y - this.via.y), (this.to.x - this.via.x));
- dx = (this.to.x - this.via.x);
- dy = (this.to.y - this.via.y);
- edgeSegmentLength = Math.sqrt(dx * dx + dy * dy);
- }
- var toBorderDist = this.to.distanceToBorder(ctx, angle);
- var toBorderPoint = (edgeSegmentLength - toBorderDist) / edgeSegmentLength;
-
- var xTo,yTo;
- if (this.smooth == true) {
- xTo = (1 - toBorderPoint) * this.via.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.via.y + toBorderPoint * this.to.y;
- }
- else {
- xTo = (1 - toBorderPoint) * this.from.x + toBorderPoint * this.to.x;
- yTo = (1 - toBorderPoint) * this.from.y + toBorderPoint * this.to.y;
- }
-
- return {from:{x:xFrom,y:yFrom},to:{x:xTo,y:yTo}};
- }
-
- /**
- * 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]
- * @param {Object} [style] An object containing borderColor,
- * backgroundColor, etc.
- */
- function Popup(container, x, y, text, style) {
- if (container) {
- this.container = container;
- }
- else {
- this.container = document.body;
- }
-
- // x, y and text are optional, see if a style object was passed in their place
- if (style === undefined) {
- if (typeof x === "object") {
- style = x;
- x = undefined;
- } else if (typeof text === "object") {
- style = text;
- text = undefined;
- } else {
- // for backwards compatibility, in case clients other than Network are creating Popup directly
- style = {
- fontColor: 'black',
- fontSize: 14, // px
- fontFace: 'verdana',
- color: {
- border: '#666',
- background: '#FFFFC6'
- }
- }
- }
- }
-
- 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 styleAttr = this.frame.style;
- styleAttr.position = "absolute";
- styleAttr.visibility = "hidden";
- styleAttr.border = "1px solid " + style.color.border;
- styleAttr.color = style.fontColor;
- styleAttr.fontSize = style.fontSize + "px";
- styleAttr.fontFamily = style.fontFace;
- styleAttr.padding = this.padding + "px";
- styleAttr.backgroundColor = style.color.background;
- styleAttr.borderRadius = "3px";
- styleAttr.MozBorderRadius = "3px";
- styleAttr.WebkitBorderRadius = "3px";
- styleAttr.boxShadow = "3px 3px 10px rgba(128, 128, 128, 0.5)";
- styleAttr.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.
- */
- function Groups() {
- 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 = util.parseColor(style.color);
- }
- return style;
- };
-
- /**
- * @class Images
- * This class loads images and keeps them stored.
- */
- function Images() {
- 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;
- };
-
- /**
- * Created by Alex on 2/6/14.
- */
-
-
- var physicsMixin = {
-
- /**
- * Toggling barnes Hut calculation on and off.
- *
- * @private
- */
- _toggleBarnesHut: function () {
- this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
- this._loadSelectedForceSolver();
- this.moving = true;
- this.start();
- },
-
-
- /**
- * This loads the node force solver based on the barnes hut or repulsion algorithm
- *
- * @private
- */
- _loadSelectedForceSolver: function () {
- // this overloads the this._calculateNodeForces
- if (this.constants.physics.barnesHut.enabled == true) {
- this._clearMixin(repulsionMixin);
- this._clearMixin(hierarchalRepulsionMixin);
-
- this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
- this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
- this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
- this.constants.physics.damping = this.constants.physics.barnesHut.damping;
-
- this._loadMixin(barnesHutMixin);
- }
- else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
- this._clearMixin(barnesHutMixin);
- this._clearMixin(repulsionMixin);
-
- this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
- this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
- this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
- this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
-
- this._loadMixin(hierarchalRepulsionMixin);
- }
- else {
- this._clearMixin(barnesHutMixin);
- this._clearMixin(hierarchalRepulsionMixin);
- this.barnesHutTree = undefined;
-
- this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
- this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
- this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
- this.constants.physics.damping = this.constants.physics.repulsion.damping;
-
- this._loadMixin(repulsionMixin);
- }
- },
-
- /**
- * Before calculating the forces, we check if we need to cluster to keep up performance and we check
- * if there is more than one node. If it is just one node, we dont calculate anything.
- *
- * @private
- */
- _initializeForceCalculation: function () {
- // stop calculation if there is only one node
- if (this.nodeIndices.length == 1) {
- this.nodes[this.nodeIndices[0]]._setForce(0, 0);
- }
- else {
- // if there are too many nodes on screen, we cluster without repositioning
- if (this.nodeIndices.length > this.constants.clustering.clusterThreshold && this.constants.clustering.enabled == true) {
- this.clusterToFit(this.constants.clustering.reduceToNodes, false);
- }
-
- // we now start the force calculation
- this._calculateForces();
- }
- },
-
-
- /**
- * Calculate the external forces acting on the nodes
- * Forces are caused by: edges, repulsing forces between nodes, gravity
- * @private
- */
- _calculateForces: function () {
- // Gravity is required to keep separated groups from floating off
- // the forces are reset to zero in this loop by using _setForce instead
- // of _addForce
-
- this._calculateGravitationalForces();
- this._calculateNodeForces();
-
- if (this.constants.smoothCurves == true) {
- this._calculateSpringForcesWithSupport();
- }
- else {
- if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
- this._calculateHierarchicalSpringForces();
- }
- else {
- this._calculateSpringForces();
- }
- }
- },
-
-
- /**
- * Smooth curves are created by adding invisible nodes in the center of the edges. These nodes are also
- * handled in the calculateForces function. We then use a quadratic curve with the center node as control.
- * This function joins the datanodes and invisible (called support) nodes into one object.
- * We do this so we do not contaminate this.nodes with the support nodes.
- *
- * @private
- */
- _updateCalculationNodes: function () {
- if (this.constants.smoothCurves == true) {
- this.calculationNodes = {};
- this.calculationNodeIndices = [];
-
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.calculationNodes[nodeId] = this.nodes[nodeId];
- }
- }
- var supportNodes = this.sectors['support']['nodes'];
- for (var supportNodeId in supportNodes) {
- if (supportNodes.hasOwnProperty(supportNodeId)) {
- if (this.edges.hasOwnProperty(supportNodes[supportNodeId].parentEdgeId)) {
- this.calculationNodes[supportNodeId] = supportNodes[supportNodeId];
- }
- else {
- supportNodes[supportNodeId]._setForce(0, 0);
- }
- }
- }
-
- for (var idx in this.calculationNodes) {
- if (this.calculationNodes.hasOwnProperty(idx)) {
- this.calculationNodeIndices.push(idx);
- }
- }
- }
- else {
- this.calculationNodes = this.nodes;
- this.calculationNodeIndices = this.nodeIndices;
- }
- },
-
-
- /**
- * this function applies the central gravity effect to keep groups from floating off
- *
- * @private
- */
- _calculateGravitationalForces: function () {
- var dx, dy, distance, node, i;
- var nodes = this.calculationNodes;
- var gravity = this.constants.physics.centralGravity;
- var gravityForce = 0;
-
- for (i = 0; i < this.calculationNodeIndices.length; i++) {
- node = nodes[this.calculationNodeIndices[i]];
- node.damping = this.constants.physics.damping; // possibly add function to alter damping properties of clusters.
- // gravity does not apply when we are in a pocket sector
- if (this._sector() == "default" && gravity != 0) {
- dx = -node.x;
- dy = -node.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- gravityForce = (distance == 0) ? 0 : (gravity / distance);
- node.fx = dx * gravityForce;
- node.fy = dy * gravityForce;
- }
- else {
- node.fx = 0;
- node.fy = 0;
- }
- }
- },
-
-
-
-
- /**
- * this function calculates the effects of the springs in the case of unsmooth curves.
- *
- * @private
- */
- _calculateSpringForces: function () {
- var edgeLength, edge, edgeId;
- var dx, dy, fx, fy, springForce, distance;
- var edges = this.edges;
-
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
- // this implies that the edges between big clusters are longer
- edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
-
- dx = (edge.from.x - edge.to.x);
- dy = (edge.from.y - edge.to.y);
- distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance == 0) {
- distance = 0.01;
- }
-
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
-
- fx = dx * springForce;
- fy = dy * springForce;
-
- edge.from.fx += fx;
- edge.from.fy += fy;
- edge.to.fx -= fx;
- edge.to.fy -= fy;
- }
- }
- }
- }
- },
-
-
-
-
- /**
- * This function calculates the springforces on the nodes, accounting for the support nodes.
- *
- * @private
- */
- _calculateSpringForcesWithSupport: function () {
- var edgeLength, edge, edgeId, combinedClusterSize;
- var edges = this.edges;
-
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- if (edge.via != null) {
- var node1 = edge.to;
- var node2 = edge.via;
- var node3 = edge.from;
-
- edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
-
- combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
-
- // this implies that the edges between big clusters are longer
- edgeLength += combinedClusterSize * this.constants.clustering.edgeGrowth;
- this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
- this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
- }
- }
- }
- }
- }
- },
-
-
- /**
- * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
- *
- * @param node1
- * @param node2
- * @param edgeLength
- * @private
- */
- _calculateSpringForce: function (node1, node2, edgeLength) {
- var dx, dy, fx, fy, springForce, distance;
-
- dx = (node1.x - node2.x);
- dy = (node1.y - node2.y);
- distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance == 0) {
- distance = 0.01;
- }
-
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
-
- fx = dx * springForce;
- fy = dy * springForce;
-
- node1.fx += fx;
- node1.fy += fy;
- node2.fx -= fx;
- node2.fy -= fy;
- },
-
-
- /**
- * Load the HTML for the physics config and bind it
- * @private
- */
- _loadPhysicsConfiguration: function () {
- if (this.physicsConfiguration === undefined) {
- this.backupConstants = {};
- util.deepExtend(this.backupConstants,this.constants);
-
- var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
- this.physicsConfiguration = document.createElement('div');
- this.physicsConfiguration.className = "PhysicsConfiguration";
- this.physicsConfiguration.innerHTML = '' +
- '<table><tr><td><b>Simulation Mode:</b></td></tr>' +
- '<tr>' +
- '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod1" value="BH" checked="checked">Barnes Hut</td>' +
- '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod2" value="R">Repulsion</td>' +
- '<td width="120px"><input type="radio" name="graph_physicsMethod" id="graph_physicsMethod3" value="H">Hierarchical</td>' +
- '</tr>' +
- '</table>' +
- '<table id="graph_BH_table" style="display:none">' +
- '<tr><td><b>Barnes Hut</b></td></tr>' +
- '<tr>' +
- '<td width="150px">gravitationalConstant</td><td>0</td><td><input type="range" min="0" max="20000" value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" step="25" style="width:300px" id="graph_BH_gc"></td><td width="50px">-20000</td><td><input value="' + (-1 * this.constants.physics.barnesHut.gravitationalConstant) + '" id="graph_BH_gc_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this.constants.physics.barnesHut.centralGravity + '" step="0.05" style="width:300px" id="graph_BH_cg"></td><td>3</td><td><input value="' + this.constants.physics.barnesHut.centralGravity + '" id="graph_BH_cg_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.barnesHut.springLength + '" step="1" style="width:300px" id="graph_BH_sl"></td><td>500</td><td><input value="' + this.constants.physics.barnesHut.springLength + '" id="graph_BH_sl_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.barnesHut.springConstant + '" step="0.001" style="width:300px" id="graph_BH_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.barnesHut.springConstant + '" id="graph_BH_sc_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.barnesHut.damping + '" step="0.005" style="width:300px" id="graph_BH_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.barnesHut.damping + '" id="graph_BH_damp_value" style="width:60px"></td>' +
- '</tr>' +
- '</table>' +
- '<table id="graph_R_table" style="display:none">' +
- '<tr><td><b>Repulsion</b></td></tr>' +
- '<tr>' +
- '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.repulsion.nodeDistance + '" step="1" style="width:300px" id="graph_R_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.repulsion.nodeDistance + '" id="graph_R_nd_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this.constants.physics.repulsion.centralGravity + '" step="0.05" style="width:300px" id="graph_R_cg"></td><td>3</td><td><input value="' + this.constants.physics.repulsion.centralGravity + '" id="graph_R_cg_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.repulsion.springLength + '" step="1" style="width:300px" id="graph_R_sl"></td><td>500</td><td><input value="' + this.constants.physics.repulsion.springLength + '" id="graph_R_sl_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.repulsion.springConstant + '" step="0.001" style="width:300px" id="graph_R_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.repulsion.springConstant + '" id="graph_R_sc_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.repulsion.damping + '" step="0.005" style="width:300px" id="graph_R_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.repulsion.damping + '" id="graph_R_damp_value" style="width:60px"></td>' +
- '</tr>' +
- '</table>' +
- '<table id="graph_H_table" style="display:none">' +
- '<tr><td width="150"><b>Hierarchical</b></td></tr>' +
- '<tr>' +
- '<td width="150px">nodeDistance</td><td>0</td><td><input type="range" min="0" max="300" value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" step="1" style="width:300px" id="graph_H_nd"></td><td width="50px">300</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.nodeDistance + '" id="graph_H_nd_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">centralGravity</td><td>0</td><td><input type="range" min="0" max="3" value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" step="0.05" style="width:300px" id="graph_H_cg"></td><td>3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.centralGravity + '" id="graph_H_cg_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">springLength</td><td>0</td><td><input type="range" min="0" max="500" value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" step="1" style="width:300px" id="graph_H_sl"></td><td>500</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springLength + '" id="graph_H_sl_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">springConstant</td><td>0</td><td><input type="range" min="0" max="0.5" value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" step="0.001" style="width:300px" id="graph_H_sc"></td><td>0.5</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.springConstant + '" id="graph_H_sc_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">damping</td><td>0</td><td><input type="range" min="0" max="0.3" value="' + this.constants.physics.hierarchicalRepulsion.damping + '" step="0.005" style="width:300px" id="graph_H_damp"></td><td>0.3</td><td><input value="' + this.constants.physics.hierarchicalRepulsion.damping + '" id="graph_H_damp_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">direction</td><td>1</td><td><input type="range" min="0" max="3" value="' + hierarchicalLayoutDirections.indexOf(this.constants.hierarchicalLayout.direction) + '" step="1" style="width:300px" id="graph_H_direction"></td><td>4</td><td><input value="' + this.constants.hierarchicalLayout.direction + '" id="graph_H_direction_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">levelSeparation</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.levelSeparation + '" step="1" style="width:300px" id="graph_H_levsep"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.levelSeparation + '" id="graph_H_levsep_value" style="width:60px"></td>' +
- '</tr>' +
- '<tr>' +
- '<td width="150px">nodeSpacing</td><td>1</td><td><input type="range" min="0" max="500" value="' + this.constants.hierarchicalLayout.nodeSpacing + '" step="1" style="width:300px" id="graph_H_nspac"></td><td>500</td><td><input value="' + this.constants.hierarchicalLayout.nodeSpacing + '" id="graph_H_nspac_value" style="width:60px"></td>' +
- '</tr>' +
- '</table>' +
- '<table><tr><td><b>Options:</b></td></tr>' +
- '<tr>' +
- '<td width="180px"><input type="button" id="graph_toggleSmooth" value="Toggle smoothCurves" style="width:150px"></td>' +
- '<td width="180px"><input type="button" id="graph_repositionNodes" value="Reinitialize" style="width:150px"></td>' +
- '<td width="180px"><input type="button" id="graph_generateOptions" value="Generate Options" style="width:150px"></td>' +
- '</tr>' +
- '</table>'
- this.containerElement.parentElement.insertBefore(this.physicsConfiguration, this.containerElement);
- this.optionsDiv = document.createElement("div");
- this.optionsDiv.style.fontSize = "14px";
- this.optionsDiv.style.fontFamily = "verdana";
- this.containerElement.parentElement.insertBefore(this.optionsDiv, this.containerElement);
-
- var rangeElement;
- rangeElement = document.getElementById('graph_BH_gc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_gc', -1, "physics_barnesHut_gravitationalConstant");
- rangeElement = document.getElementById('graph_BH_cg');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_cg', 1, "physics_centralGravity");
- rangeElement = document.getElementById('graph_BH_sc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sc', 1, "physics_springConstant");
- rangeElement = document.getElementById('graph_BH_sl');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sl', 1, "physics_springLength");
- rangeElement = document.getElementById('graph_BH_damp');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_damp', 1, "physics_damping");
-
- rangeElement = document.getElementById('graph_R_nd');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_nd', 1, "physics_repulsion_nodeDistance");
- rangeElement = document.getElementById('graph_R_cg');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_cg', 1, "physics_centralGravity");
- rangeElement = document.getElementById('graph_R_sc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sc', 1, "physics_springConstant");
- rangeElement = document.getElementById('graph_R_sl');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sl', 1, "physics_springLength");
- rangeElement = document.getElementById('graph_R_damp');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_damp', 1, "physics_damping");
-
- rangeElement = document.getElementById('graph_H_nd');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
- rangeElement = document.getElementById('graph_H_cg');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_cg', 1, "physics_centralGravity");
- rangeElement = document.getElementById('graph_H_sc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sc', 1, "physics_springConstant");
- rangeElement = document.getElementById('graph_H_sl');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sl', 1, "physics_springLength");
- rangeElement = document.getElementById('graph_H_damp');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_damp', 1, "physics_damping");
- rangeElement = document.getElementById('graph_H_direction');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_direction', hierarchicalLayoutDirections, "hierarchicalLayout_direction");
- rangeElement = document.getElementById('graph_H_levsep');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_levsep', 1, "hierarchicalLayout_levelSeparation");
- rangeElement = document.getElementById('graph_H_nspac');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nspac', 1, "hierarchicalLayout_nodeSpacing");
-
- var radioButton1 = document.getElementById("graph_physicsMethod1");
- var radioButton2 = document.getElementById("graph_physicsMethod2");
- var radioButton3 = document.getElementById("graph_physicsMethod3");
- radioButton2.checked = true;
- if (this.constants.physics.barnesHut.enabled) {
- radioButton1.checked = true;
- }
- if (this.constants.hierarchicalLayout.enabled) {
- radioButton3.checked = true;
- }
-
- var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
- var graph_repositionNodes = document.getElementById("graph_repositionNodes");
- var graph_generateOptions = document.getElementById("graph_generateOptions");
-
- graph_toggleSmooth.onclick = graphToggleSmoothCurves.bind(this);
- graph_repositionNodes.onclick = graphRepositionNodes.bind(this);
- graph_generateOptions.onclick = graphGenerateOptions.bind(this);
- if (this.constants.smoothCurves == true) {
- graph_toggleSmooth.style.background = "#A4FF56";
- }
- else {
- graph_toggleSmooth.style.background = "#FF8532";
- }
-
-
- switchConfigurations.apply(this);
-
- radioButton1.onchange = switchConfigurations.bind(this);
- radioButton2.onchange = switchConfigurations.bind(this);
- radioButton3.onchange = switchConfigurations.bind(this);
- }
- },
-
- /**
- * This overwrites the this.constants.
- *
- * @param constantsVariableName
- * @param value
- * @private
- */
- _overWriteGraphConstants: function (constantsVariableName, value) {
- var nameArray = constantsVariableName.split("_");
- if (nameArray.length == 1) {
- this.constants[nameArray[0]] = value;
- }
- else if (nameArray.length == 2) {
- this.constants[nameArray[0]][nameArray[1]] = value;
- }
- else if (nameArray.length == 3) {
- this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
- }
- }
- };
-
- /**
- * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
- */
- function graphToggleSmoothCurves () {
- this.constants.smoothCurves = !this.constants.smoothCurves;
- var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
- if (this.constants.smoothCurves == true) {graph_toggleSmooth.style.background = "#A4FF56";}
- else {graph_toggleSmooth.style.background = "#FF8532";}
-
- this._configureSmoothCurves(false);
- };
-
- /**
- * this function is used to scramble the nodes
- *
- */
- function graphRepositionNodes () {
- for (var nodeId in this.calculationNodes) {
- if (this.calculationNodes.hasOwnProperty(nodeId)) {
- this.calculationNodes[nodeId].vx = 0; this.calculationNodes[nodeId].vy = 0;
- this.calculationNodes[nodeId].fx = 0; this.calculationNodes[nodeId].fy = 0;
- }
- }
- if (this.constants.hierarchicalLayout.enabled == true) {
- this._setupHierarchicalLayout();
- }
- else {
- this.repositionNodes();
- }
- this.moving = true;
- this.start();
- };
-
- /**
- * this is used to generate an options file from the playing with physics system.
- */
- function graphGenerateOptions () {
- var options = "No options are required, default values used.";
- var optionsSpecific = [];
- var radioButton1 = document.getElementById("graph_physicsMethod1");
- var radioButton2 = document.getElementById("graph_physicsMethod2");
- if (radioButton1.checked == true) {
- if (this.constants.physics.barnesHut.gravitationalConstant != this.backupConstants.physics.barnesHut.gravitationalConstant) {optionsSpecific.push("gravitationalConstant: " + this.constants.physics.barnesHut.gravitationalConstant);}
- if (this.constants.physics.centralGravity != this.backupConstants.physics.barnesHut.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
- if (this.constants.physics.springLength != this.backupConstants.physics.barnesHut.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
- if (this.constants.physics.springConstant != this.backupConstants.physics.barnesHut.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
- if (this.constants.physics.damping != this.backupConstants.physics.barnesHut.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
- if (optionsSpecific.length != 0) {
- options = "var options = {";
- options += "physics: {barnesHut: {";
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", "
- }
- }
- options += '}}'
- }
- if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
- if (optionsSpecific.length == 0) {options = "var options = {";}
- else {options += ", "}
- options += "smoothCurves: " + this.constants.smoothCurves;
- }
- if (options != "No options are required, default values used.") {
- options += '};'
- }
- }
- else if (radioButton2.checked == true) {
- options = "var options = {";
- options += "physics: {barnesHut: {enabled: false}";
- if (this.constants.physics.repulsion.nodeDistance != this.backupConstants.physics.repulsion.nodeDistance) {optionsSpecific.push("nodeDistance: " + this.constants.physics.repulsion.nodeDistance);}
- if (this.constants.physics.centralGravity != this.backupConstants.physics.repulsion.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
- if (this.constants.physics.springLength != this.backupConstants.physics.repulsion.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
- if (this.constants.physics.springConstant != this.backupConstants.physics.repulsion.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
- if (this.constants.physics.damping != this.backupConstants.physics.repulsion.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
- if (optionsSpecific.length != 0) {
- options += ", repulsion: {";
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", "
- }
- }
- options += '}}'
- }
- if (optionsSpecific.length == 0) {options += "}"}
- if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
- options += ", smoothCurves: " + this.constants.smoothCurves;
- }
- options += '};'
- }
- else {
- options = "var options = {";
- if (this.constants.physics.hierarchicalRepulsion.nodeDistance != this.backupConstants.physics.hierarchicalRepulsion.nodeDistance) {optionsSpecific.push("nodeDistance: " + this.constants.physics.hierarchicalRepulsion.nodeDistance);}
- if (this.constants.physics.centralGravity != this.backupConstants.physics.hierarchicalRepulsion.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
- if (this.constants.physics.springLength != this.backupConstants.physics.hierarchicalRepulsion.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
- if (this.constants.physics.springConstant != this.backupConstants.physics.hierarchicalRepulsion.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
- if (this.constants.physics.damping != this.backupConstants.physics.hierarchicalRepulsion.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
- if (optionsSpecific.length != 0) {
- options += "physics: {hierarchicalRepulsion: {";
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", ";
- }
- }
- options += '}},';
- }
- options += 'hierarchicalLayout: {';
- optionsSpecific = [];
- if (this.constants.hierarchicalLayout.direction != this.backupConstants.hierarchicalLayout.direction) {optionsSpecific.push("direction: " + this.constants.hierarchicalLayout.direction);}
- if (Math.abs(this.constants.hierarchicalLayout.levelSeparation) != this.backupConstants.hierarchicalLayout.levelSeparation) {optionsSpecific.push("levelSeparation: " + this.constants.hierarchicalLayout.levelSeparation);}
- if (this.constants.hierarchicalLayout.nodeSpacing != this.backupConstants.hierarchicalLayout.nodeSpacing) {optionsSpecific.push("nodeSpacing: " + this.constants.hierarchicalLayout.nodeSpacing);}
- if (optionsSpecific.length != 0) {
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", "
- }
- }
- options += '}'
- }
- else {
- options += "enabled:true}";
- }
- options += '};'
- }
-
-
- this.optionsDiv.innerHTML = options;
-
- };
-
- /**
- * this is used to switch between barnesHut, repulsion and hierarchical.
- *
- */
- function switchConfigurations () {
- var ids = ["graph_BH_table", "graph_R_table", "graph_H_table"];
- var radioButton = document.querySelector('input[name="graph_physicsMethod"]:checked').value;
- var tableId = "graph_" + radioButton + "_table";
- var table = document.getElementById(tableId);
- table.style.display = "block";
- for (var i = 0; i < ids.length; i++) {
- if (ids[i] != tableId) {
- table = document.getElementById(ids[i]);
- table.style.display = "none";
- }
- }
- this._restoreNodes();
- if (radioButton == "R") {
- this.constants.hierarchicalLayout.enabled = false;
- this.constants.physics.hierarchicalRepulsion.enabled = false;
- this.constants.physics.barnesHut.enabled = false;
- }
- else if (radioButton == "H") {
- if (this.constants.hierarchicalLayout.enabled == false) {
- this.constants.hierarchicalLayout.enabled = true;
- this.constants.physics.hierarchicalRepulsion.enabled = true;
- this.constants.physics.barnesHut.enabled = false;
- this._setupHierarchicalLayout();
- }
- }
- else {
- this.constants.hierarchicalLayout.enabled = false;
- this.constants.physics.hierarchicalRepulsion.enabled = false;
- this.constants.physics.barnesHut.enabled = true;
- }
- this._loadSelectedForceSolver();
- var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
- if (this.constants.smoothCurves == true) {graph_toggleSmooth.style.background = "#A4FF56";}
- else {graph_toggleSmooth.style.background = "#FF8532";}
- this.moving = true;
- this.start();
-
- }
-
-
- /**
- * this generates the ranges depending on the iniital values.
- *
- * @param id
- * @param map
- * @param constantsVariableName
- */
- function showValueOfRange (id,map,constantsVariableName) {
- var valueId = id + "_value";
- var rangeValue = document.getElementById(id).value;
-
- if (map instanceof Array) {
- document.getElementById(valueId).value = map[parseInt(rangeValue)];
- this._overWriteGraphConstants(constantsVariableName,map[parseInt(rangeValue)]);
- }
- else {
- document.getElementById(valueId).value = parseInt(map) * parseFloat(rangeValue);
- this._overWriteGraphConstants(constantsVariableName, parseInt(map) * parseFloat(rangeValue));
- }
-
- if (constantsVariableName == "hierarchicalLayout_direction" ||
- constantsVariableName == "hierarchicalLayout_levelSeparation" ||
- constantsVariableName == "hierarchicalLayout_nodeSpacing") {
- this._setupHierarchicalLayout();
- }
- this.moving = true;
- this.start();
- };
-
-
-
- /**
- * Created by Alex on 2/10/14.
- */
-
- var hierarchalRepulsionMixin = {
-
-
- /**
- * Calculate the forces the nodes apply on eachother based on a repulsion field.
- * This field is linearly approximated.
- *
- * @private
- */
- _calculateNodeForces: function () {
- var dx, dy, distance, fx, fy, combinedClusterSize,
- repulsingForce, node1, node2, i, j;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
-
- // approximation constants
- var b = 5;
- var a_base = 0.5 * -b;
-
-
- // repulsing forces between nodes
- var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
- var minimumDistance = nodeDistance;
- var a = a_base / minimumDistance;
-
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
- for (i = 0; i < nodeIndices.length - 1; i++) {
-
- node1 = nodes[nodeIndices[i]];
- for (j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
- if (node1.level == node2.level) {
-
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
-
- if (distance < 2 * minimumDistance) {
- repulsingForce = a * distance + b;
- var c = 0.05;
- var d = 2 * minimumDistance * 2 * c;
- repulsingForce = c * Math.pow(distance,2) - d * distance + d*d/(4*c);
-
- // normalize force with
- if (distance == 0) {
- distance = 0.01;
- }
- else {
- repulsingForce = repulsingForce / distance;
- }
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
-
- node1.fx -= fx;
- node1.fy -= fy;
- node2.fx += fx;
- node2.fy += fy;
- }
- }
- }
- }
- },
-
-
- /**
- * this function calculates the effects of the springs in the case of unsmooth curves.
- *
- * @private
- */
- _calculateHierarchicalSpringForces: function () {
- var edgeLength, edge, edgeId;
- var dx, dy, fx, fy, springForce, distance;
- var edges = this.edges;
-
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- edgeLength = edge.customLength ? edge.length : this.constants.physics.springLength;
- // this implies that the edges between big clusters are longer
- edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
-
- dx = (edge.from.x - edge.to.x);
- dy = (edge.from.y - edge.to.y);
- distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance == 0) {
- distance = 0.01;
- }
-
- distance = Math.max(0.8*edgeLength,Math.min(5*edgeLength, distance));
-
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
-
- fx = dx * springForce;
- fy = dy * springForce;
-
- edge.to.fx -= fx;
- edge.to.fy -= fy;
- edge.from.fx += fx;
- edge.from.fy += fy;
-
-
- var factor = 5;
- if (distance > edgeLength) {
- factor = 25;
- }
-
- if (edge.from.level > edge.to.level) {
- edge.to.fx -= factor*fx;
- edge.to.fy -= factor*fy;
- }
- else if (edge.from.level < edge.to.level) {
- edge.from.fx += factor*fx;
- edge.from.fy += factor*fy;
- }
- }
- }
- }
- }
- }
- };
- /**
- * Created by Alex on 2/10/14.
- */
-
- var barnesHutMixin = {
-
- /**
- * This function calculates the forces the nodes apply on eachother based on a gravitational model.
- * The Barnes Hut method is used to speed up this N-body simulation.
- *
- * @private
- */
- _calculateNodeForces : function() {
- if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
- var node;
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
- var nodeCount = nodeIndices.length;
-
- this._formBarnesHutTree(nodes,nodeIndices);
-
- var barnesHutTree = this.barnesHutTree;
-
- // place the nodes one by one recursively
- for (var i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- // starting with root is irrelevant, it never passes the BarnesHut condition
- this._getForceContribution(barnesHutTree.root.children.NW,node);
- this._getForceContribution(barnesHutTree.root.children.NE,node);
- this._getForceContribution(barnesHutTree.root.children.SW,node);
- this._getForceContribution(barnesHutTree.root.children.SE,node);
- }
- }
- },
-
-
- /**
- * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
- * If a region contains a single node, we check if it is not itself, then we apply the force.
- *
- * @param parentBranch
- * @param node
- * @private
- */
- _getForceContribution : function(parentBranch,node) {
- // we get no force contribution from an empty region
- if (parentBranch.childrenCount > 0) {
- var dx,dy,distance;
-
- // get the distance from the center of mass to the node.
- dx = parentBranch.centerOfMass.x - node.x;
- dy = parentBranch.centerOfMass.y - node.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- // BarnesHut condition
- // original condition : s/d < theta = passed === d/s > 1/theta = passed
- // calcSize = 1/s --> d * 1/s > 1/theta = passed
- if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.theta) {
- // duplicate code to reduce function calls to speed up program
- if (distance == 0) {
- distance = 0.1*Math.random();
- dx = distance;
- }
- var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
- node.fx += fx;
- node.fy += fy;
- }
- else {
- // Did not pass the condition, go into children if available
- if (parentBranch.childrenCount == 4) {
- this._getForceContribution(parentBranch.children.NW,node);
- this._getForceContribution(parentBranch.children.NE,node);
- this._getForceContribution(parentBranch.children.SW,node);
- this._getForceContribution(parentBranch.children.SE,node);
- }
- else { // parentBranch must have only one node, if it was empty we wouldnt be here
- if (parentBranch.children.data.id != node.id) { // if it is not self
- // duplicate code to reduce function calls to speed up program
- if (distance == 0) {
- distance = 0.5*Math.random();
- dx = distance;
- }
- var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.mass / (distance * distance * distance);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
- node.fx += fx;
- node.fy += fy;
- }
- }
- }
- }
- },
-
- /**
- * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
- *
- * @param nodes
- * @param nodeIndices
- * @private
- */
- _formBarnesHutTree : function(nodes,nodeIndices) {
- var node;
- var nodeCount = nodeIndices.length;
-
- var minX = Number.MAX_VALUE,
- minY = Number.MAX_VALUE,
- maxX =-Number.MAX_VALUE,
- maxY =-Number.MAX_VALUE;
-
- // get the range of the nodes
- for (var i = 0; i < nodeCount; i++) {
- var x = nodes[nodeIndices[i]].x;
- var y = nodes[nodeIndices[i]].y;
- if (x < minX) { minX = x; }
- if (x > maxX) { maxX = x; }
- if (y < minY) { minY = y; }
- if (y > maxY) { maxY = y; }
- }
- // make the range a square
- var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
- if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
- else {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
-
-
- var minimumTreeSize = 1e-5;
- var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
- var halfRootSize = 0.5 * rootSize;
- var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
-
- // construct the barnesHutTree
- var barnesHutTree = {root:{
- centerOfMass:{x:0,y:0}, // Center of Mass
- mass:0,
- range: {minX:centerX-halfRootSize,maxX:centerX+halfRootSize,
- minY:centerY-halfRootSize,maxY:centerY+halfRootSize},
-
- size: rootSize,
- calcSize: 1 / rootSize,
- children: {data:null},
- maxWidth: 0,
- level: 0,
- childrenCount: 4
- }};
- this._splitBranch(barnesHutTree.root);
-
- // place the nodes one by one recursively
- for (i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- this._placeInTree(barnesHutTree.root,node);
- }
-
- // make global
- this.barnesHutTree = barnesHutTree
- },
-
-
- /**
- * this updates the mass of a branch. this is increased by adding a node.
- *
- * @param parentBranch
- * @param node
- * @private
- */
- _updateBranchMass : function(parentBranch, node) {
- var totalMass = parentBranch.mass + node.mass;
- var totalMassInv = 1/totalMass;
-
- parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.mass;
- parentBranch.centerOfMass.x *= totalMassInv;
-
- parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.mass;
- parentBranch.centerOfMass.y *= totalMassInv;
-
- parentBranch.mass = totalMass;
- var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
- parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
-
- },
-
-
- /**
- * determine in which branch the node will be placed.
- *
- * @param parentBranch
- * @param node
- * @param skipMassUpdate
- * @private
- */
- _placeInTree : function(parentBranch,node,skipMassUpdate) {
- if (skipMassUpdate != true || skipMassUpdate === undefined) {
- // update the mass of the branch.
- this._updateBranchMass(parentBranch,node);
- }
-
- if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
- if (parentBranch.children.NW.range.maxY > node.y) { // in NW
- this._placeInRegion(parentBranch,node,"NW");
- }
- else { // in SW
- this._placeInRegion(parentBranch,node,"SW");
- }
- }
- else { // in NE or SE
- if (parentBranch.children.NW.range.maxY > node.y) { // in NE
- this._placeInRegion(parentBranch,node,"NE");
- }
- else { // in SE
- this._placeInRegion(parentBranch,node,"SE");
- }
- }
- },
-
-
- /**
- * actually place the node in a region (or branch)
- *
- * @param parentBranch
- * @param node
- * @param region
- * @private
- */
- _placeInRegion : function(parentBranch,node,region) {
- switch (parentBranch.children[region].childrenCount) {
- case 0: // place node here
- parentBranch.children[region].children.data = node;
- parentBranch.children[region].childrenCount = 1;
- this._updateBranchMass(parentBranch.children[region],node);
- break;
- case 1: // convert into children
- // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
- // we move one node a pixel and we do not put it in the tree.
- if (parentBranch.children[region].children.data.x == node.x &&
- parentBranch.children[region].children.data.y == node.y) {
- node.x += Math.random();
- node.y += Math.random();
- }
- else {
- this._splitBranch(parentBranch.children[region]);
- this._placeInTree(parentBranch.children[region],node);
- }
- break;
- case 4: // place in branch
- this._placeInTree(parentBranch.children[region],node);
- break;
- }
- },
-
-
- /**
- * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
- * after the split is complete.
- *
- * @param parentBranch
- * @private
- */
- _splitBranch : function(parentBranch) {
- // if the branch is shaded with a node, replace the node in the new subset.
- var containedNode = null;
- if (parentBranch.childrenCount == 1) {
- containedNode = parentBranch.children.data;
- parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
- }
- parentBranch.childrenCount = 4;
- parentBranch.children.data = null;
- this._insertRegion(parentBranch,"NW");
- this._insertRegion(parentBranch,"NE");
- this._insertRegion(parentBranch,"SW");
- this._insertRegion(parentBranch,"SE");
-
- if (containedNode != null) {
- this._placeInTree(parentBranch,containedNode);
- }
- },
-
-
- /**
- * This function subdivides the region into four new segments.
- * Specifically, this inserts a single new segment.
- * It fills the children section of the parentBranch
- *
- * @param parentBranch
- * @param region
- * @param parentRange
- * @private
- */
- _insertRegion : function(parentBranch, region) {
- var minX,maxX,minY,maxY;
- var childSize = 0.5 * parentBranch.size;
- switch (region) {
- case "NW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "NE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "SW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- case "SE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- }
-
-
- parentBranch.children[region] = {
- centerOfMass:{x:0,y:0},
- mass:0,
- range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
- size: 0.5 * parentBranch.size,
- calcSize: 2 * parentBranch.calcSize,
- children: {data:null},
- maxWidth: 0,
- level: parentBranch.level+1,
- childrenCount: 0
- };
- },
-
-
- /**
- * This function is for debugging purposed, it draws the tree.
- *
- * @param ctx
- * @param color
- * @private
- */
- _drawTree : function(ctx,color) {
- if (this.barnesHutTree !== undefined) {
-
- ctx.lineWidth = 1;
-
- this._drawBranch(this.barnesHutTree.root,ctx,color);
- }
- },
-
-
- /**
- * This function is for debugging purposes. It draws the branches recursively.
- *
- * @param branch
- * @param ctx
- * @param color
- * @private
- */
- _drawBranch : function(branch,ctx,color) {
- if (color === undefined) {
- color = "#FF0000";
- }
-
- if (branch.childrenCount == 4) {
- this._drawBranch(branch.children.NW,ctx);
- this._drawBranch(branch.children.NE,ctx);
- this._drawBranch(branch.children.SE,ctx);
- this._drawBranch(branch.children.SW,ctx);
- }
- ctx.strokeStyle = color;
- ctx.beginPath();
- ctx.moveTo(branch.range.minX,branch.range.minY);
- ctx.lineTo(branch.range.maxX,branch.range.minY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX,branch.range.minY);
- ctx.lineTo(branch.range.maxX,branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX,branch.range.maxY);
- ctx.lineTo(branch.range.minX,branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.minX,branch.range.maxY);
- ctx.lineTo(branch.range.minX,branch.range.minY);
- ctx.stroke();
-
- /*
- if (branch.mass > 0) {
- ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
- ctx.stroke();
- }
- */
- }
-
- };
- /**
- * Created by Alex on 2/10/14.
- */
-
- var repulsionMixin = {
-
-
- /**
- * Calculate the forces the nodes apply on eachother based on a repulsion field.
- * This field is linearly approximated.
- *
- * @private
- */
- _calculateNodeForces: function () {
- var dx, dy, angle, distance, fx, fy, combinedClusterSize,
- repulsingForce, node1, node2, i, j;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
-
- // approximation constants
- var a_base = -2 / 3;
- var b = 4 / 3;
-
- // repulsing forces between nodes
- var nodeDistance = this.constants.physics.repulsion.nodeDistance;
- var minimumDistance = nodeDistance;
-
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
- for (i = 0; i < nodeIndices.length - 1; i++) {
- node1 = nodes[nodeIndices[i]];
- for (j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
- combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
-
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
- var a = a_base / minimumDistance;
- if (distance < 2 * minimumDistance) {
- if (distance < 0.5 * minimumDistance) {
- repulsingForce = 1.0;
- }
- else {
- repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
- }
-
- // amplify the repulsion for clusters.
- repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
- repulsingForce = repulsingForce / distance;
-
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
-
- node1.fx -= fx;
- node1.fy -= fy;
- node2.fx += fx;
- node2.fy += fy;
- }
- }
- }
- }
- };
- var HierarchicalLayoutMixin = {
-
-
-
- _resetLevels : function() {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.preassignedLevel == false) {
- node.level = -1;
- }
- }
- }
- },
-
- /**
- * This is the main function to layout the nodes in a hierarchical way.
- * It checks if the node details are supplied correctly
- *
- * @private
- */
- _setupHierarchicalLayout : function() {
- if (this.constants.hierarchicalLayout.enabled == true && this.nodeIndices.length > 0) {
- if (this.constants.hierarchicalLayout.direction == "RL" || this.constants.hierarchicalLayout.direction == "DU") {
- this.constants.hierarchicalLayout.levelSeparation *= -1;
- }
- else {
- this.constants.hierarchicalLayout.levelSeparation = Math.abs(this.constants.hierarchicalLayout.levelSeparation);
- }
- // get the size of the largest hubs and check if the user has defined a level for a node.
- var hubsize = 0;
- var node, nodeId;
- var definedLevel = false;
- var undefinedLevel = false;
-
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.level != -1) {
- definedLevel = true;
- }
- else {
- undefinedLevel = true;
- }
- if (hubsize < node.edges.length) {
- hubsize = node.edges.length;
- }
- }
- }
-
- // if the user defined some levels but not all, alert and run without hierarchical layout
- if (undefinedLevel == true && definedLevel == true) {
- alert("To use the hierarchical layout, nodes require either no predefined levels or levels have to be defined for all nodes.");
- this.zoomExtent(true,this.constants.clustering.enabled);
- if (!this.constants.clustering.enabled) {
- this.start();
- }
- }
- else {
- // setup the system to use hierarchical method.
- this._changeConstants();
-
- // define levels if undefined by the users. Based on hubsize
- if (undefinedLevel == true) {
- this._determineLevels(hubsize);
- }
- // check the distribution of the nodes per level.
- var distribution = this._getDistribution();
-
- // place the nodes on the canvas. This also stablilizes the system.
- this._placeNodesByHierarchy(distribution);
-
- // start the simulation.
- this.start();
- }
- }
- },
-
-
- /**
- * This function places the nodes on the canvas based on the hierarchial distribution.
- *
- * @param {Object} distribution | obtained by the function this._getDistribution()
- * @private
- */
- _placeNodesByHierarchy : function(distribution) {
- var nodeId, node;
-
- // start placing all the level 0 nodes first. Then recursively position their branches.
- for (nodeId in distribution[0].nodes) {
- if (distribution[0].nodes.hasOwnProperty(nodeId)) {
- node = distribution[0].nodes[nodeId];
- if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
- if (node.xFixed) {
- node.x = distribution[0].minPos;
- node.xFixed = false;
-
- distribution[0].minPos += distribution[0].nodeSpacing;
- }
- }
- else {
- if (node.yFixed) {
- node.y = distribution[0].minPos;
- node.yFixed = false;
-
- distribution[0].minPos += distribution[0].nodeSpacing;
- }
- }
- this._placeBranchNodes(node.edges,node.id,distribution,node.level);
- }
- }
-
- // stabilize the system after positioning. This function calls zoomExtent.
- this._stabilize();
- },
-
-
- /**
- * This function get the distribution of levels based on hubsize
- *
- * @returns {Object}
- * @private
- */
- _getDistribution : function() {
- var distribution = {};
- var nodeId, node, level;
-
- // we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
- // the fix of X is removed after the x value has been set.
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- node.xFixed = true;
- node.yFixed = true;
- if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
- node.y = this.constants.hierarchicalLayout.levelSeparation*node.level;
- }
- else {
- node.x = this.constants.hierarchicalLayout.levelSeparation*node.level;
- }
- if (!distribution.hasOwnProperty(node.level)) {
- distribution[node.level] = {amount: 0, nodes: {}, minPos:0, nodeSpacing:0};
- }
- distribution[node.level].amount += 1;
- distribution[node.level].nodes[node.id] = node;
- }
- }
-
- // determine the largest amount of nodes of all levels
- var maxCount = 0;
- for (level in distribution) {
- if (distribution.hasOwnProperty(level)) {
- if (maxCount < distribution[level].amount) {
- maxCount = distribution[level].amount;
- }
- }
- }
-
- // set the initial position and spacing of each nodes accordingly
- for (level in distribution) {
- if (distribution.hasOwnProperty(level)) {
- distribution[level].nodeSpacing = (maxCount + 1) * this.constants.hierarchicalLayout.nodeSpacing;
- distribution[level].nodeSpacing /= (distribution[level].amount + 1);
- distribution[level].minPos = distribution[level].nodeSpacing - (0.5 * (distribution[level].amount + 1) * distribution[level].nodeSpacing);
- }
- }
-
- return distribution;
- },
-
-
- /**
- * this function allocates nodes in levels based on the recursive branching from the largest hubs.
- *
- * @param hubsize
- * @private
- */
- _determineLevels : function(hubsize) {
- var nodeId, node;
-
- // determine hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.edges.length == hubsize) {
- node.level = 0;
- }
- }
- }
-
- // branch from hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.level == 0) {
- this._setLevel(1,node.edges,node.id);
- }
- }
- }
- },
-
-
- /**
- * Since hierarchical layout does not support:
- * - smooth curves (based on the physics),
- * - clustering (based on dynamic node counts)
- *
- * We disable both features so there will be no problems.
- *
- * @private
- */
- _changeConstants : function() {
- this.constants.clustering.enabled = false;
- this.constants.physics.barnesHut.enabled = false;
- this.constants.physics.hierarchicalRepulsion.enabled = true;
- this._loadSelectedForceSolver();
- this.constants.smoothCurves = false;
- this._configureSmoothCurves();
- },
-
-
- /**
- * This is a recursively called function to enumerate the branches from the largest hubs and place the nodes
- * on a X position that ensures there will be no overlap.
- *
- * @param edges
- * @param parentId
- * @param distribution
- * @param parentLevel
- * @private
- */
- _placeBranchNodes : function(edges, parentId, distribution, parentLevel) {
- for (var i = 0; i < edges.length; i++) {
- var childNode = null;
- if (edges[i].toId == parentId) {
- childNode = edges[i].from;
- }
- else {
- childNode = edges[i].to;
- }
-
- // if a node is conneceted to another node on the same level (or higher (means lower level))!, this is not handled here.
- var nodeMoved = false;
- if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
- if (childNode.xFixed && childNode.level > parentLevel) {
- childNode.xFixed = false;
- childNode.x = distribution[childNode.level].minPos;
- nodeMoved = true;
- }
- }
- else {
- if (childNode.yFixed && childNode.level > parentLevel) {
- childNode.yFixed = false;
- childNode.y = distribution[childNode.level].minPos;
- nodeMoved = true;
- }
- }
-
- if (nodeMoved == true) {
- distribution[childNode.level].minPos += distribution[childNode.level].nodeSpacing;
- if (childNode.edges.length > 1) {
- this._placeBranchNodes(childNode.edges,childNode.id,distribution,childNode.level);
- }
- }
- }
- },
-
-
- /**
- * this function is called recursively to enumerate the barnches of the largest hubs and give each node a level.
- *
- * @param level
- * @param edges
- * @param parentId
- * @private
- */
- _setLevel : function(level, edges, parentId) {
- for (var i = 0; i < edges.length; i++) {
- var childNode = null;
- if (edges[i].toId == parentId) {
- childNode = edges[i].from;
- }
- else {
- childNode = edges[i].to;
- }
- if (childNode.level == -1 || childNode.level > level) {
- childNode.level = level;
- if (edges.length > 1) {
- this._setLevel(level+1, childNode.edges, childNode.id);
- }
- }
- }
- },
-
-
- /**
- * Unfix nodes
- *
- * @private
- */
- _restoreNodes : function() {
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.nodes[nodeId].xFixed = false;
- this.nodes[nodeId].yFixed = false;
- }
- }
- }
-
-
- };
- /**
- * Created by Alex on 2/4/14.
- */
-
- var manipulationMixin = {
-
- /**
- * clears the toolbar div element of children
- *
- * @private
- */
- _clearManipulatorBar : function() {
- while (this.manipulationDiv.hasChildNodes()) {
- this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
- }
- },
-
- /**
- * Manipulation UI temporarily overloads certain functions to extend or replace them. To be able to restore
- * these functions to their original functionality, we saved them in this.cachedFunctions.
- * This function restores these functions to their original function.
- *
- * @private
- */
- _restoreOverloadedFunctions : function() {
- for (var functionName in this.cachedFunctions) {
- if (this.cachedFunctions.hasOwnProperty(functionName)) {
- this[functionName] = this.cachedFunctions[functionName];
- }
- }
- },
-
- /**
- * Enable or disable edit-mode.
- *
- * @private
- */
- _toggleEditMode : function() {
- this.editMode = !this.editMode;
- var toolbar = document.getElementById("network-manipulationDiv");
- var closeDiv = document.getElementById("network-manipulation-closeDiv");
- var editModeDiv = document.getElementById("network-manipulation-editMode");
- if (this.editMode == true) {
- toolbar.style.display="block";
- closeDiv.style.display="block";
- editModeDiv.style.display="none";
- closeDiv.onclick = this._toggleEditMode.bind(this);
- }
- else {
- toolbar.style.display="none";
- closeDiv.style.display="none";
- editModeDiv.style.display="block";
- closeDiv.onclick = null;
- }
- this._createManipulatorBar()
- },
-
- /**
- * main function, creates the main toolbar. Removes functions bound to the select event. Binds all the buttons of the toolbar.
- *
- * @private
- */
- _createManipulatorBar : function() {
- // remove bound functions
- if (this.boundFunction) {
- this.off('select', this.boundFunction);
- }
- if (this.edgeBeingEdited !== undefined) {
- this.edgeBeingEdited._disableControlNodes();
- this.edgeBeingEdited = undefined;
- this.selectedControlNode = null;
- }
-
- // restore overloaded functions
- this._restoreOverloadedFunctions();
-
- // resume calculation
- this.freezeSimulation = false;
-
- // reset global variables
- this.blockConnectingEdgeSelection = false;
- this.forceAppendSelection = false;
-
- if (this.editMode == true) {
- while (this.manipulationDiv.hasChildNodes()) {
- this.manipulationDiv.removeChild(this.manipulationDiv.firstChild);
- }
- // add the icons to the manipulator div
- this.manipulationDiv.innerHTML = "" +
- "<span class='network-manipulationUI add' id='network-manipulate-addNode'>" +
- "<span class='network-manipulationLabel'>"+this.constants.labels['add'] +"</span></span>" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI connect' id='network-manipulate-connectNode'>" +
- "<span class='network-manipulationLabel'>"+this.constants.labels['link'] +"</span></span>";
- if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
- this.manipulationDiv.innerHTML += "" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI edit' id='network-manipulate-editNode'>" +
- "<span class='network-manipulationLabel'>"+this.constants.labels['editNode'] +"</span></span>";
- }
- else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
- this.manipulationDiv.innerHTML += "" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI edit' id='network-manipulate-editEdge'>" +
- "<span class='network-manipulationLabel'>"+this.constants.labels['editEdge'] +"</span></span>";
- }
- if (this._selectionIsEmpty() == false) {
- this.manipulationDiv.innerHTML += "" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI delete' id='network-manipulate-delete'>" +
- "<span class='network-manipulationLabel'>"+this.constants.labels['del'] +"</span></span>";
- }
-
-
- // bind the icons
- var addNodeButton = document.getElementById("network-manipulate-addNode");
- addNodeButton.onclick = this._createAddNodeToolbar.bind(this);
- var addEdgeButton = document.getElementById("network-manipulate-connectNode");
- addEdgeButton.onclick = this._createAddEdgeToolbar.bind(this);
- if (this._getSelectedNodeCount() == 1 && this.triggerFunctions.edit) {
- var editButton = document.getElementById("network-manipulate-editNode");
- editButton.onclick = this._editNode.bind(this);
- }
- else if (this._getSelectedEdgeCount() == 1 && this._getSelectedNodeCount() == 0) {
- var editButton = document.getElementById("network-manipulate-editEdge");
- editButton.onclick = this._createEditEdgeToolbar.bind(this);
- }
- if (this._selectionIsEmpty() == false) {
- var deleteButton = document.getElementById("network-manipulate-delete");
- deleteButton.onclick = this._deleteSelected.bind(this);
- }
- var closeDiv = document.getElementById("network-manipulation-closeDiv");
- closeDiv.onclick = this._toggleEditMode.bind(this);
-
- this.boundFunction = this._createManipulatorBar.bind(this);
- this.on('select', this.boundFunction);
- }
- else {
- this.editModeDiv.innerHTML = "" +
- "<span class='network-manipulationUI edit editmode' id='network-manipulate-editModeButton'>" +
- "<span class='network-manipulationLabel'>" + this.constants.labels['edit'] + "</span></span>";
- var editModeButton = document.getElementById("network-manipulate-editModeButton");
- editModeButton.onclick = this._toggleEditMode.bind(this);
- }
- },
-
-
-
- /**
- * Create the toolbar for adding Nodes
- *
- * @private
- */
- _createAddNodeToolbar : function() {
- // clear the toolbar
- this._clearManipulatorBar();
- if (this.boundFunction) {
- this.off('select', this.boundFunction);
- }
-
- // create the toolbar contents
- this.manipulationDiv.innerHTML = "" +
- "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
- "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
- "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['addDescription'] + "</span></span>";
-
- // bind the icon
- var backButton = document.getElementById("network-manipulate-back");
- backButton.onclick = this._createManipulatorBar.bind(this);
-
- // we use the boundFunction so we can reference it when we unbind it from the "select" event.
- this.boundFunction = this._addNode.bind(this);
- this.on('select', this.boundFunction);
- },
-
-
- /**
- * create the toolbar to connect nodes
- *
- * @private
- */
- _createAddEdgeToolbar : function() {
- // clear the toolbar
- this._clearManipulatorBar();
- this._unselectAll(true);
- this.freezeSimulation = true;
-
- if (this.boundFunction) {
- this.off('select', this.boundFunction);
- }
-
- this._unselectAll();
- this.forceAppendSelection = false;
- this.blockConnectingEdgeSelection = true;
-
- this.manipulationDiv.innerHTML = "" +
- "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
- "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
- "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['linkDescription'] + "</span></span>";
-
- // bind the icon
- var backButton = document.getElementById("network-manipulate-back");
- backButton.onclick = this._createManipulatorBar.bind(this);
-
- // we use the boundFunction so we can reference it when we unbind it from the "select" event.
- this.boundFunction = this._handleConnect.bind(this);
- this.on('select', this.boundFunction);
-
- // temporarily overload functions
- this.cachedFunctions["_handleTouch"] = this._handleTouch;
- this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
- this._handleTouch = this._handleConnect;
- this._handleOnRelease = this._finishConnect;
-
- // redraw to show the unselect
- this._redraw();
- },
-
- /**
- * create the toolbar to edit edges
- *
- * @private
- */
- _createEditEdgeToolbar : function() {
- // clear the toolbar
- this._clearManipulatorBar();
-
- if (this.boundFunction) {
- this.off('select', this.boundFunction);
- }
-
- this.edgeBeingEdited = this._getSelectedEdge();
- this.edgeBeingEdited._enableControlNodes();
-
- this.manipulationDiv.innerHTML = "" +
- "<span class='network-manipulationUI back' id='network-manipulate-back'>" +
- "<span class='network-manipulationLabel'>" + this.constants.labels['back'] + " </span></span>" +
- "<div class='network-seperatorLine'></div>" +
- "<span class='network-manipulationUI none' id='network-manipulate-back'>" +
- "<span id='network-manipulatorLabel' class='network-manipulationLabel'>" + this.constants.labels['editEdgeDescription'] + "</span></span>";
-
- // bind the icon
- var backButton = document.getElementById("network-manipulate-back");
- backButton.onclick = this._createManipulatorBar.bind(this);
-
- // temporarily overload functions
- this.cachedFunctions["_handleTouch"] = this._handleTouch;
- this.cachedFunctions["_handleOnRelease"] = this._handleOnRelease;
- this.cachedFunctions["_handleTap"] = this._handleTap;
- this.cachedFunctions["_handleDragStart"] = this._handleDragStart;
- this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
- this._handleTouch = this._selectControlNode;
- this._handleTap = function () {};
- this._handleOnDrag = this._controlNodeDrag;
- this._handleDragStart = function () {}
- this._handleOnRelease = this._releaseControlNode;
-
- // redraw to show the unselect
- this._redraw();
- },
-
-
-
-
-
- /**
- * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
- * to walk the user through the process.
- *
- * @private
- */
- _selectControlNode : function(pointer) {
- this.edgeBeingEdited.controlNodes.from.unselect();
- this.edgeBeingEdited.controlNodes.to.unselect();
- this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y));
- if (this.selectedControlNode !== null) {
- this.selectedControlNode.select();
- this.freezeSimulation = true;
- }
- this._redraw();
- },
-
- /**
- * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
- * to walk the user through the process.
- *
- * @private
- */
- _controlNodeDrag : function(event) {
- var pointer = this._getPointer(event.gesture.center);
- if (this.selectedControlNode !== null && this.selectedControlNode !== undefined) {
- this.selectedControlNode.x = this._XconvertDOMtoCanvas(pointer.x);
- this.selectedControlNode.y = this._YconvertDOMtoCanvas(pointer.y);
- }
- this._redraw();
- },
-
- _releaseControlNode : function(pointer) {
- var newNode = this._getNodeAt(pointer);
- if (newNode != null) {
- if (this.edgeBeingEdited.controlNodes.from.selected == true) {
- this._editEdge(newNode.id, this.edgeBeingEdited.to.id);
- this.edgeBeingEdited.controlNodes.from.unselect();
- }
- if (this.edgeBeingEdited.controlNodes.to.selected == true) {
- this._editEdge(this.edgeBeingEdited.from.id, newNode.id);
- this.edgeBeingEdited.controlNodes.to.unselect();
- }
- }
- else {
- this.edgeBeingEdited._restoreControlNodes();
- }
- this.freezeSimulation = false;
- this._redraw();
- },
-
- /**
- * the function bound to the selection event. It checks if you want to connect a cluster and changes the description
- * to walk the user through the process.
- *
- * @private
- */
- _handleConnect : function(pointer) {
- if (this._getSelectedNodeCount() == 0) {
- var node = this._getNodeAt(pointer);
- if (node != null) {
- if (node.clusterSize > 1) {
- alert("Cannot create edges to a cluster.")
- }
- else {
- this._selectObject(node,false);
- // create a node the temporary line can look at
- this.sectors['support']['nodes']['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
- this.sectors['support']['nodes']['targetNode'].x = node.x;
- this.sectors['support']['nodes']['targetNode'].y = node.y;
- this.sectors['support']['nodes']['targetViaNode'] = new Node({id:'targetViaNode'},{},{},this.constants);
- this.sectors['support']['nodes']['targetViaNode'].x = node.x;
- this.sectors['support']['nodes']['targetViaNode'].y = node.y;
- this.sectors['support']['nodes']['targetViaNode'].parentEdgeId = "connectionEdge";
-
- // create a temporary edge
- this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:this.sectors['support']['nodes']['targetNode'].id}, this, this.constants);
- this.edges['connectionEdge'].from = node;
- this.edges['connectionEdge'].connected = true;
- this.edges['connectionEdge'].smooth = true;
- this.edges['connectionEdge'].selected = true;
- this.edges['connectionEdge'].to = this.sectors['support']['nodes']['targetNode'];
- this.edges['connectionEdge'].via = this.sectors['support']['nodes']['targetViaNode'];
-
- this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
- this._handleOnDrag = function(event) {
- var pointer = this._getPointer(event.gesture.center);
- this.sectors['support']['nodes']['targetNode'].x = this._XconvertDOMtoCanvas(pointer.x);
- this.sectors['support']['nodes']['targetNode'].y = this._YconvertDOMtoCanvas(pointer.y);
- this.sectors['support']['nodes']['targetViaNode'].x = 0.5 * (this._XconvertDOMtoCanvas(pointer.x) + this.edges['connectionEdge'].from.x);
- this.sectors['support']['nodes']['targetViaNode'].y = this._YconvertDOMtoCanvas(pointer.y);
- };
-
- this.moving = true;
- this.start();
- }
- }
- }
- },
-
- _finishConnect : function(pointer) {
- if (this._getSelectedNodeCount() == 1) {
-
- // restore the drag function
- this._handleOnDrag = this.cachedFunctions["_handleOnDrag"];
- delete this.cachedFunctions["_handleOnDrag"];
-
- // remember the edge id
- var connectFromId = this.edges['connectionEdge'].fromId;
-
- // remove the temporary nodes and edge
- delete this.edges['connectionEdge'];
- delete this.sectors['support']['nodes']['targetNode'];
- delete this.sectors['support']['nodes']['targetViaNode'];
-
- var node = this._getNodeAt(pointer);
- if (node != null) {
- if (node.clusterSize > 1) {
- alert("Cannot create edges to a cluster.")
- }
- else {
- this._createEdge(connectFromId,node.id);
- this._createManipulatorBar();
- }
- }
- this._unselectAll();
- }
- },
-
-
- /**
- * Adds a node on the specified location
- */
- _addNode : function() {
- if (this._selectionIsEmpty() && this.editMode == true) {
- var positionObject = this._pointerToPositionObject(this.pointerPosition);
- var defaultData = {id:util.randomUUID(),x:positionObject.left,y:positionObject.top,label:"new",allowedToMoveX:true,allowedToMoveY:true};
- if (this.triggerFunctions.add) {
- if (this.triggerFunctions.add.length == 2) {
- var me = this;
- this.triggerFunctions.add(defaultData, function(finalizedData) {
- me.nodesData.add(finalizedData);
- me._createManipulatorBar();
- me.moving = true;
- me.start();
- });
- }
- else {
- alert(this.constants.labels['addError']);
- this._createManipulatorBar();
- this.moving = true;
- this.start();
- }
- }
- else {
- this.nodesData.add(defaultData);
- this._createManipulatorBar();
- this.moving = true;
- this.start();
- }
- }
- },
-
-
- /**
- * connect two nodes with a new edge.
- *
- * @private
- */
- _createEdge : function(sourceNodeId,targetNodeId) {
- if (this.editMode == true) {
- var defaultData = {from:sourceNodeId, to:targetNodeId};
- if (this.triggerFunctions.connect) {
- if (this.triggerFunctions.connect.length == 2) {
- var me = this;
- this.triggerFunctions.connect(defaultData, function(finalizedData) {
- me.edgesData.add(finalizedData);
- me.moving = true;
- me.start();
- });
- }
- else {
- alert(this.constants.labels["linkError"]);
- this.moving = true;
- this.start();
- }
- }
- else {
- this.edgesData.add(defaultData);
- this.moving = true;
- this.start();
- }
- }
- },
-
- /**
- * connect two nodes with a new edge.
- *
- * @private
- */
- _editEdge : function(sourceNodeId,targetNodeId) {
- if (this.editMode == true) {
- var defaultData = {id: this.edgeBeingEdited.id, from:sourceNodeId, to:targetNodeId};
- if (this.triggerFunctions.editEdge) {
- if (this.triggerFunctions.editEdge.length == 2) {
- var me = this;
- this.triggerFunctions.editEdge(defaultData, function(finalizedData) {
- me.edgesData.update(finalizedData);
- me.moving = true;
- me.start();
- });
- }
- else {
- alert(this.constants.labels["linkError"]);
- this.moving = true;
- this.start();
- }
- }
- else {
- this.edgesData.update(defaultData);
- this.moving = true;
- this.start();
- }
- }
- },
-
- /**
- * Create the toolbar to edit the selected node. The label and the color can be changed. Other colors are derived from the chosen color.
- *
- * @private
- */
- _editNode : function() {
- if (this.triggerFunctions.edit && this.editMode == true) {
- var node = this._getSelectedNode();
- var data = {id:node.id,
- label: node.label,
- group: node.group,
- shape: node.shape,
- color: {
- background:node.color.background,
- border:node.color.border,
- highlight: {
- background:node.color.highlight.background,
- border:node.color.highlight.border
- }
- }};
- if (this.triggerFunctions.edit.length == 2) {
- var me = this;
- this.triggerFunctions.edit(data, function (finalizedData) {
- me.nodesData.update(finalizedData);
- me._createManipulatorBar();
- me.moving = true;
- me.start();
- });
- }
- else {
- alert(this.constants.labels["editError"]);
- }
- }
- else {
- alert(this.constants.labels["editBoundError"]);
- }
- },
-
-
-
-
- /**
- * delete everything in the selection
- *
- * @private
- */
- _deleteSelected : function() {
- if (!this._selectionIsEmpty() && this.editMode == true) {
- if (!this._clusterInSelection()) {
- var selectedNodes = this.getSelectedNodes();
- var selectedEdges = this.getSelectedEdges();
- if (this.triggerFunctions.del) {
- var me = this;
- var data = {nodes: selectedNodes, edges: selectedEdges};
- if (this.triggerFunctions.del.length = 2) {
- this.triggerFunctions.del(data, function (finalizedData) {
- me.edgesData.remove(finalizedData.edges);
- me.nodesData.remove(finalizedData.nodes);
- me._unselectAll();
- me.moving = true;
- me.start();
- });
- }
- else {
- alert(this.constants.labels["deleteError"])
- }
- }
- else {
- this.edgesData.remove(selectedEdges);
- this.nodesData.remove(selectedNodes);
- this._unselectAll();
- this.moving = true;
- this.start();
- }
- }
- else {
- alert(this.constants.labels["deleteClusterError"]);
- }
- }
- }
- };
- /**
- * Creation of the SectorMixin var.
- *
- * This contains all the functions the Network object can use to employ the sector system.
- * The sector system is always used by Network, though the benefits only apply to the use of clustering.
- * If clustering is not used, there is no overhead except for a duplicate object with references to nodes and edges.
- *
- * Alex de Mulder
- * 21-01-2013
- */
- var SectorMixin = {
-
- /**
- * This function is only called by the setData function of the Network object.
- * This loads the global references into the active sector. This initializes the sector.
- *
- * @private
- */
- _putDataInSector : function() {
- this.sectors["active"][this._sector()].nodes = this.nodes;
- this.sectors["active"][this._sector()].edges = this.edges;
- this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices;
- },
-
-
- /**
- * /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied (active) sector. If a type is defined, do the specific type
- *
- * @param {String} sectorId
- * @param {String} [sectorType] | "active" or "frozen"
- * @private
- */
- _switchToSector : function(sectorId, sectorType) {
- if (sectorType === undefined || sectorType == "active") {
- this._switchToActiveSector(sectorId);
- }
- else {
- this._switchToFrozenSector(sectorId);
- }
- },
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied active sector.
- *
- * @param sectorId
- * @private
- */
- _switchToActiveSector : function(sectorId) {
- this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"];
- this.nodes = this.sectors["active"][sectorId]["nodes"];
- this.edges = this.sectors["active"][sectorId]["edges"];
- },
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied active sector.
- *
- * @param sectorId
- * @private
- */
- _switchToSupportSector : function() {
- this.nodeIndices = this.sectors["support"]["nodeIndices"];
- this.nodes = this.sectors["support"]["nodes"];
- this.edges = this.sectors["support"]["edges"];
- },
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the supplied frozen sector.
- *
- * @param sectorId
- * @private
- */
- _switchToFrozenSector : function(sectorId) {
- this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"];
- this.nodes = this.sectors["frozen"][sectorId]["nodes"];
- this.edges = this.sectors["frozen"][sectorId]["edges"];
- },
-
-
- /**
- * This function sets the global references to nodes, edges and nodeIndices back to
- * those of the currently active sector.
- *
- * @private
- */
- _loadLatestSector : function() {
- this._switchToSector(this._sector());
- },
-
-
- /**
- * This function returns the currently active sector Id
- *
- * @returns {String}
- * @private
- */
- _sector : function() {
- return this.activeSector[this.activeSector.length-1];
- },
-
-
- /**
- * This function returns the previously active sector Id
- *
- * @returns {String}
- * @private
- */
- _previousSector : function() {
- if (this.activeSector.length > 1) {
- return this.activeSector[this.activeSector.length-2];
- }
- else {
- throw new TypeError('there are not enough sectors in the this.activeSector array.');
- }
- },
-
-
- /**
- * We add the active sector at the end of the this.activeSector array
- * This ensures it is the currently active sector returned by _sector() and it reaches the top
- * of the activeSector stack. When we reverse our steps we move from the end to the beginning of this stack.
- *
- * @param newId
- * @private
- */
- _setActiveSector : function(newId) {
- this.activeSector.push(newId);
- },
-
-
- /**
- * We remove the currently active sector id from the active sector stack. This happens when
- * we reactivate the previously active sector
- *
- * @private
- */
- _forgetLastSector : function() {
- this.activeSector.pop();
- },
-
-
- /**
- * This function creates a new active sector with the supplied newId. This newId
- * is the expanding node id.
- *
- * @param {String} newId | Id of the new active sector
- * @private
- */
- _createNewSector : function(newId) {
- // create the new sector
- this.sectors["active"][newId] = {"nodes":{},
- "edges":{},
- "nodeIndices":[],
- "formationScale": this.scale,
- "drawingNode": undefined};
-
- // create the new sector render node. This gives visual feedback that you are in a new sector.
- this.sectors["active"][newId]['drawingNode'] = new Node(
- {id:newId,
- color: {
- background: "#eaefef",
- border: "495c5e"
- }
- },{},{},this.constants);
- this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
- },
-
-
- /**
- * This function removes the currently active sector. This is called when we create a new
- * active sector.
- *
- * @param {String} sectorId | Id of the active sector that will be removed
- * @private
- */
- _deleteActiveSector : function(sectorId) {
- delete this.sectors["active"][sectorId];
- },
-
-
- /**
- * This function removes the currently active sector. This is called when we reactivate
- * the previously active sector.
- *
- * @param {String} sectorId | Id of the active sector that will be removed
- * @private
- */
- _deleteFrozenSector : function(sectorId) {
- delete this.sectors["frozen"][sectorId];
- },
-
-
- /**
- * Freezing an active sector means moving it from the "active" object to the "frozen" object.
- * We copy the references, then delete the active entree.
- *
- * @param sectorId
- * @private
- */
- _freezeSector : function(sectorId) {
- // we move the set references from the active to the frozen stack.
- this.sectors["frozen"][sectorId] = this.sectors["active"][sectorId];
-
- // we have moved the sector data into the frozen set, we now remove it from the active set
- this._deleteActiveSector(sectorId);
- },
-
-
- /**
- * This is the reverse operation of _freezeSector. Activating means moving the sector from the "frozen"
- * object to the "active" object.
- *
- * @param sectorId
- * @private
- */
- _activateSector : function(sectorId) {
- // we move the set references from the frozen to the active stack.
- this.sectors["active"][sectorId] = this.sectors["frozen"][sectorId];
-
- // we have moved the sector data into the active set, we now remove it from the frozen stack
- this._deleteFrozenSector(sectorId);
- },
-
-
- /**
- * This function merges the data from the currently active sector with a frozen sector. This is used
- * in the process of reverting back to the previously active sector.
- * The data that is placed in the frozen (the previously active) sector is the node that has been removed from it
- * upon the creation of a new active sector.
- *
- * @param sectorId
- * @private
- */
- _mergeThisWithFrozen : function(sectorId) {
- // copy all nodes
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.sectors["frozen"][sectorId]["nodes"][nodeId] = this.nodes[nodeId];
- }
- }
-
- // copy all edges (if not fully clustered, else there are no edges)
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- this.sectors["frozen"][sectorId]["edges"][edgeId] = this.edges[edgeId];
- }
- }
-
- // merge the nodeIndices
- for (var i = 0; i < this.nodeIndices.length; i++) {
- this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
- }
- },
-
-
- /**
- * This clusters the sector to one cluster. It was a single cluster before this process started so
- * we revert to that state. The clusterToFit function with a maximum size of 1 node does this.
- *
- * @private
- */
- _collapseThisToSingleCluster : function() {
- this.clusterToFit(1,false);
- },
-
-
- /**
- * We create a new active sector from the node that we want to open.
- *
- * @param node
- * @private
- */
- _addSector : function(node) {
- // this is the currently active sector
- var sector = this._sector();
-
- // // this should allow me to select nodes from a frozen set.
- // if (this.sectors['active'][sector]["nodes"].hasOwnProperty(node.id)) {
- // console.log("the node is part of the active sector");
- // }
- // else {
- // console.log("I dont know what happened!!");
- // }
-
- // when we switch to a new sector, we remove the node that will be expanded from the current nodes list.
- delete this.nodes[node.id];
-
- var unqiueIdentifier = util.randomUUID();
-
- // we fully freeze the currently active sector
- this._freezeSector(sector);
-
- // we create a new active sector. This sector has the Id of the node to ensure uniqueness
- this._createNewSector(unqiueIdentifier);
-
- // we add the active sector to the sectors array to be able to revert these steps later on
- this._setActiveSector(unqiueIdentifier);
-
- // we redirect the global references to the new sector's references. this._sector() now returns unqiueIdentifier
- this._switchToSector(this._sector());
-
- // finally we add the node we removed from our previous active sector to the new active sector
- this.nodes[node.id] = node;
- },
-
-
- /**
- * We close the sector that is currently open and revert back to the one before.
- * If the active sector is the "default" sector, nothing happens.
- *
- * @private
- */
- _collapseSector : function() {
- // the currently active sector
- var sector = this._sector();
-
- // we cannot collapse the default sector
- if (sector != "default") {
- if ((this.nodeIndices.length == 1) ||
- (this.sectors["active"][sector]["drawingNode"].width*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
- (this.sectors["active"][sector]["drawingNode"].height*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
- var previousSector = this._previousSector();
-
- // we collapse the sector back to a single cluster
- this._collapseThisToSingleCluster();
-
- // we move the remaining nodes, edges and nodeIndices to the previous sector.
- // This previous sector is the one we will reactivate
- this._mergeThisWithFrozen(previousSector);
-
- // the previously active (frozen) sector now has all the data from the currently active sector.
- // we can now delete the active sector.
- this._deleteActiveSector(sector);
-
- // we activate the previously active (and currently frozen) sector.
- this._activateSector(previousSector);
-
- // we load the references from the newly active sector into the global references
- this._switchToSector(previousSector);
-
- // we forget the previously active sector because we reverted to the one before
- this._forgetLastSector();
-
- // finally, we update the node index list.
- this._updateNodeIndexList();
-
- // we refresh the list with calulation nodes and calculation node indices.
- this._updateCalculationNodes();
- }
- }
- },
-
-
- /**
- * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
- *
- * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
- * | we dont pass the function itself because then the "this" is the window object
- * | instead of the Network object
- * @param {*} [argument] | Optional: arguments to pass to the runFunction
- * @private
- */
- _doInAllActiveSectors : function(runFunction,argument) {
- if (argument === undefined) {
- for (var sector in this.sectors["active"]) {
- if (this.sectors["active"].hasOwnProperty(sector)) {
- // switch the global references to those of this sector
- this._switchToActiveSector(sector);
- this[runFunction]();
- }
- }
- }
- else {
- for (var sector in this.sectors["active"]) {
- if (this.sectors["active"].hasOwnProperty(sector)) {
- // switch the global references to those of this sector
- this._switchToActiveSector(sector);
- var args = Array.prototype.splice.call(arguments, 1);
- if (args.length > 1) {
- this[runFunction](args[0],args[1]);
- }
- else {
- this[runFunction](argument);
- }
- }
- }
- }
- // we revert the global references back to our active sector
- this._loadLatestSector();
- },
-
-
- /**
- * This runs a function in all active sectors. This is used in _redraw() and the _initializeForceCalculation().
- *
- * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
- * | we dont pass the function itself because then the "this" is the window object
- * | instead of the Network object
- * @param {*} [argument] | Optional: arguments to pass to the runFunction
- * @private
- */
- _doInSupportSector : function(runFunction,argument) {
- if (argument === undefined) {
- this._switchToSupportSector();
- this[runFunction]();
- }
- else {
- this._switchToSupportSector();
- var args = Array.prototype.splice.call(arguments, 1);
- if (args.length > 1) {
- this[runFunction](args[0],args[1]);
- }
- else {
- this[runFunction](argument);
- }
- }
- // we revert the global references back to our active sector
- this._loadLatestSector();
- },
-
-
- /**
- * This runs a function in all frozen sectors. This is used in the _redraw().
- *
- * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
- * | we don't pass the function itself because then the "this" is the window object
- * | instead of the Network object
- * @param {*} [argument] | Optional: arguments to pass to the runFunction
- * @private
- */
- _doInAllFrozenSectors : function(runFunction,argument) {
- if (argument === undefined) {
- for (var sector in this.sectors["frozen"]) {
- if (this.sectors["frozen"].hasOwnProperty(sector)) {
- // switch the global references to those of this sector
- this._switchToFrozenSector(sector);
- this[runFunction]();
- }
- }
- }
- else {
- for (var sector in this.sectors["frozen"]) {
- if (this.sectors["frozen"].hasOwnProperty(sector)) {
- // switch the global references to those of this sector
- this._switchToFrozenSector(sector);
- var args = Array.prototype.splice.call(arguments, 1);
- if (args.length > 1) {
- this[runFunction](args[0],args[1]);
- }
- else {
- this[runFunction](argument);
- }
- }
- }
- }
- this._loadLatestSector();
- },
-
-
- /**
- * This runs a function in all sectors. This is used in the _redraw().
- *
- * @param {String} runFunction | This is the NAME of a function we want to call in all active sectors
- * | we don't pass the function itself because then the "this" is the window object
- * | instead of the Network object
- * @param {*} [argument] | Optional: arguments to pass to the runFunction
- * @private
- */
- _doInAllSectors : function(runFunction,argument) {
- var args = Array.prototype.splice.call(arguments, 1);
- if (argument === undefined) {
- this._doInAllActiveSectors(runFunction);
- this._doInAllFrozenSectors(runFunction);
- }
- else {
- if (args.length > 1) {
- this._doInAllActiveSectors(runFunction,args[0],args[1]);
- this._doInAllFrozenSectors(runFunction,args[0],args[1]);
- }
- else {
- this._doInAllActiveSectors(runFunction,argument);
- this._doInAllFrozenSectors(runFunction,argument);
- }
- }
- },
-
-
- /**
- * This clears the nodeIndices list. We cannot use this.nodeIndices = [] because we would break the link with the
- * active sector. Thus we clear the nodeIndices in the active sector, then reconnect the this.nodeIndices to it.
- *
- * @private
- */
- _clearNodeIndexList : function() {
- var sector = this._sector();
- this.sectors["active"][sector]["nodeIndices"] = [];
- this.nodeIndices = this.sectors["active"][sector]["nodeIndices"];
- },
-
-
- /**
- * Draw the encompassing sector node
- *
- * @param ctx
- * @param sectorType
- * @private
- */
- _drawSectorNodes : function(ctx,sectorType) {
- var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
- for (var sector in this.sectors[sectorType]) {
- if (this.sectors[sectorType].hasOwnProperty(sector)) {
- if (this.sectors[sectorType][sector]["drawingNode"] !== undefined) {
-
- this._switchToSector(sector,sectorType);
-
- minY = 1e9; maxY = -1e9; minX = 1e9; maxX = -1e9;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- node.resize(ctx);
- if (minX > node.x - 0.5 * node.width) {minX = node.x - 0.5 * node.width;}
- if (maxX < node.x + 0.5 * node.width) {maxX = node.x + 0.5 * node.width;}
- if (minY > node.y - 0.5 * node.height) {minY = node.y - 0.5 * node.height;}
- if (maxY < node.y + 0.5 * node.height) {maxY = node.y + 0.5 * node.height;}
- }
- }
- node = this.sectors[sectorType][sector]["drawingNode"];
- node.x = 0.5 * (maxX + minX);
- node.y = 0.5 * (maxY + minY);
- node.width = 2 * (node.x - minX);
- node.height = 2 * (node.y - minY);
- node.radius = Math.sqrt(Math.pow(0.5*node.width,2) + Math.pow(0.5*node.height,2));
- node.setScale(this.scale);
- node._drawCircle(ctx);
- }
- }
- }
- },
-
- _drawAllSectorNodes : function(ctx) {
- this._drawSectorNodes(ctx,"frozen");
- this._drawSectorNodes(ctx,"active");
- this._loadLatestSector();
- }
- };
-
- /**
- * Creation of the ClusterMixin var.
- *
- * This contains all the functions the Network object can use to employ clustering
- *
- * Alex de Mulder
- * 21-01-2013
- */
- var ClusterMixin = {
-
- /**
- * This is only called in the constructor of the network object
- *
- */
- startWithClustering : function() {
- // cluster if the data set is big
- this.clusterToFit(this.constants.clustering.initialMaxNodes, true);
-
- // updates the lables after clustering
- this.updateLabels();
-
- // this is called here because if clusterin is disabled, the start and stabilize are called in
- // the setData function.
- if (this.stabilize) {
- this._stabilize();
- }
- this.start();
- },
-
- /**
- * This function clusters until the initialMaxNodes has been reached
- *
- * @param {Number} maxNumberOfNodes
- * @param {Boolean} reposition
- */
- clusterToFit : function(maxNumberOfNodes, reposition) {
- var numberOfNodes = this.nodeIndices.length;
-
- var maxLevels = 50;
- var level = 0;
-
- // we first cluster the hubs, then we pull in the outliers, repeat
- while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
- if (level % 3 == 0) {
- this.forceAggregateHubs(true);
- this.normalizeClusterLevels();
- }
- else {
- this.increaseClusterLevel(); // this also includes a cluster normalization
- }
-
- numberOfNodes = this.nodeIndices.length;
- level += 1;
- }
-
- // after the clustering we reposition the nodes to reduce the initial chaos
- if (level > 0 && reposition == true) {
- this.repositionNodes();
- }
- this._updateCalculationNodes();
- },
-
- /**
- * This function can be called to open up a specific cluster. It is only called by
- * It will unpack the cluster back one level.
- *
- * @param node | Node object: cluster to open.
- */
- openCluster : function(node) {
- var isMovingBeforeClustering = this.moving;
- if (node.clusterSize > this.constants.clustering.sectorThreshold && this._nodeInActiveArea(node) &&
- !(this._sector() == "default" && this.nodeIndices.length == 1)) {
- // this loads a new sector, loads the nodes and edges and nodeIndices of it.
- this._addSector(node);
- var level = 0;
-
- // we decluster until we reach a decent number of nodes
- while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
- this.decreaseClusterLevel();
- level += 1;
- }
-
- }
- else {
- this._expandClusterNode(node,false,true);
-
- // update the index list, dynamic edges and labels
- this._updateNodeIndexList();
- this._updateDynamicEdges();
- this._updateCalculationNodes();
- this.updateLabels();
- }
-
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
- },
-
-
- /**
- * This calls the updateClustes with default arguments
- */
- updateClustersDefault : function() {
- if (this.constants.clustering.enabled == true) {
- this.updateClusters(0,false,false);
- }
- },
-
-
- /**
- * This function can be called to increase the cluster level. This means that the nodes with only one edge connection will
- * be clustered with their connected node. This can be repeated as many times as needed.
- * This can be called externally (by a keybind for instance) to reduce the complexity of big datasets.
- */
- increaseClusterLevel : function() {
- this.updateClusters(-1,false,true);
- },
-
-
- /**
- * This function can be called to decrease the cluster level. This means that the nodes with only one edge connection will
- * be unpacked if they are a cluster. This can be repeated as many times as needed.
- * This can be called externally (by a key-bind for instance) to look into clusters without zooming.
- */
- decreaseClusterLevel : function() {
- this.updateClusters(1,false,true);
- },
-
-
- /**
- * This is the main clustering function. It clusters and declusters on zoom or forced
- * This function clusters on zoom, it can be called with a predefined zoom direction
- * If out, check if we can form clusters, if in, check if we can open clusters.
- * This function is only called from _zoom()
- *
- * @param {Number} zoomDirection | -1 / 0 / +1 for zoomOut / determineByZoom / zoomIn
- * @param {Boolean} recursive | enabled or disable recursive calling of the opening of clusters
- * @param {Boolean} force | enabled or disable forcing
- * @param {Boolean} doNotStart | if true do not call start
- *
- */
- updateClusters : function(zoomDirection,recursive,force,doNotStart) {
- var isMovingBeforeClustering = this.moving;
- var amountOfNodes = this.nodeIndices.length;
-
- // on zoom out collapse the sector if the scale is at the level the sector was made
- if (this.previousScale > this.scale && zoomDirection == 0) {
- this._collapseSector();
- }
-
- // check if we zoom in or out
- if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
- // forming clusters when forced pulls outliers in. When not forced, the edge length of the
- // outer nodes determines if it is being clustered
- this._formClusters(force);
- }
- else if (this.previousScale < this.scale || zoomDirection == 1) { // zoom in
- if (force == true) {
- // _openClusters checks for each node if the formationScale of the cluster is smaller than
- // the current scale and if so, declusters. When forced, all clusters are reduced by one step
- this._openClusters(recursive,force);
- }
- else {
- // if a cluster takes up a set percentage of the active window
- this._openClustersBySize();
- }
- }
- this._updateNodeIndexList();
-
- // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
- if (this.nodeIndices.length == amountOfNodes && (this.previousScale > this.scale || zoomDirection == -1)) {
- this._aggregateHubs(force);
- this._updateNodeIndexList();
- }
-
- // we now reduce chains.
- if (this.previousScale > this.scale || zoomDirection == -1) { // zoom out
- this.handleChains();
- this._updateNodeIndexList();
- }
-
- this.previousScale = this.scale;
-
- // rest of the update the index list, dynamic edges and labels
- this._updateDynamicEdges();
- this.updateLabels();
-
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length < amountOfNodes) { // this means a clustering operation has taken place
- this.clusterSession += 1;
- // if clusters have been made, we normalize the cluster level
- this.normalizeClusterLevels();
- }
-
- if (doNotStart == false || doNotStart === undefined) {
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
- }
-
- this._updateCalculationNodes();
- },
-
- /**
- * This function handles the chains. It is called on every updateClusters().
- */
- handleChains : function() {
- // after clustering we check how many chains there are
- var chainPercentage = this._getChainFraction();
- if (chainPercentage > this.constants.clustering.chainThreshold) {
- this._reduceAmountOfChains(1 - this.constants.clustering.chainThreshold / chainPercentage)
-
- }
- },
-
- /**
- * this functions starts clustering by hubs
- * The minimum hub threshold is set globally
- *
- * @private
- */
- _aggregateHubs : function(force) {
- this._getHubSize();
- this._formClustersByHub(force,false);
- },
-
-
- /**
- * This function is fired by keypress. It forces hubs to form.
- *
- */
- forceAggregateHubs : function(doNotStart) {
- var isMovingBeforeClustering = this.moving;
- var amountOfNodes = this.nodeIndices.length;
-
- this._aggregateHubs(true);
-
- // update the index list, dynamic edges and labels
- this._updateNodeIndexList();
- this._updateDynamicEdges();
- this.updateLabels();
-
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length != amountOfNodes) {
- this.clusterSession += 1;
- }
-
- if (doNotStart == false || doNotStart === undefined) {
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
- }
- },
-
- /**
- * If a cluster takes up more than a set percentage of the screen, open the cluster
- *
- * @private
- */
- _openClustersBySize : function() {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.inView() == true) {
- if ((node.width*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
- (node.height*this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
- this.openCluster(node);
- }
- }
- }
- }
- },
-
-
- /**
- * This function loops over all nodes in the nodeIndices list. For each node it checks if it is a cluster and if it
- * has to be opened based on the current zoom level.
- *
- * @private
- */
- _openClusters : function(recursive,force) {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- this._expandClusterNode(node,recursive,force);
- this._updateCalculationNodes();
- }
- },
-
- /**
- * This function checks if a node has to be opened. This is done by checking the zoom level.
- * If the node contains child nodes, this function is recursively called on the child nodes as well.
- * This recursive behaviour is optional and can be set by the recursive argument.
- *
- * @param {Node} parentNode | to check for cluster and expand
- * @param {Boolean} recursive | enabled or disable recursive calling
- * @param {Boolean} force | enabled or disable forcing
- * @param {Boolean} [openAll] | This will recursively force all nodes in the parent to be released
- * @private
- */
- _expandClusterNode : function(parentNode, recursive, force, openAll) {
- // first check if node is a cluster
- if (parentNode.clusterSize > 1) {
- // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
- if (parentNode.clusterSize < this.constants.clustering.sectorThreshold) {
- openAll = true;
- }
- recursive = openAll ? true : recursive;
-
- // if the last child has been added on a smaller scale than current scale decluster
- if (parentNode.formationScale < this.scale || force == true) {
- // we will check if any of the contained child nodes should be removed from the cluster
- for (var containedNodeId in parentNode.containedNodes) {
- if (parentNode.containedNodes.hasOwnProperty(containedNodeId)) {
- var childNode = parentNode.containedNodes[containedNodeId];
-
- // force expand will expand the largest cluster size clusters. Since we cluster from outside in, we assume that
- // the largest cluster is the one that comes from outside
- if (force == true) {
- if (childNode.clusterSession == parentNode.clusterSessions[parentNode.clusterSessions.length-1]
- || openAll) {
- this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
- }
- }
- else {
- if (this._nodeInActiveArea(parentNode)) {
- this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
- }
- }
- }
- }
- }
- }
- },
-
- /**
- * ONLY CALLED FROM _expandClusterNode
- *
- * This function will expel a child_node from a parent_node. This is to de-cluster the node. This function will remove
- * the child node from the parent contained_node object and put it back into the global nodes object.
- * The same holds for the edge that was connected to the child node. It is moved back into the global edges object.
- *
- * @param {Node} parentNode | the parent node
- * @param {String} containedNodeId | child_node id as it is contained in the containedNodes object of the parent node
- * @param {Boolean} recursive | This will also check if the child needs to be expanded.
- * With force and recursive both true, the entire cluster is unpacked
- * @param {Boolean} force | This will disregard the zoom level and will expel this child from the parent
- * @param {Boolean} openAll | This will recursively force all nodes in the parent to be released
- * @private
- */
- _expelChildFromParent : function(parentNode, containedNodeId, recursive, force, openAll) {
- var childNode = parentNode.containedNodes[containedNodeId];
-
- // if child node has been added on smaller scale than current, kick out
- if (childNode.formationScale < this.scale || force == true) {
- // unselect all selected items
- this._unselectAll();
-
- // put the child node back in the global nodes object
- this.nodes[containedNodeId] = childNode;
-
- // release the contained edges from this childNode back into the global edges
- this._releaseContainedEdges(parentNode,childNode);
-
- // reconnect rerouted edges to the childNode
- this._connectEdgeBackToChild(parentNode,childNode);
-
- // validate all edges in dynamicEdges
- this._validateEdges(parentNode);
-
- // undo the changes from the clustering operation on the parent node
- parentNode.mass -= childNode.mass;
- parentNode.clusterSize -= childNode.clusterSize;
- parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
- parentNode.dynamicEdgesLength = parentNode.dynamicEdges.length;
-
- // place the child node near the parent, not at the exact same location to avoid chaos in the system
- childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
- childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
-
- // remove node from the list
- delete parentNode.containedNodes[containedNodeId];
-
- // check if there are other childs with this clusterSession in the parent.
- var othersPresent = false;
- for (var childNodeId in parentNode.containedNodes) {
- if (parentNode.containedNodes.hasOwnProperty(childNodeId)) {
- if (parentNode.containedNodes[childNodeId].clusterSession == childNode.clusterSession) {
- othersPresent = true;
- break;
- }
- }
- }
- // if there are no others, remove the cluster session from the list
- if (othersPresent == false) {
- parentNode.clusterSessions.pop();
- }
-
- this._repositionBezierNodes(childNode);
- // this._repositionBezierNodes(parentNode);
-
- // remove the clusterSession from the child node
- childNode.clusterSession = 0;
-
- // recalculate the size of the node on the next time the node is rendered
- parentNode.clearSizeCache();
-
- // restart the simulation to reorganise all nodes
- this.moving = true;
- }
-
- // check if a further expansion step is possible if recursivity is enabled
- if (recursive == true) {
- this._expandClusterNode(childNode,recursive,force,openAll);
- }
- },
-
-
- /**
- * position the bezier nodes at the center of the edges
- *
- * @param node
- * @private
- */
- _repositionBezierNodes : function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- node.dynamicEdges[i].positionBezierNode();
- }
- },
-
-
- /**
- * This function checks if any nodes at the end of their trees have edges below a threshold length
- * This function is called only from updateClusters()
- * forceLevelCollapse ignores the length of the edge and collapses one level
- * This means that a node with only one edge will be clustered with its connected node
- *
- * @private
- * @param {Boolean} force
- */
- _formClusters : function(force) {
- if (force == false) {
- this._formClustersByZoom();
- }
- else {
- this._forceClustersByZoom();
- }
- },
-
-
- /**
- * This function handles the clustering by zooming out, this is based on a minimum edge distance
- *
- * @private
- */
- _formClustersByZoom : function() {
- var dx,dy,length,
- minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-
- // check if any edges are shorter than minLength and start the clustering
- // the clustering favours the node with the larger mass
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- var edge = this.edges[edgeId];
- if (edge.connected) {
- if (edge.toId != edge.fromId) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- length = Math.sqrt(dx * dx + dy * dy);
-
-
- if (length < minLength) {
- // first check which node is larger
- var parentNode = edge.from;
- var childNode = edge.to;
- if (edge.to.mass > edge.from.mass) {
- parentNode = edge.to;
- childNode = edge.from;
- }
-
- if (childNode.dynamicEdgesLength == 1) {
- this._addToCluster(parentNode,childNode,false);
- }
- else if (parentNode.dynamicEdgesLength == 1) {
- this._addToCluster(childNode,parentNode,false);
- }
- }
- }
- }
- }
- }
- },
-
- /**
- * This function forces the network to cluster all nodes with only one connecting edge to their
- * connected node.
- *
- * @private
- */
- _forceClustersByZoom : function() {
- for (var nodeId in this.nodes) {
- // another node could have absorbed this child.
- if (this.nodes.hasOwnProperty(nodeId)) {
- var childNode = this.nodes[nodeId];
-
- // the edges can be swallowed by another decrease
- if (childNode.dynamicEdgesLength == 1 && childNode.dynamicEdges.length != 0) {
- var edge = childNode.dynamicEdges[0];
- var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
-
- // group to the largest node
- if (childNode.id != parentNode.id) {
- if (parentNode.mass > childNode.mass) {
- this._addToCluster(parentNode,childNode,true);
- }
- else {
- this._addToCluster(childNode,parentNode,true);
- }
- }
- }
- }
- }
- },
-
-
- /**
- * To keep the nodes of roughly equal size we normalize the cluster levels.
- * This function clusters a node to its smallest connected neighbour.
- *
- * @param node
- * @private
- */
- _clusterToSmallestNeighbour : function(node) {
- var smallestNeighbour = -1;
- var smallestNeighbourNode = null;
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- if (node.dynamicEdges[i] !== undefined) {
- var neighbour = null;
- if (node.dynamicEdges[i].fromId != node.id) {
- neighbour = node.dynamicEdges[i].from;
- }
- else if (node.dynamicEdges[i].toId != node.id) {
- neighbour = node.dynamicEdges[i].to;
- }
-
-
- if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
- smallestNeighbour = neighbour.clusterSessions.length;
- smallestNeighbourNode = neighbour;
- }
- }
- }
-
- if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
- this._addToCluster(neighbour, node, true);
- }
- },
-
-
- /**
- * This function forms clusters from hubs, it loops over all nodes
- *
- * @param {Boolean} force | Disregard zoom level
- * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
- * @private
- */
- _formClustersByHub : function(force, onlyEqual) {
- // we loop over all nodes in the list
- for (var nodeId in this.nodes) {
- // we check if it is still available since it can be used by the clustering in this loop
- if (this.nodes.hasOwnProperty(nodeId)) {
- this._formClusterFromHub(this.nodes[nodeId],force,onlyEqual);
- }
- }
- },
-
- /**
- * This function forms a cluster from a specific preselected hub node
- *
- * @param {Node} hubNode | the node we will cluster as a hub
- * @param {Boolean} force | Disregard zoom level
- * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
- * @param {Number} [absorptionSizeOffset] |
- * @private
- */
- _formClusterFromHub : function(hubNode, force, onlyEqual, absorptionSizeOffset) {
- if (absorptionSizeOffset === undefined) {
- absorptionSizeOffset = 0;
- }
- // we decide if the node is a hub
- if ((hubNode.dynamicEdgesLength >= this.hubThreshold && onlyEqual == false) ||
- (hubNode.dynamicEdgesLength == this.hubThreshold && onlyEqual == true)) {
- // initialize variables
- var dx,dy,length;
- var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
- var allowCluster = false;
-
- // we create a list of edges because the dynamicEdges change over the course of this loop
- var edgesIdarray = [];
- var amountOfInitialEdges = hubNode.dynamicEdges.length;
- for (var j = 0; j < amountOfInitialEdges; j++) {
- edgesIdarray.push(hubNode.dynamicEdges[j].id);
- }
-
- // if the hub clustering is not forces, we check if one of the edges connected
- // to a cluster is small enough based on the constants.clustering.clusterEdgeThreshold
- if (force == false) {
- allowCluster = false;
- for (j = 0; j < amountOfInitialEdges; j++) {
- var edge = this.edges[edgesIdarray[j]];
- if (edge !== undefined) {
- if (edge.connected) {
- if (edge.toId != edge.fromId) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- length = Math.sqrt(dx * dx + dy * dy);
-
- if (length < minLength) {
- allowCluster = true;
- break;
- }
- }
- }
- }
- }
- }
-
- // start the clustering if allowed
- if ((!force && allowCluster) || force) {
- // we loop over all edges INITIALLY connected to this hub
- for (j = 0; j < amountOfInitialEdges; j++) {
- edge = this.edges[edgesIdarray[j]];
- // the edge can be clustered by this function in a previous loop
- if (edge !== undefined) {
- var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
- // we do not want hubs to merge with other hubs nor do we want to cluster itself.
- if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
- (childNode.id != hubNode.id)) {
- this._addToCluster(hubNode,childNode,force);
- }
- }
- }
- }
- }
- },
-
-
-
- /**
- * This function adds the child node to the parent node, creating a cluster if it is not already.
- *
- * @param {Node} parentNode | this is the node that will house the child node
- * @param {Node} childNode | this node will be deleted from the global this.nodes and stored in the parent node
- * @param {Boolean} force | true will only update the remainingEdges at the very end of the clustering, ensuring single level collapse
- * @private
- */
- _addToCluster : function(parentNode, childNode, force) {
- // join child node in the parent node
- parentNode.containedNodes[childNode.id] = childNode;
-
- // manage all the edges connected to the child and parent nodes
- for (var i = 0; i < childNode.dynamicEdges.length; i++) {
- var edge = childNode.dynamicEdges[i];
- if (edge.toId == parentNode.id || edge.fromId == parentNode.id) { // edge connected to parentNode
- this._addToContainedEdges(parentNode,childNode,edge);
- }
- else {
- this._connectEdgeToCluster(parentNode,childNode,edge);
- }
- }
- // a contained node has no dynamic edges.
- childNode.dynamicEdges = [];
-
- // remove circular edges from clusters
- this._containCircularEdgesFromNode(parentNode,childNode);
-
-
- // remove the childNode from the global nodes object
- delete this.nodes[childNode.id];
-
- // update the properties of the child and parent
- var massBefore = parentNode.mass;
- childNode.clusterSession = this.clusterSession;
- parentNode.mass += childNode.mass;
- parentNode.clusterSize += childNode.clusterSize;
- parentNode.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-
- // keep track of the clustersessions so we can open the cluster up as it has been formed.
- if (parentNode.clusterSessions[parentNode.clusterSessions.length - 1] != this.clusterSession) {
- parentNode.clusterSessions.push(this.clusterSession);
- }
-
- // forced clusters only open from screen size and double tap
- if (force == true) {
- // parentNode.formationScale = Math.pow(1 - (1.0/11.0),this.clusterSession+3);
- parentNode.formationScale = 0;
- }
- else {
- parentNode.formationScale = this.scale; // The latest child has been added on this scale
- }
-
- // recalculate the size of the node on the next time the node is rendered
- parentNode.clearSizeCache();
-
- // set the pop-out scale for the childnode
- parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
-
- // nullify the movement velocity of the child, this is to avoid hectic behaviour
- childNode.clearVelocity();
-
- // the mass has altered, preservation of energy dictates the velocity to be updated
- parentNode.updateVelocity(massBefore);
-
- // restart the simulation to reorganise all nodes
- this.moving = true;
- },
-
-
- /**
- * This function will apply the changes made to the remainingEdges during the formation of the clusters.
- * This is a seperate function to allow for level-wise collapsing of the node barnesHutTree.
- * It has to be called if a level is collapsed. It is called by _formClusters().
- * @private
- */
- _updateDynamicEdges : function() {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- node.dynamicEdgesLength = node.dynamicEdges.length;
-
- // this corrects for multiple edges pointing at the same other node
- var correction = 0;
- if (node.dynamicEdgesLength > 1) {
- for (var j = 0; j < node.dynamicEdgesLength - 1; j++) {
- var edgeToId = node.dynamicEdges[j].toId;
- var edgeFromId = node.dynamicEdges[j].fromId;
- for (var k = j+1; k < node.dynamicEdgesLength; k++) {
- if ((node.dynamicEdges[k].toId == edgeToId && node.dynamicEdges[k].fromId == edgeFromId) ||
- (node.dynamicEdges[k].fromId == edgeToId && node.dynamicEdges[k].toId == edgeFromId)) {
- correction += 1;
- }
- }
- }
- }
- node.dynamicEdgesLength -= correction;
- }
- },
-
-
- /**
- * This adds an edge from the childNode to the contained edges of the parent node
- *
- * @param parentNode | Node object
- * @param childNode | Node object
- * @param edge | Edge object
- * @private
- */
- _addToContainedEdges : function(parentNode, childNode, edge) {
- // create an array object if it does not yet exist for this childNode
- if (!(parentNode.containedEdges.hasOwnProperty(childNode.id))) {
- parentNode.containedEdges[childNode.id] = []
- }
- // add this edge to the list
- parentNode.containedEdges[childNode.id].push(edge);
-
- // remove the edge from the global edges object
- delete this.edges[edge.id];
-
- // remove the edge from the parent object
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- if (parentNode.dynamicEdges[i].id == edge.id) {
- parentNode.dynamicEdges.splice(i,1);
- break;
- }
- }
- },
-
- /**
- * This function connects an edge that was connected to a child node to the parent node.
- * It keeps track of which nodes it has been connected to with the originalId array.
- *
- * @param {Node} parentNode | Node object
- * @param {Node} childNode | Node object
- * @param {Edge} edge | Edge object
- * @private
- */
- _connectEdgeToCluster : function(parentNode, childNode, edge) {
- // handle circular edges
- if (edge.toId == edge.fromId) {
- this._addToContainedEdges(parentNode, childNode, edge);
- }
- else {
- if (edge.toId == childNode.id) { // edge connected to other node on the "to" side
- edge.originalToId.push(childNode.id);
- edge.to = parentNode;
- edge.toId = parentNode.id;
- }
- else { // edge connected to other node with the "from" side
-
- edge.originalFromId.push(childNode.id);
- edge.from = parentNode;
- edge.fromId = parentNode.id;
- }
-
- this._addToReroutedEdges(parentNode,childNode,edge);
- }
- },
-
-
- /**
- * If a node is connected to itself, a circular edge is drawn. When clustering we want to contain
- * these edges inside of the cluster.
- *
- * @param parentNode
- * @param childNode
- * @private
- */
- _containCircularEdgesFromNode : function(parentNode, childNode) {
- // manage all the edges connected to the child and parent nodes
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- var edge = parentNode.dynamicEdges[i];
- // handle circular edges
- if (edge.toId == edge.fromId) {
- this._addToContainedEdges(parentNode, childNode, edge);
- }
- }
- },
-
-
- /**
- * This adds an edge from the childNode to the rerouted edges of the parent node
- *
- * @param parentNode | Node object
- * @param childNode | Node object
- * @param edge | Edge object
- * @private
- */
- _addToReroutedEdges : function(parentNode, childNode, edge) {
- // create an array object if it does not yet exist for this childNode
- // we store the edge in the rerouted edges so we can restore it when the cluster pops open
- if (!(parentNode.reroutedEdges.hasOwnProperty(childNode.id))) {
- parentNode.reroutedEdges[childNode.id] = [];
- }
- parentNode.reroutedEdges[childNode.id].push(edge);
-
- // this edge becomes part of the dynamicEdges of the cluster node
- parentNode.dynamicEdges.push(edge);
- },
-
-
-
- /**
- * This function connects an edge that was connected to a cluster node back to the child node.
- *
- * @param parentNode | Node object
- * @param childNode | Node object
- * @private
- */
- _connectEdgeBackToChild : function(parentNode, childNode) {
- if (parentNode.reroutedEdges.hasOwnProperty(childNode.id)) {
- for (var i = 0; i < parentNode.reroutedEdges[childNode.id].length; i++) {
- var edge = parentNode.reroutedEdges[childNode.id][i];
- if (edge.originalFromId[edge.originalFromId.length-1] == childNode.id) {
- edge.originalFromId.pop();
- edge.fromId = childNode.id;
- edge.from = childNode;
- }
- else {
- edge.originalToId.pop();
- edge.toId = childNode.id;
- edge.to = childNode;
- }
-
- // append this edge to the list of edges connecting to the childnode
- childNode.dynamicEdges.push(edge);
-
- // remove the edge from the parent object
- for (var j = 0; j < parentNode.dynamicEdges.length; j++) {
- if (parentNode.dynamicEdges[j].id == edge.id) {
- parentNode.dynamicEdges.splice(j,1);
- break;
- }
- }
- }
- // remove the entry from the rerouted edges
- delete parentNode.reroutedEdges[childNode.id];
- }
- },
-
-
- /**
- * When loops are clustered, an edge can be both in the rerouted array and the contained array.
- * This function is called last to verify that all edges in dynamicEdges are in fact connected to the
- * parentNode
- *
- * @param parentNode | Node object
- * @private
- */
- _validateEdges : function(parentNode) {
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- var edge = parentNode.dynamicEdges[i];
- if (parentNode.id != edge.toId && parentNode.id != edge.fromId) {
- parentNode.dynamicEdges.splice(i,1);
- }
- }
- },
-
-
- /**
- * This function released the contained edges back into the global domain and puts them back into the
- * dynamic edges of both parent and child.
- *
- * @param {Node} parentNode |
- * @param {Node} childNode |
- * @private
- */
- _releaseContainedEdges : function(parentNode, childNode) {
- for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
- var edge = parentNode.containedEdges[childNode.id][i];
-
- // put the edge back in the global edges object
- this.edges[edge.id] = edge;
-
- // put the edge back in the dynamic edges of the child and parent
- childNode.dynamicEdges.push(edge);
- parentNode.dynamicEdges.push(edge);
- }
- // remove the entry from the contained edges
- delete parentNode.containedEdges[childNode.id];
-
- },
-
-
-
-
- // ------------------- UTILITY FUNCTIONS ---------------------------- //
-
-
- /**
- * This updates the node labels for all nodes (for debugging purposes)
- */
- updateLabels : function() {
- var nodeId;
- // update node labels
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.clusterSize > 1) {
- node.label = "[".concat(String(node.clusterSize),"]");
- }
- }
- }
-
- // update node labels
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.clusterSize == 1) {
- if (node.originalLabel !== undefined) {
- node.label = node.originalLabel;
- }
- else {
- node.label = String(node.id);
- }
- }
- }
- }
-
- // /* Debug Override */
- // for (nodeId in this.nodes) {
- // if (this.nodes.hasOwnProperty(nodeId)) {
- // node = this.nodes[nodeId];
- // node.label = String(node.level);
- // }
- // }
-
- },
-
-
- /**
- * We want to keep the cluster level distribution rather small. This means we do not want unclustered nodes
- * if the rest of the nodes are already a few cluster levels in.
- * To fix this we use this function. It determines the min and max cluster level and sends nodes that have not
- * clustered enough to the clusterToSmallestNeighbours function.
- */
- normalizeClusterLevels : function() {
- var maxLevel = 0;
- var minLevel = 1e9;
- var clusterLevel = 0;
- var nodeId;
-
- // we loop over all nodes in the list
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- clusterLevel = this.nodes[nodeId].clusterSessions.length;
- if (maxLevel < clusterLevel) {maxLevel = clusterLevel;}
- if (minLevel > clusterLevel) {minLevel = clusterLevel;}
- }
- }
-
- if (maxLevel - minLevel > this.constants.clustering.clusterLevelDifference) {
- var amountOfNodes = this.nodeIndices.length;
- var targetLevel = maxLevel - this.constants.clustering.clusterLevelDifference;
- // we loop over all nodes in the list
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].clusterSessions.length < targetLevel) {
- this._clusterToSmallestNeighbour(this.nodes[nodeId]);
- }
- }
- }
- this._updateNodeIndexList();
- this._updateDynamicEdges();
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length != amountOfNodes) {
- this.clusterSession += 1;
- }
- }
- },
-
-
-
- /**
- * This function determines if the cluster we want to decluster is in the active area
- * this means around the zoom center
- *
- * @param {Node} node
- * @returns {boolean}
- * @private
- */
- _nodeInActiveArea : function(node) {
- return (
- Math.abs(node.x - this.areaCenter.x) <= this.constants.clustering.activeAreaBoxSize/this.scale
- &&
- Math.abs(node.y - this.areaCenter.y) <= this.constants.clustering.activeAreaBoxSize/this.scale
- )
- },
-
-
- /**
- * This is an adaptation of the original repositioning function. This is called if the system is clustered initially
- * It puts large clusters away from the center and randomizes the order.
- *
- */
- repositionNodes : function() {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- if ((node.xFixed == false || node.yFixed == false)) {
- var radius = 10 * 0.1*this.nodeIndices.length * Math.min(100,node.mass);
- var angle = 2 * Math.PI * Math.random();
- if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
- if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
- this._repositionBezierNodes(node);
- }
- }
- },
-
-
- /**
- * We determine how many connections denote an important hub.
- * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
- *
- * @private
- */
- _getHubSize : function() {
- var average = 0;
- var averageSquared = 0;
- var hubCounter = 0;
- var largestHub = 0;
-
- for (var i = 0; i < this.nodeIndices.length; i++) {
-
- var node = this.nodes[this.nodeIndices[i]];
- if (node.dynamicEdgesLength > largestHub) {
- largestHub = node.dynamicEdgesLength;
- }
- average += node.dynamicEdgesLength;
- averageSquared += Math.pow(node.dynamicEdgesLength,2);
- hubCounter += 1;
- }
- average = average / hubCounter;
- averageSquared = averageSquared / hubCounter;
-
- var variance = averageSquared - Math.pow(average,2);
-
- var standardDeviation = Math.sqrt(variance);
-
- this.hubThreshold = Math.floor(average + 2*standardDeviation);
-
- // always have at least one to cluster
- if (this.hubThreshold > largestHub) {
- this.hubThreshold = largestHub;
- }
-
- // console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
- // console.log("hubThreshold:",this.hubThreshold);
- },
-
-
- /**
- * We reduce the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
- * with this amount we can cluster specifically on these chains.
- *
- * @param {Number} fraction | between 0 and 1, the percentage of chains to reduce
- * @private
- */
- _reduceAmountOfChains : function(fraction) {
- this.hubThreshold = 2;
- var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
- if (reduceAmount > 0) {
- this._formClusterFromHub(this.nodes[nodeId],true,true,1);
- reduceAmount -= 1;
- }
- }
- }
- }
- },
-
- /**
- * We get the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
- * with this amount we can cluster specifically on these chains.
- *
- * @private
- */
- _getChainFraction : function() {
- var chains = 0;
- var total = 0;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].dynamicEdgesLength == 2 && this.nodes[nodeId].dynamicEdges.length >= 2) {
- chains += 1;
- }
- total += 1;
- }
- }
- return chains/total;
- }
-
- };
-
-
- var SelectionMixin = {
-
- /**
- * This function can be called from the _doInAllSectors function
- *
- * @param object
- * @param overlappingNodes
- * @private
- */
- _getNodesOverlappingWith : function(object, overlappingNodes) {
- var nodes = this.nodes;
- for (var nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- if (nodes[nodeId].isOverlappingWith(object)) {
- overlappingNodes.push(nodeId);
- }
- }
- }
- },
-
- /**
- * retrieve all nodes overlapping with given object
- * @param {Object} object An object with parameters left, top, right, bottom
- * @return {Number[]} An array with id's of the overlapping nodes
- * @private
- */
- _getAllNodesOverlappingWith : function (object) {
- var overlappingNodes = [];
- this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes);
- return overlappingNodes;
- },
-
-
- /**
- * Return a position object in canvasspace from a single point in screenspace
- *
- * @param pointer
- * @returns {{left: number, top: number, right: number, bottom: number}}
- * @private
- */
- _pointerToPositionObject : function(pointer) {
- var x = this._XconvertDOMtoCanvas(pointer.x);
- var y = this._YconvertDOMtoCanvas(pointer.y);
-
- return {left: x,
- top: y,
- right: x,
- bottom: y};
- },
-
-
- /**
- * Get the top node at the a specific point (like a click)
- *
- * @param {{x: Number, y: Number}} pointer
- * @return {Node | null} node
- * @private
- */
- _getNodeAt : function (pointer) {
- // we first check if this is an navigation controls element
- var positionObject = this._pointerToPositionObject(pointer);
- var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
-
- // if there are overlapping nodes, select the last one, this is the
- // one which is drawn on top of the others
- if (overlappingNodes.length > 0) {
- return this.nodes[overlappingNodes[overlappingNodes.length - 1]];
- }
- else {
- return null;
- }
- },
-
-
- /**
- * retrieve all edges overlapping with given object, selector is around center
- * @param {Object} object An object with parameters left, top, right, bottom
- * @return {Number[]} An array with id's of the overlapping nodes
- * @private
- */
- _getEdgesOverlappingWith : function (object, overlappingEdges) {
- var edges = this.edges;
- for (var edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- if (edges[edgeId].isOverlappingWith(object)) {
- overlappingEdges.push(edgeId);
- }
- }
- }
- },
-
-
- /**
- * retrieve all nodes overlapping with given object
- * @param {Object} object An object with parameters left, top, right, bottom
- * @return {Number[]} An array with id's of the overlapping nodes
- * @private
- */
- _getAllEdgesOverlappingWith : function (object) {
- var overlappingEdges = [];
- this._doInAllActiveSectors("_getEdgesOverlappingWith",object,overlappingEdges);
- return overlappingEdges;
- },
-
- /**
- * Place holder. To implement change the _getNodeAt to a _getObjectAt. Have the _getObjectAt call
- * _getNodeAt and _getEdgesAt, then priortize the selection to user preferences.
- *
- * @param pointer
- * @returns {null}
- * @private
- */
- _getEdgeAt : function(pointer) {
- var positionObject = this._pointerToPositionObject(pointer);
- var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
-
- if (overlappingEdges.length > 0) {
- return this.edges[overlappingEdges[overlappingEdges.length - 1]];
- }
- else {
- return null;
- }
- },
-
-
- /**
- * Add object to the selection array.
- *
- * @param obj
- * @private
- */
- _addToSelection : function(obj) {
- if (obj instanceof Node) {
- this.selectionObj.nodes[obj.id] = obj;
- }
- else {
- this.selectionObj.edges[obj.id] = obj;
- }
- },
-
- /**
- * Add object to the selection array.
- *
- * @param obj
- * @private
- */
- _addToHover : function(obj) {
- if (obj instanceof Node) {
- this.hoverObj.nodes[obj.id] = obj;
- }
- else {
- this.hoverObj.edges[obj.id] = obj;
- }
- },
-
-
- /**
- * Remove a single option from selection.
- *
- * @param {Object} obj
- * @private
- */
- _removeFromSelection : function(obj) {
- if (obj instanceof Node) {
- delete this.selectionObj.nodes[obj.id];
- }
- else {
- delete this.selectionObj.edges[obj.id];
- }
- },
-
- /**
- * Unselect all. The selectionObj is useful for this.
- *
- * @param {Boolean} [doNotTrigger] | ignore trigger
- * @private
- */
- _unselectAll : function(doNotTrigger) {
- if (doNotTrigger === undefined) {
- doNotTrigger = false;
- }
- for(var nodeId in this.selectionObj.nodes) {
- if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- this.selectionObj.nodes[nodeId].unselect();
- }
- }
- for(var edgeId in this.selectionObj.edges) {
- if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
- this.selectionObj.edges[edgeId].unselect();
- }
- }
-
- this.selectionObj = {nodes:{},edges:{}};
-
- if (doNotTrigger == false) {
- this.emit('select', this.getSelection());
- }
- },
-
- /**
- * Unselect all clusters. The selectionObj is useful for this.
- *
- * @param {Boolean} [doNotTrigger] | ignore trigger
- * @private
- */
- _unselectClusters : function(doNotTrigger) {
- if (doNotTrigger === undefined) {
- doNotTrigger = false;
- }
-
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
- this.selectionObj.nodes[nodeId].unselect();
- this._removeFromSelection(this.selectionObj.nodes[nodeId]);
- }
- }
- }
-
- if (doNotTrigger == false) {
- this.emit('select', this.getSelection());
- }
- },
-
-
- /**
- * return the number of selected nodes
- *
- * @returns {number}
- * @private
- */
- _getSelectedNodeCount : function() {
- var count = 0;
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- count += 1;
- }
- }
- return count;
- },
-
- /**
- * return the selected node
- *
- * @returns {number}
- * @private
- */
- _getSelectedNode : function() {
- for (var nodeId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- return this.selectionObj.nodes[nodeId];
- }
- }
- return null;
- },
-
- /**
- * return the selected edge
- *
- * @returns {number}
- * @private
- */
- _getSelectedEdge : function() {
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- return this.selectionObj.edges[edgeId];
- }
- }
- return null;
- },
-
-
- /**
- * return the number of selected edges
- *
- * @returns {number}
- * @private
- */
- _getSelectedEdgeCount : function() {
- var count = 0;
- for (var edgeId in this.selectionObj.edges) {
- if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
- count += 1;
- }
- }
- return count;
- },
-
-
- /**
- * return the number of selected objects.
- *
- * @returns {number}
- * @private
- */
- _getSelectedObjectCount : function() {
- var count = 0;
- for(var nodeId in this.selectionObj.nodes) {
- if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- count += 1;
- }
- }
- for(var edgeId in this.selectionObj.edges) {
- if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
- count += 1;
- }
- }
- return count;
- },
-
- /**
- * Check if anything is selected
- *
- * @returns {boolean}
- * @private
- */
- _selectionIsEmpty : function() {
- for(var nodeId in this.selectionObj.nodes) {
- if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- return false;
- }
- }
- for(var edgeId in this.selectionObj.edges) {
- if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
- return false;
- }
- }
- return true;
- },
-
-
- /**
- * check if one of the selected nodes is a cluster.
- *
- * @returns {boolean}
- * @private
- */
- _clusterInSelection : function() {
- for(var nodeId in this.selectionObj.nodes) {
- if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
- return true;
- }
- }
- }
- return false;
- },
-
- /**
- * select the edges connected to the node that is being selected
- *
- * @param {Node} node
- * @private
- */
- _selectConnectedEdges : function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- var edge = node.dynamicEdges[i];
- edge.select();
- this._addToSelection(edge);
- }
- },
-
- /**
- * select the edges connected to the node that is being selected
- *
- * @param {Node} node
- * @private
- */
- _hoverConnectedEdges : function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- var edge = node.dynamicEdges[i];
- edge.hover = true;
- this._addToHover(edge);
- }
- },
-
-
- /**
- * unselect the edges connected to the node that is being selected
- *
- * @param {Node} node
- * @private
- */
- _unselectConnectedEdges : function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- var edge = node.dynamicEdges[i];
- edge.unselect();
- this._removeFromSelection(edge);
- }
- },
-
-
-
-
- /**
- * This is called when someone clicks on a node. either select or deselect it.
- * If there is an existing selection and we don't want to append to it, clear the existing selection
- *
- * @param {Node || Edge} object
- * @param {Boolean} append
- * @param {Boolean} [doNotTrigger] | ignore trigger
- * @private
- */
- _selectObject : function(object, append, doNotTrigger, highlightEdges) {
- if (doNotTrigger === undefined) {
- doNotTrigger = false;
- }
- if (highlightEdges === undefined) {
- highlightEdges = true;
- }
-
- if (this._selectionIsEmpty() == false && append == false && this.forceAppendSelection == false) {
- this._unselectAll(true);
- }
-
- if (object.selected == false) {
- object.select();
- this._addToSelection(object);
- if (object instanceof Node && this.blockConnectingEdgeSelection == false && highlightEdges == true) {
- this._selectConnectedEdges(object);
- }
- }
- else {
- object.unselect();
- this._removeFromSelection(object);
- }
-
- if (doNotTrigger == false) {
- this.emit('select', this.getSelection());
- }
- },
-
-
- /**
- * This is called when someone clicks on a node. either select or deselect it.
- * If there is an existing selection and we don't want to append to it, clear the existing selection
- *
- * @param {Node || Edge} object
- * @private
- */
- _blurObject : function(object) {
- if (object.hover == true) {
- object.hover = false;
- this.emit("blurNode",{node:object.id});
- }
- },
-
- /**
- * This is called when someone clicks on a node. either select or deselect it.
- * If there is an existing selection and we don't want to append to it, clear the existing selection
- *
- * @param {Node || Edge} object
- * @private
- */
- _hoverObject : function(object) {
- if (object.hover == false) {
- object.hover = true;
- this._addToHover(object);
- if (object instanceof Node) {
- this.emit("hoverNode",{node:object.id});
- }
- }
- if (object instanceof Node) {
- this._hoverConnectedEdges(object);
- }
- },
-
-
- /**
- * handles the selection part of the touch, only for navigation controls elements;
- * Touch is triggered before tap, also before hold. Hold triggers after a while.
- * This is the most responsive solution
- *
- * @param {Object} pointer
- * @private
- */
- _handleTouch : function(pointer) {
- },
-
-
- /**
- * handles the selection part of the tap;
- *
- * @param {Object} pointer
- * @private
- */
- _handleTap : function(pointer) {
- var node = this._getNodeAt(pointer);
- if (node != null) {
- this._selectObject(node,false);
- }
- else {
- var edge = this._getEdgeAt(pointer);
- if (edge != null) {
- this._selectObject(edge,false);
- }
- else {
- this._unselectAll();
- }
- }
- this.emit("click", this.getSelection());
- this._redraw();
- },
-
-
- /**
- * handles the selection part of the double tap and opens a cluster if needed
- *
- * @param {Object} pointer
- * @private
- */
- _handleDoubleTap : function(pointer) {
- var node = this._getNodeAt(pointer);
- if (node != null && node !== undefined) {
- // we reset the areaCenter here so the opening of the node will occur
- this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
- "y" : this._YconvertDOMtoCanvas(pointer.y)};
- this.openCluster(node);
- }
- this.emit("doubleClick", this.getSelection());
- },
-
-
- /**
- * Handle the onHold selection part
- *
- * @param pointer
- * @private
- */
- _handleOnHold : function(pointer) {
- var node = this._getNodeAt(pointer);
- if (node != null) {
- this._selectObject(node,true);
- }
- else {
- var edge = this._getEdgeAt(pointer);
- if (edge != null) {
- this._selectObject(edge,true);
- }
- }
- this._redraw();
- },
-
-
- /**
- * handle the onRelease event. These functions are here for the navigation controls module.
- *
- * @private
- */
- _handleOnRelease : function(pointer) {
-
- },
-
-
-
- /**
- *
- * retrieve the currently selected objects
- * @return {Number[] | String[]} selection An array with the ids of the
- * selected nodes.
- */
- getSelection : function() {
- var nodeIds = this.getSelectedNodes();
- var edgeIds = this.getSelectedEdges();
- return {nodes:nodeIds, edges:edgeIds};
- },
-
- /**
- *
- * retrieve the currently selected nodes
- * @return {String} selection An array with the ids of the
- * selected nodes.
- */
- getSelectedNodes : function() {
- var idArray = [];
- for(var nodeId in this.selectionObj.nodes) {
- if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- idArray.push(nodeId);
- }
- }
- return idArray
- },
-
- /**
- *
- * retrieve the currently selected edges
- * @return {Array} selection An array with the ids of the
- * selected nodes.
- */
- getSelectedEdges : function() {
- var idArray = [];
- for(var edgeId in this.selectionObj.edges) {
- if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
- idArray.push(edgeId);
- }
- }
- return idArray;
- },
-
-
- /**
- * select zero or more nodes
- * @param {Number[] | String[]} selection An array with the ids of the
- * selected nodes.
- */
- 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
- this._unselectAll(true);
-
- 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');
- }
- this._selectObject(node,true,true);
- }
-
- console.log("setSelection is deprecated. Please use selectNodes instead.")
-
- this.redraw();
- },
-
-
- /**
- * select zero or more nodes with the option to highlight edges
- * @param {Number[] | String[]} selection An array with the ids of the
- * selected nodes.
- * @param {boolean} [highlightEdges]
- */
- selectNodes : function(selection, highlightEdges) {
- var i, iMax, id;
-
- if (!selection || (selection.length == undefined))
- throw 'Selection must be an array with ids';
-
- // first unselect any selected node
- this._unselectAll(true);
-
- 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');
- }
- this._selectObject(node,true,true,highlightEdges);
- }
- this.redraw();
- },
-
-
- /**
- * select zero or more edges
- * @param {Number[] | String[]} selection An array with the ids of the
- * selected nodes.
- */
- selectEdges : function(selection) {
- var i, iMax, id;
-
- if (!selection || (selection.length == undefined))
- throw 'Selection must be an array with ids';
-
- // first unselect any selected node
- this._unselectAll(true);
-
- for (i = 0, iMax = selection.length; i < iMax; i++) {
- id = selection[i];
-
- var edge = this.edges[id];
- if (!edge) {
- throw new RangeError('Edge with id "' + id + '" not found');
- }
- this._selectObject(edge,true,true,highlightEdges);
- }
- this.redraw();
- },
-
- /**
- * Validate the selection: remove ids of nodes which no longer exist
- * @private
- */
- _updateSelection : function () {
- for(var nodeId in this.selectionObj.nodes) {
- if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- if (!this.nodes.hasOwnProperty(nodeId)) {
- delete this.selectionObj.nodes[nodeId];
- }
- }
- }
- for(var edgeId in this.selectionObj.edges) {
- if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
- if (!this.edges.hasOwnProperty(edgeId)) {
- delete this.selectionObj.edges[edgeId];
- }
- }
- }
- }
- };
-
-
-
- /**
- * Created by Alex on 1/22/14.
- */
-
- var NavigationMixin = {
-
- _cleanNavigation : function() {
- // clean up previosu navigation items
- var wrapper = document.getElementById('network-navigation_wrapper');
- if (wrapper != null) {
- this.containerElement.removeChild(wrapper);
- }
- document.onmouseup = null;
- },
-
- /**
- * Creation of the navigation controls nodes. They are drawn over the rest of the nodes and are not affected by scale and translation
- * they have a triggerFunction which is called on click. If the position of the navigation controls is dependent
- * on this.frame.canvas.clientWidth or this.frame.canvas.clientHeight, we flag horizontalAlignLeft and verticalAlignTop false.
- * This means that the location will be corrected by the _relocateNavigation function on a size change of the canvas.
- *
- * @private
- */
- _loadNavigationElements : function() {
- this._cleanNavigation();
-
- this.navigationDivs = {};
- var navigationDivs = ['up','down','left','right','zoomIn','zoomOut','zoomExtends'];
- var navigationDivActions = ['_moveUp','_moveDown','_moveLeft','_moveRight','_zoomIn','_zoomOut','zoomExtent'];
-
- this.navigationDivs['wrapper'] = document.createElement('div');
- this.navigationDivs['wrapper'].id = "network-navigation_wrapper";
- this.navigationDivs['wrapper'].style.position = "absolute";
- this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
- this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
- this.containerElement.insertBefore(this.navigationDivs['wrapper'],this.frame);
-
- for (var i = 0; i < navigationDivs.length; i++) {
- this.navigationDivs[navigationDivs[i]] = document.createElement('div');
- this.navigationDivs[navigationDivs[i]].id = "network-navigation_" + navigationDivs[i];
- this.navigationDivs[navigationDivs[i]].className = "network-navigation " + navigationDivs[i];
- this.navigationDivs['wrapper'].appendChild(this.navigationDivs[navigationDivs[i]]);
- this.navigationDivs[navigationDivs[i]].onmousedown = this[navigationDivActions[i]].bind(this);
- }
-
- document.onmouseup = this._stopMovement.bind(this);
- },
-
- /**
- * this stops all movement induced by the navigation buttons
- *
- * @private
- */
- _stopMovement : function() {
- this._xStopMoving();
- this._yStopMoving();
- this._stopZoom();
- },
-
-
- /**
- * stops the actions performed by page up and down etc.
- *
- * @param event
- * @private
- */
- _preventDefault : function(event) {
- if (event !== undefined) {
- if (event.preventDefault) {
- event.preventDefault();
- } else {
- event.returnValue = false;
- }
- }
- },
-
-
- /**
- * move the screen up
- * By using the increments, instead of adding a fixed number to the translation, we keep fluent and
- * instant movement. The onKeypress event triggers immediately, then pauses, then triggers frequently
- * To avoid this behaviour, we do the translation in the start loop.
- *
- * @private
- */
- _moveUp : function(event) {
- this.yIncrement = this.constants.keyboard.speed.y;
- this.start(); // if there is no node movement, the calculation wont be done
- this._preventDefault(event);
- if (this.navigationDivs) {
- this.navigationDivs['up'].className += " active";
- }
- },
-
-
- /**
- * move the screen down
- * @private
- */
- _moveDown : function(event) {
- this.yIncrement = -this.constants.keyboard.speed.y;
- this.start(); // if there is no node movement, the calculation wont be done
- this._preventDefault(event);
- if (this.navigationDivs) {
- this.navigationDivs['down'].className += " active";
- }
- },
-
-
- /**
- * move the screen left
- * @private
- */
- _moveLeft : function(event) {
- this.xIncrement = this.constants.keyboard.speed.x;
- this.start(); // if there is no node movement, the calculation wont be done
- this._preventDefault(event);
- if (this.navigationDivs) {
- this.navigationDivs['left'].className += " active";
- }
- },
-
-
- /**
- * move the screen right
- * @private
- */
- _moveRight : function(event) {
- this.xIncrement = -this.constants.keyboard.speed.y;
- this.start(); // if there is no node movement, the calculation wont be done
- this._preventDefault(event);
- if (this.navigationDivs) {
- this.navigationDivs['right'].className += " active";
- }
- },
-
-
- /**
- * Zoom in, using the same method as the movement.
- * @private
- */
- _zoomIn : function(event) {
- this.zoomIncrement = this.constants.keyboard.speed.zoom;
- this.start(); // if there is no node movement, the calculation wont be done
- this._preventDefault(event);
- if (this.navigationDivs) {
- this.navigationDivs['zoomIn'].className += " active";
- }
- },
-
-
- /**
- * Zoom out
- * @private
- */
- _zoomOut : function() {
- this.zoomIncrement = -this.constants.keyboard.speed.zoom;
- this.start(); // if there is no node movement, the calculation wont be done
- this._preventDefault(event);
- if (this.navigationDivs) {
- this.navigationDivs['zoomOut'].className += " active";
- }
- },
-
-
- /**
- * Stop zooming and unhighlight the zoom controls
- * @private
- */
- _stopZoom : function() {
- this.zoomIncrement = 0;
- if (this.navigationDivs) {
- this.navigationDivs['zoomIn'].className = this.navigationDivs['zoomIn'].className.replace(" active","");
- this.navigationDivs['zoomOut'].className = this.navigationDivs['zoomOut'].className.replace(" active","");
- }
- },
-
-
- /**
- * Stop moving in the Y direction and unHighlight the up and down
- * @private
- */
- _yStopMoving : function() {
- this.yIncrement = 0;
- if (this.navigationDivs) {
- this.navigationDivs['up'].className = this.navigationDivs['up'].className.replace(" active","");
- this.navigationDivs['down'].className = this.navigationDivs['down'].className.replace(" active","");
- }
- },
-
-
- /**
- * Stop moving in the X direction and unHighlight left and right.
- * @private
- */
- _xStopMoving : function() {
- this.xIncrement = 0;
- if (this.navigationDivs) {
- this.navigationDivs['left'].className = this.navigationDivs['left'].className.replace(" active","");
- this.navigationDivs['right'].className = this.navigationDivs['right'].className.replace(" active","");
- }
- }
-
-
- };
-
- /**
- * Created by Alex on 2/10/14.
- */
-
-
- var networkMixinLoaders = {
-
- /**
- * Load a mixin into the network object
- *
- * @param {Object} sourceVariable | this object has to contain functions.
- * @private
- */
- _loadMixin: function (sourceVariable) {
- for (var mixinFunction in sourceVariable) {
- if (sourceVariable.hasOwnProperty(mixinFunction)) {
- Network.prototype[mixinFunction] = sourceVariable[mixinFunction];
- }
- }
- },
-
-
- /**
- * removes a mixin from the network object.
- *
- * @param {Object} sourceVariable | this object has to contain functions.
- * @private
- */
- _clearMixin: function (sourceVariable) {
- for (var mixinFunction in sourceVariable) {
- if (sourceVariable.hasOwnProperty(mixinFunction)) {
- Network.prototype[mixinFunction] = undefined;
- }
- }
- },
-
-
- /**
- * Mixin the physics system and initialize the parameters required.
- *
- * @private
- */
- _loadPhysicsSystem: function () {
- this._loadMixin(physicsMixin);
- this._loadSelectedForceSolver();
- if (this.constants.configurePhysics == true) {
- this._loadPhysicsConfiguration();
- }
- },
-
-
- /**
- * Mixin the cluster system and initialize the parameters required.
- *
- * @private
- */
- _loadClusterSystem: function () {
- this.clusterSession = 0;
- this.hubThreshold = 5;
- this._loadMixin(ClusterMixin);
- },
-
-
- /**
- * Mixin the sector system and initialize the parameters required
- *
- * @private
- */
- _loadSectorSystem: function () {
- this.sectors = {};
- this.activeSector = ["default"];
- this.sectors["active"] = {};
- this.sectors["active"]["default"] = {"nodes": {},
- "edges": {},
- "nodeIndices": [],
- "formationScale": 1.0,
- "drawingNode": undefined };
- this.sectors["frozen"] = {};
- this.sectors["support"] = {"nodes": {},
- "edges": {},
- "nodeIndices": [],
- "formationScale": 1.0,
- "drawingNode": undefined };
-
- this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"]; // the node indices list is used to speed up the computation of the repulsion fields
-
- this._loadMixin(SectorMixin);
- },
-
-
- /**
- * Mixin the selection system and initialize the parameters required
- *
- * @private
- */
- _loadSelectionSystem: function () {
- this.selectionObj = {nodes: {}, edges: {}};
-
- this._loadMixin(SelectionMixin);
- },
-
-
- /**
- * Mixin the navigationUI (User Interface) system and initialize the parameters required
- *
- * @private
- */
- _loadManipulationSystem: function () {
- // reset global variables -- these are used by the selection of nodes and edges.
- this.blockConnectingEdgeSelection = false;
- this.forceAppendSelection = false;
-
- if (this.constants.dataManipulation.enabled == true) {
- // load the manipulator HTML elements. All styling done in css.
- if (this.manipulationDiv === undefined) {
- this.manipulationDiv = document.createElement('div');
- this.manipulationDiv.className = 'network-manipulationDiv';
- this.manipulationDiv.id = 'network-manipulationDiv';
- if (this.editMode == true) {
- this.manipulationDiv.style.display = "block";
- }
- else {
- this.manipulationDiv.style.display = "none";
- }
- this.containerElement.insertBefore(this.manipulationDiv, this.frame);
- }
-
- if (this.editModeDiv === undefined) {
- this.editModeDiv = document.createElement('div');
- this.editModeDiv.className = 'network-manipulation-editMode';
- this.editModeDiv.id = 'network-manipulation-editMode';
- if (this.editMode == true) {
- this.editModeDiv.style.display = "none";
- }
- else {
- this.editModeDiv.style.display = "block";
- }
- this.containerElement.insertBefore(this.editModeDiv, this.frame);
- }
-
- if (this.closeDiv === undefined) {
- this.closeDiv = document.createElement('div');
- this.closeDiv.className = 'network-manipulation-closeDiv';
- this.closeDiv.id = 'network-manipulation-closeDiv';
- this.closeDiv.style.display = this.manipulationDiv.style.display;
- this.containerElement.insertBefore(this.closeDiv, this.frame);
- }
-
- // load the manipulation functions
- this._loadMixin(manipulationMixin);
-
- // create the manipulator toolbar
- this._createManipulatorBar();
- }
- else {
- if (this.manipulationDiv !== undefined) {
- // removes all the bindings and overloads
- this._createManipulatorBar();
- // remove the manipulation divs
- this.containerElement.removeChild(this.manipulationDiv);
- this.containerElement.removeChild(this.editModeDiv);
- this.containerElement.removeChild(this.closeDiv);
-
- this.manipulationDiv = undefined;
- this.editModeDiv = undefined;
- this.closeDiv = undefined;
- // remove the mixin functions
- this._clearMixin(manipulationMixin);
- }
- }
- },
-
-
- /**
- * Mixin the navigation (User Interface) system and initialize the parameters required
- *
- * @private
- */
- _loadNavigationControls: function () {
- this._loadMixin(NavigationMixin);
-
- // the clean function removes the button divs, this is done to remove the bindings.
- this._cleanNavigation();
- if (this.constants.navigation.enabled == true) {
- this._loadNavigationElements();
- }
- },
-
-
- /**
- * Mixin the hierarchical layout system.
- *
- * @private
- */
- _loadHierarchySystem: function () {
- this._loadMixin(HierarchicalLayoutMixin);
- }
-
- };
-
- /**
- * @constructor Network
- * Create a network visualization, displaying nodes and edges.
- *
- * @param {Element} container The DOM element in which the Network will
- * be created. Normally a div element.
- * @param {Object} data An object containing parameters
- * {Array} nodes
- * {Array} edges
- * @param {Object} options Options
- */
- function Network (container, data, options) {
- if (!(this instanceof Network)) {
- throw new SyntaxError('Constructor must be called with the new operator');
- }
-
- this._initializeMixinLoaders();
-
- // create variables and set default values
- this.containerElement = container;
- this.width = '100%';
- this.height = '100%';
-
- // render and calculation settings
- this.renderRefreshRate = 60; // hz (fps)
- this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
- this.renderTime = 0.5 * this.renderTimestep; // measured time it takes to render a frame
- this.maxPhysicsTicksPerRender = 3; // max amount of physics ticks per render step.
- this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation
-
- this.stabilize = true; // stabilize before displaying the network
- this.selectable = true;
- this.initializing = true;
-
- // these functions are triggered when the dataset is edited
- this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
-
-
- // set constant values
- this.constants = {
- nodes: {
- radiusMin: 5,
- radiusMax: 20,
- radius: 5,
- shape: 'ellipse',
- image: undefined,
- widthMin: 16, // px
- widthMax: 64, // px
- fixed: false,
- fontColor: 'black',
- fontSize: 14, // px
- fontFace: 'verdana',
- level: -1,
- color: {
- border: '#2B7CE9',
- background: '#97C2FC',
- highlight: {
- border: '#2B7CE9',
- background: '#D2E5FF'
- },
- hover: {
- border: '#2B7CE9',
- background: '#D2E5FF'
- }
- },
- borderColor: '#2B7CE9',
- backgroundColor: '#97C2FC',
- highlightColor: '#D2E5FF',
- group: undefined
- },
- edges: {
- widthMin: 1,
- widthMax: 15,
- width: 1,
- widthSelectionMultiplier: 2,
- hoverWidth: 1.5,
- style: 'line',
- color: {
- color:'#848484',
- highlight:'#848484',
- hover: '#848484'
- },
- fontColor: '#343434',
- fontSize: 14, // px
- fontFace: 'arial',
- fontFill: 'white',
- arrowScaleFactor: 1,
- dash: {
- length: 10,
- gap: 5,
- altLength: undefined
- }
- },
- configurePhysics:false,
- physics: {
- barnesHut: {
- enabled: true,
- theta: 1 / 0.6, // inverted to save time during calculation
- gravitationalConstant: -2000,
- centralGravity: 0.3,
- springLength: 95,
- springConstant: 0.04,
- damping: 0.09
- },
- repulsion: {
- centralGravity: 0.1,
- springLength: 200,
- springConstant: 0.05,
- nodeDistance: 100,
- damping: 0.09
- },
- hierarchicalRepulsion: {
- enabled: false,
- centralGravity: 0.5,
- springLength: 150,
- springConstant: 0.01,
- nodeDistance: 60,
- damping: 0.09
- },
- damping: null,
- centralGravity: null,
- springLength: null,
- springConstant: null
- },
- clustering: { // Per Node in Cluster = PNiC
- enabled: false, // (Boolean) | global on/off switch for clustering.
- initialMaxNodes: 100, // (# nodes) | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
- clusterThreshold:500, // (# nodes) | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
- reduceToNodes:300, // (# nodes) | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
- chainThreshold: 0.4, // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
- clusterEdgeThreshold: 20, // (px) | edge length threshold. if smaller, this node is clustered.
- sectorThreshold: 100, // (# nodes in cluster) | cluster size threshold. If larger, expanding in own sector.
- screenSizeThreshold: 0.2, // (% of canvas) | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
- fontSizeMultiplier: 4.0, // (px PNiC) | how much the cluster font size grows per node in cluster (in px).
- maxFontSize: 1000,
- forceAmplification: 0.1, // (multiplier PNiC) | factor of increase fo the repulsion force of a cluster (per node in cluster).
- distanceAmplification: 0.1, // (multiplier PNiC) | factor how much the repulsion distance of a cluster increases (per node in cluster).
- edgeGrowth: 20, // (px PNiC) | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
- nodeScaling: {width: 1, // (px PNiC) | growth of the width per node in cluster.
- height: 1, // (px PNiC) | growth of the height per node in cluster.
- radius: 1}, // (px PNiC) | growth of the radius per node in cluster.
- maxNodeSizeIncrements: 600, // (# increments) | max growth of the width per node in cluster.
- activeAreaBoxSize: 80, // (px) | box area around the curser where clusters are popped open.
- clusterLevelDifference: 2
- },
- navigation: {
- enabled: false
- },
- keyboard: {
- enabled: false,
- speed: {x: 10, y: 10, zoom: 0.02}
- },
- dataManipulation: {
- enabled: false,
- initiallyVisible: false
- },
- hierarchicalLayout: {
- enabled:false,
- levelSeparation: 150,
- nodeSpacing: 100,
- direction: "UD" // UD, DU, LR, RL
- },
- freezeForStabilization: false,
- smoothCurves: true,
- maxVelocity: 10,
- minVelocity: 0.1, // px/s
- stabilizationIterations: 1000, // maximum number of iteration to stabilize
- labels:{
- add:"Add Node",
- edit:"Edit",
- link:"Add Link",
- del:"Delete selected",
- editNode:"Edit Node",
- editEdge:"Edit Edge",
- back:"Back",
- addDescription:"Click in an empty space to place a new node.",
- linkDescription:"Click on a node and drag the edge to another node to connect them.",
- editEdgeDescription:"Click on the control points and drag them to a node to connect to it.",
- addError:"The function for add does not support two arguments (data,callback).",
- linkError:"The function for connect does not support two arguments (data,callback).",
- editError:"The function for edit does not support two arguments (data, callback).",
- editBoundError:"No edit function has been bound to this button.",
- deleteError:"The function for delete does not support two arguments (data, callback).",
- deleteClusterError:"Clusters cannot be deleted."
- },
- tooltip: {
- delay: 300,
- fontColor: 'black',
- fontSize: 14, // px
- fontFace: 'verdana',
- color: {
- border: '#666',
- background: '#FFFFC6'
- }
- },
- dragNetwork: true,
- dragNodes: true,
- zoomable: true,
- hover: false
- };
- this.hoverObj = {nodes:{},edges:{}};
-
-
- // Node variables
- var network = this;
- this.groups = new Groups(); // object with groups
- this.images = new Images(); // object with images
- this.images.setOnloadCallback(function () {
- network._redraw();
- });
-
- // keyboard navigation variables
- this.xIncrement = 0;
- this.yIncrement = 0;
- this.zoomIncrement = 0;
-
- // loading all the mixins:
- // load the force calculation functions, grouped under the physics system.
- this._loadPhysicsSystem();
- // create a frame and canvas
- this._create();
- // load the sector system. (mandatory, fully integrated with Network)
- this._loadSectorSystem();
- // load the cluster system. (mandatory, even when not using the cluster system, there are function calls to it)
- this._loadClusterSystem();
- // load the selection system. (mandatory, required by Network)
- this._loadSelectionSystem();
- // load the selection system. (mandatory, required by Network)
- this._loadHierarchySystem();
-
- // apply options
- this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
- this._setScale(1);
- this.setOptions(options);
-
- // other vars
- this.freezeSimulation = false;// freeze the simulation
- this.cachedFunctions = {};
-
- // containers for nodes and edges
- this.calculationNodes = {};
- this.calculationNodeIndices = [];
- this.nodeIndices = []; // array with all the indices of the nodes. Used to speed up forces calculation
- this.nodes = {}; // object with Node objects
- this.edges = {}; // object with Edge objects
-
- // position and scale variables and objects
- this.canvasTopLeft = {"x": 0,"y": 0}; // coordinates of the top left of the canvas. they will be set during _redraw.
- this.canvasBottomRight = {"x": 0,"y": 0}; // coordinates of the bottom right of the canvas. they will be set during _redraw
- this.pointerPosition = {"x": 0,"y": 0}; // coordinates of the bottom right of the canvas. they will be set during _redraw
- this.areaCenter = {}; // object with x and y elements used for determining the center of the zoom action
- this.scale = 1; // defining the global scale variable in the constructor
- this.previousScale = this.scale; // this is used to check if the zoom operation is zooming in or out
-
- // datasets or dataviews
- 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
- this.nodesListeners = {
- 'add': function (event, params) {
- network._addNodes(params.items);
- network.start();
- },
- 'update': function (event, params) {
- network._updateNodes(params.items);
- network.start();
- },
- 'remove': function (event, params) {
- network._removeNodes(params.items);
- network.start();
- }
- };
- this.edgesListeners = {
- 'add': function (event, params) {
- network._addEdges(params.items);
- network.start();
- },
- 'update': function (event, params) {
- network._updateEdges(params.items);
- network.start();
- },
- 'remove': function (event, params) {
- network._removeEdges(params.items);
- network.start();
- }
- };
-
- // properties for the animation
- this.moving = true;
- this.timer = undefined; // Scheduling function. Is definded in this.start();
-
- // load data (the disable start variable will be the same as the enabled clustering)
- this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
-
- // hierarchical layout
- this.initializing = false;
- if (this.constants.hierarchicalLayout.enabled == true) {
- this._setupHierarchicalLayout();
- }
- else {
- // zoom so all data will fit on the screen, if clustering is enabled, we do not want start to be called here.
- if (this.stabilize == false) {
- this.zoomExtent(true,this.constants.clustering.enabled);
- }
- }
-
- // if clustering is disabled, the simulation will have started in the setData function
- if (this.constants.clustering.enabled) {
- this.startWithClustering();
- }
- }
-
- // Extend Network with an Emitter mixin
- Emitter(Network.prototype);
-
- /**
- * Get the script path where the vis.js library is located
- *
- * @returns {string | null} path Path or null when not found. Path does not
- * end with a slash.
- * @private
- */
- Network.prototype._getScriptPath = function() {
- var scripts = document.getElementsByTagName( 'script' );
-
- // find script named vis.js or vis.min.js
- for (var i = 0; i < scripts.length; i++) {
- var src = scripts[i].src;
- var match = src && /\/?vis(.min)?\.js$/.exec(src);
- if (match) {
- // return path without the script name
- return src.substring(0, src.length - match[0].length);
- }
- }
-
- return null;
- };
-
-
- /**
- * Find the center position of the network
- * @private
- */
- Network.prototype._getRange = function() {
- var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (minX > (node.x)) {minX = node.x;}
- if (maxX < (node.x)) {maxX = node.x;}
- if (minY > (node.y)) {minY = node.y;}
- if (maxY < (node.y)) {maxY = node.y;}
- }
- }
- if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
- minY = 0, maxY = 0, minX = 0, maxX = 0;
- }
- return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
- };
-
-
- /**
- * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
- * @returns {{x: number, y: number}}
- * @private
- */
- Network.prototype._findCenter = function(range) {
- return {x: (0.5 * (range.maxX + range.minX)),
- y: (0.5 * (range.maxY + range.minY))};
- };
-
-
- /**
- * center the network
- *
- * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
- */
- Network.prototype._centerNetwork = function(range) {
- var center = this._findCenter(range);
-
- center.x *= this.scale;
- center.y *= this.scale;
- center.x -= 0.5 * this.frame.canvas.clientWidth;
- center.y -= 0.5 * this.frame.canvas.clientHeight;
-
- this._setTranslation(-center.x,-center.y); // set at 0,0
- };
-
-
- /**
- * This function zooms out to fit all data on screen based on amount of nodes
- *
- * @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
- * @param {Boolean} [disableStart] | If true, start is not called.
- */
- Network.prototype.zoomExtent = function(initialZoom, disableStart) {
- if (initialZoom === undefined) {
- initialZoom = false;
- }
- if (disableStart === undefined) {
- disableStart = false;
- }
-
- var range = this._getRange();
- var zoomLevel;
-
- if (initialZoom == true) {
- var numberOfNodes = this.nodeIndices.length;
- if (this.constants.smoothCurves == true) {
- if (this.constants.clustering.enabled == true &&
- numberOfNodes >= this.constants.clustering.initialMaxNodes) {
- zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- else {
- zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- }
- else {
- if (this.constants.clustering.enabled == true &&
- numberOfNodes >= this.constants.clustering.initialMaxNodes) {
- zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- else {
- zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- }
-
- // correct for larger canvasses.
- var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
- zoomLevel *= factor;
- }
- else {
- var xDistance = (Math.abs(range.minX) + Math.abs(range.maxX)) * 1.1;
- var yDistance = (Math.abs(range.minY) + Math.abs(range.maxY)) * 1.1;
-
- var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
- var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
-
- zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
- }
-
- if (zoomLevel > 1.0) {
- zoomLevel = 1.0;
- }
-
-
- this._setScale(zoomLevel);
- this._centerNetwork(range);
- if (disableStart == false) {
- this.moving = true;
- this.start();
- }
- };
-
-
- /**
- * Update the this.nodeIndices with the most recent node index list
- * @private
- */
- Network.prototype._updateNodeIndexList = function() {
- this._clearNodeIndexList();
- for (var idx in this.nodes) {
- if (this.nodes.hasOwnProperty(idx)) {
- this.nodeIndices.push(idx);
- }
- }
- };
-
-
- /**
- * 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
- * @param {Boolean} [disableStart] | optional: disable the calling of the start function.
- */
- Network.prototype.setData = function(data, disableStart) {
- if (disableStart === undefined) {
- disableStart = false;
- }
-
- 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);
- }
-
- this._putDataInSector();
-
- if (!disableStart) {
- // find a stable position or start animating to a stable position
- if (this.stabilize) {
- var me = this;
- setTimeout(function() {me._stabilize(); me.start();},0)
- }
- else {
- this.start();
- }
- }
- };
-
- /**
- * Set options
- * @param {Object} options
- * @param {Boolean} [initializeView] | set zoom and translation to default.
- */
- Network.prototype.setOptions = function (options) {
- if (options) {
- var prop;
- // 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;}
- if (options.smoothCurves !== undefined) {this.constants.smoothCurves = options.smoothCurves;}
- if (options.freezeForStabilization !== undefined) {this.constants.freezeForStabilization = options.freezeForStabilization;}
- if (options.configurePhysics !== undefined){this.constants.configurePhysics = options.configurePhysics;}
- if (options.stabilizationIterations !== undefined) {this.constants.stabilizationIterations = options.stabilizationIterations;}
- if (options.dragNetwork !== undefined) {this.constants.dragNetwork = options.dragNetwork;}
- if (options.dragNodes !== undefined) {this.constants.dragNodes = options.dragNodes;}
- if (options.zoomable !== undefined) {this.constants.zoomable = options.zoomable;}
- if (options.hover !== undefined) {this.constants.hover = options.hover;}
-
- // TODO: deprecated since version 3.0.0. Cleanup some day
- if (options.dragGraph !== undefined) {
- throw new Error('Option dragGraph is renamed to dragNetwork');
- }
-
- if (options.labels !== undefined) {
- for (prop in options.labels) {
- if (options.labels.hasOwnProperty(prop)) {
- this.constants.labels[prop] = options.labels[prop];
- }
- }
- }
-
- if (options.onAdd) {
- this.triggerFunctions.add = options.onAdd;
- }
-
- if (options.onEdit) {
- this.triggerFunctions.edit = options.onEdit;
- }
-
- if (options.onEditEdge) {
- this.triggerFunctions.editEdge = options.onEditEdge;
- }
-
- if (options.onConnect) {
- this.triggerFunctions.connect = options.onConnect;
- }
-
- if (options.onDelete) {
- this.triggerFunctions.del = options.onDelete;
- }
-
- if (options.physics) {
- if (options.physics.barnesHut) {
- this.constants.physics.barnesHut.enabled = true;
- for (prop in options.physics.barnesHut) {
- if (options.physics.barnesHut.hasOwnProperty(prop)) {
- this.constants.physics.barnesHut[prop] = options.physics.barnesHut[prop];
- }
- }
- }
-
- if (options.physics.repulsion) {
- this.constants.physics.barnesHut.enabled = false;
- for (prop in options.physics.repulsion) {
- if (options.physics.repulsion.hasOwnProperty(prop)) {
- this.constants.physics.repulsion[prop] = options.physics.repulsion[prop];
- }
- }
- }
-
- if (options.physics.hierarchicalRepulsion) {
- this.constants.hierarchicalLayout.enabled = true;
- this.constants.physics.hierarchicalRepulsion.enabled = true;
- this.constants.physics.barnesHut.enabled = false;
- for (prop in options.physics.hierarchicalRepulsion) {
- if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
- this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
- }
- }
- }
- }
-
- if (options.hierarchicalLayout) {
- this.constants.hierarchicalLayout.enabled = true;
- for (prop in options.hierarchicalLayout) {
- if (options.hierarchicalLayout.hasOwnProperty(prop)) {
- this.constants.hierarchicalLayout[prop] = options.hierarchicalLayout[prop];
- }
- }
- }
- else if (options.hierarchicalLayout !== undefined) {
- this.constants.hierarchicalLayout.enabled = false;
- }
-
- if (options.clustering) {
- this.constants.clustering.enabled = true;
- for (prop in options.clustering) {
- if (options.clustering.hasOwnProperty(prop)) {
- this.constants.clustering[prop] = options.clustering[prop];
- }
- }
- }
- else if (options.clustering !== undefined) {
- this.constants.clustering.enabled = false;
- }
-
- if (options.navigation) {
- this.constants.navigation.enabled = true;
- for (prop in options.navigation) {
- if (options.navigation.hasOwnProperty(prop)) {
- this.constants.navigation[prop] = options.navigation[prop];
- }
- }
- }
- else if (options.navigation !== undefined) {
- this.constants.navigation.enabled = false;
- }
-
- if (options.keyboard) {
- this.constants.keyboard.enabled = true;
- for (prop in options.keyboard) {
- if (options.keyboard.hasOwnProperty(prop)) {
- this.constants.keyboard[prop] = options.keyboard[prop];
- }
- }
- }
- else if (options.keyboard !== undefined) {
- this.constants.keyboard.enabled = false;
- }
-
- if (options.dataManipulation) {
- this.constants.dataManipulation.enabled = true;
- for (prop in options.dataManipulation) {
- if (options.dataManipulation.hasOwnProperty(prop)) {
- this.constants.dataManipulation[prop] = options.dataManipulation[prop];
- }
- }
- this.editMode = this.constants.dataManipulation.initiallyVisible;
- }
- else if (options.dataManipulation !== undefined) {
- this.constants.dataManipulation.enabled = false;
- }
-
- // TODO: work out these options and document them
- if (options.edges) {
- for (prop in options.edges) {
- if (options.edges.hasOwnProperty(prop)) {
- if (typeof options.edges[prop] != "object") {
- this.constants.edges[prop] = options.edges[prop];
- }
- }
- }
-
-
- if (options.edges.color !== undefined) {
- if (util.isString(options.edges.color)) {
- this.constants.edges.color = {};
- this.constants.edges.color.color = options.edges.color;
- this.constants.edges.color.highlight = options.edges.color;
- this.constants.edges.color.hover = options.edges.color;
- }
- else {
- if (options.edges.color.color !== undefined) {this.constants.edges.color.color = options.edges.color.color;}
- if (options.edges.color.highlight !== undefined) {this.constants.edges.color.highlight = options.edges.color.highlight;}
- if (options.edges.color.hover !== undefined) {this.constants.edges.color.hover = options.edges.color.hover;}
- }
- }
-
- if (!options.edges.fontColor) {
- if (options.edges.color !== undefined) {
- if (util.isString(options.edges.color)) {this.constants.edges.fontColor = options.edges.color;}
- else if (options.edges.color.color !== undefined) {this.constants.edges.fontColor = options.edges.color.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 = util.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);
- }
- }
- }
-
- if (options.tooltip) {
- for (prop in options.tooltip) {
- if (options.tooltip.hasOwnProperty(prop)) {
- this.constants.tooltip[prop] = options.tooltip[prop];
- }
- }
- if (options.tooltip.color) {
- this.constants.tooltip.color = util.parseColor(options.tooltip.color);
- }
- }
- }
-
-
- // (Re)loading the mixins that can be enabled or disabled in the options.
- // load the force calculation functions, grouped under the physics system.
- this._loadPhysicsSystem();
- // load the navigation system.
- this._loadNavigationControls();
- // load the data manipulation system
- this._loadManipulationSystem();
- // configure the smooth curves
- this._configureSmoothCurves();
-
-
- // bind keys. If disabled, this will not do anything;
- this._createKeyBinds();
- this.setSize(this.width, this.height);
- this.moving = true;
- this.start();
-
- };
-
- /**
- * Create the main frame for the Network.
- * This function is executed once when a Network object is created. The frame
- * contains a canvas, and this canvas contains all objects like the axis and
- * nodes.
- * @private
- */
- Network.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 = 'network-frame';
- this.frame.style.position = 'relative';
- this.frame.style.overflow = 'hidden';
-
- // create the network 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('doubletap', me._onDoubleTap.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('release', me._onRelease.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);
-
- };
-
-
- /**
- * Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
- * @private
- */
- Network.prototype._createKeyBinds = function() {
- var me = this;
- this.mousetrap = mousetrap;
-
- this.mousetrap.reset();
-
- if (this.constants.keyboard.enabled == true) {
- this.mousetrap.bind("up", this._moveUp.bind(me) , "keydown");
- this.mousetrap.bind("up", this._yStopMoving.bind(me), "keyup");
- this.mousetrap.bind("down", this._moveDown.bind(me) , "keydown");
- this.mousetrap.bind("down", this._yStopMoving.bind(me), "keyup");
- this.mousetrap.bind("left", this._moveLeft.bind(me) , "keydown");
- this.mousetrap.bind("left", this._xStopMoving.bind(me), "keyup");
- this.mousetrap.bind("right",this._moveRight.bind(me), "keydown");
- this.mousetrap.bind("right",this._xStopMoving.bind(me), "keyup");
- this.mousetrap.bind("=", this._zoomIn.bind(me), "keydown");
- this.mousetrap.bind("=", this._stopZoom.bind(me), "keyup");
- this.mousetrap.bind("-", this._zoomOut.bind(me), "keydown");
- this.mousetrap.bind("-", this._stopZoom.bind(me), "keyup");
- this.mousetrap.bind("[", this._zoomIn.bind(me), "keydown");
- this.mousetrap.bind("[", this._stopZoom.bind(me), "keyup");
- this.mousetrap.bind("]", this._zoomOut.bind(me), "keydown");
- this.mousetrap.bind("]", this._stopZoom.bind(me), "keyup");
- this.mousetrap.bind("pageup",this._zoomIn.bind(me), "keydown");
- this.mousetrap.bind("pageup",this._stopZoom.bind(me), "keyup");
- this.mousetrap.bind("pagedown",this._zoomOut.bind(me),"keydown");
- this.mousetrap.bind("pagedown",this._stopZoom.bind(me), "keyup");
- }
-
- if (this.constants.dataManipulation.enabled == true) {
- this.mousetrap.bind("escape",this._createManipulatorBar.bind(me));
- this.mousetrap.bind("del",this._deleteSelected.bind(me));
- }
- };
-
- /**
- * Get the pointer location from a touch location
- * @param {{pageX: Number, pageY: Number}} touch
- * @return {{x: Number, y: Number}} pointer
- * @private
- */
- Network.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
- */
- Network.prototype._onTouch = function (event) {
- this.drag.pointer = this._getPointer(event.gesture.center);
- this.drag.pinched = false;
- this.pinch.scale = this._getScale();
-
- this._handleTouch(this.drag.pointer);
- };
-
- /**
- * handle drag start event
- * @private
- */
- Network.prototype._onDragStart = function () {
- this._handleDragStart();
- };
-
-
- /**
- * This function is called by _onDragStart.
- * It is separated out because we can then overload it for the datamanipulation system.
- *
- * @private
- */
- Network.prototype._handleDragStart = function() {
- var drag = this.drag;
- var node = this._getNodeAt(drag.pointer);
- // note: drag.pointer is set in _onTouch to get the initial touch location
-
- drag.dragging = true;
- drag.selection = [];
- drag.translation = this._getTranslation();
- drag.nodeId = null;
-
- if (node != null) {
- drag.nodeId = node.id;
- // select the clicked node if not yet selected
- if (!node.isSelected()) {
- this._selectObject(node,false);
- }
-
- // create an array with the selected nodes and their original location and status
- for (var objectId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
- var object = this.selectionObj.nodes[objectId];
- var s = {
- id: object.id,
- node: object,
-
- // store original x, y, xFixed and yFixed, make the node temporarily Fixed
- x: object.x,
- y: object.y,
- xFixed: object.xFixed,
- yFixed: object.yFixed
- };
-
- object.xFixed = true;
- object.yFixed = true;
-
- drag.selection.push(s);
- }
- }
- }
- };
-
-
- /**
- * handle drag event
- * @private
- */
- Network.prototype._onDrag = function (event) {
- this._handleOnDrag(event)
- };
-
-
- /**
- * This function is called by _onDrag.
- * It is separated out because we can then overload it for the datamanipulation system.
- *
- * @private
- */
- Network.prototype._handleOnDrag = function(event) {
- if (this.drag.pinched) {
- return;
- }
-
- var pointer = this._getPointer(event.gesture.center);
-
- var me = this,
- drag = this.drag,
- selection = drag.selection;
- if (selection && selection.length && this.constants.dragNodes == true) {
- // 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._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
- }
-
- if (!s.yFixed) {
- node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
- }
- });
-
- // start _animationStep if not yet running
- if (!this.moving) {
- this.moving = true;
- this.start();
- }
- }
- else {
- if (this.constants.dragNetwork == true) {
- // move the network
- 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.moving = true;
- this.start();
- }
- }
- };
-
- /**
- * handle drag start event
- * @private
- */
- Network.prototype._onDragEnd = function () {
- this.drag.dragging = false;
- 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
- */
- Network.prototype._onTap = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this.pointerPosition = pointer;
- this._handleTap(pointer);
-
- };
-
-
- /**
- * handle doubletap event
- * @private
- */
- Network.prototype._onDoubleTap = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this._handleDoubleTap(pointer);
- };
-
-
- /**
- * handle long tap event: multi select nodes
- * @private
- */
- Network.prototype._onHold = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this.pointerPosition = pointer;
- this._handleOnHold(pointer);
- };
-
- /**
- * handle the release of the screen
- *
- * @private
- */
- Network.prototype._onRelease = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this._handleOnRelease(pointer);
- };
-
- /**
- * Handle pinch event
- * @param event
- * @private
- */
- Network.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: enabled moving while pinching?
- var scale = this.pinch.scale * event.gesture.scale;
- this._zoom(scale, pointer)
- };
-
- /**
- * Zoom the network in or out
- * @param {Number} scale a number around 1, and between 0.01 and 10
- * @param {{x: Number, y: Number}} pointer Position on screen
- * @return {Number} appliedScale scale is limited within the boundaries
- * @private
- */
- Network.prototype._zoom = function(scale, pointer) {
- if (this.constants.zoomable == true) {
- var scaleOld = this._getScale();
- if (scale < 0.00001) {
- scale = 0.00001;
- }
- if (scale > 10) {
- scale = 10;
- }
- // + this.frame.canvas.clientHeight / 2
- 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.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
- "y" : this._YconvertDOMtoCanvas(pointer.y)};
-
- this._setScale(scale);
- this._setTranslation(tx, ty);
- this.updateClustersDefault();
- this._redraw();
-
- if (scaleOld < scale) {
- this.emit("zoom", {direction:"+"});
- }
- else {
- this.emit("zoom", {direction:"-"});
- }
-
- 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
- */
- Network.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) {
-
- // calculate the new scale
- var scale = this._getScale();
- 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
- this._zoom(scale, pointer);
- }
-
- // 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
- */
- Network.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.popupObj) {
- 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 calculationTimer
- }
- if (!this.drag.dragging) {
- this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
- }
-
-
- /**
- * Adding hover highlights
- */
- if (this.constants.hover == true) {
- // removing all hover highlights
- for (var edgeId in this.hoverObj.edges) {
- if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
- this.hoverObj.edges[edgeId].hover = false;
- delete this.hoverObj.edges[edgeId];
- }
- }
-
- // adding hover highlights
- var obj = this._getNodeAt(pointer);
- if (obj == null) {
- obj = this._getEdgeAt(pointer);
- }
- if (obj != null) {
- this._hoverObject(obj);
- }
-
- // removing all node hover highlights except for the selected one.
- for (var nodeId in this.hoverObj.nodes) {
- if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
- if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
- this._blurObject(this.hoverObj.nodes[nodeId]);
- delete this.hoverObj.nodes[nodeId];
- }
- }
- }
- this.redraw();
- }
- };
-
- /**
- * Check if there is an element on the given position in the network
- * (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
- */
- Network.prototype._checkShowPopup = function (pointer) {
- var obj = {
- left: this._XconvertDOMtoCanvas(pointer.x),
- top: this._YconvertDOMtoCanvas(pointer.y),
- right: this._XconvertDOMtoCanvas(pointer.x),
- bottom: this._YconvertDOMtoCanvas(pointer.y)
- };
-
- var id;
- var lastPopupNode = this.popupObj;
-
- if (this.popupObj == 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.popupObj = node;
- break;
- }
- }
- }
- }
-
- if (this.popupObj === 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.popupObj = edge;
- break;
- }
- }
- }
- }
-
- if (this.popupObj) {
- // show popup message window
- if (this.popupObj != lastPopupNode) {
- var me = this;
- if (!me.popup) {
- me.popup = new Popup(me.frame, me.constants.tooltip);
- }
-
- // 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.popupObj.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
- */
- Network.prototype._checkHidePopup = function (pointer) {
- if (!this.popupObj || !this._getNodeAt(pointer) ) {
- this.popupObj = undefined;
- if (this.popup) {
- this.popup.hide();
- }
- }
- };
-
-
- /**
- * Set a new size for the network
- * @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%')
- */
- Network.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;
-
- if (this.manipulationDiv !== undefined) {
- this.manipulationDiv.style.width = this.frame.canvas.clientWidth + "px";
- }
- if (this.navigationDivs !== undefined) {
- if (this.navigationDivs['wrapper'] !== undefined) {
- this.navigationDivs['wrapper'].style.width = this.frame.canvas.clientWidth + "px";
- this.navigationDivs['wrapper'].style.height = this.frame.canvas.clientHeight + "px";
- }
- }
-
- this.emit('resize', {width:this.frame.canvas.width,height:this.frame.canvas.height});
- };
-
- /**
- * Set a data set with nodes for the network
- * @param {Array | DataSet | DataView} nodes The data containing the nodes.
- * @private
- */
- Network.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.off(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.on(event, callback);
- });
-
- // draw all new nodes
- var ids = this.nodesData.getIds();
- this._addNodes(ids);
- }
- this._updateSelection();
- };
-
- /**
- * Add nodes
- * @param {Number[] | String[]} ids
- * @private
- */
- Network.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.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
- var radius = 10 * 0.1*ids.length;
- var angle = 2 * Math.PI * Math.random();
- if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
- if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
- }
- this.moving = true;
- }
- this._updateNodeIndexList();
- if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
- this._resetLevels();
- this._setupHierarchicalLayout();
- }
- this._updateCalculationNodes();
- this._reconnectEdges();
- this._updateValueRange(this.nodes);
- this.updateLabels();
- };
-
- /**
- * Update existing nodes, or create them when not yet existing
- * @param {Number[] | String[]} ids
- * @private
- */
- Network.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;
- }
- }
- this.moving = true;
- if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
- this._resetLevels();
- this._setupHierarchicalLayout();
- }
- this._updateNodeIndexList();
- this._reconnectEdges();
- this._updateValueRange(nodes);
- };
-
- /**
- * Remove existing nodes. If nodes do not exist, the method will just ignore it.
- * @param {Number[] | String[]} ids
- * @private
- */
- Network.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._updateNodeIndexList();
- if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
- this._resetLevels();
- this._setupHierarchicalLayout();
- }
- this._updateCalculationNodes();
- 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
- */
- Network.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.off(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.on(event, callback);
- });
-
- // draw all new nodes
- var ids = this.edgesData.getIds();
- this._addEdges(ids);
- }
-
- this._reconnectEdges();
- };
-
- /**
- * Add edges
- * @param {Number[] | String[]} ids
- * @private
- */
- Network.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, {"showInternalIds" : true});
- edges[id] = new Edge(data, this, this.constants);
- }
-
- this.moving = true;
- this._updateValueRange(edges);
- this._createBezierNodes();
- if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
- this._resetLevels();
- this._setupHierarchicalLayout();
- }
- this._updateCalculationNodes();
- };
-
- /**
- * Update existing edges, or create them when not yet existing
- * @param {Number[] | String[]} ids
- * @private
- */
- Network.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._createBezierNodes();
- if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
- this._resetLevels();
- this._setupHierarchicalLayout();
- }
- this.moving = true;
- this._updateValueRange(edges);
- };
-
- /**
- * Remove existing edges. Non existing ids will be ignored
- * @param {Number[] | String[]} ids
- * @private
- */
- Network.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) {
- if (edge.via != null) {
- delete this.sectors['support']['nodes'][edge.via.id];
- }
- edge.disconnect();
- delete edges[id];
- }
- }
-
- this.moving = true;
- this._updateValueRange(edges);
- if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
- this._resetLevels();
- this._setupHierarchicalLayout();
- }
- this._updateCalculationNodes();
- };
-
- /**
- * Reconnect all edges
- * @private
- */
- Network.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
- */
- Network.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 network with the current data
- * chart will be resized too.
- */
- Network.prototype.redraw = function() {
- this.setSize(this.width, this.height);
- this._redraw();
- };
-
- /**
- * Redraw the network with the current data
- * @private
- */
- Network.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.canvasTopLeft = {
- "x": this._XconvertDOMtoCanvas(0),
- "y": this._YconvertDOMtoCanvas(0)
- };
- this.canvasBottomRight = {
- "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
- "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
- };
-
- this._doInAllSectors("_drawAllSectorNodes",ctx);
- this._doInAllSectors("_drawEdges",ctx);
- this._doInAllSectors("_drawNodes",ctx,false);
- this._doInAllSectors("_drawControlNodes",ctx);
-
- // this._doInSupportSector("_drawNodes",ctx,true);
- // this._drawTree(ctx,"#F00F0F");
-
- // restore original scaling and translation
- ctx.restore();
- };
-
- /**
- * Set the translation of the network
- * @param {Number} offsetX Horizontal offset
- * @param {Number} offsetY Vertical offset
- * @private
- */
- Network.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;
- }
-
- this.emit('viewChanged');
- };
-
- /**
- * Get the translation of the network
- * @return {Object} translation An object with parameters x and y, both a number
- * @private
- */
- Network.prototype._getTranslation = function() {
- return {
- x: this.translation.x,
- y: this.translation.y
- };
- };
-
- /**
- * Scale the network
- * @param {Number} scale Scaling factor 1.0 is unscaled
- * @private
- */
- Network.prototype._setScale = function(scale) {
- this.scale = scale;
- };
-
- /**
- * Get the current scale of the network
- * @return {Number} scale Scaling factor 1.0 is unscaled
- * @private
- */
- Network.prototype._getScale = function() {
- return this.scale;
- };
-
- /**
- * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
- * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
- * @param {number} x
- * @returns {number}
- * @private
- */
- Network.prototype._XconvertDOMtoCanvas = function(x) {
- return (x - this.translation.x) / this.scale;
- };
-
- /**
- * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
- * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
- * @param {number} x
- * @returns {number}
- * @private
- */
- Network.prototype._XconvertCanvasToDOM = function(x) {
- return x * this.scale + this.translation.x;
- };
-
- /**
- * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
- * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
- * @param {number} y
- * @returns {number}
- * @private
- */
- Network.prototype._YconvertDOMtoCanvas = function(y) {
- return (y - this.translation.y) / this.scale;
- };
-
- /**
- * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
- * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
- * @param {number} y
- * @returns {number}
- * @private
- */
- Network.prototype._YconvertCanvasToDOM = function(y) {
- return y * this.scale + this.translation.y ;
- };
-
-
- /**
- *
- * @param {object} pos = {x: number, y: number}
- * @returns {{x: number, y: number}}
- * @constructor
- */
- Network.prototype.canvasToDOM = function(pos) {
- return {x:this._XconvertCanvasToDOM(pos.x),y:this._YconvertCanvasToDOM(pos.y)};
- }
-
- /**
- *
- * @param {object} pos = {x: number, y: number}
- * @returns {{x: number, y: number}}
- * @constructor
- */
- Network.prototype.DOMtoCanvas = function(pos) {
- return {x:this._XconvertDOMtoCanvas(pos.x),y:this._YconvertDOMtoCanvas(pos.y)};
- }
-
- /**
- * Redraw all nodes
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @param {Boolean} [alwaysShow]
- * @private
- */
- Network.prototype._drawNodes = function(ctx,alwaysShow) {
- if (alwaysShow === undefined) {
- alwaysShow = false;
- }
-
- // first draw the unselected nodes
- var nodes = this.nodes;
- var selected = [];
-
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
- if (nodes[id].isSelected()) {
- selected.push(id);
- }
- else {
- if (nodes[id].inArea() || alwaysShow) {
- nodes[id].draw(ctx);
- }
- }
- }
- }
-
- // draw the selected nodes on top
- for (var s = 0, sMax = selected.length; s < sMax; s++) {
- if (nodes[selected[s]].inArea() || alwaysShow) {
- 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
- */
- Network.prototype._drawEdges = function(ctx) {
- var edges = this.edges;
- for (var id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- edge.setScale(this.scale);
- if (edge.connected) {
- edges[id].draw(ctx);
- }
- }
- }
- };
-
- /**
- * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
- Network.prototype._drawControlNodes = function(ctx) {
- var edges = this.edges;
- for (var id in edges) {
- if (edges.hasOwnProperty(id)) {
- edges[id]._drawControlNodes(ctx);
- }
- }
- };
-
- /**
- * Find a stable position for all nodes
- * @private
- */
- Network.prototype._stabilize = function() {
- if (this.constants.freezeForStabilization == true) {
- this._freezeDefinedNodes();
- }
-
- // find stable position
- var count = 0;
- while (this.moving && count < this.constants.stabilizationIterations) {
- this._physicsTick();
- count++;
- }
- this.zoomExtent(false,true);
- if (this.constants.freezeForStabilization == true) {
- this._restoreFrozenNodes();
- }
- this.emit("stabilized",{iterations:count});
- };
-
- /**
- * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
- * because only the supportnodes for the smoothCurves have to settle.
- *
- * @private
- */
- Network.prototype._freezeDefinedNodes = function() {
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].x != null && nodes[id].y != null) {
- nodes[id].fixedData.x = nodes[id].xFixed;
- nodes[id].fixedData.y = nodes[id].yFixed;
- nodes[id].xFixed = true;
- nodes[id].yFixed = true;
- }
- }
- }
- };
-
- /**
- * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
- *
- * @private
- */
- Network.prototype._restoreFrozenNodes = function() {
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].fixedData.x != null) {
- nodes[id].xFixed = nodes[id].fixedData.x;
- nodes[id].yFixed = nodes[id].fixedData.y;
- }
- }
- }
- };
-
-
- /**
- * 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
- */
- Network.prototype._isMoving = function(vmin) {
- 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
- */
- Network.prototype._discreteStepNodes = function() {
- var interval = this.physicsDiscreteStepsize;
- var nodes = this.nodes;
- var nodeId;
- var nodesPresent = false;
-
- if (this.constants.maxVelocity > 0) {
- for (nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
- nodesPresent = true;
- }
- }
- }
- else {
- for (nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- nodes[nodeId].discreteStep(interval);
- nodesPresent = true;
- }
- }
- }
-
- if (nodesPresent == true) {
- var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
- if (vminCorrected > 0.5*this.constants.maxVelocity) {
- this.moving = true;
- }
- else {
- this.moving = this._isMoving(vminCorrected);
- }
- }
- };
-
- /**
- * A single simulation step (or "tick") in the physics simulation
- *
- * @private
- */
- Network.prototype._physicsTick = function() {
- if (!this.freezeSimulation) {
- if (this.moving) {
- this._doInAllActiveSectors("_initializeForceCalculation");
- this._doInAllActiveSectors("_discreteStepNodes");
- if (this.constants.smoothCurves) {
- this._doInSupportSector("_discreteStepNodes");
- }
- this._findCenter(this._getRange())
- }
- }
- };
-
-
- /**
- * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
- * It reschedules itself at the beginning of the function
- *
- * @private
- */
- Network.prototype._animationStep = function() {
- // reset the timer so a new scheduled animation step can be set
- this.timer = undefined;
- // handle the keyboad movement
- this._handleNavigation();
-
- // this schedules a new animation step
- this.start();
-
- // start the physics simulation
- var calculationTime = Date.now();
- var maxSteps = 1;
- this._physicsTick();
- var timeRequired = Date.now() - calculationTime;
- while (timeRequired < 0.9*(this.renderTimestep - this.renderTime) && maxSteps < this.maxPhysicsTicksPerRender) {
- this._physicsTick();
- timeRequired = Date.now() - calculationTime;
- maxSteps++;
- }
- // start the rendering process
- var renderTime = Date.now();
- this._redraw();
- this.renderTime = Date.now() - renderTime;
- };
-
- if (typeof window !== 'undefined') {
- window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
- window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
- }
-
- /**
- * Schedule a animation step with the refreshrate interval.
- */
- Network.prototype.start = function() {
- if (this.moving || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0) {
- if (!this.timer) {
- var ua = navigator.userAgent.toLowerCase();
-
- var requiresTimeout = false;
- if (ua.indexOf('msie 9.0') != -1) { // IE 9
- requiresTimeout = true;
- }
- else if (ua.indexOf('safari') != -1) { // safari
- if (ua.indexOf('chrome') <= -1) {
- requiresTimeout = true;
- }
- }
-
- if (requiresTimeout == true) {
- this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
- }
- else{
- this.timer = window.requestAnimationFrame(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
- }
- }
- }
- else {
- this._redraw();
- }
- };
-
-
- /**
- * Move the network according to the keyboard presses.
- *
- * @private
- */
- Network.prototype._handleNavigation = function() {
- if (this.xIncrement != 0 || this.yIncrement != 0) {
- var translation = this._getTranslation();
- this._setTranslation(translation.x+this.xIncrement, translation.y+this.yIncrement);
- }
- if (this.zoomIncrement != 0) {
- var center = {
- x: this.frame.canvas.clientWidth / 2,
- y: this.frame.canvas.clientHeight / 2
- };
- this._zoom(this.scale*(1 + this.zoomIncrement), center);
- }
- };
-
-
- /**
- * Freeze the _animationStep
- */
- Network.prototype.toggleFreeze = function() {
- if (this.freezeSimulation == false) {
- this.freezeSimulation = true;
- }
- else {
- this.freezeSimulation = false;
- this.start();
- }
- };
-
-
- /**
- * This function cleans the support nodes if they are not needed and adds them when they are.
- *
- * @param {boolean} [disableStart]
- * @private
- */
- Network.prototype._configureSmoothCurves = function(disableStart) {
- if (disableStart === undefined) {
- disableStart = true;
- }
-
- if (this.constants.smoothCurves == true) {
- this._createBezierNodes();
- }
- else {
- // delete the support nodes
- this.sectors['support']['nodes'] = {};
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- this.edges[edgeId].smooth = false;
- this.edges[edgeId].via = null;
- }
- }
- }
- this._updateCalculationNodes();
- if (!disableStart) {
- this.moving = true;
- this.start();
- }
- };
-
-
- /**
- * Bezier curves require an anchor point to calculate the smooth flow. These points are nodes. These nodes are invisible but
- * are used for the force calculation.
- *
- * @private
- */
- Network.prototype._createBezierNodes = function() {
- if (this.constants.smoothCurves == true) {
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- var edge = this.edges[edgeId];
- if (edge.via == null) {
- edge.smooth = true;
- var nodeId = "edgeId:".concat(edge.id);
- this.sectors['support']['nodes'][nodeId] = new Node(
- {id:nodeId,
- mass:1,
- shape:'circle',
- image:"",
- internalMultiplier:1
- },{},{},this.constants);
- edge.via = this.sectors['support']['nodes'][nodeId];
- edge.via.parentEdgeId = edge.id;
- edge.positionBezierNode();
- }
- }
- }
- }
- };
-
- /**
- * load the functions that load the mixins into the prototype.
- *
- * @private
- */
- Network.prototype._initializeMixinLoaders = function () {
- for (var mixinFunction in networkMixinLoaders) {
- if (networkMixinLoaders.hasOwnProperty(mixinFunction)) {
- Network.prototype[mixinFunction] = networkMixinLoaders[mixinFunction];
- }
- }
- };
-
- /**
- * Load the XY positions of the nodes into the dataset.
- */
- Network.prototype.storePosition = function() {
- var dataArray = [];
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- var allowedToMoveX = !this.nodes.xFixed;
- var allowedToMoveY = !this.nodes.yFixed;
- if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
- dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
- }
- }
- }
- this.nodesData.update(dataArray);
- };
-
-
- /**
- * Center a node in view.
- *
- * @param {Number} nodeId
- * @param {Number} [zoomLevel]
- */
- Network.prototype.focusOnNode = function (nodeId, zoomLevel) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (zoomLevel === undefined) {
- zoomLevel = this._getScale();
- }
- var nodePosition= {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
-
- var requiredScale = zoomLevel;
- this._setScale(requiredScale);
-
- var canvasCenter = this.DOMtoCanvas({x:0.5 * this.frame.canvas.width,y:0.5 * this.frame.canvas.height});
- var translation = this._getTranslation();
-
- var distanceFromCenter = {x:canvasCenter.x - nodePosition.x,
- y:canvasCenter.y - nodePosition.y};
-
- this._setTranslation(translation.x + requiredScale * distanceFromCenter.x,
- translation.y + requiredScale * distanceFromCenter.y);
- this.redraw();
- }
- else {
- console.log("This nodeId cannot be found.")
- }
- };
-
-
-
-
-
-
-
-
-
-
- /**
- * @constructor Graph3d
- * Graph3d displays data in 3d.
- *
- * Graph3d is developed in javascript as a Google Visualization Chart.
- *
- * @param {Element} container The DOM element in which the Graph3d will
- * be created. Normally a div element.
- * @param {DataSet | DataView | Array} [data]
- * @param {Object} [options]
- */
- function Graph3d(container, data, options) {
- if (!(this instanceof Graph3d)) {
- throw new SyntaxError('Constructor must be called with the new operator');
- }
-
- // create variables and set default values
- this.containerElement = container;
- this.width = '400px';
- this.height = '400px';
- this.margin = 10; // px
- this.defaultXCenter = '55%';
- this.defaultYCenter = '50%';
-
- this.xLabel = 'x';
- this.yLabel = 'y';
- this.zLabel = 'z';
- this.filterLabel = 'time';
- this.legendLabel = 'value';
-
- this.style = Graph3d.STYLE.DOT;
- this.showPerspective = true;
- this.showGrid = true;
- this.keepAspectRatio = true;
- this.showShadow = false;
- this.showGrayBottom = false; // TODO: this does not work correctly
- this.showTooltip = false;
- this.verticalRatio = 0.5; // 0.1 to 1.0, where 1.0 results in a 'cube'
-
- this.animationInterval = 1000; // milliseconds
- this.animationPreload = false;
-
- this.camera = new Graph3d.Camera();
- this.eye = new Point3d(0, 0, -1); // TODO: set eye.z about 3/4 of the width of the window?
-
- this.dataTable = null; // The original data table
- this.dataPoints = null; // The table with point objects
-
- // the column indexes
- this.colX = undefined;
- this.colY = undefined;
- this.colZ = undefined;
- this.colValue = undefined;
- this.colFilter = undefined;
-
- this.xMin = 0;
- this.xStep = undefined; // auto by default
- this.xMax = 1;
- this.yMin = 0;
- this.yStep = undefined; // auto by default
- this.yMax = 1;
- this.zMin = 0;
- this.zStep = undefined; // auto by default
- this.zMax = 1;
- this.valueMin = 0;
- this.valueMax = 1;
- this.xBarWidth = 1;
- this.yBarWidth = 1;
- // TODO: customize axis range
-
- // constants
- this.colorAxis = '#4D4D4D';
- this.colorGrid = '#D3D3D3';
- this.colorDot = '#7DC1FF';
- this.colorDotBorder = '#3267D2';
-
- // create a frame and canvas
- this.create();
-
- // apply options (also when undefined)
- this.setOptions(options);
-
- // apply data
- if (data) {
- this.setData(data);
- }
- }
-
- // Extend Graph3d with an Emitter mixin
- Emitter(Graph3d.prototype);
-
- /**
- * @class Camera
- * The camera is mounted on a (virtual) camera arm. The camera arm can rotate
- * The camera is always looking in the direction of the origin of the arm.
- * This way, the camera always rotates around one fixed point, the location
- * of the camera arm.
- *
- * Documentation:
- * http://en.wikipedia.org/wiki/3D_projection
- */
- Graph3d.Camera = function () {
- this.armLocation = new Point3d();
- this.armRotation = {};
- this.armRotation.horizontal = 0;
- this.armRotation.vertical = 0;
- this.armLength = 1.7;
-
- this.cameraLocation = new Point3d();
- this.cameraRotation = new Point3d(0.5*Math.PI, 0, 0);
-
- this.calculateCameraOrientation();
- };
-
- /**
- * Set the location (origin) of the arm
- * @param {Number} x Normalized value of x
- * @param {Number} y Normalized value of y
- * @param {Number} z Normalized value of z
- */
- Graph3d.Camera.prototype.setArmLocation = function(x, y, z) {
- this.armLocation.x = x;
- this.armLocation.y = y;
- this.armLocation.z = z;
-
- this.calculateCameraOrientation();
- };
-
- /**
- * Set the rotation of the camera arm
- * @param {Number} horizontal The horizontal rotation, between 0 and 2*PI.
- * Optional, can be left undefined.
- * @param {Number} vertical The vertical rotation, between 0 and 0.5*PI
- * if vertical=0.5*PI, the graph is shown from the
- * top. Optional, can be left undefined.
- */
- Graph3d.Camera.prototype.setArmRotation = function(horizontal, vertical) {
- if (horizontal !== undefined) {
- this.armRotation.horizontal = horizontal;
- }
-
- if (vertical !== undefined) {
- this.armRotation.vertical = vertical;
- if (this.armRotation.vertical < 0) this.armRotation.vertical = 0;
- if (this.armRotation.vertical > 0.5*Math.PI) this.armRotation.vertical = 0.5*Math.PI;
- }
-
- if (horizontal !== undefined || vertical !== undefined) {
- this.calculateCameraOrientation();
- }
- };
-
- /**
- * Retrieve the current arm rotation
- * @return {object} An object with parameters horizontal and vertical
- */
- Graph3d.Camera.prototype.getArmRotation = function() {
- var rot = {};
- rot.horizontal = this.armRotation.horizontal;
- rot.vertical = this.armRotation.vertical;
-
- return rot;
- };
-
- /**
- * Set the (normalized) length of the camera arm.
- * @param {Number} length A length between 0.71 and 5.0
- */
- Graph3d.Camera.prototype.setArmLength = function(length) {
- if (length === undefined)
- return;
-
- this.armLength = length;
-
- // Radius must be larger than the corner of the graph,
- // which has a distance of sqrt(0.5^2+0.5^2) = 0.71 from the center of the
- // graph
- if (this.armLength < 0.71) this.armLength = 0.71;
- if (this.armLength > 5.0) this.armLength = 5.0;
-
- this.calculateCameraOrientation();
- };
-
- /**
- * Retrieve the arm length
- * @return {Number} length
- */
- Graph3d.Camera.prototype.getArmLength = function() {
- return this.armLength;
- };
-
- /**
- * Retrieve the camera location
- * @return {Point3d} cameraLocation
- */
- Graph3d.Camera.prototype.getCameraLocation = function() {
- return this.cameraLocation;
- };
-
- /**
- * Retrieve the camera rotation
- * @return {Point3d} cameraRotation
- */
- Graph3d.Camera.prototype.getCameraRotation = function() {
- return this.cameraRotation;
- };
-
- /**
- * Calculate the location and rotation of the camera based on the
- * position and orientation of the camera arm
- */
- Graph3d.Camera.prototype.calculateCameraOrientation = function() {
- // calculate location of the camera
- this.cameraLocation.x = this.armLocation.x - this.armLength * Math.sin(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
- this.cameraLocation.y = this.armLocation.y - this.armLength * Math.cos(this.armRotation.horizontal) * Math.cos(this.armRotation.vertical);
- this.cameraLocation.z = this.armLocation.z + this.armLength * Math.sin(this.armRotation.vertical);
-
- // calculate rotation of the camera
- this.cameraRotation.x = Math.PI/2 - this.armRotation.vertical;
- this.cameraRotation.y = 0;
- this.cameraRotation.z = -this.armRotation.horizontal;
- };
-
- /**
- * Calculate the scaling values, dependent on the range in x, y, and z direction
- */
- Graph3d.prototype._setScale = function() {
- this.scale = new Point3d(1 / (this.xMax - this.xMin),
- 1 / (this.yMax - this.yMin),
- 1 / (this.zMax - this.zMin));
-
- // keep aspect ration between x and y scale if desired
- if (this.keepAspectRatio) {
- if (this.scale.x < this.scale.y) {
- //noinspection JSSuspiciousNameCombination
- this.scale.y = this.scale.x;
- }
- else {
- //noinspection JSSuspiciousNameCombination
- this.scale.x = this.scale.y;
- }
- }
-
- // scale the vertical axis
- this.scale.z *= this.verticalRatio;
- // TODO: can this be automated? verticalRatio?
-
- // determine scale for (optional) value
- this.scale.value = 1 / (this.valueMax - this.valueMin);
-
- // position the camera arm
- var xCenter = (this.xMax + this.xMin) / 2 * this.scale.x;
- var yCenter = (this.yMax + this.yMin) / 2 * this.scale.y;
- var zCenter = (this.zMax + this.zMin) / 2 * this.scale.z;
- this.camera.setArmLocation(xCenter, yCenter, zCenter);
- };
-
-
- /**
- * Convert a 3D location to a 2D location on screen
- * http://en.wikipedia.org/wiki/3D_projection
- * @param {Point3d} point3d A 3D point with parameters x, y, z
- * @return {Point2d} point2d A 2D point with parameters x, y
- */
- Graph3d.prototype._convert3Dto2D = function(point3d) {
- var translation = this._convertPointToTranslation(point3d);
- return this._convertTranslationToScreen(translation);
- };
-
- /**
- * Convert a 3D location its translation seen from the camera
- * http://en.wikipedia.org/wiki/3D_projection
- * @param {Point3d} point3d A 3D point with parameters x, y, z
- * @return {Point3d} translation A 3D point with parameters x, y, z This is
- * the translation of the point, seen from the
- * camera
- */
- Graph3d.prototype._convertPointToTranslation = function(point3d) {
- var ax = point3d.x * this.scale.x,
- ay = point3d.y * this.scale.y,
- az = point3d.z * this.scale.z,
-
- cx = this.camera.getCameraLocation().x,
- cy = this.camera.getCameraLocation().y,
- cz = this.camera.getCameraLocation().z,
-
- // calculate angles
- sinTx = Math.sin(this.camera.getCameraRotation().x),
- cosTx = Math.cos(this.camera.getCameraRotation().x),
- sinTy = Math.sin(this.camera.getCameraRotation().y),
- cosTy = Math.cos(this.camera.getCameraRotation().y),
- sinTz = Math.sin(this.camera.getCameraRotation().z),
- cosTz = Math.cos(this.camera.getCameraRotation().z),
-
- // calculate translation
- dx = cosTy * (sinTz * (ay - cy) + cosTz * (ax - cx)) - sinTy * (az - cz),
- dy = sinTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) + cosTx * (cosTz * (ay - cy) - sinTz * (ax-cx)),
- dz = cosTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) - sinTx * (cosTz * (ay - cy) - sinTz * (ax-cx));
-
- return new Point3d(dx, dy, dz);
- };
-
- /**
- * Convert a translation point to a point on the screen
- * @param {Point3d} translation A 3D point with parameters x, y, z This is
- * the translation of the point, seen from the
- * camera
- * @return {Point2d} point2d A 2D point with parameters x, y
- */
- Graph3d.prototype._convertTranslationToScreen = function(translation) {
- var ex = this.eye.x,
- ey = this.eye.y,
- ez = this.eye.z,
- dx = translation.x,
- dy = translation.y,
- dz = translation.z;
-
- // calculate position on screen from translation
- var bx;
- var by;
- if (this.showPerspective) {
- bx = (dx - ex) * (ez / dz);
- by = (dy - ey) * (ez / dz);
- }
- else {
- bx = dx * -(ez / this.camera.getArmLength());
- by = dy * -(ez / this.camera.getArmLength());
- }
-
- // shift and scale the point to the center of the screen
- // use the width of the graph to scale both horizontally and vertically.
- return new Point2d(
- this.xcenter + bx * this.frame.canvas.clientWidth,
- this.ycenter - by * this.frame.canvas.clientWidth);
- };
-
- /**
- * Set the background styling for the graph
- * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
- */
- Graph3d.prototype._setBackgroundColor = function(backgroundColor) {
- var fill = 'white';
- var stroke = 'gray';
- var strokeWidth = 1;
-
- if (typeof(backgroundColor) === 'string') {
- fill = backgroundColor;
- stroke = 'none';
- strokeWidth = 0;
- }
- else if (typeof(backgroundColor) === 'object') {
- if (backgroundColor.fill !== undefined) fill = backgroundColor.fill;
- if (backgroundColor.stroke !== undefined) stroke = backgroundColor.stroke;
- if (backgroundColor.strokeWidth !== undefined) strokeWidth = backgroundColor.strokeWidth;
- }
- else if (backgroundColor === undefined) {
- // use use defaults
- }
- else {
- throw 'Unsupported type of backgroundColor';
- }
-
- this.frame.style.backgroundColor = fill;
- this.frame.style.borderColor = stroke;
- this.frame.style.borderWidth = strokeWidth + 'px';
- this.frame.style.borderStyle = 'solid';
- };
-
-
- /// enumerate the available styles
- Graph3d.STYLE = {
- BAR: 0,
- BARCOLOR: 1,
- BARSIZE: 2,
- DOT : 3,
- DOTLINE : 4,
- DOTCOLOR: 5,
- DOTSIZE: 6,
- GRID : 7,
- LINE: 8,
- SURFACE : 9
- };
-
- /**
- * Retrieve the style index from given styleName
- * @param {string} styleName Style name such as 'dot', 'grid', 'dot-line'
- * @return {Number} styleNumber Enumeration value representing the style, or -1
- * when not found
- */
- Graph3d.prototype._getStyleNumber = function(styleName) {
- switch (styleName) {
- case 'dot': return Graph3d.STYLE.DOT;
- case 'dot-line': return Graph3d.STYLE.DOTLINE;
- case 'dot-color': return Graph3d.STYLE.DOTCOLOR;
- case 'dot-size': return Graph3d.STYLE.DOTSIZE;
- case 'line': return Graph3d.STYLE.LINE;
- case 'grid': return Graph3d.STYLE.GRID;
- case 'surface': return Graph3d.STYLE.SURFACE;
- case 'bar': return Graph3d.STYLE.BAR;
- case 'bar-color': return Graph3d.STYLE.BARCOLOR;
- case 'bar-size': return Graph3d.STYLE.BARSIZE;
- }
-
- return -1;
- };
-
- /**
- * Determine the indexes of the data columns, based on the given style and data
- * @param {DataSet} data
- * @param {Number} style
- */
- Graph3d.prototype._determineColumnIndexes = function(data, style) {
- if (this.style === Graph3d.STYLE.DOT ||
- this.style === Graph3d.STYLE.DOTLINE ||
- this.style === Graph3d.STYLE.LINE ||
- this.style === Graph3d.STYLE.GRID ||
- this.style === Graph3d.STYLE.SURFACE ||
- this.style === Graph3d.STYLE.BAR) {
- // 3 columns expected, and optionally a 4th with filter values
- this.colX = 0;
- this.colY = 1;
- this.colZ = 2;
- this.colValue = undefined;
-
- if (data.getNumberOfColumns() > 3) {
- this.colFilter = 3;
- }
- }
- else if (this.style === Graph3d.STYLE.DOTCOLOR ||
- this.style === Graph3d.STYLE.DOTSIZE ||
- this.style === Graph3d.STYLE.BARCOLOR ||
- this.style === Graph3d.STYLE.BARSIZE) {
- // 4 columns expected, and optionally a 5th with filter values
- this.colX = 0;
- this.colY = 1;
- this.colZ = 2;
- this.colValue = 3;
-
- if (data.getNumberOfColumns() > 4) {
- this.colFilter = 4;
- }
- }
- else {
- throw 'Unknown style "' + this.style + '"';
- }
- };
-
- Graph3d.prototype.getNumberOfRows = function(data) {
- return data.length;
- }
-
-
- Graph3d.prototype.getNumberOfColumns = function(data) {
- var counter = 0;
- for (var column in data[0]) {
- if (data[0].hasOwnProperty(column)) {
- counter++;
- }
- }
- return counter;
- }
-
-
- Graph3d.prototype.getDistinctValues = function(data, column) {
- var distinctValues = [];
- for (var i = 0; i < data.length; i++) {
- if (distinctValues.indexOf(data[i][column]) == -1) {
- distinctValues.push(data[i][column]);
- }
- }
- return distinctValues;
- }
-
-
- Graph3d.prototype.getColumnRange = function(data,column) {
- var minMax = {min:data[0][column],max:data[0][column]};
- for (var i = 0; i < data.length; i++) {
- if (minMax.min > data[i][column]) { minMax.min = data[i][column]; }
- if (minMax.max < data[i][column]) { minMax.max = data[i][column]; }
- }
- return minMax;
- };
-
- /**
- * Initialize the data from the data table. Calculate minimum and maximum values
- * and column index values
- * @param {Array | DataSet | DataView} rawData The data containing the items for the Graph.
- * @param {Number} style Style Number
- */
- Graph3d.prototype._dataInitialize = function (rawData, style) {
- var me = this;
-
- // unsubscribe from the dataTable
- if (this.dataSet) {
- this.dataSet.off('*', this._onChange);
- }
-
- if (rawData === undefined)
- return;
-
- if (Array.isArray(rawData)) {
- rawData = new DataSet(rawData);
- }
-
- var data;
- if (rawData instanceof DataSet || rawData instanceof DataView) {
- data = rawData.get();
- }
- else {
- throw new Error('Array, DataSet, or DataView expected');
- }
-
- if (data.length == 0)
- return;
-
- this.dataSet = rawData;
- this.dataTable = data;
-
- // subscribe to changes in the dataset
- this._onChange = function () {
- me.setData(me.dataSet);
- };
- this.dataSet.on('*', this._onChange);
-
- // _determineColumnIndexes
- // getNumberOfRows (points)
- // getNumberOfColumns (x,y,z,v,t,t1,t2...)
- // getDistinctValues (unique values?)
- // getColumnRange
-
- // determine the location of x,y,z,value,filter columns
- this.colX = 'x';
- this.colY = 'y';
- this.colZ = 'z';
- this.colValue = 'style';
- this.colFilter = 'filter';
-
-
-
- // check if a filter column is provided
- if (data[0].hasOwnProperty('filter')) {
- if (this.dataFilter === undefined) {
- this.dataFilter = new Filter(rawData, this.colFilter, this);
- this.dataFilter.setOnLoadCallback(function() {me.redraw();});
- }
- }
-
-
- var withBars = this.style == Graph3d.STYLE.BAR ||
- this.style == Graph3d.STYLE.BARCOLOR ||
- this.style == Graph3d.STYLE.BARSIZE;
-
- // determine barWidth from data
- if (withBars) {
- if (this.defaultXBarWidth !== undefined) {
- this.xBarWidth = this.defaultXBarWidth;
- }
- else {
- var dataX = this.getDistinctValues(data,this.colX);
- this.xBarWidth = (dataX[1] - dataX[0]) || 1;
- }
-
- if (this.defaultYBarWidth !== undefined) {
- this.yBarWidth = this.defaultYBarWidth;
- }
- else {
- var dataY = this.getDistinctValues(data,this.colY);
- this.yBarWidth = (dataY[1] - dataY[0]) || 1;
- }
- }
-
- // calculate minimums and maximums
- var xRange = this.getColumnRange(data,this.colX);
- if (withBars) {
- xRange.min -= this.xBarWidth / 2;
- xRange.max += this.xBarWidth / 2;
- }
- this.xMin = (this.defaultXMin !== undefined) ? this.defaultXMin : xRange.min;
- this.xMax = (this.defaultXMax !== undefined) ? this.defaultXMax : xRange.max;
- if (this.xMax <= this.xMin) this.xMax = this.xMin + 1;
- this.xStep = (this.defaultXStep !== undefined) ? this.defaultXStep : (this.xMax-this.xMin)/5;
-
- var yRange = this.getColumnRange(data,this.colY);
- if (withBars) {
- yRange.min -= this.yBarWidth / 2;
- yRange.max += this.yBarWidth / 2;
- }
- this.yMin = (this.defaultYMin !== undefined) ? this.defaultYMin : yRange.min;
- this.yMax = (this.defaultYMax !== undefined) ? this.defaultYMax : yRange.max;
- if (this.yMax <= this.yMin) this.yMax = this.yMin + 1;
- this.yStep = (this.defaultYStep !== undefined) ? this.defaultYStep : (this.yMax-this.yMin)/5;
-
- var zRange = this.getColumnRange(data,this.colZ);
- this.zMin = (this.defaultZMin !== undefined) ? this.defaultZMin : zRange.min;
- this.zMax = (this.defaultZMax !== undefined) ? this.defaultZMax : zRange.max;
- if (this.zMax <= this.zMin) this.zMax = this.zMin + 1;
- this.zStep = (this.defaultZStep !== undefined) ? this.defaultZStep : (this.zMax-this.zMin)/5;
-
- if (this.colValue !== undefined) {
- var valueRange = this.getColumnRange(data,this.colValue);
- this.valueMin = (this.defaultValueMin !== undefined) ? this.defaultValueMin : valueRange.min;
- this.valueMax = (this.defaultValueMax !== undefined) ? this.defaultValueMax : valueRange.max;
- if (this.valueMax <= this.valueMin) this.valueMax = this.valueMin + 1;
- }
-
- // set the scale dependent on the ranges.
- this._setScale();
- };
-
-
-
- /**
- * Filter the data based on the current filter
- * @param {Array} data
- * @return {Array} dataPoints Array with point objects which can be drawn on screen
- */
- Graph3d.prototype._getDataPoints = function (data) {
- // TODO: store the created matrix dataPoints in the filters instead of reloading each time
- var x, y, i, z, obj, point;
-
- var dataPoints = [];
-
- if (this.style === Graph3d.STYLE.GRID ||
- this.style === Graph3d.STYLE.SURFACE) {
- // copy all values from the google data table to a matrix
- // the provided values are supposed to form a grid of (x,y) positions
-
- // create two lists with all present x and y values
- var dataX = [];
- var dataY = [];
- for (i = 0; i < this.getNumberOfRows(data); i++) {
- x = data[i][this.colX] || 0;
- y = data[i][this.colY] || 0;
-
- if (dataX.indexOf(x) === -1) {
- dataX.push(x);
- }
- if (dataY.indexOf(y) === -1) {
- dataY.push(y);
- }
- }
-
- function sortNumber(a, b) {
- return a - b;
- }
- dataX.sort(sortNumber);
- dataY.sort(sortNumber);
-
- // create a grid, a 2d matrix, with all values.
- var dataMatrix = []; // temporary data matrix
- for (i = 0; i < data.length; i++) {
- x = data[i][this.colX] || 0;
- y = data[i][this.colY] || 0;
- z = data[i][this.colZ] || 0;
-
- var xIndex = dataX.indexOf(x); // TODO: implement Array().indexOf() for Internet Explorer
- var yIndex = dataY.indexOf(y);
-
- if (dataMatrix[xIndex] === undefined) {
- dataMatrix[xIndex] = [];
- }
-
- var point3d = new Point3d();
- point3d.x = x;
- point3d.y = y;
- point3d.z = z;
-
- obj = {};
- obj.point = point3d;
- obj.trans = undefined;
- obj.screen = undefined;
- obj.bottom = new Point3d(x, y, this.zMin);
-
- dataMatrix[xIndex][yIndex] = obj;
-
- dataPoints.push(obj);
- }
-
- // fill in the pointers to the neighbors.
- for (x = 0; x < dataMatrix.length; x++) {
- for (y = 0; y < dataMatrix[x].length; y++) {
- if (dataMatrix[x][y]) {
- dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
- dataMatrix[x][y].pointTop = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
- dataMatrix[x][y].pointCross =
- (x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
- dataMatrix[x+1][y+1] :
- undefined;
- }
- }
- }
- }
- else { // 'dot', 'dot-line', etc.
- // copy all values from the google data table to a list with Point3d objects
- for (i = 0; i < data.length; i++) {
- point = new Point3d();
- point.x = data[i][this.colX] || 0;
- point.y = data[i][this.colY] || 0;
- point.z = data[i][this.colZ] || 0;
-
- if (this.colValue !== undefined) {
- point.value = data[i][this.colValue] || 0;
- }
-
- obj = {};
- obj.point = point;
- obj.bottom = new Point3d(point.x, point.y, this.zMin);
- obj.trans = undefined;
- obj.screen = undefined;
-
- dataPoints.push(obj);
- }
- }
-
- return dataPoints;
- };
-
-
-
-
- /**
- * Append suffix 'px' to provided value x
- * @param {int} x An integer value
- * @return {string} the string value of x, followed by the suffix 'px'
- */
- Graph3d.px = function(x) {
- return x + 'px';
- };
-
-
- /**
- * Create the main frame for the Graph3d.
- * This function is executed once when a Graph3d object is created. The frame
- * contains a canvas, and this canvas contains all objects like the axis and
- * nodes.
- */
- Graph3d.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.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);
- }
-
- this.frame.filter = document.createElement( 'div' );
- this.frame.filter.style.position = 'absolute';
- this.frame.filter.style.bottom = '0px';
- this.frame.filter.style.left = '0px';
- this.frame.filter.style.width = '100%';
- this.frame.appendChild(this.frame.filter);
-
- // add event listeners to handle moving and zooming the contents
- var me = this;
- var onmousedown = function (event) {me._onMouseDown(event);};
- var ontouchstart = function (event) {me._onTouchStart(event);};
- var onmousewheel = function (event) {me._onWheel(event);};
- var ontooltip = function (event) {me._onTooltip(event);};
- // TODO: these events are never cleaned up... can give a 'memory leakage'
-
- G3DaddEventListener(this.frame.canvas, 'keydown', onkeydown);
- G3DaddEventListener(this.frame.canvas, 'mousedown', onmousedown);
- G3DaddEventListener(this.frame.canvas, 'touchstart', ontouchstart);
- G3DaddEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
- G3DaddEventListener(this.frame.canvas, 'mousemove', ontooltip);
-
- // add the new graph to the container element
- this.containerElement.appendChild(this.frame);
- };
-
-
- /**
- * 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%')
- */
- Graph3d.prototype.setSize = function(width, height) {
- this.frame.style.width = width;
- this.frame.style.height = height;
-
- this._resizeCanvas();
- };
-
- /**
- * Resize the canvas to the current size of the frame
- */
- Graph3d.prototype._resizeCanvas = function() {
- 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;
-
- // adjust with for margin
- this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px';
- };
-
- /**
- * Start animation
- */
- Graph3d.prototype.animationStart = function() {
- if (!this.frame.filter || !this.frame.filter.slider)
- throw 'No animation available';
-
- this.frame.filter.slider.play();
- };
-
-
- /**
- * Stop animation
- */
- Graph3d.prototype.animationStop = function() {
- if (!this.frame.filter || !this.frame.filter.slider) return;
-
- this.frame.filter.slider.stop();
- };
-
-
- /**
- * Resize the center position based on the current values in this.defaultXCenter
- * and this.defaultYCenter (which are strings with a percentage or a value
- * in pixels). The center positions are the variables this.xCenter
- * and this.yCenter
- */
- Graph3d.prototype._resizeCenter = function() {
- // calculate the horizontal center position
- if (this.defaultXCenter.charAt(this.defaultXCenter.length-1) === '%') {
- this.xcenter =
- parseFloat(this.defaultXCenter) / 100 *
- this.frame.canvas.clientWidth;
- }
- else {
- this.xcenter = parseFloat(this.defaultXCenter); // supposed to be in px
- }
-
- // calculate the vertical center position
- if (this.defaultYCenter.charAt(this.defaultYCenter.length-1) === '%') {
- this.ycenter =
- parseFloat(this.defaultYCenter) / 100 *
- (this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
- }
- else {
- this.ycenter = parseFloat(this.defaultYCenter); // supposed to be in px
- }
- };
-
- /**
- * Set the rotation and distance of the camera
- * @param {Object} pos An object with the camera position. The object
- * contains three parameters:
- * - horizontal {Number}
- * The horizontal rotation, between 0 and 2*PI.
- * Optional, can be left undefined.
- * - vertical {Number}
- * The vertical rotation, between 0 and 0.5*PI
- * if vertical=0.5*PI, the graph is shown from the
- * top. Optional, can be left undefined.
- * - distance {Number}
- * The (normalized) distance of the camera to the
- * center of the graph, a value between 0.71 and 5.0.
- * Optional, can be left undefined.
- */
- Graph3d.prototype.setCameraPosition = function(pos) {
- if (pos === undefined) {
- return;
- }
-
- if (pos.horizontal !== undefined && pos.vertical !== undefined) {
- this.camera.setArmRotation(pos.horizontal, pos.vertical);
- }
-
- if (pos.distance !== undefined) {
- this.camera.setArmLength(pos.distance);
- }
-
- this.redraw();
- };
-
-
- /**
- * Retrieve the current camera rotation
- * @return {object} An object with parameters horizontal, vertical, and
- * distance
- */
- Graph3d.prototype.getCameraPosition = function() {
- var pos = this.camera.getArmRotation();
- pos.distance = this.camera.getArmLength();
- return pos;
- };
-
- /**
- * Load data into the 3D Graph
- */
- Graph3d.prototype._readData = function(data) {
- // read the data
- this._dataInitialize(data, this.style);
-
-
- if (this.dataFilter) {
- // apply filtering
- this.dataPoints = this.dataFilter._getDataPoints();
- }
- else {
- // no filtering. load all data
- this.dataPoints = this._getDataPoints(this.dataTable);
- }
-
- // draw the filter
- this._redrawFilter();
- };
-
- /**
- * Replace the dataset of the Graph3d
- * @param {Array | DataSet | DataView} data
- */
- Graph3d.prototype.setData = function (data) {
- this._readData(data);
- this.redraw();
-
- // start animation when option is true
- if (this.animationAutoStart && this.dataFilter) {
- this.animationStart();
- }
- };
-
- /**
- * Update the options. Options will be merged with current options
- * @param {Object} options
- */
- Graph3d.prototype.setOptions = function (options) {
- var cameraPosition = undefined;
-
- this.animationStop();
-
- if (options !== undefined) {
- // retrieve parameter values
- if (options.width !== undefined) this.width = options.width;
- if (options.height !== undefined) this.height = options.height;
-
- if (options.xCenter !== undefined) this.defaultXCenter = options.xCenter;
- if (options.yCenter !== undefined) this.defaultYCenter = options.yCenter;
-
- if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel;
- if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel;
- if (options.xLabel !== undefined) this.xLabel = options.xLabel;
- if (options.yLabel !== undefined) this.yLabel = options.yLabel;
- if (options.zLabel !== undefined) this.zLabel = options.zLabel;
-
- if (options.style !== undefined) {
- var styleNumber = this._getStyleNumber(options.style);
- if (styleNumber !== -1) {
- this.style = styleNumber;
- }
- }
- if (options.showGrid !== undefined) this.showGrid = options.showGrid;
- if (options.showPerspective !== undefined) this.showPerspective = options.showPerspective;
- if (options.showShadow !== undefined) this.showShadow = options.showShadow;
- if (options.tooltip !== undefined) this.showTooltip = options.tooltip;
- if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
- if (options.keepAspectRatio !== undefined) this.keepAspectRatio = options.keepAspectRatio;
- if (options.verticalRatio !== undefined) this.verticalRatio = options.verticalRatio;
-
- if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
- if (options.animationPreload !== undefined) this.animationPreload = options.animationPreload;
- if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
-
- if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
- if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
-
- if (options.xMin !== undefined) this.defaultXMin = options.xMin;
- if (options.xStep !== undefined) this.defaultXStep = options.xStep;
- if (options.xMax !== undefined) this.defaultXMax = options.xMax;
- if (options.yMin !== undefined) this.defaultYMin = options.yMin;
- if (options.yStep !== undefined) this.defaultYStep = options.yStep;
- if (options.yMax !== undefined) this.defaultYMax = options.yMax;
- if (options.zMin !== undefined) this.defaultZMin = options.zMin;
- if (options.zStep !== undefined) this.defaultZStep = options.zStep;
- if (options.zMax !== undefined) this.defaultZMax = options.zMax;
- if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
- if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
-
- if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
-
- if (cameraPosition !== undefined) {
- this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
- this.camera.setArmLength(cameraPosition.distance);
- }
- else {
- this.camera.setArmRotation(1.0, 0.5);
- this.camera.setArmLength(1.7);
- }
- }
-
- this._setBackgroundColor(options && options.backgroundColor);
-
- this.setSize(this.width, this.height);
-
- // re-load the data
- if (this.dataTable) {
- this.setData(this.dataTable);
- }
-
- // start animation when option is true
- if (this.animationAutoStart && this.dataFilter) {
- this.animationStart();
- }
- };
-
- /**
- * Redraw the Graph.
- */
- Graph3d.prototype.redraw = function() {
- if (this.dataPoints === undefined) {
- throw 'Error: graph data not initialized';
- }
-
- this._resizeCanvas();
- this._resizeCenter();
- this._redrawSlider();
- this._redrawClear();
- this._redrawAxis();
-
- if (this.style === Graph3d.STYLE.GRID ||
- this.style === Graph3d.STYLE.SURFACE) {
- this._redrawDataGrid();
- }
- else if (this.style === Graph3d.STYLE.LINE) {
- this._redrawDataLine();
- }
- else if (this.style === Graph3d.STYLE.BAR ||
- this.style === Graph3d.STYLE.BARCOLOR ||
- this.style === Graph3d.STYLE.BARSIZE) {
- this._redrawDataBar();
- }
- else {
- // style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
- this._redrawDataDot();
- }
-
- this._redrawInfo();
- this._redrawLegend();
- };
-
- /**
- * Clear the canvas before redrawing
- */
- Graph3d.prototype._redrawClear = function() {
- var canvas = this.frame.canvas;
- var ctx = canvas.getContext('2d');
-
- ctx.clearRect(0, 0, canvas.width, canvas.height);
- };
-
-
- /**
- * Redraw the legend showing the colors
- */
- Graph3d.prototype._redrawLegend = function() {
- var y;
-
- if (this.style === Graph3d.STYLE.DOTCOLOR ||
- this.style === Graph3d.STYLE.DOTSIZE) {
-
- var dotSize = this.frame.clientWidth * 0.02;
-
- var widthMin, widthMax;
- if (this.style === Graph3d.STYLE.DOTSIZE) {
- widthMin = dotSize / 2; // px
- widthMax = dotSize / 2 + dotSize * 2; // Todo: put this in one function
- }
- else {
- widthMin = 20; // px
- widthMax = 20; // px
- }
-
- var height = Math.max(this.frame.clientHeight * 0.25, 100);
- var top = this.margin;
- var right = this.frame.clientWidth - this.margin;
- var left = right - widthMax;
- var bottom = top + height;
- }
-
- var canvas = this.frame.canvas;
- var ctx = canvas.getContext('2d');
- ctx.lineWidth = 1;
- ctx.font = '14px arial'; // TODO: put in options
-
- if (this.style === Graph3d.STYLE.DOTCOLOR) {
- // draw the color bar
- var ymin = 0;
- var ymax = height; // Todo: make height customizable
- for (y = ymin; y < ymax; y++) {
- var f = (y - ymin) / (ymax - ymin);
-
- //var width = (dotSize / 2 + (1-f) * dotSize * 2); // Todo: put this in one function
- var hue = f * 240;
- var color = this._hsv2rgb(hue, 1, 1);
-
- ctx.strokeStyle = color;
- ctx.beginPath();
- ctx.moveTo(left, top + y);
- ctx.lineTo(right, top + y);
- ctx.stroke();
- }
-
- ctx.strokeStyle = this.colorAxis;
- ctx.strokeRect(left, top, widthMax, height);
- }
-
- if (this.style === Graph3d.STYLE.DOTSIZE) {
- // draw border around color bar
- ctx.strokeStyle = this.colorAxis;
- ctx.fillStyle = this.colorDot;
- ctx.beginPath();
- ctx.moveTo(left, top);
- ctx.lineTo(right, top);
- ctx.lineTo(right - widthMax + widthMin, bottom);
- ctx.lineTo(left, bottom);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- }
-
- if (this.style === Graph3d.STYLE.DOTCOLOR ||
- this.style === Graph3d.STYLE.DOTSIZE) {
- // print values along the color bar
- var gridLineLen = 5; // px
- var step = new StepNumber(this.valueMin, this.valueMax, (this.valueMax-this.valueMin)/5, true);
- step.start();
- if (step.getCurrent() < this.valueMin) {
- step.next();
- }
- while (!step.end()) {
- y = bottom - (step.getCurrent() - this.valueMin) / (this.valueMax - this.valueMin) * height;
-
- ctx.beginPath();
- ctx.moveTo(left - gridLineLen, y);
- ctx.lineTo(left, y);
- ctx.stroke();
-
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
-
- step.next();
- }
-
- ctx.textAlign = 'right';
- ctx.textBaseline = 'top';
- var label = this.legendLabel;
- ctx.fillText(label, right, bottom + this.margin);
- }
- };
-
- /**
- * Redraw the filter
- */
- Graph3d.prototype._redrawFilter = function() {
- this.frame.filter.innerHTML = '';
-
- if (this.dataFilter) {
- var options = {
- 'visible': this.showAnimationControls
- };
- var slider = new Slider(this.frame.filter, options);
- this.frame.filter.slider = slider;
-
- // TODO: css here is not nice here...
- this.frame.filter.style.padding = '10px';
- //this.frame.filter.style.backgroundColor = '#EFEFEF';
-
- slider.setValues(this.dataFilter.values);
- slider.setPlayInterval(this.animationInterval);
-
- // create an event handler
- var me = this;
- var onchange = function () {
- var index = slider.getIndex();
-
- me.dataFilter.selectValue(index);
- me.dataPoints = me.dataFilter._getDataPoints();
-
- me.redraw();
- };
- slider.setOnChangeCallback(onchange);
- }
- else {
- this.frame.filter.slider = undefined;
- }
- };
-
- /**
- * Redraw the slider
- */
- Graph3d.prototype._redrawSlider = function() {
- if ( this.frame.filter.slider !== undefined) {
- this.frame.filter.slider.redraw();
- }
- };
-
-
- /**
- * Redraw common information
- */
- Graph3d.prototype._redrawInfo = function() {
- if (this.dataFilter) {
- var canvas = this.frame.canvas;
- var ctx = canvas.getContext('2d');
-
- ctx.font = '14px arial'; // TODO: put in options
- ctx.lineStyle = 'gray';
- ctx.fillStyle = 'gray';
- ctx.textAlign = 'left';
- ctx.textBaseline = 'top';
-
- var x = this.margin;
- var y = this.margin;
- ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y);
- }
- };
-
-
- /**
- * Redraw the axis
- */
- Graph3d.prototype._redrawAxis = function() {
- var canvas = this.frame.canvas,
- ctx = canvas.getContext('2d'),
- from, to, step, prettyStep,
- text, xText, yText, zText,
- offset, xOffset, yOffset,
- xMin2d, xMax2d;
-
- // TODO: get the actual rendered style of the containerElement
- //ctx.font = this.containerElement.style.font;
- ctx.font = 24 / this.camera.getArmLength() + 'px arial';
-
- // calculate the length for the short grid lines
- var gridLenX = 0.025 / this.scale.x;
- var gridLenY = 0.025 / this.scale.y;
- var textMargin = 5 / this.camera.getArmLength(); // px
- var armAngle = this.camera.getArmRotation().horizontal;
-
- // draw x-grid lines
- ctx.lineWidth = 1;
- prettyStep = (this.defaultXStep === undefined);
- step = new StepNumber(this.xMin, this.xMax, this.xStep, prettyStep);
- step.start();
- if (step.getCurrent() < this.xMin) {
- step.next();
- }
- while (!step.end()) {
- var x = step.getCurrent();
-
- if (this.showGrid) {
- from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
- to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
- ctx.strokeStyle = this.colorGrid;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
- }
- else {
- from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
- to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
-
- from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
- to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
- }
-
- yText = (Math.cos(armAngle) > 0) ? this.yMin : this.yMax;
- text = this._convert3Dto2D(new Point3d(x, yText, this.zMin));
- if (Math.cos(armAngle * 2) > 0) {
- ctx.textAlign = 'center';
- ctx.textBaseline = 'top';
- text.y += textMargin;
- }
- else if (Math.sin(armAngle * 2) < 0){
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- }
- else {
- ctx.textAlign = 'left';
- ctx.textBaseline = 'middle';
- }
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(' ' + step.getCurrent() + ' ', text.x, text.y);
-
- step.next();
- }
-
- // draw y-grid lines
- ctx.lineWidth = 1;
- prettyStep = (this.defaultYStep === undefined);
- step = new StepNumber(this.yMin, this.yMax, this.yStep, prettyStep);
- step.start();
- if (step.getCurrent() < this.yMin) {
- step.next();
- }
- while (!step.end()) {
- if (this.showGrid) {
- from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
- to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
- ctx.strokeStyle = this.colorGrid;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
- }
- else {
- from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
- to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
-
- from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
- to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
- }
-
- xText = (Math.sin(armAngle ) > 0) ? this.xMin : this.xMax;
- text = this._convert3Dto2D(new Point3d(xText, step.getCurrent(), this.zMin));
- if (Math.cos(armAngle * 2) < 0) {
- ctx.textAlign = 'center';
- ctx.textBaseline = 'top';
- text.y += textMargin;
- }
- else if (Math.sin(armAngle * 2) > 0){
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- }
- else {
- ctx.textAlign = 'left';
- ctx.textBaseline = 'middle';
- }
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(' ' + step.getCurrent() + ' ', text.x, text.y);
-
- step.next();
- }
-
- // draw z-grid lines and axis
- ctx.lineWidth = 1;
- prettyStep = (this.defaultZStep === undefined);
- step = new StepNumber(this.zMin, this.zMax, this.zStep, prettyStep);
- step.start();
- if (step.getCurrent() < this.zMin) {
- step.next();
- }
- xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
- yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
- while (!step.end()) {
- // TODO: make z-grid lines really 3d?
- from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(from.x - textMargin, from.y);
- ctx.stroke();
-
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(step.getCurrent() + ' ', from.x - 5, from.y);
-
- step.next();
- }
- ctx.lineWidth = 1;
- from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
- to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
-
- // draw x-axis
- ctx.lineWidth = 1;
- // line at yMin
- xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
- xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(xMin2d.x, xMin2d.y);
- ctx.lineTo(xMax2d.x, xMax2d.y);
- ctx.stroke();
- // line at ymax
- xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
- xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(xMin2d.x, xMin2d.y);
- ctx.lineTo(xMax2d.x, xMax2d.y);
- ctx.stroke();
-
- // draw y-axis
- ctx.lineWidth = 1;
- // line at xMin
- from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
- to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
- // line at xMax
- from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
- to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
- ctx.strokeStyle = this.colorAxis;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(to.x, to.y);
- ctx.stroke();
-
- // draw x-label
- var xLabel = this.xLabel;
- if (xLabel.length > 0) {
- yOffset = 0.1 / this.scale.y;
- xText = (this.xMin + this.xMax) / 2;
- yText = (Math.cos(armAngle) > 0) ? this.yMin - yOffset: this.yMax + yOffset;
- text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
- if (Math.cos(armAngle * 2) > 0) {
- ctx.textAlign = 'center';
- ctx.textBaseline = 'top';
- }
- else if (Math.sin(armAngle * 2) < 0){
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- }
- else {
- ctx.textAlign = 'left';
- ctx.textBaseline = 'middle';
- }
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(xLabel, text.x, text.y);
- }
-
- // draw y-label
- var yLabel = this.yLabel;
- if (yLabel.length > 0) {
- xOffset = 0.1 / this.scale.x;
- xText = (Math.sin(armAngle ) > 0) ? this.xMin - xOffset : this.xMax + xOffset;
- yText = (this.yMin + this.yMax) / 2;
- text = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
- if (Math.cos(armAngle * 2) < 0) {
- ctx.textAlign = 'center';
- ctx.textBaseline = 'top';
- }
- else if (Math.sin(armAngle * 2) > 0){
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- }
- else {
- ctx.textAlign = 'left';
- ctx.textBaseline = 'middle';
- }
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(yLabel, text.x, text.y);
- }
-
- // draw z-label
- var zLabel = this.zLabel;
- if (zLabel.length > 0) {
- offset = 30; // pixels. // TODO: relate to the max width of the values on the z axis?
- xText = (Math.cos(armAngle ) > 0) ? this.xMin : this.xMax;
- yText = (Math.sin(armAngle ) < 0) ? this.yMin : this.yMax;
- zText = (this.zMin + this.zMax) / 2;
- text = this._convert3Dto2D(new Point3d(xText, yText, zText));
- ctx.textAlign = 'right';
- ctx.textBaseline = 'middle';
- ctx.fillStyle = this.colorAxis;
- ctx.fillText(zLabel, text.x - offset, text.y);
- }
- };
-
- /**
- * Calculate the color based on the given value.
- * @param {Number} H Hue, a value be between 0 and 360
- * @param {Number} S Saturation, a value between 0 and 1
- * @param {Number} V Value, a value between 0 and 1
- */
- Graph3d.prototype._hsv2rgb = function(H, S, V) {
- var R, G, B, C, Hi, X;
-
- C = V * S;
- Hi = Math.floor(H/60); // hi = 0,1,2,3,4,5
- X = C * (1 - Math.abs(((H/60) % 2) - 1));
-
- switch (Hi) {
- case 0: R = C; G = X; B = 0; break;
- case 1: R = X; G = C; B = 0; break;
- case 2: R = 0; G = C; B = X; break;
- case 3: R = 0; G = X; B = C; break;
- case 4: R = X; G = 0; B = C; break;
- case 5: R = C; G = 0; B = X; break;
-
- default: R = 0; G = 0; B = 0; break;
- }
-
- return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')';
- };
-
-
- /**
- * Draw all datapoints as a grid
- * This function can be used when the style is 'grid'
- */
- Graph3d.prototype._redrawDataGrid = function() {
- var canvas = this.frame.canvas,
- ctx = canvas.getContext('2d'),
- point, right, top, cross,
- i,
- topSideVisible, fillStyle, strokeStyle, lineWidth,
- h, s, v, zAvg;
-
-
- if (this.dataPoints === undefined || this.dataPoints.length <= 0)
- return; // TODO: throw exception?
-
- // calculate the translations and screen position of all points
- for (i = 0; i < this.dataPoints.length; i++) {
- var trans = this._convertPointToTranslation(this.dataPoints[i].point);
- var screen = this._convertTranslationToScreen(trans);
-
- this.dataPoints[i].trans = trans;
- this.dataPoints[i].screen = screen;
-
- // calculate the translation of the point at the bottom (needed for sorting)
- var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
- this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
- }
-
- // sort the points on depth of their (x,y) position (not on z)
- var sortDepth = function (a, b) {
- return b.dist - a.dist;
- };
- this.dataPoints.sort(sortDepth);
-
- if (this.style === Graph3d.STYLE.SURFACE) {
- for (i = 0; i < this.dataPoints.length; i++) {
- point = this.dataPoints[i];
- right = this.dataPoints[i].pointRight;
- top = this.dataPoints[i].pointTop;
- cross = this.dataPoints[i].pointCross;
-
- if (point !== undefined && right !== undefined && top !== undefined && cross !== undefined) {
-
- if (this.showGrayBottom || this.showShadow) {
- // calculate the cross product of the two vectors from center
- // to left and right, in order to know whether we are looking at the
- // bottom or at the top side. We can also use the cross product
- // for calculating light intensity
- var aDiff = Point3d.subtract(cross.trans, point.trans);
- var bDiff = Point3d.subtract(top.trans, right.trans);
- var crossproduct = Point3d.crossProduct(aDiff, bDiff);
- var len = crossproduct.length();
- // FIXME: there is a bug with determining the surface side (shadow or colored)
-
- topSideVisible = (crossproduct.z > 0);
- }
- else {
- topSideVisible = true;
- }
-
- if (topSideVisible) {
- // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
- zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
- h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
- s = 1; // saturation
-
- if (this.showShadow) {
- v = Math.min(1 + (crossproduct.x / len) / 2, 1); // value. TODO: scale
- fillStyle = this._hsv2rgb(h, s, v);
- strokeStyle = fillStyle;
- }
- else {
- v = 1;
- fillStyle = this._hsv2rgb(h, s, v);
- strokeStyle = this.colorAxis;
- }
- }
- else {
- fillStyle = 'gray';
- strokeStyle = this.colorAxis;
- }
- lineWidth = 0.5;
-
- ctx.lineWidth = lineWidth;
- ctx.fillStyle = fillStyle;
- ctx.strokeStyle = strokeStyle;
- ctx.beginPath();
- ctx.moveTo(point.screen.x, point.screen.y);
- ctx.lineTo(right.screen.x, right.screen.y);
- ctx.lineTo(cross.screen.x, cross.screen.y);
- ctx.lineTo(top.screen.x, top.screen.y);
- ctx.closePath();
- ctx.fill();
- ctx.stroke();
- }
- }
- }
- else { // grid style
- for (i = 0; i < this.dataPoints.length; i++) {
- point = this.dataPoints[i];
- right = this.dataPoints[i].pointRight;
- top = this.dataPoints[i].pointTop;
-
- if (point !== undefined) {
- if (this.showPerspective) {
- lineWidth = 2 / -point.trans.z;
- }
- else {
- lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
- }
- }
-
- if (point !== undefined && right !== undefined) {
- // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
- zAvg = (point.point.z + right.point.z) / 2;
- h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
-
- ctx.lineWidth = lineWidth;
- ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
- ctx.beginPath();
- ctx.moveTo(point.screen.x, point.screen.y);
- ctx.lineTo(right.screen.x, right.screen.y);
- ctx.stroke();
- }
-
- if (point !== undefined && top !== undefined) {
- // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
- zAvg = (point.point.z + top.point.z) / 2;
- h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
-
- ctx.lineWidth = lineWidth;
- ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
- ctx.beginPath();
- ctx.moveTo(point.screen.x, point.screen.y);
- ctx.lineTo(top.screen.x, top.screen.y);
- ctx.stroke();
- }
- }
- }
- };
-
-
- /**
- * Draw all datapoints as dots.
- * This function can be used when the style is 'dot' or 'dot-line'
- */
- Graph3d.prototype._redrawDataDot = function() {
- var canvas = this.frame.canvas;
- var ctx = canvas.getContext('2d');
- var i;
-
- if (this.dataPoints === undefined || this.dataPoints.length <= 0)
- return; // TODO: throw exception?
-
- // calculate the translations of all points
- for (i = 0; i < this.dataPoints.length; i++) {
- var trans = this._convertPointToTranslation(this.dataPoints[i].point);
- var screen = this._convertTranslationToScreen(trans);
- this.dataPoints[i].trans = trans;
- this.dataPoints[i].screen = screen;
-
- // calculate the distance from the point at the bottom to the camera
- var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
- this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
- }
-
- // order the translated points by depth
- var sortDepth = function (a, b) {
- return b.dist - a.dist;
- };
- this.dataPoints.sort(sortDepth);
-
- // draw the datapoints as colored circles
- var dotSize = this.frame.clientWidth * 0.02; // px
- for (i = 0; i < this.dataPoints.length; i++) {
- var point = this.dataPoints[i];
-
- if (this.style === Graph3d.STYLE.DOTLINE) {
- // draw a vertical line from the bottom to the graph value
- //var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
- var from = this._convert3Dto2D(point.bottom);
- ctx.lineWidth = 1;
- ctx.strokeStyle = this.colorGrid;
- ctx.beginPath();
- ctx.moveTo(from.x, from.y);
- ctx.lineTo(point.screen.x, point.screen.y);
- ctx.stroke();
- }
-
- // calculate radius for the circle
- var size;
- if (this.style === Graph3d.STYLE.DOTSIZE) {
- size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
- }
- else {
- size = dotSize;
- }
-
- var radius;
- if (this.showPerspective) {
- radius = size / -point.trans.z;
- }
- else {
- radius = size * -(this.eye.z / this.camera.getArmLength());
- }
- if (radius < 0) {
- radius = 0;
- }
-
- var hue, color, borderColor;
- if (this.style === Graph3d.STYLE.DOTCOLOR ) {
- // calculate the color based on the value
- hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
- color = this._hsv2rgb(hue, 1, 1);
- borderColor = this._hsv2rgb(hue, 1, 0.8);
- }
- else if (this.style === Graph3d.STYLE.DOTSIZE) {
- color = this.colorDot;
- borderColor = this.colorDotBorder;
- }
- else {
- // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
- hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
- color = this._hsv2rgb(hue, 1, 1);
- borderColor = this._hsv2rgb(hue, 1, 0.8);
- }
-
- // draw the circle
- ctx.lineWidth = 1.0;
- ctx.strokeStyle = borderColor;
- ctx.fillStyle = color;
- ctx.beginPath();
- ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
- ctx.fill();
- ctx.stroke();
- }
- };
-
- /**
- * Draw all datapoints as bars.
- * This function can be used when the style is 'bar', 'bar-color', or 'bar-size'
- */
- Graph3d.prototype._redrawDataBar = function() {
- var canvas = this.frame.canvas;
- var ctx = canvas.getContext('2d');
- var i, j, surface, corners;
-
- if (this.dataPoints === undefined || this.dataPoints.length <= 0)
- return; // TODO: throw exception?
-
- // calculate the translations of all points
- for (i = 0; i < this.dataPoints.length; i++) {
- var trans = this._convertPointToTranslation(this.dataPoints[i].point);
- var screen = this._convertTranslationToScreen(trans);
- this.dataPoints[i].trans = trans;
- this.dataPoints[i].screen = screen;
-
- // calculate the distance from the point at the bottom to the camera
- var transBottom = this._convertPointToTranslation(this.dataPoints[i].bottom);
- this.dataPoints[i].dist = this.showPerspective ? transBottom.length() : -transBottom.z;
- }
-
- // order the translated points by depth
- var sortDepth = function (a, b) {
- return b.dist - a.dist;
- };
- this.dataPoints.sort(sortDepth);
-
- // draw the datapoints as bars
- var xWidth = this.xBarWidth / 2;
- var yWidth = this.yBarWidth / 2;
- for (i = 0; i < this.dataPoints.length; i++) {
- var point = this.dataPoints[i];
-
- // determine color
- var hue, color, borderColor;
- if (this.style === Graph3d.STYLE.BARCOLOR ) {
- // calculate the color based on the value
- hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
- color = this._hsv2rgb(hue, 1, 1);
- borderColor = this._hsv2rgb(hue, 1, 0.8);
- }
- else if (this.style === Graph3d.STYLE.BARSIZE) {
- color = this.colorDot;
- borderColor = this.colorDotBorder;
- }
- else {
- // calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
- hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
- color = this._hsv2rgb(hue, 1, 1);
- borderColor = this._hsv2rgb(hue, 1, 0.8);
- }
-
- // calculate size for the bar
- if (this.style === Graph3d.STYLE.BARSIZE) {
- xWidth = (this.xBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
- yWidth = (this.yBarWidth / 2) * ((point.point.value - this.valueMin) / (this.valueMax - this.valueMin) * 0.8 + 0.2);
- }
-
- // calculate all corner points
- var me = this;
- var point3d = point.point;
- var top = [
- {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
- {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
- {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
- {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
- ];
- var bottom = [
- {point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, this.zMin)},
- {point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, this.zMin)},
- {point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, this.zMin)},
- {point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, this.zMin)}
- ];
-
- // calculate screen location of the points
- top.forEach(function (obj) {
- obj.screen = me._convert3Dto2D(obj.point);
- });
- bottom.forEach(function (obj) {
- obj.screen = me._convert3Dto2D(obj.point);
- });
-
- // create five sides, calculate both corner points and center points
- var surfaces = [
- {corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
- {corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
- {corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
- {corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
- {corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
- ];
- point.surfaces = surfaces;
-
- // calculate the distance of each of the surface centers to the camera
- for (j = 0; j < surfaces.length; j++) {
- surface = surfaces[j];
- var transCenter = this._convertPointToTranslation(surface.center);
- surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
- // TODO: this dept calculation doesn't work 100% of the cases due to perspective,
- // but the current solution is fast/simple and works in 99.9% of all cases
- // the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
- }
-
- // order the surfaces by their (translated) depth
- surfaces.sort(function (a, b) {
- var diff = b.dist - a.dist;
- if (diff) return diff;
-
- // if equal depth, sort the top surface last
- if (a.corners === top) return 1;
- if (b.corners === top) return -1;
-
- // both are equal
- return 0;
- });
-
- // draw the ordered surfaces
- ctx.lineWidth = 1;
- ctx.strokeStyle = borderColor;
- ctx.fillStyle = color;
- // NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
- for (j = 2; j < surfaces.length; j++) {
- surface = surfaces[j];
- corners = surface.corners;
- ctx.beginPath();
- ctx.moveTo(corners[3].screen.x, corners[3].screen.y);
- ctx.lineTo(corners[0].screen.x, corners[0].screen.y);
- ctx.lineTo(corners[1].screen.x, corners[1].screen.y);
- ctx.lineTo(corners[2].screen.x, corners[2].screen.y);
- ctx.lineTo(corners[3].screen.x, corners[3].screen.y);
- ctx.fill();
- ctx.stroke();
- }
- }
- };
-
-
- /**
- * Draw a line through all datapoints.
- * This function can be used when the style is 'line'
- */
- Graph3d.prototype._redrawDataLine = function() {
- var canvas = this.frame.canvas,
- ctx = canvas.getContext('2d'),
- point, i;
-
- if (this.dataPoints === undefined || this.dataPoints.length <= 0)
- return; // TODO: throw exception?
-
- // calculate the translations of all points
- for (i = 0; i < this.dataPoints.length; i++) {
- var trans = this._convertPointToTranslation(this.dataPoints[i].point);
- var screen = this._convertTranslationToScreen(trans);
-
- this.dataPoints[i].trans = trans;
- this.dataPoints[i].screen = screen;
- }
-
- // start the line
- if (this.dataPoints.length > 0) {
- point = this.dataPoints[0];
-
- ctx.lineWidth = 1; // TODO: make customizable
- ctx.strokeStyle = 'blue'; // TODO: make customizable
- ctx.beginPath();
- ctx.moveTo(point.screen.x, point.screen.y);
- }
-
- // draw the datapoints as colored circles
- for (i = 1; i < this.dataPoints.length; i++) {
- point = this.dataPoints[i];
- ctx.lineTo(point.screen.x, point.screen.y);
- }
-
- // finish the line
- if (this.dataPoints.length > 0) {
- ctx.stroke();
- }
- };
-
- /**
- * Start a moving operation inside the provided parent element
- * @param {Event} event The event that occurred (required for
- * retrieving the mouse position)
- */
- Graph3d.prototype._onMouseDown = function(event) {
- event = event || window.event;
-
- // check if mouse is still down (may be up when focus is lost for example
- // in an iframe)
- if (this.leftButtonDown) {
- this._onMouseUp(event);
- }
-
- // only react on left mouse button down
- this.leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
- if (!this.leftButtonDown && !this.touchDown) return;
-
- // get mouse position (different code for IE and all other browsers)
- this.startMouseX = getMouseX(event);
- this.startMouseY = getMouseY(event);
-
- this.startStart = new Date(this.start);
- this.startEnd = new Date(this.end);
- this.startArmRotation = this.camera.getArmRotation();
-
- this.frame.style.cursor = 'move';
-
- // add event listeners to handle moving the contents
- // we store the function onmousemove and onmouseup in the graph, so we can
- // remove the eventlisteners lateron in the function mouseUp()
- var me = this;
- this.onmousemove = function (event) {me._onMouseMove(event);};
- this.onmouseup = function (event) {me._onMouseUp(event);};
- G3DaddEventListener(document, 'mousemove', me.onmousemove);
- G3DaddEventListener(document, 'mouseup', me.onmouseup);
- G3DpreventDefault(event);
- };
-
-
- /**
- * Perform moving operating.
- * This function activated from within the funcion Graph.mouseDown().
- * @param {Event} event Well, eehh, the event
- */
- Graph3d.prototype._onMouseMove = function (event) {
- event = event || window.event;
-
- // calculate change in mouse position
- var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
- var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
-
- var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
- var verticalNew = this.startArmRotation.vertical + diffY / 200;
-
- var snapAngle = 4; // degrees
- var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
-
- // snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
- // the -0.001 is to take care that the vertical axis is always drawn at the left front corner
- if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
- horizontalNew = Math.round((horizontalNew / Math.PI)) * Math.PI - 0.001;
- }
- if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
- horizontalNew = (Math.round((horizontalNew/ Math.PI - 0.5)) + 0.5) * Math.PI - 0.001;
- }
-
- // snap vertically to nice angles
- if (Math.abs(Math.sin(verticalNew)) < snapValue) {
- verticalNew = Math.round((verticalNew / Math.PI)) * Math.PI;
- }
- if (Math.abs(Math.cos(verticalNew)) < snapValue) {
- verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
- }
-
- this.camera.setArmRotation(horizontalNew, verticalNew);
- this.redraw();
-
- // fire a cameraPositionChange event
- var parameters = this.getCameraPosition();
- this.emit('cameraPositionChange', parameters);
-
- G3DpreventDefault(event);
- };
-
-
- /**
- * Stop moving operating.
- * This function activated from within the funcion Graph.mouseDown().
- * @param {event} event The event
- */
- Graph3d.prototype._onMouseUp = function (event) {
- this.frame.style.cursor = 'auto';
- this.leftButtonDown = false;
-
- // remove event listeners here
- G3DremoveEventListener(document, 'mousemove', this.onmousemove);
- G3DremoveEventListener(document, 'mouseup', this.onmouseup);
- G3DpreventDefault(event);
- };
-
- /**
- * After having moved the mouse, a tooltip should pop up when the mouse is resting on a data point
- * @param {Event} event A mouse move event
- */
- Graph3d.prototype._onTooltip = function (event) {
- var delay = 300; // ms
- var mouseX = getMouseX(event) - getAbsoluteLeft(this.frame);
- var mouseY = getMouseY(event) - getAbsoluteTop(this.frame);
-
- if (!this.showTooltip) {
- return;
- }
-
- if (this.tooltipTimeout) {
- clearTimeout(this.tooltipTimeout);
- }
-
- // (delayed) display of a tooltip only if no mouse button is down
- if (this.leftButtonDown) {
- this._hideTooltip();
- return;
- }
-
- if (this.tooltip && this.tooltip.dataPoint) {
- // tooltip is currently visible
- var dataPoint = this._dataPointFromXY(mouseX, mouseY);
- if (dataPoint !== this.tooltip.dataPoint) {
- // datapoint changed
- if (dataPoint) {
- this._showTooltip(dataPoint);
- }
- else {
- this._hideTooltip();
- }
- }
- }
- else {
- // tooltip is currently not visible
- var me = this;
- this.tooltipTimeout = setTimeout(function () {
- me.tooltipTimeout = null;
-
- // show a tooltip if we have a data point
- var dataPoint = me._dataPointFromXY(mouseX, mouseY);
- if (dataPoint) {
- me._showTooltip(dataPoint);
- }
- }, delay);
- }
- };
-
- /**
- * Event handler for touchstart event on mobile devices
- */
- Graph3d.prototype._onTouchStart = function(event) {
- this.touchDown = true;
-
- var me = this;
- this.ontouchmove = function (event) {me._onTouchMove(event);};
- this.ontouchend = function (event) {me._onTouchEnd(event);};
- G3DaddEventListener(document, 'touchmove', me.ontouchmove);
- G3DaddEventListener(document, 'touchend', me.ontouchend);
-
- this._onMouseDown(event);
- };
-
- /**
- * Event handler for touchmove event on mobile devices
- */
- Graph3d.prototype._onTouchMove = function(event) {
- this._onMouseMove(event);
- };
-
- /**
- * Event handler for touchend event on mobile devices
- */
- Graph3d.prototype._onTouchEnd = function(event) {
- this.touchDown = false;
-
- G3DremoveEventListener(document, 'touchmove', this.ontouchmove);
- G3DremoveEventListener(document, 'touchend', this.ontouchend);
-
- this._onMouseUp(event);
- };
-
-
- /**
- * Event handler for mouse wheel event, used to zoom the graph
- * Code from http://adomas.org/javascript-mouse-wheel/
- * @param {event} event The event
- */
- Graph3d.prototype._onWheel = function(event) {
- if (!event) /* For IE. */
- event = window.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) {
- var oldLength = this.camera.getArmLength();
- var newLength = oldLength * (1 - delta / 10);
-
- this.camera.setArmLength(newLength);
- this.redraw();
-
- this._hideTooltip();
- }
-
- // fire a cameraPositionChange event
- var parameters = this.getCameraPosition();
- this.emit('cameraPositionChange', parameters);
-
- // Prevent default actions caused by mouse wheel.
- // That might be ugly, but we handle scrolls somehow
- // anyway, so don't bother here..
- G3DpreventDefault(event);
- };
-
- /**
- * Test whether a point lies inside given 2D triangle
- * @param {Point2d} point
- * @param {Point2d[]} triangle
- * @return {boolean} Returns true if given point lies inside or on the edge of the triangle
- * @private
- */
- Graph3d.prototype._insideTriangle = function (point, triangle) {
- var a = triangle[0],
- b = triangle[1],
- c = triangle[2];
-
- function sign (x) {
- return x > 0 ? 1 : x < 0 ? -1 : 0;
- }
-
- var as = sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
- var bs = sign((c.x - b.x) * (point.y - b.y) - (c.y - b.y) * (point.x - b.x));
- var cs = sign((a.x - c.x) * (point.y - c.y) - (a.y - c.y) * (point.x - c.x));
-
- // each of the three signs must be either equal to each other or zero
- return (as == 0 || bs == 0 || as == bs) &&
- (bs == 0 || cs == 0 || bs == cs) &&
- (as == 0 || cs == 0 || as == cs);
- };
-
- /**
- * Find a data point close to given screen position (x, y)
- * @param {Number} x
- * @param {Number} y
- * @return {Object | null} The closest data point or null if not close to any data point
- * @private
- */
- Graph3d.prototype._dataPointFromXY = function (x, y) {
- var i,
- distMax = 100, // px
- dataPoint = null,
- closestDataPoint = null,
- closestDist = null,
- center = new Point2d(x, y);
-
- if (this.style === Graph3d.STYLE.BAR ||
- this.style === Graph3d.STYLE.BARCOLOR ||
- this.style === Graph3d.STYLE.BARSIZE) {
- // the data points are ordered from far away to closest
- for (i = this.dataPoints.length - 1; i >= 0; i--) {
- dataPoint = this.dataPoints[i];
- var surfaces = dataPoint.surfaces;
- if (surfaces) {
- for (var s = surfaces.length - 1; s >= 0; s--) {
- // split each surface in two triangles, and see if the center point is inside one of these
- var surface = surfaces[s];
- var corners = surface.corners;
- var triangle1 = [corners[0].screen, corners[1].screen, corners[2].screen];
- var triangle2 = [corners[2].screen, corners[3].screen, corners[0].screen];
- if (this._insideTriangle(center, triangle1) ||
- this._insideTriangle(center, triangle2)) {
- // return immediately at the first hit
- return dataPoint;
- }
- }
- }
- }
- }
- else {
- // find the closest data point, using distance to the center of the point on 2d screen
- for (i = 0; i < this.dataPoints.length; i++) {
- dataPoint = this.dataPoints[i];
- var point = dataPoint.screen;
- if (point) {
- var distX = Math.abs(x - point.x);
- var distY = Math.abs(y - point.y);
- var dist = Math.sqrt(distX * distX + distY * distY);
-
- if ((closestDist === null || dist < closestDist) && dist < distMax) {
- closestDist = dist;
- closestDataPoint = dataPoint;
- }
- }
- }
- }
-
-
- return closestDataPoint;
- };
-
- /**
- * Display a tooltip for given data point
- * @param {Object} dataPoint
- * @private
- */
- Graph3d.prototype._showTooltip = function (dataPoint) {
- var content, line, dot;
-
- if (!this.tooltip) {
- content = document.createElement('div');
- content.style.position = 'absolute';
- content.style.padding = '10px';
- content.style.border = '1px solid #4d4d4d';
- content.style.color = '#1a1a1a';
- content.style.background = 'rgba(255,255,255,0.7)';
- content.style.borderRadius = '2px';
- content.style.boxShadow = '5px 5px 10px rgba(128,128,128,0.5)';
-
- line = document.createElement('div');
- line.style.position = 'absolute';
- line.style.height = '40px';
- line.style.width = '0';
- line.style.borderLeft = '1px solid #4d4d4d';
-
- dot = document.createElement('div');
- dot.style.position = 'absolute';
- dot.style.height = '0';
- dot.style.width = '0';
- dot.style.border = '5px solid #4d4d4d';
- dot.style.borderRadius = '5px';
-
- this.tooltip = {
- dataPoint: null,
- dom: {
- content: content,
- line: line,
- dot: dot
- }
- };
- }
- else {
- content = this.tooltip.dom.content;
- line = this.tooltip.dom.line;
- dot = this.tooltip.dom.dot;
- }
-
- this._hideTooltip();
-
- this.tooltip.dataPoint = dataPoint;
- if (typeof this.showTooltip === 'function') {
- content.innerHTML = this.showTooltip(dataPoint.point);
- }
- else {
- content.innerHTML = '<table>' +
- '<tr><td>x:</td><td>' + dataPoint.point.x + '</td></tr>' +
- '<tr><td>y:</td><td>' + dataPoint.point.y + '</td></tr>' +
- '<tr><td>z:</td><td>' + dataPoint.point.z + '</td></tr>' +
- '</table>';
- }
-
- content.style.left = '0';
- content.style.top = '0';
- this.frame.appendChild(content);
- this.frame.appendChild(line);
- this.frame.appendChild(dot);
-
- // calculate sizes
- var contentWidth = content.offsetWidth;
- var contentHeight = content.offsetHeight;
- var lineHeight = line.offsetHeight;
- var dotWidth = dot.offsetWidth;
- var dotHeight = dot.offsetHeight;
-
- var left = dataPoint.screen.x - contentWidth / 2;
- left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
-
- line.style.left = dataPoint.screen.x + 'px';
- line.style.top = (dataPoint.screen.y - lineHeight) + 'px';
- content.style.left = left + 'px';
- content.style.top = (dataPoint.screen.y - lineHeight - contentHeight) + 'px';
- dot.style.left = (dataPoint.screen.x - dotWidth / 2) + 'px';
- dot.style.top = (dataPoint.screen.y - dotHeight / 2) + 'px';
- };
-
- /**
- * Hide the tooltip when displayed
- * @private
- */
- Graph3d.prototype._hideTooltip = function () {
- if (this.tooltip) {
- this.tooltip.dataPoint = null;
-
- for (var prop in this.tooltip.dom) {
- if (this.tooltip.dom.hasOwnProperty(prop)) {
- var elem = this.tooltip.dom[prop];
- if (elem && elem.parentNode) {
- elem.parentNode.removeChild(elem);
- }
- }
- }
- }
- };
-
-
- /**
- * 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
- */
- G3DaddEventListener = function(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
- */
- G3DremoveEventListener = function(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);
- }
- };
-
- /**
- * Stop event propagation
- */
- G3DstopPropagation = function(event) {
- if (!event)
- event = window.event;
-
- if (event.stopPropagation) {
- event.stopPropagation(); // non-IE browsers
- }
- else {
- event.cancelBubble = true; // IE browsers
- }
- };
-
-
- /**
- * Cancels the event if it is cancelable, without stopping further propagation of the event.
- */
- G3DpreventDefault = function (event) {
- if (!event)
- event = window.event;
-
- if (event.preventDefault) {
- event.preventDefault(); // non-IE browsers
- }
- else {
- event.returnValue = false; // IE browsers
- }
- };
-
-
-
- /**
- * @prototype Point3d
- * @param {Number} x
- * @param {Number} y
- * @param {Number} z
- */
- function Point3d(x, y, z) {
- this.x = x !== undefined ? x : 0;
- this.y = y !== undefined ? y : 0;
- this.z = z !== undefined ? z : 0;
- };
-
- /**
- * Subtract the two provided points, returns a-b
- * @param {Point3d} a
- * @param {Point3d} b
- * @return {Point3d} a-b
- */
- Point3d.subtract = function(a, b) {
- var sub = new Point3d();
- sub.x = a.x - b.x;
- sub.y = a.y - b.y;
- sub.z = a.z - b.z;
- return sub;
- };
-
- /**
- * Add the two provided points, returns a+b
- * @param {Point3d} a
- * @param {Point3d} b
- * @return {Point3d} a+b
- */
- Point3d.add = function(a, b) {
- var sum = new Point3d();
- sum.x = a.x + b.x;
- sum.y = a.y + b.y;
- sum.z = a.z + b.z;
- return sum;
- };
-
- /**
- * Calculate the average of two 3d points
- * @param {Point3d} a
- * @param {Point3d} b
- * @return {Point3d} The average, (a+b)/2
- */
- Point3d.avg = function(a, b) {
- return new Point3d(
- (a.x + b.x) / 2,
- (a.y + b.y) / 2,
- (a.z + b.z) / 2
- );
- };
-
- /**
- * Calculate the cross product of the two provided points, returns axb
- * Documentation: http://en.wikipedia.org/wiki/Cross_product
- * @param {Point3d} a
- * @param {Point3d} b
- * @return {Point3d} cross product axb
- */
- Point3d.crossProduct = function(a, b) {
- var crossproduct = new Point3d();
-
- crossproduct.x = a.y * b.z - a.z * b.y;
- crossproduct.y = a.z * b.x - a.x * b.z;
- crossproduct.z = a.x * b.y - a.y * b.x;
-
- return crossproduct;
- };
-
-
- /**
- * Rtrieve the length of the vector (or the distance from this point to the origin
- * @return {Number} length
- */
- Point3d.prototype.length = function() {
- return Math.sqrt(
- this.x * this.x +
- this.y * this.y +
- this.z * this.z
- );
- };
-
- /**
- * @prototype Point2d
- */
- Point2d = function (x, y) {
- this.x = x !== undefined ? x : 0;
- this.y = y !== undefined ? y : 0;
- };
-
-
- /**
- * @class Filter
- *
- * @param {DataSet} data The google data table
- * @param {Number} column The index of the column to be filtered
- * @param {Graph} graph The graph
- */
- function Filter (data, column, graph) {
- this.data = data;
- this.column = column;
- this.graph = graph; // the parent graph
-
- this.index = undefined;
- this.value = undefined;
-
- // read all distinct values and select the first one
- this.values = graph.getDistinctValues(data.get(), this.column);
-
- // sort both numeric and string values correctly
- this.values.sort(function (a, b) {
- return a > b ? 1 : a < b ? -1 : 0;
- });
-
- if (this.values.length > 0) {
- this.selectValue(0);
- }
-
- // create an array with the filtered datapoints. this will be loaded afterwards
- this.dataPoints = [];
-
- this.loaded = false;
- this.onLoadCallback = undefined;
-
- if (graph.animationPreload) {
- this.loaded = false;
- this.loadInBackground();
- }
- else {
- this.loaded = true;
- }
- };
-
-
- /**
- * Return the label
- * @return {string} label
- */
- Filter.prototype.isLoaded = function() {
- return this.loaded;
- };
-
-
- /**
- * Return the loaded progress
- * @return {Number} percentage between 0 and 100
- */
- Filter.prototype.getLoadedProgress = function() {
- var len = this.values.length;
-
- var i = 0;
- while (this.dataPoints[i]) {
- i++;
- }
-
- return Math.round(i / len * 100);
- };
-
-
- /**
- * Return the label
- * @return {string} label
- */
- Filter.prototype.getLabel = function() {
- return this.graph.filterLabel;
- };
-
-
- /**
- * Return the columnIndex of the filter
- * @return {Number} columnIndex
- */
- Filter.prototype.getColumn = function() {
- return this.column;
- };
-
- /**
- * Return the currently selected value. Returns undefined if there is no selection
- * @return {*} value
- */
- Filter.prototype.getSelectedValue = function() {
- if (this.index === undefined)
- return undefined;
-
- return this.values[this.index];
- };
-
- /**
- * Retrieve all values of the filter
- * @return {Array} values
- */
- Filter.prototype.getValues = function() {
- return this.values;
- };
-
- /**
- * Retrieve one value of the filter
- * @param {Number} index
- * @return {*} value
- */
- Filter.prototype.getValue = function(index) {
- if (index >= this.values.length)
- throw 'Error: index out of range';
-
- return this.values[index];
- };
-
-
- /**
- * Retrieve the (filtered) dataPoints for the currently selected filter index
- * @param {Number} [index] (optional)
- * @return {Array} dataPoints
- */
- Filter.prototype._getDataPoints = function(index) {
- if (index === undefined)
- index = this.index;
-
- if (index === undefined)
- return [];
-
- var dataPoints;
- if (this.dataPoints[index]) {
- dataPoints = this.dataPoints[index];
- }
- else {
- var f = {};
- f.column = this.column;
- f.value = this.values[index];
-
- var dataView = new DataView(this.data,{filter: function (item) {return (item[f.column] == f.value);}}).get();
- dataPoints = this.graph._getDataPoints(dataView);
-
- this.dataPoints[index] = dataPoints;
- }
-
- return dataPoints;
- };
-
-
-
- /**
- * Set a callback function when the filter is fully loaded.
- */
- Filter.prototype.setOnLoadCallback = function(callback) {
- this.onLoadCallback = callback;
- };
-
-
- /**
- * Add a value to the list with available values for this filter
- * No double entries will be created.
- * @param {Number} index
- */
- Filter.prototype.selectValue = function(index) {
- if (index >= this.values.length)
- throw 'Error: index out of range';
-
- this.index = index;
- this.value = this.values[index];
- };
-
- /**
- * Load all filtered rows in the background one by one
- * Start this method without providing an index!
- */
- Filter.prototype.loadInBackground = function(index) {
- if (index === undefined)
- index = 0;
-
- var frame = this.graph.frame;
-
- if (index < this.values.length) {
- var dataPointsTemp = this._getDataPoints(index);
- //this.graph.redrawInfo(); // TODO: not neat
-
- // create a progress box
- if (frame.progress === undefined) {
- frame.progress = document.createElement('DIV');
- frame.progress.style.position = 'absolute';
- frame.progress.style.color = 'gray';
- frame.appendChild(frame.progress);
- }
- var progress = this.getLoadedProgress();
- frame.progress.innerHTML = 'Loading animation... ' + progress + '%';
- // TODO: this is no nice solution...
- frame.progress.style.bottom = Graph3d.px(60); // TODO: use height of slider
- frame.progress.style.left = Graph3d.px(10);
-
- var me = this;
- setTimeout(function() {me.loadInBackground(index+1);}, 10);
- this.loaded = false;
- }
- else {
- this.loaded = true;
-
- // remove the progress box
- if (frame.progress !== undefined) {
- frame.removeChild(frame.progress);
- frame.progress = undefined;
- }
-
- if (this.onLoadCallback)
- this.onLoadCallback();
- }
- };
-
-
-
- /**
- * @prototype StepNumber
- * The class StepNumber is an iterator for Numbers. You provide a start and end
- * value, and a best step size. StepNumber itself rounds to fixed values and
- * a finds the step that best fits the provided step.
- *
- * If prettyStep is true, the step size is chosen as close as possible to the
- * provided step, but being a round value like 1, 2, 5, 10, 20, 50, ....
- *
- * Example usage:
- * var step = new StepNumber(0, 10, 2.5, true);
- * step.start();
- * while (!step.end()) {
- * alert(step.getCurrent());
- * step.next();
- * }
- *
- * Version: 1.0
- *
- * @param {Number} start The start value
- * @param {Number} end The end value
- * @param {Number} step Optional. Step size. Must be a positive value.
- * @param {boolean} prettyStep Optional. If true, the step size is rounded
- * To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
- */
- StepNumber = function (start, end, step, prettyStep) {
- // set default values
- this._start = 0;
- this._end = 0;
- this._step = 1;
- this.prettyStep = true;
- this.precision = 5;
-
- this._current = 0;
- this.setRange(start, end, step, prettyStep);
- };
-
- /**
- * Set a new range: start, end and step.
- *
- * @param {Number} start The start value
- * @param {Number} end The end value
- * @param {Number} step Optional. Step size. Must be a positive value.
- * @param {boolean} prettyStep Optional. If true, the step size is rounded
- * To a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
- */
- StepNumber.prototype.setRange = function(start, end, step, prettyStep) {
- this._start = start ? start : 0;
- this._end = end ? end : 0;
-
- this.setStep(step, prettyStep);
- };
-
- /**
- * Set a new step size
- * @param {Number} step New step size. Must be a positive value
- * @param {boolean} prettyStep Optional. If true, the provided step is rounded
- * to a pretty step size (like 1, 2, 5, 10, 20, 50, ...)
- */
- StepNumber.prototype.setStep = function(step, prettyStep) {
- if (step === undefined || step <= 0)
- return;
-
- if (prettyStep !== undefined)
- this.prettyStep = prettyStep;
-
- if (this.prettyStep === true)
- this._step = StepNumber.calculatePrettyStep(step);
- else
- this._step = step;
- };
-
- /**
- * Calculate a nice step size, closest to the desired step size.
- * Returns a value in one of the ranges 1*10^n, 2*10^n, or 5*10^n, where n is an
- * integer Number. For example 1, 2, 5, 10, 20, 50, etc...
- * @param {Number} step Desired step size
- * @return {Number} Nice step size
- */
- StepNumber.calculatePrettyStep = function (step) {
- var log10 = function (x) {return Math.log(x) / Math.LN10;};
-
- // try three steps (multiple of 1, 2, or 5
- var step1 = Math.pow(10, Math.round(log10(step))),
- step2 = 2 * Math.pow(10, Math.round(log10(step / 2))),
- step5 = 5 * Math.pow(10, Math.round(log10(step / 5)));
-
- // choose the best step (closest to minimum step)
- var prettyStep = step1;
- if (Math.abs(step2 - step) <= Math.abs(prettyStep - step)) prettyStep = step2;
- if (Math.abs(step5 - step) <= Math.abs(prettyStep - step)) prettyStep = step5;
-
- // for safety
- if (prettyStep <= 0) {
- prettyStep = 1;
- }
-
- return prettyStep;
- };
-
- /**
- * returns the current value of the step
- * @return {Number} current value
- */
- StepNumber.prototype.getCurrent = function () {
- return parseFloat(this._current.toPrecision(this.precision));
- };
-
- /**
- * returns the current step size
- * @return {Number} current step size
- */
- StepNumber.prototype.getStep = function () {
- return this._step;
- };
-
- /**
- * Set the current value to the largest value smaller than start, which
- * is a multiple of the step size
- */
- StepNumber.prototype.start = function() {
- this._current = this._start - this._start % this._step;
- };
-
- /**
- * Do a step, add the step size to the current value
- */
- StepNumber.prototype.next = function () {
- this._current += this._step;
- };
-
- /**
- * Returns true whether the end is reached
- * @return {boolean} True if the current value has passed the end value.
- */
- StepNumber.prototype.end = function () {
- return (this._current > this._end);
- };
-
-
- /**
- * @constructor Slider
- *
- * An html slider control with start/stop/prev/next buttons
- * @param {Element} container The element where the slider will be created
- * @param {Object} options Available options:
- * {boolean} visible If true (default) the
- * slider is visible.
- */
- function Slider(container, options) {
- if (container === undefined) {
- throw 'Error: No container element defined';
- }
- this.container = container;
- this.visible = (options && options.visible != undefined) ? options.visible : true;
-
- if (this.visible) {
- this.frame = document.createElement('DIV');
- //this.frame.style.backgroundColor = '#E5E5E5';
- this.frame.style.width = '100%';
- this.frame.style.position = 'relative';
- this.container.appendChild(this.frame);
-
- this.frame.prev = document.createElement('INPUT');
- this.frame.prev.type = 'BUTTON';
- this.frame.prev.value = 'Prev';
- this.frame.appendChild(this.frame.prev);
-
- this.frame.play = document.createElement('INPUT');
- this.frame.play.type = 'BUTTON';
- this.frame.play.value = 'Play';
- this.frame.appendChild(this.frame.play);
-
- this.frame.next = document.createElement('INPUT');
- this.frame.next.type = 'BUTTON';
- this.frame.next.value = 'Next';
- this.frame.appendChild(this.frame.next);
-
- this.frame.bar = document.createElement('INPUT');
- this.frame.bar.type = 'BUTTON';
- this.frame.bar.style.position = 'absolute';
- this.frame.bar.style.border = '1px solid red';
- this.frame.bar.style.width = '100px';
- this.frame.bar.style.height = '6px';
- this.frame.bar.style.borderRadius = '2px';
- this.frame.bar.style.MozBorderRadius = '2px';
- this.frame.bar.style.border = '1px solid #7F7F7F';
- this.frame.bar.style.backgroundColor = '#E5E5E5';
- this.frame.appendChild(this.frame.bar);
-
- this.frame.slide = document.createElement('INPUT');
- this.frame.slide.type = 'BUTTON';
- this.frame.slide.style.margin = '0px';
- this.frame.slide.value = ' ';
- this.frame.slide.style.position = 'relative';
- this.frame.slide.style.left = '-100px';
- this.frame.appendChild(this.frame.slide);
-
- // create events
- var me = this;
- this.frame.slide.onmousedown = function (event) {me._onMouseDown(event);};
- this.frame.prev.onclick = function (event) {me.prev(event);};
- this.frame.play.onclick = function (event) {me.togglePlay(event);};
- this.frame.next.onclick = function (event) {me.next(event);};
- }
-
- this.onChangeCallback = undefined;
-
- this.values = [];
- this.index = undefined;
-
- this.playTimeout = undefined;
- this.playInterval = 1000; // milliseconds
- this.playLoop = true;
- };
-
- /**
- * Select the previous index
- */
- Slider.prototype.prev = function() {
- var index = this.getIndex();
- if (index > 0) {
- index--;
- this.setIndex(index);
- }
- };
-
- /**
- * Select the next index
- */
- Slider.prototype.next = function() {
- var index = this.getIndex();
- if (index < this.values.length - 1) {
- index++;
- this.setIndex(index);
- }
- };
-
- /**
- * Select the next index
- */
- Slider.prototype.playNext = function() {
- var start = new Date();
-
- var index = this.getIndex();
- if (index < this.values.length - 1) {
- index++;
- this.setIndex(index);
- }
- else if (this.playLoop) {
- // jump to the start
- index = 0;
- this.setIndex(index);
- }
-
- var end = new Date();
- var diff = (end - start);
-
- // calculate how much time it to to set the index and to execute the callback
- // function.
- var interval = Math.max(this.playInterval - diff, 0);
- // document.title = diff // TODO: cleanup
-
- var me = this;
- this.playTimeout = setTimeout(function() {me.playNext();}, interval);
- };
-
- /**
- * Toggle start or stop playing
- */
- Slider.prototype.togglePlay = function() {
- if (this.playTimeout === undefined) {
- this.play();
- } else {
- this.stop();
- }
- };
-
- /**
- * Start playing
- */
- Slider.prototype.play = function() {
- // Test whether already playing
- if (this.playTimeout) return;
-
- this.playNext();
-
- if (this.frame) {
- this.frame.play.value = 'Stop';
- }
- };
-
- /**
- * Stop playing
- */
- Slider.prototype.stop = function() {
- clearInterval(this.playTimeout);
- this.playTimeout = undefined;
-
- if (this.frame) {
- this.frame.play.value = 'Play';
- }
- };
-
- /**
- * Set a callback function which will be triggered when the value of the
- * slider bar has changed.
- */
- Slider.prototype.setOnChangeCallback = function(callback) {
- this.onChangeCallback = callback;
- };
-
- /**
- * Set the interval for playing the list
- * @param {Number} interval The interval in milliseconds
- */
- Slider.prototype.setPlayInterval = function(interval) {
- this.playInterval = interval;
- };
-
- /**
- * Retrieve the current play interval
- * @return {Number} interval The interval in milliseconds
- */
- Slider.prototype.getPlayInterval = function(interval) {
- return this.playInterval;
- };
-
- /**
- * Set looping on or off
- * @pararm {boolean} doLoop If true, the slider will jump to the start when
- * the end is passed, and will jump to the end
- * when the start is passed.
- */
- Slider.prototype.setPlayLoop = function(doLoop) {
- this.playLoop = doLoop;
- };
-
-
- /**
- * Execute the onchange callback function
- */
- Slider.prototype.onChange = function() {
- if (this.onChangeCallback !== undefined) {
- this.onChangeCallback();
- }
- };
-
- /**
- * redraw the slider on the correct place
- */
- Slider.prototype.redraw = function() {
- if (this.frame) {
- // resize the bar
- this.frame.bar.style.top = (this.frame.clientHeight/2 -
- this.frame.bar.offsetHeight/2) + 'px';
- this.frame.bar.style.width = (this.frame.clientWidth -
- this.frame.prev.clientWidth -
- this.frame.play.clientWidth -
- this.frame.next.clientWidth - 30) + 'px';
-
- // position the slider button
- var left = this.indexToLeft(this.index);
- this.frame.slide.style.left = (left) + 'px';
- }
- };
-
-
- /**
- * Set the list with values for the slider
- * @param {Array} values A javascript array with values (any type)
- */
- Slider.prototype.setValues = function(values) {
- this.values = values;
-
- if (this.values.length > 0)
- this.setIndex(0);
- else
- this.index = undefined;
- };
-
- /**
- * Select a value by its index
- * @param {Number} index
- */
- Slider.prototype.setIndex = function(index) {
- if (index < this.values.length) {
- this.index = index;
-
- this.redraw();
- this.onChange();
- }
- else {
- throw 'Error: index out of range';
- }
- };
-
- /**
- * retrieve the index of the currently selected vaue
- * @return {Number} index
- */
- Slider.prototype.getIndex = function() {
- return this.index;
- };
-
-
- /**
- * retrieve the currently selected value
- * @return {*} value
- */
- Slider.prototype.get = function() {
- return this.values[this.index];
- };
-
-
- Slider.prototype._onMouseDown = function(event) {
- // only react on left mouse button down
- var leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
- if (!leftButtonDown) return;
-
- this.startClientX = event.clientX;
- this.startSlideX = parseFloat(this.frame.slide.style.left);
-
- this.frame.style.cursor = 'move';
-
- // add event listeners to handle moving the contents
- // we store the function onmousemove and onmouseup in the graph, so we can
- // remove the eventlisteners lateron in the function mouseUp()
- var me = this;
- this.onmousemove = function (event) {me._onMouseMove(event);};
- this.onmouseup = function (event) {me._onMouseUp(event);};
- G3DaddEventListener(document, 'mousemove', this.onmousemove);
- G3DaddEventListener(document, 'mouseup', this.onmouseup);
- G3DpreventDefault(event);
- };
-
-
- Slider.prototype.leftToIndex = function (left) {
- var width = parseFloat(this.frame.bar.style.width) -
- this.frame.slide.clientWidth - 10;
- var x = left - 3;
-
- var index = Math.round(x / width * (this.values.length-1));
- if (index < 0) index = 0;
- if (index > this.values.length-1) index = this.values.length-1;
-
- return index;
- };
-
- Slider.prototype.indexToLeft = function (index) {
- var width = parseFloat(this.frame.bar.style.width) -
- this.frame.slide.clientWidth - 10;
-
- var x = index / (this.values.length-1) * width;
- var left = x + 3;
-
- return left;
- };
-
-
-
- Slider.prototype._onMouseMove = function (event) {
- var diff = event.clientX - this.startClientX;
- var x = this.startSlideX + diff;
-
- var index = this.leftToIndex(x);
-
- this.setIndex(index);
-
- G3DpreventDefault();
- };
-
-
- Slider.prototype._onMouseUp = function (event) {
- this.frame.style.cursor = 'auto';
-
- // remove event listeners
- G3DremoveEventListener(document, 'mousemove', this.onmousemove);
- G3DremoveEventListener(document, 'mouseup', this.onmouseup);
-
- G3DpreventDefault();
- };
-
-
-
- /**--------------------------------------------------------------------------**/
-
-
-
- /**
- * 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.
- */
- getAbsoluteLeft = function(elem) {
- var left = 0;
- while( elem !== null ) {
- left += elem.offsetLeft;
- left -= elem.scrollLeft;
- elem = elem.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.
- */
- getAbsoluteTop = function(elem) {
- var top = 0;
- while( elem !== null ) {
- top += elem.offsetTop;
- top -= elem.scrollTop;
- elem = elem.offsetParent;
- }
- return top;
- };
-
- /**
- * Get the horizontal mouse position from a mouse event
- * @param {Event} event
- * @return {Number} mouse x
- */
- getMouseX = function(event) {
- if ('clientX' in event) return event.clientX;
- return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
- };
-
- /**
- * Get the vertical mouse position from a mouse event
- * @param {Event} event
- * @return {Number} mouse y
- */
- getMouseY = function(event) {
- if ('clientY' in event) return event.clientY;
- return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
- };
-
-
- /**
- * vis.js module exports
- */
- var vis = {
- moment: moment,
-
- util: util,
- DOMutil: DOMutil,
-
- DataSet: DataSet,
- DataView: DataView,
-
- Timeline: Timeline,
- Graph2d: Graph2d,
- timeline: {
- DataStep: DataStep,
- Range: Range,
- stack: stack,
- TimeStep: TimeStep,
-
- components: {
- items: {
- Item: Item,
- ItemBox: ItemBox,
- ItemPoint: ItemPoint,
- ItemRange: ItemRange
- },
-
- Component: Component,
- CurrentTime: CurrentTime,
- CustomTime: CustomTime,
- DataAxis: DataAxis,
- GraphGroup: GraphGroup,
- Group: Group,
- ItemSet: ItemSet,
- Legend: Legend,
- LineGraph: LineGraph,
- TimeAxis: TimeAxis
- }
- },
-
- Network: Network,
- network: {
- Edge: Edge,
- Groups: Groups,
- Images: Images,
- Node: Node,
- Popup: Popup
- },
-
- // Deprecated since v3.0.0
- Graph: function () {
- throw new Error('Graph is renamed to Network. Please create a graph as new vis.Network(...)');
- },
-
- Graph3d: Graph3d
- };
-
- /**
- * 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;
- }
-
-
- },{"emitter-component":2,"hammerjs":3,"moment":4,"mousetrap":5}],2:[function(require,module,exports){
-
- /**
- * Expose `Emitter`.
- */
-
- module.exports = Emitter;
-
- /**
- * Initialize a new `Emitter`.
- *
- * @api public
- */
-
- function Emitter(obj) {
- if (obj) return mixin(obj);
- };
-
- /**
- * Mixin the emitter properties.
- *
- * @param {Object} obj
- * @return {Object}
- * @api private
- */
-
- function mixin(obj) {
- for (var key in Emitter.prototype) {
- obj[key] = Emitter.prototype[key];
- }
- return obj;
- }
-
- /**
- * Listen on the given `event` with `fn`.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
- Emitter.prototype.on =
- Emitter.prototype.addEventListener = function(event, fn){
- this._callbacks = this._callbacks || {};
- (this._callbacks[event] = this._callbacks[event] || [])
- .push(fn);
- return this;
- };
-
- /**
- * Adds an `event` listener that will be invoked a single
- * time then automatically removed.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
- Emitter.prototype.once = function(event, fn){
- var self = this;
- this._callbacks = this._callbacks || {};
-
- function on() {
- self.off(event, on);
- fn.apply(this, arguments);
- }
-
- on.fn = fn;
- this.on(event, on);
- return this;
- };
-
- /**
- * Remove the given callback for `event` or all
- * registered callbacks.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
- */
-
- Emitter.prototype.off =
- Emitter.prototype.removeListener =
- Emitter.prototype.removeAllListeners =
- Emitter.prototype.removeEventListener = function(event, fn){
- this._callbacks = this._callbacks || {};
-
- // all
- if (0 == arguments.length) {
- this._callbacks = {};
- return this;
- }
-
- // specific event
- var callbacks = this._callbacks[event];
- if (!callbacks) return this;
-
- // remove all handlers
- if (1 == arguments.length) {
- delete this._callbacks[event];
- return this;
- }
-
- // remove specific handler
- var cb;
- for (var i = 0; i < callbacks.length; i++) {
- cb = callbacks[i];
- if (cb === fn || cb.fn === fn) {
- callbacks.splice(i, 1);
- break;
- }
- }
- return this;
- };
-
- /**
- * Emit `event` with the given args.
- *
- * @param {String} event
- * @param {Mixed} ...
- * @return {Emitter}
- */
-
- Emitter.prototype.emit = function(event){
- this._callbacks = this._callbacks || {};
- var args = [].slice.call(arguments, 1)
- , callbacks = this._callbacks[event];
-
- if (callbacks) {
- callbacks = callbacks.slice(0);
- for (var i = 0, len = callbacks.length; i < len; ++i) {
- callbacks[i].apply(this, args);
- }
- }
-
- return this;
- };
-
- /**
- * Return array of callbacks for `event`.
- *
- * @param {String} event
- * @return {Array}
- * @api public
- */
-
- Emitter.prototype.listeners = function(event){
- this._callbacks = this._callbacks || {};
- return this._callbacks[event] || [];
- };
-
- /**
- * Check if this emitter has `event` handlers.
- *
- * @param {String} event
- * @return {Boolean}
- * @api public
- */
-
- Emitter.prototype.hasListeners = function(event){
- return !! this.listeners(event).length;
- };
-
- },{}],3:[function(require,module,exports){
- /*! Hammer.JS - v1.0.5 - 2013-04-07
- * http://eightmedia.github.com/hammer.js
- *
- * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
- * 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<gestures.length; t++) {
- this.element.addEventListener(gestures[t], handler, false);
- }
- return this;
- },
-
-
- /**
- * unbind events to the instance
- * @param {String} gesture
- * @param {Function} handler
- * @returns {Hammer.Instance}
- */
- off: function offEvent(gesture, handler){
- var gestures = gesture.split(' ');
- for(var t=0; t<gestures.length; t++) {
- this.element.removeEventListener(gestures[t], handler, false);
- }
- return this;
- },
-
-
- /**
- * trigger gesture event
- * @param {String} gesture
- * @param {Object} eventData
- * @returns {Hammer.Instance}
- */
- trigger: function triggerEvent(gesture, eventData){
- // create DOM event
- var event = Hammer.DOCUMENT.createEvent('Event');
- event.initEvent(gesture, true, true);
- event.gesture = eventData;
-
- // trigger on the target if it is in the instance element,
- // this is for event delegation tricks
- var element = this.element;
- if(Hammer.utils.hasParent(eventData.target, element)) {
- element = eventData.target;
- }
-
- element.dispatchEvent(event);
- return this;
- },
-
-
- /**
- * enable of disable hammer.js detection
- * @param {Boolean} state
- * @returns {Hammer.Instance}
- */
- enable: function enable(state) {
- this.enabled = state;
- return this;
- }
- };
-
- /**
- * this holds the last move event,
- * used to fix empty touchend issue
- * see the onTouch event for an explanation
- * @type {Object}
- */
- var last_move_event = null;
-
-
- /**
- * when the mouse is hold down, this is true
- * @type {Boolean}
- */
- var enable_detect = false;
-
-
- /**
- * when touch events have been fired, this is true
- * @type {Boolean}
- */
- var touch_triggered = false;
-
-
- Hammer.event = {
- /**
- * simple addEventListener
- * @param {HTMLElement} element
- * @param {String} type
- * @param {Function} handler
- */
- bindDom: function(element, type, handler) {
- var types = type.split(' ');
- for(var t=0; t<types.length; t++) {
- element.addEventListener(types[t], handler, false);
- }
- },
-
-
- /**
- * touch events with mouse fallback
- * @param {HTMLElement} element
- * @param {String} eventType like Hammer.EVENT_MOVE
- * @param {Function} handler
- */
- onTouch: function onTouch(element, eventType, handler) {
- var self = this;
-
- this.bindDom(element, Hammer.EVENT_TYPES[eventType], function bindDomOnTouch(ev) {
- var sourceEventType = ev.type.toLowerCase();
-
- // onmouseup, but when touchend has been fired we do nothing.
- // this is for touchdevices which also fire a mouseup on touchend
- if(sourceEventType.match(/mouse/) && touch_triggered) {
- return;
- }
-
- // mousebutton must be down or a touch event
- else if( sourceEventType.match(/touch/) || // touch events are always on screen
- sourceEventType.match(/pointerdown/) || // pointerevents touch
- (sourceEventType.match(/mouse/) && ev.which === 1) // mouse is pressed
- ){
- enable_detect = true;
- }
-
- // we are in a touch event, set the touch triggered bool to true,
- // this for the conflicts that may occur on ios and android
- if(sourceEventType.match(/touch|pointer/)) {
- touch_triggered = true;
- }
-
- // count the total touches on the screen
- var count_touches = 0;
-
- // when touch has been triggered in this detection session
- // and we are now handling a mouse event, we stop that to prevent conflicts
- if(enable_detect) {
- // update pointerevent
- if(Hammer.HAS_POINTEREVENTS && eventType != Hammer.EVENT_END) {
- count_touches = Hammer.PointerEvent.updatePointer(eventType, ev);
- }
- // touch
- else if(sourceEventType.match(/touch/)) {
- count_touches = ev.touches.length;
- }
- // mouse
- else if(!touch_triggered) {
- count_touches = sourceEventType.match(/up/) ? 0 : 1;
- }
-
- // if we are in a end event, but when we remove one touch and
- // we still have enough, set eventType to move
- if(count_touches > 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<len; t++) {
- valuesX.push(touches[t].pageX);
- valuesY.push(touches[t].pageY);
- }
-
- return {
- pageX: ((Math.min.apply(Math, valuesX) + Math.max.apply(Math, valuesX)) / 2),
- pageY: ((Math.min.apply(Math, valuesY) + Math.max.apply(Math, valuesY)) / 2)
- };
- },
-
-
- /**
- * calculate the velocity between two points
- * @param {Number} delta_time
- * @param {Number} delta_x
- * @param {Number} delta_y
- * @returns {Object} velocity
- */
- getVelocity: function getVelocity(delta_time, delta_x, delta_y) {
- return {
- x: Math.abs(delta_x / delta_time) || 0,
- y: Math.abs(delta_y / delta_time) || 0
- };
- },
-
-
- /**
- * calculate the angle between two coordinates
- * @param {Touch} touch1
- * @param {Touch} touch2
- * @returns {Number} angle
- */
- getAngle: function getAngle(touch1, touch2) {
- var y = touch2.pageY - touch1.pageY,
- x = touch2.pageX - touch1.pageX;
- return Math.atan2(y, x) * 180 / Math.PI;
- },
-
-
- /**
- * angle to direction define
- * @param {Touch} touch1
- * @param {Touch} touch2
- * @returns {String} direction constant, like Hammer.DIRECTION_LEFT
- */
- getDirection: function getDirection(touch1, touch2) {
- var x = Math.abs(touch1.pageX - touch2.pageX),
- y = Math.abs(touch1.pageY - touch2.pageY);
-
- if(x >= 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<len; g++) {
- var gesture = this.gestures[g];
-
- // only when the instance options have enabled this gesture
- if(!this.stopped && inst_options[gesture.name] !== false) {
- // if a handler returns false, we stop with the detection
- if(gesture.handler.call(gesture, eventData, this.current.inst) === false) {
- this.stopDetect();
- break;
- }
- }
- }
-
- // store as previous event event
- if(this.current) {
- this.current.lastEvent = eventData;
- }
-
- // endevent, but not the last touch, so dont stop
- if(eventData.eventType == Hammer.EVENT_END && !eventData.touches.length-1) {
- this.stopDetect();
- }
-
- return eventData;
- },
-
-
- /**
- * clear the Hammer.gesture vars
- * this is called on endDetect, but can also be used when a final Hammer.gesture has been detected
- * to stop other Hammer.gestures from being fired
- */
- stopDetect: function stopDetect() {
- // clone current data to the store as the previous gesture
- // used for the double tap gesture, since this is an other gesture detect session
- this.previous = Hammer.utils.extend({}, this.current);
-
- // reset the current
- this.current = null;
-
- // stopped!
- this.stopped = true;
- },
-
-
- /**
- * extend eventData for Hammer.gestures
- * @param {Object} ev
- * @returns {Object} ev
- */
- extendEventData: function extendEventData(ev) {
- var startEv = this.current.startEvent;
-
- // if the touches change, set the new touches over the startEvent touches
- // this because touchevents don't have all the touches on touchstart, or the
- // user must place his fingers at the EXACT same time on the screen, which is not realistic
- // but, sometimes it happens that both fingers are touching at the EXACT same time
- if(startEv && (ev.touches.length != startEv.touches.length || ev.touches === startEv.touches)) {
- // extend 1 level deep to get the touchlist with the touch objects
- startEv.touches = [];
- for(var i=0,len=ev.touches.length; i<len; i++) {
- startEv.touches.push(Hammer.utils.extend({}, ev.touches[i]));
- }
- }
-
- var delta_time = ev.timeStamp - startEv.timeStamp,
- delta_x = ev.center.pageX - startEv.center.pageX,
- delta_y = ev.center.pageY - startEv.center.pageY,
- velocity = Hammer.utils.getVelocity(delta_time, delta_x, delta_y);
-
- Hammer.utils.extend(ev, {
- deltaTime : delta_time,
-
- deltaX : delta_x,
- deltaY : delta_y,
-
- velocityX : velocity.x,
- velocityY : velocity.y,
-
- distance : Hammer.utils.getDistance(startEv.center, ev.center),
- angle : Hammer.utils.getAngle(startEv.center, ev.center),
- direction : Hammer.utils.getDirection(startEv.center, ev.center),
-
- scale : Hammer.utils.getScale(startEv.touches, ev.touches),
- rotation : Hammer.utils.getRotation(startEv.touches, ev.touches),
-
- startEvent : startEv
- });
-
- return ev;
- },
-
-
- /**
- * register new gesture
- * @param {Object} gesture object, see gestures.js for documentation
- * @returns {Array} gestures
- */
- register: function register(gesture) {
- // add an enable gesture options if there is no given
- var options = gesture.defaults || {};
- if(options[gesture.name] === undefined) {
- options[gesture.name] = true;
- }
-
- // extend Hammer default options with the Hammer.gesture options
- Hammer.utils.extend(Hammer.defaults, options, true);
-
- // set its index
- gesture.index = gesture.index || 1000;
-
- // add Hammer.gesture to the list
- this.gestures.push(gesture);
-
- // sort the list by index
- this.gestures.sort(function(a, b) {
- if (a.index < b.index) {
- return -1;
- }
- if (a.index > 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);
- },{}],4:[function(require,module,exports){
- var global=typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {};//! moment.js
- //! version : 2.7.0
- //! authors : Tim Wood, Iskren Chernev, Moment.js contributors
- //! license : MIT
- //! momentjs.com
-
- (function (undefined) {
-
- /************************************
- Constants
- ************************************/
-
- var moment,
- VERSION = "2.7.0",
- // the global-scope this is NOT the global object in Node.js
- globalScope = typeof global !== 'undefined' ? global : this,
- oldGlobalMoment,
- 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 = {},
-
- // moment internal properties
- momentProperties = {
- _isAMomentObject: null,
- _i : null,
- _f : null,
- _l : null,
- _strict : null,
- _tzm : null,
- _isUTC : null,
- _offset : null, // optional. Combine with _isUTC
- _pf : null,
- _lang : null // optional
- },
-
- // check for nodeJS
- hasModule = (typeof module !== 'undefined' && module.exports),
-
- // 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]?|Q|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
- parseTokenOrdinal = /\d{1,2}/,
-
- //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
- parseTokenSignedNumber = /[+-]?\d+/, // -inf - inf
-
- // 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{6}|\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 = [
- ['YYYYYY-MM-DD', /[+-]\d{6}-\d{2}-\d{2}/],
- ['YYYY-MM-DD', /\d{4}-\d{2}-\d{2}/],
- ['GGGG-[W]WW-E', /\d{4}-W\d{2}-\d/],
- ['GGGG-[W]WW', /\d{4}-W\d{2}/],
- ['YYYY-DDD', /\d{4}-\d{3}/]
- ],
-
- // iso time formats and regexes
- isoTimes = [
- ['HH:mm:ss.SSSS', /(T| )\d\d:\d\d:\d\d\.\d+/],
- ['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',
- Q : 'quarter',
- 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 = {},
-
- // default relative time thresholds
- relativeTimeThresholds = {
- s: 45, //seconds to minutes
- m: 45, //minutes to hours
- h: 22, //hours to days
- dd: 25, //days to month (month == 1)
- dm: 45, //days to months (months > 1)
- dy: 345 //days to year
- },
-
- // 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 leftZeroFill(this.weekYear(), 4);
- },
- ggggg : function () {
- return leftZeroFill(this.weekYear(), 5);
- },
- GG : function () {
- return leftZeroFill(this.isoWeekYear() % 100, 2);
- },
- GGGG : function () {
- return leftZeroFill(this.isoWeekYear(), 4);
- },
- 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'];
-
- // Pick the first defined of two or three arguments. dfl comes from
- // default.
- function dfl(a, b, c) {
- switch (arguments.length) {
- case 2: return a != null ? a : b;
- case 3: return a != null ? a : b != null ? b : c;
- default: throw new Error("Implement me");
- }
- }
-
- function defaultParsingFlags() {
- // We need to deep clone this object, and es5 standard is not very
- // helpful.
- return {
- empty : false,
- unusedTokens : [],
- unusedInput : [],
- overflow : -2,
- charsLeftOver : 0,
- nullInput : false,
- invalidMonth : null,
- invalidFormat : false,
- userInvalidated : false,
- iso: false
- };
- }
-
- function deprecate(msg, fn) {
- var firstTime = true;
- function printMsg() {
- if (moment.suppressDeprecationWarnings === false &&
- typeof console !== 'undefined' && console.warn) {
- console.warn("Deprecation warning: " + msg);
- }
- }
- return extend(function () {
- if (firstTime) {
- printMsg();
- firstTime = false;
- }
- return fn.apply(this, arguments);
- }, fn);
- }
-
- 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,
- quarters = normalizedInput.quarter || 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 +
- quarters * 3 +
- 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 cloneMoment(m) {
- var result = {}, i;
- for (i in m) {
- if (m.hasOwnProperty(i) && momentProperties.hasOwnProperty(i)) {
- result[i] = m[i];
- }
- }
-
- return result;
- }
-
- 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, updateOffset) {
- var milliseconds = duration._milliseconds,
- days = duration._days,
- months = duration._months;
- updateOffset = updateOffset == null ? true : updateOffset;
-
- if (milliseconds) {
- mom._d.setTime(+mom._d + milliseconds * isAdding);
- }
- if (days) {
- rawSetter(mom, 'Date', rawGetter(mom, 'Date') + days * isAdding);
- }
- if (months) {
- rawMonthSetter(mom, rawGetter(mom, 'Month') + months * isAdding);
- }
- if (updateOffset) {
- moment.updateOffset(mom, days || months);
- }
- }
-
- // 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 weeksInYear(year, dow, doy) {
- return weekOfYear(moment([year, 11, 31 + dow - doy]), dow, doy).week;
- }
-
- 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 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 'Q':
- return parseTokenOneDigit;
- case 'DDDD':
- return parseTokenThreeDigits;
- case 'YYYY':
- case 'GGGG':
- case 'gggg':
- return strict ? parseTokenFourDigits : parseTokenOneToFourDigits;
- case 'Y':
- case 'G':
- case 'g':
- return parseTokenSignedNumber;
- 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':
- if (strict) { return parseTokenThreeDigits; }
- /* falls through */
- case 'DDD':
- return 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 parseTokenOneOrTwoDigits;
- case 'Do':
- return parseTokenOrdinal;
- 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) {
- // QUARTER
- case 'Q':
- if (input != null) {
- datePartArray[MONTH] = (toInt(input) - 1) * 3;
- }
- break;
- // 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;
- case 'Do' :
- if (input != null) {
- datePartArray[DATE] = toInt(parseInt(input, 10));
- }
- 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] = moment.parseTwoDigitYear(input);
- 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;
- // WEEKDAY - human
- case 'dd':
- case 'ddd':
- case 'dddd':
- a = getLangDefinition(config._l).weekdaysParse(input);
- // if we didn't get a weekday name, mark the date as invalid
- if (a != null) {
- config._w = config._w || {};
- config._w['d'] = a;
- } else {
- config._pf.invalidWeekday = input;
- }
- break;
- // WEEK, WEEK DAY - numeric
- case 'w':
- case 'ww':
- case 'W':
- case 'WW':
- case 'd':
- case 'e':
- case 'E':
- token = token.substr(0, 1);
- /* falls through */
- case 'gggg':
- case 'GGGG':
- case 'GGGGG':
- token = token.substr(0, 2);
- if (input) {
- config._w = config._w || {};
- config._w[token] = toInt(input);
- }
- break;
- case 'gg':
- case 'GG':
- config._w = config._w || {};
- config._w[token] = moment.parseTwoDigitYear(input);
- }
- }
-
- function dayOfYearFromWeekInfo(config) {
- var w, weekYear, week, weekday, dow, doy, temp, lang;
-
- w = config._w;
- if (w.GG != null || w.W != null || w.E != null) {
- dow = 1;
- doy = 4;
-
- // TODO: We need to take the current isoWeekYear, but that depends on
- // how we interpret now (local, utc, fixed offset). So create
- // a now version of current config (take local/utc/offset flags, and
- // create now).
- weekYear = dfl(w.GG, config._a[YEAR], weekOfYear(moment(), 1, 4).year);
- week = dfl(w.W, 1);
- weekday = dfl(w.E, 1);
- } else {
- lang = getLangDefinition(config._l);
- dow = lang._week.dow;
- doy = lang._week.doy;
-
- weekYear = dfl(w.gg, config._a[YEAR], weekOfYear(moment(), dow, doy).year);
- week = dfl(w.w, 1);
-
- if (w.d != null) {
- // weekday -- low day numbers are considered next week
- weekday = w.d;
- if (weekday < dow) {
- ++week;
- }
- } else if (w.e != null) {
- // local weekday -- counting starts from begining of week
- weekday = w.e + dow;
- } else {
- // default to begining of week
- weekday = dow;
- }
- }
- temp = dayOfYearFromWeeks(weekYear, week, weekday, doy, dow);
-
- config._a[YEAR] = temp.year;
- config._dayOfYear = temp.dayOfYear;
- }
-
- // 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;
-
- 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) {
- dayOfYearFromWeekInfo(config);
- }
-
- //if the day of the year is set, figure out what it is
- if (config._dayOfYear) {
- yearToUse = dfl(config._a[YEAR], currentDate[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];
- }
-
- config._d = (config._useUTC ? makeUTCDate : makeDate).apply(null, input);
- // Apply timezone offset from input. The actual zone can be changed
- // with parseZone.
- if (config._tzm != null) {
- config._d.setUTCMinutes(config._d.getUTCMinutes() + config._tzm);
- }
- }
-
- 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) {
-
- if (config._f === moment.ISO_8601) {
- parseISO(config);
- return;
- }
-
- 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);
- tempConfig._pf = defaultParsingFlags();
- 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 parseISO(config) {
- var i, l,
- string = config._i,
- match = isoRegex.exec(string);
-
- if (match) {
- config._pf.iso = true;
- for (i = 0, l = isoDates.length; i < l; i++) {
- if (isoDates[i][1].exec(string)) {
- // match[5] should be "T" or undefined
- config._f = isoDates[i][0] + (match[6] || " ");
- break;
- }
- }
- for (i = 0, l = isoTimes.length; i < l; i++) {
- if (isoTimes[i][1].exec(string)) {
- config._f += isoTimes[i][0];
- break;
- }
- }
- if (string.match(parseTokenTimezone)) {
- config._f += "Z";
- }
- makeDateFromStringAndFormat(config);
- } else {
- config._isValid = false;
- }
- }
-
- // date from iso format or fallback
- function makeDateFromString(config) {
- parseISO(config);
- if (config._isValid === false) {
- delete config._isValid;
- moment.createFromInputFallback(config);
- }
- }
-
- 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 if (typeof(input) === 'number') {
- // from milliseconds
- config._d = new Date(input);
- } else {
- moment.createFromInputFallback(config);
- }
- }
-
- 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 < relativeTimeThresholds.s && ['s', seconds] ||
- minutes === 1 && ['m'] ||
- minutes < relativeTimeThresholds.m && ['mm', minutes] ||
- hours === 1 && ['h'] ||
- hours < relativeTimeThresholds.h && ['hh', hours] ||
- days === 1 && ['d'] ||
- days <= relativeTimeThresholds.dd && ['dd', days] ||
- days <= relativeTimeThresholds.dm && ['M'] ||
- days < relativeTimeThresholds.dy && ['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) {
- var d = makeUTCDate(year, 0, 1).getUTCDay(), daysToAdd, dayOfYear;
-
- d = d === 0 ? 7 : d;
- weekday = weekday != null ? weekday : firstDayOfWeek;
- daysToAdd = firstDayOfWeek - d + (d > firstDayOfWeekOfYear ? 7 : 0) - (d < firstDayOfWeek ? 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 (input === null || (format === undefined && input === '')) {
- return moment.invalid({nullInput: true});
- }
-
- if (typeof input === 'string') {
- config._i = input = getLangDefinition().preparse(input);
- }
-
- if (moment.isMoment(input)) {
- config = cloneMoment(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) {
- var c;
-
- if (typeof(lang) === "boolean") {
- strict = lang;
- lang = undefined;
- }
- // object construction must be done this way.
- // https://github.com/moment/moment/issues/1423
- c = {};
- c._isAMomentObject = true;
- c._i = input;
- c._f = format;
- c._l = lang;
- c._strict = strict;
- c._isUTC = false;
- c._pf = defaultParsingFlags();
-
- return makeMoment(c);
- };
-
- moment.suppressDeprecationWarnings = false;
-
- moment.createFromInputFallback = deprecate(
- "moment construction falls back to js Date. This is " +
- "discouraged and will be removed in upcoming major " +
- "release. Please refer to " +
- "https://github.com/moment/moment/issues/1407 for more info.",
- function (config) {
- config._d = new Date(config._i);
- });
-
- // Pick a moment m from moments so that m[fn](other) is true for all
- // other. This relies on the function fn to be transitive.
- //
- // moments should either be an array of moment objects or an array, whose
- // first element is an array of moment objects.
- function pickBy(fn, moments) {
- var res, i;
- if (moments.length === 1 && isArray(moments[0])) {
- moments = moments[0];
- }
- if (!moments.length) {
- return moment();
- }
- res = moments[0];
- for (i = 1; i < moments.length; ++i) {
- if (moments[i][fn](res)) {
- res = moments[i];
- }
- }
- return res;
- }
-
- moment.min = function () {
- var args = [].slice.call(arguments, 0);
-
- return pickBy('isBefore', args);
- };
-
- moment.max = function () {
- var args = [].slice.call(arguments, 0);
-
- return pickBy('isAfter', args);
- };
-
- // creating with utc
- moment.utc = function (input, format, lang, strict) {
- var c;
-
- if (typeof(lang) === "boolean") {
- strict = lang;
- lang = undefined;
- }
- // object construction must be done this way.
- // https://github.com/moment/moment/issues/1423
- c = {};
- c._isAMomentObject = true;
- c._useUTC = true;
- c._isUTC = true;
- c._l = lang;
- c._i = input;
- c._f = format;
- c._strict = strict;
- c._pf = defaultParsingFlags();
-
- return makeMoment(c).utc();
- };
-
- // 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;
-
- // constant that refers to the ISO standard
- moment.ISO_8601 = function () {};
-
- // Plugins that add properties should also add the key here (null value),
- // so we can properly clone ourselves.
- moment.momentProperties = momentProperties;
-
- // 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 allows you to set a threshold for relative time strings
- moment.relativeTimeThreshold = function(threshold, limit) {
- if (relativeTimeThresholds[threshold] === undefined) {
- return false;
- }
- relativeTimeThresholds[threshold] = limit;
- return true;
- };
-
- // 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 ||
- (obj != null && obj.hasOwnProperty('_isAMomentObject'));
- };
-
- // 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 () {
- return moment.apply(null, arguments).parseZone();
- };
-
- moment.parseTwoDigitYear = function (input) {
- return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
- };
-
- /************************************
- 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' && typeof val === 'string') {
- dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
- } else 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' && typeof val === 'string') {
- dur = moment.duration(isNaN(+val) ? +input : +val, isNaN(+val) ? val : input);
- } else 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 (time) {
- // We want to compare the start of today, vs this.
- // Getting start-of-today depends on whether we're zone'd or not.
- var now = time || moment(),
- sod = makeAs(now, 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 : makeAccessor('Month', true),
-
- 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 'quarter':
- 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);
- }
-
- // quarters are also special
- if (units === 'quarter') {
- this.month(Math.floor(this.month() / 3) * 3);
- }
-
- 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: deprecate(
- "moment().min is deprecated, use moment.min instead. https://github.com/moment/moment/issues/1548",
- function (other) {
- other = moment.apply(null, arguments);
- return other < this ? this : other;
- }
- ),
-
- max: deprecate(
- "moment().max is deprecated, use moment.max instead. https://github.com/moment/moment/issues/1548",
- function (other) {
- other = moment.apply(null, arguments);
- return other > this ? this : other;
- }
- ),
-
- // keepTime = true means only change the timezone, without affecting
- // the local hour. So 5:31:26 +0300 --[zone(2, true)]--> 5:31:26 +0200
- // It is possible that 5:31:26 doesn't exist int zone +0200, so we
- // adjust the time as needed, to be valid.
- //
- // Keeping the time actually adds/subtracts (one hour)
- // from the actual represented time. That is why we call updateOffset
- // a second time. In case it wants us to change the offset again
- // _changeInProgress == true case, then we have to adjust, because
- // there is no such time in the given timezone.
- zone : function (input, keepTime) {
- 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) {
- if (!keepTime || this._changeInProgress) {
- addOrSubtractDurationFromMoment(this,
- moment.duration(offset - input, 'm'), 1, false);
- } else if (!this._changeInProgress) {
- this._changeInProgress = true;
- moment.updateOffset(this, true);
- this._changeInProgress = null;
- }
- }
- } 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 (input) {
- return input == null ? Math.ceil((this.month() + 1) / 3) : this.month((input - 1) * 3 + this.month() % 3);
- },
-
- 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);
- },
-
- isoWeeksInYear : function () {
- return weeksInYear(this.year(), 1, 4);
- },
-
- weeksInYear : function () {
- var weekInfo = this._lang._week;
- return weeksInYear(this.year(), weekInfo.dow, weekInfo.doy);
- },
-
- 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;
- }
- }
- });
-
- function rawMonthSetter(mom, value) {
- var dayOfMonth;
-
- // TODO: Move this out of here!
- if (typeof value === 'string') {
- value = mom.lang().monthsParse(value);
- // TODO: Another silent failure?
- if (typeof value !== 'number') {
- return mom;
- }
- }
-
- dayOfMonth = Math.min(mom.date(),
- daysInMonth(mom.year(), value));
- mom._d['set' + (mom._isUTC ? 'UTC' : '') + 'Month'](value, dayOfMonth);
- return mom;
- }
-
- function rawGetter(mom, unit) {
- return mom._d['get' + (mom._isUTC ? 'UTC' : '') + unit]();
- }
-
- function rawSetter(mom, unit, value) {
- if (unit === 'Month') {
- return rawMonthSetter(mom, value);
- } else {
- return mom._d['set' + (mom._isUTC ? 'UTC' : '') + unit](value);
- }
- }
-
- function makeAccessor(unit, keepTime) {
- return function (value) {
- if (value != null) {
- rawSetter(this, unit, value);
- moment.updateOffset(this, keepTime);
- return this;
- } else {
- return rawGetter(this, unit);
- }
- };
- }
-
- moment.fn.millisecond = moment.fn.milliseconds = makeAccessor('Milliseconds', false);
- moment.fn.second = moment.fn.seconds = makeAccessor('Seconds', false);
- moment.fn.minute = moment.fn.minutes = makeAccessor('Minutes', false);
- // Setting the hour should keep the time, because the user explicitly
- // specified which hour he wants. So trying to maintain the same hour (in
- // a new timezone) makes sense. Adding/subtracting hours does not follow
- // this rule.
- moment.fn.hour = moment.fn.hours = makeAccessor('Hours', true);
- // moment.fn.month is defined separately
- moment.fn.date = makeAccessor('Date', true);
- moment.fn.dates = deprecate("dates accessor is deprecated. Use date instead.", makeAccessor('Date', true));
- moment.fn.year = makeAccessor('FullYear', true);
- moment.fn.years = deprecate("years accessor is deprecated. Use year instead.", makeAccessor('FullYear', true));
-
- // 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;
- moment.fn.quarters = moment.fn.quarter;
-
- // 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(shouldDeprecate) {
- /*global ender:false */
- if (typeof ender !== 'undefined') {
- return;
- }
- oldGlobalMoment = globalScope.moment;
- if (shouldDeprecate) {
- globalScope.moment = deprecate(
- "Accessing Moment through the global scope is " +
- "deprecated, and will be removed in an upcoming " +
- "release.",
- moment);
- } else {
- globalScope.moment = moment;
- }
- }
-
- // CommonJS module is defined
- if (hasModule) {
- module.exports = moment;
- } else if (typeof define === "function" && define.amd) {
- define("moment", function (require, exports, module) {
- if (module.config && module.config() && module.config().noGlobal === true) {
- // release the global variable
- globalScope.moment = oldGlobalMoment;
- }
-
- return moment;
- });
- makeGlobal(true);
- } else {
- makeGlobal();
- }
- }).call(this);
-
- },{}],5:[function(require,module,exports){
- /**
- * Copyright 2012 Craig Campbell
- *
- * 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.
- *
- * Mousetrap is a simple keyboard shortcut library for Javascript with
- * no external dependencies
- *
- * @version 1.1.2
- * @url craig.is/killing/mice
- */
-
- /**
- * mapping of special keycodes to their corresponding keys
- *
- * everything in this dictionary cannot use keypress events
- * so it has to be here to map to the correct keycodes for
- * keyup/keydown events
- *
- * @type {Object}
- */
- var _MAP = {
- 8: 'backspace',
- 9: 'tab',
- 13: 'enter',
- 16: 'shift',
- 17: 'ctrl',
- 18: 'alt',
- 20: 'capslock',
- 27: 'esc',
- 32: 'space',
- 33: 'pageup',
- 34: 'pagedown',
- 35: 'end',
- 36: 'home',
- 37: 'left',
- 38: 'up',
- 39: 'right',
- 40: 'down',
- 45: 'ins',
- 46: 'del',
- 91: 'meta',
- 93: 'meta',
- 224: 'meta'
- },
-
- /**
- * mapping for special characters so they can support
- *
- * this dictionary is only used incase you want to bind a
- * keyup or keydown event to one of these keys
- *
- * @type {Object}
- */
- _KEYCODE_MAP = {
- 106: '*',
- 107: '+',
- 109: '-',
- 110: '.',
- 111 : '/',
- 186: ';',
- 187: '=',
- 188: ',',
- 189: '-',
- 190: '.',
- 191: '/',
- 192: '`',
- 219: '[',
- 220: '\\',
- 221: ']',
- 222: '\''
- },
-
- /**
- * this is a mapping of keys that require shift on a US keypad
- * back to the non shift equivelents
- *
- * this is so you can use keyup events with these keys
- *
- * note that this will only work reliably on US keyboards
- *
- * @type {Object}
- */
- _SHIFT_MAP = {
- '~': '`',
- '!': '1',
- '@': '2',
- '#': '3',
- '$': '4',
- '%': '5',
- '^': '6',
- '&': '7',
- '*': '8',
- '(': '9',
- ')': '0',
- '_': '-',
- '+': '=',
- ':': ';',
- '\"': '\'',
- '<': ',',
- '>': '.',
- '?': '/',
- '|': '\\'
- },
-
- /**
- * this is a list of special strings you can use to map
- * to modifier keys when you specify your keyboard shortcuts
- *
- * @type {Object}
- */
- _SPECIAL_ALIASES = {
- 'option': 'alt',
- 'command': 'meta',
- 'return': 'enter',
- 'escape': 'esc'
- },
-
- /**
- * variable to store the flipped version of _MAP from above
- * needed to check if we should use keypress or not when no action
- * is specified
- *
- * @type {Object|undefined}
- */
- _REVERSE_MAP,
-
- /**
- * a list of all the callbacks setup via Mousetrap.bind()
- *
- * @type {Object}
- */
- _callbacks = {},
-
- /**
- * direct map of string combinations to callbacks used for trigger()
- *
- * @type {Object}
- */
- _direct_map = {},
-
- /**
- * keeps track of what level each sequence is at since multiple
- * sequences can start out with the same sequence
- *
- * @type {Object}
- */
- _sequence_levels = {},
-
- /**
- * variable to store the setTimeout call
- *
- * @type {null|number}
- */
- _reset_timer,
-
- /**
- * temporary state where we will ignore the next keyup
- *
- * @type {boolean|string}
- */
- _ignore_next_keyup = false,
-
- /**
- * are we currently inside of a sequence?
- * type of action ("keyup" or "keydown" or "keypress") or false
- *
- * @type {boolean|string}
- */
- _inside_sequence = false;
-
- /**
- * loop through the f keys, f1 to f19 and add them to the map
- * programatically
- */
- for (var i = 1; i < 20; ++i) {
- _MAP[111 + i] = 'f' + i;
- }
-
- /**
- * loop through to map numbers on the numeric keypad
- */
- for (i = 0; i <= 9; ++i) {
- _MAP[i + 96] = i;
- }
-
- /**
- * cross browser add event method
- *
- * @param {Element|HTMLDocument} object
- * @param {string} type
- * @param {Function} callback
- * @returns void
- */
- function _addEvent(object, type, callback) {
- if (object.addEventListener) {
- return object.addEventListener(type, callback, false);
- }
-
- object.attachEvent('on' + type, callback);
- }
-
- /**
- * takes the event and returns the key character
- *
- * @param {Event} e
- * @return {string}
- */
- function _characterFromEvent(e) {
-
- // for keypress events we should return the character as is
- if (e.type == 'keypress') {
- return String.fromCharCode(e.which);
- }
-
- // for non keypress events the special maps are needed
- if (_MAP[e.which]) {
- return _MAP[e.which];
- }
-
- if (_KEYCODE_MAP[e.which]) {
- return _KEYCODE_MAP[e.which];
- }
-
- // if it is not in the special map
- return String.fromCharCode(e.which).toLowerCase();
- }
-
- /**
- * should we stop this event before firing off callbacks
- *
- * @param {Event} e
- * @return {boolean}
- */
- function _stop(e) {
- var element = e.target || e.srcElement,
- tag_name = element.tagName;
-
- // if the element has the class "mousetrap" then no need to stop
- if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
- return false;
- }
-
- // stop for input, select, and textarea
- return tag_name == 'INPUT' || tag_name == 'SELECT' || tag_name == 'TEXTAREA' || (element.contentEditable && element.contentEditable == 'true');
- }
-
- /**
- * checks if two arrays are equal
- *
- * @param {Array} modifiers1
- * @param {Array} modifiers2
- * @returns {boolean}
- */
- function _modifiersMatch(modifiers1, modifiers2) {
- return modifiers1.sort().join(',') === modifiers2.sort().join(',');
- }
-
- /**
- * resets all sequence counters except for the ones passed in
- *
- * @param {Object} do_not_reset
- * @returns void
- */
- function _resetSequences(do_not_reset) {
- do_not_reset = do_not_reset || {};
-
- var active_sequences = false,
- key;
-
- for (key in _sequence_levels) {
- if (do_not_reset[key]) {
- active_sequences = true;
- continue;
- }
- _sequence_levels[key] = 0;
- }
-
- if (!active_sequences) {
- _inside_sequence = false;
- }
- }
-
- /**
- * finds all callbacks that match based on the keycode, modifiers,
- * and action
- *
- * @param {string} character
- * @param {Array} modifiers
- * @param {string} action
- * @param {boolean=} remove - should we remove any matches
- * @param {string=} combination
- * @returns {Array}
- */
- function _getMatches(character, modifiers, action, remove, combination) {
- var i,
- callback,
- matches = [];
-
- // if there are no events related to this keycode
- if (!_callbacks[character]) {
- return [];
- }
-
- // if a modifier key is coming up on its own we should allow it
- if (action == 'keyup' && _isModifier(character)) {
- modifiers = [character];
- }
-
- // loop through all callbacks for the key that was pressed
- // and see if any of them match
- for (i = 0; i < _callbacks[character].length; ++i) {
- callback = _callbacks[character][i];
-
- // if this is a sequence but it is not at the right level
- // then move onto the next match
- if (callback.seq && _sequence_levels[callback.seq] != callback.level) {
- continue;
- }
-
- // if the action we are looking for doesn't match the action we got
- // then we should keep going
- if (action != callback.action) {
- continue;
- }
-
- // if this is a keypress event that means that we need to only
- // look at the character, otherwise check the modifiers as
- // well
- if (action == 'keypress' || _modifiersMatch(modifiers, callback.modifiers)) {
-
- // remove is used so if you change your mind and call bind a
- // second time with a new function the first one is overwritten
- if (remove && callback.combo == combination) {
- _callbacks[character].splice(i, 1);
- }
-
- matches.push(callback);
- }
- }
-
- return matches;
- }
-
- /**
- * takes a key event and figures out what the modifiers are
- *
- * @param {Event} e
- * @returns {Array}
- */
- function _eventModifiers(e) {
- var modifiers = [];
-
- if (e.shiftKey) {
- modifiers.push('shift');
- }
-
- if (e.altKey) {
- modifiers.push('alt');
- }
-
- if (e.ctrlKey) {
- modifiers.push('ctrl');
- }
-
- if (e.metaKey) {
- modifiers.push('meta');
- }
-
- return modifiers;
- }
-
- /**
- * actually calls the callback function
- *
- * if your callback function returns false this will use the jquery
- * convention - prevent default and stop propogation on the event
- *
- * @param {Function} callback
- * @param {Event} e
- * @returns void
- */
- function _fireCallback(callback, e) {
- if (callback(e) === false) {
- if (e.preventDefault) {
- e.preventDefault();
- }
-
- if (e.stopPropagation) {
- e.stopPropagation();
- }
-
- e.returnValue = false;
- e.cancelBubble = true;
- }
- }
-
- /**
- * handles a character key event
- *
- * @param {string} character
- * @param {Event} e
- * @returns void
- */
- function _handleCharacter(character, e) {
-
- // if this event should not happen stop here
- if (_stop(e)) {
- return;
- }
-
- var callbacks = _getMatches(character, _eventModifiers(e), e.type),
- i,
- do_not_reset = {},
- processed_sequence_callback = false;
-
- // loop through matching callbacks for this key event
- for (i = 0; i < callbacks.length; ++i) {
-
- // fire for all sequence callbacks
- // this is because if for example you have multiple sequences
- // bound such as "g i" and "g t" they both need to fire the
- // callback for matching g cause otherwise you can only ever
- // match the first one
- if (callbacks[i].seq) {
- processed_sequence_callback = true;
-
- // keep a list of which sequences were matches for later
- do_not_reset[callbacks[i].seq] = 1;
- _fireCallback(callbacks[i].callback, e);
- continue;
- }
-
- // if there were no sequence matches but we are still here
- // that means this is a regular match so we should fire that
- if (!processed_sequence_callback && !_inside_sequence) {
- _fireCallback(callbacks[i].callback, e);
- }
- }
-
- // if you are inside of a sequence and the key you are pressing
- // is not a modifier key then we should reset all sequences
- // that were not matched by this key event
- if (e.type == _inside_sequence && !_isModifier(character)) {
- _resetSequences(do_not_reset);
- }
- }
-
- /**
- * handles a keydown event
- *
- * @param {Event} e
- * @returns void
- */
- function _handleKey(e) {
-
- // normalize e.which for key events
- // @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
- e.which = typeof e.which == "number" ? e.which : e.keyCode;
-
- var character = _characterFromEvent(e);
-
- // no character found then stop
- if (!character) {
- return;
- }
-
- if (e.type == 'keyup' && _ignore_next_keyup == character) {
- _ignore_next_keyup = false;
- return;
- }
-
- _handleCharacter(character, e);
- }
-
- /**
- * determines if the keycode specified is a modifier key or not
- *
- * @param {string} key
- * @returns {boolean}
- */
- function _isModifier(key) {
- return key == 'shift' || key == 'ctrl' || key == 'alt' || key == 'meta';
- }
-
- /**
- * called to set a 1 second timeout on the specified sequence
- *
- * this is so after each key press in the sequence you have 1 second
- * to press the next key before you have to start over
- *
- * @returns void
- */
- function _resetSequenceTimer() {
- clearTimeout(_reset_timer);
- _reset_timer = setTimeout(_resetSequences, 1000);
- }
-
- /**
- * reverses the map lookup so that we can look for specific keys
- * to see what can and can't use keypress
- *
- * @return {Object}
- */
- function _getReverseMap() {
- if (!_REVERSE_MAP) {
- _REVERSE_MAP = {};
- for (var key in _MAP) {
-
- // pull out the numeric keypad from here cause keypress should
- // be able to detect the keys from the character
- if (key > 95 && key < 112) {
- continue;
- }
-
- if (_MAP.hasOwnProperty(key)) {
- _REVERSE_MAP[_MAP[key]] = key;
- }
- }
- }
- return _REVERSE_MAP;
- }
-
- /**
- * picks the best action based on the key combination
- *
- * @param {string} key - character for key
- * @param {Array} modifiers
- * @param {string=} action passed in
- */
- function _pickBestAction(key, modifiers, action) {
-
- // if no action was picked in we should try to pick the one
- // that we think would work best for this key
- if (!action) {
- action = _getReverseMap()[key] ? 'keydown' : 'keypress';
- }
-
- // modifier keys don't work as expected with keypress,
- // switch to keydown
- if (action == 'keypress' && modifiers.length) {
- action = 'keydown';
- }
-
- return action;
- }
-
- /**
- * binds a key sequence to an event
- *
- * @param {string} combo - combo specified in bind call
- * @param {Array} keys
- * @param {Function} callback
- * @param {string=} action
- * @returns void
- */
- function _bindSequence(combo, keys, callback, action) {
-
- // start off by adding a sequence level record for this combination
- // and setting the level to 0
- _sequence_levels[combo] = 0;
-
- // if there is no action pick the best one for the first key
- // in the sequence
- if (!action) {
- action = _pickBestAction(keys[0], []);
- }
-
- /**
- * callback to increase the sequence level for this sequence and reset
- * all other sequences that were active
- *
- * @param {Event} e
- * @returns void
- */
- var _increaseSequence = function(e) {
- _inside_sequence = action;
- ++_sequence_levels[combo];
- _resetSequenceTimer();
- },
-
- /**
- * wraps the specified callback inside of another function in order
- * to reset all sequence counters as soon as this sequence is done
- *
- * @param {Event} e
- * @returns void
- */
- _callbackAndReset = function(e) {
- _fireCallback(callback, e);
-
- // we should ignore the next key up if the action is key down
- // or keypress. this is so if you finish a sequence and
- // release the key the final key will not trigger a keyup
- if (action !== 'keyup') {
- _ignore_next_keyup = _characterFromEvent(e);
- }
-
- // weird race condition if a sequence ends with the key
- // another sequence begins with
- setTimeout(_resetSequences, 10);
- },
- i;
-
- // loop through keys one at a time and bind the appropriate callback
- // function. for any key leading up to the final one it should
- // increase the sequence. after the final, it should reset all sequences
- for (i = 0; i < keys.length; ++i) {
- _bindSingle(keys[i], i < keys.length - 1 ? _increaseSequence : _callbackAndReset, action, combo, i);
- }
- }
-
- /**
- * binds a single keyboard combination
- *
- * @param {string} combination
- * @param {Function} callback
- * @param {string=} action
- * @param {string=} sequence_name - name of sequence if part of sequence
- * @param {number=} level - what part of the sequence the command is
- * @returns void
- */
- function _bindSingle(combination, callback, action, sequence_name, level) {
-
- // make sure multiple spaces in a row become a single space
- combination = combination.replace(/\s+/g, ' ');
-
- var sequence = combination.split(' '),
- i,
- key,
- keys,
- modifiers = [];
-
- // if this pattern is a sequence of keys then run through this method
- // to reprocess each pattern one key at a time
- if (sequence.length > 1) {
- return _bindSequence(combination, sequence, callback, action);
- }
-
- // take the keys from this pattern and figure out what the actual
- // pattern is all about
- keys = combination === '+' ? ['+'] : combination.split('+');
-
- for (i = 0; i < keys.length; ++i) {
- key = keys[i];
-
- // normalize key names
- if (_SPECIAL_ALIASES[key]) {
- key = _SPECIAL_ALIASES[key];
- }
-
- // if this is not a keypress event then we should
- // be smart about using shift keys
- // this will only work for US keyboards however
- if (action && action != 'keypress' && _SHIFT_MAP[key]) {
- key = _SHIFT_MAP[key];
- modifiers.push('shift');
- }
-
- // if this key is a modifier then add it to the list of modifiers
- if (_isModifier(key)) {
- modifiers.push(key);
- }
- }
-
- // depending on what the key combination is
- // we will try to pick the best event for it
- action = _pickBestAction(key, modifiers, action);
-
- // make sure to initialize array if this is the first time
- // a callback is added for this key
- if (!_callbacks[key]) {
- _callbacks[key] = [];
- }
-
- // remove an existing match if there is one
- _getMatches(key, modifiers, action, !sequence_name, combination);
-
- // add this call back to the array
- // if it is a sequence put it at the beginning
- // if not put it at the end
- //
- // this is important because the way these are processed expects
- // the sequence ones to come first
- _callbacks[key][sequence_name ? 'unshift' : 'push']({
- callback: callback,
- modifiers: modifiers,
- action: action,
- seq: sequence_name,
- level: level,
- combo: combination
- });
- }
-
- /**
- * binds multiple combinations to the same callback
- *
- * @param {Array} combinations
- * @param {Function} callback
- * @param {string|undefined} action
- * @returns void
- */
- function _bindMultiple(combinations, callback, action) {
- for (var i = 0; i < combinations.length; ++i) {
- _bindSingle(combinations[i], callback, action);
- }
- }
-
- // start!
- _addEvent(document, 'keypress', _handleKey);
- _addEvent(document, 'keydown', _handleKey);
- _addEvent(document, 'keyup', _handleKey);
-
- var mousetrap = {
-
- /**
- * binds an event to mousetrap
- *
- * can be a single key, a combination of keys separated with +,
- * a comma separated list of keys, an array of keys, or
- * a sequence of keys separated by spaces
- *
- * be sure to list the modifier keys first to make sure that the
- * correct key ends up getting bound (the last key in the pattern)
- *
- * @param {string|Array} keys
- * @param {Function} callback
- * @param {string=} action - 'keypress', 'keydown', or 'keyup'
- * @returns void
- */
- bind: function(keys, callback, action) {
- _bindMultiple(keys instanceof Array ? keys : [keys], callback, action);
- _direct_map[keys + ':' + action] = callback;
- return this;
- },
-
- /**
- * unbinds an event to mousetrap
- *
- * the unbinding sets the callback function of the specified key combo
- * to an empty function and deletes the corresponding key in the
- * _direct_map dict.
- *
- * the keycombo+action has to be exactly the same as
- * it was defined in the bind method
- *
- * TODO: actually remove this from the _callbacks dictionary instead
- * of binding an empty function
- *
- * @param {string|Array} keys
- * @param {string} action
- * @returns void
- */
- unbind: function(keys, action) {
- if (_direct_map[keys + ':' + action]) {
- delete _direct_map[keys + ':' + action];
- this.bind(keys, function() {}, action);
- }
- return this;
- },
-
- /**
- * triggers an event that has already been bound
- *
- * @param {string} keys
- * @param {string=} action
- * @returns void
- */
- trigger: function(keys, action) {
- _direct_map[keys + ':' + action]();
- return this;
- },
-
- /**
- * resets the library back to its initial state. this is useful
- * if you want to clear out the current keyboard shortcuts and bind
- * new ones - for example if you switch to another page
- *
- * @returns void
- */
- reset: function() {
- _callbacks = {};
- _direct_map = {};
- return this;
- }
- };
-
- module.exports = mousetrap;
-
-
- },{}]},{},[1])
- (1)
- });
|