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 | 20 ++++++++++++++++++--
1 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/components/vue-flow/MainCanvas.vue b/src/components/vue-flow/MainCanvas.vue
index c961f12..db9aabb 100644
--- a/src/components/vue-flow/MainCanvas.vue
+++ b/src/components/vue-flow/MainCanvas.vue
@@ -1,6 +1,6 @@
<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>
@@ -8,8 +8,12 @@
<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>
@@ -17,6 +21,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';
@@ -28,11 +34,12 @@
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']);
+const props = defineProps(['flowJson', 'agentNames', 'funcNames']);
const nodeTypes = {
start: markRaw(StartNode),
@@ -147,14 +154,23 @@
@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: 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>
--
Gitblit v1.9.3