Detecting Clicks on Lines

Question

Hello,
   I am building a canvas application that allows users to drag and drop different icons on the canvas and connect them through edges. I am using the graphics of the canvas to draw these lines.
However, one of my requirements is to detect clicks on the lines and enable users to modify edge properties. Since lines are not first class objects, it is hard to add click listeners on them. I would like to avoid doing my own click detection through MBRs, etc. Here are my questions:
1) Is using the graphics object in the canvas to draw the lines a recommended approach? It seems cumbersome and requires me to maintain too much state
2) Do you have suggestions on how I can detect clicks on these lines without writing my own code to see if each click interested with any of the lines?
Thanks in advance.

Answer 1

Thanks Alex. I will give that a shot. On a related note, I decided to do this in gumbo to learn my way around it. I can't seem to use Sprites properly in gumbo.
I tried the following:
var s: Sprite = new Sprite();
s.graphics.clear();
s.graphics.moveTo(0,0);
s.graphics.lineTo(10,10);
p.addChild(s);
But I get the following error:
Error: addChild() is not available in this class. Instead, use addElement() or modify the skin, if you have one.
at spark.components.supportClasses::SkinnableComponent/addChild()[E:\dev\beta1\frameworks\pr ojects\flex4\src\spark\components\supportClasses\SkinnableComponent.as:953]
at Test/handleCreate()[/Users/ksshams/dev/workspaces/Adobe Flash Builder Beta2/Test/src/Test.mxml:18]
at Test/___Test_Application1_creationComplete()[/Users/ksshams/dev/workspaces/Adobe Flash Builder Beta2/Test/src/Test.mxml:3]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\beta1\frameworks\projects\framework\src\mx\co re\UIComponent.as:11260]
at mx.core::UIComponent/set initialized()[E:\dev\beta1\frameworks\projects\framework\src\mx\core\UIComponent.as:1513]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\beta1\frameworks\projects\frame work\src\mx\managers\LayoutManager.as:759]
at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\beta1\frameworks\projec ts\framework\src\mx\managers\LayoutManager.as:1067]