Question

I have a Flex 3 app that has elements that a user can add to the main canvas then resize and reposition.

There are 3 key functions I am using for the resize which are as follows:

When the resize begins:

        private function startResize(event:MouseEvent):void
        {
            RESIZE_START_MOUSE_X = event.localX;
            RESIZE_START_MOUSE_Y = event.localY;

            RESIZE_START_WIDTH = this.width;
            RESIZE_START_HEIGHT = this.height;

            RESIZE_START_X = this.x;
            RESIZE_START_Y = this.y;

            RESIZE_BOUND = calculateResizeBound(event);

            addEventListener(MouseEvent.MOUSE_MOVE, resizeMouseHandler);

            isResizing = true;
        }

When the resize is complete:

        private function endResize():void
        {
            RESIZE_START_MOUSE_X = -1;
            RESIZE_START_MOUSE_Y = -1;

            RESIZE_START_WIDTH = this.width;
            RESIZE_START_HEIGHT = this.height;

            RESIZE_START_X = -1;
            RESIZE_START_Y = -1;

            RESIZE_BOUND = '';

            removeEventListener(MouseEvent.MOUSE_MOVE, resizeMouseHandler);

            isResizing = false;             
        }

Whilst the user is resizing:

        private function resizeMouseHandler(event:MouseEvent):void
        {
            var deltaX:Number = event.localX - RESIZE_START_MOUSE_X;
            var deltaY:Number = event.localY - RESIZE_START_MOUSE_Y;

            if (RESIZE_BOUND.indexOf('T') > -1)
            //We are fixing the top so move the bottom edge
            {
                this.height = RESIZE_START_HEIGHT + deltaY;
            }

            if (RESIZE_BOUND.indexOf('B') > -1)
            //We are fixing the bottom so move the top edge
            {
                this.y = RESIZE_START_Y + deltaY;
                this.height = RESIZE_START_HEIGHT - deltaY;
            }

            if (RESIZE_BOUND.indexOf('L') > -1)
            //We are fixing the left so move the right edge
            {
                this.width = RESIZE_START_WIDTH + deltaX;
            }

            if (RESIZE_BOUND.indexOf('R') > -1)
            //We are fixing the right so move the left edge
            {
                this.x = RESIZE_START_X + deltaX;
                this.width = RESIZE_START_WIDTH - deltaX;
            }

        }

There is another function referenced in these called calculateResizeBound(). What this does is return a string indicating which edge / corner should remain fixed during the resize. Eg ‘TL’ means that the top left corner should stay fixed, ‘BR’ means bottom right, ‘L’ means just the left edge etc etc

When the resize starts from the ‘normal’ position, ie the top left corner stays fixed, everything works great. Similarly with the left or top edges fixed. However for the bottom and right cases, I need to reposition the element at the same time as resizing it since all the co-ordinates are calculated from the top left.

The problem that I have is that when it does this, the resize is not smooth, it keeps jumping up and down slightly as you resize it. Not only that but when you resize from the ‘normal’ edges the cursor position remains fixed relative to the fixed edge / corner however from one of the other edges, you can see it start to drift away from the edge / corner as you resize.

With this kind of thing, it is easy to get the + / – of the different bits of the calculation muddled but since the resize is working in the correct direction each time, I assume I have these correct.

So presumably the problem is coming from the simultaneous moving and resizing but I can’t find a work-around for it. Any thoughts / suggestions would be much appreciated

Answer 1

Doug McCune has an awesome Resize wrapper that you can use to resize elements. Then you just need to add a mover on it. See the blog post for code/sample: http://dougmccune.com/blog/2007/08/17/my-360flex-slides-and-code/