[flexcoders] Components as chart annotationElements

[moardonuts]

Hello all,

I have a chart with a few annotation elements.  The first is a canvas that 
covers the whole 
thing and does stuff like allowing me to drag the chart around. Then I added 
another 
canvas that contained a box.  Basically I'm working out away to add some 
draggable 
vertical cursors. I wasn't liking the mouseOver behavior of the VRule; It only 
fired on the 
edges and not over the magical box between the edges.  So, I made a 2 pixel 
wide Box 
with a filled in background (seems a little ghetto, I know).  It worked right 
when wrapped 
in a Canvas with 100% height and width.

So as a little proof of concept, the following code worked how I wanted.  The 
chart was 
draggable everywhere except when the mouse was directly over the cursors.

    <mx:annotationElements>  
         <mx:Canvas id="chartArea" width="100%" height="100%" buttonMode="true"
                  mouseDown="initiateDrag(theChart)" />
         <mx:Canvas width="100%" height="100%">
               <mx:Box id="cursor" x="50" height="100%" width="2" 
                       backgroundColor="#000000" />
         </mx:Canvas>
    </mx:annotationElements>


As I wanted to add more properties and logic to the cursor, I extracted it out 
into a 
component.  Now the component is a Canvas base, with the Box in it just as 
above, and 
some actionScript.  And the above code now looks like:

    <mx:annotationElements>
         <mx:Canvas id="chartArea" width="100%" height="100%" buttonMode="true"
                  mouseDown="initiateDrag(theChart)" />
         <local:Cursor id="cursor" x="50" width="10" />
    </mx:annotationElements>

The problem is that now, no matter how I set widths (in the main app or within 
the 
component), "cursor" covers "chartArea" starting at x and extending right to 
the end.  The 
box width within the component works fine, but the whole canvas acts like 100% 
width 
starting at x, no matter what.  That prevents the dragging and mouseOver 
behaviors I 
want on chartArea.  So for example, with the above, I can drag the chart as 
long as I press 
the mouseDown between 0 and 49 for x, and anywhere from 50 and beyond fires the 
mouseOver for the cursor instead.  If you add more than one cursor, the 
layering 
continues in the same manner.

So my question is, why does extracting it out to a component change that?   
What should I 
be doing to get the original behavior where the whole component can just be the 
width I 
set? 


Thanks!