Browse Source

Graph2d: Implemented events `click`, `doubleClick`, and `contextMenu`. Implemented method `getEventProperties(event)`.

v3_develop
jos 9 years ago
parent
commit
0fcae5c2c9
8 changed files with 367 additions and 223 deletions
  1. +4
    -0
      HISTORY.md
  2. +269
    -208
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +10
    -10
      dist/vis.min.js
  5. +18
    -0
      docs/graph2d.html
  6. +59
    -2
      lib/timeline/Graph2d.js
  7. +2
    -2
      lib/timeline/Timeline.js
  8. +4
    -0
      lib/timeline/component/DataAxis.js

+ 4
- 0
HISTORY.md View File

@ -36,6 +36,10 @@ http://visjs.org
- Fixed #676: misalignment of background items when using subgroups and the - Fixed #676: misalignment of background items when using subgroups and the
group label's height is larger than the contents. group label's height is larger than the contents.
### Graph2d
- Implemented events `click`, `doubleClick`, and `contextMenu`.
- Implemented method `getEventProperties(event)`.
### DataSet/DataView ### DataSet/DataView

+ 269
- 208
dist/vis.js View File

@ -6851,12 +6851,12 @@ return /******/ (function(modules) { // webpackBootstrap
var element = util.getTarget(event); var element = util.getTarget(event);
var what = null; var what = null;
if (item != null) {what = 'item';} if (item != null) {what = 'item';}
else if (util.hasParent(element, this.dom.center)) {what = 'background';}
else if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';} else if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';} else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
else if (util.hasParent(element, this.itemSet.dom.labelSet)) {what = 'group-label';} else if (util.hasParent(element, this.itemSet.dom.labelSet)) {what = 'group-label';}
else if (util.hasParent(element, this.customTime.bar)) {what = 'custom-time';}
else if (util.hasParent(element, this.customTime.bar)) {what = 'custom-time';} // TODO: fix for multiple custom time bars
else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';} else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
else if (util.hasParent(element, this.dom.center)) {what = 'background';}
return { return {
event: event, event: event,
@ -6971,6 +6971,16 @@ return /******/ (function(modules) { // webpackBootstrap
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
this.groupsData = null; // DataSet this.groupsData = null; // DataSet
this.on('tap', function (event) {
me.emit('click', me.getEventProperties(event))
});
this.on('doubletap', function (event) {
me.emit('doubleClick', me.getEventProperties(event))
});
this.dom.root.oncontextmenu = function (event) {
me.emit('contextmenu', me.getEventProperties(event))
};
// apply options // apply options
if (options) { if (options) {
this.setOptions(options); this.setOptions(options);
@ -7072,7 +7082,7 @@ return /******/ (function(modules) { // webpackBootstrap
else { else {
return "cannot find group:" + groupId; return "cannot find group:" + groupId;
} }
}
};
/** /**
* This checks if the visible option of the supplied group (by ID) is true or false. * This checks if the visible option of the supplied group (by ID) is true or false.
@ -7086,7 +7096,7 @@ return /******/ (function(modules) { // webpackBootstrap
else { else {
return false; return false;
} }
}
};
/** /**
@ -7120,6 +7130,53 @@ return /******/ (function(modules) { // webpackBootstrap
}; };
/**
* Generate Timeline related information from an event
* @param {Event} event
* @return {Object} An object with related information, like on which area
* The event happened, whether clicked on an item, etc.
*/
Graph2d.prototype.getEventProperties = function (event) {
var pageX = event.gesture ? event.gesture.center.pageX : event.pageX;
var pageY = event.gesture ? event.gesture.center.pageY : event.pageY;
var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
var time = this._toTime(x);
var element = util.getTarget(event);
var what = null;
if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
else if (util.hasParent(element, this.linegraph.yAxisLeft.dom.frame)) {what = 'data-axis';}
else if (util.hasParent(element, this.linegraph.yAxisRight.dom.frame)) {what = 'data-axis';}
else if (util.hasParent(element, this.linegraph.legendLeft.dom.frame)) {what = 'legend';}
else if (util.hasParent(element, this.linegraph.legendRight.dom.frame)) {what = 'legend';}
else if (util.hasParent(element, this.customTime.bar)) {what = 'custom-time';} // TODO: fix for multiple custom time bars
else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
else if (util.hasParent(element, this.dom.center)) {what = 'background';}
var value = [];
var yAxisLeft = this.linegraph.yAxisLeft;
var yAxisRight = this.linegraph.yAxisRight;
if (!yAxisLeft.hidden) {
value.push(yAxisLeft.screenToValue(y));
}
if (!yAxisRight.hidden) {
value.push(yAxisRight.screenToValue(y));
}
return {
event: event,
what: what,
pageX: pageX,
pageY: pageY,
x: x,
y: y,
time: time,
value: value
}
};
module.exports = Graph2d; module.exports = Graph2d;
@ -11432,6 +11489,10 @@ return /******/ (function(modules) { // webpackBootstrap
return convertedValue; return convertedValue;
}; };
DataAxis.prototype.screenToValue = function (x) {
return this.valueAtZero - (x / this.conversionFactor);
};
/** /**
* Create a label for the axis at position x * Create a label for the axis at position x
* @private * @private
@ -15766,7 +15827,7 @@ return /******/ (function(modules) { // webpackBootstrap
var Emitter = __webpack_require__(56); var Emitter = __webpack_require__(56);
var Hammer = __webpack_require__(45); var Hammer = __webpack_require__(45);
var keycharm = __webpack_require__(59);
var keycharm = __webpack_require__(57);
var util = __webpack_require__(1); var util = __webpack_require__(1);
var hammerUtil = __webpack_require__(47); var hammerUtil = __webpack_require__(47);
var DataSet = __webpack_require__(3); var DataSet = __webpack_require__(3);
@ -22638,7 +22699,7 @@ return /******/ (function(modules) { // webpackBootstrap
// first check if moment.js is already loaded in the browser window, if so, // first check if moment.js is already loaded in the browser window, if so,
// use this instance. Else, load via commonjs. // use this instance. Else, load via commonjs.
module.exports = (typeof window !== 'undefined') && window['moment'] || __webpack_require__(57);
module.exports = (typeof window !== 'undefined') && window['moment'] || __webpack_require__(58);
/***/ }, /***/ },
@ -22648,7 +22709,7 @@ return /******/ (function(modules) { // webpackBootstrap
// Only load hammer.js when in a browser environment // Only load hammer.js when in a browser environment
// (loading hammer.js in a node.js environment gives errors) // (loading hammer.js in a node.js environment gives errors)
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
module.exports = window['Hammer'] || __webpack_require__(58);
module.exports = window['Hammer'] || __webpack_require__(59);
} }
else { else {
module.exports = function () { module.exports = function () {
@ -24432,7 +24493,7 @@ return /******/ (function(modules) { // webpackBootstrap
/* 53 */ /* 53 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
var keycharm = __webpack_require__(59);
var keycharm = __webpack_require__(57);
var Emitter = __webpack_require__(56); var Emitter = __webpack_require__(56);
var Hammer = __webpack_require__(45); var Hammer = __webpack_require__(45);
var util = __webpack_require__(1); var util = __webpack_require__(1);
@ -25029,6 +25090,205 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ }, /***/ },
/* 57 */ /* 57 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict";
/**
* Created by Alex on 11/6/2014.
*/
// https://github.com/umdjs/umd/blob/master/returnExports.js#L40-L60
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (true) {
// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.keycharm = factory();
}
}(this, function () {
function keycharm(options) {
var preventDefault = options && options.preventDefault || false;
var container = options && options.container || window;
var _exportFunctions = {};
var _bound = {keydown:{}, keyup:{}};
var _keys = {};
var i;
// a - z
for (i = 97; i <= 122; i++) {_keys[String.fromCharCode(i)] = {code:65 + (i - 97), shift: false};}
// A - Z
for (i = 65; i <= 90; i++) {_keys[String.fromCharCode(i)] = {code:i, shift: true};}
// 0 - 9
for (i = 0; i <= 9; i++) {_keys['' + i] = {code:48 + i, shift: false};}
// F1 - F12
for (i = 1; i <= 12; i++) {_keys['F' + i] = {code:111 + i, shift: false};}
// num0 - num9
for (i = 0; i <= 9; i++) {_keys['num' + i] = {code:96 + i, shift: false};}
// numpad misc
_keys['num*'] = {code:106, shift: false};
_keys['num+'] = {code:107, shift: false};
_keys['num-'] = {code:109, shift: false};
_keys['num/'] = {code:111, shift: false};
_keys['num.'] = {code:110, shift: false};
// arrows
_keys['left'] = {code:37, shift: false};
_keys['up'] = {code:38, shift: false};
_keys['right'] = {code:39, shift: false};
_keys['down'] = {code:40, shift: false};
// extra keys
_keys['space'] = {code:32, shift: false};
_keys['enter'] = {code:13, shift: false};
_keys['shift'] = {code:16, shift: undefined};
_keys['esc'] = {code:27, shift: false};
_keys['backspace'] = {code:8, shift: false};
_keys['tab'] = {code:9, shift: false};
_keys['ctrl'] = {code:17, shift: false};
_keys['alt'] = {code:18, shift: false};
_keys['delete'] = {code:46, shift: false};
_keys['pageup'] = {code:33, shift: false};
_keys['pagedown'] = {code:34, shift: false};
// symbols
_keys['='] = {code:187, shift: false};
_keys['-'] = {code:189, shift: false};
_keys[']'] = {code:221, shift: false};
_keys['['] = {code:219, shift: false};
var down = function(event) {handleEvent(event,'keydown');};
var up = function(event) {handleEvent(event,'keyup');};
// handle the actualy bound key with the event
var handleEvent = function(event,type) {
if (_bound[type][event.keyCode] !== undefined) {
var bound = _bound[type][event.keyCode];
for (var i = 0; i < bound.length; i++) {
if (bound[i].shift === undefined) {
bound[i].fn(event);
}
else if (bound[i].shift == true && event.shiftKey == true) {
bound[i].fn(event);
}
else if (bound[i].shift == false && event.shiftKey == false) {
bound[i].fn(event);
}
}
if (preventDefault == true) {
event.preventDefault();
}
}
};
// bind a key to a callback
_exportFunctions.bind = function(key, callback, type) {
if (type === undefined) {
type = 'keydown';
}
if (_keys[key] === undefined) {
throw new Error("unsupported key: " + key);
}
if (_bound[type][_keys[key].code] === undefined) {
_bound[type][_keys[key].code] = [];
}
_bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift});
};
// bind all keys to a call back (demo purposes)
_exportFunctions.bindAll = function(callback, type) {
if (type === undefined) {
type = 'keydown';
}
for (var key in _keys) {
if (_keys.hasOwnProperty(key)) {
_exportFunctions.bind(key,callback,type);
}
}
};
// get the key label from an event
_exportFunctions.getKey = function(event) {
for (var key in _keys) {
if (_keys.hasOwnProperty(key)) {
if (event.shiftKey == true && _keys[key].shift == true && event.keyCode == _keys[key].code) {
return key;
}
else if (event.shiftKey == false && _keys[key].shift == false && event.keyCode == _keys[key].code) {
return key;
}
else if (event.keyCode == _keys[key].code && key == 'shift') {
return key;
}
}
}
return "unknown key, currently not supported";
};
// unbind either a specific callback from a key or all of them (by leaving callback undefined)
_exportFunctions.unbind = function(key, callback, type) {
if (type === undefined) {
type = 'keydown';
}
if (_keys[key] === undefined) {
throw new Error("unsupported key: " + key);
}
if (callback !== undefined) {
var newBindings = [];
var bound = _bound[type][_keys[key].code];
if (bound !== undefined) {
for (var i = 0; i < bound.length; i++) {
if (!(bound[i].fn == callback && bound[i].shift == _keys[key].shift)) {
newBindings.push(_bound[type][_keys[key].code][i]);
}
}
}
_bound[type][_keys[key].code] = newBindings;
}
else {
_bound[type][_keys[key].code] = [];
}
};
// reset all bound variables.
_exportFunctions.reset = function() {
_bound = {keydown:{}, keyup:{}};
};
// unbind all listeners and reset all variables.
_exportFunctions.destroy = function() {
_bound = {keydown:{}, keyup:{}};
container.removeEventListener('keydown', down, true);
container.removeEventListener('keyup', up, true);
};
// create listeners.
container.addEventListener('keydown',down,true);
container.addEventListener('keyup',up,true);
// return the public functions.
return _exportFunctions;
}
return keycharm;
}));
/***/ },
/* 58 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js var __WEBPACK_AMD_DEFINE_RESULT__;/* WEBPACK VAR INJECTION */(function(global, module) {//! moment.js
@ -28078,7 +28338,7 @@ return /******/ (function(modules) { // webpackBootstrap
/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(71)(module))) /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(71)(module)))
/***/ }, /***/ },
/* 58 */
/* 59 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_RESULT__;/*! Hammer.JS - v1.1.3 - 2014-05-20 var __WEBPACK_AMD_DEFINE_RESULT__;/*! Hammer.JS - v1.1.3 - 2014-05-20
@ -30244,205 +30504,6 @@ return /******/ (function(modules) { // webpackBootstrap
})(window); })(window);
/***/ },
/* 59 */
/***/ function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;"use strict";
/**
* Created by Alex on 11/6/2014.
*/
// https://github.com/umdjs/umd/blob/master/returnExports.js#L40-L60
// if the module has no dependencies, the above pattern can be simplified to
(function (root, factory) {
if (true) {
// AMD. Register as an anonymous module.
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else if (typeof exports === 'object') {
// Node. Does not work with strict CommonJS, but
// only CommonJS-like environments that support module.exports,
// like Node.
module.exports = factory();
} else {
// Browser globals (root is window)
root.keycharm = factory();
}
}(this, function () {
function keycharm(options) {
var preventDefault = options && options.preventDefault || false;
var container = options && options.container || window;
var _exportFunctions = {};
var _bound = {keydown:{}, keyup:{}};
var _keys = {};
var i;
// a - z
for (i = 97; i <= 122; i++) {_keys[String.fromCharCode(i)] = {code:65 + (i - 97), shift: false};}
// A - Z
for (i = 65; i <= 90; i++) {_keys[String.fromCharCode(i)] = {code:i, shift: true};}
// 0 - 9
for (i = 0; i <= 9; i++) {_keys['' + i] = {code:48 + i, shift: false};}
// F1 - F12
for (i = 1; i <= 12; i++) {_keys['F' + i] = {code:111 + i, shift: false};}
// num0 - num9
for (i = 0; i <= 9; i++) {_keys['num' + i] = {code:96 + i, shift: false};}
// numpad misc
_keys['num*'] = {code:106, shift: false};
_keys['num+'] = {code:107, shift: false};
_keys['num-'] = {code:109, shift: false};
_keys['num/'] = {code:111, shift: false};
_keys['num.'] = {code:110, shift: false};
// arrows
_keys['left'] = {code:37, shift: false};
_keys['up'] = {code:38, shift: false};
_keys['right'] = {code:39, shift: false};
_keys['down'] = {code:40, shift: false};
// extra keys
_keys['space'] = {code:32, shift: false};
_keys['enter'] = {code:13, shift: false};
_keys['shift'] = {code:16, shift: undefined};
_keys['esc'] = {code:27, shift: false};
_keys['backspace'] = {code:8, shift: false};
_keys['tab'] = {code:9, shift: false};
_keys['ctrl'] = {code:17, shift: false};
_keys['alt'] = {code:18, shift: false};
_keys['delete'] = {code:46, shift: false};
_keys['pageup'] = {code:33, shift: false};
_keys['pagedown'] = {code:34, shift: false};
// symbols
_keys['='] = {code:187, shift: false};
_keys['-'] = {code:189, shift: false};
_keys[']'] = {code:221, shift: false};
_keys['['] = {code:219, shift: false};
var down = function(event) {handleEvent(event,'keydown');};
var up = function(event) {handleEvent(event,'keyup');};
// handle the actualy bound key with the event
var handleEvent = function(event,type) {
if (_bound[type][event.keyCode] !== undefined) {
var bound = _bound[type][event.keyCode];
for (var i = 0; i < bound.length; i++) {
if (bound[i].shift === undefined) {
bound[i].fn(event);
}
else if (bound[i].shift == true && event.shiftKey == true) {
bound[i].fn(event);
}
else if (bound[i].shift == false && event.shiftKey == false) {
bound[i].fn(event);
}
}
if (preventDefault == true) {
event.preventDefault();
}
}
};
// bind a key to a callback
_exportFunctions.bind = function(key, callback, type) {
if (type === undefined) {
type = 'keydown';
}
if (_keys[key] === undefined) {
throw new Error("unsupported key: " + key);
}
if (_bound[type][_keys[key].code] === undefined) {
_bound[type][_keys[key].code] = [];
}
_bound[type][_keys[key].code].push({fn:callback, shift:_keys[key].shift});
};
// bind all keys to a call back (demo purposes)
_exportFunctions.bindAll = function(callback, type) {
if (type === undefined) {
type = 'keydown';
}
for (var key in _keys) {
if (_keys.hasOwnProperty(key)) {
_exportFunctions.bind(key,callback,type);
}
}
};
// get the key label from an event
_exportFunctions.getKey = function(event) {
for (var key in _keys) {
if (_keys.hasOwnProperty(key)) {
if (event.shiftKey == true && _keys[key].shift == true && event.keyCode == _keys[key].code) {
return key;
}
else if (event.shiftKey == false && _keys[key].shift == false && event.keyCode == _keys[key].code) {
return key;
}
else if (event.keyCode == _keys[key].code && key == 'shift') {
return key;
}
}
}
return "unknown key, currently not supported";
};
// unbind either a specific callback from a key or all of them (by leaving callback undefined)
_exportFunctions.unbind = function(key, callback, type) {
if (type === undefined) {
type = 'keydown';
}
if (_keys[key] === undefined) {
throw new Error("unsupported key: " + key);
}
if (callback !== undefined) {
var newBindings = [];
var bound = _bound[type][_keys[key].code];
if (bound !== undefined) {
for (var i = 0; i < bound.length; i++) {
if (!(bound[i].fn == callback && bound[i].shift == _keys[key].shift)) {
newBindings.push(_bound[type][_keys[key].code][i]);
}
}
}
_bound[type][_keys[key].code] = newBindings;
}
else {
_bound[type][_keys[key].code] = [];
}
};
// reset all bound variables.
_exportFunctions.reset = function() {
_bound = {keydown:{}, keyup:{}};
};
// unbind all listeners and reset all variables.
_exportFunctions.destroy = function() {
_bound = {keydown:{}, keyup:{}};
container.removeEventListener('keydown', down, true);
container.removeEventListener('keyup', up, true);
};
// create listeners.
container.addEventListener('keydown',down,true);
container.addEventListener('keyup',up,true);
// return the public functions.
return _exportFunctions;
}
return keycharm;
}));
/***/ }, /***/ },
/* 60 */ /* 60 */
/***/ function(module, exports, __webpack_require__) { /***/ function(module, exports, __webpack_require__) {

+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 10
- 10
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 18
- 0
docs/graph2d.html View File

@ -834,6 +834,24 @@ Graph2d.clear({options: true}); // clear options only
</td> </td>
</tr> </tr>
<tr id="getEventProperties">
<td>getEventProperties(event)</td>
<td>Object</td>
<td>
Returns an Object with relevant properties from an event:
<ul>
<li><code>pageX</code> (Number): absolute horizontal position of the click event.</li>
<li><code>pageY</code> (Number): absolute vertical position of the click event.</li>
<li><code>x</code> (Number): relative horizontal position of the click event.</li>
<li><code>y</code> (Number): relative vertical position of the click event.</li>
<li><code>time</code> (Date): Date of the clicked event.</li>
<li><code>value</code> (Number[]): The data value of the click event. The array contains one value when there is one data axis visible, and two values when there are two visible data axes.</li>
<li><code>what</code> (String | null): name of the clicked thing: <code>background</code>, <code>axis</code>, <code>dat-axis</code>, <code>custom-time</code>, or <code>current-time</code>, <code>legend</code>.</li>
<li><code>event</code> (Object): the original click event.</li>
</ul>
</td>
</tr>
<tr> <tr>
<td>getLegend(groupId, iconWidth, iconHeight)</td> <td>getLegend(groupId, iconWidth, iconHeight)</td>
<td>SVGelement, String, String</td> <td>SVGelement, String, String</td>

+ 59
- 2
lib/timeline/Graph2d.js View File

@ -90,6 +90,16 @@ function Graph2d (container, items, groups, options) {
this.itemsData = null; // DataSet this.itemsData = null; // DataSet
this.groupsData = null; // DataSet this.groupsData = null; // DataSet
this.on('tap', function (event) {
me.emit('click', me.getEventProperties(event))
});
this.on('doubletap', function (event) {
me.emit('doubleClick', me.getEventProperties(event))
});
this.dom.root.oncontextmenu = function (event) {
me.emit('contextmenu', me.getEventProperties(event))
};
// apply options // apply options
if (options) { if (options) {
this.setOptions(options); this.setOptions(options);
@ -191,7 +201,7 @@ Graph2d.prototype.getLegend = function(groupId, width, height) {
else { else {
return "cannot find group:" + groupId; return "cannot find group:" + groupId;
} }
}
};
/** /**
* This checks if the visible option of the supplied group (by ID) is true or false. * This checks if the visible option of the supplied group (by ID) is true or false.
@ -205,7 +215,7 @@ Graph2d.prototype.isGroupVisible = function(groupId) {
else { else {
return false; return false;
} }
}
};
/** /**
@ -239,5 +249,52 @@ Graph2d.prototype.getItemRange = function() {
}; };
/**
* Generate Timeline related information from an event
* @param {Event} event
* @return {Object} An object with related information, like on which area
* The event happened, whether clicked on an item, etc.
*/
Graph2d.prototype.getEventProperties = function (event) {
var pageX = event.gesture ? event.gesture.center.pageX : event.pageX;
var pageY = event.gesture ? event.gesture.center.pageY : event.pageY;
var x = pageX - util.getAbsoluteLeft(this.dom.centerContainer);
var y = pageY - util.getAbsoluteTop(this.dom.centerContainer);
var time = this._toTime(x);
var element = util.getTarget(event);
var what = null;
if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
else if (util.hasParent(element, this.linegraph.yAxisLeft.dom.frame)) {what = 'data-axis';}
else if (util.hasParent(element, this.linegraph.yAxisRight.dom.frame)) {what = 'data-axis';}
else if (util.hasParent(element, this.linegraph.legendLeft.dom.frame)) {what = 'legend';}
else if (util.hasParent(element, this.linegraph.legendRight.dom.frame)) {what = 'legend';}
else if (util.hasParent(element, this.customTime.bar)) {what = 'custom-time';} // TODO: fix for multiple custom time bars
else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
else if (util.hasParent(element, this.dom.center)) {what = 'background';}
var value = [];
var yAxisLeft = this.linegraph.yAxisLeft;
var yAxisRight = this.linegraph.yAxisRight;
if (!yAxisLeft.hidden) {
value.push(yAxisLeft.screenToValue(y));
}
if (!yAxisRight.hidden) {
value.push(yAxisRight.screenToValue(y));
}
return {
event: event,
what: what,
pageX: pageX,
pageY: pageY,
x: x,
y: y,
time: time,
value: value
}
};
module.exports = Graph2d; module.exports = Graph2d;

+ 2
- 2
lib/timeline/Timeline.js View File

@ -359,12 +359,12 @@ Timeline.prototype.getEventProperties = function (event) {
var element = util.getTarget(event); var element = util.getTarget(event);
var what = null; var what = null;
if (item != null) {what = 'item';} if (item != null) {what = 'item';}
else if (util.hasParent(element, this.dom.center)) {what = 'background';}
else if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';} else if (util.hasParent(element, this.timeAxis.dom.foreground)) {what = 'axis';}
else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';} else if (this.timeAxis2 && util.hasParent(element, this.timeAxis2.dom.foreground)) {what = 'axis';}
else if (util.hasParent(element, this.itemSet.dom.labelSet)) {what = 'group-label';} else if (util.hasParent(element, this.itemSet.dom.labelSet)) {what = 'group-label';}
else if (util.hasParent(element, this.customTime.bar)) {what = 'custom-time';}
else if (util.hasParent(element, this.customTime.bar)) {what = 'custom-time';} // TODO: fix for multiple custom time bars
else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';} else if (util.hasParent(element, this.currentTime.bar)) {what = 'current-time';}
else if (util.hasParent(element, this.dom.center)) {what = 'background';}
return { return {
event: event, event: event,

+ 4
- 0
lib/timeline/component/DataAxis.js View File

@ -484,6 +484,10 @@ DataAxis.prototype.convertValue = function (value) {
return convertedValue; return convertedValue;
}; };
DataAxis.prototype.screenToValue = function (x) {
return this.valueAtZero - (x / this.conversionFactor);
};
/** /**
* Create a label for the axis at position x * Create a label for the axis at position x
* @private * @private

Loading…
Cancel
Save