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!
