diff --git a/src/types/changes.ts b/src/types/changes.ts index 7e7f31c8..57df3e3d 100644 --- a/src/types/changes.ts +++ b/src/types/changes.ts @@ -2,13 +2,6 @@ import { XYPosition, Dimensions } from './flow' import { NodeHandleBounds, Node, GraphNode, CoordinateExtent } from './node' import { Edge } from './edge' -export type CreatePositionChangeParams = { - node: GraphNode - nodeExtent: CoordinateExtent - diff?: XYPosition - dragging?: boolean -} - export type NodeDimensionChange = { id: string type: 'dimensions' diff --git a/src/types/components.ts b/src/types/components.ts index 76a139cf..0313adc8 100644 --- a/src/types/components.ts +++ b/src/types/components.ts @@ -23,7 +23,7 @@ export type DefaultEdgeTypes = { [key in 'default' | 'straight' | 'smoothstep' | export type DefaultNodeTypes = { [key in 'input' | 'output' | 'default']: NodeComponent } export interface BackgroundProps { - /** The background pattern */ + /** The background pattern variant, {@link BackgroundVariant} */ variant?: BackgroundVariant /** Background pattern gap */ gap?: number @@ -61,6 +61,7 @@ export interface ControlEvents { (event: 'interaction-change', active: boolean): void } +/** expects a node and returns a color value */ export type StringFunc = (node: Node | GraphNode) => string export type ShapeRendering = 'inherit' | 'auto' | 'geometricPrecision' | 'optimizeSpeed' | 'crispEdges' | undefined @@ -79,6 +80,7 @@ export interface MiniMapProps { maskColor?: string } +/** these props are passed to mini map node slots */ export interface MiniMapNodeProps { position: XYPosition dimensions: Dimensions @@ -89,6 +91,7 @@ export interface MiniMapNodeProps { strokeWidth?: number } +/** these props are passed to edge texts */ export interface EdgeTextProps extends HTMLAttributes { x: number y: number diff --git a/src/types/connection.ts b/src/types/connection.ts index 41aa1318..881f9889 100644 --- a/src/types/connection.ts +++ b/src/types/connection.ts @@ -39,12 +39,6 @@ export enum ConnectionMode { Loose = 'loose', } -export type SetConnectionId = { - connectionNodeId: string | undefined - connectionHandleId: string | undefined - connectionHandleType: HandleType | undefined -} - export interface ConnectionLineProps { /** Source X position of the connection line */ sourceX: number @@ -58,7 +52,9 @@ export interface ConnectionLineProps { targetY: number /** Target position of the connection line */ targetPosition: Position + /** the shape of the connection line when active */ connectionLineType: ConnectionLineType + /** extra styles */ connectionLineStyle: CSSProperties /** All currently stored nodes */ nodes: GraphNode[] diff --git a/src/types/edge.ts b/src/types/edge.ts index 0fd595cd..0f10c38c 100644 --- a/src/types/edge.ts +++ b/src/types/edge.ts @@ -30,7 +30,7 @@ export interface EdgeMarker { export interface MarkerProps { id: string - type: MarkerType + type: MarkerType | string color?: string width?: number height?: number @@ -88,6 +88,7 @@ export interface EdgePositions { targetY: number } +/** Internal edge type */ export type GraphEdge = Edge & { sourceNode: GraphNode targetNode: GraphNode @@ -95,10 +96,11 @@ export type GraphEdge = Edge & { z?: number } & EdgePositions +/** these props are passed to edge components */ export interface EdgeProps { id: string - sourceNode: any - targetNode: any + sourceNode: GraphNode + targetNode: GraphNode label?: | string | { @@ -121,7 +123,7 @@ export interface EdgeProps { target: string sourceHandle?: string targetHandle?: string - labelStyle?: any + labelStyle?: CSSProperties labelShowBg?: boolean labelBgStyle?: any labelBgPadding?: [number, number] @@ -133,10 +135,11 @@ export interface EdgeProps { curvature?: number } +/** these props are passed to smooth step edges */ export interface SmoothStepEdgeProps extends EdgeProps { id: string - sourceNode: any - targetNode: any + sourceNode: GraphNode + targetNode: GraphNode label?: | string | { diff --git a/src/types/flow.ts b/src/types/flow.ts index de4e2757..6e0c6a9c 100644 --- a/src/types/flow.ts +++ b/src/types/flow.ts @@ -5,8 +5,11 @@ import { ConnectionLineType, ConnectionMode } from './connection' import { KeyCode, PanOnScrollMode, UseZoomPanHelper } from './zoom' import { DefaultEdgeTypes, DefaultNodeTypes, EdgeComponent, NodeComponent } from './components' +/** an internal element */ export type FlowElement = GraphNode | GraphEdge export type FlowElements = FlowElement[] + +/** base element props */ export interface Element { id: string label?: @@ -23,8 +26,10 @@ export interface Element { } export type Elements = (Node | Edge)[] +/** Transform x, y, z */ export type Transform = [number, number, number] +/** Handle Positions */ export enum Position { Left = 'left', Top = 'top', diff --git a/src/types/node.ts b/src/types/node.ts index abce17ba..2a8b664e 100644 --- a/src/types/node.ts +++ b/src/types/node.ts @@ -10,41 +10,55 @@ export type NodeHandleBounds = { } export interface Node extends Element { + /** node position x, y */ position: XYPosition + /** node type, can be a default type or a custom type */ type?: keyof DefaultNodeTypes | string + /** handle position */ targetPosition?: Position + /** handle position */ sourcePosition?: Position draggable?: boolean selectable?: boolean connectable?: boolean dragHandle?: string + /** move on grid */ snapGrid?: SnapGrid + /** called when used as target for new connection */ isValidTargetPos?: ValidConnectionFunc + /** called when used as source for new connection */ isValidSourcePos?: ValidConnectionFunc + /** define node extent, i.e. area in which node can be moved */ extent?: 'parent' | CoordinateExtent + /** expands parent area to fit child node */ expandParent?: boolean + /** define node as a child node by setting a parent node id */ parentNode?: string } export interface GraphNode extends Node { + /** absolute position in relation to parent elements + z-index */ computedPosition: XYZPosition handleBounds: NodeHandleBounds + /** node width, height */ dimensions: Dimensions isParent: boolean selected: boolean dragging: boolean } +/** these props are passed to node components */ export interface NodeProps { id: string + /** node DOM-element */ nodeElement: HTMLDivElement type: string data: T selected: boolean connectable: boolean - /** computed position is the position relative to the node's extent (i.e. parent or CoordinateExtent) */ + /** absolute position in relation to parent elements + z-index */ computedPosition: XYZPosition - /** x and y position on the graph */ + /** x, y position */ position: XYPosition /** node dimensions (width, height) */ dimensions: Dimensions @@ -54,7 +68,9 @@ export interface NodeProps { props?: any component: any } + /** called when used as target for new connection */ isValidTargetPos?: ValidConnectionFunc + /** called when used as source for new connection */ isValidSourcePos?: ValidConnectionFunc parentNode?: string dragging: boolean diff --git a/src/types/store.ts b/src/types/store.ts index c019c622..65002e16 100644 --- a/src/types/store.ts +++ b/src/types/store.ts @@ -10,10 +10,13 @@ import { NodeChange, EdgeChange } from './changes' import { StartHandle, HandleType } from './handle' export interface State extends Omit, 'id' | 'modelValue'> { + /** Event hooks, you can manipulate the triggers on your own peril */ hooks: FlowHooks instance: FlowInstance | null + /** all stored nodes */ nodes: GraphNode[] + /** all stored edges */ edges: GraphEdge[] d3Zoom: D3Zoom | null @@ -24,7 +27,9 @@ export interface State extends Omit, 'id' | 'm defaultZoom: number translateExtent: CoordinateExtent nodeExtent: CoordinateExtent + /** zoom pane dimensions */ dimensions: Dimensions + /** transform x, y, z */ transform: Transform onlyRenderVisibleElements: boolean defaultPosition: [number, number] @@ -83,9 +88,13 @@ export interface State extends Omit, 'id' | 'm export interface Actions { /** @deprecated use setNodes / setEdges instead */ setElements: (elements: Elements, extent?: CoordinateExtent) => void + /** parses nodes and re-sets the state */ setNodes: (nodes: Node[], extent?: CoordinateExtent) => void + /** parses edges and re-sets the state */ setEdges: (edges: Edge[]) => void + /** parses nodes and adds to state */ addNodes: (nodes: Node[], extent?: CoordinateExtent) => void + /** parses edges and adds to state */ addEdges: (edgesOrConnections: (Edge | Connection)[]) => void updateEdge: (oldEdge: GraphEdge, newConnection: Connection) => boolean applyEdgeChanges: (changes: EdgeChange[]) => GraphEdge[] @@ -113,7 +122,9 @@ export interface Actions { export interface Getters { getEdgeTypes: Record getNodeTypes: Record + /** filters hidden nodes */ getNodes: GraphNode[] + /** filters hidden edges */ getEdges: GraphEdge[] getNode: (id: string) => GraphNode | undefined getEdge: (id: string) => GraphEdge | undefined diff --git a/src/utils/changes.ts b/src/utils/changes.ts index 05d956ee..4159458b 100644 --- a/src/utils/changes.ts +++ b/src/utils/changes.ts @@ -1,6 +1,5 @@ import { clampPosition, isGraphNode } from './graph' import { - CreatePositionChangeParams, EdgeChange, EdgeSelectionChange, ElementChange, @@ -11,8 +10,17 @@ import { NodeSelectionChange, NodePositionChange, Getters, + CoordinateExtent, + XYPosition, } from '~/types' +type CreatePositionChangeParams = { + node: GraphNode + nodeExtent: CoordinateExtent + diff?: XYPosition + dragging?: boolean +} + function handleParentExpand(updateItem: GraphNode, getNode: Getters['getNode']) { const parent = updateItem.parentNode ? getNode(updateItem.parentNode) : undefined if (parent) {