123321

<template>
 <a-layout id="root" style="height: 100%;padding: 10px;">
  <a-layout-sider data-drop="move" id="menu" style="width:20%;padding:10px">
   <a-row justify="space-around">
    <a-tooltip content="基础线条">
     <baseLine data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="传感器">
     <sensor data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="快速选择器">
     <quickConnector data-effect="copy" draggable="true" />
    </a-tooltip>
   </a-row>
   <br />
   <a-row justify="space-around">
    <a-tooltip content="基础线条">
     <baseLine data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="传感器">
     <sensor data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="快速选择器">
     <quickConnector data-effect="copy" draggable="true" />
    </a-tooltip>
   </a-row>
   <br />
   <a-row justify="space-around">
    <a-tooltip content="基础线条">
     <baseLine data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="传感器">
     <sensor data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="快速选择器">
     <quickConnector data-effect="copy" draggable="true" />
    </a-tooltip>
   </a-row>
   <br />
   <a-row justify="space-around">
    <a-tooltip content="基础线条">
     <baseLine data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="传感器">
     <sensor data-effect="copy" draggable="true" />
    </a-tooltip>
    <a-tooltip content="快速选择器">
     <quickConnector data-effect="copy" draggable="true" />
    </a-tooltip>
   </a-row>
  </a-layout-sider>
  <a-layout-content style="margin-left:10px">
   <a-trigger trigger="contextMenu" align-point>
    <a-card @click="onClick" @contextmenu.prevent="onRightClick" v-on:dblclick="handleDoubleClick" data-drop="true"
     id="container" style="height:83vh">
    </a-card>
    <template v-if="isModal" #content>
     <a-space style="backgroundColor:yellow" direction="vertical">
      <a-button @click="rotate" size="mini"> 旋转90度 </a-button>
      <a-button @click="deleteele" size="mini"> 删除 </a-button>
      <a-button @click="namespace.visible = true" size="mini"> 属性 </a-button>
     </a-space>
    </template>
   </a-trigger>
  </a-layout-content>

  <!-- 修改弹窗 -->
  <a-drawer :title="dataList.title" :mask="true" :width="340" :visible="namespace.visible" @ok="handleBeforeOk"
   @cancel="handleCancel" unmountOnClose>
   <a-form :model="dataList.form">
    <a-form-item v-for="(item, index) in dataList.form" :key="index" :label="item.label">
     <a-input v-model="item.value" :placeholder="item.placeholder" />
    </a-form-item>
   </a-form>
  </a-drawer>
  <!-- 右键快速修改属性 -->
 </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import baseLine from "./controls/base_line.vue"  // 基础线条
import sensor from "./controls/sensor.vue"  // 传感器
import quickConnector from "./controls/quick_connector.vue"  // 传感器
import { baseLineData } from "./models/base_line"
let controls = import.meta.glob("./controls/*.vue", { eager: false })
console.log(Object.entries(controls));
let isModal = ref(false)
const formData: any = {
 baseLineData,
}
let a: number = 0;
let dataList = reactive<any>({})
const namespace = reactive<any>({
 fg: false,  // 控制一次右键操作一个数据项
 x: 100,
 y: 100,
 visible: false,
 form: {
  name: '',
 },
 cobj: '',
})

let containerDiv: any = ref()
let root: any = ref()


// 拖拽事件
setTimeout(() => {
 containerDiv.value = document.querySelector("#container")
 root.value = document.querySelector("#root")
 // 显示
 root.value.ondragend = (e: any) => {
  e.preventDefault()
  if (e.target.style.flag === 'true') {
   e.target.style.position = 'absolute'
   e.target.style.flag = 'true'
   e.target.style.top = (e.clientY - 120) + 'px'
   e.target.style.left = (e.clientX - 530) + 'px'
   return
  }
  const cloneDiv = e.target.cloneNode(true)
  cloneDiv.style.position = 'absolute'
  cloneDiv.style.flag = 'true'
  cloneDiv.style.top = (e.clientY - 120) + 'px'
  cloneDiv.style.left = (e.clientX - 530) + 'px'
  containerDiv.value.appendChild(cloneDiv)
 }
}, 0)


// 双击事件修改样式
const handleDoubleClick = (e: any) => {
 console.log('双击事件', e.target.dataset.id);
 let idx: any = e.target.dataset.id
 dataList = formData[idx]
 console.log(dataList);
 namespace.cobj = e.target
 namespace.visible = true
}

// 创建文本 val:文本内容
const createText = (val: any) => {
 // const p = createElement("p",val)
 // namespace.cobj.appendChild(p)
}

// 确定修改
const handleBeforeOk = () => {
 let uid = dataList.id
 if (uid = 'base_line') {
  console.log(dataList.form);
  namespace.cobj.children[0].style.width = dataList.form[1].value + 'px'
  createText('default')
 }
}

// 确定事件  == 选中状态【加上边框区别】  ps:只能操作一个元素
const onClick = (e: any) => {
 if (namespace.fg) return console.log('每次只能操作一个元素')
 const node = e.target;
 namespace.cobj = node
 let idx: any = node.dataset.id
 dataList = formData[idx]
 if (node.dataset.id === 'baseLineData') {  // 箭头
  node.style.borderColor = 'red'
  namespace.fg = true
 }
}

// 鼠标右键事件
const onRightClick = (e: any) => {
 isModal.value = false
 const node = e.target
 if (!node.style.borderColor) return console.log('请选中元素')
 if (node.dataset.id === 'baseLineData') {  // 箭头
  isModal.value = true
 }
}

// 删除
const deleteele = (node: any) => {
 namespace.cobj.remove()
 isModal.value = false
 namespace.fg = false
}

// 旋转 90 
const rotate = () => {
 a += 90;
 console.log(a);
 namespace.cobj.style.transform = `rotate(${a}deg)`
}


// 取消
const handleCancel = () => {
 namespace.visible = false
}



</script>

<style scoped lang="less">
#container {
 position: relative;
}

.bgc {
 background-color: gray;
}

#root {
 .arco-drawer-header {
  background-color: red;
 }
}
</style>