feat(core): add useNodeConnections composable (#1728)

* feat(core): add `useNodeConnections` composable

* chore(core): export `useNodeConnections`

* chore(docs): update math example

* docs: add guide for `useNodeConnections`

* chore(changeset): add
This commit is contained in:
Braks
2025-01-12 10:05:01 +01:00
parent 1c5caffaad
commit 268ed0e84e
6 changed files with 174 additions and 16 deletions
+6 -6
View File
@@ -1,6 +1,6 @@
<script setup>
import { computed } from 'vue'
import { Handle, Position, useHandleConnections, useNodesData, useVueFlow } from '@vue-flow/core'
import { Handle, Position, useHandleConnections, useNodeConnections, useNodesData } from '@vue-flow/core'
defineProps(['id'])
@@ -11,8 +11,6 @@ const mathFunctions = {
'/': (a, b) => a / b,
}
const { getConnectedEdges } = useVueFlow()
// Get the source connections of the result node. In this example it's only one operator node.
const sourceConnections = useHandleConnections({
// type target means all connections where *this* node is the target
@@ -21,9 +19,10 @@ const sourceConnections = useHandleConnections({
})
// Get the source connections of the operator node
const operatorSourceConnections = computed(() =>
getConnectedEdges(sourceConnections.value[0].source).filter((e) => e.source !== sourceConnections.value[0].source),
)
const operatorSourceConnections = useNodeConnections({
type: 'target',
nodeId: () => sourceConnections.value[0]?.source,
})
const operatorData = useNodesData(() => sourceConnections.value.map((connection) => connection.source))
@@ -50,6 +49,7 @@ const result = computed(() => {
</script>
<template>
{{ operatorSourceConnections }}
<div class="calculation">
<template v-for="(value, i) in valueData" :key="`${value.id}-${value.data}`">
<span>