How to bind mouse click action on drawn line

[Ravindu89]

Is there a way to bind mouse action on PIXI.Graphics line?. 

I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. 

this.strategyGraphic.interactive = true;
this.strategyGraphic.hitArea = this.strategyGraphic.getBounds();

this.strategyGraphic.click = function (data) {
     alert('hit rect');
}

Would like to hear any advice on the subject.

Thanks in advance!

[ivan.popelyshev]

Its not possible to bind an action to a line. There were countless issues about it and people used workarounds. Please use "search" function of this subforum, or in https://github.com/pixijs/pixi.js/issues

[PsichiX]

hi! tell me, what end goal exactly you want to achieve, then i'll give you a solution.

[Ravindu89]

Thank you all for quick replies.

Hi PsichiX, 

I have to achieve two goals,

1.  When clicking on a particular line,
   1. Double left click - open property window of that line (Need to pass some unique id with that action to identify that line)
   2. Single Right click - remove the added line (Need to pass some unique id with that action to identify that line)
2. When hovering on a particular line, Value tooltip should be popped up. 

Examples how the chart looks on in that above status are shown in below.

 

 

 

[PsichiX]

ok, so the working solution (actually only reasonable solution) will be:
add listeners on lines parent, then on events for each line convert mouse coords into line local space, then based on x pos sample line data (not visuals, just source data that describe line y) and if distance between mouse y pos to sampled line y is less than some treshold, fire desired action.

[ivan.popelyshev]

Alternative: for each line create a Polygon, for every point there has to be two points (x,y-10) and (x,y+10) - that way you'll get some space above and below the line. 

Use that polygon as hitArea.

[botmaster]

best way to do tooltips: Make a tooltip manager plugged to the mouse move/position (bunch of ways to do it) then objects that should get tooltips need to implement an Itooltip protocol/interface with at minimum 2 methods: hasTooltip, getTooltip. The manager works that way: is there a IToolTip under the mouse? yes > is object.hasTooltip() true? yes > display tooltip using object.getTooltip(). Very simple, very efficient.

[Ravindu89]

Thank you all for this lot of advice.  I have used Ivan posted method and but still down part of the line chart is sensitive to mouse action.

Attached figures are shown my implementation. (I have colored hit area polygon' outline to easy read)

Hit Area polygon point array

  

I need only outlined polygon area is sensitive to mouse action. Please support me. 

[ivan.popelyshev]

That's it, you have polygon, you have to use it as hitArea: "graphics.hitArea = polygon"

[Ravindu89]

yes as you mentioned the previous post I have set this polygon as line graphics object hit area.  But the bottom area of chart (outside of polygon area) is also listening to action. 

[botmaster]

Make it listen to a separate listener then.