I have a mx:Canvas element that contains several mx:Panel elements. I want to be able to draw a line connecting two such mx:Panel's in such a way that the line continues to connect the two mx:Panels when one or both get dragged around. It seems like something that should be trivial to do, but I haven't been able to figure it out.
In effect, this is the problem.
alt text http://img150.imageshack.us/img150/5656/ishot1eu3.jpg
Since the updates only occur when the Panel reaches it's final position, as soon as you start dragging the "B" panel, you are left with a dangling line:
alt text http://img212.imageshack.us/img212/4296/ishot2qi6.jpg
A possible solution, as suggested below, would be to override the updateDisplayList() method of the mx:Canvas component. Unfortunately, that only updates the drawing after the dragging, and not while in motion.
Listening to the "xChanged" and "yChanged" events in the Panel produces the same results as overriding the updateDisplayList().
The final solution, as pointed out below, requires dispatching the move events from the moving Panel to the Canvas on which it is moving. This forces the lines to get redrawn throughout the whole motion.
Thanks for all the help!
Best Answer
You can listen to
MoveEvent.MOVE
events in the Panels and have the handler call for the redrawing of the lines, and then have the Panels dispatch these events while they are being dragged by listening forMouseEvent.MOUSE_MOVE
events in the stage and dispatching theMOVE
event in the handler (attach this handler to the stage in the Panel'sMouseEvent.MOUSE_DOWN
event handler, along with a handler forMouseEvent.MOUSE_UP
(attached to the stage as well) -- then remove both of these event listeners from the stage in theMOUSE_UP
handler.)Here's an example (this would be in the Panel subclass:)