feat: Auto-zoom keymap layout

Author: Nicell

src/keyboard/Keyboard.tsx

@@ -29,6 +29,7 @@ import { BehaviorBindingPicker } from "../behaviors/BehaviorBindingPicker";
 import { produce } from "immer";
 import { LockStateContext } from "../rpc/LockStateContext";
 import { LockState } from "@zmkfirmware/zmk-studio-ts-client/core";
+import { LayoutZoom } from "./PhysicalLayout";
 
 type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
 
@@ -172,6 +173,7 @@ export default function Keyboard() {
     true
   );
 
+  const [keymapScale, setKeymapScale] = useState<LayoutZoom>("auto");
   const [selectedLayerIndex, setSelectedLayerIndex] = useState<number>(0);
   const [selectedKeyPosition, setSelectedKeyPosition] = useState<
     number | undefined
@@ -514,15 +516,37 @@ export default function Keyboard() {
         )}
       </div>
       {layouts && keymap && behaviors && (
-        <div className="col-start-2 row-start-1 grid items-center justify-center">
+        <div className="col-start-2 row-start-1 grid items-center justify-center relative">
           <KeymapComp
             keymap={keymap}
             layout={layouts[selectedPhysicalLayoutIndex]}
             behaviors={behaviors}
+            scale={keymapScale}
             selectedLayerIndex={selectedLayerIndex}
             selectedKeyPosition={selectedKeyPosition}
             onKeyPositionClicked={setSelectedKeyPosition}
           />
+          <select
+            className="absolute top-2 right-2 h-8 rounded px-2"
+            value={keymapScale}
+            onChange={(e) => {
+              const value = e.target.value;
+              if (value === "auto") {
+                setKeymapScale("auto");
+              } else {
+                setKeymapScale(parseFloat(value));
+              }
+            }}
+          >
+            <option value="auto">Auto</option>
+            <option value={0.25}>25%</option>
+            <option value={0.5}>50%</option>
+            <option value={0.75}>75%</option>
+            <option value={1}>100%</option>
+            <option value={1.25}>125%</option>
+            <option value={1.5}>150%</option>
+            <option value={2}>200%</option>
+          </select>
         </div>
       )}
       {keymap && selectedBinding && (

src/keyboard/Keymap.tsx

@@ -9,14 +9,15 @@ import {
   hid_usage_page_and_id_from_usage,
 } from "../hid-usages";
 
-import { PhysicalLayout as PhysicalLayoutComp } from "./PhysicalLayout";
+import { LayoutZoom, PhysicalLayout as PhysicalLayoutComp } from "./PhysicalLayout";
 
 type BehaviorMap = Record<number, GetBehaviorDetailsResponse>;
 
 export interface KeymapProps {
   layout: PhysicalLayout;
   keymap: KeymapMsg;
   behaviors: BehaviorMap;
+  scale: LayoutZoom;
   selectedLayerIndex: number;
   selectedKeyPosition: number | undefined;
   onKeyPositionClicked: (keyPosition: number) => void;
@@ -26,6 +27,7 @@ export const Keymap = ({
   layout,
   keymap,
   behaviors,
+  scale,
   selectedLayerIndex,
   selectedKeyPosition,
   onKeyPositionClicked,
@@ -75,6 +77,7 @@ export const Keymap = ({
       positions={positions}
       oneU={48}
       hoverZoom={true}
+      zoom={scale}
       selectedPosition={selectedKeyPosition}
       onPositionClicked={onKeyPositionClicked}
     />

src/keyboard/PhysicalLayout.tsx

@@ -1,4 +1,10 @@
-import { CSSProperties, PropsWithChildren } from "react";
+import {
+  CSSProperties,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Key } from "./Key";
 
 export type KeyPosition = PropsWithChildren<{
@@ -12,11 +18,14 @@ export type KeyPosition = PropsWithChildren<{
   ry?: number;
 }>;
 
+export type LayoutZoom = number | "auto";
+
 interface PhysicalLayoutProps {
   positions: Array<KeyPosition>;
   selectedPosition?: number;
   oneU?: number;
   hoverZoom?: boolean;
+  zoom?: LayoutZoom;
   onPositionClicked?: (position: number) => void;
 }
 
@@ -30,7 +39,7 @@ interface PhysicalLayoutPositionLocation {
 
 function scalePosition(
   { x, y, r, rx, ry }: PhysicalLayoutPositionLocation,
-  oneU: number
+  oneU: number,
 ): CSSProperties {
   let left = x * oneU;
   let top = y * oneU;
@@ -61,6 +70,42 @@ export const PhysicalLayout = ({
   onPositionClicked,
   ...props
 }: PhysicalLayoutProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const parent = element.parentElement;
+    if (!parent) return;
+
+    const calculateScale = () => {
+      if (props.zoom === "auto") {
+        const newScale = Math.min(
+          parent.clientWidth / element.clientWidth,
+          parent.clientHeight / element.clientHeight,
+        );
+        setScale(newScale);
+      } else {
+        setScale(props.zoom || 1);
+      }
+    };
+
+    calculateScale(); // Initial calculation
+
+    const resizeObserver = new ResizeObserver(() => {
+      calculateScale();
+    });
+
+    resizeObserver.observe(element);
+    resizeObserver.observe(parent);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [props.zoom]);
+
   // TODO: Add a bit of padding for rotation when supported
   let rightMost = positions
     .map((k) => k.x + k.width)
@@ -88,14 +133,20 @@ export const PhysicalLayout = ({
 
   return (
     <div
-      className="relative"
-      style={{
-        height: bottomMost * oneU + "px",
-        width: rightMost * oneU + "px",
-      }}
-      {...props}
+      className="p-4 box-content"
+      ref={ref}
+      style={{ transform: `scale(${scale})` }}
     >
-      {positionItems}
+      <div
+        className="relative"
+        style={{
+          height: bottomMost * oneU + "px",
+          width: rightMost * oneU + "px",
+        }}
+        {...props}
+      >
+        {positionItems}
+      </div>
     </div>
   );
 };