generalize keyboard shortcuts

mathieucaroff · Aug 18, 2023 · 078700b · 078700b
1 parent b1d9c1b
commit 078700b
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -1,48 +1,48 @@
 {
-    "name": "cellex",
-    "version": "0.1.0",
-    "description": "Unidimensional cellular automaton explorer to highlight their unique properties",
-    "repository": "https://github.com/mathieucaroff/cellex",
-    "author": "Mathieu CAROFF <[email protected]>",
-    "license": "JAM",
-    "type": "module",
-    "packageManager": "[email protected]",
-    "scripts": {
-        "check": "tsc --noEmit",
-        "checkwatch": "tsc --noEmit --watch",
-        "build": "parcel build src/index.html",
-        "mcabuild": "parcel build src/index.html --public-url cellex.d",
-        "dev": "parcel src/index.html"
-    },
-    "devDependencies": {
-        "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-        "@types/nearley": "^2.11.1",
-        "@types/node": "^13.1.1",
-        "@types/react": "^18.0.2",
-        "@types/react-dom": "^18.0.2",
-        "prettier": "^2.0.5",
-        "ts-node": "^10.5.0",
-        "typescript": "^5.0.4"
-    },
-    "dependencies": {
-        "@ant-design/icons": "^4.7.0",
-        "antd": "^5.4.7",
-        "font-awesome": "^4.7.0",
-        "js-xxhash": "^1.0.4",
-        "nearley": "^2.19.1",
-        "parcel": "^2.3.2",
-        "parcel-transformer-nearley": "^1.0.4",
-        "react": "^18.2.0",
-        "react-color": "^2.19.3",
-        "react-dom": "^18.0.2",
-        "rehype-react": "^4.0.1",
-        "remark-parse": "^7.0.2",
-        "remark-rehype": "^5.0.0",
-        "unified": "^8.4.2"
-    },
-    "alias": {
-        "process": {
-            "global": "process"
-        }
+  "name": "cellex",
+  "version": "0.1.0",
+  "description": "Unidimensional cellular automaton explorer to highlight their unique properties",
+  "repository": "https://github.com/mathieucaroff/cellex",
+  "author": "Mathieu CAROFF <[email protected]>",
+  "license": "JAM",
+  "type": "module",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "check": "tsc --noEmit",
+    "checkwatch": "tsc --noEmit --watch",
+    "build": "parcel build src/index.html",
+    "mcabuild": "parcel build src/index.html --public-url cellex.d",
+    "dev": "parcel src/index.html"
+  },
+  "devDependencies": {
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
+    "@types/nearley": "^2.11.1",
+    "@types/node": "^13.1.1",
+    "@types/react": "^18.0.2",
+    "@types/react-dom": "^18.0.2",
+    "prettier": "^2.0.5",
+    "ts-node": "^10.5.0",
+    "typescript": "^5.0.4"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "antd": "^5.4.7",
+    "font-awesome": "^4.7.0",
+    "js-xxhash": "^1.0.4",
+    "nearley": "^2.19.1",
+    "parcel": "^2.8.3",
+    "parcel-transformer-nearley": "^1.0.4",
+    "react": "^18.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.0.2",
+    "rehype-react": "^4.0.1",
+    "remark-parse": "^7.0.2",
+    "remark-rehype": "^5.0.0",
+    "unified": "^8.4.2"
+  },
+  "alias": {
+    "process": {
+      "global": "process"
     }
+  }
 }
