move TRectangle with mouse (FMX, Win32)

Question

I have an FMX form with a TLayout on it aligned to client. On the TLayout I have a TRectangle. I can move the TRectangle easily with the following code in a button click event:

 Rectangle1->Position->X = Rectangle1->Position->X + 10;

Is there a clean way for me to do this (move the rectangle) with the mouse? Like click on the Rectangle and move it around to a new location? I'm just playing around trying to make a little drawing program to learn....

Using C++Builder 10.2 Version 25.0.29899.2631 and building in Win32.

UPDATE: I took Hans approach and ended up making it work nicely. I've added the full code as an answer below. Yay!

Answer 1

Here is the complete code needed to left-click on and move a TRectangle on an FMX form in Win32 (haven't tried it on mobile yet). Just create a new FireMonkey multi-device application and put a TRectangle and a TButton on it.

Code to add to the forms's class declaration (in the .h file just under class TForm1 : public TForm {):

bool fMouseIsDown; // gets set to TRUE when left mouse click on the rectangle
TPointF fMousePosGlobal; // this is the mouses position relative to the screen
TPointF fMousePosForm; // this is the mouse pos relative to the form
TPointF captionOffset; // this is a small offset necessary since the form's TOP and LEFT are outside of form's client area due to caption bar and left edge of form
TPointF fMouseInRectAtClick; // this is the mouse pos relative to the rectangle (top left of rectangle is 0,0)

Code to add to the rectangle's Rectangle1MouseDown event:

if (Button == 0) {  // 0 for left mb, 1 for right mb
fMouseIsDown = true;  
fMouseInRectAtClick.X = X;  //mouse pos with respect to rectangle at time of click
fMouseInRectAtClick.Y = Y;
}

Code to add to the rectangle's Rectangle1MouseMove event (add to the form's FormMouseMove too or sometimes you lose the rectangle on a fast drag):

fMousePosGlobal = Screen->MousePos(); //mouse global pos
fMousePosForm.X = fMousePosGlobal.X - Form1->Left;  // mouse pos relative to the form
fMousePosForm.Y = fMousePosGlobal.Y - Form1->Top;
if (fMouseIsDown) {
Form1->Rectangle1->Position->X =  fMousePosForm.X - captionOffset.X - fMouseInRectAtClick.X;
Form1->Rectangle1->Position->Y = fMousePosForm.Y - captionOffset.Y - fMouseInRectAtClick.Y;
}

Code to add to the Rectangle1MouseUp event:

fMouseIsDown = false;  // add this to the form's MouseUp too in case you "lose" the rectangle on a drag.  That only happened when i forget to set the offsets.

Code to add to the Button's Button1Click event:

captionOffset.X = 8.0; // this accounts for the width of the form left edge
captionOffset.Y = 30.0; // this accounts for the height of the form caption
// if you don't add this your "drag point" on the rectangle will jump as soon as you start the drag.

Thanks to Hans for the direction to start!

Also, i noticed the drag wasn't smooth when moving across other controls. If this bothers you then you need to set those other controls "HitTest" false so they ignore it. Add TEdit boxes if you want to see all the TPointF coordinates as you move mouse and rectangle - helps a bunch when trying to figure out coordinates.

Answer 2

A way to drag components is to store the offset between the mouse position and the control position on mouse down, then use this offset to calculate the position of the control in the mouse move event.

In semi-pseudo code it would look like this:

Add the following to your TForm class:

fMouseIsDown: boolean;
fMouseDownOffset: TPointF;

procedure OnRectangleMouseDown(X,Y)
begin
  fMouseIsDown := true;
  fMouseDownOffset := PointF(Rectangle.Position.X-X, Rectangle.Position.Y-Y)
end;

procedure OnRectangleMouseMove(X,Y)
begin
  if fMouseIsDown then
  begin
    Rectangle.Position.X := X+fMouseDownOffset.X;
    Rectangle.Position.Y := Y+fMouseDownOffset.Y;
  end;
end;

procedure OnRectangleMouseUp(X,Y);
begin
  fMouseIsDown := false;
end;