I would add a resizing boolean which is set to true on mouseDown and false on mouseUp. If there is an updateDisplayList call when resizing is false, I'd save the width/height as the "max". Then in mouseMove, I would limit the width/height to the max values.
________________________________ From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Tracy Spratt Sent: Monday, April 16, 2007 2:13 PM To: [email protected] Subject: [flexcomponents] Extend Image, add button, resize handle. Sound familiar Alex? Follow-up question 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 <file://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; }
