airoptweb/src/views/vuetree/useDnD.js

// import { useVueFlow,Position,MarkerType } from '@vue-flow/core';
import { useVueFlow,Position,MarkerType} from '@vue-flow/core';
import { ref, watch } from 'vue'
import gc1 from '@/assets/flowimg/gc1.png'
import gc2 from '@/assets/flowimg/gc2.png'
import gc3 from '@/assets/flowimg/gc3.png'
import wen from '@/assets/flowimg/wen.png'
import xuek1 from '@/assets/flowimg/xuek1.png'
import xuek0 from '@/assets/flowimg/xuek0.png'
import xuek2 from '@/assets/flowimg/xuek2.png'
import xuek3 from '@/assets/flowimg/xuek3.png'
import xuek4 from '@/assets/flowimg/xuek4.png'
import xuek5 from '@/assets/flowimg/xuek5.png'
import xuek6 from '@/assets/flowimg/xuek6.png'
import xuek7 from '@/assets/flowimg/xuek7.png'
import xuek8 from '@/assets/flowimg/xuek8.png'
import xuek9 from '@/assets/flowimg/xuek9.png'
import xuek10 from '@/assets/flowimg/xuek10.png'
import xuek11 from '@/assets/flowimg/xuek11.png'
import xuek12 from '@/assets/flowimg/xuek12.png'
let nid = 0;
let id=0
let datas={}

/**
 * @returns {string} - A unique id.
 */
function getId() {
  return `node_${id++}`
}
function imagefun(){
  console.log(nid);
  if(nid=='1-1'){
    return  datas = {label: '优化问题', image:gc1}
    }else if(nid=='1-2'){
      return datas = {label:'分析流程', image:gc2}
    }else if(nid=='1-3'){
      return datas = {label:'优化器', image:gc3}
    }else if(nid=='2_1'){
      return datas = {label:'优化问题', image:wen}
    }else if(nid=='3-1'){
      return datas = {label:'CATIA', image:xuek1}
    }else if(nid=='3-0'){
      return datas = {label:'CST', image:xuek0}
    } else if(nid=='3-2'){
      return datas = {label:'Excel', image:xuek2}
    }else if(nid=='3-3'){
      return datas = {label:'Feko', image:xuek3}
    }else if(nid=='3-4'){
      return datas = {label:'Fluent', image:xuek4}
    }else if(nid=='3-5'){
      return datas = {label:'HCFD', image:xuek5}
    }else if(nid=='3-6'){
      return datas = {label:'Matlab', image:xuek6}
    }else if(nid=='3-7'){
      return datas = {label:'Nastran', image:xuek7}
    }else if(nid=='3-8'){
      return datas = {label:'Rosenbrock', image:xuek8}
    }else if(nid=='3-9'){
      return datas = {label:'AirfoilAero', image:xuek9}
    }else if(nid=='4-1'){
      return datas = {label:'进化优化器', image:xuek10}
    }else if(nid=='4-2'){
      return datas = {label:'代理优化器', image:xuek11}
    }else if(nid=='4-3'){
      return datas = {label:'梯度优化器', image:xuek12}
    }
    else{
      return null;
    }

  }

/**
 * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
 * @type {{draggedType: Ref<string|null>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
 */
const state = {
  /**
   * The type of the node being dragged.
   */
  draggedType: ref(null),
  isDragOver: ref(false),
  isDragging: ref(false),
}

export default function useDragAndDrop() {
  const { draggedType, isDragOver, isDragging } = state

  const { addNodes, addEdges,screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()

  watch(isDragging, (dragging) => {
    document.body.style.userSelect = dragging ? 'none' : ''
  })

  function onDragStart(event, type,id) {
  
 
    if (event.dataTransfer) {
     
      nid=id;
      event.dataTransfer.setData('application/vueflow', type)
      event.dataTransfer.effectAllowed = 'move'    
      console.log(1122344)   
   
    }

    draggedType.value =type;
    //draggedType.value = 'smoothstep'
    isDragging.value = true

    document.addEventListener('drop', onDragEnd)
   
  }

  /**
   * Handles the drag over event.
   *
   * @param {DragEvent} event
   */
  function onDragOver(event) {
    event.preventDefault()

    if (draggedType.value) {
      isDragOver.value = true

      if (event.dataTransfer) {
        event.dataTransfer.dropEffect = 'move'
      }
    }
  }
  function handleNodeDrop(e){
  
  }
  function onDragLeave(e) {
  
    isDragOver.value = false
  }

  function onDragEnd() {
    isDragging.value = false
    isDragOver.value = false
    draggedType.value = null
    nid=''
    document.removeEventListener('drop', onDragEnd)
  }

  /**
   * Handles the drop event.
   *
   * @param {DragEvent} event
   */
  function onDrop(event) {
    const position = screenToFlowCoordinate({
      x: event.clientX,
      y: event.clientY,
    })

    const nodeId = getId()
    const image1=imagefun();
 
    let snodes=ref([]);
    let sedges=ref([]);

    if(nid=='4'){
      // const nodes = ref([])
      // const edges = ref([])

    }else{
      snodes.value=[];
      sedges.value=[];
      const newNode = {
        id: nodeId,
        type: draggedType.value,
        position,
        data: image1,
      }
      snodes.value.push(newNode)
    
    }
    const { off } = onNodesInitialized(() => {
      updateNode(nodeId, (node) => ({
        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
      }))

      off()
    })
    addNodes(snodes.value)
    
   // addEdges(sedges.value)
  }

  return {
    draggedType,
    isDragOver,
    isDragging,
    onDragStart,
    onDragLeave,
    onDragOver,
    onDrop,
    handleNodeDrop,
  }
}