Access handle of custom node

[SelfMade2001]

I noticed that every vueflow handle in a custom component should be given a type which is either "source" or "target". My goal is to only allow connections from a handle of type="source" to type="target" (but not from type="source" to type="source" or from type="target" to type="target"). The following code fails to achieve this goal, because my custom node does not have any information about my handle.
Hence my question: How to access the handle?

<template>
    <VueFlow
        :nodes="nodes"
        :edges="edges"
        fit-view-on-init
        @connect="onConnect"
        :is-valid-connection="validateConnection"
    >
        <template #node-custom-one="props">
            <CustomNodeOne v-bind="props" />
        </template>
        <template #node-custom-two="props">
            <CustomNodeTwo v-bind="props" />
        </template>
        <template #node-custom-three="props">
            <CustomNodeThree v-bind="props" />
        </template>
    </VueFlow>
</template>

<script setup>
import { VueFlow, useVueFlow } from "@vue-flow/core";
import { ref} from "vue";
import CustomNodeOne from "./CustomNodes/CustomNodeOne.vue";
import CustomNodeTwo from "./CustomNodes/CustomNodeTwo.vue";
import CustomNodeThree from "./CustomNodes/CustomNodeThree.vue";
import { initialEdges, initialNodes } from "./initialElements.js";

const { addEdges } = useVueFlow();

const nodes = ref(initialNodes);
const edges = ref(initialEdges);

function onConnect(params) {
    console.log("on connect", params);
    addEdges(params);
}

const findHandleType = (nodeId, handleId) => {
    console.log(nodes); // <------------------------------------------------------------- This returns my nodes as expected
    const node = nodes.value.find((n) => n.id === nodeId);
    if (node) {
        console.log(node); // <---------------------------------------------------------- This returns my node as expected
        const handle = node.handles.find((h) => h.id === handleId); // <----------------- This fails because my node object does not contain an array called handles
        if (handle) {
            return handle.type;
        }
    }
    return null;
};

const validateConnection = ({ source, sourceHandle, target, targetHandle }) => {
    console.log("validateConnection called");

    const sourceHandleType = findHandleType(source, sourceHandle);
    const targetHandleType = findHandleType(target, targetHandle);

    console.log(sourceHandleType);
    console.log(targetHandleType);

    // Allow connection only if source handle is of type 'source' and target handle is of type 'target'
    return sourceHandleType === "source" && targetHandleType === "target";
};
</script>

---

./initialElements.js

export const initialNodes = [
    {
        id: "0",
        type: "custom-one",
        position: { x: 700, y: 0 },
    },
    {
        id: "1",
        type: "custom-two",
        position: { x: 0, y: 100 },
    },
    {
        id: "2",
        type: "custom-three",
        position: { x: 0, y: -100 },
    },
];

export const initialEdges = [];

---

./CustomNodes/CustomNodeOne.vue to ./CustomNodes/CustomNodeThree.vue are all basically like this (only difference Position.Left vs Position.Right and type="source" vs type="target")

<template>
    <div class="add cool classes for styling">
        <Handle id="b" type="target" :position="Position.Left"/>
    </div>
</template>

<script setup>
import { Handle, Position, useVueFlow } from "@vue-flow/core";

const props = defineProps({
    id: {
        type: String,
        required: true,
    },
});
</script>

---

I have already seen people define handles in their initialNodes object like this:

{
          id: 'node-1',
          type: 'default',
          position: { x: 100, y: 100 },
          handles: [
            { id: 'handle-1', type: 'source', position: 'left' },
            { id: 'handle-2', type: 'target', position: 'right' },
          ],
},

or this

{
          id: 'node-1',
          type: 'default',
          position: { x: 100, y: 100 },
          data: {
            handles: [
              { id: 'handle-1', type: 'source', position: 'left' },
              { id: 'handle-2', type: 'target', position: 'right' },
            ],
          },
},

But since I already have defined the handles in my custom components templates, adding this to my initialNodes object would give me two definitions of the props id, type and position. This is awful programming.

[bcakmakoglu]

You only need to use connection-mode="ConnectionMode.Strict"

everything else is unnecessary to restrict the connections from source <--> source (and target <--> target)

[SelfMade2001]

Thank you for your quick response! :D

First of all, I am having trouble making :connection-mode="ConnectionMode.Strict" work. What do I have to import? const { ConnectionMode } = useVueFlow(); does not work for me -> "TypeError: Cannot read properties of undefined (reading 'Strict')".

Second of all, I would really appreciate an explanation of how to access handles in VueFlow and how they are stored? Do I need to add the handles to my initialNodes object like in the last two code examples of my question? How are they stored internally? Is there any way to access them? I might want to access the handles in the future in order to implement more complex validation logic.

EDIT:
importing ConnectionMode like import { VueFlow, useVueFlow, ConnectionMode } from "@vue-flow/core"; works. Could I have know from the documentation, that I can import ConnectionMode from "@vue-flow/core"? And why can I not add it via useVueFlow() even though useVueFlow() seems to expose a property called connectionMode?

[bcakmakoglu]

Well, I guess since you've seemingly never touched TypeScript enums aren't a familiar concept (yet?) ^^

You import this, same as Position for <Handle>, from @vue-flow/core.

<script lang="ts" setup>
import { ConnectionMode, VueFlow } from '@vue-flow/core'

const nodes = ref([])
</script>

<template>
	<VueFlow :nodes="nodes" :connection-mode="ConnectionMode.Strict" />
</template>

Second of all, I would really appreciate an explanation of how to access handles in VueFlow and how they are stored?

What exactly are you looking for?
"Handles" aren't stored anywhere, VueFlow stores handle bounds which isn't the same thing.
What are you trying to achieve?
Describe the problem you are trying to solve.

Do I need to add the handles to my initialNodes object like in the last two code examples of my question?

If you want to use the data object of a node to define what handles a node can have, sure - do that.
Otherwise I don't understand what you're trying to solve.

How are they stored internally?

see answer above. Handles aren't stored. VueFlow only stores measurements of a handle (called handle bounds) in the parsed GraphNode obj (that is a Node that is passed down to VueFlow, which receives a couple properties which are required internally).

I might want to access the handles in the future in order to implement more complex validation logic.

Like?

[SelfMade2001]

Thank you for your help! :D
It was especially interesting to hear that handles are not stored. I noticed that I can easily achieve my more complex validation logic by using :is-valid-connection="validateConnection" together with the custom data object that I can apply to each node.