FLEX{er}

In the previous articles in this series I explained how to create a horizontally and vertically resizable canvas. In this third article we will add the possibility to resize in both direction by dragging the right bottom corner.

What we will do:

add the new UI control (the right bottom button)
create the necessary events for it
create CSS & skin

Because we already have both properties for horizontal and vertical resize we will use them. So inside each setter (horizontalResizable and verticalResizable) we will add our new button not before checking if it already exists.

// if the right-bottom button is already added
if (!_bothEdges)
{
    // we add the right bottom button
    _bothEdges = new Button();
    // no label
    _bothEdges.label = "";
    // no tooltip
    _bothEdges.toolTip = null;
    _bothEdges.tabEnabled = false;
    _bothEdges.setStyle("right", 0);
    _bothEdges.setStyle("bottom",0);
    _bothEdges.height = 12;
    _bothEdges.width = 12;
    // set its style
    // in this style we set the skin to not show anything
    _bothEdges.styleName = "canvasBothEdges";
 
    // if the canvas is only horizontally resizable
    // we use the same events and handlers like in that case
    _bothEdges.addEventListener(MouseEvent.MOUSE_OVER, 
            handleBothResizeOver, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_MOVE, 
            handleBothResizeOver, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_OUT, 
            handleResizeOut, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_DOWN, 
            handleBothDragStart, false, 0 ,true);
    _bothEdges.addEventListener(Event.ENTER_FRAME, 
            handleBothDragMove, false, 0 ,true);
    _bothEdges.addEventListener(MouseEvent.MOUSE_UP, 
            handleDragStop, false, 0 ,true);
 
    addChild(_bothEdges);
}

After adding all those we have to remove the event handlers in case we set it not resizable (in both setters).

// we remove the events for the right bottom corner (button)	
if (_bothEdges)
{
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_OVER))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_OVER, 
                handleBothResizeOver);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_OUT))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_OUT, 
                handleResizeOut);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_DOWN))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_DOWN, 
                handleBothDragStart);
    if (_bothEdges.hasEventListener(MouseEvent.MOUSE_UP))
        _bothEdges.removeEventListener(MouseEvent.MOUSE_UP, 
                handleDragStop);
    if (_bothEdges.hasEventListener(Event.ENTER_FRAME))
        _bothEdges.removeEventListener(Event.ENTER_FRAME, 
                handleBothDragMove);
}

We add three new event handlers:

handleBothResizeOver - used just to display the cursor
handleBothDragStart - if it is resizable in both directions we save the initial position
handleBothDragMove - this will resize the canvas

handleBothResizeOver

// event handler to show the resize cursor
private function handleBothResizeOver(event:MouseEvent):void
{
    // check if we already have the resize cursor set
    if (_currentCursorId == -1)
        _currentCursorId = 
                CursorManager.setCursor(_cResizeCursor,2,-10,-10);
}

handleBothDragStart

// event handler to start the drag
private function handleBothDragStart(event:MouseEvent):void
{
    if (_isResizableHorizontally)
    {
        _dragHStarted = true;
        // we save the initial position and width
        _dragStartHPosition = stage.mouseX;
        _dragLastWidth = width;
    }
    if (_isResizableVertically)
    {
        _dragVStarted = true;
        // we save the initial position and width
        _dragStartVPosition = stage.mouseY;
        _dragLastHeight = height;
    }
}

handleBothDragMove

// event handler for real rezise and other important stuff
private function handleBothDragMove(event:Event):void
{
    // we put the right-bottom always on the top of the other children
    if (getChildIndex(_bothEdges) < numChildren-1)
    setChildIndex(_bothEdges,numChildren-1);
    // we add the event to stop the drag also on the stage
    // we cannot add this event in set resizable because the
    // stage is not created because set resizable is done at
    // constructor time and stage is set after adding our
    // canvas to the application
    if (stage != null && !stage.hasEventListener(MouseEvent.MOUSE_UP))
        stage.addEventListener(MouseEvent.MOUSE_UP, 
                handleDragStop, false, 0 ,true);
    // we resize our canvas only if drag started
    if (_dragHStarted)
    {
        // get the amount of movement
        // difference between the current mouse x position relative 
        // to the stage and the saved position at mouse down event
        var hMovement:int = (stage.mouseX - _dragStartHPosition);
        // if the canvas is positioned relative to the center
        // the width will be changed in both left and right directions
        // so we will double the movement
        if (getStyle("horizontalCenter") != undefined)
        {
            hMovement *= 2;
        }
        // if we move to the left
        if (hMovement <= 0)
        {
            // check not to pass the minimum width
            if (minWidth < _dragLastWidth + hMovement)
                width = _dragLastWidth + hMovement;
            else
                width = minWidth;
        } else {
            // check not to pass the maximum width
            if (maxWidth > _dragLastWidth + hMovement)
                width = _dragLastWidth + hMovement;
            else
                width = maxWidth;
        }
    }
    if (_dragVStarted)
    {
        // get the amount of movement
        // difference between the current mouse x position relative 
        // to the stage and the saved position at mouse down event
        var vMovement:int = (stage.mouseY - _dragStartVPosition);
        // if the canvas is positioned relative to the center
        // the width will be changed in both left and right directions
        // so we will double the movement
        if (getStyle("veticalCenter") != undefined)
        {
            vMovement *= 2;
        }
        // if we move to the left
        if (vMovement <= 0)
        {
            // check not to pass the minimum width
            if (minHeight < _dragLastHeight + vMovement)
                height = _dragLastHeight + vMovement;
            else
                height = minHeight;
        } else {
            // check not to pass the maximum width
            if (maxHeight > _dragLastHeight + vMovement)
                height = _dragLastHeight + vMovement;
            else
                height = maxHeight;
        }
    }
}

We added also a new class in CSS, a new skin and a new icon for the right bottom button. These are the changes made to have the resize functionality in both directions. Now, enjoy the working application.

Previous in series

Share and Enjoy: