{"version":3,"file":"design.vue2.mjs","sources":["../../../../../src/components/design/design.vue"],"sourcesContent":["<template>\n    <div class=\"my-element-wrapper\"\n         :style=\"style\"\n         :class=\"{\n         'dropInIs': element.runtimeOption.dragInIs,\n         'design-activate-cut-ing': element.runtimeOption.cutIngIs,\n         'design-inactive': !elementHandleStatusList.includes(element.runtimeOption.status) && !elementTypeLineList.includes(element.type),\n         'design-activate': elementHandleHandleStatusList.includes(element.runtimeOption.status),\n         'design-activate-edit': element.runtimeOption.status == 'HANDLE_EDIT_ING',\n       }\"\n         ref=\"designRef\">\n        <element-view :element=\"element\" />\n        <table-design v-if=\"element.type === 'DataTable'\" :element=\"element as any\" />\n        \n        <my-container v-if=\"element.type === 'PageHeader'\" :element=\"element\">\n            <element-list :element-list=\"element.elementList\" />\n        </my-container>\n        <my-container v-else-if=\"element.type === 'PageFooter'\" :element=\"element\">\n            <element-list :element-list=\"element.elementList\" />\n        </my-container>\n        <my-container v-else-if=\"element.type === 'Container'\" :element=\"element\">\n            <element-list :element-list=\"element.elementList\" />\n        </my-container>\n        \n        <div class=\"container-edit-icon\" @click=\"elementEditClick\"\n             v-if=\"elementTypeContainerList.includes(element.type)\">\n            <i class=\"icon-design-edit iconfont\" />\n        </div>\n        \n        <div class=\"container-move-icon\"\n             ref=\"containerMoveIconRef\"\n             v-if=\"element.type == 'Container'\"\n             @mousedown=\"elementMoveMouseDown($event)\">\n            <i class=\"icon-design-move iconfont \" />\n        </div>\n    </div>\n\n</template>\n\n<script setup lang=\"ts\">\nimport ElementView from '@myprint/design/components/design/element.vue';\nimport { MyElement } from '@myprint/design/types/entity';\nimport { computed, CSSProperties, onMounted, ref } from 'vue-demi';\nimport { MyContainer } from './container';\nimport ElementList from './element-list.vue';\nimport {\n    elementHandleHandleStatusList,\n    elementHandleStatusList,\n    elementTypeContainerList, elementTypeLineList\n} from '@myprint/design/constants/common';\nimport TableDesign from '@myprint/design/components/design/table/data-table/table-design.vue';\nimport {\n    moveableClearDragTarget,\n    moveableDragTarget,\n    setSelectedTargets\n} from '@myprint/design/plugins/moveable/moveable';\nimport { unit2px } from '@myprint/design/utils/devicePixelRatio';\nimport { getRecursionParentPanel } from '@myprint/design/utils/elementUtil';\n\nconst designRef = ref();\nconst containerMoveIconRef = ref();\n\nconst props = withDefaults(defineProps<{\n    element?: MyElement\n}>(), {\n    element: () => ({} as MyElement)\n});\n\nonMounted(() => {\n    props.element.runtimeOption.target = designRef.value;\n    designRef.value.element = props.element;\n});\n\nconst style = computed(() => {\n    // console.log(123)\n    props.element.runtimeOption.target = designRef.value;\n    \n    let width = props.element.runtimeOption.init.width;\n    let height = props.element.runtimeOption.init.height;\n    if (props.element.type == 'DottedVerticalLine' || props.element.type == 'VerticalLine') {\n        const lineWidth = unit2px(props.element.option.lineWidth, getRecursionParentPanel(props.element));\n        if (width < lineWidth) {\n            width = lineWidth;\n        }\n    }\n    if (props.element.type == 'DottedHorizontalLine' || props.element.type == 'HorizontalLine') {\n        const lineWidth = unit2px(props.element.option.lineWidth, getRecursionParentPanel(props.element));\n        if (height < lineWidth) {\n            height = lineWidth;\n        }\n    }\n    \n    return {\n        left: props.element.runtimeOption.init.x + 'px',\n        top: props.element.runtimeOption.init.y + 'px',\n        transform: `translate(0px, 0px) rotate(${props.element.runtimeOption.init.runtimeOption.rotate}deg)`,\n        width: width + 'px',\n        height: height + 'px'\n        // maxWidth: widthValueUnit(element),\n        // maxHeight: heightValueUnit(element),\n    } as CSSProperties;\n});\n\nfunction elementEditClick() {\n    setSelectedTargets([props.element.runtimeOption.target]);\n}\n\nfunction elementMoveMouseDown(event: MouseEvent) {\n    let isHandle = true;\n    \n    if (props.element.runtimeOption.status != 'HANDLE') {\n        isHandle = false;\n        setSelectedTargets([props.element.runtimeOption.target]);\n    }\n    moveableDragTarget(containerMoveIconRef.value, event);\n    \n    // let offsetX = 0, offsetY = 0;\n    // function mousemove(ev: MouseEvent) {\n    //   // 鼠标移动时计算每次移动的距离，并改变拖拽元素的定位\n    //   // console.log(ev)\n    //   const currentX = ev.clientX;\n    //   const currentY = ev.clientY;\n    //   let offsetX = currentX - lastX;\n    //   let offsetY = currentY - lastY;\n    //   // lastX = currentX;\n    //   // lastY = currentY;\n    //\n    //   moveableMove(offsetX + initX, offsetY + initY)\n    //   clearEventBubble(ev)\n    //   // 阻止事件的默认行为，可以解决选中文本的时候拖不动\n    //   return false;\n    // }\n    \n    function mouseup(_ev: MouseEvent) {\n        if (!isHandle) {\n            props.element.runtimeOption.status = 'NONE';\n            setSelectedTargets([]);\n        }\n        moveableClearDragTarget();\n        document.removeEventListener('mouseup', mouseup);\n    }\n    \n    document.addEventListener('mouseup', mouseup);\n}\n</script>\n"],"names":[],"mappings":"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"}