From 2ec733ba2521fb7f071a8892dc4e8e8559de2f2d Mon Sep 17 00:00:00 2001 From: yotamberk Date: Sat, 31 Dec 2016 21:13:56 +0200 Subject: [PATCH] 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 --- docs/timeline/index.html | 9 +++++++ .../timeline/interaction/eventListeners.html | 24 ++++++++++++++++++- lib/timeline/Timeline.js | 14 +++++++---- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/docs/timeline/index.html b/docs/timeline/index.html index 5c9c02f4..ce8df517 100644 --- a/docs/timeline/index.html +++ b/docs/timeline/index.html @@ -1505,6 +1505,15 @@ timeline.off('select', onSelect); + + mouseOver + + Passes a properties object as returned by the method Timeline.getEventProperties(event). + + Fired when the mouse hovers over a timeline element. + + + groupDragged diff --git a/examples/timeline/interaction/eventListeners.html b/examples/timeline/interaction/eventListeners.html index f3a9bcc5..50ed1e9e 100644 --- a/examples/timeline/interaction/eventListeners.html +++ b/examples/timeline/interaction/eventListeners.html @@ -15,7 +15,7 @@

- This example listens for events select, rangechange, and rangechanged of the Timeline, and listens for changes in the DataSet (add, update, or remove items). + This example listens for events select, click, doubleClick, rangechange, and rangechanged of the Timeline (other possible events: mouseDown, mouseUp, mouseOver, mouseMove), and listens for changes in the DataSet (add, update, or remove items).

@@ -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); }); diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js index 418a713d..4ff51e5b 100644 --- a/lib/timeline/Timeline.js +++ b/lib/timeline/Timeline.js @@ -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;