tvjsx / trading-vue-js

💹 Hackable charting lib for traders. You can draw literally ANYTHING on top of candlestick charts. [Not Maintained]
https://tvjsx.github.io/trading-vue-demo/
MIT License
2.07k stars 628 forks source link

Help to implement "snap to candle ohlc" feature #284

Closed Jonarod closed 1 year ago

Jonarod commented 1 year ago

Hello, I know there is a new charting library in the making, but for the time being I feel like I need to keep working with this one until the new one achieves at least v1 (no ?). So here is my question:

From an overlay, while in drawing mode, I would like the crosshair to be attracted to nearest OHLC point and snap to it, like a magnet. Getting the mechanics of this feature is quite easy using all the DSM helpers, however I cannot figure out how to force crosshair to deviate from the mouse cursor.

For instance, say my cursor is at (X,Y) coordinates (557, 278), the crosshair will share the same coordinates. Now, if my calculations infer that we should snap to coordinates (550, 260), the mouse cursor should stay at the original coordinates but the crosshair should "escape" from the cursor and snap to the new coordinates.

I would thus need a way to control the crosshair independently from the mouse cursor. Is there any way to do that from the overlay? Something like setCrossHair(550, 260) (obviously not that easy :)

Thank you !

C451 commented 1 year ago

Hi, I need to rethink how it should be implemented in the new library, bc I already got many improvements over TVJS. I think this one will no be an exception.

Meanwhile you can try to use https://github.com/tvjsx/trading-vue-js/blob/master/src/TradingVue.vue#L294 and manipulate x, t, y, y$ coordinates after the update. You can emit custom-event from the overlay, catch on the app level.

Jonarod commented 1 year ago

I did not realise this.$props.cursor.x and this.$props.cursor.y had setters...

So I managed to set the crosshair right from the overlay using:

draw(ctx){
...
this.$props.cursor.x = snaped_x_value
this.$props.cursor.y = snaped_y_value
...
}

where I have to implement snaped_x_value and snaped_y_value using $2screen() and t2screen().

Thank you !!