Implemented 2D visualization for notes using Vue Flow

This commit is contained in:
Atharva Sawant
2024-03-08 11:23:47 +05:30
parent 4e1e2054a6
commit f16d7e4788
488 changed files with 123675 additions and 20 deletions

View File

@@ -0,0 +1,108 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
color: {
type: import('vue').PropType<string>
}
id: {
type: import('vue').PropType<string>
}
x: {
type: import('vue').PropType<number>
default: number
}
y: {
type: import('vue').PropType<number>
default: number
}
size: {
type: import('vue').PropType<number>
default: number
}
gap: {
type: import('vue').PropType<number | number[]>
default: number
}
offset: {
type: import('vue').PropType<number>
default: number
}
variant: {
type: import('vue').PropType<import('./types').BackgroundVariant>
default: string
}
lineWidth: {
type: import('vue').PropType<number>
default: number
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
color: {
type: import('vue').PropType<string>
}
id: {
type: import('vue').PropType<string>
}
x: {
type: import('vue').PropType<number>
default: number
}
y: {
type: import('vue').PropType<number>
default: number
}
size: {
type: import('vue').PropType<number>
default: number
}
gap: {
type: import('vue').PropType<number | number[]>
default: number
}
offset: {
type: import('vue').PropType<number>
default: number
}
variant: {
type: import('vue').PropType<import('./types').BackgroundVariant>
default: string
}
lineWidth: {
type: import('vue').PropType<number>
default: number
}
}>
>,
{
x: number
y: number
size: number
gap: number | number[]
offset: number
variant: import('./types').BackgroundVariant
lineWidth: number
},
{}
>,
{
'pattern-container'?(_: { id: string }): any
pattern?(_: {}): any
default?(_: { id: string }): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,2 @@
export { default as Background } from './Background.vue'
export * from './types'

View File

@@ -0,0 +1,20 @@
import type { FunctionalComponent } from 'vue'
import type { BackgroundVariant } from './types'
interface LinePatternProps {
dimensions: [number, number]
size?: number
color: string
}
export declare const LinePattern: FunctionalComponent<LinePatternProps>
interface DotPatternProps {
radius: number
color: string
}
export declare const DotPattern: FunctionalComponent<DotPatternProps>
export declare const Patterns: {
lines: FunctionalComponent<LinePatternProps, {}, any>
dots: FunctionalComponent<DotPatternProps, {}, any>
}
export declare const DefaultBgColors: Record<BackgroundVariant, string>
export {}

View File

@@ -0,0 +1,66 @@
/**
* The Background can be either a dotted one or a lined one
*
* @default 'dots'
*/
export type BackgroundVariant = 'dots' | 'lines'
export interface BackgroundProps {
/**
* `<Background>` component id
*
* This is necessary when you have multiple flows with backgrounds visible at the same time.
* If no id is explicitly assigned, an auto-generated one is used.
*
* @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
*/
id?: string
/**
* The background pattern variant {@link BackgroundVariant}
*
* @default 'dots'
*/
variant?: BackgroundVariant
/**
* The background pattern gap
*
* Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
*
* @default 20
*/
gap?: number | number[]
/**
* Background pattern size
*
* @default 1
*/
size?: number
/**
* @default 1
*/
lineWidth?: number
/**
* The background pattern color
*
* This only changes the color of the *pattern*, not the background color itself.
*
* If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
*/
color?: string
/**
* Background x-coordinate (offset x)
*
* @default 0
*/
x?: number
/**
* Background y-coordinate (offset y)
* @default 0
*/
y?: number
/**
* Background pattern offset
*
* @default 2
*/
offset?: number
}

View File

@@ -0,0 +1,16 @@
declare const _default: import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,108 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
size: {
type: import('vue').PropType<number>
default: number
}
color: {
type: import('vue').PropType<string>
}
id: {
type: import('vue').PropType<string>
}
variant: {
type: import('vue').PropType<import('./types').BackgroundVariant>
default: string
}
gap: {
type: import('vue').PropType<number | number[]>
default: number
}
lineWidth: {
type: import('vue').PropType<number>
default: number
}
x: {
type: import('vue').PropType<number>
default: number
}
y: {
type: import('vue').PropType<number>
default: number
}
offset: {
type: import('vue').PropType<number>
default: number
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
size: {
type: import('vue').PropType<number>
default: number
}
color: {
type: import('vue').PropType<string>
}
id: {
type: import('vue').PropType<string>
}
variant: {
type: import('vue').PropType<import('./types').BackgroundVariant>
default: string
}
gap: {
type: import('vue').PropType<number | number[]>
default: number
}
lineWidth: {
type: import('vue').PropType<number>
default: number
}
x: {
type: import('vue').PropType<number>
default: number
}
y: {
type: import('vue').PropType<number>
default: number
}
offset: {
type: import('vue').PropType<number>
default: number
}
}>
>,
{
size: number
variant: import('./types').BackgroundVariant
gap: number | number[]
lineWidth: number
x: number
y: number
offset: number
},
{}
>,
{
'pattern-container'?(_: { id: string }): any
pattern?(_: {}): any
default?(_: { id: string }): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,2 @@
export { default as Background } from './Background.vue'
export * from './types'

View File

@@ -0,0 +1,20 @@
import type { FunctionalComponent } from 'vue'
import type { BackgroundVariant } from './types'
interface LinePatternProps {
dimensions: [number, number]
size?: number
color: string
}
export declare const LinePattern: FunctionalComponent<LinePatternProps>
interface DotPatternProps {
radius: number
color: string
}
export declare const DotPattern: FunctionalComponent<DotPatternProps>
export declare const Patterns: {
lines: FunctionalComponent<LinePatternProps, {}, any>
dots: FunctionalComponent<DotPatternProps, {}, any>
}
export declare const DefaultBgColors: Record<BackgroundVariant, string>
export {}

View File

@@ -0,0 +1,66 @@
/**
* The Background can be either a dotted one or a lined one
*
* @default 'dots'
*/
export type BackgroundVariant = 'dots' | 'lines'
export interface BackgroundProps {
/**
* `<Background>` component id
*
* This is necessary when you have multiple flows with backgrounds visible at the same time.
* If no id is explicitly assigned, an auto-generated one is used.
*
* @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
*/
id?: string
/**
* The background pattern variant {@link BackgroundVariant}
*
* @default 'dots'
*/
variant?: BackgroundVariant
/**
* The background pattern gap
*
* Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
*
* @default 20
*/
gap?: number | number[]
/**
* Background pattern size
*
* @default 1
*/
size?: number
/**
* @default 1
*/
lineWidth?: number
/**
* The background pattern color
*
* This only changes the color of the *pattern*, not the background color itself.
*
* If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
*/
color?: string
/**
* Background x-coordinate (offset x)
*
* @default 0
*/
x?: number
/**
* Background y-coordinate (offset y)
* @default 0
*/
y?: number
/**
* Background pattern offset
*
* @default 2
*/
offset?: number
}

View File

@@ -0,0 +1,36 @@
import type { GraphNode } from '../../types'
declare const _default: import('vue').DefineComponent<
__VLS_TypePropsToRuntimeProps<{
sourceNode: GraphNode
}>,
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<
__VLS_TypePropsToRuntimeProps<{
sourceNode: GraphNode
}>
>
>,
{}
>
export default _default
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
type __VLS_TypePropsToRuntimeProps<T> = {
[K in keyof T]-?: {} extends Pick<T, K>
? {
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
}
: {
type: import('vue').PropType<T[K]>
required: true
}
}

View File

@@ -0,0 +1,24 @@
declare const ConnectionLine: import('vue').DefineComponent<
{},
() =>
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
| null,
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default ConnectionLine

View File

@@ -0,0 +1,9 @@
import type { FunctionalComponent } from 'vue'
import type { BaseEdgeProps } from '../../types'
/**
* 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
*/
declare const BaseEdge: FunctionalComponent<BaseEdgeProps>
export default BaseEdge

View File

@@ -0,0 +1,108 @@
declare const _default: import('vue').DefineComponent<
{
id: {
type: import('vue').PropType<string>
}
label: {
type: import('vue').PropType<any>
}
markerStart: {
type: import('vue').PropType<string>
}
markerEnd: {
type: import('vue').PropType<string>
}
interactionWidth: {
type: import('vue').PropType<number>
default: number
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
path: {
type: import('vue').PropType<string>
required: true
}
labelX: {
type: import('vue').PropType<number>
}
labelY: {
type: import('vue').PropType<number>
}
},
{
pathEl: import('vue').Ref<SVGPathElement | null>
interactionEl: import('vue').Ref<SVGPathElement | null>
labelEl: import('vue').Ref<SVGGElement | null>
},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
id: {
type: import('vue').PropType<string>
}
label: {
type: import('vue').PropType<any>
}
markerStart: {
type: import('vue').PropType<string>
}
markerEnd: {
type: import('vue').PropType<string>
}
interactionWidth: {
type: import('vue').PropType<number>
default: number
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
path: {
type: import('vue').PropType<string>
required: true
}
labelX: {
type: import('vue').PropType<number>
}
labelY: {
type: import('vue').PropType<number>
}
}>
>,
{
interactionWidth: number
},
{}
>
export default _default

View File

@@ -0,0 +1,20 @@
import type { BezierEdgeProps } from '../../types'
declare const BezierEdge: import('vue').DefineComponent<
BezierEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<BezierEdgeProps>,
{
label?: any
},
{}
>
export default BezierEdge

View File

@@ -0,0 +1,12 @@
import type { FunctionalComponent, HTMLAttributes } from 'vue'
import type { Position } from '../../types'
interface Props extends HTMLAttributes {
position: Position
centerX: number
centerY: number
radius?: number
type: string
}
declare const EdgeAnchor: FunctionalComponent<Props>
export default EdgeAnchor

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,102 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
x: {
type: import('vue').PropType<number>
required: true
}
y: {
type: import('vue').PropType<number>
required: true
}
label: {
type: import('vue').PropType<
| string
| object
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
>
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
x: {
type: import('vue').PropType<number>
required: true
}
y: {
type: import('vue').PropType<number>
required: true
}
label: {
type: import('vue').PropType<
| string
| object
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
>
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
}>
>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,34 @@
declare const EdgeWrapper: import('vue').DefineComponent<
Readonly<{
id?: any
}>,
() =>
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
| null,
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<
Readonly<{
id?: any
}>
>
>,
{
readonly id?: any
},
{}
>
export default EdgeWrapper

View File

@@ -0,0 +1,20 @@
import type { SimpleBezierEdgeProps } from '../../types'
declare const SimpleBezierEdge: import('vue').DefineComponent<
SimpleBezierEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<SimpleBezierEdgeProps>,
{
label?: any
},
{}
>
export default SimpleBezierEdge

View File

@@ -0,0 +1,20 @@
import type { SmoothStepEdgeProps } from '../../types'
declare const SmoothStepEdge: import('vue').DefineComponent<
SmoothStepEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<SmoothStepEdgeProps>,
{
label?: any
},
{}
>
export default SmoothStepEdge

View File

@@ -0,0 +1,20 @@
import type { StepEdgeProps } from '../../types'
declare const StepEdge: import('vue').DefineComponent<
StepEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<StepEdgeProps>,
{
label?: any
},
{}
>
export default StepEdge

View File

@@ -0,0 +1,20 @@
import type { StraightEdgeProps } from '../../types'
declare const StraightEdge: import('vue').DefineComponent<
StraightEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<StraightEdgeProps>,
{
label?: any
},
{}
>
export default StraightEdge

View File

@@ -0,0 +1,10 @@
export { default as BaseEdge } from './BaseEdge.vue'
export { default as BezierEdge } from './BezierEdge'
export { default as SimpleBezierEdge } from './SimpleBezierEdge'
export { default as StepEdge } from './StepEdge'
export { default as SmoothStepEdge } from './SmoothStepEdge'
export { default as StraightEdge } from './StraightEdge'
export { default as EdgeAnchor } from './EdgeAnchor'
export { default as EdgeText } from './EdgeText.vue'
export { default as EdgeWrapper } from './EdgeWrapper'
export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.vue'

View File

@@ -0,0 +1,31 @@
import type { Position } from '../../types'
export interface GetSimpleBezierPathParams {
sourceX: number
sourceY: number
sourcePosition?: Position
targetX: number
targetY: number
targetPosition?: Position
}
/**
* Get a simple bezier path from source to target handle (no curvature)
* @public
*
* @param simpleBezierPathParams
* @param simpleBezierPathParams.sourceX - The x position of the source handle
* @param simpleBezierPathParams.sourceY - The y position of the source handle
* @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
* @param simpleBezierPathParams.targetX - The x position of the target handle
* @param simpleBezierPathParams.targetY - The y position of the target handle
* @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
* @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
*/
export declare function getSimpleBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]

View File

@@ -0,0 +1,27 @@
import type { Position } from '../../../types'
import type { EdgePathParams } from './general'
export interface GetBezierPathParams {
sourceX: number
sourceY: number
sourcePosition?: Position
targetX: number
targetY: number
targetPosition?: Position
curvature?: number
}
/**
* Get a bezier path from source to target handle
* @public
*
* @param bezierPathParams
* @param bezierPathParams.sourceX - The x position of the source handle
* @param bezierPathParams.sourceY - The y position of the source handle
* @param bezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
* @param bezierPathParams.targetX - The x position of the target handle
* @param bezierPathParams.targetY - The y position of the target handle
* @param bezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
* @param bezierPathParams.curvature - The curvature of the edge (default: 0.25)
* @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
*/
export declare function getBezierPath(bezierPathParams: GetBezierPathParams): EdgePathParams

View File

@@ -0,0 +1,31 @@
export type EdgePathParams = [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
export declare function getSimpleEdgeCenter({
sourceX,
sourceY,
targetX,
targetY,
}: {
sourceX: number
sourceY: number
targetX: number
targetY: number
}): [number, number, number, number]
export declare function getBezierEdgeCenter({
sourceX,
sourceY,
targetX,
targetY,
sourceControlX,
sourceControlY,
targetControlX,
targetControlY,
}: {
sourceX: number
sourceY: number
targetX: number
targetY: number
sourceControlX: number
sourceControlY: number
targetControlX: number
targetControlY: number
}): [number, number, number, number]

View File

@@ -0,0 +1,5 @@
export * from './bezier'
export * from './general'
export * from './simple-bezier'
export * from './smoothstep'
export * from './straight'

View File

@@ -0,0 +1,25 @@
import type { Position } from '../../../types'
import type { EdgePathParams } from './general'
export interface GetSimpleBezierPathParams {
sourceX: number
sourceY: number
sourcePosition?: Position
targetX: number
targetY: number
targetPosition?: Position
}
/**
* Get a simple bezier path from source to target handle (no curvature)
* @public
*
* @param simpleBezierPathParams
* @param simpleBezierPathParams.sourceX - The x position of the source handle
* @param simpleBezierPathParams.sourceY - The y position of the source handle
* @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
* @param simpleBezierPathParams.targetX - The x position of the target handle
* @param simpleBezierPathParams.targetY - The y position of the target handle
* @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
* @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
*/
export declare function getSimpleBezierPath(simpleBezierPathParams: GetSimpleBezierPathParams): EdgePathParams

View File

@@ -0,0 +1,30 @@
import type { Position } from '../../../types'
import type { EdgePathParams } from './general'
export interface GetSmoothStepPathParams {
sourceX: number
sourceY: number
sourcePosition?: Position
targetX: number
targetY: number
targetPosition?: Position
borderRadius?: number
centerX?: number
centerY?: number
offset?: number
}
/**
* Get a smooth step path from source to target handle
* @public
*
* @param smoothStepPathParams
* @param smoothStepPathParams.sourceX - The x position of the source handle
* @param smoothStepPathParams.sourceY - The y position of the source handle
* @param smoothStepPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
* @param smoothStepPathParams.targetX - The x position of the target handle
* @param smoothStepPathParams.targetY - The y position of the target handle
* @param smoothStepPathParams.targetPosition - The position of the target handle (default: Position.Top)
* @param smoothStepPathParams.borderRadius - The border radius of the edge (default: 5)
* @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
*/
export declare function getSmoothStepPath(smoothStepPathParams: GetSmoothStepPathParams): EdgePathParams

View File

@@ -0,0 +1,20 @@
import type { EdgePathParams } from './general'
export interface GetStraightPathParams {
sourceX: number
sourceY: number
targetX: number
targetY: number
}
/**
* Get a straight path from source to target handle
* @public
*
* @param straightEdgeParams
* @param straightEdgeParams.sourceX - The x position of the source handle
* @param straightEdgeParams.sourceY - The y position of the source handle
* @param straightEdgeParams.targetX - The x position of the target handle
* @param straightEdgeParams.targetY - The y position of the target handle
* @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
*/
export declare function getStraightPath(straightEdgeParams: GetStraightPathParams): EdgePathParams

View File

@@ -0,0 +1,79 @@
import type { Position } from '../../types'
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
id: {
type: import('vue').PropType<string>
}
type: {
type: import('vue').PropType<import('../../types').HandleType>
}
position: {
type: import('vue').PropType<Position>
}
isValidConnection: {
type: import('vue').PropType<import('../../types').ValidConnectionFunc>
}
connectable: {
type: import('vue').PropType<import('../../types').HandleConnectable>
}
connectableStart: {
type: import('vue').PropType<boolean>
}
connectableEnd: {
type: import('vue').PropType<boolean>
}
},
{
handleClick: (event: MouseEvent) => void
handlePointerDown: (event: import('../../types').MouseTouchEvent) => void
onClick: (event: MouseEvent) => void
onPointerDown: (event: MouseEvent | TouchEvent) => void
},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
id: {
type: import('vue').PropType<string>
}
type: {
type: import('vue').PropType<import('../../types').HandleType>
}
position: {
type: import('vue').PropType<Position>
}
isValidConnection: {
type: import('vue').PropType<import('../../types').ValidConnectionFunc>
}
connectable: {
type: import('vue').PropType<import('../../types').HandleConnectable>
}
connectableStart: {
type: import('vue').PropType<boolean>
}
connectableEnd: {
type: import('vue').PropType<boolean>
}
}>
>,
{},
{}
>,
{
default?(_: { id: string | undefined }): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,9 @@
import type { FunctionalComponent } from 'vue'
import type { NodeProps } from '../../types'
declare const DefaultNode: FunctionalComponent<
NodeProps<{
label: any
}>
>
export default DefaultNode

View File

@@ -0,0 +1,9 @@
import type { FunctionalComponent } from 'vue'
import type { NodeProps } from '../../types'
declare const InputNode: FunctionalComponent<
NodeProps<{
label: any
}>
>
export default InputNode

View File

@@ -0,0 +1,37 @@
declare const NodeWrapper: import('vue').DefineComponent<
Readonly<{
id?: any
resizeObserver?: any
}>,
() =>
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
| null,
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<
Readonly<{
id?: any
resizeObserver?: any
}>
>
>,
{
readonly id?: any
readonly resizeObserver?: any
},
{}
>
export default NodeWrapper

View File

@@ -0,0 +1,9 @@
import type { FunctionalComponent } from 'vue'
import type { NodeProps } from '../../types'
declare const OutputNode: FunctionalComponent<
NodeProps<{
label: any
}>
>
export default OutputNode

View File

@@ -0,0 +1,4 @@
export { default as DefaultNode } from './DefaultNode'
export { default as InputNode } from './InputNode'
export { default as OutputNode } from './OutputNode'
export { default as NodeWrapper } from './NodeWrapper'

View File

@@ -0,0 +1,16 @@
declare const _default: import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,38 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
position: {
type: import('vue').PropType<import('../../types/panel').PanelPositionType | import('../../types/panel').PanelPosition>
required: true
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
position: {
type: import('vue').PropType<import('../../types/panel').PanelPositionType | import('../../types/panel').PanelPosition>
required: true
}
}>
>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,30 @@
import type { SelectionRect } from '../../types'
declare const _default: import('vue').DefineComponent<
{
userSelectionRect: {
type: import('vue').PropType<SelectionRect>
required: true
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
userSelectionRect: {
type: import('vue').PropType<SelectionRect>
required: true
}
}>
>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,48 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
initialNodes: {
type: import('vue').PropType<import('../../types').Node<any, any, string>[]>
}
initialEdges: {
type: import('vue').PropType<import('../../types').Edge[]>
}
fitViewOnInit: {
type: import('vue').PropType<boolean>
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
initialNodes: {
type: import('vue').PropType<import('../../types').Node<any, any, string>[]>
}
initialEdges: {
type: import('vue').PropType<import('../../types').Edge[]>
}
fitViewOnInit: {
type: import('vue').PropType<boolean>
}
}>
>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,6 @@
export * from './Nodes'
export * from './Edges'
export { default as ConnectionLine } from './ConnectionLine'
export { default as Handle } from './Handle/Handle.vue'
export { default as NodesSelection } from './NodesSelection/NodesSelection.vue'
export { default as UserSelection } from './UserSelection/UserSelection.vue'

View File

@@ -0,0 +1,13 @@
export * from './useDrag'
export * from './useEdge'
export * from './useEdgeHooks'
export * from './useGetPointerPosition'
export * from './useHandle'
export * from './useKeyPress'
export * from './useNode'
export * from './useNodeHooks'
export * from './useUpdateNodePositions'
export * from './useViewportHelper'
export * from './useVueFlow'
export * from './useWatchProps'
export * from './useZoomPanHelper'

View File

@@ -0,0 +1,12 @@
/**
* Composable for accessing the currently ongoing connection.
*
* @public
* @returns current connection: startHandle, endHandle, status, position
*/
export declare function useConnection(): {
startHandle: import('vue').Ref<import('..').ConnectingHandle | null>
endHandle: import('vue').Ref<import('..').ConnectingHandle | null>
status: import('vue').Ref<import('..').ConnectionStatus | null>
position: import('vue').Ref<import('..').XYPosition>
}

View File

@@ -0,0 +1,24 @@
import type { D3DragEvent, SubjectPosition } from 'd3-drag'
import type { MaybeRefOrGetter, Ref } from 'vue'
import type { MouseTouchEvent, NodeDragEvent } from '../types'
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
interface UseDragParams {
onStart: (event: NodeDragEvent) => void
onDrag: (event: NodeDragEvent) => void
onStop: (event: NodeDragEvent) => void
onClick?: (event: MouseTouchEvent) => void
el: Ref<Element | null>
disabled?: MaybeRefOrGetter<boolean>
selectable?: MaybeRefOrGetter<boolean>
dragHandle?: MaybeRefOrGetter<string | undefined>
id?: string
}
/**
* Composable that provides drag behavior for nodes
*
* @internal
* @param params
*/
export declare function useDrag(params: UseDragParams): import('vue').ShallowRef<boolean>
export {}

View File

@@ -0,0 +1,20 @@
import type { CustomEvent, ElementData } from '../types'
/**
* Composable that 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 you do not provide an id, this composable has to be called in a child of your custom edge component, or it will throw
*
* @public
* @param id - The id of the edge to access
* @returns the edge id, the edge and the edge dom element
*/
export declare function useEdge<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
id?: string,
): {
id: string
edge: import('../types').GraphEdge<Data, CustomEvents>
edgeEl: import('vue').Ref<SVGElement | null>
}

View File

@@ -0,0 +1,14 @@
import type { EdgeEventsEmit, EdgeEventsOn, GraphEdge, VueFlowStore } from '../types'
/**
* Composable for handling edge events
*
* @internal
*/
export declare function useEdgeHooks(
edge: GraphEdge,
emits: VueFlowStore['emits'],
): {
emit: EdgeEventsEmit
on: EdgeEventsOn
}

View File

@@ -0,0 +1,27 @@
import type { ComputedRef, MaybeRefOrGetter } from 'vue'
import type { Edge, GraphEdge } from '../types'
interface EdgeData<EdgeType extends Edge = GraphEdge> {
id: string
type: EdgeType['type']
data: NonNullable<EdgeType['data']> | null
}
/**
* Composable for receiving data of one or multiple nodes
*
* @public
* @param edgeId - 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
*/
export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
edgeId: MaybeRefOrGetter<string>,
): ComputedRef<EdgeData<EdgeType> | null>
export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
edgeIds: MaybeRefOrGetter<string[]>,
): ComputedRef<EdgeData<EdgeType>[]>
export declare function useEdgesData<EdgeType extends Edge = GraphEdge>(
edgeIds: MaybeRefOrGetter<string[]>,
guard: (node: Edge) => node is EdgeType,
): ComputedRef<EdgeData<EdgeType>[]>
export {}

View File

@@ -0,0 +1,14 @@
import type { MouseTouchEvent } from '../types'
import type { UseDragEvent } from './useDrag'
/**
* Composable that returns a function to get the pointer position
*
* @internal
*/
export declare function useGetPointerPosition(): (event: UseDragEvent | MouseTouchEvent) => {
x: number
y: number
xSnapped: number
ySnapped: number
}

View File

@@ -0,0 +1,31 @@
import type { MaybeRefOrGetter } from 'vue'
import type { Connection, HandleType, MouseTouchEvent, ValidConnectionFunc } from '../types'
export interface UseHandleProps {
handleId: MaybeRefOrGetter<string | null>
nodeId: MaybeRefOrGetter<string>
type: MaybeRefOrGetter<HandleType>
isValidConnection?: MaybeRefOrGetter<ValidConnectionFunc | null>
edgeUpdaterType?: MaybeRefOrGetter<HandleType>
onEdgeUpdate?: (event: MouseTouchEvent, connection: Connection) => void
onEdgeUpdateEnd?: (event: MouseTouchEvent) => void
}
/**
* This composable provides listeners for handle events
*
* Generally it's recommended to use the `<Handle />` component instead of this composable.
*
* @public
*/
export declare function useHandle({
handleId,
nodeId,
type,
isValidConnection,
edgeUpdaterType,
onEdgeUpdate,
onEdgeUpdateEnd,
}: UseHandleProps): {
handlePointerDown: (event: MouseTouchEvent) => void
handleClick: (event: MouseEvent) => void
}

View File

@@ -0,0 +1,25 @@
import type { ComputedRef, MaybeRefOrGetter } from 'vue'
import type { HandleConnection, HandleType } from '../types'
export interface UseHandleConnectionsParams {
type: MaybeRefOrGetter<HandleType>
id?: MaybeRefOrGetter<string | null>
nodeId?: MaybeRefOrGetter<string | null>
onConnect?: (connections: HandleConnection[]) => void
onDisconnect?: (connections: HandleConnection[]) => void
}
/**
* Composable that returns existing connections of a `<Handle />`.
*
* @deprecated use `useNodeConnections` instead
* @public
* @param params
* @param params.type - handle type `source` or `target`
* @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
* @param params.id - the handle id (this is required if the node has multiple handles of the same type)
* @param params.onConnect - gets called when a connection is created
* @param params.onDisconnect - gets called when a connection is removed
*
* @returns An array of connections
*/
export declare function useHandleConnections(params: UseHandleConnectionsParams): ComputedRef<HandleConnection[]>

View File

@@ -0,0 +1,20 @@
import type { MaybeRefOrGetter } from 'vue'
import type { KeyFilter } from '@vueuse/core'
export interface UseKeyPressOptions {
target?: MaybeRefOrGetter<EventTarget | null | undefined>
actInsideInputWithModifier?: MaybeRefOrGetter<boolean>
preventDefault?: MaybeRefOrGetter<boolean>
}
export declare function isInputDOMNode(event: KeyboardEvent): boolean
/**
* Composable that returns a boolean value if a key is pressed
*
* @public
* @param keyFilter - Can be a boolean, a string, an array of strings or a function that returns a boolean. If it's a boolean, it will act as if the key is always pressed. If it's a string, it will return true if a key matching that string is pressed. If it's an array of strings, it will return true if any of the strings match a key being pressed, or a combination (e.g. ['ctrl+a', 'ctrl+b'])
* @param options - Options object
*/
export declare function useKeyPress(
keyFilter: MaybeRefOrGetter<KeyFilter | boolean | null>,
options?: UseKeyPressOptions,
): import('vue').ShallowRef<boolean>

View File

@@ -0,0 +1,22 @@
import type { CustomEvent, ElementData } from '../types'
/**
* Composable that 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 you do not provide an id, this composable has to be called in a child of your custom node component, or it will throw
*
* @public
* @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 declare function useNode<Data = ElementData, CustomEvents extends Record<string, CustomEvent> = any>(
id?: string,
): {
id: string
nodeEl: import('vue').Ref<HTMLDivElement | null>
node: import('../types').GraphNode<Data, CustomEvents, string>
parentNode: import('vue').ComputedRef<import('../types').GraphNode<any, any, string> | undefined>
connectedEdges: import('vue').ComputedRef<import('../types').GraphEdge[]>
}

View File

@@ -0,0 +1,24 @@
import type { MaybeRefOrGetter } from 'vue'
import type { HandleType, NodeConnection } from '../types'
export interface UseNodeConnectionsParams {
handleType?: MaybeRefOrGetter<HandleType | null | undefined>
handleId?: MaybeRefOrGetter<string | null | undefined>
nodeId?: MaybeRefOrGetter<string | null | undefined>
onConnect?: (connections: NodeConnection[]) => void
onDisconnect?: (connections: NodeConnection[]) => void
}
/**
* Hook to retrieve all edges connected to a node. Can be filtered by handle type and id.
*
* @public
* @param params
* @param params.handleType - handle type `source` or `target`
* @param params.nodeId - node id - if not provided, the node id from the `useNodeId` (meaning, the context-based injection) is used
* @param params.handleId - the handle id (this is required if the node has multiple handles of the same type)
* @param params.onConnect - gets called when a connection is created
* @param params.onDisconnect - gets called when a connection is removed
*
* @returns An array of connections
*/
export declare function useNodeConnections(params?: UseNodeConnectionsParams): import('vue').ComputedRef<NodeConnection[]>

View File

@@ -0,0 +1,14 @@
import type { GraphNode, NodeEventsEmit, NodeEventsOn, VueFlowStore } from '../types'
/**
* Composable for handling node events
*
* @internal
*/
export declare function useNodeHooks(
node: GraphNode,
emits: VueFlowStore['emits'],
): {
emit: NodeEventsEmit
on: NodeEventsOn
}

View File

@@ -0,0 +1,9 @@
/**
* 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.
*
* @public
* @returns the current node id
*/
export declare function useNodeId(): string

View File

@@ -0,0 +1,27 @@
import type { ComputedRef, MaybeRefOrGetter } from 'vue'
import type { GraphNode, Node } from '../types'
interface NodeData<NodeType extends Node = GraphNode> {
id: string
type: NodeType['type']
data: 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
*/
export declare function useNodesData<NodeType extends Node = GraphNode>(
nodeId: MaybeRefOrGetter<string>,
): ComputedRef<NodeData<NodeType> | null>
export declare function useNodesData<NodeType extends Node = GraphNode>(
nodeIds: MaybeRefOrGetter<string[]>,
): ComputedRef<NodeData<NodeType>[]>
export declare function useNodesData<NodeType extends Node = GraphNode>(
nodeIds: MaybeRefOrGetter<string[]>,
guard: (node: Node) => node is NodeType,
): ComputedRef<NodeData<NodeType>[]>
export {}

View File

@@ -0,0 +1,15 @@
export interface UseNodesInitializedOptions {
includeHiddenNodes?: boolean
}
/**
* Composable for getting the initialized state of all nodes.
*
* When a new node is added to the graph, it is not immediately initialized.
* That's because the node's bounds are not yet known.
* This composable will return false and then true when all nodes are initialized, i.e. when their bounds are known.
*
* @public
* @param options - Options
* @returns boolean indicating whether all nodes are initialized
*/
export declare function useNodesInitialized(options?: UseNodesInitializedOptions): import('vue').ComputedRef<boolean>

View File

@@ -0,0 +1,6 @@
/**
* Composable that handles the initialization of the viewport.
*
* @internal
*/
export declare function useOnInitHandler(): void

View File

@@ -0,0 +1,9 @@
import type { Ref } from 'vue'
/**
* Composable that handles the resize of the viewport.
*
* @internal
* @param viewportEl
*/
export declare function useResizeHandler(viewportEl: Ref<HTMLDivElement | null>): void

View File

@@ -0,0 +1 @@
export declare function useStylesLoadedWarning(): void

View File

@@ -0,0 +1,8 @@
import type { XYPosition } from '../types'
/**
* Composable for updating the position of nodes.
*
* @internal
*/
export declare function useUpdateNodePositions(): (positionDiff: XYPosition, isShiftPressed?: boolean) => void

View File

@@ -0,0 +1,8 @@
import type { ComputedGetters, Project, State, ViewportFunctions } from '../types'
export interface ViewportHelper extends ViewportFunctions {
viewportInitialized: boolean
screenToFlowCoordinate: Project
flowToScreenCoordinate: Project
}
export declare function useViewport(state: State, getters: ComputedGetters): import('vue').ComputedRef<ViewportHelper>

View File

@@ -0,0 +1,20 @@
import type { D3Selection, Project, State, ViewportFunctions } from '../types'
export interface ViewportHelper extends ViewportFunctions {
viewportInitialized: boolean
screenToFlowCoordinate: Project
flowToScreenCoordinate: Project
}
/**
* Composable that provides viewport helper functions.
*
* @internal
* @param state
*/
export declare function useViewportHelper(state: State): import('vue').ComputedRef<ViewportHelper>
export declare function getD3Transition(
selection: D3Selection,
duration?: number,
ease?: (t: number) => number,
onEnd?: () => void,
): D3Selection | import('d3-transition').Transition<HTMLDivElement, unknown, null, undefined>

View File

@@ -0,0 +1,15 @@
import type { FlowOptions, VueFlowStore } from '../types'
/**
* 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
*
* @public
* @returns a vue flow store instance
* @param idOrOpts - id of the store instance or options to create a new store instance
*/
export declare function useVueFlow(id?: string): VueFlowStore
export declare function useVueFlow(options?: FlowOptions): VueFlowStore

View File

@@ -0,0 +1,16 @@
import type { ToRefs } from 'vue'
import type { FlowProps, VueFlowStore } from '../types'
/**
* Watches props and updates the store accordingly
*
* @internal
* @param models
* @param props
* @param store
*/
export declare function useWatchProps(
models: ToRefs<Pick<FlowProps, 'nodes' | 'edges' | 'modelValue'>>,
props: FlowProps,
store: VueFlowStore,
): () => void

View File

@@ -0,0 +1,11 @@
type UseWindow = Window &
typeof globalThis & {
chrome?: any
}
/**
* Returns the window object
*
* @internal
*/
export declare function useWindow(): UseWindow
export {}

View File

@@ -0,0 +1,24 @@
import type { Ref } from 'vue'
interface UseDragParams {
nodeElement: Ref<HTMLDivElement>
disabled?: Ref<boolean>
noDragClassName?: Ref<string>
handleSelector?: Ref<string>
nodeId?: Ref<string>
isSelectable?: Ref<boolean>
}
/**
* Hook for calling XYDrag helper from @xyflow/system.
*
* @internal
*/
export declare function useDrag({
nodeElement,
disabled,
noDragClassName,
handleSelector,
nodeId,
isSelectable,
}: UseDragParams): Ref<boolean>
export {}

View File

@@ -0,0 +1,6 @@
import type { ViewportFunctions } from '../types'
/**
* @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow})
*/
export declare function useZoomPanHelper(vueFlowId?: string): ViewportFunctions

View File

@@ -0,0 +1,16 @@
declare const _default: import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,28 @@
import type { MarkerProps } from '../../types/edge'
declare const _default: import('vue').DefineComponent<
__VLS_TypePropsToRuntimeProps<MarkerProps>,
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<MarkerProps>>>,
{}
>
export default _default
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T
type __VLS_TypePropsToRuntimeProps<T> = {
[K in keyof T]-?: {} extends Pick<T, K>
? {
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>
}
: {
type: import('vue').PropType<T[K]>
required: true
}
}

View File

@@ -0,0 +1,16 @@
declare const _default: import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,72 @@
declare const _default: import('vue').DefineComponent<
{
id: {
type: import('vue').PropType<string>
required: true
}
type: {
type: import('vue').PropType<string>
required: true
}
color: {
type: import('vue').PropType<string>
}
width: {
type: import('vue').PropType<number>
}
height: {
type: import('vue').PropType<number>
}
markerUnits: {
type: import('vue').PropType<string>
}
orient: {
type: import('vue').PropType<string>
}
strokeWidth: {
type: import('vue').PropType<number>
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
id: {
type: import('vue').PropType<string>
required: true
}
type: {
type: import('vue').PropType<string>
required: true
}
color: {
type: import('vue').PropType<string>
}
width: {
type: import('vue').PropType<number>
}
height: {
type: import('vue').PropType<number>
}
markerUnits: {
type: import('vue').PropType<string>
}
orient: {
type: import('vue').PropType<string>
}
strokeWidth: {
type: import('vue').PropType<number>
}
}>
>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,16 @@
declare const _default: import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,46 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
isSelecting: {
type: import('vue').PropType<boolean>
required: true
}
selectionKeyPressed: {
type: import('vue').PropType<boolean>
required: true
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
isSelecting: {
type: import('vue').PropType<boolean>
required: true
}
selectionKeyPressed: {
type: import('vue').PropType<boolean>
required: true
}
}>
>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,3 @@
import type { XYPosition } from '../../types'
export declare function getMousePosition(event: MouseEvent, containerBounds: DOMRect): XYPosition

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,6 @@
export { default as VueFlow } from './VueFlow/VueFlow.vue'
export { default as EdgeRenderer } from './EdgeRenderer/EdgeRenderer.vue'
export { default as Marker } from './EdgeRenderer/Marker.vue'
export { default as MarkerDefinitions } from './EdgeRenderer/MarkerDefinitions.vue'
export { default as NodeRenderer } from './NodeRenderer/NodeRenderer.vue'
export { default as Viewport } from './Viewport/Viewport.vue'

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

9
node_modules/@vue-flow/core/dist/context/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,9 @@
import type { InjectionKey, Ref } from 'vue'
import type { FlowSlots, VueFlowStore } from '../types'
export declare const VueFlow: InjectionKey<VueFlowStore>
export declare const NodeId: InjectionKey<string>
export declare const NodeRef: InjectionKey<Ref<HTMLDivElement | null>>
export declare const EdgeId: InjectionKey<string>
export declare const EdgeRef: InjectionKey<Ref<SVGElement | null>>
export declare const Slots: InjectionKey<Readonly<FlowSlots>>

71
node_modules/@vue-flow/core/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,71 @@
/**
* Vue Flow
* @module vue-flow
*/
export { default as VueFlow } from './container/VueFlow/VueFlow.vue'
export { default as Handle } from './components/Handle/Handle.vue'
export { default as Panel } from './components/Panel/Panel.vue'
export { default as StraightEdge } from './components/Edges/StraightEdge'
export { default as StepEdge } from './components/Edges/StepEdge'
export { default as BezierEdge } from './components/Edges/BezierEdge'
export { default as SimpleBezierEdge } from './components/Edges/SimpleBezierEdge'
export { default as SmoothStepEdge } from './components/Edges/SmoothStepEdge'
export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
export { default as EdgeText } from './components/Edges/EdgeText.vue'
export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
export {
getBezierPath,
getSimpleBezierPath,
getSmoothStepPath,
getStraightPath,
getSimpleEdgeCenter,
getBezierEdgeCenter,
} from './components/Edges/utils'
export {
isNode,
isEdge,
isGraphNode,
isGraphEdge,
addEdge,
updateEdge,
getOutgoers,
getIncomers,
getConnectedEdges,
getTransformForBounds,
getRectOfNodes,
pointToRendererPoint,
rendererPointToPoint,
/** @deprecated - will be removed in the next major version, use `rendererPointToPoint` instead */
rendererPointToPoint as graphPosToZoomedPos,
getNodesInside,
getMarkerId,
getBoundsofRects,
connectionExists,
clamp,
wheelDelta,
} from './utils/graph'
export { isMacOs } from './utils/general'
/**
* @deprecated - Use store instance and call `applyChanges` with template-ref or the one received by `onPaneReady` instead
* Intended for options API
* In composition API you can access apply utilities from `useVueFlow`
*/
export { applyChanges, applyEdgeChanges, applyNodeChanges } from './utils/changes'
export { defaultEdgeTypes, defaultNodeTypes } from './utils/defaultNodesEdges'
export { VueFlow as VueFlowInjection, NodeId as NodeIdInjection } from './context'
export { useZoomPanHelper } from './composables/useZoomPanHelper'
export { useVueFlow } from './composables/useVueFlow'
export { useHandle } from './composables/useHandle'
export { useNode } from './composables/useNode'
export { useEdge } from './composables/useEdge'
export { useGetPointerPosition } from './composables/useGetPointerPosition'
export { useNodeId } from './composables/useNodeId'
export { useConnection } from './composables/useConnection'
export { useHandleConnections } from './composables/useHandleConnections'
export { useNodeConnections } from './composables/useNodeConnections'
export { useNodesData } from './composables/useNodesData'
export { useEdgesData } from './composables/useEdgesData'
export { useNodesInitialized } from './composables/useNodesInitialized'
export { useKeyPress } from './composables/useKeyPress'
export { VueFlowError, ErrorCode, isErrorOfType } from './utils/errors'
export * from './types'

View File

@@ -0,0 +1,16 @@
declare const _default: import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default _default

View File

@@ -0,0 +1,24 @@
declare const ConnectionLine: import('vue').DefineComponent<
{},
() =>
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
| null,
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>
export default ConnectionLine

View File

@@ -0,0 +1,108 @@
declare const _default: import('vue').DefineComponent<
{
id: {
type: import('vue').PropType<string>
}
label: {
type: import('vue').PropType<any>
}
markerStart: {
type: import('vue').PropType<string>
}
markerEnd: {
type: import('vue').PropType<string>
}
interactionWidth: {
type: import('vue').PropType<number>
default: number
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
path: {
type: import('vue').PropType<string>
required: true
}
labelX: {
type: import('vue').PropType<number>
}
labelY: {
type: import('vue').PropType<number>
}
},
{
pathEl: import('vue').Ref<SVGPathElement | null>
interactionEl: import('vue').Ref<SVGPathElement | null>
labelEl: import('vue').Ref<SVGGElement | null>
},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
id: {
type: import('vue').PropType<string>
}
label: {
type: import('vue').PropType<any>
}
markerStart: {
type: import('vue').PropType<string>
}
markerEnd: {
type: import('vue').PropType<string>
}
interactionWidth: {
type: import('vue').PropType<number>
default: number
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
path: {
type: import('vue').PropType<string>
required: true
}
labelX: {
type: import('vue').PropType<number>
}
labelY: {
type: import('vue').PropType<number>
}
}>
>,
{
interactionWidth: number
},
{}
>
export default _default

View File

@@ -0,0 +1,20 @@
import type { BezierEdgeProps } from '../../types'
declare const BezierEdge: import('vue').DefineComponent<
BezierEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<BezierEdgeProps>,
{
label?: any
},
{}
>
export default BezierEdge

View File

@@ -0,0 +1,12 @@
import type { FunctionalComponent, HTMLAttributes } from 'vue'
import type { Position } from '../../types'
interface Props extends HTMLAttributes {
position: Position
centerX: number
centerY: number
radius?: number
type: string
}
declare const EdgeAnchor: FunctionalComponent<Props>
export default EdgeAnchor

View File

@@ -0,0 +1,26 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{},
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<import('vue').ExtractPropTypes<{}>>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,102 @@
declare const _default: __VLS_WithTemplateSlots<
import('vue').DefineComponent<
{
x: {
type: import('vue').PropType<number>
required: true
}
y: {
type: import('vue').PropType<number>
required: true
}
label: {
type: import('vue').PropType<
| string
| object
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
>
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
},
{},
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<{
x: {
type: import('vue').PropType<number>
required: true
}
y: {
type: import('vue').PropType<number>
required: true
}
label: {
type: import('vue').PropType<
| string
| object
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
>
}
labelStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelShowBg: {
type: import('vue').PropType<boolean>
}
labelBgStyle: {
type: import('vue').PropType<import('vue').CSSProperties>
}
labelBgPadding: {
type: import('vue').PropType<[number, number]>
}
labelBgBorderRadius: {
type: import('vue').PropType<number>
}
}>
>,
{},
{}
>,
{
default?(_: {}): any
}
>
export default _default
type __VLS_WithTemplateSlots<T, S> = T & {
new (): {
$slots: S
}
}

View File

@@ -0,0 +1,34 @@
declare const EdgeWrapper: import('vue').DefineComponent<
Readonly<{
id?: any
}>,
() =>
| import('vue').VNode<
import('vue').RendererNode,
import('vue').RendererElement,
{
[key: string]: any
}
>
| null,
unknown,
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<
import('vue').ExtractPropTypes<
Readonly<{
id?: any
}>
>
>,
{
readonly id?: any
},
{}
>
export default EdgeWrapper

View File

@@ -0,0 +1,20 @@
import type { SimpleBezierEdgeProps } from '../../types'
declare const SimpleBezierEdge: import('vue').DefineComponent<
SimpleBezierEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<SimpleBezierEdgeProps>,
{
label?: any
},
{}
>
export default SimpleBezierEdge

View File

@@ -0,0 +1,20 @@
import type { SmoothStepEdgeProps } from '../../types'
declare const SmoothStepEdge: import('vue').DefineComponent<
SmoothStepEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<SmoothStepEdgeProps>,
{
label?: any
},
{}
>
export default SmoothStepEdge

View File

@@ -0,0 +1,20 @@
import type { StepEdgeProps } from '../../types'
declare const StepEdge: import('vue').DefineComponent<
StepEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<StepEdgeProps>,
{
label?: any
},
{}
>
export default StepEdge

View File

@@ -0,0 +1,20 @@
import type { StraightEdgeProps } from '../../types'
declare const StraightEdge: import('vue').DefineComponent<
StraightEdgeProps,
{},
{},
{},
{},
import('vue').ComponentOptionsMixin,
import('vue').ComponentOptionsMixin,
{},
string,
import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps,
Readonly<StraightEdgeProps>,
{
label?: any
},
{}
>
export default StraightEdge

View File

@@ -0,0 +1,10 @@
export { default as BaseEdge } from './BaseEdge.vue'
export { default as BezierEdge } from './BezierEdge'
export { default as SimpleBezierEdge } from './SimpleBezierEdge'
export { default as StepEdge } from './StepEdge'
export { default as SmoothStepEdge } from './SmoothStepEdge'
export { default as StraightEdge } from './StraightEdge'
export { default as EdgeAnchor } from './EdgeAnchor'
export { default as EdgeText } from './EdgeText.vue'
export { default as EdgeWrapper } from './EdgeWrapper'
export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.vue'

View File

@@ -0,0 +1,27 @@
import type { Position } from '../../../types'
import type { EdgePathParams } from './general'
export interface GetBezierPathParams {
sourceX: number
sourceY: number
sourcePosition?: Position
targetX: number
targetY: number
targetPosition?: Position
curvature?: number
}
/**
* Get a bezier path from source to target handle
* @public
*
* @param bezierPathParams
* @param bezierPathParams.sourceX - The x position of the source handle
* @param bezierPathParams.sourceY - The y position of the source handle
* @param bezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
* @param bezierPathParams.targetX - The x position of the target handle
* @param bezierPathParams.targetY - The y position of the target handle
* @param bezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
* @param bezierPathParams.curvature - The curvature of the edge (default: 0.25)
* @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
*/
export declare function getBezierPath(bezierPathParams: GetBezierPathParams): EdgePathParams

View File

@@ -0,0 +1,31 @@
export type EdgePathParams = [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
export declare function getSimpleEdgeCenter({
sourceX,
sourceY,
targetX,
targetY,
}: {
sourceX: number
sourceY: number
targetX: number
targetY: number
}): [number, number, number, number]
export declare function getBezierEdgeCenter({
sourceX,
sourceY,
targetX,
targetY,
sourceControlX,
sourceControlY,
targetControlX,
targetControlY,
}: {
sourceX: number
sourceY: number
targetX: number
targetY: number
sourceControlX: number
sourceControlY: number
targetControlX: number
targetControlY: number
}): [number, number, number, number]

Some files were not shown because too many files have changed in this diff Show More