1
Fork 0

Fix text positioning on wide keys

This commit is contained in:
prescientmoon 2024-02-28 10:11:01 +01:00
parent df70d51ff2
commit 67919277ad
Signed by: prescientmoon
SSH key fingerprint: SHA256:UUF9JT2s8Xfyv76b8ZuVL7XrmimH4o49p4b+iexbVH4
5 changed files with 1563 additions and 782 deletions

View file

@ -7,7 +7,7 @@
"keyStrokeWidth": 1.5 "keyStrokeWidth": 1.5
}, },
"keys": [ "keys": [
["Q", "!", "1", "f1"], ["Q", "+", "1", "f1"],
["A", "<", "6", "f6"], ["A", "<", "6", "f6"],
["X", ">", "", "f11"], ["X", ">", "", "f11"],
["W", "@", "2", "f2"], ["W", "@", "2", "f2"],
@ -21,22 +21,22 @@
["V", ")"], ["V", ")"],
["B", "%", "5", "f5"], ["B", "%", "5", "f5"],
["G", "?", "0", "f10"], ["G", "?", "0", "f10"],
["Z", ""], ["Z", "!"],
["TR", "", ""], ["TR", "", ""],
["␣", "", ""], ["␣", "\\", ""],
["TL", "", ""], ["TL", "", ""],
["J", "^", "🏠", "😱"], ["J", "_", "🏠", "😱"],
["M", "-", "◄", "↩️"], ["M", "-", "◄", "↩️"],
["K", "—", "", "🎮"], ["K", "—", "", "🎮"],
["L", "&", "⏬", "copy"], ["L", "&", "⏬", "copy"],
["N", "_", "▼", "📋"], ["N", "^", "▼", "📋"],
["H", "|", "", "✂️"], ["H", "|", "", "✂️"],
["U", "*", "⏫", "⏩"], ["U", "*", "⏫", "⏩"],
["E", "/", "▲", "⏯️"], ["E", "/", "▲", "⏯️"],
[",", "\\", "", "⏪"], [",", "", "", "⏪"],
["Y", "~", "end", "🔊"], ["Y", "~", "end", "🔊"],
["I", "=", "►", "🔉"], ["I", "=", "►", "🔉"],
[".", "+", "", "🔇"], [".", "", "", "🔇"],
[":", "`", "🗑️", "🔆"], [":", "`", "🗑️", "🔆"],
["O", ";", "", "🔅"], ["O", ";", "", "🔅"],
["'", "\"", ""] ["'", "\"", ""]

File diff suppressed because it is too large Load diff

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 72 KiB

View file

@ -31,30 +31,30 @@ section
layergroup layergroup
layer main center layer main center
Q W F P B J L U Y : Q W F P B J L U Y :
A R S T G M N E I O A R S T G M N E I O
X C D V Z K H , . ' X C D V Z K H , . '
🟥 ␣ ⇧ 🟦 🟥 ␣ ⇧ 🟦
end end
layer red topright #0b00d9 layer red topright #0b00d9
1 2 3 4 ⚔️ ⏪ ⏬ ⏫ ⏩ 🗑️ 1 2 3 4 ⚔️ 🏠 ⏬ ⏫ 🔚 🗑️
5 6 7 8 ⚔️ ◄ ▼ ▲ ► ⚔️ 5 6 7 8 ⚔️ ◄ ▼ ▲ ► ⚔️
9 0 ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ 9 0 ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️
⚔️ ⚔️ ⚔️ 🟪 ⚔️ ⚔️ ⚔️ 🟪
end end
layer blue topleft #b80034 layer blue topleft #b80034
! @ [ ( % ^ & * ~ ` ! @ [ ( % ^ & * ~ `
< { ] ) ? - _ / = ; < { ] ) ? | - / = ;
> } $ ? ⚔️ — | \ + " > } $ ? ⚔️ — _ \ + "
🟪 ⚔️ ⚔️ ⚔️ 🟪 ⚔️ ⚔️ ⚔️
end end
layer purple bottomleft #660099 layer purple bottomleft #660099
f1 f2 f3 f4 f5 😱 copy ⏩ 🔊 🔆 f1 f2 f3 f4 f5 😱 copy ⏩ 🔊 🔆
f6 f7 f8 f9 f10 ↩️ 📋 ⏯️ 🔉 🔅 f6 f7 f8 f9 f10 ↩️ 📋 ⏯️ 🔉 🔅
f11 f12 f4 ⚔️ ⚔️ 🎮 ✂️ ⏪ 🔇 ⚔️ f11 f12 f4 ⚔️ ⚔️ 🎮 ✂️ ⏪ 🔇 ⚔️
⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️ ⚔️
end end
@ -62,15 +62,15 @@ section
columns 2 columns 2
chordgroup chordgroup
A R => ⌥ #39f785 A R => ⌥ #39f785
S T => ⭾ #fdff80 0.8 S T => ⭾ #fdff80 0.8
G M => ⌫ #f9adff G M => ⌫ #f9adff
N E => ⊥ #f58e8e N E => ⊥ #f58e8e
I O => ⌥ #39f785 I O => ⌥ #39f785
chordgroup chordgroup
R S => ⇧ #f9adff R S => ⇧ #f9adff
E I => ⇧ #f9adff E I => ⇧ #f9adff
chordgroup chordgroup
R T => ctrl #fdff80 R T => ctrl #fdff80

File diff suppressed because it is too large Load diff

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 76 KiB

View file

@ -65,6 +65,7 @@ function renderKey(
) { ) {
const withPadding = applyKeyPadding(visual, measurements); const withPadding = applyKeyPadding(visual, measurements);
const center = keyCenter(visual); const center = keyCenter(visual);
const keySize = measurements.keySize - 2 * measurements.keyPadding;
const textOverlays = flags.text const textOverlays = flags.text
? [ ? [
@ -82,8 +83,8 @@ function renderKey(
tag( tag(
"text", "text",
{ {
x: withPadding.position[0] + withPadding.size[0] / 6, x: withPadding.position[0] + keySize / 10,
y: withPadding.position[1] + withPadding.size[1] / 6, y: withPadding.position[1] + keySize / 6,
fill: textColor(colorscheme, key.tlLayer, colorscheme.tlLayerColor), fill: textColor(colorscheme, key.tlLayer, colorscheme.tlLayerColor),
"font-size": "66%", "font-size": "66%",
...textAttribs, ...textAttribs,
@ -94,8 +95,8 @@ function renderKey(
tag( tag(
"text", "text",
{ {
x: withPadding.position[0] + (9 * withPadding.size[0]) / 10, x: withPadding.position[0] + (9 * keySize) / 10,
y: withPadding.position[1] + withPadding.size[1] / 6, y: withPadding.position[1] + keySize / 6,
fill: textColor(colorscheme, key.trLayer, colorscheme.trLayerColor), fill: textColor(colorscheme, key.trLayer, colorscheme.trLayerColor),
"font-size": "66%", "font-size": "66%",
...textAttribs, ...textAttribs,
@ -106,8 +107,8 @@ function renderKey(
tag( tag(
"text", "text",
{ {
x: withPadding.position[0] + withPadding.size[0] / 10, x: withPadding.position[0] + keySize / 10,
y: withPadding.position[1] + (5 * withPadding.size[1]) / 6, y: withPadding.position[1] + (5 * keySize) / 6,
fill: textColor(colorscheme, key.blLayer, colorscheme.blLayerColor), fill: textColor(colorscheme, key.blLayer, colorscheme.blLayerColor),
"font-size": "66%", "font-size": "66%",
...textAttribs, ...textAttribs,