JG-ADMIN-TEMP/src/views/base/craftManagement/route/components/CustomConnectionLine/index.vue

<template>
  <g>
    <!-- 圆形markStart -->
    <circle
      :cx="props.sourceX"
      :cy="props.sourceY - 4"
      r="4"
      :fill="status ? 'gray' : 'black'"
    />
    <!-- path -->
    <path
      :d="path"
      fill="none"
      :stroke="status ? 'gray' : 'black'"
      stroke-width="2"
    />
    <!-- 箭头markEnd -->
    <path
      :d="`M ${targetX} ${targetY + 2} L ${targetX - 5} ${targetY - 10} L ${targetX + 5} ${targetY - 10} Z`"
      :fill="status ? 'gray' : 'black'"
      stroke="none"
    />
  </g>
</template>

<script lang="ts" setup>
import { getSmoothStepPath, SmoothStepEdgeProps } from "@vue-flow/core";
import { computed, inject } from "vue";

const selectLine = inject("selectLine");
const status = ref(true);
const props = defineProps<SmoothStepEdgeProps>();
const path = computed(() => getSmoothStepPath(props)[0]);
const setSeletedStatus = () => {
  if (selectLine.value != null) {
    if (props.id == selectLine.value.id) {
      status.value = false;
    } else {
      status.value = true;
    }
  } else {
    status.value = true;
  }
};
watch(
  () => selectLine.value,
  () => {
    setSeletedStatus();
  },
  { deep: true }
);
function getArrowTransform(props: SmoothStepEdgeProps) {
  const { targetPosition } = props;
  if (targetPosition === "top") {
    return `rotate(0 ${props.targetX} ${props.targetY})`;
  }
  if (targetPosition === "bottom") {
    return `rotate(180 ${props.targetX} ${props.targetY})`;
  }
  if (targetPosition === "left") {
    return `rotate(-90 ${props.targetX} ${props.targetY})`;
  }
  if (targetPosition === "right") {
    return `rotate(90 ${props.targetX} ${props.targetY})`;
  }
}
</script>
<script lang="ts">
export default {
  name: "Custom",
};
</script>