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

samples/calc-02/index.js

@@ -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() {
+function getStackDisplayValue(label) {
-	if (!calc.isEditing) return '';
+	if (label === 'X' && calc.isEditing) {
 		return calc.inputValue;
 	}
-
+	const indexMap = { X: 0, Y: 1, Z: 2, T: 3 };
-function getStackDisplayValue(label) {
+	const indexFromTop = calc.isEditing ? Math.max(0, indexMap[label] - 1) : indexMap[label];
-	if (label === 'X') {
+	return calc.formatNumber(getStackLine(indexFromTop)) || '';
-		return calc.isEditing ? getEditingDisplayValue() : (calc.formatNumber(getStackLine(0)) || '');
-	}
-	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)) || '');
 }
 
 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));
+		renderEditValue();
-		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;
 	}
 	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;
+		stopEditing();
-		editCursor = 0;
 	}
 }
 
@@ -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;
+				moveEditCursor(hasSign ? -1 : 1);
-				if (hasSign) editCursor = Math.max(0, editCursor - 1);
-				editCursor = Math.max(0, Math.min(editCursor, calc.inputValue.length));
 			} 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,18 +511,13 @@ 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)) {
+	if (!calc.isEditing && startEditingFromStackTop()) {
-	const value = calc.stack[0];
-	calc.remove(0);
-	calc.isEditing = true;
-	calc.inputValue = calc.formatNumber(value);
-	editCursor = calc.inputValue.length;
 		render();
 		focusInput();
 	}
@@ -531,7 +526,7 @@ if (!calc.isEditing && calc.isValidIndex(0)) {
 
 rightButton.addEventListener('click', () => {
 	if (calc.isEditing) {
-		editCursor = Math.min(calc.inputValue.length, editCursor + 1);
+		moveEditCursor(1);
 		render();
 		focusInput();
 		return;