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
7 years ago · 2ec733ba25
--- a/docs/timeline/index.html
+++ b/docs/timeline/index.html
@ -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>
--- a/examples/timeline/interaction/eventListeners.html
+++ b/examples/timeline/interaction/eventListeners.html
@ -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);
    });
--- 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;