|
@@ -1,6 +1,10 @@
|
|
<template>
|
|
<template>
|
|
<template v-for="(track, index) in trackList" :key="index">
|
|
<template v-for="(track, index) in trackList" :key="index">
|
|
- <div class="score-container" :style="computeTopAndLeft(track)">
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-if="isTrackMode"
|
|
|
|
+ class="score-container"
|
|
|
|
+ :style="computeTopAndLeft(track)"
|
|
|
|
+ >
|
|
<span class="tw-m-auto">
|
|
<span class="tw-m-auto">
|
|
{{ track.score }}
|
|
{{ track.score }}
|
|
</span>
|
|
</span>
|
|
@@ -9,8 +13,8 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
-import { Track } from "@/types";
|
|
|
|
-import { defineComponent, PropType } from "vue";
|
|
|
|
|
|
+import { ModeEnum, Track } from "@/types";
|
|
|
|
+import { defineComponent, PropType, ref, watchEffect } from "vue";
|
|
import { store } from "./store";
|
|
import { store } from "./store";
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
@@ -30,6 +34,11 @@ export default defineComponent({
|
|
dy: { type: Number, required: true },
|
|
dy: { type: Number, required: true },
|
|
},
|
|
},
|
|
setup({ trackList, originalImage, sliceImage, dx, dy }) {
|
|
setup({ trackList, originalImage, sliceImage, dx, dy }) {
|
|
|
|
+ const isTrackMode = ref(false);
|
|
|
|
+ watchEffect(() => {
|
|
|
|
+ isTrackMode.value = store.setting.mode === ModeEnum.TRACK;
|
|
|
|
+ });
|
|
|
|
+
|
|
const computeTopAndLeft = (track: Track) => {
|
|
const computeTopAndLeft = (track: Track) => {
|
|
const topInsideSlice = track.offsetY - dy;
|
|
const topInsideSlice = track.offsetY - dy;
|
|
const leftInsideSlice = track.offsetX - dx;
|
|
const leftInsideSlice = track.offsetX - dx;
|
|
@@ -48,7 +57,7 @@ export default defineComponent({
|
|
};
|
|
};
|
|
};
|
|
};
|
|
|
|
|
|
- return { store, computeTopAndLeft };
|
|
|
|
|
|
+ return { store, isTrackMode, computeTopAndLeft };
|
|
},
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|