Custom edge with sourcePosition and targetPosition

[MartijnEngelkes]

Hello!

I have a question regarding the edge properties: sourcePosition and targetPosition.
I have configured them as follows:

const edges = ref([
    {
        id: 'e1->2',
        source: '1',
        target: '2',
        type: 'custom',
        // animated: true,
        sourcePosition: 'right', // Edge exits from the right of the source node
        targetPosition: 'left',  // Edge enters the left of the target node
    },
    {
        id: 'e1->3',
        source: '1',
        target: '3',
        type: 'custom',
        // animated: true,
        sourcePosition: 'right', // Edge exits from the right of the source node
        targetPosition: 'left',  // Edge enters the left of the target node
    },
]);

I added the VueFlow component in my view like this:

<VueFlow :nodes="nodes" :edges="edges">
    <template #edge-custom="customEdgeProps">
        <CustomEdge v-bind="customEdgeProps" />
    </template>
    <template #node-special="specialNodeProps">
        <SpecialNode v-bind="specialNodeProps" />
    </template>
</VueFlow>

However, the default options for targetPosition and sourcePosition keep being applied:

As you can see, sourcePosition is "bottom" instead of sourcePosition: "right".

Does anyone have an idea of what I might be doing wrong?

Thanks in advance!

[bcakmakoglu]

Edge objects do not have a sourcePosition or targetPosition option.

This option exists for default nodes (default, input, output) to determine what position the handle should have.
When using a Custom Node component this option is only forwarded to you and you can apply them yourself to the <Handle> component.

const node = {
	id: '1',
	position: { ... },
	sourcePosition: Position.Right, // puts the default source handle to the right
	targetPosition: Position.Left, // puts the default target handle to the right
}

Edge objects have a sourceHandle or targetHandle option though, which is the id of the <Handle> the edge belongs to.

You are confusing this with sourcePosition or targetPosition which are passed to Custom Edges via props.
Both of them are determined by the position of the <Handle> component the edge belongs to.

<script lang="ts" setup>
// CustomEdge.vue
const props = defineProps<EdgeProps>();

console.log(props.sourcePosition) // logs the position of the source handle
console.log(props.targetPosition) // logs the position of the target handle

If undefined or missing it will use the fallback positions of bottom and top.