124 lines
3.8 KiB
Vue
124 lines
3.8 KiB
Vue
<template>
|
|
<!-- Custom edge with prompt order selector | 带提示词顺序选择器的自定义边 -->
|
|
<BaseEdge :path="path" :style="edgeStyle" />
|
|
|
|
<!-- Edge label with order selector | 带顺序选择器的边标签 -->
|
|
<EdgeLabelRenderer>
|
|
<div
|
|
:style="{
|
|
position: 'absolute',
|
|
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
|
|
pointerEvents: 'all'
|
|
}"
|
|
class="nodrag nopan"
|
|
>
|
|
<n-dropdown
|
|
:options="orderOptions"
|
|
@select="handleOrderSelect"
|
|
size="small"
|
|
>
|
|
<button
|
|
class="flex items-center justify-center w-6 h-6 text-xs font-bold rounded-full bg-[var(--accent-color)] text-white border-2 border-white shadow-md hover:scale-110 transition-transform"
|
|
>
|
|
{{ currentOrder }}
|
|
</button>
|
|
</n-dropdown>
|
|
</div>
|
|
</EdgeLabelRenderer>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
|
|
import { NDropdown } from 'naive-ui'
|
|
import { edges } from '../../stores/canvas'
|
|
|
|
// Get VueFlow instance | 获取 VueFlow 实例
|
|
const { updateEdgeData } = useVueFlow()
|
|
|
|
const props = defineProps({
|
|
id: String,
|
|
source: String,
|
|
target: String,
|
|
sourceX: Number,
|
|
sourceY: Number,
|
|
targetX: Number,
|
|
targetY: Number,
|
|
sourcePosition: String,
|
|
targetPosition: String,
|
|
data: Object,
|
|
markerEnd: String,
|
|
style: Object
|
|
})
|
|
|
|
// Order labels | 顺序标签
|
|
const orderLabels = [
|
|
{ label: '① 第一个', key: 1 },
|
|
{ label: '② 第二个', key: 2 },
|
|
{ label: '③ 第三个', key: 3 },
|
|
{ label: '④ 第四个', key: 4 },
|
|
{ label: '⑤ 第五个', key: 5 }
|
|
]
|
|
|
|
// Dynamic order options based on connected edges count | 基于连接边数量的动态顺序选项
|
|
const orderOptions = computed(() => {
|
|
// Get all promptOrder edges connected to the same target | 获取连接到同一目标的所有文本边
|
|
const sameTargetTextEdges = edges.value.filter(edge =>
|
|
edge.target === props.target &&
|
|
edge.type === 'promptOrder'
|
|
)
|
|
const count = sameTargetTextEdges.length || 1
|
|
return orderLabels.slice(0, count)
|
|
})
|
|
|
|
// Current order from edge data | 从边数据获取当前顺序
|
|
const currentOrder = computed(() => props.data?.promptOrder || 1)
|
|
|
|
// Calculate bezier path | 计算贝塞尔路径
|
|
const path = computed(() => {
|
|
const [edgePath] = getBezierPath({
|
|
sourceX: props.sourceX,
|
|
sourceY: props.sourceY,
|
|
targetX: props.targetX,
|
|
targetY: props.targetY,
|
|
sourcePosition: props.sourcePosition,
|
|
targetPosition: props.targetPosition
|
|
})
|
|
return edgePath
|
|
})
|
|
|
|
// Label position (center of edge) | 标签位置（边的中心）
|
|
const labelX = computed(() => (props.sourceX + props.targetX) / 2)
|
|
const labelY = computed(() => (props.sourceY + props.targetY) / 2)
|
|
|
|
// Edge style | 边样式
|
|
const edgeStyle = computed(() => ({
|
|
stroke: '#10b981',
|
|
strokeWidth: 2,
|
|
...props.style
|
|
}))
|
|
|
|
// Handle order selection | 处理顺序选择
|
|
const handleOrderSelect = (newOrder) => {
|
|
// Get all text edges connected to the same target | 获取连接到同一目标的所有文本边
|
|
const sameTargetTextEdges = edges.value.filter(edge =>
|
|
edge.target === props.target &&
|
|
edge.type === 'promptOrder'
|
|
)
|
|
|
|
// Find edge currently using this order | 查找当前使用此顺序的边
|
|
const edgeWithSameOrder = sameTargetTextEdges.find(edge =>
|
|
edge.id !== props.id &&
|
|
edge.data?.promptOrder === newOrder
|
|
)
|
|
|
|
// If another edge has this order, swap with current | 如果另一条边有此顺序，则交换
|
|
if (edgeWithSameOrder) {
|
|
updateEdgeData(edgeWithSameOrder.id, { promptOrder: currentOrder.value })
|
|
}
|
|
|
|
// Update current edge order | 更新当前边顺序
|
|
updateEdgeData(props.id, { promptOrder: newOrder })
|
|
}
|
|
</script>
|