pqs-9100_client/frontend/src/views/home/components/RemoveableEdge.vue

<script setup>
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import { computed } from 'vue'
import { useCheckStore } from '@/stores/modules/check'

const checkStore = useCheckStore()
const props = defineProps({
    id: {
        type: String,
        required: true
    },
    sourceX: {
        type: Number,
        required: true
    },
    sourceY: {
        type: Number,
        required: true
    },
    targetX: {
        type: Number,
        required: true
    },
    targetY: {
        type: Number,
        required: true
    },
    sourcePosition: {
        type: String,
        required: true
    },
    targetPosition: {
        type: String,
        required: true
    },
    markerEnd: {
        type: String,
        required: false
    },
    style: {
        type: Object,
        required: false
    }
})

const { removeEdges } = useVueFlow()

const path = computed(() => getBezierPath(props))
const edgeStyle = computed(() => ({
    ...props.style,
    strokeWidth: 3
}))
</script>

<script>
export default {
    inheritAttrs: false
}
</script>

<template>
    <BaseEdge :id="id" :style="edgeStyle" :path="path[0]" :marker-end="markerEnd" />
    <EdgeLabelRenderer>
        <div
            :style="{
                pointerEvents: 'all',
                position: 'absolute',
                transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`
            }"
            class="nodrag nopan"
        >
            <el-popconfirm v-if="checkStore.nodesConnectable" title="确定要删除这条连线吗？" @confirm="removeEdges(id)">
                <template #reference>
                    <el-icon class="edge-icon"><Delete /></el-icon>
                </template>
            </el-popconfirm>
        </div>
    </EdgeLabelRenderer>
</template>
<style scoped>
.edge-icon {
    background: white;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
</style>