Browse Source

fix: #226 #2421 #2429 Fixed mouse events on timeline (#2473)

* Fix redraw order
* Add mouseup, mousedown, mouseover, click and dblclick events on timeline
* Add docs
* Add to evenlistener example
* Add mousemove event listener
* Fix example
* Remove mouseUp and mouseDown events and fix docs for mouseOver
* Remove mouseUp and mouseDown from example
fix2580
yotamberk 7 years ago
committed by Alexander Wunschik
parent
commit
2ec733ba25
3 changed files with 42 additions and 5 deletions
  1. +9
    -0
      docs/timeline/index.html
  2. +23
    -1
      examples/timeline/interaction/eventListeners.html
  3. +10
    -4
      lib/timeline/Timeline.js

+ 9
- 0
docs/timeline/index.html View File

@ -1505,6 +1505,15 @@ timeline.off('select', onSelect);
</td>
</tr>
<tr>
<td>mouseOver</td>
<td>
Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
</td>
<td>Fired when the mouse hovers over a timeline element.
</td>
</tr>
<tr>
<td>groupDragged</td>
<td>

+ 23
- 1
examples/timeline/interaction/eventListeners.html View File

@ -15,7 +15,7 @@
</head>
<body>
<p>
This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
</p>
<div id="visualization"></div>
<p></p>
@ -57,6 +57,28 @@
setHoveredItem('none');
});
timeline.on('click', function (properties) {
logEvent('click', properties);
});
timeline.on('doubleClick', function (properties) {
logEvent('doubleClick', properties);
});
timeline.on('contextmenu', function (properties) {
logEvent('contextmenu', properties);
});
// other possible events:
// timeline.on('mouseOver', function (properties) {
// logEvent('mouseOver', properties);
// });
// timeline.on("mouseMove", function(properties) {
// logEvent('mouseMove', properties);
// });
items.on('*', function (event, properties) {
logEvent(event, properties);
});

+ 10
- 4
lib/timeline/Timeline.js View File

@ -127,15 +127,21 @@ function Timeline (container, items, groups, options) {
this.itemsData = null; // DataSet
this.groupsData = null; // DataSet
this.on('tap', function (event) {
this.dom.root.onclick = function (event) {
me.emit('click', me.getEventProperties(event))
});
this.on('doubletap', function (event) {
};
this.dom.root.ondblclick = function (event) {
me.emit('doubleClick', me.getEventProperties(event))
});
};
this.dom.root.oncontextmenu = function (event) {
me.emit('contextmenu', me.getEventProperties(event))
};
this.dom.root.onmouseover = function (event) {
me.emit('mouseOver', me.getEventProperties(event))
};
this.dom.root.onmousemove = function (event) {
me.emit('mouseMove', me.getEventProperties(event))
};
//Single time autoscale/fit
this.fitDone = false;

Loading…
Cancel
Save