💥 fix(popup-window): outside-click not working

this commit applies another method of doing this function. The checks happen in the same layer, instead of two layers

ags/widget/PopupWindow.ts

@@ -1,37 +1,84 @@
 import { Binding } from "astal";
-import { Astal, Gdk, Widget } from "astal/gtk3";
+import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import { BackgroundWindow } from "./BackgroundWindow";
 
 type PopupWindowSpecificProps = {
     onDestroy?: (self: Widget.Window) => void;
-    onKeyPressEvent?: (win: Widget.Window, event: Gdk.Event) => void;
+    onKeyPressEvent?: (self: Widget.Window, event: Gdk.Event) => void;
+    onButtonPressEvent?: (self: Gtk.Widget, event: Gdk.Event) => void;
     /** Stylesheet for the background of the popup-window */
     cssBackgroundWindow?: string;
 };
 
-export type PopupWindowProps = Omit<Widget.WindowProps, "keymode"> & PopupWindowSpecificProps;
+export type PopupWindowProps = Pick<Widget.WindowProps, 
+    "child"
+    | "monitor"
+    | "css"
+    | "layer"
+    | "exclusivity"
+    | "marginLeft"
+    | "marginTop"
+    | "marginRight"
+    | "marginBottom"
+    | "expand"
+    | "cursor"
+    | "canFocus"
+    | "hasFocus"
+    | "tooltipMarkup"
+    | "namespace"
+    | "widthRequest"
+    | "heightRequest"
+    | "halign"
+    | "valign"
+    | "vexpand"
+    | "hexpand"> & PopupWindowSpecificProps;
+
+const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
 
 export function PopupWindow(props: PopupWindowProps): Widget.Window {
     props.layer = props.layer ?? Astal.Layer.OVERLAY;
 
-    const bgWindow = BackgroundWindow({
+    const bgWindow = props.cssBackgroundWindow ? BackgroundWindow({
         monitor: props.monitor ?? 0,
-        layer: props.layer!,
-        css: props.cssBackgroundWindow ?? "", 
-        onAction: () => window.close()
-    });
+        layer: props.layer,
+        css: props.cssBackgroundWindow,
+    }) : undefined;
 
-    const window = new Widget.Window({
+    return new Widget.Window({
         ...props,
         namespace: props?.namespace ?? "popup-window",
         className: `popup-window ${(props.namespace instanceof Binding ?
             props.namespace.get() : props.namespace) || ""}`,
         keymode: Astal.Keymode.EXCLUSIVE,
-        layer: props.layer!,
+        anchor: TOP | LEFT | RIGHT | BOTTOM,
+        exclusivity: props.exclusivity ?? Astal.Exclusivity.NORMAL,
+        halign: undefined,
+        valign: undefined,
+        focusOnMap: true,
+        widthRequest: undefined,
+        heightRequest: undefined,
+        marginTop: undefined,
+        marginBottom: undefined,
+        marginLeft: undefined,
+        marginRight: undefined,
         onDestroy: (self) => {
-            bgWindow.close();
+            bgWindow?.close();
             props.onDestroy?.(self);
         },
+        onButtonPressEvent: (self, event) => {
+            if((event.get_button()[1] === Gdk.BUTTON_PRIMARY ||
+               event.get_button()[1] === Gdk.BUTTON_SECONDARY)) {
+
+                const [ , x, y ] = event.get_coords();
+                const allocation = (self.get_child()! as Widget.Box).get_child()!.get_allocation();
+
+                if((x < allocation.x || x > (allocation.x + allocation.width)) ||
+                   (y < allocation.y || y > (allocation.y + allocation.height))) {
+
+                    self.close();
+                }
+            }
+        },
         onKeyPressEvent: (self, event: Gdk.Event) => {
             if(event.get_keyval()[1] === Gdk.KEY_Escape) {
                 self.close();
@@ -40,7 +87,24 @@ export function PopupWindow(props: PopupWindowProps): Widget.Window {
 
             props.onKeyPressEvent?.(self, event);
         },
+        child: new Widget.Box({
+            expand: props.expand ?? false,
+            halign: props.halign,
+            valign: props.valign,
+            hexpand: true,
+            css: `box {
+                margin-left: ${props.marginLeft ?? 0}px;
+                margin-right: ${props.marginRight ?? 0}px;
+                margin-top: ${props.marginTop ?? 0}px;
+                margin-bottom: ${props.marginBottom ?? 0}px;
+            }`,
+            
+            child: new Widget.Box({
+                onButtonPressEvent: props.onButtonPressEvent ?? (() => true),
+                widthRequest: props.widthRequest,
+                heightRequest: props.heightRequest,
+                child: props.child
+            } as Widget.BoxProps)
+        } as Widget.BoxProps)
     } as Widget.WindowProps);
-
-    return window;
 }