Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

Add and fix mouse events on timeline #2473

Merged
merged 12 commits into from
Dec 31, 2016
Merged

Add and fix mouse events on timeline #2473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
dcb2d58
Fix redraw order
yotamberk Dec 2, 2016
582fc64
Merge branch 'develop' of https://github.com/almende/vis into develop
yotamberk Dec 6, 2016
f96e6bf
Merge branch 'develop' of https://github.com/almende/vis into develop
yotamberk Dec 8, 2016
ffa8e0e
Merge branch 'develop' of https://github.com/almende/vis into develop
yotamberk Dec 17, 2016
3147510
Add mouseup, mousedown, mouseover, click and dblclick events on timeline
yotamberk Dec 17, 2016
216c24a
Add docs
yotamberk Dec 17, 2016
64ab982
Add to evenlistener example
yotamberk Dec 17, 2016
8729bc9
Add mousemove event listener
yotamberk Dec 19, 2016
87ae409
Fix example
yotamberk Dec 19, 2016
8b95ddd
Merge branch 'develop' of https://github.com/almende/vis into event-bugs
yotamberk Dec 31, 2016
c0f541b
Remove mouseUp and mouseDown events and fix docs for mouseOver
yotamberk Dec 31, 2016
9c42bb4
Remove mouseUp and mouseDown from example
yotamberk Dec 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions docs/timeline/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1498,6 +1498,15 @@ <h2 id="Events">Events</h2>
</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>
Expand Down
24 changes: 23 additions & 1 deletion examples/timeline/interaction/eventListeners.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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);
});
Expand Down
14 changes: 10 additions & 4 deletions lib/timeline/Timeline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you make sure this still workes on mobile?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, I have a touch screen on my computer and it seems to work fine.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool! But we should test it on mobile devices. It's possible that your screen emulates mouse events. I'll try to have a look on some devices.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Np

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, looks good on Android and iOS.

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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we really want to emit this event. This happens quite often? What is the usecase for this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see a use for it when someone wants a tooltip appearing any time you're on the timeline and want to see the exact time you are hovering on

me.emit('mouseMove', me.getEventProperties(event))
};

//Single time autoscale/fit
this.fitDone = false;
Expand Down