search

rrag / react-stockcharts

Highly customizable stock charts with ReactJS and d3
http://rrag.github.io/react-stockcharts
MIT License
3.87k stars 957 forks source link

Panning on mac? #313

Closed ghost closed 6 years ago

ghost commented 7 years ago

I'm not sure I totally get whta panning is, but my undestand is that when I click and drag, i'm actually panning. Correct?

If so, then on mac, using the trackpack or the magic mouse, I should normally be able to pan by moving my finger horizontally, however, i can't seem to be able to reproduce this behavior here. In fact, if I move horizontally, nothing happens!

I'm not sure how to debug this issue. What do you recommend?

rrag commented 7 years ago

yes, click and drag on the trackpad / mouse is the pan.

It does not occur to me that a horizontal swipe represents a pan, however I am not a long time mac user. May be it is a natural action. I am open to checking the feasibility of the horizontal swipe, but I am not able to find a way to identify what event is triggered for that.

Do you know of any other libraries which use horizontal swipe event?

ghost commented 7 years ago

I am not aware of any library that does that. The panning for me is not a priority compared to the other indicator/series improvements I have in mind. I'll be submitting a couple more pull requests then, I might tackle the panning.

You can close the issue for now or keep it open in case someone else has a similar question.

ghost commented 7 years ago

I digged in the code, and I found out that the panning can be handled over here. If you listen to e.deltaX you will get horizontal delta. I tried hacking it but I struggled with figuring out how to make the functions work.

Basically, e.deltaX is a number that is either positive or negative. I supposed it is similar to e.deltaY used for zooming.

Could you give me tips to implement it? Thx!

rrag commented 7 years ago

ok, this presents a challenge as zoom does not have a zoomstart/zoomend but pan with mouse/touch has a panstart and panend. There are some state updates which happen in panstart, panend but no state updates in pan - this is to improve performance. However for zoom state updates happen for every scroll event.

This is good I am interested in pursuing this further. Let me think this through I don't have an answer right away.

mindjuice commented 7 years ago

Clicking and dragging to pan works fine on the Mac trackpad (and I expect it works fine with the mouse too). You wouldn't want just moving your finger on the trackpad over top of the graph to pan though. You need the click or some other modifier like a key to differentiate between moving the mouse and panning.

On the Magic Mouse though, I can see wanting to use left/right finger motions to pan. I haven't tried that as I always use the trackpad.

rrag commented 7 years ago

@mindjuice it has to be 2 finger swipe, just like a 2 finger vertical swipe does a zoom in/out, 2 finger horizontal swipe could potentially pan. Are you suggesting that this is not intuitive? any case it will be consistent across trackpad/magic mouse, as both these events would generate a deltaX

mindjuice commented 7 years ago

Hmmm...wondering if we are talking about different things. Clicking and dragging works for me for panning on the trackpad. A 2 finger horizontal swipe doesn't usually do anything (certainly not panning), but sometimes it results in an awkward zoom in and out if my fingers don't move together. Pinching horizontally and swiping vertically both do a zoom though as you mention.

If I horizontally swipe far enough, the browser tries to go back or forward a page.

rrag commented 7 years ago

A 2 finger horizontal swipe doesn't usually do anything

not yet :) that is what this issue is for, making 2 finger horizontal swipe to pan

purplecones commented 7 years ago

I found this awesome package for charts that fits my needs but came here for this exact request! I've been using https://www.coinigy.com for crypto charts and feel that their charts are one of the best around.

I believe they use this charting library: https://www.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/

@rrag, the library above does exactly what @piotryordanov mentions in terms of horizontal swiping. You can test it out on the page I link. I use a mac too and use horizontal swiping frequently via a 2-finger horizontal swiping on the trackpad.

I would be great to see this feature added as well to this already awesome package.

mrbrdo commented 6 years ago

@rrag one more request for this. Many of the popular charting libraries/sites do support this, such as tradingview, coinigy, cryptowat.ch etc. I'm not sure how you receive events but I think normally a pan on the trackpad is sent simply as a horizontal scroll event in the browser. Hope you can add this feature, would be really great to have it!

rrag commented 6 years ago

http://rrag.github.io/react-stockcharts/documentation.html#/zoom_and_pan

try the 2 finger horizontal scroll, let me know if that works. I will publish to npm in a bit