diff --git a/packages/core/src/composables/useConnection.ts b/packages/core/src/composables/useConnection.ts index 0b3a26f3..fe816795 100644 --- a/packages/core/src/composables/useConnection.ts +++ b/packages/core/src/composables/useConnection.ts @@ -1,24 +1,11 @@ -import type { VueFlowStore } from '../types' import { useVueFlow } from './useVueFlow' -export interface UseConnectionReturn { - startHandle: VueFlowStore['connectionStartHandle'] - endHandle: VueFlowStore['connectionEndHandle'] - status: VueFlowStore['connectionStatus'] - position: VueFlowStore['connectionPosition'] -} - /** - * Hook for accessing the ongoing connection. + * Composable for accessing the currently ongoing connection. * - * @returns ongoing connection: startHandle, endHandle, status, position + * @returns current connection: startHandle, endHandle, status, position */ -export function useConnection(): { - startHandle: VueFlowStore['connectionStartHandle'] - endHandle: VueFlowStore['connectionEndHandle'] - status: VueFlowStore['connectionStatus'] - position: VueFlowStore['connectionPosition'] | null -} { +export function useConnection() { const { connectionStartHandle: startHandle, connectionEndHandle: endHandle, diff --git a/packages/core/src/composables/useEdge.ts b/packages/core/src/composables/useEdge.ts index f39f2fbe..17387f23 100644 --- a/packages/core/src/composables/useEdge.ts +++ b/packages/core/src/composables/useEdge.ts @@ -5,11 +5,14 @@ import { EdgeId, EdgeRef } from '../context' import { useVueFlow } from './useVueFlow' /** - * Access an edge + * This composable provides access to an edge object and it's dom element * * If no edge id is provided, the edge id is injected from context * - * Meaning if you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw + * If you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw + * + * @param id - The id of the edge to access + * @returns the edge id, the edge and the edge dom element */ export function useEdge = any>(id?: string) { const edgeId = id ?? inject(EdgeId, '') diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts index e1ba26b3..e509db67 100644 --- a/packages/core/src/composables/useHandle.ts +++ b/packages/core/src/composables/useHandle.ts @@ -31,6 +31,11 @@ function alwaysValid() { return true } +/** + * This composable provides listeners for handle events + * + * Generally it's recommended to use the `` component instead of this composable. + */ export function useHandle({ handleId, nodeId, diff --git a/packages/core/src/composables/useHandleConnections.ts b/packages/core/src/composables/useHandleConnections.ts index 502ebc80..91113797 100644 --- a/packages/core/src/composables/useHandleConnections.ts +++ b/packages/core/src/composables/useHandleConnections.ts @@ -18,13 +18,13 @@ interface UseHandleConnectionsParams { /** * Composable that returns existing connections of a handle * - * @public * @param UseHandleConnectionsParams * @param UseHandleConnectionsParams.type - handle type `source` or `target` * @param UseHandleConnectionsParams.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used * @param UseHandleConnectionsParams.id - the handle id (this is required if the node has multiple handles of the same type) * @param UseHandleConnectionsParams.onConnect - gets called when a connection is created * @param UseHandleConnectionsParams.onDisconnect - gets called when a connection is removed + * * @returns An array of connections */ export function useHandleConnections({ diff --git a/packages/core/src/composables/useNode.ts b/packages/core/src/composables/useNode.ts index 74ef8596..40c7aa21 100644 --- a/packages/core/src/composables/useNode.ts +++ b/packages/core/src/composables/useNode.ts @@ -6,11 +6,14 @@ import { useVueFlow } from './useVueFlow' import { useNodeId } from './useNodeId' /** - * Access a node, it's parent (if one exists) and connected edges + * This composable provides access to a node object, parent node object, connected edges and it's dom element * * If no node id is provided, the node id is injected from context * - * Meaning if you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw + * If you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw + * + * @param id - The id of the node to access + * @returns the node id, the node, the node dom element, it's parent and connected edges */ export function useNode = any>(id?: string) { const nodeId = id ?? useNodeId() ?? '' diff --git a/packages/core/src/composables/useNodeId.ts b/packages/core/src/composables/useNodeId.ts index 3deb3247..d75ae55c 100644 --- a/packages/core/src/composables/useNodeId.ts +++ b/packages/core/src/composables/useNodeId.ts @@ -1,6 +1,13 @@ import { inject } from 'vue' import { NodeId } from '../context' +/** + * This composable returns the current node id from the ctx. + * + * It should be used inside a (custom-)node components ctx as the id is provided by the internal `NodeWrapper` component. + * + * @returns the current node id + */ export function useNodeId() { - return inject(NodeId, null) + return inject(NodeId, '') } diff --git a/packages/core/src/composables/useNodesData.ts b/packages/core/src/composables/useNodesData.ts index affade0f..79e4b60d 100644 --- a/packages/core/src/composables/useNodesData.ts +++ b/packages/core/src/composables/useNodesData.ts @@ -10,7 +10,6 @@ type NodeData = NonNullable /** * Composable for receiving data of one or multiple nodes * - * @public * @param nodeId - The id (or ids) of the node to get the data from * @param guard - Optional guard function to narrow down the node type * @returns An array of data objects diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts index 002732e1..d432a3cd 100644 --- a/packages/core/src/composables/useVueFlow.ts +++ b/packages/core/src/composables/useVueFlow.ts @@ -87,6 +87,15 @@ type Injection = VueFlowStore | null | undefined type Scope = (EffectScope & { vueFlowId: string }) | undefined // todo: maybe replace the storage with a context based solution; This would break calling useVueFlow outside a setup function though, which should be fine +/** + * Composable that provides access to a store instance + * + * If no id is provided, the store instance is injected from context + * + * If no store instance is found in context, a new store instance is created and registered in storage + * + * @returns a vue flow store instance + */ export function useVueFlow(options?: FlowProps): VueFlowStore { const storage = Storage.getInstance()