MOM-UI/src/views/boardGenerate/tool.js

import { useVueFlow } from '@vue-flow/core';
import { ref, watch } from 'vue';
import { v4 as uuidv4 } from 'uuid';


const getId = (type) => {
  return `${type}_${uuidv4().replaceAll('-', '_')}`;
};


const getOption = (e) => {
  if (e === 'line' || e === 'multiLines') {
    return { title: '', yNames: [] };
  } else if (e === 'bar' || e === 'multiBars') {
    return { title: '', yNames: [] };
  } else if (e === 'curve' || e === 'multiCurves') {
    return { title: '', yNames: [] };
  } else if (e === 'customBoard') {
    return { title: '', yNames: [] };
  } else if (e === 'data') {
    return {};
  } else if (e === 'map') {
    return { dataMap: [] };
  } else if (e === 'inputNode') {
    return { field: '' };
  } else if (e === 'time') {
    return { startTimeId: 'startTime', endTimeId: 'endTime' };
  } else if (e === 'text') {
    return { text: '文字', align: '', color: '#fff' };
  } else if (e === 'img') {
    return { imgSrc: '' };
  } else {
    return {};
  }
};
const getNodeSize = (e) => {
  if (e === 'line') {
    return { width: 300, height: 150 };
  } else if (e === 'data') {
    return { width: 200, height: 50 };
  } else if (e === 'inputNode') {
    return { width: 100, height: 30 };
  } else if (e === 'map') {
    return { width: 100, height: 30 };
  } else {
    return { width: 100, height: 100 };
  }
};

const tool = () => {
  const nodeType = ref('');
  const customData = ref('');
  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
  const onDragStart = (event, type, data) => {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type);
      event.dataTransfer.effectAllowed = 'move';
    }

    nodeType.value = type;
    customData.value = data;
    document.addEventListener('drop', onDragEnd);
  };
  const onDragEnd = () => {
    nodeType.value = null;
    document.removeEventListener('drop', onDragEnd);
  };
  const onDrop = (event) => {
    const dimensions = getNodeSize(nodeType.value);

    const position = screenToFlowCoordinate({
      x: event.clientX, y: event.clientY
    });

    const nodeId = getId(nodeType.value);
    const newNode = {
      id: nodeId,
      name: nodeType.value,
      type: nodeType.value,
      dimensions,
      position,
      data: { options: getOption(nodeType.value), outputData: {}, customData: customData.value }
    };


    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(newNode);

  };
  const onDragOver = (event) => {
    event.preventDefault();

    if (nodeType.value) {

      if (event.dataTransfer) {
        event.dataTransfer.dropEffect = 'move';
      }
    }
  };
  return {
    onDragStart, onDragEnd, onDrop, onDragOver
  };
};
export default tool;
export const options = {
  isD: false
};