feat: Add HID usage modifier editing.

Author: petejohanson

src/behaviors/HidUsagePicker.stories.ts

@@ -25,6 +25,13 @@ export const Keyboard: Story = {
   },
 };
 
+export const KeyboardModSelection: Story = {
+  args: {
+    usagePages: [{ id: 7 }],
+    value: 458756
+  }
+};
+
 export const KeyboardAndConsumer: Story = {
   args: {
     usagePages: [{ id: 7 }, { id: 12 }],

src/behaviors/HidUsagePicker.tsx

@@ -1,5 +1,7 @@
 import {
   Button,
+  Checkbox,
+  CheckboxGroup,
   Collection,
   ComboBox,
   Header,
@@ -61,38 +63,105 @@ const UsageSection = ({id, min, max}: UsageSectionProps) => {
   );
 }
 
+enum Mods {
+  LeftControl = 0x01,
+  LeftShift = 0x02,
+  LeftAlt = 0x04,
+  LeftGUI = 0x08,
+  RightControl = 0x10,
+  RightShift = 0x20,
+  RightAlt = 0x40,
+  RightGUI = 0x80,
+}
+
+const mod_labels: Record<Mods, string> = {
+  [Mods.LeftControl]: "L Ctrl",
+  [Mods.LeftShift]: "L Shift",
+  [Mods.LeftAlt]: "L Alt",
+  [Mods.LeftGUI]: "L GUI",
+  [Mods.RightControl]: "R Ctrl",
+  [Mods.RightShift]: "R Shift",
+  [Mods.RightAlt]: "R Alt",
+  [Mods.RightGUI]: "R GUI",
+}
+
+const all_mods = [
+  Mods.LeftControl,
+  Mods.LeftShift,
+  Mods.LeftAlt,
+  Mods.LeftGUI,
+  Mods.RightControl,
+  Mods.RightShift,
+  Mods.RightAlt,
+  Mods.RightGUI,
+];
+
+function mods_to_flags(mods: Mods[]): number {
+  return mods.reduce((a, v) => a + v, 0);
+}
+
+function mask_mods(value: number) {
+  return (value & ~(mods_to_flags(all_mods) << 24));
+}
+
 export const HidUsagePicker = ({
   label,
   value,
   usagePages,
   onValueChanged,
 }: HidUsagePickerProps) => {
+  const mods = useMemo(() => {
+    let flags = value ? (value >> 24) : 0;
+
+    return all_mods.filter(m => m & flags).map(m => m.toLocaleString());
+  }, [value]);
+
   const selectionChanged = useCallback(
     (e: Key | null) => {
       let value = typeof e == "number" ? e : undefined;
+      if (value !== undefined) {
+        let mod_flags = mods_to_flags(mods.map(m => parseInt(m)));
+        value = value | (mod_flags << 24);
+      }
+
       onValueChanged(value);
     },
-    [onValueChanged],
+    [onValueChanged, mods],
   );
 
+  const modifiersChanged = useCallback((m: string[]) => {
+    if (!value) {
+      return;
+    }
+
+    let mod_flags = mods_to_flags(m.map(m => parseInt(m)));
+    let new_value = mask_mods(value) | (mod_flags << 24);
+    onValueChanged(new_value);
+  }, [value]);
+
   return (
-    <ComboBox selectedKey={value} onSelectionChange={selectionChanged}>
-      { 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">
-          ▼
-        </Button>
-      </div>
-      <Popover className="w-[var(--trigger-width)] max-h-4 border rounded border-text-base bg-bg-base">
-        <ListBox
-          items={usagePages}
-          className="block max-h-[30vh] min-h-[unset] overflow-auto m-2"
-          selectionMode="single"
-        >
-          {({id, min, max}) => <UsageSection id={id} min={min} max={max} />}
-        </ListBox>
-      </Popover>
-    </ComboBox>
+    <div className="flex mt-8 relative">
+      <ComboBox selectedKey={value ? mask_mods(value) : undefined} onSelectionChange={selectionChanged}>
+        { label && <Label className="absolute top-[-1.75em] left-[0.25em]">{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">
+            ▼
+          </Button>
+        </div>
+        <Popover className="w-[var(--trigger-width)] max-h-4 border rounded border-text-base bg-bg-base">
+          <ListBox
+            items={usagePages}
+            className="block max-h-[30vh] min-h-[unset] overflow-auto m-2"
+            selectionMode="single"
+          >
+            {({id, min, max}) => <UsageSection id={id} min={min} max={max} />}
+          </ListBox>
+        </Popover>
+      </ComboBox>
+      <CheckboxGroup aria-label="Implicit Modifiers" className="grid grid-flow-col gap-x-px auto-cols-fr content-stretch divide-x rounded border border-text-base" value={mods} onChange={modifiersChanged}>
+        { all_mods.map(m => <Checkbox key={m} value={m.toLocaleString()} className="text-nowrap grid content-center justify-center rac-selected:bg-secondary first:rounded-s last:rounded-e">{mod_labels[m]}</Checkbox> )}
+      </CheckboxGroup>
+    </div>
   );
 };