Skip to content

Commit 943ce91

Browse files
aradziearadzie
committed
feat: display the space key
1 parent f33ed38 commit 943ce91

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+232
-134
lines changed

‎packages/keybr-keyboard-generator/lib/util/generate.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ export function writeGeneratedFile(keymap: KeyMap, filename: string): void {
1010
.toUpperCase()
1111
.replaceAll("-", "_")
1212
.replaceAll(".", "_");
13-
const codePointDict = toCodePointDict(keymap);
14-
const sourceFile = generateSourceFile(id, codePointDict);
13+
const dict = toCodePointDict(keymap);
14+
const sourceFile = generateSourceFile(id, dict);
1515
writeFileSync(filename, sourceFile);
1616
}
1717

‎packages/keybr-keyboard-generator/lib/util/keys.ts

+2
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,6 @@ export const characterKeys: readonly KeyId[] = [
6161
"Period",
6262
"Slash",
6363
"IntlRo",
64+
// ---
65+
"Space",
6466
];

‎packages/keybr-keyboard-generator/lib/util/layout.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export function toCodePointDict(keymap: KeyMap): CodePointDict {
7171
for (const keyId of characterKeys) {
7272
map.set(keyId, codePointsOf(keyId, keymap[keyId]));
7373
}
74-
return Object.fromEntries(map) as any;
74+
return { ...Object.fromEntries(map), Space: [0x0020] };
7575
}
7676

