fix: layout keys

src/lib/components/layout/KeyText.svelte

@@ -35,8 +35,8 @@
     font-family={action.icon ? "Material Symbols Rounded" : undefined}
     opacity={isActive ? 1 : inactiveOpacity}
     style:scale={isActive ? 1 : inactiveScale}
-    style:translate={isActive ? "0 0" : `${direction[0]}px ${direction[1]}px`}
-    style:rotate="{rotate}rad"
+    style:translate={isActive ? "0 0 0" : `${direction[0]}px ${direction[1]}px 0`}
+    style:rotate="{rotate}deg"
   >
     {#if action.code !== 0}
       {action.icon || action.id || `0x${action.code?.toString(16)}`}
@@ -52,6 +52,7 @@
   $transition: 200ms;
 
   text {
+    will-change: translate, scale;
     transform-origin: center;
     transform-box: fill-box;
     transition:

src/lib/components/layout/KeyboardKey.svelte

@@ -41,8 +41,8 @@
     {@const p1 = r1 - innerMargin}
     {@const r2 = r1 - sizeY + innerMargin * 2}
     {@const p2 = r2 - innerMargin}
-    {@const multiplier = 1.4}
-    <g style:transform="rotateZ({key.rotate}rad) translate({innerMargin}px, {innerMargin}px)">
+    {@const multiplier = 1.25}
+    <g style:transform="rotateZ({key.rotate}deg) translate({innerMargin}px, {innerMargin}px)">
       <path
         opacity="0.4"
         d="M{posX + p1},{posY} a{r1},{r1} 0 0,1 {-p1},{p1} l0,{-(p1 - p2)} a{r2},{r2} 0 0,0 {p2},{-p2}z"
@@ -54,9 +54,9 @@
         rotate={-key.rotate}
         fontSizeMultiplier={multiplier}
         positions={[
-          [-0.6, -0.6],
-          [0.6, -0.6],
-          [-0.6, 0.6],
+          [-0.5, -0.5],
+          [0.5, -0.5],
+          [-0.5, 0.5],
         ]}
       />
     </g>

src/lib/serialization/visual-layout.ts

@@ -74,14 +74,14 @@ export function compileLayout(layout: VisualLayout): CompiledLayout {
       } else if ("switch" in info) {
         const cx = x + ox + 1
         const cy = y + oy + 1
-        for (const [id, i] of [info.switch.n, info.switch.e, info.switch.s, info.switch.w].entries()) {
+        for (const [i, id] of [info.switch.n, info.switch.e, info.switch.s, info.switch.w].entries()) {
           compiled.keys.push({
             id,
             shape: "quarter-circle",
             cornerRadius: 0,
             size: [2, 0.6],
             pos: [cx, cy],
-            rotate: (Math.PI / 2) * i + Math.PI / 4,
+            rotate: 90 * i + 45,
           })
         }
         compiled.keys.push({

src/routes/config/layout/+page.svelte

@@ -57,7 +57,7 @@
 
   setContext<VisualLayoutConfig>("visual-layout-config", {
     scale: 50,
-    inactiveScale: 0.6,
+    inactiveScale: 0.5,
     inactiveOpacity: 0.4,
     strokeWidth: 1,
     margin: 5,