m/mtm-rpn-js
1
0
Fork 0
Code Issues Actions Activity

refactor(calc-02): simplify stack display and edit cursor handling

Browse Source
This commit is contained in:
MatMoul
2026-05-16 23:43:49 +02:00
parent 07a4c533fb
commit b710d5f0eb
1 changed files with 36 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
samples/calc-02/index.js
+36 -41
View File
@@ -119,30 +119,17 @@ function clearStatus() {
statusLine.classList.remove('is-error');
}
function normalizeStack() {
// Demo display only shows the top 4 stack values; the calculator stack remains unlimited.
}
function getStackLine(indexFromTop) {
return indexFromTop >= 0 && indexFromTop < calc.stack.length ? calc.stack[indexFromTop] : '';
}
function getEditingDisplayValue() {
if (!calc.isEditing) return '';
return calc.inputValue;
}
function getStackDisplayValue(label) {
if (label === 'X') {
return calc.isEditing ? getEditingDisplayValue() : (calc.formatNumber(getStackLine(0)) || '');
if (label === 'X' && calc.isEditing) {
return calc.inputValue;
}
if (label === 'Y') {
return calc.isEditing ? (calc.formatNumber(getStackLine(0)) || '') : (calc.formatNumber(getStackLine(1)) || '');
}
if (label === 'Z') {
return calc.isEditing ? (calc.formatNumber(getStackLine(1)) || '') : (calc.formatNumber(getStackLine(2)) || '');
}
return calc.isEditing ? (calc.formatNumber(getStackLine(2)) || '') : (calc.formatNumber(getStackLine(3)) || '');
const indexMap = { X: 0, Y: 1, Z: 2, T: 3 };
const indexFromTop = calc.isEditing ? Math.max(0, indexMap[label] - 1) : indexMap[label];
return calc.formatNumber(getStackLine(indexFromTop)) || '';
}
function updateCopyButtons() {
@@ -156,16 +143,18 @@ function updateCopyButtons() {
}
}
function renderEditValue() {
const cursor = Math.max(0, Math.min(editCursor, calc.inputValue.length));
stackEls.X.innerHTML = `<span class="edit-text">${calc.inputValue.slice(0, cursor)}</span><span class="edit-caret" aria-hidden="true"></span><span class="edit-text">${calc.inputValue.slice(cursor)}</span>`;
}
function render() {
const isPortrait = window.matchMedia('(orientation: portrait)').matches || window.innerWidth <= 860;
calculatorEl?.classList.toggle('portrait', isPortrait);
calculatorEl?.classList.toggle('landscape', !isPortrait);
const xValue = getStackDisplayValue('X');
stackEls.X.textContent = calc.isEditing ? '' : getStackDisplayValue('X');
if (calc.isEditing) {
const cursor = Math.max(0, Math.min(editCursor, calc.inputValue.length));
stackEls.X.innerHTML = `<span class="edit-text">${calc.inputValue.slice(0, cursor)}</span><span class="edit-caret" aria-hidden="true"></span><span class="edit-text">${calc.inputValue.slice(cursor)}</span>`;
} else {
stackEls.X.textContent = xValue;
renderEditValue();
}
stackEls.Y.textContent = getStackDisplayValue('Y');
stackEls.Z.textContent = getStackDisplayValue('Z');
@@ -184,6 +173,10 @@ function stopEditing(clearValue = false) {
editCursor = 0;
}
function moveEditCursor(delta) {
editCursor = Math.max(0, Math.min(calc.inputValue.length, editCursor + delta));
}
function pushEditingValueIfNeeded() {
if (!calc.isEditing) return;
if (calc.inputValue !== '') {
@@ -194,6 +187,16 @@ function pushEditingValueIfNeeded() {
editCursor = 0;
}
function startEditingFromStackTop() {
if (!calc.isValidIndex(0)) return false;
const value = calc.stack[0];
calc.remove(0);
calc.isEditing = true;
calc.inputValue = calc.formatNumber(value);
editCursor = calc.inputValue.length;
return true;
}
function inputToX(value) {
if (!calc.isEditing) {
calc.isEditing = true;
@@ -210,8 +213,7 @@ function inputToX(value) {
editCursor += value.length;
}
if (calc.inputValue === '') {
calc.isEditing = false;
editCursor = 0;
stopEditing();
}
}
@@ -261,9 +263,7 @@ function execute(name) {
if (calc.isEditing) {
const hasSign = calc.inputValue.startsWith('-');
calc.inputValue = hasSign ? calc.inputValue.slice(1) : `-${calc.inputValue}`;
if (!hasSign) editCursor += 1;
if (hasSign) editCursor = Math.max(0, editCursor - 1);
editCursor = Math.max(0, Math.min(editCursor, calc.inputValue.length));
moveEditCursor(hasSign ? -1 : 1);
} else {
calc.command('neg');
}
@@ -340,7 +340,7 @@ function handleKeyboard(event) {
if (key === 'ArrowLeft') {
event.preventDefault();
if (calc.isEditing) {
editCursor = Math.max(0, editCursor - 1);
moveEditCursor(-1);
render();
return;
}
@@ -350,7 +350,7 @@ function handleKeyboard(event) {
if (key === 'ArrowRight') {
event.preventDefault();
if (calc.isEditing) {
editCursor = Math.min(calc.inputValue.length, editCursor + 1);
moveEditCursor(1);
render();
return;
}
@@ -511,27 +511,22 @@ constButton.addEventListener('click', (event) => {
leftButton.addEventListener('click', () => {
if (calc.isEditing) {
editCursor = Math.max(0, editCursor - 1);
moveEditCursor(-1);
render();
focusInput();
}
});
downButton.addEventListener('click', () => {
if (!calc.isEditing && calc.isValidIndex(0)) {
const value = calc.stack[0];
calc.remove(0);
calc.isEditing = true;
calc.inputValue = calc.formatNumber(value);
editCursor = calc.inputValue.length;
render();
focusInput();
}
if (!calc.isEditing && startEditingFromStackTop()) {
render();
focusInput();
}
});
rightButton.addEventListener('click', () => {
if (calc.isEditing) {
editCursor = Math.min(calc.inputValue.length, editCursor + 1);
moveEditCursor(1);
render();
focusInput();
return;