<template> <div class="topic-element-edit"> <element-resize v-model="elemData" :class="{ 'element-resize-act': curElement.id === data.id }" :transform-fit="transformFit" :element-pk="data.id" is-compact @resize-over="resizeOver" @on-click="activeCurElement" > <div :class="classes" :style="styles" :id="data.id" :data-type="data.type" > <component :is="compName" :data="data"></component> </div> </element-resize> </div> </template> <script> import { mapState, mapMutations } from "vuex"; import { objAssign } from "../../../plugins/utils"; import ElementResize from "../../../components/common/ElementResize"; import TopicNumber from "../../../components/common/TopicNumber"; // elements import EditFillQuestion from "../elements/fill-question/ElemFillQuestion"; import EditFillLine from "../elements/fill-line/ElemFillLine"; import EditText from "../../../elements/text/ElemText"; import EditImage from "../../../elements/image/ElemImage"; import EditLine from "../../../elements/line/ElemLine"; import EditLines from "../../../elements/lines/ElemLines"; import EditGrids from "../../../elements/grids/ElemGrids"; import EditPane from "../../../elements/pane/ElemPane"; import EditBarcode from "../../../elements/barcode/ElemBarcode"; import EditFillNumber from "../../../elements/fill-number/ElemFillNumber"; import EditFillField from "../../../elements/fill-field/ElemFillField"; import EditFillTable from "../../../elements/fill-table/ElemFillTable"; import EditFillPane from "../../../elements/fill-pane/ElemFillPane"; export default { name: "topic-element-edit", components: { ElementResize, TopicNumber, EditFillQuestion, EditFillLine, EditFillNumber, EditFillField, EditFillTable, EditFillPane, EditText, EditImage, EditLine, EditLines, EditGrids, EditPane, EditBarcode, }, props: { data: { type: Object, }, transformFit: { type: Function, default() { return {}; }, }, }, data() { return { styles: {}, elemData: { x: 0, y: 0, w: 0, h: 0, zindex: 9, init: false, }, }; }, computed: { ...mapState("free", ["curElement"]), elementName() { if (this.data.type.includes("LINE_")) return "line"; return this.data.type.toLowerCase().replace("_", "-"); }, compName() { return `edit-${this.elementName}`; }, classes() { return [ "topic-design", "element-item", `element-item-${this.elementName}`, ]; }, }, created() { this.init(); }, methods: { ...mapMutations("free", ["setCurElement"]), init() { this.elemData = objAssign(this.elemData, this.data); this.styles = { left: this.data.x + "px", top: this.data.y + "px", width: this.data.w + "px", height: this.data.h + "px", zIndex: this.data.zindex, }; }, activeCurElement() { this.setCurElement(this.data); }, resizeOver() { this.$emit("resize-over", Object.assign({}, this.data, this.elemData)); }, }, }; </script>