Custom component: Capture clicks and select an item in Designer
lazarus / 10-Designer

----------------------------------------------------------------------
hukka · 2023-01-06 19:16

Hello,

I have a custom Toolbar component which represents its buttons as
TCollectionItems in a TOwnedCollection. These items are drawn by the
toolbar component itself. Now I would like to capture clicks in the
toolbar component in the IDE Designer and select the corresponding
TCollectionItem to be edited in the IDE. This is easy to do runtime
with the TTIPropertyGrid component:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.cvToolBarMouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);begin    TIPropertyGrid1.TIObject
:= cvToolbar.ClickedItem; // <- ClickedItem = a TCollectionItem
variable of the toolbarend;
How would I accomplish the same in the Lazarus IDE itself? That is,
Capture mouse clicks (with X, Y location) on my component while in
Designer?Select the corresponding TCollectionItem (Toolbar.Items[N])
in the Object Inspector?

----------------------------------------------------------------------
JuhaManninen · 2023-01-07 07:04

Quote from: hukka on January 06, 2023, 08:16:07 pmCode: Pascal
 [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.cvToolBarMouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);begin    TIPropertyGrid1.TIObject
:= cvToolbar.ClickedItem; // <- ClickedItem = a TCollectionItem
variable of the toolbarend;How is the cvToolbar.ClickedItem updated
before the MouseDown event?
It would be useful to see source code of your component.

----------------------------------------------------------------------
hukka · 2023-01-07 14:16

Quote from: JuhaManninen on January 07, 2023, 08:04:49 amHow is the
cvToolbar.ClickedItem updated before the MouseDown event?
It would be useful to see source code of your component.
Thanks for the reply. Getting the clicked item at runtime amounts to
this:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i function
TcvToolbar.GetItemAt(X, Y: Integer): TcvToolbarItem;var    i:
Integer;    P: TPoint;begin    Result := nil;    if csCreating in
ControlState then Exit;    if (FItems = nil) or (FItems.Count < 1)
then Exit;     P := Point(X, Y);     for i := 0 to FItems.Count-1 do 
 begin        if PtInRect(P, FItems[i].Bounds) then Exit(FItems[i]); 
 end;end; procedure TcvToolbar.MouseDown(Button: TMouseButton; Shift:
TShiftState; X, Y: Integer);begin    ClickedItem := GetItemAt(X, Y); 
 ....end;
I'm attaching the source; requires BGRABitmap. My mousedown handler
and some commented code from playing around with the IDE are around
the bottom of cvToolbar.pas.

----------------------------------------------------------------------
JuhaManninen · 2023-01-07 16:15

I see you have studied the designer and property editing interfaces.
I am not sure if they ever have been used the way you want to use
them, but it should be possible.
Usually there is a dedicated component editor for collections.
For example see RegisterComponentEditor(TStatusBar,
TStatusBarComponentEditor); (unit StatusBarPropEdit).
You can follow the code and try to make the same effect without a
component editor. I don't know right away how to do it. Component and
property editors are a complex issue with messages going back and
forth.

To debug your code you must install your component and debug the whole
IDE. It is not a problem, lazarus.lpi project can be used for it.

----------------------------------------------------------------------
hukka · 2023-01-07 17:08

All right, thanks for the answer. I'll have a look at the component
editor code. It's not a big deal anyway, just something I thought
would've been nice to have in my component. At least the
TTIPropertyGrid component works great and I can use it to let the user
customize the toolbar in my app.

----------------------------------------------------------------------
howardpc · 2023-01-07 17:22

Your ClickedItem and HoveredItem are public, and so not available in
the Object Inspector.
And your published Items property is the entire collection, so cannot
show selection of any individual item, and your
Code: [Select]Items.Item[x]array property is a type of property that
cannot be published.

----------------------------------------------------------------------
hukka · 2023-01-07 17:35

Quote from: howardpc on January 07, 2023, 06:22:31 pmYour ClickedItem
and HoveredItem are public, and so not available in the Object
Inspector.
And your published Items property is the entire collection, so cannot
show selection of any individual item, and your
Code: [Select]Items.Item[x]array property is a type of property that
cannot be published.

Hi,
The items are already visible and editable in the component editor.
I'd only like to automatically select the one I click on the toolbar
component. I should've just posted an image to clarify in my first
post:

----------------------------------------------------------------------
howardpc · 2023-01-07 21:19

Are you able to post a compilable project that produces the screenshot
you show?
The code in your earlier post cannot be made into a compilable project
because of missing BCxxxx unit dependencies.

----------------------------------------------------------------------
JuhaManninen · 2023-01-08 10:08

Quote from: howardpc on January 07, 2023, 10:19:44 pmAre you able to
post a compilable project that produces the screenshot you show?
The code in your earlier post cannot be made into a compilable project
because of missing BCxxxx unit dependencies.
Actually it is not a project but a package, although the .lpk file was
not provided.
Yes, a full package ready to compile and install would be nice.
Somebody could maybe help solving the designer integration problem. I
don't promise to do that myself though.

----------------------------------------------------------------------
hukka · 2023-01-08 15:12

Sure, here's the installable package. Requires BGRABitmap and
BGRAControls.

----------------------------------------------------------------------
hukka · 2023-01-21 02:29

I have now managed to solve it – turns out the solution was in the
wiki.
Specifically this:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
ThToolbar.CMDesignHitTest(var Message: TLMessage);begin 
Message.Result := 1;end; procedure ThToolbar.MouseDown(Button:
TMouseButton; Shift: TShiftState; X, Y: Integer);begin  ClickedItem :=
GetItemAt(X, Y);  if csDesigning in ComponentState then  begin       
GlobalDesignHook.SelectOnlyThis(ClickedItem);        Exit;  end;  ... 
and now my MouseDown handler gets called in the IDE and the proper
toolbar item gets selected as I click on it.