feat: Add limits for usages in the list, re-render fixes.

Author: petejohanson

src/behaviors/BehaviorBindingPicker.stories.ts

@@ -20,7 +20,6 @@ const meta = {
   args: {
     layerNames: ["Main", "Fn"],
     onBindingChanged: fn(),
-    // onPhysicalLayoutClicked: fn(),
   },
 } satisfies Meta<typeof BehaviorBindingPicker>;
 
@@ -34,7 +33,7 @@ export const Example: Story = {
       {
         id: 0,
         displayName: "Key Press",
-        metadata: [{ param1: [{ name: "Key", hidUsage: {} }], param2: [] }],
+        metadata: [{ param1: [{ name: "Key", hidUsage: { consumerMax: 0, keyboardMax: 0 } }], param2: [] }],
       },
     ],
   },

src/behaviors/HidUsagePicker.stories.ts

@@ -21,12 +21,12 @@ type Story = StoryObj<typeof meta>;
 
 export const Keyboard: Story = {
   args: {
-    usagePages: [7],
+    usagePages: [{ id: 7 }],
   },
 };
 
 export const KeyboardAndConsumer: Story = {
   args: {
-    usagePages: [7, 12],
+    usagePages: [{ id: 7 }, { id: 12 }],
   },
 };

src/behaviors/HidUsagePicker.tsx

@@ -17,23 +17,56 @@ import {
 } from "../hid-usages";
 import { useCallback, useMemo } from "react";
 
+export interface HidUsagePage {
+  id: number;
+  min?: number;
+  max?: number;
+}
+
 export interface HidUsagePickerProps {
+  label?: string;
   value?: number;
-  usagePages: number[];
+  usagePages: HidUsagePage[];
   onValueChanged: (value?: number) => void;
 }
 
+type UsageSectionProps = HidUsagePage;
+
+const UsageSection = ({id, min, max}: UsageSectionProps) => {
+  const info = useMemo(() => hid_usage_page_get_ids(id), [id]);
+
+  let usages = useMemo(() => {
+    let usages = info?.UsageIds || [];
+    if (max || min) {
+      usages = usages.filter(i => i.Id <= (max || Number.MAX_SAFE_INTEGER) && i.Id >= (min || 0));
+    }
+
+    return usages;
+  }, [id, min, max, info]);
+
+  return (
+    <Section id={id}>
+      <Header className="text-text-base/50">{info?.Name}</Header>
+      <Collection items={usages}>
+        {(i) => (
+          <ListBoxItem
+            className="rac-hover:text-accent pl-3 relative rac-focus:text-accent cursur-default select-none rac-selected:before:content-['✔'] before:absolute before:left-[0] before:top-[0]"
+            id={hid_usage_from_page_and_id(id, i.Id)}
+          >
+            {i.Name}
+          </ListBoxItem>
+        )}
+      </Collection>
+    </Section>
+  );
+}
+
 export const HidUsagePicker = ({
+  label,
   value,
   usagePages,
   onValueChanged,
 }: HidUsagePickerProps) => {
-  let pageObjects = useMemo(() => {
-    return usagePages
-      .map((p) => ({ id: p, info: hid_usage_page_get_ids(p) }))
-      .filter((i) => !!i.info);
-  }, [usagePages]);
-
   const selectionChanged = useCallback(
     (e: Key | null) => {
       let value = typeof e == "number" ? e : undefined;
@@ -44,7 +77,7 @@ export const HidUsagePicker = ({
 
   return (
     <ComboBox selectedKey={value} onSelectionChange={selectionChanged}>
-      <Label>HID Usage</Label>
+      { label && <Label>{label}</Label> }
       <div>
         <Input className="p-1 rounded" />
         <Button className="ml-[-1.75em] px-[0.25em] py-0 rounded rounded-md bg-accent w-6 h-6">
@@ -53,25 +86,11 @@ export const HidUsagePicker = ({
       </div>
       <Popover className="w-[var(--trigger-width)] max-h-4 border rounded border-text-base bg-bg-base">
         <ListBox
-          items={pageObjects}
+          items={usagePages}
           className="block max-h-[30vh] min-h-[unset] overflow-auto m-2"
           selectionMode="single"
         >
-          {(p) => (
-            <Section id={p.id}>
-              <Header className="text-text-base/50">{p.info?.Name}</Header>
-              <Collection items={p.info?.UsageIds}>
-                {(i) => (
-                  <ListBoxItem
-                    className="rac-hover:text-accent ml-2 rac-focus:text-accent cursur-default select-none"
-                    id={hid_usage_from_page_and_id(p.id, i.Id)}
-                  >
-                    {i.Name}
-                  </ListBoxItem>
-                )}
-              </Collection>
-            </Section>
-          )}
+          {({id, min, max}) => <UsageSection id={id} min={min} max={max} />}
         </ListBox>
       </Popover>
     </ComboBox>

src/behaviors/ParameterValuePicker.stories.ts

@@ -43,7 +43,7 @@ export const Range: Story = {
 
 export const HID: Story = {
   args: {
-    values: [{ name: "Key", hidUsage: {} }],
+    values: [{ name: "Key", hidUsage: { consumerMax: 0, keyboardMax: 0 } }],
   },
 };
 

src/behaviors/ParameterValuePicker.tsx

@@ -17,7 +17,6 @@ export const ParameterValuePicker = ({
   if (values.length == 0) {
     return <></>;
   } else if (values.every((v) => v.constant !== undefined)) {
-    console.log("Loading a constant list wtih", value, values);
     return (
       <div>
         <select
@@ -48,8 +47,9 @@ export const ParameterValuePicker = ({
       return (
         <HidUsagePicker
           onValueChanged={onValueChanged}
+          label={values[0].name}
           value={value}
-          usagePages={[7, 12]}
+          usagePages={[{ id: 7, min: 4, max: values[0].hidUsage.keyboardMax }, { id: 12, max: values[0].hidUsage.consumerMax }]}
         />
       );
     } else if (values[0].layerIndex) {