Custom title bar with cef

Having problems with building or using CEF's C/C++ APIs? This forum is here to help. Please do not post bug reports or feature requests here.

Custom title bar with cef

Postby RobbyDwayne » Sat Aug 28, 2021 12:13 am

Hi,

How can go about making a custom title bar? Currently, I have the close and minimize functionality working. The thing I am struggling with is I want the user to be able to reposition the window by dragging it around. It is build in html and css and positioned the same way as a navbar. I also have the window set to borderless.

Is this the correct approach?

Thanks,
Robby
RobbyDwayne
Techie
 
Posts: 15
Joined: Wed Aug 11, 2021 12:52 am

Re: Custom title bar with cef

Postby magreenblatt » Sat Aug 28, 2021 9:52 am

Use “-webkit-app-region: drag” in CSS and implement CefDragHandler::OnDraggableRegionsChanged. See example usage in cefclient.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Custom title bar with cef

Postby RobbyDwayne » Tue Aug 31, 2021 12:55 am

What exactly do I implement?

I have this so far:
Code: Select all
bool Client::OnDragEnter(CefRefPtr<CefBrowser> browser, CefRefPtr<CefDragData> dragData, CefDragHandler::DragOperationsMask mask)
{
   CEF_REQUIRE_UI_THREAD();

   //Forbid dragging of URLs and files
   if ((mask & DRAG_OPERATION_LINK) && !dragData->IsFragment())
   {
      return true;
   }

   return false;
}

void Client::OnDraggableRegionsChanged(CefRefPtr<CefBrowser> browser, CefRefPtr<CefFrame> frame, const std::vector<CefDraggableRegion>& regions)
{
   CEF_REQUIRE_UI_THREAD();

   HWND AppRoot = GetAncestor(browser->GetHost()->GetWindowHandle(), GA_ROOT);

   //Reset draggable region
   ::SetRectRgn(draggable_region_, 0, 0, 0, 0);

   //Determine new draggable region
   std::vector<CefDraggableRegion>::const_iterator it = regions.begin();

   for (; it != regions.end(); ++it)
   {
      HRGN region = ::CreateRectRgn(it->bounds.x, it->bounds.y, it->bounds.x + it->bounds.width, it->bounds.y + it->bounds.height);

      ::CombineRgn(draggable_region_, draggable_region_, region, it->draggable ? RGN_OR : RGN_DIFF);
      ::DeleteObject(region);
   }

   if (AppRoot)
   {
      WNDENUMPROC proc = !regions.empty() ? SubclassWindowsProc : UnSubclassWindowsProc;

      ::EnumChildWindows(AppRoot, proc, reinterpret_cast<LPARAM>(draggable_region_));
   }
}


Thats all swiped from the example, but it doesn't actually work. It there something specific I need?
RobbyDwayne
Techie
 
Posts: 15
Joined: Wed Aug 11, 2021 12:52 am

Re: Custom title bar with cef

Postby magreenblatt » Tue Aug 31, 2021 8:25 am

Did you add the CSS? See http://tests/draggable in cefclient.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Custom title bar with cef

Postby RobbyDwayne » Tue Aug 31, 2021 8:35 pm

Yup, I added -webkit-app-region: drag to the div which my custom title bar is in.
RobbyDwayne
Techie
 
Posts: 15
Joined: Wed Aug 11, 2021 12:52 am

Re: Custom title bar with cef

Postby magreenblatt » Tue Aug 31, 2021 9:07 pm

Did you implement CefClient::GetDragHandler? Is OnDraggableRegionsChanged called?
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Custom title bar with cef

Postby RobbyDwayne » Thu Sep 02, 2021 1:40 am

Code: Select all
void Client::NotifyDraggableRegions(CefRefPtr<CefBrowser> browser, const std::vector<CefDraggableRegion>& regions)
{
   if (!CURRENTLY_ON_MAIN_THREAD())
   {
      //Execute this method on the main thread
      MAIN_POST_CLOSURE(base::Bind(&Client::NotifyDraggableRegions, this, regions));

      return;
   }

   REQUIRE_MAIN_THREAD();

   HRGN draggable_region_ = ::CreateRectRgn(0, 0, 0, 0);

   //Reset draggable region
   ::SetRectRgn(draggable_region_, 0, 0, 0, 0);

   //Determine new draggable region
   std::vector<CefDraggableRegion>::const_iterator it = regions.begin();

   for (; it != regions.end(); ++it)
   {
      HRGN region = ::CreateRectRgn(it->bounds.x, it->bounds.y, it->bounds.x + it->bounds.width, it->bounds.y + it->bounds.height);

      ::CombineRgn(draggable_region_, draggable_region_, region, it->draggable ? RGN_OR : RGN_DIFF);

      ::DeleteObject(region);
   }


Thats what I have so far. In the sample there is also this bit

Code: Select all
// Subclass child window procedures in order to do hit-testing.
  // This will be a no-op, if it is already subclassed.
  if (hwnd_) {
    WNDENUMPROC proc =
        !regions.empty() ? SubclassWindowsProc : UnSubclassWindowsProc;
    ::EnumChildWindows(hwnd_, proc,
                       reinterpret_cast<LPARAM>(draggable_region_));
  }


I cant really figure out what to do about that. I don't have a parent proc which the SubclassWindowsProc function uses. My project is basically based of the minimal implementation.
RobbyDwayne
Techie
 
Posts: 15
Joined: Wed Aug 11, 2021 12:52 am

Re: Custom title bar with cef

Postby magreenblatt » Thu Sep 02, 2021 9:06 am

Consider using Views, it will make it easier for you. Run “cefclient --use-views --hide-frame --hide-controls” as an example.
magreenblatt
Site Admin
 
Posts: 12382
Joined: Fri May 29, 2009 6:57 pm

Re: Custom title bar with cef

Postby RobbyDwayne » Fri Sep 03, 2021 1:10 am

Hey. I took your advice and switched over to views. Everything seems to work flawlessly! Thank you so much for your help!
RobbyDwayne
Techie
 
Posts: 15
Joined: Wed Aug 11, 2021 12:52 am

Re: Custom title bar with cef

Postby tapineb371 » Tue Jan 02, 2024 10:26 pm

RobbyDwayne wrote:Hi,

How can go about making a custom title bar? Currently, I have the close and minimize functionality working. The thing I am struggling with is I want the user to be able to reposition the window by dragging it around. It is build in html and css and positioned the same way as a navbar. I also have the window set to borderless.

Is this the correct approach?

Thanks,
Robby


Can you kindly elaborate.
tapineb371
Techie
 
Posts: 13
Joined: Mon Sep 04, 2023 8:49 pm


Return to Support Forum

Who is online

Users browsing this forum: No registered users and 32 guests