refactor(types): Split types into separate files
* for better organization split typings into separate files * use index as barrel file
This commit is contained in:
Braks
@@ -0,0 +1,25 @@
|
|||||||
|
import { Dimensions, Elements, XYPosition } from './types'
|
||||||
|
import { NodeDiffUpdate, NodeDimensionUpdate, NodeExtent, NodePosUpdate, TranslateExtent } from './node'
|
||||||
|
import { InitD3ZoomPayload } from './panel'
|
||||||
|
import { SetConnectionId } from './connection'
|
||||||
|
|
||||||
|
export interface RevueFlowActions {
|
||||||
|
setElements: (elements: Elements) => void
|
||||||
|
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void
|
||||||
|
updateNodePos: (payload: NodePosUpdate) => void
|
||||||
|
updateNodePosDiff: (payload: NodeDiffUpdate) => void
|
||||||
|
setUserSelection: (mousePos: XYPosition) => void
|
||||||
|
updateUserSelection: (mousePos: XYPosition) => void
|
||||||
|
unsetUserSelection: () => void
|
||||||
|
addSelectedElements: (elements: Elements) => void
|
||||||
|
initD3Zoom: (payload: InitD3ZoomPayload) => void
|
||||||
|
setMinZoom: (zoom: number) => void
|
||||||
|
setMaxZoom: (zoom: number) => void
|
||||||
|
setTranslateExtent: (translateExtent: TranslateExtent) => void
|
||||||
|
setNodeExtent: (nodeExtent: NodeExtent) => void
|
||||||
|
resetSelectedElements: () => void
|
||||||
|
unsetNodesSelection: () => void
|
||||||
|
updateSize: (size: Dimensions) => void
|
||||||
|
setConnectionNodeId: (payload: SetConnectionId) => void
|
||||||
|
setInteractive: (isInteractive: boolean) => void
|
||||||
|
}
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
import { ComponentPublicInstance } from 'vue'
|
||||||
|
import { ElementId, HandleType, Position } from './types'
|
||||||
|
|
||||||
|
export enum ConnectionLineType {
|
||||||
|
Bezier = 'default',
|
||||||
|
Straight = 'straight',
|
||||||
|
Step = 'step',
|
||||||
|
SmoothStep = 'smoothstep',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Connection {
|
||||||
|
source: ElementId | null
|
||||||
|
target: ElementId | null
|
||||||
|
sourceHandle: ElementId | null
|
||||||
|
targetHandle: ElementId | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ConnectionLineComponentProps = {
|
||||||
|
sourceX: number
|
||||||
|
sourceY: number
|
||||||
|
sourcePosition?: Position
|
||||||
|
targetX: number
|
||||||
|
targetY: number
|
||||||
|
targetPosition?: Position
|
||||||
|
connectionLineStyle?: any
|
||||||
|
connectionLineType: ConnectionLineType
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ConnectionLineComponent = ComponentPublicInstance<ConnectionLineComponentProps>
|
||||||
|
|
||||||
|
export type OnConnectFunc = (connection: Connection) => void
|
||||||
|
export type OnConnectStartParams = {
|
||||||
|
nodeId: ElementId | null
|
||||||
|
handleId: ElementId | null
|
||||||
|
handleType: HandleType | null
|
||||||
|
}
|
||||||
|
export type OnConnectStartFunc = (event: MouseEvent, params: OnConnectStartParams) => void
|
||||||
|
export type OnConnectStopFunc = (event: MouseEvent) => void
|
||||||
|
export type OnConnectEndFunc = (event: MouseEvent) => void
|
||||||
|
|
||||||
|
export enum ConnectionMode {
|
||||||
|
Strict = 'strict',
|
||||||
|
Loose = 'loose',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SetConnectionId = {
|
||||||
|
connectionNodeId: ElementId | null
|
||||||
|
connectionHandleId: ElementId | null
|
||||||
|
connectionHandleType: HandleType | null
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { ComponentPublicInstance, HTMLAttributes, VNode } from 'vue'
|
||||||
|
import { ArrowHeadType, ElementId, Position } from './types'
|
||||||
|
import { Connection } from './connection'
|
||||||
|
|
||||||
|
export interface Edge<T = any> {
|
||||||
|
id: ElementId
|
||||||
|
type?: string
|
||||||
|
source: ElementId
|
||||||
|
target: ElementId
|
||||||
|
sourceHandle?: ElementId | null
|
||||||
|
targetHandle?: ElementId | null
|
||||||
|
label?: string | VNode
|
||||||
|
labelStyle?: any
|
||||||
|
labelShowBg?: boolean
|
||||||
|
labelBgStyle?: any
|
||||||
|
labelBgPadding?: [number, number]
|
||||||
|
labelBgBorderRadius?: number
|
||||||
|
style?: any
|
||||||
|
animated?: boolean
|
||||||
|
arrowHeadType?: ArrowHeadType
|
||||||
|
isHidden?: boolean
|
||||||
|
data?: T
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EdgeProps<T = any> {
|
||||||
|
id: ElementId
|
||||||
|
source: ElementId
|
||||||
|
target: ElementId
|
||||||
|
sourceX: number
|
||||||
|
sourceY: number
|
||||||
|
targetX: number
|
||||||
|
targetY: number
|
||||||
|
selected?: boolean
|
||||||
|
animated?: boolean
|
||||||
|
sourcePosition: Position
|
||||||
|
targetPosition: Position
|
||||||
|
label?: string | VNode
|
||||||
|
labelStyle?: any
|
||||||
|
labelShowBg?: boolean
|
||||||
|
labelBgStyle?: any
|
||||||
|
labelBgPadding?: [number, number]
|
||||||
|
labelBgBorderRadius?: number
|
||||||
|
style?: any
|
||||||
|
arrowHeadType?: ArrowHeadType
|
||||||
|
markerEndId?: string
|
||||||
|
data?: T
|
||||||
|
sourceHandleId?: ElementId | null
|
||||||
|
targetHandleId?: ElementId | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
|
||||||
|
borderRadius?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EdgeTextProps extends HTMLAttributes {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
label?: string | VNode
|
||||||
|
labelStyle?: any
|
||||||
|
labelShowBg?: boolean
|
||||||
|
labelBgStyle?: any
|
||||||
|
labelBgPadding?: [number, number]
|
||||||
|
labelBgBorderRadius?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type EdgeType = ComponentPublicInstance<EdgeSmoothStepProps>
|
||||||
|
|
||||||
|
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { Dimensions, ElementId, Position, XYPosition } from './types'
|
||||||
|
import { Connection, OnConnectFunc } from './connection'
|
||||||
|
|
||||||
|
export type HandleType = 'source' | 'target'
|
||||||
|
|
||||||
|
export interface HandleElement extends XYPosition, Dimensions {
|
||||||
|
id?: ElementId | null
|
||||||
|
position: Position
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface HandleProps {
|
||||||
|
type: HandleType
|
||||||
|
position: Position
|
||||||
|
isConnectable?: boolean
|
||||||
|
onConnect?: OnConnectFunc
|
||||||
|
isValidConnection?: (connection: Connection) => boolean
|
||||||
|
id?: ElementId
|
||||||
|
}
|
||||||
+8
-425
@@ -1,425 +1,8 @@
|
|||||||
import { Selection as D3Selection, ZoomBehavior } from 'd3'
|
export * from './types'
|
||||||
import { CSSProperties, DefineComponent, HTMLAttributes, VNode } from 'vue'
|
export * from './actions'
|
||||||
import { Store } from 'pinia'
|
export * from './connection'
|
||||||
|
export * from './edge'
|
||||||
export type ElementId = string
|
export * from './handle'
|
||||||
|
export * from './node'
|
||||||
export type FlowElement<T = any> = Node<T> | Edge<T>
|
export * from './panel'
|
||||||
|
export * from './store'
|
||||||
export type Elements<T = any> = Array<FlowElement<T>>
|
|
||||||
|
|
||||||
export type Transform = [number, number, number]
|
|
||||||
|
|
||||||
export enum Position {
|
|
||||||
Left = 'left',
|
|
||||||
Top = 'top',
|
|
||||||
Right = 'right',
|
|
||||||
Bottom = 'bottom'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface XYPosition {
|
|
||||||
x: number
|
|
||||||
y: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Dimensions {
|
|
||||||
width: number
|
|
||||||
height: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Rect extends Dimensions, XYPosition {}
|
|
||||||
|
|
||||||
export interface Box extends XYPosition {
|
|
||||||
x2: number
|
|
||||||
y2: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type SnapGrid = [number, number]
|
|
||||||
|
|
||||||
export interface Node<T = any> {
|
|
||||||
id: ElementId
|
|
||||||
position: XYPosition
|
|
||||||
type?: string
|
|
||||||
__rf: {
|
|
||||||
position: XYPosition
|
|
||||||
isDragging?: boolean
|
|
||||||
width: number | null
|
|
||||||
height: number | null
|
|
||||||
handleBounds?: any
|
|
||||||
}
|
|
||||||
data?: T
|
|
||||||
style?: any
|
|
||||||
className?: string
|
|
||||||
targetPosition?: Position
|
|
||||||
sourcePosition?: Position
|
|
||||||
isHidden?: boolean
|
|
||||||
draggable?: boolean
|
|
||||||
selectable?: boolean
|
|
||||||
connectable?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ArrowHeadType {
|
|
||||||
Arrow = 'arrow',
|
|
||||||
ArrowClosed = 'arrowclosed'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Edge<T = any> {
|
|
||||||
id: ElementId
|
|
||||||
type?: string
|
|
||||||
source: ElementId
|
|
||||||
target: ElementId
|
|
||||||
sourceHandle?: ElementId | null
|
|
||||||
targetHandle?: ElementId | null
|
|
||||||
label?: string | VNode
|
|
||||||
labelStyle?: any
|
|
||||||
labelShowBg?: boolean
|
|
||||||
labelBgStyle?: any
|
|
||||||
labelBgPadding?: [number, number]
|
|
||||||
labelBgBorderRadius?: number
|
|
||||||
style?: any
|
|
||||||
animated?: boolean
|
|
||||||
arrowHeadType?: ArrowHeadType
|
|
||||||
isHidden?: boolean
|
|
||||||
data?: T
|
|
||||||
className?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum BackgroundVariant {
|
|
||||||
Lines = 'lines',
|
|
||||||
Dots = 'dots'
|
|
||||||
}
|
|
||||||
|
|
||||||
export type HandleType = 'source' | 'target'
|
|
||||||
|
|
||||||
export type NodeType = DefineComponent<NodeProps>
|
|
||||||
|
|
||||||
export type EdgeType = DefineComponent<EdgeSmoothStepProps>
|
|
||||||
|
|
||||||
export interface SelectionRect extends Rect {
|
|
||||||
startX: number
|
|
||||||
startY: number
|
|
||||||
draw: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface EdgeProps<T = any> {
|
|
||||||
id: ElementId
|
|
||||||
source: ElementId
|
|
||||||
target: ElementId
|
|
||||||
sourceX: number
|
|
||||||
sourceY: number
|
|
||||||
targetX: number
|
|
||||||
targetY: number
|
|
||||||
selected?: boolean
|
|
||||||
animated?: boolean
|
|
||||||
sourcePosition: Position
|
|
||||||
targetPosition: Position
|
|
||||||
label?: string | VNode
|
|
||||||
labelStyle?: any
|
|
||||||
labelShowBg?: boolean
|
|
||||||
labelBgStyle?: any
|
|
||||||
labelBgPadding?: [number, number]
|
|
||||||
labelBgBorderRadius?: number
|
|
||||||
style?: any
|
|
||||||
arrowHeadType?: ArrowHeadType
|
|
||||||
markerEndId?: string
|
|
||||||
data?: T
|
|
||||||
sourceHandleId?: ElementId | null
|
|
||||||
targetHandleId?: ElementId | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface EdgeSmoothStepProps<T = any> extends EdgeProps<T> {
|
|
||||||
borderRadius?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface EdgeTextProps extends HTMLAttributes {
|
|
||||||
x: number
|
|
||||||
y: number
|
|
||||||
label?: string | VNode
|
|
||||||
labelStyle?: any
|
|
||||||
labelShowBg?: boolean
|
|
||||||
labelBgStyle?: any
|
|
||||||
labelBgPadding?: [number, number]
|
|
||||||
labelBgBorderRadius?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface NodeProps<T = any> {
|
|
||||||
id: ElementId
|
|
||||||
type: string
|
|
||||||
data: T
|
|
||||||
selected: boolean
|
|
||||||
isConnectable: boolean
|
|
||||||
xPos?: number
|
|
||||||
yPos?: number
|
|
||||||
targetPosition?: Position
|
|
||||||
sourcePosition?: Position
|
|
||||||
isDragging?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type FitViewParams = {
|
|
||||||
padding?: number
|
|
||||||
includeHiddenNodes?: boolean
|
|
||||||
minZoom?: number
|
|
||||||
maxZoom?: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type FlowExportObject<T = any> = {
|
|
||||||
elements: Elements<T>
|
|
||||||
position: [number, number]
|
|
||||||
zoom: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
|
|
||||||
export type ProjectFunc = (position: XYPosition) => XYPosition
|
|
||||||
export type ToObjectFunc<T = any> = () => FlowExportObject<T>
|
|
||||||
|
|
||||||
export type OnLoadParams<T = any> = {
|
|
||||||
zoomIn: () => void
|
|
||||||
zoomOut: () => void
|
|
||||||
zoomTo: (zoomLevel: number) => void
|
|
||||||
fitView: FitViewFunc
|
|
||||||
project: ProjectFunc
|
|
||||||
getElements: () => Elements<T>
|
|
||||||
setTransform: (transform: FlowTransform) => void
|
|
||||||
toObject: ToObjectFunc<T>
|
|
||||||
}
|
|
||||||
|
|
||||||
export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
|
|
||||||
|
|
||||||
export interface Connection {
|
|
||||||
source: ElementId | null
|
|
||||||
target: ElementId | null
|
|
||||||
sourceHandle: ElementId | null
|
|
||||||
targetHandle: ElementId | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ConnectionMode {
|
|
||||||
Strict = 'strict',
|
|
||||||
Loose = 'loose'
|
|
||||||
}
|
|
||||||
|
|
||||||
export enum ConnectionLineType {
|
|
||||||
Bezier = 'default',
|
|
||||||
Straight = 'straight',
|
|
||||||
Step = 'step',
|
|
||||||
SmoothStep = 'smoothstep'
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ConnectionLineComponentProps = {
|
|
||||||
sourceX: number
|
|
||||||
sourceY: number
|
|
||||||
sourcePosition?: Position
|
|
||||||
targetX: number
|
|
||||||
targetY: number
|
|
||||||
targetPosition?: Position
|
|
||||||
connectionLineStyle?: any
|
|
||||||
connectionLineType: ConnectionLineType
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ConnectionLineComponent = DefineComponent<ConnectionLineComponentProps>
|
|
||||||
|
|
||||||
export type OnConnectFunc = (connection: Connection) => void
|
|
||||||
export type OnConnectStartParams = {
|
|
||||||
nodeId: ElementId | null
|
|
||||||
handleId: ElementId | null
|
|
||||||
handleType: HandleType | null
|
|
||||||
}
|
|
||||||
export type OnConnectStartFunc = (event: MouseEvent, params: OnConnectStartParams) => void
|
|
||||||
export type OnConnectStopFunc = (event: MouseEvent) => void
|
|
||||||
export type OnConnectEndFunc = (event: MouseEvent) => void
|
|
||||||
|
|
||||||
export type SetConnectionId = {
|
|
||||||
connectionNodeId: ElementId | null
|
|
||||||
connectionHandleId: ElementId | null
|
|
||||||
connectionHandleType: HandleType | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HandleElement extends XYPosition, Dimensions {
|
|
||||||
id?: ElementId | null
|
|
||||||
position: Position
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface HandleProps {
|
|
||||||
type: HandleType
|
|
||||||
position: Position
|
|
||||||
isConnectable?: boolean
|
|
||||||
onConnect?: OnConnectFunc
|
|
||||||
isValidConnection?: (connection: Connection) => boolean
|
|
||||||
id?: ElementId
|
|
||||||
}
|
|
||||||
|
|
||||||
export type NodePosUpdate = {
|
|
||||||
id: ElementId
|
|
||||||
pos: XYPosition
|
|
||||||
}
|
|
||||||
|
|
||||||
export type NodeDiffUpdate = {
|
|
||||||
id?: ElementId
|
|
||||||
diff?: XYPosition
|
|
||||||
isDragging?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type FlowTransform = {
|
|
||||||
x: number
|
|
||||||
y: number
|
|
||||||
zoom: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TranslateExtent = [[number, number], [number, number]]
|
|
||||||
export type NodeExtent = TranslateExtent
|
|
||||||
|
|
||||||
export type KeyCode = number | string
|
|
||||||
|
|
||||||
export enum PanOnScrollMode {
|
|
||||||
Free = 'free',
|
|
||||||
Vertical = 'vertical',
|
|
||||||
Horizontal = 'horizontal'
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ZoomPanHelperFunctions {
|
|
||||||
zoomIn: () => void
|
|
||||||
zoomOut: () => void
|
|
||||||
zoomTo: (zoomLevel: number) => void
|
|
||||||
transform: (transform: FlowTransform) => void
|
|
||||||
fitView: FitViewFunc
|
|
||||||
setCenter: (x: number, y: number, zoom?: number) => void
|
|
||||||
fitBounds: (bounds: Rect, padding?: number) => void
|
|
||||||
project: (position: XYPosition) => XYPosition
|
|
||||||
}
|
|
||||||
|
|
||||||
export type OnEdgeUpdateFunc<T = any> = (oldEdge: Edge<T>, newConnection: Connection) => void
|
|
||||||
|
|
||||||
export type NodeDimensionUpdate = {
|
|
||||||
id: ElementId
|
|
||||||
nodeElement: HTMLDivElement
|
|
||||||
forceUpdate?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export type InitD3ZoomPayload = {
|
|
||||||
d3Zoom: ZoomBehavior<Element, unknown>
|
|
||||||
d3Selection: D3Selection<Element, unknown, null, undefined>
|
|
||||||
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
|
||||||
transform: Transform
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RevueFlowState {
|
|
||||||
width: number
|
|
||||||
height: number
|
|
||||||
transform: Transform
|
|
||||||
nodes: Node[]
|
|
||||||
edges: Edge[]
|
|
||||||
selectedElements: Elements | null
|
|
||||||
selectedNodesBbox: Rect
|
|
||||||
|
|
||||||
d3Zoom: ZoomBehavior<Element, unknown> | null
|
|
||||||
d3Selection: D3Selection<Element, unknown, null, undefined> | null
|
|
||||||
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
|
||||||
minZoom: number
|
|
||||||
maxZoom: number
|
|
||||||
translateExtent: TranslateExtent
|
|
||||||
nodeExtent: NodeExtent
|
|
||||||
|
|
||||||
nodesSelectionActive: boolean
|
|
||||||
selectionActive: boolean
|
|
||||||
|
|
||||||
userSelectionRect: SelectionRect
|
|
||||||
|
|
||||||
connectionNodeId: ElementId | null
|
|
||||||
connectionHandleId: ElementId | null
|
|
||||||
connectionHandleType: HandleType | null
|
|
||||||
connectionPosition: XYPosition
|
|
||||||
connectionMode: ConnectionMode
|
|
||||||
|
|
||||||
snapToGrid: boolean
|
|
||||||
snapGrid: SnapGrid
|
|
||||||
|
|
||||||
nodesDraggable: boolean
|
|
||||||
nodesConnectable: boolean
|
|
||||||
elementsSelectable: boolean
|
|
||||||
|
|
||||||
multiSelectionActive: boolean
|
|
||||||
|
|
||||||
revueFlowVersion: string
|
|
||||||
|
|
||||||
onConnect?: OnConnectFunc
|
|
||||||
onConnectStart?: OnConnectStartFunc
|
|
||||||
onConnectStop?: OnConnectStopFunc
|
|
||||||
onConnectEnd?: OnConnectEndFunc
|
|
||||||
}
|
|
||||||
|
|
||||||
export type RevueFlowActions = {
|
|
||||||
setElements: (elements: Elements) => void
|
|
||||||
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void
|
|
||||||
updateNodePos: (payload: NodePosUpdate) => void
|
|
||||||
updateNodePosDiff: (payload: NodeDiffUpdate) => void
|
|
||||||
setUserSelection: (mousePos: XYPosition) => void
|
|
||||||
updateUserSelection: (mousePos: XYPosition) => void
|
|
||||||
unsetUserSelection: () => void
|
|
||||||
addSelectedElements: (elements: Elements) => void
|
|
||||||
initD3Zoom: (payload: InitD3ZoomPayload) => void
|
|
||||||
setMinZoom: (zoom: number) => void
|
|
||||||
setMaxZoom: (zoom: number) => void
|
|
||||||
setTranslateExtent: (translateExtent: TranslateExtent) => void
|
|
||||||
setNodeExtent: (nodeExtent: NodeExtent) => void
|
|
||||||
resetSelectedElements: () => void
|
|
||||||
unsetNodesSelection: () => void
|
|
||||||
updateSize: (size: Dimensions) => void
|
|
||||||
setConnectionNodeId: (payload: SetConnectionId) => void
|
|
||||||
setInteractive: (isInteractive: boolean) => void
|
|
||||||
}
|
|
||||||
|
|
||||||
export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>
|
|
||||||
|
|
||||||
export type UpdateNodeInternals = (nodeId: ElementId) => void
|
|
||||||
|
|
||||||
export interface RevueFlowProps extends Omit<HTMLAttributes, 'onLoad'> {
|
|
||||||
modelValue: Elements
|
|
||||||
nodeTypes?: Record<string, NodeType>
|
|
||||||
edgeTypes?: Record<string, EdgeType>
|
|
||||||
connectionMode?: ConnectionMode
|
|
||||||
connectionLineType?: ConnectionLineType
|
|
||||||
connectionLineStyle?: CSSProperties
|
|
||||||
connectionLineComponent?: ConnectionLineComponent
|
|
||||||
deleteKeyCode?: KeyCode
|
|
||||||
selectionKeyCode?: KeyCode
|
|
||||||
multiSelectionKeyCode?: KeyCode
|
|
||||||
zoomActivationKeyCode?: KeyCode
|
|
||||||
snapToGrid?: boolean
|
|
||||||
snapGrid?: [number, number]
|
|
||||||
onlyRenderVisibleElements?: boolean
|
|
||||||
nodesDraggable?: boolean
|
|
||||||
nodesConnectable?: boolean
|
|
||||||
elementsSelectable?: boolean
|
|
||||||
selectNodesOnDrag?: boolean
|
|
||||||
paneMoveable?: boolean
|
|
||||||
minZoom?: number
|
|
||||||
maxZoom?: number
|
|
||||||
defaultZoom?: number
|
|
||||||
defaultPosition?: [number, number]
|
|
||||||
translateExtent?: TranslateExtent
|
|
||||||
nodeExtent?: NodeExtent
|
|
||||||
arrowHeadColor?: string
|
|
||||||
markerEndId?: string
|
|
||||||
zoomOnScroll?: boolean
|
|
||||||
zoomOnPinch?: boolean
|
|
||||||
panOnScroll?: boolean
|
|
||||||
panOnScrollSpeed?: number
|
|
||||||
panOnScrollMode?: PanOnScrollMode
|
|
||||||
zoomOnDoubleClick?: boolean
|
|
||||||
edgeUpdaterRadius?: number
|
|
||||||
nodeTypesId?: string
|
|
||||||
edgeTypesId?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface GraphViewProps extends Required<RevueFlowProps> {
|
|
||||||
selectionKeyCode: KeyCode
|
|
||||||
deleteKeyCode: KeyCode
|
|
||||||
multiSelectionKeyCode: KeyCode
|
|
||||||
connectionLineType: ConnectionLineType
|
|
||||||
snapToGrid: boolean
|
|
||||||
snapGrid: [number, number]
|
|
||||||
onlyRenderVisibleElements: boolean
|
|
||||||
defaultZoom: number
|
|
||||||
defaultPosition: [number, number]
|
|
||||||
arrowHeadColor: string
|
|
||||||
selectNodesOnDrag: boolean
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -0,0 +1,60 @@
|
|||||||
|
import { ComponentPublicInstance } from 'vue'
|
||||||
|
import { XYPosition } from './types'
|
||||||
|
import { ElementId, Position } from './index'
|
||||||
|
|
||||||
|
export interface Node<T = any> {
|
||||||
|
id: ElementId
|
||||||
|
position: XYPosition
|
||||||
|
type?: string
|
||||||
|
__rf: {
|
||||||
|
position: XYPosition
|
||||||
|
isDragging?: boolean
|
||||||
|
width: number | null
|
||||||
|
height: number | null
|
||||||
|
handleBounds?: any
|
||||||
|
}
|
||||||
|
data?: T
|
||||||
|
style?: any
|
||||||
|
className?: string
|
||||||
|
targetPosition?: Position
|
||||||
|
sourcePosition?: Position
|
||||||
|
isHidden?: boolean
|
||||||
|
draggable?: boolean
|
||||||
|
selectable?: boolean
|
||||||
|
connectable?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type NodePosUpdate = {
|
||||||
|
id: ElementId
|
||||||
|
pos: XYPosition
|
||||||
|
}
|
||||||
|
|
||||||
|
export type NodeDiffUpdate = {
|
||||||
|
id?: ElementId
|
||||||
|
diff?: XYPosition
|
||||||
|
isDragging?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TranslateExtent = [[number, number], [number, number]]
|
||||||
|
export type NodeExtent = TranslateExtent
|
||||||
|
|
||||||
|
export type NodeDimensionUpdate = {
|
||||||
|
id: ElementId
|
||||||
|
nodeElement: HTMLDivElement
|
||||||
|
forceUpdate?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NodeProps<T = any> {
|
||||||
|
id: ElementId
|
||||||
|
type: string
|
||||||
|
data: T
|
||||||
|
selected: boolean
|
||||||
|
isConnectable: boolean
|
||||||
|
xPos?: number
|
||||||
|
yPos?: number
|
||||||
|
targetPosition?: Position
|
||||||
|
sourcePosition?: Position
|
||||||
|
isDragging?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type NodeType = ComponentPublicInstance<NodeProps>
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import { Selection as D3Selection, ZoomBehavior } from 'd3'
|
||||||
|
import { FitViewFunc, FlowTransform, Rect, Transform, XYPosition } from './types'
|
||||||
|
|
||||||
|
export type KeyCode = number | string
|
||||||
|
|
||||||
|
export enum PanOnScrollMode {
|
||||||
|
Free = 'free',
|
||||||
|
Vertical = 'vertical',
|
||||||
|
Horizontal = 'horizontal',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ZoomPanHelperFunctions {
|
||||||
|
zoomIn: () => void
|
||||||
|
zoomOut: () => void
|
||||||
|
zoomTo: (zoomLevel: number) => void
|
||||||
|
transform: (transform: FlowTransform) => void
|
||||||
|
fitView: FitViewFunc
|
||||||
|
setCenter: (x: number, y: number, zoom?: number) => void
|
||||||
|
fitBounds: (bounds: Rect, padding?: number) => void
|
||||||
|
project: (position: XYPosition) => XYPosition
|
||||||
|
}
|
||||||
|
|
||||||
|
export type InitD3ZoomPayload = {
|
||||||
|
d3Zoom: ZoomBehavior<Element, unknown>
|
||||||
|
d3Selection: D3Selection<Element, unknown, null, undefined>
|
||||||
|
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
||||||
|
transform: Transform
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { ZoomBehavior, Selection } from 'd3'
|
||||||
|
import { Store } from 'pinia'
|
||||||
|
import { ElementId, Elements, Rect, SelectionRect, SnapGrid, Transform, XYPosition } from './types'
|
||||||
|
import { HandleType } from './handle'
|
||||||
|
import { ConnectionMode, OnConnectEndFunc, OnConnectFunc, OnConnectStartFunc, OnConnectStopFunc } from './connection'
|
||||||
|
import { Edge } from './edge'
|
||||||
|
import { Node, NodeExtent, TranslateExtent } from './node'
|
||||||
|
import { RevueFlowActions } from './actions'
|
||||||
|
|
||||||
|
export interface RevueFlowState {
|
||||||
|
width: number
|
||||||
|
height: number
|
||||||
|
transform: Transform
|
||||||
|
nodes: Node[]
|
||||||
|
edges: Edge[]
|
||||||
|
selectedElements: Elements | null
|
||||||
|
selectedNodesBbox: Rect
|
||||||
|
|
||||||
|
d3Zoom: ZoomBehavior<Element, unknown> | null
|
||||||
|
d3Selection: Selection<Element, unknown, null, undefined> | null
|
||||||
|
d3ZoomHandler: ((this: Element, event: any, d: unknown) => void) | undefined
|
||||||
|
minZoom: number
|
||||||
|
maxZoom: number
|
||||||
|
translateExtent: TranslateExtent
|
||||||
|
nodeExtent: NodeExtent
|
||||||
|
|
||||||
|
nodesSelectionActive: boolean
|
||||||
|
selectionActive: boolean
|
||||||
|
|
||||||
|
userSelectionRect: SelectionRect
|
||||||
|
|
||||||
|
connectionNodeId: ElementId | null
|
||||||
|
connectionHandleId: ElementId | null
|
||||||
|
connectionHandleType: HandleType | null
|
||||||
|
connectionPosition: XYPosition
|
||||||
|
connectionMode: ConnectionMode
|
||||||
|
|
||||||
|
snapToGrid: boolean
|
||||||
|
snapGrid: SnapGrid
|
||||||
|
|
||||||
|
nodesDraggable: boolean
|
||||||
|
nodesConnectable: boolean
|
||||||
|
elementsSelectable: boolean
|
||||||
|
|
||||||
|
multiSelectionActive: boolean
|
||||||
|
|
||||||
|
revueFlowVersion: string
|
||||||
|
|
||||||
|
onConnect?: OnConnectFunc
|
||||||
|
onConnectStart?: OnConnectStartFunc
|
||||||
|
onConnectStop?: OnConnectStopFunc
|
||||||
|
onConnectEnd?: OnConnectEndFunc
|
||||||
|
}
|
||||||
|
|
||||||
|
export type RevueFlowStore = Store<string, RevueFlowState, any, RevueFlowActions>
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { Edge } from './edge'
|
||||||
|
import { Node } from './node'
|
||||||
|
|
||||||
|
export type ElementId = string
|
||||||
|
|
||||||
|
export type FlowElement<T = any> = Node<T> | Edge<T>
|
||||||
|
|
||||||
|
export type Elements<T = any> = Array<FlowElement<T>>
|
||||||
|
|
||||||
|
export type Transform = [number, number, number]
|
||||||
|
|
||||||
|
export enum Position {
|
||||||
|
Left = 'left',
|
||||||
|
Top = 'top',
|
||||||
|
Right = 'right',
|
||||||
|
Bottom = 'bottom',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface XYPosition {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Dimensions {
|
||||||
|
width: number
|
||||||
|
height: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Rect extends Dimensions, XYPosition {}
|
||||||
|
|
||||||
|
export type SnapGrid = [number, number]
|
||||||
|
|
||||||
|
export enum ArrowHeadType {
|
||||||
|
Arrow = 'arrow',
|
||||||
|
ArrowClosed = 'arrowclosed',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum BackgroundVariant {
|
||||||
|
Lines = 'lines',
|
||||||
|
Dots = 'dots',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SelectionRect extends Rect {
|
||||||
|
startX: number
|
||||||
|
startY: number
|
||||||
|
draw: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FitViewParams = {
|
||||||
|
padding?: number
|
||||||
|
includeHiddenNodes?: boolean
|
||||||
|
minZoom?: number
|
||||||
|
maxZoom?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FlowExportObject<T = any> = {
|
||||||
|
elements: Elements<T>
|
||||||
|
position: [number, number]
|
||||||
|
zoom: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FlowTransform = {
|
||||||
|
x: number
|
||||||
|
y: number
|
||||||
|
zoom: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type FitViewFunc = (fitViewOptions?: FitViewParams) => void
|
||||||
|
export type ProjectFunc = (position: XYPosition) => XYPosition
|
||||||
|
export type ToObjectFunc<T = any> = () => FlowExportObject<T>
|
||||||
|
|
||||||
|
export type OnLoadParams<T = any> = {
|
||||||
|
zoomIn: () => void
|
||||||
|
zoomOut: () => void
|
||||||
|
zoomTo: (zoomLevel: number) => void
|
||||||
|
fitView: FitViewFunc
|
||||||
|
project: ProjectFunc
|
||||||
|
getElements: () => Elements<T>
|
||||||
|
setTransform: (transform: FlowTransform) => void
|
||||||
|
toObject: ToObjectFunc<T>
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OnLoadFunc<T = any> = (params: OnLoadParams<T>) => void
|
||||||
Reference in New Issue
Block a user