diff --git a/package.json b/package.json index 20b4b96..a56f96f 100644 --- 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 ", - "license": "JAM", - "type": "module", - "packageManager": "yarn@3.5.1", - "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 ", + "license": "JAM", + "type": "module", + "packageManager": "yarn@3.5.1", + "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 index 6fbce4f..4c6de11 100644 --- 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 index 1d123e6..4046aa4 100644 --- a/src/control/KeyboardBinding.ts +++ b/src/control/KeyboardBinding.ts @@ -4,7 +4,8 @@ import { KeyboardManager, createKeyboardManager } from "./KeyboardManager" export interface KeyboardBindingProp { act: Act - element: Element + globalElement: Element + specificElement: Element } export interface KeyboardBinding extends Remover { @@ -12,21 +13,21 @@ export interface KeyboardBinding extends Remover { } 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 index 721f3b8..faeff79 100644 --- 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 ( - + { randomElementTitle2={`Random rule (with up to six distinct states)`} extraOnPressEnter={act.focus("displayDiv")} /> - + ) } diff --git a/src/userinterface/component.tsx b/src/userinterface/component.tsx index 0c44d3b..8c5b0fa 100644 --- 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) }) }} - > + /> ) } @@ -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)} - > + /> {randomElement} {randomElement2} diff --git a/src/userinterface/menu/EngineUI.tsx b/src/userinterface/menu/EngineUI.tsx index 8b4489b..9597c69 100644 --- 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,7 +91,7 @@ export let EngineUI = () => {
  • ‴‴Genesis: - + { present={presentTopBorder} parse={parseTopBorder} /> - +
  • |⧘… Side Border Left: - + { present={presentSideBorder} parse={parseSideBorder} /> - +
  • …⧙| Side Border Right: - + { present={presentSideBorder} parse={parseSideBorder} /> - +