From 70235cc295b84779d40e75560d801627259f5049 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 13 Jan 2024 19:31:08 +0800
Subject: [PATCH] fix: incorrect cursor position in cli #120

---
 .../components/content_value/ContentCli.vue   | 47 ++++++++++++-------
 frontend/src/components/icons/Refresh.vue     |  4 +-
 2 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/content_value/ContentCli.vue b/frontend/src/components/content_value/ContentCli.vue
index ef042f0..c1d4571 100644
--- a/frontend/src/components/content_value/ContentCli.vue
+++ b/frontend/src/components/content_value/ContentCli.vue
@@ -200,18 +200,30 @@ const moveInputCursor = (step) => {
             inputCursor += step
             updateCursor = true
         }
-    } else {
-        // update cursor position only
-        const currentLine = getCurrentInput()
-        inputCursor = Math.max(0, currentLine.length)
-        updateCursor = true
     }
 
     if (updateCursor) {
-        termInst.write(`\x1B[${prefixLen.value + inputCursor + 1}G`)
+        moveInputCursorTo(inputCursor)
     }
 }
 
+/**
+ * move cursor to the end of current line
+ */
+const moveInputCursorToEnd = () => {
+    moveInputCursorTo(Number.MAX_VALUE)
+}
+
+/**
+ * move cursor to pos
+ * @param {number} pos
+ */
+const moveInputCursorTo = (pos) => {
+    const currentLine = getCurrentInput()
+    inputCursor = Math.min(Math.max(0, pos), currentLine.length)
+    termInst.write(`\x1B[${prefixLen.value + inputCursor + 1}G`)
+}
+
 /**
  * update current input cache and refresh term
  * @param {string} data
@@ -229,8 +241,7 @@ const updateInput = (data) => {
     if (inputCursor < currentLine.length) {
         // insert
         currentLine = currentLine.substring(0, inputCursor) + data + currentLine.substring(inputCursor)
-        replaceTermInput()
-        termInst.write(currentLine)
+        replaceTermInput(currentLine)
         moveInputCursor(data.length)
     } else {
         // append
@@ -260,15 +271,16 @@ const deleteInput = (back = false) => {
             currentLine = currentLine.substring(0, inputCursor) + currentLine.substring(inputCursor + 1)
         }
     } else {
-        // delete last one
-        currentLine = currentLine.slice(0, -1)
-        inputCursor -= 1
+        if (back) {
+            // delete last one
+            currentLine = currentLine.slice(0, -1)
+            inputCursor -= 1
+        }
     }
 
-    replaceTermInput()
-    termInst.write(currentLine)
+    replaceTermInput(currentLine)
     updateCurrentInput(currentLine)
-    moveInputCursor(0)
+    moveInputCursorTo(inputCursor)
 }
 
 const getCurrentInput = () => {
@@ -315,9 +327,8 @@ const changeHistory = (prev) => {
             return
         }
 
-        replaceTermInput()
-        termInst.write(currentLine)
-        moveInputCursor(0)
+        replaceTermInput(currentLine)
+        moveInputCursorToEnd()
     }
 
     return null
@@ -338,7 +349,7 @@ const flushTermInput = (flushCmd = false) => {
 
 /**
  * clear current input line and replace with new content
- * @param {string} [content]
+ * @param {string|null} [content]
  */
 const replaceTermInput = (content = '') => {
     if (termInst == null) {
diff --git a/frontend/src/components/icons/Refresh.vue b/frontend/src/components/icons/Refresh.vue
index 6f10344..fabb300 100644
--- a/frontend/src/components/icons/Refresh.vue
+++ b/frontend/src/components/icons/Refresh.vue
@@ -14,16 +14,16 @@ const props = defineProps({
 <template>
     <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :stroke="color"
             :stroke-width="props.strokeWidth"
             d="M36.7279 36.7279C33.4706 39.9853 28.9706 42 24 42C14.0589 42 6 33.9411 6 24C6 14.0589 14.0589 6 24 6C28.9706 6 33.4706 8.01472 36.7279 11.2721C38.3859 12.9301 42 17 42 17"
-            :stroke="color"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="color"
             :stroke-width="props.strokeWidth"
             class="default-stroke"
             d="M42 8V17H33"
-            :stroke="color"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>