' +
- '| x: | ' + dataPoint.point.x + ' |
' +
- '| y: | ' + dataPoint.point.y + ' |
' +
- '| z: | ' + dataPoint.point.z + ' |
' +
- '
';
+ if (Math.abs(Math.cos(verticalNew)) < snapValue) {
+ verticalNew = (Math.round((verticalNew/ Math.PI - 0.5)) + 0.5) * Math.PI;
}
- 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;
+ this.camera.setArmRotation(horizontalNew, verticalNew);
+ this.redraw();
- var left = dataPoint.screen.x - contentWidth / 2;
- left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
+ // fire a cameraPositionChange event
+ var parameters = this.getCameraPosition();
+ this.emit('cameraPositionChange', parameters);
- 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';
+ util.preventDefault(event);
};
+
/**
- * Hide the tooltip when displayed
- * @private
+ * Stop moving operating.
+ * This function activated from within the funcion Graph.mouseDown().
+ * @param {event} event The event
*/
- Graph3d.prototype._hideTooltip = function () {
- if (this.tooltip) {
- this.tooltip.dataPoint = null;
+ Graph3d.prototype._onMouseUp = function (event) {
+ this.frame.style.cursor = 'auto';
+ this.leftButtonDown = false;
- 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);
- }
- }
- }
- }
+ // remove event listeners here
+ util.removeEventListener(document, 'mousemove', this.onmousemove);
+ util.removeEventListener(document, 'mouseup', this.onmouseup);
+ util.preventDefault(event);
};
- /**--------------------------------------------------------------------------**/
-
-
/**
- * Get the horizontal mouse position from a mouse event
- * @param {Event} event
- * @return {Number} mouse x
+ * 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
*/
- getMouseX = function(event) {
- if ('clientX' in event) return event.clientX;
- return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
- };
+ Graph3d.prototype._onTooltip = function (event) {
+ var delay = 300; // ms
+ var mouseX = getMouseX(event) - util.getAbsoluteLeft(this.frame);
+ var mouseY = getMouseY(event) - util.getAbsoluteTop(this.frame);
- /**
- * 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;
- };
+ if (!this.showTooltip) {
+ return;
+ }
- module.exports = Graph3d;
+ if (this.tooltipTimeout) {
+ clearTimeout(this.tooltipTimeout);
+ }
+ // (delayed) display of a tooltip only if no mouse button is down
+ if (this.leftButtonDown) {
+ this._hideTooltip();
+ return;
+ }
-/***/ },
-/* 10 */
-/***/ function(module, exports, __webpack_require__) {
+ 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);
+ }
+ };
-
/**
- * Expose `Emitter`.
+ * Event handler for touchstart event on mobile devices
*/
+ Graph3d.prototype._onTouchStart = function(event) {
+ this.touchDown = true;
- module.exports = Emitter;
+ var me = this;
+ this.ontouchmove = function (event) {me._onTouchMove(event);};
+ this.ontouchend = function (event) {me._onTouchEnd(event);};
+ util.addEventListener(document, 'touchmove', me.ontouchmove);
+ util.addEventListener(document, 'touchend', me.ontouchend);
+
+ this._onMouseDown(event);
+ };
/**
- * Initialize a new `Emitter`.
- *
- * @api public
+ * Event handler for touchmove event on mobile devices
*/
-
- function Emitter(obj) {
- if (obj) return mixin(obj);
+ Graph3d.prototype._onTouchMove = function(event) {
+ this._onMouseMove(event);
};
/**
- * Mixin the emitter properties.
- *
- * @param {Object} obj
- * @return {Object}
- * @api private
+ * Event handler for touchend event on mobile devices
*/
+ Graph3d.prototype._onTouchEnd = function(event) {
+ this.touchDown = false;
- 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
- */
+ util.removeEventListener(document, 'touchmove', this.ontouchmove);
+ util.removeEventListener(document, 'touchend', this.ontouchend);
- Emitter.prototype.on =
- Emitter.prototype.addEventListener = function(event, fn){
- this._callbacks = this._callbacks || {};
- (this._callbacks[event] = this._callbacks[event] || [])
- .push(fn);
- return this;
+ this._onMouseUp(event);
};
+
/**
- * Adds an `event` listener that will be invoked a single
- * time then automatically removed.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
+ * 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;
- Emitter.prototype.once = function(event, fn){
- var self = this;
- this._callbacks = this._callbacks || {};
+ // 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;
+ }
- function on() {
- self.off(event, on);
- fn.apply(this, arguments);
+ // 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();
}
- on.fn = fn;
- this.on(event, on);
- return this;
+ // 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..
+ util.preventDefault(event);
};
/**
- * Remove the given callback for `event` or all
- * registered callbacks.
- *
- * @param {String} event
- * @param {Function} fn
- * @return {Emitter}
- * @api public
+ * 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];
- 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;
+ function sign (x) {
+ return x > 0 ? 1 : x < 0 ? -1 : 0;
}
- // specific event
- var callbacks = this._callbacks[event];
- if (!callbacks) return this;
-
- // remove all handlers
- if (1 == arguments.length) {
- delete this._callbacks[event];
- return this;
- }
+ 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));
- // 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;
+ // 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);
};
/**
- * Emit `event` with the given args.
- *
- * @param {String} event
- * @param {Mixed} ...
- * @return {Emitter}
+ * 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);
- Emitter.prototype.emit = function(event){
- this._callbacks = this._callbacks || {};
- var args = [].slice.call(arguments, 1)
- , callbacks = this._callbacks[event];
+ 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 (callbacks) {
- callbacks = callbacks.slice(0);
- for (var i = 0, len = callbacks.length; i < len; ++i) {
- callbacks[i].apply(this, args);
+ if ((closestDist === null || dist < closestDist) && dist < distMax) {
+ closestDist = dist;
+ closestDataPoint = dataPoint;
+ }
+ }
}
}
- return this;
+
+ return closestDataPoint;
};
/**
- * Return array of callbacks for `event`.
- *
- * @param {String} event
- * @return {Array}
- * @api public
+ * Display a tooltip for given data point
+ * @param {Object} dataPoint
+ * @private
*/
+ Graph3d.prototype._showTooltip = function (dataPoint) {
+ var content, line, dot;
- Emitter.prototype.listeners = function(event){
- this._callbacks = this._callbacks || {};
- return this._callbacks[event] || [];
- };
+ 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)';
- /**
- * Check if this emitter has `event` handlers.
- *
- * @param {String} event
- * @return {Boolean}
- * @api public
- */
+ line = document.createElement('div');
+ line.style.position = 'absolute';
+ line.style.height = '40px';
+ line.style.width = '0';
+ line.style.borderLeft = '1px solid #4d4d4d';
- Emitter.prototype.hasListeners = function(event){
- return !! this.listeners(event).length;
- };
+ 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();
-/***/ },
-/* 11 */
-/***/ function(module, exports, __webpack_require__) {
+ this.tooltip.dataPoint = dataPoint;
+ if (typeof this.showTooltip === 'function') {
+ content.innerHTML = this.showTooltip(dataPoint.point);
+ }
+ else {
+ content.innerHTML = '