feat(flow): 优化流程编辑功能

wujingjing

2024-12-12 f9cba7fdc9d60bbb2eee6d4eeff3556daea3e2ef

 src/components/vue-flow/ui/edges/CustomEdge.vue

@@ -1,23 +1,71 @@
<script setup lang="ts">
import { BezierEdge } from '@vue-flow/core';

// props were passed from the slot using `v-bind="customEdgeProps"`
const props = defineProps(['sourceX', 'sourceY', 'targetX', 'targetY', 'sourcePosition', 'targetPosition']);
</script>

<script lang="ts">
export default {
   name: 'CustomEdge',
};
</script>

<template>
   <BezierEdge
      :source-x="sourceX"
      :source-y="sourceY"
      :target-x="targetX"
      :target-y="targetY"
      :source-position="sourcePosition"
      :target-position="targetPosition"
   />
   <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
   <BaseEdge class="group" :id="id" :style="style" :path="path[0]" :marker-end="markerEnd" />

   <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
   <EdgeLabelRenderer >
      <div
         :id="`label-${id}`"
         :style="{
            pointerEvents: 'all',
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
         }"
         class="nodrag nopan bg-default p-1.5 rounded-full"
      >
         <span class="cursor-pointer ywifont ywicon-shanchu hover:text-red-500" @click="removeEdges(id)"></span>
      </div>
   </EdgeLabelRenderer>
</template>

<script setup lang="ts">
import { BaseEdge, EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core';
import { computed } from 'vue';

defineOptions({
   inheritAttrs: false,
});

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 as any));

</script>