Tuesday, January 10, 2012

Handling Mouse Events in Smart Mobile Studio

After I finished my very first Smart program, I wanted to enhance it with some interactivity. I wanted the user to be able to navigate through the Mandelbrot set by using mouse and touch. For now, I have only implemented the mouse part, touch events will be handled later (soon, I hope).

I wanted to achieve few different ways of navigation:

  • Click & drag with the left mouse button shows a rectangle on the screen. When the mouse button is released, program zooms in to display the selected rectangle.
  • Double-clicking zooms in around the point of click.
  • Right-clicking zooms out around the center of the image.
  • Right-click & drag shows a line on the screen. When the mouse button is released, program moves the current view (point of first click is moved to the point of release).
  • If a drag operation is in progress, user can click and release the other mouse button (left if right-drag is in progress, right if left-drag is in progress) to cancel the drag operation.

You can see the navigation in action in this (very low quality, sorry) YouTube video.

Smart tries to make mouse handling similar to the VCL. TW3CustomControl class (which is, as you can guess, a base class for all custom controls) defines following mouse events:

TMouseDownEvent = procedure (Sender: TObject; Button: TMouseButton;
X, Y: Integer);
TMouseUpEvent = procedure (Sender: TObject; Button: TMouseButton;
X, Y: Integer);
TMouseMoveEvent = procedure (Sender: TObject; X, Y: Integer);
TMouseEnterEvent = procedure (Sender: TObject; X, Y: Integer);
TMouseLeaveEvent = procedure (Sender: TObject; X, Y: Integer);
TMouseClickEvent = procedure (Sender: TObject);
TMouseDblClickEvent = procedure (Sender: TObject);

TW3CustomControl = class(TW3Component, IW3CustomControl)
property OnMouseDown: TMouseDownEvent;
property OnMouseUp: TMouseUpEvent;
property OnMouseMove: TMouseMoveEvent;
property OnMouseEnter: TMouseEnterEvent;
property OnMouseLeave: TMouseLeaveEvent;
property OnClick: TMouseClickEvent;
property OnDblClick: TMouseDblClickEvent;

Hooking events is done the same as in Delphi. As there is currently no visual designer in the alpha release, I had to connect all events manually.

  FCanvas.OnMouseDown := HandleMouseDown;
FCanvas.OnMouseMove := HandleMouseMove;
FCanvas.OnMouseUp := HandleMouseUp;
FCanvas.OnDblClick := HandleDoubleClick;

In addition to mouse event handlers, main form uses an array to “remember” which button was pressed.

    FSelecting: array [mbLeft..mbRight] of boolean;

HandleMouseDown is called when a mouse button is pressed. It simply sets the FSelecting element corresponding to the pressed button to True and remembers the current coordinates in FSelectStart. It also checks if both buttons are pressed and cancels drag operation. FCanvas.HideOverlay hides the rectangle/line painted by the drag operation. [I’ll cover actual painting in the next installment.]

procedure TFormMain.HandleMouseDown(Sender: TObject; button: TMouseButton; 
X, Y: integer);
if button in [mbLeft, mbRight] then begin
FSelecting[button] := true;
if FSelecting[mbLeft] and FSelecting[mbRight] then begin
FSelecting[mbLeft] := false;
FSelecting[mbRight] := false;
FSelectStart := Point(X, Y);

When a mouse is moved, HandleMouseMove first checks if any drag operation is in progress. Then it checks whether the mouse has moved enough to consider this a real selection or a real move operation and hides the rectangle/line if that is not the case. Otherwise, it shows either the rectangle (ShowMarquee) or line (ShowArrow).

procedure TFormMain.HandleMouseMove(Sender:TObject; X, Y: integer);
rect: TRect;
if FSelecting[mbLeft] or FSelecting[mbRight] then begin
rect := w3_Rect(FSelectStart.X, FSelectStart.Y, X, Y);
if (FSelecting[mbLeft] and (not IsConsideredSelection(rect))) or
(FSelecting[mbRight] and
(not IsConsideredMove(FSelectStart, Point(X, Y))))
else if FSelecting[mbLeft] then
else if FSelecting[mbRight] then
FCanvas.ShowArrow(FSelectStart, Point(X, Y));

The reason behind the IsConsideredSelection/IsConsideredMove checks is that it’s hard not to move a mouse when double-clicking. Windows does the same – if you move the mouse just a little during a double-click, it will still be considered a double-click. If you move it more than some amount, it will be considered as a drag followed by a click.

Same goes for right-clicking. I don’t want right-click to do any line-painting if it is just a right-click, i.e. if mouse was not moved (or if it was moved just a little).

IsConsidered functions are quite simple. IsConsideredMove checks if mouse has moved more than 5 pixels in any direction (horizontal or vertical) and IsConsideredSelection checks if mouse has moved more than 5 pixels in both directions.

function TFormMain.IsConsideredMove(p1, p2: TPoint): boolean;
Result := (Abs(p1.X - p2.X) > CDoubleClickDrift) or
(Abs(p1.Y - p2.Y) > CDoubleClickDrift);

function TFormMain.IsConsideredSelection(rect: TRect): boolean;
Result := (Abs(rect.Right - rect.Left) > CDoubleClickDrift) and
(Abs(rect.Bottom - rect.Top) > CDoubleClickDrift);

When mouse button is released, HandleMouseUp hides the rectangle/line and either zooms in (left drag), moves the image (right drag) or zooms out (right click).

procedure TFormMain.HandleMouseUp(Sender: TObject; button: TMouseButton; 
X, Y: integer);
rect: TRect;
midX, midY: integer;
width2, height2: integer;
if FSelecting[button] then begin
FSelecting[button] := false;
if button = mbLeft then begin
rect := w3_Rect(FSelectStart.X, FSelectStart.Y, X, Y);
if IsConsideredSelection(rect) then
if button = mbRight then begin
if IsConsideredMove(FSelectStart, Point(X, Y)) then
Move(FSelectStart.X - X, FSelectStart.Y - Y)
Point(FCanvas.Left + FCanvas.Width div 2,
FCanvas.Top + FCanvas.Height div 2),

The simplest of all, HandleDoubleClick, just zooms in around the point that was remembered in the OnMouseDown event.

procedure TFormMain.HandleDoubleClick(Sender: TObject);
ZoomMid(FSelectStart, 1/CZoomFactor);

And that’s all folks! At least as far as the actual mouse handling is in question. In the next installment I’ll cover painting improvements allowing the app to run correctly on the iPad and painting embelishments (rectangles and lines).

No comments:

Post a Comment