diff --git a/src/cellex.ts b/src/cellex.ts
@@ -49,7 +49,11 @@ function main() {
   // \/ canvas
 
   // /\ control
-  let keyboardBindingReference = keyboardBinding({ act, element: displayDiv })
+  let keyboardBindingReference = keyboardBinding({
+    act,
+    globalElement: document.documentElement,
+    specificElement: displayDiv,
+  })
 
   window.addEventListener("hashchange", () => {
     if (location.hash.length > 1) {
@@ -226,7 +230,9 @@ function main() {
       if (
         ev.target &&
         (ev.target instanceof HTMLTextAreaElement ||
-          (ev.target instanceof HTMLInputElement && (!ev.target.type || ev.target.type === "text")))
+          (ev.target instanceof HTMLInputElement &&
+            (!ev.target.type || ev.target.type === "text") &&
+            ev.key !== "Enter"))
       ) {
         ev.stopPropagation()
       }

diff --git a/src/control/KeyboardBinding.ts b/src/control/KeyboardBinding.ts
@@ -4,29 +4,30 @@ import { KeyboardManager, createKeyboardManager } from "./KeyboardManager"
 
 export interface KeyboardBindingProp {
   act: Act
-  element: Element
+  globalElement: Element
+  specificElement: Element
 }
 
 export interface KeyboardBinding extends Remover {
   getHelp: () => [string, string][]
 }
 
 export let keyboardBinding = (prop: KeyboardBindingProp): KeyboardBinding => {
-  let { act, element } = prop
+  let { act, globalElement, specificElement } = prop
 
   /**
    * keyKb operates on keyboard configured symbol inputs,
    * while codeKb operates on keyboard key positions
    */
   let keyKb = createKeyboardManager({
-    element,
+    element: globalElement,
     evPropName: "key",
     capture: false,
     normalize: (s) => s.toUpperCase(),
   })
-  let codeKb = createKeyboardManager({ element, evPropName: "code", capture: false })
-  let keyKbAnywhere = createKeyboardManager({
-    element: document.documentElement,
+  let codeKb = createKeyboardManager({ element: globalElement, evPropName: "code", capture: false })
+  let specificKeyKb = createKeyboardManager({
+    element: specificElement,
     evPropName: "key",
     capture: false,
     normalize: (s) => s.toUpperCase(),
@@ -36,8 +37,6 @@ export let keyboardBinding = (prop: KeyboardBindingProp): KeyboardBinding => {
 
   let help: [string, string][] = []
 
-  let description = ""
-
   let onKeydownForKb =
     (kb: KeyboardManager) =>
     (key: string, fn: () => void, keyName: string, description: string) => {
@@ -48,10 +47,10 @@ export let keyboardBinding = (prop: KeyboardBindingProp): KeyboardBinding => {
 
   let onSymbol = onKeydownForKb(keyKb)
   let onKeypress = onKeydownForKb(codeKb)
-  let onSymbolAnywhere = onKeydownForKb(keyKbAnywhere)
+  let onSpecificSymbol = onKeydownForKb(specificKeyKb)
 
-  onSymbol(" ", act.togglePlay, "[space]", "toggle play / pause")
-  onSymbol("Enter", act.singleStep, "[enter]", "process one time generation")
+  onSpecificSymbol(" ", act.togglePlay, "[space]", "toggle play / pause")
+  onSpecificSymbol("Enter", act.singleStep, "[enter]", "process one time generation")
 
   onSymbol("ArrowLeft", act.goLeft, "[left]", "move camera left*")
   onSymbol("ArrowRight", act.goRight, "[right]", "move camera right*")
@@ -72,12 +71,7 @@ export let keyboardBinding = (prop: KeyboardBindingProp): KeyboardBinding => {
   onSymbol("}", act.gotoMaxRight, "}", "move the camera to the right end of the simulation*")
 
   onSymbol("R", act.select("ruleInput"), "R", "select the *R*ule input")
-  onSymbolAnywhere(
-    "C",
-    act.focus("displayDiv"),
-    "C",
-    "select the *C*anvas of the *C*elular automaton",
-  )
+  onSymbol("C", act.focus("displayDiv"), "C", "select the *C*anvas of the *C*elular automaton")
 
   onKeypress("Digit1", act.setGenesis("(0)1(0)"), "1", "set the genesis to impulse 010")
   onKeypress("Digit3", act.setGenesis("(0)11(0)"), "3", "set the genesis to impulse 0110")

diff --git a/src/userinterface/RuleInput.tsx b/src/userinterface/RuleInput.tsx
@@ -1,4 +1,4 @@
-import { Input } from "antd"
+import { Space } from "antd"
 import { useContext } from "react"
 
 import { nAryRule, parseRule, ruleName } from "../engine/rule"
@@ -12,7 +12,7 @@ export let RuleInput = () => {
   let rule = useStateSelection(({ rule }) => rule)
 
   return (
-    <Input.Group compact>
+    <Space.Compact>
       <RuleCascader />
       <OxEnterInput
         path="rule"
@@ -27,6 +27,6 @@ export let RuleInput = () => {
         randomElementTitle2={`Random rule (with up to six distinct states)`}
         extraOnPressEnter={act.focus("displayDiv")}
       />
-    </Input.Group>
+    </Space.Compact>
   )
 }
diff --git a/src/userinterface/component.tsx b/src/userinterface/component.tsx
@@ -32,7 +32,7 @@ export function OxInput(prop: OxInputProp) {
           piece[last] = parse(ev.target.value)
         })
       }}
-    ></Input>
+    />
   )
 }
 
@@ -141,13 +141,13 @@ export function OxEnterInput(prop: OxEnterInputProp) {
           context.updateState((state) => {
             let { piece, last } = readPath(path, state)
             piece[last] = parse(localValue)
-            setValue(present(piece[last]))
-            extraOnPressEnter?.()
           })
+          setValue(present(piece[last]))
+          extraOnPressEnter?.()
         }}
         onBlur={() => setIsFocused(false)}
         onFocus={() => setIsFocused(true)}
-      ></Input>
+      />
       {randomElement}
       {randomElement2}
     </>

diff --git a/src/userinterface/menu/EngineUI.tsx b/src/userinterface/menu/EngineUI.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Divider, Input, Select } from "antd"
+import { Button, Checkbox, Divider, Select, Space } from "antd"
 import { useContext } from "react"
 
 import { parseSideBorder, parseTopBorder } from "../../patternlang/parser"
@@ -91,19 +91,19 @@ export let EngineUI = () => {
         </li>
         <li>
           ‴‴Genesis:
-          <Input.Group compact>
+          <Space.Compact>
             <TopBorderSelect />
             <OxEnterInput
               path="topology.genesis"
               style={{ width: "initial" }}
               present={presentTopBorder}
               parse={parseTopBorder}
             />
-          </Input.Group>
+          </Space.Compact>
         </li>
         <li>
           |⧘… Side Border Left:
-          <Input.Group compact>
+          <Space.Compact>
             <SideBorderCascader side="borderLeft" disabled={topologyIsLoop} />
             <OxEnterInput
               path="topology.borderLeft"
@@ -112,11 +112,11 @@ export let EngineUI = () => {
               present={presentSideBorder}
               parse={parseSideBorder}
             />
-          </Input.Group>
+          </Space.Compact>
         </li>
         <li>
           …⧙| Side Border Right:
-          <Input.Group compact>
+          <Space.Compact>
             <SideBorderCascader side="borderRight" disabled={topologyIsLoop} />
             <OxEnterInput
               disabled={topologyIsLoop}
@@ -125,7 +125,7 @@ export let EngineUI = () => {
               present={presentSideBorder}
               parse={parseSideBorder}
             />
-          </Input.Group>
+          </Space.Compact>
         </li>
       </ul>
     </div>