stmms-web/src/components/mark/MarkDrawTrack.vue

<template>
  <template v-for="(track, index) in trackList" :key="index">
    <div class="score-container" :style="computeTopAndLeft(track)">
      <span class="m-auto">
        {{ track.score }}
      </span>
    </div>
  </template>
</template>

<script lang="ts">
import { Track } from "@/types";
import { defineComponent, PropType } from "vue";
import { store } from "./store";

export default defineComponent({
  name: "MarkDrawTrack",
  props: {
    trackList: {
      type: Array as PropType<Array<Track>>,
    },
    originalImage: {
      type: Object as PropType<HTMLImageElement>,
    },
    sliceImage: {
      type: Object as PropType<HTMLImageElement>,
      required: true,
    },
    dx: { type: Number, required: true },
    dy: { type: Number, required: true },
  },
  setup({ trackList, originalImage, sliceImage, dx, dy }) {
    const computeTopAndLeft = (track: Track) => {
      const topInsideSlice = track.offsetY - dy;
      const leftInsideSlice = track.offsetX - dx;
      // console.log({
      //   topInsideSlice,
      //   leftInsideSlice,
      //   offx: track.offsetX,
      //   offy: track.offsetY,
      //   dx,
      //   dy,
      // });
      return {
        top: (topInsideSlice / sliceImage.naturalHeight) * 100 + "%",
        left: (leftInsideSlice / sliceImage.naturalWidth) * 100 + "%",
        "font-size": store.setting.uiSetting["answer.paper.scale"] * 2.2 + "em",
      };
    };
    // const
    // const trackList: Array<Track> = reactive([]);
    // return { trackList };

    return { store, computeTopAndLeft };
  },
});
</script>

<style scoped>
.score-container {
  position: absolute;
  display: flex;
  place-content: center;
  color: red;

  /* to center score */
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;

  /* to click through div */
  pointer-events: none;
}
</style>