feat: add stack selection and move controls to dev sample

2026-04-24 22:31:01 +02:00
parent 277c4689d5
commit f8d2fc94d6
1 changed files with 199 additions and 15 deletions
@@ -93,6 +93,18 @@
      display: grid;
      grid-template-columns: 26px 1fr;
      gap: 8px;
+      padding: 1px 4px;
+      border-radius: 4px;
+    }
+
+    .stack-line.selected {
+      background: rgba(27, 42, 18, 0.14);
+      outline: 1px dashed rgba(27, 42, 18, 0.45);
+    }
+
+    .stack-line.moving {
+      background: rgba(140, 255, 109, 0.18);
+      outline: 1px solid rgba(27, 42, 18, 0.55);
    }

    .stack-line .label {
@@ -100,6 +112,12 @@
      color: var(--screen-dim);
    }

+    .stack-line.selected .label,
+    .stack-line.moving .label {
+      color: var(--screen-text);
+      font-weight: bold;
+    }
+
    .hidden-input {
      position: absolute;
      left: -9999px;
@@ -213,7 +231,7 @@
      <input id="input" class="hidden-input" type="text" autocomplete="off" aria-hidden="true" tabindex="-1">

      <div class="input-row">
-        <div class="hint">Keyboard works globally: digits, numpad, Enter, Backspace, Delete, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, t, S, C, T</div>
+        <div class="hint">Keyboard works globally: digits, numpad, Enter, Backspace, Delete, Esc, ↑, ↓, →, +, -, *, /, %, ^, q, n, r, i, g, l, s, c, S, C, x, y, z, t</div>
        <select id="angleMode">
          <option value="deg">Degrees</option>
          <option value="rad">Radians</option>
@@ -272,6 +290,10 @@
      const: ['pi', 'e'],
    };

+    let stackCursor = null;
+    let isMovingStackItem = false;
+    let stackSnapshotBeforeMove = null;
+
    function labelFor(command) {
      return ({ add: '+', sub: '−', mul: '×', div: '÷', pow: 'y^x', recip: '1/x', sqr: 'x²' }[command] || command);
    }
@@ -300,16 +322,122 @@
      return getStackValue(line);
    }

+    function hasStackSelection() {
+      return stackCursor !== null && calc.isValidIndex(stackCursor);
+    }
+
+    function clearStackSelection() {
+      stackCursor = null;
+      isMovingStackItem = false;
+      stackSnapshotBeforeMove = null;
+    }
+
+    function ensureValidSelection() {
+      if (hasStackSelection()) {
+        return;
+      }
+      stackCursor = calc.isValidIndex(0) ? 0 : null;
+    }
+
+    function beginMoveMode() {
+      if (!hasStackSelection()) {
+        return;
+      }
+      isMovingStackItem = true;
+      stackSnapshotBeforeMove = calc.stack.slice();
+    }
+
+    function commitMoveMode() {
+      isMovingStackItem = false;
+      stackSnapshotBeforeMove = null;
+    }
+
+    function cancelMoveMode() {
+      if (!isMovingStackItem || !stackSnapshotBeforeMove) {
+        return;
+      }
+
+      const snapshot = stackSnapshotBeforeMove.slice();
+      calc.clear();
+      for (let index = snapshot.length - 1; index >= 0; index -= 1) {
+        calc.push(snapshot[index]);
+      }
+
+      isMovingStackItem = false;
+      stackSnapshotBeforeMove = null;
+      stackCursor = calc.isValidIndex(stackCursor) ? stackCursor : (calc.isValidIndex(0) ? 0 : null);
+      syncInputFromState();
+    }
+
+    function reactivateEditOnX() {
+      clearStackSelection();
+      if (calc.isValidIndex(0)) {
+        calc.edit(0);
+      } else {
+        calc.inputValue = '';
+        calc.isEditing = true;
+      }
+      syncInputFromState();
+    }
+
+    function moveStackSelection(direction) {
+      if (!hasStackSelection()) {
+        if (direction === 'up') {
+          ensureValidSelection();
+        } else {
+          reactivateEditOnX();
+        }
+        return;
+      }
+
+      const nextIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+      if (calc.isValidIndex(nextIndex)) {
+        stackCursor = nextIndex;
+        return;
+      }
+
+      if (direction === 'down' && stackCursor === 0) {
+        clearStackSelection();
+      }
+    }
+
+    function moveStackItem(direction) {
+      if (!hasStackSelection()) {
+        return;
+      }
+
+      const targetIndex = direction === 'up' ? stackCursor + 1 : stackCursor - 1;
+      if (!calc.isValidIndex(targetIndex)) {
+        return;
+      }
+
+      calc.swap(stackCursor, targetIndex);
+      stackCursor = targetIndex;
+    }
+
    function render() {
      const names = ['T', 'Z', 'Y', 'X'];
      const lines = [];
      for (let line = 3; line >= 0; line -= 1) {
        const value = getLineValue(line);
-        lines.push(`<div class="stack-line"><div class="label">${names[3 - line]}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
+        const isSelected = stackCursor === line;
+        const classes = ['stack-line'];
+        if (isSelected) {
+          classes.push(isMovingStackItem ? 'moving' : 'selected');
+        }
+        lines.push(`<div class="${classes.join(' ')}"><div class="label">${names[3 - line]}</div><div>${value !== undefined && value !== '' ? calc.formatNumber(value) : ''}</div></div>`);
      }

      stackEl.innerHTML = lines.join('');
-      displayEl.textContent = calc.isEditing ? `ENTERING: ${calc.inputValue}` : 'READY';
+      if (calc.isEditing) {
+        displayEl.textContent = `ENTERING: ${calc.inputValue}`;
+      } else if (isMovingStackItem && hasStackSelection()) {
+        displayEl.textContent = `MOVING: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
+      } else if (hasStackSelection()) {
+        displayEl.textContent = `SELECTED: ${['X', 'Y', 'Z', 'T'][stackCursor] || '?'}`;
+      } else {
+        displayEl.textContent = 'READY';
+      }
      inputValueLabel.textContent = calc.inputValue || '∅';
      editingLabel.textContent = String(calc.isEditing);
      modeLabel.textContent = calc.angleMode;
@@ -338,14 +466,23 @@
          }
        } else if (name === 'swap') {
          pushEditingValueIfNeeded();
+          clearStackSelection();
          if (calc.isValidIndex(1)) calc.swap(0, 1);
        } else if (name === 'drop') {
          pushEditingValueIfNeeded();
-          if (calc.isValidIndex(0)) calc.remove(0);
+          if (hasStackSelection()) {
+            calc.remove(stackCursor);
+            stackCursor = calc.isValidIndex(stackCursor) ? stackCursor : (calc.isValidIndex(stackCursor - 1) ? stackCursor - 1 : null);
+          } else if (calc.isValidIndex(0)) {
+            calc.remove(0);
+          }
+          commitMoveMode();
        } else if (name === 'clear') {
          calc.clear();
+          clearStackSelection();
        } else {
          pushEditingValueIfNeeded();
+          clearStackSelection();
          calc.command(name);
        }
        syncInputFromState();
