prevent nodes multiple connections

[Milad0071]

hello i hope you are fine and well. how can i stop nodes from accepting or sending multiple edges or connection lines to other elements? i need every node to has only one connection line in the output handle. thanks

[bcakmakoglu]

There's a couple ways to go about that.

If you're using custom nodes you can pass a isValidConnection function to your Handles.
Check this example: https://vueflow.dev/examples/edges/validation.html

Handles also accept a connectable prop that you can set to either a boolean, a callback fn or single.
single should be the mode you're looking for, i.e. the Handle will stop allowing connections if there is at least 1 connection already.

<Handle id="handle-right-a" connectable="single" />

[Milad0071]

as you can see i did this. but still i can draw two or more edges from every handle

[Milad0071]

<Handle v-for="(item, index) in outArray" :key="index" :id="'handle' + index" class="handle" type="source" :position="Position.Right" :style="item.style" connectable="single" />

[Milad0071]

yeah exactly. thanks for the help

[bcakmakoglu]

0.4.27 is quite old to be honest, I can't promise that there weren't any breaking changes until 1.0.0.
It really depends on what you have been using.

For example the getEdgeCenter utility has been removed. Instead the centerX and centerY for edges are provided by getBezierPath, i.e. const [path, centerX, centerY] = getBezierPath(params).
This is only relevant for custom edges.

You can check the whole Changelog here: https://github.com/bcakmakoglu/vue-flow/blob/master/CHANGELOG.md

If you experience trouble with migration, let me know and I'll help you out :)

[bcakmakoglu]

You should also be aware that Background, MiniMap and Controls have been separated from the core pkg,
so with 1.x.x you have to install @vue-flow/core to get the core application and @vue-flow/additional-components to install the mentioned extra components.

[Milad0071]

i really thank you my friend. i have updated to the last version. i have changed a lot of things but now i have this error:
Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/@vue-flow_core.js?v=ed20ba55' does not provide an export named 'Background' (at App.vue:12:3)
i figured the background has been removed after version 0.4.26 . how can i fix this?

[Milad0071]

sorry i didnt see your last reply. thanks again

[Milad0071]

hello again my friend. how are you doing? I need your help again i would appreciate it if you have time. before migrating from 0.4.... version to 1.**** version i had this code:
`const edgePath = computed(() => {
const args = {
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
};
if (props.targetX < props.sourceX) {
return getCustomStraightLine(args);
} else if (props.sourcePosition == "bottom") {
return getStraightLine(args);
} else {
return getBezierPath(args);
}
});

const center = computed(() => {
const args = {
sourceX: props.sourceX,
sourceY: props.sourceY,
sourcePosition: props.sourcePosition,
targetX: props.targetX,
targetY: props.targetY,
targetPosition: props.targetPosition,
};
if (props.targetX < props.sourceX) {
return getCustomEdgePosition(args);
} else if (props.sourcePosition == "bottom") {
return getEdgePosition(args);
} else {
return getEdgeCenter(args);
}
});but now after migration, because the getEdgeCenter is removed so i replaced it with getBezierPath but now i have the following error and i still couldnt resolve it:Error: attribute d: Unexpected end of attribute. Expected number, "….300003051757812".`
can you please help me?

[bcakmakoglu]

As mentioned in my previous comment:

The getEdgeCenter utility has been removed. Instead the centerX and centerY for edges are provided by getBezierPath, i.e. const [path, centerX, centerY] = getBezierPath(params).

You can check the whole Changelog here: https://github.com/bcakmakoglu/vue-flow/blob/master/CHANGELOG.md

[Milad0071]

thank you