fix: Proper 2-param behavior editing.

* Fixes for validation of param1 for more complex 2-param behaviors.
* Minor layout fixes.

Author: petejohanson

src/behaviors/BehaviorBindingPicker.tsx

@@ -8,6 +8,7 @@ import {
 import { BehaviorBinding } from "@zmkfirmware/zmk-studio-ts-client/keymap";
 import { BehaviorParametersPicker } from "./BehaviorParametersPicker";
 import { hid_usage_page_and_id_from_usage } from "../hid-usages";
+import { validateValue } from "./parameters";
 
 export interface BehaviorBindingPickerProps {
   binding: BehaviorBinding;
@@ -16,44 +17,17 @@ export interface BehaviorBindingPickerProps {
   onBindingChanged: (binding: BehaviorBinding) => void;
 }
 
-function validateValue(
-  layerIds: number[],
-  value?: number,
-  values?: BehaviorParameterValueDescription[]
-): boolean {
-  if (value === undefined) {
-    return values === undefined || values?.length === 0 || !!values[0].nil;
-  }
-
-  const matchingValue = values?.find((v) => {
-    if (v.constant !== undefined) {
-      return v.constant == value;
-    } else if (v.range) {
-      return value >= v.range.min && value <= v.range.max;
-    } else if (v.hidUsage) {
-      const [page, id] = hid_usage_page_and_id_from_usage(value);
-      return page !== 0 && id !== 0;
-    } else if (v.layerId) {
-      return layerIds.includes(value);
-    } else if (v.nil) {
-      return value === 0;
-    } else {
-      console.error("Unknown check type!");
-      return false;
-    }
-  });
-
-  return !!matchingValue || (value === 0 && (!values || values.length === 0));
-}
-
 function validateBinding(
   metadata: BehaviorBindingParametersSet[],
   layerIds: number[],
   param1?: number,
   param2?: number
 ): boolean {
-  if (param1 === undefined || param1 === 0) {
-    return metadata.every((s) => !s.param1);
+  if (
+    (param1 === undefined || param1 === 0) &&
+    metadata.every((s) => !s.param1 || s.param1.length === 0)
+  ) {
+    return true;
   }
 
   let matchingSet = metadata.find((s) =>
@@ -116,7 +90,6 @@ export const BehaviorBindingPicker = ({
   }, [behaviorId, param1, param2]);
 
   useEffect(() => {
-    console.log("Loading from a changed binding", binding);
     setBehaviorId(binding.behaviorId);
     setParam1(binding.param1);
     setParam2(binding.param2);

src/behaviors/BehaviorParametersPicker.tsx

@@ -1,5 +1,6 @@
 import { BehaviorBindingParametersSet } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
 import { ParameterValuePicker } from "./ParameterValuePicker";
+import { validateValue } from "./parameters";
 
 export interface BehaviorParametersPickerProps {
   param1?: number;
@@ -30,7 +31,11 @@ export const BehaviorParametersPicker = ({
     );
   } else {
     const set = metadata.find((s) =>
-      s.param1.find((v) => v.constant == param1)
+      validateValue(
+        layers.map((l) => l.id),
+        param1,
+        s.param1
+      )
     );
     return (
       <div>
@@ -40,7 +45,7 @@ export const BehaviorParametersPicker = ({
           layers={layers}
           onValueChanged={onParam1Changed}
         />
-        {set?.param2 && set.param2.length > 0 && (
+        {(set?.param2?.length || 0) > 0 && (
           <ParameterValuePicker
             values={set.param2}
             value={param2}

src/behaviors/parameters.ts

@@ -0,0 +1,32 @@
+import { BehaviorParameterValueDescription } from "@zmkfirmware/zmk-studio-ts-client/behaviors";
+import { hid_usage_page_and_id_from_usage } from "../hid-usages";
+
+export function validateValue(
+  layerIds: number[],
+  value?: number,
+  values?: BehaviorParameterValueDescription[]
+): boolean {
+  if (value === undefined) {
+    return values === undefined || values?.length === 0 || !!values[0].nil;
+  }
+
+  const matchingValue = values?.find((v) => {
+    if (v.constant !== undefined) {
+      return v.constant == value;
+    } else if (v.range) {
+      return value >= v.range.min && value <= v.range.max;
+    } else if (v.hidUsage) {
+      const [page, id] = hid_usage_page_and_id_from_usage(value);
+      return page !== 0 && id !== 0;
+    } else if (v.layerId) {
+      return layerIds.includes(value);
+    } else if (v.nil) {
+      return value === 0;
+    } else {
+      console.error("Unknown check type!");
+      return false;
+    }
+  });
+
+  return !!matchingValue || (value === 0 && (!values || values.length === 0));
+}

src/keyboard/Keyboard.tsx

@@ -472,7 +472,7 @@ export default function Keyboard() {
   );
 
   return (
-    <div className="p-2 h-full w-full grid grid-cols-[auto_1fr] grid-rows-[4fr_1fr]">
+    <div className="p-2 grid grid-cols-[auto_1fr] grid-rows-[1fr_minmax(10em,auto)]">
       <div className="flex flex-col gap-2">
         {layouts && (
           <div className="col-start-3 row-start-1 row-end-2">