[flexcomponents] Extend Image, add button, resize handle. Sound familiar Alex? Follow-up question

[Tracy Spratt]

I am extending a few controls to provide an "edit" mode that shows a
border, resize handle and a button to pop-up a property editor.

I am experimenting with some code for a "CloseResizeImage" prototype
component Alex Harui posted on flexcoders, that seems to work much
better than the canvas overlay method I was attempting before
(especially in autoLayout containers!).

It is working pretty well, except that for an image with a fixed aspect
ratio, the resize handle (and therefore my border) can be moved beyound
the right and bottom of the image.

I am looking for suggestions on how to constrain the resizer drag to
stay within the image border.  I will be busy hacking at
mouseMoveHandler in the code below, but any pointers will be
appreciated.

Tracy Spratt

public class CloseResizeImage extends Image
{
 
 public function CloseResizeImage()
 {
  super();
 }
 
 private var closeButton:Button;
 private var resizer:Image;
 
 [Embed(source="ATOC_F8_v3r9_8.swf",symbol="Button_Up")]
 private var upSkin:Class;
 [Embed(source="ATOC_F8_v3r9_8.swf",symbol="Button_Over")]
 private var overSkin:Class;
 [Embed(source="ATOC_F8_v3r9_8.swf",symbol="Button_Down")]
 private var downSkin:Class;
 [Embed(source="ATOC_F8_v3r9_8.swf",symbol="WindowResizer")]
 private var resizerSkin:Class;
 
 override public function load(url:Object <Object>  = null):void
 {
  super.load(url);
 
  if (!closeButton)
  {
   closeButton = new Button;
   closeButton.setStyle("upSkin", upSkin);
   closeButton.setStyle("overSkin", overSkin);
   closeButton.setStyle("downSkin", downSkin);
   addChildAt(closeButton, 1);
   closeButton.addEventListener("click", clickHandler);
 
   resizer = new Image;
   resizer.source = resizerSkin;
   addChildAt(resizer, 2);
   resizer.addEventListener("mouseDown", mouseDownHandler);
  }
 
  setChildIndex(closeButton, 1);
  setChildIndex(resizer, 2);
 
 }
 
 override protected function updateDisplayList(uw:Number,
uh:Number):void
 {
  super.updateDisplayList(uw, uh);
 
  closeButton.move(uw - closeButton.getExplicitOrMeasuredWidth(), 0);
  closeButton.setActualSize(closeButton.getExplicitOrMeasuredWidth(),
         closeButton.getExplicitOrMeasuredHeight());
 
  var rw:Number = resizer.getExplicitOrMeasuredWidth();
  var rh:Number = resizer.getExplicitOrMeasuredHeight();
  resizer.move(uw - rw, uh - rh);
  resizer.setActualSize(rw, rh);
 
  // graphic is porous so make a hit area for it.
  resizer.graphics.clear();
  resizer.graphics.beginFill(0, 0);
  resizer.graphics.moveTo(rw, 0);
  resizer.graphics.lineTo(0, rh);
  resizer.graphics.lineTo(rw, rh);
  resizer.graphics.lineTo(rw, 0);
  resizer.graphics.endFill();
 
 }
 
 private function clickHandler(event:Event):void
 {
  visible = false;
 }
 
 private function mouseDownHandler(event:Event):void
 {
  stage.addEventListener("mouseUp", mouseUpHandler);
  stage.addEventListener("mouseLeave", mouseUpHandler);
  stage.addEventListener("mouseMove", mouseMoveHandler);
 }
 
 private function mouseUpHandler(event:Event):void
 {
  stage.removeEventListener("mouseUp", mouseUpHandler);
  stage.removeEventListener("mouseLeave", mouseUpHandler);
  stage.removeEventListener("mouseMove", mouseMoveHandler);
 }
 
 private function mouseMoveHandler(event:MouseEvent):void
 {
  var stagePt:Point = new Point(event.stageX, event.stageY);
  var localPt:Point = parent.globalToLocal(stagePt);
  if (localPt.x >= x)
   explicitWidth = localPt.x - x;
  if (localPt.y >= y)
   explicitHeight = localPt.y - y;
 }