Options
All
  • Public
  • Public/Protected
  • All
Menu

@braks/vue-flow

Index

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

AddEdges: (edgesOrConnections: (Edge | Connection)[] | ((edges: GraphEdge[]) => (Edge | Connection)[])) => void

Type declaration

AddNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void

Type declaration

CSSVars: "--vf-node-color" | "--vf-box-shadow" | "--vf-node-bg" | "--vf-node-text" | "--vf-connection-path" | "--vf-handle"
ClassFunc<Data>: (element: FlowElement<Data>) => string | void

Type parameters

Type declaration

ComputedGetters: { [ key in keyof Getters]: ComputedRef<Getters[key]> }
CoordinateExtent: [[number, number], [number, number]]

Defined as [[x-from, y-from], [x-to, y-to]]

CustomThemeVars: Record<string, string | number>
D3Selection: Selection<HTMLDivElement, unknown, any, any>
D3Zoom: ZoomBehavior<HTMLDivElement, unknown>
D3ZoomHandler: (this: HTMLDivElement, event: any, d: unknown) => void

Type declaration

    • (this: HTMLDivElement, event: any, d: unknown): void
    • Parameters

      • this: HTMLDivElement
      • event: any
      • d: unknown

      Returns void

DefaultEdgeOptions: Omit<Edge, "id" | "source" | "target" | "sourceHandle" | "targetHandle" | "sourceNode" | "targetNode">
DefaultEdgeTypes: { [ key in "default" | "straight" | "smoothstep" | "step" | "simplebezier"]: EdgeComponent }
DefaultNodeTypes: { [ key in "input" | "output" | "default"]: NodeComponent }
EdgeComponent<Data>: Component<EdgeProps<Data>> | DefineComponent<EdgeProps<Data>, any, any, any, any, any> | GlobalComponentName

Edge Components can either be a component definition or a string name

Type parameters

EdgeMarkerType: string | MarkerType | EdgeMarker
EdgeRemoveChange: NodeRemoveChange
EdgeSelectionChange: NodeSelectionChange
Element<Data>: Node<Data> | Edge<Data>

Type parameters

ElementChange: NodeChange | EdgeChange
ElementData: any
Elements<Data>: Element<Data>[]

Type parameters

EmitFunc: (name: keyof FlowHooks, ...args: FlowEvents[keyof FlowEvents][]) => void

Type declaration

FitBounds: (bounds: Rect, options?: FitBoundsOptions) => void

Type declaration

FitBoundsOptions: ViewportFuncsOptions & { padding?: number }
FitView: (fitViewOptions?: FitViewParams) => void

Type declaration

FitViewParams: { includeHiddenNodes?: boolean; maxZoom?: number; minZoom?: number; nodes?: string[]; offset?: { x?: number; y?: number }; padding?: number } & ViewportFuncsOptions
FlowElement<Data>: GraphNode<Data> | GraphEdge<Data>

an internal element

Type parameters

FlowElements<Data>: FlowElement<Data>[]

Type parameters

FlowHooks: Readonly<{ [ key in keyof FlowEvents]: EventHook<FlowEvents[key]> }>
FlowHooksEmit: Readonly<{ [ key in keyof FlowEvents]: EventHookTrigger<FlowEvents[key]> }>
FlowHooksOn: Readonly<{ [ key in keyof FlowEvents as `on${Capitalize<key>}`]: EventHookOn<FlowEvents[key]> }>
FlowInstance: Exports & ViewportFuncs
FlowOptions: FlowProps
GetTransform: () => FlowTransform

Type declaration

GraphEdge<Data>: Edge<Data> & { selected?: boolean; sourceNode: GraphNode; targetNode: GraphNode; z?: number } & EdgePositions

Internal edge type

Type parameters

HandleType: "source" | "target"
KeyCode: number | string
MiniMapNodeFunc<Data>: (node: GraphNode<Data>) => string

Type parameters

Type declaration

    • expects a node and returns a color value

      Parameters

      Returns string

NodeComponent<Data>: Component<NodeProps<Data>> | DefineComponent<NodeProps<Data>, any, any, any, any> | GlobalComponentName

Node Components can either be a component definition or a string name

Type parameters

Project: (position: XYPosition) => XYPosition

Type declaration

SetCenter: (x: number, y: number, options?: SetCenterOptions) => void

Type declaration

SetCenterOptions: ViewportFuncsOptions & { zoom?: number }
SetEdges: (edges: Edge[] | ((edges: GraphEdge[]) => Edge[])) => void

Type declaration

SetElements: (elements: Elements | ((elements: FlowElements) => Elements), extent?: CoordinateExtent) => void

Type declaration

SetNodes: (nodes: Node[] | ((nodes: GraphNode[]) => Node[]), extent?: CoordinateExtent) => void

Type declaration

SetState: (state: Partial<FlowOptions & Omit<State, "nodes" | "edges" | "modelValue">> | ((state: State) => Partial<FlowOptions & Omit<State, "nodes" | "edges" | "modelValue">>)) => void

Type declaration

SetTransform: (transform: FlowTransform, options?: ViewportFuncsOptions) => void

Type declaration

ShapeRendering: CSSProperties["shapeRendering"]
SnapGrid: [number, number]
StyleFunc<Data>: (element: FlowElement<Data>) => Styles | void

Type parameters

Type declaration

