fix: Show selection of first key, binding fixes for no-params behaviors.

* Don't ignore a selected key position of `0` for selection rendering of
  the keyboard.
* Properly handle updating the keymap when a behavior with no parameters
  is selected.

Author: petejohanson

src/behaviors/BehaviorBindingPicker.tsx

@@ -52,7 +52,7 @@ function validateBinding(
   param1?: number,
   param2?: number,
 ): boolean {
-  if (param1 === undefined) {
+  if (param1 === undefined || param1 === 0) {
     return metadata.every((s) => !s.param1);
   }
 
@@ -73,7 +73,6 @@ export const BehaviorBindingPicker = ({
   behaviors,
   onBindingChanged,
 }: BehaviorBindingPickerProps) => {
-  console.log("Binding", binding);
   const [behaviorId, setBehaviorId] = useState(binding.behaviorId);
   const [param1, setParam1] = useState<number | undefined>(binding.param1);
   const [param2, setParam2] = useState<number | undefined>(binding.param2);

src/keyboard/Keyboard.tsx

@@ -36,8 +36,8 @@ function renderLayout(
   keymap: Keymap,
   behaviors: BehaviorMap,
   selectedLayoutIndex: number,
-  selectedKeyPosition: number | null,
-  setSelectedKeyPosition: React.Dispatch<SetStateAction<number | null>>,
+  selectedKeyPosition: number | undefined,
+  setSelectedKeyPosition: React.Dispatch<SetStateAction<number | undefined>>,
 ) {
   if (!keymap.layers[selectedLayoutIndex]) {
     return <></>;
@@ -68,7 +68,7 @@ function renderLayout(
   return (
     <PhysicalLayoutComp
       positions={positions}
-      selectedPosition={selectedKeyPosition || undefined}
+      selectedPosition={selectedKeyPosition}
       onPositionClicked={setSelectedKeyPosition}
     />
   );
@@ -202,8 +202,8 @@ export default function Keyboard() {
     (keymap) => keymap?.keymap?.getKeymap,
   );
   const [selectedLayerIndex, setSelectedLayerIndex] = useState<number>(0);
-  const [selectedKeyPosition, setSelectedKeyPosition] = useState<number | null>(
-    null,
+  const [selectedKeyPosition, setSelectedKeyPosition] = useState<number | undefined>(
+    undefined
   );
   const behaviors = useBehaviors();
 
@@ -251,7 +251,7 @@ export default function Keyboard() {
   let doUpdateBinding = useCallback(
     (binding: BehaviorBinding) => {
       console.log("Updatet the binding");
-      if (!keymap || selectedKeyPosition === null) {
+      if (!keymap || selectedKeyPosition === undefined) {
         console.error(
           "Can't update binding without a selected key position and loaded keymap",
         );

src/keyboard/PhysicalLayout.tsx

@@ -55,7 +55,7 @@ export const PhysicalLayout = ({
       className="absolute hover:z-[1000]"
       style={scalePosition(p)}
     >
-      <Key selected={idx == selectedPosition} {...p} />
+      <Key selected={idx === selectedPosition} {...p} />
     </div>
   ));