Adding a Resize button to a Flex Panel v2

check out this guys resizable panel: http://www.aboutflex.net/flex/resizable-panel/

Its pretty cool, but it won't work if you try to add the panel inside another component. Thats because handleScale directly references the stage to get the mouse coordinates. But if your component does not start at x=0 y=0 then the cordinates will be off.

here is the modified version which uses the parents mouseX,mouseY in handleScale:





heres the source:

ResizablePanelv2.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:containers="com.flexas3.containers.*">
<mx:VBox horizontalAlign="center" verticalAlign="middle" backgroundColor="#696969" horizontalCenter="0" verticalCenter="0" width="50%" height="75%">
<mx:Button label="I'm in a Vbox" />
<containers:ResizablePanel title="Resize Me !!" x="73" y="110" width="258" height="213" />
</mx:VBox>
</mx:Application>



./com/flexas3/containers/ResizablePanel.as

package com.flexas3.containers
{
import flash.events.MouseEvent;

import mx.containers.Panel;
import mx.controls.Button;

public class ResizablePanel extends Panel
{
public function ResizablePanel()
{
super();
resizer.addEventListener(MouseEvent.MOUSE_DOWN,handleDown)
}
private var resizer:Button=new Button();

override protected function createChildren():void{
this.resizer.width=12;
this.resizer.height=12;

super.createChildren();
this.rawChildren.addChild(resizer);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
this.resizer.y = unscaledHeight - resizer.height ;
this.resizer.x = unscaledWidth - resizer.width ;

}
private function handleDown(e:MouseEvent):void{
stage.addEventListener(MouseEvent.MOUSE_MOVE,handleScale)
stage.addEventListener(MouseEvent.MOUSE_UP,stopResize)
}
private function handleScale(e:MouseEvent):void{
if(parent.mouseX-this.x>50)
width=parent.mouseX-this.x;
if(parent.mouseY-this.y>50)
height=parent.mouseY-this.y;
}
private function stopResize(e:MouseEvent):void{
stage.removeEventListener(MouseEvent.MOUSE_MOVE,handleScale)
stage.removeEventListener(MouseEvent.MOUSE_UP,stopResize)
}
}

}