Editing Guide to XML frames part2 (section)

== Moving things around ==
Up until now, our frame has been pretty static, and is likely blocking your character's target frame to boot. So it would be nice if we allowed the user to move the frame around the screen.

All that is really needed for this is to detect when the player is holding the mouse button over our frame and when the user releases the button. So for starters, we are going to need to make sure our frame can interact with the mouse. We do this by adding an attribute to our <code>Frame</code> tag called <code>enableMouse</code> and setting its value to <code>"true"</code> (by default it is considered <code>"false"</code>). Change the <code>Frame</code> tag as follows:

<code><pre>
    <Frame name="MemViewerFrame" parent="UIParent" enableMouse="true">
</pre></code>

Now to detect when a mouse button is pressed. We can use the <code>OnMouseDown</code> and <code>OnMouseUp</code> code snippets to do the dirty work for us, all we need is to tell the game when to start and stop moving the frame when the correct mouse button is pressed or released. Recall that the <code>OnMouseDown</code> and <code>OnMouseUp</code> code snippets can access a variable called <code>key</code> that will have the name of the button that is currently pressed/released. Using this fact we can now create our code snippets by modifying our <code>Scripts</code> section to add the following:

<code><pre>
            <OnMouseDown>
                if(key == "LBUTTON") then 
                    MemViewerFrame:StartMoving("TOPLEFT");
                end
            </OnMouseDown>
            <OnMouseUp>            
                MemViewerFrame:StopMovingOrSizing();
            </OnMouseUp>
</pre></code>

For the <code>OnMouseDown</code> snippet, we first check to see if the button being pressed is in fact the left mouse button. If so, we have the frame call one of its methods to begin moving the frame. The parameter to this method is what the relative position on our frame to consider while moving it around. Valid values here are the same as for the anchor points.

The <code>OnMouseUp</code> is even simpler since all we want to do is tell the frame to stop moving. As we can see from this method's name, this method will stop both changes in movement and changes in size of a frame. Note how we are doing the moving completely in the code snippets instead of calling a function in our Lua file. We can do this because the code needed is quite small. In fact, we aren't really doing the moving at all. Everything is handled by the game engine, we just tell it when to start and stop.


=== Resizing the frame ===
Well now that we can move our frame around, how about resizing it. It really isn't any more difficult to do. Though there is a little caveat I'll mention in a bit. We'll start resizing our frame if the user is holding the right mouse button instead of the left one. Change the <code>OnMouseDown</code> code snippet to this:

<code><pre>
            <OnMouseDown>
                if(key == "LBUTTON") then 
                    MemViewerFrame:StartMoving("TOPLEFT");
                elseif(key == "RBUTTON") then
                    MemViewerFrame:StartSizing("BOTTOMRIGHT");
                end
            </OnMouseDown>
</pre></code>

If the user is holding the right mouse button instead of the left one, we call the frame's method to start resizing. Much like the moving, we also need to tell the game which part we are resizing from. In this case, the bottom right of our frame. This is all that needs to be done to get the frame to resize.

Now for that caveat I mentioned. When resizing a frame like this, if the frame gets too small, the border will not be drawn correctly. Worse still, if resizing to a point where the frame would have to flip directions in order to draw, the game can get confused and draw a supersized frame. For this reason, we should also add code into our OnUpdate handler to check if we are resizing and if so, cap to a minimum size. I'll leave this last as a excersize for the reader.

When testing this out, notice how the FontString and the texture do not resize, but do however stay in the middle of the frame.