feat(flow): 优化流程编辑功能

wujingjing

2024-12-12 f9cba7fdc9d60bbb2eee6d4eeff3556daea3e2ef

 src/components/vue-flow/MainCanvas.vue

@@ -6,7 +6,7 @@
         </template>

         <template #node-agent="agentNodeProps">
            <AgentNode v-bind="agentNodeProps" :agentNames="agentNames"/>
            <AgentNode v-bind="agentNodeProps" :agentNames="agentNames" />
         </template>
         <Controls />
         <Background />
@@ -30,9 +30,9 @@
import AgentNode from './ui/nodes/AgentNode.vue';

import CustomEdge from './ui/edges/CustomEdge.vue';
import { onMounted } from 'vue';

const props = defineProps(['flowJson','agentNames']);

const props = defineProps(['flowJson', 'agentNames']);

const nodeTypes = {
   start: markRaw(StartNode),
@@ -40,7 +40,7 @@
   condition: markRaw(ConditionNode),
   LLM: markRaw(LLMNode),
   // output:markRaw(OutputNode),
   agent: markRaw(AgentNode),
   // agent: markRaw(AgentNode),
   [NodeType.Output]: markRaw(OutputNode),
   // LLM: markRaw(LLMNode),
   // code: markRaw(CodeNode),
@@ -48,38 +48,46 @@
   // api: markRaw(ApiNode),
};
const elements = ref<Elements>();
const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport, fromObject } =
   useVueFlow(
      Object.keys(props.flowJson).length > 0
         ? props.flowJson
         : {
               nodes: [
                  {
                     id: '1',
                     type: 'start',
                     data: VueFlowHelper.getDefaultData(NodeType.Start),
const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport, fitView } = useVueFlow(
   Object.keys(props.flowJson).length > 0
      ? props.flowJson
      : {
            nodes: [
               {
                  id: '1',
                  type: 'start',
                  data: VueFlowHelper.getDefaultData(NodeType.Start),

                     position: { x: 25, y: 400 },
                  },
                  {
                     id: '2',
                     type: 'end',
                     data: VueFlowHelper.getDefaultData(NodeType.End),
                     position: { x: 1000, y: 400 },
                  },
               ],
               edges: [
                  // {
                  //    id: 'test',
                  //    source: '1',
                  //    target: '2',
                  // },
               ],
           }
   );
                  position: { x: 25, y: 400 },
               },
            ],
            edges: [],
        }
);

onConnect((params) => {
   addEdges(params);
   addEdges({
      id: VueFlowHelper.genGeometryId(),

      source: params.source,
      target: params.target,
      sourceHandle: params.sourceHandle,
      targetHandle: params.targetHandle,
      type: 'custom',
      markerEnd: {
         type: MarkerType.ArrowClosed,
         width: 40,
         height: 70,
      },
   });

   // addEdges());
});

onMounted(() => {
   setTimeout(() => {
      fitView();
   }, 30);
});

function handleOnDrop(event: DragEvent) {
@@ -142,10 +150,12 @@

#main-canvas {
   --vf-handle: #2563eb;

   --handle-size: 13px;
   .vue-flow__handle {
      width: 18px;
      height: 18px;
      width: var(--handle-size);
      height: var(--handle-size);
   }
}
</style>

<style lang="scss" scoped></style>