From 80d40d399fac58cba5187027b326f9dfb43ea66c Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Sat, 12 Oct 2024 16:48:23 -0400
Subject: [PATCH] feat(agsV2): add screen corners

---
 nixosModules/ags/v2/app.ts                    |  2 +
 nixosModules/ags/v2/widgets/corners/main.tsx  | 68 ++++++++++++++++
 .../ags/v2/widgets/corners/screen-corners.tsx | 81 +++++++++++++++++++
 3 files changed, 151 insertions(+)
 create mode 100644 nixosModules/ags/v2/widgets/corners/main.tsx
 create mode 100644 nixosModules/ags/v2/widgets/corners/screen-corners.tsx

diff --git a/nixosModules/ags/v2/app.ts b/nixosModules/ags/v2/app.ts
index 4723f1f8..2765fae1 100644
--- a/nixosModules/ags/v2/app.ts
+++ b/nixosModules/ags/v2/app.ts
@@ -4,6 +4,7 @@ import style from './style.scss';
 
 import Bar from './widgets/bar/wim';
 import BgFade from './widgets/bg-fade/main';
+import Corners from './widgets/corners/main';
 
 
 App.start({
@@ -12,5 +13,6 @@ App.start({
     main: () => {
         Bar();
         BgFade();
+        Corners();
     },
 });
diff --git a/nixosModules/ags/v2/widgets/corners/main.tsx b/nixosModules/ags/v2/widgets/corners/main.tsx
new file mode 100644
index 00000000..6ebdb19b
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/corners/main.tsx
@@ -0,0 +1,68 @@
+import { Astal } from 'astal';
+
+import RoundedCorner from './screen-corners';
+
+
+const TopLeft = () => (
+    <window
+        name="cornertl"
+        layer={Astal.Layer.OVERLAY}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={
+            Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT
+        }
+        clickThrough={true}
+    >
+        {RoundedCorner('topleft')}
+    </window>
+);
+
+const TopRight = () => (
+    <window
+        name="cornertr"
+        layer={Astal.Layer.OVERLAY}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={
+            Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT
+        }
+        clickThrough={true}
+    >
+        {RoundedCorner('topright')}
+    </window>
+);
+
+const BottomLeft = () => (
+    <window
+        name="cornerbl"
+        layer={Astal.Layer.OVERLAY}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={
+            Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT
+        }
+        clickThrough={true}
+    >
+        {RoundedCorner('bottomleft')}
+    </window>
+);
+
+const BottomRight = () => (
+    <window
+        name="cornerbr"
+        layer={Astal.Layer.OVERLAY}
+        exclusivity={Astal.Exclusivity.IGNORE}
+        anchor={
+            Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT
+        }
+        clickThrough={true}
+    >
+        {RoundedCorner('bottomright')}
+    </window>
+);
+
+
+export default () => [
+    TopLeft(),
+    TopRight(),
+    BottomLeft(),
+    BottomRight(),
+];
diff --git a/nixosModules/ags/v2/widgets/corners/screen-corners.tsx b/nixosModules/ags/v2/widgets/corners/screen-corners.tsx
new file mode 100644
index 00000000..0a786c41
--- /dev/null
+++ b/nixosModules/ags/v2/widgets/corners/screen-corners.tsx
@@ -0,0 +1,81 @@
+import { Gtk } from 'astal';
+import Cairo from 'cairo';
+
+
+export default (
+    place = 'top left',
+    css = 'background-color: black;',
+) => (
+    <box
+        halign={place.includes('left') ? Gtk.Align.START : Gtk.Align.END}
+        valign={place.includes('top') ? Gtk.Align.START : Gtk.Align.END}
+
+        css={`
+            padding: 1px; margin:
+                ${place.includes('top') ? '-1px' : '0'}
+                ${place.includes('right') ? '-1px' : '0'}
+                ${place.includes('bottom') ? '-1px' : '0'}
+                ${place.includes('left') ? '-1px' : '0'};
+        `}
+    >
+        <drawingarea
+            css={`
+                border-radius: 18px;
+                border-width: 0.068rem;
+                ${css}
+            `}
+
+            setup={(widget) => {
+                const styleContext = widget.get_style_context();
+
+                let radius = styleContext.get_property('border-radius', Gtk.StateFlags.NORMAL) as number;
+
+                widget.set_size_request(radius, radius);
+
+                widget.connect('draw', (_, cairoContext: Cairo.Context) => {
+                    const bgColor = styleContext.get_background_color(Gtk.StateFlags.NORMAL);
+                    const borderColor = styleContext.get_color(Gtk.StateFlags.NORMAL);
+                    const borderWidth = styleContext.get_border(Gtk.StateFlags.NORMAL).left;
+
+                    radius = styleContext.get_property('border-radius', Gtk.StateFlags.NORMAL) as number;
+
+                    widget.set_size_request(radius, radius);
+
+                    switch (place) {
+                        case 'topleft':
+                            cairoContext.arc(radius, radius, radius, Math.PI, 3 * Math.PI / 2);
+                            cairoContext.lineTo(0, 0);
+                            break;
+
+                        case 'topright':
+                            cairoContext.arc(0, radius, radius, 3 * Math.PI / 2, 2 * Math.PI);
+                            cairoContext.lineTo(radius, 0);
+                            break;
+
+                        case 'bottomleft':
+                            cairoContext.arc(radius, 0, radius, Math.PI / 2, Math.PI);
+                            cairoContext.lineTo(0, radius);
+                            break;
+
+                        case 'bottomright':
+                            cairoContext.arc(0, 0, radius, 0, Math.PI / 2);
+                            cairoContext.lineTo(radius, radius);
+                            break;
+                    }
+
+                    cairoContext.closePath();
+                    cairoContext.setSourceRGBA(bgColor.red, bgColor.green, bgColor.blue, bgColor.alpha);
+                    cairoContext.fill();
+                    cairoContext.setLineWidth(borderWidth);
+                    cairoContext.setSourceRGBA(
+                        borderColor.red,
+                        borderColor.green,
+                        borderColor.blue,
+                        borderColor.alpha,
+                    );
+                    cairoContext.stroke();
+                });
+            }}
+        />
+    </box>
+);