Draggable borderless window in CefSharp

Question

I want to implement borderless window with drag logic on some HTML element. I found some working examples (like frameless window for Chrome) and this is what I've tried:

.title-area 
{
   -webkit-app-region: drag;
}

<div class='title-area'>
    A draggable area
</div>

Then, in C# code I've implemented IDragHandler class:

internal class PromtDragHandler : IDragHandler
{
    bool IDragHandler.OnDragEnter(IWebBrowser browserControl, IBrowser browser, IDragData dragData, DragOperationsMask mask)
    {
        return false;
    }

    void IDragHandler.OnDraggableRegionsChanged(IWebBrowser browserControl, IBrowser browser, IList<DraggableRegion> regions)
    {

    }
}

Method OnDraggableRegionsChanged fires once at start, OnDragEnter fires when I'm dragging some text of the element "title-area". But I'm not sure what to do next to make my window move?

UPDATE. As mentioned in comments, CefTestApp support this drag feature. In the source code we have method OnSetDraggableRegions which is called from DragHandler:

void RootWindowWin::OnSetDraggableRegions(
const std::vector<CefDraggableRegion>& regions) {
REQUIRE_MAIN_THREAD();

// 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);
  }

  // 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'm still not quite understanding, how exactly information about dragable regions (which fires only once at start) helps to move window? Can someone explain me this logic or provide C# equivalent of this code?

Answer 1

Take a look at: https://github.com/qwqcode/CefSharpDraggableRegion

This you can specify -webkit-app-region: drag in CSS to tell CefSharp which regions are draggable (like the OS's standard titlebar).

Answer 2

UPDATE2. I DID IT. This is what I've added to my form code:

IntPtr DragableRegionNative = Native.CreateRectRgn(0, 0, 0, 0);

    void RegionsChangedCallback(DraggableRegion[] Regions)
    {

        Native.SetRectRgn(DragableRegionNative, 0, 0, 0, 0);

        if (Regions == null)
            return;

        foreach (var Region in Regions)
        {
            var RegionNative = Native.CreateRectRgn(
                Region.X, Region.Y,
                Region.X + Region.Width,
                Region.Y + Region.Height);

            Native.CombineRgn(DragableRegionNative, DragableRegionNative, RegionNative,
                Region.Draggable ? (int)Native.CombineRgnStyles.RGN_OR : (int)Native.CombineRgnStyles.RGN_DIFF);

            Native.DeleteObject(RegionNative);
        }
    }


    Point dragOffset = new Point();

    protected override void OnMouseDown(MouseEventArgs e)
    {
        base.OnMouseDown(e);

        if (e.Button == MouseButtons.Left)
        {
            dragOffset = this.PointToScreen(e.Location);
            dragOffset.X -= Location.X;
            dragOffset.Y -= Location.Y;
        }
    }

    protected override void OnMouseMove(MouseEventArgs e)
    {
        base.OnMouseMove(e);

        if (e.Button == MouseButtons.Left)
        {
            Point newLocation = this.PointToScreen(e.Location);

            newLocation.X -= dragOffset.X;
            newLocation.Y -= dragOffset.Y;

            Location = newLocation;
        }
    }

    void chromewb_IsBrowserInitializedChanged(object sender, IsBrowserInitializedChangedEventArgs e)
    {
        if (chromewb.IsBrowserInitialized)
        {
            ChromeWidgetMessageInterceptor.SetupLoop(chromewb, (m) =>
            {
                if (m.Msg == (int)Native.WM.WM_LBUTTONDOWN)
                {
                    var point = Native.ParsePoint(m.LParam.ToInt32());

                    if (Native.PtInRegion(DragableRegionNative, point.X, point.Y))
                        this.InvokeEx(() => Native.PostMessage(this.Handle, (uint)m.Msg, m.WParam, m.LParam));

                }
            });
        }
    }

As you can see, it is enough to intercept WM_LBUTTONDOWN event from chrome browser, then check if mouse point belongs to a title region and, if so, send this message to main form. As soon as form will get WM_LBUTTONDOWN event, build-in form methods OnMouseDown and OnMouseMove do the other work.