@@ -401,10 +538,12 @@
      }

      const keyMap = {
-        Enter: { type: 'command', value: 'enter' },
+        Enter: { type: 'enterKey' },
        Backspace: { type: 'stackOrEdit', value: 'drop' },
        Delete: { type: 'command', value: 'clear' },
-        Escape: { type: 'cancelEdit' },
+        Escape: { type: 'escapeKey' },
+        ArrowUp: { type: 'stackArrow', value: 'up' },
+        ArrowDown: { type: 'stackArrow', value: 'down' },
        ArrowRight: { type: 'command', value: 'swap' },
        '+': { type: 'command', value: 'add' },
        '-': { type: 'command', value: 'sub' },
@@ -420,10 +559,16 @@
        l: { type: 'command', value: 'ln' },
        s: { type: 'command', value: 'sin' },
        c: { type: 'command', value: 'cos' },
-        t: { type: 'command', value: 'tan' },
        S: { type: 'command', value: 'asin' },
        C: { type: 'command', value: 'acos' },
-        T: { type: 'command', value: 'atan' },
+        x: { type: 'stackSelect', value: 0 },
+        y: { type: 'stackSelect', value: 1 },
+        z: { type: 'stackSelect', value: 2 },
+        t: { type: 'stackSelect', value: 3 },
+        X: { type: 'stackSelect', value: 0 },
+        Y: { type: 'stackSelect', value: 1 },
+        Z: { type: 'stackSelect', value: 2 },
+        T: { type: 'stackSelect', value: 3 },
      };

      return keyMap[event.key] || null;
@@ -465,26 +610,51 @@
      }

      try {
-        if (action.type === 'cancelEdit') {
-          if (!calc.isEditing) {
+        if (action.type === 'escapeKey') {
+          if (calc.isEditing) {
+            event.preventDefault();
+            calc.inputValue = '';
+            calc.isEditing = false;
+            syncInputFromState();
+            render();
            return;
          }
-          event.preventDefault();
-          calc.inputValue = '';
-          calc.isEditing = false;
-          syncInputFromState();
-          render();
+          if (isMovingStackItem) {
+            event.preventDefault();
+            cancelMoveMode();
+            render();
+          }
          return;
        }

        event.preventDefault();

        if (action.type === 'input') {
+          clearStackSelection();
          editXWithKey(action.value);
          render();
          return;
        }

+        if (action.type === 'stackSelect') {
+          if (calc.isEditing || isMovingStackItem) {
+            return;
+          }
+          stackCursor = calc.isValidIndex(action.value) ? action.value : null;
+          render();
+          return;
+        }
+
+        if (action.type === 'stackArrow') {
+          if (isMovingStackItem) {
+            moveStackItem(action.value);
+          } else {
+            moveStackSelection(action.value);
+          }
+          render();
+          return;
+        }
+
        if (action.type === 'stackOrEdit') {
          if (calc.isEditing) {
            editXWithKey('Backspace');
@@ -495,6 +665,20 @@
          return;
        }

+        if (action.type === 'enterKey') {
+          if (hasStackSelection()) {
+            if (isMovingStackItem) {
+              commitMoveMode();
+            } else {
+              beginMoveMode();
+            }
+            render();
+            return;
+          }
+          execute('enter');
+          return;
+        }
+
        if (action.type === 'command') {
          execute(action.value);
        }