How to add multiple connection points to custom nodes?

[Churakovmike]

Hi! Please tell me how to add several edge connection points to one side of a custom node?
So far I can only add the main connection points, something like this:

edges: [
        { id: "top", position: Position.Top, type: "target" },
        { id: "bottom", position: Position.Bottom, type: "source" },
        { id: "right", position: Position.Right, type: "source" },
        { id: "left", position: {x:500,y:200}, type: "source" }
    ],

and inside the custom node template

<template>
<Handle
    v-for="edge in props.data.edges"
    :type="edge.type"
    :position="edge.position"
    :id="edge.id"
    :connectable-end="false"
    :connectable-start="false"
    />
</template>

Thus, 4 connection points appear in the custom node and the edges work correctly. For example, how can I add 2 or more points on each side of the node?

[alabastor95]

Hi,

I do not know, if it is still relevant, but you can add multiple node connections to your custom node, by adding multiple handles to the node-descripting vue-file, for example:

<Handle id="a" type="source" :position="Position.Right" style="top: 10px" /> 
<Handle id="b" type="source" :position="Position.Right" style="bottom: 10px; top: auto" />

It is easy to test it on the following example: https://vueflow.dev/examples/nodes/

[seawavezhangdining]

following your suggest. I can realize it . but i want to connect some Handle. how to write in the property of edges.