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

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

const selectLine = inject(CurrentSelectedEdgeProvideName);
const status = ref(true);
const props = defineProps<SmoothStepEdgeProps>();
const path = computed(() => getSmoothStepPath(props)[0]);



const getArrowTransform = (props: SmoothStepEdgeProps, hhh, dd ) => {
  console.log(props, 'getArrowTransform');
  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>
