chore(core,composables): update jsdocs

This commit is contained in:
braks
2024-02-03 22:27:35 +01:00
committed by Braks
parent 6e162d5f02
commit 2ca5bd82a4
8 changed files with 36 additions and 23 deletions

View File

@@ -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,

View File

@@ -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<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
const edgeId = id ?? inject(EdgeId, '')

View File

@@ -31,6 +31,11 @@ function alwaysValid() {
return true
}
/**
* This composable provides listeners for handle events
*
* Generally it's recommended to use the `<Handle />` component instead of this composable.
*/
export function useHandle({
handleId,
nodeId,

View File

@@ -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({

View File

@@ -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<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
const nodeId = id ?? useNodeId() ?? ''

View File

@@ -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, '')
}

View File

@@ -10,7 +10,6 @@ type NodeData<NodeType extends Node = GraphNode> = NonNullable<NodeType['data']>
/**
* 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

View File

@@ -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()