shortcuts for raising input events

src/App/App.tsx

@@ -44,8 +44,10 @@ export function App() {
   const [rtIdx, setRTIdx] = useState<number|undefined>();
   const [time, setTime] = useState<TimeMode>({kind: "paused", simtime: 0});
   const [modal, setModal] = useState<ReactElement|null>(null);
+
   const [plantName, setPlantName] = usePersistentState("plant", "dummy");
   const [zoom, setZoom] = usePersistentState("zoom", 1);
+  const [showKeys, setShowKeys] = usePersistentState("shortcuts", true);
 
   const plant = plants.find(([pn, p]) => pn === plantName)![1];
 
@@ -249,7 +251,7 @@ export function App() {
           >
             <TopPanel
               rt={rtIdx === undefined ? undefined : rt[rtIdx]}
-              {...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal, zoom, setZoom}}
+              {...{rtIdx, ast, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, mode, setMode, setModal, zoom, setZoom, showKeys, setShowKeys}}
             />
           </Box>
           {/* Below the top bar: Editor */}
@@ -281,7 +283,7 @@ export function App() {
             </PersistentDetails>
             <PersistentDetails localStorageKey="showInputEvents" initiallyOpen={true}>
               <summary>input events</summary>
-              <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined}/>
+              <ShowInputEvents inputEvents={ast.inputEvents} onRaise={onRaise} disabled={rtIdx===undefined} showKeys={showKeys}/>
             </PersistentDetails>
             <PersistentDetails localStorageKey="showInternalEvents" initiallyOpen={true}>
               <summary>internal events</summary>

src/App/ShowAST.tsx

@@ -72,38 +72,60 @@ export function ShowAST(props: {root: ConcreteState | PseudoState, transitions:
 }
 
 import BoltIcon from '@mui/icons-material/Bolt';
+import { KeyInfoHidden, KeyInfoVisible } from "./KeyInfo";
+import { useEffect } from "react";
 
-export function ShowInputEvents({inputEvents, onRaise, disabled}: {inputEvents: EventTrigger[], onRaise: (e: string, p: any) => void, disabled: boolean}) {
-  return inputEvents.map(({event, paramName}) =>
-    <div key={event+'/'+paramName} className="toolbarGroup">
-      <button
-        className="inputEvent"
-        title={`raise this input event`}
-        disabled={disabled}
-        onClick={() => {
-          // @ts-ignore
-          const param = document.getElementById(`input-${event}-param`)?.value;
-          let paramParsed;
-          try {
-            if (param) {
-              paramParsed = JSON.parse(param); // may throw
-            }
-          }
-          catch (e) {
-            alert("invalid json");
-            return;
-          }
-          onRaise(event, paramParsed);
-        }}>
-        <BoltIcon fontSize="small"/>
-        {event}
-      </button>
+export function ShowInputEvents({inputEvents, onRaise, disabled, showKeys}: {inputEvents: EventTrigger[], onRaise: (e: string, p: any) => void, disabled: boolean, showKeys: boolean}) {
+  const raiseHandlers = inputEvents.map(({event}) => {
+    return () => {
+      // @ts-ignore
+      const param = document.getElementById(`input-${event}-param`)?.value;
+      let paramParsed;
+      try {
+        if (param) {
+          paramParsed = JSON.parse(param); // may throw
+        }
+      }
+      catch (e) {
+        alert("invalid json");
+        return;
+      }
+      onRaise(event, paramParsed);
+    };
+  });
+  const onKeyDown = (e: KeyboardEvent) => {
+    const n = (parseInt(e.key)+9) % 10;
+    if (raiseHandlers[n] !== undefined) {
+      raiseHandlers[n]();
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+  useEffect(() => {
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [raiseHandlers]);
+  const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;
+  return inputEvents.map(({event, paramName}, i) => {
+    const shortcut = (i+1)%10;
+    const KI = (i <= 10) ? KeyInfo : KeyInfoHidden;
+    return <div key={event+'/'+paramName} className="toolbarGroup">
+      <KI keyInfo={<kbd>{shortcut}</kbd>}>
+        <button
+          className="inputEvent"
+          title={`raise this input event`}
+          disabled={disabled}
+          onClick={raiseHandlers[i]}>
+          <BoltIcon fontSize="small"/>
+          {event}
+        </button>
+      </KI>
       {paramName &&
         <><input id={`input-${event}-param`} style={{width: 20}} placeholder={paramName}/></>
       }
       &nbsp;
-    </div>
-  )
+    </div>;
+  })
 }
 
 export function ShowInternalEvents(props: {internalEvents: EventTrigger[]}) {

src/App/TopPanel.tsx

@@ -43,12 +43,13 @@ export type TopPanelProps = {
   setModal: Dispatch<SetStateAction<ReactElement|null>>,
   zoom: number,
   setZoom: Dispatch<SetStateAction<number>>,
+  showKeys: boolean,
+  setShowKeys: Dispatch<SetStateAction<boolean>>,
 }
 
-export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal, zoom, setZoom}: TopPanelProps) {
+export function TopPanel({rt, rtIdx, time, setTime, onUndo, onRedo, onInit, onClear, onRaise, onBack, ast, mode, setMode, setModal, zoom, setZoom, showKeys, setShowKeys}: TopPanelProps) {
   const [displayTime, setDisplayTime] = useState("0.000");
   const [timescale, setTimescale] = useState(1);
-  const [showKeys, setShowKeys] = usePersistentState("shortcuts", true);
 
   const KeyInfo = showKeys ? KeyInfoVisible : KeyInfoHidden;