moving term & editor inputs to key inputs

goldbuick · Dec 17, 2024 · c7fc301 · c7fc301
1 parent 3097f06
commit c7fc301
Show file tree

Hide file tree

Showing 2 changed files with 141 additions and 136 deletions.
diff --git a/zss/gadget/components/tape/elements/editorinput.tsx b/zss/gadget/components/tape/elements/editorinput.tsx
@@ -146,57 +146,6 @@ export function EditorInput({
         onScroll={(ydelta) => movecursor(ydelta * 0.75)}
       />
       <UserInput
-        MOVE_LEFT={(mods) => {
-          trackselection(mods.shift)
-          if (mods.ctrl) {
-            useTapeEditor.setState({ cursor: coderow.start })
-          } else {
-            const cursor = tapeeditor.cursor - (mods.alt ? 10 : 1)
-            useTapeEditor.setState({ cursor: clamp(cursor, 0, codeend) })
-          }
-        }}
-        MOVE_RIGHT={(mods) => {
-          trackselection(mods.shift)
-          if (mods.ctrl) {
-            useTapeEditor.setState({ cursor: coderow.end })
-          } else {
-            const cursor = tapeeditor.cursor + (mods.alt ? 10 : 1)
-            useTapeEditor.setState({ cursor: clamp(cursor, 0, codeend) })
-          }
-        }}
-        MOVE_UP={(mods) => {
-          trackselection(mods.shift)
-          if (mods.ctrl) {
-            useTapeEditor.setState({ cursor: 0 })
-          } else {
-            movecursor(mods.alt ? -10 : -1)
-          }
-        }}
-        MOVE_DOWN={(mods) => {
-          trackselection(mods.shift)
-          if (mods.ctrl) {
-            useTapeEditor.setState({ cursor: codeend })
-          } else {
-            movecursor(mods.alt ? 10 : 1)
-          }
-        }}
-        OK_BUTTON={() => {
-          if (ispresent(value)) {
-            // insert newline !
-            value.insert(tapeeditor.cursor, `\n`)
-            useTapeEditor.setState({ cursor: tapeeditor.cursor + 1 })
-          }
-        }}
-        CANCEL_BUTTON={(mods) => {
-          if (mods.shift || mods.alt || mods.ctrl) {
-            tape_terminal_close('tape')
-          } else {
-            tape_editor_close('editor')
-          }
-        }}
-        MENU_BUTTON={(mods) => {
-          tape_terminal_inclayout('editor', !mods.shift)
-        }}
         keydown={(event) => {
           if (!ispresent(value)) {
             return
@@ -207,6 +156,58 @@ export function EditorInput({
           const mods = modsfromevent(event)
 
           switch (lkey) {
+            case 'arrowleft':
+              trackselection(mods.shift)
+              if (mods.ctrl) {
+                useTapeEditor.setState({ cursor: coderow.start })
+              } else {
+                const cursor = tapeeditor.cursor - (mods.alt ? 10 : 1)
+                useTapeEditor.setState({ cursor: clamp(cursor, 0, codeend) })
+              }
+              break
+            case 'arrowright':
+              trackselection(mods.shift)
+              if (mods.ctrl) {
+                useTapeEditor.setState({ cursor: coderow.end })
+              } else {
+                const cursor = tapeeditor.cursor + (mods.alt ? 10 : 1)
+                useTapeEditor.setState({ cursor: clamp(cursor, 0, codeend) })
+              }
+              break
+            case 'arrowup':
+              trackselection(mods.shift)
+              if (mods.ctrl) {
+                useTapeEditor.setState({ cursor: 0 })
+              } else {
+                movecursor(mods.alt ? -10 : -1)
+              }
+              break
+            case 'arrowdown':
+              trackselection(mods.shift)
+              if (mods.ctrl) {
+                useTapeEditor.setState({ cursor: codeend })
+              } else {
+                movecursor(mods.alt ? 10 : 1)
+              }
+              break
+            case 'enter':
+              if (ispresent(value)) {
+                // insert newline !
+                value.insert(tapeeditor.cursor, `\n`)
+                useTapeEditor.setState({ cursor: tapeeditor.cursor + 1 })
+              }
+              break
+            case 'esc':
+            case 'escape':
+              if (mods.shift || mods.alt || mods.ctrl) {
+                tape_terminal_close('tape')
+              } else {
+                tape_editor_close('editor')
+              }
+              break
+            case 'tab':
+              tape_terminal_inclayout('editor', !mods.shift)
+              break
             case 'delete':
               if (hasselection) {
                 deleteselection()

diff --git a/zss/gadget/components/tape/elements/terminalinput.tsx b/zss/gadget/components/tape/elements/terminalinput.tsx
@@ -206,97 +206,101 @@ export function TerminalInput({
         }}
       />
       <UserInput
-        MENU_BUTTON={(mods) => tape_terminal_inclayout('tape', !mods.shift)}
-        MOVE_UP={(mods) => {
-          if (mods.ctrl) {
-            inputstateswitch(tapeterminal.bufferindex + 1)
-          } else {
-            trackselection(mods.shift)
-            useTapeTerminal.setState({
-              ycursor: clamp(
-                Math.round(tapeterminal.ycursor + (mods.alt ? 10 : 1)),
-                0,
-                logrowtotalheight,
-              ),
-            })
-          }
-        }}
-        MOVE_DOWN={(mods) => {
-          if (mods.ctrl) {
-            inputstateswitch(tapeterminal.bufferindex - 1)
-          } else {
-            trackselection(mods.shift)
-            useTapeTerminal.setState({
-              ycursor: clamp(
-                Math.round(tapeterminal.ycursor - (mods.alt ? 10 : 1)),
-                0,
-                logrowtotalheight,
-              ),
-            })
-          }
-        }}
-        MOVE_LEFT={(mods) => {
-          trackselection(mods.shift)
-          if (mods.ctrl) {
-            useTapeTerminal.setState({ xcursor: 0 })
-          } else {
-            useTapeTerminal.setState({
-              xcursor: clamp(
-                tapeterminal.xcursor - (mods.alt ? 10 : 1),
-                0,
-                edge.right,
-              ),
-            })
-          }
-        }}
-        MOVE_RIGHT={(mods) => {
-          trackselection(mods.shift)
-          if (mods.ctrl) {
-            useTapeTerminal.setState({
-              xcursor: inputstateactive ? inputstate.length : edge.right,
-            })
-          } else {
-            useTapeTerminal.setState({
-              xcursor: clamp(
-                tapeterminal.xcursor + (mods.alt ? 10 : 1),
-                0,
-                edge.right,
-              ),
-            })
-          }
-        }}
-        OK_BUTTON={() => {
-          const invoke = hasselection ? inputstateselected : inputstate
-          if (invoke.length) {
-            if (inputstateactive) {
-              useTapeTerminal.setState({
-                xcursor: 0,
-                bufferindex: 0,
-                xselect: undefined,
-                yselect: undefined,
-                buffer: [
-                  '',
-                  invoke,
-                  ...tapeterminal.buffer
-                    .slice(1)
-                    .filter((item) => item !== invoke),
-                ],
-              })
-              vm_cli('tape', invoke, player)
-            } else {
-              resettoend()
-            }
-          }
-        }}
-        CANCEL_BUTTON={() => {
-          tape_terminal_close('tape')
-        }}
         keydown={(event) => {
           const { key } = event
           const lkey = key.toLowerCase()
           const mods = modsfromevent(event)
 
           switch (lkey) {
+            case 'arrowleft':
+              trackselection(mods.shift)
+              if (mods.ctrl) {
+                useTapeTerminal.setState({ xcursor: 0 })
+              } else {
+                useTapeTerminal.setState({
+                  xcursor: clamp(
+                    tapeterminal.xcursor - (mods.alt ? 10 : 1),
+                    0,
+                    edge.right,
+                  ),
+                })
+              }
+              break
+            case 'arrowright':
+              trackselection(mods.shift)
+              if (mods.ctrl) {
+                useTapeTerminal.setState({
+                  xcursor: inputstateactive ? inputstate.length : edge.right,
+                })
+              } else {
+                useTapeTerminal.setState({
+                  xcursor: clamp(
+                    tapeterminal.xcursor + (mods.alt ? 10 : 1),
+                    0,
+                    edge.right,
+                  ),
+                })
+              }
+              break
+            case 'arrowup':
+              if (mods.ctrl) {
+                inputstateswitch(tapeterminal.bufferindex + 1)
+              } else {
+                trackselection(mods.shift)
+                useTapeTerminal.setState({
+                  ycursor: clamp(
+                    Math.round(tapeterminal.ycursor + (mods.alt ? 10 : 1)),
+                    0,
+                    logrowtotalheight,
+                  ),
+                })
+              }
+              break
+            case 'arrowdown':
+              if (mods.ctrl) {
+                inputstateswitch(tapeterminal.bufferindex - 1)
+              } else {
+                trackselection(mods.shift)
+                useTapeTerminal.setState({
+                  ycursor: clamp(
+                    Math.round(tapeterminal.ycursor - (mods.alt ? 10 : 1)),
+                    0,
+                    logrowtotalheight,
+                  ),
+                })
+              }
+              break
+            case 'enter': {
+              const invoke = hasselection ? inputstateselected : inputstate
+              if (invoke.length) {
+                if (inputstateactive) {
+                  useTapeTerminal.setState({
+                    xcursor: 0,
+                    bufferindex: 0,
+                    xselect: undefined,
+                    yselect: undefined,
+                    buffer: [
+                      '',
+                      invoke,
+                      ...tapeterminal.buffer
+                        .slice(1)
+                        .filter((item) => item !== invoke),
+                    ],
+                  })
+                  vm_cli('tape', invoke, player)
+                } else {
+                  resettoend()
+                }
+              }
+              break
+            }
+            case 'esc':
+            case 'escape':
+              tape_terminal_close('tape')
+              break
+            case 'tab':
+              tape_terminal_inclayout('tape', !mods.shift)
+              break
             case 'delete':
               // single line only
               if (inputstateactive) {