Fix text positioning on wide keys

keyboards/kanata/laptop/lens.json

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

keyboards/qmk/ferris-sweep/config.lens

@@ -38,7 +38,7 @@ section
     end
 
     layer red topright #0b00d9
-    1 2 3 4 ⚔️   ⏪ ⏬ ⏫ ⏩  🗑️
+    1 2 3 4 ⚔️   🏠 ⏬ ⏫ 🔚 🗑️
     5 6 7 8 ⚔️   ◄  ▼  ▲  ►  ⚔️
     9 0 ⚔️ ⚔️ ⚔️   ⚔️  ⚔️  ⚔️  ⚔️  ⚔️
           ⚔️ ⚔️   ⚔️  🟪
@@ -46,8 +46,8 @@ section
 
     layer blue topleft #b80034
     ! @ [ ( %   ^ & * ~ `
-    < { ] ) ?   -  _ / = ;
-    > } $ ? ⚔️   —  | \ + "
+    < { ] ) ?   | - / = ;
+    > } $ ? ⚔️   — _ \ + "
          🟪 ⚔️   ⚔️ ⚔️
     end
 

layout-lens/src/render.ts

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