fix vue 3 setup defineProps

src/features/mark/MarkDrawTrack.vue

@@ -26,27 +26,26 @@
 <script setup lang="ts">
 import { ModeEnum } from "@/types";
 import type { SpecialTag, Track } from "@/types";
-import { computed, defineProps, watch } from "vue";
+import { computed, defineProps, toRefs, watch } from "vue";
 import { store } from "./store";
 
-const props =
-  defineProps<{
-    trackList: Array<Track>;
-    specialTagList: Array<SpecialTag>;
-    sliceImage: HTMLImageElement;
-    dx: number;
-    dy: number;
-  }>();
-const { trackList, sliceImage, dx, dy } = props;
+const props = defineProps<{
+  trackList: Array<Track>;
+  specialTagList: Array<SpecialTag>;
+  sliceImage: HTMLImageElement;
+  dx: number;
+  dy: number;
+}>();
+const { trackList, sliceImage, dx, dy } = toRefs(props);
 
 const isTrackMode = computed(() => store.setting.mode === ModeEnum.TRACK);
 
 const computeTopAndLeft = (track: Track | SpecialTag) => {
-  const topInsideSlice = track.offsetY - dy;
-  const leftInsideSlice = track.offsetX - dx;
+  const topInsideSlice = track.offsetY - dy.value;
+  const leftInsideSlice = track.offsetX - dx.value;
   return {
-    top: (topInsideSlice / sliceImage.naturalHeight) * 100 + "%",
-    left: (leftInsideSlice / sliceImage.naturalWidth) * 100 + "%",
+    top: (topInsideSlice / sliceImage.value.naturalHeight) * 100 + "%",
+    left: (leftInsideSlice / sliceImage.value.naturalWidth) * 100 + "%",
     "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
   };
 };

src/features/student/inspect/MarkDrawTrack.vue

@@ -25,15 +25,14 @@
 <script setup lang="ts">
 import type { SpecialTag, Track } from "@/types";
 import { store } from "../store";
-import { defineProps, watch } from "vue";
+import { defineProps, toRefs, watch } from "vue";
 
-const props =
-  defineProps<{
-    trackList: Array<Track>;
-    specialTagList: Array<SpecialTag>;
-    originalImage: HTMLImageElement;
-  }>();
-const { trackList, originalImage } = props;
+const props = defineProps<{
+  trackList: Array<Track>;
+  specialTagList: Array<SpecialTag>;
+  originalImage: HTMLImageElement;
+}>();
+const { trackList, originalImage } = toRefs(props);
 
 const focusedTrack = (track: Track) => {
   return store.focusTracks.includes(track);
@@ -42,8 +41,8 @@ const computeTopAndLeft = (track: Track | SpecialTag) => {
   const topInsideSlice = track.offsetY;
   const leftInsideSlice = track.offsetX;
   return {
-    top: (topInsideSlice / originalImage.naturalHeight) * 100 + "%",
-    left: (leftInsideSlice / originalImage.naturalWidth) * 100 + "%",
+    top: (topInsideSlice / originalImage.value.naturalHeight) * 100 + "%",
+    left: (leftInsideSlice / originalImage.value.naturalWidth) * 100 + "%",
     "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
   };
 };