airoptweb/src/views/vueflow/useDnD.js

// import { useVueFlow,Position,MarkerType } from '@vue-flow/core';
import { useVueFlow,Position,MarkerType} from '@vue-flow/core';
import { ref, watch } from 'vue'
import f11 from '@/assets/img/f11.png'
import f32 from '@/assets/img/f32.png'
import f33 from '@/assets/img/f33.png'
import f12 from '@/assets/img/f12.png'
import f21 from '@/assets/img/f21.png'
import f22 from '@/assets/img/f22.png'
import f41 from '@/assets/img/f41.png'
import { E } from '@kitware/vtk.js/macros2'
import { Right } from '@element-plus/icons'
import { LEFT_CHECK_CHANGE_EVENT } from 'element-plus'
let nid = 0;
let id=0
let datas={}

/**
 * @returns {string} - A unique id.
 */
function getId() {
  return `node_${id++}`
}
function imagefun(){
  // console.log(id);
  if(nid==1){
    return  datas = {label: '开始', image:f11}
    }else if(nid==2){
      return datas = {label:'结束', image:f12}
    }else if(nid==3){
      return datas = {label:'优化器', image:f32}
    }else{
     // return datas = {label:'模版', image:f41}
    }

  }

/**
 * 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) {
 
    nid=id;
    console.log(type);
    console.log(1234667)
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type)
      event.dataTransfer.effectAllowed = 'move'
    }

    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
    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=[];

    if(nid=='4'){
      const nodes = ref([
        {
      data:{label: '开始', image: f11},
      id: "node_01",
      position: {x:245, y: 317},
      // type: "default",
      sourcePosition: Position.Right,
      targetPosition: Position.Left, 

      },
      {
      data:{label: '优化器', image: f32},
      id: "node_02",
      position: {x: 435, y: 317},
      // type: "default",
      sourcePosition: Position.Right,
      targetPosition: Position.Left, 
      class: 'light',
   
      },
      {
      data:{label: 'Rosenbank', image: f33},
      id: "node_03",
      position: {x: 630, y: 317},
      // type: "default",
     // type: "default",
      sourcePosition: Position.Right,
      targetPosition: Position.Left, 
      // sourcePosition: Position.Top,
      // targetPosition: Position.Bottom, 
     
      },
      {
      data:{label: '结束', image: f12},
      id: "node_04",
      position: {x: 804, y: 317},
      // type: "default",
      sourcePosition: Position.Right,
      targetPosition: Position.Left, 
      },
      {
      data:{label: '输入1', image: f21},
      id: "node_05",
      position: {x: 435, y: 146},
      // type: "default",
      draggable: true, 
      sourcePosition: Position.Top,
      targetPosition: Position.Bottom, 
   
      },
      {
      data:{label: '输入2', image: f21},
      id: "node_06",
      position: {x:804, y: 146},
      //type: "default",//default
      sourcePosition: Position.Top,
      targetPosition: Position.Bottom, 
      },
      {
      data:{label: '输出', image: f22},
      id: "node_07",
      position: {x: 630, y: 519},
      //type: "default",
      sourceHandle: 'Top',
      sourcePosition: Position.Bottom,
      targetPosition: Position.Top, 
      },
      
      ]);
      const edges = ref([
      {
        id: 'e1->2',
        source: 'node_01',
        target: 'node_02',
        label: '按照我的来',
        type: 'straight',
        markerEnd: {
          type: MarkerType.ArrowClosed,
        },
        // id: 'e1->2',
        // source: 'node_01',
        // target: 'node_02',
        // type: 'straight',
        // markerEnd: MarkerType.ArrowClosed,

      },
      {
        id: 'e2->3',
        source: 'node_02',
        target: 'node_03',
        type: 'straight',
       // markerEnd: MarkerType.ArrowClosed,
      //   markerEnd: {
      //     type: MarkerType.ArrowClosed,
      //     color: 'red',
      // },
      markerEnd: {
        tagName: MarkerType.ArrowClosed,
        width: 20,
        height: 20,
      },
        //type: 'output',
        // style: {
        //   stroke: '#FF0000',
        //   markerEnd: MarkerType.ArrowClosed,
        // },
      },
      {
        id: 'e3->4',
        source: 'node_03',
        target: 'node_04',
        type: 'straight' ,
        markerEnd: "arrow" // 或者使用 " arrowhead"


      },
      {
        id: 'e4->5',
        source: 'node_05',
        target: 'node_03',
        type: 'straight',
        animated: true ,
        sourceHandle: 'Top',
        targetHandle:'Bottom',
        markerEnd: MarkerType.ArrowClosed,

      },
      {
        id: 'e5->6',
        source: 'node_06',
        target: 'node_03',
        type: 'straight',
         animated: true,
        // source: 'handle-bottom',
        // target: 'handle-top',
        sourceHandle: 'Top',
        targetHandle:'Bottom',
        tagName: MarkerType.ArrowClosed,

      
      },
      {
        id: 'e6->7',
        source: 'node_03',
        target: 'node_07',
        // type: 'straight',
        type: 'straight',
        animated: true,
        sourceHandle: 'Top',
        targetHandle:'Bottom',
        markerEnd: MarkerType.ArrowClosed,
      },
      ]);
snodes=nodes;
 sedges=edges;
    }else{
      snodes.value=[];
      sedges.value=[];
      const newNode = {
        id: nodeId,
        type: draggedType.value,
        position,
        data: image1,
      }
      console.log(newNode);
      snodes.value.push(newNode)
      const newedges = {
        type: 'smoothstep',
        markerEnd: MarkerType.ArrowClosed,
      }
      sedges.value.push(newedges)
      //sedges=edges
    }
  
   // console.log(newNode);
    /**
     * Align node position after drop, so it's centered to the mouse
     *
     * We can hook into events even in a callback, and we can remove the event listener after it's been called.
     */
    const { off } = onNodesInitialized(() => {
      updateNode(nodeId, (node) => ({
        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
      }))

      off()
    })
    console.log(snodes.value);
    addNodes(snodes.value)
    addEdges(sedges.value)
  }

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