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 = () => (
+
+ {RoundedCorner('topleft')}
+
+);
+
+const TopRight = () => (
+
+ {RoundedCorner('topright')}
+
+);
+
+const BottomLeft = () => (
+
+ {RoundedCorner('bottomleft')}
+
+);
+
+const BottomRight = () => (
+
+ {RoundedCorner('bottomright')}
+
+);
+
+
+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;',
+) => (
+
+ {
+ 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();
+ });
+ }}
+ />
+
+);