Draggable frameless windows

[TheColorRed]

I have a frameless window where I have a top bar that looks like this:

In the middle of the two sections (the empty space) I have a rectangle that I want the user to be able to grab which will allow them to drag the window around the screen. I have tried this, but it just moves the window content within the actual window as you can see here

Here is how I am doing it currently. How can I move the window itself?

export global AppState
    in-out property <length> window-x;
    in-out property <length> window-y;
}

export component AppWindow inherits Window {
    x: AppState.window-x;
    y: AppState.window-y;

    TitleBar {}
}

export component TitleBar {
        HorizontalLayout {
            height: 30px;

            MenuBar { } // File/edit/etc.

            Rectangle {
                TouchArea {
                    // TODO: Drag window
                    pointer-event(event) => {
                        if (event.kind == PointerEventKind.down) {
                            AppState.request-restore();
                            AppState.is-maximized = false;
                            AppState.window-x = self.mouse-x;
                            AppState.window-y = self.mouse-y;
                        }
                    }
                }
            }

            Rectangle { 
              // minimize/maximize/close buttons
            }
      }
}

[TheColorRed]

I found the answer here:

#3355 (reply in thread)