feature(expriement): 快捷键来轨迹评分

src/features/mark/CommonMarkBody.vue

@@ -46,6 +46,12 @@
       <div class="double-triangle"></div>
     </div>
     <ZoomPaper v-if="store.isScanImage && store.currentTask" />
+
+    <div class="kb-circle">
+      <span class="text">{{
+        store.currentSpecialTag || store.currentScore
+      }}</span>
+    </div>
   </div>
 </template>
 
@@ -553,6 +559,80 @@ const showBigImage = (event: MouseEvent) => {
 // onRenderTriggered(({ key, target, type }) => {
 //   console.log({ key, target, type });
 // });
+let topKB = $ref(10);
+const topKBStyle = $computed(() => topKB + "%");
+let leftKB = $ref(10);
+const leftKBStyle = $computed(() => leftKB + "%");
+function moveCicle(event: KeyboardEvent) {
+  // query mark-body-container and body to calc max/min topKB and max leftKB
+  if (event.key === "i") {
+    if (topKB > 1) topKB--;
+  }
+  if (event.key === "k") {
+    if (topKB < 99) topKB++;
+  }
+  if (event.key === "j") {
+    if (leftKB > 1) leftKB--;
+  }
+  if (event.key === "l") {
+    if (leftKB < 99) leftKB++;
+  }
+  if (event.key === "c") {
+    topKB = 50;
+    leftKB = 50;
+  }
+}
+function giveScoreCicle(event: KeyboardEvent) {
+  // console.log(event.key);
+  event.preventDefault();
+  // console.log(store.currentScore);
+  // 接收currentScore间隔时间外才会进入此事件
+  if (event.key === " " && typeof store.currentScore === "number") {
+    // topKB--;
+    const circleElement = document.querySelector(
+      ".kb-circle"
+    ) as HTMLDivElement;
+    let { top, left } = circleElement.getBoundingClientRect();
+    top = top + 45;
+    left = left + 45;
+    console.log(top, left);
+    // getBoundingClientRect().top left
+    // capture => to the specific image
+    const me = new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+      clientY: top,
+      clientX: left,
+    });
+    const eles = document.elementsFromPoint(left, top);
+    // console.log(eles);
+    let ele: Element;
+    // if (eles[0].className === "kb-circle") {
+    //   if (eles[1].tagName == "IMG") {
+    //     ele = eles[1];
+    //   }
+    // } else
+    if (eles[0].tagName == "IMG") {
+      ele = eles[0];
+    }
+    if (ele!) {
+      ele.dispatchEvent(me);
+    }
+  }
+}
+onMounted(() => {
+  document.addEventListener("keypress", moveCicle);
+  document.addEventListener("keypress", giveScoreCicle);
+});
+onUnmounted(() => {
+  document.removeEventListener("keypress", moveCicle);
+  document.removeEventListener("keypress", giveScoreCicle);
+});
+// setInterval(() => {
+//   _topKB++;
+//   console.log(topKB);
+// }, 1000);
 </script>
 
 <style scoped>
@@ -636,4 +716,46 @@ const showBigImage = (event: MouseEvent) => {
 .rotate-board-1 {
   animation: rotate 0.6s ease-in-out;
 }
+
+.kb-circle {
+  position: fixed;
+  width: 90px;
+  height: 90px;
+  border: 1px solid #ff5050;
+  border-radius: 50%;
+  /* margin-left: -45px;
+  margin-top: -45px; */
+  /* transform: translate(-50%, -50%); */
+  /* margin-left: 50%;
+  margin-top: 10%; */
+  top: v-bind(topKBStyle);
+  left: v-bind(leftKBStyle);
+  /* c to center circle
+  jikl
+  斜线移动
+  space上分，方便连续给分
+  shift加速？
+  */
+  /*
+  getBoundingClientRect().top left
+  capture => to the specific image
+  new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window,
+    clientX
+    clientY
+  });
+  */
+  /* to click through div */
+  pointer-events: none;
+
+  display: grid;
+}
+
+.kb-circle .text {
+  font-size: 2rem;
+  color: #ff5050;
+  place-self: center;
+}
 </style>

src/features/mark/MarkBoardTrack.vue

@@ -257,6 +257,7 @@ let keys: string[] = [];
 function numberKeyListener(event: KeyboardEvent) {
   // console.log(event);
   if (!store.currentQuestion) return;
+  if (" jiklc".includes(event.key)) return;
 
   function indexOfCurrentQuestion() {
     return store.currentTask?.questionList.findIndex(