<template> <div class="topic-element-preview"> <div :class="classes" :id="`preview-${data.id}`" :data-type="data.type" :style="styles" > <component :is="compName" :data="data" preview></component> </div> </div> </template> <script> import PreviewCardHead from "../elements/card-head/CardHead"; import PreviewExplain from "../elements/explain/ElemExplain"; import PreviewComposition from "../elements/composition/ElemComposition"; import PreviewFillQuestion from "../elements/fill-question/ElemFillQuestion"; import PreviewFillLine from "../elements/fill-line/ElemFillLine"; import PreviewForbidArea from "../elements/forbid-area/ElemForbidArea.vue"; import PreviewTopicHead from "../elements/topic-head/TopicHead"; export default { name: "topic-element-preview", components: { PreviewCardHead, PreviewTopicHead, PreviewFillQuestion, PreviewFillLine, PreviewExplain, PreviewComposition, PreviewForbidArea, }, props: { data: { type: Object, }, }, data() { return {}; }, computed: { elementName() { return this.data.type.toLowerCase().replace("_", "-"); }, compName() { return `preview-${this.elementName}`; }, classes() { return [ "topic-preview", "element-item", "element-item-width", `element-item-${this.elementName}`, this.data["isLast"] ? `element-item-type-last` : "element-item-type-pre", ]; }, styles() { return { left: this.data.x + "px", top: this.data.y + "px", width: this.data.w + "px", height: this.data.h + "px", }; }, }, methods: {}, }; </script>