feat(ags osk): add cairo arc for fun

nixosModules/ags/config/eslint.config.ts

@@ -132,6 +132,7 @@ export default tseslint.config({
         'no-loop-func': [
             'error',
         ],
+        /*
         'no-magic-numbers': [
             'error',
             {
@@ -159,6 +160,7 @@ export default tseslint.config({
                 ignoreClassFieldInitialValues: true,
             },
         ],
+        */
         'no-multi-assign': [
             'error',
         ],

nixosModules/ags/config/widgets/on-screen-keyboard/_index.scss

@@ -18,7 +18,6 @@
 
 .osk {
     padding-top: 4px;
-    border-radius: 10px 10px 0;
 
     &.hidden {
         opacity: 0;
@@ -83,6 +82,8 @@
         }
 
         &.right-side {
+            border-radius: 0 10px 0 0;
+
             .key .mod {
                 &.Ctrl {
                     min-width: 2.4rem;
@@ -91,6 +92,8 @@
         }
 
         &.left-side {
+            border-radius: 10px 0 0 0;
+
             .key .mod {
                 &.Alt {
                     min-width: 3rem;

nixosModules/ags/config/widgets/on-screen-keyboard/arcs.tsx

@@ -0,0 +1,74 @@
+import { Gtk } from 'astal/gtk3';
+import Cairo from 'cairo';
+
+/* Types */
+interface Point {
+    x: number
+    y: number
+}
+type Bezier = [number, number, number, number];
+
+export default ({
+    css = 'background-color: black;',
+    allocation = { width: 0, height: 0 },
+}) => (
+    <box>
+        <drawingarea
+            css={css}
+
+            setup={(widget) => {
+                widget.set_size_request(allocation.width, allocation.height);
+
+                const styleContext = widget.get_style_context();
+                const bgColor = styleContext.get_background_color(Gtk.StateFlags.NORMAL);
+
+                widget.connect('draw', (_, cairoContext: Cairo.Context) => {
+                    const drawBezier = (dest: Point, curve: Bezier) => {
+                        curve[0] *= (dest.x - cairoContext.getCurrentPoint()[0]);
+                        curve[0] += cairoContext.getCurrentPoint()[0];
+
+                        curve[1] *= (dest.y - cairoContext.getCurrentPoint()[1]);
+                        curve[1] += cairoContext.getCurrentPoint()[1];
+
+                        curve[2] *= (dest.x - cairoContext.getCurrentPoint()[0]);
+                        curve[2] += cairoContext.getCurrentPoint()[0];
+
+                        curve[3] *= (dest.y - cairoContext.getCurrentPoint()[1]);
+                        curve[3] += cairoContext.getCurrentPoint()[1];
+
+                        cairoContext.curveTo(...curve, dest.x, dest.y);
+                    };
+
+                    // bottom left to top left
+                    cairoContext.moveTo(0, allocation.height);
+                    cairoContext.lineTo(0, 0);
+
+                    // top left to middle left
+                    drawBezier(
+                        { x: allocation.width / 3, y: allocation.height * 0.8 },
+                        [0.76, 0, 0.24, 1],
+                    );
+
+                    // middle left to middle right
+                    cairoContext.lineTo((allocation.width / 3) * 2, allocation.height * 0.8);
+
+                    // middle right to top right
+                    drawBezier(
+                        { x: allocation.width, y: 0 },
+                        [0.76, 0, 0.24, 1],
+                    );
+
+                    // top right to bottom right
+                    cairoContext.lineTo(allocation.width, allocation.height);
+
+                    // bottom right to bottom left
+                    cairoContext.closePath();
+
+                    // Add color
+                    cairoContext.setSourceRGBA(bgColor.red, bgColor.green, bgColor.blue, bgColor.alpha);
+                    cairoContext.fill();
+                });
+            }}
+        />
+    </box>
+);

nixosModules/ags/config/widgets/on-screen-keyboard/keyboard.tsx

@@ -1,8 +1,10 @@
+import { bind, idle, Variable } from 'astal';
 import { Astal, astalify, Gtk, type ConstructProps, Widget } from 'astal/gtk3';
 import { register } from 'astal/gobject';
 
 import Separator from '../misc/separator';
 
+import Arc from './arcs';
 import Key from './keys';
 
 import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
@@ -22,18 +24,28 @@ class ToggleButton extends astalify(Gtk.ToggleButton) {
     }
 }
 
-const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4]; // eslint-disable-line
+const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];
-const COLOR = 'rgba(0, 0, 0, 0.3)';
 const SPACING = 4;
+const COLOR = 'rgba(0, 0, 0, 0.3)';
 
-export default () => (
+export default () => {
-    <box vertical>
+    const ThirdWidth = Variable(0);
+
+    return (
+        <box
+            vertical
+            onRealize={(self) => idle(() => {
+                ThirdWidth.set(self.get_allocated_width() / 3);
+            })}
+        >
             <centerbox
-            css={`background: ${COLOR};`}
                 className="osk hidden"
                 hexpand
             >
+                {/* LEFT */}
                 <box
+                    widthRequest={bind(ThirdWidth)}
+                    css={`background: ${COLOR};`}
                     className="left-side side"
                     halign={Gtk.Align.START}
                     vertical
@@ -61,19 +73,45 @@ export default () => (
                     })}
                 </box>
 
+                {/* MIDDLE */}
                 <box
+                    widthRequest={bind(ThirdWidth)}
                     halign={Gtk.Align.CENTER}
-                valign={Gtk.Align.END}
+                    valign={Gtk.Align.FILL}
+                    vertical
                 >
                     <box
-                    halign={Gtk.Align.CENTER}
+                        valign={Gtk.Align.START}
+                    >
+                        {bind(ThirdWidth).as((width) => (
+                            <Arc
+                                allocation={{ width, height: 160 }}
+                                css={`background: ${COLOR};`}
+                            />
+
+                        ))}
+                    </box>
+
+                    <box
+                        halign={Gtk.Align.FILL}
+                        hexpand
+                        vexpand
+                        css={`background: ${COLOR};`}
                         className="settings"
                     >
+                        <centerbox
+                            halign={Gtk.Align.FILL}
+                            hexpand
+                            vexpand
+                        >
+                            <box />
+
                             <ToggleButton
                                 className="button"
                                 cursor="pointer"
                                 active
                                 valign={Gtk.Align.CENTER}
+                                halign={Gtk.Align.CENTER}
 
                                 onToggled={(self) => {
                                     self.toggleClassName(
@@ -95,10 +133,16 @@ export default () => (
                             >
                                 Exclusive
                             </ToggleButton>
+
+                            <box />
+                        </centerbox>
                     </box>
                 </box>
 
+                {/* RIGHT */}
                 <box
+                    widthRequest={bind(ThirdWidth)}
+                    css={`background: ${COLOR};`}
                     className="right-side side"
                     halign={Gtk.Align.END}
                     vertical
@@ -129,3 +173,4 @@ export default () => (
             </centerbox>
         </box>
     ) as Widget.Box;
+};