airoptweb/src/views/vueflow/index.vue

<template>
  <div class="dnd-flow" >
    <VueFlow ref="vueFlowRef"  :nodes="nodes" :edges="edges"  @drop="onDrop"   @contextmenu.prevent="onContextMenu"
    @keydown.delete="onDeleteKey"   @dragover="onDragOver" @dragleave="onDragLeave"  @node-click="onNodeClick">
      <!-- <template #node-default="props"> -->
        <template #node-default="props">
          <modelb  :node="props"  />
      <!-- <modelb :node="props"  /> -->
    </template>
    <!-- //<Handle type="target" :position="Position.Left" /> -->
     <!-- <Panel>
      <DropzoneBackground
        :style="{
          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
          transition: 'background-color 0.2s ease',
        }"
      >
      </DropzoneBackground> 
    </Panel> -->
    </VueFlow>

    <!-- <Sidebar /> -->
  <!-- 优化器 -->
  <div id="contextMenu"   v-show="shopShow"  @click="deleteItemConfirm">删除</div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import { VueFlow,  useVueFlow,Position } from '@vue-flow/core'
import "./main.css";//重置样式
import DropzoneBackground from './DropzoneBackground.vue'
import useDragAndDrop from './useDnD'
import f11 from '@/assets/img/f11.png'
 import modelb from './modelb.vue'
 import { useDialogState } from './delete.js'
 const { isVisible, message, resolve } = useDialogState()
 const { onConnect, addEdges, onNodesChange, onEdgesChange, applyNodeChanges, applyEdgeChanges } = useVueFlow()
let vueFlowRef=ref();
let emit = defineEmits(['optimizerfalse']);
const props = defineProps({})
let  shopShow=ref(false);
let noid=ref([]);
let node=ref();
let  contextMenu=ref( {
        shopShow: false,
        position: { x: 0, y: 0 },
        target: 'kong',
      })
const { onDragOver, onDrop, onDragLeave, isDragOver} = useDragAndDrop();
const edges = ref([]);
const nodes = ref([]);
onConnect(addEdges)

function onNodeClick(e){
  noid.value=e.node;
  console.log(e);
  console.log(111111)
  if(e.node.data.label=='优化器'){
    console.log(e.node);
    emit('optimizerfalse', true);
  }

}
function onContextMenu(event,node) {
  console.log(event)
  console.log(node)
 // event.preventDefault();
 if(noid.value!==null){


      if (noid.value.id) {
        document.getElementById('contextMenu').style.top = noid.value.position.y+50 + 'px';
     document.getElementById('contextMenu').style.left = noid.value.position.x +80+ 'px';
     document.getElementById('contextMenu').style.display = 'block';
    shopShow.value=true;
     event.preventDefault();

      }
    }
  
    }
    //点击左键右键内容消失
    document.addEventListener('click', function(e) {
  if (e.button === 0) { // 0 是左键
     //document.getElementById('contextMenu').style.display = 'none';
    shopShow.value=false;
  }
});
    function   onDeleteKey(event,node) {
      // 禁用Backspace删除节点
      console.log(event)
      event.preventDefault();
   
    }
//删除
const deleteItemConfirm=()=>{
  //const index = nodes.value.findIndex(n => n.id === noid.value.id);
  if(noid.value.id){
  vueFlowRef.value.removeNodes(noid.value.id);
  noid.value=null;
   // nodes.value = nodes.value.filter(node => node.id !== noid.value.id);
 //console.log(noid.value.id);
  // resolve(true)
  // console.log( resolve(true));
  shopShow.value = false
  }

}
onNodesChange(async (changes) => {
  const nextChanges = []

  for (const change of changes) {

    if (change.type === 'remove') {
      const isConfirmed = noid.value.id
      console.log(isConfirmed)
      if (isConfirmed) {
        nextChanges.push(change)
      }
    } else {
      nextChanges.push(change)
    }
  }

  applyNodeChanges(nextChanges)
})


</script>
<style>
.vue-flow__edge {
  text-align: left; /* 设置edges的左对齐 */
}
#contextMenu{
  /* display: none; */
  position: absolute;
background-color: #fff;
border-radius: 5px;
padding: 10px;
text-align: center;
color: black;
font-size: 14px;
font-weight: 400;
cursor: pointer;
}
</style>