' +
+ '| x: | ' + dataPoint.point.x + ' |
' +
+ '| y: | ' + dataPoint.point.y + ' |
' +
+ '| z: | ' + dataPoint.point.z + ' |
' +
+ '
';
+ }
+
+ 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
+ */
+links.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);
+ }
+ }
+ }
+ }
+};
+
+/**
+ * @prototype Point3d
+ * @param {Number} x
+ * @param {Number} y
+ * @param {Number} z
+ */
+links.Point3d = function (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 {links.Point3d} a
+ * @param {links.Point3d} b
+ * @return {links.Point3d} a-b
+ */
+links.Point3d.subtract = function(a, b) {
+ var sub = new links.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 {links.Point3d} a
+ * @param {links.Point3d} b
+ * @return {links.Point3d} a+b
+ */
+links.Point3d.add = function(a, b) {
+ var sum = new links.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 {links.Point3d} a
+ * @param {links.Point3d} b
+ * @return {links.Point3d} The average, (a+b)/2
+ */
+links.Point3d.avg = function(a, b) {
+ return new links.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 {links.Point3d} a
+ * @param {links.Point3d} b
+ * @return {links.Point3d} cross product axb
+ */
+links.Point3d.crossProduct = function(a, b) {
+ var crossproduct = new links.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
+ */
+links.Point3d.prototype.length = function() {
+ return Math.sqrt(
+ this.x * this.x +
+ this.y * this.y +
+ this.z * this.z
+ );
+};
+
+/**
+ * @prototype links.Point2d
+ */
+links.Point2d = function (x, y) {
+ this.x = x !== undefined ? x : 0;
+ this.y = y !== undefined ? y : 0;
+};
+
+
+/**
+ * @class Filter
+ *
+ * @param {google.visualization.DataTable} data The google data table
+ * @param {number} column The index of the column to be filtered
+ * @param {links.Graph} graph The graph
+ */
+links.Filter = function (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, this.column);
+ if (this.values.length) {
+ 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
+ */
+links.Filter.prototype.isLoaded = function() {
+ return this.loaded;
+};
+
+
+/**
+ * Return the loaded progress
+ * @return {number} percentage between 0 and 100
+ */
+links.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
+ */
+links.Filter.prototype.getLabel = function() {
+ return this.data.getColumnLabel(this.column);
+};
+
+
+/**
+ * Return the columnIndex of the filter
+ * @return {number} columnIndex
+ */
+links.Filter.prototype.getColumn = function() {
+ return this.column;
+};
+
+/**
+ * Return the currently selected value. Returns undefined if there is no selection
+ * @return {*} value
+ */
+links.Filter.prototype.getSelectedValue = function() {
+ if (this.index === undefined)
+ return undefined;
+
+ return this.values[this.index];
+};
+
+/**
+ * Retrieve all values of the filter
+ * @return {Array} values
+ */
+links.Filter.prototype.getValues = function() {
+ return this.values;
+};
+
+/**
+ * Retrieve one value of the filter
+ * @param {number} index
+ * @return {*} value
+ */
+links.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
+ */
+links.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 dataView = new google.visualization.DataView(this.data);
+
+ var f = {};
+ f.column = this.column;
+ f.value = this.values[index];
+ var filteredRows = this.data.getFilteredRows([f]);
+ dataView.setRows(filteredRows);
+
+ dataPoints = this.graph._getDataPoints(dataView);
+
+ this.dataPoints[index] = dataPoints;
+ }
+
+ return dataPoints;
+};
+
+
+
+/**
+ * Set a callback function when the filter is fully loaded.
+ */
+links.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
+ */
+links.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!
+ */
+links.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 = links.Graph3d.px(60); // TODO: use height of slider
+ frame.progress.style.left = links.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 links.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 links.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, ...)
+ */
+links.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, ...)
+ */
+links.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, ...)
+ */
+links.StepNumber.prototype.setStep = function(step, prettyStep) {
+ if (step === undefined || step <= 0)
+ return;
+
+ if (prettyStep !== undefined)
+ this.prettyStep = prettyStep;
+
+ if (this.prettyStep === true)
+ this._step = links.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
+ */
+links.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
+ */
+links.StepNumber.prototype.getCurrent = function () {
+ return parseFloat(this._current.toPrecision(this.precision));
+};
+
+/**
+ * returns the current step size
+ * @return {number} current step size
+ */
+links.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
+ */
+links.StepNumber.prototype.start = function() {
+ this._current = this._start - this._start % this._step;
+};
+
+/**
+ * Do a step, add the step size to the current value
+ */
+links.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.
+ */
+links.StepNumber.prototype.end = function () {
+ return (this._current > this._end);
+};
+
+
+/**
+ * @constructor links.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.
+ */
+links.Slider = function(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
+ */
+links.Slider.prototype.prev = function() {
+ var index = this.getIndex();
+ if (index > 0) {
+ index--;
+ this.setIndex(index);
+ }
+};
+
+/**
+ * Select the next index
+ */
+links.Slider.prototype.next = function() {
+ var index = this.getIndex();
+ if (index < this.values.length - 1) {
+ index++;
+ this.setIndex(index);
+ }
+};
+
+/**
+ * Select the next index
+ */
+links.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
+ */
+links.Slider.prototype.togglePlay = function() {
+ if (this.playTimeout === undefined) {
+ this.play();
+ } else {
+ this.stop();
+ }
+};
+
+/**
+ * Start playing
+ */
+links.Slider.prototype.play = function() {
+ this.playNext();
+
+ if (this.frame) {
+ this.frame.play.value = "Stop";
+ }
+};
+
+/**
+ * Stop playing
+ */
+links.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.
+ */
+links.Slider.prototype.setOnChangeCallback = function(callback) {
+ this.onChangeCallback = callback;
+};
+
+/**
+ * Set the interval for playing the list
+ * @param {number} interval The interval in milliseconds
+ */
+links.Slider.prototype.setPlayInterval = function(interval) {
+ this.playInterval = interval;
+};
+
+/**
+ * Retrieve the current play interval
+ * @return {number} interval The interval in milliseconds
+ */
+links.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.
+ */
+links.Slider.prototype.setPlayLoop = function(doLoop) {
+ this.playLoop = doLoop;
+};
+
+
+/**
+ * Execute the onchange callback function
+ */
+links.Slider.prototype.onChange = function() {
+ if (this.onChangeCallback !== undefined) {
+ this.onChangeCallback();
+ }
+};
+
+/**
+ * redraw the slider on the correct place
+ */
+links.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)
+ */
+links.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
+ */
+links.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
+ */
+links.Slider.prototype.getIndex = function() {
+ return this.index;
+};
+
+
+/**
+ * retrieve the currently selected value
+ * @return {*} value
+ */
+links.Slider.prototype.get = function() {
+ return this.values[this.index];
+};
+
+
+links.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);};
+ links.addEventListener(document, "mousemove", this.onmousemove);
+ links.addEventListener(document, "mouseup", this.onmouseup);
+ links.preventDefault(event);
+};
+
+
+links.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;
+};
+
+links.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;
+};
+
+
+
+links.Slider.prototype._onMouseMove = function (event) {
+ var diff = event.clientX - this.startClientX;
+ var x = this.startSlideX + diff;
+
+ var index = this.leftToIndex(x);
+
+ this.setIndex(index);
+
+ links.preventDefault();
+};
+
+
+links.Slider.prototype._onMouseUp = function (event) {
+ this.frame.style.cursor = 'auto';
+
+ // remove event listeners
+ links.removeEventListener(document, "mousemove", this.onmousemove);
+ links.removeEventListener(document, "mouseup", this.onmouseup);
+
+ links.preventDefault();
+};
+
+
+
+/**--------------------------------------------------------------------------**/
+
+
+
+/**
+ * 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
+ */
+links.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
+ */
+links.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);
+ }
+};
+
+/**
+ * Stop event propagation
+ */
+links.stopPropagation = 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.
+ */
+links.preventDefault = function (event) {
+ if (!event)
+ event = window.event;
+
+ if (event.preventDefault) {
+ event.preventDefault(); // non-IE browsers
+ }
+ else {
+ event.returnValue = false; // IE browsers
+ }
+};
+
+/**
+ * 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.
+ */
+links.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.
+ */
+links.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
+ */
+links.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
+ */
+links.getMouseY = function(event) {
+ if ('clientY' in event) return event.clientY;
+ return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
+};
+
+
/**
* vis.js module exports
*/
diff --git a/dist/vis.min.css b/dist/vis.min.css
index f4acfb0a..bfcad670 100644
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
@@ -1 +1 @@
-.vis.timeline.rootpanel{position:relative;overflow:hidden;border:1px solid #bfbfbf;box-sizing:border-box}.vis.timeline .vpanel{position:absolute;overflow:visible;box-sizing:border-box}.vis.timeline .vpanel.side{border-right:1px solid #bfbfbf}.vis.timeline .vpanel.side.hidden{display:none}.vis.timeline .vpanel.main{position:absolute;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset{position:relative;width:100%;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset .vlabel{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box}.vis.timeline.top .labelset .vlabel{border-top:1px solid #bfbfbf;border-bottom:none}.vis.timeline.bottom .labelset .vlabel{border-top:none;border-bottom:1px solid #bfbfbf}.vis.timeline .labelset .vlabel .inner{display:inline-block;padding:5px}.vis.timeline .itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis.timeline .axis{overflow:visible}.vis.timeline .group{position:relative;box-sizing:border-box}.vis.timeline.top .group{border-top:1px solid #bfbfbf;border-bottom:none}.vis.timeline.bottom .group{border-top:none;border-bottom:1px solid #bfbfbf}.vis.timeline .item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;padding:5px}.vis.timeline .item.selected{border-color:#FFC200;background-color:#FFF785;z-index:999}.vis.timeline.editable .item.selected{cursor:move}.vis.timeline .item.point.selected{background-color:#FFF785}.vis.timeline .item.box{text-align:center;border-style:solid;border-radius:2px}.vis.timeline .item.point{background:0 0}.vis.timeline .item.dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis.timeline .item.range,.vis.timeline .item.rangeoverflow{border-style:solid;border-radius:2px;box-sizing:border-box}.vis.timeline .item.range .content,.vis.timeline .item.rangeoverflow .content{position:relative;display:inline-block}.vis.timeline .item.range .content{overflow:hidden;max-width:100%}.vis.timeline .item.line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis.timeline .item .content{white-space:nowrap;overflow:hidden}.vis.timeline .item .delete{background:url(img/timeline/delete.png) no-repeat top center;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis.timeline .item.range .drag-left,.vis.timeline .item.rangeoverflow .drag-left{position:absolute;width:24px;height:100%;top:0;left:-4px;cursor:w-resize;z-index:10000}.vis.timeline .item.range .drag-right,.vis.timeline .item.rangeoverflow .drag-right{position:absolute;width:24px;height:100%;top:0;right:-4px;cursor:e-resize;z-index:10001}.vis.timeline .dataaxis .grid.horizontal{position:absolute;left:0;width:100%;height:0;border-bottom:1px solid}.vis.timeline .dataaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .dataaxis .grid.major{border-color:#bfbfbf}.vis.timeline .dataaxis .yAxis.major{font-size:12px;width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis.timeline .dataaxis .yAxis.minor{font-size:9px;position:absolute;width:100%;color:#4d4d4d;white-space:nowrap}.vis.timeline .timeaxis{position:absolute}.vis.timeline .timeaxis .text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis.timeline .timeaxis .text.measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis.timeline .timeaxis .grid.vertical{position:absolute;width:0;border-right:1px solid}.vis.timeline .timeaxis .grid.horizontal{position:absolute;left:0;width:100%;height:0;border-bottom:1px solid}.vis.timeline .timeaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .timeaxis .grid.major{border-color:#bfbfbf}.vis.timeline .currenttime{background-color:#FF7F6E;width:2px;z-index:9}.vis.timeline .customtime{background-color:#6E94FF;width:2px;cursor:move;z-index:9}div.graph-manipulationDiv{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);width:600px;height:30px;z-index:10;position:absolute}div.graph-manipulation-editMode{height:30px;z-index:10;position:absolute;margin-top:20px}div.graph-manipulation-closeDiv{height:30px;width:30px;z-index:11;position:absolute;margin-top:3px;margin-left:590px;background-position:0 0;background-repeat:no-repeat;background-image:url(img/graph/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}span.graph-manipulationUI{font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin:-14px 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}span.graph-manipulationUI:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}span.graph-manipulationUI:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}span.graph-manipulationUI.back{background-image:url(img/graph/backIcon.png)}span.graph-manipulationUI.none:hover{box-shadow:1px 1px 8px rgba(0,0,0,0);cursor:default}span.graph-manipulationUI.none:active{box-shadow:1px 1px 8px rgba(0,0,0,0)}span.graph-manipulationUI.none{padding:0}span.graph-manipulationUI.notification{margin:2px;font-weight:700}span.graph-manipulationUI.add{background-image:url(img/graph/addNodeIcon.png)}span.graph-manipulationUI.edit{background-image:url(img/graph/editIcon.png)}span.graph-manipulationUI.edit.editmode{background-color:#fcfcfc;border-style:solid;border-width:1px;border-color:#ccc}span.graph-manipulationUI.connect{background-image:url(img/graph/connectIcon.png)}span.graph-manipulationUI.delete{background-image:url(img/graph/deleteIcon.png)}span.graph-manipulationLabel{margin:0 0 0 23px;line-height:25px}div.graph-seperatorLine{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.graph-navigation{width:34px;height:34px;z-index:10;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.graph-navigation:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.graph-navigation.active,div.graph-navigation:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.graph-navigation.up{background-image:url(img/graph/upArrow.png);bottom:50px;left:55px}div.graph-navigation.down{background-image:url(img/graph/downArrow.png);bottom:10px;left:55px}div.graph-navigation.left{background-image:url(img/graph/leftArrow.png);bottom:10px;left:15px}div.graph-navigation.right{background-image:url(img/graph/rightArrow.png);bottom:10px;left:95px}div.graph-navigation.zoomIn{background-image:url(img/graph/plus.png);bottom:10px;right:15px}div.graph-navigation.zoomOut{background-image:url(img/graph/minus.png);bottom:10px;right:55px}div.graph-navigation.zoomExtends{background-image:url(img/graph/zoomExtends.png);bottom:50px;right:15px}
\ No newline at end of file
+.vis.timeline.rootpanel{position:relative;overflow:hidden;border:1px solid #bfbfbf;box-sizing:border-box}.vis.timeline .vpanel{position:absolute;overflow:visible;box-sizing:border-box}.vis.timeline .vpanel.side{border-right:1px solid #bfbfbf}.vis.timeline .vpanel.side.hidden{display:none}.vis.timeline .vpanel.main{position:absolute;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset{position:relative;width:100%;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset .vlabel{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box}.vis.timeline.top .labelset .vlabel{border-top:1px solid #bfbfbf;border-bottom:none}.vis.timeline.bottom .labelset .vlabel{border-top:none;border-bottom:1px solid #bfbfbf}.vis.timeline .labelset .vlabel .inner{display:inline-block;padding:5px}.vis.timeline .itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis.timeline .foreground{padding:0;margin:0}.vis.timeline .axis{overflow:visible}.vis.timeline .group{position:relative;box-sizing:border-box}.vis.timeline.top .group{border-top:1px solid #bfbfbf;border-bottom:none}.vis.timeline.bottom .group{border-top:none;border-bottom:1px solid #bfbfbf}.vis.timeline .item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;padding:5px}.vis.timeline .item.selected{border-color:#FFC200;background-color:#FFF785;z-index:999}.vis.timeline.editable .item.selected{cursor:move}.vis.timeline .item.point.selected{background-color:#FFF785}.vis.timeline .item.box{text-align:center;border-style:solid;border-radius:2px}.vis.timeline .item.point{background:0 0}.vis.timeline .item.dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis.timeline .item.range,.vis.timeline .item.rangeoverflow{border-style:solid;border-radius:2px;box-sizing:border-box}.vis.timeline .item.range .content,.vis.timeline .item.rangeoverflow .content{position:relative;display:inline-block}.vis.timeline .item.range .content{overflow:hidden;max-width:100%}.vis.timeline .item.line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis.timeline .item .content{white-space:nowrap;overflow:hidden}.vis.timeline .item .delete{background:url(img/timeline/delete.png) no-repeat top center;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis.timeline .item.range .drag-left,.vis.timeline .item.rangeoverflow .drag-left{position:absolute;width:24px;height:100%;top:0;left:-4px;cursor:w-resize;z-index:10000}.vis.timeline .item.range .drag-right,.vis.timeline .item.rangeoverflow .drag-right{position:absolute;width:24px;height:100%;top:0;right:-4px;cursor:e-resize;z-index:10001}.vis.timeline .dataaxis .grid.horizontal{position:absolute;left:0;width:100%;height:0;border-bottom:1px solid}.vis.timeline .dataaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .dataaxis .grid.major{border-color:#bfbfbf}.vis.timeline .dataaxis .yAxis.major{font-size:12px;width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis.timeline .dataaxis .yAxis.minor{font-size:9px;position:absolute;width:100%;color:#4d4d4d;white-space:nowrap}.vis.timeline .timeaxis{position:absolute}.vis.timeline .timeaxis .text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis.timeline .timeaxis .text.measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis.timeline .timeaxis .grid.vertical{position:absolute;width:0;border-right:1px solid}.vis.timeline .timeaxis .grid.horizontal{position:absolute;left:0;width:100%;height:0;border-bottom:1px solid}.vis.timeline .timeaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .timeaxis .grid.major{border-color:#bfbfbf}.vis.timeline .currenttime{background-color:#FF7F6E;width:2px;z-index:9}.vis.timeline .customtime{background-color:#6E94FF;width:2px;cursor:move;z-index:9}div.graph-manipulationDiv{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);width:600px;height:30px;z-index:10;position:absolute}div.graph-manipulation-editMode{height:30px;z-index:10;position:absolute;margin-top:20px}div.graph-manipulation-closeDiv{height:30px;width:30px;z-index:11;position:absolute;margin-top:3px;margin-left:590px;background-position:0 0;background-repeat:no-repeat;background-image:url(img/graph/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}span.graph-manipulationUI{font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin:-14px 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}span.graph-manipulationUI:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}span.graph-manipulationUI:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}span.graph-manipulationUI.back{background-image:url(img/graph/backIcon.png)}span.graph-manipulationUI.none:hover{box-shadow:1px 1px 8px rgba(0,0,0,0);cursor:default}span.graph-manipulationUI.none:active{box-shadow:1px 1px 8px rgba(0,0,0,0)}span.graph-manipulationUI.none{padding:0}span.graph-manipulationUI.notification{margin:2px;font-weight:700}span.graph-manipulationUI.add{background-image:url(img/graph/addNodeIcon.png)}span.graph-manipulationUI.edit{background-image:url(img/graph/editIcon.png)}span.graph-manipulationUI.edit.editmode{background-color:#fcfcfc;border-style:solid;border-width:1px;border-color:#ccc}span.graph-manipulationUI.connect{background-image:url(img/graph/connectIcon.png)}span.graph-manipulationUI.delete{background-image:url(img/graph/deleteIcon.png)}span.graph-manipulationLabel{margin:0 0 0 23px;line-height:25px}div.graph-seperatorLine{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.graph-navigation{width:34px;height:34px;z-index:10;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.graph-navigation:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.graph-navigation.active,div.graph-navigation:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.graph-navigation.up{background-image:url(img/graph/upArrow.png);bottom:50px;left:55px}div.graph-navigation.down{background-image:url(img/graph/downArrow.png);bottom:10px;left:55px}div.graph-navigation.left{background-image:url(img/graph/leftArrow.png);bottom:10px;left:15px}div.graph-navigation.right{background-image:url(img/graph/rightArrow.png);bottom:10px;left:95px}div.graph-navigation.zoomIn{background-image:url(img/graph/plus.png);bottom:10px;right:15px}div.graph-navigation.zoomOut{background-image:url(img/graph/minus.png);bottom:10px;right:55px}div.graph-navigation.zoomExtends{background-image:url(img/graph/zoomExtends.png);bottom:50px;right:15px}
\ No newline at end of file
diff --git a/dist/vis.min.js b/dist/vis.min.js
index 80ca989e..396c690f 100644
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
@@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 1.0.2-SNAPSHOT
- * @date 2014-05-28
+ * @date 2014-06-02
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@@ -22,12 +22,14 @@
* License for the specific language governing permissions and limitations under
* the License.
*/
-!function(t){if("object"==typeof exports)module.exports=t();else if("function"==typeof define&&define.amd)define(t);else{var e;"undefined"!=typeof window?e=window:"undefined"!=typeof global?e=global:"undefined"!=typeof self&&(e=self),e.vis=t()}}(function(){var define,module,exports;return function t(e,i,s){function n(a,r){if(!i[a]){if(!e[a]){var h="function"==typeof require&&require;if(!r&&h)return h(a,!0);if(o)return o(a,!0);throw new Error("Cannot find module '"+a+"'")}var d=i[a]={exports:{}};e[a][0].call(d.exports,function(t){var i=e[a][1][t];return n(i?i:t)},d,d.exports,t,e,i,s)}return i[a].exports}for(var o="function"==typeof require&&require,a=0;a