From 890adec7fddfe9d5f5da4511343ac6e8341d46b3 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期一, 16 十二月 2024 10:34:41 +0800
Subject: [PATCH] 可改变大小
---
src/components/vue-flow/MainCanvas.vue | 116 ++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 85 insertions(+), 31 deletions(-)
diff --git a/src/components/vue-flow/MainCanvas.vue b/src/components/vue-flow/MainCanvas.vue
index b02e2ab..db9aabb 100644
--- a/src/components/vue-flow/MainCanvas.vue
+++ b/src/components/vue-flow/MainCanvas.vue
@@ -1,8 +1,19 @@
<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>
<Controls />
<Background />
+ <MiniMap pannable zoomable />
</VueFlow>
</div>
</template>
@@ -10,50 +21,82 @@
<script setup lang="ts">
import { Background } from '@vue-flow/background';
import { Controls } from '@vue-flow/controls';
-import { Dimensions, Elements, useVueFlow, VueFlow,ConnectionMode } from '@vue-flow/core';
+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';
import StartNode from './ui/nodes/StartNode.vue';
import EndNode from './ui/nodes/EndNode.vue';
import { VueFlowHelper } from './VueFlowHelper';
import { NodeType, nodeTypeMap } from './vueFlowEnum';
+import ConditionNode from './ui/nodes/ConditionNode.vue';
+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 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),
+ // 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 } = useVueFlow({
- nodes: [
- {
- id: '1',
- type: 'start',
- data: {
- title: '寮�濮�',
- },
+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 },
+ position: { x: 25, y: 400 },
+ },
+ ],
+ edges: [],
+ }
+);
+
+onConnect((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,
},
- {
- id: '2',
- type: 'end',
- data: {
- title: '缁撴潫',
- },
- position: { x: 1000, y: 400 },
- },
- ],
- edges: [
- // {
- // id: 'test',
- // source: '1',
- // target: '2',
- // },
- ],
+ });
+
+ // addEdges());
});
+
+onMounted(() => {
+ setTimeout(() => {
+ fitView();
+ }, 30);
+});
+
function handleOnDrop(event: DragEvent) {
const type = event.dataTransfer?.getData('application/vueflow') as NodeType;
if (type === 'workflow') {
@@ -73,7 +116,7 @@
});
const newNode = {
- id: (nodes.value.length + 1).toString(),
+ id: VueFlowHelper.genGeometryId(),
type,
position,
label: nodeTypeMap[type],
@@ -111,13 +154,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>
--
Gitblit v1.9.3