How to rotate marker end automatically ?

[gitHoussem]

Hello everyone,

I have an issue making my custom marker end rotate automatically to follow the edge path. I'm noticing that the same issue exists in the official documentation in reactflow for marker ends https://reactflow.dev/examples/edges/markers (try moving node G for example - you will notice that the arrow head does not adjust its angle based on the edge direction)

In my case this is what i have :

This is the desired result after I move the destination node (painted) :

Note

This issue happens when I move nodes around, the edges paths get automatically updated, but the arrowhead for some reason are not following along with the rotation

My Custom Marker:

<template>
  <svg class="vue-flow__marker vue-flow__container">
    <defs>
      <!-- Simplified triangular arrow -->
      <marker
        id="simple-arrow"
        class="vue-flow__arrowhead"
        viewBox="0 0 20 20"
        :markerWidth="6"
        :markerHeight="6"
        markerUnits="strokeWidth"
        refX="16"
        refY="9"
        orient="auto-start-reverse">
        <path
          d="M4.254 0.441C2.451 -0.593 0.989 0.254 0.989 2.332v15.335c0 2.08 1.462 2.926 3.265 1.893L17.658 11.873c1.804 -1.035 1.804 -2.711 0 -3.745z" />
      </marker>
    </defs>
  </svg>
</template>

Custom Edge:

  <!-- eslint-disable-next-line -->
  <BaseEdge :id="id" :path="path" :marker-end="markerEnd" :style="style" :selectable="false" />
  <EdgeLabelRenderer>
    <div
      v-if="edgeLabel"
      :style="{ ...labelStyle, ...borderStyle, transform: `translate(-50%, -50%) translate(${bezier.labelX}px,${bezier.labelY}px)` }"
      class="edge-label-renderer__label nodrag nopan">
      {{ edgeLabel }}
    </div>
  </EdgeLabelRenderer>
</template>

Thank you !