Styles: CSSProperties & ThemeVars & CustomThemeVars
ThemeVars: { [ key in CSSVars]?: CSSProperties["color"] }
UpdateEdge: (oldEdge: GraphEdge, newConnection: Connection) => GraphEdge | false

Type declaration

UpdateNodeDimensions: (updates: UpdateNodeDimensionsParams[]) => void

Type declaration

UpdateNodePosition: ({ id, diff, dragging }: UpdateNodePositionsParams) => void

Type declaration

ValidConnectionFunc: (connection: Connection, elements: { edges: GraphEdge[]; sourceNode: GraphNode; targetNode: GraphNode }) => boolean

Type declaration

VueFlowStore: { emits: FlowHooksEmit; id: string } & FlowHooksOn & ToRefs<State> & Readonly<ComputedGetters> & Readonly<Actions>
XYZPosition: XYPosition & { z: number }
ZoomInOut: (options?: ViewportFuncsOptions) => void

Type declaration

ZoomTo: (zoomLevel: number, options?: ViewportFuncsOptions) => void

Type declaration

Variables

Background: DefineComponent
BaseEdge: FunctionalComponent<Props>

The base edge is a simple wrapper for svg path You can use the base edge in your custom edges and just pass down the necessary props

BezierEdge: FunctionalComponent<EdgeProps>
ControlButton: DefineComponent
Controls: DefineComponent
EdgeText: DefineComponent
Handle: DefineComponent
MiniMap: DefineComponent
NodeIdInjection: InjectionKey<string>
SimpleBezierEdge: FunctionalComponent<EdgeProps>
SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps>
StepEdge: FunctionalComponent<EdgeProps>
StraightEdge: FunctionalComponent<EdgeProps>
VueFlow: DefineComponent
VueFlowInjection: InjectionKey<VueFlowStore>
defaultEdgeTypes: DefaultEdgeTypes
defaultNodeTypes: DefaultNodeTypes

Functions

  • Intended for options API In composition API you can access utilities from useVueFlow

    Parameters

    Returns Elements<any>

  • applyChanges<T, C>(changes: C[], elements: T[], addElement?: (els: T[]) => void): T[]
  • Type parameters

    Parameters

    • changes: C[]
    • elements: T[]
    • Optional addElement: (els: T[]) => void
        • (els: T[]): void
        • Parameters

          • els: T[]

          Returns void

    Returns T[]

  • getBezierCenter(__namedParameters: GetBezierPathParams): [number, number, number, number]
  • Parameters

    • __namedParameters: GetBezierPathParams

    Returns [number, number, number, number]

  • getBezierPath(__namedParameters: GetBezierPathParams): string
  • Parameters

    • __namedParameters: GetBezierPathParams

    Returns string

  • getEdgeCenter(__namedParameters: GetCenterParams): [number, number, number, number]
  • Parameters

    • __namedParameters: GetCenterParams

    Returns [number, number, number, number]

  • Parameters

    Returns Element<any>[]

  • Parameters

    Returns string

  • Parameters

    Returns GraphNode<any>[]

  • Parameters

    Returns Element<any>[]

  • Parameters

    Returns Rect

  • getSimpleBezierCenter(__namedParameters: GetSimpleBezierPathParams): [number, number, number, number]
  • Parameters

    • __namedParameters: GetSimpleBezierPathParams

    Returns [number, number, number, number]

  • getSimpleBezierPath(__namedParameters: GetSimpleBezierPathParams): string
  • Parameters

    • __namedParameters: GetSimpleBezierPathParams

    Returns string

  • getSmoothStepPath(__namedParameters: GetSmoothStepPathParams): string
  • Parameters

    • __namedParameters: GetSmoothStepPathParams

    Returns string

  • getTransformForBounds(bounds: Rect, width: number, height: number, minZoom: number, maxZoom: number, padding?: number, offset?: { x?: number; y?: number }): Viewport
  • Parameters

    • bounds: Rect
    • width: number
    • height: number
    • minZoom: number
    • maxZoom: number
    • Optional padding: number
    • Optional offset: { x?: number; y?: number }
      • Optional x?: number
      • Optional y?: number

    Returns Viewport

  • isEdge(element: MaybeElement): element is Edge<any>
  • Parameters

    • element: MaybeElement

    Returns element is Edge<any>

  • isNode(element: MaybeElement): element is Node<any>
  • Parameters

    • element: MaybeElement

    Returns element is Node<any>

  • Intended for options API In composition API you can access utilities from useVueFlow

    Parameters

    Returns Elements<any>

  • useHandle(): { onClick: any; onMouseDown: any }
  • Returns { onClick: any; onMouseDown: any }

    • onClick:function
      • Parameters

        Returns void

    • onMouseDown:function
      • onMouseDown(event: MouseEvent, handleId: null | string, nodeId: string, isTarget: boolean, isValidConnection?: ValidConnectionFunc, elementEdgeUpdaterType?: HandleType, onEdgeUpdate?: (connection: Connection) => void, onEdgeUpdateEnd?: () => void): void
      • Parameters

        • event: MouseEvent
        • handleId: null | string
        • nodeId: string
        • isTarget: boolean
        • Optional isValidConnection: ValidConnectionFunc
        • Optional elementEdgeUpdaterType: HandleType
        • Optional onEdgeUpdate: (connection: Connection) => void
        • Optional onEdgeUpdateEnd: () => void
            • (): void
            • Returns void

        Returns void

  • Parameters

    • Optional options: Options

    Returns VueFlowStore

  • Returns ViewportFuncs

Generated using TypeDoc