Use Raphael Vector Graphics Library in Adobe AIR

Question

Have you used the Raphael Vector Graphics Javascript Library in Adobe AIR? What problems, pitfalls and challenges have you encountered?
To the Adobe AIR Team: It would be tremendously helpful and will be much appreciated if you can create a sample Adobe AIR application using Raphael.
~Oscar

Answer 1

Hi again jackson@mja.
I've given your scroll component a try just for some static texts, and I've found quite a few important bugs:
1. If the referenced sprite/movieclip is shorter than the scrolling area, it starts bouncing infinitely in a quite funny way,
    which renders the component unusable. Sometimes it even happens when the content is not shorter.
2. If your component is used inside another sprite/movieclip which is added dynamically from code ("addChild(mySprite);"),
    it doesn't work and stops with an error, because the EventListener for mouseDownHandler is being added to this.stage
    in the constructor, but a dynamic movieclip doesn't have access to the stage while in the constructor step (unless it is
    already in the stage added in the Flash IDE, such as in your FLA example). To fix this, I've added the following code
    to the ScrollArea() constructor:
this.addEventListener(Event.ADDED_TO_STAGE, init);
this.addEventListener(Event.REMOVED_FROM_STAGE, close);
    And then I've added the following listener functions:
private function init(event:Event):void {
this.removeEventListener(Event.ADDED_TO_STAGE, init);
this.stage.addEventListener(MouseEvent.MOUSE_DOWN, this.mouseDownHandler);
private function close(event:Event):void {
this.stage.removeEventListener(MouseEvent.MOUSE_DOWN, this.mouseDownHandler);
3. Also, the scrollbar is only correctly rendered if the scroll area is located at the up and left corner of the stage. To put text somewhere else, the component must be put inside a movieclip.
4. This is not really important, but I've found the following variables are never user and so I've removed these lines:
var xy:Point = this.localToGlobal(new Point(this.x, this.y));
var wh:Point = this.localToGlobal(new Point(this.width, this.height));
var sign:int = sign(obj[i]);
I hope this can help you improve your classes.
Best regards,
OMA2k