pptList/src/views/Mobile/MobileEditor/MobileEditableElement.vue

<template>
  <div
    class="mobile-editable-element"
    :style="{
      zIndex: elementIndex
    }"
  >
    <component :is="currentElementComponent" :elementInfo="elementInfo" :selectElement="selectElement" :contextmenus="() => null"></component>
  </div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { ElementTypes, ElementSubtypeTypes, type PPTElement } from "@/types/slides"

import ImageElement from "@/views/components/element/ImageElement/index.vue"
import TextElement from "@/views/components/element/TextElement/index.vue"
import ShapeElement from "@/views/components/element/ShapeElement/index.vue"
import LineElement from "@/views/components/element/LineElement/index.vue"
import ChartElement from "@/views/components/element/ChartElement/index.vue"
import TableElement from "@/views/components/element/TableElement/index.vue"
import LatexElement from "@/views/components/element/LatexElement/index.vue"
import VideoElement from "@/views/components/element/VideoElement/index.vue"
import AudioElement from "@/views/components/element/AudioElement/index.vue"
import cloudCoachElement from "@/views/components/element/cloudCoachElement"
import enjoyElement from "@/views/components/element/enjoyElement"
import listeningPracticeElement from "@/views/components/element/listeningPracticeElement"
import rhythmPracticeElement from "@/views/components/element/rhythmPracticeElement"

const props = defineProps<{
  elementInfo: PPTElement
  elementIndex: number
  selectElement: (e: TouchEvent, element: PPTElement, canMove?: boolean) => void
}>()

const currentElementComponent = computed<unknown>(() => {
  const elementTypeMap = {
    [ElementTypes.IMAGE]: ImageElement,
    [ElementTypes.TEXT]: TextElement,
    [ElementTypes.SHAPE]: ShapeElement,
    [ElementTypes.LINE]: LineElement,
    [ElementTypes.CHART]: ChartElement,
    [ElementTypes.TABLE]: TableElement,
    [ElementTypes.LATEX]: LatexElement,
    [ElementTypes.ELF]: null
  }
  const elementSubtypeMap = {
    [ElementSubtypeTypes.AUDIO]: AudioElement,
    [ElementSubtypeTypes.VIDEO]: VideoElement,
    [ElementSubtypeTypes.SING_PLAY]: cloudCoachElement,
    [ElementSubtypeTypes.ENJOY]: enjoyElement,
    [ElementSubtypeTypes.LISTENING_PRACTICE]: listeningPracticeElement,
    [ElementSubtypeTypes.RHYTHM_PRACTICE]: rhythmPracticeElement
  }
  return elementTypeMap[props.elementInfo.type] || elementSubtypeMap[props.elementInfo.subtype] || null
})
</script>