chore(core,composables): update jsdocs

This commit is contained in:
braks
2024-02-05 07:51:12 +01:00
committed by Braks
parent 6e162d5f02
commit 2ca5bd82a4
8 changed files with 36 additions and 23 deletions
+3 -16
View File
@@ -1,24 +1,11 @@
import type { VueFlowStore } from '../types'
import { useVueFlow } from './useVueFlow' 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(): { export function useConnection() {
startHandle: VueFlowStore['connectionStartHandle']
endHandle: VueFlowStore['connectionEndHandle']
status: VueFlowStore['connectionStatus']
position: VueFlowStore['connectionPosition'] | null
} {
const { const {
connectionStartHandle: startHandle, connectionStartHandle: startHandle,
connectionEndHandle: endHandle, connectionEndHandle: endHandle,
+5 -2
View File
@@ -5,11 +5,14 @@ import { EdgeId, EdgeRef } from '../context'
import { useVueFlow } from './useVueFlow' 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 * 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) { export function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
const edgeId = id ?? inject(EdgeId, '') const edgeId = id ?? inject(EdgeId, '')
@@ -31,6 +31,11 @@ function alwaysValid() {
return true 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({ export function useHandle({
handleId, handleId,
nodeId, nodeId,
@@ -18,13 +18,13 @@ interface UseHandleConnectionsParams {
/** /**
* Composable that returns existing connections of a handle * Composable that returns existing connections of a handle
* *
* @public
* @param UseHandleConnectionsParams * @param UseHandleConnectionsParams
* @param UseHandleConnectionsParams.type - handle type `source` or `target` * @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.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.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.onConnect - gets called when a connection is created
* @param UseHandleConnectionsParams.onDisconnect - gets called when a connection is removed * @param UseHandleConnectionsParams.onDisconnect - gets called when a connection is removed
*
* @returns An array of connections * @returns An array of connections
*/ */
export function useHandleConnections({ export function useHandleConnections({
+5 -2
View File
@@ -6,11 +6,14 @@ import { useVueFlow } from './useVueFlow'
import { useNodeId } from './useNodeId' 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 * 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) { export function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(id?: string) {
const nodeId = id ?? useNodeId() ?? '' const nodeId = id ?? useNodeId() ?? ''
+8 -1
View File
@@ -1,6 +1,13 @@
import { inject } from 'vue' import { inject } from 'vue'
import { NodeId } from '../context' 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() { export function useNodeId() {
return inject(NodeId, null) return inject(NodeId, '')
} }
@@ -10,7 +10,6 @@ type NodeData<NodeType extends Node = GraphNode> = NonNullable<NodeType['data']>
/** /**
* Composable for receiving data of one or multiple nodes * 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 nodeId - The id (or ids) of the node to get the data from
* @param guard - Optional guard function to narrow down the node type * @param guard - Optional guard function to narrow down the node type
* @returns An array of data objects * @returns An array of data objects
@@ -87,6 +87,15 @@ type Injection = VueFlowStore | null | undefined
type Scope = (EffectScope & { vueFlowId: string }) | 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 // 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 { export function useVueFlow(options?: FlowProps): VueFlowStore {
const storage = Storage.getInstance() const storage = Storage.getInstance()