matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags osk): add cairo arc for fun
All checks were successful
Discord / discord commits (push) Has been skipped
Details

Browse source
This commit is contained in:
matt1432 2024-11-26 19:25:02 -05:00
parent 7775cb71b6
commit 88d0a52a4e
4 changed files with 219 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
nixosModules/ags/config/eslint.config.ts
View file

@ -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',
],

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

@ -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;

74
nixosModules/ags/config/widgets/on-screen-keyboard/arcs.tsx Normal file
View file

@ -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>
);

59
nixosModules/ags/config/widgets/on-screen-keyboard/keyboard.tsx
View file

@ -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 COLOR = 'rgba(0, 0, 0, 0.3)';
const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];
const SPACING = 4;
const COLOR = 'rgba(0, 0, 0, 0.3)';
export default () => (
<box vertical>
export default () => {
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;
};