How Can I Set Two Labels In One Edge

[karahanoguzhan]

Hello, I am wondering about how can i set two labels in an edge, and how can I set these labels positions right after source node and right before target node. Could you help me please?

[bcakmakoglu]

Default edges only support a single label.
You can use a custom edge and use as many labels as you want, that's up to your implementation.
Check the edges example to see how a custom edge is implemented.

As for the position: That's also up to you ^^ Utilities like getBezierPath will return you the centerX and centerY values for centering labels but if you want to have one at the source or target position of an edge, simply use the sourceX, sourceY, targetX and targetY values of the edge respectively to place your label.

Here's an example - pay attention to the style.transform value

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <BaseEdge :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
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
		// change the translate values in order to place the label at the source position or target position
        transform: `translate(-50%, -50%) translate(${sourceX}px,${sourceY}px)`,
      }"
      class="nodrag nopan"
    >
      <button class="edgebutton" @click="removeEdges([id])">×</button>
    </div>
  </EdgeLabelRenderer>
</template>

[karahanoguzhan]

Thank you so much! Now I have better understanding.