7777
function codePointsOf(keyId: KeyId, list: CodePointList | null): CodePoint[] {

‎packages/keybr-keyboard-ui/lib/Key.test.tsx.md

+24-24
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,30 @@ Generated by [AVA](https://avajs.dev).
2121
},
2222
type: 'rect',
2323
},
24+
{
25+
children: null,
26+
props: {
27+
className: 'bump',
28+
cx: 19,
29+
cy: 33,
30+
r: 3,
31+
},
32+
type: 'circle',
33+
},
34+
{
35+
children: [
36+
'XYZ',
37+
],
38+
props: {
39+
className: 'symbol',
40+
direction: 'ltr',
41+
dominantBaseline: 'middle',
42+
textAnchor: 'middle',
43+
x: 20,
44+
y: 20,
45+
},
46+
type: 'text',
47+
},
2448
{
2549
children: [
2650
'A',
@@ -77,30 +101,6 @@ Generated by [AVA](https://avajs.dev).
77101
},
78102
type: 'text',
79103
},
80-
{
81-
children: [
82-
'XYZ',
83-
],
84-
props: {
85-
className: 'symbol',
86-
direction: 'ltr',
87-
dominantBaseline: 'middle',
88-
textAnchor: 'middle',
89-
x: 20,
90-
y: 20,
91-
},
92-
type: 'text',
93-
},
94-
{
95-
children: null,
96-
props: {
97-
className: 'bump',
98-
cx: 20,
99-
cy: 33,
100-
r: 3,
101-
},
102-
type: 'circle',
103-
},
104104
],
105105
props: {
106106
className: 'key',

‎packages/keybr-keyboard-ui/lib/Key.test.tsx.snap

1 Byte
Binary file not shown.

‎packages/keybr-keyboard-ui/lib/Key.tsx

+27-32
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import {
44
type LabelShape,
55
type ZoneId,
66
} from "@keybr/keyboard";
7+
import { type CodePoint } from "@keybr/unicode";
8+
import { type ClassName } from "@keybr/widget";
79
import { clsx } from "clsx";
810
import {
911
type FunctionComponent,
@@ -27,23 +29,29 @@ export type KeyProps = {
2729
};
2830

2931
export function makeKeyComponent(shape: KeyShape): FunctionComponent<KeyProps> {
32+
const { id, a, b, c, d, finger } = shape;
33+
const x = shape.x * keySize;
34+
const y = shape.y * keySize;
35+
const w = shape.w * keySize - keyGap;
36+
const h = shape.h * keySize - keyGap;
3037
const children: ReactNode[] = [];
3138
children.push(
3239
shape.shape ? (
3340
<path className={styles.button} d={shape.shape} />
3441
) : (
35-
<rect
36-
className={styles.button}
37-
x={0}
38-
y={0}
39-
width={shape.w * keySize - keyGap}
40-
height={shape.h * keySize - keyGap}
41-
/>
42+
<rect className={styles.button} x={0} y={0} width={w} height={h} />
4243
),
4344
);
44-
const { a, b, c, d } = shape;
45-
const ab = a > 0 && b > 0 && keySymbol(a) === keySymbol(b);
46-
const cd = c > 0 && d > 0 && keySymbol(c) === keySymbol(d);
45+
if (shape.homing) {
46+
children.push(
47+
<circle className={styles.bump} cx={w / 2} cy={h - 5} r={3} />,
48+
);
49+
}
50+
for (const label of shape.labels) {
51+
children.push(makeLabel(label));
52+
}
53+
const ab = a > 0 && b > 0 && symbolText(a) === symbolText(b);
54+
const cd = c > 0 && d > 0 && symbolText(c) === symbolText(d);
4755
if (a > 0 && !ab) {
4856
children.push(makeSymbolLabel(a, 10, 27, styles.secondarySymbol));
4957
}
@@ -62,18 +70,6 @@ export function makeKeyComponent(shape: KeyShape): FunctionComponent<KeyProps> {
6270
if (c > 0 && cd) {
6371
children.push(makeSymbolLabel(c, 25, 27, styles.primarySymbol));
6472
}
65-
for (const label of shape.labels) {
66-
children.push(makeLabel(label));
67-
}
68-
if (shape.homing) {
69-
children.push(<circle className={styles.bump} cx={20} cy={33} r={3} />);
70-
}
71-
const id = shape.id;
72-
const x = shape.x * keySize;
73-
const y = shape.y * keySize;
74-
const w = shape.w * keySize - keyGap;
75-
const h = shape.h * keySize - keyGap;
76-
const finger = shape.finger;
7773
function KeyComponent({
7874
depressed,
7975
toggled,
@@ -111,7 +107,7 @@ export function makeKeyComponent(shape: KeyShape): FunctionComponent<KeyProps> {
111107
return memo(KeyComponent);
112108
}
113109

114-
function makeLabel(label: LabelShape, className: any = null): ReactNode {
110+
function makeLabel(label: LabelShape, className: ClassName = null): ReactNode {
115111
const { text, pos = [10, 20], align = ["s", "m"] } = label;
116112
const [x, y] = pos;
117113
const [ha, va] = align;
@@ -157,29 +153,28 @@ function makeSymbolLabel(
157153
codePoint: number,
158154
x: number,
159155
y: number,
160-
className: any,
156+
className: ClassName,
161157
): ReactNode {
158+
if (codePoint === 0x0020) {
159+
return null;
160+
}
162161
let text: string;
163162
if (isDiacritic(codePoint)) {
164-
text = deadKeySymbol(codePoint);
165-
className = clsx(styles.deadSymbol, className);
163+
text = String.fromCodePoint(/* ◌ */ 0x25cc, codePoint);
164+
className = clsx(className, styles.deadSymbol);
166165
} else {
167-
text = keySymbol(codePoint);
166+
text = symbolText(codePoint);
168167
}
169168
return makeLabel({ text, pos: [x, y], align: ["m", "m"] }, className);
170169
}
171170

172-
function keySymbol(codePoint: number): string {
171+
function symbolText(codePoint: CodePoint): string {
173172
if (codePoint === /* ß */ 0x00df || codePoint === /* ẞ */ 0x1e9e) {
174173
return "ẞ";
175174
}
176175
return String.fromCodePoint(codePoint).toUpperCase();
177176
}
178177

179-
function deadKeySymbol(codePoint: number): string {
180-
return String.fromCodePoint(/* ◌ */ 0x25cc, codePoint);
181-
}
182-
183178
function fingerStyleName(finger: ZoneId | null): string | null {
184179
switch (finger) {
185180
case "pinky":

‎packages/keybr-keyboard-ui/lib/KeyLayer.test.tsx.md

+40-40
Original file line numberDiff line numberDiff line change
@@ -1623,6 +1623,16 @@ Generated by [AVA](https://avajs.dev).
16231623
},
16241624
type: 'rect',
16251625
},
1626+
{
1627+
children: null,
1628+
props: {
1629+
className: 'bump',
1630+
cx: 19,
1631+
cy: 33,
1632+
r: 3,
1633+
},
1634+
type: 'circle',
1635+
},
16261636
{
16271637
children: [
16281638
'F',
@@ -1637,16 +1647,6 @@ Generated by [AVA](https://avajs.dev).
16371647
},
16381648
type: 'text',
16391649
},
1640-
{
1641-
children: null,
1642-
props: {
1643-
className: 'bump',
1644-
cx: 20,
1645-
cy: 33,
1646-
r: 3,
1647-
},
1648-
type: 'circle',
1649-
},
16501650
],
16511651
props: {
16521652
className: 'key',
@@ -1762,6 +1762,16 @@ Generated by [AVA](https://avajs.dev).
17621762
},
17631763
type: 'rect',
17641764
},
1765+
{
1766+
children: null,
1767+
props: {
1768+
className: 'bump',
1769+
cx: 19,
1770+
cy: 33,
1771+
r: 3,
1772+
},
1773+
type: 'circle',
1774+
},
17651775
{
17661776
children: [
17671777
'J',
@@ -1776,16 +1786,6 @@ Generated by [AVA](https://avajs.dev).
17761786
},
17771787
type: 'text',
17781788
},
1779-
{
1780-
children: null,
1781-
props: {
1782-
className: 'bump',
1783-
cx: 20,
1784-
cy: 33,
1785-
r: 3,
1786-
},
1787-
type: 'circle',
1788-
},
17891789
],
17901790
props: {
17911791
className: 'key',
@@ -4431,6 +4431,16 @@ Generated by [AVA](https://avajs.dev).
44314431
},
44324432
type: 'rect',
44334433
},
4434+
{
4435+
children: null,
4436+
props: {
4437+
className: 'bump',
4438+
cx: 19,
4439+
cy: 33,
4440+
r: 3,
4441+
},
4442+
type: 'circle',
4443+
},
44344444
{
44354445
children: [
44364446
'F',
@@ -4445,16 +4455,6 @@ Generated by [AVA](https://avajs.dev).
44454455
},
44464456
type: 'text',
44474457
},
4448-
{
4449-
children: null,
4450-
props: {
4451-
className: 'bump',
4452-
cx: 20,
4453-
cy: 33,
4454-
r: 3,
4455-
},
4456-
type: 'circle',
4457-
},
44584458
],
44594459
props: {
44604460
className: 'key',
@@ -4570,6 +4570,16 @@ Generated by [AVA](https://avajs.dev).
45704570
},
45714571
type: 'rect',
45724572
},
4573+
{
4574+
children: null,
4575+
props: {
4576+
className: 'bump',
4577+
cx: 19,
4578+
cy: 33,
4579+
r: 3,
4580+
},
4581+
type: 'circle',
4582+
},
45734583
{
45744584
children: [
45754585
'J',
@@ -4584,16 +4594,6 @@ Generated by [AVA](https://avajs.dev).
45844594
},
45854595
type: 'text',
45864596
},
4587-
{
4588-
children: null,
4589-
props: {
4590-
className: 'bump',
4591-
cx: 20,
4592-
cy: 33,
4593-
r: 3,
4594-
},
4595-
type: 'circle',
4596-
},
45974597
],
45984598
props: {
45994599
className: 'key',

‎packages/keybr-keyboard-ui/lib/KeyLayer.test.tsx.snap

32 Bytes
Binary file not shown.

‎packages/keybr-keyboard/lib/data/layout/be_by-win.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_BE_BY_WIN: CodePointDict = {
5252
Comma: [/* б */ 0x0431, /* Б */ 0x0411],
5353
Period: [/* ю */ 0x044e, /* Ю */ 0x042e],
5454
Slash: [/* . */ 0x002e, /* , */ 0x002c],
55+
Space: [/* SPACE */ 0x0020],
5556
};

‎packages/keybr-keyboard/lib/data/layout/cs_cz-win.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_CS_CZ_WIN: CodePointDict = {
5252
Comma: [/* , */ 0x002c, /* ? */ 0x003f, /* < */ 0x003c],
5353
Period: [/* . */ 0x002e, /* : */ 0x003a, /* > */ 0x003e],
5454
Slash: [/* - */ 0x002d, /* _ */ 0x005f, /* * */ 0x002a],
55+
Space: [/* SPACE */ 0x0020],
5556
};

‎packages/keybr-keyboard/lib/data/layout/de_bone.ts

+1
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,5 @@ export const LAYOUT_DE_BONE: CodePointDict = {
5050
Comma: [/* , */ 0x002c, /* – */ 0x2013],
5151
Period: [/* . */ 0x002e, /* • */ 0x2022],
5252
Slash: [/* k */ 0x006b, /* K */ 0x004b],
53+
Space: [/* SPACE */ 0x0020],
5354
};

‎packages/keybr-keyboard/lib/data/layout/de_ch-win.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_DE_CH_WIN: CodePointDict = {
5252
Comma: [/* , */ 0x002c, /* ; */ 0x003b],
5353
Period: [/* . */ 0x002e, /* : */ 0x003a],
5454
Slash: [/* - */ 0x002d, /* _ */ 0x005f],
55+
Space: [/* SPACE */ 0x0020],
5556
};

‎packages/keybr-keyboard/lib/data/layout/de_de-win.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_DE_DE_WIN: CodePointDict = {
5252
Comma: [/* , */ 0x002c, /* ; */ 0x003b],
5353
Period: [/* . */ 0x002e, /* : */ 0x003a],
5454
Slash: [/* - */ 0x002d, /* _ */ 0x005f],
55+
Space: [/* SPACE */ 0x0020],
5556
};

‎packages/keybr-keyboard/lib/data/layout/de_mine.ts

+1
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,5 @@ export const LAYOUT_DE_MINE: CodePointDict = {
5050
Comma: [/* , */ 0x002c, /* – */ 0x2013],
5151
Period: [/* . */ 0x002e, /* • */ 0x2022],
5252
Slash: [/* k */ 0x006b, /* K */ 0x004b],
53+
Space: [/* SPACE */ 0x0020],
5354
};

‎packages/keybr-keyboard/lib/data/layout/de_neo_2.ts

+1
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,5 @@ export const LAYOUT_DE_NEO_2: CodePointDict = {
5050
Comma: [/* , */ 0x002c, /* – */ 0x2013],
5151
Period: [/* . */ 0x002e, /* • */ 0x2022],
5252
Slash: [/* j */ 0x006a, /* J */ 0x004a],
53+
Space: [/* SPACE */ 0x0020],
5354
};

‎packages/keybr-keyboard/lib/data/layout/el_gr-win.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_EL_GR_WIN: CodePointDict = {
5252
Comma: [/* , */ 0x002c, /* < */ 0x003c],
5353
Period: [/* . */ 0x002e, /* > */ 0x003e],
5454
Slash: [/* / */ 0x002f, /* ? */ 0x003f],
55+
Space: [/* SPACE */ 0x0020],
5556
};

‎packages/keybr-keyboard/lib/data/layout/en_canary_matrix.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_EN_CANARY_MATRIX: CodePointDict = {
5252
Comma: [/* / */ 0x002f, /* ? */ 0x003f],
5353
Period: [/* , */ 0x002c, /* < */ 0x003c],
5454
Slash: [/* . */ 0x002e, /* > */ 0x003e],
55+
Space: [/* SPACE */ 0x0020],
5556
};

‎packages/keybr-keyboard/lib/data/layout/en_colemak.ts

+1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,5 @@ export const LAYOUT_EN_COLEMAK: CodePointDict = {
5252
Comma: [/* , */ 0x002c, /* < */ 0x003c],
5353
Period: [/* . */ 0x002e, /* > */ 0x003e],
5454
Slash: [/* / */ 0x002f, /* ? */ 0x003f],
55+
Space: [/* SPACE */ 0x0020],
5556
};

0 commit comments

Comments
 (0)