代码节点

wujingjing

2024-12-16 ae1afca6065e6cc69174af4151cc3e073d7eb169

 src/components/vue-flow/MainCanvas.vue

@@ -1,11 +1,23 @@
<template>
   <div class="relative h-full w-full" id="main-canvas" @drop="handleOnDrop" @dragover="handleOnDragOver">
      <VueFlow v-model="elements" :node-types="nodeTypes" :connection-mode="ConnectionMode.Loose">
      <VueFlow v-model="elements" :node-types="nodeTypes" :connection-mode="ConnectionMode.Strict" >
         <template #edge-custom="customEdgeProps">
            <CustomEdge v-bind="customEdgeProps" />
         </template>

         <template #node-agent="agentNodeProps">
            <AgentNode v-bind="agentNodeProps" :agentNames="agentNames" />
         </template>
         <template #node-func="funcNodeProps">
            <FuncNode v-bind="funcNodeProps" :funcNames="funcNames" />
         </template>

         <template #node-code="codeNodeProps">
            <CodeNode v-bind="codeNodeProps" />
         </template>
         <Controls />
         <Background />
         <MiniMap pannable zoomable />
      </VueFlow>
   </div>
</template>
@@ -13,6 +25,8 @@
<script setup lang="ts">
import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls';
import { MiniMap } from '@vue-flow/minimap';

import { Dimensions, Elements, useVueFlow, VueFlow, ConnectionMode, MarkerType } from '@vue-flow/core';
import { markRaw, nextTick, ref, watch } from 'vue';
import { Test_data } from './testData';
@@ -24,53 +38,68 @@
import LLMNode from './ui/nodes/LLMNode.vue';
import OutputNode from './ui/nodes/OutputNode.vue';
import AgentNode from './ui/nodes/AgentNode.vue';
import FuncNode from './ui/nodes/FuncNode.vue';
import CodeNode from './ui/nodes/CodeNode.vue';

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

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

const nodeTypes = {
   start: markRaw(StartNode),
   end: markRaw(EndNode),
   condition: markRaw(ConditionNode),
   LLM:markRaw(LLMNode),
   LLM: markRaw(LLMNode),
   // output:markRaw(OutputNode),
   agent:markRaw(AgentNode),
   [NodeType.Output]:markRaw(OutputNode)
   // agent: markRaw(AgentNode),
   [NodeType.Output]: markRaw(OutputNode),
   // LLM: markRaw(LLMNode),
   // code: markRaw(CodeNode),
   // knowledge: markRaw(KnowledgeNode),
   // api: markRaw(ApiNode),
};
const elements = ref<Elements>();
const { findNode, nodes, addNodes, addEdges, project, vueFlowRef, onConnect, setNodes, setEdges, setViewport,fromObject } = useVueFlow({
   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({
      id: VueFlowHelper.genGeometryId(),

   addEdges(params);
      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) {
@@ -130,13 +159,24 @@
@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';
@import '@vue-flow/node-resizer/dist/style.css';

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

   --handle-size: 13px;
   --resize-handle-size: 8px;
   .vue-flow__handle {
      width: 18px;
      height: 18px;
      width: var(--handle-size);
      height: var(--handle-size);
   }

   .vue-flow__resize-control.handle {
      width: var(--resize-handle-size);
      height: var(--resize-handle-size);
      // visibility: hidden;
   }
}
</style>

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