Recent

Author Topic: Drag and Dock to make a toolbar  (Read 3777 times)

lainz

  • Hero Member
  • *****
  • Posts: 4704
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Drag and Dock to make a toolbar
« on: September 12, 2014, 02:42:23 pm »
Attached project.

I want to make a toolbar with panels that can be dragged and docked into another panel.
Panel3 & Panel2 in Panel 1.

Panel1:
DockSite:=True

AutoSize:=True
Align:=alRight

// this is to look like a toolbar
ChildSizing.ControlsPerLine:=1
ChildSizing.Layout:=cclLeftToRightThenTopToBottom

Panel2 & Panel3
DragKind:=dkDock
DragMode:=dmAutomatic

AutoSize:=True

// This is to have space to drag the panel
ChildSizing.LeftRightSpacing:=8
ChildSizing.TopBottomSpacing:=8

Problems:
The first time I drag and dock Panel3 into Panel1 works fine, the ChildSizing.Layout is used and controls are aligned one over the other.

Then if I drag and 'undock' the Panel3 is moved into a separated window, there's no problem with that.

When I drag and dock the Panel3 for the second time it takes the full area of Panel1 and hides Panel2.

How to do that always work as the first time?

Other question:
When I 'undock' the Panel3 is moved into a separated window, then if I close that window, How I can open the window again?

howardpc

  • Hero Member
  • *****
  • Posts: 4144
Re: Drag and Dock to make a toolbar
« Reply #1 on: September 13, 2014, 01:54:48 am »
When I drag and dock the Panel3 for the second time it takes the full area of Panel1 and hides Panel2.
How to do that always work as the first time?

Add a Panel3.OnStartDock handler:
Code: [Select]
procedure TForm1.Panel3StartDock(Sender: TObject;
  var DragObject: TDragDockObject);
begin
  Panel3.Align:=alNone;
end;

Quote
When I 'undock' the Panel3 is moved into a separated window, then if I close that window, How I can open the window again?

To restore the panel to its original position you'll have to save its initial Top and Left values for later reference. In TForm1's private section add two fields

Code: [Select]
...
private
  OriginalLeft: integer;
  OriginalTop: integer;
end;

Add a TForm1.OnShow handler to store the values:

Code: [Select]
procedure TForm1.FormShow(Sender: TObject);
begin
  OriginalLeft:=Panel3.Left;
  OriginalTop:=Panel3.Top;
end;

Drop a TPopupMenu on the form, add one menu item with a caption such as "Restore hidden". Set the form's Popupmenu property to point to the added popupmenu; and create a menuitem OnClick handler:
Code: [Select]
procedure TForm1.MenuItem1Click(Sender: TObject);
begin
  Panel3.Left:=OriginalLeft;
  Panel3.Top:=OriginalTop;
  panel3.Align:=alNone;
  Panel3.Visible:=True;
  panel3.Parent:=Self;
end;

That should do it. You might prefer to use a main menu, or a 'Restore' button or some other way to implement the changes to Panel3's properties needed to restore it.

lainz

  • Hero Member
  • *****
  • Posts: 4704
  • Web, Desktop & Android developer
    • https://lainz.github.io/
Re: Drag and Dock to make a toolbar
« Reply #2 on: September 13, 2014, 06:47:21 pm »
Thankyou!

I've improved it to handle when the control is docked to a new floating window (TCustomDockForm):

Also I've added another panel 'Panel4' that replaces TForm1 as Self, to avoid a strange behavior (if restored several times and drag and the component is docked to TForm1 the form is moved with the control)..

I've attached it, maybe is usefull for someone else.

Code: [Select]
procedure TForm1.Button1Click(Sender: TObject);
begin
  if panel3.Parent is TCustomDockForm then
    TCustomDockForm(panel3.Parent).Close;

  panel3.Align:=alNone;
  panel3.Parent:=Panel4;
  Panel3.Left:=OriginalLeft;
  Panel3.Top:=OriginalTop;
end;

procedure TForm1.FormShow(Sender: TObject);
begin
  OriginalLeft:=Panel3.Left;
  OriginalTop:=Panel3.Top;
end;

procedure TForm1.Panel3EndDock(Sender, Target: TObject; X, Y: Integer);
begin
  if Target is TPanel then
    if TPanel(Target).Name = 'Panel1' then
      panel3.Align:=alNone;
end;
« Last Edit: September 13, 2014, 06:50:02 pm by 007 »

circular

  • Hero Member
  • *****
  • Posts: 4404
    • Personal webpage
Re: Drag and Dock to make a toolbar
« Reply #3 on: September 13, 2014, 09:04:15 pm »
Thanks Lainz, this is really brilliant. I will try to implement it in LazPaint.
Conscience is the debugger of the mind

 

TinyPortal © 2005-2018