forked from SmartBench/CMVR-IOT-UI
96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<!--
|
||
* 文件说明：Vue Flow 连线渲染组件，负责路径展示及选中状态下的删除操作。
|
||
* 作用范围：仅服务于流程设计器模块。
|
||
-->
|
||
<template>
|
||
<BaseEdge
|
||
:id="id"
|
||
:path="edgePath"
|
||
:marker-end="markerEnd"
|
||
:interaction-width="interactionWidth || 32"
|
||
:style="style"
|
||
/>
|
||
|
||
<EdgeLabelRenderer v-if="selected && !flowStore.disableForm">
|
||
<div class="edge-delete-action nodrag nopan" :style="deleteActionStyle">
|
||
<el-tooltip content="删除连线" placement="top">
|
||
<button type="button" aria-label="删除连线" @click.stop="deleteEdge">
|
||
<el-icon><Delete /></el-icon>
|
||
</button>
|
||
</el-tooltip>
|
||
</div>
|
||
</EdgeLabelRenderer>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@vue-flow/core";
|
||
import { Delete } from "@element-plus/icons-vue";
|
||
import { useFlowStore } from "@/store/modules/flow";
|
||
|
||
defineOptions({ inheritAttrs: false });
|
||
|
||
const props = defineProps({
|
||
id: String,
|
||
sourceX: Number,
|
||
sourceY: Number,
|
||
targetX: Number,
|
||
targetY: Number,
|
||
sourcePosition: String,
|
||
targetPosition: String,
|
||
markerEnd: String,
|
||
interactionWidth: Number,
|
||
selected: Boolean,
|
||
style: Object,
|
||
});
|
||
|
||
const flowStore = useFlowStore();
|
||
const pathData = computed(() => getBezierPath({
|
||
sourceX: props.sourceX,
|
||
sourceY: props.sourceY,
|
||
sourcePosition: props.sourcePosition,
|
||
targetX: props.targetX,
|
||
targetY: props.targetY,
|
||
targetPosition: props.targetPosition,
|
||
}));
|
||
const edgePath = computed(() => pathData.value[0]);
|
||
const deleteActionStyle = computed(() => ({
|
||
transform: `translate(-50%, -50%) translate(${pathData.value[1]}px, ${pathData.value[2]}px)`,
|
||
}));
|
||
|
||
/**
|
||
* 删除与 edge 相关的状态或数据，该影响范围仅限当前组件。
|
||
*/
|
||
const deleteEdge = () => {
|
||
window.lf?.deleteEdge(props.id);
|
||
window.lf?.clearSelectElements();
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.edge-delete-action {
|
||
position: absolute;
|
||
z-index: 20;
|
||
pointer-events: all;
|
||
|
||
button {
|
||
display: grid;
|
||
width: 30px;
|
||
height: 30px;
|
||
padding: 0;
|
||
place-items: center;
|
||
border: 1px solid #efb8b4;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
color: #d93025;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 12px rgba(31, 41, 55, 0.2);
|
||
|
||
&:hover {
|
||
border-color: #d93025;
|
||
background: #fff1f0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|