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